LY

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

@@ -20,26 +20,26 @@
       <div class="naturalGasData" style="flex: 1">
         <div style="padding-top:30px;">
           <div style="display:flex;flex-direction:row; margin-bottom: 30px;height: 30px">
-            <p class="ml-3 colorBlue fw-b bottom-right-text" style="padding-right:15px;">电厂</p>
+            <p class="ml-3 colorBlue fw-b bottom-right-text" style="padding-right:17px;">电厂</p>
             <div class="fontElec1">755.0</div>
           </div>
         </div>
         <div style="display:flex;flex-direction:row; margin-bottom: 30px;height: 30px">
           <p class="ml-3 colorBlue fw-b bottom-right-text">合成器</p>
           <div>
-            <div class="fontElec1">178.0</div>
+            <div class="fontElec1">778.0</div>
           </div>
         </div>
         <div style="display:flex;flex-direction:row; margin-bottom: 30px;height: 30px">
-          <p class="ml-3 colorBlue fw-b bottom-right-text">剩余U2</p>
+          <p class="ml-3 colorBlue fw-b bottom-right-text" >剩余U2</p>
           <div>
-            <div class="fontElec1">456.0</div>
+            <div class="fontElec1" style="margin-left: 0.34rem;">756.0</div>
           </div>
         </div>
         <div style="display:flex;flex-direction:row; margin-bottom: 30px;height: 30px">
           <p class="ml-3 colorBlue fw-b bottom-right-text">剩余量</p>
           <div style="float: top">
-            <div class="fontElec1">533.0</div>
+            <div class="fontElec1">733.0</div>
           </div>
         </div>
       </div>
@@ -107,10 +107,9 @@ export default {
   }
   .fontElec1 {
     width:100px;
-    margin-left: 0.3rem;
+    margin-left: 0.4rem;
     color: #cfe5ea;
     font:30px/15px 'ds-digitalbold';
-    text-align:center;
   }
 }
 

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

@@ -37,7 +37,7 @@
 <!--          <div id="naturalGasChart" style="width:100%;height:2.5rem;"></div>-->
 <!--      </div>-->
 
-      <div class="ranking bg-color-black">
+      <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>
@@ -49,6 +49,9 @@
         <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">
@@ -71,6 +74,7 @@ export default {
   props: ['dashboardelecdata'],
   data() {
     return {
+      openChart: false,
       queryParams:{},
       numberData: [
 
@@ -254,6 +258,14 @@ export default {
     this.initChart();
   },
   methods: {
+    openChartUsed(){
+      this.openChart = true
+    },
+    open(){
+      this.$nextTick(() => {
+        this.initChartDialog()
+      })
+    },
     initChart() {
       // 基于准备好的dom，初始化echarts实例
       this.chart = this.echarts.init(document.getElementById('naturalGasChart'))
@@ -354,6 +366,111 @@ export default {
         //   },
         // ]
       })
+    },
+    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'
+        },
+        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]
+        //   },
+        // ]
+      })
     }
   }
 };

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

@@ -165,8 +165,11 @@ export default {
         ],
         series: [
           {
+            label: {
+              show: true,
+              position: 'top'
+            },
             type: 'line',
-            showSymbol: false,
             data: dateNum,
             areaStyle: {
               color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -254,14 +257,6 @@ export default {
       })
     },
     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];
