王子文 2022年4月7日 17点07分 电厂大屏调整

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div id="analysisChartTopCenter" style="width:6rem;height:3.5rem;margin:35px auto;"></div>
+        <div id="analysisChartTopCenter" style="width:6rem;height:3rem;margin:0.5rem auto;"></div>
     </div>
 </template>
 
@@ -22,9 +22,9 @@ export default {
             this.chart = this.echarts.init(document.getElementById("analysisChartTopCenter"));
             let option = {
                 title: {
-                    text: 'HRSG #2',
-                    fontSize: 20,
+                    text: 'HRSG #2 排量 (mg/m3)',
                     textStyle: {
+                        fontSize: 15,
                         fontWeight: 'bold',
                         color: '#DCDCDC'
                     },
@@ -47,14 +47,14 @@ export default {
                     type: 'value',
                     boundaryGap: [0, 0.01],
                     axisLabel: {
-                        fontSize: 14,
+                        fontSize: 12,
                         textStyle: {
                             fontWeight: 'bold',
                             color: '#DCDCDC'
                         }
                     },
                     nameTextStyle: {
-                        fontSize: 14,
+                        fontSize: 12,
                         fontWeight: 'bold',
                             color: '#DCDCDC'
                     }
@@ -63,14 +63,14 @@ export default {
                     type: 'category',
                     data: this.yDataTopCenter,
                     axisLabel: {
-                        fontSize: 14,
+                        fontSize: 12,
                         textStyle: {
                             fontWeight: 'bold',
                             color: '#DCDCDC'
                         }
                     },
                     nameTextStyle: {
-                        fontSize: 14,
+                        fontSize: 12,
                         fontWeight: 'bold',
                         color: '#DCDCDC'
                     }
@@ -79,7 +79,6 @@ export default {
                     {
                         type: 'bar',
                         data: this.xDataTopCenter,
-                        
                     }
                 ]
             };

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div id="analysisChartTopLeft" style="width:6rem;height:3.5rem;margin:35px auto;"></div>
+        <div id="analysisChartTopLeft" style="width:6rem;height:3rem;margin:0.5rem auto;"></div>
     </div>
 </template>
 
@@ -22,9 +22,9 @@ export default {
             this.chart = this.echarts.init(document.getElementById("analysisChartTopLeft"));
             let option = {
                 title: {
-                    text: 'HRSG #1',
-                    fontSize: 20,
+                    text: 'HRSG #1 排量 (mg/m3)',
                     textStyle: {
+                        fontSize: 15,
                         fontWeight: 'bold',
                         color: '#DCDCDC'
                     },
@@ -47,14 +47,14 @@ export default {
                     type: 'value',
                     boundaryGap: [0, 0.01],
                     axisLabel: {
-                        fontSize: 14,
+                        fontSize: 12,
                         textStyle: {
                             fontWeight: 'bold',
                             color: '#DCDCDC'
                         }
                     },
                     nameTextStyle: {
-                        fontSize: 14,
+                        fontSize: 12,
                         fontWeight: 'bold',
                             color: '#DCDCDC'
                     }
@@ -63,14 +63,14 @@ export default {
                     type: 'category',
                     data: this.yDataTopLeft,
                     axisLabel: {
-                        fontSize: 14,
+                        fontSize: 12,
                         textStyle: {
                             fontWeight: 'bold',
                             color: '#DCDCDC'
                         }
                     },
                     nameTextStyle: {
-                        fontSize: 14,
+                        fontSize: 12,
                         fontWeight: 'bold',
                         color: '#DCDCDC'
                     }
@@ -78,8 +78,7 @@ export default {
                 series: [
                     {
                         type: 'bar',
-                        data: this.xDataTopLeft,
-                        
+                        data: this.xDataTopLeft
                     }
                 ]
             };

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div id="analysisChartTopRight" style="width:6rem;height:3.5rem;margin:35px auto;"></div>
+        <div id="analysisChartTopRight" style="width:6rem;height:3rem;margin:0.5rem auto;"></div>
     </div>
 </template>
 
@@ -22,9 +22,9 @@ export default {
             this.chart = this.echarts.init(document.getElementById("analysisChartTopRight"));
             let option = {
                 title: {
-                    text: 'HRSG #3',
-                    fontSize: 20,
+                    text: 'HRSG #3 排量 (mg/m3)',
                     textStyle: {
+                        fontSize: 15,
                         fontWeight: 'bold',
                         color: '#DCDCDC'
                     },
@@ -47,14 +47,14 @@ export default {
                     type: 'value',
                     boundaryGap: [0, 0.01],
                     axisLabel: {
-                        fontSize: 14,
+                        fontSize: 12,
                         textStyle: {
                             fontWeight: 'bold',
                             color: '#DCDCDC'
                         }
                     },
                     nameTextStyle: {
-                        fontSize: 14,
+                        fontSize: 12,
                         fontWeight: 'bold',
                             color: '#DCDCDC'
                     }
@@ -63,14 +63,14 @@ export default {
                     type: 'category',
                     data: this.yDataTopRight,
                     axisLabel: {
-                        fontSize: 14,
+                        fontSize: 12,
                         textStyle: {
                             fontWeight: 'bold',
                             color: '#DCDCDC'
                         }
                     },
                     nameTextStyle: {
-                        fontSize: 14,
+                        fontSize: 12,
                         fontWeight: 'bold',
                         color: '#DCDCDC'
                     }
@@ -78,8 +78,7 @@ export default {
                 series: [
                     {
                         type: 'bar',
-                        data: this.xDataTopRight,
-                        
+                        data: this.xDataTopRight
                     }
                 ]
             };

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

@@ -277,7 +277,6 @@ export default {
             data: ['08:00' ,'11:00' ,'14:00' ,'17:00' ,'20:00' ,'23:00' ,'02:00' ,'05:00' ]
             // data: weekCategory
           },
-
         yAxis: {
           type: 'value'
         },

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

@@ -2,39 +2,37 @@
   <!-- 电厂大屏第三页：全厂在线分析仪表 -->
   <div id="frontThree">
       <!-- 第一排开始 -->
-      <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: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: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>
+      <div id="rowOne">
+        <dv-border-box-10 style="height:4rem;width:32%;display:inline-block;margin:10px;padding:0px;">
+          <analysisTopLeft :xDataTopLeft="xDataTopLeft" :yDataTopLeft="yDataTopLeft"></analysisTopLeft>
+        </dv-border-box-10>
+        <dv-border-box-10 style="height:4rem;width:32%;display:inline-block;margin:10px;padding:0px;">
+          <analysisTopCenter :xDataTopCenter="xDataTopCenter" :yDataTopCenter="yDataTopCenter"></analysisTopCenter>
+        </dv-border-box-10>
+        <dv-border-box-10 style="height:4rem;width:32%;display:inline-block;margin:10px;padding:0px;">
+          <analysisTopRight :xDataTopRight="xDataTopRight" :yDataTopRight="yDataTopRight"></analysisTopRight>
+        </dv-border-box-10>
+      </div>
       <!-- 第一排结束 -->
       <!-- 第二排开始 -->
-      <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 id="rowTwo">
+        <div style="height:5.5rem;width:32%;display:inline-block;float:left;margin:0px 10px;">
+          <dv-border-box-12 style="height:2.75rem;">
+            <div style="height:140px;overflow:hidden;padding:50px 75px;transform:scale(1.5,1.5);padding-top:60px;">
+              <dv-capsule-chart :config="configBottomLeft1" style="width:300px;height:120px;margin:0px auto;" />
+            </div>
+          </dv-border-box-12>
+          <dv-border-box-12 style="height:2.75rem;">
+            <div style="height:130px;overflow:hidden;padding:50px 75px;transform:scale(1.5,1.5);">
+              <dv-capsule-chart :config="configBottomLeft2" style="width:300px;height:120px;margin:0px auto;" />
+            </div>
+          </dv-border-box-12>
         </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: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:1020px;height:350px;margin:0px auto;"/>
-      </dv-border-box-12>
+        <dv-border-box-10 style="height:5.5rem;width:65%;display:inline-block;float:left;margin:0px 10px;">
+          <h1 style="text-align:center;margin-top:35px;">设备排量超标预警</h1>
+          <dv-scroll-board :config="configBottomRight" style="width:1000px;height:4rem;margin:0px auto;"/>
+        </dv-border-box-10>
+      </div>
       <!-- 第二排结束 -->
   </div>
 </template>
@@ -54,28 +52,28 @@
       return {
         // 第一排左上角柱状图横纵轴数据
         xDataTopLeft: [
-          { value: 903, itemStyle: { color: '#6BE5EA' } },
-          { value: 219, itemStyle: { color: '#4A7CF9' } },
-          { value: 371, itemStyle: { color: '#8378EA' } }
+          { value: 2050, itemStyle: { color: '#8378EA' } },
+          { value: 607, itemStyle: { color: '#F74F4E' } },
+          { value: 100, itemStyle: { color: '#6BE5EA' } }
         ],
-        yDataTopLeft: ['烟尘折算', 'NOx折算', 'SO2折算'],
+        yDataTopLeft: ['NOx折算', 'SO2折算', '烟尘折算'],
         // 第一排中间柱状图横纵轴数据
         xDataTopCenter: [
-          { value: 323, itemStyle: { color: '#6BE5EA' } },
-          { value: 776, itemStyle: { color: '#4A7CF9' } },
-          { value: 224, itemStyle: { color: '#8378EA' } }
+          { value: 1900, itemStyle: { color: '#8378EA' } },
+          { value: 572, itemStyle: { color: '#4A7CF9' } },
+          { value: 200, itemStyle: { color: '#F74F4E' } }
         ],
-        yDataTopCenter: ['烟尘折算', 'NOx折算', 'SO2折算'],
+        yDataTopCenter: ['NOx折算', 'SO2折算', '烟尘折算'],
         // 第一排右上角柱状图横纵轴数据
         xDataTopRight: [
-          { value: 523, itemStyle: { color: '#6BE5EA' } },
-          { value: 239, itemStyle: { color: '#4A7CF9' } },
-          { value: 424, itemStyle: { color: '#8378EA' } }
+          { value: 2050, itemStyle: { color: '#8378EA' } },
+          { value: 572, itemStyle: { color: '#4A7CF9' } },
+          { value: 100, itemStyle: { color: '#6BE5EA' } }
         ],
-        yDataTopRight: ['烟尘折算', 'NOx折算', 'SO2折算'],
+        yDataTopRight: ['NOx折算', 'SO2折算', '烟尘折算'],
         // 第二排右下角轮播表表头、表数据、表配置
-        tableHeader: ['时间', '设备', '编号', '内容'],
-        tableData: [
+        tableHeaderBottomRight: ['时间', '设备', '编号', '内容'],
+        tableDataBottomRight: [
           ['<span class="span-rw">2022-4-2 06:22</span>', '设备 BP', 'QT12001', ' leakage #1HRSG DUCT BURNRE'],
           ['2022-4-2 13:43', '设备 BP', 'QT12501', ' CO leakage #1HRSG offgas system'],
           ['2022-4-2 15:23', '设备 BP', '<span>QT12502<i class="icon icon-shang"></i></span>', ' CO leakage #1HRSG offgas system'],
@@ -87,17 +85,39 @@
           ['2022-4-5 12:10', '设备 HRSC #2', 'AI82302', 'PH @ HRSG#2 HP DRUM BLOWDOWN', ],
           ['2022-4-5 14:46', '设备 HRSC #3', 'AI82403', 'CC @ HRSG#3 HP DRUM DISCHARGE']
         ],
-        config: {},
+        capsuleDataBottomLeft1: [
+          {
+            name: 'COD of Waste Water (mg/l)',
+            value: 22
+          },
+          {
+            name: 'PH of Waste Water',
+            value: 7
+          }
+        ],
+        capsuleDataBottomLeft2: [
+          {
+            name: 'COD of Rain Water (mg/l)',
+            value: 14
+          },
+          {
+            name: 'PH of Rain Water',
+            value: 12
+          }
+        ],
+        configBottomRight: {},
+        configBottomLeft1: {},
+        configBottomLeft2: {}
       };
     },
     methods: {
       /**
        * 第二排右下角轮播表配置初始化
        */
-      initCarousel() {
-        this.config = {
-          data: this.tableData,
-          header: this.tableHeader,
+      initCarouselBottomRight() {
+        this.configBottomRight = {
+          data: this.tableDataBottomRight,
+          header: this.tableHeaderBottomRight,
           rowNum: 6,
           headerBGC: '#00BAFF',
           oddRowBGC: '#003B51',
@@ -106,10 +126,23 @@
           align: 'center',
           headerHeight: 50
         }
+      },
+      initCapsuleBottomLeft() {
+        this.configBottomLeft1 = {
+          data: this.capsuleDataBottomLeft1,
+          colors: ['#FF9800', '#FF9800'],
+          showValue: true
+        }
+        this.configBottomLeft2 = {
+          data: this.capsuleDataBottomLeft2,
+          colors: ['#00FF0D', '#00FF0D'],
+          showValue: true
+        }
       }
     },
     mounted () {
-      this.initCarousel();
+      this.initCarouselBottomRight();
+      this.initCapsuleBottomLeft();
     }
   }
 </script>