接口联调

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

@@ -23,14 +23,51 @@
           <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>
+<!--      <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-table
+          class="common-table"
+          :data="tableData"
+          stripe
+          style="width: 100%;margin-top: 25px">
+          <el-table-column
+            prop="id"
+            label="单体编号">
+          </el-table-column>
+          <el-table-column
+            prop="dianya"
+            label="电压（V）"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="wendu"
+            label="温度（℃）">
+          </el-table-column>
+          <el-table-column
+            prop="soc"
+            label="SOC（%）">
+          </el-table-column>
+          <el-table-column
+            prop="soh"
+            label="SOH（%）">
+          </el-table-column>
+        </el-table>
+        <el-pagination
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pageNum"
+          :page-sizes="[10, 20, 30, 40]"
+          :page-size="pageSize"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="totalSize">
+        </el-pagination>
     </el-card>
 </template>
 
@@ -49,10 +86,28 @@ export default {
       clusterloading:false,
       search:{stackId:'',clusterId:''},
       stackOptions:[],//{id:'',deviceName:''}
-      clusterOptions:[]//{id:'',deviceName:''}
+      clusterOptions:[],//{id:'',deviceName:''}
+      tableData:[],
+      currentPage:1,
+      pageSize:10,//分页栏当前每个数据总数
+      pageNum:1,//分页栏当前页数
+      totalSize:1000,//table表格数据总数
     }
   },
   methods:{
+    // 分页
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.$nextTick(()=>{
+        this.init(false)
+      })
+    },
+    handleCurrentChange(val) {
+      this.pageNum = val
+      this.$nextTick(()=>{
+        this.init(false)
+      })
+    },
     // 搜索
     onSearch(){
       this.init(false)
@@ -87,7 +142,7 @@ export default {
       this.loading=true;
       // todo 获取单体电池数据
       this.loading=false;
-      this.$refs.barChart.setOption()
+      // this.$refs.barChart.setOption()
       // 只有页面初次加载或切换站点的时候调用电池堆列表，其他情况不需要
       if(mounted){
         this.search={stackId:'',clusterId:''}//保证切换站点时，清空选择项