设备监控点击数据查看表格

This commit is contained in:
白菜
2025-09-13 20:36:46 +08:00
parent b61a202267
commit 4c31eeb837
9 changed files with 408 additions and 154 deletions

View File

@ -15,14 +15,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.stackSoc+'%'}"></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
@ -39,26 +43,26 @@
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="单体最高电压">
<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
@ -69,7 +73,7 @@
prop="minVoltage"
label="单体最低电压">
<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
@ -79,7 +83,7 @@
<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
@ -90,7 +94,7 @@
prop="minTemperature"
label="单体最低温度">
<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
@ -102,6 +106,7 @@
</el-card>
</div>
<el-empty v-show="baseInfoList.length<=0" :image-size="200"></el-empty>
<point-chart ref="pointChart" :site-id="siteId"/>
</div>
</template>
@ -109,27 +114,34 @@
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',
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:{
//todo 后续需要新增设备id
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 => {