优化
This commit is contained in:
白菜
@ -1,45 +1,49 @@
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<el-card
|
||||
v-for="(item,index) in list"
|
||||
:key="index+'dbList'"
|
||||
shadow="always"
|
||||
class="sbjk-card-container list"
|
||||
:class="{
|
||||
<el-card
|
||||
v-for="(item,index) in list"
|
||||
:key="index+'dbList'"
|
||||
shadow="always"
|
||||
class="sbjk-card-container list"
|
||||
:class="{
|
||||
'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0',
|
||||
'running-card-container':item.emsCommunicationStatus === '0'
|
||||
}"
|
||||
>
|
||||
<div slot="header">
|
||||
<span class="large-title">{{ item.deviceName }}</span>
|
||||
<div class="info">
|
||||
<div>
|
||||
{{
|
||||
$store.state.ems.communicationStatusOptions[
|
||||
item.emsCommunicationStatus
|
||||
]
|
||||
}}
|
||||
</div>
|
||||
<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 deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'" :span="8" class="device-info-col">
|
||||
>
|
||||
<div slot="header">
|
||||
<span class="large-title">{{ item.deviceName }}</span>
|
||||
<div class="info">
|
||||
<div>
|
||||
{{
|
||||
$store.state.ems.communicationStatusOptions[
|
||||
item.emsCommunicationStatus
|
||||
]
|
||||
}}
|
||||
</div>
|
||||
<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 :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 deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'"
|
||||
:span="8" class="device-info-col">
|
||||
<span class="pointer" @click="showChart(tempDataItem.pointName,item.deviceId)">
|
||||
<span class="left">{{tempDataItem.name}}</span> <span class="right">{{item[tempDataItem.attr]}}<span v-html="tempDataItem.unit"></span></span>
|
||||
<span class="left">{{ tempDataItem.name }}</span> <span class="right">{{ item[tempDataItem.attr] }}<span
|
||||
v-html="tempDataItem.unit"></span></span>
|
||||
</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</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"/>
|
||||
@ -49,102 +53,103 @@
|
||||
<script>
|
||||
import pointChart from "./../PointChart.vue";
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import { getAmmeterDataList } from "@/api/ems/dzjk";
|
||||
import {getAmmeterDataList} from "@/api/ems/dzjk";
|
||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
||||
|
||||
export default {
|
||||
name: "DzjkSbjkDb",
|
||||
mixins: [getQuerySiteId,intervalUpdate],
|
||||
components:{PointTable, pointChart},
|
||||
mixins: [getQuerySiteId, intervalUpdate],
|
||||
components: {PointTable, pointChart},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
list:[],
|
||||
deviceIdTypeMsg:{
|
||||
'LOAD':[
|
||||
list: [],
|
||||
deviceIdTypeMsg: {
|
||||
'LOAD': [
|
||||
{
|
||||
name:'正向有功电能',
|
||||
attr:'forwardActive',
|
||||
pointName:'正向有功电能'
|
||||
name: '正向有功电能',
|
||||
attr: 'forwardActive',
|
||||
pointName: '正向有功电能'
|
||||
},
|
||||
{
|
||||
name:'反向有功电能',
|
||||
attr:'reverseActive',
|
||||
pointName:'反向有功电能'
|
||||
name: '反向有功电能',
|
||||
attr: 'reverseActive',
|
||||
pointName: '反向有功电能'
|
||||
},
|
||||
{
|
||||
name:'正向无功电能',
|
||||
attr:'forwardReactive',
|
||||
pointName:'正向无功电能'
|
||||
name: '正向无功电能',
|
||||
attr: 'forwardReactive',
|
||||
pointName: '正向无功电能'
|
||||
},
|
||||
{
|
||||
name:'反向无功电能',
|
||||
attr:'reverseReactive',
|
||||
pointName:'反向无功电能'
|
||||
name: '反向无功电能',
|
||||
attr: 'reverseReactive',
|
||||
pointName: '反向无功电能'
|
||||
},
|
||||
{
|
||||
name:'有功功率',
|
||||
attr:'activePower',
|
||||
pointName:'总有功功率'
|
||||
name: '有功功率',
|
||||
attr: 'activePower',
|
||||
pointName: '总有功功率'
|
||||
},
|
||||
{
|
||||
name:'无功功率',
|
||||
attr:'reactivePower',
|
||||
pointName:'总无功功率'
|
||||
name: '无功功率',
|
||||
attr: 'reactivePower',
|
||||
pointName: '总无功功率'
|
||||
}
|
||||
],
|
||||
'METE':[
|
||||
'METE': [
|
||||
{
|
||||
name:'正向有功电能',
|
||||
attr:'forwardActive',
|
||||
pointName:'正向有功电能'
|
||||
name: '正向有功电能',
|
||||
attr: 'forwardActive',
|
||||
pointName: '正向有功电能'
|
||||
},
|
||||
{
|
||||
name:'反向有功电能',
|
||||
attr:'reverseActive',
|
||||
pointName:'反向有功电能'
|
||||
name: '反向有功电能',
|
||||
attr: 'reverseActive',
|
||||
pointName: '反向有功电能'
|
||||
},
|
||||
{
|
||||
name:'正向无功电能',
|
||||
attr:'forwardReactive',
|
||||
pointName:'正向无功电能'
|
||||
name: '正向无功电能',
|
||||
attr: 'forwardReactive',
|
||||
pointName: '正向无功电能'
|
||||
},
|
||||
{
|
||||
name:'反向无功电能',
|
||||
attr:'reverseReactive',
|
||||
pointName:'反向无功电能'
|
||||
name: '反向无功电能',
|
||||
attr: 'reverseReactive',
|
||||
pointName: '反向无功电能'
|
||||
},
|
||||
{
|
||||
name:'有功功率',
|
||||
attr:'activePower',
|
||||
pointName:'总有功功率'
|
||||
name: '有功功率',
|
||||
attr: 'activePower',
|
||||
pointName: '总有功功率'
|
||||
},
|
||||
{
|
||||
name:'无功功率',
|
||||
attr:'reactivePower',
|
||||
pointName:'总无功功率'
|
||||
name: '无功功率',
|
||||
attr: 'reactivePower',
|
||||
pointName: '总无功功率'
|
||||
}
|
||||
],
|
||||
'METEGF':[
|
||||
'METEGF': [
|
||||
{
|
||||
name:'有功电能',
|
||||
attr:'activeEnergy',
|
||||
pointName:'有功电能'
|
||||
name: '有功电能',
|
||||
attr: 'activeEnergy',
|
||||
pointName: '有功电能'
|
||||
},
|
||||
{
|
||||
name:'无功电能',
|
||||
attr:'reactiveEnergy',
|
||||
pointName:'无功电能'
|
||||
name: '无功电能',
|
||||
attr: 'reactiveEnergy',
|
||||
pointName: '无功电能'
|
||||
},
|
||||
{
|
||||
name:'有功功率',
|
||||
attr:'activePower',
|
||||
pointName:'总有功功率'
|
||||
name: '有功功率',
|
||||
attr: 'activePower',
|
||||
pointName: '总有功功率'
|
||||
},
|
||||
{
|
||||
name:'无功功率',
|
||||
attr:'reactivePower',
|
||||
pointName:'总无功功率'
|
||||
name: '无功功率',
|
||||
attr: 'reactivePower',
|
||||
pointName: '总无功功率'
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -152,14 +157,14 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
// 查看设备电位表格
|
||||
pointDetail(row,dataType){
|
||||
pointDetail(row, dataType) {
|
||||
const {deviceId} = row
|
||||
this.$refs.pointTable.showTable({siteId:this.siteId,deviceId,deviceCategory:'AMMETER'},dataType)
|
||||
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'AMMETER'}, dataType)
|
||||
},
|
||||
showChart(pointName,deviceId){
|
||||
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'AMMETER',deviceId})
|
||||
showChart(pointName, deviceId) {
|
||||
pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'AMMETER', deviceId})
|
||||
},
|
||||
updateData(){
|
||||
updateData() {
|
||||
this.loading = true;
|
||||
getAmmeterDataList(this.siteId)
|
||||
.then((response) => {
|
||||
@ -174,13 +179,14 @@ export default {
|
||||
this.updateInterval(this.updateData)
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
mounted() {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sbjk-card-container {
|
||||
&.list:not(:last-child){
|
||||
&.list:not(:last-child) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user