141 lines
4.1 KiB
Vue
141 lines
4.1 KiB
Vue
<template>
|
||
<div>
|
||
<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" round size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">
|
||
详细
|
||
</el-button>
|
||
<el-badge :hidden="!item.alarmNum" :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">
|
||
<i v-if="isPointLoading(item[tempDataItem.attr])" class="el-icon-loading point-loading-icon"></i>
|
||
<span v-else>{{ displayValue(item[tempDataItem.attr]) }}<span v-html="tempDataItem.unit"></span></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: {
|
||
displayValue(value) {
|
||
return value === undefined || value === null || value === "" ? "-" : value;
|
||
},
|
||
isPointLoading(value) {
|
||
return this.loading && (value === undefined || value === null || value === "" || value === "-");
|
||
},
|
||
// 查看设备电位表格
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
.point-loading-icon {
|
||
color: #409eff;
|
||
display: inline-block;
|
||
transform-origin: center;
|
||
animation: pointLoadingSpinPulse 1.1s linear infinite;
|
||
}
|
||
@keyframes pointLoadingSpinPulse {
|
||
0% { opacity: 0.45; transform: rotate(0deg) scale(0.9); }
|
||
50% { opacity: 1; transform: rotate(180deg) scale(1.08); }
|
||
100% { opacity: 0.45; transform: rotate(360deg) scale(0.9); }
|
||
}
|
||
</style>
|