cq

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

@@ -12,17 +12,25 @@
           </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 class="naturalGasData">
+        <div>
+          <p class="ml-3 colorBlue fw-b">电厂</p>
+          <div>
+            <div class="fontElec">853.0</div>
+          </div>
+        </div>
+        <div>
+          <p class="ml-3 colorBlue fw-b">合成器</p>
+          <div>
+            <div class="fontElec">53.0</div>
+          </div>
+        </div>
+        <div>
+          <p class="ml-3 colorBlue fw-b">剩余U2</p>
+          <div>
+            <div class="fontElec">145.0</div>
+          </div>
+        </div>
       </div>
       <div>
         <bottomRightChart />
@@ -70,5 +78,11 @@ export default {
       padding-top: 0.125rem;
     }
   }
+  .naturalGasData {
+    display: flex;
+    justify-content: space-between;
+    float: right;
+    position: relative;
+  }
 }
 </style>

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

@@ -210,12 +210,7 @@ export default {
         color: ['#00DDFF', '#37A2FF'],
         tooltip: {
           trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-            label: {
-              backgroundColor: '#6a7985'
-            }
-          }
+          type: 'category',
         },
         /* 标识 */
         legend: {
@@ -261,50 +256,14 @@ export default {
           {
             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]
+            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',
-            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]
+            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/echart/bottom/bottomRightChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div id="bottomRightChart" style="width:11.25rem;height:5rem;"></div>
+    <div id="bottomRightChart" style="width:11.25rem;height:6rem;"></div>
   </div>
 </template>
 
@@ -130,6 +130,7 @@ export default {
           left: 90,
           right: 80,
           bottom: 40,
+          top: "30%"
         },
         xAxis: {
           type: "category",