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

src/assets/styles/common.scss

@@ -30,6 +30,11 @@
         font-weight: 500;
         color:#333333;
       }
+      .large-title{
+        font-size: 20px;
+        font-weight: 500;
+        line-height: 40px;
+      }
       .el-button--text{
         color: #666666;
       }
@@ -40,3 +45,8 @@
       padding:0;
     }
 }
+.common-card-container-no-title-bg {
+    .el-card__header{
+      background-color: transparent;
+    }
+}

src/components/Ems/ZdSelect/index.vue

@@ -8,7 +8,7 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSubmit">搜索</el-button>
+        <el-button type="warning" @click="onSubmit">搜索</el-button>
       </el-form-item>
     </el-form>
   </div>

src/router/ems.js

@@ -73,6 +73,24 @@ export const dzjk=[
                 component: () => import('@/views/ems/dzjk/sbjk/bmsdcc/index.vue'),
                 name: 'DjzkSbjkBmsdcc',
                 meta: { title: 'BMS电池簇',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+              },
+              {
+                path: 'dtdc',
+                component: () => import('@/views/ems/dzjk/sbjk/dtdc/index.vue'),
+                name: 'DjzkSbjkDtdc',
+                meta: { title: '单体电池',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+              },
+              {
+                path: 'db',
+                component: () => import('@/views/ems/dzjk/sbjk/db/index.vue'),
+                name: 'DjzkSbjkDb',
+                meta: { title: '电表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+              },
+              {
+                path: 'yl',
+                component: () => import('@/views/ems/dzjk/sbjk/yl/index.vue'),
+                name: 'DjzkSbjkYl',
+                meta: { title: '液冷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
               }
             ]
           }

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

@@ -1,9 +1,9 @@
 
 <template>
   <div>
-    <el-card shadow="always" class="bmszl-common-card-container common-card-container common-card-container-body-no-padding">
+    <el-card shadow="always" class="common-card-container common-card-container-body-no-padding common-card-container-no-title-bg">
       <div slot="header">
-        <span class="card-title bmszl-title">1#电池簇</span>
+        <span class="large-title">1#电池簇</span>
       </div>
       <div class="info-main">
         <el-descriptions direction="vertical" :column="3" :colon="false" border>
@@ -118,20 +118,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.bmszl-common-card-container{
-  ::v-deep{
-    .el-card__header{
-      background-color: transparent;
-      .bmszl-title{
-        font-size: 20px;
-        font-weight: 500;
-        line-height: 40px;
-      }
-    }
-  }
-}
-
-
 //描述列表样式
 .info-main{
   padding:14px;

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

@@ -1,9 +1,9 @@
 
 <template>
   <div>
-    <el-card shadow="always" class="bmszl-common-card-container common-card-container common-card-container-body-no-padding">
+    <el-card shadow="always" class="common-card-container common-card-container-body-no-padding common-card-container-no-title-bg">
       <div slot="header">
-        <span class="card-title bmszl-title">电池堆一</span>
+        <span class="large-title">电池堆一</span>
       </div>
       <div class="info-main">
         <el-descriptions direction="vertical" :column="3" :colon="false" border>
@@ -93,20 +93,6 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.bmszl-common-card-container{
-  ::v-deep{
-    .el-card__header{
-      background-color: transparent;
-      .bmszl-title{
-        font-size: 20px;
-        font-weight: 500;
-        line-height: 40px;
-      }
-    }
-  }
-}
-
-
 //描述列表样式
 .info-main{
   padding:14px;

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

@@ -0,0 +1,144 @@
+
+<template>
+      <div>
+        <el-card shadow="always" class="common-card-container zb-common-card-container">
+          <div slot="header">
+              <span class="large-title">1#总表</span>
+              <div class="status">
+                <div>通信中断</div>
+                <div>数据更新时间：2024-10-11 12:00:00</div>
+              </div>
+          </div>
+          <el-table
+              :data="zbTableData"
+              stripe
+              style="width: 100%;">
+              <el-table-column
+                prop="name"
+                label="类别">
+              </el-table-column>
+              <el-table-column
+                prop="zong"
+                label="总/kWh"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="jian"
+                label="尖/kWh">
+              </el-table-column>
+              <el-table-column
+                prop="feng"
+                label="峰/kWh">
+              </el-table-column>
+              <el-table-column
+                prop="ping"
+                label="平/kWh">
+              </el-table-column>
+              <el-table-column
+                prop="gu"
+                label="谷/kWh">
+              </el-table-column>
+            </el-table>
+        </el-card>
+        <el-card shadow="always" class="common-card-container cnb-common-card-container">
+          <div slot="header">
+            <span class="large-title">2#储能表</span>
+            <div class="status">
+              <div>通信正常</div>
+              <div>数据更新时间：2024-10-11 12:00:00</div>
+            </div>
+          </div>
+          <el-table
+            :data="cnbTableData"
+            stripe
+            style="width: 100%;">
+            <el-table-column
+              prop="name"
+              label="类别">
+            </el-table-column>
+            <el-table-column
+              prop="zong"
+              label="总/kWh"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="jian"
+              label="尖/kWh">
+            </el-table-column>
+            <el-table-column
+              prop="feng"
+              label="峰/kWh">
+            </el-table-column>
+            <el-table-column
+              prop="ping"
+              label="平/kWh">
+            </el-table-column>
+            <el-table-column
+              prop="gu"
+              label="谷/kWh">
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </div>
+</template>
+
+
+<script>
+export default {
+  name:'DzjkSbjkDb',
+  data() {
+    return {
+      zbTableData:[
+        {name:'累计充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+        {name:'累计放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+        {name:'日充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+        {name:'日放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+      ],
+      cnbTableData:[
+        {name:'累计充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+        {name:'累计放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+        {name:'日充电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+        {name:'日放电量',zong:1000,jian:2000,feng:1500,ping:500,gu:40},
+      ]
+    }
+  },
+  methods:{
+
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.zb-common-card-container,.cnb-common-card-container{
+  ::v-deep{
+    .el-card__header{
+      padding:10px 14px;
+      background-color: #FC6B69;
+      color:#ffffff;
+      position: relative;
+    }
+  }
+}
+.cnb-common-card-container{
+  margin-top:25px;
+  ::v-deep{
+    .el-card__header{
+      background-color: #05AEA3;
+    }
+  }
+}
+.status{
+  position: absolute;
+  right:14px;
+  top:50%;
+  transform: translateY(-50%);
+  color: #ffffff;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+
+</style>

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

@@ -0,0 +1,69 @@
+
+<template>
+  <div style="height: 360px" id="dtdcChart"/>
+</template>
+
+<style scoped lang="scss"></style>
+<script>
+import * as echarts from 'echarts'
+import resize from '@/mixins/ems/resize'
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#dtdcChart'))
+    },
+    setOption() {
+      this.chart.setOption({
+        color:['#FFBD00','#3C81FF'],
+        legend: {
+          left: 'center',
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
+        },
+        yAxis: {
+          type: 'value',
+        },
+        series: [
+          {
+            name:'昨天',
+            data: [80,92,1,34,90,130,320,80,9,91,34,90],
+            type: 'bar',
+
+          },{
+            name:'今天',
+            data: [820,932,901,934,1290,1330,1320,820,932,901,934,1290],
+            type: 'bar',
+          }]
+      })
+      this.chart.hideLoading()
+
+    }
+  }
+}
+
+</script>

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>

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

@@ -0,0 +1,144 @@
+
+<template>
+    <div>
+      <div class="yl-item-container">
+        <div class="header">
+          <div class="header-title">1#液冷</div>
+          <div>工作模式：<span class="header-values">运行</span></div>
+          <div>当前温度：<span class="header-values">12&#8451;</span></div>
+        </div>
+        <div class="content">
+          <el-row>
+            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div class="yl-item-container yl-warn-item-container">
+        <div class="header">
+          <div class="header-title">1#液冷</div>
+          <div>工作模式：<span class="header-values">运行</span></div>
+          <div>当前温度：<span class="header-values">12&#8451;</span></div>
+        </div>
+        <div class="content">
+          <el-row>
+            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
+          </el-row>
+        </div>
+      </div>
+      <div class="yl-item-container">
+        <div class="header">
+          <div class="header-title">1#液冷</div>
+          <div>工作模式：<span class="header-values">运行</span></div>
+          <div>当前温度：<span class="header-values">12&#8451;</span></div>
+        </div>
+        <div class="content">
+          <el-row>
+            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
+          </el-row>
+        </div>
+      </div>
+
+      <div class="yl-item-container yl-warn-item-container">
+        <div class="header">
+          <div class="header-title">1#液冷</div>
+          <div>工作模式：<span class="header-values">运行</span></div>
+          <div>当前温度：<span class="header-values">12&#8451;</span></div>
+        </div>
+        <div class="content">
+          <el-row>
+            <el-col v-for="(item,index) in tempData" :key="index+'ylTempData'" :span="8">{{item.title}}：{{item.value}}&#8451;</el-col>
+          </el-row>
+        </div>
+      </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name:'DzjkSbjkYl',
+  data() {
+    return {
+      tempData:[
+        {title:'制热开启点',value:12,attr:''},
+        {title:'制冷开启点',value:23,attr:''},
+        {title:'高温告警点',value:30,attr:''},
+        {title:'制热停止点',value:24,attr:''},
+        {title:'制冷停止点',value:21,attr:''},
+        {title:'低温告警点',value:10,attr:''},
+
+      ]
+    }
+  },
+  methods:{
+
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.yl-item-container{
+  border-radius: 5px;
+  background-color: #EBF6F6;
+  &:not(:last-child){
+    margin-bottom: 25px;
+  }
+  .header{
+    line-height: 40px;
+    font-size: 14px;
+    >div{
+      display: inline-block;
+      margin-right: 40px;
+    }
+    .header-title{
+      border-radius:  5px 0 5px 0;
+      color:#ffffff;
+      width: 120px;
+      height: 40px;
+      font-size: 16px;
+      background-color: #05AEA3;
+      text-align: center;
+    }
+    .header-values{
+      color: #05AEA3;
+      font-weight: 500;
+    }
+  }
+  .content{
+    padding:25px;
+    .el-row{
+      background-color: #ffffff;
+      border:1px solid #eeeeee;
+      line-height: 14px;
+      color: #333333;
+      font-size: 12px;
+      .el-col{
+        padding:10px 0;
+        text-align: center;
+      }
+      .el-col:nth-child(-n+3){
+        border-bottom: 1px solid #eeeeee;
+      }
+      .el-col:not(:nth-child(3n)){
+        border-right: 1px solid #eeeeee;
+      }
+    }
+  }
+}
+.yl-warn-item-container{
+  background-color: #FFF1F0;
+  .header{
+    .header-title{
+      background-color: #FC6B69;
+    }
+    .header-values{
+      color: #FC6B69;
+    }
+  }
+}
+
+</style>