大屏重构

ui/.env.development

@@ -2,8 +2,8 @@
 ENV = 'development'
 
 # CPMS管理系统/开发环境
-VUE_APP_BASE_API = '/dev-api'
-#VUE_APP_BASE_API = 'http://47.114.101.16:8090'
+#VUE_APP_BASE_API = '/dev-api'
+VUE_APP_BASE_API = 'http://47.114.101.16:8090'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

ui/src/main.js

@@ -41,6 +41,9 @@ import '@/assets/iconfont/iconfont.js'
 // 适配flex
 import { UTable, UTableColumn } from 'umy-ui';
 
+
+
+
 // 全局注册图标
 Vue.component('icon', Icon);
 // 全局方法挂载

ui/src/router/index.js

@@ -556,6 +556,14 @@ export const constantRoutes = [
       }
     ]
   },
+
+
+  // 2023-02 首页重构
+  {
+    path: '/BCCdashboardNew',
+    component: (resolve) => require(['@/views/monitor/elecNew/index'], resolve),
+    hidden: true
+  },
 ]
 
 export default new Router({

ui/src/utils/drawMixin.js

@@ -0,0 +1,74 @@
+// 屏幕适配 mixin 函数
+
+// * 默认缩放值
+const scale = {
+  width: '0.5',
+  height: '0.5',
+}
+
+// * 设计稿尺寸（px）
+const baseWidth = 1920;
+const baseHeight = 1080;
+
+// * 需保持的比例（默认1.77778）
+const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
+
+export default {
+  data() {
+    return {
+      // * 定时函数
+      drawTiming: null
+    }
+  },
+  mounted () {
+
+  },
+  updated(){
+      //进入触发
+      this.calcRate();
+      window.addEventListener('resize', this.resize);
+  },
+  beforeDestroy () {
+    window.removeEventListener('resize', this.resize);
+  },
+  methods: {
+    calcRate () {
+      //拿到整个页面元素
+      const appRef = this.$refs["appRef"];
+      console.log("appRef",appRef);
+      //如果没有值就结束
+      if (!appRef) return;
+      // 当前宽高比
+      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));
+      console.log("window.innerWidth:",window.innerWidth,window.innerHeight);
+      console.log("baseProportion:",baseProportion);
+      //判断：如果有值代表页面变化了
+      if (appRef) {
+        //判断当前宽高比例是否大于默认比例
+        if (currentRate > baseProportion) {
+          // 如果大于代表更宽了，就是放大了
+          //那么把默认缩放的宽高改为：同比例放大
+          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5) * 0.95;
+          scale.height = (window.innerHeight / baseHeight).toFixed(5) * 0.95;
+          console.log(scale.width,scale.height,'放大');
+          //整个页面的元素样式，缩放宽高用当前同比例放大的宽高
+          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -40%)`;
+        } else {
+          // 如果不大于默认比例代表缩小了。
+          //那么把默认缩放的宽高改为：同比例缩小
+          scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5) * 0.95 ;
+          scale.width = (window.innerWidth / baseWidth).toFixed(5) * 0.95 ;
+          console.log(scale.width,scale.height,'缩小');
+          //整个页面的元素样式，缩放宽高用当前同比例放大的宽高
+          appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -40%)`;
+        }
+      }
+    },
+    resize () {
+      clearTimeout(this.drawTiming);
+      this.drawTiming = setTimeout(() => {
+        this.calcRate();
+      }, 2000000000000);
+    }
+  },
+}

ui/src/views/front/acrylicTank.vue

@@ -12,7 +12,7 @@
           </div>
         </div>
       </div>
-      <div style="text-align: center;padding-bottom: 2px;display: flex;justify-content: space-between;margin-top: 10px;">
+      <div style="text-align: center;padding-bottom: 2px;display: flex;justify-content: space-between;margin-top: 10px;align-items: center;height: 80%;">
         <div style="position: relative;">
           <img src="@/assets/image/Spherical1.png" style="height: 100px;width: 80px; margin-top: 0.7rem" v-if="0<=(dashboarddata.acrOne) && (dashboarddata.acrOne)<20">
           <img src="@/assets/image/Spherical2.png" style="height: 100px;width: 80px; margin-top: 0.7rem" v-if="20<=(dashboarddata.acrOne) && (dashboarddata.acrOne)<40">
@@ -82,11 +82,11 @@ export default {
 <style lang="scss">
   #app-container-acrylic {
     padding: 0.2rem 0.2rem 0;
-    height: 2.9rem;
+    height: 100%;
     min-width: 3.75rem;
     border-radius: 0.0625rem;
     .bg-color-black {
-      height: 2.7rem;
+      height: 100%;
       border-radius: 0.125rem;
     }
     .text {

ui/src/views/front/bottomEnergy.vue

@@ -34,7 +34,7 @@ export default {
     },
     height: {
       type: String,
-      default: '2.2rem'
+      default: '200px'
     }
   },
   data() {

ui/src/views/front/bottomLeft.vue

@@ -33,7 +33,7 @@ export default {
     },
     height: {
       type: String,
-      default: '2.2rem'
+      default: '200px'
     }
   },
   data() {

ui/src/views/front/bottomRight.vue

@@ -13,7 +13,7 @@
         </div>
       </div>
       <div>
-        <dv-scroll-board :config="config" style="height:2.2rem"/>
+        <dv-scroll-board :config="config" style="height:200px"/>
       </div>
     </div>
   </div>

ui/src/views/front/ethyleneTank.vue

@@ -12,7 +12,7 @@
           </div>
         </div>
       </div>
-      <div style="text-align: center; display: flex;justify-content: space-between;margin-top: 10px;">
+      <div style="text-align: center; display: flex;justify-content: space-between;margin-top: 10px;align-items: center;height: 80%;">
         <div style="position: relative;">
             <img src="@/assets/image/cylindrical1.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="0<=(dashboarddata.ehtOne) && (dashboarddata.ehtOne)<20">
             <img src="@/assets/image/cylindrical2.png" style="width:40px;height: 170px;margin-left: 0.1rem;" v-if="20<=(dashboarddata.ehtOne) && (dashboarddata.ehtOne)<40">
@@ -80,12 +80,14 @@ export default {
 <style lang="scss">
   #app-container-ethylene {
     padding: 0.2rem 0.2rem 0;
-    height: 2.9rem;
+    height: 100%;
     min-width: 3.75rem;
     border-radius: 0.0625rem;
     .bg-color-black {
-      height: 2.7rem;
+      height: 100%;
       border-radius: 0.125rem;
+      width: 90%;
+      margin: auto;
     }
     .text {
       color: #c3cbde;

ui/src/views/front/napTank.vue

@@ -12,7 +12,7 @@
           </div>
         </div>
       </div>
-      <div style="text-align: center; display: flex;justify-content: space-between;margin-top: 10px;">
+      <div style="text-align: center; display: flex;justify-content: space-between; width: 96%;margin: auto; height: 100%;align-items: center;">
         <div style="position: relative;">
           <span class="span-num1">T1621</span>
           <img src="@/assets/image/warehouse1.png" style="height: 100px;width:120px;margin-top: 0.3rem" v-if="0<=(dashboarddata.napOne) && (dashboarddata.napOne)<20">
@@ -55,11 +55,11 @@ export default {
 <style lang="scss">
   #app-container-nap {
     padding: 0.2rem 0.2rem 0;
-    height: 220px;
+    height: 100%;
     border-radius: 0.0625rem;
     .bg-color-black {
       border-radius: 0.125rem;
-      height: 220px;
+      height: 100%
     }
     .text {
       color: #c3cbde;

ui/src/views/front/productTank.vue

@@ -12,40 +12,42 @@
           </div>
         </div>
       </div>
-      <div style="float: left; margin-left: 0.1rem;position: relative">
-        <img src="@/assets/image/warehouse1.png" style="height: 124px;margin-top: 0.3rem" v-if="0<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<20">
-        <img src="@/assets/image/warehouse2.png" style="height: 124px;margin-top: 0.3rem" v-if="20<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<40">
-        <img src="@/assets/image/warehouse3.png" style="height: 124px;margin-top: 0.3rem" v-if="40<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<60">
-        <img src="@/assets/image/warehouse1.png" style="height: 124px;margin-top: 0.3rem" v-if="60<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<80">
-        <img src="@/assets/image/warehouse1.png" style="height: 124px;margin-top: 0.3rem" v-if="80<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<100">
-        <div class="ModelFont" style="margin-left: 55px;margin-top: 7px">{{ dashboarddata.proTwo }}%</div>
-        <span class="modelTop pos1">STT1520</span>
-      </div>
-      <div style="float: left; margin-left: 0.1rem;position: relative">
-        <div style="text-align: center">
-          <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="0<=(dashboarddata.proOne) && (dashboarddata.proOne)<20">
-          <img src="@/assets/image/warehouse2.png" style="height:80px" v-if="20<=(dashboarddata.proOne) && (dashboarddata.proOne)<40">
-          <img src="@/assets/image/warehouse3.png" style="height:80px" v-if="40<=(dashboarddata.proOne) && (dashboarddata.proOne)<60">
-          <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="60<=(dashboarddata.proOne) && (dashboarddata.proOne)<80">
-          <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="80<=(dashboarddata.proOne) && (dashboarddata.proOne)<100">
-          <div class="ModelFont ModelFont2" style="top: 80px;left: 80px;">{{ dashboarddata.proOne }}%</div>
-          <span class="modelTop pos2">STT1510</span>
+      <div style="display:flex;align-items: center;justify-content: space-around;width: 100%;height: 90%;">
+        <div style="float: left; margin-left: 0.1rem;position: relative">
+          <img src="@/assets/image/warehouse1.png" style="height: 124px;margin-top: 0.3rem" v-if="0<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<20">
+          <img src="@/assets/image/warehouse2.png" style="height: 124px;margin-top: 0.3rem" v-if="20<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<40">
+          <img src="@/assets/image/warehouse3.png" style="height: 124px;margin-top: 0.3rem" v-if="40<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<60">
+          <img src="@/assets/image/warehouse1.png" style="height: 124px;margin-top: 0.3rem" v-if="60<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<80">
+          <img src="@/assets/image/warehouse1.png" style="height: 124px;margin-top: 0.3rem" v-if="80<=(dashboarddata.proTwo) && (dashboarddata.proTwo)<100">
+          <div class="ModelFont" style="margin-left: 55px;margin-top: 7px">{{ dashboarddata.proTwo }}%</div>
+          <span class="modelTop pos1">STT1520</span>
         </div>
-        <div style="text-align: center;; margin-top: 0.2rem">
-          <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="0<=(dashboarddata.proThree) && (dashboarddata.proThree)<20">
-          <img src="@/assets/image/warehouse2.png" style="height:80px" v-if="20<=(dashboarddata.proThree) && (dashboarddata.proThree)<40">
-          <img src="@/assets/image/warehouse3.png" style="height:80px" v-if="40<=(dashboarddata.proThree) && (dashboarddata.proThree)<60">
-          <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="60<=(dashboarddata.proThree) && (dashboarddata.proThree)<80">
-          <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="80<=(dashboarddata.proThree) && (dashboarddata.proThree)<100">
-          <div class="ModelFont ModelFont2"  style="top: 185px;left: 25px;">{{ dashboarddata.proThree }}%</div>
-          <span class="modelTop pos3">STT1360</span>
-          <img src="@/assets/image/warehouse1.png" style="height:80px; margin-left: 0.2rem" v-if="0<=(dashboarddata.proFour) && (dashboarddata.proFour)<20">
-          <img src="@/assets/image/warehouse2.png" style="height:80px; margin-left: 0.2rem" v-if="20<=(dashboarddata.proFour) && (dashboarddata.proFour)<40">
-          <img src="@/assets/image/warehouse3.png" style="height:80px; margin-left: 0.2rem" v-if="40<=(dashboarddata.proFour) && (dashboarddata.proFour)<60">
-          <img src="@/assets/image/warehouse1.png" style="height:80px; margin-left: 0.2rem" v-if="60<=(dashboarddata.proFour) && (dashboarddata.proFour)<80">
-          <img src="@/assets/image/warehouse1.png" style="height:80px; margin-left: 0.2rem" v-if="80<=(dashboarddata.proFour) && (dashboarddata.proFour)<100">
-          <div class="ModelFont ModelFont2"  style="top: 185px;left: 140px;">{{ dashboarddata.proFour }}%</div>
-          <span class="modelTop pos4">STT1410</span>
+        <div style="float: left; margin-left: 0.1rem;position: relative">
+          <div style="text-align: center">
+            <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="0<=(dashboarddata.proOne) && (dashboarddata.proOne)<20">
+            <img src="@/assets/image/warehouse2.png" style="height:80px" v-if="20<=(dashboarddata.proOne) && (dashboarddata.proOne)<40">
+            <img src="@/assets/image/warehouse3.png" style="height:80px" v-if="40<=(dashboarddata.proOne) && (dashboarddata.proOne)<60">
+            <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="60<=(dashboarddata.proOne) && (dashboarddata.proOne)<80">
+            <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="80<=(dashboarddata.proOne) && (dashboarddata.proOne)<100">
+            <div class="ModelFont ModelFont2" style="top: 80px;left: 80px;">{{ dashboarddata.proOne }}%</div>
+            <span class="modelTop pos2">STT1510</span>
+          </div>
+          <div style="text-align: center;; margin-top: 0.2rem">
+            <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="0<=(dashboarddata.proThree) && (dashboarddata.proThree)<20">
+            <img src="@/assets/image/warehouse2.png" style="height:80px" v-if="20<=(dashboarddata.proThree) && (dashboarddata.proThree)<40">
+            <img src="@/assets/image/warehouse3.png" style="height:80px" v-if="40<=(dashboarddata.proThree) && (dashboarddata.proThree)<60">
+            <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="60<=(dashboarddata.proThree) && (dashboarddata.proThree)<80">
+            <img src="@/assets/image/warehouse1.png" style="height:80px" v-if="80<=(dashboarddata.proThree) && (dashboarddata.proThree)<100">
+            <div class="ModelFont ModelFont2"  style="top: 185px;left: 25px;">{{ dashboarddata.proThree }}%</div>
+            <span class="modelTop pos3">STT1360</span>
+            <img src="@/assets/image/warehouse1.png" style="height:80px; margin-left: 0.2rem" v-if="0<=(dashboarddata.proFour) && (dashboarddata.proFour)<20">
+            <img src="@/assets/image/warehouse2.png" style="height:80px; margin-left: 0.2rem" v-if="20<=(dashboarddata.proFour) && (dashboarddata.proFour)<40">
+            <img src="@/assets/image/warehouse3.png" style="height:80px; margin-left: 0.2rem" v-if="40<=(dashboarddata.proFour) && (dashboarddata.proFour)<60">
+            <img src="@/assets/image/warehouse1.png" style="height:80px; margin-left: 0.2rem" v-if="60<=(dashboarddata.proFour) && (dashboarddata.proFour)<80">
+            <img src="@/assets/image/warehouse1.png" style="height:80px; margin-left: 0.2rem" v-if="80<=(dashboarddata.proFour) && (dashboarddata.proFour)<100">
+            <div class="ModelFont ModelFont2"  style="top: 185px;left: 140px;">{{ dashboarddata.proFour }}%</div>
+            <span class="modelTop pos4">STT1410</span>
+          </div>
         </div>
       </div>
     </div>
@@ -63,11 +65,11 @@ export default {
 <style lang="scss">
   #app-container-product {
     padding: 0.2rem 0.2rem 0;
-    height: 2.9rem;
+    height: 100%;
     min-width: 3.75rem;
     border-radius: 0.0625rem;
     .bg-color-black {
-      height: 2.7rem;
+      height: 100%;
       border-radius: 0.125rem;
     }
     .text {

ui/src/views/index.vue

@@ -8,7 +8,11 @@
 
 <script>
   // import homepage from "./homepage";
-  import homepage from "./monitor/elec/index";
+  // 原始首页
+  // import homepage from "./monitor/elec/index";
+  // 重构后首页
+  import homepage from "./monitor/elecNew/index";
+
   import byxhome from "./byxhome";
   import semshome from "./sems/specanalysis/index";
   import invoice from "./invoice/bookingworkticket/index";

ui/src/views/monitor/elec/index.vue

@@ -409,7 +409,7 @@
 
 <style lang="scss" scoped>
   #front{
-    overflow: scroll;
+    overflow: scroll !important;
   }
 </style>
 

ui/src/views/monitor/elecNew/analysisBottomLeft1.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <analysisChartBottomLeft1  v-bind="$attrs"></analysisChartBottomLeft1>
+  </div>
+</template>
+
+<script>
+import analysisChartBottomLeft1 from './echart/analysisChart/analysisChartBottomLeft1';
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    analysisChartBottomLeft1
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elecNew/analysisBottomLeft2.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <analysisChartBottomLeft2  v-bind="$attrs"></analysisChartBottomLeft2>
+  </div>
+</template>
+
+<script>
+import analysisChartBottomLeft2 from './echart/analysisChart/analysisChartBottomLeft2';
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    analysisChartBottomLeft2
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elecNew/analysisBottomLeft3.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <analysisChartBottomLeft3 v-bind="$attrs"></analysisChartBottomLeft3>
+  </div>
+</template>
+
+<script>
+import analysisChartBottomLeft3 from './echart/analysisChart/analysisChartBottomLeft3';
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    analysisChartBottomLeft3
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elecNew/analysisBottomLeft4.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <analysisChartBottomLeft4 v-bind="$attrs"></analysisChartBottomLeft4>
+  </div>
+</template>
+
+<script>
+import analysisChartBottomLeft4 from './echart/analysisChart/analysisChartBottomLeft4';
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    analysisChartBottomLeft4
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elecNew/analysisTopCenter.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <analysisChartTopCenter v-bind="$attrs"></analysisChartTopCenter>
+  </div>
+</template>
+
+<script>
+import analysisChartTopCenter from './echart/analysisChart/analysisChartTopCenter';
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    analysisChartTopCenter
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elecNew/analysisTopLeft.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <analysisChartTopLeft v-bind="$attrs"></analysisChartTopLeft>
+  </div>
+</template>
+
+<script>
+import analysisChartTopLeft from './echart/analysisChart/analysisChartTopLeft';
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    analysisChartTopLeft
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elecNew/analysisTopRight.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <analysisChartTopRight v-bind="$attrs"></analysisChartTopRight>
+  </div>
+</template>
+
+<script>
+import analysisChartTopRight from './echart/analysisChart/analysisChartTopRight';
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    analysisChartTopRight
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elecNew/bottomLeft.vue

@@ -0,0 +1,57 @@
+<template>
+  <div id="bottomLeft">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span style="color:#5cd9e8">
+          <icon name="chart-bar"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">蒸汽消耗</span>
+        </div>
+      </div>
+      <div>
+        <span style="padding-left:15px;color:#74777F;fontWeight:bold;">Unit:(t/h)</span>
+        <bottomLeftChart :monthData="monthData" v-bind="$attrs"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import bottomLeftChart from "./echart/bottom/bottomLeftChart";
+export default {
+  props:['monthData'],
+  data() {
+    return {};
+  },
+  components: {
+    bottomLeftChart
+  },
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss">
+#bottomLeft {
+  padding: 0.3rem 0.2rem;
+  height: 6.5rem;
+  min-width: 3.75rem;
+  border-radius: 0.0625rem;
+  .bg-color-black {
+    height: 6.0625rem;
+    border-radius: 0.125rem;
+  }
+  .text {
+    color: #ffffff;
+  }
+  .chart-box {
+    margin-top: 0.2rem;
+    width: 2.125rem;
+    height: 2.125rem;
+    .active-ring-name {
+      padding-top: 0.125rem;
+    }
+  }
+}
+</style>

ui/src/views/monitor/elecNew/bottomRight.vue

@@ -0,0 +1,123 @@
+<template>
+  <div id="bottomRight">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span style="color:#5cd9e8">
+          <icon name="chart-area"></icon>
+        </span>
+
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">天然气平衡</span>
+          <div class="decoration2">
+            <dv-decoration-2 :reverse="true" style="width:5px;height:300px;" />
+          </div>
+        </div>
+      </div>
+      <div style="display:flex;flex-direction:row">
+        <div style="flex: 3.1" >
+          <bottomRightChart :weekData="weekData" v-bind="$attrs"/>
+        </div>
+      <div class="naturalGasData" style="flex: 0.9;">
+        <span style="fontSize:14px;position:relative;top:-15px;">NG消耗</span>
+        <div style="padding-top:10px;">
+          <div style="display:flex;flex-direction:row; margin-bottom: 10px;height:30px;">
+            <p class="ml-3 colorBlue fw-b bottom-right-text" style="padding-right:17px;margin:0px;">电厂</p>
+            <div class="fontElec1">{{this.dashboardelecdata.gasElec}}</div>
+          </div>
+        </div>
+        <div style="display:flex;flex-direction:row; margin-bottom: 10px;height:30px;">
+          <p class="ml-3 colorBlue fw-b bottom-right-text" style="margin:0px;">合成气</p>
+          <div>
+            <div class="fontElec1">{{this.dashboardelecdata.gasSynGas}}</div>
+          </div>
+        </div>
+        <div style="display:flex;flex-direction:row; margin-bottom: 10px;height:30px;">
+          <p class="ml-3 colorBlue fw-b bottom-right-text" style="padding-right:36px;margin:0px;">U2</p>
+          <div>
+            <div class="fontElec1" style="margin-left: 0.34rem;">{{this.dashboardelecdata.gasU2}}</div>
+          </div>
+        </div>
+        <div style="display:flex;flex-direction:row; margin-bottom: 10px;height:30px;">
+          <p class="ml-3 colorBlue fw-b bottom-right-text" style="margin:0px;">苯乙烯</p>
+          <div style="float: top">
+            <div class="fontElec1">{{this.dashboardelecdata.gasStyrene}}</div>
+          </div>
+        </div>
+        <div style="display:flex;flex-direction:row; margin-bottom: 10px;height:30px;">
+          <p class="ml-3 colorBlue fw-b bottom-right-text" style="margin:0px;">日剩余量</p>
+          <div style="float: top">
+            <div class="fontElec1" style="margin-left: 0.2rem;">{{this.dashboardelecdata.gasLeft}}</div>
+          </div>
+        </div>
+      </div>
+
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import bottomRightChart from "./echart/bottom/bottomRightChart";
+export default {
+  props:['weekData','dashboardelecdata'],
+  data() {
+    return {
+      openChart: false,
+    };
+  },
+  components: {
+    bottomRightChart
+  },
+  mounted() {
+  },
+  methods: {
+
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.bottom-right-text {
+  font-size: 18px;
+}
+#bottomRight {
+  padding: 0rem 0rem 0rem;
+  height: 3.5rem;
+  min-width: 3.75rem;
+  border-radius: 0.0625rem;
+  //top:-50 !important;
+  //left:-40 !important;
+  .bg-color-black {
+    height: 3.1875rem;
+    border-radius: 0.125rem;
+  }
+  .text {
+    color: #ffffff;
+  } //下滑线动态
+  .decoration2 {
+    position: absolute;
+    right: 0.125rem;
+  }
+  .chart-box {
+    margin-top: 0.2rem;
+    width: 4.125rem;
+    height: 2.125rem;
+    .active-ring-name {
+      padding-top: 0.125rem;
+    }
+  }
+  .naturalGasData {
+    justify-content: space-between;
+    float: right;
+    position: relative;
+  }
+  .fontElec1 {
+    width:100px;
+    margin-left: 0.4rem;
+    color: #cfe5ea;
+    font:30px/15px 'ds-digitalbold';
+  }
+}
+
+</style>

ui/src/views/monitor/elecNew/center.vue

@@ -0,0 +1,581 @@
+<template>
+  <div id="center">
+    <div class="up">
+      <!--<div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
+        <p class="ml-3 colorBlue fw-b">{{item.title}}</p>
+        <div>
+          <dv-digital-flop :config="item.number" style="width:1.25rem;height:.625rem;" />
+        </div>
+      </div>-->
+      <!-- 4个主要的数据 -->
+      <div class="bottom-data">
+        <div class="item-box" v-for="(item,index) in numberData" :key="index">
+          <div class="d-flex">
+            <span class="coin"></span>
+            <dv-digital-flop :config="item.number" style="width:2.5rem;height:.525rem;" />
+          </div>
+          <p class="text" style="text-align: center;">
+            {{item.text}}
+            <span class="colorYellow">(MW)</span>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="center">
+      <centerChart class="percentNum" :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
+      <centerChart class="percentNum" :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
+      <centerChart class="percentNum" :id="rate[2].id" :tips="rate[2].tips" :colorObj="rate[2].colorData" />
+      <centerChart class="percentNum" :id="rate[3].id" :tips="rate[3].tips" :colorObj="rate[3].colorData" />
+      <centerChart class="percentNum" :id="rate[4].id" :tips="rate[4].tips" :colorObj="rate[4].colorData" />
+    </div>
+    <div class="down">
+<!--      <div class="ranking bg-color-black">-->
+<!--        <span style="color:#5cd9e8">-->
+<!--          <icon name="align-left"></icon>-->
+<!--        </span>-->
+<!--        <span class="fs-xl text mx-2 mb-1" style="display:block">每日能耗状态</span>-->
+<!--          <div id="naturalGasChart" style="width:100%;height:2.5rem;"></div>-->
+<!--      </div>-->
+
+      <div class="ranking bg-color-black" @click="openChartUsed">
+        <div class="d-flex pt-2 pl-2">
+                <span style="color:#5cd9e8">
+                  <icon name="chart-bar"></icon>
+                </span>
+          <div class="d-flex">
+            <span class="fs-xl text mx-2">每日煤耗状态</span>
+          </div>
+        </div>
+        <div>
+          <div id="naturalGasChart" style="width:100%;height:3rem;"></div>
+        </div>
+        <el-dialog class="my-info-dialog" :visible.sync="openChart" title="" @open="open" width="1600px" destroy-on-close append-to-body>
+          <div id="naturalGasChartDialog" style="width:100%;height:600px;"></div>
+        </el-dialog>
+      </div>
+
+      <div class="percent">
+        <!-- 警铃 -->
+        <!-- <div class="item bg-color-black">
+          <svg-icon icon-class="alarm" class="alarmIcon" />
+        </div> -->
+        <div class="water">
+          <dv-water-level-pond :config="water" style="height: 2rem" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import centerChart from "./echart/center/centerChartRate";
+
+export default {
+  props: ['dashboardelecdata', 'latest24HourData'],
+  data() {
+    return {
+      openChart: false,
+      queryParams:{},
+      numberData: [
+
+        {
+          number: {
+            number: [parseInt(this.dashboardelecdata.gtg1Lv)],
+            toFixed: 1,
+            content: "{nt}"
+          },
+          text: "1#GTG"
+        },
+        {
+          number: {
+            number: [parseInt(this.dashboardelecdata.gtg2Lv)],
+            toFixed: 1,
+            content: "{nt}"
+          },
+          text: "2#GTG"
+        },
+        {
+          number: {
+            number: [parseInt(this.dashboardelecdata.gtg3Lv)],
+            toFixed: 1,
+            content: "{nt}"
+          },
+          text: "3#GTG"
+        },
+        {
+          number: {
+            number: [parseInt(this.dashboardelecdata.stg1Lv)],
+            toFixed: 1,
+            content: "{nt}"
+          },
+          text: "STG"
+        },
+        {
+          number: {
+            number: [parseInt(this.dashboardelecdata.mwhLv)],
+            toFixed: 1,
+            content: "{nt}"
+          },
+          text: "发电量"
+        },
+      ],
+      ranking: {
+        data: [
+          {
+            name: "公应工程",
+            value: 55
+          },
+          {
+            name: "BCC",
+            value: 120
+          },
+          {
+            name: "碳一",
+            value: 78
+          },
+          {
+            name: "EU",
+            value: 66
+          },
+          {
+            name: "电厂",
+            value: 80
+          },
+          {
+            name: "AE",
+            value: 80
+          },
+          {
+            name: "AA",
+            value: 80
+          },
+          {
+            name: "苯乙烯",
+            value: 80
+          }
+        ],
+        waitTime: 4000,
+        carousel: "page",
+        unit: "mw"
+      },
+      water: {
+        data: [this.dashboardelecdata.sub],
+        shape: "roundRect",
+        formatter: "SUB {value}%",
+        waveNum: 3
+      },
+      // 通过率和达标率的组件复用数据
+      rate: [
+        {
+          id: "centerRate0",
+          tips: parseInt(this.dashboardelecdata.mwhWr),
+          colorData: {
+            fontSize: 25,
+            textStyle: "#3f83ff",
+            series: {
+              radius: ["60%", "95%", "85%", "90%"],
+              color: ["#00bcd44a", "transparent"],
+              dataColor: {
+                normal: "#528cff",
+                shadowColor: "#97e2f5"
+              }
+            }
+          }
+        },
+        {
+          id: "centerRate1",
+          tips: parseInt(this.dashboardelecdata.stg1Wr),
+          colorData: {
+            fontSize: 23,
+            textStyle: "#3fc0fb",
+            series: {
+              radius: ["65%", "85%", "85%", "90%"],
+              color: ["#00bcd44a", "transparent"],
+              dataColor: {
+                normal: "#03a9f4",
+                shadowColor: "#97e2f5"
+              }
+            }
+          }
+        },
+        {
+          id: "centerRate2",
+          tips: parseInt(this.dashboardelecdata.gtg3Wr),
+          colorData: {
+            fontSize: 23,
+            textStyle: "#67e0e3",
+            series: {
+              radius: ["65%", "85%", "85%", "90%"],
+              color: ["#faf3a378", "transparent"],
+              dataColor: {
+                normal: "#ff9800",
+                shadowColor: "#fcebad"
+              }
+            }
+          }
+        },
+        {
+          id: "centerRate3",
+          tips: parseInt(this.dashboardelecdata.gtg2Wr),
+          colorData: {
+            fontSize: 23,
+            textStyle: "#67e0e3",
+            series: {
+              radius: ["65%", "85%", "85%", "90%"],
+              color: ["rgba(196,163,250,0.47)", "transparent"],
+              dataColor: {
+                normal: "#9d00ff",
+                shadowColor: "#c9adfc"
+              }
+            }
+          }
+        },
+        {
+          id: "centerRate4",
+          tips: parseInt(this.dashboardelecdata.gtg1Wr),
+          colorData: {
+            fontSize: 23,
+            textStyle: "#67e0e3",
+            series: {
+              radius: ["65%", "85%", "85%", "90%"],
+              color: ["rgba(163,250,177,0.47)", "transparent"],
+              dataColor: {
+                normal: "#00ff0d",
+                shadowColor: "#b2fcad"
+              }
+            }
+          }
+        }
+      ]
+    };
+  },
+  components: {
+    centerChart
+    // centerChart1,
+    // centerChart2
+  },
+  mounted() {
+    this.initChart();
+  },
+  methods: {
+    openChartUsed(){
+      this.openChart = true
+    },
+    open(){
+      this.$nextTick(() => {
+        this.initChartDialog()
+      })
+    },
+    initChart() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('naturalGasChart'))
+      const hourArray = [];
+      const carbonArray = [];
+      let data = this.latest24HourData;
+      for (let i = 0; i < data.length; i++) {
+        if (i % 4 == 0) {
+          hourArray.push(data[i].pullDate.toString().substr(14, 5));
+          carbonArray.push(data[i].carbonRealTime);
+        }
+      }
+      hourArray.reverse();
+      carbonArray.reverse();
+      this.chart.setOption({
+        xAxis: {
+          type: 'category',
+          data: hourArray,
+          axisLabel: {
+            color: '#ffffff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          name:  'Unit:(t)',
+          axisLabel: {
+            color: '#ffffff'
+          },
+          nameTextStyle: {
+            color: '#ffffff'
+          }
+        },
+        series: [
+          {
+            data: carbonArray,
+            type: 'line',
+            smooth: true,
+            symbol: '',
+            symbolSize: 15,
+            lineStyle: {
+              color: '#5470C6',
+              width: 6,
+              type: 'dashed'
+            },
+            itemStyle: {
+              borderWidth: 3,
+              borderColor: '#EE6666',
+              color: 'yellow'
+            }
+          }
+        ]
+        // color: ['#00DDFF', '#37A2FF'],
+        // tooltip: {
+        //   trigger: 'axis',
+        //   type: 'category',
+        // },
+        // /* 标识 */
+        // legend: {
+        //   data: ['实际', '计划'],
+        //   textStyle:{
+        //     color: '#ffffff'//字体颜色
+        //   }
+        // },
+        // /* 周围边距 */
+        // grid: {
+        //   left: '3%',
+        //   right: '3%',
+        //   bottom: '1%',
+        //   top: '13%',
+        //   containLabel: true
+        // },
+        // xAxis: [
+        //   {
+        //     type: 'category',
+        //     boundaryGap: false,
+        //     data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
+        //     axisLabel: {//x轴文字的配置
+        //       show: true,
+        //       textStyle: {
+        //         color: '#ffffff',
+        //       }
+        //     },
+        //   }
+        // ],
+        // yAxis: [
+        //   {
+        //     type: 'value',
+        //     axisLabel: {
+        //       textStyle: {
+        //         fontSize: 10,
+        //         color: '#ffffffff',
+        //         margin: 15
+        //       },
+        //     }
+        //   }
+        // ],
+        // series: [
+        //   {
+        //     name: this.$t('实际'),
+        //     type: 'line',
+        //     symbol: "none",
+        //     data: [20, 32, 1, 34, 90, 30, 20, 20, 32, 1, 34, 90, 40, 10, 20, 82, 11, 34, 20, 30, 10, 20, 82, 11, 34, 20, 40, 10]
+        //   },
+        //   {
+        //     name: this.$t('计划'),
+        //     type: 'line',
+        //     symbol: "none",
+        //     data: [20, 82, 11, 24, 20, 30, 10, 20, 82, 11, 24, 20, 10, 20, 20, 32, 21, 34, 10, 30, 20, 20, 32, 21, 34, 19, 13, 20]
+        //   },
+        // ]
+      })
+    },
+    initChartDialog() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart1 = this.echarts.init(document.getElementById('naturalGasChartDialog'))
+
+      this.chart1.setOption({
+        xAxis: {
+          type: 'category',
+          data: [
+            '00:00-03:00',
+            '03:00-06:00',
+            '06:00-09:00',
+            '09:00-12:00',
+            '12:00-15:00',
+            '15:00-18:00',
+            '18:00-21:00',
+            '21:00-00:00'
+          ]
+        },
+        yAxis: {
+          type: 'value',
+          name:  'Unit:(t)'
+        },
+        series: [
+          {
+            data: [120, 200, 150, 80, 70, 110, 130],
+            type: 'line',
+            smooth: true,
+            symbol: '',
+            symbolSize: 15,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            lineStyle: {
+              color: '#5470C6',
+              width: 6,
+              type: 'dashed'
+            },
+            itemStyle: {
+              borderWidth: 3,
+              borderColor: '#EE6666',
+              color: 'yellow'
+            }
+          }
+        ]
+        // color: ['#00DDFF', '#37A2FF'],
+        // tooltip: {
+        //   trigger: 'axis',
+        //   type: 'category',
+        // },
+        // /* 标识 */
+        // legend: {
+        //   data: ['实际', '计划'],
+        //   textStyle:{
+        //     color: '#ffffff'//字体颜色
+        //   }
+        // },
+        // /* 周围边距 */
+        // grid: {
+        //   left: '3%',
+        //   right: '3%',
+        //   bottom: '1%',
+        //   top: '13%',
+        //   containLabel: true
+        // },
+        // xAxis: [
+        //   {
+        //     type: 'category',
+        //     boundaryGap: false,
+        //     data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
+        //     axisLabel: {//x轴文字的配置
+        //       show: true,
+        //       textStyle: {
+        //         color: '#ffffff',
+        //       }
+        //     },
+        //   }
+        // ],
+        // yAxis: [
+        //   {
+        //     type: 'value',
+        //     axisLabel: {
+        //       textStyle: {
+        //         fontSize: 10,
+        //         color: '#ffffffff',
+        //         margin: 15
+        //       },
+        //     }
+        //   }
+        // ],
+        // series: [
+        //   {
+        //     name: this.$t('实际'),
+        //     type: 'line',
+        //     symbol: "none",
+        //     data: [20, 32, 1, 34, 90, 30, 20, 20, 32, 1, 34, 90, 40, 10, 20, 82, 11, 34, 20, 30, 10, 20, 82, 11, 34, 20, 40, 10]
+        //   },
+        //   {
+        //     name: this.$t('计划'),
+        //     type: 'line',
+        //     symbol: "none",
+        //     data: [20, 82, 11, 24, 20, 30, 10, 20, 82, 11, 24, 20, 10, 20, 20, 32, 21, 34, 10, 30, 20, 20, 32, 21, 34, 19, 13, 20]
+        //   },
+        // ]
+      })
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+#center {
+  display: flex;
+  flex-direction: column;
+  .up {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    .item {
+      border-radius: 0.0625rem;
+      padding-top: 0.2rem;
+      margin-top: 0.1rem;
+      width: 32%;
+      height: 0.875rem;
+    }
+  }
+  .bottom-data {
+    .item-box {
+      float: right;
+      position: relative;
+      width: 20%;
+      color: #d3d6dd;
+      // 金币
+      .coin {
+        position: absolute;
+        left: 0.1rem;
+        top: 0.2125rem;
+        font-size: 0.25rem;
+        color: #ffc107;
+      }
+      .colorYellow {
+        color: yellowgreen;
+      }
+    }
+  }
+  .center {
+    padding: 0.07rem 0.05rem;
+    padding-bottom: 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    float: right;
+    position: relative;
+    .percentNum {
+      width: 19%;
+    }
+  }
+  .down {
+    padding: 0.07rem 0.05rem;
+    padding-bottom: 0;
+    width: 100%;
+    display: flex;
+    height: 3.1875rem;
+    justify-content: space-between;
+    .bg-color-black {
+      border-radius: 0.0625rem;
+    }
+    .ranking {
+      padding: 0.125rem;
+      width: 59%;
+    }
+    .percent {
+      width: 40%;
+      display: flex;
+      flex-wrap: wrap;
+      .bg-color-black {
+        border-radius: 0.0625rem;
+        position: relative;
+        .alarmIcon {
+          width: 40px !important;
+          //height: 40px !important;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
+      .item {
+        width: 100%;
+        height: 1rem;
+      }
+      .water {
+        padding-top:60px;
+        width: 100%;
+        height: 2rem;
+      }
+    }
+  }
+}
+</style>

ui/src/views/monitor/elecNew/centerLeft1.vue

@@ -0,0 +1,774 @@
+<template>
+  <div id="centreLeft1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span style="color:#5cd9e8">
+          <icon name="chart-bar"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">发电机趋势</span>
+          <dv-decoration-3 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
+        </div>
+      </div>
+      <div class="d-flex chartStyle" @click="openchart1">
+        <!--渐变折线图-->
+        <span style="padding-left:10px;">Unit:(MW)</span>
+        <div id="oneGTGyChart" style="width:100%;height:2rem;"></div>
+      </div>
+      <div class="d-flex chartStyle" @click="openchart2">
+        <!--渐变折线图-->
+        <span style="padding-left:10px;">Unit:(MW)</span>
+        <div id="twoGTGyChart" style="width:100%;height:2rem;"></div>
+      </div>
+      <div class="d-flex chartStyle" @click="openchart3">
+        <span style="padding-left:10px;">Unit:(MW)</span>
+        <!--渐变折线图-->
+        <div id="threeGTGyChart" style="width:100%;height:2rem;"></div>
+      </div>
+      <div class="d-flex chartStyle" @click="openchart4">
+        <!--渐变折线图-->
+        <span style="padding-left:10px;">Unit:(MW)</span>
+        <div id="fourGTGyChart" style="width:100%;height:2rem;"></div>
+      </div>
+    </div>
+      <el-dialog class="my-info-dialog" :visible.sync="openChartOne" title="3#GTG" @open="open1" width="1600px" destroy-on-close append-to-body>
+        <div id="oneGTGyChart1" style="width:100%;height:600px;"></div>
+      </el-dialog>
+    <el-dialog class="my-info-dialog" :visible.sync="openChartTwo" title="STG" @open="open2" width="1600px" destroy-on-close append-to-body>
+      <div id="twoGTGyChart1" style="width:100%;height:600px;"></div>
+    </el-dialog>
+    <el-dialog class="my-info-dialog" :visible.sync="openChartThree" title="1#GTG" @open="open3" width="1600px" destroy-on-close append-to-body>
+      <div id="threeGTGyChart1" style="width:100%;height:600px;"></div>
+    </el-dialog>
+    <el-dialog class="my-info-dialog" :visible.sync="openChartFour" title="2#GTG" @open="open4" width="1600px" destroy-on-close append-to-body>
+      <div id="fourGTGyChart1" style="width:100%;height:600px;"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import centreLeft1Chart from "./echart/centerLeft2/centreLeft1Chart";
+export default {
+  props: {
+    monthData: {},
+    latest30DayData: {},
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '2.2rem'
+    }
+  },
+  data() {
+    return {
+      openChartOne: false,
+      openChartTwo: false,
+      openChartThree: false,
+      openChartFour: false,
+      config: {
+        lineWidth: 30,
+        activeRadius: "80%",
+        radius: "75%",
+        activeTimeGap: 2000,
+        data: [
+          {
+            name: "周口",
+            value: 55
+          },
+          {
+            name: "南阳",
+            value: 120
+          },
+          {
+            name: "西峡",
+            value: 78
+          },
+          {
+            name: "驻马店",
+            value: 66
+          },
+          {
+            name: "新乡",
+            value: 80
+          }
+        ]
+      },
+      numberData: [
+        {
+          number: {
+            number: [15],
+            toFixed: 1,
+            content: "{nt}"
+          },
+          text: "发电能力"
+        },
+        {
+          number: {
+            number: [1144],
+            toFixed: 1,
+            content: "{nt}"
+          },
+          text: "发电能力"
+        },
+        {
+          number: {
+            number: [361],
+            toFixed: 1,
+            content: "{nt}"
+          },
+          text: "发电能力"
+        },
+        {
+          number: {
+            number: [157],
+            toFixed: 1,
+            content: "{nt}"
+          },
+          text: "发电能力"
+        }
+      ]
+    };
+  },
+  components: {
+    centreLeft1Chart
+  },
+  mounted() {
+    this.changeTiming();
+    this.initOneChart();
+    this.initTwoChart();
+    this.initThreeChart();
+    this.initFourChart();
+  },
+  methods: {
+    open1(){
+      this.$nextTick(() => {
+        this.initOneChartDialog()
+      })
+    },
+    open2(){
+      this.$nextTick(() => {
+        this.initTwoChartDialog()
+      })
+    },
+    open3(){
+      this.$nextTick(() => {
+        this.initThreeChartDialog()
+      })
+    },
+    open4(){
+      this.$nextTick(() => {
+        this.initFourChartDialog()
+      })
+    },
+    openchart1(){
+      this.openChartOne = true
+    },
+    openchart2(){
+      this.openChartTwo = true
+    },
+    openchart3(){
+      this.openChartThree = true
+    },
+    openchart4(){
+      this.openChartFour = true
+    },
+    changeTiming() {
+      setInterval(() => {
+        this.changeNumber();
+      }, 3000);
+    },
+    changeNumber() {
+      this.numberData.forEach((item, index) => {
+        item.number.number[0] += ++index;
+        item.number = { ...item.number };
+      });
+    },
+    initOneChart() {
+      console.log(this.latest30DayData);
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('oneGTGyChart'))
+      const dateDay = [];
+      const dateNum = [];
+      for (let i = 0; i < this.latest30DayData.length; i++) {
+        dateDay[i] = this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        dateNum[i] = this.latest30DayData[i].gtg3PowerGenLevel;
+      }
+      dateDay.reverse();
+      dateNum.reverse();
+      this.chart.setOption({
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '13%',
+          containLabel: true
+        },
+        title: {
+          text: '3#GTG',
+          textAlign: 'center',
+          x: 'center',
+          y: '1px',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 12,
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data:dateDay,
+          axisLabel: {
+            color: '#ffffff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            color: '#ffffff'
+          }
+        },
+        series: [
+          {
+            // data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 23, 147, 123],
+            data:dateNum,
+            type: 'line',
+            itemStyle: {
+              color: 'rgb(255,128,0)'
+            },
+            symbol: "none",
+            areaStyle: {
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(253,222,2)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(255,128,0)'
+                }
+              ])
+            },
+          }
+        ]
+      })
+    },
+    initOneChartDialog() {
+      console.log("====")
+      // 基于准备好的dom，初始化echarts实例
+      this.chart1 = this.echarts.init(document.getElementById('oneGTGyChart1'))
+      const dateDay = [];
+      const dateNum = [];
+      for (let i = 0; i < this.latest30DayData.length; i++) {
+        dateDay[i] = this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        dateNum[i] = this.latest30DayData[i].gtg3PowerGenLevel;
+      }
+      dateDay.reverse();
+      dateNum.reverse();
+      this.chart1.setOption({
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '13%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          // data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
+          data:dateDay
+        },
+        yAxis: {
+          type: 'value',
+          name: 'Unit:(MW)'
+        },
+        series: [
+          {
+            // data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 23, 147, 123],
+            data:dateNum,
+            type: 'line',
+            itemStyle: {
+              color: 'rgb(255,128,0)'
+            },
+            symbol: "none",
+            areaStyle: {
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(253,222,2)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(255,128,0)'
+                }
+              ])
+            },
+          }
+        ]
+      })
+    },
+    initTwoChart() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('twoGTGyChart'))
+      const dateDay = [];
+      const dateNum = [];
+      for (let i = 0; i < this.latest30DayData.length; i++) {
+        dateDay[i] = this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        dateNum[i] = this.latest30DayData[i].stgPowerGenLevel;
+      }
+      dateDay.reverse();
+      dateNum.reverse();
+      this.chart.setOption({
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '13%',
+          containLabel: true
+        },
+        title: {
+          text: 'STG',
+          textAlign: 'center',
+          x: 'center',
+          y: '1px',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 12,
+          }
+        },
+        xAxis: {
+          type: 'category',
+          // data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
+          data:dateDay,
+          axisLabel: {
+            color: '#ffffff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            color: '#ffffff'
+          }
+        },
+        series: [
+          {
+            // data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 23, 147, 123],
+            data:dateNum,
+            type: 'line',
+            itemStyle: {
+              color: 'rgb(0,0,255)'
+            },
+            symbol: "none",
+            areaStyle: {
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(0,255,255)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(0,0,255)'
+                }
+              ])
+            },
+          }
+        ]
+      })
+    },
+    initTwoChartDialog() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart2 = this.echarts.init(document.getElementById('twoGTGyChart1'))
+      const dateDay = [];
+      const dateNum = [];
+      for (let i = 0; i < this.latest30DayData.length; i++) {
+        dateDay[i] = this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        dateNum[i] = this.latest30DayData[i].stgPowerGenLevel;
+      }
+      dateDay.reverse();
+      dateNum.reverse();
+      this.chart2.setOption({
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '13%',
+          containLabel: true
+        },
+        title: {
+          text: '1#发电机',
+          textAlign: 'center',
+          x: 'center',
+          y: '1px',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 12,
+          }
+        },
+        xAxis: {
+          type: 'category',
+          // data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
+          data:dateDay
+        },
+        yAxis: {
+          type: 'value',
+          name: 'Unit:(MW)'
+        },
+        series: [
+          {
+            // data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 23, 147, 123],
+            data:dateNum,
+            type: 'line',
+            itemStyle: {
+              color: 'rgb(24,56,255)'
+            },
+            symbol: "none",
+            areaStyle: {
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(8,32,252)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(21,171,231)'
+                }
+              ])
+            },
+          }
+        ]
+      })
+    },
+    initThreeChart() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('threeGTGyChart'))
+      const dateDay = [];
+      const dateNum = [];
+      for (let i = 0; i < this.latest30DayData.length; i++) {
+        dateDay[i] = this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        dateNum[i] = this.latest30DayData[i].gtg1PowerGenLevel;
+      }
+      dateDay.reverse();
+      dateNum.reverse();
+      this.chart.setOption({
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '13%',
+          containLabel: true
+        },
+        title: {
+          text: '1#GTG',
+          textAlign: 'center',
+          x: 'center',
+          y: '1px',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 12,
+          }
+        },
+        xAxis: {
+          type: 'category',
+          // data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
+          data:dateDay,
+          axisLabel: {
+            color: '#ffffff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            color: '#ffffff'
+          }
+        },
+        series: [
+          {
+            // data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 23, 147, 123],
+            data:dateNum,
+            type: 'line',
+            itemStyle: {
+              color: 'rgb(0,128,0)'
+            },
+            symbol: "none",
+            areaStyle: {
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(128,255,0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(0,128,0)'
+                }
+              ])
+            },
+          }
+        ]
+      })
+    },
+    initThreeChartDialog() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart3 = this.echarts.init(document.getElementById('threeGTGyChart1'))
+      const dateDay = [];
+      const dateNum = [];
+      for (let i = 0; i < this.latest30DayData.length; i++) {
+        dateDay[i] = this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        dateNum[i] = this.latest30DayData[i].gtg1PowerGenLevel;
+      }
+      dateDay.reverse();
+      dateNum.reverse();
+      this.chart3.setOption({
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '13%',
+          containLabel: true
+        },
+        title: {
+          text: '4#发电机',
+          textAlign: 'center',
+          x: 'center',
+          y: '1px',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 12,
+          }
+        },
+        xAxis: {
+          type: 'category',
+          // data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
+          data:dateDay
+        },
+        yAxis: {
+          type: 'value',
+          name: 'Unit:(MW)'
+        },
+        series: [
+          {
+            // data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 23, 147, 123],
+            data:dateNum,
+            type: 'line',
+            itemStyle: {
+              color: 'rgb(0,128,0)'
+            },
+            symbol: "none",
+            areaStyle: {
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(128,255,0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(0,128,0)'
+                }
+              ])
+            },
+          }
+        ]
+      })
+    },
+    initFourChart() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('fourGTGyChart'))
+      const dateDay = [];
+      const dateNum = [];
+      for (let i = 0; i < this.latest30DayData.length; i++) {
+        dateDay[i] = this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        dateNum[i] = this.latest30DayData[i].gtg2PowerGenLevel;
+      }
+      dateDay.reverse();
+      dateNum.reverse();
+      this.chart.setOption({
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '13%',
+          containLabel: true
+        },
+        title: {
+          text: '2#GTG',
+          textAlign: 'center',
+          x: 'center',
+          y: '1px',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 12,
+          }
+        },
+        xAxis: {
+          type: 'category',
+          // data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
+          data:dateDay,
+          axisLabel: {
+            color: '#ffffff'
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: {
+            color: '#ffffff'
+          }
+        },
+        series: [
+          {
+            // data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 23, 147, 123],
+            data:dateNum,
+            type: 'line',
+            itemStyle: {
+              color: 'rgb(128,0,109)'
+            },
+            symbol: "none",
+            areaStyle: {
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(189,225,250)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(128,0,255)'
+                }
+              ])
+            },
+          }
+        ]
+      })
+    },
+    initFourChartDialog() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart4 = this.echarts.init(document.getElementById('fourGTGyChart1'))
+      const dateDay = [];
+      const dateNum = [];
+      for (let i = 0; i < this.latest30DayData.length; i++) {
+        dateDay[i] = this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        dateNum[i] = this.latest30DayData[i].gtg2PowerGenLevel;
+      }
+      dateDay.reverse();
+      dateNum.reverse();
+      this.chart4.setOption({
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '13%',
+          containLabel: true
+        },
+        title: {
+          text: '2#GTG',
+          textAlign: 'center',
+          x: 'center',
+          y: '1px',
+          textStyle: {
+            color: '#ffffff',
+            fontSize: 12,
+          }
+        },
+        xAxis: {
+          type: 'category',
+          // data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
+          data:dateDay
+        },
+        yAxis: {
+          type: 'value',
+          name: 'Unit:(MW)'
+        },
+        series: [
+          {
+            // data: [150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 150, 230, 224, 218, 135, 147, 260, 23, 147, 123],
+            data:dateNum,
+            type: 'line',
+            itemStyle: {
+              color: 'rgb(128,0,109)'
+            },
+            symbol: "none",
+            areaStyle: {
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(189,225,250)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(128,0,255)'
+                }
+              ])
+            },
+          }
+        ]
+      })
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+/*body背景色*/
+  .my-info-dialog {
+    .el-dialog {
+      .el-dialog__body{
+        background: #ffffff;
+      }
+      .el-dialog__header{
+      }
+    }
+  }
+
+#centreLeft1 {
+  padding: 0.2rem;
+  height: 5.125rem;
+  min-width: 3.75rem;
+  border-radius: 0.0625rem;
+  .bg-color-black {
+    height: 4.8125rem;
+    border-radius: 0.125rem;
+    width: 100%;
+    .chartStyle {
+      // float: right;
+      display:inline-block;
+      position: relative;
+      width: 50%;
+    }
+  }
+  .text {
+    color: #ffffff;
+  }
+  .chart-box {
+    margin-top: 0.2rem;
+    width: 2.125rem;
+    height: 2.125rem;
+    .active-ring-name {
+      padding-top: 0.125rem;
+    }
+  }
+  .bottom-data {
+    .item-box {
+      float: right;
+      position: relative;
+      width: 50%;
+      color: #d3d6dd;
+      // 金币
+      .coin {
+        position: absolute;
+        left: 0.1rem;
+        top: 0.2125rem;
+        font-size: 0.25rem;
+        color: #ffc107;
+      }
+      .colorYellow {
+        color: yellowgreen;
+      }
+    }
+  }
+}
+</style>

