概率统计接口联调

src/views/ems/dzjk/tjbb/dcwd/index.vue

@@ -1,16 +1,16 @@
 
 <template>
-  <div>
+  <div v-loading="loading">
     <!--    搜索栏-->
     <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+'dcdOptions'"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="电池簇">
-        <el-select v-model="search.gjdj" 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+'dccOptions'"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="时间选择">
@@ -37,7 +37,7 @@
           max-height="500"
           style="width: 100%;margin-top:25px;">
           <el-table-column
-            prop="time"
+            prop="statisDate"
             width="100"
             label="时间">
           </el-table-column>
@@ -46,7 +46,7 @@
             label="最高温（℃）">
           </el-table-column>
           <el-table-column
-            prop="maxTempDtId"
+            prop="maxTempId"
             label="单体ID">
           </el-table-column>
           <el-table-column
@@ -54,84 +54,138 @@
             label="最低温（℃）">
           </el-table-column>
           <el-table-column
-            prop="minTempDtId"
+            prop="minTempId"
             label="单体ID">
           </el-table-column>
           <el-table-column
-            prop="maxPressure"
+            prop="maxVoltage"
             label="最高压（V）">
           </el-table-column>
           <el-table-column
-            prop="maxPressureDtId"
+            prop="maxVoltageId"
             label="单体ID">
           </el-table-column>
           <el-table-column
-            prop="minTemp"
+            prop="minVoltage"
             label="最低压（V）">
           </el-table-column>
           <el-table-column
-            prop="minPressureDtId"
+            prop="minVoltageId"
             label="单体ID">
           </el-table-column>
         </el-table>
+      <el-pagination
+        v-show="tableData.length>0"
+        background
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="pageNum"
+        :page-size="pageSize"
+        :page-sizes="[10, 20, 30, 40]"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalSize"
+        style="margin-top:15px;text-align: center"
+      >
+      </el-pagination>
     </div>
   </div>
 </template>
 
 
 <script>
+import {getStackNameList, getClusterNameList, getClusterData} from '@/api/ems/dzjk'
+import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
+import {formatDate} from "@/utils";
 export default {
   name:'DzjkTjbbDcwd',
+  mixins:[getQuerySiteId],
   data() {
     return {
-      loading:false,
       pickerOptions:{
         disabledDate(time) {
           return time.getTime() > Date.now();
         },
       },
       defaultDate:'',//默认展示的时间
-      search:{dcd:'',dcc:'',date:''},
-      dcdOptions:[
-        {name:'电池堆1',id:1},
-        {name:'电池堆2',id:2},
-        {name:'电池堆3',id:3},
-      ],
-      dccOptions:[
-        {name:'电池簇1',id:1},
-        {name:'电池簇2',id:2},
-      ],
-      tableData:[
-        {time:'00:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
-        {time:'01:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
-        {time:'02:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
-        {time:'03:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
-        {time:'04:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
-        {time:'05:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
-        {time:'06:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
-        {time:'07:00',maxTemp:'30',maxTempDtId:1,minTemp:'20',minTempDtId:2,maxPressure:50,maxPressureDtId:1,minPressure:10,minPressureDtId:2},
-      ]
+      loading:false,
+      clusterloading:false,
+      search:{stackId:'',clusterId:'',date:''},
+      stackOptions:[],//{id:'',deviceName:''}
+      clusterOptions:[],//{id:'',deviceName:''}
+      tableData:[],
+      pageSize:10,//分页栏当前每个数据总数
+      pageNum:1,//分页栏当前页数
+      totalSize:0,//table表格数据总数
     }
   },
   methods:{
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.getTableData()
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.getTableData()
+      })
+    },
     // 搜索
     onSearch(){
-      this.getData()
+      this.pageNum =1//每次搜索从1开始搜索
+      this.getTableData()
     },
     // 重置
     onReset(){
-      this.search={
-        dcd:'',dcc:'',date:''
+      this.search.date=''
+      this.pageNum = 1
+      this.getTableData()
+    },
+    changeStackId(val){
+      if(val){
+        this.search.clusterId=''
+        this.getClusterList()
       }
-      this.getData()
     },
-    // 获取数据
-    getData(){
-      this.loading=false
+    //表格数据
+    async getTableData(){
+      this.loading=true;
+      const {stackId,clusterId,date} =this.search
+      const {siteId,pageNum,pageSize}=this
+      await getClusterData({dateTime:formatDate(date),stackId,clusterId,siteId,pageNum,pageSize}).then(response => {
+        this.tableData=response?.rows || [];
+        this.totalSize = response?.total || 0
+      }).finally(()=>{
+        this.loading=false;
+      })
     },
+    async getStackList(){
+      await getStackNameList(this.siteId).then(response => {
+        const data = JSON.parse(JSON.stringify(response?.data || []))
+        this.stackOptions = data
+        this.search.stackId = data.length > 0 ? data[0].id : ''
+      })
+    },
+    async getClusterList(){
+      this.clusterloading =true
+      await getClusterNameList(this.search.stackId).then(response => {
+        const data = JSON.parse(JSON.stringify(response?.data || []))
+        this.clusterOptions = data
+        this.search.clusterId = data.length > 0 ? data[0].id : ''
+      }).finally(() => {this.clusterloading =false})
+    },
+    async init(){
+      // 只有页面初次加载或切换站点的时候调用电池堆列表，其他情况不需要
+      await this.getStackList()
+      await this.getClusterList()
+      await this.onReset()
+
+
+    }
   },
   mounted(){
-    this.getData()
     this.defaultDate = new Date()
   }
 }