2022 3/3修改

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

@@ -5,10 +5,10 @@
         <span style="color:#5cd9e8">
           <icon name="chart-area"></icon>
         </span>
-        <div class="d-flex" id="weizhi">
+        <div class="d-flex">
           <span class="fs-xl text mx-2">天然气平衡</span>
           <div class="decoration2">
-            <dv-decoration-2 :reverse="true" style="width:5px;height:480px;" />
+            <dv-decoration-2 :reverse="true" style="width:5px;height:300px;" />
           </div>
         </div>
       </div>
@@ -56,12 +56,14 @@ export default {
 
 <style lang="scss" scoped>
 #bottomRight {
-  padding: 0.2rem 0.2rem 0;
+  padding: 0rem 0rem 0rem;
   height: 1.5rem;
   min-width: 3.75rem;
   border-radius: 0.0625rem;
+  top:-50 !important;
+  left:-40 !important;
   .bg-color-black {
-    height: 2.1875rem;
+    height: 3.1875rem;
     border-radius: 0.125rem;
   }
   .text {

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

@@ -33,7 +33,7 @@
         <span style="color:#5cd9e8">
           <icon name="align-left"></icon>
         </span>
-        <span class="fs-xl text mx-2 mb-1" style="display: none">每日能耗状态</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="percent">
@@ -225,74 +225,109 @@ export default {
   mounted() {
     this.initChart();
   },
-  // methods: {
-  //   initChart() {
-  //     // 基于准备好的dom，初始化echarts实例
-  //     this.chart = this.echarts.init(document.getElementById('naturalGasChart'))
-  //
-  //     this.chart.setOption({
-  //       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]
-  //         },
-  //       ]
-  //     })
-  //   }
-  // }
+  methods: {
+    initChart() {
+      // 基于准备好的dom，初始化echarts实例
+      this.chart = this.echarts.init(document.getElementById('naturalGasChart'))
+
+      this.chart.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: 10,
+            lineStyle: {
+              color: '#5470C6',
+              width: 4,
+              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>
 

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

@@ -177,7 +177,7 @@ export default {
       //       type: "line",
       //       smooth: true,
       //       symbol: "emptyCircle",
-      //       symbolSize: 8,x`
+      //       symbolSize: 8,
       //       itemStyle: {
       //         normal: {
       //           color: "#fff"
@@ -255,7 +255,7 @@ export default {
             position: "bottom",
             axisLine: true,
             axisLabel: {
-              // color: "rgba(255,255,255,.8)",
+              color: "rgba(255,255,255,.8)",
               fontSize: 12
             },
             data: weekCategory

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

@@ -1,8 +1,6 @@
 <template>
     <div>
       <div id="bottomRightChart1" style="width:100%;height:2.5rem;">
-        <div class="bg-color-black">
-        </div>
       </div>
     </div>
 </template>
@@ -97,35 +95,4 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-#bottomRight1 {
-  padding: 0.2rem 0.2rem 0;
-  height: 6.5rem;
-  min-width: 3.75rem;
-  border-radius: 0.0625rem;
-  .bg-color-black {
-    height: 6.1875rem;
-    border-radius: 0.125rem;
-  }
-  .text {
-    color: #c3cbde;
-  } //下滑线动态
-  .decoration2 {
-    position: absolute;
-    right: 0.125rem;
-  }
-  .chart-box {
-    margin-top: 0.2rem;
-    width: 2.125rem;
-    height: 2.125rem;
-    .active-ring-name {
-      padding-top: 0.125rem;
-    }
-  }
-  .naturalGasData {
-    display: flex;
-    justify-content: space-between;
-    float: right;
-    position: relative;
-  }
-}
 </style>

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

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div id="bottomRightChart2" style="width:100%;height:2.5rem;">
+    </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('bottomRightChart2'))
+      let option={
+        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: [820, 932, 901, 934, 1290, 1330, 1320],
+            type: 'line',
+            smooth: true
+          }
+        ]
+      }
+      this.chart.setOption(option);
+    }
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

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

@@ -98,11 +98,16 @@
               <dv-border-box-12>
                 <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>
-                  <div id="naturalGasChart" style="width:100%;height:2.75rem;"><bottom-right1 /></div>
+                  <span class="fs-xl text mx-2 mb-1">天然气日消耗情况</span>
+                  <div id="naturalGasChart" style="width:100%;height:2.9rem;"><bottom-right1 /></div>
                 </div>
               </dv-border-box-12>
               <dv-border-box-12>
+                <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>
+                  <div id="naturalGasChart1" style="width:100%;height:2.9rem;"><bottom-right2 /></div>
+                </div>
               </dv-border-box-12>
             </div>
           </div>
@@ -133,6 +138,7 @@ 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
@@ -160,6 +166,8 @@ export default {
     bottomLeft,
     bottomRight,
     bottomRight1,
+    bottomRight2
+    bottomRight1,
     frontElecTwo,
     frontElecThree
   },
@@ -348,7 +356,7 @@ export default {
         grid-template-rows: repeat(2,50%);
       }
       .bototm-box2 {
-        margin-top: 0.125rem;
+        margin-top: 0rem;
         display: grid;
         grid-template-columns: repeat(2,50%);
       }