ui/src/views/monitor/elecNew/centerLeft2.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="centreLeft1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span style="color:#5cd9e8">
+          <icon name="chart-pie"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">装机容量</span>
+          <dv-decoration-1 style="width:1.25rem;height:.25rem; position:relative;top:-.0375rem;" />
+        </div>
+      </div>
+      <div class="d-flex jc-center">
+        <!--<centreLeft2Chart />-->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import centreLeft2Chart from "./echart/centerLeft2/centreLeft2Chart";
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    centreLeft2Chart
+  },
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss">
+#centreLeft1 {
+  padding: 0.2rem;
+  height: 5.125rem;
+  min-width: 3.75rem;
+  border-radius: 0.0625rem;
+  .bg-color-black {
+    height: 4.8125rem;
+    border-radius: 0.125rem;
+  }
+  .text {
+    color: #ffffff;
+  }
+  .chart-box {
+    margin-top: 0.2rem;
+    width: 2.125rem;
+    height: 2.125rem;
+    .active-ring-name {
+      padding-top: 0.125rem;
+    }
+  }
+}
+</style>

ui/src/views/monitor/elecNew/centerRight1.vue

@@ -0,0 +1,363 @@
+<template>
+  <div id="centreRight1">
+    <div class="bg-color-black">
+      <div class="d-flex pt-2 pl-2">
+        <span style="color:#5cd9e8">
+          <icon name="chart-line"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">BYC用电情况</span>
+        </div>
+      </div>
+      <div class="d-flex jc-center body-box" @click="openBYCdialog">
+        <span style="padding-left:10px;">Unit:(MW)</span>
+        <div id="BYCChart" style="width:100%;height:1.6rem;"></div>
+      </div>
+      <div class="d-flex pt-2 pl-2" style="margin-top: 0.3rem">
+        <span style="color:#5cd9e8">
+          <icon name="chart-line"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">BYC购电情况</span>
+        </div>
+      </div>
+      <div class="d-flex jc-center body-box" @click="openBOCdialog">
+        <span style="padding-left:10px;">Unit:(MW)</span>
+        <div id="BOCChart" style="width:100%;height:1.6rem;"></div>
+      </div>
+    </div>
+    <el-dialog class="my-info-dialog" :visible.sync="openChartBYCChart" title="BYC用电情况" @open="openBYC" width="1600px" destroy-on-close append-to-body>
+      <div id="BYCChart1" style="width:100%;height:600px;"></div>
+    </el-dialog>
+    <el-dialog class="my-info-dialog" :visible.sync="openChartBOCChart" title="BYC购电情况" @open="openBOC" width="1600px" destroy-on-close append-to-body>
+      <div id="BOCChart1" style="width:100%;height:600px;"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  props:['fiftydayData','latest30DayData'],
+  data() {
+    return {
+      openChartBYCChart: false,
+      openChartBOCChart: false
+    };
+  },
+  components: {},
+  mounted() {
+    this.initBycChart();
+    this.initBocChart();
+  },
+  methods: {
+    openBYC(){
+      this.$nextTick(() => {
+        this.initBycChartDialog()
+      })
+    },
+    openBOC(){
+      this.$nextTick(() => {
+        this.initBocChartDialog()
+      })
+    },
+    openBYCdialog(){
+      this.openChartBYCChart = true
+    },
+    openBOCdialog(){
+      this.openChartBOCChart = true
+    },
+    initBycChart() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('BYCChart'));
+      const dateNum = [];
+      const dateDay=[];
+      for (let i = 0; i < this.latest30DayData.length; i++) {
+        dateDay[i]=  this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        dateNum[i] = this.latest30DayData[i].elecBycUsed;
+      }
+      dateDay.reverse();
+      dateNum.reverse();
+      this.chart.setOption({
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '7%',
+          containLabel: true
+        },
+        visualMap: [
+          {
+            show: false,
+            type: 'continuous',
+            seriesIndex: 0,
+            min: 0,
+            max: 400
+          },
+        ],
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: [
+          {
+            data: dateDay,
+            axisLabel: {
+              color: '#ffffff'
+            }
+          },
+        ],
+        yAxis: {
+          name: 'Unit:(MW)',
+          axisLabel: {
+            color: '#ffffff'
+          }
+        },
+        series: [
+          {
+            type: 'line',
+            showSymbol: false,
+            data: dateNum,
+            areaStyle: {
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255,255,0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(255,128,0)'
+                }
+              ])
+            }
+          },
+        ]
+      })
+    },
+    initBycChartDialog() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart1 = this.echarts.init(document.getElementById('BYCChart1'));
+
+      const dateNum = [];
+      const dateDay=[];
+      for (let i = 0; i < this.latest30DayData.length; i++) {
+        dateDay[i]=  this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        dateNum[i] = this.latest30DayData[i].elecBycUsed;
+      }
+      dateDay.reverse();
+      dateNum.reverse();
+      this.chart1.setOption({
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '7%',
+          containLabel: true
+        },
+        visualMap: [
+          {
+            show: false,
+            type: 'continuous',
+            seriesIndex: 0,
+            min: 0,
+            max: 400
+          },
+        ],
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: [
+          {
+            data: dateDay
+          },
+        ],
+        yAxis: {
+          name: 'Unit:(MW)'
+        },
+        series: [
+          {
+            label: {
+              show: true,
+              position: 'top'
+            },
+            type: 'line',
+            data: dateNum,
+            areaStyle: {
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255,255,0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(255,128,0)'
+                }
+              ])
+            }
+          },
+        ]
+      })
+    },
+    initBocChart() {
+      // const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
+      // const dateList = data.map(function (item) {
+      //   return item[0];
+      // });
+      // const valueList = data.map(function (item) {
+      //   return item[1];
+      // });
+
+      const dateNum = [];
+      const dateDay=[];
+      for (let i = 0; i < this.latest30DayData.length; i++) {
+        dateDay[i]=  this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        dateNum[i] = this.latest30DayData[i].elecBocUsed;
+      }
+      dateDay.reverse();
+      dateNum.reverse();
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('BOCChart'))
+
+      this.chart.setOption({
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '7%',
+          containLabel: true
+        },
+        visualMap: [
+          {
+            show: false,
+            type: 'continuous',
+            seriesIndex: 0,
+            min: 0,
+            max: 400
+          },
+        ],
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: [
+          {
+            data: dateDay,
+            axisLabel: {
+              color: '#ffffff'
+            }
+          },
+        ],
+        yAxis: {
+          name: 'Unit:(MW)',
+          axisLabel: {
+            color: '#ffffff'
+          }
+        },
+        series: [
+          {
+            type: 'line',
+            showSymbol: false,
+            data: dateNum,
+            areaStyle: {
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255,255,0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(255,128,0)'
+                }
+              ])
+            }
+          },
+        ]
+      })
+    },
+    initBocChartDialog() {
+      const dateNum = [];
+      const dateDay=[];
+      for (let i = 0; i < this.latest30DayData.length; i++) {
+        dateDay[i]=  this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        dateNum[i] = this.latest30DayData[i].elecBocUsed;
+      }
+      dateDay.reverse();
+      dateNum.reverse();
+      // 基于准备好的dom，初始化echarts实例
+      this.chart2 = this.echarts.init(document.getElementById('BOCChart1'))
+      this.chart2.setOption({
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '7%',
+          containLabel: true
+        },
+        visualMap: [
+          {
+            show: false,
+            type: 'continuous',
+            seriesIndex: 0,
+            min: 0,
+            max: 400
+          },
+        ],
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: [
+          {
+            data: dateDay
+          },
+        ],
+        yAxis: {
+          name: 'Unit:(MW)'
+        },
+        series: [
+          {
+            label: {
+              show: true,
+              position: 'top'
+            },
+            type: 'line',
+            data: dateNum,
+            areaStyle: {
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(255,255,0)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(255,128,0)'
+                }
+              ])
+            }
+          },
+        ]
+      })
+    },
+  }
+};
+</script>
+
+<style lang="scss">
+#centreRight1 {
+  padding: 0.2rem;
+  height: 5.125rem;
+  min-width: 3.75rem;
+  border-radius: 0.0625rem;
+  .bg-color-black {
+    height: 4.8125rem;
+    border-radius: 0.125rem;
+  }
+  .text {
+    color: #ffffff;
+  }
+  .body-box {
+    border-radius: 0.125rem;
+    overflow: hidden;
+  }
+}
+</style>