-      // });
-      // const valueList = data.map(function (item) {
-      //   return item[1];
-      // });
-
       const dateNum = [];
       const dateDay=[];
       for (let i = 0; i < this.fiftydayData.length; i++) {
@@ -301,8 +296,11 @@ export default {
         ],
         series: [
           {
+            label: {
+              show: true,
+              position: 'top'
+            },
             type: 'line',
-            showSymbol: false,
             data: dateNum,
             areaStyle: {
               color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [

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

@@ -19,8 +19,11 @@
         </span>
         <span class="fs-xl text mx-2">峰谷电量</span>
       </div>
-      <div class="d-flex jc-center body-box" style=" margin-top: 0;">
+      <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>
@@ -32,6 +35,7 @@
     props:['dashboardelecdata'],
     data() {
       return {
+        openChart: false,
         config: {
           data: [
             {
@@ -62,6 +66,14 @@
       this.initChart();
     },
     methods: {
+      openChartElec(){
+        this.openChart = true
+      },
+      open(){
+        this.$nextTick(() => {
+          this.initChartDialog()
+        })
+      },
       initChart() {
         // 基于准备好的dom，初始化echarts实例
         this.chart = this.echarts.init(document.getElementById('peakToValley'))
@@ -119,6 +131,67 @@
           ]
         })
       },
+      initChartDialog() {
+        // 基于准备好的dom，初始化echarts实例
+        this.chart1 = this.echarts.init(document.getElementById('peakToValleyDialog'))
+        const dateDay = [];
+        const dateNum = [];
+        for (let i = 0; i < this.dashboarddayelecmonth.length; i++) {
+          dateDay[i] = this.dashboarddayelecmonth[i].dateDay;
+          dateNum[i] = this.dashboarddayelecmonth[i].fenggucha;
+        }
+
+        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'
+            }
+          ],
+          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>

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

@@ -1,10 +1,10 @@
 <template>
   <div @click="openSteamBalance">
     <div id="bottomRightChart" style="width:100%;height:3.5rem;top: -20px"></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>
-  <el-dialog class="my-info-dialog" :visible.sync="openChart" title="BYC用电情况" @open="open" width="1600px" destroy-on-close append-to-body>
-    <div id="BYCChart1" style="width:100%;height:600px;"></div>
-  </el-dialog>
 </template>
 
 <script>
@@ -29,10 +29,12 @@ export default {
         this.draw();
       }, 6000);
     },
-    openSteamBalance(){},
+    openSteamBalance(){
+      this.openChart = true
+    },
     open(){
       this.$nextTick(() => {
-        this.initBycChartDialog()
+        this.drawDialog()
       })
     },
     draw() {
@@ -321,7 +323,7 @@ export default {
     },
     drawDialog() {
       // 基于准备好的dom，初始化echarts实例
-      this.chart1 = this.echarts.init(document.getElementById("bottomRightChart"));
+      this.chart1 = this.echarts.init(document.getElementById("bottomRightChartDialog"));
       //  ----------------------------------------------------------------
       // 数据
       let dateBase = new Date();
@@ -355,32 +357,26 @@ export default {
         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: ['08:00' ,'11:00' ,'14:00' ,'17:00' ,'20:00' ,'23:00' ,'02:00' ,'05:00' ]
+          data: ['08:00' ,'11:00' ,'14:00' ,'17:00' ,'20:00' ,'23:00' ,'02:00' ,'05:00']
           // data: weekCategory
         },
-
         yAxis: {
           type: 'value'
         },
         series: [
           {
+            label: {
+              show: true,
+              position: 'top'
+            },
             data: [99, 180, 200, 310, 459, 601, 800 ,933],
             // data:dateNum,
             type: 'line',
             smooth: true,
             symbolSize: 15,
-            color:"#28f8de",
+            color:"#1f9f90",
             lineStyle: {
               width: 6
             },

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

@@ -1,7 +1,10 @@
 <template>
-    <div>
+    <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>
 
@@ -10,7 +13,8 @@ import echartMixins from "@/utils/resizeMixins";
 export default {
   data() {
     return {
-      chart:null
+      chart:null,
+      openChart: false,
     };
   },
   mixins: [echartMixins],
@@ -18,10 +22,17 @@ export default {
     this.draw();
   },
   methods: {
+    openSteamUsed(){
+      this.openChart = true
+    },
+    open(){
+      this.$nextTick(() => {
+        this.drawDialog()
+      })
+    },
     draw() {
       // 基于准备好的dom，初始化echarts实例
       this.chart = this.echarts.init(document.getElementById('bottomRightChart1'))
-
       let Option={
         color: ['#00DDFF', '#37A2FF'],
         tooltip: {
@@ -73,17 +84,76 @@ export default {
             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]
+            data: [9,20, 32, 42, 57, 63, 77, 89, 90, 102, 114, 124, 135, 145, 151, 169, 179, 189, 192, 201, 210, 219, 224, 235, 247, 258, 260, 270, 289,299,304]
           },
           {
             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]
+            data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280,290,300]
           },
         ]
       };
       this.chart.setOption(Option);
+    },
+    drawDialog() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart1 = this.echarts.init(document.getElementById('bottomRightChart1Dialog'))
+      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: ['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,
+            },
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLabel: {
+              textStyle: {
+                fontSize: 10,
+                margin: 15
+              },
+            }
+          }
+        ],
+        series: [
+          {
+            name: this.$t('实际'),
+            type: 'line',
+            symbol: "none",
+            data: [9,20, 32, 42, 57, 63, 77, 89, 90, 102, 114, 124, 135, 145, 151, 169, 179, 189, 192, 201, 210, 219, 224, 235, 247, 258, 260, 270, 289,299,304]
+          },
+          {
+            name: this.$t('计划'),
+            type: 'line',
+            symbol: "none",
+            data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280,290,300]
+          },
+        ]
+      };
+      this.chart1.setOption(Option);
     }
   },
   destroyed() {

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

@@ -1,7 +1,10 @@
 <template>
-  <div>
+  <div @click="openSteamUsed">
     <div id="bottomRightChart2" style="width:100%;height:3.2rem;">
     </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>
 
@@ -12,7 +15,8 @@ import echarts from "@/api/cpms/echarts.min";
 export default {
   data() {
     return {
-      chart:null
+      chart:null,
+      openChart: false,
     };
   },
   mixins: [echartMixins],
@@ -20,6 +24,14 @@ export default {
     this.draw();
   },
   methods: {
+    openSteamUsed(){
+      this.openChart = true
+    },
+    open(){
+      this.$nextTick(() => {
+        this.drawDialog()
+      })
+    },
     draw() {
       // 基于准备好的dom，初始化echarts实例
       this.chart = this.echarts.init(document.getElementById('bottomRightChart2'))
@@ -121,6 +133,84 @@ export default {
         ]
       }
       this.chart.setOption(option);
+    },
+    drawDialog() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart1 = this.echarts.init(document.getElementById('bottomRightChart2Dialog'))
+      // let lineData = [
+      //   820, 932, 901, 934, 1290, 1330, 1320
+      // ];
+      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: [
+            '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',
+          axisLine: {
+            lineStyle: {
+            }
+          },
+        },
+        series: [
+          {
+            data: [500, 680, 733, 470, 1290, 980, 1320,1580],
+            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);
     }
   },
 }