新增策略页面

src/assets/styles/common.scss

@@ -162,3 +162,8 @@
 .select-container.el-form--inline .el-form-item{
   margin-right: 15px;
 }
+//红色背景颜色按钮
+.alarm-btn,.alarm-btn:hover, .alarm-btn:focus{
+  background-color: #FC6B69;
+  border-color: #FC6B69;
+}

src/router/ems.js

@@ -40,108 +40,129 @@ export const dzjk=[
           {
             path: '/dzjk/home',
             component: () => import('@/views/ems/dzjk/home/index.vue'),
-            name: 'DjzkHome',
-            meta: { title: '首页',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkHome' }
+            name: 'DzjkHome',
+            meta: { title: '首页',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkHome' }
           },
           {
             path: '/dzjk/sbjk',
             component: () => import('@/views/ems/dzjk/sbjk/index.vue'),
-            name: 'DjzkSbjk',
+            name: 'DzjkSbjk',
             meta: { title: '设备监控',breadcrumb: false,activeMenu: '/dzjk'},
             redirect: '/dzjk/sbjk/ssyx',
             children: [
               {
                 path: 'ssyx',
                 component: () => import('@/views/ems/dzjk/sbjk/ssyx/index.vue'),
-                name: 'DjzkSbjkSsyx',
-                meta: { title: '实时运行',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+                name: 'DzjkSbjkSsyx',
+                meta: { title: '实时运行',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
               },
               {
                 path: 'pcs',
                 component: () => import('@/views/ems/dzjk/sbjk/pcs/index.vue'),
-                name: 'DjzkSbjkPcs',
-                meta: { title: 'Pcs',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+                name: 'DzjkSbjkPcs',
+                meta: { title: 'Pcs',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
               },
               {
                 path: 'bmszl',
                 component: () => import('@/views/ems/dzjk/sbjk/bmszl/index.vue'),
-                name: 'DjzkSbjkBmszl',
-                meta: { title: 'BMS总览',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+                name: 'DzjkSbjkBmszl',
+                meta: { title: 'BMS总览',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
               },
               {
                 path: 'bmsdcc',
                 component: () => import('@/views/ems/dzjk/sbjk/bmsdcc/index.vue'),
-                name: 'DjzkSbjkBmsdcc',
-                meta: { title: 'BMS电池簇',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+                name: 'DzjkSbjkBmsdcc',
+                meta: { title: 'BMS电池簇',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
               },
               {
                 path: 'dtdc',
                 component: () => import('@/views/ems/dzjk/sbjk/dtdc/index.vue'),
-                name: 'DjzkSbjkDtdc',
-                meta: { title: '单体电池',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+                name: 'DzjkSbjkDtdc',
+                meta: { title: '单体电池',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
               },
               {
                 path: 'db',
                 component: () => import('@/views/ems/dzjk/sbjk/db/index.vue'),
-                name: 'DjzkSbjkDb',
-                meta: { title: '电表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+                name: 'DzjkSbjkDb',
+                meta: { title: '电表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
               },
               {
                 path: 'yl',
                 component: () => import('@/views/ems/dzjk/sbjk/yl/index.vue'),
-                name: 'DjzkSbjkYl',
-                meta: { title: '液冷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
+                name: 'DzjkSbjkYl',
+                meta: { title: '液冷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkSbjk'},
               }
             ]
           },
           {
             path: '/dzjk/gzgj',
             component: () => import('@/views/ems/dzjk/gzgj/index.vue'),
-            name: 'DjzkGzgj',
-            meta: { title: '故障告警',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkGzgj' }
+            name: 'DzjkGzgj',
+            meta: { title: '故障告警',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkGzgj' }
           },
           {
             path: '/dzjk/tjbb',
             component: () => import('@/views/ems/dzjk/tjbb/index.vue'),
-            name: 'DjzkTjbb',
+            name: 'DzjkTjbb',
             meta: {title: '统计报表', breadcrumb: false, activeMenu: '/dzjk'},
             redirect: '/dzjk/tjbb/gltj',
             children: [
               {
                 path: 'gltj',
                 component: () => import('@/views/ems/dzjk/tjbb/gltj/index.vue'),
-                name: 'DjzkTjbbGltj',
-                meta: { title: '概率统计',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+                name: 'DzjkTjbbGltj',
+                meta: { title: '概率统计',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
               },
               {
                 path: 'glqx',
                 component: () => import('@/views/ems/dzjk/tjbb/glqx/index.vue'),
-                name: 'DjzkTjbbGlqx',
-                meta: { title: '功率曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+                name: 'DzjkTjbbGlqx',
+                meta: { title: '功率曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
               },
               {
                 path: 'pcsqx',
                 component: () => import('@/views/ems/dzjk/tjbb/pcsqx/index.vue'),
-                name: 'DjzkTjbbPcsqx',
-                meta: { title: 'PCS曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+                name: 'DzjkTjbbPcsqx',
+                meta: { title: 'PCS曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
               },
               {
                 path: 'dcdqx',
                 component: () => import('@/views/ems/dzjk/tjbb/dcdqx/index.vue'),
-                name: 'DjzkTjbbDcdqx',
-                meta: { title: '电池堆曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+                name: 'DzjkTjbbDcdqx',
+                meta: { title: '电池堆曲线',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
               },
               {
                 path: 'dcwd',
                 component: () => import('@/views/ems/dzjk/tjbb/dcwd/index.vue'),
-                name: 'DjzkTjbbDcwd',
-                meta: { title: '电池温度',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+                name: 'DzjkTjbbDcwd',
+                meta: { title: '电池温度',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
               },
               {
                 path: 'dbbb',
                 component: () => import('@/views/ems/dzjk/tjbb/dbbb/index.vue'),
-                name: 'DjzkTjbbDbbb',
-                meta: { title: '电表报表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkTjbb'},
+                name: 'DzjkTjbbDbbb',
+                meta: { title: '电表报表',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkTjbb'},
+              }
+            ]
+          },
+          {
+            path: '/dzjk/clpz',
+            component: () => import('@/views/ems/dzjk/clpz/index.vue'),
+            name: 'DzjkClpz',
+            meta: {title: '策略配置', breadcrumb: false, activeMenu: '/dzjk'},
+            redirect: '/dzjk/clpz/clyx',
+            children: [
+              {
+                path: 'clyx',
+                component: () => import('@/views/ems/dzjk/clpz/clyx/index.vue'),
+                name: 'DzjkClpzClyx',
+                meta: { title: '策略运行',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkClpz'},
+              },
+              {
+                path: 'xftg',
+                component: () => import('@/views/ems/dzjk/clpz/xftg/index.vue'),
+                name: 'DzjkClpzXftg',
+                meta: { title: '削峰填谷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DzjkClpz'},
               }
             ]
           }

src/views/ems/dzjk/clpz/ClContainer.vue

@@ -0,0 +1,109 @@
+<template>
+  <el-container class="clyx-container">
+    <el-header class="clyx-header">
+      <div class="clyx-title">策略状态：<span class="clyx-status save">已运行</span></div>
+      <div class="clyx-btns">
+        <el-button v-if="!hideSettingBtn" size="small" @click="$refs.setting.dialogFormVisible = true">配置</el-button>
+        <el-button type="warning" class="alarm-btn" size="small" @click='close'>停止策略</el-button>
+      </div>
+    </el-header>
+    <el-main class="clyx-main">
+      <slot name="default"></slot>
+      <setting ref="setting"/>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+import Setting from './Setting.vue'
+export default {
+  name:'DzjkClpzClContainer',
+  components:{Setting},
+  props:{
+    hideSettingBtn:{
+      type:Boolean,
+      default:false
+    }
+  },
+  data() {
+    return {
+    }
+  },
+  methods:{
+    close(){
+      this.$confirm('确认要停止策略吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        showClose:false,
+        closeOnClickModal:false,
+        type: 'warning',
+        beforeClose: (action, instance, done) => {
+          if (action === 'confirm') {
+            instance.confirmButtonLoading = true;
+            setTimeout(() => {
+              // todo 调用接口如果关机成功 调用done方法 否则不关闭弹窗
+              done();
+              // setTimeout(() => {
+              instance.confirmButtonLoading = false;
+              // }, 300);
+            }, 3000);
+          } else {
+            done();
+          }
+        }
+      }).then(() => {
+        //只有在故障复位成功的情况下会走到这里
+        this.$message({
+          type: 'success',
+          message: '停止策略成功!'
+        });
+      }).catch(() => {
+        //取消复位
+      });
+    }
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.clyx-container{
+  border:1px solid #eee;
+  .clyx-header{
+    background: #F1F5FB;
+    display: flex;
+    position: relative;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 0;
+    height: 60px;
+    border-radius: 6px 6px 0 0;
+    .clyx-title{
+      color: #333333;
+      line-height: 20px;
+      padding: 0 50px 0 25px;
+      .clyx-status{
+        font-weight: 500;
+        font-size: 16px;
+        &.danger{
+          color:#FC6B69;
+        }
+        &.save{
+          color:#09ADA3;
+        }
+        &.keep{
+          color:#3C81FF;
+        }
+      }
+    }
+    .clyx-btns{
+      position: absolute;
+      right: 25px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}
+</style>

src/views/ems/dzjk/clpz/Setting.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-dialog
+    title="主从策略配置"
+    custom-class="ems-dialog"
+    :visible.sync="dialogFormVisible"
+    width="420px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @close="cancel"
+  >
+    <el-form :model="form" label-width="100px">
+      <el-form-item label="主策略">
+        <el-select v-model="form.main" placeholder="请选择">
+          <el-option label="主策略一" value="1"></el-option>
+          <el-option label="主策略二" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="辅助策略">
+        <el-select v-model="form.assis" placeholder="请选择">
+          <el-option label="辅助策略一" value="1"></el-option>
+          <el-option label="辅助策略二" value="2"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="dialogFormVisible=false">取 消</el-button>
+      <el-button type="primary" :loading="loading" @click="sure">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data(){
+    return {
+      loading:false,
+      dialogFormVisible:false,
+      form:{
+        main:'',
+        assis:''
+      }
+    }
+  },
+  methods:{
+    cancel(){
+      this.form.main='';
+      this.form.assis='';
+    },
+    sure(){
+      if(this.form.main===''||this.form.assis===''){
+        return this.$alert('请选择正确的策略');
+      }
+      this.loading = true
+      setTimeout(()=>{
+        this.loading = false
+        //如果接口调用成功 关闭弹窗
+        this.dialogFormVisible = false;
+      },3000)
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/ems/dzjk/clpz/clyx/index.vue

@@ -0,0 +1,79 @@
+
+<template>
+ <cl-container>
+   <template v-slot:default>
+     <div class="cl-items cl-items-main">
+       <div class="cl-header">主策略</div>
+       <div class="cl-content">
+         <div class="cl-name">削峰填谷</div>
+       </div>
+     </div>
+     <div class="cl-items">
+       <div class="cl-header">辅助策略</div>
+       <div class="cl-content">
+         <div class="cl-name">需量控制</div>
+       </div>
+     </div>
+   </template>
+ </cl-container>
+</template>
+
+
+<script>
+import ClContainer from './../ClContainer.vue'
+export default {
+  name:'DzjkClpzClyx',
+  components:{ClContainer},
+  data() {
+    return {
+
+    }
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .clyx-main{
+    padding:0 12px 0 12px;
+    .cl-items{
+      width: 228px;
+      height: 156px;
+      display: inline-block;
+      margin:24px 12px 0 12px;
+      font-size:14px;
+      color:#333333;
+      border: 1px solid #eeeeee;
+      .cl-header{
+        background:  #FFE5AC;
+        text-align: center;
+        font-size:16px;
+        line-height: 40px;
+        height: 40px;
+        width: 100%;
+      }
+      .cl-content{
+        background-color: #ffffff;
+        position: relative;
+        height: 114px;
+        width: 100%;
+        .cl-name{
+          position: absolute;
+          top:50%;
+          left:50%;
+          transform: translate(-50%,-50%);
+        }
+      }
+      &.cl-items-main{
+        .cl-header{
+          background:  #FFBE29;
+        }
+        .cl-content{
+          background-color: #FFF2CB;
+        }
+      }
+    }
+  }
+</style>

src/views/ems/dzjk/clpz/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="ems-dashboard-editor-container clpz-ems-dashboard-editor-container">
+    <el-menu
+      class="ems-third-menu"
+      :default-active="$route.name"
+      background-color="#ffffff"
+      text-color="#666666"
+      active-text-color="#ffffff"
+    >
+      <el-menu-item :index="item.name" v-for="(item,index) in childrenRoute" :key="index+'clpzChildrenRoute'">
+        <router-link  style="height: 100%;width: 100%;display: block;" :to="{path:item.path,query:$route.query}">
+          {{item.meta.title}}
+        </router-link>
+      </el-menu-item>
+    </el-menu>
+
+    <div class="ems-content-container ems-content-container-padding clpz-ems-content-container">
+      <keep-alive>
+        <router-view></router-view>
+      </keep-alive>
+    </div>
+  </div>
+
+</template>
+
+<script>
+import { dzjk } from '@/router/ems'
+const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DzjkClpz').children//获取到统计报表下面的字路由
+console.log('设备监控子路由',childrenRoute)
+export default {
+  name:'DzjkClpz',
+  data(){
+    return {
+      childrenRoute,
+      activeMenu:''
+    }
+  },
+  mounted() {
+    console.log('当前统计报表页面路由',this.$route)
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+.clpz-ems-dashboard-editor-container{
+  display: flex;
+  padding:0;
+  background: #FFFFFF;
+}
+.clpz-ems-content-container{
+  margin-top:0;
+  padding-top:0;
+  padding-right: 0;
+  flex: 1;
+}
+</style>
+

src/views/ems/dzjk/clpz/xftg/TempPowerChart.vue

@@ -0,0 +1,87 @@
+
+<template>
+  <el-card shadow="always" class="common-card-container common-card-container-body-no-padding" style="margin-top:25px;">
+    <div slot="header">
+      <span class="card-title">策略模板曲线展示</span>
+    </div>
+    <div style="height: 360px" id="tempChart"/>
+  </el-card>
+</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
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#tempChart'))
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        color:['#FFBD00','#3C81FF'],
+        legend: {
+          left: 'center',
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          data: ['01:00','02:00','03:00','05:00','06:00','07:00','08:00','09:00','10:00'],
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        series: [
+        {
+          name:'模板一',
+          data: [80,92,1,34,90,130,320,80,9,91],
+          type: 'line',
+        },{
+            name:'模板二',
+            data: [820,932,901,934,1290,1330,1320,820,932,901],
+            type: 'line',
+          }]
+      })
+    }
+  }
+}
+
+</script>

src/views/ems/dzjk/clpz/xftg/TempTable.vue

@@ -0,0 +1,123 @@
+
+<template>
+  <el-card shadow="always" class="common-card-container">
+    <div slot="header">
+      <span class="card-title">新增模板</span>
+      <div style="float: right; padding: 3px 0">
+        <el-button type="primary" size="mini">新增</el-button>
+        <el-button type="warning" size="mini">编辑</el-button>
+        <el-button type="primary" class="alarm-btn" size="mini">删除</el-button>
+      </div>
+    </div>
+    <div>
+      <el-button-group class="ems-btns-group">
+        <el-button v-for="(item,index) in tempList" :key="index+'tempList'" :class="{'activeBtn' : activeBtn === item.id}" type="small" @click="changeTemp(item.id)">{{item.name}}</el-button>
+      </el-button-group>
+      <el-table
+        :data="tableData"
+        :span-method="tableSpanFilter"
+        border
+        style="width: 100%;">
+        <!--            todo 如果要在span-method中使用column.property 在表格中必须定义prop="xxx"属性-->
+        <el-table-column
+          prop="name"
+          label="模板名称"
+          width="180">
+        </el-table-column>
+        <el-table-column
+          prop="status"
+          label="SOC限制">
+          <template slot-scope="scope">
+            <el-switch
+              :value="scope.row.status === 1"
+              disabled>
+            </el-switch>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="min"
+          label="SOC下限">
+          <template slot-scope="scope">
+            {{scope.row.min}}%
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="max"
+          label="SOC上限">
+          <template slot-scope="scope">
+            {{scope.row.max}}%
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="startTime"
+          label="开始时间">
+        </el-table-column>
+        <el-table-column
+          prop="endTime"
+          label="结束时间">
+        </el-table-column>
+        <el-table-column
+          prop="cfgl"
+          label="充放功率（kW）">
+        </el-table-column>
+        <el-table-column
+          prop="powerStatus"
+          label="充电状态">
+        </el-table-column>
+
+      </el-table>
+    </div>
+
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+
+</style>
+<script>
+export default {
+  data() {
+    return {
+      activeBtn:1,
+      tempList:[
+        {name:'模板1',id:1},
+        {name:'模板2',id:2},
+        {name:'模板3',id:3},
+      ],
+      tableData:[
+        {name:'模板一',status:1,min:10,max:90,startTime:'2023/05/07',endTime:'2030/05/07',cfgl:100,powerStatus:'充电'},
+        {name:'模板一',status:1,min:10,max:90,startTime:'2024/06/07',endTime:'2030/05/07',cfgl:110,powerStatus:'充电'},
+        {name:'模板一',status:1,min:10,max:90,startTime:'2023/07/07',endTime:'2030/05/07',cfgl:120,powerStatus:'充电'},
+        {name:'模板一',status:1,min:10,max:90,startTime:'2023/08/07',endTime:'2030/05/07',cfgl:130,powerStatus:'充电'},
+        {name:'模板一',status:1,min:10,max:90,startTime:'2023/09/07',endTime:'2030/05/07',cfgl:140,powerStatus:'充电'},
+      ],
+      mixinPrototype:['name','status','min','max']
+    }
+  },
+  methods:{
+    changeTemp(id){
+      //切换模板 更新数据
+      if(id !== this.activeBtn){
+        this.activeBtn=id;
+      }
+    },
+    tableSpanFilter({ row, column, rowIndex, columnIndex }){
+      if(!this.mixinPrototype.includes(column.property)) return { rowspan: 1,colspan: 1 }
+      if(rowIndex===0){
+        return {
+          rowspan: this.tableData.length,
+          colspan: 1
+        };
+      }else{
+        return {
+          rowspan: 0,
+          colspan: 0
+        }
+      }
+    }
+  },
+  mounted(){
+
+  }
+}
+</script>

src/views/ems/dzjk/clpz/xftg/TimeSetting.vue

@@ -0,0 +1,80 @@
+
+<template>
+  <el-card shadow="always" class="common-card-container" style="margin-top:25px;">
+    <div slot="header">
+      <span class="card-title">策略配置：削峰填谷</span>
+      <div style="float: right; padding: 3px 0">
+        <el-button type="warning" size="mini">编辑</el-button>
+      </div>
+    </div>
+    <el-form :inline="true" class="select-container">
+      <el-form-item label="时间配置">
+        <el-select  v-model="timeType" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+          <el-option :label="item.name" :value="item.id" v-for="(item,index) in timeOptions" :key="index+'timeOptions'"></el-option>
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <div style="padding:0 6px 12px 6px;">
+      <div class="cl-items" v-for="item in 12" :key="item+'lclf'">
+        <div class="cl-header">{{item}}月</div>
+        <div class="cl-content">
+          <div class="cl-name">两放两冲</div>
+        </div>
+      </div>
+    </div>
+
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+.cl-items{
+  width: 144px;
+  height: 90px;
+  line-height: 16px;
+  display: inline-block;
+  margin:12px 6px 0 6px;
+  font-size:14px;
+  color:#333333;
+  border: 1px solid #eeeeee;
+  .cl-header{
+    background:  #FFE5AC;
+    text-align: center;
+    font-size:16px;
+    line-height: 40px;
+    height: 40px;
+    width: 100%;
+  }
+  .cl-content{
+    background-color: #ffffff;
+    position: relative;
+    height: 48px;
+    width: 100%;
+    .cl-name{
+      position: absolute;
+      top:50%;
+      left:50%;
+      transform: translate(-50%,-50%);
+    }
+  }
+}
+</style>
+<script>
+export default {
+  data() {
+    return {
+      loading:false,
+      timeType:1,
+      timeOptions:[
+        {name:'按日',id:1},
+        {name:'按月',id:2},
+        {name:'按年',id:3},
+      ]
+    }
+  },
+  methods:{
+  },
+  mounted(){
+
+  }
+}
+</script>

src/views/ems/dzjk/clpz/xftg/index.vue

@@ -0,0 +1,46 @@
+
+<template>
+  <cl-container :hideSettingBtn="true">
+    <template v-slot:default>
+      <temp-table/>
+      <time-setting/>
+      <temp-power-chart/>
+    </template>
+  </cl-container>
+</template>
+
+
+<script>
+import ClContainer from './../ClContainer.vue'
+import TempTable from "./TempTable.vue";
+import TimeSetting from "./TimeSetting.vue";
+import TempPowerChart from "./TempPowerChart.vue";
+export default {
+  name:'DzjkClpzXftg',
+  components:{ClContainer,TempTable,TimeSetting,TempPowerChart},
+  data() {
+    return {
+
+    }
+  },
+  methods:{
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style scoped lang="scss">
+::v-deep{
+  .common-card-container .el-card__header{
+    padding:5px 20px;
+    height:44px;
+    .card-title{
+      line-height: 34px;
+    }
+  }
+}
+
+
+</style>

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

@@ -24,10 +24,10 @@
 
 <script>
 import { dzjk } from '@/router/ems'
-const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DjzkSbjk').children//获取到单站监控-设备监控下面的字路由
+const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DzjkSbjk').children//获取到单站监控-设备监控下面的字路由
 console.log('设备监控子路由',childrenRoute)
 export default {
-  name:'ZdjkSbjk',
+  name:'DzjkSbjk',
   data(){
     return {
       childrenRoute,

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

@@ -45,7 +45,7 @@
 import RealTimeBaseInfo from "./../RealTimeBaseInfo.vue";
 
 export default {
-  name:'ZdjkSbjkPcs',
+  name:'DzjkSbjkPcs',
   components:{RealTimeBaseInfo},
   data() {
     return {

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

@@ -34,7 +34,7 @@ import DcpjwdChart from './DcpjwdChart.vue'
 import DcpjsocChart from './DcpjsocChart.vue'
 
 export default {
-  name:'ZdjkSbjkSsyx',
+  name:'DzjkSbjkSsyx',
   components:{RealTimeBaseInfo,CnglqxChart,PocpjwdChart,DcpjwdChart,DcpjsocChart},
   data() {
     return {

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

@@ -25,7 +25,7 @@
 
 <script>
 import { dzjk } from '@/router/ems'
-const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DjzkTjbb').children//获取到统计报表下面的字路由
+const childrenRoute = dzjk[0].children[0].children.find(item=> item.name==='DzjkTjbb').children//获取到统计报表下面的字路由
 console.log('设备监控子路由',childrenRoute)
 export default {
   name:'DzjkTjbb',