ui/src/views/monitor/elecNew/centerRight2.vue

@@ -0,0 +1,252 @@
+<template>
+  <div id="centreRight2">
+    <div class="bg-color-black">
+
+      <div class="d-flex jc-center body-box center-text" style=" margin-top: 0;height: 60px">
+        <div class="fontElec"><p class="title-p">发电量</p><p class="title-p2">{{this.dashboarddayelec.elecPowerGen}}</p></div>
+      </div>
+      <div class="d-flex jc-center body-box center-text" style=" margin-top: 0;height: 60px">
+        <div class="fontElec"><p class="title-p">倒电量</p> <p class="title-p2">{{this.dashboarddayelec.elecPowerSwitch}}</p></div>
+
+      </div>
+      <div class="d-flex jc-center body-box center-text" style=" margin-top: 0;height: 60px">
+        <div class="fontElec"><p class="title-p">用电量</p><p class="title-p2">{{this.dashboarddayelec.elecUsed}}</p></div>
+
+      </div>
+      <div class="d-flex pt-2 pl-2">
+        <span style="color:#5cd9e8">
+          <icon name="align-left"></icon>
+        </span>
+        <span class="fs-xl text mx-2">峰谷电量</span>
+      </div>
+      <div class="d-flex jc-center body-box" @click="openChartElec" style=" margin-top: 0;">
+        <div id="peakToValley" style="width:100%;height:2.5rem;"></div>
+        <el-dialog class="my-info-dialog" :visible.sync="openChart" title="峰谷电量" @open="open" width="1600px" destroy-on-close append-to-body>
+          <div id="peakToValleyDialog" style="width:100%;height:600px;"></div>
+        </el-dialog>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import centreRight2Chart1 from "@/components/echart/centreRight2/centreRight2Chart1";
+  export default {
+    props:['dashboardelecdata', 'latest30DayData'],
+    data() {
+      return {
+        openChart: false,
+        config: {
+          data: [
+            {
+              name: "A",
+              value: 167
+            },
+            {
+              name: "B",
+              value: 67
+            },
+            {
+              name: "C",
+              value: 123
+            },
+            {
+              name: "D",
+              value: 55
+            },
+          ],
+          showValue: true
+        },
+        dashboarddayelec:this.dashboardelecdata[0],
+        dashboarddayelecmonth:this.dashboardelecdata[1]
+      };
+    },
+    components: { centreRight2Chart1 },
+    mounted() {
+      this.initChart();
+    },
+    methods: {
+      openChartElec(){
+        this.openChart = true
+      },
+      open(){
+        this.$nextTick(() => {
+          this.initChartDialog()
+        })
+      },
+      initChart() {
+        // 基于准备好的dom，初始化echarts实例
+        this.chart = this.echarts.init(document.getElementById('peakToValley'))
+        const dateDay = [];
+        const dateNum = [];
+        for (let i = 0; i < this.latest30DayData.length; i++) {
+          dateDay[i] = this.latest30DayData[i].pullDate.toString().substr(5, 5);
+          dateNum[i] = this.latest30DayData[i].elecDiff;
+        }
+        dateDay.reverse();
+        dateNum.reverse();
+        this.chart.setOption({
+          /* 周围边距 */
+          grid: {
+            left: '3%',
+            right: '3%',
+            bottom: '1%',
+            top: '20%',
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              // data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
+              data:dateDay,
+              axisTick: {
+                alignWithLabel: true
+              },
+              axisLabel: {
+                color: '#ffffff'
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: 'Unit:(kW·h)',
+              axisLabel: {
+                color: '#ffffff'
+              },
+              nameTextStyle: {
+                color: '#ffffff'
+              }
+            }
+          ],
+          series: [
+            {
+              name: 'Direct',
+              type: 'bar',
+              barWidth: '60%',
+              markPoint: {
+                data: [
+                  { type: 'max', name: 'Max' },
+                  { type: 'min', name: 'Min' }
+                ]
+              },
+              // data: [10, 52, 20, 33, 30, 30, -34, 10, 33, 20, 33, 30, 30, -13, 10, 12, 20, 33, 30, 30, -20, 10, 43, 20, 33, 30, 30, -20, 12, 45, -11]
+              data:dateNum,
+            }
+          ]
+        })
+      },
+      initChartDialog() {
+        // 基于准备好的dom，初始化echarts实例
+        this.chart1 = this.echarts.init(document.getElementById('peakToValleyDialog'))
+        const dateDay = [];
+        const dateNum = [];
+        for (let i = 0; i < this.latest30DayData.length; i++) {
+          dateDay[i] = this.latest30DayData[i].pullDate.toString().substr(5, 5);
+          dateNum[i] = this.latest30DayData[i].elecDiff;
+        }
+        dateDay.reverse();
+        dateNum.reverse();
+        this.chart1.setOption({
+          /* 周围边距 */
+          grid: {
+            left: '3%',
+            right: '3%',
+            bottom: '1%',
+            top: '20%',
+            containLabel: true
+          },
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
+          },
+          xAxis: [
+            {
+              type: 'category',
+              // data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
+              data:dateDay,
+              axisTick: {
+                alignWithLabel: true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: 'Unit:(kW·h)'
+            }
+          ],
+          series: [
+            {
+              name: 'Direct',
+              type: 'bar',
+              barWidth: '60%',
+              label: {
+                show: true,
+                position: 'top'
+              },
+              markPoint: {
+                data: [
+                  { type: 'max', name: 'Max' },
+                  { type: 'min', name: 'Min' }
+                ]
+              },
+              // data: [10, 52, 20, 33, 30, 30, -34, 10, 33, 20, 33, 30, 30, -13, 10, 12, 20, 33, 30, 30, -20, 10, 43, 20, 33, 30, 30, -20, 12, 45, -11]
+              data:dateNum,
+            }
+          ]
+        })
+      },
+    }
+  };
+</script>
+
+<style lang="scss">
+  .center-text{
+    margin-left:40px;
+  }
+  #centreRight2 {
+    padding: 0.0625rem;
+    height: 5rem;
+    min-width: 3.75rem;
+    border-radius: 0.0625rem;
+    .bg-color-black {
+      padding: 0.0625rem;
+      height: 5.2rem;
+      border-radius: 0.125rem;
+    }
+    .text {
+      color: #ffffff;
+    }
+    .body-box {
+      border-radius: 0.125rem;
+      overflow: hidden;
+    }
+  }
+  .title-p{
+    font-size: 16px;
+    float: left;
+  }
+  .title-p2{
+    margin-left:20px;
+    color: #cfe5ea;
+    font:30px/15px 'ds-digitalbold';
+    float: left;
+  }
+  .fontElec {
+    //width:100px;
+    //margin-left: 0.3rem;
+    //padding-top: 0.25rem;
+    //color: #cfe5ea;
+    //font:30px/15px 'ds-digitalbold';
+    //text-align:center;
+  }
+</style>

ui/src/views/monitor/elecNew/echart/analysisChart/analysisChartBottomLeft1.vue

@@ -0,0 +1,125 @@
+<template>
+    <div>
+        <div id="analysisChartBottomLeft1" style="width:3.4rem;height:2.2rem;"></div>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+    props: ['dashboarddata'],
+    data() {
+        return {
+            chart: null,
+            wasteAvg: null,
+            rainAvg: null
+        }
+    },
+    mixins: [echartMixins],
+    mounted() {
+        this.calcAvg();
+        this.init();
+    },
+    methods: {
+        calcAvg() {
+            let latest7DayData = this.dashboarddata.latest7DayData;
+            let wasteTotal = 0;
+            let rainTotal = 0;
+            for (let i = 0; i < latest7DayData.length; i++) {
+              wasteTotal += Number(latest7DayData[i].wastePh);
+              rainTotal += Number(latest7DayData[i].rainPh);
+            }
+            this.wasteAvg = (wasteTotal / 7).toFixed(1);
+            this.rainAvg = (rainTotal / 7).toFixed(1);
+        },
+        init() {
+            this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft1"), 'dark');
+            let option = {
+                backgroundColor: 'transparent',
+                title: {
+                    text: ''
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                    type: 'shadow'
+                    }
+                },
+                legend: {},
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                yAxis: {
+                    type: 'value',
+                    boundaryGap: [0, 0.01],
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle:{
+                            color: 'rgba(255,255,255,.7)'
+                        }
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['Waste Water', 'Rain Water',],
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                series: [
+                    {
+                        name: '实时 PH',
+                        type: 'bar',
+                        data: [this.dashboarddata.wastePh, this.dashboarddata.rainPh],
+                        itemStyle: {
+                            normal: {
+                                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    { offset: 0, color: "rgba(255, 189, 91, 0.8)" },
+                                    { offset: 1, color: "rgba(255, 189, 91, 0.3)" }
+                                ])
+                            }
+                        },
+                        label: {
+                            show: true,
+                            position: 'top',
+                            textStyle: {
+                                fontSize: 25,
+                                fontWeight: 'bold',
+                                color: '#fff'
+                            }
+                        }
+                    },
+                    {
+                        name: '7 天平均 PH',
+                        type: 'bar',
+                        data: [this.wasteAvg, this.rainAvg],
+                        color: '#A8CBFF',
+                        itemStyle: {
+                            normal: {
+                                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    { offset: 0, color: "rgba(100, 100, 100, 0.8)" },
+                                    { offset: 1, color: "rgba(100, 100, 100, 0.3)" }
+                                ])
+                            }
+                        }
+                    },
+                ]
+            };
+            this.chart.setOption(option);
+        }
+    },
+    destroyed() {
+        window.onresize = null;
+    }
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elecNew/echart/analysisChart/analysisChartBottomLeft2.vue

@@ -0,0 +1,126 @@
+<template>
+    <div>
+        <div id="analysisChartBottomLeft2" style="width:3.4rem;height:2.2rem;"></div>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+    props: ['dashboarddata'],
+    data() {
+        return {
+            chart: null,
+            wasteAvg: null,
+            rainAvg: null
+        }
+    },
+    mixins: [echartMixins],
+    mounted() {
+        this.calcAvg();
+        this.init();
+    },
+    methods: {
+        calcAvg() {
+          let latest7DayData = this.dashboarddata.latest7DayData;
+          let wasteTotal = 0;
+          let rainTotal = 0;
+          for (let i = 0; i < latest7DayData.length; i++) {
+            wasteTotal += Number(latest7DayData[i].wasteCod);
+            rainTotal += Number(latest7DayData[i].rainCod);
+          }
+          this.wasteAvg = (wasteTotal / 7).toFixed(1);
+          this.rainAvg = (rainTotal / 7).toFixed(1);
+        },
+        init() {
+            this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft2"), 'dark');
+            let option = {
+                backgroundColor: 'transparent',
+                title: {
+                    text: ''
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                    type: 'shadow'
+                    }
+                },
+                legend: {},
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'Unit:(mg/l)',
+                    boundaryGap: [0, 0.01],
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle:{
+                            color: 'rgba(255,255,255,.7)'
+                        }
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['Waste Water', 'Rain Water',],
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                series: [
+                    {
+                        name: '实时 COD',
+                        type: 'bar',
+                        data: [this.dashboarddata.wasteCod, this.dashboarddata.rainCod],
+                        itemStyle: {
+                            normal: {
+                                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    { offset: 0, color: "rgba(177, 47, 255, 0.8)" },
+                                    { offset: 1, color: "rgba(177, 47, 255, 0.3)" }
+                                ])
+                            }
+                        },
+                        label: {
+                            show: true,
+                            position: 'top',
+                            textStyle: {
+                                fontSize: 25,
+                                fontWeight: 'bold',
+                                color: '#fff'
+                            }
+                        },
+                    },
+                    {
+                        name: '7 天平均 COD',
+                        type: 'bar',
+                        data: [this.wasteAvg, this.rainAvg],
+                        color: '#D2FFE4',
+                        itemStyle: {
+                            normal: {
+                                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    { offset: 0, color: "rgba(100, 100, 100, 0.8)" },
+                                    { offset: 1, color: "rgba(100, 100, 100, 0.3)" }
+                                ])
+                            }
+                        }
+                    },
+                ]
+            };
+            this.chart.setOption(option);
+        }
+    },
+    destroyed() {
+        window.onresize = null;
+    }
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elecNew/echart/analysisChart/analysisChartBottomLeft3.vue

@@ -0,0 +1,272 @@
+<template>
+    <div>
+        <div id="analysisChartBottomLeft3" @click="dialogVisible = true" style="width:3.4rem;height:2.2rem;"></div>
+        <el-dialog title="一周 PH 趋势" :visible.sync="dialogVisible" width="1600px" @open="open" destroy-on-close append-to-body>
+            <div id="analysisChartBottomLeft33" style="width:20rem;height:6rem;margin:0.5rem auto;"></div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+    props: ['dashboarddata'],
+    data() {
+        return {
+            chart: null,
+            dialogVisible: false
+        }
+    },
+    mixins: [echartMixins],
+    mounted() {
+        this.init();
+    },
+    methods: {
+        opnenDialg(){
+            this.dialogVisible = true
+        },
+        open(){
+            this.$nextTick(() => {
+                this.init2()
+            })
+        },
+        init() {
+            this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft3"), 'dark');
+            const dateArray = [];
+            const wasteArray = [];
+            const rainArray = [];
+            let data = this.dashboarddata.latest7DayData;
+            for (let i = 0; i < data.length; i++) {
+              dateArray[i]=  data[i].pullDate.toString().substr(5, 5);
+              wasteArray[i] = data[i].wastePh;
+              rainArray[i] = data[i].rainPh;
+            }
+            dateArray.reverse();
+            wasteArray.reverse();
+            rainArray.reverse();
+            let option = {
+                backgroundColor: 'transparent',
+                title: {
+                    text: '一周 PH 趋势',
+                    textStyle: {
+                        fontSize: 12
+                    }
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['Waste Water', 'Rain Water'],
+                    padding: [20, 0, 0, 0]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    // data: [
+                    //   this.c[0].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[1].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[2].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[3].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[4].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[5].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[6].pullDate.toString().substr(5, 5)
+                    // ],
+                    data: dateArray,
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle:{
+                            color: 'rgba(255,255,255,.7)'
+                        }
+                    }
+                },
+                series: [
+                    {
+                        name: 'Waste Water',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.dashboarddata.latest7DayData[0].wastePh,
+                        //   this.dashboarddata.latest7DayData[1].wastePh,
+                        //   this.dashboarddata.latest7DayData[2].wastePh,
+                        //   this.dashboarddata.latest7DayData[3].wastePh,
+                        //   this.dashboarddata.latest7DayData[4].wastePh,
+                        //   this.dashboarddata.latest7DayData[5].wastePh,
+                        //   this.dashboarddata.latest7DayData[6].wastePh
+                        // ],
+                        data: wasteArray,
+                        symbolSize: 10,
+                        color: '#5470c6',
+                        lineStyle: {
+                            width: 4,
+                        },
+                        itemStyle: {
+                            borderWidth: 3,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'Rain Water',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.dashboarddata.latest7DayData[0].rainPh,
+                        //   this.dashboarddata.latest7DayData[1].rainPh,
+                        //   this.dashboarddata.latest7DayData[2].rainPh,
+                        //   this.dashboarddata.latest7DayData[3].rainPh,
+                        //   this.dashboarddata.latest7DayData[4].rainPh,
+                        //   this.dashboarddata.latest7DayData[5].rainPh,
+                        //   this.dashboarddata.latest7DayData[6].rainPh
+                        // ],
+                        data: rainArray,
+                        symbolSize: 10,
+                        color: '#73c0de',
+                        lineStyle: {
+                            width: 4,
+                        },
+                        itemStyle: {
+                            borderWidth: 3,
+                            borderColor: '#fff',
+                        }
+                    },
+                ]
+                };
+            this.chart.setOption(option);
+        },
+        init2() {
+            this.chart2 = this.echarts.init(document.getElementById("analysisChartBottomLeft33"));
+            const dateArray = [];
+            const wasteArray = [];
+            const rainArray = [];
+            let data = this.dashboarddata.latest7DayData;
+            for (let i = 0; i < data.length; i++) {
+              dateArray[i]=  data[i].pullDate.toString().substr(5, 5);
+              wasteArray[i] = data[i].wastePh;
+              rainArray[i] = data[i].rainPh;
+            }
+            dateArray.reverse();
+            wasteArray.reverse();
+            rainArray.reverse();
+            let option = {
+                backgroundColor: 'transparent',
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['Waste Water', 'Rain Water'],
+                    padding: [30, 0, 0, 0]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    // data: [
+                    //   this.dashboarddata.latest7DayData[0].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[1].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[2].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[3].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[4].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[5].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[6].pullDate.toString().substr(5, 5)
+                    // ],
+                    data: dateArray,
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLabel: {
+                        color: '#808080'
+                    }
+                },
+                series: [
+                    {
+                        name: 'Waste Water',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.dashboarddata.latest7DayData[0].wastePh,
+                        //   this.dashboarddata.latest7DayData[1].wastePh,
+                        //   this.dashboarddata.latest7DayData[2].wastePh,
+                        //   this.dashboarddata.latest7DayData[3].wastePh,
+                        //   this.dashboarddata.latest7DayData[4].wastePh,
+                        //   this.dashboarddata.latest7DayData[5].wastePh,
+                        //   this.dashboarddata.latest7DayData[6].wastePh
+                        // ],
+                        data: wasteArray,
+                        symbolSize: 10,
+                        color: '#5470c6',
+                        lineStyle: {
+                            width: 4,
+                        },
+                        itemStyle: {
+                            borderWidth: 3,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'Rain Water',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.dashboarddata.latest7DayData[0].rainPh,
+                        //   this.dashboarddata.latest7DayData[1].rainPh,
+                        //   this.dashboarddata.latest7DayData[2].rainPh,
+                        //   this.dashboarddata.latest7DayData[3].rainPh,
+                        //   this.dashboarddata.latest7DayData[4].rainPh,
+                        //   this.dashboarddata.latest7DayData[5].rainPh,
+                        //   this.dashboarddata.latest7DayData[6].rainPh
+                        // ],
+                        data: rainArray,
+                        symbolSize: 10,
+                        color: '#73c0de',
+                        lineStyle: {
+                            width: 4,
+                        },
+                        itemStyle: {
+                            borderWidth: 3,
+                            borderColor: '#fff',
+                        }
+                    },
+                ]
+                };
+            this.chart2.setOption(option);
+        }
+    },
+    destroyed() {
+        window.onresize = null;
+    }
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elecNew/echart/analysisChart/analysisChartBottomLeft4.vue

@@ -0,0 +1,274 @@
+<template>
+    <div>
+        <div id="analysisChartBottomLeft4" @click="dialogVisible = true" style="width:3.4rem;height:2.2rem;"></div>
+        <el-dialog title="一周 COD 趋势" :visible.sync="dialogVisible" width="1600px" @open="open" destroy-on-close append-to-body>
+            <div id="analysisChartBottomLeft44" style="width:20rem;height:6rem;margin:0.5rem auto;"></div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+    props: ['dashboarddata'],
+    data() {
+        return {
+            chart: null,
+            dialogVisible: false
+        }
+    },
+    mixins: [echartMixins],
+    mounted() {
+        this.init();
+    },
+    methods: {
+        opnenDialg(){
+            this.dialogVisible = true
+        },
+        open(){
+            this.$nextTick(() => {
+                this.init2()
+            })
+        },
+        init() {
+            this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft4"), 'dark');
+            const dateArray = [];
+            const wasteArray = [];
+            const rainArray = [];
+            let data = this.dashboarddata.latest7DayData;
+            for (let i = 0; i < data.length; i++) {
+              dateArray[i]=  data[i].pullDate.toString().substr(5, 5);
+              wasteArray[i] = data[i].wasteCod;
+              rainArray[i] = data[i].rainCod;
+            }
+            dateArray.reverse();
+            wasteArray.reverse();
+            rainArray.reverse();
+            let option = {
+                backgroundColor: 'transparent',
+                title: {
+                    text: '一周 COD 趋势',
+                    textStyle: {
+                        fontSize: 12
+                    }
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['Waste Water', 'Rain Water'],
+                    padding: [20, 0, 0, 0]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    // data: [
+                    //   this.dashboarddata.latest7DayData[0].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[1].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[2].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[3].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[4].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[5].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[6].pullDate.toString().substr(5, 5)
+                    // ],
+                    data: dateArray,
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'Unit:(mg/l)',
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle:{
+                            color: 'rgba(255,255,255,.7)'
+                        }
+                    }
+                },
+                series: [
+                    {
+                        name: 'Waste Water',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.dashboarddata.latest7DayData[0].wasteCod,
+                        //   this.dashboarddata.latest7DayData[1].wasteCod,
+                        //   this.dashboarddata.latest7DayData[2].wasteCod,
+                        //   this.dashboarddata.latest7DayData[3].wasteCod,
+                        //   this.dashboarddata.latest7DayData[4].wasteCod,
+                        //   this.dashboarddata.latest7DayData[5].wasteCod,
+                        //   this.dashboarddata.latest7DayData[6].wasteCod
+                        // ],
+                        data: wasteArray,
+                        symbolSize: 10,
+                        color: '#5470c6',
+                        lineStyle: {
+                            width: 4,
+                        },
+                        itemStyle: {
+                            borderWidth: 3,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'Rain Water',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.dashboarddata.latest7DayData[0].rainCod,
+                        //   this.dashboarddata.latest7DayData[1].rainCod,
+                        //   this.dashboarddata.latest7DayData[2].rainCod,
+                        //   this.dashboarddata.latest7DayData[3].rainCod,
+                        //   this.dashboarddata.latest7DayData[4].rainCod,
+                        //   this.dashboarddata.latest7DayData[5].rainCod,
+                        //   this.dashboarddata.latest7DayData[6].rainCod
+                        // ],
+                        data: rainArray,
+                        symbolSize: 10,
+                        color: '#73c0de',
+                        lineStyle: {
+                            width: 4,
+                        },
+                        itemStyle: {
+                            borderWidth: 3,
+                            borderColor: '#fff',
+                        }
+                    },
+                ]
+                };
+            this.chart.setOption(option);
+        },
+        init2() {
+            this.chart2 = this.echarts.init(document.getElementById("analysisChartBottomLeft44"));
+            const dateArray = [];
+            const wasteArray = [];
+            const rainArray = [];
+            let data = this.dashboarddata.latest7DayData;
+            for (let i = 0; i < data.length; i++) {
+              dateArray[i]=  data[i].pullDate.toString().substr(5, 5);
+              wasteArray[i] = data[i].wasteCod;
+              rainArray[i] = data[i].rainCod;
+            }
+            dateArray.reverse();
+            wasteArray.reverse();
+            rainArray.reverse();
+            let option = {
+                backgroundColor: 'transparent',
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['Waste Water', 'Rain Water'],
+                    padding: [30, 0, 0, 0]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    // data: [
+                    //   this.dashboarddata.latest7DayData[0].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[1].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[2].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[3].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[4].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[5].pullDate.toString().substr(5, 5),
+                    //   this.dashboarddata.latest7DayData[6].pullDate.toString().substr(5, 5)
+                    // ],
+                    data: dateArray,
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'Unit:(mg/l)',
+                    axisLabel: {
+                        color: '#808080'
+                    }
+                },
+                series: [
+                    {
+                        name: 'Waste Water',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.dashboarddata.latest7DayData[0].wasteCod,
+                        //   this.dashboarddata.latest7DayData[1].wasteCod,
+                        //   this.dashboarddata.latest7DayData[2].wasteCod,
+                        //   this.dashboarddata.latest7DayData[3].wasteCod,
+                        //   this.dashboarddata.latest7DayData[4].wasteCod,
+                        //   this.dashboarddata.latest7DayData[5].wasteCod,
+                        //   this.dashboarddata.latest7DayData[6].wasteCod
+                        // ],
+                        data: wasteArray,
+                        symbolSize: 10,
+                        color: '#5470c6',
+                        lineStyle: {
+                            width: 4,
+                        },
+                        itemStyle: {
+                            borderWidth: 3,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'Rain Water',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.dashboarddata.latest7DayData[0].rainCod,
+                        //   this.dashboarddata.latest7DayData[1].rainCod,
+                        //   this.dashboarddata.latest7DayData[2].rainCod,
+                        //   this.dashboarddata.latest7DayData[3].rainCod,
+                        //   this.dashboarddata.latest7DayData[4].rainCod,
+                        //   this.dashboarddata.latest7DayData[5].rainCod,
+                        //   this.dashboarddata.latest7DayData[6].rainCod
+                        // ],
+                        data: rainArray,
+                        symbolSize: 10,
+                        color: '#73c0de',
+                        lineStyle: {
+                            width: 4,
+                        },
+                        itemStyle: {
+                            borderWidth: 3,
+                            borderColor: '#fff',
+                        }
+                    },
+                ]
+                };
+            this.chart2.setOption(option);
+        }
+    },
+    destroyed() {
+        window.onresize = null;
+    }
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elecNew/echart/analysisChart/analysisChartTopCenter.vue

