225 lines
8.8 KiB
Vue
225 lines
8.8 KiB
Vue
<template>
|
|
<div class="set-params collapse scroll">
|
|
<div class="set-top">
|
|
<img src="../assets/image/set-icon.png" alt="">设定值参数
|
|
</div>
|
|
<!-- -->
|
|
<div class="set-tips" @click="toHome($store.state.equipmentIndex)">
|
|
<div >
|
|
{{ $store.state.equipmentList[$store.state.equipmentIndex - 1].deviceTypeName }}</div>
|
|
</div>
|
|
<el-collapse v-model="$store.state.activeNames">
|
|
<template v-for="item, index in routerList">
|
|
<el-collapse-item :class="routerNow == item.router ? 'active' : ''" :name="index + 1" :key="index"
|
|
v-if="!item.isRouter">
|
|
<template slot="title" class="collapse-title">
|
|
<span class="name">{{ item.name }}</span>
|
|
</template>
|
|
<!-- -->
|
|
<ul class="table-ul">
|
|
<li @click="toRouter(item1)"
|
|
:class="routerNow == item1.router && routerIndex == index1 + 1 ? 'active' : ''" class="table-li"
|
|
v-for="item1, index1 in item.list" :key="index1">{{
|
|
item1.name }} <div class="status" :class="item1.status == 0 ? 'outline' : 'online'"
|
|
v-if="item1.status >= 0">{{ item1.status
|
|
== 0
|
|
? '离线' : '在线' }}</div>
|
|
</li>
|
|
</ul>
|
|
</el-collapse-item>
|
|
<div @click="toRouter(item)" :class="routerNow == item.router ? 'active' : ''" class="no-list" v-else>{{
|
|
item.name
|
|
}}</div>
|
|
</template>
|
|
</el-collapse>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
routerList: [
|
|
// { name: '施肥机配方设置', list: [], router: 'formula' },
|
|
{ name: `${ this.$store.state.equipmentList[this.$store.state.equipmentIndex - 1].deviceTypeName }状态显示`, list: [], router: 'status-soil', isRouter: true, },
|
|
{
|
|
name: '灌溉组配置', router: 'irrigateSet-soil', list: [
|
|
{ name: '1#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 1 },
|
|
{ name: '2#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 2 },
|
|
{ name: '3#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 3 },
|
|
{ name: '4#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 4 },
|
|
{ name: '5#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 5 },
|
|
{ name: '6#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 6 },
|
|
{ name: '7#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 7 },
|
|
{ name: '8#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 8 },
|
|
{ name: '9#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 9 },
|
|
{ name: '10#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 10 },
|
|
{ name: '11#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 11 },
|
|
{ name: '12#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 12 },
|
|
{ name: '13#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 13 },
|
|
{ name: '14#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 14 },
|
|
{ name: '15#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 15 },
|
|
{ name: '16#灌溉组配置', status: -1, router: 'irrigateSet-soil', index: 16 }]
|
|
},
|
|
|
|
{ name: '固有参数', list: [], router: 'intrinsicParameter-soil', isRouter: true, },
|
|
{ name: '系统参数配置', list: [], router: 'systemSet-soil', isRouter: true, },
|
|
{ name: '传感器通道配置', list: [], router: 'sensorSet-soil', isRouter: true, },
|
|
{ name: '数据上传', list: [], router: 'upload-soil', isRouter: true, },],
|
|
routerNow: 'irrigateSet-soil',
|
|
routerIndex: 1,
|
|
|
|
}
|
|
},
|
|
watch: {
|
|
"$route"(newName, oldName) {
|
|
this.gerRouter();
|
|
},
|
|
},
|
|
mounted() {
|
|
this.gerRouter();
|
|
this.dataInit()
|
|
},
|
|
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
|
|
this.getList()
|
|
} else {
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
this.loading = false
|
|
});
|
|
},
|
|
dataInit() {
|
|
// var store = this.$store.state
|
|
// if(!store.equipmentName){
|
|
// this.getByid()
|
|
// }else{
|
|
// this.getList()
|
|
// }
|
|
|
|
|
|
},
|
|
getList(){
|
|
var store = this.$store.state
|
|
// store.nameList.forEach((el, index) => {
|
|
// if (index < 8) {
|
|
// if (store.equipmentName['fertilization' + store.nameList[index]]) {
|
|
// // store.equipmentName['fertilization'+store.nameList[index]]
|
|
// this.routerList[0].list.push({
|
|
// name: '配方' + (index + 1),
|
|
// status: -1,
|
|
// index: index + 1,
|
|
// router: 'formula'
|
|
// })
|
|
// }
|
|
// }
|
|
// // if (store.equipmentName['solenoid' + store.nameList[index]]) {
|
|
// // // store.equipmentName['fertilization'+store.nameList[index]]
|
|
// // this.routerList[1].list.push({
|
|
// // name: store.equipmentName['solenoid' + store.nameList[index]],
|
|
// // status: -1,
|
|
// // index: index + 1,
|
|
// // router: 'irrigateSet'
|
|
// // })
|
|
// // }
|
|
// })
|
|
},
|
|
//去首页
|
|
toHome(index) {
|
|
this.$router.push({ path: `/status-soil` })
|
|
},
|
|
gerRouter() {
|
|
this.routerNow = this.$route.name;
|
|
this.routerIndex = this.$route.query.id ? this.$route.query.id : 1
|
|
},
|
|
toRouter(item) {
|
|
if (item.router) {
|
|
if (item.http) {
|
|
window.location.href = item.http;
|
|
} else if (item.router == 'irrigateSet-soil' && this.$route.query.id != item.index) {
|
|
this.$router.push({ path: `/irrigateSet-soil?id=${item.index}` })
|
|
}
|
|
// else if (item.router == 'formula' && this.$route.query.id != item.index) {
|
|
// this.$router.push({ path: `/formula?id=${item.index}` })
|
|
// }
|
|
else if (item.router != this.routerNow && !item.http) {
|
|
|
|
this.$router.push({ name: item.router })
|
|
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.set-params {
|
|
width: 280px;
|
|
height: 100%;
|
|
background: rgba(0, 92, 178, 0.15);
|
|
border: 2px solid rgba(0, 186, 255, 0.20);
|
|
|
|
.set-top {
|
|
font-size: 20px;
|
|
font-family: Microsoft YaHei;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
width: 100%;
|
|
padding-left: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 20px;
|
|
|
|
img {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.el-collapse-item {
|
|
&.active {}
|
|
}
|
|
|
|
.no-list {
|
|
color: #A8B6C8;
|
|
|
|
&.active {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.set-tips {
|
|
width: 100%;
|
|
border-bottom: 1px solid rgba(168, 182, 200, 0.2);
|
|
margin-top: 17px;
|
|
padding-bottom: 17px;
|
|
padding-left: 10px;
|
|
cursor: pointer;
|
|
|
|
>div {
|
|
width: 220px;
|
|
height: 40px;
|
|
// background: rgba(255, 255, 255, 0.1);
|
|
// border: 1px solid rgba(255, 255, 255, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|