Pārlūkot izejas kodu

王子文 2022年4月13日 16点28分 电厂大屏
第一页面:
1) “合成器” 需要修改撑“ 合成气”。
2)“剩余U2" 修改成“ U2 "
3)在” 剩余量” 前面加“ 日” 变成 “ 日剩余量” 。
4) 在“ U2 " 和 ” 日剩余量“ 之间加 ” 苯乙烯” 字段。
6)在“ 电厂/合成气/U2/ 苯乙烯/日剩余量” 模块上面加 “ NG 消耗” 标题。
7 )所有的曲线图需要有单位标注。 ( 三页)
8) “ 蒸汽消耗” 中MP 和LP 位置需要调换一下,确保HHP/HP/MP/LP顺序。
第三页面:
1) 所有“编号”修改成为“ 位号”。

wangggziwen 3 gadi atpakaļ
vecāks
revīzija
08f3a35fda

+ 1 - 0
ui/src/views/monitor/elec/bottomLeft.vue

@@ -10,6 +10,7 @@
         </div>
       </div>
       <div>
+        <span style="padding-left:15px;color:#74777F;fontWeight:bold;">Unit:(t/h)</span>
         <bottomLeftChart :monthData="monthData"/>
       </div>
     </div>

+ 17 - 10
ui/src/views/monitor/elec/bottomRight.vue

@@ -14,34 +14,41 @@
         </div>
       </div>
       <div style="display:flex;flex-direction:row">
-        <div style="flex: 3" >
+        <div style="flex: 3.1" >
           <bottomRightChart :weekData="weekData"/>
         </div>
-      <div class="naturalGasData" style="flex: 1">
+      <div class="naturalGasData" style="flex: 0.9;">
+        <span style="fontSize:14px;position:relative;top:-15px;">NG消耗</span>
         <div style="padding-top:10px;">
-          <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:17px;">电厂</p>
+          <div style="display:flex;flex-direction:row; margin-bottom: 10px;height:30px;">
+            <p class="ml-3 colorBlue fw-b bottom-right-text" style="padding-right:17px;margin:0px;">电厂</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 style="display:flex;flex-direction:row; margin-bottom: 10px;height:30px;">
+          <p class="ml-3 colorBlue fw-b bottom-right-text" style="margin:0px;">合成气</p>
           <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>
+        <div style="display:flex;flex-direction:row; margin-bottom: 10px;height:30px;">
+          <p class="ml-3 colorBlue fw-b bottom-right-text" style="padding-right:36px;margin:0px;">U2</p>
           <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="display:flex;flex-direction:row; margin-bottom: 10px;height:30px;">
+          <p class="ml-3 colorBlue fw-b bottom-right-text" style="margin:0px;">苯乙烯</p>
           <div style="float: top">
             <div class="fontElec1">733.0</div>
           </div>
         </div>
+        <div style="display:flex;flex-direction:row; margin-bottom: 10px;height:30px;">
+          <p class="ml-3 colorBlue fw-b bottom-right-text" style="margin:0px;">日剩余量</p>
+          <div style="float: top">
+            <div class="fontElec1" style="margin-left: 0.2rem;">733.0</div>
+          </div>
+        </div>
       </div>
 
       </div>

+ 4 - 2
ui/src/views/monitor/elec/center.vue