@@ -0,0 +1,328 @@
+<template>
+    <div>
+        <div id="analysisChartTopCenter" @click="dialogVisible = true" style="width:6.8rem;height:2.5rem;"></div>
+        <el-dialog title="HRSG 2#" :visible.sync="dialogVisible" width="1600px" @open="open" destroy-on-close append-to-body>
+            <div id="analysisChartTopCenter2" style="width:20rem;height:6rem;margin:0.5rem auto;"></div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+    props: ['latest7DayData'],
+    data() {
+        return {
+            chart: null,
+            dialogVisible: false
+        }
+    },
+    mixins: [echartMixins],
+    mounted() {
+        this.init();
+    },
+    methods: {
+        opnenDialg(){
+            this.dialogVisible = true
+        },
+        open(){
+            this.$nextTick(() => {
+                this.init2()
+            })
+        },
+        init() {
+            this.chart = this.echarts.init(document.getElementById("analysisChartTopCenter"), 'dark');
+            const dateArray = [];
+            const smokeArray = [];
+            const so2Array = [];
+            const noxArray = [];
+            let data = this.latest7DayData;
+            for (let i = 0; i < data.length; i++) {
+              dateArray[i]=  data[i].pullDate.toString().substr(5, 5);
+              smokeArray[i] = data[i].hrsg2SmokeConvert;
+              so2Array[i] = data[i].hrsg2So2Convert;
+              noxArray[i] = data[i].hrsg2NoxConvert;
+            }
+            dateArray.reverse();
+            smokeArray.reverse();
+            so2Array.reverse();
+            noxArray.reverse();
+            let option = {
+                backgroundColor: 'transparent',
+                title: {
+                    text: 'HRSG 2#',
+                    textStyle: {
+                        fontSize: 18
+                    }
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['烟尘', 'SO2', 'NOx'],
+                    padding: [30, 0, 0, 0]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    // data: [
+                    //   this.latest7DayData[0].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[1].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[2].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[3].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[4].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[5].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[6].pullDate.toString().substr(5, 5)
+                    // ],
+                    data: dateArray,
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'Unit:(mg/m3)',
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle:{
+                            color: 'rgba(255,255,255,.7)'
+                        }
+                }
+                },
+                series: [
+                    {
+                        name: '烟尘',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg2SmokeConvert,
+                        //   this.latest7DayData[1].hrsg2SmokeConvert,
+                        //   this.latest7DayData[2].hrsg2SmokeConvert,
+                        //   this.latest7DayData[3].hrsg2SmokeConvert,
+                        //   this.latest7DayData[4].hrsg2SmokeConvert,
+                        //   this.latest7DayData[5].hrsg2SmokeConvert,
+                        //   this.latest7DayData[6].hrsg2SmokeConvert
+                        // ],
+                        data: smokeArray,
+                        symbolSize: 10,
+                        color: '#FF9800',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'SO2',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg2So2Convert,
+                        //   this.latest7DayData[1].hrsg2So2Convert,
+                        //   this.latest7DayData[2].hrsg2So2Convert,
+                        //   this.latest7DayData[3].hrsg2So2Convert,
+                        //   this.latest7DayData[4].hrsg2So2Convert,
+                        //   this.latest7DayData[5].hrsg2So2Convert,
+                        //   this.latest7DayData[6].hrsg2So2Convert
+                        // ],
+                        data: so2Array,
+                        symbolSize: 10,
+                        color: '#9D00FF',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'NOx',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg2NoxConvert,
+                        //   this.latest7DayData[1].hrsg2NoxConvert,
+                        //   this.latest7DayData[2].hrsg2NoxConvert,
+                        //   this.latest7DayData[3].hrsg2NoxConvert,
+                        //   this.latest7DayData[4].hrsg2NoxConvert,
+                        //   this.latest7DayData[5].hrsg2NoxConvert,
+                        //   this.latest7DayData[6].hrsg2NoxConvert
+                        // ],
+                        data: noxArray,
+                        symbolSize: 10,
+                        color: '#00FF0D',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                ]
+                };
+            this.chart.setOption(option);
+        },
+        init2() {
+            this.chart2 = this.echarts.init(document.getElementById("analysisChartTopCenter2"));
+            const dateArray = [];
+            const smokeArray = [];
+            const so2Array = [];
+            const noxArray = [];
+            let data = this.latest7DayData;
+            for (let i = 0; i < data.length; i++) {
+              dateArray[i]=  data[i].pullDate.toString().substr(5, 5);
+              smokeArray[i] = data[i].hrsg2SmokeConvert;
+              so2Array[i] = data[i].hrsg2So2Convert;
+              noxArray[i] = data[i].hrsg2NoxConvert;
+            }
+            dateArray.reverse();
+            smokeArray.reverse();
+            so2Array.reverse();
+            noxArray.reverse();
+            let option = {
+                backgroundColor: 'transparent',
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['烟尘', 'SO2', 'NOx'],
+                    padding: [30, 0, 0, 0]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    // data: [
+                    //   this.latest7DayData[0].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[1].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[2].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[3].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[4].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[5].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[6].pullDate.toString().substr(5, 5)
+                    // ],
+                    data: dateArray,
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'Unit:(mg/m3)',
+                    axisLabel: {
+                        color: '#808080'
+                    }
+                },
+                series: [
+                    {
+                        name: '烟尘',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg2SmokeConvert,
+                        //   this.latest7DayData[1].hrsg2SmokeConvert,
+                        //   this.latest7DayData[2].hrsg2SmokeConvert,
+                        //   this.latest7DayData[3].hrsg2SmokeConvert,
+                        //   this.latest7DayData[4].hrsg2SmokeConvert,
+                        //   this.latest7DayData[5].hrsg2SmokeConvert,
+                        //   this.latest7DayData[6].hrsg2SmokeConvert
+                        // ],
+                        data: smokeArray,
+                        symbolSize: 10,
+                        color: '#FF9800',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'SO2',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg2So2Convert,
+                        //   this.latest7DayData[1].hrsg2So2Convert,
+                        //   this.latest7DayData[2].hrsg2So2Convert,
+                        //   this.latest7DayData[3].hrsg2So2Convert,
+                        //   this.latest7DayData[4].hrsg2So2Convert,
+                        //   this.latest7DayData[5].hrsg2So2Convert,
+                        //   this.latest7DayData[6].hrsg2So2Convert
+                        // ],
+                        data: so2Array,
+                        symbolSize: 10,
+                        color: '#9D00FF',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'NOx',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg2NoxConvert,
+                        //   this.latest7DayData[1].hrsg2NoxConvert,
+                        //   this.latest7DayData[2].hrsg2NoxConvert,
+                        //   this.latest7DayData[3].hrsg2NoxConvert,
+                        //   this.latest7DayData[4].hrsg2NoxConvert,
+                        //   this.latest7DayData[5].hrsg2NoxConvert,
+                        //   this.latest7DayData[6].hrsg2NoxConvert
+                        // ],
+                        data: noxArray,
+                        symbolSize: 10,
+                        color: '#00FF0D',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                ]
+            };
+            this.chart2.setOption(option);
+        }
+    },
+    destroyed() {
+        window.onresize = null;
+    }
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elecNew/echart/analysisChart/analysisChartTopLeft.vue

@@ -0,0 +1,328 @@
+<template>
+    <div>
+        <div id="analysisChartTopLeft" @click="dialogVisible = true" style="width:6.8rem;height:2.5rem;"></div>
+        <el-dialog title="HRSG 1#" :visible.sync="dialogVisible" width="1600px" @open="open" destroy-on-close append-to-body>
+            <div id="analysisChartTopLeft2" style="width:20rem;height:6rem;margin:0.5rem auto;"></div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+    props: ['latest7DayData'],
+    data() {
+        return {
+            chart: null,
+            dialogVisible: false
+        }
+    },
+    mixins: [echartMixins],
+    mounted() {
+        this.init();
+    },
+    methods: {
+        opnenDialg(){
+            this.dialogVisible = true
+        },
+        open(){
+            this.$nextTick(() => {
+                this.init2()
+            })
+        },
+        init() {
+            this.chart = this.echarts.init(document.getElementById("analysisChartTopLeft"), 'dark');
+            const dateArray = [];
+            const smokeArray = [];
+            const so2Array = [];
+            const noxArray = [];
+            let data = this.latest7DayData;
+            for (let i = 0; i < data.length; i++) {
+              dateArray[i]=  data[i].pullDate.toString().substr(5, 5);
+              smokeArray[i] = data[i].hrsg1SmokeConvert;
+              so2Array[i] = data[i].hrsg1So2Convert;
+              noxArray[i] = data[i].hrsg1NoxConvert;
+            }
+            dateArray.reverse();
+            smokeArray.reverse();
+            so2Array.reverse();
+            noxArray.reverse();
+            let option = {
+                backgroundColor: 'transparent',
+                title: {
+                    text: 'HRSG 1#',
+                    textStyle: {
+                        fontSize: 18
+                    }
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['烟尘', 'SO2', 'NOx'],
+                    padding: [30, 0, 0, 0]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    // data: [
+                    //   this.latest7DayData[0].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[1].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[2].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[3].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[4].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[5].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[6].pullDate.toString().substr(5, 5)
+                    // ],
+                    data: dateArray,
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'Unit:(mg/m3)',
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle:{
+                            color: 'rgba(255,255,255,.7)'
+                        }
+                }
+                },
+                series: [
+                    {
+                        name: '烟尘',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg1SmokeConvert,
+                        //   this.latest7DayData[1].hrsg1SmokeConvert,
+                        //   this.latest7DayData[2].hrsg1SmokeConvert,
+                        //   this.latest7DayData[3].hrsg1SmokeConvert,
+                        //   this.latest7DayData[4].hrsg1SmokeConvert,
+                        //   this.latest7DayData[5].hrsg1SmokeConvert,
+                        //   this.latest7DayData[6].hrsg1SmokeConvert
+                        // ],
+                        data: smokeArray,
+                        symbolSize: 10,
+                        color: '#FF9800',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'SO2',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg1So2Convert,
+                        //   this.latest7DayData[1].hrsg1So2Convert,
+                        //   this.latest7DayData[2].hrsg1So2Convert,
+                        //   this.latest7DayData[3].hrsg1So2Convert,
+                        //   this.latest7DayData[4].hrsg1So2Convert,
+                        //   this.latest7DayData[5].hrsg1So2Convert,
+                        //   this.latest7DayData[6].hrsg1So2Convert
+                        // ],
+                        data: so2Array,
+                        symbolSize: 10,
+                        color: '#9D00FF',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'NOx',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg1NoxConvert,
+                        //   this.latest7DayData[1].hrsg1NoxConvert,
+                        //   this.latest7DayData[2].hrsg1NoxConvert,
+                        //   this.latest7DayData[3].hrsg1NoxConvert,
+                        //   this.latest7DayData[4].hrsg1NoxConvert,
+                        //   this.latest7DayData[5].hrsg1NoxConvert,
+                        //   this.latest7DayData[6].hrsg1NoxConvert
+                        // ],
+                        data: noxArray,
+                        symbolSize: 10,
+                        color: '#00FF0D',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                ]
+                };
+            this.chart.setOption(option);
+        },
+        init2() {
+            this.chart2 = this.echarts.init(document.getElementById("analysisChartTopLeft2"));
+            const dateArray = [];
+            const smokeArray = [];
+            const so2Array = [];
+            const noxArray = [];
+            let data = this.latest7DayData;
+            for (let i = 0; i < data.length; i++) {
+              dateArray[i]=  data[i].pullDate.toString().substr(5, 5);
+              smokeArray[i] = data[i].hrsg1SmokeConvert;
+              so2Array[i] = data[i].hrsg1So2Convert;
+              noxArray[i] = data[i].hrsg1NoxConvert;
+            }
+            dateArray.reverse();
+            smokeArray.reverse();
+            so2Array.reverse();
+            noxArray.reverse();
+            let option = {
+                backgroundColor: 'transparent',
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['烟尘', 'SO2', 'NOx'],
+                    padding: [30, 0, 0, 0]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    // data: [
+                    //   this.latest7DayData[0].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[1].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[2].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[3].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[4].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[5].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[6].pullDate.toString().substr(5, 5)
+                    // ],
+                    data: dateArray,
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'Unit:(mg/m3)',
+                    axisLabel: {
+                        color: '#808080'
+                    }
+                },
+                series: [
+                    {
+                        name: '烟尘',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg1SmokeConvert,
+                        //   this.latest7DayData[1].hrsg1SmokeConvert,
+                        //   this.latest7DayData[2].hrsg1SmokeConvert,
+                        //   this.latest7DayData[3].hrsg1SmokeConvert,
+                        //   this.latest7DayData[4].hrsg1SmokeConvert,
+                        //   this.latest7DayData[5].hrsg1SmokeConvert,
+                        //   this.latest7DayData[6].hrsg1SmokeConvert
+                        // ],
+                        data: smokeArray,
+                        symbolSize: 10,
+                        color: '#FF9800',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'SO2',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg1So2Convert,
+                        //   this.latest7DayData[1].hrsg1So2Convert,
+                        //   this.latest7DayData[2].hrsg1So2Convert,
+                        //   this.latest7DayData[3].hrsg1So2Convert,
+                        //   this.latest7DayData[4].hrsg1So2Convert,
+                        //   this.latest7DayData[5].hrsg1So2Convert,
+                        //   this.latest7DayData[6].hrsg1So2Convert
+                        // ],
+                        data: so2Array,
+                        symbolSize: 10,
+                        color: '#9D00FF',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'NOx',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg1NoxConvert,
+                        //   this.latest7DayData[1].hrsg1NoxConvert,
+                        //   this.latest7DayData[2].hrsg1NoxConvert,
+                        //   this.latest7DayData[3].hrsg1NoxConvert,
+                        //   this.latest7DayData[4].hrsg1NoxConvert,
+                        //   this.latest7DayData[5].hrsg1NoxConvert,
+                        //   this.latest7DayData[6].hrsg1NoxConvert
+                        // ],
+                        data: noxArray,
+                        symbolSize: 10,
+                        color: '#00FF0D',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                ]
+            };
+            this.chart2.setOption(option);
+        }
+    },
+    destroyed() {
+        window.onresize = null;
+    }
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elecNew/echart/analysisChart/analysisChartTopRight.vue

@@ -0,0 +1,328 @@
+<template>
+    <div>
+        <div id="analysisChartTopRight" @click="dialogVisible = true" style="width:6.8rem;height:2.5rem;"></div>
+        <el-dialog title="HRSG 3#" :visible.sync="dialogVisible" width="1600px" @open="open" destroy-on-close append-to-body>
+            <div id="analysisChartTopRight2" style="width:20rem;height:6rem;margin:0.5rem auto;"></div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+    props: ['latest7DayData'],
+    data() {
+        return {
+            chart: null,
+            dialogVisible: false
+        }
+    },
+    mixins: [echartMixins],
+    mounted() {
+        this.init();
+    },
+    methods: {
+        opnenDialg(){
+            this.dialogVisible = true
+        },
+        open(){
+            this.$nextTick(() => {
+                this.init2()
+            })
+        },
+        init() {
+            this.chart = this.echarts.init(document.getElementById("analysisChartTopRight"), 'dark');
+            const dateArray = [];
+            const smokeArray = [];
+            const so2Array = [];
+            const noxArray = [];
+            let data = this.latest7DayData;
+            for (let i = 0; i < data.length; i++) {
+              dateArray[i]=  data[i].pullDate.toString().substr(5, 5);
+              smokeArray[i] = data[i].hrsg3SmokeConvert;
+              so2Array[i] = data[i].hrsg3So2Convert;
+              noxArray[i] = data[i].hrsg3NoxConvert;
+            }
+            dateArray.reverse();
+            smokeArray.reverse();
+            so2Array.reverse();
+            noxArray.reverse();
+            let option = {
+                backgroundColor: 'transparent',
+                title: {
+                    text: 'HRSG 3#',
+                    textStyle: {
+                        fontSize: 18
+                    }
+                },
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['烟尘', 'SO2', 'NOx'],
+                    padding: [30, 0, 0, 0]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    // data: [
+                    //   this.latest7DayData[0].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[1].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[2].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[3].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[4].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[5].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[6].pullDate.toString().substr(5, 5)
+                    // ],
+                    data: dateArray,
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'Unit:(mg/m3)',
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle:{
+                            color: 'rgba(255,255,255,.7)'
+                        }
+                }
+                },
+                series: [
+                    {
+                        name: '烟尘',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg3SmokeConvert,
+                        //   this.latest7DayData[1].hrsg3SmokeConvert,
+                        //   this.latest7DayData[2].hrsg3SmokeConvert,
+                        //   this.latest7DayData[3].hrsg3SmokeConvert,
+                        //   this.latest7DayData[4].hrsg3SmokeConvert,
+                        //   this.latest7DayData[5].hrsg3SmokeConvert,
+                        //   this.latest7DayData[6].hrsg3SmokeConvert
+                        // ],
+                        data: smokeArray,
+                        symbolSize: 10,
+                        color: '#FF9800',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'SO2',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg3So2Convert,
+                        //   this.latest7DayData[1].hrsg3So2Convert,
+                        //   this.latest7DayData[2].hrsg3So2Convert,
+                        //   this.latest7DayData[3].hrsg3So2Convert,
+                        //   this.latest7DayData[4].hrsg3So2Convert,
+                        //   this.latest7DayData[5].hrsg3So2Convert,
+                        //   this.latest7DayData[6].hrsg3So2Convert
+                        // ],
+                        data: so2Array,
+                        symbolSize: 10,
+                        color: '#9D00FF',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'NOx',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg3NoxConvert,
+                        //   this.latest7DayData[1].hrsg3NoxConvert,
+                        //   this.latest7DayData[2].hrsg3NoxConvert,
+                        //   this.latest7DayData[3].hrsg3NoxConvert,
+                        //   this.latest7DayData[4].hrsg3NoxConvert,
+                        //   this.latest7DayData[5].hrsg3NoxConvert,
+                        //   this.latest7DayData[6].hrsg3NoxConvert
+                        // ],
+                        data: noxArray,
+                        symbolSize: 10,
+                        color: '#00FF0D',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                ]
+                };
+            this.chart.setOption(option);
+        },
+        init2() {
+            this.chart2 = this.echarts.init(document.getElementById("analysisChartTopRight2"));
+            const dateArray = [];
+            const smokeArray = [];
+            const so2Array = [];
+            const noxArray = [];
+            let data = this.latest7DayData;
+            for (let i = 0; i < data.length; i++) {
+              dateArray[i]=  data[i].pullDate.toString().substr(5, 5);
+              smokeArray[i] = data[i].hrsg3SmokeConvert;
+              so2Array[i] = data[i].hrsg3So2Convert;
+              noxArray[i] = data[i].hrsg3NoxConvert;
+            }
+            dateArray.reverse();
+            smokeArray.reverse();
+            so2Array.reverse();
+            noxArray.reverse();
+            let option = {
+                backgroundColor: 'transparent',
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['烟尘', 'SO2', 'NOx'],
+                    padding: [30, 0, 0, 0]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    // data: [
+                    //   this.latest7DayData[0].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[1].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[2].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[3].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[4].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[5].pullDate.toString().substr(5, 5),
+                    //   this.latest7DayData[6].pullDate.toString().substr(5, 5)
+                    // ],
+                    data: dateArray,
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'Unit:(mg/m3)',
+                    axisLabel: {
+                        color: '#808080'
+                    }
+                },
+                series: [
+                    {
+                        name: '烟尘',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg3SmokeConvert,
+                        //   this.latest7DayData[1].hrsg3SmokeConvert,
+                        //   this.latest7DayData[2].hrsg3SmokeConvert,
+                        //   this.latest7DayData[3].hrsg3SmokeConvert,
+                        //   this.latest7DayData[4].hrsg3SmokeConvert,
+                        //   this.latest7DayData[5].hrsg3SmokeConvert,
+                        //   this.latest7DayData[6].hrsg3SmokeConvert
+                        // ],
+                        data: smokeArray,
+                        symbolSize: 10,
+                        color: '#FF9800',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'SO2',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg3So2Convert,
+                        //   this.latest7DayData[1].hrsg3So2Convert,
+                        //   this.latest7DayData[2].hrsg3So2Convert,
+                        //   this.latest7DayData[3].hrsg3So2Convert,
+                        //   this.latest7DayData[4].hrsg3So2Convert,
+                        //   this.latest7DayData[5].hrsg3So2Convert,
+                        //   this.latest7DayData[6].hrsg3So2Convert
+                        // ],
+                        data: so2Array,
+                        symbolSize: 10,
+                        color: '#9D00FF',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'NOx',
+                        type: 'line',
+                        smooth: true,
+                        // data: [
+                        //   this.latest7DayData[0].hrsg3NoxConvert,
+                        //   this.latest7DayData[1].hrsg3NoxConvert,
+                        //   this.latest7DayData[2].hrsg3NoxConvert,
+                        //   this.latest7DayData[3].hrsg3NoxConvert,
+                        //   this.latest7DayData[4].hrsg3NoxConvert,
+                        //   this.latest7DayData[5].hrsg3NoxConvert,
+                        //   this.latest7DayData[6].hrsg3NoxConvert
+                        // ],
+                        data: noxArray,
+                        symbolSize: 10,
+                        color: '#00FF0D',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                ]
+            };
+            this.chart2.setOption(option);
+        }
+    },
+    destroyed() {
+        window.onresize = null;
+    }
+}
+</script>
+
+<style>
+
+</style>

ui/src/views/monitor/elecNew/echart/bottom/bottomLeftChart.vue

@@ -0,0 +1,578 @@
+<template>
+  <div @click="opnenDialg">
+    <div id="bottomLeftChart" style="width:11.25rem;height:5.9rem;"></div>
+    <el-dialog class="my-info-dialog" :visible.sync="openChart" title="蒸汽消耗" @open="open" width="1600px" destroy-on-close append-to-body>
+      <span style="padding-left:65px;color:#ffffff;">Unit:(t/h)</span>
+      <div id="bottomLeftChart2" style="width:100%;height:600px;"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+  props:['monthData', 'latest30DayData'],
+  data() {
+    return {
+      chart: null,
+      openChart: false
+
+    };
+  },
+  mixins: [echartMixins],
+  mounted() {
+    this.draw();
+  },
+  methods: {
+    opnenDialg(){
+      this.openChart = true
+    },
+    open(){
+      this.$nextTick(() => {
+        this.drawDialog()
+      })
+    },
+    draw() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById("bottomLeftChart"));
+      let category =[];
+      let HHPData=[];
+      let HPData=[];
+      let LPData=[];
+      let MPData=[];
+      for(let i=0;i<this.latest30DayData.length;i++){
+        category[i]=this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        HHPData[i]=this.latest30DayData[i].steamHhp;
+        HPData[i]=this.latest30DayData[i].steamHp;
+        LPData[i]=this.latest30DayData[i].steamLp;
+        MPData[i]=this.latest30DayData[i].steamMp;
+      }
+      // let lineData = [
+      //   18092,
+      //   20728,
+      //   24045,
+      //   28348,
+      //   32808,
+      //   36097,
+      //   39867,
+      //   44715,
+      //   48444,
+      //   50415,
+      //   56061,
+      //   62677,
+      //   59521,
+      //   67560,
+      //   18092,
+      //   20728,
+      //   24045,
+      //   28348,
+      //   32808,
+      //   36097,
+      //   39867,
+      //   44715,
+      //   48444,
+      //   50415,
+      //   36097,
+      //   39867,
+      //   44715,
+      //   48444,
+      //   50415,
+      //   50061,
+      //   32677,
+      //   49521,
+      //   32808
+      // ];
+      // let barData = [
+      //   4600,
+      //   5000,
+      //   5500,
+      //   6500,
+      //   7500,
+      //   8500,
+      //   9900,
+      //   12500,
+      //   14000,
+      //   21500,
+      //   23200,
+      //   24450,
+      //   25250,
+      //   33300,
+      //   4600,
+      //   5000,
+      //   5500,
+      //   6500,
+      //   7500,
+      //   8500,
+      //   9900,
+      //   22500,
+      //   14000,
+      //   21500,
+      //   8500,
+      //   9900,
+      //   12500,
+      //   14000,
+      //   21500,
+      //   23200,
+      //   24450,
+      //   25250,
+      //   7500
+      // ];
+      // let rateData = [];
+      // for (let i = 0; i < 33; i++) {
+      //   let rate = barData[i] / lineData[i];
+      //   rateData[i] = rate.toFixed(2);
+      // }
+      let rateData = [];
+      for (let i = 0; i < category.length; i++) {
+        rateData.push(
+          Number(HHPData[i]) +
+          Number(HPData[i]) +
+          Number(LPData[i]) +
+          Number(MPData[i])
+        );
+      }
+
+      let option = {
+        title: {
+          text: "",
+          x: "center",
+          y: 0,
+          textStyle: {
+            color: "#B4B4B4",
+            fontSize: 16,
+            fontWeight: "normal"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(255,255,255,0.1)",
+          axisPointer: {
+            type: "shadow",
+            label: {
+              show: true,
+              backgroundColor: "#7B7DDC"
+            }
+          }
+        },
+        legend: {
+          data: ['HHP','HP','MP','LP','总消耗'],
+          // data: ['Discharged','Planned emission','Emission rate'],
+          textStyle: {
+            color: "#B4B4B4"
+          },
+          top: "0%"
+        },
+        grid: {
+          x: "8%",
+          width: "88%",
+          y: "4%"
+        },
+        xAxis: {
+          data: category,
+          axisLine: {
+            lineStyle: {
+              color: "#B4B4B4"
+            }
+          },
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            color: '#ffffff'
+          }
+        },
+        yAxis: [
+          {
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: "#B4B4B4"
+              }
+            },
+            axisLabel: {
+              formatter: "{value} ",
+              color: '#ffffff'
+            }
+          },
+          {
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: "#B4B4B4"
+              }
+            },
+            axisLabel: {
+              formatter: "{value} "
+            }
+          }
+        ],
+        series: [
+          {
+            name: '总消耗',
+            type: "line",
+            smooth: true,
+            showAllSymbol: true,
+            symbol: "emptyCircle",
+            symbolSize: 8,
+            // yAxisIndex: 1,
+            itemStyle: {
+              normal: {
+                color: "#F02FC2"
+              }
+            },
+            data: rateData
+          },
+
+          {
+            name: 'HHP',
+            type: "bar",
+            stack: 'Ad',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "rgba(95,198,299,0.8)" },
+                  { offset: 0.2, color: "rgba(95,198,299,0.5)" },
+                  { offset: 1, color: "rgba(95,198,299,0.2)" }
+                ])
+              }
+            },
+            data: HHPData
+          },
+
+          {
+            name: 'HP',
+            type: "bar",
+            barGap: "-100%",
+            stack: 'Ad',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "rgba(222,188,22,0.8)" },
+                  { offset: 0.2, color: "rgba(222,188,22,0.5)" },
+                  { offset: 1, color: "rgba(222,188,22,0.2)" }
+                ])
+              }
+            },
+            z: -12,
+
+            data: HPData
+          },
+
+            {
+            name: 'MP',
+            type: "bar",
+            barGap: "-100%",
+            stack: 'Ad',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "rgba(7,222,164,0.8)" },
+                  { offset: 0.2, color: "rgba(7,222,164,0.5)" },
+                  { offset: 1, color: "rgba(7,222,164,0.2)" }
+                ])
+              }
+            },
+            z: -12,
+
+            data: MPData
+          },
+
+          {
+            name: 'LP',
+            type: "bar",
+            barGap: "-100%",
+            stack: 'Ad',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "rgba(156,107,211,0.8)" },
+                  { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+                  { offset: 1, color: "rgba(156,107,211,0.2)" }
+                ])
+              }
+            },
+            z: -12,
+
+            data: LPData
+          },
+
+          
+        ]
+      };
+      this.chart.setOption(option);
+      this.chart.on('click' , function (params) {
+        console.log(params + '==================')
+      })
+    },
+    drawDialog() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart2 = this.echarts.init(document.getElementById("bottomLeftChart2"));
+      let category =[];
+      let HHPData=[];
+      let HPData=[];
+      let LPData=[];
+      let MPData=[];
+      for(let i=0;i<this.latest30DayData.length;i++){
+        category[i]=this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        HHPData[i]=this.latest30DayData[i].steamHhp;
+        HPData[i]=this.latest30DayData[i].steamHp;
+        LPData[i]=this.latest30DayData[i].steamLp;
+        MPData[i]=this.latest30DayData[i].steamMp;
+      }
+      // let lineData = [
+      //   18092,
+      //   20728,
+      //   24045,
+      //   28348,
+      //   32808,
+      //   36097,
+      //   39867,
+      //   44715,
+      //   48444,
+      //   50415,
+      //   56061,
+      //   62677,
+      //   59521,
+      //   67560,
+      //   18092,
+      //   20728,
+      //   24045,
+      //   28348,
+      //   32808,
+      //   36097,
+      //   39867,
+      //   44715,
+      //   48444,
+      //   50415,
+      //   36097,
+      //   39867,
+      //   44715,
+      //   48444,
+      //   50415,
+      //   50061,
+      //   32677,
+      //   49521,
+      //   32808
+      // ];
+      // let barData = [
+      //   4600,
+      //   5000,
+      //   5500,
+      //   6500,
+      //   7500,
+      //   8500,
+      //   9900,
+      //   12500,
+      //   14000,
+      //   21500,
+      //   23200,
+      //   24450,
+      //   25250,
+      //   33300,
+      //   4600,
+      //   5000,
+      //   5500,
+      //   6500,
+      //   7500,
+      //   8500,
+      //   9900,
+      //   22500,
+      //   14000,
+      //   21500,
+      //   8500,
+      //   9900,
+      //   12500,
+      //   14000,
+      //   21500,
+      //   23200,
+      //   24450,
+      //   25250,
+      //   7500
+      // ];
+      // let rateData = [];
+      // for (let i = 0; i < 33; i++) {
+      //   let rate = barData[i] / lineData[i];
+      //   rateData[i] = rate.toFixed(2);
+      // }
+      let rateData = [];
+      for (let i = 0; i < category.length; i++) {
+        rateData.push(
+          Number(HHPData[i]) +
+          Number(HPData[i]) +
+          Number(LPData[i]) +
+          Number(MPData[i])
+        );
+      }
+
+      let option = {
+        title: {
+          text: "",
+          x: "center",
+          y: 0,
+          textStyle: {
+            color: "#B4B4B4",
+            fontSize: 16,
+            fontWeight: "normal"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(255,255,255,0.1)",
+          axisPointer: {
+            type: "shadow",
+            label: {
+              show: true,
+              backgroundColor: "#7B7DDC"
+            }
+          }
+        },
+        legend: {
+          data: ['HHP','HP','MP','LP','总消耗'],
+          // data: ['Discharged','Planned emission','Emission rate'],
+          top: "0%"
+        },
+        grid: {
+          x: "8%",
+          width: "88%",
+          y: "4%"
+        },
+        xAxis: {
+          data: category,
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: [
+          {
+            splitLine: { show: false },
+            axisLabel: {
+              formatter: "{value} "
+            }
+          },
+          {
+            splitLine: { show: false },
+            axisLabel: {
+              formatter: "{value} "
+            }
+          }
+        ],
+        series: [
+          {
+            name: '总消耗',
+            type: "line",
+            smooth: true,
+            showAllSymbol: true,
+            symbol: "emptyCircle",
+            symbolSize: 8,
+            yAxisIndex: 1,
+            itemStyle: {
+              normal: {
+                color: "#F02FC2"
+              }
+            },
+            data: rateData
+          },
+
+          {
+            name: 'HHP',
+            type: "bar",
+            stack: 'Ad',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "rgba(95,198,299,0.8)" },
+                  { offset: 0.2, color: "rgba(95,198,299,0.5)" },
+                  { offset: 1, color: "rgba(95,198,299,0.2)" }
+                ])
+              }
+            },
+            data: HHPData
+          },
+
+          {
+            name: 'HP',
+            type: "bar",
+            barGap: "-100%",
+            stack: 'Ad',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "rgba(222,188,22,0.8)" },
+                  { offset: 0.2, color: "rgba(222,188,22,0.5)" },
+                  { offset: 1, color: "rgba(222,188,22,0.2)" }
+                ])
+              }
+            },
+            z: -12,
+
+            data: HPData
+          },
+
+            {
+            name: 'MP',
+            type: "bar",
+            barGap: "-100%",
+            stack: 'Ad',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "rgba(7,222,164,0.8)" },
+                  { offset: 0.2, color: "rgba(7,222,164,0.5)" },
+                  { offset: 1, color: "rgba(7,222,164,0.2)" }
+                ])
+              }
+            },
+            z: -12,
+
+            data: MPData
+          },
+
+          {
+            name: 'LP',
+            type: "bar",
+            barGap: "-100%",
+            stack: 'Ad',
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "rgba(156,107,211,0.8)" },
+                  { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+                  { offset: 1, color: "rgba(156,107,211,0.2)" }
+                ])
+              }
+            },
+            z: -12,
+
+            data: LPData
+          },
+
+          
+        ]
+      };
+      this.chart2.setOption(option);
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

