xzzn/emsfront
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化

Browse Source
This commit is contained in:
白菜
2025-12-12 17:38:26 +08:00
parent 9b14d96e24
commit dd4fa36597
13 changed files with 851 additions and 679 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/ems/site.js
View File

@ -59,6 +59,15 @@ export function deleteService(id) {
}) })
} }
//pcs开、关机
export function updateDeviceStatus(data) {
return request({
url: `/ems/siteConfig/updateDeviceStatus`,
method: 'post',
data
})
}
// 获取上级设备id列表 // 获取上级设备id列表
export function getParentDeviceId({siteId, deviceCategory}) { export function getParentDeviceId({siteId, deviceCategory}) {
return request({ return request({

217
src/assets/styles/common.scss
View File

@ -4,58 +4,66 @@
//右侧内容区域 //右侧内容区域
//父元素 //父元素
.ems-dashboard-editor-container{ .ems-dashboard-editor-container {
background-color: #F1F5FC; background-color: #F1F5FC;
padding: 24px; padding: 24px;
font-size: 12px; font-size: 12px;
} }
//除去顶部信息(如搜索栏、站点基本信息等)外的 白色背景内容区域 //除去顶部信息(如搜索栏、站点基本信息等)外的 白色背景内容区域
.ems-content-container{ .ems-content-container {
background-color: #ffffff; background-color: #ffffff;
margin-top: 24px; margin-top: 24px;
} }
//需要设置内padding的白色背景区域 //需要设置内padding的白色背景区域
.ems-content-container-padding{ .ems-content-container-padding {
padding: 24px; padding: 24px;
} }
//card通用样式 标题、body //card通用样式 标题、body
.common-card-container{ .common-card-container {
.el-card__header{ .el-card__header {
padding:14px; padding: 14px;
border-bottom: none; border-bottom: none;
font-size: 12px; font-size: 12px;
background: #F1F5FB ; background: #F1F5FB;
position: relative; position: relative;
.card-title{
font-weight: 500;
color:#333333;
}
.el-button--text{
color: #666666;
}
.card-title {
font-weight: 500;
color: #333333;
} }
}
.common-card-container-body-no-padding{ .el-button--text {
.el-card__body{ color: #666666;
padding:0;
} }
}
} }
.common-card-container-body-no-padding {
.el-card__body {
padding: 0;
}
}
.common-card-container-no-title-bg { .common-card-container-no-title-bg {
.el-card__header{ .el-card__header {
background-color: transparent; background-color: transparent;
} }
} }
//单站监控 设备监控card公共样式 //单站监控 设备监控card公共样式
.sbjk-card-container{ .sbjk-card-container {
.el-card__header { .el-card__header {
background-color: transparent; background-color: transparent;
padding: 5px 14px; padding: 5px 14px;
color: #ffffff; color: #ffffff;
position: relative; position: relative;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
.large-title{
.large-title {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
line-height: 40px; line-height: 40px;
@ -63,6 +71,7 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.info { .info {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -70,15 +79,18 @@
font-size: 12px; font-size: 12px;
line-height: 20px; line-height: 20px;
} }
.el-button--text{
.el-button--text {
color: #666666; color: #666666;
} }
.alarm{
.alarm {
position: absolute; position: absolute;
right: 25px; right: 25px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
.alarm-icon{
.alarm-icon {
font-size: 22px; font-size: 22px;
color: #fff; color: #fff;
display: block; display: block;
@ -86,18 +98,21 @@
} }
} }
} }
//红色背景颜色标题 //红色背景颜色标题
&.warning-card-container{ &.warning-card-container {
.el-card__header { .el-card__header {
background-color: #fc6b69; background-color: #b64040; //#fc6b69;
} }
} }
//绿色背景颜色标题 //绿色背景颜色标题
&.running-card-container { &.running-card-container {
.el-card__header { .el-card__header {
background-color: #05aea3; background-color: #40b6a5; //#05aea3;
} }
} }
//灰色背景颜色标题 //灰色背景颜色标题
&.timing-card-container { &.timing-card-container {
.el-card__header { .el-card__header {
@ -111,11 +126,13 @@
&.common-card-container .el-card__header { &.common-card-container .el-card__header {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
.time-range-header { .time-range-header {
height: 40px; height: 40px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.card-title { .card-title {
line-height: 40px; line-height: 40px;
} }
@ -124,86 +141,100 @@
} }
//描述样式 PCS、BMS总览、BMS电池簇页面公共样式 //描述样式 PCS、BMS总览、BMS电池簇页面公共样式
.descriptions-main{ .descriptions-main {
padding:24px; padding: 24px;
position: relative; position: relative;
&.descriptions-main-bg-color{
background-color:#f1f5fc ; &.descriptions-main-bg-color {
.el-descriptions__body{ background-color: #f1f5fc;
background-color:#f1f5fc ;
.el-descriptions__body {
background-color: #f1f5fc;
} }
} }
.el-descriptions-item__cell[colspan='1']{
width:25% .el-descriptions-item__cell[colspan='1'] {
width: 25%
} }
.el-descriptions__body .el-descriptions__table{
.descriptions-direction{ .el-descriptions__body .el-descriptions__table {
.descriptions-direction {
line-height: 19px; line-height: 19px;
color: #666666; color: #666666;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
} }
.descriptions-label{
.descriptions-label {
line-height: 14px; line-height: 14px;
color: #666666; color: #666666;
font-size: 12px; font-size: 12px;
} }
.danger{
color:#FC6B69; .danger {
color: #FC6B69;
} }
.save{
color:#09ADA3; .save {
color: #09ADA3;
} }
.keep{
color:#3C81FF; .keep {
color: #3C81FF;
} }
} }
} }
//电表、液冷公共样式 //电表、液冷公共样式
.device-info-row{ .device-info-row {
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
border-left: 1px solid #eee; border-left: 1px solid #eee;
border-top: 1px solid #eee; border-top: 1px solid #eee;
.device-info-col{
.device-info-col {
padding: 10px 0; padding: 10px 0;
text-align: center; text-align: center;
font-size:12px; font-size: 12px;
color:#666666; color: #666666;
line-height: 14px; line-height: 14px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
border-right: 1px solid #eee; border-right: 1px solid #eee;
.left{
.left {
} }
.right{
.right {
display: block; display: block;
font-weight: 500; font-weight: 500;
font-size:16px; font-size: 16px;
line-height: 18px; line-height: 18px;
margin-top:10px; margin-top: 10px;
} }
} }
} }
//公共表格样式 //公共表格样式
.el-table{ .el-table {
font-size:13px; font-size: 13px;
} }
.common-table.el-table{
color:#333333; .common-table.el-table {
color: #333333;
.el-table__header-wrapper th, .el-table__fixed-header-wrapper th { .el-table__header-wrapper th, .el-table__fixed-header-wrapper th {
background: #f1f5fc; background: #f1f5fc;
border-bottom: none; border-bottom: none;
.table-head { .table-head {
color: #515a6e; color: #515a6e;
} }
} }
.warning-status{
color:#FC6B69; .warning-status {
color: #FC6B69;
&.circle::before { &.circle::before {
content: ""; content: "";
display: inline-block; display: inline-block;
@ -217,54 +248,61 @@
} }
//二、三级菜单栏样式 //二、三级菜单栏样式
.ems-second-menu{ .ems-second-menu {
width:fit-content; width: fit-content;
.el-menu-item{
.el-menu-item {
line-height: 40px; line-height: 40px;
height: 40px; height: 40px;
padding:0; padding: 0;
} }
&.el-menu--horizontal > .el-menu-item.is-active,&.el-menu--horizontal > .el-menu-item{
border-bottom:none!important; &.el-menu--horizontal > .el-menu-item.is-active, &.el-menu--horizontal > .el-menu-item {
border-bottom: none !important;
} }
.el-menu-item.is-active{
background: #0366c1!important; .el-menu-item.is-active {
background: #0366c1 !important;
} }
} }
.ems-third-menu-container{
.ems-third-menu-container {
position: relative; position: relative;
padding-left: 140px; padding-left: 140px;
background-color: #ffffff; background-color: #ffffff;
.ems-third-menu{
.ems-third-menu {
border-right: none; border-right: none;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
height: fit-content; height: fit-content;
position: absolute; position: absolute;
top:0; top: 0;
left:0; left: 0;
.el-menu-item{
.el-menu-item {
line-height: 45px; line-height: 45px;
height: 45px; height: 45px;
padding: 0 !important; padding: 0 !important;
width: 125px; width: 125px;
text-align: center; text-align: center;
} }
.el-menu-item:hover{
background: #67b1ff!important; .el-menu-item:hover {
color:#ffffff!important; background: #67b1ff !important;
color: #ffffff !important;
} }
.el-menu-item.is-active{
background: #409eff!important; .el-menu-item.is-active {
background: #409eff !important;
} }
} }
} }
//按钮栏 选中样式 //按钮栏 选中样式
.ems-btns-group{ .ems-btns-group {
.activeBtn{ .activeBtn {
background-color: #0366c1; background-color: #0366c1;
border-color: #0366c1; border-color: #0366c1;
color: #ffffff; color: #ffffff;
@ -273,11 +311,12 @@
} }
//搜索栏样式 //搜索栏样式
.select-container.el-form--inline .el-form-item{ .select-container.el-form--inline .el-form-item {
margin-right: 15px; margin-right: 15px;
} }
//红色背景颜色按钮 //红色背景颜色按钮
.alarm-btn,.alarm-btn:hover, .alarm-btn:focus{ .alarm-btn, .alarm-btn:hover, .alarm-btn:focus {
background-color: #FC6B69; background-color: #FC6B69;
border-color: #FC6B69; border-color: #FC6B69;
} }

222
src/views/ems/dzjk/sbjk/bmsdcc/index.vue
View File

@ -1,19 +1,22 @@
<template> <template>
<div v-loading="loading"> <div v-loading="loading">
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmsdccContainer'" style="margin-bottom:25px;"> <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" <el-card shadow="always"
:class="{ 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', 'warning-card-container':baseInfo.workStatus && baseInfo.workStatus !== '0',
'running-card-container':baseInfo.workStatus === '0' 'running-card-container':baseInfo.workStatus === '0'
}"> }">
<div slot="header"> <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 class="info">
<div>数据更新时间：{{ baseInfo.dataUpdateTime || '-'}}</div> <div>数据更新时间：{{ baseInfo.dataUpdateTime || '-' }}</div>
</div> </div>
<div class="alarm"> <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"> <el-badge :value="baseInfo.alarmNum || 0" class="item">
<i <i
class="el-icon-message-solid alarm-icon" class="el-icon-message-solid alarm-icon"
@ -22,70 +25,87 @@
</el-badge> </el-badge>
</div> </div>
</div> </div>
<div class="descriptions-main"> <div class="descriptions-main">
<el-descriptions direction="vertical" :column="3" :colon="false"> <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"
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="与PCS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item> :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`"
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="与EMS通信">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</el-descriptions-item> :span="1" label="工作状态">
</el-descriptions> {{ $store.state.ems.workStatusOptions[baseInfo.workStatus] }}
</div> </el-descriptions-item>
<div class="descriptions-main descriptions-main-bg-color"> <el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction"
<el-descriptions direction="vertical" :column="3" :colon="false"> :span="1" label="与PCS通信">
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label"> {{ $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)"> <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> </span>
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
<!-- 进度--> <!-- 进度-->
<div class="process-container"> <div class="process-container">
<div class="process-line-bg"> <div class="process-line-bg">
<div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div> <div class="process-line" :style="{height:baseInfo.currentSoc+'%'}"></div>
</div> </div>
<div class="process pointer" @click="showChart( '当前SOC',baseInfo.deviceId)">当前SOC : {{baseInfo.currentSoc}}%</div> <div class="process pointer" @click="showChart( '当前SOC',baseInfo.deviceId)">当前SOC :
{{ baseInfo.currentSoc }}%
</div> </div>
</div> </div>
</div>
<el-table <el-table
class="common-table" class="common-table"
:data="baseInfo.batteryDataList" :data="baseInfo.batteryDataList"
stripe stripe
style="width: 100%;margin-top:25px;"> style="width: 100%;margin-top:25px;">
<el-table-column <el-table-column
prop="dataName" prop="dataName"
label="名称"> label="名称">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-html="scope.row.dataName+'（'+unitObj[scope.row.dataName]+'）'"></span> <span v-html="scope.row.dataName+'（'+unitObj[scope.row.dataName]+'）'"></span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="avgData" prop="avgData"
label="单体平均值" label="单体平均值"
> >
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="minData" prop="minData"
label="单体最小值"> label="单体最小值">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="minDataID" prop="minDataID"
label="单体最小值ID"> label="单体最小值ID">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="maxData" prop="maxData"
label="单体最大值"> label="单体最大值">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="maxDataID" prop="maxDataID"
label="单体最大值ID"> label="单体最大值ID">
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-card> </el-card>
@ -103,59 +123,62 @@ import PointTable from "@/views/ems/site/sblb/PointTable.vue";
import {getBMSBatteryCluster} from '@/api/ems/dzjk' import {getBMSBatteryCluster} from '@/api/ems/dzjk'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId"; import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import intervalUpdate from "@/mixins/ems/intervalUpdate"; import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default { export default {
name:'DzjkSbjkBmsdcc', name: 'DzjkSbjkBmsdcc',
mixins:[getQuerySiteId,intervalUpdate], mixins: [getQuerySiteId, intervalUpdate],
components:{PointTable, pointChart}, components: {PointTable, pointChart},
data() { data() {
return { return {
loading:false, loading: false,
unitObj:{ unitObj: {
'电压':'V', '电压': 'V',
'温度':'&#8451;', '温度': '&#8451;',
'SOC':'%' 'SOC': '%'
}, },
tablePointNameMap:{ tablePointNameMap: {
'电压单体最小值':'最低单体电压', '电压单体最小值': '最低单体电压',
'电压单体平均值':'电压平均值', '电压单体平均值': '电压平均值',
'电压单体最大值':'最高单体电压', '电压单体最大值': '最高单体电压',
'温度单体最小值':'最低单体温度', '温度单体最小值': '最低单体温度',
'温度单体平均值':'平均单体温度', '温度单体平均值': '平均单体温度',
'温度单体最大值':'最高单体温度', '温度单体最大值': '最高单体温度',
'SOC单体最小值':'最低单体SOC', 'SOC单体最小值': '最低单体SOC',
'SOC单体平均值':'当前SOC', 'SOC单体平均值': '当前SOC',
'SOC单体最大值':'最高单体SOC', 'SOC单体最大值': '最高单体SOC',
}, },
baseInfoList:[], baseInfoList: [],
infoData:[ infoData: [
{label:'簇电压',attr:'clusterVoltage',unit:'V',pointName:'簇电压'}, {label: '簇电压', attr: 'clusterVoltage', unit: 'V', pointName: '簇电压'},
{label:'可充电量',attr:'chargeableCapacity',unit:'kWh',pointName:'可充电量'}, {label: '可充电量', attr: 'chargeableCapacity', unit: 'kWh', pointName: '可充电量'},
{label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh',pointName:'累计充电量'}, {label: '累计充电量', attr: 'totalChargedCapacity', unit: 'kWh', pointName: '累计充电量'},
{label:'簇电流',attr:'clusterCurrent',unit:'A',pointName:'簇电流'}, {label: '簇电流', attr: 'clusterCurrent', unit: 'A', pointName: '簇电流'},
{label:'可放电量',attr:'dischargeableCapacity',unit:'kWh',pointName:'可放电量'}, {label: '可放电量', attr: 'dischargeableCapacity', unit: 'kWh', pointName: '可放电量'},
{label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh',pointName:'累计放电量'}, {label: '累计放电量', attr: 'totalDischargedCapacity', unit: 'kWh', pointName: '累计放电量'},
{label:'SOH',attr:'soh',unit:'%',pointName:'SOH'}, {label: 'SOH', attr: 'soh', unit: '%', pointName: 'SOH'},
{label:'平均温度',attr:'averageTemperature',unit:'&#8451;',pointName:'平均温度'}, {label: '平均温度', attr: 'averageTemperature', unit: '&#8451;', pointName: '平均温度'},
{label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;',pointName:'绝缘电阻'}, {label: '绝缘电阻', attr: 'insulationResistance', unit: '&Omega;', pointName: '绝缘电阻'},
], ],
} }
}, },
methods:{ methods: {
// 查看设备电位表格 // 查看设备电位表格
pointDetail(row,dataType){ pointDetail(row, dataType) {
const {siteId,deviceId} = row const {siteId, deviceId} = row
this.$refs.pointTable.showTable({siteId,deviceId,deviceCategory:'CLUSTER'},dataType) this.$refs.pointTable.showTable({siteId, deviceId, deviceCategory: 'CLUSTER'}, dataType)
}, },
showChart(pointName,deviceId){ showChart(pointName, deviceId) {
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'CLUSTER',deviceId}) pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'CLUSTER', deviceId})
}, },
updateData(){ updateData() {
this.loading = true this.loading = true
getBMSBatteryCluster(this.siteId).then(response => { getBMSBatteryCluster(this.siteId).then(response => {
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || [])); this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {this.loading = false}) }).finally(() => {
this.loading = false
})
}, },
init(){ init() {
this.updateData() this.updateData()
this.updateInterval(this.updateData) this.updateInterval(this.updateData)
} }
@ -166,28 +189,32 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep { ::v-deep {
//描述列表样式 //描述列表样式
.descriptions-main{ .descriptions-main {
padding:24px 300px 24px 24px; padding: 24px 300px 24px 24px;
} }
.descriptions-main-bottom{
padding:14px 300px 14px 24px; .descriptions-main-bottom {
padding: 14px 300px 14px 24px;
} }
} }
// 进度条样式 // 进度条样式
.process-container{ .process-container {
width:100px; width: 100px;
position: absolute; position: absolute;
right:70px; right: 70px;
top:50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
.process-line-bg{
.process-line-bg {
position: relative; position: relative;
width:100%; width: 100%;
height: 110px; height: 110px;
background-color:#fff2cb ; background-color: #fff2cb;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5); box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);
.process-line{
.process-line {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
@ -198,9 +225,10 @@ export default {
box-shadow: 0 0 10px #ffbf14, 0 0 0 rgba(255, 191, 20, 0.5); box-shadow: 0 0 10px #ffbf14, 0 0 0 rgba(255, 191, 20, 0.5);
} }
} }
.process{
margin-top:15px; .process {
color:#666666; margin-top: 15px;
color: #666666;
} }
} }

185
src/views/ems/dzjk/sbjk/bmszl/index.vue
View File

@ -1,4 +1,3 @@
<template> <template>
<div v-loading="loading"> <div v-loading="loading">
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;"> <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" }" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
shadow="always"> shadow="always">
<div slot="header"> <div slot="header">
<span class="large-title">{{baseInfo.deviceName}}</span> <span class="large-title">{{ baseInfo.deviceName }}</span>
<div class="info"> <div class="info">
<div>数据更新时间：{{ baseInfo.dataUpdateTime || '-'}}</div> <div>数据更新时间：{{ baseInfo.dataUpdateTime || '-' }}</div>
</div> </div>
<div class="alarm"> <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"> <el-badge :value="baseInfo.alarmNum || 0" class="item">
<i <i
class="el-icon-message-solid alarm-icon" class="el-icon-message-solid alarm-icon"
@ -24,16 +25,28 @@
</div> </div>
<div class="descriptions-main"> <div class="descriptions-main">
<el-descriptions :colon="false" :column="3" direction="vertical"> <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
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与PCS通信" labelClassName="descriptions-label">{{$store.state.ems.communicationStatusOptions[baseInfo.pcsCommunicationStatus]}}</el-descriptions-item> :contentClassName="`descriptions-direction ${baseInfo.workStatus === '0' ? 'save' :'danger'}`" :span="1"
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="与EMS通信" labelClassName="descriptions-label">{{$store.state.ems.communicationStatusOptions[baseInfo.emsCommunicationStatus]}}</el-descriptions-item> 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> </el-descriptions>
</div> </div>
<div class="descriptions-main descriptions-main-bg-color"> <div class="descriptions-main descriptions-main-bg-color">
<el-descriptions :colon="false" :column="3" direction="vertical"> <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"> <el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label"
<span class="pointer" @click="showChart(item.pointName || '',baseInfo.deviceId)"> :span="1" contentClassName="descriptions-direction"
{{baseInfo[item.attr] | formatNumber}}<span v-if="item.unit" v-html="item.unit"></span> 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> </span>
</el-descriptions-item> </el-descriptions-item>
</el-descriptions> </el-descriptions>
@ -42,80 +55,89 @@
<div class="process-line-bg"> <div class="process-line-bg">
<div :style="{height:baseInfo.stackSoc+'%'}" class="process-line"></div> <div :style="{height:baseInfo.stackSoc+'%'}" class="process-line"></div>
</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>
</div> </div>
<el-table <el-table
:data="baseInfo.batteryDataList" :data="baseInfo.batteryDataList"
class="common-table" class="common-table"
max-height="500" max-height="500"
stripe stripe
style="width: 100%;margin-top:25px;"> style="width: 100%;margin-top:25px;">
<el-table-column <el-table-column
label="簇号" label="簇号"
prop="clusterId"> prop="clusterId">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="簇电压" label="簇电压"
> >
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="簇电流"> label="簇电流">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="簇SOC"> label="簇SOC">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="单体最高电压" label="单体最高电压"
prop="maxVoltage"> prop="maxVoltage">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="电池号码" label="电池号码"
prop="maxCellVoltageId"> prop="maxCellVoltageId">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="单体最低电压" label="单体最低电压"
prop="minVoltage"> prop="minVoltage">
<template slot-scope="scope"> <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> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="电池号码" label="电池号码"
prop="minCellVoltageId"> prop="minCellVoltageId">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="单体最高温度"> label="单体最高温度">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="pointer" @click="showChart('最高单体温度',scope.row.clusterId,'CLUSTER')">{{scope.row.maxCellTemp}} &#8451;</span> <span class="pointer"
@click="showChart('最高单体温度',scope.row.clusterId,'CLUSTER')">{{ scope.row.maxCellTemp }} &#8451;</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="电池号码" label="电池号码"
prop="maxCellTempId"> prop="maxCellTempId">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="单体最低温度" label="单体最低温度"
prop="minTemperature"> prop="minTemperature">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="pointer" @click="showChart('最低单体温度',scope.row.clusterId,'CLUSTER')">{{scope.row.minCellTemp}} &#8451;</span> <span class="pointer"
@click="showChart('最低单体温度',scope.row.clusterId,'CLUSTER')">{{ scope.row.minCellTemp }} &#8451;</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
label="电池号码" label="电池号码"
prop="minCellTempId"> prop="minCellTempId">
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -133,43 +155,46 @@ import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import intervalUpdate from "@/mixins/ems/intervalUpdate"; import intervalUpdate from "@/mixins/ems/intervalUpdate";
import pointChart from "./../PointChart.vue"; import pointChart from "./../PointChart.vue";
import PointTable from "@/views/ems/site/sblb/PointTable.vue"; import PointTable from "@/views/ems/site/sblb/PointTable.vue";
export default { export default {
name:'DzjkSbjkBmszl', name: 'DzjkSbjkBmszl',
components: {pointChart,PointTable}, components: {pointChart, PointTable},
mixins:[getQuerySiteId,intervalUpdate], mixins: [getQuerySiteId, intervalUpdate],
data() { data() {
return { return {
loading:false, loading: false,
baseInfoList:[], baseInfoList: [],
infoData:[ infoData: [
{label:'电池堆总电压',attr:'stackVoltage',unit:'V',pointName:'电池堆电压'}, {label: '电池堆总电压', attr: 'stackVoltage', unit: 'V', pointName: '电池堆电压'},
{label:'可充电量',attr:'availableChargeCapacity',unit:'kWh',pointName:'可充电量'}, {label: '可充电量', attr: 'availableChargeCapacity', unit: 'kWh', pointName: '可充电量'},
{label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh',pointName:'累计充电量'}, {label: '累计充电量', attr: 'totalChargeCapacity', unit: 'kWh', pointName: '累计充电量'},
{label:'电池堆总电流',attr:'stackCurrent',unit:'A',pointName:'电池堆总电流'}, {label: '电池堆总电流', attr: 'stackCurrent', unit: 'A', pointName: '电池堆总电流'},
{label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh',pointName:'可放电量'}, {label: '可放电量', attr: 'availableDischargeCapacity', unit: 'kWh', pointName: '可放电量'},
{label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh',pointName:'累计放电量'}, {label: '累计放电量', attr: 'totalDischargeCapacity', unit: 'kWh', pointName: '累计放电量'},
{label:'SOH',attr:'stackSoh',unit:'%',pointName:'SOH'}, {label: 'SOH', attr: 'stackSoh', unit: '%', pointName: 'SOH'},
{label:'平均温度',attr:'operatingTemp',unit:'&#8451;',pointName:'平均温度'}, {label: '平均温度', attr: 'operatingTemp', unit: '&#8451;', pointName: '平均温度'},
{label:'绝缘电阻',attr:'stackInsulationResistance',unit:'&Omega;',pointName:'绝缘电阻'}, {label: '绝缘电阻', attr: 'stackInsulationResistance', unit: '&Omega;', pointName: '绝缘电阻'},
] ]
} }
}, },
methods:{ methods: {
// 查看设备电位表格 // 查看设备电位表格
pointDetail(row,dataType){ pointDetail(row, dataType) {
const {siteId,deviceId} = row const {siteId, deviceId} = row
this.$refs.pointTable.showTable({siteId,deviceId,deviceCategory:'STACK'},dataType) this.$refs.pointTable.showTable({siteId, deviceId, deviceCategory: 'STACK'}, dataType)
}, },
showChart(pointName,deviceId,deviceCategory = 'STACK'){ showChart(pointName, deviceId, deviceCategory = 'STACK') {
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory,deviceId}) pointName && this.$refs.pointChart.showChart({pointName, deviceCategory, deviceId})
}, },
updateData(){ updateData() {
this.loading = true this.loading = true
getBMSOverView(this.siteId).then(response => { getBMSOverView(this.siteId).then(response => {
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || [])); this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {this.loading = false}) }).finally(() => {
this.loading = false
})
}, },
init(){ init() {
this.updateData() this.updateData()
this.updateInterval(this.updateData) this.updateInterval(this.updateData)
} }
@ -189,21 +214,24 @@ export default {
} }
} }
} }
// 进度条样式 // 进度条样式
.process-container{ .process-container {
width:100px; width: 100px;
position: absolute; position: absolute;
right:70px; right: 70px;
top:50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
.process-line-bg{
.process-line-bg {
position: relative; position: relative;
width:100%; width: 100%;
height: 110px; height: 110px;
background-color:#fff2cb ; background-color: #fff2cb;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5); box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);
.process-line{
.process-line {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 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); box-shadow: 0 0 10px rgb(252 108 108), 0 0 0 rgba(252, 108, 108, 0.5);
} }
} }
.process{
margin-top:15px; .process {
color:#666666; margin-top: 15px;
color: #666666;
} }
} }

202
src/views/ems/dzjk/sbjk/db/index.vue
View File

@ -1,45 +1,49 @@
<template> <template>
<div v-loading="loading"> <div v-loading="loading">
<el-card <el-card
v-for="(item,index) in list" v-for="(item,index) in list"
:key="index+'dbList'" :key="index+'dbList'"
shadow="always" shadow="always"
class="sbjk-card-container list" class="sbjk-card-container list"
:class="{ :class="{
'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0', 'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0',
'running-card-container':item.emsCommunicationStatus === '0' 'running-card-container':item.emsCommunicationStatus === '0'
}" }"
> >
<div slot="header"> <div slot="header">
<span class="large-title">{{ item.deviceName }}</span> <span class="large-title">{{ item.deviceName }}</span>
<div class="info"> <div class="info">
<div> <div>
{{ {{
$store.state.ems.communicationStatusOptions[ $store.state.ems.communicationStatusOptions[
item.emsCommunicationStatus item.emsCommunicationStatus
] ]
}} }}
</div> </div>
<div>数据更新时间：{{ item.dataUpdateTime }}</div> <div>数据更新时间：{{ item.dataUpdateTime }}</div>
</div> </div>
<div class="alarm"> <div class="alarm">
<el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">详细</el-button> <el-button type="primary" round size="small" style="margin-right:20px;" @click="pointDetail(item,'point')">
<el-badge :value="item.alarmNum || 0" class="item"> 详细
<i </el-button>
class="el-icon-message-solid alarm-icon" <el-badge :value="item.alarmNum || 0" class="item">
@click="pointDetail(item,'alarmPoint')" <i
></i> class="el-icon-message-solid alarm-icon"
</el-badge> @click="pointDetail(item,'alarmPoint')"
</div> ></i>
</div> </el-badge>
<el-row class="device-info-row"> </div>
<el-col v-for="(tempDataItem,tempDataIndex) in deviceIdTypeMsg[item.deviceId]" :key="tempDataIndex+'dbTempData'" :span="8" class="device-info-col"> </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="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> </span>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
<el-empty v-show="list.length<=0" :image-size="200"></el-empty> <el-empty v-show="list.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"/> <point-table ref="pointTable"/>
@ -49,102 +53,103 @@
<script> <script>
import pointChart from "./../PointChart.vue"; import pointChart from "./../PointChart.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId"; 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 intervalUpdate from "@/mixins/ems/intervalUpdate";
import PointTable from "@/views/ems/site/sblb/PointTable.vue"; import PointTable from "@/views/ems/site/sblb/PointTable.vue";
export default { export default {
name: "DzjkSbjkDb", name: "DzjkSbjkDb",
mixins: [getQuerySiteId,intervalUpdate], mixins: [getQuerySiteId, intervalUpdate],
components:{PointTable, pointChart}, components: {PointTable, pointChart},
data() { data() {
return { return {
loading: false, loading: false,
list:[], list: [],
deviceIdTypeMsg:{ deviceIdTypeMsg: {
'LOAD':[ 'LOAD': [
{ {
name:'正向有功电能', name: '正向有功电能',
attr:'forwardActive', attr: 'forwardActive',
pointName:'正向有功电能' pointName: '正向有功电能'
}, },
{ {
name:'反向有功电能', name: '反向有功电能',
attr:'reverseActive', attr: 'reverseActive',
pointName:'反向有功电能' pointName: '反向有功电能'
}, },
{ {
name:'正向无功电能', name: '正向无功电能',
attr:'forwardReactive', attr: 'forwardReactive',
pointName:'正向无功电能' pointName: '正向无功电能'
}, },
{ {
name:'反向无功电能', name: '反向无功电能',
attr:'reverseReactive', attr: 'reverseReactive',
pointName:'反向无功电能' pointName: '反向无功电能'
}, },
{ {
name:'有功功率', name: '有功功率',
attr:'activePower', attr: 'activePower',
pointName:'总有功功率' pointName: '总有功功率'
}, },
{ {
name:'无功功率', name: '无功功率',
attr:'reactivePower', attr: 'reactivePower',
pointName:'总无功功率' pointName: '总无功功率'
} }
], ],
'METE':[ 'METE': [
{ {
name:'正向有功电能', name: '正向有功电能',
attr:'forwardActive', attr: 'forwardActive',
pointName:'正向有功电能' pointName: '正向有功电能'
}, },
{ {
name:'反向有功电能', name: '反向有功电能',
attr:'reverseActive', attr: 'reverseActive',
pointName:'反向有功电能' pointName: '反向有功电能'
}, },
{ {
name:'正向无功电能', name: '正向无功电能',
attr:'forwardReactive', attr: 'forwardReactive',
pointName:'正向无功电能' pointName: '正向无功电能'
}, },
{ {
name:'反向无功电能', name: '反向无功电能',
attr:'reverseReactive', attr: 'reverseReactive',
pointName:'反向无功电能' pointName: '反向无功电能'
}, },
{ {
name:'有功功率', name: '有功功率',
attr:'activePower', attr: 'activePower',
pointName:'总有功功率' pointName: '总有功功率'
}, },
{ {
name:'无功功率', name: '无功功率',
attr:'reactivePower', attr: 'reactivePower',
pointName:'总无功功率' pointName: '总无功功率'
} }
], ],
'METEGF':[ 'METEGF': [
{ {
name:'有功电能', name: '有功电能',
attr:'activeEnergy', attr: 'activeEnergy',
pointName:'有功电能' pointName: '有功电能'
}, },
{ {
name:'无功电能', name: '无功电能',
attr:'reactiveEnergy', attr: 'reactiveEnergy',
pointName:'无功电能' pointName: '无功电能'
}, },
{ {
name:'有功功率', name: '有功功率',
attr:'activePower', attr: 'activePower',
pointName:'总有功功率' pointName: '总有功功率'
}, },
{ {
name:'无功功率', name: '无功功率',
attr:'reactivePower', attr: 'reactivePower',
pointName:'总无功功率' pointName: '总无功功率'
} }
] ]
} }
@ -152,14 +157,14 @@ export default {
}, },
methods: { methods: {
// 查看设备电位表格 // 查看设备电位表格
pointDetail(row,dataType){ pointDetail(row, dataType) {
const {deviceId} = row 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){ showChart(pointName, deviceId) {
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'AMMETER',deviceId}) pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'AMMETER', deviceId})
}, },
updateData(){ updateData() {
this.loading = true; this.loading = true;
getAmmeterDataList(this.siteId) getAmmeterDataList(this.siteId)
.then((response) => { .then((response) => {
@ -174,13 +179,14 @@ export default {
this.updateInterval(this.updateData) this.updateInterval(this.updateData)
}, },
}, },
mounted() {}, mounted() {
},
}; };
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.sbjk-card-container { .sbjk-card-container {
&.list:not(:last-child){ &.list:not(:last-child) {
margin-bottom: 25px; margin-bottom: 25px;
} }
} }

124
src/views/ems/dzjk/sbjk/dh/index.vue
View File

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

2
src/views/ems/dzjk/sbjk/ems/index.vue
View File

@ -218,7 +218,7 @@
<div>数据更新时间：{{ item.dataUpdateTime }}</div> <div>数据更新时间：{{ item.dataUpdateTime }}</div>
</div> </div>
<div class="alarm"> <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-button>
<el-badge :value="item.alarmNum || 0" class="item"> <el-badge :value="item.alarmNum || 0" class="item">
<i <i

5
src/views/ems/dzjk/sbjk/pcs/index.vue
View File

@ -32,10 +32,13 @@
</div> </div>
<div class="alarm"> <div class="alarm">
<pcs-switch style="margin-right:10px;" <pcs-switch style="margin-right:10px;"
:round="true"
size="small" size="small"
type="danger"
:data="pcsItem" :data="pcsItem"
@updateSuccess="init"/> @updateSuccess="init"/>
<el-button type="primary" size="small" style="margin-right:20px;" @click="pointDetail(pcsItem,'point')"> <el-button type="primary" round size="small" style="margin-right:20px;"
@click="pointDetail(pcsItem,'point')">
详细 详细
</el-button> </el-button>
<el-badge :value="pcsItem.alarmNum || 0" class="item"> <el-badge :value="pcsItem.alarmNum || 0" class="item">

142
src/views/ems/dzjk/sbjk/xf/index.vue
View File

@ -1,49 +1,52 @@
<template> <template>
<div v-loading="loading"> <div v-loading="loading">
<el-card <el-card
v-for="(item,index) in list" v-for="(item,index) in list"
:key="index+'ylLise'" :key="index+'ylLise'"
class="sbjk-card-container running-card-container" class="sbjk-card-container running-card-container"
:class="{ :class="{
'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0', 'warning-card-container':item.emsCommunicationStatus && item.emsCommunicationStatus !== '0',
'running-card-container':item.emsCommunicationStatus === '0' 'running-card-container':item.emsCommunicationStatus === '0'
}" }"
shadow="always"> shadow="always">
<div slot="header"> <div slot="header">
<span class="large-title">{{item.deviceName}}</span> <span class="large-title">{{ item.deviceName }}</span>
<div class="info"> <div class="info">
<div> <div>
{{ {{
$store.state.ems.communicationStatusOptions[ $store.state.ems.communicationStatusOptions[
item.emsCommunicationStatus 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>
<div>数据更新时间：{{ item.dataUpdateTime || '-' }}</div>
</div> </div>
<el-row class="device-info-row"> <div class="alarm">
<el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'hdTempData'" :span="12" class="device-info-col"> <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="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> </span>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
<el-empty v-show="list.length<=0" :image-size="200"></el-empty> <el-empty v-show="list.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"/> <point-table ref="pointTable"/>
</div> </div>
</template> </template>
@ -53,68 +56,75 @@ import {getXfDataList} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate"; import intervalUpdate from "@/mixins/ems/intervalUpdate";
import pointChart from "./../PointChart.vue"; import pointChart from "./../PointChart.vue";
import PointTable from "@/views/ems/site/sblb/PointTable.vue"; import PointTable from "@/views/ems/site/sblb/PointTable.vue";
export default { export default {
name:'DzjkSbjkXf', name: 'DzjkSbjkXf',
mixins:[getQuerySiteId,intervalUpdate], mixins: [getQuerySiteId, intervalUpdate],
components:{pointChart,PointTable}, components: {pointChart, PointTable},
data() { data() {
return { return {
loading:false, loading: false,
list:[], list: [],
tempData:[ tempData: [
{title:'主电源备用电池状态',attr:'dczt',unit:''}, {title: '主电源备用电池状态', attr: 'dczt', unit: ''},
{title:'手自动状态延时状态',attr:'yszt',unit:''}, {title: '手自动状态延时状态', attr: 'yszt', unit: ''},
{title:'启动喷洒气体喷洒状态',attr:'pszt',unit:''}, {title: '启动喷洒气体喷洒状态', attr: 'pszt', unit: ''},
{title:'压力开关状态电磁阀状态',attr:'dcfzt',unit:''}, {title: '压力开关状态电磁阀状态', attr: 'dcfzt', unit: ''},
] ]
} }
}, },
methods:{ methods: {
// 查看设备电位表格 // 查看设备电位表格
pointDetail(row,dataType){ pointDetail(row, dataType) {
const {deviceId} = row 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){ showChart(pointName, deviceId) {
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'XF',deviceId}) pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'XF', deviceId})
}, },
updateData(){ updateData() {
this.loading = true this.loading = true
getXfDataList(this.siteId).then(response => { getXfDataList(this.siteId).then(response => {
this.list = JSON.parse(JSON.stringify(response?.data || [])); this.list = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {this.loading = false}) }).finally(() => {
this.loading = false
})
}, },
init(){ init() {
this.updateData() this.updateData()
this.updateInterval(this.updateData) this.updateInterval(this.updateData)
} }
}, },
mounted(){ mounted() {
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.sbjk-card-container{ .sbjk-card-container {
&:not(:last-child){ &:not(:last-child) {
margin-bottom: 25px; margin-bottom: 25px;
} }
.el-row{
.el-row {
background-color: #ffffff; background-color: #ffffff;
border:1px solid #eeeeee; border: 1px solid #eeeeee;
font-size: 14px; font-size: 14px;
line-height: 16px; line-height: 16px;
color: #333333; color: #333333;
.el-col{
padding:12px 0; .el-col {
padding: 12px 0;
text-align: center; text-align: center;
position: relative; position: relative;
} }
.el-col{
.el-col {
border-bottom: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee;
} }
.el-col:not(:nth-child(3n)){
.el-col:not(:nth-child(3n)) {
border-right: 1px solid #eeeeee; border-right: 1px solid #eeeeee;
} }
} }

118
src/views/ems/dzjk/sbjk/yl/index.vue
View File

@ -1,38 +1,41 @@
<template> <template>
<div v-loading="loading"> <div v-loading="loading">
<el-card <el-card
v-for="(item,index) in list" v-for="(item,index) in list"
:key="index+'ylLise'" :key="index+'ylLise'"
class="sbjk-card-container running-card-container" class="sbjk-card-container running-card-container"
shadow="always"> shadow="always">
<div slot="header"> <div slot="header">
<span class="large-title">{{item.deviceName}}</span> <span class="large-title">{{ item.deviceName }}</span>
<div class="info"> <div class="info">
<div>数据更新时间：{{ item.dataUpdateTime || '-'}}</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> </div>
<el-row class="device-info-row"> <div class="alarm">
<el-col v-for="(tempDataItem,tempDataIndex) in tempData" :key="tempDataIndex+'ylTempData'" :span="8" class="device-info-col"> <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="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> </span>
</el-col> </el-col>
</el-row> </el-row>
</el-card> </el-card>
<el-empty v-show="list.length<=0" :image-size="200"></el-empty> <el-empty v-show="list.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"/> <point-table ref="pointTable"/>
</div> </div>
</template> </template>
@ -42,54 +45,57 @@ import {getCoolingDataList} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate"; import intervalUpdate from "@/mixins/ems/intervalUpdate";
import pointChart from "./../PointChart.vue"; import pointChart from "./../PointChart.vue";
import PointTable from "@/views/ems/site/sblb/PointTable.vue"; import PointTable from "@/views/ems/site/sblb/PointTable.vue";
export default { export default {
name:'DzjkSbjkYl', name: 'DzjkSbjkYl',
mixins:[getQuerySiteId,intervalUpdate], mixins: [getQuerySiteId, intervalUpdate],
components:{pointChart,PointTable}, components: {pointChart, PointTable},
data() { data() {
return { return {
loading:false, loading: false,
list:[], list: [],
tempData:[ tempData: [
{title:'供水温度',attr:'gsTemp',unit:'&#8451;'}, {title: '供水温度', attr: 'gsTemp', unit: '&#8451;'},
{title:'回水温度',attr:'hsTemp',unit:'&#8451;'}, {title: '回水温度', attr: 'hsTemp', unit: '&#8451;'},
{title:'供水压力',attr:'gsPressure',unit:'bar'}, {title: '供水压力', attr: 'gsPressure', unit: 'bar'},
{title:'回水压力',attr:'hsPressure',unit:'bar'}, {title: '回水压力', attr: 'hsPressure', unit: 'bar'},
{title:'冷源水温度',attr:'lysTemp',unit:'&#8451;'}, {title: '冷源水温度', attr: 'lysTemp', unit: '&#8451;'},
{title:'VB01开度',attr:'vb01Kd',unit:'%'}, {title: 'VB01开度', attr: 'vb01Kd', unit: '%'},
{title:'VB02开度',attr:'vb02Kd',unit:'%'}, {title: 'VB02开度', attr: 'vb02Kd', unit: '%'},
] ]
} }
}, },
methods:{ methods: {
// 查看设备电位表格 // 查看设备电位表格
pointDetail(row,dataType){ pointDetail(row, dataType) {
const {deviceId} = row 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){ showChart(pointName, deviceId) {
pointName && this.$refs.pointChart.showChart({pointName,deviceCategory:'COOLING',deviceId}) pointName && this.$refs.pointChart.showChart({pointName, deviceCategory: 'COOLING', deviceId})
}, },
updateData(){ updateData() {
this.loading = true this.loading = true
getCoolingDataList(this.siteId).then(response => { getCoolingDataList(this.siteId).then(response => {
this.list = JSON.parse(JSON.stringify(response?.data || [])); this.list = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {this.loading = false}) }).finally(() => {
this.loading = false
})
}, },
init(){ init() {
this.updateData() this.updateData()
this.updateInterval(this.updateData) this.updateInterval(this.updateData)
} }
}, },
mounted(){ mounted() {
} }
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.sbjk-card-container{ .sbjk-card-container {
&:not(:last-child){ &:not(:last-child) {
margin-bottom: 25px; margin-bottom: 25px;
} }
} }

246
src/views/ems/dzjk/zxlt/index.vue
View File

@ -13,7 +13,7 @@
<div class="bottom-arrows"></div> <div class="bottom-arrows"></div>
</div> </div>
<div class="computer"> <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> <span style="z-index: 2; position: relative">ems</span>
</div> </div>
</div> </div>
@ -22,27 +22,27 @@
<div class="row-lists-container" v-if="showDb"> <div class="row-lists-container" v-if="showDb">
<div class="row-title">电表({{ db.length }})</div> <div class="row-title">电表({{ db.length }})</div>
<div <div
class="row-lists" class="row-lists"
v-for="outter in Math.ceil(db.length / 3)" v-for="outter in Math.ceil(db.length / 3)"
:key="outter + 'row'" :key="outter + 'row'"
> >
<template v-for="(item, index) in handlerList('db', outter)"> <template v-for="(item, index) in handlerList('db', outter)">
<div :key="index" class="row-items"> <div :key="index" class="row-items">
<div <div
style="position: relative; z-index: 2; background-color: #fff" style="position: relative; z-index: 2; background-color: #fff"
> >
<div <div
class="status" class="status"
:class=" :class="
item.runningStatus === '2' ? 'status-running' : '' item.deviceStatus === '2' ? 'status-running' : ''
" "
> >
{{ deviceStatusOptions[item.runningStatus] }} {{ deviceStatusOptions[item.deviceStatus] }}
</div> </div>
<div class="row-items-img"> <div class="row-items-img">
<img <img
class="img-db" class="img-db"
:src="require('@/assets/images/ems/db.png')" :src="require('@/assets/images/ems/db.png')"
/> />
<div class="name">{{ item.deviceName }}</div> <div class="name">{{ item.deviceName }}</div>
</div> </div>
@ -56,27 +56,27 @@
<div class="row-lists-container" v-if="showLq"> <div class="row-lists-container" v-if="showLq">
<div class="row-title">冷却({{ lq.length }})</div> <div class="row-title">冷却({{ lq.length }})</div>
<div <div
class="row-lists" class="row-lists"
v-for="outter in Math.ceil(lq.length / 3)" v-for="outter in Math.ceil(lq.length / 3)"
:key="outter + 'row'" :key="outter + 'row'"
> >
<template v-for="(item, index) in handlerList('lq', outter)"> <template v-for="(item, index) in handlerList('lq', outter)">
<div :key="index" class="row-items"> <div :key="index" class="row-items">
<div <div
style="position: relative; z-index: 2; background-color: #fff" style="position: relative; z-index: 2; background-color: #fff"
> >
<div <div
class="status" class="status"
:class=" :class="
item.runningStatus === '2' ? 'status-running' : '' item.deviceStatus === '2' ? 'status-running' : ''
" "
> >
{{ deviceStatusOptions[item.runningStatus] }} {{ deviceStatusOptions[item.deviceStatus] }}
</div> </div>
<div class="row-items-img"> <div class="row-items-img">
<img <img
class="img-lq" class="img-lq"
:src="require('@/assets/images/ems/lq.png')" :src="require('@/assets/images/ems/lq.png')"
/> />
<div class="name">{{ item.deviceName }}</div> <div class="name">{{ item.deviceName }}</div>
</div> </div>
@ -88,37 +88,37 @@
<!-- 没有上级设备的bms --> <!-- 没有上级设备的bms -->
<div <div
class="row-lists-container" class="row-lists-container"
v-if="bmsHasParentLength !== bms.length" v-if="bmsHasParentLength !== bms.length"
> >
<div class="row-title">BMS({{ bmsNoParent.length }})</div> <div class="row-title">BMS({{ bmsNoParent.length }})</div>
<div <div
class="row-lists" class="row-lists"
v-for="outter in Math.ceil(bmsNoParent.length / 3)" v-for="outter in Math.ceil(bmsNoParent.length / 3)"
:key="outter + 'row'" :key="outter + 'row'"
> >
<template <template
v-for="(item, index) in handlerList('bmsNoParent', outter)" v-for="(item, index) in handlerList('bmsNoParent', outter)"
> >
<div :key="index" class="row-items"> <div :key="index" class="row-items">
<div <div
style="position: relative; z-index: 2; background-color: #fff" style="position: relative; z-index: 2; background-color: #fff"
> >
<div <div
class="status" class="status"
:class=" :class="
item.runningStatus === '2' ? 'status-running' : '' item.deviceStatus === '2' ? 'status-running' : ''
" "
> >
{{ deviceStatusOptions[item.runningStatus] }} {{ deviceStatusOptions[item.deviceStatus] }}
</div> </div>
<div class="row-items-img row-items-img-bms"> <div class="row-items-img row-items-img-bms">
<div style="position:relative;"> <div style="position:relative;">
<img <img
class="img-bms" class="img-bms"
:src="require('@/assets/images/ems/bms.png')" :src="require('@/assets/images/ems/bms.png')"
/> />
<div class="num">{{item.batteryNum || 0}}</div> <div class="num">{{ item.batteryNum || 0 }}</div>
</div> </div>
<div class="name">{{ item.deviceName }}</div> <div class="name">{{ item.deviceName }}</div>
</div> </div>
@ -130,8 +130,8 @@
<!-- pcs --> <!-- pcs -->
<div <div
class="row-lists-container row-lists-container-with-children" class="row-lists-container row-lists-container-with-children"
v-if="showPcs" v-if="showPcs"
> >
<div class="row-title"> <div class="row-title">
PCS({{ pcs.length }}){{ PCS({{ pcs.length }}){{
@ -139,56 +139,56 @@
}} }}
</div> </div>
<div <div
class="row-lists" class="row-lists"
v-for="outter in Math.ceil(pcs.length / 3)" v-for="outter in Math.ceil(pcs.length / 3)"
:key="outter + 'row'" :key="outter + 'row'"
> >
<template v-for="(item, index) in handlerList('pcs', outter)"> <template v-for="(item, index) in handlerList('pcs', outter)">
<div :key="index" class="row-items"> <div :key="index" class="row-items">
<!-- 上级设备 --> <!-- 上级设备 -->
<div class="parent-dash"> <div class="parent-dash">
<div <div
class="status" class="status"
:class=" :class="
item.runningStatus === '2' ? 'status-running' : '' item.deviceStatus === '2' ? 'status-running' : ''
" "
> >
{{ deviceStatusOptions[item.runningStatus] }} {{ deviceStatusOptions[item.deviceStatus] }}
</div> </div>
<div class="row-items-img"> <div class="row-items-img">
<img <img
class="img-pcs" class="img-pcs"
:src="require('@/assets/images/ems/pcs.png')" :src="require('@/assets/images/ems/pcs.png')"
/> />
<div class="name">{{ item.deviceName }}</div> <div class="name">{{ item.deviceName }}</div>
</div> </div>
</div> </div>
<!-- 下级设备 --> <!-- 下级设备 -->
<div <div
class="children-dash" class="children-dash"
v-if="item.children && item.children.length > 0" v-if="item.children && item.children.length > 0"
> >
<div <div
class="status" class="status"
:class=" :class="
item.children[0].runningStatus === '2' item.children[0].deviceStatus === '2'
? 'status-running' ? 'status-running'
: '' : ''
" "
> >
{{ {{
deviceStatusOptions[ deviceStatusOptions[
item.children[0].runningStatus item.children[0].deviceStatus
] ]
}} }}
</div> </div>
<div class="row-items-img row-items-img-bms"> <div class="row-items-img row-items-img-bms">
<div style="position: relative"> <div style="position: relative">
<img <img
class="img-bms" class="img-bms"
:src="require('@/assets/images/ems/bms.png')" :src="require('@/assets/images/ems/bms.png')"
/> />
<div class="num">{{item.batteryNum || 0}}</div> <div class="num">{{ item.batteryNum || 0 }}</div>
</div> </div>
<div class="name">{{ item.children[0].deviceName }}</div> <div class="name">{{ item.children[0].deviceName }}</div>
</div> </div>
@ -204,9 +204,10 @@
</template> </template>
<script> <script>
import { getDeviceList } from "@/api/ems/site"; import {getDeviceList} from "@/api/ems/site";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId"; import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { mapState } from "vuex"; import {mapState} from "vuex";
export default { export default {
name: "DzjkZxlt", name: "DzjkZxlt",
mixins: [getQuerySiteId], mixins: [getQuerySiteId],
@ -223,7 +224,7 @@ export default {
computed: { computed: {
...mapState({ ...mapState({
deviceStatusOptions: (state) => deviceStatusOptions: (state) =>
state.ems.deviceStatusOptions, state.ems.deviceStatusOptions,
}), }),
showPcs() { showPcs() {
@ -245,7 +246,7 @@ export default {
}, },
pcsHasChildren() { pcsHasChildren() {
return this.pcs.filter( return this.pcs.filter(
(item) => item.children && item.children.length > 0 (item) => item.children && item.children.length > 0
); );
}, },
empty() { empty() {
@ -270,46 +271,46 @@ export default {
this.bmsNoParent = []; this.bmsNoParent = [];
this.loading = true; this.loading = true;
getDeviceList(this.siteId) getDeviceList(this.siteId)
.then((response) => { .then((response) => {
const data = JSON.parse(JSON.stringify(response?.data || [])); const data = JSON.parse(JSON.stringify(response?.data || []));
let pcs = [], let pcs = [],
bms = [], bms = [],
db = [], db = [],
lq = [], lq = [],
bmsNoParent = []; bmsNoParent = [];
data.forEach((item) => { data.forEach((item) => {
// 电表 // 电表
if (item.deviceCategory === "AMMETER") { if (item.deviceCategory === "AMMETER") {
db.push({ ...item, children: [] }); db.push({...item, children: []});
} else if (item.deviceCategory === "PCS") { } else if (item.deviceCategory === "PCS") {
// pcs // pcs
pcs.push({ ...item, children: [] }); pcs.push({...item, children: []});
} else if (item.deviceCategory === "STACK") { } else if (item.deviceCategory === "STACK") {
// bms // bms
bms.push({ ...item, children: [] }); bms.push({...item, children: []});
} else if (item.deviceCategory === "COOLING") { } else if (item.deviceCategory === "COOLING") {
// 液冷 // 液冷
lq.push({ ...item, children: [] }); 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; display: flex;
position: relative; position: relative;
} }
//云 、计算机 、箭头 //云 、计算机 、箭头
.top { .top {
z-index: 2; z-index: 2;
@ -343,6 +345,7 @@ $lineColor: #86bcc7;
//云 样式 //云 样式
.cloud-container { .cloud-container {
margin: 0 auto; margin: 0 auto;
.cloud { .cloud {
width: 60px; width: 60px;
height: 26px; height: 26px;
@ -354,6 +357,7 @@ $lineColor: #86bcc7;
font-size: 14px; font-size: 14px;
line-height: 26px; line-height: 26px;
} }
.cloud:before, .cloud:before,
.cloud:after { .cloud:after {
content: ""; content: "";
@ -363,20 +367,24 @@ $lineColor: #86bcc7;
height: 30px; height: 30px;
border-radius: 100%; border-radius: 100%;
} }
.cloud:before { .cloud:before {
top: -9px; top: -9px;
left: 8px; left: 8px;
} }
.cloud:after { .cloud:after {
top: -6px; top: -6px;
right: 9px; right: 9px;
} }
} }
//双箭头 //双箭头
.double-arrows { .double-arrows {
height: fit-content; height: fit-content;
margin: 0 10px; margin: 0 10px;
text-align: center; text-align: center;
.top-arrows, .top-arrows,
.bottom-arrows { .bottom-arrows {
height: 4px; height: 4px;
@ -384,6 +392,7 @@ $lineColor: #86bcc7;
background-color: #5ea9df; background-color: #5ea9df;
margin: 0 10px; margin: 0 10px;
position: relative; position: relative;
&::after { &::after {
content: ""; content: "";
position: absolute; position: absolute;
@ -392,9 +401,11 @@ $lineColor: #86bcc7;
height: 0; height: 0;
} }
} }
.top-arrows { .top-arrows {
vertical-align: super; vertical-align: super;
} }
.top-arrows::after { .top-arrows::after {
top: -4px; top: -4px;
border-bottom: 6px solid transparent; border-bottom: 6px solid transparent;
@ -403,8 +414,10 @@ $lineColor: #86bcc7;
border-top: 6px solid transparent; border-top: 6px solid transparent;
left: -11px; left: -11px;
} }
.bottom-arrows { .bottom-arrows {
margin-top: 8px; margin-top: 8px;
&::after { &::after {
top: -4px; top: -4px;
border-top: 6px solid transparent; border-top: 6px solid transparent;
@ -425,6 +438,7 @@ $lineColor: #86bcc7;
font-weight: bold; font-weight: bold;
position: relative; position: relative;
background: #fff; background: #fff;
img { img {
width: 80px; width: 80px;
height: auto; height: auto;
@ -432,6 +446,7 @@ $lineColor: #86bcc7;
} }
} }
} }
.outer-border { .outer-border {
position: relative; position: relative;
width: fit-content; width: fit-content;
@ -448,11 +463,11 @@ $lineColor: #86bcc7;
&:not(:first-child) { &:not(:first-child) {
background: linear-gradient( background: linear-gradient(
to top, to top,
transparent 0%, transparent 0%,
transparent 50%, transparent 50%,
#ccc 50%, #ccc 50%,
#ccc 100% #ccc 100%
); );
background-size: 1px 10px; background-size: 1px 10px;
background-repeat: repeat-y; background-repeat: repeat-y;
@ -467,8 +482,10 @@ $lineColor: #86bcc7;
color: #000; color: #000;
font-weight: bolder; font-weight: bolder;
} }
.row-lists { .row-lists {
position: relative; position: relative;
.row-items { .row-items {
position: relative; position: relative;
padding: 5px 0; padding: 5px 0;
@ -503,17 +520,21 @@ $lineColor: #86bcc7;
border-radius: 2px; border-radius: 2px;
background: #aaaaaa; background: #aaaaaa;
color: #ffffff; color: #ffffff;
&.status-running { &.status-running {
background: #00c69c; background: #00c69c;
} }
} }
// 图片+设备名称 // 图片+设备名称
.row-items-img { .row-items-img {
position: relative; position: relative;
padding-top: 12px; padding-top: 12px;
&.row-items-img-bms{
&.row-items-img-bms {
padding-top: 14px; padding-top: 14px;
.num{
.num {
position: absolute; position: absolute;
top: -2px; top: -2px;
right: -2px; right: -2px;
@ -526,21 +547,26 @@ $lineColor: #86bcc7;
color: #fff; color: #fff;
} }
} }
img { img {
width: 80px; width: 80px;
height: auto; height: auto;
display: block; display: block;
position: relative; position: relative;
&.img-lq { &.img-lq {
width: 50px; width: 50px;
} }
&.img-pcs { &.img-pcs {
width: 50px; width: 50px;
} }
&.img-db { &.img-db {
width: 56px; width: 56px;
} }
} }
.name { .name {
position: absolute; position: absolute;
top: 1px; top: 1px;
@ -559,19 +585,24 @@ $lineColor: #86bcc7;
&:not(:last-child) { &:not(:last-child) {
margin-right: 30px; margin-right: 30px;
} }
.row-items { .row-items {
display: flex; display: flex;
&::after { &::after {
display: none; display: none;
} }
.parent-dash { .parent-dash {
position: relative; position: relative;
z-index: 2; z-index: 2;
background-color: #fff; background-color: #fff;
> div { > div {
z-index: 2; z-index: 2;
position: inherit; position: inherit;
} }
&::after { &::after {
z-index: 1; z-index: 1;
content: ""; content: "";
@ -585,16 +616,19 @@ $lineColor: #86bcc7;
transform: scale(0.4, 1); transform: scale(0.4, 1);
} }
} }
.children-dash { .children-dash {
position: relative; position: relative;
z-index: 2; z-index: 2;
background-color: #fff; background-color: #fff;
margin: -20px 0 0 26px; margin: -20px 0 0 26px;
height: fit-content; height: fit-content;
> div { > div {
z-index: 2; z-index: 2;
position: inherit; position: inherit;
} }
&::after { &::after {
z-index: 1; z-index: 1;
content: ""; content: "";

50
src/views/ems/site/sblb/PcsSwitch.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<el-button :size="size" :type="type" :circle='circle' @click="switchStatus" <el-button :size="size" :type="type" :round="round" @click="switchStatus"
icon="el-icon-refresh-left"> >
{{ label }}
</el-button> </el-button>
</template> </template>
@ -8,6 +9,7 @@
</style> </style>
<script> <script>
import {updateDeviceStatus} from "@/api/ems/site";
export default { export default {
props: { props: {
@ -16,26 +18,21 @@ export default {
default: 'mini', default: 'mini',
required: false required: false
}, },
round: {
type: Boolean,
default: false,
required: false
},
type: { type: {
type: String, type: String,
default: 'primary', default: 'primary',
required: false required: false
}, },
// plain: {
// type: Boolean,
// default: true,
// required: false
// },
circle: {
type: Boolean,
default: true,
required: false
},
data: { data: {
type: Object, type: Object,
default: () => { default: () => {
return { return {
runningStatus: null, deviceStatus: null,
deviceId: null, deviceId: null,
deviceName: null, deviceName: null,
} }
@ -45,12 +42,13 @@ export default {
}, },
computed: { computed: {
label() { label() {
return this.data.runningStatus === '4' ? '开机' : '关机' return this.data.deviceStatus === '4' ? '开机' : '关机'
} }
}, },
methods: { methods: {
switchStatus() { switchStatus() {
const {runningStatus, deviceId, deviceName} = this.data console.log(this.data, 11111111)
const {deviceStatus, deviceId, deviceName, siteId} = this.data
this.$confirm(`确认要${this.label}设备${deviceName || ''}吗?`, { this.$confirm(`确认要${this.label}设备${deviceName || ''}吗?`, {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
@ -61,17 +59,17 @@ export default {
if (action === "confirm") { if (action === "confirm") {
instance.confirmButtonLoading = true; instance.confirmButtonLoading = true;
//做开关机操作,更新成功后刷新表格 //做开关机操作,更新成功后刷新表格
setTimeout(() => { updateDeviceStatus({
instance.confirmButtonLoading = false; //todo delete siteId,
done() deviceStatus,
}, 2000) deviceId
// deleteProtectPlan(row.id) })
// .then((response) => { .then((response) => {
// response.code === 200 && done(); response.code === 200 && done();
// }) })
// .finally(() => { .finally(() => {
// instance.confirmButtonLoading = false; instance.confirmButtonLoading = false;
// }); });
} else { } else {
done(); done();
} }

8
src/views/ems/site/sblb/index.vue
View File

@ -80,12 +80,12 @@
label="设备类别"> label="设备类别">
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="runningStatus" prop="deviceStatus"
label="在线状态"> label="在线状态">
<template slot-scope="scope"> <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;" <pcs-switch v-if="scope.row.deviceCategory === 'PCS'" style="margin-left:5px;"
:data="{runningStatus:scope.row.runningStatus,deviceId:scope.row.deviceId,deviceName:scope.row.deviceName}" :data="{siteId:scope.row.siteId,deviceStatus:scope.row.deviceStatus,deviceId:scope.row.deviceId,deviceName:scope.row.deviceName}"
@updateSuccess="getData"/> @updateSuccess="getData"/>
</template> </template>
</el-table-column> </el-table-column>
@ -154,7 +154,7 @@
style="margin-top:15px;text-align: center" style="margin-top:15px;text-align: center"
> >
</el-pagination> </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"> :before-close="handleClosed">
<div class="descriptions-main" style="padding: 0"> <div class="descriptions-main" style="padding: 0">
<el-descriptions direction="vertical" :column="2" :colon="false" border> <el-descriptions direction="vertical" :column="2" :colon="false" border>