cq

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

@@ -6,7 +6,7 @@
           <icon name="chart-bar"></icon>
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2">环境排放控制</span>
+          <span class="fs-xl text mx-2">蒸汽消耗</span>
         </div>
       </div>
       <div>

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

@@ -6,12 +6,24 @@
           <icon name="chart-area"></icon>
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2">天然气消耗</span>
+          <span class="fs-xl text mx-2">天然气平衡</span>
           <div class="decoration2">
             <dv-decoration-2 :reverse="true" style="width:5px;height:480px;" />
           </div>
         </div>
       </div>
+      <div class="d-flex jc-center body-box" style=" margin-top: 0;">
+        <div class="fontElec">853.0</div>
+        <p>倒电量</p>
+      </div>
+      <div class="d-flex jc-center body-box" style=" margin-top: 0;">
+        <div class="fontElec">853.0</div>
+        <p>倒电量</p>
+      </div>
+      <div class="d-flex jc-center body-box" style=" margin-top: 0;">
+        <div class="fontElec">853.0</div>
+        <p>倒电量</p>
+      </div>
       <div>
         <bottomRightChart />
       </div>

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

@@ -1,30 +1,43 @@
 <template>
   <div id="center">
     <div class="up">
-      <div class="bg-color-black item" v-for="item in titleItem" :key="item.title">
+      <!--<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" />
+    </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">装置耗电量排名
-</span>
-        <dv-scroll-ranking-board :config="ranking" style="height:2.75rem" />
+        <span class="fs-xl text mx-2 mb-1">天然气日消耗情况</span>
+        <div id="naturalGasChart" style="width:100%;height:2.5rem;"></div>
       </div>
       <div class="percent">
         <div class="item bg-color-black">
-          <span>实际能耗/计划能耗</span>
-          <centerChart :id="rate[0].id" :tips="rate[0].tips" :colorObj="rate[0].colorData" />
-        </div>
-        <div class="item bg-color-black">
-          <span>任务合规性</span>
-          <centerChart :id="rate[1].id" :tips="rate[1].tips" :colorObj="rate[1].colorData" />
+          <svg-icon icon-class="alarm" class="alarmIcon" />
         </div>
         <div class="water">
           <dv-water-level-pond :config="water" style="height: 1.5rem" />
@@ -40,54 +53,38 @@ import centerChart from "./echart/center/centerChartRate";
 export default {
   data() {
     return {
-      titleItem: [
+      numberData: [
         {
-          title: "年发电量n(mw)",
           number: {
-            number: [120],
+            number: [15],
             toFixed: 1,
             content: "{nt}"
-          }
-        },
-        {
-          title: "月发电量(mw)",
-          number: {
-            number: [18],
-            toFixed: 1,
-            content: "{nt}"
-          }
-        },
-        {
-          title: "日发电量(mw)",
-          number: {
-            number: [2],
-            toFixed: 1,
-            content: "{nt}"
-          }
+          },
+          text: "发电能力"
         },
         {
-          title: "年消耗量(mw)",
           number: {
-            number: [14],
+            number: [1144],
             toFixed: 1,
             content: "{nt}"
-          }
+          },
+          text: "发电能力"
         },
         {
-          title: "月消耗量(mw)",
           number: {
-            number: [106],
+            number: [361],
             toFixed: 1,
             content: "{nt}"
-          }
+          },
+          text: "发电能力"
         },
         {
-          title: "日消耗量(mw)",
           number: {
-            number: [100],
+            number: [157],
             toFixed: 1,
             content: "{nt}"
-          }
+          },
+          text: "发电能力"
         }
       ],
       ranking: {
@@ -132,7 +129,7 @@ export default {
       water: {
         data: [24, 45],
         shape: "roundRect",
-        formatter: "{value}%",
+        formatter: "SUB {value}%",
         waveNum: 3
       },
       // 通过率和达标率的组件复用数据
@@ -164,6 +161,34 @@ export default {
               }
             }
           }