ui/src/views/monitor/elecNew/echart/bottom/bottomRightChart.vue

@@ -0,0 +1,460 @@
+<template>
+  <div @click="openSteamBalance">
+    <div id="bottomRightChart" style="width:100%;height:3.4rem;top: -40px"></div>
+    <el-dialog class="my-info-dialog" :visible.sync="openChart" title="天然气平衡" @open="open" width="1600px" destroy-on-close append-to-body>
+      <div id="bottomRightChartDialog" style="width:100%;height:600px;"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+
+export default {
+  props:['weekData', 'latest24HourData'],
+  data() {
+    return {
+      chart: null,
+      openChart: false,
+    };
+  },
+  mounted() {
+    this.draw();
+    this.charTimg();
+  },
+  mixins: [echartMixins],
+  methods: {
+    charTimg() {
+      setInterval(() => {
+        this.draw();
+      }, 6000);
+    },
+    openSteamBalance(){
+      this.openChart = true
+    },
+    open(){
+      this.$nextTick(() => {
+        this.drawDialog()
+      })
+    },
+    draw() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById("bottomRightChart"));
+      //  ----------------------------------------------------------------
+      // // 数据
+      // let dateBase = new Date();
+      // let year = dateBase.getFullYear();
+      // let dottedBase = +dateBase + 1000 * 3600 * 24;
+      // let weekCategory = [];
+      //
+      // let maxData = 12000;
+      // let weekMaxData = [];
+      // let weekLineData = [];
+      //
+      // // 周数据
+      // for (let i = 0; i < 7; i++) {
+      //   // 日期
+      //   var date = new Date((dottedBase -= 1000 * 3600 * 24));
+      //   weekCategory.unshift([date.getMonth() + 1, date.getDate()].join("/"));
+      //
+      //   // 折线图数据
+      //   weekMaxData.push(maxData);
+      //   var distance = Math.round(Math.random() * 11000 + 500);
+      //   weekLineData.push(distance);
+      // }
+      // const dateNum = [];
+      // for (let i = 0; i < this.weekData.length; i++) {
+      //   dateNum[i] = this.weekData[i].evconsume;
+      // }
+
+      // // 颜色设置
+      // let color = {
+      //   linearYtoG: {
+      //     type: "linear",
+      //     x: 0,
+      //     y: 0,
+      //     x2: 1,
+      //     y2: 1,
+      //     colorStops: [
+      //       {
+      //         offset: 0,
+      //         color: "#f5b44d"
+      //       },
+      //       {
+      //         offset: 1,
+      //         color: "#28f8de"
+      //       }
+      //     ]
+      //   },
+      //   linearGtoB: {
+      //     type: "linear",
+      //     x: 0,
+      //     y: 0,
+      //     x2: 1,
+      //     y2: 0,
+      //     colorStops: [
+      //       {
+      //         offset: 0,
+      //         color: "#43dfa2"
+      //       },
+      //       {
+      //         offset: 1,
+      //         color: "#28f8de"
+      //       }
+      //     ]
+      //   },
+      //   linearBtoG: {
+      //     type: "linear",
+      //     x: 0,
+      //     y: 0,
+      //     x2: 1,
+      //     y2: 0,
+      //     colorStops: [
+      //       {
+      //         offset: 0,
+      //         color: "#1c98e8"
+      //       },
+      //       {
+      //         offset: 1,
+      //         color: "#28f8de"
+      //       }
+      //     ]
+      //   },
+      //   areaBtoG: {
+      //     type: "linear",
+      //     x: 0,
+      //     y: 0,
+      //     x2: 0,
+      //     y2: 1,
+      //     colorStops: [
+      //       {
+      //         offset: 0,
+      //         color: "rgba(35,184,210,.2)"
+      //       },
+      //       {
+      //         offset: 1,
+      //         color: "rgba(35,184,210,0)"
+      //       }
+      //     ]
+      //   }
+      // };
+      // let option = {
+      //   tooltip: {
+      //     trigger: "item"
+      //   },
+      //   grid: {
+      //     left: 90,
+      //     right: 80,
+      //     bottom: 40,
+      //     top: "30%"
+      //   },
+      //   xAxis: {
+      //     type: "category",
+      //     position: "bottom",
+      //     axisLine: true,
+      //     axisLabel: {
+      //       color: "rgba(255,255,255,.8)",
+      //       fontSize: 12
+      //     },
+      //     data: weekCategory
+      //   },
+      //   // 下方Y轴
+      //   yAxis: {
+      //     name: "消耗",
+      //     nameLocation: "end",
+      //     nameGap: 24,
+      //     nameTextStyle: {
+      //       color: "rgba(255,255,255,.5)",
+      //       fontSize: 14
+      //     },
+      //     max: maxData,
+      //     splitNumber: 4,
+      //
+      //     axisLine: {
+      //       lineStyle: {
+      //         opacity: 0
+      //       }
+      //     },
+      //     splitLine: {
+      //       show: true,
+      //       lineStyle: {
+      //         color: "#fff",
+      //         opacity: 0.1
+      //       }
+      //     },
+      //     axisLabel: {
+      //       color: "rgba(255,255,255,.8)",
+      //       fontSize: 12
+      //     }
+      //   },
+      //   series: [
+      //     {
+      //       name: "",
+      //       type: "line",
+      //       smooth: true,
+      //       symbol: "emptyCircle",
+      //       symbolSize: 8,
+      //       itemStyle: {
+      //         normal: {
+      //           color: "#fff"
+      //         }
+      //       },
+      //       lineStyle: {
+      //         normal: {
+      //           color: "rgba(248,211,81,.7)",
+      //           width: 3
+      //         }
+      //       },
+      //       areaStyle: {
+      //         normal: {
+      //           color: color.areaBtoG
+      //         }
+      //       },
+      //       data: weekLineData,
+      //       lineSmooth: true,
+      //       markLine: {
+      //         silent: true,
+      //         data: [
+      //           {
+      //             type: "average",
+      //             name: "平均值"
+      //           }
+      //         ],
+      //         precision: 0,
+      //         label: {
+      //           normal: {
+      //             formatter: "平均值: \n {c}"
+      //           }
+      //         },
+      //         lineStyle: {
+      //           normal: {
+      //             color: "rgba(248,211,81,.7)"
+      //           }
+      //         }
+      //       },
+      //       tooltip: {
+      //         position: "top",
+      //         formatter: "{c} m",
+      //         backgroundColor: "rgba(28,152,232,.2)",
+      //         padding: 6
+      //       }
+      //     },
+      //     {
+      //       name: "占位背景",
+      //       type: "bar",
+      //       itemStyle: {
+      //         normal: {
+      //           show: true,
+      //           color: "#000",
+      //           opacity: 0
+      //         }
+      //       },
+      //       silent: true,
+      //       barWidth: "50%",
+      //       data: weekMaxData,
+      //       animation: false
+      //     }
+      //   ]
+      // };
+
+      const hourArray = [];
+      const gasArray = [];
+      let latestDate = null;
+      let data = this.latest24HourData;
+      for (let i = 0; i < data.length; i++) {
+        if (i == 0) {
+          latestDate = data[i].pullDate.toString().substr(5, 5);
+        } else if (latestDate == data[i].pullDate.toString().substr(5, 5)) {
+          hourArray.push(data[i].pullDate.toString().substr(14, 5));
+          gasArray.push(data[i].gasUsed);
+        }
+      }
+      hourArray.reverse();
+      gasArray.reverse();
+
+      let option = {
+        tooltip: {
+          trigger: "item"
+        },
+          grid: {
+          left: 90,
+          right: 80,
+          bottom: 40,
+          top: "30%"
+          },
+          xAxis: {
+            type: "category",
+            position: "bottom",
+            axisLine: true,
+            axisLabel: {
+              color: "#ffffff",
+              fontSize: 12
+            },
+            data: hourArray
+            // data: weekCategory
+          },
+        yAxis: {
+          type: 'value',
+          name: 'Unit:(Nm³)',
+          axisLabel: {
+            color: '#ffffff'
+          },
+          nameTextStyle: {
+            color: '#ffffff'
+          }
+        },
+        series: [
+          {
+            data: gasArray,
+            // data:dateNum,
+            type: 'line',
+            smooth: true,
+            symbolSize: 15,
+            color:"#28f8de",
+            lineStyle: {
+              width: 6
+            },
+            markLine: {
+              silent: true,
+              data: [
+                {
+                  type: "average",
+                  name: "额定值",
+                  yAxis: 900
+                }
+              ],
+              precision: 0,
+              label: {
+                normal: {
+                  formatter: "额定值: \n {c}"
+                }
+              },
+              lineStyle: {
+                normal: {
+                  width: 3,
+                  color: "rgba(248,211,81,.7)"
+                }
+              }
+            },
+          }
+        ]
+
+      };
+
+      this.chart.setOption(option);
+    },
+    drawDialog() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart1 = this.echarts.init(document.getElementById("bottomRightChartDialog"));
+      //  ----------------------------------------------------------------
+      // 数据
+      // let dateBase = new Date();
+      // let year = dateBase.getFullYear();
+      // let dottedBase = +dateBase + 1000 * 3600 * 24;
+      // let weekCategory = [];
+      //
+      // let maxData = 12000;
+      // let weekMaxData = [];
+      // let weekLineData = [];
+      //
+      // // 周数据
+      // for (let i = 0; i < 7; i++) {
+      //   // 日期
+      //   var date = new Date((dottedBase -= 1000 * 3600 * 24));
+      //   weekCategory.unshift([date.getMonth() + 1, date.getDate()].join("/"));
+      //
+      //   // 折线图数据
+      //   weekMaxData.push(maxData);
+      //   var distance = Math.round(Math.random() * 11000 + 500);
+      //   weekLineData.push(distance);
+      // }
+      // const dateNum = [];
+      // for (let i = 0; i < this.weekData.length; i++) {
+      //   dateNum[i] = this.weekData[i].evconsume;
+      // }
+
+      const hourArray = [];
+      const gasArray = [];
+      let latestDate = null;
+      let data = this.latest24HourData;
+      for (let i = 0; i < data.length; i++) {
+        if (i == 0) {
+          latestDate = data[i].pullDate.toString().substr(5, 5);
+        } else if (latestDate == data[i].pullDate.toString().substr(5, 5)) {
+          hourArray.push(data[i].pullDate.toString().substr(14, 5));
+          gasArray.push(data[i].gasUsed);
+        }
+      }
+      hourArray.reverse();
+      gasArray.reverse();
+
+      let option = {
+        tooltip: {
+          trigger: "item"
+        },
+        grid: {
+          left: 90,
+          right: 80,
+        },
+        xAxis: {
+          data: hourArray
+          // data: weekCategory
+        },
+        yAxis: {
+          type: 'value',
+          name: 'Unit:(Nm³)'
+        },
+        series: [
+          {
+            label: {
+              show: true,
+              position: 'top'
+            },
+            data: gasArray,
+            // data:dateNum,
+            type: 'line',
+            smooth: true,
+            symbolSize: 15,
+            color:"#1f9f90",
+            lineStyle: {
+              width: 6
+            },
+            markLine: {
+              silent: true,
+              data: [
+                {
+                  type: "average",
+                  name: "额定值",
+                  yAxis: 900
+                }
+              ],
+              precision: 0,
+              label: {
+                normal: {
+                  formatter: "额定值: \n {c}"
+                }
+              },
+              lineStyle: {
+                normal: {
+                  width: 3,
+                  color: "rgba(248,211,81,.7)"
+                }
+              }
+            },
+          }
+        ]
+
+      };
+
+      this.chart1.setOption(option);
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+
+</script>
+
+<style lang="scss" scoped>
+</style>

ui/src/views/monitor/elecNew/echart/bottom/bottomRightChart1.vue

@@ -0,0 +1,199 @@
+<template>
+    <div @click="openSteamUsed">
+      <div id="bottomRightChart1" style="width:100%;height:2.6rem;">
+      </div>
+      <el-dialog class="my-info-dialog" :visible.sync="openChart" title="天然气消耗情况" @open="open" width="1600px" destroy-on-close append-to-body>
+        <div id="bottomRightChart1Dialog" style="width:100%;height:600px;"></div>
+      </el-dialog>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+  props:['latest30DayData'],
+  data() {
+    return {
+      chart:null,
+      openChart: false,
+    };
+  },
+  mixins: [echartMixins],
+  mounted() {
+    this.draw();
+  },
+  methods: {
+    openSteamUsed(){
+      this.openChart = true
+    },
+    open(){
+      this.$nextTick(() => {
+        this.drawDialog()
+      })
+    },
+    draw() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('bottomRightChart1'))
+      const dateArray = [];
+      const planArray=[];
+      const actualArray=[];
+      for (let i = 0; i < this.latest30DayData.length; i++) {
+        dateArray[i]=  this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        planArray[i] = this.latest30DayData[i].gasPlan;
+        actualArray[i] = this.latest30DayData[i].gasUsed;
+      }
+      dateArray.reverse();
+      planArray.reverse();
+      actualArray.reverse();
+      let Option={
+        color: ['#00DDFF', '#37A2FF'],
+        tooltip: {
+          trigger: 'axis',
+          type: 'category',
+        },
+        /* 标识 */
+        legend: {
+          data: ['实际', '计划'],
+          textStyle:{
+            color: '#ffffff'//字体颜色
+          }
+        },
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '13%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: dateArray,
+            axisLabel: {//x轴文字的配置
+              show: true,
+              textStyle: {
+                color: '#ffffff',
+              }
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: 'Units:(Nm³)',
+            axisLabel: {
+              textStyle: {
+                fontSize: 10,
+                color: '#ffffff',
+                margin: 15
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                // 设置x轴颜色
+                color: '#ffffff'
+              }
+            },
+          }
+        ],
+        series: [
+          {
+            name: this.$t('实际'),
+            type: 'bar',
+            symbol: "none",
+            data: actualArray
+          },
+          {
+            name: this.$t('计划'),
+            type: 'bar',
+            symbol: "none",
+            data: planArray
+          },
+        ]
+      };
+      this.chart.setOption(Option);
+    },
+    drawDialog() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart1 = this.echarts.init(document.getElementById('bottomRightChart1Dialog'))
+      const dateArray = [];
+      const planArray=[];
+      const actualArray=[];
+      for (let i = 0; i < this.latest30DayData.length; i++) {
+        dateArray[i]=  this.latest30DayData[i].pullDate.toString().substr(5, 5);
+        planArray[i] = this.latest30DayData[i].gasPlan;
+        actualArray[i] = this.latest30DayData[i].gasUsed;
+      }
+      dateArray.reverse();
+      planArray.reverse();
+      actualArray.reverse();
+      let Option={
+        color: ['#00DDFF', '#37A2FF'],
+        tooltip: {
+          trigger: 'axis',
+          type: 'category',
+        },
+        /* 标识 */
+        legend: {
+          data: ['实际', '计划'],
+        },
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '13%',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: dateArray,
+            axisLabel: {//x轴文字的配置
+              show: true,
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: 'Units:(Nm³)',
+            axisLabel: {
+              textStyle: {
+                fontSize: 10,
+                margin: 15
+              },
+            }
+          }
+        ],
+        series: [
+          {
+            name: this.$t('实际'),
+            type: 'bar',
+            symbol: "none",
+            data: actualArray,
+          },
+          {
+            name: this.$t('计划'),
+            type: 'bar',
+            symbol: "none",
+            data: planArray,
+          },
+        ]
+      };
+      this.chart1.setOption(Option);
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+
+
+</script>
+
+<style lang="scss" scoped>
+</style>

ui/src/views/monitor/elecNew/echart/bottom/bottomRightChart2.vue

@@ -0,0 +1,230 @@
+<template>
+  <div @click="openSteamUsed">
+    <div id="bottomRightChart2" style="width:100%;height:2.6rem;">
+    </div>
+    <el-dialog class="my-info-dialog" :visible.sync="openChart" title="瞬时值" @open="open" width="1600px" destroy-on-close append-to-body>
+      <div id="bottomRightChart2Dialog" style="width:100%;height:600px;"></div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+import echarts from "@/api/cpms/echarts.min";
+
+export default {
+  props: ['latest24HourData'],
+  data() {
+    return {
+      chart:null,
+      openChart: false,
+    };
+  },
+  mixins: [echartMixins],
+  mounted() {
+    this.draw();
+  },
+  methods: {
+    openSteamUsed(){
+      this.openChart = true
+    },
+    open(){
+      this.$nextTick(() => {
+        this.drawDialog()
+      })
+    },
+    draw() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('bottomRightChart2'))
+      // let lineData = [
+      //   820, 932, 901, 934, 1290, 1330, 1320
+      // ];
+
+      const hourArray = [];
+      const gasArray = [];
+      let data = this.latest24HourData;
+      for (let i = 0; i < data.length; i++) {
+        if (i % 3 == 0) {
+          hourArray.push(data[i].pullDate.toString().substr(14, 5));
+          gasArray.push(data[i].gasRealTime);
+        }
+      }
+      hourArray.reverse();
+      gasArray.reverse();
+
+      let option={
+        legend:{
+          orient:'horizontal',
+          x: 'left',
+          y: 'top',
+        },
+        grid: {
+          top: '16%',   // 等价于 y: '16%'
+          left: '3%',
+          right: '8%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          axisLine: {
+            lineStyle: {
+              // 设置x轴颜色
+              color: '#ffffff'
+            }
+          },
+          axisLabel: {
+            rotate: 0, // 旋转角度
+            interval: 1  //设置X轴数据间隔几个显示一个，为0表示都显示
+          },
+          boundaryGap: false,
+          type: 'category',
+          data: hourArray
+        },
+        yAxis: {
+          type: 'value',
+          name: 'Units:(Nm³)',
+          axisLine: {
+            lineStyle: {
+              // 设置x轴颜色
+              color: '#ffffff'
+            }
+          },
+        },
+        series: [
+          {
+            data: gasArray,
+            type: 'line',
+            smooth: 0.5,
+            symbolSize: 10,
+            areaStyle:{
+              color:new echarts.graphic.LinearGradient(0,0,0,1,[{
+                offset:0,
+                color:'#92bda6',
+              },{
+                offset: 1,
+                color: '#2480bb'
+              }
+              ])
+              },
+            itemStyle: {
+              normal: {
+                lineStyle:{
+                  width:1,
+                  type:'solid'
+                },
+                borderColor:'red',
+                color: "#92bda6"
+              }
+            },
+          },
+
+          // {
+          //   name: 'HP',
+          //   type: "bar",
+          //   barGap: "-100%",
+          //   stack: 'Ad',
+          //   barWidth: 10,
+          //   itemStyle: {
+          //     normal: {
+          //       barBorderRadius: 5,
+          //       color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          //         { offset: 0, color: "#956FD4" },
+          //         { offset: 1, color: "#3EACE5" }
+          //       ])
+          //     }
+          //   },
+          //   z: -12,
+          //   data: lineData
+          // },
+        ]
+      }
+      this.chart.setOption(option);
+    },
+    drawDialog() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart1 = this.echarts.init(document.getElementById('bottomRightChart2Dialog'))
+      // let lineData = [
+      //   820, 932, 901, 934, 1290, 1330, 1320
+      // ];
+      const hourArray = [];
+      const gasArray = [];
+      let data = this.latest24HourData;
+      for (let i = 0; i < data.length; i++) {
+        if (i % 3 == 0) {
+          hourArray.push(data[i].pullDate.toString().substr(14, 5));
+          gasArray.push(data[i].gasRealTime);
+        }
+      }
+      hourArray.reverse();
+      gasArray.reverse();
+      let option={
+        legend:{
+          orient:'horizontal',
+          x: 'left',
+          y: 'top',
+        },
+        grid: {
+          top: '16%',   // 等价于 y: '16%'
+          left: '3%',
+          right: '8%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          axisLine: {
+            lineStyle: {
+            }
+          },
+          type: 'category',
+          data: hourArray
+        },
+        yAxis: {
+          type: 'value',
+          name: 'Units:(Nm³)',
+          axisLine: {
+            lineStyle: {
+            }
+          },
+        },
+        series: [
+          {
+            data: gasArray,
+            type: 'line',
+            smooth: 0.5,
+            symbolSize: 10,
+            label: {
+              show: true,
+              position: 'top'
+            },
+            areaStyle:{
+              color:new echarts.graphic.LinearGradient(0,0,0,1,[{
+                offset:0,
+                color:'#92bda6',
+              },{
+                offset: 1,
+                color: '#2480bb'
+              }
+              ])
+            },
+            itemStyle: {
+              normal: {
+                lineStyle:{
+                  width:1,
+                  type:'solid'
+                },
+                borderColor:'red',
+                color: "#92bda6"
+              }
+            },
+          },
+        ]
+      }
+      this.chart1.setOption(option);
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

ui/src/views/monitor/elecNew/echart/center/centerChartRate.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <div :id="id" style="width:1.5rem;height:1.25rem;"></div>
+  </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+
+export default {
+  data() {
+    return {
+      chart: null
+    };
+  },
+  mixins: [echartMixins],
+  mounted() {
+    this.draw();
+  },
+  props: {
+    id: {
+      type: String,
+      required: true,
+      default: "chartRate"
+    },
+    tips: {
+      type: Number,
+      required: true,
+      default: 50
+    },
+    colorObj: {
+      type: Object,
+      default: function() {
+        return {
+          textStyle: "#3fc0fb",
+          series: {
+            color: ["#00bcd44a", "transparent"],
+            dataColor: {
+              normal: "#03a9f4",
+              shadowColor: "#97e2f5"
+            }
+          }
+        };
+      }
+    }
+  },
+  methods: {
+    draw() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById(this.id));
+      //  ----------------------------------------------------------------
+      let tips = this.tips;
+      let option = {
+        title: [
+          {
+            text: tips * 1 + "%",
+            x: "center",
+            y: "center",
+            textStyle: {
+              color: this.colorObj.textStyle,
+              fontSize: this.colorObj.fontSize
+            }
+          }
+        ],
+        series: [
+          {
+            type: "pie",
+            radius: this.colorObj.series.radius,
+            center: ["50%", "50%", "50%", "50%"],
+            hoverAnimation: false,
+            color: this.colorObj.series.color,
+            label: {
+              normal: {
+                show: false
+              }
+            },
+            data: [
+              {
+                value: tips,
+                itemStyle: {
+                  normal: {
+                    color: this.colorObj.series.dataColor.normal,
+                    shadowBlur: 10,
+                    shadowColor: this.colorObj.series.dataColor.shadowColor
+                  }
+                }
+              },
+              {
+                value: 100 - tips
+              }
+            ]
+          }
+        ]
+      };
+      this.chart.setOption(option);
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

ui/src/views/monitor/elecNew/echart/centerLeft2/centreLeft1Chart.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <div id="centreLeft1Chart" style="width:3.25rem; height: 2.75rem;"></div>
+  </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+
+export default {
+  data() {
+    return {
+      chart: null
+    };
+  },
+  mixins: [echartMixins],
+  mounted() {
+    this.draw();
+  },
+  methods: {
+    draw() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById("centreLeft1Chart"));
+      //  ----------------------------------------------------------------
+
+      this.chart.setOption({
+        color: [
+          "#37a2da",
+          "#32c5e9",
+          "#9fe6b8",
+          "#ffdb5c",
+          "#ff9f7f",
+          "#fb7293",
+          "#e7bcf3",
+          "#8378ea"
+        ],
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c} ({d}%)"
+        },
+        toolbox: {
+          show: true
+        },
+        calculable: true,
+        legend: {
+          orient: "horizontal",
+          icon: "circle",
+          bottom: 0,
+          x: "center",
+          data: ["天然气", "长焰煤", "不粘煤", "弱粘煤", "贫煤", "燃气"],
+          textStyle: {
+            color: "#fff"
+          }
+        },
+        series: [
+          {
+            name: "增值电信业务统计表",
+            type: "pie",
+            radius: [10, 60],
+            roseType: "area",
+            center: ["50%", "40%"],
+            data: [
+              { value: 10, name: "天然气" },
+              { value: 5, name: "长焰煤" },
+              { value: 15, name: "不粘煤" },
+              { value: 25, name: "弱粘煤" },
+              { value: 20, name: "贫煤" },
+              { value: 35, name: "燃气" }
+            ]
+          }
+        ]
+      });
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

ui/src/views/monitor/elecNew/echart/centerLeft2/centreLeft2Chart.vue

@@ -0,0 +1,202 @@
+<template>
+  <div>
+    <div id="centreLeft2Chart" style="width:4.125rem; height: 4.625rem;"></div>
+  </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+
+export default {
+  data() {
+    return {
+      chart: null
+    };
+  },
+  mixins: [echartMixins],
+  mounted() {
+    this.draw();
+  },
+  methods: {
+    draw() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById("centreLeft2Chart"));
+      //  ----------------------------------------------------------------
+
+      let option = {
+        angleAxis: {
+          interval: 1,
+          type: "category",
+          data: [
+            "核电",
+            "火电",
+            "机电",
+            "煤电",
+            "水电",
+            "风电",
+            "太阳能",
+            "光伏",
+            "其他 "
+          ],
+          z: 10,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#00c7ff",
+              width: 1,
+              type: "solid"
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            show: true,
+            color: "#00c7ff",
+            margin: 8,
+            fontSize: 12
+          }
+        },
+        radiusAxis: {
+          min: 0,
+          max: 100,
+          interval: 20,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#00c7ff",
+              width: 1,
+              type: "solid"
+            }
+          },
+          axisLabel: {
+            formatter: "{value} %",
+            show: false,
+            padding: [0, 0, 20, 0],
+            color: "#00c7ff",
+            fontSize: 16
+          },
+          splitLine: {
+            lineStyle: {
+              color: "#00c7ff",
+              width: 1,
+              type: "solid"
+            }
+          }
+        },
+        legend: {
+          show: true,
+          orient: "vartical",
+          top: "center",
+          bottom: "0%",
+          itemWidth: 16,
+          itemHeight: 8,
+          itemGap: 16,
+          textStyle: {
+            color: "#A3E2F4",
+            fontSize: 12,
+            fontWeight: 0
+          },
+          data: ["A"]
+        },
+        polar: {},
+        series: [
+          {
+            name: "A",
+            type: "bar",
+            radius: ["20%", "100%"],
+            data: [
+              {
+                value: 87,
+                itemStyle: {
+                  normal: {
+                    color: "#f54d4d"
+                  }
+                }
+              },
+              {
+                value: 80,
+                itemStyle: {
+                  normal: {
+                    color: "#f87544"
+                  }
+                }
+              },
+              {
+                value: 75,
+                itemStyle: {
+                  normal: {
+                    color: "#ffae00"
+                  }
+                }
+              },
+              {
+                value: 69,
+                itemStyle: {
+                  normal: {
+                    color: "#dcff00"
+                  }
+                }
+              },
+              {
+                value: 63,
+                itemStyle: {
+                  normal: {
+                    color: "#25d053"
+                  }
+                }
+              },
+              {
+                value: 54,
+                itemStyle: {
+                  normal: {
+                    color: "#01fff5"
+                  }
+                }
+              },
+              {
+                value: 47,
+                itemStyle: {
+                  normal: {
+                    color: "#007cff"
+                  }
+                }
+              },
+              {
+                value: 40,
+                itemStyle: {
+                  normal: {
+                    color: "#4245ff"
+                  }
+                }
+              },
+              {
+                value: 35,
+                itemStyle: {
+                  normal: {
+                    color: "#c32eff"
+                  }
+                }
+              },
+              /*{
+                value: 33,
+                itemStyle: {
+                  normal: {
+                    color: "#ff62e8"
+                  }
+                }
+              }*/
+            ],
+            coordinateSystem: "polar"
+          }
+        ]
+      };
+      this.chart.setOption(option);
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

