pcs、bms接口联调

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

@@ -1,19 +1,19 @@
 
 <template>
-      <el-card shadow="always" class="common-card-container common-card-container-no-title-bg">
+      <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>
       <!--    搜索栏-->
       <el-form :inline="true" class="select-container">
         <el-form-item label="电池堆">
-          <el-select v-model="search.dcd" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
-            <el-option :label="item.name" :value="item.id" v-for="(item,index) in dcdOptions" :key="index+'dcdOptions'"></el-option>
+          <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>
           </el-select>
         </el-form-item>
         <el-form-item label="电池簇">
-          <el-select v-model="search.dcc" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
-            <el-option :label="item.name" :value="item.id" v-for="(item,index) in dccOptions" :key="index+'dccOptions'"></el-option>
+          <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>
           </el-select>
         </el-form-item>
         <el-form-item>
@@ -24,14 +24,6 @@
         </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="">
-          <el-col :xs="24" :sm="24" :lg="24">
-            <el-button-group class="ems-btns-group">
-              <el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
-            </el-button-group>
-          </el-col>
-        </el-row>
         <!--    图表-->
         <el-row style="background:#fff;margin:30px 0;">
           <el-col :xs="24" :sm="24" :lg="24">
@@ -45,59 +37,66 @@
 
 <script>
 import BarChart from './BarChart'
+import {getStackNameList,getClusterNameList} from '@/api/ems/dzjk'
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 export default {
   name:'DzjkSbjkDtdc',
+  mixins:[getQuerySiteId],
   components:{BarChart},
   data() {
     return {
-      btnList:[
-        {name:'电压',id:'dy'},
-        {name:'温度',id:'wd'},
-        {name:'SOC',id:'soc'},
-        {name:'SOH',id:'soh'},
-      ],
-      activeBtn:'dy',
       loading:false,
-      search:{dcd:'',dcc:''},
-      dcdOptions:[
-        {name:'电池堆1',id:1},
-        {name:'电池堆2',id:2},
-        {name:'电池堆3',id:3},
-      ],
-      dccOptions:[
-        {name:'电池簇1',id:1},
-        {name:'电池簇2',id:2},
-      ]
+      clusterloading:false,
+      search:{stackId:'',clusterId:''},
+      stackOptions:[],//{id:'',deviceName:''}
+      clusterOptions:[]//{id:'',deviceName:''}
     }
   },
   methods:{
     // 搜索
     onSearch(){
-      this.getData()
+      this.init(false)
     },
     // 重置
+    // 清空搜索栏选中数据
+    // 清空电池簇列表，保留电池堆列表
     onReset(){
-      this.search.dcd=''
-      this.search.dcc=''
-      this.getData()
+      this.search={stackId:'',clusterId:''}
+      this.clusterOptions=[]
+      this.init(false)
     },
-    // 获取数据
-    getData(){
-      this.$refs.barChart.chart.showLoading()
-      //获取完成后 传入data todo传参
-      this.$refs.barChart.setOption()
-    },
-    changeDataType(id){
-      if(id !== this.activeBtn){
-        console.log('点击了不同的菜单，更新数据')
-        this.activeBtn=id;
+    changeStackId(val){
+      if(val){
+        console.log('选择了电池堆，需要获取对应的电池簇',val,this.search.stackId)
+        this.search.clusterId=''
+        this.getClusterList()
       }
     },
+    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()
+      // 只有页面初次加载的时候调用电池堆列表，其他情况不需要
+      if(mounted){
+        this.getStackList()
+      }
 
+    }
   },
   mounted(){
-    this.$refs.barChart.initChart()
-    this.getData()
+
 
   }
 }