LY

master/src/main/java/com/ruoyi/project/sems/his/domain/TSpechiDzsb.java

@@ -173,10 +173,22 @@ public class TSpechiDzsb extends BaseEntity
     @Excel(name = "状态")
     private Long hiType;
 
+    /** 定期检验结论 */
+    @Excel(name = "定期检验结论")
+    private String perTestConclusion;
+
     /** 部门名称 */
     @Excel(name = "部门名称")
     private String deptName;
 
+    public String getPerTestConclusion() {
+        return perTestConclusion;
+    }
+
+    public void setPerTestConclusion(String perTestConclusion) {
+        this.perTestConclusion = perTestConclusion;
+    }
+
     public String getDeptName() {
         return deptName;
     }

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

@@ -14,21 +14,30 @@
         <!--渐变折线图-->
         <div id="oneGTGyChart" style="width:100%;height:2rem;"></div>
       </div>
-      <div class="d-flex chartStyle">
+      <div class="d-flex chartStyle" @click="openchart2">
         <!--渐变折线图-->
         <div id="twoGTGyChart" style="width:100%;height:2rem;"></div>
       </div>
-      <div class="d-flex chartStyle">
+      <div class="d-flex chartStyle" @click="openchart3">
         <!--渐变折线图-->
         <div id="threeGTGyChart" style="width:100%;height:2rem;"></div>
       </div>
-      <div class="d-flex chartStyle">
+      <div class="d-flex chartStyle" @click="openchart4">
         <!--渐变折线图-->
         <div id="fourGTGyChart" style="width:100%;height:2rem;"></div>
       </div>
     </div>
-    <el-dialog   :visible.sync="openchart" @open="open" width="1600px" append-to-body>
-      <div id="oneGTGyChart1" style="width:100%;height:600px;"></div>
+      <el-dialog class="my-info-dialog" :visible.sync="openChartOne" title="2#发电机趋势" @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="1#发电机趋势" @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="4#发电机趋势" @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="3#发电机趋势" @open="open4" width="1600px" destroy-on-close append-to-body>
+      <div id="fourGTGyChart1" style="width:100%;height:600px;"></div>
     </el-dialog>
   </div>
 </template>
@@ -49,7 +58,10 @@ export default {
   },
   data() {
     return {
-      openchart: false,
+      openChartOne: false,
+      openChartTwo: false,
+      openChartThree: false,
+      openChartFour: false,
       config: {
         lineWidth: 30,
         activeRadius: "80%",
@@ -125,13 +137,37 @@ export default {
     this.initFourChart();
   },
   methods: {
-    open(){
+    open1(){
+      this.$nextTick(() => {
+        this.initOneChartDialog()
+      })
+    },
+    open2(){
+      this.$nextTick(() => {
+        this.initTwoChartDialog()
+      })
+    },
+    open3(){
+      this.$nextTick(() => {
+        this.initThreeChartDialog()
+      })
+    },
+    open4(){
       this.$nextTick(() => {
-        this.initOneChart1()
+        this.initFourChartDialog()
       })
     },
     openchart1(){
-      this.openchart = true
+      this.openChartOne = true
+    },
+    openchart2(){
+      this.openChartTwo = true
+    },
+    openchart3(){
+      this.openChartThree = true
+    },
+    openchart4(){
+      this.openChartFour = true
     },
     changeTiming() {
       setInterval(() => {
@@ -162,9 +198,18 @@ export default {
           top: '13%',
           containLabel: true
         },
+        title: {
+          text: '2#发电机',
+          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: {
@@ -195,7 +240,7 @@ export default {
         ]
       })
     },
-    initOneChart1() {
+    initOneChartDialog() {
       console.log("====")
       // 基于准备好的dom，初始化echarts实例
       this.chart1 = this.echarts.init(document.getElementById('oneGTGyChart1'))
@@ -256,7 +301,6 @@ export default {
         dateDay[i] = this.monthData[i].dateDay
         dateNum[i] = this.monthData[i].gtg2Lv
       }
-
       this.chart.setOption({
         /* 周围边距 */
         grid: {
@@ -266,6 +310,77 @@ export default {
           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'
+        },
+        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)'
+                }
+              ])
+            },
+          }
+        ]
+      })
+    },
+    initTwoChartDialog() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart2 = this.echarts.init(document.getElementById('twoGTGyChart1'))
+      const dateDay = [];
+      const dateNum = [];
+      for (let i = 0; i < this.monthData.length; i++) {
+        dateDay[i] = this.monthData[i].dateDay
+        dateNum[i] = this.monthData[i].gtg2Lv
+      }
+      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']
@@ -318,6 +433,78 @@ export default {
           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'
+        },
+        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(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)'
+                }
+              ])
+            },
+          }
+        ]
+      })
+    },
+    initThreeChartDialog() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart3 = this.echarts.init(document.getElementById('threeGTGyChart1'))
+      const dateDay = [];
+      const dateNum = [];
+      for (let i = 0; i < this.monthData.length; i++) {
+        dateDay[i] = this.monthData[i].dateDay
+        dateNum[i] = this.monthData[i].gtg3Lv
+      }
+
+      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']
@@ -370,6 +557,16 @@ export default {
           top: '13%',
           containLabel: true
         },