ui/src/views/monitor/elecNew/echart/centreRight2/centreRight2Chart1.vue

@@ -0,0 +1,167 @@
+<template>
+  <div>
+    <div id="centreRight2Chart1" style="width:3.25rem; height: 2.60rem;" />
+  </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+
+export default {
+  data() {
+    return {
+      chart: null
+    };
+  },
+  mixins: [echartMixins],
+  mounted() {
+    this.draw();
+  },
+  methods: {
+    draw() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById("centreRight2Chart1"));
+      //  ----------------------------------------------------------------
+      let dataBJ = [
+        [94, 69, 114, 2.08, 73, 39, 22],
+        [99, 73, 110, 2.43, 76, 48, 23],
+        [31, 12, 30, 0.5, 32, 16, 24],
+        [42, 27, 43, 1, 53, 22, 25],
+        [154, 117, 157, 3.05, 92, 58, 26],
+        [234, 185, 230, 4.09, 123, 69, 27],
+        [160, 120, 186, 2.77, 91, 50, 28]
+      ];
+
+      let dataGZ = [
+        [84, 94, 140, 2.238, 68, 18, 22],
+        [93, 77, 104, 1.165, 53, 7, 23],
+        [99, 130, 227, 3.97, 55, 15, 24],
+        [146, 84, 139, 1.094, 40, 17, 25],
+        [113, 108, 137, 1.481, 48, 15, 26],
+        [81, 48, 62, 1.619, 26, 3, 27],
+        [56, 48, 68, 1.336, 37, 9, 28]
+      ];
+
+      let dataSH = [
+        [91, 45, 125, 0.82, 34, 23, 1],
+        [65, 27, 78, 0.86, 45, 29, 2],
+        [83, 60, 84, 1.09, 73, 27, 3],
+        [109, 81, 121, 1.28, 68, 51, 4],
+        [106, 77, 114, 1.07, 55, 51, 5],
+        [109, 81, 121, 1.28, 68, 51, 6],
+        [106, 77, 114, 1.07, 55, 51, 7]
+      ];
+
+      let lineStyle = {
+        normal: {
+          width: 1,
+          opacity: 0.5
+        }
+      };
+
+      let option = {
+        radar: {
+          indicator: [
+            { name: "AQI", max: 300 },
+            { name: "PM2.5", max: 250 },
+            { name: "PM10", max: 300 },
+            { name: "CO", max: 5 },
+            { name: "NO2", max: 200 },
+            { name: "SO2", max: 100 }
+          ],
+          shape: "circle",
+          splitNumber: 5,
+          name: {
+            textStyle: {
+              color: "rgb(238, 197, 102)"
+            }
+          },
+          splitLine: {
+            lineStyle: {
+              color: [
+                "rgba(238, 197, 102, 0.1)",
+                "rgba(238, 197, 102, 0.2)",
+                "rgba(238, 197, 102, 0.4)",
+                "rgba(238, 197, 102, 0.6)",
+                "rgba(238, 197, 102, 0.8)",
+                "rgba(238, 197, 102, 1)"
+              ].reverse()
+            }
+          },
+          splitArea: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: "rgba(238, 197, 102, 0.5)"
+            }
+          }
+        },
+        series: [
+          {
+            name: "北京",
+            type: "radar",
+            lineStyle: lineStyle,
+            data: dataBJ,
+            symbol: "none",
+            itemStyle: {
+              normal: {
+                color: "#F9713C"
+              }
+            },
+            areaStyle: {
+              normal: {
+                opacity: 0.1
+              }
+            }
+          },
+          {
+            name: "上海",
+            type: "radar",
+            lineStyle: lineStyle,
+            data: dataSH,
+            symbol: "none",
+            itemStyle: {
+              normal: {
+                color: "#B3E4A1"
+              }
+            },
+            areaStyle: {
+              normal: {
+                opacity: 0.05
+              }
+            }
+          },
+          {
+            name: "广州",
+            type: "radar",
+            lineStyle: lineStyle,
+            data: dataGZ,
+            symbol: "none",
+            itemStyle: {
+              normal: {
+                color: "rgb(238, 197, 102)"
+              }
+            },
+            areaStyle: {
+              normal: {
+                opacity: 0.05
+              }
+            }
+          }
+        ]
+      };
+      this.chart.setOption(option);
+    }
+  },
+  destroyed() {
+    window.onresize = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+#centreRight2Chart1 {
+  margin: 0 auto;
+}
+</style>

ui/src/views/monitor/elecNew/elecindex.vue

@@ -0,0 +1,783 @@
+<template>
+  <div id="elec-index"  ref="appRef">
+    <dv-loading v-if="loading">Loading...</dv-loading>
+    <div v-else class="host-body bg-elec">
+      <div class="d-flex jc-center">
+        <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
+        <div class="d-flex jc-center">
+          <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
+          <div class="title">
+            <span class="title-text">电厂监控大屏</span>
+            <dv-decoration-6
+              class="title-bototm"
+              :reverse="true"
+              :color="['#50e3c2', '#67a1e5']"
+              style="width:3.125rem;height:.1rem;"
+            />
+          </div>
+          <dv-decoration-8
+            :reverse="true"
+            :color="['#568aea', '#000000']"
+            style="width:2.5rem;height:.625rem;"
+          />
+        </div>
+        <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
+      </div>
+
+      <!-- 第二行 -->
+      <div class="d-flex jc-between px-2">
+        <div class="d-flex" style="width: 40%">
+          <div
+            class="react-right ml-4" v-bind:style="{backgroundColor:bgCol1,width:wh,textAlign:tAlign}"
+            @click="changeDashboard(1)">
+            <span class="react-before"></span>
+            <span class="text" id="aa">数据监控</span>
+          </div>
+          <div class="react-right ml-3" v-bind:style="{backgroundColor:bgCol2,width:wh,textAlign:tAlign}"
+               @click="changeDashboard(2)">
+            <span class="text colorBlue"></span>
+            <span class="text" id="bb">蒸汽平衡</span>
+          </div>
+          <div class="react-right ml-2" v-bind:style="{backgroundColor:bgCol3,width:wh,textAlign:tAlign}"
+               @click="changeDashboard(3)">
+            <span class="text colorBlue"></span>
+            <span class="text" id="cc">环保监控</span>
+          </div>
+        </div>
+        <div style="width: 40%" class="d-flex">
+          <div class="react-left bg-color-blue mr-3">
+            <span class="text fw-b">北京时间</span>
+          </div>
+          <div
+            class="react-left mr-3"
+            style="width: 6.25rem; background-color: #0f1325;"
+          >
+            <span style="text-align: center" class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
+          </div>
+          <div class="react-left  mr-3" style="width: 2.25rem; background-color: #0f1325;" @click="openNewWindow">
+            <span class="text fw-b"> <svg-icon icon-class="fullscreen" /></span>
+          </div>
+        </div>
+      </div>
+
+      <div class="body-box" v-if="dashboard === 1">
+        <!-- 第三行数据 -->
+        <div class="content-box">
+          <div>
+            <dv-border-box-12>
+              <centerLeft1 :monthData="monthData" :latest30DayData="latest30DayData"/>
+            </dv-border-box-12>
+          </div>
+          <!-- 中间 -->
+          <div>
+            <center :dashboardelecdata="dashboardelecdata" :latest24HourData="latest24HourData" />
+          </div>
+          <!-- 中间 -->
+          <div>
+            <centerRight2 :dashboardelecdata="[dashboardelecdata,monthData]" :latest30DayData="latest30DayData"/>
+          </div>
+          <div>
+            <dv-border-box-13>
+              <centerRight1 :fiftydayData="fiftydayData" :latest30DayData="latest30DayData"/>
+            </dv-border-box-13>
+          </div>
+        </div>
+
+        <!-- 第四行数据 -->
+        <div class="bototm-box">
+          <dv-border-box-13>
+            <bottomLeft :monthData="monthData" :latest30DayData="latest30DayData"/>
+          </dv-border-box-13>
+          <div class="bototm-box1">
+            <dv-border-box-12>
+              <bottom-right :weekData="weekData" :dashboardelecdata="dashboardelecdata":latest24HourData="latest24HourData" />
+            </dv-border-box-12>
+            <div class="bototm-box2">
+              <dv-border-box-12>
+                <div class="bg-color-black">
+                  <div class="d-flex pt-2 pl-2">
+                <span style="color:#5cd9e8">
+                  <icon name="chart-bar"></icon>
+                </span>
+                    <div class="d-flex">
+                      <span class="fs-xl text mx-2">天然气日消耗情况</span>
+                    </div>
+                  </div>
+                  <div>
+                      <bottom-right1 :latest30DayData="latest30DayData"/>
+                  </div>
+                </div>
+              </dv-border-box-12>
+              <dv-border-box-12>
+                <div class="bg-color-black">
+                  <div class="d-flex pt-2 pl-2">
+                <span style="color:#5cd9e8">
+                  <icon name="chart-bar"></icon>
+                </span>
+                    <div class="d-flex">
+                      <span class="fs-xl text mx-2">瞬时值</span>
+                    </div>
+                  </div>
+                  <div>
+                    <bottom-right2 :latest24HourData="latest24HourData" />
+                  </div>
+                </div>
+              </dv-border-box-12>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="body-box" v-if="dashboard === 2">
+        <div>
+          <front-elec-two :dashboardelecdata="dashboardelecdata"></front-elec-two>
+        </div>
+
+      </div>
+      <div class="body-box" v-if="dashboard === 3">
+        <div>
+          <front-elec-three
+            :dashboardelecdata="dashboardelecdata"
+            :dashboarddata="dashboarddata"
+            :latest7DayData="latest7DayData"
+            :alarmList="alarmList"
+          >
+          </front-elec-three>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import centerLeft1 from "./centerLeft1";
+import centerLeft2 from "./centerLeft2";
+import centerRight1 from "./centerRight1";
+import centerRight2 from "./centerRight2";
+import center from "./center";
+import bottomLeft from "./bottomLeft";
+import bottomRight from "./bottomRight";
+import bottomRight1 from "./echart/bottom/bottomRightChart1"
+import bottomRight2 from "./echart/bottom/bottomRightChart2"
+import frontElecTwo from "@/views/monitor/elec/frontElecTwo";
+import frontElecThree from "@/views/monitor/elec/frontElecThree";
+import '@/assets/styles/index.scss' // global css
+import '@/common/flexible.js';
+import dayjs from "dayjs";
+import {selectLast,selectMonth,selecctfiftyday} from "@/api/aspen/dashboarddayelec";
+import {selectWeek} from "@/api/aspen/dashboarddayeleceight";
+import {getRealtimeByMaxDate} from "@/api/aspen/realtime.js";
+import {listDayLatest7, listDayLatest30} from "@/api/aspen/day.js";
+import {listHourLatest24} from "@/api/aspen/hour.js";
+import {listAlarm} from "@/api/aspen/alarm.js";
+export default {
+  data() {
+    return {
+      loading: true,
+      dashboard: 1,
+      dateDay: null,
+      dateYear: null,
+      dateWeek: null,
+      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
+      timer:null,
+      bgCol1:"#0f1325",
+      bgCol2:"#0f1325",
+      bgCol3:"#0f1325",
+      bgCol0:"#0a84ff",
+      wh:"3.25rem",
+      tAlign:"left",
+      // 预警数据
+      alarmList: [],
+      // 最近24小时的数据
+      latest24HourData: [],
+      // 最近7天的数据
+      latest7DayData: [],
+      // 最近30天的数据
+      latest30DayData: {},
+      // 电厂大屏实时数据
+      dashboardelecdata: {
+        pageNum: 1,
+        pageSize: 20,
+        createrCode: null,
+        createdate: null,
+        updaterCode: null,
+        updatedate: null,
+        gtg1Lv: null,
+        gtg1Wr: null,
+        gtg2Lv: null,
+        gtg2Wr: null,
+        gtg3Lv: null,
+        gtg3Wr: null,
+        stg1Lv: null,
+        stg1Wr: null,
+        mwhLv: null,
+        mwhWr: null,
+        hhp: null,
+        hp: null,
+        lp: null,
+        mp: null,
+        totalConsumption: null,
+        hhpNum: null,
+        hhpTemp: null,
+        hpNum: null,
+        hpTemp: null,
+        lpNum: null,
+        lpTemp: null,
+        mpNum: null,
+        mpTemp: null,
+        shihua: null,
+        shiyou: null,
+        shunshiliang: null,
+        ypg: null,
+        daodianliang: null,
+        eveLec: null,
+        fenggucha: null,
+        bycElec: null,
+        bocElec: null,
+        dataDate: null,
+        dateDay: null
+      },
+      dashboarddata: {
+        latest7DayData:[],
+        rainPh: null,
+        rainCod: null,
+        wastePh: null,
+        wasteCod: null
+      },
+      monthData:{
+        pageNum: 1,
+        pageSize: 20,
+        createrCode: null,
+        createdate: null,
+        updaterCode: null,
+        updatedate: null,
+        gtg1Lv: null,
+        gtg1Wr: null,
+        gtg2Lv: null,
+        gtg2Wr: null,
+        gtg3Lv: null,
+        gtg3Wr: null,
+        stg1Lv: null,
+        stg1Wr: null,
+        mwhLv: null,
+        mwhWr: null,
+        hhp: null,
+        hp: null,
+        lp: null,
+        mp: null,
+        totalConsumption: null,
+        hhpNum: null,
+        hhpTemp: null,
+        hpNum: null,
+        hpTemp: null,
+        lpNum: null,
+        lpTemp: null,
+        mpNum: null,
+        mpTemp: null,
+        shihua: null,
+        shiyou: null,
+        shunshiliang: null,
+        ypg: null,
+        daodianliang: null,
+        eveLec: null,
+        fenggucha: null,
+        bycElec: null,
+        bocElec: null,
+        dataDate: null,
+        dateDay: null
+      },
+      weekData:{
+        pageNum: 1,
+        pageSize: 20,
+        createrCode: null,
+        createdate: null,
+        updaterCode: null,
+        updatedate: null,
+        evconsume: null,
+        elecp: null,
+        hechengqi: null,
+        u2: null,
+        dataDate: null,
+        dateDay: null
+      },
+      fiftydayData:{
+        pageNum: 1,
+        pageSize: 20,
+        createrCode: null,
+        createdate: null,
+        updaterCode: null,
+        updatedate: null,
+        gtg1Lv: null,
+        gtg1Wr: null,
+        gtg2Lv: null,
+        gtg2Wr: null,
+        gtg3Lv: null,
+        gtg3Wr: null,
+        stg1Lv: null,
+        stg1Wr: null,
+        mwhLv: null,
+        mwhWr: null,
+        hhp: null,
+        hp: null,
+        lp: null,
+        mp: null,
+        totalConsumption: null,
+        hhpNum: null,
+        hhpTemp: null,
+        hpNum: null,
+        hpTemp: null,
+        lpNum: null,
+        lpTemp: null,
+        mpNum: null,
+        mpTemp: null,
+        shihua: null,
+        shiyou: null,
+        shunshiliang: null,
+        ypg: null,
+        daodianliang: null,
+        eveLec: null,
+        fenggucha: null,
+        bycElec: null,
+        bocElec: null,
+        dataDate: null,
+        dateDay: null
+      }
+    };
+  },
+  components: {
+    centerLeft1,
+    centerLeft2,
+    centerRight1,
+    centerRight2,
+    center,
+    bottomLeft,
+    bottomRight,
+    bottomRight1,
+    bottomRight2,
+    frontElecTwo,
+    frontElecThree
+  },
+  mounted() {
+    if(this.dashboard===1){
+      this.bgCol1="#1a5cd7"
+    }
+    this.timer = setInterval(()=>{
+      const date= dayjs(new Date());
+      this.dateDay = date.format('HH:mm:ss');
+      this.dateYear = date.format('YYYY年MM月DD日');
+      this.dateWeek = date.format(this.weekday[date.day()]);
+    },1000),
+      this.setScale();
+    window.addEventListener("resize", this.debounce(this.setScale, 100));
+    // * 适配处理
+    this.cancelLoading();
+  },
+  created() {
+    // 抓取实时数据
+    this.getRealtimeData();
+    // 每隔5秒抓取一次实时数据
+    window.setInterval(() => {
+      this.getRealtimeData();
+    }, 5000);
+    // 抓取最近7天的数据
+    this.getLatest7DayData();
+    // 抓取最近30天的数据
+    this.getLatest30DayData();
+    // 抓取最近24小时的数据
+    this.getLatest24HourData();
+    // 抓取预警数据
+    this.getAlarmData();
+    // 每隔五秒抓取一次预警数据
+    window.setInterval(() => {
+      this.getAlarmData();
+    }, 5000);
+
+    // this.getList1();
+    // this.getMonthList1();
+    // this.getWeekList();
+    // this.getFiftydayList();
+    // // 每隔30秒请求一次数据
+    // window.setInterval(() => {
+    //   setTimeout(() => {
+    //     ///调取接口获取数据
+    //     this.getList1();
+    //   }, 0)
+    // }, 30000)
+    // // 一天请求一次数据
+    // window.setInterval(() => {
+    //   setTimeout(() => {
+    //     ///调取接口获取数据
+    //     this.getMonthList1();
+    //   }, 0)
+    // }, 1000 * 10 * 6 * 60 * 6)
+    //
+    // // 一天请求一次数据
+    // window.setInterval(() => {
+    //   setTimeout(() => {
+    //     ///调取接口获取数据
+    //     this.getWeekList();
+    //   }, 0)
+    // }, 1000 * 10 * 6 * 60 * 6)
+    //
+    // // 一天请求一次数据
+    // window.setInterval(() => {
+    //   setTimeout(() => {
+    //     ///调取接口获取数据
+    //     this.getFiftydayList();
+    //   }, 0)
+    // }, 1000 * 10 * 6 * 60 * 6)
+  },
+  methods: {
+    /** 抓取预警数据 */
+    getAlarmData() {
+      listAlarm(null).then(response => {
+        let data = response.rows;
+        // 清空数组
+        this.alarmList = [];
+        for (let i = 0; i < data.length; i++) {
+          this.alarmList.push([
+            data[i].alarmTime.toString().substr(0, 10) + ' ' + data[i].alarmTime.toString().substr(11, 8),
+            data[i].alarmValue,
+            data[i].code,
+            data[i].description
+          ]);
+        }
+        // 不足8条数据，补空字符串，避免轮播表变形
+        if (data.length < 8) {
+          for (let i = 0; i < 8 - data.length; i++) {
+            this.alarmList.push(['', '', '', '']);
+          }
+        }
+      });
+    },
+    /** 抓取最近24小时的数据 */
+    getLatest24HourData() {
+      listHourLatest24().then(response => {
+        // 最近24小时的数据
+        let data = response.rows;
+        for (let i = 0; i < data.length; i++) {
+          this.latest24HourData.push(data[i]);
+        }
+      });
+    },
+    /** 抓取最近30天的数据 */
+    getLatest30DayData() {
+      listDayLatest30().then(response => {
+        // 最近30天的数据
+        this.latest30DayData = response.rows;
+      });
+    },
+    /** 抓取最近7天的数据 */
+    getLatest7DayData() {
+      listDayLatest7().then(response => {
+        // 最近7天的数据
+        let data = response.rows;
+        for (let i = 0; i < data.length; i++) {
+          this.latest7DayData.push(data[i]);
+          this.dashboarddata.latest7DayData.push(data[i]);
+        }
+      });
+    },
+    /** 抓取实时数据 */
+    getRealtimeData() {
+      getRealtimeByMaxDate().then(response => {
+        // 电厂大屏实时数据
+        let data = response.data;
+        // 第一页
+        this.dashboardelecdata.gtg1Lv = data.gtg1PowerGenLevel;
+        this.dashboardelecdata.gtg2Lv = data.gtg2PowerGenLevel;
+        this.dashboardelecdata.gtg3Lv = data.gtg3PowerGenLevel;
+        this.dashboardelecdata.stg1Lv = data.stgPowerGenLevel;
+        this.dashboardelecdata.mwhLv = data.totalPowerGen;
+        this.dashboardelecdata.mwhWr = data.totalEfficiency;
+        this.dashboardelecdata.stg1Wr = data.stgEfficiency;
+        this.dashboardelecdata.gtg3Wr = data.gtg3Efficiency;
+        this.dashboardelecdata.gtg2Wr = data.gtg2Efficiency;
+        this.dashboardelecdata.gtg1Wr = data.gtg1Efficiency;
+        this.dashboardelecdata.sub = data.sub;
+        this.dashboardelecdata.elecPowerGen = data.elecPowerGen;
+        this.dashboardelecdata.elecPowerSwitch = data.elecPowerSwitch;
+        this.dashboardelecdata.elecUsed = data.elecUsed;
+        this.dashboardelecdata.gasLeft = data.gasLeft;
+        this.dashboardelecdata.gasElec = data.gasElec;
+        this.dashboardelecdata.gasSynGas = data.gasSynGas;
+        this.dashboardelecdata.gasU2 = data.gasU2;
+        this.dashboardelecdata.gasStyrene = data.gasStyrene;
+        // 第二页
+        this.dashboardelecdata.hhpPphhp = data.hhpPphhp;
+        this.dashboardelecdata.hhpAaae = data.hhpAaae;
+        this.dashboardelecdata.hhpGaa = data.hhpGaa;
+        this.dashboardelecdata.hhpSyn = data.hhpSyn;
+        this.dashboardelecdata.hhpP3802 = data.hhpP3802;
+        this.dashboardelecdata.hpLpg = data.hpLpg;
+        this.dashboardelecdata.hpSub = data.hpSub;
+        this.dashboardelecdata.hpNg = data.hpNg;
+        this.dashboardelecdata.hpJ1501 = data.hpJ1501;
+        this.dashboardelecdata.hpJ1504In = data.hpJ1504In;
+        this.dashboardelecdata.hpJ1504Out = data.hpJ1504Out;
+        this.dashboardelecdata.hpUser = data.hpUser;
+        this.dashboardelecdata.mpNcipMp = data.mpNcipMp;
+        this.dashboardelecdata.mp150511 = data.mp150511;
+        this.dashboardelecdata.mp150512 = data.mp150512;
+        this.dashboardelecdata.mpPpMp = data.mpPpMp;
+        this.dashboardelecdata.mpP9801In = data.mpP9801In;
+        this.dashboardelecdata.mpP9801Out = data.mpP9801Out;
+        this.dashboardelecdata.mpJ1502 = data.mpJ1502;
+        this.dashboardelecdata.mpUser = data.mpUser;
+        this.dashboardelecdata.lpPpLp = data.lpPpLp;
+        this.dashboardelecdata.lpEmpty = data.lpEmpty;
+        this.dashboardelecdata.lpMpLetdown = data.lpMpLetdown;
+        this.dashboardelecdata.lpJ1509 = data.lpJ1509;
+        this.dashboardelecdata.lpJ1503 = data.lpJ1503;
+        this.dashboardelecdata.lpLdpeTs = data.lpLdpeTs;
+        this.dashboardelecdata.lpLdpeDm = data.lpLdpeDm;
+        this.dashboardelecdata.lpUser = data.lpUser;
+        this.dashboardelecdata.bccYpc = data.bccYpc;
+        this.dashboardelecdata.bccSyn = data.bccSyn;
+        // 第三页
+        this.dashboardelecdata.hrsg1SmokeConvert = data.hrsg1SmokeConvert;
+        this.dashboardelecdata.hrsg1So2Convert = data.hrsg1So2Convert;
+        this.dashboardelecdata.hrsg1NoxConvert = data.hrsg1NoxConvert;
+        this.dashboardelecdata.hrsg2SmokeConvert = data.hrsg2SmokeConvert;
+        this.dashboardelecdata.hrsg2So2Convert = data.hrsg2So2Convert;
+        this.dashboardelecdata.hrsg2NoxConvert = data.hrsg2NoxConvert;
+        this.dashboardelecdata.hrsg3SmokeConvert = data.hrsg3SmokeConvert;
+        this.dashboardelecdata.hrsg3So2Convert = data.hrsg3So2Convert;
+        this.dashboardelecdata.hrsg3NoxConvert = data.hrsg3NoxConvert;
+        this.dashboarddata.rainPh = data.rainPh;
+        this.dashboarddata.rainCod = data.rainCod;
+        this.dashboarddata.wastePh = data.wastePh;
+        this.dashboarddata.wasteCod = data.wasteCod;
+      });
+    },
+    /** 查询dashboarddayelec抓取数据列表 */
+    getList1()
+    {
+      selectLast(this.queryParams).then(response => {
+        this.dashboardelecdata = response.data;
+      });
+    },
+    /** 查询dashboarddayelec近三十天抓取数据列表 */
+    getMonthList1()
+    {
+      selectMonth(this.queryParams).then(response => {
+        this.monthData = response.data;
+      });
+    },
+    /** 查询dashboarddayelec近一周抓取数据列表 */
+    getWeekList()
+    {
+      selectWeek(this.queryParams).then(response => {
+        this.weekData = response.data;
+      });
+    },
+
+    /** 查询dashboarddayelec近49天抓取数据列表 */
+    getFiftydayList()
+    {
+      selecctfiftyday(this.queryParams).then(response => {
+        this.fiftydayData = response.data;
+      });
+    },
+    cancelLoading() {
+      setTimeout(() => {
+        this.loading = false;
+      }, 500);
+    },
+    getScale() {
+      let { width, height } = this;
+      let wh = window.innerHeight / height;
+      let ww = window.innerWidth / width;
+      console.log(ww < wh ? ww : wh);
+      return ww < wh ? ww : wh;
+    },
+    setScale() {
+      if(window.innerHeight ==1080){
+        this.height = 1080
+      }else{
+        this.height = 937
+
+      }
+      this.scale = this.getScale();
+      if (this.$refs.ScaleBox) {
+        this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
+      }
+    },
+    debounce(fn, delay) {
+      let delays = delay || 500;
+      let timer;
+      return function () {
+        let th = this;
+        let args = arguments;
+        if (timer) {
+          clearTimeout(timer);
+        }
+        timer = setTimeout(function () {
+          timer = null;
+          fn.apply(th, args);
+        }, delays);
+      };
+    },
+    changeDashboard(val) {
+      if (val === 1) {
+        this.dashboard = 1
+        this.bgCol1="#1a5cd7";
+        this.bgCol2="#0f1325";
+        this.bgCol3="#0f1325";
+      }else if (val === 2) {
+        this.dashboard = 2,
+        this.bgCol2="#1a5cd7";
+        this.bgCol1="#0f1325";
+        this.bgCol3="#0f1325";
+      }else if (val === 3) {
+        this.dashboard = 3,
+        this.bgCol3="#1a5cd7";
+        this.bgCol1="#0f1325";
+        this.bgCol2="#0f1325";
+      }
+
+    },
+    openNewWindow() {
+      let routeData = this.$router.resolve({
+        path: "/elecDashboard",
+      });
+      window.open('/cpms/index.html#/elecDashboard', '_blank');
+    },
+  }
+};
+
+</script>
+
+<style lang="scss">
+#elec-index {
+  color: #ffffff;
+  background-color: #000000;
+  width: 100%;
+  height: 100vh;
+  .bg-elec {
+    padding: 0.2rem 0.2rem 0 0.2rem;
+    background-size: cover;
+    background-position: center center;
+    background-image: url("../../../assets/image/elec/bg.jpg");
+    height: 100%;
+  }
+
+  .host-body {
+    .title {
+      position: relative;
+      width: 6.25rem;
+      text-align: center;
+      background-size: cover;
+      background-repeat: no-repeat;
+
+      .title-text {
+        font-size: 0.4rem;
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        top: 30%;
+        transform: translate(-50%);
+        font-weight: 600;
+      }
+
+      .title-bototm {
+        position: absolute;
+        bottom: -0.375rem;
+        left: 50%;
+        transform: translate(-50%);
+      }
+    }
+
+    // 平行四边形
+    .react-left {
+      cursor: pointer;
+      font-size: 0.225rem;
+      width: 3.75rem;
+      height: 0.625rem;
+      line-height: 0.625rem;
+      text-align: center;
+      transform: skewX(-45deg);
+
+      .react-after {
+        position: absolute;
+        right: -0.3125rem;
+        top: 0;
+        height: 0.625rem;
+        width: 0.625rem;
+        background-color: #0f1325;
+        transform: skewX(45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(45deg);
+      }
+    }
+
+    .react-right {
+      cursor: pointer;
+      font-size: 0.225rem;
+      width: 3.75rem;
+      height: 0.625rem;
+      line-height: 0.625rem;
+      text-align: center;
+      transform: skewX(45deg);
+
+      .react-before {
+        position: relative;
+        left: -1.3125rem;
+        top: 0;
+        height: 0.625rem;
+        width: 0.625rem;
+        background-color: #0f1325;
+        transform: skewX(-45deg);
+      }
+
+      .text {
+        display: inline-block;
+        transform: skewX(-45deg);
+      }
+    }
+
+    .body-box {
+      margin-top: 0.2rem;
+      display: flex;
+      flex-direction: column;
+
+      //下方区域的布局
+      .content-box {
+        display: grid;
+        grid-template-columns: 6fr 7fr 2fr 2fr;
+      }
+      // 底部数据
+      .bototm-box {
+        display: grid;
+        grid-template-columns: repeat(2, 50%);
+        grid-template-rows: repeat(2,100%);
+      }
+      .bototm-box1 {
+        display: grid;
+        grid-template-rows: repeat(2,50%);
+      }
+      .bototm-box2 {
+        display: grid;
+        grid-template-columns: repeat(2,50%);
+      }
+    }
+  }
+}
+#aa{
+  position: absolute;
+  right: 100px;
+}
+#bb{
+  position: absolute;
+  right: 100px;
+}
+#cc{
+  position: absolute;
+  right: 80px;
+}
+.fs-xl {
+  font-size: 0.18rem;
+}
+</style>

