新增单体电池、电表、液冷页面

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

@@ -0,0 +1,120 @@
+
+<template>
+      <el-card shadow="always" class="common-card-container common-card-container-no-title-bg">
+        <div slot="header">
+          <span class="large-title">单体电池实时数据</span>
+        </div>
+      <!--    搜索栏-->
+      <div class="select-container">
+        <el-form :inline="true">
+          <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>
+          </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>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="warning" @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>
+      <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>
+              <el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'"  type="warning" :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">
+            <bar-chart ref="barChart"/>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+</template>
+
+
+<script>
+import BarChart from './BarChart'
+export default {
+  name:'DzjkSbjkDtdc',
+  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},
+      ]
+    }
+  },
+  methods:{
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.search.dcd=''
+      this.search.dcc=''
+      this.getData()
+    },
+    // 获取数据
+    getData(){
+      this.$refs.barChart.chart.showLoading()
+      //获取完成后 传入data todo传参
+      this.$refs.barChart.setOption()
+    },
+    changeDataType(id){
+      if(id !== this.activeBtn){
+        console.log('点击了不同的菜单，更新数据')
+        this.activeBtn=id;
+      }
+    },
+
+  },
+  mounted(){
+    this.$refs.barChart.initChart()
+    this.getData()
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.select-container{
+  .el-form--inline .el-form-item{
+    margin-right: 20px;
+  }
+}
+.activeBtn{
+  background-color: #FFF2CB;
+  border-color: #FFF2CB;
+  color: #666666;
+  font-weight: 600;
+}
+</style>