2025-06-22 17:22:40 +08:00
|
|
|
|
|
|
|
<template>
|
2025-06-28 14:52:49 +08:00
|
|
|
<el-card v-loading="loading" shadow="always" class="common-card-container common-card-container-no-title-bg">
|
2025-06-22 17:22:40 +08:00
|
|
|
<div slot="header">
|
|
|
|
<span class="large-title">单体电池实时数据</span>
|
|
|
|
</div>
|
|
|
|
<!-- 搜索栏-->
|
2025-06-24 22:48:33 +08:00
|
|
|
<el-form :inline="true" class="select-container">
|
|
|
|
<el-form-item label="电池堆">
|
2025-06-28 14:52:49 +08:00
|
|
|
<el-select v-model="search.stackId" placeholder="请选择" @change="changeStackId">
|
|
|
|
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in stackOptions" :key="index+'stackOptions'"></el-option>
|
2025-06-24 22:48:33 +08:00
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item label="电池簇">
|
2025-06-28 14:52:49 +08:00
|
|
|
<el-select v-model="search.clusterId" :no-data-text="!search.stackId && stackOptions.length > 0 ? '请先选择电池堆':'无数据'" placeholder="请选择" :loading="clusterloading" loading-text="正在加载数据">
|
|
|
|
<el-option :label="item.deviceName" :value="item.id" v-for="(item,index) in clusterOptions" :key="index+'clusterOptions'"></el-option>
|
2025-06-24 22:48:33 +08:00
|
|
|
</el-select>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
|
|
<el-button type="primary" @click="onSearch" native-type="button">搜索</el-button>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item>
|
|
|
|
<el-button @click="onReset" native-type="button">重置</el-button>
|
|
|
|
</el-form-item>
|
|
|
|
</el-form>
|
2025-06-22 17:22:40 +08:00
|
|
|
<div style="margin:30px 0;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
|
|
|
|
<!-- 图表-->
|
|
|
|
<el-row style="background:#fff;margin:30px 0;">
|
|
|
|
<el-col :xs="24" :sm="24" :lg="24">
|
|
|
|
<bar-chart ref="barChart"/>
|
|
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</div>
|
|
|
|
</el-card>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import BarChart from './BarChart'
|
2025-06-28 14:52:49 +08:00
|
|
|
import {getStackNameList,getClusterNameList} from '@/api/ems/dzjk'
|
|
|
|
import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
|
2025-06-22 17:22:40 +08:00
|
|
|
export default {
|
|
|
|
name:'DzjkSbjkDtdc',
|
2025-06-28 14:52:49 +08:00
|
|
|
mixins:[getQuerySiteId],
|
2025-06-22 17:22:40 +08:00
|
|
|
components:{BarChart},
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
loading:false,
|
2025-06-28 14:52:49 +08:00
|
|
|
clusterloading:false,
|
|
|
|
search:{stackId:'',clusterId:''},
|
|
|
|
stackOptions:[],//{id:'',deviceName:''}
|
|
|
|
clusterOptions:[]//{id:'',deviceName:''}
|
2025-06-22 17:22:40 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods:{
|
|
|
|
// 搜索
|
|
|
|
onSearch(){
|
2025-06-28 14:52:49 +08:00
|
|
|
this.init(false)
|
2025-06-22 17:22:40 +08:00
|
|
|
},
|
|
|
|
// 重置
|
2025-06-28 14:52:49 +08:00
|
|
|
// 清空搜索栏选中数据
|
|
|
|
// 清空电池簇列表,保留电池堆列表
|
2025-06-22 17:22:40 +08:00
|
|
|
onReset(){
|
2025-06-28 14:52:49 +08:00
|
|
|
this.search={stackId:'',clusterId:''}
|
|
|
|
this.clusterOptions=[]
|
|
|
|
this.init(false)
|
2025-06-22 17:22:40 +08:00
|
|
|
},
|
2025-06-28 14:52:49 +08:00
|
|
|
changeStackId(val){
|
|
|
|
if(val){
|
|
|
|
console.log('选择了电池堆,需要获取对应的电池簇',val,this.search.stackId)
|
|
|
|
this.search.clusterId=''
|
|
|
|
this.getClusterList()
|
2025-06-22 17:22:40 +08:00
|
|
|
}
|
|
|
|
},
|
2025-06-28 14:52:49 +08:00
|
|
|
getStackList(){
|
|
|
|
getStackNameList(this.siteId).then(response => {
|
|
|
|
this.stackOptions = JSON.parse(JSON.stringify(response?.data || []))
|
|
|
|
})
|
|
|
|
},
|
|
|
|
getClusterList(){
|
|
|
|
this.clusterloading =true
|
|
|
|
getClusterNameList(this.search.stackId).then(response => {
|
|
|
|
this.clusterOptions = JSON.parse(JSON.stringify(response?.data || []))
|
|
|
|
}).finally(() => {this.clusterloading =false})
|
|
|
|
},
|
|
|
|
init(mounted = true){
|
|
|
|
this.loading=true;
|
|
|
|
// todo 获取单体电池数据
|
|
|
|
this.loading=false;
|
|
|
|
this.$refs.barChart.setOption()
|
2025-06-28 15:22:08 +08:00
|
|
|
// 只有页面初次加载或切换站点的时候调用电池堆列表,其他情况不需要
|
2025-06-28 14:52:49 +08:00
|
|
|
if(mounted){
|
2025-06-28 15:22:08 +08:00
|
|
|
this.search={stackId:'',clusterId:''}//保证切换站点时,清空选择项
|
2025-06-28 14:52:49 +08:00
|
|
|
this.getStackList()
|
|
|
|
}
|
2025-06-22 17:22:40 +08:00
|
|
|
|
2025-06-28 14:52:49 +08:00
|
|
|
}
|
2025-06-22 17:22:40 +08:00
|
|
|
},
|
|
|
|
mounted(){
|
2025-06-28 14:52:49 +08:00
|
|
|
|
2025-06-22 17:22:40 +08:00
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|