master
zhong 3 years ago
commit ff434946f3

@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

23
.gitignore vendored

@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

@ -0,0 +1,19 @@
# newvue
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

@ -0,0 +1,14 @@
module.exports = {
"presets": [
"@vue/cli-plugin-babel/preset"
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$" />
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

25688
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,25 @@
{
"name": "newvue",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^0.24.0",
"core-js": "^3.6.5",
"element-ui": "^2.15.6",
"vue": "^2.6.11",
"vue-router": "^3.2.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-plugin-component": "^1.1.1",
"less": "^4.1.2",
"vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.6.11"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

@ -0,0 +1,19 @@
<template>
<div id="app">
<router-view>
</router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.8 KiB

@ -0,0 +1,12 @@
html,body,#app{
height: 100%;
margin: 0;
padding: 0;
}
.el-breadcrumb{
margin-bottom: 15px;
font-size: 12px;
}
.el-card{
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) ! important;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

@ -0,0 +1,58 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

@ -0,0 +1,279 @@
<template>
<div class="login_container">
<div class="login_box">
<div class="avatar_box">
<img src="../assets/OIP-C.jpeg" alt="">
</div>
<div class="title">物联网管理系统 </div>
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRule" class = "login_form" >
<!--使用ref获取el-form对象, :model绑定对象:rules绑定rules,class指定类名用于样式表-->
<el-form-item prop="username" label="登录用户名">
<!--使用prop指定el-form-item使用的rule-->
<el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
<!--使用v-model绑定el-input的el-form对象属性-->
</el-form-item>
<el-form-item prop="password" label="登录账号">
<el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
</el-form-item >
<el-form :model="identifyCode">
<div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode">
<span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
</div>
<el-form-item prop="identify" label="验证码(区分大小写)">
<el-input v-model="identifyCode.identifyCode" ></el-input>
</el-form-item >
</el-form>
<el-form-item class="btns">
<el-button type="primary" @click="login('loginFormRef')"></el-button>
<el-button type="primary" @click="dialogFormVisible = true">注册</el-button>
<!--@click 点击事件执行函数-->
<el-button type="info" @click="resetLoginForm()"></el-button>
</el-form-item>
</el-form>
</div>
<el-dialog title="账号注册" :visible.sync="dialogFormVisible" width=30%>
<el-form ref="registerFormRef" :model="registerForm" :rules="loginFormRule" class="login_form">
<el-form-item prop="username" label="注册账号" :label-width="formLabelWidth">
<el-input v-model="registerForm.username" prefix-icon="el-icon-user"></el-input>
</el-form-item>
<el-form-item prop="password" label="注册密码" :label-width="formLabelWidth">
<el-input v-model="registerForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
</el-form-item>
<el-form :model="identifyCode">
<div class="ValidCode disabled-select" :style="`width:${width}; height:${height}`" @click="refreshCode">
<span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{{item.code}}</span>
</div>
<el-form-item prop="identify" label="验证码(区分大小写)" :label-width="formLabelWidth">
<el-input v-model="identifyCode.identifyCode" ></el-input>
</el-form-item>
</el-form>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="register_cancel()"> </el-button>
<el-button type="primary" @click="register_success('registerFormRef')"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
width: {
type: String,
default: '100px'
},
height: {
type: String,
default: '34px'
},
length: {
type: Number,
default: 4
}
},
data(){
return{
identifyCode:{
identifyCode:'',
},
ReturnData:[],
login_data:[],
dialogFormVisible: false,
formLabelWidth: '',
codeList:[],
identify:'',
registerForm:{ //el-form
username:'', //
password:'',
token:''
},
loginForm:{ //el-form
username: '123456', //
password: '123456',
token:''
},
loginFormRule:{ //
username:[
{ required: true, message: '请输入登录账号', trigger: 'blur' }, //trigger: 'blur'
{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
],
password:[
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
],
}
}
},
methods:{
resetLoginForm(){ //
this.$refs.loginFormRef.resetFields();
},
login(formName){ //
//this.$refs.loginFormRef.validate(async(valid)=>{console.log(valid); //使async
/* if(!valid) return;
const {data:res} = await this.$http.post("login",this.loginForm); //axios{data:res}使await
//awaitasync
if(res.meta.status!==200) return this.$message.error("登录失败");
this.$message.success("登录成功");
console.log(res);
window.sessionStorage.setItem("token",res.data.token); //tokensessionstorage
this.$router.push("/home"); ///home
});*/
this.$refs[formName].validate((valid) => {
if (valid) { //validture,,false
if (this.identifyCode.identifyCode!==this.identify)
return this.$message.error("验证码错误")
this.request.post("/user/login",this.loginForm).then(res =>{
this.ReturnData = res;
if(this.ReturnData.token===null){
this.$message.error("登录失败,账号或密码错误");
}else{
window.sessionStorage.setItem("user",this.ReturnData)
window.sessionStorage.setItem("token",this.ReturnData.token)
window.localStorage.setItem("token",this.ReturnData.token)
this.$message.success("登录成功");
/* this.request.post("/user/updateState",this.loginForm.username,"1").then(res=>{
console.log(res);
})*/
window.sessionStorage.setItem("username",this.loginForm.username);
this.$router.push("/home"); ///home
}
})
} else {
return this.$message.error("输入非法");
}
})
},
register_success(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
if(this.identify!==this.identifyCode.identifyCode)
return this.$message.error("验证码错误")
this.request.post("/user/register",this.registerForm).then(res=>{
this.ReturnData = res;
if(this.ReturnData.token===null){
this.$message.error("注册失败,已有账号");
}else{
window.sessionStorage.setItem("user",this.ReturnData)
window.sessionStorage.setItem("token",this.ReturnData.token)
window.localStorage.setItem("token",this.ReturnData.token)
this.$message.success("注册成功");
/* this.request.post("/user/updateState",this.registerForm.username,"1").then(res=>{
console.log(res);
})*/
window.sessionStorage.setItem("username",this.registerForm.username);
this.$router.push("/home"); ///home
}
})
this.dialogFormVisible = false;
} else {
this.$message.error("输入非法");
}
})
},
register_cancel(){
this.$refs.registerFormRef.resetFields();
this.dialogFormVisible = false;
},
refreshCode () {
this.createdCode()
},
createdCode () { //
const len = this.length
const codeList = []
const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789'
const charsLen = chars.length
this.identify=''
//
for (let i = 0; i < len; i++) {
const rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
codeList.push({
code: chars.charAt(Math.floor(Math.random() * charsLen)),
color: `rgb(${rgb})`,
fontSize: `1${[Math.floor(Math.random() * 10)]}px`,
padding: `${[Math.floor(Math.random() * 10)]}px`,
transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
})
this.identify=this.identify+codeList[i].code;
}
//
this.codeList = codeList
//
this.$emit('update:value', codeList.map(item => item.code).join(''))
},
getStyle (data) {
return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
}
},
mounted () {
this.createdCode()
},
}
</script>
<style lang="less" scoped>
.title{
position: relative;
top:80px;
left: 170px;
}
.login_container{
background-color:cornflowerblue ;
height: 100%;
}
.login_box{
width: 450px;
height: 500px;
background-color:white ;
border-radius:3px ;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
.avatar_box{
height: 130px;
width: 130px;
border: 1px solid #eee;
border-radius: 50%;
padding: 10px;
box-shadow: 0 0 10px white;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
background-color: white;
img{
width: 100%;
height: 100%;
border-radius:50% ;
background: gray;
}
}
.btns{
display: flex;
justify-content: flex-end;
}
.login_form{
width: 100%;
padding: 0 20px;
position: absolute;
bottom: 0;
box-sizing: border-box;
}
.ValidCode{
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
span{
display: inline-block;
}
}
}
</style>

