王子文 2022年4月6日 15点22分 电厂大屏调整

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

@@ -18,26 +18,26 @@
           <bottomRightChart :weekData="weekData"/>
         </div>
       <div class="naturalGasData" style="flex: 1">
-        <div style="">
+        <div style="padding-top:30px;">
           <div style="display:flex;flex-direction:row; margin-bottom: 30px;height: 30px">
-            <p class="ml-3 colorBlue fw-b">电厂</p>
+            <p class="ml-3 colorBlue fw-b bottom-right-text" style="padding-right:15px;">电厂</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">合成器</p>
+          <p class="ml-3 colorBlue fw-b bottom-right-text">合成器</p>
           <div>
             <div class="fontElec1">178.0</div>
           </div>
         </div>
         <div style="display:flex;flex-direction:row; margin-bottom: 30px;height: 30px">
-          <p class="ml-3 colorBlue fw-b">剩余U2</p>
+          <p class="ml-3 colorBlue fw-b bottom-right-text">剩余U2</p>
           <div>
             <div class="fontElec1">456.0</div>
           </div>
         </div>
         <div style="display:flex;flex-direction:row; margin-bottom: 30px;height: 30px">
-          <p class="ml-3 colorBlue fw-b">剩余量</p>
+          <p class="ml-3 colorBlue fw-b bottom-right-text">剩余量</p>
           <div style="float: top">
             <div class="fontElec1">533.0</div>
           </div>
@@ -66,6 +66,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.bottom-right-text {
+  font-size: 18px;
+}
 #bottomRight {
   padding: 0rem 0rem 0rem;
   height: 3.5rem;

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

@@ -47,16 +47,17 @@
           </div>
         </div>
         <div>
-          <div id="naturalGasChart" style="width:100%;height:2.5rem;"></div>
+          <div id="naturalGasChart" style="width:100%;height:3rem;"></div>
         </div>
       </div>
 
       <div class="percent">
-        <div class="item bg-color-black">
+        <!-- 警铃 -->
+        <!-- <div class="item bg-color-black">
           <svg-icon icon-class="alarm" class="alarmIcon" />
-        </div>
+        </div> -->
         <div class="water">
-          <dv-water-level-pond :config="water" style="height: 1.5rem" />
+          <dv-water-level-pond :config="water" style="height: 2rem" />
         </div>
       </div>
     </div>
@@ -273,7 +274,7 @@ export default {
             symbolSize: 10,
             lineStyle: {
               color: '#5470C6',
-              width: 4,
+              width: 6,
               type: 'dashed'
             },
             itemStyle: {
@@ -432,7 +433,9 @@ export default {
         height: 1rem;
       }
       .water {
+        padding-top:30px;
         width: 100%;
+        height: 2rem;
       }
     }
   }

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

@@ -1,6 +1,18 @@
 <template>
   <div id="centreRight2">
     <div class="bg-color-black">
+      
+      <div class="d-flex jc-center body-box center-text" style=" margin-top: 0;height: 60px">
+        <div class="fontElec"><p class="title-p">发电量</p><p class="title-p2">{{this.dashboarddayelec.ypg}}</p></div>
+      </div>
+      <div class="d-flex jc-center body-box center-text" style=" margin-top: 0;height: 60px">
+        <div class="fontElec"><p class="title-p">倒电量</p> <p class="title-p2">{{this.dashboarddayelec.daodianliang}}</p></div>
+
+      </div>
+      <div class="d-flex jc-center body-box center-text" style=" margin-top: 0;height: 60px">
+        <div class="fontElec"><p class="title-p">用电量</p><p class="title-p2">{{this.dashboarddayelec.eveLec}}</p></div>
+
+      </div>
       <div class="d-flex pt-2 pl-2">
         <span style="color:#5cd9e8">
           <icon name="align-left"></icon>
@@ -10,17 +22,6 @@
       <div class="d-flex jc-center body-box" style=" margin-top: 0;">
         <div id="peakToValley" style="width:100%;height:2.5rem;"></div>
       </div>