+        title: {
+          text: '3#发电机',
+          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']
@@ -403,12 +600,84 @@ export default {
         ]
       })
     },
+    initFourChartDialog() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart4 = this.echarts.init(document.getElementById('fourGTGyChart1'))
+      const dateDay = [];
+      const dateNum = [];
+      for (let i = 0; i < this.monthData.length; i++) {
+        dateDay[i] = this.monthData[i].dateDay
+        dateNum[i] = this.monthData[i].stg1Lv
+      }
 
+      this.chart4.setOption({
+        /* 周围边距 */
+        grid: {
+          left: '3%',
+          right: '3%',
+          bottom: '1%',
+          top: '13%',
+          containLabel: true
+        },
+        title: {
+          text: '3#发电机',
+          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'
+        },
+        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(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>
 
 <style lang="scss">
+/*body背景色*/
+  .my-info-dialog {
+    .el-dialog {
+      .el-dialog__body{
+        background: #ffffff;
+      }
+      .el-dialog__header{
+      }
+    }
+  }
+
 #centreLeft1 {
   padding: 0.2rem;
   height: 5.125rem;

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

@@ -9,7 +9,7 @@
           <span class="fs-xl text mx-2">BYC用电情况</span>
         </div>
       </div>
-      <div class="d-flex jc-center body-box">
+      <div class="d-flex jc-center body-box" @click="openBYCdialog">
         <div id="BYCChart" style="width:100%;height:1.6rem;"></div>
       </div>
       <div class="d-flex pt-2 pl-2" style="margin-top: 0.3rem">
@@ -17,13 +17,19 @@
           <icon name="chart-line"></icon>
         </span>
         <div class="d-flex">
-          <span class="fs-xl text mx-2">BOC用电情况</span>
+          <span class="fs-xl text mx-2">BOC购电情况</span>
         </div>
       </div>
-      <div class="d-flex jc-center body-box">
+      <div class="d-flex jc-center body-box" @click="openBOCdialog">
         <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="BOC购电情况" @open="openBOC" width="1600px" destroy-on-close append-to-body>
+      <div id="BOCChart1" style="width:100%;height:600px;"></div>
+    </el-dialog>
   </div>
 </template>
 
@@ -32,6 +38,8 @@ export default {
   props:['fiftydayData'],
   data() {
     return {
+      openChartBYCChart: false,
+      openChartBOCChart: false
     };
   },
   components: {},
@@ -40,7 +48,119 @@ export default {
     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.fiftydayData.length; i++) {
+        dateDay[i]=  this.fiftydayData[i].dataDate
+        dateNum[i] = this.fiftydayData[i].bycElec
+      }
+      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
+          },
+        ],
+        yAxis: [
+          {},
+        ],
+        series: [
+          {
+            type: 'line',
+            showSymbol: false,
+            data: dateNum
+          },
+        ]
+      })
+    },
+    initBycChartDialog() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart1 = this.echarts.init(document.getElementById('BYCChart1'));
+
+      const dateNum = [];
+      const dateDay=[];
+      for (let i = 0; i < this.fiftydayData.length; i++) {
+        dateDay[i]=  this.fiftydayData[i].dataDate
+        dateNum[i] = this.fiftydayData[i].bycElec
+      }
+      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: [
+          {},
+        ],
+        series: [
+          {
+            type: 'line',
+            showSymbol: false,
+            data: dateNum
+          },
+        ]
+      })
+    },
+    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];
@@ -49,16 +169,16 @@ export default {
       //   return item[1];
       // });
 
-      // 基于准备好的dom，初始化echarts实例
-      this.chart = this.echarts.init(document.getElementById('BYCChart'));
-
       const dateNum = [];
       const dateDay=[];
       for (let i = 0; i < this.fiftydayData.length; i++) {
         dateDay[i]=  this.fiftydayData[i].dataDate;
-        dateNum[i] = this.fiftydayData[i].bycElec;
+        dateNum[i] = this.fiftydayData[i].bocElec;
       }
 
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('BOCChart'))
+
       this.chart.setOption({
         /* 周围边距 */
         grid: {
@@ -97,7 +217,7 @@ export default {
         ]
       })
     },