@ -0,0 +1,328 @@
<template>
<div>
<!--面包屑导航区-->
<el-container>
<el-header>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>设备管理</el-breadcrumb-item>
<el-breadcrumb-item>设备网点</el-breadcrumb-item>
</el-breadcrumb>
<el-form :inline="true">
<el-form-item>
<el-row>
<el-button type="primary" @click="dialogFormVisible=true"></el-button>
<el-button type="danger"@click="mulDelete()"></el-button>
</el-row>
</el-form-item>
<el-form-item >
<el-select v-model="value" clearable placeholder="搜索方式">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-input
placeholder="请输入内容"
v-model="search"
clearable>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search_some()"></el-button>
<el-button type="primary" @click="refresh()" icon="el-icon-refresh"></el-button>
</el-form-item>
</el-form>
</el-header>
<el-main>
<el-table
:data="tableData"
height="450"
border
style="width: 100%"
@selection-change="handleSelectionChange"
@cell-click="cellHandleclick">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="id"
label="编号"
width="80">
</el-table-column>
<el-table-column
prop="kind"
label="种类"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="名称"
width="180">
</el-table-column>
<el-table-column
prop="network_id"
label="网点编号"
width="180">
</el-table-column>
<el-table-column
prop="state"
label="状态"
width="100">
</el-table-column>
<el-table-column label="打开" width="85">
<el-button type="primary" @click="openVisible=true"></el-button>
</el-table-column>
<el-table-column label="关闭" width="85">
<el-button type="primary" @click="closeVisible=true"></el-button>
</el-table-column>
<el-table-column label="修改" width="85">
<el-button type="primary" @click="changeFormVisible=true"></el-button>
</el-table-column>
<el-table-column label="删除" width="85">
<el-button type="danger" @click="deleteVisible=true"></el-button>
</el-table-column>
</el-table>
</el-main>
<el-footer>
</el-footer>
</el-container>
<el-dialog title="新增" :visible.sync="dialogFormVisible" width=30%>
<el-form ref="addFormRef" :model="addForm" class="add_form">
<el-form-item label="编号" :label-width="formLabelWidth">
<el-input v-model="addForm.id" prefix-icon="el-icon-user"></el-input>
</el-form-item>
<el-form-item label="种类" :label-width="formLabelWidth">
<el-input v-model="addForm.kind" prefix-icon="el-icon-user"></el-input>
</el-form-item>
<el-form-item label="名称" :label-width="formLabelWidth">
<el-input v-model="addForm.name" prefix-icon="el-icon-lock"></el-input>
</el-form-item>
<el-form-item label="网点编号" :label-width="formLabelWidth">
<el-input v-model="addForm.network_id" prefix-icon="el-icon-user"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="add_cancel()"> </el-button>
<el-button type="primary" @click="add_success()"> </el-button>
</div>
</el-dialog>
<el-dialog title="修改" :visible.sync="changeFormVisible" width=30%>
<el-form ref="changeFormRef" :model="changeForm" class="change_form">
<el-form-item label="种类" :label-width="formLabelWidth">
<el-input v-model="changeForm.kind" prefix-icon="el-icon-user"></el-input>
</el-form-item>
<el-form-item label="名称" :label-width="formLabelWidth">
<el-input v-model="changeForm.name" prefix-icon="el-icon-lock"></el-input>
</el-form-item>
<el-form-item label="网点编号" :label-width="formLabelWidth">
<el-input v-model="changeForm.company" prefix-icon="el-icon-user"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="updateCancel()"> </el-button>
<el-button type="primary" @click="updateData()"> </el-button>
</div>
</el-dialog>
<el-dialog title="是否确定删除" :visible.sync="deleteVisible" width=30%>
<div slot="footer" class="dialog-footer">
<el-button @click="deleteVisible=false"> </el-button>
<el-button type="primary" @click="deleteData()"> </el-button>
</div>
</el-dialog>
<el-dialog title="是否确定打开" :visible.sync="openVisible" width=30%>
<div slot="footer" class="dialog-footer">
<el-button @click="openVisible=false"> </el-button>
<el-button type="primary" @click="open_device()"> </el-button>
</div>
</el-dialog>
<el-dialog title="是否确定关闭" :visible.sync="closeVisible" width=30%>
<div slot="footer" class="dialog-footer">
<el-button @click="closeVisible=false"> </el-button>
<el-button type="primary" @click="close_device()"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "device",
data() {
return {
dialogFormVisible: false,
changeFormVisible:false,
deleteVisible:false,
openVisible:false,
closeVisible:false,
formLabelWidth:'',
tableData: [],
search:'',
searchForm:{
id:'',
kind:'',
name:'',
network_id: '',
state: ''
},
addForm:{
id:'',
kind:'',
name:'',
network_id: '',
state: ''
},
changeForm:{
id:'',
kind:'',
name:'',
network_id: '',
state: ''
},
options: [{
value: 'kind',
label: '种类'
}, {
value: 'name',
label: '名称'
},{
value: 'network_id',
label: '网点编号'
}],
value:'',
multipleSelection:[],
deleteId:'',
openId:'',
closeId:'',
}
},created() {
this.request.get("/user/deviceFind").then(res=>{
this.tableData = res;
})
},
methods:{
add_success(){
this.request.post("/user/deviceInsert",this.addForm).then(res=>{
if (res){
this.$message.success("新增成功");
location.reload()
}
else
this.$message.error("新增失败,编号不能为空或编号已存在");
})
this.dialogFormVisible = false;
},
add_cancel(){
this.dialogFormVisible = false;
},
mulDelete(){
if(!this.multipleSelection){
return this.$message.error("请至少勾选一条");
}
var ids= this.multipleSelection.map(item => item.id).join();
this.request.get("/user/deviceMulDelete?device_id="+ids).then(res=>{
if(res>0){
location.reload();
this.$message.success("成功删除"+res+"条");
}else {
this.$message.error("删除失败");
}
})
},
search_some(){
if(this.value.toString()==="name")
this.searchForm.name = this.search;
else if(this.value.toString()==="kind")
this.searchForm.kind = this.search;
else if(this.value.toString()==="network_id")
this.searchForm.kind = this.search;
else
return this.$message.error("请选择搜索字段");
if(this.search==="" || this.search==null)
return this.$message.error("搜索框不能为空")
else {
this.request.post("/user/deviceSearch",this.searchForm).then(res=>{
this.tableData = res;
this.searchForm.name='';
this.searchForm.kind='';
})
}
},
refresh(){
this.request.get("/user/deviceFind").then(res=>{
this.tableData = res;
})
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
updateData(){
this.request.post("/user/deviceUpdate",this.changeForm).then(res=>{
this.changeFormVisible=false;
if(res===true){
location.reload();
this.$message.success("修改成功");
}
else
this.$message.error("修改失败");
})
},
cellHandleclick(row, column, cell, event){
if(column.label==="修改"){
this.changeForm.id = row.id;
}else if(column.label==="删除"){
this.deleteId=row.id;
}else if(column.label==="打开"){
this.openId=row.id;
}else if(column.label==="关闭"){
this.closeId=row.id;
}
},
updateCancel(){
this.changeFormVisible =false;
},
deleteData(){
this.request.get("/user/deviceDelete",{params:{id:this.deleteId}}).then(res=>{
this.deleteVisible=false;
if (res){
location.reload();
this.$message.success("删除成功");
}else
this.$message.error("删除失败");
})
},
open_device(){
this.request.get("/user/deviceStateUpdate",{params:{state:"运行",id:this.openId}}).then(res=>{
this.openVisible=false;
if (res){
location.reload();
this.$message.success("打开成功");
}else
this.$message.error("打开失败");
})
},
close_device(){
this.request.get("/user/deviceStateUpdate",{params:{state:"关闭",id:this.closeId}}).then(res=>{
this.closeVisible=false;
if (res){
location.reload();
this.$message.success("关闭成功");
}else
this.$message.error("关闭失败");
})
}
}
}
</script>
<style lang="less" scoped>
</style>