-      <div class="d-flex jc-center body-box" style=" margin-top: 0;height: 60px">
-        <div class="fontElec"><p class="title-p">发电量</p><p class="title-p2">{{this.dashboarddayelec.ypg}}</p></div>
-      </div>
-      <div class="d-flex jc-center body-box" style=" margin-top: 0;height: 60px">
-        <div class="fontElec"><p class="title-p">倒电量</p> <p class="title-p2">{{this.dashboarddayelec.daodianliang}}</p></div>
-
-      </div>
-      <div class="d-flex jc-center body-box" style=" margin-top: 0;height: 60px">
-        <div class="fontElec"><p class="title-p">用电量</p><p class="title-p2">{{this.dashboarddayelec.eveLec}}</p></div>
-
-      </div>
     </div>
   </div>
 </template>
@@ -123,6 +124,9 @@
 </script>
 
 <style lang="scss">
+  .center-text{
+    margin-left:80px;
+  }
   #centreRight2 {
     padding: 0.0625rem;
     height: 5rem;

ui/src/views/monitor/elec/echart/analysisChart/analysisChartBottomRight1.vue

@@ -1,56 +0,0 @@
-<template>
-  
-</template>
-
-<script>
-import echartMixins from "@/utils/resizeMixins";
-export default {
-    props:['xDataTopCenter','yDataTopCenter'],
-    data() {
-        return {
-        chart: null,
-        }
-    },
-    mixins: [echartMixins],
-    mounted() {
-        this.init();
-    },
-    methods: {
-        init() {
-            this.chart = this.echarts.init(document.getElementById("analysisChartTopCenter"));
-            let option = {
-        tooltip: {
-            formatter: '{a} <br/>{b} : {c}%'
-        },
-        series: [
-            {
-                name: 'Pressure',
-                type: 'gauge',
-                progress: {
-                    show: true
-                },
-                detail: {
-                    valueAnimation: true,
-                    formatter: '{value}'
-                },
-                data: [
-                    {
-                        value: 50,
-                        name: 'SCORE'
-                    }
-                ]
-            }
-        ]
-    };
-            this.chart.setOption(option);
-        }
-    },
-    destroyed() {
-        window.onresize = null;
-    }
-}
-</script>
-
-<style>
-
-</style>

ui/src/views/monitor/elec/echart/analysisChart/analysisChartTopCenter.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div id="analysisChartTopCenter" style="width:6rem;height:4rem;margin:35px auto;"></div>
+        <div id="analysisChartTopCenter" style="width:6rem;height:3.5rem;margin:35px auto;"></div>
     </div>
 </template>
 

ui/src/views/monitor/elec/echart/analysisChart/analysisChartTopLeft.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div id="analysisChartTopLeft" style="width:6rem;height:4rem;margin:35px auto;"></div>
+        <div id="analysisChartTopLeft" style="width:6rem;height:3.5rem;margin:35px auto;"></div>
     </div>
 </template>
 

ui/src/views/monitor/elec/echart/analysisChart/analysisChartTopRight.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div id="analysisChartTopRight" style="width:6rem;height:4rem;margin:35px auto;"></div>
+        <div id="analysisChartTopRight" style="width:6rem;height:3.5rem;margin:35px auto;"></div>
     </div>
 </template>
 

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

