110 lines
3.2 KiB
Vue
110 lines
3.2 KiB
Vue
|
|
|||
|
|
<template>
|
|||
|
|
<div v-loading="loading">
|
|||
|
|
<el-card
|
|||
|
|
v-for="(item,index) in list"
|
|||
|
|
:key="index+'ylLise'"
|
|||
|
|
class="sbjk-card-container running-card-container"
|
|||
|
|
shadow="always">
|
|||
|
|
<div slot="header">
|
|||
|
|
<span class="large-title">{{item.deviceName}}</span>
|
|||
|
|
<div class="info">
|
|||
|
|
<div>数据更新时间：{{ item.dataUpdateTime || '-'}}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="alarm">
|
|||
|
|
<el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">详细</el-button>
|
|||
|
|
<el-badge :value="item.alarmNum || 0" class="item">
|
|||
|
|
<i
|
|||
|
|
class="el-icon-message-solid alarm-icon"
|
|||
|
|
@click="pointDetail(item,'alarmPoint')"
|
|||
|
|
></i>
|
|||
|
|
</el-badge>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<el-row class="device-info-row">
|
|||
|
|
<el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'hdTempData'" :span="12" class="device-info-col">
|
|||
|
|
<span class="pointer" @click="showChart(tempDataItem.title,item.deviceId)">
|
|||
|
|
<span class="left">{{tempDataItem.title}}</span> <span class="right">{{item[tempDataItem.attr]}}<span v-html="tempDataItem.unit"></span></span>
|
|||
|
|
</span>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</el-card>
|
|||
|
|
<el-empty v-show="list.length<=0" :image-size="200"></el-empty>
|
|||
|
|
<point-chart ref="pointChart" :site-id="siteId"/>
|
|||
|
|
<point-table ref="pointTable"/>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
|||
|
|
import {getDhDataList} from '@/api/ems/dzjk'
|
|||
|
|
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
|||
|
|
import pointChart from "./../PointChart.vue";
|
|||
|
|
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
|||
|
|
export default {
|
|||
|
|
name:'DzjkSbjkDh',
|
|||
|
|
mixins:[getQuerySiteId,intervalUpdate],
|
|||
|
|
components:{pointChart,PointTable},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
loading:false,
|
|||
|
|
list:[],
|
|||
|
|
tempData:[
|
|||
|
|
{title:'湿度',attr:'humidity',unit:'℃'},
|
|||
|
|
{title:'温度',attr:'temperature',unit:''},
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
// 查看设备电位表格
|
|||
|
|
pointDetail(row,dataType){
|
|||
|
|
const {deviceId} = row
|
|||
|
|
this.$refs.pointTable.showTable({siteId:this.siteId,deviceId,deviceCategory:'DH'},dataType)
|
|||
|
|
},
|
|||
|
|
showChart(pointName,deviceId){
|
|||
|
|
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'DH',deviceId})
|
|||
|
|
},
|
|||
|
|
updateData(){
|
|||
|
|
this.loading = true
|
|||
|
|
getDhDataList(this.siteId).then(response => {
|
|||
|
|
this.list = JSON.parse(JSON.stringify(response?.data || []));
|
|||
|
|
}).finally(() => {this.loading = false})
|
|||
|
|
},
|
|||
|
|
init(){
|
|||
|
|
this.updateData()
|
|||
|
|
this.updateInterval(this.updateData)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted(){
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
.sbjk-card-container{
|
|||
|
|
&:not(:last-child){
|
|||
|
|
margin-bottom: 25px;
|
|||
|
|
}
|
|||
|
|
.el-row{
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border:1px solid #eeeeee;
|
|||
|
|
font-size: 14px;
|
|||
|
|
line-height: 16px;
|
|||
|
|
color: #333333;
|
|||
|
|
.el-col{
|
|||
|
|
padding:12px 0;
|
|||
|
|
text-align: center;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
.el-col{
|
|||
|
|
border-bottom: 1px solid #eeeeee;
|
|||
|
|
}
|
|||
|
|
.el-col:not(:nth-child(3n)){
|
|||
|
|
border-right: 1px solid #eeeeee;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|