287 lines
13 KiB
Vue
287 lines
13 KiB
Vue
<template>
|
|
<div class="index">
|
|
<div class="header">
|
|
<div class="header-left">
|
|
<img src="../assets/image/logo.png" alt="">
|
|
</div>
|
|
<div class="header-center">
|
|
<div @click="toRouter(item)" :class="item.routerList.indexOf(routerNow) != -1 ? 'active' : ''"
|
|
v-for="item, index in headerList" :key="index">
|
|
<div class="img"> <img :src="item.img" alt=""></div>
|
|
<div class="name">{{ item.name }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-right" v-if="userInfo">
|
|
<img src="../assets/image/avatar.png" alt="">
|
|
<div class="user-data">
|
|
<div class="name">欢迎，{{ userInfo.nickName }}</div>
|
|
<div class="time" v-if="time"> {{ time.year.year }}-{{ time.year.month }}-{{ time.year.date }}</div>
|
|
</div>
|
|
<div class="login-out" @click="loginOut"></div>
|
|
</div>
|
|
</div>
|
|
<div class="index-content">
|
|
<div class="left collapse">
|
|
<el-collapse v-model="activeNames">
|
|
<template v-for="item, index in leftList">
|
|
<el-collapse-item :name="index + 1" :key="index" v-if="!item.isRouter">
|
|
<template slot="title" class="collapse-title">
|
|
<div class="img"><img :src="item.img" alt=""></div> {{ item.name }}
|
|
</template>
|
|
<ul class="table-ul">
|
|
<li class="table-li" @click="toRouter1(item1)"
|
|
:class="item.routerList.indexOf(routerNow) != -1 && routerIndex == item1.index ? 'active' : ''"
|
|
v-for="item1, index1 in item.list" :key="index1">{{ item1.deviceTypeName }} <div
|
|
class="status" :class="item1.deviceState == 0 ? 'outline' : 'online'"
|
|
v-if="item1.deviceState >= 0">{{
|
|
item1.deviceState == 0 ? '离线' : '在线' }}</div>
|
|
</li>
|
|
</ul>
|
|
</el-collapse-item>
|
|
<div @click="toRouter1(item)" :class="routerNow == item.router ? 'active' : ''" class="no-list"
|
|
v-else>
|
|
<div class="img"><img :src="item.img" alt=""></div>{{ item.name }}
|
|
</div>
|
|
</template>
|
|
|
|
</el-collapse>
|
|
</div>
|
|
<div class="right">
|
|
<router-view v-if="!loading"></router-view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getnowtime } from '../assets/js/nowTime'
|
|
export default {
|
|
data() {
|
|
return {
|
|
time: null,//当前时间
|
|
headerActive: 0,
|
|
headerList: [
|
|
{ name: '实时数据', router: 'realTime', routerList: ['realTime'], img: require('../assets/image/header-img1.png') },
|
|
// { name: '设定值参数', router: 'status', index: 1, routerList: ['formula', 'irrigateSet', 'PIDSet', 'systemSet', 'upload', 'sensorSet'], img: require('../assets/image/header-img0.png') },
|
|
{ name: '设定值参数', router: 'status', index: 1, routerList: ['status','skylight', 'fan','upload-con','sensorSet-con'], img: require('../assets/image/header-img0.png') },
|
|
{ name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img1.png') },
|
|
{ name: '视频监控', router: '', routerList: [], img: require('../assets/image/header-img2.png') },
|
|
// history history
|
|
{ name: '历史数据', router: '', index: 1, routerList: [''], img: require('../assets/image/header-img3.png') },
|
|
//dataAnalysis dataAnalysis
|
|
{ name: '数据分析', router: '', index: 1, routerList: [''], img: require('../assets/image/header-img4.png') },
|
|
{ name: '设备菜单', router: '', routerList: [], img: require('../assets/image/header-img5.png') },
|
|
//systemManage systemManage
|
|
{ name: '管理', router: '', routerList: [''], img: require('../assets/image/header-img6.png') },
|
|
{ name: '大数据', router: 'largeScreen', routerList: ['largeScreen'], img: require('../assets/image/header-img8.png') }
|
|
],
|
|
|
|
activeNames: [3],
|
|
leftList: [
|
|
{ name: '首页', img: require('../assets/image/index-icon.png'), list: [], router: 'realTime', isRouter: true, },
|
|
{ name: '温室', routerList: ['realTime', 'skylight', 'control','fan','upload-con','sensorSet-con'], img: require('../assets/image/left-img0.png'), list: [] },
|
|
// { name: '二号温室', img: require('../assets/image/left-img1.png'), list: [] },
|
|
{ name: '施肥机', routerList: ['formula', 'irrigateSet', 'PIDSet', 'systemSet', 'upload', 'sensorSet', 'realTime', 'history', 'dataAnalysis'], img: require('../assets/image/left-img2.png'), list: [] },],
|
|
routerNow: 'realTime',
|
|
deviceName: 1,
|
|
routerIndex: 1,
|
|
equipmentList: [],
|
|
userInfo: null,
|
|
loading: true,//页面加载
|
|
IDTimer: null,
|
|
}
|
|
},
|
|
watch: {
|
|
"$route"(newName, oldName) {
|
|
this.gerRouter();
|
|
},
|
|
},
|
|
mounted() {
|
|
const that = this
|
|
this.getTime()
|
|
var router = this.$route.query
|
|
if (router.token && router.userid) {
|
|
localStorage.setItem('token', router.token)
|
|
|
|
this.api.getUser({ userId: router.userid }).then(res => {
|
|
var data = res.data.data
|
|
data.userid = router.userid
|
|
localStorage.setItem('userInfo', JSON.stringify(data))
|
|
this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
|
|
this.gerRouter();
|
|
this.getEqbyid()
|
|
})
|
|
return
|
|
} else {
|
|
if (localStorage.getItem('token')) {
|
|
this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
|
|
}
|
|
this.gerRouter();
|
|
this.getEqbyid()
|
|
}
|
|
this.IDTimer && clearInterval(this.IDTimer)
|
|
this.IDTimer = setInterval(() => {
|
|
that.getEqbyid()
|
|
}, 120000);
|
|
|
|
},
|
|
beforeDestroy() {
|
|
this.IDTimer && clearInterval(this.IDTimer)
|
|
},
|
|
methods: {
|
|
//获取设备名称/配方名称
|
|
getByid() {
|
|
var store = this.$store.state
|
|
var data = {
|
|
deviceId: store.equipmentList[store.equipmentIndex - 1].deviceId,
|
|
};
|
|
this.api.getByid(data).then((res) => {
|
|
if (res.data.code == 200) {
|
|
store.equipmentName = res.data.data
|
|
} else {
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
this.loading = false
|
|
});
|
|
},
|
|
//获取设备
|
|
getEqbyid() {
|
|
var userInfo = JSON.parse(localStorage.getItem('userInfo'))
|
|
this.api.getEqbyid(userInfo.userid).then((res) => {
|
|
if (res.data.code == 200) {
|
|
this.$store.state.equipmentList = res.data.data.map((item, index) => {
|
|
return {
|
|
...item,
|
|
router: 'formula',
|
|
index: index + 1,
|
|
};
|
|
});
|
|
this.leftList[1].list = []
|
|
this.leftList[2].list = []
|
|
this.$store.state.equipmentList.forEach((el, index) => {
|
|
if (el.deviceName == 1) {
|
|
this.leftList.forEach((el1, index1) => {
|
|
if (el1.name == '施肥机') {
|
|
this.leftList[index1].list.push(el)
|
|
}
|
|
})
|
|
} else {
|
|
this.leftList.forEach((el1, index1) => {
|
|
if (el1.name == '温室') {
|
|
this.leftList[index1].list.push(el)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
this.gerRouter()
|
|
this.getByid()
|
|
|
|
}
|
|
})
|
|
},
|
|
gerRouter() {
|
|
var store=this.$store.state
|
|
this.routerIndex = this.$route.query.index ? this.$route.query.index : store.equipmentIndex
|
|
this.routerNow = this.$route.name;
|
|
if(store.equipmentList.length){
|
|
this.deviceName =store.equipmentList[this.routerIndex - 1].deviceName
|
|
}else{
|
|
|
|
}
|
|
|
|
},
|
|
loginOut() {
|
|
this.api.loginOut().then((res) => {
|
|
|
|
if (res.data.code == 200) {
|
|
this.$message({
|
|
message: '退出登录成功',
|
|
type: "success",
|
|
});
|
|
localStorage.removeItem('token')
|
|
localStorage.removeItem('userInfo')
|
|
this.$router.push({ name: 'login' })
|
|
} else {
|
|
this.$message.error("请求出错");
|
|
}
|
|
})
|
|
},
|
|
toHome() {
|
|
this.$router.push({ name: 'home' })
|
|
},
|
|
toRouter(item) {
|
|
if (item.router) {
|
|
if (item.http) {
|
|
window.location.href = item.http;
|
|
} else if (item.router == 'formula' && this.$route.query.index != item.index) {
|
|
this.$store.state.equipmentIndex = item.index
|
|
this.$router.push({ path: `/${item.router}?id=${item.index ? item.index : 1}` })
|
|
|
|
} else if (item.router == 'history' && this.$route.query.index != item.index) {
|
|
this.$router.push({ path: `/history?index=${item.index ? item.index : 1}` })
|
|
|
|
} else if (item.router == 'dataAnalysis' && this.$route.query.index != item.index) {
|
|
this.$router.push({ path: `/dataAnalysis?index=${item.index ? item.index : 1}` })
|
|
|
|
} else if (this.routerNow == 'realTime' && item.router == 'status' && this.deviceName == '10') {
|
|
this.$router.push({ path: `/control` })
|
|
} else if (item.router == 'realTime') {
|
|
|
|
this.$router.push({ path: `/realTime` })
|
|
|
|
} else if (item.router != this.routerNow && !item.http) {
|
|
this.$router.push({ name: item.router })
|
|
}
|
|
} else {
|
|
this.$message('当前页面正在努力开发中');
|
|
}
|
|
},
|
|
toRouter1(item) {
|
|
if (item.router) {
|
|
if (item.http) {
|
|
window.location.href = item.http;
|
|
} else if (item.router == 'formula' && this.$route.query.index != item.index) {
|
|
|
|
if (this.routerNow == 'realTime') {
|
|
this.$store.state.equipmentIndex = item.index
|
|
this.$router.push({ path: `/realTime?index=${item.index ? item.index : 1}&name=${item.deviceName}` })
|
|
} else if (this.routerNow == 'formula') {
|
|
this.$store.state.equipmentIndex = item.index
|
|
this.$router.push({ path: `/formula?index=${item.index ? item.index : 1}` })
|
|
} else if (this.routerNow == 'history') {
|
|
this.$store.state.equipmentIndex = item.index
|
|
this.$router.push({ path: `/history?index=${item.index ? item.index : 1}` })
|
|
} else if (this.routerNow == 'dataAnalysis') {
|
|
this.$store.state.equipmentIndex = item.index
|
|
this.$router.push({ path: `/dataAnalysis?index=${item.index ? item.index : 1}` })
|
|
} else if (item.router == 'formula') {
|
|
this.$store.state.equipmentIndex = item.index
|
|
if (item.deviceName == 10) {
|
|
this.$router.push({ path: `/control` })
|
|
} else if (item.deviceName == 1) {
|
|
this.$router.push({ path: `/irrigateSet` })
|
|
}
|
|
}
|
|
} else if (item.router == 'formula' && this.$route.query.index == item.index) {
|
|
|
|
} else if (item.router != this.routerNow && !item.http) {
|
|
this.$router.push({ name: item.router })
|
|
}
|
|
} else if (!item.deviceState) {
|
|
this.$message('当前设备为离线状态');
|
|
} else {
|
|
this.$message('当前页面正在努力开发中');
|
|
}
|
|
},
|
|
getTime() {
|
|
this.time = getnowtime()
|
|
const that = this
|
|
setInterval(() => {
|
|
that.time = getnowtime()
|
|
}, 1000);
|
|
},
|
|
},
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss"></style>
|
|
|