+        },
+        {
+          id: "centerRate3",
+          tips: 40,
+          colorData: {
+            textStyle: "#67e0e3",
+            series: {
+              color: ["rgba(196,163,250,0.47)", "transparent"],
+              dataColor: {
+                normal: "#9d00ff",
+                shadowColor: "#c9adfc"
+              }
+            }
+          }
+        },
+        {
+          id: "centerRate4",
+          tips: 40,
+          colorData: {
+            textStyle: "#67e0e3",
+            series: {
+              color: ["rgba(163,250,177,0.47)", "transparent"],
+              dataColor: {
+                normal: "#00ff0d",
+                shadowColor: "#b2fcad"
+              }
+            }
+          }
         }
       ]
     };
@@ -172,6 +197,118 @@ export default {
     centerChart
     // centerChart1,
     // centerChart2
+  },
+  mounted() {
+    this.initChart();
+  },
+  methods: {
+    initChart() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('naturalGasChart'))
+
+      this.chart.setOption({
+        color: ['#00DDFF', '#37A2FF'],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        /* 标识 */
+        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',
+            stack: this.$t('总量'),
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(0, 221, 255)'
+              }, {
+                offset: 1,
+                color: 'rgba(77, 119, 255)'
+              }])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [120, 282, 111, 234, 220, 340, 310, 120, 282, 111, 234, 220, 340, 310, 120, 282, 111, 234, 220, 340, 310, 120, 282, 111, 234, 220, 340, 310]
+          },
+          {
+            name: this.$t('计划'),
+            type: 'line',
+            stack: this.$t('总量'),
+            smooth: true,
+            lineStyle: {
+              width: 0
+            },
+            showSymbol: false,
+            areaStyle: {
+              opacity: 0.8,
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(55, 162, 255)'
+              }, {
+                offset: 1,
+                color: 'rgba(116, 21, 219)'
+              }])
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            data: [320, 132, 201, 334, 190, 130, 220, 320, 132, 201, 334, 190, 130, 220, 320, 132, 201, 334, 190, 130, 220, 320, 132, 201, 334, 190, 130, 220]
+          },
+        ]
+      })
+    }
   }
 };
 </script>
@@ -193,6 +330,38 @@ export default {
       height: 0.875rem;
     }
   }
+  .bottom-data {
+    margin-top: 10px;
+    .item-box {
+      float: right;
+      position: relative;
+      width: 25%;
+      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: 25%;
+    }
+  }
   .down {
     padding: 0.07rem 0.05rem;
     padding-bottom: 0;
@@ -211,15 +380,22 @@ export default {
       width: 40%;
       display: flex;
       flex-wrap: wrap;
-      .item {
-        width: 50%;
-        height: 1.5rem;
-        span {
-          margin-top: 0.0875rem;
-          display: flex;
-          justify-content: center;
+      .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 {
         width: 100%;
       }

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

@@ -6,25 +6,25 @@
           <icon name="chart-bar"></icon>
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2">燃料情况</span>
+          <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 jc-center">
-        <centreLeft1Chart />
+      <div class="d-flex chartStyle">
+        <!--渐变折线图-->
+        <div id="oneGTGyChart" style="width:100%;height:2rem;"></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:.625rem;" />
-          </div>
-          <p class="text" style="text-align: center;">
-            {{item.text}}
-            <span class="colorYellow">(MW)</span>
-          </p>
-        </div>
+      <div class="d-flex chartStyle">
+        <!--渐变折线图-->
+        <div id="twoGTGyChart" style="width:100%;height:2rem;"></div>
+      </div>
+      <div class="d-flex chartStyle">
+        <!--渐变折线图-->
+        <div id="threeGTGyChart" style="width:100%;height:2rem;"></div>
+      </div>
+      <div class="d-flex chartStyle">
+        <!--渐变折线图-->
+        <div id="fourGTGyChart" style="width:100%;height:2rem;"></div>
       </div>
     </div>
   </div>
@@ -104,6 +104,10 @@ export default {
   },
   mounted() {
     this.changeTiming();
+    this.initOneChart();
+    this.initTwoChart();
+    this.initThreeChart();
+    this.initFourChart();
   },
   methods: {
     changeTiming() {
@@ -116,7 +120,184 @@ export default {
         item.number.number[0] += ++index;
         item.number = { ...item.number };
       });
-    }
+    },
+    initOneChart() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('oneGTGyChart'))
+
+      this.chart.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']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        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],
+            type: 'line',
+            itemStyle: {
+              color: 'rgb(78,109,60)'
+            },
+            symbol: "none",
+            areaStyle: {
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(207,243,68)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(119,189,74)'
+                }
+              ])
+            },
+          }
+        ]
+      })
+    },
+    initTwoChart() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('twoGTGyChart'))
+
+      this.chart.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']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        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],
+            type: 'line',
+            itemStyle: {
+              color: 'rgb(213,173,92)'
+            },
+            symbol: "none",
+            areaStyle: {
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(239,193,152)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(224,148,34)'
+                }
+              ])
+            },
+          }
+        ]
+      })
+    },
+    initThreeChart() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('threeGTGyChart'))
+
+      this.chart.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']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        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],
+            type: 'line',
+            itemStyle: {
+              color: 'rgb(142,161,131)'
+            },
+            symbol: "none",
+            areaStyle: {
+              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: 'rgb(229,245,171)'
+                },
+                {
+                  offset: 1,
+                  color: 'rgb(156,186,137)'
+                }
+              ])
+            },
+          }
+        ]
+      })
+    },
+    initFourChart() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('fourGTGyChart'))
+
+      this.chart.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']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        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],
+            type: 'line',
+            itemStyle: {
+              color: 'rgb(60,95,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(74,143,189)'
+                }
+              ])
+            },
+          }
+        ]
+      })
+    },
+
   }
 };
 </script>
