Files
emsfront/src/views/ems/dzjk/sbjk/dtdc/index.vue

106 lines
3.5 KiB
Vue
Raw Normal View History

<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">
<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>
<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";
export default {
name:'DzjkSbjkDtdc',
2025-06-28 14:52:49 +08:00
mixins:[getQuerySiteId],
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:''}
}
},
methods:{
// 搜索
onSearch(){
2025-06-28 14:52:49 +08:00
this.init(false)
},
// 重置
2025-06-28 14:52:49 +08:00
// 清空搜索栏选中数据
// 清空电池簇列表,保留电池堆列表
onReset(){
2025-06-28 14:52:49 +08:00
this.search={stackId:'',clusterId:''}
this.clusterOptions=[]
this.init(false)
},
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-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 14:52:49 +08:00
if(mounted){
this.search={stackId:'',clusterId:''}//保证切换站点时,清空选择项
2025-06-28 14:52:49 +08:00
this.getStackList()
}
2025-06-28 14:52:49 +08:00
}
},
mounted(){
2025-06-28 14:52:49 +08:00
}
}
</script>