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列表
export function getParentDeviceId({siteId, deviceCategory}) {
return request({

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

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

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

@ -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"
<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>
<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,14 +27,26 @@
</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-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">
<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>
</span>
@ -42,7 +57,9 @@
<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 class="process pointer" @click="showChart( '当前SOC',baseInfo.deviceId)">当前SOC :
{{ baseInfo.currentSoc }}%
</div>
</div>
</div>
<el-table
@ -62,14 +79,16 @@
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="单体最小值">
<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
@ -80,7 +99,8 @@
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
@ -103,6 +123,7 @@ 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],
@ -153,7 +174,9 @@ export default {
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() {
this.updateData()
@ -169,10 +192,12 @@ export default {
.descriptions-main {
padding: 24px 300px 24px 24px;
}
.descriptions-main-bottom {
padding: 14px 300px 14px 24px;
}
}
// 进度条样式
.process-container {
width: 100px;
@ -180,6 +205,7 @@ export default {
right: 70px;
top: 50%;
transform: translateY(-50%);
.process-line-bg {
position: relative;
width: 100%;
@ -187,6 +213,7 @@ export default {
background-color: #fff2cb;
border-radius: 6px;
box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);
.process-line {
position: absolute;
left: 0;
@ -198,6 +225,7 @@ export default {
box-shadow: 0 0 10px #ffbf14, 0 0 0 rgba(255, 191, 20, 0.5);
}
}
.process {
margin-top: 15px;
color: #666666;

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

@ -1,4 +1,3 @@
<template>
<div v-loading="loading">
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;">
@ -13,7 +12,9 @@
<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,14 +25,26 @@
</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">
<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>
@ -42,7 +55,9 @@
<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
@ -59,26 +74,30 @@
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="簇电流">
<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">
<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">
<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
@ -89,7 +108,8 @@
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
@ -99,7 +119,8 @@
<el-table-column
label="单体最高温度">
<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>
</el-table-column>
<el-table-column
@ -110,7 +131,8 @@
label="单体最低温度"
prop="minTemperature">
<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>
</el-table-column>
<el-table-column
@ -133,6 +155,7 @@ 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},
@ -167,7 +190,9 @@ export default {
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() {
this.updateData()
@ -189,6 +214,7 @@ export default {
}
}
}
// 进度条样式
.process-container {
width: 100px;
@ -196,6 +222,7 @@ export default {
right: 70px;
top: 50%;
transform: translateY(-50%);
.process-line-bg {
position: relative;
width: 100%;
@ -203,6 +230,7 @@ export default {
background-color: #fff2cb;
border-radius: 6px;
box-shadow: 0 0 10px #fff2cb, 0 0 0 rgba(255, 242, 203, 0.5);
.process-line {
position: absolute;
left: 0;
@ -214,6 +242,7 @@ 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;

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

@ -23,7 +23,9 @@
<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-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"
@ -33,9 +35,11 @@
</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">
<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>
@ -52,6 +56,7 @@ import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
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],
@ -174,7 +179,8 @@ export default {
this.updateInterval(this.updateData)
},
},
mounted() {},
mounted() {
},
};
</script>

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

@ -1,4 +1,3 @@
<template>
<div v-loading="loading">
<el-card
@ -12,7 +11,9 @@
<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-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"
@ -22,9 +23,11 @@
</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">
<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>
@ -42,6 +45,7 @@ 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],
@ -51,8 +55,8 @@ export default {
loading: false,
list: [],
tempData: [
{title:'湿度',attr:'humidity',unit:'&#8451;'},
{title:'温度',attr:'temperature',unit:''},
{title: '湿度', attr: 'humidity', unit: ''},
{title: '温度', attr: 'temperature', unit: '&#8451;'},
]
}
},
@ -69,7 +73,9 @@ export default {
this.loading = true
getDhDataList(this.siteId).then(response => {
this.list = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {this.loading = false})
}).finally(() => {
this.loading = false
})
},
init() {
this.updateData()
@ -87,20 +93,24 @@ export default {
&:not(:last-child) {
margin-bottom: 25px;
}
.el-row {
background-color: #ffffff;
border: 1px solid #eeeeee;
font-size: 14px;
line-height: 16px;
color: #333333;
.el-col {
padding: 12px 0;
text-align: center;
position: relative;
}
.el-col {
border-bottom: 1px solid #eeeeee;
}
.el-col:not(:nth-child(3n)) {
border-right: 1px solid #eeeeee;
}

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

@ -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

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

@ -32,10 +32,13 @@
</div>
<div class="alarm">
<pcs-switch style="margin-right:10px;"
:round="true"
size="small"
type="danger"
:data="pcsItem"
@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-badge :value="pcsItem.alarmNum || 0" class="item">

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

@ -1,4 +1,3 @@
<template>
<div v-loading="loading">
<el-card
@ -23,7 +22,9 @@
<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-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"
@ -33,9 +34,11 @@
</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">
<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>
@ -53,6 +56,7 @@ 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],
@ -82,7 +86,9 @@ export default {
this.loading = true
getXfDataList(this.siteId).then(response => {
this.list = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {this.loading = false})
}).finally(() => {
this.loading = false
})
},
init() {
this.updateData()
@ -100,20 +106,24 @@ export default {
&:not(:last-child) {
margin-bottom: 25px;
}
.el-row {
background-color: #ffffff;
border: 1px solid #eeeeee;
font-size: 14px;
line-height: 16px;
color: #333333;
.el-col {
padding: 12px 0;
text-align: center;
position: relative;
}
.el-col {
border-bottom: 1px solid #eeeeee;
}
.el-col:not(:nth-child(3n)) {
border-right: 1px solid #eeeeee;
}

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

@ -1,4 +1,3 @@
<template>
<div v-loading="loading">
<el-card
@ -12,7 +11,9 @@
<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-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"
@ -22,9 +23,11 @@
</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">
<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>
@ -42,6 +45,7 @@ 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],
@ -74,7 +78,9 @@ export default {
this.loading = true
getCoolingDataList(this.siteId).then(response => {
this.list = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {this.loading = false})
}).finally(() => {
this.loading = false
})
},
init() {
this.updateData()

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

@ -34,10 +34,10 @@
<div
class="status"
:class="
item.runningStatus === '2' ? 'status-running' : ''
item.deviceStatus === '2' ? 'status-running' : ''
"
>
{{ deviceStatusOptions[item.runningStatus] }}
{{ deviceStatusOptions[item.deviceStatus] }}
</div>
<div class="row-items-img">
<img
@ -68,10 +68,10 @@
<div
class="status"
:class="
item.runningStatus === '2' ? 'status-running' : ''
item.deviceStatus === '2' ? 'status-running' : ''
"
>
{{ deviceStatusOptions[item.runningStatus] }}
{{ deviceStatusOptions[item.deviceStatus] }}
</div>
<div class="row-items-img">
<img
@ -107,10 +107,10 @@
<div
class="status"
:class="
item.runningStatus === '2' ? 'status-running' : ''
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;">
@ -150,10 +150,10 @@
<div
class="status"
:class="
item.runningStatus === '2' ? 'status-running' : ''
item.deviceStatus === '2' ? 'status-running' : ''
"
>
{{ deviceStatusOptions[item.runningStatus] }}
{{ deviceStatusOptions[item.deviceStatus] }}
</div>
<div class="row-items-img">
<img
@ -171,14 +171,14 @@
<div
class="status"
:class="
item.children[0].runningStatus === '2'
item.children[0].deviceStatus === '2'
? 'status-running'
: ''
"
>
{{
deviceStatusOptions[
item.children[0].runningStatus
item.children[0].deviceStatus
]
}}
</div>
@ -207,6 +207,7 @@
import {getDeviceList} from "@/api/ems/site";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {mapState} from "vuex";
export default {
name: "DzjkZxlt",
mixins: [getQuerySiteId],
@ -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;
@ -467,8 +482,10 @@ $lineColor: #86bcc7;
color: #000;
font-weight: bolder;
}
.row-lists {
position: relative;
.row-items {
position: relative;
padding: 5px 0;
@ -503,16 +520,20 @@ $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 {
padding-top: 14px;
.num {
position: absolute;
top: -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: "";

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

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

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

@ -80,12 +80,12 @@
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="{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"/>
</template>
</el-table-column>