@@ -130,6 +311,12 @@ export default {
   .bg-color-black {
     height: 4.8125rem;
     border-radius: 0.125rem;
+    width: 100%;
+    .chartStyle {
+      float: right;
+      position: relative;
+      width: 50%;
+    }
   }
   .text {
     color: #c3cbde;
@@ -142,7 +329,6 @@ export default {
       padding-top: 0.125rem;
     }
   }
-
   .bottom-data {
     .item-box {
       float: right;

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

@@ -11,7 +11,7 @@
         </div>
       </div>
       <div class="d-flex jc-center">
-        <centreLeft2Chart />
+        <!--<centreLeft2Chart />-->
       </div>
     </div>
   </div>

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

@@ -6,11 +6,22 @@
           <icon name="chart-line"></icon>
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2"> 计划完成排名 </span>
+          <span class="fs-xl text mx-2">BYC用电情况</span>
         </div>
       </div>
       <div class="d-flex jc-center body-box">
-        <dv-scroll-board :config="config" style="width:3.375rem;height:4.28rem" />
+        <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">BOC用电情况</span>
+        </div>
+      </div>
+      <div class="d-flex jc-center body-box">
+        <div id="BOCChart" style="width:100%;height:1.6rem;"></div>
       </div>
     </div>
   </div>
@@ -20,34 +31,115 @@
 export default {
   data() {
     return {
-      config: {
-        header: ["班组", "分支", "覆盖率"],
-        data: [
-          ["班组1", "dev-1", "<span  class='colorGrass'>↑75%</span>"],
-          ["班组2", "dev-2", "<span  class='colorRed'>↓33%</span>"],
-          ["班组3", "dev-3", "<span  class='colorGrass'>↑100%</span>"],
-          ["班组4", "rea-1", "<span  class='colorGrass'>↑94%</span>"],
-          ["班组5", "rea-2", "<span  class='colorGrass'>↑95%</span>"],
-          ["班组6", "fix-2", "<span  class='colorGrass'>↑63%</span>"],
-          ["班组7", "fix-4", "<span  class='colorGrass'>↑84%</span>"],
-          ["班组8", "fix-7", "<span  class='colorRed'>↓46%</span>"],
-          ["班组9", "dev-2", "<span  class='colorRed'>↓13%</span>"],
-          ["班组10", "dev-9", "<span  class='colorGrass'>↑76%</span>"]
-        ],
-        rowNum: 7, //表格行数
-        headerHeight: 35,
-        headerBGC: "#0f1325", //表头
-        oddRowBGC: "#0f1325", //奇数行
-        evenRowBGC: "#171c33", //偶数行
-        index: true,
-        columnWidth: [50],
-        align: ["center"]
-      }
     };
   },
   components: {},
-  mounted() {},
-  methods: {}
+  mounted() {
+    this.initBycChart();
+    this.initBocChart();
+  },
+  methods: {
+    initBycChart() {
+      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];
+      });
+
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('BYCChart'))
+
+      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: dateList
+          },
+        ],
+        yAxis: [
+          {},
+        ],
+        series: [
+          {
+            type: 'line',
+            showSymbol: false,
+            data: valueList
+          },
+        ]
+      })
+    },
+    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];
+      });
+
+      // 基于准备好的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: dateList
+          },
+        ],
+        yAxis: [
+          {},
+        ],
+        series: [
+          {
+            type: 'line',
+            showSymbol: false,
+            data: valueList
+          },
+        ]
+      })
+    },
+  }
 };
 </script>
 

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