-    initBocChart() {
+    initBocChartDialog() {
       // 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];
@@ -112,11 +232,9 @@ export default {
         dateDay[i]=  this.fiftydayData[i].dataDate;
         dateNum[i] = this.fiftydayData[i].bocElec;
       }
-
       // 基于准备好的dom，初始化echarts实例
-      this.chart = this.echarts.init(document.getElementById('BOCChart'))
-
-      this.chart.setOption({
+      this.chart2 = this.echarts.init(document.getElementById('BOCChart1'))
+      this.chart2.setOption({
         /* 周围边距 */
         grid: {
           left: '3%',

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

@@ -1,6 +1,9 @@
 <template>
-  <div>
+  <div @click="opnenDialg">
     <div id="bottomLeftChart" style="width:11.25rem;height:6.25rem;"></div>
+    <el-dialog class="my-info-dialog" :visible.sync="openChart" title="蒸汽消耗" @open="open" width="1600px" destroy-on-close append-to-body>
+      <div id="bottomLeftChart2" style="width:100%;height:600px;"></div>
+    </el-dialog>
   </div>
 </template>
 
@@ -10,7 +13,9 @@ export default {
   props:['monthData'],
   data() {
     return {
-      chart: null
+      chart: null,
+      openChart: false
+
     };
   },
   mixins: [echartMixins],
@@ -18,45 +23,17 @@ export default {
     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 = [
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01",
-      //   "2021-01"
-      // ];
       let category =[];
       let HHPData=[];
       let HPData=[];
@@ -316,6 +293,266 @@ export default {
       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.monthData.length;i++){
+        category[i]=this.monthData[i].dataDate;
+        HHPData[i]=this.monthData[i].hhp;
+        HPData[i]=this.monthData[i].hp;
+        LPData[i]=this.monthData[i].lp;
+        MPData[i]=this.monthData[i].mp;
+      }
+      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 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','LP','MP','总消耗'],
+          // 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
+          }
+        },
+        yAxis: [
+          {
+            splitLine: { show: false },
+            axisLine: {
+              lineStyle: {
+                color: "#B4B4B4"
+              }
+            },
+
+            axisLabel: {
+              formatter: "{value} "
+            }
+          },
+          {
+            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",
+            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: 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: "#956FD4" },
+                  { offset: 1, color: "#3EACE5" }
+                ])
+              }
+            },
+            z: -12,
+
+            data: HPData
+          },
+
+          {
+            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
+          },
+
+          {
+            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: MPData
+          }
+        ]
+      };
+      this.chart2.setOption(option);
     }
   },
   destroyed() {