@ -0,0 +1,141 @@
<template>
<el-container>
<!--头部区域-->
<el-header>
<div>
<img src="../assets/OIP-C.jpeg" alt="">
<span>物联网管理系统</span>
</div>
<el-button type="info" @click="logout()">退</el-button>
</el-header>
<el-container>
<!--侧边栏区域-->
<el-aside :width="iscollapse ? '64px':'200px'"> <!--:width动态绑定根据iscollapse的值是否折叠决定侧边栏的宽度-->
<div class="toggle-button" @click="toggleCollapse()">|||</div>
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409eff"
:unique-opened="true" :collapse="iscollapse" :collapse-transition="false" :router="true"
:default-active="activePath"> <!--:用于属性绑定:unique-opened用于菜单选项唯一展开:collapse用于是否水平折叠收起菜单;:collapse-transition用于是否显示折叠动画;:router用于是否使用 vue-router 的模式启用该模式会在激活导航时以 index 作为 path 进行路由跳转:default-active为当前激活菜单的 index-->
<!--侧边栏菜单区域-->
<el-submenu :index="item.id +'' " v-for="item in menuList" :key = "item.id"> <!--使menuListv-for:key;使:index-->
<!--一级菜单-->
<template slot="title">
<!--一级菜单模板区-->
<i :class="iconList[item.id]"></i> <!--使用:class动态绑定图标-->
<!--图标-->
<span>{{item.name}}</span> <!--动态显示文本-->
<!--文本-->
</template>
<el-menu-item :index="'/'+subitem.path" v-for="subitem in item.children" :key="subitem.id" @click="saveNavState('/'+subitem.path)"> <!--,index'/'+subitem.path-->
<!--二级菜单-->
<i class="el-icon-menu"></i>
<!--图标-->
<span>{{subitem.name}}</span>
<!--文本-->
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!--主体区域-->
<el-main>
<router-view></router-view> <!---->
</el-main>
</el-container>
</el-container>
</template>
<script>
import request from "@/utils/request";
export default {
data(){
return{
menuList:[],
iconList:{
'1':'el-icon-cpu',
'2':'el-icon-setting',
'3':'el-icon-video-camera',
},
iscollapse:false,
//
activePath:''
//
}
//
},
created() { //
this.getMenuList();
this.activePath = window.sessionStorage.getItem("activePath");
},
methods:{
logout(){
/* this.request.post("/user/updateState",window.sessionStorage.getItem("username"),"0").then(res=>{
})*/
window.sessionStorage.clear();
this.$router.push("/login");
},
/*async getMenuList(){ //获取所有的菜单列表
const {data:res} = await this.$http.get("menus");
if(res.meta.status!=200) return this.$message.error(res.meta.msg);
this.menuList = res.data
console.log(res);
}, */
getMenuList(){
this.menuList = [
{id:'1',name:'设备管理',children:[{id:'11',name:'设备网点',path:'network'},{id:'12',name:'查看设备',path:'device'}]},
{id:'2',name:'系统管理',children:[{id:'21',name:'查看用户',path:'user'},{id:'22',name:'查看会员',path:'member'}]},
{id:'3',name:'交易记录',children:[{id:'31',name:'查看订单',path:'deal'},{id:'32',name:'充值记录',path:'recharge'}]}];
},
toggleCollapse(){ //
this.iscollapse=!this.iscollapse;
},
saveNavState(activePath){ //sessionStorage
window.sessionStorage.setItem('activePath',activePath);
this.activePath = activePath; //activePath
}
}
}
</script>
<style lang="less" scoped>
.el-container{
height: 100%;
}
.el-aside{
background-color:#333744;
.el-menu{
border-right: none; //线
}
}
.el-header{
background-color:#373d41;
display: flex;
justify-content: space-between;
padding-left: 0;
align-items: center;
color: #fff;
font-size: 20px;
> div{
display: flex;
align-items: center;
span{
margin-left: 15px;
}
}
}
.el-main{
background-color: #eaedf1;
}
.toggle-button{
background-color: gray;
font-size: 10px; //
line-height: 24px;
color: white; //
text-align: center; //
letter-spacing: 0.2em; //
cursor: pointer; //pointer
}
</style>

