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

Merge branch 'develop' into single-develop

Browse Source
This commit is contained in:
白菜
2025-09-17 14:57:30 +08:00
parent 3d5d8918d7 36b1e19120
commit 25bb28f77a
31 changed files with 1527 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
src/views/ems/dzjk/sbjk/PointChart.vue Normal file
View File

@ -0,0 +1,221 @@
<!--电位展示图表-->
<template>
<el-dialog
:visible.sync="show"
:title="pointName"
:close-on-click-modal="false"
show-close
destroy-on-close
lock-scroll
append-to-body
width="1000px"
class="ems-dialog"
:before-close="handleColsed"
>
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding time-range-card">
<div slot="header" class="time-range-header">
<el-radio-group class="card-title" v-model="dataUnit">
<el-radio :label="1">分钟</el-radio>
<el-radio :label="2">小时</el-radio>
<el-radio :label="3">天</el-radio>
</el-radio-group>
<date-time-select ref="dateTimeSelect" :data-unit="dataUnit" @initDate="((e)=>dataRange=e||[])" @updateDate="updateDate"/>
</div>
<div style="height: 350px" id="searchChart"></div>
</el-card>
</el-dialog>
</template>
<script>
import * as echarts from "echarts";
import resize from "@/mixins/ems/resize";
import DateTimeSelect from "@/views/ems/search/DateTimeSelect.vue";
import {getPointValueList} from "@/api/ems/search";
import DateRangeSelect from "@/components/Ems/DateRangeSelect/index.vue";
export default {
components: {DateRangeSelect, DateTimeSelect},
mixins: [resize],
props: {
siteId:{
type: String,
required: true,
}
},
computed: {
isDtdc(){
return this.categoryName === '单体电池'
},
},
watch:{
show(val) {
if(!val){
this.pointName=''
this.categoryName=''
this.deviceId=''
this.dataUnit=1
if (!this.chart) {
return
}
this.hideLoading()
this.chart.dispose()
this.chart = null
}
},
dataUnit:{
handler(newVal,oldVal){
console.log('wacth到了dataUnit的变化',newVal,oldVal)
this.$nextTick(()=>{
this.$refs.dateTimeSelect.init()
this.getDate()
})
},
}
},
data(){
return{
show:false,
chart:null,
dataUnit:1,
dataRange:[],
child:[],//单体电池需要数据 暂不删除
pointName:'',
categoryName:'',
deviceId:''
}
},
methods:{
showChart({pointName,categoryName,deviceId}){
//初始化数据
this.pointName=pointName
this.categoryName=categoryName
this.deviceId=deviceId
this.show = true
this.$nextTick(()=>{
this.$refs.dateTimeSelect.init()
this.initChart()
this.getDate()
})
},
initChart() {
this.chart = echarts.init(document.querySelector('#searchChart'))
},
showLoading(){
this.chart && this.chart.showLoading()
},
hideLoading(){
this.chart && this.chart.hideLoading()
},
getDate(){
this.showLoading()
const{dataUnit,dataRange:[start='',end=''],child}=this
let siteDeviceMap={}
child.forEach(([first,second,third])=>{
if(siteDeviceMap[first]){
siteDeviceMap[first].push(third)
}else{
siteDeviceMap[first]=[]
siteDeviceMap[first].push(third)
}
})
let startDate,endDate
if(start && dataUnit===3){
// startDate= start + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
startDate = start + ' 00:00:00'
}else{
startDate=start
}
if(end && dataUnit===3){
// endDate= end + `${dataUnit === 2 ? ':00' : ' 00:00:00'}`
endDate = end + ' 00:00:00'
}else{
endDate=end
}
getPointValueList({siteIds:[this.siteId],deviceId:this.deviceId,dataUnit,categoryName:this.categoryName,pointName:this.pointName,startDate,endDate,siteDeviceMap:{}}).then(response => {
this.setOption(response?.data || [])
}).finally(()=>{
this.hideLoading()
})
},
setOption(data) {
if(!this.chart) return
this.chart.clear()
console.log('返回的数据',data)
let dataset=[]
if(data.length>0){
data.forEach((item,index)=>{
item.deviceList.forEach(inner=>{
dataset.push({
name:`${this.isDtdc ? `${inner.parentDeviceId ? inner.parentDeviceId+'-' : ''}` : ''}${inner.deviceId}`,
type:'line',
xdata:[],
data:[]
})
const length = dataset.length
inner.pointValueList.forEach(value=>{
dataset[length-1].xdata.push(value.valueDate)
dataset[length-1].data.push(value.pointValue)
})
})
})
}else{
this.$message.warning('暂无数据')
}
console.log('图表数据',dataset)
this.chart.setOption({
legend: {
// left: 'center',
// top: '10',
},
grid: {
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
textStyle:{
color:"#333333",
},
xAxis: {type:'category',data:dataset?.[0]?.xdata || []},
yAxis: {
type: 'value',
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100
},
{
start: 0,
end: 100
}
],
series: dataset
})
},
updateDate(val){
this.dataRange =val || []
this.getDate()
},
handleColsed(done) {
if (!this.chart) {
return done();
}
this.chart.dispose();
this.chart = null;
done();
},
}
}
</script>
<style scoped lang="scss">
::v-deep {
.card-title .el-radio{
line-height: 40px;
}
}
</style>

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