ui/src/views/monitor/elecNew/frontElecThree.vue

@@ -0,0 +1,263 @@
+<template>
+  <!-- 电厂大屏第三页：环保监控 -->
+  <div id="frontThree">
+      <!-- 第一排开始 -->
+      <div id="rowOne">
+        <!-- HRSG #1 -->
+        <dv-border-box-1 class="outer-div">
+          <div class="inner-div">
+            <analysisTopLeft class="analysis-top" v-bind="$attrs"></analysisTopLeft>
+          </div>
+          <div class="inner-div">
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">烟尘</span>
+              <dv-water-level-pond :config="configTopLeft1" class="analysis-percentage"/>
+            </div>
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">SO2</span>
+              <dv-water-level-pond :config="configTopLeft2" class="analysis-percentage"/>
+            </div>
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">NOx</span>
+              <dv-water-level-pond :config="configTopLeft3" class="analysis-percentage"/>
+            </div>
+          </div>
+        </dv-border-box-1>
+        <!-- HRSG #2 -->
+        <dv-border-box-1 class="outer-div">
+          <div class="inner-div">
+            <analysisTopCenter class="analysis-top" v-bind="$attrs"></analysisTopCenter>
+          </div>
+          <div class="inner-div">
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">烟尘</span>
+              <dv-water-level-pond :config="configTopCenter1" class="analysis-percentage"/>
+            </div>
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">SO2</span>
+              <dv-water-level-pond :config="configTopCenter2" class="analysis-percentage"/>
+            </div>
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">NOx</span>
+              <dv-water-level-pond :config="configTopCenter3" class="analysis-percentage"/>
+            </div>
+          </div>
+        </dv-border-box-1>
+        <!-- HRSG #3 -->
+        <dv-border-box-1 class="outer-div">
+          <div class="inner-div">
+            <analysisTopRight class="analysis-top" v-bind="$attrs"></analysisTopRight>
+          </div>
+          <div class="inner-div">
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">烟尘</span>
+              <dv-water-level-pond :config="configTopRight1" class="analysis-percentage"/>
+            </div>
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">SO2</span>
+              <dv-water-level-pond :config="configTopRight2" class="analysis-percentage"/>
+            </div>
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">NOx</span>
+              <dv-water-level-pond :config="configTopRight3" class="analysis-percentage"/>
+            </div>
+          </div>
+        </dv-border-box-1>
+      </div>
+      <!-- 第一排结束 -->
+      <!-- 第二排开始 -->
+      <div id="rowTwo">
+        <dv-border-box-13 class="outer-div">
+          <div class="analysis-bottom-box">
+            <!-- PH 柱状图 -->
+            <analysisBottomLeft1 class="analysis-bottom" v-bind="$attrs"></analysisBottomLeft1>
+            <!-- COD 柱状图 -->
+            <analysisBottomLeft2 class="analysis-bottom" v-bind="$attrs"></analysisBottomLeft2>
+          </div>
+          <div class="analysis-bottom-box">
+            <!-- PH 折线图 -->
+            <analysisBottomLeft3 class="analysis-bottom" v-bind="$attrs"></analysisBottomLeft3>
+            <!-- COD 折线图 -->
+            <analysisBottomLeft4 class="analysis-bottom" v-bind="$attrs"></analysisBottomLeft4>
+          </div>
+        </dv-border-box-13>
+        <div id="scroll-board-box">
+          <!-- 预警大屏 -->
+          <dv-scroll-board :config="configBottomRight"/>
+        </div>
+      </div>
+      <!-- 第二排结束 -->
+  </div>
+</template>
+
+<script>
+  import analysisBottomLeft1 from './analysisBottomLeft1.vue';
+  import analysisBottomLeft2 from './analysisBottomLeft2.vue';
+  import analysisBottomLeft3 from './analysisBottomLeft3.vue';
+  import analysisBottomLeft4 from './analysisBottomLeft4.vue';
+  import analysisTopLeft from './analysisTopLeft.vue';
+  import analysisTopCenter from './analysisTopCenter.vue';
+  import analysisTopRight from './analysisTopRight.vue';
+
+  export default {
+      name: "materialBalance",
+      components: {
+        analysisBottomLeft1, analysisBottomLeft2, analysisBottomLeft3, analysisBottomLeft4,
+        analysisTopLeft, analysisTopCenter, analysisTopRight
+      },
+      props: ['dashboardelecdata', 'alarmList'],
+      data() {
+        return {
+          // 第一排左上角水位图配置、基准值、实测值
+          configTopLeft1: {}, configTopLeft2: {}, configTopLeft3: {},
+          limitTopLeft1: 100, limitTopLeft2: 572, limitTopLeft3: 2050,
+          dataTopLeft1: this.dashboardelecdata.hrsg1SmokeConvert,
+          dataTopLeft2: this.dashboardelecdata.hrsg1So2Convert,
+          dataTopLeft3: this.dashboardelecdata.hrsg1NoxConvert,
+          // 第一排中间水位图配置、基准值、实测值
+          configTopCenter1: {}, configTopCenter2: {}, configTopCenter3: {},
+          limitTopCenter1: 100, limitTopCenter2: 572, limitTopCenter3: 2050,
+          dataTopCenter1: this.dashboardelecdata.hrsg2SmokeConvert,
+          dataTopCenter2: this.dashboardelecdata.hrsg2So2Convert,
+          dataTopCenter3: this.dashboardelecdata.hrsg2NoxConvert,
+          // 第一排右上角水位图配置、基准值、实测值
+          configTopRight1: {}, configTopRight2: {}, configTopRight3: {},
+          limitTopRight1: 100, limitTopRight2: 572, limitTopRight3: 2050,
+          dataTopRight1: this.dashboardelecdata.hrsg3SmokeConvert,
+          dataTopRight2: this.dashboardelecdata.hrsg3So2Convert,
+          dataTopRight3: this.dashboardelecdata.hrsg3NoxConvert,
+          // 第二排右下角轮播表表头、表数据、表配置
+          tableHeaderBottomRight: ['时间', '值', '位号', '内容'],
+          tableDataBottomRight: this.alarmList,
+            // [
+              // ['<span class="span-rw">2022-4-2 06:22</span>', 'someData', 'QT12001', ' leakage #1HRSG DUCT BURNRE'],
+              // ['2022-4-2 13:43', 'someData', 'QT12501', ' CO leakage #1HRSG offgas system'],
+              // ['2022-4-2 15:23', 'someData', '<span>QT12502<i class="icon icon-shang"></i></span>', ' CO leakage #1HRSG offgas system'],
+              // ['2022-4-2 19:01', 'someData', 'QT22001', ' leakage #2HRSG DUCT BURNRE', ],
+              // ['2022-4-3 01:00', 'someData', 'QT22501', ' CO leakage #2HRSG offgas system', ],
+              // ['2022-4-3 04:50', 'someData', 'QT22502', ' CO leakage #2HRSG offgas system', ],
+              // ['2022-4-3 12:21', 'someData', 'QT32001', ' leakage #3HRSG DUCT BURNRE', ],
+              // ['2022-4-5 08:22', 'someData', 'AI82201', 'SC @ HRSG#1 HP DRUM BLOWDOWN', ],
+              // ['2022-4-5 12:10', 'someData', 'AI82302', 'PH @ HRSG#2 HP DRUM BLOWDOWN', ],
+              // ['2022-4-5 14:46', 'someData', 'AI82403', 'CC @ HRSG#3 HP DRUM DISCHARGE'],
+              // ['2022-4-5 14:46', 'someData', 'AI82403', 'CC @ HRSG#3 HP DRUM DISCHARGE'],
+              // ['2022-4-5 14:46', 'someData', 'AI82403', 'CC @ HRSG#3 HP DRUM DISCHARGE'],
+              // ['2022-4-5 14:46', 'someData', 'AI82403', 'CC @ HRSG#3 HP DRUM DISCHARGE'],
+              // ['2022-4-5 14:46', 'someData', 'AI82403', 'CC @ HRSG#3 HP DRUM DISCHARGE']
+            // ],
+          configBottomRight: {}
+        };
+      },
+      methods: {
+        /**
+         * 第一排左上角水位图初始化
+         */
+      initTopLeft() {
+        this.configTopLeft1 = {
+          data: [ ( (this.dataTopLeft1/this.limitTopLeft1) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopLeft1 + ' mg/m3',
+          shape: 'roundRect'
+        };
+        this.configTopLeft2 = {
+          data: [ ( (this.dataTopLeft2/this.limitTopLeft2) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopLeft2 + ' mg/m3',
+          shape: 'roundRect'
+        };
+        this.configTopLeft3 = {
+          data: [ ( (this.dataTopLeft3/this.limitTopLeft3) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopLeft3 + ' mg/m3',
+          shape: 'roundRect'
+        };
+      },
+      /**
+       * 第一排中间水位图初始化
+       */
+      initTopCenter() {
+        this.configTopCenter1 = {
+          data: [ ( (this.dataTopCenter1/this.limitTopCenter1) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopCenter1 + ' mg/m3',
+          shape: 'roundRect'
+        };
+        this.configTopCenter2 = {
+          data: [ ( (this.dataTopCenter2/this.limitTopCenter2) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopCenter2 + ' mg/m3',
+          shape: 'roundRect'
+        };
+        this.configTopCenter3 = {
+          data: [ ( (this.dataTopCenter3/this.limitTopCenter3) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopCenter3 + ' mg/m3',
+          shape: 'roundRect'
+        };
+      },
+      /**
+       * 第一排右上角水位图初始化
+       */
+      initTopRight() {
+        this.configTopRight1 = {
+          data: [ ( (this.dataTopRight1/this.limitTopRight1) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopRight1 + ' mg/m3',
+          shape: 'roundRect'
+        };
+        this.configTopRight2 = {
+          data: [ ( (this.dataTopRight2/this.limitTopRight2) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopRight2 + ' mg/m3',
+          shape: 'roundRect'
+        };
+        this.configTopRight3 = {
+          data: [ ( (this.dataTopRight3/this.limitTopRight3) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopRight3 + ' mg/m3',
+          shape: 'roundRect'
+        };
+      },
+      /**
+       * 第二排右下角轮播表配置初始化
+       */
+      initBottomRight() {
+        this.configBottomRight = {
+          data: this.tableDataBottomRight,
+          header: this.tableHeaderBottomRight,
+          rowNum: 8,
+          headerBGC: '#00BAFF',
+          oddRowBGC: '#003B51',
+          evenRowBGC: '#0A2732',
+          waitTime: 3000, // in ms
+          align: ['center', 'center', 'center', 'center'],
+          columnWidth: [300, 200, 200],
+          headerHeight: 50,
+          carousel: 'single'  // 'single' | 'page'
+        };
+      }      
+    },
+    mounted () {
+      this.initBottomRight();
+      this.initTopLeft();
+      this.initTopCenter();
+      this.initTopRight();
+    }
+  }
+</script>
+
+<style scoped>
+  /* 外层盒子 */
+  .outer-div{ height:5rem;width:33.3%;display:inline-block;float:left; }
+    /* 第一排样式 */
+    .inner-div{ width:6.6rem;margin:0px auto;margin-top:25px; }
+    .analysis-top{ display:inline-block;float:left; }
+    .analysis-percentage-box{ width:2.1rem;height:1.5rem;display:inline-block;float:left;margin:0.05rem; }
+      .analysis-percentage-span{ width:2.1rem;height:0.1rem;fontWeight:bold;fontSize:14px; }
+      .analysis-percentage{ width: 2.1rem;height:1.4rem; }
+    /* 第二排样式 */
+    .analysis-bottom-box{ width:6.8rem;margin:0px auto;margin-top:25px; }
+      .analysis-bottom{ display:inline-block;float:left; }
+    #scroll-board-box{ height:4.8rem;width:66%;display:inline-block;float:left;margin:0.1rem 0px;margin-left:5px; }
+      dv-scroll-board{ height:100%;width:100%; }
+</style>

ui/src/views/monitor/elecNew/frontElecTwo.vue

@@ -0,0 +1,1133 @@
+<template>
+  <div id="frontTwo">
+    <div class="bg-color-black">
+      <div class="content-box">
+        <!-- <img src="@/assets/image/elec/4-12.png" width="1880" height="920px"> -->
+        <!-- 管道 -->
+        <div class="guan guan1">
+          <img src="@/assets/image/elec/4-5-1.png" style="width:88%;height:20px">
+          <img src="@/assets/image/elec/aniimg1.png" style="width:8px;height:20px" class="aniMove">
+        </div>
+        <!-- 管道 -->
+        <div class="guan guan2">
+          <img src="@/assets/image/elec/4-5-2.png" style="width:88%;height:20px">
+          <img src="@/assets/image/elec/aniimg2.png" style="width:8px;height:20px" class="aniMove">
+        </div>
+
+        <!-- 管道 -->
+        <div class="guan guan3">
+          <img src="@/assets/image/elec/4-5-3.png" style="width:88%;height:20px">
+          <img src="@/assets/image/elec/aniimg3.png" style="width:8px;height:20px" class="aniMove">
+        </div>
+
+         <!-- 管道 -->
+        <div class="guan guan4">
+          <img src="@/assets/image/elec/4-5-4.png" style="width:88%;height:20px">
+          <img src="@/assets/image/elec/aniimg4.png" style="width:8px;height:20px" class="aniMove">
+        </div>
+
+        <!-- 文字框 -->
+        <div class="kuangBox pos1-1">
+            <div class="kuang">{{this.hhpPphhp}}</div>
+            <div class="word">PP HHP</div>
+        </div>
+
+         <div class="kuangBox pos1-2">
+            <div class="kuang">{{this.mpNcipMp}}</div>
+            <div class="word">NCIP MP</div>
+        </div>
+
+         <div class="kuangBox pos1-3">
+            <div class="kuang">{{this.mpPpMp}}</div>
+            <div class="word">PP MP</div>
+        </div>
+
+        <div class="kuangBox pos1-4">
+            <div class="kuang">{{this.lpPpLp}}</div>
+            <div class="word">PP LP</div>
+        </div>
+
+        <div class="kuangBox pos1-5">
+            <div class="kuang">{{this.hpLpg}}</div>
+            <div class="word">LPG</div>
+        </div>
+
+        <div class="kuangBox pos1-6">
+            <div class="kuang">{{this.hhpP3802}}</div>
+            <div class="word">P3802</div>
+        </div>
+
+        <div class="kuangBox pos1-7">
+            <div class="kuang">{{this.hpSub}}</div>
+            <div class="word">SUB</div>
+        </div>
+
+        <div class="kuangBox pos1-8">
+            <div class="kuang">{{this.lpEmpty}}</div>
+            <div class="word">LP放空</div>
+        </div>
+
+        <div class="kuangBox pos1-9">
+            <div class="kuang">J1504</div>
+            <div class="word">入： <span>{{this.hpJ1504In}}</span> 出：<span>{{this.hpJ1504Out}}</span></div>
+            <img src="@/assets/image/elec/4-9.png" style="width:80px;height:40px" class="img">
+        </div>
+
+        <div class="kuangBox pos1-10">
+            <div class="kuang">BCC</div>
+        </div>
+
+         <div class="kuangBox pos1-11">
+            <div class="kuang">{{this.hhpAaae}}</div>
+        </div>
+
+        <div class="kuangBox pos1-12">
+            <div class="kuang">{{this.bccSyn}}</div>
+            <div class="word">SYN</div>
+        </div>
+
+        <div class="kuangBox pos1-13">
+            <div class="kuang">{{this.lpJ1509}}</div>
+            <div class="word">J1509</div>
+        </div>
+
+        <div class="kuangBox pos1-14">
+            <div class="kuang">{{this.lpLdpeTs}}</div>
+            <div class="word">LDPE TS</div>
+        </div>
+
+        <div class="kuangBox pos1-15">
+            <div class="kuang">{{this.bccYpc}}</div>
+            <div class="word">YPC</div>
+        </div>
+
+        <div class="kuangBox pos1-16">
+            <div class="kuang">{{this.lpJ1503}}</div>
+            <div class="word">J1503</div>
+        </div>
+
+        <div class="kuangBox pos1-17">
+            <div class="kuang">{{this.lpLdpeDm}}</div>
+            <div class="word">LDPE TM</div>
+        </div>
+
+        <div class="kuangBox pos1-18">
+            <div class="kuang">{{this.hhpGaa}}</div>
+        </div>
+
+        <div class="kuangBox pos1-19">
+            <div class="kuang">{{this.hhpSyn}}</div>
+        </div>
+
+        <div class="kuangBox pos1-20">
+            <div class="kuang">{{this.hpJ1501}}</div>
+            <div class="word">J1501</div>
+        </div>
+
+        <div class="kuangBox pos1-21">
+            <div class="kuang">{{this.mpJ1502}}</div>
+            <div class="word">J1502</div>
+        </div>
+        <!-- 文字框end -->
+
+        <!-- 圆框 -->
+        <div class="kuangBox-yuan pos2-1">
+            <div class="kuang1">HHP</div>
+        </div>
+
+        <div class="kuangBox-yuan pos2-2">
+            <div class="kuang2">HP</div>
+        </div>
+
+        <div class="kuangBox-yuan pos2-3">
+            <div class="kuang3">MP</div>
+        </div>
+
+        <div class="kuangBox-yuan pos2-4">
+            <div class="kuang4">LP</div>
+        </div>
+        <!-- 圆框end -->
+
+        <!-- 多边形框 -->
+        <div class="kuangBox-duo pos3-1">
+            <div class="kuang1">{{this.hpUser}}</div>
+            <div class="word2">HP用户</div>
+        </div>
+
+        <div class="kuangBox-duo pos3-2">
+            <div class="kuang2">{{this.mpUser}}</div>
+             <div class="word2">MP用户</div>
+        </div>
+
+        <div class="kuangBox-duo pos3-3">
+            <div class="kuang3">{{this.lpUser}}</div>
+             <div class="word2">LP用户</div>
+        </div>
+
+        <!-- 多边形框end -->
+
+
+        <!-- 箭头 -->
+        <div class="jiantou pos1-1">
+            <img src="@/assets/image/elec/4-6-1.png" style="width:60px;height:40px">
+        </div>
+
+        <div class="jiantou pos1-2">
+            <img src="@/assets/image/elec/4-6-2.png" style="width:120px;height:250px">
+          <div class="word3 wordPos1-1">{{this.mp150511}}</div>
+          <div class="word3 wordPos1-2">{{this.mp150512}}</div>
+        </div>
+
+        <div class="jiantou pos1-3">
+            <img src="@/assets/image/elec/4-6-4.png" style="width:90px;height:40px">
+        </div>
+
+        <div class="jiantou pos1-4">
+            <img src="@/assets/image/elec/4-6-3.png" style="width:30px;height:140px">
+        </div>
+
+        <div class="jiantou pos1-5">
+            <img src="@/assets/image/elec/4-6-5.png" style="width:15px;height:70px">
+        </div>
+
+        <div class="jiantou pos1-6">
+            <img src="@/assets/image/elec/4-6-6.png" style="width:120px;height:16px">
+        </div>
+
+        <div class="jiantou pos1-7">
+            <img src="@/assets/image/elec/4-6-7.png" style="width:120px;height:16px">
+            <div class="word3 wordPos4-7-1">{{this.hpNg}}</div>
+            <div class="word4 wordPos4-7-2">NG</div>
+        </div>
+
+        <div class="jiantou pos1-8">
+            <img src="@/assets/image/elec/4-6-8.png" style="width:210px;height:60px">
+            <div class="word">H2</div>
+        </div>
+
+        <div class="jiantou pos1-9">
+            <img src="@/assets/image/elec/4-6-9.png" style="width:16px;height:70px">
+        </div>
+
+        <div class="jiantou pos1-10">
+            <img src="@/assets/image/elec/4-6-9.png" style="width:16px;height:70px">
+        </div>
+
+
+        <div class="jiantou pos2-1">
+            <img src="@/assets/image/elec/4-7-1.png" style="width:30px;height:70px">
+            <div class="word">AA/AE</div>
+
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-2">
+            <img src="@/assets/image/elec/4-7-1.png" style="width:30px;height:70px">
+            <div class="word">GAA</div>
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-3">
+            <img src="@/assets/image/elec/4-7-6.png" style="width:30px;height:80px">
+            <div class="word">SYN</div>
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-4">
+            <img src="@/assets/image/elec/4-7-3.png" style="width:30px;height:150px">
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-5">
+            <img src="@/assets/image/elec/4-7-2.png" style="width:30px;height:260px">
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-6">
+            <img src="@/assets/image/elec/4-7-3.png" style="width:30px;height:150px">
+            <div class="word">P9801</div>
+            <div class="word2">出： <span>{{this.mpP9801Out}}</span></div>
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-7">
+            <img src="@/assets/image/elec/4-7-4.png" style="width:30px;height:330px">
+            <div class="word">入： <span>{{this.mpP9801In}}</span></div>
+            <div class="word2">{{this.lpMpLetdown}}</div>
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-8">
+            <img src="@/assets/image/elec/4-7-3.png" style="width:30px;height:170px">
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-9">
+            <img src="@/assets/image/elec/4-7-3.png" style="width:30px;height:170px">
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+
+        <div class="jiantou pos2-10">
+            <img src="@/assets/image/elec/4-7-5.png" style="width:100px;height:140px">
+            <img src="@/assets/image/elec/4-7-7.png" style="width:30px;height:30px" class="aniMovelan">
+        </div>
+        <!-- 箭头end -->
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: ['dashboardelecdata'],
+    data() {
+      return {
+        equipmentType: 1,
+        hhpPphhp: this.dashboardelecdata.hhpPphhp,
+        hhpAaae: this.dashboardelecdata.hhpAaae,
+        hhpGaa: this.dashboardelecdata.hhpGaa,
+        hhpSyn: this.dashboardelecdata.hhpSyn,
+        hhpP3802: this.dashboardelecdata.hhpP3802,
+        hpLpg: this.dashboardelecdata.hpLpg,
+        hpSub: this.dashboardelecdata.hpSub,
+        hpNg: this.dashboardelecdata.hpNg,
+        hpJ1501: this.dashboardelecdata.hpJ1501,
+        hpJ1504In: this.dashboardelecdata.hpJ1504In,
+        hpJ1504Out: this.dashboardelecdata.hpJ1504Out,
+        hpUser: this.dashboardelecdata.hpUser,
+        mpNcipMp: this.dashboardelecdata.mpNcipMp,
+        mp150511: this.dashboardelecdata.mp150511,
+        mp150512: this.dashboardelecdata.mp150512,
+        mpPpMp: this.dashboardelecdata.mpPpMp,
+        mpP9801In: this.dashboardelecdata.mpP9801In,
+        mpP9801Out: this.dashboardelecdata.mpP9801Out,
+        mpJ1502: this.dashboardelecdata.mpJ1502,
+        mpUser: this.dashboardelecdata.mpUser,
+        lpPpLp: this.dashboardelecdata.lpPpLp,
+        lpEmpty: this.dashboardelecdata.lpEmpty,
+        lpMpLetdown: this.dashboardelecdata.lpMpLetdown,
+        lpJ1509: this.dashboardelecdata.lpJ1509,
+        lpJ1503: this.dashboardelecdata.lpJ1503,
+        lpLdpeTs: this.dashboardelecdata.lpLdpeTs,
+        lpLdpeDm: this.dashboardelecdata.lpLdpeDm,
+        lpUser: this.dashboardelecdata.lpUser,
+        bccYpc: this.dashboardelecdata.bccYpc,
+        bccSyn: this.dashboardelecdata.bccSyn,
+      };
+    },
+    name: "materialBalance",
+    components: {
+    },
+    methods: {
+      changeType(val) {
+        if (val === 1) {
+          this.equipmentType = 1
+        }else if (val === 2) {
+          this.equipmentType = 2
+        }else if (val === 3) {
+          this.equipmentType = 3
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  #frontTwo {
+    padding: 0.2rem;
+    height: 11rem;
+    min-width: 3.75rem;
+    border-radius: 0.0625rem;
+    .bg-color-black {
+      height: 11.5rem;
+      border-radius: 0.125rem;
+    }
+    .text {
+      color: #ffffff;
+    }
+    .chart-box {
+      margin-top: 0.2rem;
+      width: 2.125rem;
+      height: 2.125rem;
+      .active-ring-name {
+        padding-top: 0.125rem;
+      }
+    }
+
+    .bottom-data {
+      .item-box {
+        float: right;
+        position: relative;
+        width: 50%;
+        color: #d3d6dd;
+        // 金币
+        .coin {
+          position: absolute;
+          left: 0.1rem;
+          top: 0.2125rem;
+          font-size: 0.25rem;
+          color: #ffc107;
+        }
+        .colorYellow {
+          color: yellowgreen;
+        }
+      }
+    }
+
+    .content-box{
+      position: relative;
+      width: 100%;
+      height: 100%;
+      .guan{
+        position: absolute;
+        width: 100%;
+        left: 200px;
+        &1{
+          top: 130px;
+        }
+        &2{
+          top: 270px;
+          .aniMove{
+              animation-delay:1s;
+              -webkit-animation-delay:1s; /* Safari 和 Chrome */
+            }
+        }
+        &3{
+           top: 530px;
+            .aniMove{
+                animation-delay:2s;
+              -webkit-animation-delay:2s; /* Safari 和 Chrome */
+              }
+        }
+        &4{
+           top: 720px;
+           .aniMove{
+              animation-delay:3s;
+            -webkit-animation-delay:3s; /* Safari 和 Chrome */
+            }
+        }
+      }
+        .aniMove{
+          -webkit-animation-name:aniMove;
+            animation-name:aniMove;
+            -webkit-animation-duration:10s;
+            animation-duration:10s;
+            -webkit-animation-fill-mode:both;
+            animation-fill-mode:both;
+            animation-iteration-count:infinite;
+            -webkit-animation-iteration-count:infinite;
+            font-style:inherit;
+            -webkit-animation-timing-function:linear;
+            animation-timing-function:linear;
+            position: absolute;
+            top: 0;
+            left: 10px;
+          }
+       @keyframes aniMove {
+            0% {left: 0%; }
+            100% {left: 88%;}
+        }
+
+        .word{
+            font-size: 18px;
+            color: rgb(78, 128, 248);
+            text-align: center;
+        }
+        @function kuangPosFun($args) {
+            @return ($args/1600)*100%;
+        }
+
+      .kuangBox{
+        position: absolute;
+         .kuang{
+            background: url(../../../assets/image/elec/4-2.png);
+            width: 1.3rem;
+            height: .7rem;
+            background-size: 100% 100%;
+            font-size: 24px;
+            color: rgb(178, 201, 255);
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        &.pos1{
+          &-1{
+              top: 70px;
+              left: kuangPosFun(50);
+          }
+
+          &-2{
+              top: 310px;
+              left: kuangPosFun(50);
+          }
+
+          &-3{
+              top: 510px;
+              left: kuangPosFun(50);
+          }
+
+          &-4{
+              top: 700px;
+              left: kuangPosFun(50);
+          }
+
+          &-5{
+              top: 350px;
+              left: kuangPosFun(420);
+          }
+
+          &-6{
+              top: 160px;
+              left: kuangPosFun(600);
+          }
+
+          &-7{
+              top: 350px;
+              left: kuangPosFun(650);
+          }
+
+          &-8{
+              top: 780px;
+              left: kuangPosFun(660);
+          }
+
+          &-9{
+              top: 200px;
+              left: kuangPosFun(930);
+              .word{
+                font-size: 18px;
+                  color: rgb(78, 128, 248);
+                  position: absolute;
+                  width: 200px;
+                  top: -30px;
+                  left: -40px;
+                  span{
+                     font-size: 24px;
+                     color: rgb(178, 201, 255);
+                     margin-right: 10px;
+                  }
+              }
+              .img{
+                position: absolute;
+                bottom: -44px;
+                left: 16px;
+              }
+          }
+
+          &-10{
+              top: 350px;
+              left: kuangPosFun(860);
+          }
+
+          &-11{
+              top: 20px;
+              left: kuangPosFun(1070);
+          }
+
+          &-12{
+              top: 420px;
+              left: kuangPosFun(1020);
+          }
+
+          &-13{
+              top: 600px;
+              left: kuangPosFun(1070);
+          }
+
+          &-14{
+              top: 790px;
+              left: kuangPosFun(1020);
+          }
+
+          &-15{
+              top: 350px;
+              left: kuangPosFun(1140);
+          }
+          &-16{
+              top: 600px;
+              left: kuangPosFun(1230);
+          }
+
+          &-17{
+              top: 790px;
+              left: kuangPosFun(1190);
+          }
+
+          &-18{
+              top: 20px;
+              left: kuangPosFun(1240);
+          }
+
+          &-19{
+              top: 20px;
+              left: kuangPosFun(1400);
+          }
+
+          &-20{
+              top: 170px;
+              left: kuangPosFun(1320);
+          }
+
+          &-21{
+              top: 370px;
+              left: kuangPosFun(1330);
+          }
+
+        }
+      }
+
+      .kuangBox-yuan{
+          position: absolute;
+        .kuang1{
+            // background: url(../../../assets/image/elec/4-3-1.png);
+            width: .9rem;
+            height: .9rem;
+            background-size: 100% 100%;
+            font-size: 18px;
+            color: rgb(230, 198, 48);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+        }
+
+        .kuang2{
+            // background: url(../../../assets/image/elec/4-3-2.png);
+            width: .9rem;
+            height: .9rem;
+            background-size: 100% 100%;
+            font-size: 18px;
+            color: rgb(68, 216, 174);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+        }
+
+        .kuang3{
+            // background: url(../../../assets/image/elec/4-3-3.png);
+            width: .9rem;
+            height: .9rem;
+            background-size: 100% 100%;
+            font-size: 18px;
+            color: rgb(45, 194, 232);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .kuang4{
+            // background: url(../../../assets/image/elec/4-3-4.png);
+            width: .9rem;
+            height: .9rem;
+            background-size: 100% 100%;
+            font-size: 18px;
+            color: rgb(194, 218, 223);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+        }
+
+        &.pos2{
+          &-1{
+             top: 70px;
+             left: kuangPosFun(410);
+          }
+
+          &-2{
+             top: 210px;
+             left: kuangPosFun(410);
+          }
+
+          &-3{
+             top: 470px;
+             left: kuangPosFun(410);
+          }
+
+          &-4{
+             top: 660px;
+             left: kuangPosFun(410);
+          }
+        }
+      }
+
+      .kuangBox-duo{
+          position: absolute;
+
+        .kuang1{
+            background: url(../../../assets/image/elec/4-4-1.png);
+            width: 1rem;
+            height: 1rem;
+            background-size: 100% 100%;
+            font-size: 18px;
+            font-weight: bold;
+            color: rgb(68, 216, 174);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+        }
+
+        .kuang2{
+            background: url(../../../assets/image/elec/4-4-2.png);
+            width: 1rem;
+            height: 1rem;
+            background-size: 100% 100%;
+            font-size: 18px;
+            font-weight: bold;
+            color: rgb(44, 194, 231);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+        }
+
+        .kuang3{
+            background: url(../../../assets/image/elec/4-4-3.png);
+            width: 1rem;
+            height: 1rem;
+            background-size: 100% 100%;
+            font-size: 18px;
+            font-weight: bold;
+            color: rgb(193, 218, 222);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        &.pos3{
+          &-1{
+             top: 320px;
+             left: kuangPosFun(1470);
+             .word2{
+                font-size: 18px;
+                color: rgb(68, 216, 174);
+                text-align: center;
+              }
+          }
+
+          &-2{
+             top: 570px;
+             left: kuangPosFun(1470);
+             .word2{
+                font-size: 18px;
+                color: rgb(44, 194, 231);
+                text-align: center;
+              }
+          }
+
+          &-3{
+             top: 750px;
+             left: kuangPosFun(1470);
+             .word2{
+                font-size: 18px;
+                color: rgb(193, 218, 222);
+                text-align: center;
+              }
+          }
+        }
+      }
+
+      .jiantou{
+        position: absolute;
+        &.pos1-{
+           &1{
+              top: 95px;
+              left: kuangPosFun(140);
+           }
+
+           &2{
+              top: 338px;
+              left: kuangPosFun(130);
+              .word3{
+                font-size: 24px;
+                color: rgb(178, 201, 255);
+                position: absolute;
+                &.wordPos1{
+                  &-1{
+                      top: 75px;
+                      left: 0;
+                  }
+                  &-2{
+                      top: 75px;
+                      right: -40px;
+                  }
+                }
+              }
+           }
+
+           &3{
+              top: 686px;
+              left: kuangPosFun(130);
+           }
+           &4{
+              top: 145px;
+              left: kuangPosFun(720);
+           }
+           &5{
+              top: 285px;
+              left: kuangPosFun(700);
+           }
+           &6{
+              top: 370px;
+              left: kuangPosFun(540);
+           }
+           &7{
+              top: 370px;
+              left: kuangPosFun(740);
+              .word3{
+                font-size: 24px;
+                color: rgb(178, 201, 255);
+                position: absolute;
+                &.wordPos4-7-{
+                  &1{
+                    top: -25px;
+                    left: 30px;
+                  }
+                }
+              }
+
+              .word4{
+                font-size: 18px;
+                color: rgb(78, 128, 248);
+                position: absolute;
+                &.wordPos4-7-{
+                  &2{
+                    top: 16px;
+                    left: 40px;
+                  }
+                }
+              }
+           }
+           &8{
+              top: 370px;
+              left: kuangPosFun(960);
+              .word{
+                font-size: 18px;
+                color: rgb(78, 128, 248);
+                position: absolute;
+                top: -20px;
+                left: 110px;
+              }
+           }
+           &9{
+              top: 732px;
+              left: kuangPosFun(1060);
+           }
+           &10{
+              top: 732px;
+              left: kuangPosFun(1230);
+           }
+        }
+        &.pos2-{
+           &1{
+              top: 65px;
+              left: kuangPosFun(1100);
+              .word{
+                  font-size: 18px;
+                 color: rgb(78, 128, 248);
+                 position: absolute;
+                 top: 24px;
+                 left: 30px;
+              }
+
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -webkit-animation-duration:1s;
+                  animation-duration:1s;
+                  -webkit-animation-fill-mode:both;
+                  animation-fill-mode:both;
+                  animation-iteration-count:infinite;
+                  -webkit-animation-iteration-count:infinite;
+                  font-style:inherit;
+                  -webkit-animation-timing-function:linear;
+                  animation-timing-function:linear;
+                  position: absolute;
+                  top: 0;
+                  left: -2px;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:40px;opacity: 1;}
+                }
+           }
+
+           &2{
+              top: 65px;
+              left: kuangPosFun(1270);
+              .word{
+                 font-size: 18px;
+                 color: rgb(78, 128, 248);
+                 position: absolute;
+                 top: 24px;
+                 left: 30px;
+              }
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -webkit-animation-duration:1s;
+                  animation-duration:1s;
+                  -webkit-animation-fill-mode:both;
+                  animation-fill-mode:both;
+                  animation-iteration-count:infinite;
+                  -webkit-animation-iteration-count:infinite;
+                  font-style:inherit;
+                  -webkit-animation-timing-function:linear;
+                  animation-timing-function:linear;
+                  position: absolute;
+                  top: 0;
+                  left: -2px;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:40px;opacity: 1;}
+                }
+           }
+           &3{
+              top: 65px;
+              left: kuangPosFun(1430);
+              .word{
+                 font-size: 18px;
+                 color: rgb(78, 128, 248);
+                 position: absolute;
+                 top: 24px;
+                 left: 30px;
+              }
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -webkit-animation-duration:1s;
+                  animation-duration:1s;
+                  -webkit-animation-fill-mode:both;
+                  animation-fill-mode:both;
+                  animation-iteration-count:infinite;
+                  -webkit-animation-iteration-count:infinite;
+                  font-style:inherit;
+                  -webkit-animation-timing-function:linear;
+                  animation-timing-function:linear;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:40px;opacity: 1;}
+                }
+           }
+           &4{
+              top: 130px;
+              left: kuangPosFun(1280);
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -webkit-animation-duration:1s;
+                  animation-duration:1s;
+                  -webkit-animation-fill-mode:both;
+                  animation-fill-mode:both;
+                  animation-iteration-count:infinite;
+                  -webkit-animation-iteration-count:infinite;
+                  font-style:inherit;
+                  -webkit-animation-timing-function:linear;
+                  animation-timing-function:linear;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:90%;opacity: 1;}
+                }
+           }
+           &5{
+              top: 280px;
+              left: kuangPosFun(1300);
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -webkit-animation-duration:1s;
+                  animation-duration:1s;
+                  -webkit-animation-fill-mode:both;
+                  animation-fill-mode:both;
+                  animation-iteration-count:infinite;
+                  -webkit-animation-iteration-count:infinite;
+                  font-style:inherit;
+                  -webkit-animation-timing-function:linear;
+                  animation-timing-function:linear;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:90%;opacity: 1;}
+                }
+           }
+           &6{
+              top: 390px;
+              left: kuangPosFun(890);
+              .word{
+                 font-size: 18px;
+                 color: rgb(78, 128, 248);
+                 position: absolute;
+                 top: 50px;
+                 left: 30px;
+              }
+              .word2{
+                  font-size: 18px;
+                  color: rgb(78, 128, 248);
+                  position: absolute;
+                  width: 200px;
+                  top: 90px;
+                  left: 40px;
+                  span{
+                     font-size: 24px;
+                     color: rgb(178, 201, 255);
+                  }
+              }
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -webkit-animation-duration:1s;
+                  animation-duration:1s;
+                  -webkit-animation-fill-mode:both;
+                  animation-fill-mode:both;
+                  animation-iteration-count:infinite;
+                  -webkit-animation-iteration-count:infinite;
+                  font-style:inherit;
+                  -webkit-animation-timing-function:linear;
+                  animation-timing-function:linear;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:90%;opacity: 1;}
+                }
+           }
+           &7{
+              top: 400px;
+              left: kuangPosFun(830);
+              .word{
+                  font-size: 18px;
+                  color: rgb(78, 128, 248);
+                  position: absolute;
+                  width: 200px;
+                  top: 100px;
+                  left: -140px;
+                  span{
+                     font-size: 24px;
+                     color: rgb(178, 201, 255);
+                  }
+              }
+              .word2{
+                font-size: 24px;
+                color: rgb(178, 201, 255);
+                position: absolute;
+                top: 213px;
+                left: 30px;
+              }
+
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -webkit-animation-duration:1s;
+                  animation-duration:1s;
+                  -webkit-animation-fill-mode:both;
+                  animation-fill-mode:both;
+                  animation-iteration-count:infinite;
+                  -webkit-animation-iteration-count:infinite;
+                  font-style:inherit;
+                  -webkit-animation-timing-function:linear;
+                  animation-timing-function:linear;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:90%;opacity: 1;}
+                }
+           }
+           &8{
+              top: 560px;
+              left: kuangPosFun(1030);
+               .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -webkit-animation-duration:1s;
+                  animation-duration:1s;
+                  -webkit-animation-fill-mode:both;
+                  animation-fill-mode:both;
+                  animation-iteration-count:infinite;
+                  -webkit-animation-iteration-count:infinite;
+                  font-style:inherit;
+                  -webkit-animation-timing-function:linear;
+                  animation-timing-function:linear;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:90%;opacity: 1;}
+                }
+           }
+           &9{
+              top: 560px;
+              left: kuangPosFun(1200);
+               .aniMovelan{
+                -webkit-animation-name:aniMovelan;
+                  animation-name:aniMovelan;
+                  -webkit-animation-duration:1s;
+                  animation-duration:1s;
+                  -webkit-animation-fill-mode:both;
+                  animation-fill-mode:both;
+                  animation-iteration-count:infinite;
+                  -webkit-animation-iteration-count:infinite;
+                  font-style:inherit;
+                  -webkit-animation-timing-function:linear;
+                  animation-timing-function:linear;
+                  position: absolute;
+                  top: 0;
+                  left: 0;
+                }
+                @keyframes aniMovelan {
+                  0% {top: 0; opacity: 0;}
+                  100% {top:90%;opacity: 1;}
+                }
+           }
+           &10{
+              top: 720px;
+              left: kuangPosFun(750);
+              .aniMovelan{
+                -webkit-animation-name:aniMovelan2;
+                  animation-name:aniMovelan2;
+                  -webkit-animation-duration:1s;
+                  animation-duration:1s;
+                  -webkit-animation-fill-mode:both;
+                  animation-fill-mode:both;
+                  animation-iteration-count:infinite;
+                  -webkit-animation-iteration-count:infinite;
+                  font-style:inherit;
+                  -webkit-animation-timing-function:linear;
+                  animation-timing-function:linear;
+                  position: absolute;
+                  top: 0;
+                  left: -2px;
+                }
+                @keyframes aniMovelan2 {
+                  0% {top: 0; opacity: 0;}
+                  50% {top: 110px; left:0px; opacity: .5; transform: rotate(-90deg);}
+                  100% {top:110px; left:60px; opacity: 1;transform: rotate(-90deg)}
+                }
+           }
+        }
+      }
+    }
+  }
+</style>

ui/src/views/monitor/elecNew/index.vue

@@ -0,0 +1,499 @@
+<template>
+  <div id="front" style="width: 100%; height: 100%; font-size: 12px" >
+    <dv-loading v-if="loading">Loading...</dv-loading>
+    <div v-else class="host-body bg bgNew">
+      <div class="d-flex jc-center">
+        <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
+        <div class="d-flex jc-center">
+          <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
+          <div class="title">
+            <span class="title-text">99BCC {{ $t('生产运行总览') }}</span>
+            <dv-decoration-6
+              class="title-bototm"
+              :reverse="true"
+              :color="['#50e3c2', '#67a1e5']"
+              style="width:3.125rem;height:.1rem;"
+            />
+          </div>
+          <dv-decoration-8
+            :reverse="true"
+            :color="['#568aea', '#000000']"
+            style="width:2.5rem;height:.625rem;"
+          />
+        </div>
+        <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
+      </div>
+
+      <!-- 第二行 -->
+      <div class="d-flex jc-between px-2">
+        <!--左侧 tab切换 -->
+        <div class="d-flex" style="width: 40%">
+          <div
+            class="react-right ml-4"
+            :style="tabIndex === 1 ? 'background-color: #1a5cd7; width: 3.25rem; text-align: left;' : 'width: 3.25rem; text-align: left;background-color: #0f1325;'"
+            @click="handleTab(1)"
+          >
+            <span class="text">运行总览</span>
+          </div>
+          <div class="react-right ml-3" :style="tabIndex === 2 ? 'background-color: #1a5cd7;' : 'background-color: #0f1325;'"  @click="handleTab(2)">
+            <span class="text">物料平衡</span>
+          </div>
+          <div class="react-right ml-3" :style="tabIndex === 3 ? 'background-color: #1a5cd7;' : 'background-color: #0f1325;'"  @click="handleTab(3)">
+            <span class="text">蒸汽平衡</span>
+          </div>
+        </div>
+        <!-- 右侧 时间 -->
+        <div style="width: 40%" class="d-flex">
+          <div class="react-left bg-color-blue mr-3">
+            <span class="text fw-b">{{ $t('北京时间') }}：</span>
+          </div>
+          <div
+            class="react-left mr-4"
+            style="width: 6.25rem; background-color: #0f1325; text-align: right;"
+          >
+            <span class="react-after"></span>
+            <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="body-box" v-if="dashboard === 1"  ref="appRef" >
+          <!-- 运行总览 -->
+          <el-row class="yunxing suofang" v-if="tabIndex === 1">
+            <!-- 左侧 -->
+            <el-col :span="8" class="yunxing-left">
+              <div id="app-container-Right">
+                <div class="up">
+                  <annual-output :dashboarddata = 'dashboarddata'/>
+                </div>
+                <div class="middle">
+                  <dv-border-box-13>
+                    <energy-consumption :monthData = 'monthData'/>
+                  </dv-border-box-13>
+                </div>
+                <div class="down">
+                  <dv-border-box-13>
+                    <product-proportion :dashboarddata = 'dashboarddata'/>
+                  </dv-border-box-13>
+                </div>
+
+                <dv-border-box-12 style="height: 260px;overflow: hidden;">
+                  <bottom-right :dashboarddata = 'dashboarddata'/>
+                </dv-border-box-12>
+              </div>
+            </el-col>
+            <!-- 中间 -->
+            <el-col :span="8" class="yunxing-middle">
+              <dv-border-box-12 style="width: 100%;height: 323px;">
+                <nap-tank :dashboarddata = 'dashboarddata'/>
+              </dv-border-box-12>
+              <dv-border-box-12 style="width: 100%;height: 323px;">
+                <product-tank :dashboarddata = 'dashboarddata'/>
+              </dv-border-box-12>
+              <dv-border-box-12 style="width: 100%;height: 323px;">
+                <bottom-left :monthData = 'monthData'/>
+              </dv-border-box-12>
+            </el-col>
+            <!-- 右侧 -->
+            <el-col :span="8" class="yunxing-right">
+              <dv-border-box-12 style="width: 100%;height: 323px;">
+                <ethylene-tank :dashboarddata = 'dashboarddata' />
+              </dv-border-box-12>
+              <dv-border-box-12 style="width: 100%;height: 323px;">
+                <acrylic-tank :dashboarddata = 'dashboarddata'/>
+              </dv-border-box-12>
+              <dv-border-box-12 style="width: 100%;height: 323px;">
+                <bottom-energy :monthData = 'monthData'/>
+              </dv-border-box-12>
+            </el-col>
+
+          </el-row>
+
+          <!-- 物料平衡 -->
+          <el-row class="wuliao suofang" v-if="tabIndex === 2">
+            <material-balance :dashboarddata = 'dashboarddata'/>
+          </el-row>
+
+          <!-- 蒸汽平衡 -->
+          <el-row class="zhengqi suofang" v-if="tabIndex === 3">
+            <steam-balance :dashboarddata = 'dashboarddata'/>
+          </el-row>
+      </div>
+    </div>
+
+    <div class="body-box" v-if="dashboard === 2">
+      <!-- 第三行数据 -->
+      <div>
+        <front-two />
+      </div>
+    </div>
+
+    <div class="body-box" v-if="dashboard === 3">
+      <!-- 第三行数据 -->
+      <div class="frist-content-box">
+        <div>
+          <dv-border-box-12>
+            <center-right2 />
+          </dv-border-box-12>
+        </div>
+        <div>
+          <dv-border-box-12>
+            <center-left2 />
+          </dv-border-box-12>
+        </div>
+        <!-- 中间 -->
+        <div>
+          <center-left1 />
+        </div>
+        <div>
+          <dv-border-box-13>
+            <center-right1 />
+          </dv-border-box-13>
+        </div>
+      </div>
+      <!-- 第四行数据 -->
+      <div class="bototm-box">
+        <dv-border-box-13>
+          <bottom-left />
+        </dv-border-box-13>
+        <dv-border-box-12>
+          <bottom-right />
+        </dv-border-box-12>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import centerLeft1 from "@/views/front/centerLeft1";
+  import centerLeft2 from "@/views/front/centerLeft2";
+  import centerRight1 from "@/views/front/centerRight1";
+  import centerRight2 from "@/views/front/centerRight2";
+  import center from "@/views/front/center";
+  import bottomLeft from "@/views/front/bottomLeft";
+  import bottomEnergy from "@/views/front/bottomEnergy";
+  import bottomRight from "@/views/front/bottomRight";
+  import frontTwo from "@/views/front/frontTwo";
+  import materialBalance from "@/views/front/materialBalance";
+  import steamBalance from "@/views/front/steamBalance";
+  import chartRight from "@/views/front/ChartRight";
+  import napTank from "@/views/front/napTank";
+  import ethyleneTank from "@/views/front/ethyleneTank";
+  import acrylicTank from "@/views/front/acrylicTank";
+  import productTank from "@/views/front/productTank";
+  import annualOutput from "@/views/front/annualOutput";
+  import energyConsumption from "@/views/front/energyConsumption";
+  import productProportion from "@/views/front/productProportion";
+  import dayjs from "dayjs";
+  import '@/common/flexible.js';
+  import dataV from '@jiaminghi/data-view';
+  import {selectLast, selectMonth} from "@/api/aspen/dashboarddata";
+
+
+  import drawMixin from "../../../utils/drawMixin"; //自适应缩放
+
+  export default {
+    mixins: [drawMixin],
+    data() {
+      return {
+        loading: true,
+        dashboard: 1,
+        dateDay: null,
+        dateYear: null,
+        dateWeek: null,
+        weekday: [this.$t('周日'),this.$t('周一'),this.$t('周二'),this.$t('周三'),this.$t('周四'),this.$t('周五'),this.$t('周六')],
+        timer:null,
+        dashboarddata: {
+          energyYixi: null,
+          energyBingxi: null,
+          energyQingqi: null,
+          energyJiawan: null,
+          energyCsi: null,
+          energyBenzene: null,
+          energyToluene: null,
+          energyXylene: null,
+          energyTanliu: null,
+          energyWashoil: null,
+          energyTanwu: null,
+          energyIma: null,
+          energyCjiu: null,
+          energyRpg: null,
+          energyfeedNap: null,
+          energyfeedYiwan: null,
+          energyfeedTanwu: null,
+          energyfeedTanliu: null,
+          energyfeedLpg: null,
+          energyOffgas: null,
+          energyLpg: null,
+          steamSsinfur: null,
+          steamSsoutlet: null,
+          steamSsoutaeu: null,
+          steamSsoutesi: null,
+          steamSsoutksan: null,
+          steamSsoutsc: null,
+          steamHsinsub: null,
+          steamHsinlet: null,
+          steamHsinksan: null,
+          steamHsoutpjiu: null,
+          steamHsoutaeu: null,
+          steamHsoutlet: null,
+          steamHsoutesan: null,
+          steamHsoutphyi: null,
+          steamHsoutpher: null,
+          steamHsouthwu: null,
+          steamHsoutkliu: null,
+          steamHsoutsc: null,
+          steamHhpsub: null,
+          steamMsinaeu: null,
+          steamMsinlet: null,
+          steamMsinphyi: null,
+          steamMsinkliu: null,
+          steamMsoutflare: null,
+          steamMsoutaeu: null,
+          steamMsoutsctu: null,
+          steamMsouteer: null,
+          steamMsoutfur: null,
+          steamMsoutva: null,
+          steamMsouttracing: null,
+          steamLsinsub: null,
+          steamLsinpjiu: null,
+          steamLsinaeu: null,
+          steamLsineer: null,
+          steamLsinpher: null,
+          steamLsoutsctu: null,
+          steamLsoutvjiu: null,
+          steamLsoutewuliu: null,
+          steamLsoutewusan: null,
+          steamLsouttracing: null,
+          steamLsoutesan: null,
+          steamLsoutesi: null,
+          steamLsoutother: null,
+          napOne: null,
+          napTwo: null,
+          napThree: null,
+          ehtOne: null,
+          ehtTwo: null,
+          ehtThree: null,
+          ehtFour: null,
+          ehtFive: null,
+          acrOne: null,
+          acrTwo: null,
+          acrThree: null,
+          acrFour: null,
+          acrZero: null,
+          proTwo: null,
+          proOne: null,
+          proThree: null,
+          proFour: null,
+          ssBcc: null,
+          ssSub: null,
+          ssEu: null,
+          ssPgu: null,
+          hhpBcc: null,
+          hhpSub: null,
+          hsBcc: null,
+          hsSub: null,
+          hsEu: null,
+          hsPgu: null,
+          msBcc: null,
+          msEu: null,
+          msPgu: null,
+          lsBcc: null,
+          lsEu: null,
+          lsPgu: null,
+          totalBcc: null,
+          totalEu: null,
+          zongBcc: null,
+          zongEu: null,
+          zongPgu: null,
+          outputYixi: null,
+          outputBx: null,
+          outputAnnual: null,
+          instantaneous: null,
+          cumulative: null,
+          steamHsoutklz:null
+        },
+        monthData: {
+          dailyYixi: null,
+          dailyBingxi: null,
+          lossRate: null,
+          energyConsumption: null,
+          productPutput: null,
+          dataDate: null,
+          dateDay: null
+        },
+
+        // 重构页面
+        tabIndex:1,
+      };
+    },
+    components: {
+      centerLeft1,
+      centerLeft2,
+      centerRight1,
+      centerRight2,
+      center,
+      bottomLeft,
+      bottomEnergy,
+      bottomRight,
+      frontTwo,
+      materialBalance,
+      steamBalance,
+      chartRight,
+      napTank,
+      ethyleneTank,
+      acrylicTank,
+      productTank,
+      annualOutput,
+      energyConsumption,
+      productProportion
+    },
+    mounted() {
+      this.cancelLoading();
+      this.timer = setInterval(()=>{
+        const date= dayjs(new Date());
+        this.dateDay = date.format('HH:mm:ss');
+        this.dateYear = date.format('YYYY年MM月DD日');
+        this.dateWeek = date.format(this.weekday[date.day()]);
+      },1000);
+    },
+    created() {
+      this.getList();
+      this.getMonthList()
+      // 每隔30秒请求一次数据
+      window.setInterval(() => {
+          ///调取接口获取数据
+          this.getList();
+      }, 30000)
+
+      // 一天请求一次数据
+      window.setInterval(() => {
+        setTimeout(() => {
+          ///调取接口获取数据
+          this.getMonthList();
+        }, 0)
+      }, 1000 * 10 * 6 * 60 * 6)
+    },
+    beforeDestroy(){
+      if(this.timer){
+        clearInterval(this.timer);
+      }
+    },
+    methods: {
+      /** 查询dashboard抓取数据列表 */
+      getList()
+      {
+        selectLast(this.queryParams).then(response => {
+          this.dashboarddata = response.data;
+        });
+      },
+      /** 查询dashboard抓取数据列表 */
+      getMonthList()
+      {
+        selectMonth(this.queryParams).then(response => {
+          this.monthData = response.data;
+        });
+      },
+      cancelLoading() {
+        setTimeout(() => {
+          this.loading = false;
+        }, 500);
+      },
+      changeDashboard(val) {
+        if (val === 1) {
+          this.dashboard = 1
+        }else if (val === 2) {
+          this.dashboard = 2
+        }else if (val === 3) {
+          this.dashboard = 3
+        }
+      },
+      openNewWindow() {
+        let routeData = this.$router.resolve({
+          path: "/BCCdashboardNew",
+        });
+        window.open('/cpms/index.html#/BCCdashboardNew', '_blank');
+        // window.open('index.html#/bccHome?redirect=%2Findex');//path是文件的全路径地址cpms/index.html#/login?redirect=%2Findex
+      },
+      // 重构tab切换
+      handleTab(id){
+        this.tabIndex = id;
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  #front{
+    overflow: scroll !important;
+  }
+  #front .host-body .react-right .text{
+    width: 100%;
+    display: block;
+    text-align: center;
+  }
+
+  #front .bg.bgNew{
+width: 100%;
+  }
+.body-box{
+  color: #d3d6dd;
+      width: 1920px;
+      height: 1080px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      transform-origin: left top;
+      overflow: hidden;
+}
+  .yunxing{
+    display: flex;
+    &-left{
+
+    }
+
+
+      #app-container-Right {
+          width: 100%;
+          height: 100%;
+      .up {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+      }
+      .middle {
+        padding: 0.07rem 0.05rem;
+        padding-bottom: 0;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+      }
+      .down {
+        padding: 0.07rem 0.05rem;
+        padding-bottom: 0;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+  }
+
+
+#front{
+  overflow: unset !important;
+}
+
+
+.wuliao{
+    transform: scale(1.4,1.3) translate(13%,10%) !important;
+
+}
+.zhengqi{
+    transform: scale(1.55,1.2) translate(17%,8%) !important;
+
+}
+</style>
+
+

ui/src/views/monitor/elecNew/index2.vue

@@ -0,0 +1,28 @@
+<template>
+  <el-button @click="newPage">
+    跳转
+  </el-button>
+</template>
+
+<script>
+
+
+export default {
+  data() {
+    return {
+      loading: true
+    };
+  },
+  components: {
+  },
+  mounted() {
+  },
+  methods: {
+    newPage(){
+
+    }
+  }
+};
+</script>
+
+