@ -0,0 +1,128 @@
<template>
<div>
<!--面包屑导航区-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>系统管理</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
</el-breadcrumb>
<!--卡片视图区-->
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>用户信息</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="dialogFormVisible = true">修改密码</el-button>
</div>
<div key="username" class="text item">
{{'用户账号:'+display.username}}
</div>
<div key="phone" class="text item">
{{'用户电话:'+display.phone}}
</div>
<div key="email" class="text item">
{{'用户邮箱:'+display.email}}
</div>
</el-card>
<el-dialog title="修改密码" :visible.sync="dialogFormVisible" width=30%>
<el-form ref="changeFormRef" :model="changeForm" >
<el-form-item label="旧密码" :label-width="formLabelWidth">
<el-input v-model="changeForm.old_password" prefix-icon="el-icon-lock" type="password"></el-input>
</el-form-item>
<el-form-item label="新密码" :label-width="formLabelWidth">
<el-input v-model="changeForm.new_password" prefix-icon="el-icon-lock" type="password"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false"> </el-button>
<el-button type="primary" @click="change()"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: "user",
data(){
return{
dialogFormVisible: false,
formLabelWidth: '',
display:{
username:'',
phone:'',
email:''
},
login:{
username:'',
password:''
},
changeForm:{
old_password:'',
new_password:'',
},
changeUser:{
username:'',
password:'',
state:'',
phone:'',
email:''
}
}
},
methods:{
change(){
this.changeUser.username = window.sessionStorage.getItem("username");
this.changeUser.password = this.changeForm.new_password;
this.changeUser.state = "0";
this.changeUser.phone = "无";
this.changeUser.email = "无";
this.login.username = this.changeUser.username;
this.login.password = this.changeForm.old_password;
this.request.post("/user/login",this.login).then(res =>{
if(!res){
this.$message.error("修改失败");
}else {
this.request.post("/user/change",this.changeUser).then(res =>{
if(!res){
this.$message.error("修改失败");
}else
this.$message.success("修改成功");
})
}
})
this.dialogFormVisible = false;
}
},
created:function (){
this.display.username = window.sessionStorage.getItem("username");
this.request.get("/user/find?username="+this.display.username).then(res=>{
console.log(res[0]);
this.display = res[0];
})
}
}
</script>
<style lang="less" scoped>
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}
</style>