@@ -285,7 +285,8 @@ export default {
           ]
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          name:  'Unit:(t)'
         },
         series: [
           {
@@ -386,7 +387,8 @@ export default {
           ]
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          name:  'Unit:(t)'
         },
         series: [
           {

+ 14 - 5
ui/src/views/monitor/elec/centerLeft1.vue

@@ -12,18 +12,22 @@
       </div>
       <div class="d-flex chartStyle" @click="openchart1">
         <!--渐变折线图-->
+        <span style="padding-left:10px;">Unit:(kW·h)</span>
         <div id="oneGTGyChart" style="width:100%;height:2rem;"></div>
       </div>
       <div class="d-flex chartStyle" @click="openchart2">
         <!--渐变折线图-->
+        <span style="padding-left:10px;">Unit:(kW·h)</span>
         <div id="twoGTGyChart" style="width:100%;height:2rem;"></div>
       </div>
       <div class="d-flex chartStyle" @click="openchart3">
+        <span style="padding-left:10px;">Unit:(kW·h)</span>
         <!--渐变折线图-->
         <div id="threeGTGyChart" style="width:100%;height:2rem;"></div>
       </div>
       <div class="d-flex chartStyle" @click="openchart4">
         <!--渐变折线图-->
+        <span style="padding-left:10px;">Unit:(kW·h)</span>
         <div id="fourGTGyChart" style="width:100%;height:2rem;"></div>
       </div>
     </div>
@@ -265,7 +269,8 @@ export default {
           data:dateDay
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          name: 'Unit:(kW·h)'
         },
         series: [
           {
@@ -387,7 +392,8 @@ export default {
           data:dateDay
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          name: 'Unit:(kW·h)'
         },
         series: [
           {
@@ -511,7 +517,8 @@ export default {
           data:dateDay
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          name: 'Unit:(kW·h)'
         },
         series: [
           {
@@ -635,7 +642,8 @@ export default {
           data:dateDay
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          name: 'Unit:(kW·h)'
         },
         series: [
           {
@@ -688,7 +696,8 @@ export default {
     border-radius: 0.125rem;
     width: 100%;
     .chartStyle {
-      float: right;
+      // float: right;
+      display:inline-block;
       position: relative;
       width: 50%;
     }

+ 14 - 13
ui/src/views/monitor/elec/centerRight1.vue

@@ -10,6 +10,7 @@
         </div>
       </div>
       <div class="d-flex jc-center body-box" @click="openBYCdialog">
+        <span style="padding-left:10px;">Unit:(kW·h)</span>
         <div id="BYCChart" style="width:100%;height:1.6rem;"></div>
       </div>
       <div class="d-flex pt-2 pl-2" style="margin-top: 0.3rem">
@@ -21,6 +22,7 @@
         </div>
       </div>
       <div class="d-flex jc-center body-box" @click="openBOCdialog">
+        <span style="padding-left:10px;">Unit:(kW·h)</span>
         <div id="BOCChart" style="width:100%;height:1.6rem;"></div>
       </div>
     </div>
@@ -67,7 +69,6 @@ export default {
     initBycChart() {
       // 基于准备好的dom,初始化echarts实例
       this.chart = this.echarts.init(document.getElementById('BYCChart'));
-
       const dateNum = [];
       const dateDay=[];
       for (let i = 0; i < this.fiftydayData.length; i++) {
@@ -100,9 +101,9 @@ export default {
             data: dateDay
           },
         ],
-        yAxis: [
-          {},
-        ],
+        yAxis: {
+          name: 'Unit:(kW·h)'
+        },
         series: [
           {
             type: 'line',
@@ -160,9 +161,9 @@ export default {
             data: dateDay
           },
         ],
-        yAxis: [
-          {},
-        ],
+        yAxis: {
+          name: 'Unit:(kW·h)'
+        },
         series: [
           {
             label: {
@@ -232,9 +233,9 @@ export default {
             data: dateDay
           },
         ],
-        yAxis: [
-          {},
-        ],
+        yAxis: {
+          name: 'Unit:(kW·h)'
+        },
         series: [
           {
             type: 'line',
@@ -291,9 +292,9 @@ export default {
             data: dateDay
           },
         ],
-        yAxis: [
-          {},
-        ],
+        yAxis: {
+          name: 'Unit:(kW·h)'
+        },
         series: [
           {
             label: {

+ 4 - 2
ui/src/views/monitor/elec/centerRight2.vue

@@ -111,7 +111,8 @@
           ],
           yAxis: [
             {
-              type: 'value'
+              type: 'value',
+              name: 'Unit:(kW·h)'
             }
           ],
           series: [
@@ -168,7 +169,8 @@
           ],
           yAxis: [
             {
-              type: 'value'
+              type: 'value',
+              name: 'Unit:(kW·h)'
             }
           ],
           series: [

+ 1 - 1
ui/src/views/monitor/elec/echart/analysisChart/analysisChartBottomLeft3.vue

@@ -44,7 +44,7 @@ export default {
                 },
                 legend: {
                     data: ['Waste Water', 'Rain Water'],
-                    padding: [30, 0, 0, 0]
+                    padding: [20, 0, 0, 0]
                 },
                 grid: {
                     left: '3%',

+ 3 - 1
ui/src/views/monitor/elec/echart/analysisChart/analysisChartBottomLeft4.vue

@@ -44,7 +44,7 @@ export default {
                 },
                 legend: {
                     data: ['Waste Water', 'Rain Water'],
-                    padding: [30, 0, 0, 0]
+                    padding: [20, 0, 0, 0]
                 },
                 grid: {
                     left: '3%',
@@ -66,6 +66,7 @@ export default {
                 },
                 yAxis: {
                     type: 'value',
+                    name: 'Unit:(mg/l)',
                     axisLabel: {
                         color: '#808080'
                     },
@@ -142,6 +143,7 @@ export default {
                 },
                 yAxis: {
                     type: 'value',
+                    name: 'Unit:(mg/l)',
                     axisLabel: {
                         color: '#808080'
                     }

+ 2 - 2
ui/src/views/monitor/elec/echart/analysisChart/analysisChartTopCenter.vue

@@ -66,7 +66,7 @@ export default {
                 },
                 yAxis: {
                     type: 'value',
-                    name: 'mg/m3',
+                    name: 'Unit:(mg/m3)',
                     axisLabel: {
                         color: '#808080'
                     },
@@ -158,7 +158,7 @@ export default {
                 },
                 yAxis: {
                     type: 'value',
-                    name: 'mg/m3',
+                    name: 'Unit:(mg/m3)',
                     axisLabel: {
                         color: '#808080'
                     }

+ 2 - 2
ui/src/views/monitor/elec/echart/analysisChart/analysisChartTopLeft.vue

@@ -66,7 +66,7 @@ export default {
                 },
                 yAxis: {
                     type: 'value',
-                    name: 'mg/m3',
+                    name: 'Unit:(mg/m3)',
                     axisLabel: {
                         color: '#808080'
                     },
@@ -158,7 +158,7 @@ export default {
                 },
                 yAxis: {
                     type: 'value',
-                    name: 'mg/m3',
+                    name: 'Unit:(mg/m3)',
                     axisLabel: {
                         color: '#808080'
                     }

+ 2 - 2
ui/src/views/monitor/elec/echart/analysisChart/analysisChartTopRight.vue

@@ -66,7 +66,7 @@ export default {
                 },
                 yAxis: {
                     type: 'value',
-                    name: 'mg/m3',
+                    name: 'Unit:(mg/m3)',
                     axisLabel: {
                         color: '#808080'
                     },
@@ -158,7 +158,7 @@ export default {
                 },
                 yAxis: {
                     type: 'value',
-                    name: 'mg/m3',
+                    name: 'Unit:(mg/m3)',
                     axisLabel: {
                         color: '#808080'
                     }

+ 31 - 25
ui/src/views/monitor/elec/echart/bottom/bottomLeftChart.vue

@@ -2,6 +2,7 @@
   <div @click="opnenDialg">
     <div id="bottomLeftChart" style="width:11.25rem;height:5.9rem;"></div>
     <el-dialog class="my-info-dialog" :visible.sync="openChart" title="蒸汽消耗" @open="open" width="1600px" destroy-on-close append-to-body>
+      <span style="padding-left:65px;color:#74777F;">Unit:(t/h)</span>
       <div id="bottomLeftChart2" style="width:100%;height:600px;"></div>
     </el-dialog>
   </div>
@@ -145,7 +146,7 @@ export default {
           }
         },
         legend: {
-          data: ['HHP','HP','LP','MP','总消耗'],
+          data: ['HHP','HP','MP','LP','总消耗'],
           // data: ['Discharged','Planned emission','Emission rate'],
           textStyle: {
             color: "#B4B4B4"
@@ -246,8 +247,8 @@ export default {
             data: HPData
           },
 
-          {
-            name: 'LP',
+            {
+            name: 'MP',
             type: "bar",
             barGap: "-100%",
             stack: 'Ad',
@@ -256,19 +257,19 @@ export default {
               normal: {
                 barBorderRadius: 5,
                 color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "rgba(156,107,211,0.8)" },
-                  { offset: 0.2, color: "rgba(156,107,211,0.5)" },
-                  { offset: 1, color: "rgba(156,107,211,0.2)" }
+                  { offset: 0, color: "rgba(208,107,211,0.8)" },
+                  { offset: 0.2, color: "rgba(208,107,211,0.5)" },
+                  { offset: 1, color: "rgba(208,107,211,0.2)" }
                 ])
               }
             },
             z: -12,
 
-            data: LPData
+            data: MPData
           },
 
           {
-            name: 'MP',
+            name: 'LP',
             type: "bar",
             barGap: "-100%",
             stack: 'Ad',
@@ -277,16 +278,18 @@ export default {
               normal: {
                 barBorderRadius: 5,
                 color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "rgba(208,107,211,0.8)" },
-                  { offset: 0.2, color: "rgba(208,107,211,0.5)" },
-                  { offset: 1, color: "rgba(208,107,211,0.2)" }
+                  { offset: 0, color: "rgba(156,107,211,0.8)" },
+                  { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+                  { offset: 1, color: "rgba(156,107,211,0.2)" }
                 ])
               }
             },
             z: -12,
 
-            data: MPData
-          }
+            data: LPData
+          },
+
+          
         ]
       };
       this.chart.setOption(option);
@@ -408,7 +411,7 @@ export default {
           }
         },
         legend: {
-          data: ['HHP','HP','LP','MP','总消耗'],
+          data: ['HHP','HP','MP','LP','总消耗'],
           // data: ['Discharged','Planned emission','Emission rate'],
           top: "0%"
         },
@@ -491,7 +494,7 @@ export default {
           },
 
           {
-            name: 'LP',
+            name: 'MP',
             type: "bar",
             barGap: "-100%",
             stack: 'Ad',
@@ -500,19 +503,19 @@ export default {
               normal: {
                 barBorderRadius: 5,
                 color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "rgba(156,107,211,0.8)" },
-                  { offset: 0.2, color: "rgba(156,107,211,0.5)" },
-                  { offset: 1, color: "rgba(156,107,211,0.2)" }
+                  { offset: 0, color: "rgba(208,107,211,0.8)" },
+                  { offset: 0.2, color: "rgba(208,107,211,0.5)" },
+                  { offset: 1, color: "rgba(208,107,211,0.2)" }
                 ])
               }
             },
             z: -12,
 
-            data: LPData
+            data: MPData
           },
 
           {
-            name: 'MP',
+            name: 'LP',
             type: "bar",
             barGap: "-100%",
             stack: 'Ad',
@@ -521,16 +524,19 @@ export default {
               normal: {
                 barBorderRadius: 5,
                 color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                  { offset: 0, color: "rgba(208,107,211,0.8)" },
-                  { offset: 0.2, color: "rgba(208,107,211,0.5)" },
-                  { offset: 1, color: "rgba(208,107,211,0.2)" }
+                  { offset: 0, color: "rgba(156,107,211,0.8)" },
+                  { offset: 0.2, color: "rgba(156,107,211,0.5)" },
+                  { offset: 1, color: "rgba(156,107,211,0.2)" }
                 ])
               }
             },
             z: -12,
 
-            data: MPData
-          }
+            data: LPData
+          },
+
+          
+
         ]
       };
       this.chart2.setOption(option);

+ 5 - 3
ui/src/views/monitor/elec/echart/bottom/bottomRightChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div @click="openSteamBalance">
-    <div id="bottomRightChart" style="width:100%;height:3rem;top: -40px"></div>
+    <div id="bottomRightChart" style="width:100%;height:3.4rem;top: -40px"></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>
@@ -278,7 +278,8 @@ export default {
             // data: weekCategory
           },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          name: 'Unit:(Nm³)'
         },
         series: [
           {
@@ -362,7 +363,8 @@ export default {
           // data: weekCategory
         },
         yAxis: {
-          type: 'value'
+          type: 'value',
+          name: 'Unit:(Nm³)'
         },
         series: [
           {

+ 10 - 2
ui/src/views/monitor/elec/echart/bottom/bottomRightChart1.vue

@@ -70,13 +70,20 @@ export default {
         yAxis: [
           {
             type: 'value',
+            name: 'Units:(Nm³)',
             axisLabel: {
               textStyle: {
                 fontSize: 10,
-                color: '#ffffffff',
+                color: '#ffffff',
                 margin: 15
               },
-            }
+            },
+            axisLine: {
+              lineStyle: {
+                // 设置x轴颜色
+                color: '#ffffff'
+              }
+            },
           }
         ],
         series: [
@@ -130,6 +137,7 @@ export default {
         yAxis: [
           {
             type: 'value',
+            name: 'Units:(Nm³)',
             axisLabel: {
               textStyle: {
                 fontSize: 10,

+ 2 - 0
ui/src/views/monitor/elec/echart/bottom/bottomRightChart2.vue

@@ -77,6 +77,7 @@ export default {
         },
         yAxis: {
           type: 'value',
+          name: 'Units:(Nm³)',
           axisLine: {
             lineStyle: {
               // 设置x轴颜色
@@ -172,6 +173,7 @@ export default {
         },
         yAxis: {
           type: 'value',
+          name: 'Units:(Nm³)',
           axisLine: {
             lineStyle: {
             }

+ 11 - 11
ui/src/views/monitor/elec/frontElecThree.vue

@@ -120,18 +120,18 @@
         limitTopRight1: 100, limitTopRight2: 572, limitTopRight3: 2050,
         dataTopRight1: 20, dataTopRight2: 400, dataTopRight3: 500,
         // 第二排右下角轮播表表头、表数据、表配置
-        tableHeaderBottomRight: ['时间', '设备', '编号', '内容'],
+        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'],
-          ['2022-4-2 19:01', '设备 BP', 'QT22001', ' leakage #2HRSG DUCT BURNRE', ],
-          ['2022-4-3 01:00', '设备 BP', 'QT22501', ' CO leakage #2HRSG offgas system', ],
-          ['2022-4-3 04:50', '设备 BP', 'QT22502', ' CO leakage #2HRSG offgas system', ],
-          ['2022-4-3 12:21', '设备 BP', 'QT32001', ' leakage #3HRSG DUCT BURNRE', ],
-          ['2022-4-5 08:22', '设备 HRSC #1', 'AI82201', 'SC @ HRSG#1 HP DRUM BLOWDOWN', ],
-          ['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']
+          ['<span class="span-rw">2022-4-2 06:22</span>', 'someData', 'QT12001', ' leakage #1HRSG DUCT BURNRE'],
+          ['2022-4-2 13:43', 'someData', 'QT12501', ' CO leakage #1HRSG offgas system'],
+          ['2022-4-2 15:23', 'someData', '<span>QT12502<i class="icon icon-shang"></i></span>', ' CO leakage #1HRSG offgas system'],
+          ['2022-4-2 19:01', 'someData', 'QT22001', ' leakage #2HRSG DUCT BURNRE', ],
+          ['2022-4-3 01:00', 'someData', 'QT22501', ' CO leakage #2HRSG offgas system', ],
+          ['2022-4-3 04:50', 'someData', 'QT22502', ' CO leakage #2HRSG offgas system', ],
+          ['2022-4-3 12:21', 'someData', 'QT32001', ' leakage #3HRSG DUCT BURNRE', ],
+          ['2022-4-5 08:22', 'someData', 'AI82201', 'SC @ HRSG#1 HP DRUM BLOWDOWN', ],
+          ['2022-4-5 12:10', 'someData', 'AI82302', 'PH @ HRSG#2 HP DRUM BLOWDOWN', ],
+          ['2022-4-5 14:46', 'someData', 'AI82403', 'CC @ HRSG#3 HP DRUM DISCHARGE']
         ],
         configBottomRight: {}
       };