Merge branch 'develop' into single-develop
# Conflicts: # src/assets/styles/common.scss
This commit is contained in:
白菜
@ -1,19 +1,22 @@
|
||||
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmsdccContainer'" style="margin-bottom:25px;">
|
||||
<el-card shadow="always" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||||
:class="{
|
||||
<el-card shadow="always"
|
||||
class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||||
:class="{
|
||||
'warning-card-container':baseInfo.workStatus && baseInfo.workStatus !== '0',
|
||||
'running-card-container':baseInfo.workStatus === '0'
|
||||
}">
|
||||
<div slot="header">
|
||||
<span class="large-title">{{baseInfo.parentDeviceName?`${baseInfo.parentDeviceName} -> ` : ''}}{{baseInfo.deviceName}}</span>
|
||||
<span
|
||||
class="large-title">{{ baseInfo.parentDeviceName ? `${baseInfo.parentDeviceName} -> ` : '' }}{{ baseInfo.deviceName }}</span>
|
||||
<div class="info">
|
||||
<div>数据更新时间：{{ baseInfo.dataUpdateTime || '-'}}</div>
|
||||
<div>数据更新时间：{{ baseInfo.dataUpdateTime || '-' }}</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(baseInfo,'point')">详细</el-button>
|
||||
<el-button type="primary" round size="small" style="margin-right:20px;"
|
||||
@click="pointDetail(baseInfo,'point')">详细
|
||||
</el-button>
|
||||
<el-badge :value="baseInfo.alarmNum || 0" class="item">
|
||||
<i
|
||||
class="el-icon-message-solid alarm-icon"
|
||||
@ -22,70 +25,87 @@
|
||||
</el-badge>
|
||||
</div>
|
||||
</div>
|
||||
<div class="descriptions-main">
|
||||
<el-descriptions direction="vertical" :column="3" :colon="false">
|
||||
<el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="与PCS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="与EMS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div class="descriptions-main descriptions-main-bg-color">
|
||||
<el-descriptions direction="vertical" :column="3" :colon="false">
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">
|
||||
<div class="descriptions-main">
|
||||
<el-descriptions direction="vertical" :column="3" :colon="false">
|
||||
<el-descriptions-item labelClassName="descriptions-label"
|
||||
:contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`"
|
||||
:span="1" label="工作状态">
|
||||
{{ $store.state.ems.workStatusOptions[baseInfo.workStatus] }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"
|
||||
:span="1" label="与PCS通信">
|
||||
{{ $store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus] }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"
|
||||
:span="1" label="与EMS通信">
|
||||
{{ $store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus] }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div class="descriptions-main descriptions-main-bg-color">
|
||||
<el-descriptions direction="vertical" :column="3" :colon="false">
|
||||
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"
|
||||
v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1"
|
||||
:label="item.label">
|
||||
<span class="pointer" @click="showChart(item.pointName || '',baseInfo.deviceId)">
|
||||
{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
|
||||
{{ baseInfo[item.attr] | formatNumber }} <span v-if="item.unit" v-html="item.unit"></span>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<!-- 进度-->
|
||||
<div class="process-container">
|
||||
<div class="process-line-bg">
|
||||
<div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div>
|
||||
</div>
|
||||
<div class="process pointer" @click="showChart( '当前SOC',baseInfo.deviceId)">当前SOC : {{baseInfo.currentSoc}}%</div>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<!-- 进度-->
|
||||
<div class="process-container">
|
||||
<div class="process-line-bg">
|
||||
<div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div>
|
||||
</div>
|
||||
<div class="process pointer" @click="showChart( '当前SOC',baseInfo.deviceId)">当前SOC :
|
||||
{{ baseInfo.currentSoc }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
class="common-table"
|
||||
:data="baseInfo.batteryDataList"
|
||||
stripe
|
||||
style="width: 100%;margin-top:25px;">
|
||||
class="common-table"
|
||||
:data="baseInfo.batteryDataList"
|
||||
stripe
|
||||
style="width: 100%;margin-top:25px;">
|
||||
<el-table-column
|
||||
prop="dataName"
|
||||
label="名称">
|
||||
prop="dataName"
|
||||
label="名称">
|
||||
<template slot-scope="scope">
|
||||
<span v-html="scope.row.dataName+'（'+unitObj[scope.row.dataName]+'）'"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="avgData"
|
||||
label="单体平均值"
|
||||
prop="avgData"
|
||||
label="单体平均值"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],baseInfo.deviceId)">{{scope.row.avgData}}</span>
|
||||
<span class="pointer"
|
||||
@click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],baseInfo.deviceId)">{{ scope.row.avgData }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="minData"
|
||||
label="单体最小值">
|
||||
prop="minData"
|
||||
label="单体最小值">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],baseInfo.deviceId)">{{scope.row.minData}}</span>
|
||||
<span class="pointer"
|
||||
@click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],baseInfo.deviceId)">{{ scope.row.minData }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="minDataID"
|
||||
label="单体最小值ID">
|
||||
prop="minDataID"
|
||||
label="单体最小值ID">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="maxData"
|
||||
label="单体最大值">
|
||||
prop="maxData"
|
||||
label="单体最大值">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer " @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],baseInfo.deviceId)">{{scope.row.maxData}}</span>
|
||||
<span class="pointer "
|
||||
@click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],baseInfo.deviceId)">{{ scope.row.maxData }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="maxDataID"
|
||||
label="单体最大值ID">
|
||||
prop="maxDataID"
|
||||
label="单体最大值ID">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
@ -103,59 +123,62 @@ import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
||||
import {getBMSBatteryCluster} from '@/api/ems/dzjk'
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||
|
||||
export default {
|
||||
name:'DzjkSbjkBmsdcc',
|
||||
mixins:[getQuerySiteId,intervalUpdate],
|
||||
components:{PointTable, pointChart},
|
||||
name: 'DzjkSbjkBmsdcc',
|
||||
mixins: [getQuerySiteId, intervalUpdate],
|
||||
components: {PointTable, pointChart},
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
unitObj:{
|
||||
'电压':'V',
|
||||
'温度':'℃',
|
||||
'SOC':'%'
|
||||
loading: false,
|
||||
unitObj: {
|
||||
'电压': 'V',
|
||||
'温度': '℃',
|
||||
'SOC': '%'
|
||||
},
|
||||
tablePointNameMap:{
|
||||
'电压单体最小值':'最低单体电压',
|
||||
'电压单体平均值':'电压平均值',
|
||||
'电压单体最大值':'最高单体电压',
|
||||
'温度单体最小值':'最低单体温度',
|
||||
'温度单体平均值':'平均单体温度',
|
||||
'温度单体最大值':'最高单体温度',
|
||||
'SOC单体最小值':'最低单体SOC',
|
||||
'SOC单体平均值':'当前SOC',
|
||||
'SOC单体最大值':'最高单体SOC',
|
||||
tablePointNameMap: {
|
||||
'电压单体最小值': '最低单体电压',
|
||||
'电压单体平均值': '电压平均值',
|
||||
'电压单体最大值': '最高单体电压',
|
||||
'温度单体最小值': '最低单体温度',
|
||||
'温度单体平均值': '平均单体温度',
|
||||
'温度单体最大值': '最高单体温度',
|
||||
'SOC单体最小值': '最低单体SOC',
|
||||
'SOC单体平均值': '当前SOC',
|
||||
'SOC单体最大值': '最高单体SOC',
|
||||
},
|
||||
baseInfoList:[],
|
||||
infoData:[
|
||||
{label:'簇电压',attr:'clusterVoltage',unit:'V',pointName:'簇电压'},
|
||||
{label:'可充电量',attr:'chargeableCapacity',unit:'kWh',pointName:'可充电量'},
|
||||
{label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh',pointName:'累计充电量'},
|
||||
{label:'簇电流',attr:'clusterCurrent',unit:'A',pointName:'簇电流'},
|
||||
{label:'可放电量',attr:'dischargeableCapacity',unit:'kWh',pointName:'可放电量'},
|
||||
{label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh',pointName:'累计放电量'},
|
||||
{label:'SOH',attr:'soh',unit:'%',pointName:'SOH'},
|
||||
{label:'平均温度',attr:'averageTemperature',unit:'℃',pointName:'平均温度'},
|
||||
{label:'绝缘电阻',attr:'insulationResistance',unit:'Ω',pointName:'绝缘电阻'},
|
||||
baseInfoList: [],
|
||||
infoData: [
|
||||
{label: '簇电压', attr: 'clusterVoltage', unit: 'V', pointName: '簇电压'},
|
||||
{label: '可充电量', attr: 'chargeableCapacity', unit: 'kWh', pointName: '可充电量'},
|
||||
{label: '累计充电量', attr: 'totalChargedCapacity', unit: 'kWh', pointName: '累计充电量'},
|
||||
{label: '簇电流', attr: 'clusterCurrent', unit: 'A', pointName: '簇电流'},
|
||||
{label: '可放电量', attr: 'dischargeableCapacity', unit: 'kWh', pointName: '可放电量'},
|
||||
{label: '累计放电量', attr: 'totalDischargedCapacity', unit: 'kWh', pointName: '累计放电量'},
|
||||
{label: 'SOH', attr: 'soh', unit: '%', pointName: 'SOH'},
|
||||
{label: '平均温度', attr: 'averageTemperature', unit: '℃', pointName: '平均温度'},
|
||||
{label: '绝缘电阻', attr: 'insulationResistance', unit: 'Ω', pointName: '绝缘电阻'},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
// 查看设备电位表格
|
||||
pointDetail(row,dataType){
|
||||
const {siteId,deviceId} = row
|
||||
this.$refs.pointTable.showTable({siteId,deviceId,deviceCategory:'CLUSTER'},dataType)
|
||||
pointDetail(row, dataType) {
|
||||
const {siteId, deviceId} = row
|
||||
this.$refs.pointTable.showTable({siteId, deviceId, deviceCategory: 'CLUSTER'}, dataType)
|
||||
},
|
||||
showChart(pointName,deviceId){
|
||||
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'CLUSTER',deviceId})
|
||||
showChart(pointName, deviceId) {
|
||||
pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'CLUSTER', deviceId})
|
||||
},
|
||||
updateData(){
|
||||
updateData() {
|
||||
this.loading = true
|
||||
getBMSBatteryCluster(this.siteId).then(response => {
|
||||
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
|
||||
}).finally(() => {this.loading = false})
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
init(){
|
||||
init() {
|
||||
this.updateData()
|
||||
this.updateInterval(this.updateData)
|
||||
}
|
||||
@ -166,28 +189,32 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
::v-deep {
|
||||
//描述列表样式
|
||||
.descriptions-main{
|
||||
padding:24px 300px 24px 24px;
|
||||
.descriptions-main {
|
||||
padding: 24px 300px 24px 24px;
|
||||
}
|
||||
.descriptions-main-bottom{
|
||||
padding:14px 300px 14px 24px;
|
||||
|
||||
.descriptions-main-bottom {
|
||||
padding: 14px 300px 14px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// 进度条样式
|
||||
.process-container{
|
||||
width:100px;
|
||||
.process-container {
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
right:70px;
|
||||
top:50%;
|
||||
right: 70px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.process-line-bg{
|
||||
|
||||
.process-line-bg {
|
||||
position: relative;
|
||||
width:100%;
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
background-color:#fff2cb ;
|
||||
background-color: #fff2cb;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);
|
||||
.process-line{
|
||||
|
||||
.process-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@ -198,9 +225,10 @@ export default {
|
||||
box-shadow: 0 0 10px #ffbf14, 0 0 0 rgba(255, 191, 20, 0.5);
|
||||
}
|
||||
}
|
||||
.process{
|
||||
margin-top:15px;
|
||||
color:#666666;
|
||||
|
||||
.process {
|
||||
margin-top: 15px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;">
|
||||
@ -8,12 +7,14 @@
|
||||
}" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||||
shadow="always">
|
||||
<div slot="header">
|
||||
<span class="large-title">{{baseInfo.deviceName}}</span>
|
||||
<span class="large-title">{{ baseInfo.deviceName }}</span>
|
||||
<div class="info">
|
||||
<div>数据更新时间：{{ baseInfo.dataUpdateTime || '-'}}</div>
|
||||
<div>数据更新时间：{{ baseInfo.dataUpdateTime || '-' }}</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(baseInfo,'point')">详细</el-button>
|
||||
<el-button type="primary" round size="small" style="margin-right:20px;"
|
||||
@click="pointDetail(baseInfo,'point')">详细
|
||||
</el-button>
|
||||
<el-badge :value="baseInfo.alarmNum || 0" class="item">
|
||||
<i
|
||||
class="el-icon-message-solid alarm-icon"
|
||||
@ -24,16 +25,28 @@
|
||||
</div>
|
||||
<div class="descriptions-main">
|
||||
<el-descriptions :colon="false" :column="3" direction="vertical">
|
||||
<el-descriptions-item :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" labelClassName="descriptions-label" >{{$store.state.ems.workStatusOptions[baseInfo.workStatus]}}</el-descriptions-item>
|
||||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与PCS通信" labelClassName="descriptions-label">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item>
|
||||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与EMS通信" labelClassName="descriptions-label">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
:contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1"
|
||||
label="工作状态" labelClassName="descriptions-label">
|
||||
{{ $store.state.ems.workStatusOptions[baseInfo.workStatus] }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与PCS通信"
|
||||
labelClassName="descriptions-label">
|
||||
{{ $store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus] }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与EMS通信"
|
||||
labelClassName="descriptions-label">
|
||||
{{ $store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus] }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div class="descriptions-main descriptions-main-bg-color">
|
||||
<el-descriptions :colon="false" :column="3" direction="vertical">
|
||||
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :span="1" contentClassName="descriptions-direction" labelClassName="descriptions-label">
|
||||
<span class="pointer" @click="showChart(item.pointName || '',baseInfo.deviceId)">
|
||||
{{baseInfo[item.attr] | formatNumber}}<span v-if="item.unit" v-html="item.unit"></span>
|
||||
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label"
|
||||
:span="1" contentClassName="descriptions-direction"
|
||||
labelClassName="descriptions-label">
|
||||
<span class="pointer" @click="showChart(item.pointName || '',baseInfo.deviceId)">
|
||||
{{ baseInfo[item.attr] | formatNumber }}<span v-if="item.unit" v-html="item.unit"></span>
|
||||
</span>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
@ -42,80 +55,89 @@
|
||||
<div class="process-line-bg">
|
||||
<div :style="{height:baseInfo.stackSoc+'%'}" class="process-line"></div>
|
||||
</div>
|
||||
<div class="process pointer" @click="showChart('当前SOC',baseInfo.deviceId)">当前SOC : {{baseInfo.stackSoc}}%</div>
|
||||
<div class="process pointer" @click="showChart('当前SOC',baseInfo.deviceId)">当前SOC :
|
||||
{{ baseInfo.stackSoc }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="baseInfo.batteryDataList"
|
||||
class="common-table"
|
||||
max-height="500"
|
||||
stripe
|
||||
style="width: 100%;margin-top:25px;">
|
||||
:data="baseInfo.batteryDataList"
|
||||
class="common-table"
|
||||
max-height="500"
|
||||
stripe
|
||||
style="width: 100%;margin-top:25px;">
|
||||
<el-table-column
|
||||
label="簇号"
|
||||
prop="clusterId">
|
||||
label="簇号"
|
||||
prop="clusterId">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="簇电压"
|
||||
label="簇电压"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart('簇电压',scope.row.clusterId,'CLUSTER')">{{scope.row.clusterVoltage}} V</span>
|
||||
<span class="pointer"
|
||||
@click="showChart('簇电压',scope.row.clusterId,'CLUSTER')">{{ scope.row.clusterVoltage }} V</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="簇电流">
|
||||
label="簇电流">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart('簇电流',scope.row.clusterId,'CLUSTER')">{{scope.row.clusterCurrent}} A</span>
|
||||
<span class="pointer"
|
||||
@click="showChart('簇电流',scope.row.clusterId,'CLUSTER')">{{ scope.row.clusterCurrent }} A</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="簇SOC">
|
||||
label="簇SOC">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart('当前SOC',scope.row.clusterId,'CLUSTER')">{{scope.row.currentSoc}} %</span>
|
||||
<span class="pointer"
|
||||
@click="showChart('当前SOC',scope.row.clusterId,'CLUSTER')">{{ scope.row.currentSoc }} %</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="单体最高电压"
|
||||
prop="maxVoltage">
|
||||
label="单体最高电压"
|
||||
prop="maxVoltage">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart('最高单体电压',scope.row.clusterId,'CLUSTER')">{{scope.row.maxCellVoltage}} V</span>
|
||||
<span class="pointer"
|
||||
@click="showChart('最高单体电压',scope.row.clusterId,'CLUSTER')">{{ scope.row.maxCellVoltage }} V</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="电池号码"
|
||||
prop="maxCellVoltageId">
|
||||
label="电池号码"
|
||||
prop="maxCellVoltageId">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="单体最低电压"
|
||||
prop="minVoltage">
|
||||
label="单体最低电压"
|
||||
prop="minVoltage">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart('最低单体电压',scope.row.clusterId,'CLUSTER')">{{scope.row.minCellVoltage}} V</span>
|
||||
<span class="pointer"
|
||||
@click="showChart('最低单体电压',scope.row.clusterId,'CLUSTER')">{{ scope.row.minCellVoltage }} V</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="电池号码"
|
||||
prop="minCellVoltageId">
|
||||
label="电池号码"
|
||||
prop="minCellVoltageId">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="单体最高温度">
|
||||
label="单体最高温度">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart('最高单体温度',scope.row.clusterId,'CLUSTER')">{{scope.row.maxCellTemp}} ℃</span>
|
||||
<span class="pointer"
|
||||
@click="showChart('最高单体温度',scope.row.clusterId,'CLUSTER')">{{ scope.row.maxCellTemp }} ℃</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="电池号码"
|
||||
prop="maxCellTempId">
|
||||
label="电池号码"
|
||||
prop="maxCellTempId">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="单体最低温度"
|
||||
prop="minTemperature">
|
||||
label="单体最低温度"
|
||||
prop="minTemperature">
|
||||
<template slot-scope="scope">
|
||||
<span class="pointer" @click="showChart('最低单体温度',scope.row.clusterId,'CLUSTER')">{{scope.row.minCellTemp}} ℃</span>
|
||||
<span class="pointer"
|
||||
@click="showChart('最低单体温度',scope.row.clusterId,'CLUSTER')">{{ scope.row.minCellTemp }} ℃</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="电池号码"
|
||||
prop="minCellTempId">
|
||||
label="电池号码"
|
||||
prop="minCellTempId">
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
@ -133,43 +155,46 @@ import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||
import pointChart from "./../PointChart.vue";
|
||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
||||
|
||||
export default {
|
||||
name:'DzjkSbjkBmszl',
|
||||
components: {pointChart,PointTable},
|
||||
mixins:[getQuerySiteId,intervalUpdate],
|
||||
name: 'DzjkSbjkBmszl',
|
||||
components: {pointChart, PointTable},
|
||||
mixins: [getQuerySiteId, intervalUpdate],
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
baseInfoList:[],
|
||||
infoData:[
|
||||
{label:'电池堆总电压',attr:'stackVoltage',unit:'V',pointName:'电池堆电压'},
|
||||
{label:'可充电量',attr:'availableChargeCapacity',unit:'kWh',pointName:'可充电量'},
|
||||
{label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh',pointName:'累计充电量'},
|
||||
{label:'电池堆总电流',attr:'stackCurrent',unit:'A',pointName:'电池堆总电流'},
|
||||
{label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh',pointName:'可放电量'},
|
||||
{label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh',pointName:'累计放电量'},
|
||||
{label:'SOH',attr:'stackSoh',unit:'%',pointName:'SOH'},
|
||||
{label:'平均温度',attr:'operatingTemp',unit:'℃',pointName:'平均温度'},
|
||||
{label:'绝缘电阻',attr:'stackInsulationResistance',unit:'Ω',pointName:'绝缘电阻'},
|
||||
loading: false,
|
||||
baseInfoList: [],
|
||||
infoData: [
|
||||
{label: '电池堆总电压', attr: 'stackVoltage', unit: 'V', pointName: '电池堆电压'},
|
||||
{label: '可充电量', attr: 'availableChargeCapacity', unit: 'kWh', pointName: '可充电量'},
|
||||
{label: '累计充电量', attr: 'totalChargeCapacity', unit: 'kWh', pointName: '累计充电量'},
|
||||
{label: '电池堆总电流', attr: 'stackCurrent', unit: 'A', pointName: '电池堆总电流'},
|
||||
{label: '可放电量', attr: 'availableDischargeCapacity', unit: 'kWh', pointName: '可放电量'},
|
||||
{label: '累计放电量', attr: 'totalDischargeCapacity', unit: 'kWh', pointName: '累计放电量'},
|
||||
{label: 'SOH', attr: 'stackSoh', unit: '%', pointName: 'SOH'},
|
||||
{label: '平均温度', attr: 'operatingTemp', unit: '℃', pointName: '平均温度'},
|
||||
{label: '绝缘电阻', attr: 'stackInsulationResistance', unit: 'Ω', pointName: '绝缘电阻'},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
// 查看设备电位表格
|
||||
pointDetail(row,dataType){
|
||||
const {siteId,deviceId} = row
|
||||
this.$refs.pointTable.showTable({siteId,deviceId,deviceCategory:'STACK'},dataType)
|
||||
pointDetail(row, dataType) {
|
||||
const {siteId, deviceId} = row
|
||||
this.$refs.pointTable.showTable({siteId, deviceId, deviceCategory: 'STACK'}, dataType)
|
||||
},
|
||||
showChart(pointName,deviceId,deviceCategory = 'STACK'){
|
||||
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory,deviceId})
|
||||
showChart(pointName, deviceId, deviceCategory = 'STACK') {
|
||||
pointName && this.$refs.pointChart.showChart({pointName, deviceCategory, deviceId})
|
||||
},
|
||||
updateData(){
|
||||
updateData() {
|
||||
this.loading = true
|
||||
getBMSOverView(this.siteId).then(response => {
|
||||
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
|
||||
}).finally(() => {this.loading = false})
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
init(){
|
||||
init() {
|
||||
this.updateData()
|
||||
this.updateInterval(this.updateData)
|
||||
}
|
||||
@ -189,21 +214,24 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 进度条样式
|
||||
.process-container{
|
||||
width:100px;
|
||||
.process-container {
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
right:70px;
|
||||
top:50%;
|
||||
right: 70px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
.process-line-bg{
|
||||
|
||||
.process-line-bg {
|
||||
position: relative;
|
||||
width:100%;
|
||||
width: 100%;
|
||||
height: 110px;
|
||||
background-color:#fff2cb ;
|
||||
background-color: #fff2cb;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);
|
||||
.process-line{
|
||||
|
||||
.process-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@ -214,9 +242,10 @@ export default {
|
||||
box-shadow: 0 0 10px rgb(252 108 108), 0 0 0 rgba(252, 108, 108, 0.5);
|
||||
}
|
||||
}
|
||||
.process{
|
||||
margin-top:15px;
|
||||
color:#666666;
|
||||
|
||||
.process {
|
||||
margin-top: 15px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,38 +1,41 @@
|
||||
|
||||
<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 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>
|
||||
<el-row class="device-info-row">
|
||||
<el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'hdTempData'" :span="12" class="device-info-col">
|
||||
<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 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 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>
|
||||
</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>
|
||||
|
||||
|
||||
@ -42,66 +45,73 @@ 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},
|
||||
name: 'DzjkSbjkDh',
|
||||
mixins: [getQuerySiteId, intervalUpdate],
|
||||
components: {pointChart, PointTable},
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
list:[],
|
||||
tempData:[
|
||||
{title:'湿度',attr:'humidity',unit:'℃'},
|
||||
{title:'温度',attr:'temperature',unit:''},
|
||||
loading: false,
|
||||
list: [],
|
||||
tempData: [
|
||||
{title: '湿度', attr: 'humidity', unit: ''},
|
||||
{title: '温度', attr: 'temperature', unit: '℃'},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
// 查看设备电位表格
|
||||
pointDetail(row,dataType){
|
||||
pointDetail(row, dataType) {
|
||||
const {deviceId} = row
|
||||
this.$refs.pointTable.showTable({siteId:this.siteId,deviceId,deviceCategory:'DH'},dataType)
|
||||
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'DH'}, dataType)
|
||||
},
|
||||
showChart(pointName,deviceId){
|
||||
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'DH',deviceId})
|
||||
showChart(pointName, deviceId) {
|
||||
pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'DH', deviceId})
|
||||
},
|
||||
updateData(){
|
||||
updateData() {
|
||||
this.loading = true
|
||||
getDhDataList(this.siteId).then(response => {
|
||||
this.list = JSON.parse(JSON.stringify(response?.data || []));
|
||||
}).finally(() => {this.loading = false})
|
||||
this.list = JSON.parse(JSON.stringify(response?.data || []));
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
init(){
|
||||
init() {
|
||||
this.updateData()
|
||||
this.updateInterval(this.updateData)
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sbjk-card-container{
|
||||
&:not(:last-child){
|
||||
.sbjk-card-container {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.el-row{
|
||||
|
||||
.el-row {
|
||||
background-color: #ffffff;
|
||||
border:1px solid #eeeeee;
|
||||
border: 1px solid #eeeeee;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #333333;
|
||||
.el-col{
|
||||
padding:12px 0;
|
||||
|
||||
.el-col {
|
||||
padding: 12px 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.el-col{
|
||||
|
||||
.el-col {
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
.el-col:not(:nth-child(3n)){
|
||||
|
||||
.el-col:not(:nth-child(3n)) {
|
||||
border-right: 1px solid #eeeeee;
|
||||
}
|
||||
}
|
||||
|
||||
@ -218,7 +218,7 @@
|
||||
<div>数据更新时间：{{ item.dataUpdateTime }}</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<el-button size="small" style="margin-right:20px;" type="primary" @click="pointDetail(item,'point')">详细
|
||||
<el-button size="small" round style="margin-right:20px;" type="primary" @click="pointDetail(item,'point')">详细
|
||||
</el-button>
|
||||
<el-badge :value="item.alarmNum || 0" class="item">
|
||||
<i
|
||||
|
||||
@ -1,41 +1,50 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="pcs-ems-dashboard-editor-container">
|
||||
<!-- 顶部六个方块-->
|
||||
<real-time-base-info :data="runningHeadData" />
|
||||
<real-time-base-info :data="runningHeadData"/>
|
||||
<div
|
||||
v-for="(pcsItem, pcsIndex) in pcsList"
|
||||
:key="pcsIndex + 'PcsHome'"
|
||||
style="margin-bottom: 25px"
|
||||
v-for="(pcsItem, pcsIndex) in pcsList"
|
||||
:key="pcsIndex + 'PcsHome'"
|
||||
style="margin-bottom: 25px"
|
||||
>
|
||||
<el-card
|
||||
:class="{
|
||||
:class="{
|
||||
'warning-card-container': pcsItem.workStatus === '1',
|
||||
'timing-card-container': pcsItem.workStatus === '2',
|
||||
'running-card-container': !['1', '2'].includes(pcsItem.workStatus),
|
||||
}"
|
||||
class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||||
shadow="always"
|
||||
class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
|
||||
shadow="always"
|
||||
>
|
||||
<div slot="header">
|
||||
<span class="large-title"
|
||||
>{{ pcsItem.deviceName }}</span
|
||||
>{{ pcsItem.deviceName }}</span
|
||||
>
|
||||
<div class="info">
|
||||
<div>
|
||||
{{
|
||||
$store.state.ems.communicationStatusOptions[
|
||||
pcsItem.communicationStatus
|
||||
]
|
||||
pcsItem.communicationStatus
|
||||
]
|
||||
}}
|
||||
</div>
|
||||
<div>数据更新时间：{{ pcsItem.dataUpdateTime }}</div>
|
||||
</div>
|
||||
<div class="alarm">
|
||||
<el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(pcsItem,'point')">详细</el-button>
|
||||
<pcs-switch style="margin-right:10px;"
|
||||
:round="true"
|
||||
size="small"
|
||||
type="danger"
|
||||
:data="pcsItem"
|
||||
@updateSuccess="init"/>
|
||||
<el-button type="primary" round size="small" style="margin-right:20px;"
|
||||
@click="pointDetail(pcsItem,'point')">
|
||||
详细
|
||||
</el-button>
|
||||
<el-badge :value="pcsItem.alarmNum || 0" class="item">
|
||||
<i
|
||||
class="el-icon-message-solid alarm-icon"
|
||||
@click="pointDetail(pcsItem,'alarmPoint')"
|
||||
class="el-icon-message-solid alarm-icon"
|
||||
@click="pointDetail(pcsItem,'alarmPoint')"
|
||||
></i>
|
||||
</el-badge>
|
||||
</div>
|
||||
@ -43,64 +52,68 @@
|
||||
<div class="descriptions-main">
|
||||
<el-descriptions :colon="false" :column="4" direction="vertical">
|
||||
<el-descriptions-item
|
||||
:contentClassName="`descriptions-direction ${
|
||||
:contentClassName="`descriptions-direction ${
|
||||
pcsItem.workStatus === '0' ? 'save' : 'danger'
|
||||
}`"
|
||||
:span="1"
|
||||
label="工作状态"
|
||||
labelClassName="descriptions-label"
|
||||
>{{
|
||||
:span="1"
|
||||
label="工作状态"
|
||||
labelClassName="descriptions-label"
|
||||
>{{
|
||||
$store.state.ems.workStatusOptions[pcsItem.workStatus]
|
||||
}}</el-descriptions-item
|
||||
}}
|
||||
</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="并网状态"
|
||||
labelClassName="descriptions-label"
|
||||
>{{
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="并网状态"
|
||||
labelClassName="descriptions-label"
|
||||
>{{
|
||||
$store.state.ems.gridStatusOptions[pcsItem.gridStatus]
|
||||
}}</el-descriptions-item
|
||||
}}
|
||||
</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item
|
||||
:contentClassName="`descriptions-direction ${
|
||||
:contentClassName="`descriptions-direction ${
|
||||
pcsItem.deviceStatus === '2' ? 'save' : 'danger'
|
||||
}`"
|
||||
:span="1"
|
||||
label="设备状态"
|
||||
labelClassName="descriptions-label"
|
||||
>{{
|
||||
:span="1"
|
||||
label="设备状态"
|
||||
labelClassName="descriptions-label"
|
||||
>{{
|
||||
$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]
|
||||
}}</el-descriptions-item
|
||||
}}
|
||||
</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="控制模式"
|
||||
labelClassName="descriptions-label"
|
||||
>{{
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="控制模式"
|
||||
labelClassName="descriptions-label"
|
||||
>{{
|
||||
$store.state.ems.controlModeOptions[pcsItem.controlMode]
|
||||
}}</el-descriptions-item
|
||||
}}
|
||||
</el-descriptions-item
|
||||
>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div class="descriptions-main descriptions-main-bg-color">
|
||||
<el-descriptions
|
||||
:colon="false"
|
||||
:column="4"
|
||||
contentClassName="descriptions-direction"
|
||||
direction="vertical"
|
||||
labelClassName="descriptions-label"
|
||||
:colon="false"
|
||||
:column="4"
|
||||
contentClassName="descriptions-direction"
|
||||
direction="vertical"
|
||||
labelClassName="descriptions-label"
|
||||
>
|
||||
<el-descriptions-item
|
||||
v-for="(item, index) in infoData"
|
||||
:key="index + 'pcsInfoData'"
|
||||
:label="item.label"
|
||||
:span="1"
|
||||
v-for="(item, index) in infoData"
|
||||
:key="index + 'pcsInfoData'"
|
||||
:label="item.label"
|
||||
:span="1"
|
||||
>
|
||||
<span
|
||||
class="pointer"
|
||||
@click="
|
||||
class="pointer"
|
||||
@click="
|
||||
showChart(item.pointName || '', pcsItem.deviceId)
|
||||
"
|
||||
>
|
||||
@ -111,58 +124,59 @@
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<div
|
||||
v-for="(item, index) in pcsItem.pcsBranchInfoList"
|
||||
:key="index + 'pcsBranchInfoList'"
|
||||
class="descriptions-main"
|
||||
v-for="(item, index) in pcsItem.pcsBranchInfoList"
|
||||
:key="index + 'pcsBranchInfoList'"
|
||||
class="descriptions-main"
|
||||
>
|
||||
<el-descriptions
|
||||
:colon="false"
|
||||
:column="4"
|
||||
contentClassName="descriptions-direction keep"
|
||||
direction="vertical"
|
||||
labelClassName="descriptions-label"
|
||||
:colon="false"
|
||||
:column="4"
|
||||
contentClassName="descriptions-direction keep"
|
||||
direction="vertical"
|
||||
labelClassName="descriptions-label"
|
||||
>
|
||||
<el-descriptions-item
|
||||
:label="'支路' + (index + 1)"
|
||||
:span="4"
|
||||
contentClassName="descriptions-direction keep"
|
||||
labelClassName="descriptions-label"
|
||||
>{{ item.dischargeStatus }}</el-descriptions-item
|
||||
:label="'支路' + (index + 1)"
|
||||
:span="4"
|
||||
contentClassName="descriptions-direction keep"
|
||||
labelClassName="descriptions-label"
|
||||
>{{ item.dischargeStatus }}
|
||||
</el-descriptions-item
|
||||
>
|
||||
<el-descriptions-item
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="直流功率"
|
||||
labelClassName="descriptions-label"
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="直流功率"
|
||||
labelClassName="descriptions-label"
|
||||
>
|
||||
<span
|
||||
class="pointer"
|
||||
@click="showChart('直流功率', item.deviceId,true)"
|
||||
>{{ item.dcPower }}kW</span
|
||||
class="pointer"
|
||||
@click="showChart('直流功率', item.deviceId,true)"
|
||||
>{{ item.dcPower }}kW</span
|
||||
>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="直流电压"
|
||||
labelClassName="descriptions-label"
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="直流电压"
|
||||
labelClassName="descriptions-label"
|
||||
>
|
||||
<span
|
||||
class="pointer"
|
||||
@click="showChart('直流电压', item.deviceId,true)"
|
||||
>{{ item.dcVoltage }}V</span
|
||||
class="pointer"
|
||||
@click="showChart('直流电压', item.deviceId,true)"
|
||||
>{{ item.dcVoltage }}V</span
|
||||
>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="直流电流"
|
||||
labelClassName="descriptions-label"
|
||||
:span="1"
|
||||
contentClassName="descriptions-direction"
|
||||
label="直流电流"
|
||||
labelClassName="descriptions-label"
|
||||
>
|
||||
<span
|
||||
class="pointer"
|
||||
@click="showChart('直流电流', item.deviceId,true)"
|
||||
>{{ item.dcCurrent }}A</span
|
||||
class="pointer"
|
||||
@click="showChart('直流电流', item.deviceId,true)"
|
||||
>{{ item.dcCurrent }}A</span
|
||||
>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
@ -170,7 +184,7 @@
|
||||
</el-card>
|
||||
</div>
|
||||
<el-empty v-show="pcsList.length <= 0" :image-size="200"></el-empty>
|
||||
<point-chart ref="pointChart" :site-id="siteId" />
|
||||
<point-chart ref="pointChart" :site-id="siteId"/>
|
||||
<point-table ref="pointTable"/>
|
||||
</div>
|
||||
</template>
|
||||
@ -180,11 +194,13 @@ import pointChart from "./../PointChart.vue";
|
||||
import PointTable from "@/views/ems/site/sblb/PointTable.vue";
|
||||
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import { getRunningHeadInfo, getPcsDetailInfo } from "@/api/ems/dzjk";
|
||||
import {getPcsDetailInfo, getRunningHeadInfo} from "@/api/ems/dzjk";
|
||||
import intervalUpdate from "@/mixins/ems/intervalUpdate";
|
||||
import PcsSwitch from "@/views/ems/site/sblb/PcsSwitch.vue";
|
||||
|
||||
export default {
|
||||
name: "DzjkSbjkPcs",
|
||||
components: { RealTimeBaseInfo, pointChart ,PointTable},
|
||||
components: {RealTimeBaseInfo, pointChart, PointTable, PcsSwitch},
|
||||
mixins: [getQuerySiteId, intervalUpdate],
|
||||
data() {
|
||||
return {
|
||||
@ -204,7 +220,7 @@ export default {
|
||||
unit: "kWh",
|
||||
pointName: "当天交流充电量 (kWh)",
|
||||
},
|
||||
{ label: "A相电压", attr: "aPhaseVoltage", unit: "V", pointName: "" },
|
||||
{label: "A相电压", attr: "aPhaseVoltage", unit: "V", pointName: ""},
|
||||
{
|
||||
label: "A相电流",
|
||||
attr: "aPhaseCurrent",
|
||||
@ -223,7 +239,7 @@ export default {
|
||||
unit: "kWh",
|
||||
pointName: "当天交流放电量 (kWh)",
|
||||
},
|
||||
{ label: "B相电压", attr: "bPhaseVoltage", unit: "V", pointName: "" },
|
||||
{label: "B相电压", attr: "bPhaseVoltage", unit: "V", pointName: ""},
|
||||
{
|
||||
label: "B相电流",
|
||||
attr: "bPhaseCurrent",
|
||||
@ -242,7 +258,7 @@ export default {
|
||||
unit: "℃",
|
||||
pointName: "",
|
||||
},
|
||||
{ label: "C相电压", attr: "cPhaseVoltage", unit: "V", pointName: "" },
|
||||
{label: "C相电压", attr: "cPhaseVoltage", unit: "V", pointName: ""},
|
||||
{
|
||||
label: "C相电流",
|
||||
attr: "cPhaseCurrent",
|
||||
@ -273,13 +289,13 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
// 查看设备电位表格
|
||||
pointDetail(row,dataType){
|
||||
pointDetail(row, dataType) {
|
||||
const {deviceId} = row
|
||||
this.$refs.pointTable.showTable({siteId:this.siteId,deviceId,deviceCategory:'PCS'},dataType)
|
||||
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'PCS'}, dataType)
|
||||
},
|
||||
showChart(pointName, deviceId,isBranch=false) {
|
||||
showChart(pointName, deviceId, isBranch = false) {
|
||||
pointName &&
|
||||
this.$refs.pointChart.showChart({ pointName,deviceCategory:isBranch ? 'BRANCH' : 'PCS', deviceId });
|
||||
this.$refs.pointChart.showChart({pointName, deviceCategory: isBranch ? 'BRANCH' : 'PCS', deviceId});
|
||||
},
|
||||
//6个方块数据
|
||||
getRunningHeadData() {
|
||||
@ -290,11 +306,11 @@ export default {
|
||||
getPcsList() {
|
||||
this.loading = true;
|
||||
getPcsDetailInfo(this.siteId)
|
||||
.then((response) => {
|
||||
const data = response?.data || {};
|
||||
this.pcsList = JSON.parse(JSON.stringify(data));
|
||||
})
|
||||
.finally(() => (this.loading = false));
|
||||
.then((response) => {
|
||||
const data = response?.data || {};
|
||||
this.pcsList = JSON.parse(JSON.stringify(data));
|
||||
})
|
||||
.finally(() => (this.loading = false));
|
||||
},
|
||||
updateData() {
|
||||
this.getRunningHeadData();
|
||||
|
||||
@ -1,49 +1,52 @@
|
||||
|
||||
<template>
|
||||
<div v-loading="loading">
|
||||
<el-card
|
||||
v-for="(item,index) in list"
|
||||
:key="index+'ylLise'"
|
||||
class="sbjk-card-container running-card-container"
|
||||
:class="{
|
||||
<div v-loading="loading">
|
||||
<el-card
|
||||
v-for="(item,index) in list"
|
||||
:key="index+'ylLise'"
|
||||
class="sbjk-card-container running-card-container"
|
||||
:class="{
|
||||
'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0',
|
||||
'running-card-container':item.emsCommunicationStatus === '0'
|
||||
}"
|
||||
shadow="always">
|
||||
<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>
|
||||
shadow="always">
|
||||
<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>
|
||||
<el-row class="device-info-row">
|
||||
<el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'hdTempData'" :span="12" class="device-info-col">
|
||||
<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 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 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>
|
||||
</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>
|
||||
|
||||
|
||||
@ -53,68 +56,75 @@ import {getXfDataList} 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:'DzjkSbjkXf',
|
||||
mixins:[getQuerySiteId,intervalUpdate],
|
||||
components:{pointChart,PointTable},
|
||||
name: 'DzjkSbjkXf',
|
||||
mixins: [getQuerySiteId, intervalUpdate],
|
||||
components: {pointChart, PointTable},
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
list:[],
|
||||
tempData:[
|
||||
{title:'主电源备用电池状态',attr:'dczt',unit:''},
|
||||
{title:'手自动状态延时状态',attr:'yszt',unit:''},
|
||||
{title:'启动喷洒气体喷洒状态',attr:'pszt',unit:''},
|
||||
{title:'压力开关状态电磁阀状态',attr:'dcfzt',unit:''},
|
||||
loading: false,
|
||||
list: [],
|
||||
tempData: [
|
||||
{title: '主电源备用电池状态', attr: 'dczt', unit: ''},
|
||||
{title: '手自动状态延时状态', attr: 'yszt', unit: ''},
|
||||
{title: '启动喷洒气体喷洒状态', attr: 'pszt', unit: ''},
|
||||
{title: '压力开关状态电磁阀状态', attr: 'dcfzt', unit: ''},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
// 查看设备电位表格
|
||||
pointDetail(row,dataType){
|
||||
pointDetail(row, dataType) {
|
||||
const {deviceId} = row
|
||||
this.$refs.pointTable.showTable({siteId:this.siteId,deviceId,deviceCategory:'XF'},dataType)
|
||||
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'XF'}, dataType)
|
||||
},
|
||||
showChart(pointName,deviceId){
|
||||
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'XF',deviceId})
|
||||
showChart(pointName, deviceId) {
|
||||
pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'XF', deviceId})
|
||||
},
|
||||
updateData(){
|
||||
updateData() {
|
||||
this.loading = true
|
||||
getXfDataList(this.siteId).then(response => {
|
||||
this.list = JSON.parse(JSON.stringify(response?.data || []));
|
||||
}).finally(() => {this.loading = false})
|
||||
this.list = JSON.parse(JSON.stringify(response?.data || []));
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
init(){
|
||||
init() {
|
||||
this.updateData()
|
||||
this.updateInterval(this.updateData)
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sbjk-card-container{
|
||||
&:not(:last-child){
|
||||
.sbjk-card-container {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.el-row{
|
||||
|
||||
.el-row {
|
||||
background-color: #ffffff;
|
||||
border:1px solid #eeeeee;
|
||||
border: 1px solid #eeeeee;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: #333333;
|
||||
.el-col{
|
||||
padding:12px 0;
|
||||
|
||||
.el-col {
|
||||
padding: 12px 0;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.el-col{
|
||||
|
||||
.el-col {
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
.el-col:not(:nth-child(3n)){
|
||||
|
||||
.el-col:not(:nth-child(3n)) {
|
||||
border-right: 1px solid #eeeeee;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,38 +1,41 @@
|
||||
|
||||
<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 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>
|
||||
<el-row class="device-info-row">
|
||||
<el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8" class="device-info-col">
|
||||
<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 tempData" :key="tempDataIndex+'ylTempData'" :span="8"
|
||||
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 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>
|
||||
</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>
|
||||
|
||||
|
||||
@ -42,54 +45,57 @@ import {getCoolingDataList} 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:'DzjkSbjkYl',
|
||||
mixins:[getQuerySiteId,intervalUpdate],
|
||||
components:{pointChart,PointTable},
|
||||
name: 'DzjkSbjkYl',
|
||||
mixins: [getQuerySiteId, intervalUpdate],
|
||||
components: {pointChart, PointTable},
|
||||
data() {
|
||||
return {
|
||||
loading:false,
|
||||
list:[],
|
||||
tempData:[
|
||||
{title:'供水温度',attr:'gsTemp',unit:'℃'},
|
||||
{title:'回水温度',attr:'hsTemp',unit:'℃'},
|
||||
{title:'供水压力',attr:'gsPressure',unit:'bar'},
|
||||
{title:'回水压力',attr:'hsPressure',unit:'bar'},
|
||||
{title:'冷源水温度',attr:'lysTemp',unit:'℃'},
|
||||
{title:'VB01开度',attr:'vb01Kd',unit:'%'},
|
||||
{title:'VB02开度',attr:'vb02Kd',unit:'%'},
|
||||
loading: false,
|
||||
list: [],
|
||||
tempData: [
|
||||
{title: '供水温度', attr: 'gsTemp', unit: '℃'},
|
||||
{title: '回水温度', attr: 'hsTemp', unit: '℃'},
|
||||
{title: '供水压力', attr: 'gsPressure', unit: 'bar'},
|
||||
{title: '回水压力', attr: 'hsPressure', unit: 'bar'},
|
||||
{title: '冷源水温度', attr: 'lysTemp', unit: '℃'},
|
||||
{title: 'VB01开度', attr: 'vb01Kd', unit: '%'},
|
||||
{title: 'VB02开度', attr: 'vb02Kd', unit: '%'},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
// 查看设备电位表格
|
||||
pointDetail(row,dataType){
|
||||
pointDetail(row, dataType) {
|
||||
const {deviceId} = row
|
||||
this.$refs.pointTable.showTable({siteId:this.siteId,deviceId,deviceCategory:'COOLING'},dataType)
|
||||
this.$refs.pointTable.showTable({siteId: this.siteId, deviceId, deviceCategory: 'COOLING'}, dataType)
|
||||
},
|
||||
showChart(pointName,deviceId){
|
||||
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'COOLING',deviceId})
|
||||
showChart(pointName, deviceId) {
|
||||
pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'COOLING', deviceId})
|
||||
},
|
||||
updateData(){
|
||||
updateData() {
|
||||
this.loading = true
|
||||
getCoolingDataList(this.siteId).then(response => {
|
||||
this.list = JSON.parse(JSON.stringify(response?.data || []));
|
||||
}).finally(() => {this.loading = false})
|
||||
this.list = JSON.parse(JSON.stringify(response?.data || []));
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
init(){
|
||||
init() {
|
||||
this.updateData()
|
||||
this.updateInterval(this.updateData)
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
mounted() {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.sbjk-card-container{
|
||||
&:not(:last-child){
|
||||
.sbjk-card-container {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<div class="bottom-arrows"></div>
|
||||
</div>
|
||||
<div class="computer">
|
||||
<img src="@/assets/images/ems/computer.png" alt="" />
|
||||
<img src="@/assets/images/ems/computer.png" alt=""/>
|
||||
<span style="z-index: 2; position: relative">ems</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -22,27 +22,27 @@
|
||||
<div class="row-lists-container" v-if="showDb">
|
||||
<div class="row-title">电表({{ db.length }})</div>
|
||||
<div
|
||||
class="row-lists"
|
||||
v-for="outter in Math.ceil(db.length / 3)"
|
||||
:key="outter + 'row'"
|
||||
class="row-lists"
|
||||
v-for="outter in Math.ceil(db.length / 3)"
|
||||
:key="outter + 'row'"
|
||||
>
|
||||
<template v-for="(item, index) in handlerList('db', outter)">
|
||||
<div :key="index" class="row-items">
|
||||
<div
|
||||
style="position: relative; z-index: 2; background-color: #fff"
|
||||
style="position: relative; z-index: 2; background-color: #fff"
|
||||
>
|
||||
<div
|
||||
class="status"
|
||||
:class="
|
||||
item.runningStatus === '2' ? 'status-running' : ''
|
||||
class="status"
|
||||
:class="
|
||||
item.deviceStatus === '2' ? 'status-running' : ''
|
||||
"
|
||||
>
|
||||
{{ deviceStatusOptions[item.runningStatus] }}
|
||||
{{ deviceStatusOptions[item.deviceStatus] }}
|
||||
</div>
|
||||
<div class="row-items-img">
|
||||
<img
|
||||
class="img-db"
|
||||
:src="require('@/assets/images/ems/db.png')"
|
||||
class="img-db"
|
||||
:src="require('@/assets/images/ems/db.png')"
|
||||
/>
|
||||
<div class="name">{{ item.deviceName }}</div>
|
||||
</div>
|
||||
@ -56,27 +56,27 @@
|
||||
<div class="row-lists-container" v-if="showLq">
|
||||
<div class="row-title">冷却({{ lq.length }})</div>
|
||||
<div
|
||||
class="row-lists"
|
||||
v-for="outter in Math.ceil(lq.length / 3)"
|
||||
:key="outter + 'row'"
|
||||
class="row-lists"
|
||||
v-for="outter in Math.ceil(lq.length / 3)"
|
||||
:key="outter + 'row'"
|
||||
>
|
||||
<template v-for="(item, index) in handlerList('lq', outter)">
|
||||
<div :key="index" class="row-items">
|
||||
<div
|
||||
style="position: relative; z-index: 2; background-color: #fff"
|
||||
style="position: relative; z-index: 2; background-color: #fff"
|
||||
>
|
||||
<div
|
||||
class="status"
|
||||
:class="
|
||||
item.runningStatus === '2' ? 'status-running' : ''
|
||||
class="status"
|
||||
:class="
|
||||
item.deviceStatus === '2' ? 'status-running' : ''
|
||||
"
|
||||
>
|
||||
{{ deviceStatusOptions[item.runningStatus] }}
|
||||
{{ deviceStatusOptions[item.deviceStatus] }}
|
||||
</div>
|
||||
<div class="row-items-img">
|
||||
<img
|
||||
class="img-lq"
|
||||
:src="require('@/assets/images/ems/lq.png')"
|
||||
class="img-lq"
|
||||
:src="require('@/assets/images/ems/lq.png')"
|
||||
/>
|
||||
<div class="name">{{ item.deviceName }}</div>
|
||||
</div>
|
||||
@ -88,37 +88,37 @@
|
||||
|
||||
<!-- 没有上级设备的bms -->
|
||||
<div
|
||||
class="row-lists-container"
|
||||
v-if="bmsHasParentLength !== bms.length"
|
||||
class="row-lists-container"
|
||||
v-if="bmsHasParentLength !== bms.length"
|
||||
>
|
||||
<div class="row-title">BMS({{ bmsNoParent.length }})</div>
|
||||
<div
|
||||
class="row-lists"
|
||||
v-for="outter in Math.ceil(bmsNoParent.length / 3)"
|
||||
:key="outter + 'row'"
|
||||
class="row-lists"
|
||||
v-for="outter in Math.ceil(bmsNoParent.length / 3)"
|
||||
:key="outter + 'row'"
|
||||
>
|
||||
<template
|
||||
v-for="(item, index) in handlerList('bmsNoParent', outter)"
|
||||
v-for="(item, index) in handlerList('bmsNoParent', outter)"
|
||||
>
|
||||
<div :key="index" class="row-items">
|
||||
<div
|
||||
style="position: relative; z-index: 2; background-color: #fff"
|
||||
style="position: relative; z-index: 2; background-color: #fff"
|
||||
>
|
||||
<div
|
||||
class="status"
|
||||
:class="
|
||||
item.runningStatus === '2' ? 'status-running' : ''
|
||||
class="status"
|
||||
:class="
|
||||
item.deviceStatus === '2' ? 'status-running' : ''
|
||||
"
|
||||
>
|
||||
{{ deviceStatusOptions[item.runningStatus] }}
|
||||
{{ deviceStatusOptions[item.deviceStatus] }}
|
||||
</div>
|
||||
<div class="row-items-img row-items-img-bms">
|
||||
<div style="position:relative;">
|
||||
<img
|
||||
class="img-bms"
|
||||
:src="require('@/assets/images/ems/bms.png')"
|
||||
class="img-bms"
|
||||
:src="require('@/assets/images/ems/bms.png')"
|
||||
/>
|
||||
<div class="num">{{item.batteryNum || 0}}</div>
|
||||
<div class="num">{{ item.batteryNum || 0 }}</div>
|
||||
</div>
|
||||
<div class="name">{{ item.deviceName }}</div>
|
||||
</div>
|
||||
@ -130,8 +130,8 @@
|
||||
|
||||
<!-- pcs -->
|
||||
<div
|
||||
class="row-lists-container row-lists-container-with-children"
|
||||
v-if="showPcs"
|
||||
class="row-lists-container row-lists-container-with-children"
|
||||
v-if="showPcs"
|
||||
>
|
||||
<div class="row-title">
|
||||
PCS({{ pcs.length }}){{
|
||||
@ -139,56 +139,56 @@
|
||||
}}
|
||||
</div>
|
||||
<div
|
||||
class="row-lists"
|
||||
v-for="outter in Math.ceil(pcs.length / 3)"
|
||||
:key="outter + 'row'"
|
||||
class="row-lists"
|
||||
v-for="outter in Math.ceil(pcs.length / 3)"
|
||||
:key="outter + 'row'"
|
||||
>
|
||||
<template v-for="(item, index) in handlerList('pcs', outter)">
|
||||
<div :key="index" class="row-items">
|
||||
<!-- 上级设备 -->
|
||||
<div class="parent-dash">
|
||||
<div
|
||||
class="status"
|
||||
:class="
|
||||
item.runningStatus === '2' ? 'status-running' : ''
|
||||
class="status"
|
||||
:class="
|
||||
item.deviceStatus === '2' ? 'status-running' : ''
|
||||
"
|
||||
>
|
||||
{{ deviceStatusOptions[item.runningStatus] }}
|
||||
{{ deviceStatusOptions[item.deviceStatus] }}
|
||||
</div>
|
||||
<div class="row-items-img">
|
||||
<img
|
||||
class="img-pcs"
|
||||
:src="require('@/assets/images/ems/pcs.png')"
|
||||
class="img-pcs"
|
||||
:src="require('@/assets/images/ems/pcs.png')"
|
||||
/>
|
||||
<div class="name">{{ item.deviceName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 下级设备 -->
|
||||
<div
|
||||
class="children-dash"
|
||||
v-if="item.children && item.children.length > 0"
|
||||
class="children-dash"
|
||||
v-if="item.children && item.children.length > 0"
|
||||
>
|
||||
<div
|
||||
class="status"
|
||||
:class="
|
||||
item.children[0].runningStatus === '2'
|
||||
class="status"
|
||||
:class="
|
||||
item.children[0].deviceStatus === '2'
|
||||
? 'status-running'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{
|
||||
deviceStatusOptions[
|
||||
item.children[0].runningStatus
|
||||
]
|
||||
item.children[0].deviceStatus
|
||||
]
|
||||
}}
|
||||
</div>
|
||||
<div class="row-items-img row-items-img-bms">
|
||||
<div style="position: relative">
|
||||
<img
|
||||
class="img-bms"
|
||||
:src="require('@/assets/images/ems/bms.png')"
|
||||
class="img-bms"
|
||||
:src="require('@/assets/images/ems/bms.png')"
|
||||
/>
|
||||
<div class="num">{{item.batteryNum || 0}}</div>
|
||||
<div class="num">{{ item.batteryNum || 0 }}</div>
|
||||
</div>
|
||||
<div class="name">{{ item.children[0].deviceName }}</div>
|
||||
</div>
|
||||
@ -204,9 +204,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getDeviceList } from "@/api/ems/site";
|
||||
import {getDeviceList} from "@/api/ems/site";
|
||||
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
||||
import { mapState } from "vuex";
|
||||
import {mapState} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "DzjkZxlt",
|
||||
mixins: [getQuerySiteId],
|
||||
@ -223,7 +224,7 @@ export default {
|
||||
computed: {
|
||||
...mapState({
|
||||
deviceStatusOptions: (state) =>
|
||||
state.ems.deviceStatusOptions,
|
||||
state.ems.deviceStatusOptions,
|
||||
}),
|
||||
|
||||
showPcs() {
|
||||
@ -245,7 +246,7 @@ export default {
|
||||
},
|
||||
pcsHasChildren() {
|
||||
return this.pcs.filter(
|
||||
(item) => item.children && item.children.length > 0
|
||||
(item) => item.children && item.children.length > 0
|
||||
);
|
||||
},
|
||||
empty() {
|
||||
@ -270,46 +271,46 @@ export default {
|
||||
this.bmsNoParent = [];
|
||||
this.loading = true;
|
||||
getDeviceList(this.siteId)
|
||||
.then((response) => {
|
||||
const data = JSON.parse(JSON.stringify(response?.data || []));
|
||||
let pcs = [],
|
||||
bms = [],
|
||||
db = [],
|
||||
lq = [],
|
||||
bmsNoParent = [];
|
||||
data.forEach((item) => {
|
||||
// 电表
|
||||
if (item.deviceCategory === "AMMETER") {
|
||||
db.push({ ...item, children: [] });
|
||||
} else if (item.deviceCategory === "PCS") {
|
||||
// pcs
|
||||
pcs.push({ ...item, children: [] });
|
||||
} else if (item.deviceCategory === "STACK") {
|
||||
// bms
|
||||
bms.push({ ...item, children: [] });
|
||||
} else if (item.deviceCategory === "COOLING") {
|
||||
// 液冷
|
||||
lq.push({ ...item, children: [] });
|
||||
}
|
||||
.then((response) => {
|
||||
const data = JSON.parse(JSON.stringify(response?.data || []));
|
||||
let pcs = [],
|
||||
bms = [],
|
||||
db = [],
|
||||
lq = [],
|
||||
bmsNoParent = [];
|
||||
data.forEach((item) => {
|
||||
// 电表
|
||||
if (item.deviceCategory === "AMMETER") {
|
||||
db.push({...item, children: []});
|
||||
} else if (item.deviceCategory === "PCS") {
|
||||
// pcs
|
||||
pcs.push({...item, children: []});
|
||||
} else if (item.deviceCategory === "STACK") {
|
||||
// bms
|
||||
bms.push({...item, children: []});
|
||||
} else if (item.deviceCategory === "COOLING") {
|
||||
// 液冷
|
||||
lq.push({...item, children: []});
|
||||
}
|
||||
});
|
||||
bms.forEach((item, index) => {
|
||||
if (item.parentId) {
|
||||
pcs
|
||||
.find((pcsItem) => pcsItem.deviceId === item.parentId)
|
||||
.children.push(item);
|
||||
} else {
|
||||
bmsNoParent.push(item);
|
||||
}
|
||||
});
|
||||
this.pcs = pcs;
|
||||
this.bms = bms;
|
||||
this.lq = lq;
|
||||
this.db = db;
|
||||
this.bmsNoParent = bmsNoParent;
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
bms.forEach((item, index) => {
|
||||
if (item.parentId) {
|
||||
pcs
|
||||
.find((pcsItem) => pcsItem.deviceId === item.parentId)
|
||||
.children.push(item);
|
||||
} else {
|
||||
bmsNoParent.push(item);
|
||||
}
|
||||
});
|
||||
this.pcs = pcs;
|
||||
this.bms = bms;
|
||||
this.lq = lq;
|
||||
this.db = db;
|
||||
this.bmsNoParent = bmsNoParent;
|
||||
})
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -329,6 +330,7 @@ $lineColor: #86bcc7;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
//云 、计算机 、箭头
|
||||
.top {
|
||||
z-index: 2;
|
||||
@ -343,6 +345,7 @@ $lineColor: #86bcc7;
|
||||
//云 样式
|
||||
.cloud-container {
|
||||
margin: 0 auto;
|
||||
|
||||
.cloud {
|
||||
width: 60px;
|
||||
height: 26px;
|
||||
@ -354,6 +357,7 @@ $lineColor: #86bcc7;
|
||||
font-size: 14px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.cloud:before,
|
||||
.cloud:after {
|
||||
content: "";
|
||||
@ -363,20 +367,24 @@ $lineColor: #86bcc7;
|
||||
height: 30px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.cloud:before {
|
||||
top: -9px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.cloud:after {
|
||||
top: -6px;
|
||||
right: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
//双箭头
|
||||
.double-arrows {
|
||||
height: fit-content;
|
||||
margin: 0 10px;
|
||||
text-align: center;
|
||||
|
||||
.top-arrows,
|
||||
.bottom-arrows {
|
||||
height: 4px;
|
||||
@ -384,6 +392,7 @@ $lineColor: #86bcc7;
|
||||
background-color: #5ea9df;
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
@ -392,9 +401,11 @@ $lineColor: #86bcc7;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.top-arrows {
|
||||
vertical-align: super;
|
||||
}
|
||||
|
||||
.top-arrows::after {
|
||||
top: -4px;
|
||||
border-bottom: 6px solid transparent;
|
||||
@ -403,8 +414,10 @@ $lineColor: #86bcc7;
|
||||
border-top: 6px solid transparent;
|
||||
left: -11px;
|
||||
}
|
||||
|
||||
.bottom-arrows {
|
||||
margin-top: 8px;
|
||||
|
||||
&::after {
|
||||
top: -4px;
|
||||
border-top: 6px solid transparent;
|
||||
@ -425,6 +438,7 @@ $lineColor: #86bcc7;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
|
||||
img {
|
||||
width: 80px;
|
||||
height: auto;
|
||||
@ -432,6 +446,7 @@ $lineColor: #86bcc7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outer-border {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
@ -448,11 +463,11 @@ $lineColor: #86bcc7;
|
||||
|
||||
&:not(:first-child) {
|
||||
background: linear-gradient(
|
||||
to top,
|
||||
transparent 0%,
|
||||
transparent 50%,
|
||||
#ccc 50%,
|
||||
#ccc 100%
|
||||
to top,
|
||||
transparent 0%,
|
||||
transparent 50%,
|
||||
#ccc 50%,
|
||||
#ccc 100%
|
||||
);
|
||||
background-size: 1px 10px;
|
||||
background-repeat: repeat-y;
|
||||
@ -467,8 +482,10 @@ $lineColor: #86bcc7;
|
||||
color: #000;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.row-lists {
|
||||
position: relative;
|
||||
|
||||
.row-items {
|
||||
position: relative;
|
||||
padding: 5px 0;
|
||||
@ -503,17 +520,21 @@ $lineColor: #86bcc7;
|
||||
border-radius: 2px;
|
||||
background: #aaaaaa;
|
||||
color: #ffffff;
|
||||
|
||||
&.status-running {
|
||||
background: #00c69c;
|
||||
}
|
||||
}
|
||||
|
||||
// 图片+设备名称
|
||||
.row-items-img {
|
||||
position: relative;
|
||||
padding-top: 12px;
|
||||
&.row-items-img-bms{
|
||||
|
||||
&.row-items-img-bms {
|
||||
padding-top: 14px;
|
||||
.num{
|
||||
|
||||
.num {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
@ -526,21 +547,26 @@ $lineColor: #86bcc7;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 80px;
|
||||
height: auto;
|
||||
display: block;
|
||||
position: relative;
|
||||
|
||||
&.img-lq {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
&.img-pcs {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
&.img-db {
|
||||
width: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
@ -559,19 +585,24 @@ $lineColor: #86bcc7;
|
||||
&:not(:last-child) {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.row-items {
|
||||
display: flex;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.parent-dash {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background-color: #fff;
|
||||
|
||||
> div {
|
||||
z-index: 2;
|
||||
position: inherit;
|
||||
}
|
||||
|
||||
&::after {
|
||||
z-index: 1;
|
||||
content: "";
|
||||
@ -585,16 +616,19 @@ $lineColor: #86bcc7;
|
||||
transform: scale(0.4, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.children-dash {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background-color: #fff;
|
||||
margin: -20px 0 0 26px;
|
||||
height: fit-content;
|
||||
|
||||
> div {
|
||||
z-index: 2;
|
||||
position: inherit;
|
||||
}
|
||||
|
||||
&::after {
|
||||
z-index: 1;
|
||||
content: "";
|
||||
|
||||
94
src/views/ems/site/sblb/PcsSwitch.vue
Normal file
94
src/views/ems/site/sblb/PcsSwitch.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<el-button :size="size" :type="type" :round="round" @click="switchStatus"
|
||||
>
|
||||
{{ label }}
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
<script>
|
||||
import {updateDeviceStatus} from "@/api/ems/site";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
size: {
|
||||
type: String,
|
||||
default: 'mini',
|
||||
required: false
|
||||
},
|
||||
round: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
required: false
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
required: false
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
deviceStatus: null,
|
||||
deviceId: null,
|
||||
deviceName: null,
|
||||
}
|
||||
},
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
label() {
|
||||
return this.data.deviceStatus === '4' ? '开机' : '关机'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
switchStatus() {
|
||||
console.log(this.data, 11111111)
|
||||
const {deviceStatus, deviceId, deviceName, siteId} = this.data
|
||||
this.$confirm(`确认要${this.label}设备${deviceName || ''}吗?`, {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
showClose: false,
|
||||
closeOnClickModal: false,
|
||||
type: "warning",
|
||||
beforeClose: (action, instance, done) => {
|
||||
if (action === "confirm") {
|
||||
instance.confirmButtonLoading = true;
|
||||
//做开关机操作,更新成功后刷新表格
|
||||
updateDeviceStatus({
|
||||
siteId,
|
||||
deviceStatus,
|
||||
deviceId
|
||||
})
|
||||
.then((response) => {
|
||||
response.code === 200 && done();
|
||||
})
|
||||
.finally(() => {
|
||||
instance.confirmButtonLoading = false;
|
||||
});
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
//只有在废弃成功的情况下会走到这里
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: `${deviceName}${this.label}成功!`,
|
||||
});
|
||||
this.$emit('updateSuccess')
|
||||
//调用接口 更新表格数据
|
||||
})
|
||||
.catch(() => {
|
||||
//取消关机
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@ -42,8 +42,8 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showDialog({siteId, code}) {
|
||||
this.upload.data = {siteId, deviceCategory: code}
|
||||
showDialog({siteId, deviceCategory, deviceId}) {
|
||||
this.upload.data = {siteId, deviceCategory, deviceId}
|
||||
this.show = true;
|
||||
},
|
||||
//关闭弹窗 重置数据
|
||||
|
||||
@ -8,13 +8,23 @@
|
||||
:key="index+'zdxeSelect'"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型">
|
||||
<el-select v-model="deviceCategory" placeholder="请选择设备类型" @change="onSearch" clearable>
|
||||
<el-option
|
||||
v-for="(item,index) in deviceCategoryList"
|
||||
:key="index+'deviceCategorySelect'"
|
||||
:label="item.name"
|
||||
:value="item.code">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<!-- <el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>-->
|
||||
<!-- <el-button @click="onReset" native-type="button">重置</el-button>-->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" @click="addDevice" native-type="button">新增设备</el-button>
|
||||
<el-dropdown @command="downloadPointDetail">
|
||||
<el-dropdown @command="(val)=>downloadPointDetail(val,false)">
|
||||
<el-button
|
||||
style="margin-left:10px;"
|
||||
type="primary"
|
||||
@ -28,7 +38,7 @@
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<el-dropdown @command="uploadPointDetail">
|
||||
<el-dropdown @command="(val)=>uploadPointDetail(val,false)">
|
||||
<el-button
|
||||
style="margin-left:10px;"
|
||||
type="success"
|
||||
@ -42,8 +52,6 @@
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
|
||||
<el-table
|
||||
class="common-table"
|
||||
:data="tableData"
|
||||
@ -72,10 +80,13 @@
|
||||
label="设备类别">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="runningStatus"
|
||||
prop="deviceStatus"
|
||||
label="在线状态">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ $store.state.ems.deviceStatusOptions[scope.row.runningStatus] }}</span>
|
||||
<span>{{ $store.state.ems.deviceStatusOptions[scope.row.deviceStatus] }}</span>
|
||||
<pcs-switch v-if="scope.row.deviceCategory === 'PCS'" style="margin-left:5px;"
|
||||
:data="{siteId:scope.row.siteId,deviceStatus:scope.row.deviceStatus,deviceId:scope.row.deviceId,deviceName:scope.row.deviceName}"
|
||||
@updateSuccess="getData"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
@ -96,6 +107,23 @@
|
||||
报警点位清单
|
||||
</el-button>
|
||||
<br>
|
||||
<el-button
|
||||
@click="downloadPointDetail(scope.row,true)"
|
||||
style="margin-top:10px;"
|
||||
type="primary"
|
||||
plain
|
||||
size="mini">
|
||||
下载点位清单
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="uploadPointDetail(scope.row,true)"
|
||||
style="margin-top:10px;"
|
||||
type="success"
|
||||
plain
|
||||
size="mini">
|
||||
上传点位清单
|
||||
</el-button>
|
||||
<br>
|
||||
<el-button
|
||||
@click="editDevice(scope.row)"
|
||||
style="margin-top:10px;"
|
||||
@ -126,7 +154,7 @@
|
||||
style="margin-top:15px;text-align: center"
|
||||
>
|
||||
</el-pagination>
|
||||
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" title=" 详细信息" :close-on-click-modal="false"
|
||||
<el-dialog :visible.sync="dialogTableVisible" class="ems-dialog" title="详细信息" :close-on-click-modal="false"
|
||||
:before-close="handleClosed">
|
||||
<div class="descriptions-main" style="padding: 0">
|
||||
<el-descriptions direction="vertical" :column="2" :colon="false" border>
|
||||
@ -151,10 +179,11 @@ import {getAllDeviceCategory} from '@/api/ems/search'
|
||||
import PointTable from './PointTable.vue'
|
||||
import AddDevice from "./AddDevice.vue";
|
||||
import PointUpload from "./PointUpload.vue";
|
||||
import PcsSwitch from "./PcsSwitch.vue";
|
||||
|
||||
export default {
|
||||
name: "Sblb",
|
||||
components: {AddDevice, PointTable, PointUpload},
|
||||
components: {AddDevice, PointTable, PointUpload, PcsSwitch},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
@ -163,8 +192,9 @@ export default {
|
||||
editDeviceId: '',//编辑设备id
|
||||
siteId: '',
|
||||
siteList: [],
|
||||
tableData: [],
|
||||
deviceCategory: '',//搜索栏设备类型
|
||||
deviceCategoryList: [],//设备类别
|
||||
tableData: [],
|
||||
pageSize: 10,//分页栏当前每个数据总数
|
||||
pageNum: 1,//分页栏当前页数
|
||||
totalSize: 0,//table表格数据总数
|
||||
@ -204,15 +234,26 @@ export default {
|
||||
this.$refs.pointTable.showTable(row, dataType)
|
||||
},
|
||||
// 下载点位清单
|
||||
downloadPointDetail(command) {
|
||||
downloadPointDetail(command, isDetail = false) {
|
||||
const siteId = isDetail ? command.siteId : this.siteId
|
||||
const deviceCategory = isDetail ? command.deviceCategory : command.code
|
||||
const categoryName = isDetail ? command.categoryName : command.name
|
||||
const deviceId = isDetail ? command.deviceId : null
|
||||
console.log('下载', command, isDetail)
|
||||
this.download('ems/pointMatch/export', {
|
||||
siteId: this.siteId,
|
||||
deviceCategory: command.code
|
||||
}, `点位清单_${command.name}_${new Date().getTime()}.xlsx`)
|
||||
siteId,
|
||||
deviceCategory,
|
||||
deviceId,
|
||||
}, `点位清单_${categoryName}_${new Date().getTime()}.xlsx`)
|
||||
},
|
||||
// 上传点位清单
|
||||
uploadPointDetail(command) {
|
||||
this.$refs.pointUpload.showDialog({...command, siteId: this.siteId})
|
||||
uploadPointDetail(command, isDetail = false) {
|
||||
const siteId = isDetail ? command.siteId : this.siteId
|
||||
const deviceCategory = isDetail ? command.deviceCategory : command.code
|
||||
const categoryName = isDetail ? command.categoryName : command.name
|
||||
const deviceId = isDetail ? command.deviceId : ''
|
||||
console.log('上传', command, isDetail)
|
||||
this.$refs.pointUpload.showDialog({siteId, deviceCategory, categoryName, deviceId})
|
||||
},
|
||||
clearEditDeviceData() {
|
||||
this.mode = '';
|
||||
@ -312,8 +353,8 @@ export default {
|
||||
// 获取数据
|
||||
getData() {
|
||||
this.loading = true
|
||||
const {siteId, pageNum, pageSize} = this
|
||||
getDeviceInfoList({siteId, pageNum, pageSize}).then(response => {
|
||||
const {siteId, deviceCategory, pageNum, pageSize} = this
|
||||
getDeviceInfoList({siteId, deviceCategory, pageNum, pageSize}).then(response => {
|
||||
this.tableData = response?.rows || [];
|
||||
this.totalSize = response?.total || 0
|
||||
}).finally(() => {
|
||||
|
||||
Reference in New Issue
Block a user