@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name: "register"
}
</script>
<style scoped>
</style>

@ -0,0 +1,110 @@
<template>
<div>
<!--面包屑导航区显示当前菜单路径-->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>用户列表</el-breadcrumb-item>
</el-breadcrumb>
<!--卡片视图区-->
<el-card class="box-card">
<!--el-row为行属性,gutter属性为该行中每列之间的间隔-->
<el-row :gutter="20">
<!--el-col为列属性,span属性为该列的宽度-->
<el-col :span='7'>
<!--搜索输入框和添加按钮-->
<el-input placeholder="请输入内容" >
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</el-col>
<el-col :span='4'>
<el-button type="primary">
添加用户
</el-button>
</el-col>
</el-row>
<!--用户列表区-->
<el-table :data="userList" border stripe>
<el-table-column type="index"> <!--索引列-->
</el-table-column>
<el-table-column label= '姓名' prop="username">
</el-table-column>
<el-table-column label= '邮箱' prop="email">
</el-table-column>
<el-table-column label= '电话' prop="mobile">
</el-table-column>
<el-table-column label= '角色' prop="role_name">
</el-table-column>
<el-table-column label= '状态' prop="mg_state">
<template slot-scope="scope"> <!--作用域插槽拿到数据源中当前行的数据,会覆盖当前el-table-column中的prop属性-->
<el-switch v-model="scope.row.mg_state">
</el-switch>
</template>
</el-table-column>
<el-table-column label= '操作' width="180px">
<template slot-scope="scope">
<el-tooltip effect="dark" content="修改" placement="top" :enterable='false'>
<el-button type="primary" icon="el-icon-edit" size='mini'></el-button>
</el-tooltip>
<el-tooltip effect="dark" content="删除" placement="top" :enterable='false'>
<el-button type="danger" icon="el-icon-delete" size='mini'></el-button>
</el-tooltip>
<el-tooltip effect="dark" content="分配角色" placement="top" :enterable='false'>
<el-button type="warning" icon="el-icon-setting" size='mini'></el-button>
</el-tooltip>
</template>
</el-table-column>
</el-table>
</el-card>
</div>
</template>
<script>
export default {
data(){
return{
//
queryInfo:{
query:'',
pagenum:1,
pagesize:2
},
userList:[],
total:0
}
},
created(){
this.getUserList();
},
methods:{
async getUserList(){
const {data:res} = await this.$http.get("users",{params:this.queryInfo});
console.log(res);
if(res.meta.status!=200) return this.$message.error("获取用户列表失败");
this.userList = res.data.users;
this.total = res.data.total;
}
}
}
</script>
<style lang="less" scoped>
.el-breadcrumb{
margin-bottom: 15px;
font-size: 12px;
}
.el-card{
box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
}
.el-table{
margin-top: 15px;
font-size: 12px;
}
</style>