@@ -276,6 +276,9 @@ export default {
             smooth: true,
             symbolSize: 10,
             color:"#28f8de",
+            lineStyle: {
+              width: 6
+            },
             markLine: {
               silent: true,
               data: [
@@ -292,6 +295,7 @@ export default {
               },
               lineStyle: {
                 normal: {
+                  width: 3,
                   color: "rgba(248,211,81,.7)"
                 }
               }

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

@@ -58,7 +58,7 @@ export default {
             y: "center",
             textStyle: {
               color: this.colorObj.textStyle,
-              fontSize: 16
+              fontSize: 20
             }
           }
         ],

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

@@ -2,23 +2,38 @@
   <!-- 电厂大屏第三页：全厂在线分析仪表 -->
   <div id="frontThree">
       <!-- 第一排开始 -->
-      <dv-border-box-10 style="height:45%;width:32%;display:inline-block;margin:10px;">
+      <dv-border-box-10 style="height:40%;width:32%;display:inline-block;margin:10px;">
         <analysisTopLeft :xDataTopLeft="xDataTopLeft" :yDataTopLeft="yDataTopLeft" style="margin-left:0px;margin-top:0px;"></analysisTopLeft>
       </dv-border-box-10>
-      <dv-border-box-10 style="height:45%;width:32%;display:inline-block;margin:10px;">
+      <dv-border-box-10 style="height:40%;width:32%;display:inline-block;margin:10px;">
         <analysisTopCenter :xDataTopCenter="xDataTopCenter" :yDataTopCenter="yDataTopCenter" style="margin-left:0px;margin-top:0px;"></analysisTopCenter>
       </dv-border-box-10>
-      <dv-border-box-10 style="height:45%;width:32%;display:inline-block;margin:10px;">
+      <dv-border-box-10 style="height:40%;width:32%;display:inline-block;margin:10px;">
         <analysisTopRight :xDataTopRight="xDataTopRight" :yDataTopRight="yDataTopRight" style="margin-left:0px;margin-top:0px;"></analysisTopRight>
       </dv-border-box-10>
       <!-- 第一排结束 -->
       <!-- 第二排开始 -->
-      <dv-border-box-12 style="height:45%;width:50%;display:inline-block;">
-
+      <dv-border-box-12 style="height:50%;width:32%;display:inline-block;margin:0px 10px;">
+        <div style="width:6.1rem;margin:0px auto;position:relative;top:25px;">
+          <div style="display:inline-block;">
+            <analysisBottomLeft1></analysisBottomLeft1>
+          </div>
+          <div style="display:inline-block;">
+            <analysisBottomLeft2></analysisBottomLeft2>
+          </div>
+        </div>
+        <div style="width:6.1rem;margin:0px auto;">
+          <div style="display:inline-block;">
+            <analysisBottomLeft3></analysisBottomLeft3>
+          </div>
+          <div style="display:inline-block;">
+            <analysisBottomLeft4></analysisBottomLeft4>
+          </div>
+        </div>
       </dv-border-box-12>
-      <dv-border-box-12 style="height:45%;width:50%;display:inline-block;top:-28px;">
+      <dv-border-box-12 style="height:50%;width:66%;display:inline-block;position:relative;top:-58px;">
         <h1 style="text-align:center;margin:30px 0px 20px 0px;">预警信息</h1>
-        <dv-scroll-board :config="config" style="width:800px;height:300px;margin-left:15px;"/>
+        <dv-scroll-board :config="config" style="width:1020px;height:350px;margin:0px auto;"/>
       </dv-border-box-12>
       <!-- 第二排结束 -->
   </div>
@@ -28,9 +43,13 @@
   import analysisTopLeft from './analysisTopLeft.vue';
   import analysisTopCenter from './analysisTopCenter.vue';
   import analysisTopRight from './analysisTopRight.vue';
+  import analysisBottomLeft1 from './analysisBottomLeft1.vue';
+  import analysisBottomLeft2 from './analysisBottomLeft2.vue';
+  import analysisBottomLeft3 from './analysisBottomLeft3.vue';
+  import analysisBottomLeft4 from './analysisBottomLeft4.vue';
   export default {
     name: "materialBalance",
-    components: { analysisTopLeft, analysisTopCenter, analysisTopRight },
+    components: { analysisTopLeft, analysisTopCenter, analysisTopRight, analysisBottomLeft1, analysisBottomLeft2, analysisBottomLeft3, analysisBottomLeft4 },
     data() {
       return {
         // 第一排左上角柱状图横纵轴数据