@@ -5,79 +5,140 @@
         <span style="color:#5cd9e8">
           <icon name="align-left"></icon>
         </span>
-        <span class="fs-xl text mx-2">容量分析</span>
+        <span class="fs-xl text mx-2">峰谷电量</span>
       </div>
       <div class="d-flex jc-center body-box" style=" margin-top: 0;">
-        <dv-capsule-chart :config="config" style="width: 100%;height:2rem" />
+        <div id="peakToValley" style="width:100%;height:2.5rem;"></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 class="d-flex jc-center body-box" style=" margin-top: 0;">
+        <div class="fontElec">2264.0</div>
+        <p>发电量</p>
+      </div>
+      <div class="d-flex jc-center body-box" style=" margin-top: 0;">
+        <div class="fontElec">853.0</div>
+        <p>倒电量</p>
       </div>
       <div class="d-flex jc-center body-box" style=" margin-top: 0;">
-        <centreRight2Chart1></centreRight2Chart1>
+        <div class="fontElec">1872.0</div>
+        <p>用电量</p>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import centreRight2Chart1 from "./echart/centreRight2/centreRight2Chart1";
+  import centreRight2Chart1 from "@/components/echart/centreRight2/centreRight2Chart1";
 
-export default {
-  data() {
-    return {
-      config: {
-        data: [
-          {
-            name: "BCC",
-            value: 167
-          },
-          {
-            name: "公应工程",
-            value: 67
-          },
-          {
-            name: "电厂",
-            value: 123
+  export default {
+    data() {
+      return {
+        config: {
+          data: [
+            {
+              name: "A",
+              value: 167
+            },
+            {
+              name: "B",
+              value: 67
+            },
+            {
+              name: "C",
+              value: 123
+            },
+            {
+              name: "D",
+              value: 55
+            },
+          ],
+          showValue: true
+        }
+      };
+    },
+    components: { centreRight2Chart1 },
+    mounted() {
+      this.initChart();
+    },
+    methods: {
+      initChart() {
+        // 基于准备好的dom，初始化echarts实例
+        this.chart = this.echarts.init(document.getElementById('peakToValley'))
+
+        this.chart.setOption({
+          /* 周围边距 */
+          grid: {
+            left: '3%',
+            right: '3%',
+            bottom: '1%',
+            top: '20%',
+            containLabel: true
           },
-          {
-            name: "苯乙烯",
-            value: 55
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
+            }
           },
-          {
-            name: "碳一",
-            value: 98
-          }
-        ]
-      }
-    };
-  },
-  components: { centreRight2Chart1 },
-  mounted() {},
-  methods: {}
-};
+          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'],
+              axisTick: {
+                alignWithLabel: true
+              }
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value'
+            }
+          ],
+          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]
+            }
+          ]
+        })
+      },
+    }
+  };
 </script>
 
 <style lang="scss">