@ -0,0 +1,16 @@
<template>
<div>
欢迎使用物联网管理系统
</div>
</template>
<script>
export default ({
})
</script>
<style lang="less" scoped>
</style>

@ -0,0 +1,25 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import "./assets/css/global.css"
import axios from "axios"
import request from "@/utils/request";
Vue.config.productionTip = false
//配置请求的根路径
//axios.defaults.baseURL = "/api"
//通过axios请求拦截器添加token,保证拥有获取数据的权限
/*axios.interceptors.request.use(config=>{ //request请求拦截器use挂载config 请求的时候统一携带token)
console.log(config)
config.headers.Authorization = window.sessionStorage.getItem("token") //给所有请求对象的请求头(headers)设置Authorization获取登录token,用于验证
return config
//在最后必须return config
})*/
//Vue.prototype.$http = axios
axios.defaults.withCredentials=true
Vue.prototype.request = request
new Vue({
router,
render: h => h(App)
}).$mount('#app')

@ -0,0 +1,33 @@
import Vue from 'vue'
import { Button } from 'element-ui' //导入element-ui组件
import {Form,FormItem} from 'element-ui'
import {Input} from "element-ui"
import {Footer,Option,Select,Dialog,MessageBox,Message,Container,Header,Aside,Main,Menu,Submenu,MenuItemGroup,MenuItem,Breadcrumb,BreadcrumbItem,Card,Row,Col,Table,TableColumn,Switch,Tooltip} from "element-ui"//需要单独挂载
//import {ElementUI} from "element-ui" //导入全部的element-ui组件,学习时可以使用,开发时要去掉优化运行速度
Vue.use(Button) //全局注册
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItemGroup)
Vue.use(MenuItem)
Vue.use(Breadcrumb)
Vue.use(BreadcrumbItem)
Vue.use(Card)
Vue.use(Row)
Vue.use(Col)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)
Vue.use(Tooltip)
Vue.use(Dialog)
Vue.use(Select)
Vue.use(Option)
Vue.use(Footer)
Vue.prototype.$message = Message //$message是自定属性可以更改把Message单独挂载在Vue.prototype上
Vue.prototype.$messagebox = MessageBox

