151 lines
3.4 KiB
Vue
151 lines
3.4 KiB
Vue
<template>
|
||
<el-row :gutter="10" class="main-box">
|
||
<el-col :span="4">
|
||
<div class="left-box">
|
||
<el-tree
|
||
:data="treeData"
|
||
node-key="id"
|
||
ref="deviceStatusTree"
|
||
:props="defaultProps"
|
||
default-expand-all
|
||
highlight-current
|
||
@node-click="clickDevice"
|
||
>
|
||
</el-tree>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="20">
|
||
<div class="right-box">
|
||
<span class="title">{{ equipmentName }}</span>
|
||
<ul class="eq-msg">
|
||
<li>设备模式：{{ eqMessage.mode }}</li>
|
||
<li>设备状态：{{ eqMessage.state }}</li>
|
||
<li>设备报警：{{ eqMessage.alarmNum }}</li>
|
||
<li>剩余维护时间：{{ eqMessage.remainMainTime }}秒</li>
|
||
</ul>
|
||
<div class="img-box">
|
||
<img v-if="eqMessage.imgId" :src="deviceImg" alt="设备图片" />
|
||
<img v-else src="./../../assets/empty.png" alt="设备图片" />
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
<script>
|
||
import { getTreeData } from '@/api/app'
|
||
import { eqMonitorGet } from '@/api/siteMonitoring'
|
||
export default {
|
||
name: 'DeviceStatus',
|
||
data() {
|
||
return {
|
||
treeData: [],
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'name'
|
||
},
|
||
eqMessage: {},
|
||
equipmentId: '',
|
||
deviceImg: '',
|
||
equipmentName: ''
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getTree()
|
||
},
|
||
methods: {
|
||
getTree() {
|
||
getTreeData().then((res) => {
|
||
this.treeData = res.data
|
||
this.equipmentId = this.getId(res.data)
|
||
this.setCurrent()
|
||
this.getMsg()
|
||
})
|
||
},
|
||
getId(val) {
|
||
if (val[0].children) {
|
||
return this.getId(val[0].children)
|
||
} else {
|
||
return val[0].id
|
||
}
|
||
},
|
||
setCurrent() {
|
||
let _this = this
|
||
setTimeout(function () {
|
||
_this.$refs.deviceStatusTree.setCurrentKey(_this.equipmentId)
|
||
}, 500)
|
||
},
|
||
getMsg() {
|
||
eqMonitorGet({ equipmentId: this.equipmentId }).then((res) => {
|
||
console.log(res)
|
||
this.eqMessage = res.data
|
||
this.equipmentName = res.data.equipmentName
|
||
this.deviceImg = process.env.VUE_APP_VIEW_PIC + res.data.imgId
|
||
})
|
||
},
|
||
clickDevice(val) {
|
||
console.log(val)
|
||
if (!val.children) {
|
||
this.equipmentId = val.id
|
||
this.equipmentName = val.name
|
||
this.getMsg()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.main-box {
|
||
width: 100%;
|
||
padding: 8px 6px 0 16px;
|
||
.left-box,
|
||
.right-box {
|
||
border-radius: 8px;
|
||
background-color: #fff;
|
||
height: calc(100vh - 148px);
|
||
}
|
||
.left-box {
|
||
padding: 16px 0 0;
|
||
overflow: auto;
|
||
}
|
||
.right-box {
|
||
padding: 24px;
|
||
.title {
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
color: #000000;
|
||
margin-bottom: 16px;
|
||
}
|
||
.title::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 4px;
|
||
height: 16px;
|
||
background: #0b58ff;
|
||
border-radius: 1px;
|
||
margin-right: 8px;
|
||
vertical-align: middle;
|
||
}
|
||
.eq-msg {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 25px;
|
||
li {
|
||
width: 22%;
|
||
height: 48px;
|
||
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
|
||
border-radius: 8px;
|
||
line-height: 48px;
|
||
padding-left: 16px;
|
||
}
|
||
}
|
||
.img-box {
|
||
text-align: center;
|
||
img {
|
||
max-width: 100%;
|
||
max-height: calc(100vh - 300px);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|