-#centreRight2 {
-  padding: 0.0625rem;
-  height: 5rem;
-  min-width: 3.75rem;
-  border-radius: 0.0625rem;
-  .bg-color-black {
+  #centreRight2 {
     padding: 0.0625rem;
-    height: 5.0625rem;
-    border-radius: 0.125rem;
-  }
-  .text {
-    color: #c3cbde;
+    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: #c3cbde;
+    }
+    .body-box {
+      border-radius: 0.125rem;
+      overflow: hidden;
+    }
   }
-  .body-box {
-    border-radius: 0.125rem;
-    overflow: hidden;
+
+  .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/elec/echart/bottom/bottomLeftChart.vue

@@ -155,7 +155,7 @@ export default {
           }
         },
         legend: {
-          data: [this.$t('已排放'),this.$t('计划排放'),this.$t('排放率')],
+          data: ['HHP','HP','LP','MP','总消耗'],
           // data: ['Discharged','Planned emission','Emission rate'],
           textStyle: {
             color: "#B4B4B4"
@@ -205,7 +205,7 @@ export default {
         ],
         series: [
           {
-            name: this.$t('排放率'),
+            name: '总消耗',
             type: "line",
             smooth: true,
             showAllSymbol: true,
@@ -221,9 +221,27 @@ export default {
           },
 
           {
-            name: this.$t('已排放'),
+            name: 'HHP',
             type: "bar",
             barWidth: 10,
+            itemStyle: {
+              normal: {
+                barBorderRadius: 5,
+                color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: "#87d4de" },
+                  { offset: 1, color: "#4da2db" }
+                ])
+              }
+            },
+            data: barData
+          },
+
+          {
+            name: 'HP',
+            type: "bar",
+            barGap: "-100%",
+            stack: 'Ad',
+            barWidth: 10,
             itemStyle: {
               normal: {
                 barBorderRadius: 5,
@@ -233,13 +251,16 @@ export default {
                 ])
               }
             },
-            data: barData
+            z: -12,
+
+            data: lineData
           },
 
           {
-            name: this.$t('计划排放'),
+            name: 'LP',
             type: "bar",
             barGap: "-100%",
+            stack: 'Ad',
             barWidth: 10,
             itemStyle: {
               normal: {
@@ -253,6 +274,27 @@ export default {
             },
             z: -12,
 
+            data: barData
+          },
+
+          {
+            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(208,107,211,0.8)" },
+                  { offset: 0.2, color: "rgba(208,107,211,0.5)" },
+                  { offset: 1, color: "rgba(208,107,211,0.2)" }
+                ])
+              }
+            },
+            z: -12,
+
             data: lineData
           }
         ]

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="bottomRightChart" style="width:11.25rem;height:6rem;"></div>
+    <div id="bottomRightChart" style="width:11.25rem;height:5rem;"></div>
   </div>
 </template>
 
@@ -34,8 +34,6 @@ export default {
       let dottedBase = +dateBase + 1000 * 3600 * 24;
       let weekCategory = [];
 
-      let radarData = [];
-      let radarDataAvg = [];
       let maxData = 12000;
       let weekMaxData = [];
       let weekLineData = [];
@@ -51,26 +49,6 @@ export default {
         var distance = Math.round(Math.random() * 11000 + 500);
         weekLineData.push(distance);
 
-        // 雷达图数据
-        // 我的指标
-        var averageSpeed = +(Math.random() * 5 + 3).toFixed(3);
-        var maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2);
-        var hour = +(distance / 1000 / averageSpeed).toFixed(1);
-        var radarDayData = [distance, averageSpeed, maxSpeed, hour];
-        radarData.unshift(radarDayData);
-
-        // 平均指标
-        var distanceAvg = Math.round(Math.random() * 8000 + 4000);
-        var averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3);
-        var maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2);
-        var hourAvg = +(distance / 1000 / averageSpeed).toFixed(1);
-        var radarDayDataAvg = [
-          distanceAvg,
-          averageSpeedAvg,
-          maxSpeedAvg,
-          hourAvg
-        ];
-        radarDataAvg.unshift(radarDayDataAvg);
       }
 
       // 颜色设置