@ -2,9 +2,13 @@
<template>
<div v-loading="loading">
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmsdccContainer'" style="margin-bottom:25px;">
<el-card shadow="always" class="common-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">{{index+1}}#{{baseInfo.deviceName}}</span>
<span class="large-title">{{index+1}}#{{baseInfo.parentDeviceName?`${baseInfo.parentDeviceName} —> ` : ''}}{{baseInfo.deviceName}}</span>
</div>
<div class="descriptions-main">
<el-descriptions direction="vertical" :column="3" :colon="false">
@ -15,14 +19,18 @@
</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">{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
<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>
</el-descriptions-item>
</el-descriptions>
<!-- 进度-->
<div class="process-container">
<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 class="process">当前SOC : {{baseInfo.currentSoc}}%</div>
<div class="process pointer" @click="showChart( '当前SOC','电池簇',baseInfo.deviceId)">当前SOC : {{baseInfo.currentSoc}}%</div>
</div>
</div>
<el-table
@ -41,10 +49,16 @@
prop="avgData"
label="单体平均值"
>
<template slot-scope="scope">
<span class="pointer" @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.avgData}}</span>
</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>
</template>
</el-table-column>
<el-table-column
prop="minDataID"
@ -53,6 +67,9 @@
<el-table-column
prop="maxData"
label="单体最大值">
<template slot-scope="scope">
<span class="pointe " @click="showChart( tablePointNameMap[scope.row.dataName+scope.column.label],'电池簇',baseInfo.deviceId)">{{scope.row.maxData}}</span>
</template>
</el-table-column>
<el-table-column
prop="maxDataID"
@ -62,17 +79,20 @@
</el-card>
</div>
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
<script>
import pointChart from "./../PointChart.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],
components:{},
mixins:[getQuerySiteId,intervalUpdate],
components:{pointChart},
data() {
return {
loading:false,
@ -81,27 +101,45 @@ export default {
'温度':'&#8451;',
'SOC':'%'
},
tablePointNameMap:{
'电压单体最小值':'最低单体电压',
'电压单体平均值':'电压平均值',
'电压单体最大值':'最高单体电压',
'温度单体最小值':'最低单体温度',
'温度单体平均值':'温度平均值',
'温度单体最大值':'最高单体温度',
'SOC单体最小值':'最低单体SOC',
'SOC单体平均值':'当前SOC',
'SOC单体最大值':'最高单体SOC',
},
baseInfoList:[],
infoData:[
{label:'簇电压',attr:'clusterVoltage',unit:'V'},
{label:'可充电量',attr:'chargeableCapacity',unit:'kWh'},
{label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh'},
{label:'簇电流',attr:'clusterCurrent',unit:'A'},
{label:'可放电量',attr:'dischargeableCapacity',unit:'kWh'},
{label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh'},
{label:'SOH',attr:'soh',unit:'%'},
{label:'平均温度',attr:'averageTemperature',unit:'&#8451;'},
{label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;'},
{label:'簇电压',attr:'clusterVoltage',unit:'V',pointName:'簇电压'},
{label:'可充电量',attr:'chargeableCapacity',unit:'kWh',pointName:'可充电量'},
{label:'累计充电量',attr:'totalChargedCapacity',unit:'kWh',pointName:'累计充电量'},
{label:'簇电流',attr:'clusterCurrent',unit:'A',pointName:'簇电流'},
{label:'可放电量',attr:'dischargeableCapacity',unit:'kWh',pointName:'可放电量'},
{label:'累计放电量',attr:'totalDischargedCapacity',unit:'kWh',pointName:'累计放电量'},
{label:'SOH',attr:'soh',unit:'%',pointName:'SOH'},
{label:'平均温度',attr:'averageTemperature',unit:'&#8451;',pointName:'平均温度'},
{label:'绝缘电阻',attr:'insulationResistance',unit:'&Omega;',pointName:'绝缘电阻'},
],
}
},
methods:{
init(){
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
},
updateData(){
this.loading = true
getBMSBatteryCluster(this.siteId).then(response => {
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {this.loading = false})
},
init(){
this.updateData()
this.updateInterval(this.updateData)
}
}
}

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

@ -2,145 +2,165 @@
<template>
<div v-loading="loading">
<div v-for="(baseInfo,index) in baseInfoList" :key="index+'bmszlContainer'" style="margin-bottom:25px;">
<el-card shadow="always" class="common-card-container common-card-container-body-no-padding common-card-container-no-title-bg">
<el-card :class="{
'warning-card-container':baseInfo.workStatus && baseInfo.workStatus !== '0',
'running-card-container':baseInfo.workStatus === '0'
}" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
shadow="always">
<div slot="header">
<span class="large-title">{{index+1}}#{{baseInfo.deviceName}}</span>
</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 :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>
</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">{{baseInfo[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
<el-descriptions :colon="false" :column="3" direction="vertical">
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :span="1" contentClassName="descriptions-direction" labelClassName="descriptions-label">
<span class="pointer" @click="showChart(item.pointName || '','电池堆',baseInfo.deviceId)">
{{baseInfo[item.attr] | formatNumber}}<span v-if="item.unit" v-html="item.unit"></span>
</span>
</el-descriptions-item>
</el-descriptions>
<!-- 进度-->
<div class="process-container">
<div class="process-line-bg">
<div class="process-line" :style="{height:baseInfo.stackSoc+'%'}"></div>
<div :style="{height:baseInfo.stackSoc+'%'}" class="process-line"></div>
</div>
<div class="process">当前SOC : {{baseInfo.stackSoc}}%</div>
<div class="process pointer" @click="showChart('当前SOC','电池堆',baseInfo.deviceId)">当前SOC : {{baseInfo.stackSoc}}%</div>
</div>
</div>
<el-table
class="common-table"
:data="baseInfo.batteryDataList"
stripe
class="common-table"
max-height="500"
stripe
style="width: 100%;margin-top:25px;">
<el-table-column
prop="clusterId"
label="簇号">
label="簇号"
prop="clusterId">
</el-table-column>
<el-table-column
label="簇电压"
>
<template slot-scope="scope">
<span>{{scope.row.clusterVoltage}} V</span>
<span class="pointer" @click="showChart('簇电压','电池簇',scope.row.clusterId)">{{scope.row.clusterVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
label="簇电流">
<template slot-scope="scope">
<span>{{scope.row.clusterCurrent}} A</span>
<span class="pointer" @click="showChart('簇电流','电池簇',scope.row.clusterId)">{{scope.row.clusterCurrent}} A</span>
</template>
</el-table-column>
<el-table-column
label="簇SOC">
<template slot-scope="scope">
<span>{{scope.row.currentSoc}} %</span>
<span class="pointer" @click="showChart('当前SOC','电池簇',scope.row.clusterId)">{{scope.row.currentSoc}} %</span>
</template>
</el-table-column>
<el-table-column
prop="maxVoltage"
label="单体最高电压">
label="单体最高电压"
prop="maxVoltage">
<template slot-scope="scope">
<span>{{scope.row.maxCellVoltage}} V</span>
<span class="pointer" @click="showChart('最高单体电压','电池簇',scope.row.clusterId)">{{scope.row.maxCellVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
prop="maxCellVoltageId"
label="电池号码">
label="电池号码"
prop="maxCellVoltageId">
</el-table-column>
<el-table-column
prop="minVoltage"
label="单体最低电压">
label="单体最低电压"
prop="minVoltage">
<template slot-scope="scope">
<span>{{scope.row.minCellVoltage}} V</span>
<span class="pointer" @click="showChart('最低单体电压','电池簇',scope.row.clusterId)">{{scope.row.minCellVoltage}} V</span>
</template>
</el-table-column>
<el-table-column
prop="minCellVoltageId"
label="电池号码">
label="电池号码"
prop="minCellVoltageId">
</el-table-column>
<el-table-column
label="单体最高温度">
<template slot-scope="scope">
<span>{{scope.row.maxCellTemp}} &#8451;</span>
<span class="pointer" @click="showChart('最高单体温度','电池簇',scope.row.clusterId)">{{scope.row.maxCellTemp}} &#8451;</span>
</template>
</el-table-column>
<el-table-column
prop="maxCellTempId"
label="电池号码">
label="电池号码"
prop="maxCellTempId">
</el-table-column>
<el-table-column
prop="minTemperature"
label="单体最低温度">
label="单体最低温度"
prop="minTemperature">
<template slot-scope="scope">
<span>{{scope.row.minCellTemp}} &#8451;</span>
<span class="pointer" @click="showChart('最低单体温度','电池簇',scope.row.clusterId)">{{scope.row.minCellTemp}} &#8451;</span>
</template>
</el-table-column>
<el-table-column
prop="minCellTempId"
label="电池号码">
label="电池号码"
prop="minCellTempId">
</el-table-column>
</el-table>
</el-card>
</div>
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
<script>
import {getBMSOverView} from '@/api/ems/dzjk'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
import pointChart from "./../PointChart.vue";
export default {
name:'DzjkSbjkBmszl',
mixins:[getQuerySiteId],
components: {pointChart,},
mixins:[getQuerySiteId,intervalUpdate],
data() {
return {
loading:false,
baseInfoList:[],
infoData:[
{label:'电池堆总电压',attr:'stackVoltage',unit:'V'},
{label:'可充电量',attr:'availableChargeCapacity',unit:'kWh'},
{label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh'},
{label:'电池堆总电流',attr:'stackCurrent',unit:'A'},
{label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh'},
{label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh'},
{label:'SOH',attr:'stackSoh',unit:'%'},
{label:'平均温度',attr:'operatingTemp',unit:'&#8451;'},
{label:'绝缘电阻',attr:'stackInsulationResistance',unit:'&Omega;'},
{label:'电池堆总电压',attr:'stackVoltage',unit:'V',pointName:'电池堆电压'},
{label:'可充电量',attr:'availableChargeCapacity',unit:'kWh',pointName:'可充电量'},
{label:'累计充电量',attr:'totalChargeCapacity',unit:'kWh',pointName:'累计充电量'},
{label:'电池堆总电流',attr:'stackCurrent',unit:'A',pointName:'电池堆总电流'},
{label:'可放电量',attr:'availableDischargeCapacity',unit:'kWh',pointName:'可放电量'},
{label:'累计放电量',attr:'totalDischargeCapacity',unit:'kWh',pointName:'累计放电量'},
{label:'SOH',attr:'stackSoh',unit:'%',pointName:'SOH'},
{label:'平均温度',attr:'operatingTemp',unit:'&#8451;',pointName:'平均温度'},
{label:'绝缘电阻',attr:'stackInsulationResistance',unit:'&Omega;',pointName:'绝缘电阻'},
]
}
},
methods:{
init(){
this.loading=true;
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
},
updateData(){
this.loading = true
getBMSOverView(this.siteId).then(response => {
this.baseInfoList = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {this.loading = false})
},
init(){
this.updateData()
this.updateInterval(this.updateData)
}
}
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
::v-deep {
//描述列表样式
.descriptions-main {

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

@ -2,16 +2,15 @@
<div v-loading="loading">
<el-card
shadow="always"
class="common-card-container"
:class="
zbInfo.emsCommunicationStatus !== '0'
? 'zb-common-card-container'
: 'cnb-common-card-container'
"
class="sbjk-card-container"
:class="{
'warning-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
'running-card-container':zbInfo.emsCommunicationStatus === '0'
}"
>
<div slot="header">
<span class="large-title">1#{{ zbInfo.deviceName }}</span>
<div class="status">
<div class="info">
<div>
{{
$store.state.ems.communicationStatusOptions[
@ -25,6 +24,7 @@
<el-table
class="common-table"
:data="zbInfo.loadDataDetailInfo"
@cell-click="(row,col)=>{handlerCell(zbInfo.deviceId,row,col)}"
stripe
style="width: 100%"
>
@ -38,17 +38,16 @@
</el-card>
<el-card
shadow="always"
class="common-card-container"
class="sbjk-card-container"
style="margin-top: 20px"
:class="
cnbInfo.emsCommunicationStatus !== '0'
? 'zb-common-card-container'
: 'cnb-common-card-container'
"
:class="{
'warning-card-container':zbInfo.emsCommunicationStatus && zbInfo.emsCommunicationStatus !== '0',
'running-card-container':zbInfo.emsCommunicationStatus === '0'
}"
>
<div slot="header">
<span class="large-title">2#{{ cnbInfo.deviceName }}</span>
<div class="status">
<div class="info">
<div>
{{
$store.state.ems.communicationStatusOptions[
@ -62,6 +61,7 @@
<el-table
class="common-table"
:data="cnbInfo.meteDataDetailInfo"
@cell-click="(row,col)=>{handlerCellCN(cnbInfo.deviceId,row,col)}"
stripe
style="width: 100%"
>
@ -71,15 +71,19 @@
</el-table-column>
</el-table>
</el-card>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
<script>
import pointChart from "./../PointChart.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import { getAmmeterDataList } from "@/api/ems/dzjk";
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name: "DzjkSbjkDb",
mixins: [getQuerySiteId],
mixins: [getQuerySiteId,intervalUpdate],
components:{pointChart},
data() {
return {
loading: false,
@ -88,20 +92,42 @@ export default {
};
},
methods: {
init() {
handlerCell(id,row,column){
if(column.label !== '类别'){
const arr = row.category.split('')
arr.splice(6,0,column.label[0])
this.showChart(arr.join(''),'电表',id)
}
},
handlerCellCN(id,row,column){
if(column.label !== '类别'){
const arr = row.category.split('')
arr.splice(2,arr.length-2,column.label)
this.showChart(arr.join(''),'电表',id)
}
},
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
},
updateData(){
this.loading = true;
getAmmeterDataList(this.siteId)
.then((response) => {
this.zbInfo = JSON.parse(
JSON.stringify(response?.data?.ammeterLoadData || {})
);
this.cnbInfo = JSON.parse(
JSON.stringify(response?.data?.ammeterMeteData || {})
);
})
.finally(() => {
this.loading = false;
});
.then((response) => {
this.zbInfo = JSON.parse(
JSON.stringify(response?.data?.ammeterLoadData || {})
);
this.cnbInfo = JSON.parse(
JSON.stringify(response?.data?.ammeterMeteData || {})
);
})
.finally(() => {
this.loading = false;
});
},
init() {
this.updateData()
this.updateInterval(this.updateData)
},
},
mounted() {},
@ -109,32 +135,16 @@ export default {
</script>
<style scoped lang="scss">
.zb-common-card-container,
.cnb-common-card-container {
.common-card-container {
::v-deep {
.el-card__header {
padding: 10px 14px;
background-color: #fc6b69;
color: #ffffff;
position: relative;
.el-table__row td{
&:not(:first-child){
.cell{
cursor: pointer;
}
}
}
}
}
.cnb-common-card-container {
margin-top: 25px;
::v-deep {
.el-card__header {
background-color: #05aea3;
}
}
}
.status {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: #ffffff;
font-size: 12px;
line-height: 20px;
}
</style>

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

@ -2,7 +2,7 @@
<el-card
v-loading="loading"
shadow="always"
class="common-card-container common-card-container-no-title-bg"
class="sbjk-card-container common-card-container-no-title-bg running-card-container"
>
<div slot="header">
<span class="large-title">单体电池实时数据</span>

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

@ -1,141 +1,112 @@
<template>
<div class="pcs-ems-dashboard-editor-container" v-loading="loading">
<div v-loading="loading" class="pcs-ems-dashboard-editor-container">
<!-- 顶部六个方块-->
<real-time-base-info :data="runningHeadData"/>
<!-- 内容-->
<el-container class="pcs-container" v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'">
<!-- 背景颜色根据工作状态来展示-->
<el-header class="pcs-header" :class="pcsItem.workStatus === '1' ? 'warn' : pcsItem.workStatus === '2' ? 'close' : ''">
<div class="pcs-title">{{pcsItem.deviceName}}</div>
<div class="pcs-status">
<div>{{$store.state.ems.communicationStatusOptions[pcsItem.communicationStatus]}}</div>
<div>数据更新时间：{{pcsItem.dataUpdateTime}}</div>
<div v-for="(pcsItem,pcsIndex) in pcsList" :key="pcsIndex+'PcsHome'" style="margin-bottom:25px;">
<el-card :class="{
'warning-card-container':pcsItem.workStatus === '1',
'timing-card-container':pcsItem.workStatus === '2',
'running-card-container':!['1','2'].includes(pcsItem.workStatus)
}" class="sbjk-card-container common-card-container-body-no-padding common-card-container-no-title-bg"
shadow="always">
<div slot="header">
<span class="large-title">{{pcsIndex+1}}#{{pcsItem.deviceName}}</span>
<div class="info">
<div>
{{
$store.state.ems.communicationStatusOptions[
pcsItem.communicationStatus
]
}}
</div>
<div>数据更新时间：{{ pcsItem.dataUpdateTime }}</div>
</div>
<div class="alarm">
<el-badge :value="pcsItem.alarmNum || 0" class="item">
<i class="el-icon-message-solid" style="font-size: 26px;color: #fff;display: block;"></i>
</el-badge>
</div>
</div>
<div class="pcs-btns">
<el-badge :value="pcsItem.alarmNum || 0" class="item">
<i class="el-icon-message-solid" style="font-size: 26px;color: #fff;display: block;"></i>
</el-badge>
</div>
</el-header>
<el-main style="padding: 0">
<div class="descriptions-main">
<el-descriptions direction="vertical" :column="4" :colon="false">
<el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${pcsItem.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态">{{$store.state.ems.workStatusOptions[pcsItem.workStatus]}}</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="并网状态">{{$store.state.ems.gridStatusOptions[pcsItem.gridStatus]}}</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" :contentClassName="`descriptions-direction ${pcsItem.deviceStatus === '0' ? 'save' : 'danger'}`" :span="1" label="设备状态">{{$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]}}</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="控制模式">{{$store.state.ems.controlModeOptions[pcsItem.controlMode]}}</el-descriptions-item>
</el-descriptions>
</div>
<div class="descriptions-main descriptions-main-bg-color">
<el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction" direction="vertical" :column="4" :colon="false">
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :span="1" :label="item.label">{{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span></el-descriptions-item>
</el-descriptions>
</div>
<div class="descriptions-main" v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'">
<el-descriptions labelClassName="descriptions-label" contentClassName="descriptions-direction keep" direction="vertical" :column="4" :colon="false">
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction keep" :span="4" :label="'支路'+(index+1)">{{item.dischargeStatus}}</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流功率">{{item.dcPower}}kW</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流电压">{{item.dcVoltage}}V</el-descriptions-item>
<el-descriptions-item labelClassName="descriptions-label" contentClassName="descriptions-direction" :span="1" label="直流电流">{{item.dcCurrent}}A</el-descriptions-item>
</el-descriptions>
</div>
</el-main>
</el-container>
<div class="descriptions-main">
<el-descriptions :colon="false" :column="4" direction="vertical">
<el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.workStatus === '0' ? 'save' :'danger'}`" :span="1" label="工作状态" labelClassName="descriptions-label">{{$store.state.ems.workStatusOptions[pcsItem.workStatus]}}</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="并网状态" labelClassName="descriptions-label">{{$store.state.ems.gridStatusOptions[pcsItem.gridStatus]}}</el-descriptions-item>
<el-descriptions-item :contentClassName="`descriptions-direction ${pcsItem.deviceStatus === '0' ? 'save' : 'danger'}`" :span="1" label="设备状态" labelClassName="descriptions-label">{{$store.state.ems.deviceStatusOptions[pcsItem.deviceStatus]}}</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="控制模式" labelClassName="descriptions-label">{{$store.state.ems.controlModeOptions[pcsItem.controlMode]}}</el-descriptions-item>
</el-descriptions>
</div>
<div class="descriptions-main descriptions-main-bg-color">
<el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction" direction="vertical" labelClassName="descriptions-label">
<el-descriptions-item v-for="(item,index) in infoData" :key="index+'pcsInfoData'" :label="item.label" :span="1">
<span class="pointer" @click="showChart(item.pointName || '','PCS',pcsItem.deviceId)">
{{pcsItem[item.attr] | formatNumber}} <span v-if="item.unit" v-html="item.unit"></span>
</span>
</el-descriptions-item>
</el-descriptions>
</div>
<div v-for="(item,index) in pcsItem.pcsBranchInfoList" :key="index+'pcsBranchInfoList'" class="descriptions-main">
<el-descriptions :colon="false" :column="4" contentClassName="descriptions-direction keep" direction="vertical" labelClassName="descriptions-label">
<el-descriptions-item :label="'支路'+(index+1)" :span="4" contentClassName="descriptions-direction keep" labelClassName="descriptions-label">{{item.dischargeStatus}}</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流功率" labelClassName="descriptions-label">
<span class="pointer" @click="showChart('直流功率','PCS分支设备',item.deviceId)">{{item.dcPower}}kW</span>
</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流电压" labelClassName="descriptions-label">
<span class="pointer" @click="showChart('直流电压','PCS分支设备',item.deviceId)">{{item.dcVoltage}}V</span>
</el-descriptions-item>
<el-descriptions-item :span="1" contentClassName="descriptions-direction" label="直流电流" labelClassName="descriptions-label">
<span class="pointer" @click="showChart('直流电流','PCS分支设备',item.deviceId)">{{item.dcCurrent}}A</span>
</el-descriptions-item>
</el-descriptions>
</div>
</el-card>
</div>
<el-empty v-show="pcsList.length<=0" :image-size="200"></el-empty>
<!-- 电位图表 showChart({pointName:点位名称,categoryName:设备名称})-->
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
<script>
import pointChart from "./../PointChart.vue";
import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getRunningHeadInfo,getPcsDetailInfo} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name:'DzjkSbjkPcs',
components:{RealTimeBaseInfo},
mixins:[getQuerySiteId],
components:{RealTimeBaseInfo,pointChart},
mixins:[getQuerySiteId,intervalUpdate],
data() {
return {
loading:false,
runningHeadData:{},//运行信息
pcsList:[],
infoData:[
{label:'总交流有功电率',attr:'totalActivePower',unit:'kW'},
{label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh'},
{label:'A相电压',attr:'aPhaseVoltage',unit:'V'},
{label:'A相电流',attr:'aPhaseCurrent',unit:'A'},
{label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar'},
{label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh'},
{label:'B相电压',attr:'bPhaseVoltage',unit:'V'},
{label:'B相电流',attr:'bPhaseCurrent',unit:'A'},
{label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA'},
{label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'&#8451;'},
{label:'C相电压',attr:'cPhaseVoltage',unit:'V'},
{label:'C相电流',attr:'cPhaseCurrent',unit:'A'},
{label:'总交流功率因数',attr:'totalPowerFactor',unit:''},
{label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'&#8451;'},
{label:'交流频率',attr:'acFrequency',unit:'Hz'}
{label:'总交流有功电率',attr:'totalActivePower',unit:'kW',pointName:'总交流有功电率'},
{label:'当天交流充电量',attr:'dailyAcChargeEnergy',unit:'kWh',pointName:'当天交流充电量 (kWh)'},
{label:'A相电压',attr:'aPhaseVoltage',unit:'V',pointName:''},
{label:'A相电流',attr:'aPhaseCurrent',unit:'A',pointName:'A相电流'},
{label:'总交流无功电率',attr:'totalReactivePower',unit:'kVar',pointName:'总交流无功电率'},
{label:'当天交流放电量',attr:'dailyAcDischargeEnergy',unit:'kWh',pointName:'当天交流放电量 (kWh)'},
{label:'B相电压',attr:'bPhaseVoltage',unit:'V',pointName:''},
{label:'B相电流',attr:'bPhaseCurrent',unit:'A',pointName:'B相电流'},
{label:'总交流视在功率',attr:'totalApparentPower',unit:'kVA',pointName:'总交流视在功率'},
{label:'PCS模块温度',attr:'pcsModuleTemperature',unit:'&#8451;',pointName:''},
{label:'C相电压',attr:'cPhaseVoltage',unit:'V',pointName:''},
{label:'C相电流',attr:'cPhaseCurrent',unit:'A',pointName:'C相电流'},
{label:'总交流功率因数',attr:'totalPowerFactor',unit:'',pointName:'总交流功率因数'},
{label:'PCS环境温度',attr:'pcsEnvironmentTemperature',unit:'&#8451;',pointName:''},
{label:'交流频率',attr:'acFrequency',unit:'Hz',pointName:'交流频率'}
],
pcsBranchList:[],//pcs的支路列表
}
},
methods:{
problemSaved(){
this.$confirm('确认故障已复位?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose:false,
closeOnClickModal:false,
type: 'warning',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
setTimeout(() => {
done();
instance.confirmButtonLoading = false;
}, 3000);
} else {
done();
}
}
}).then(() => {
//只有在故障复位成功的情况下会走到这里
this.$message({
type: 'success',
message: '故障复位成功!'
});
}).catch(() => {
//取消复位
});
},
machineClosed(){
this.$confirm('确认要关机吗?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
showClose:false,
closeOnClickModal:false,
type: 'warning',
beforeClose: (action, instance, done) => {
if (action === 'confirm') {
instance.confirmButtonLoading = true;
setTimeout(() => {
done();
instance.confirmButtonLoading = false;
}, 3000);
} else {
done();
}
}
}).then(() => {
//只有在关机成功的情况下会走到这里
this.$message({
type: 'success',
message: '关机成功!'
});
}).catch(() => {
//取消关机
});
//todo 后续需要新增设备id
showChart(pointName,categoryName,deviceId){
console.log('点击查询图表',pointName,categoryName,deviceId)
pointName && this.$refs.pointChart.showChart({pointName,categoryName,deviceId})
},
//6个方块数据
getRunningHeadData(){
@ -150,54 +121,18 @@ export default {
this.pcsList = JSON.parse(JSON.stringify(data))
}).finally(()=>this.loading = false)
},
init(){
updateData(){
this.getRunningHeadData()
this.getPcsList()
},
init(){
this.updateData()
this.updateInterval(this.updateData)
}
},
}
</script>
<style scoped lang="scss">
.pcs-container{
margin-top: 25px;
border:1px solid #eeeeee;
border-radius: 6px 6px 0 0;
//红色标题
.pcs-header{
background: #05AEA3;
display: flex;
position: relative;
justify-content: flex-start;
align-items: center;
padding: 0;
height: 60px;
border-radius: 6px 6px 0 0;
.pcs-title{
color: #ffffff;
font-size: 20px;
font-weight: 500;
line-height: 20px;
padding: 0 50px 0 25px;
}
.pcs-status{
color: #ffffff;
font-size: 12px;
line-height: 20px;
}
.pcs-btns{
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
}
}
.pcs-header.warn{
background-color:#FC6B69 ;
}
.pcs-header.close{
background-color:#666666 ;
}
}
<style lang="scss" scoped>
</style>

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

@ -34,11 +34,12 @@ import DcpjwdChart from './DcpjwdChart.vue'
import DcpjsocChart from './DcpjsocChart.vue'
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getRunningHeadInfo} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name:'DzjkSbjkSsyx',
components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
mixins:[getQuerySiteId],
mixins:[getQuerySiteId,intervalUpdate],
data() {
return {
runningHeadData:{},//运行信息
@ -51,15 +52,18 @@ export default {
this.runningHeadData = response?.data || {}
})
},
updateData(){
this.$refs.cnglqx.init(this.siteId)
this.$refs.pocpjwd.init(this.siteId)
this.$refs.dcpjsoc.init(this.siteId)
this.$refs.dcpjwd.init(this.siteId)
},
init(){
this.getRunningHeadData()
this.$nextTick(()=>{
this.$refs.cnglqx.init(this.siteId)
this.$refs.pocpjwd.init(this.siteId)
this.$refs.dcpjsoc.init(this.siteId)
this.$refs.dcpjwd.init(this.siteId)
this.updateData()
this.updateInterval(this.updateData)
})
}
}

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

@ -1,7 +1,7 @@
<template>
<div v-loading="loading">
<div class="yl-item-container" :class="{'yl-warn-item-container':item.workMode !== '0'}" v-for="(item,index) in list" :key="index+'ylLise'">
<div class="yl-item-container" :class="{'yl-warn-item-container':item.workMode !== '0','yl-normal-item-container':item.workMode === '0'}" v-for="(item,index) in list" :key="index+'ylLise'">
<div class="header">
<div class="header-title">{{item.systemName}}</div>
<div>工作模式：<span class="header-values">{{$store.state.ems.workModeOptions[item.workMode]}}</span></div>
@ -21,9 +21,10 @@
<script>
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
import {getCoolingDataList} from '@/api/ems/dzjk'
import intervalUpdate from "@/mixins/ems/intervalUpdate";
export default {
name:'DzjkSbjkYl',
mixins:[getQuerySiteId],
mixins:[getQuerySiteId,intervalUpdate],
data() {
return {
loading:false,
@ -40,11 +41,15 @@ export default {
}
},
methods:{
init(){
updateData(){
this.loading = true
getCoolingDataList(this.siteId).then(response => {
this.list = JSON.parse(JSON.stringify(response?.data || []));
}).finally(() => {this.loading = false})
},
init(){
this.updateData()
this.updateInterval(this.updateData)
}
},
mounted(){
@ -56,7 +61,6 @@ export default {
<style scoped lang="scss">
.yl-item-container{
border-radius: 5px;
background-color: #EBF6F6;
&:not(:last-child){
margin-bottom: 25px;
}
@ -73,11 +77,9 @@ export default {
width: 120px;
height: 40px;
font-size: 16px;
background-color: #05AEA3;
text-align: center;
}
.header-values{
color: #05AEA3;
font-weight: 500;
}
}
@ -113,5 +115,16 @@ export default {
}
}
}
.yl-normal-item-container{
background-color: #EBF6F6;
.header{
.header-title{
background-color: #05AEA3;
}
.header-values{
color: #05AEA3;
}
}
}
</style>