@ -0,0 +1,47 @@
import Vue from "vue"
import Router from "vue-router"
import Login from "./components/Login.vue"
import Home from "./components/home.vue"
import Welcome from "./components/welcome.vue"
import Register from "@/components/register";
import Network from "@/components/device/network";
import Device from "@/components/device/device";
import Member from "@/components/manage/member";
import User from "@/components/manage/user";
import Deal from "@/components/monitor/deal";
import Recharge from "@/components/monitor/recharge";
Vue.use(Router)
const router = new Router({
routes:[
{path:"/",redirect:"/login"},
{path:"/login",component: Login},
{path:"/home",component: Home,redirect:'/welcome',children:[ //children属性代表有子路由 redirect属性访问/home时重定向到/welcome
{path:"/welcome",component:Welcome},
{path:"/users",component:User},
{path:'/network',component:Network},
{path:'/device',component:Device},
{path:'/user',component:User},
{path:'/member',component:Member},
{path:'/deal',component:Deal},
{path:'/recharge',component:Recharge}
]},
{path:"/register",component:Register}
]
})
//挂载路由守卫
router.beforeEach((to,from,next)=>{
if(to.path=='/login')
return next();
const tokenstr = window.sessionStorage.getItem("username");
if(!tokenstr)
return next("/login");
return next();
})
//to将要访问的路径
//from从那个路径跳转而来
//next是一个函数代表放行
//next()直接放行 next("/login")强制跳转到/login
export default router

@ -0,0 +1,27 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = new VueRouter({
routes
})
export default router

@ -0,0 +1,43 @@
import axios from 'axios'
const request = axios.create({
baseURL: '/api', // 注意!! 这里是全局统一加上了 '/api' 前缀,也就是说所有接口都会加上'/api'前缀在,页面里面写接口的时候就不要加 '/api'了否则会出现2个'/api',类似 '/api/api/user'这样的报错,切记!!!
timeout: 5000
})
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token对请求参数统一加密
request.interceptors.request.use(config => {
config.headers['Content-Type'] = 'application/json;charset=utf-8';
let token = localStorage.getItem("token");
config.headers['token'] = token; // 设置请求头
return config
}, error => {
return Promise.reject(error)
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default request

@ -0,0 +1,5 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

@ -0,0 +1,18 @@
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>

@ -0,0 +1,15 @@
module.exports = {
devServer: { //记住别写错了devServer//设置本地默认端口 选填
host: 'localhost',
port: 8080,
proxy: { //设置代理,必须填
'/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字,名字可以自己定
target: 'http://localhost:8090', //代理的目标地址
changeOrigin: true, //是否设置同源,输入是的
pathRewrite: { //路径重写
'^/api': '' //选择忽略拦截器里面的内容
}
}
}
}
}
Loading…
Cancel
Save