@@ -145,90 +123,13 @@ export default {
         }
       };
       let option = {
-        title: {
-          text: "",
-          textStyle: {
-            color: "#D3D6DD",
-            fontSize: 24,
-            fontWeight: "normal"
-          },
-          subtext: year + "/" + weekCategory[6],
-          subtextStyle: {
-            color: "#fff",
-            fontSize: 16
-          },
-          top: 50,
-          left: 80
-        },
-        legend: {
-          top: 120,
-          left: 80,
-          orient: "vertical",
-          itemGap: 15,
-          itemWidth: 12,
-          itemHeight: 12,
-          data: ["平均指标", "今日指标"],
-          textStyle: {
-            color: "#fff",
-            fontSize: 14
-          }
-        },
         tooltip: {
           trigger: "item"
         },
-        radar: {
-          center: ["68%", "27%"],
-          radius: "40%",
-          name: {
-            color: "#fff"
-          },
-          splitNumber: 8,
-          axisLine: {
-            lineStyle: {
-              color: color.linearYtoG,
-              opacity: 0.6
-            }
-          },
-          splitLine: {
-            lineStyle: {
-              color: color.linearYtoG,
-              opacity: 0.6
-            }
-          },
-          splitArea: {
-            areaStyle: {
-              color: "#fff",
-              opacity: 0.1,
-              shadowBlur: 25,
-              shadowColor: "#000",
-              shadowOffsetX: 0,
-              shadowOffsetY: 5
-            }
-          },
-          indicator: [
-            {
-              name: "发电量",
-              max: maxData
-            },
-            {
-              name: "天然气量",
-              max: 10
-            },
-            {
-              name: "发电效率",
-              max: 12
-            },
-            {
-              name: "消耗量",
-              max: 3.5
-            }
-          ]
-        },
         grid: {
           left: 90,
           right: 80,
           bottom: 40,
-          top: "60%"
         },
         xAxis: {
           type: "category",
@@ -270,61 +171,6 @@ export default {
           }
         },
         series: [
-          {
-            name: "",
-            type: "radar",
-            symbolSize: 0,
-            data: [
-              {
-                value: radarDataAvg[6],
-                name: "平均指标",
-                itemStyle: {
-                  normal: {
-                    color: "#f8d351"
-                  }
-                },
-                lineStyle: {
-                  normal: {
-                    opacity: 0
-                  }
-                },
-                areaStyle: {
-                  normal: {
-                    color: "#f8d351",
-                    shadowBlur: 25,
-                    shadowColor: "rgba(248,211,81,.3)",
-                    shadowOffsetX: 0,
-                    shadowOffsetY: -10,
-                    opacity: 1
-                  }
-                }
-              },
-              {
-                value: radarData[6],
-                name: "今日指标",
-                itemStyle: {
-                  normal: {
-                    color: "#43dfa2"
-                  }
-                },
-                lineStyle: {
-                  normal: {
-                    opacity: 0
-                  }
-                },
-                areaStyle: {
-                  normal: {
-                    color: color.linearGtoB,
-                    shadowBlur: 15,
-                    shadowColor: "rgba(0,0,0,.2)",
-                    shadowOffsetX: 0,
-                    shadowOffsetY: 5,
-                    opacity: 0.8
-                  }
-                }
-              }
-            ]
-          },
           {
             name: "",
             type: "line",

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

@@ -65,8 +65,8 @@ export default {
         series: [
           {
             type: "pie",
-            radius: ["75%", "80%"],
-            center: ["50%", "50%"],
+            radius: ["75%", "80%", "85%", "90%"],
+            center: ["50%", "50%", "50%", "50%"],
             hoverAnimation: false,
             color: this.colorObj.series.color,
             label: {

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

@@ -60,11 +60,6 @@
               <centerLeft1 />
             </dv-border-box-12>
           </div>
-          <div>
-            <dv-border-box-12>
-              <centerLeft2 />
-            </dv-border-box-12>
-          </div>
           <!-- 中间 -->
           <div>
             <center />
@@ -282,7 +277,7 @@ export default {
       //下方区域的布局
       .content-box {
         display: grid;
-        grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
+        grid-template-columns: 6fr 7fr 2fr 2fr;
       }
       // 底部数据
       .bototm-box {