王子文 2022年4月12日 15点04分 电厂大屏第三页弹框

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

@@ -9,7 +9,7 @@ import echartMixins from "@/utils/resizeMixins";
 export default {
     data() {
         return {
-        chart: null,
+            chart: null,
         }
     },
     mixins: [echartMixins],
@@ -48,7 +48,7 @@ export default {
                         lineStyle:{
                             color: 'rgba(255,255,255,.7)'
                         }
-                }
+                    }
                 },
                 xAxis: {
                     type: 'category',
@@ -64,7 +64,6 @@ export default {
                         data: [6, 9],
                         itemStyle: {
                             normal: {
-                                // borderRadius: 50,
                                 color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                     { offset: 0, color: "rgba(255, 189, 91, 0.8)" },
                                     { offset: 1, color: "rgba(255, 189, 91, 0.3)" }
@@ -88,7 +87,6 @@ export default {
                         color: '#A8CBFF',
                         itemStyle: {
                             normal: {
-                                // borderRadius: 50,
                                 color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                     { offset: 0, color: "rgba(100, 100, 100, 0.8)" },
                                     { offset: 1, color: "rgba(100, 100, 100, 0.3)" }

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

@@ -9,7 +9,7 @@ import echartMixins from "@/utils/resizeMixins";
 export default {
     data() {
         return {
-        chart: null,
+            chart: null,
         }
     },
     mixins: [echartMixins],
@@ -49,7 +49,7 @@ export default {
                         lineStyle:{
                             color: 'rgba(255,255,255,.7)'
                         }
-                }
+                    }
                 },
                 xAxis: {
                     type: 'category',
@@ -65,7 +65,6 @@ export default {
                         data: [160, 200],
                         itemStyle: {
                             normal: {
-                                // borderRadius: 50,
                                 color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                     { offset: 0, color: "rgba(177, 47, 255, 0.8)" },
                                     { offset: 1, color: "rgba(177, 47, 255, 0.3)" }
@@ -89,7 +88,6 @@ export default {
                         color: '#D2FFE4',
                         itemStyle: {
                             normal: {
-                                // borderRadius: 50,
                                 color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                     { offset: 0, color: "rgba(100, 100, 100, 0.8)" },
                                     { offset: 1, color: "rgba(100, 100, 100, 0.3)" }

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

@@ -1,6 +1,9 @@
 <template>
     <div>
-        <div id="analysisChartBottomLeft3" style="width:3.4rem;height:2.2rem;"></div>
+        <div id="analysisChartBottomLeft3" @click="dialogVisible = true" style="width:3.4rem;height:2.2rem;"></div>
+        <el-dialog title="一周 PH 趋势" :visible.sync="dialogVisible" width="1600px" @open="open" destroy-on-close append-to-body>
+            <div id="analysisChartBottomLeft33" style="width:20rem;height:6rem;margin:0.5rem auto;"></div>
+        </el-dialog>
     </div>
 </template>
 
@@ -9,7 +12,8 @@ import echartMixins from "@/utils/resizeMixins";
 export default {
     data() {
         return {
-        chart: null,
+            chart: null,
+            dialogVisible: false
         }
     },
     mixins: [echartMixins],
@@ -17,6 +21,14 @@ export default {
         this.init();
     },
     methods: {
+        opnenDialg(){
+            this.dialogVisible = true
+        },
+        open(){
+            this.$nextTick(() => {
+                this.init2()
+            })
+        },
         init() {
             this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft3"), 'dark');
             let option = {
@@ -62,7 +74,7 @@ export default {
                         lineStyle:{
                             color: 'rgba(255,255,255,.7)'
                         }
-                }
+                    }
                 },
                 series: [
                     {
@@ -98,6 +110,76 @@ export default {
                 ]
                 };
             this.chart.setOption(option);
+        },
+        init2() {
+            this.chart2 = this.echarts.init(document.getElementById("analysisChartBottomLeft33"));
+            let option = {
+                backgroundColor: 'transparent',
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['Waste Water', 'Rain Water'],
+                    padding: [30, 0, 0, 0]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLabel: {
+                        color: '#808080'
+                    }
+                },
+                series: [
+                    {
+                        name: 'Waste Water',
+                        type: 'line',
+                        smooth: true,
+                        data: [120, 132, 101, 134, 150, 230, 210],
+                        symbolSize: 10,
+                        color: '#5470c6',
+                        lineStyle: {
+                            width: 4,
+                        },
+                        itemStyle: {
+                            borderWidth: 3,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'Rain Water',
+                        type: 'line',
+                        smooth: true,
+                        data: [220, 250, 291, 234, 290, 330, 310],
+                        symbolSize: 10,
+                        color: '#73c0de',
+                        lineStyle: {
+                            width: 4,
+                        },
+                        itemStyle: {
+                            borderWidth: 3,
+                            borderColor: '#fff',
+                        }
+                    },
+                ]
+                };
+            this.chart2.setOption(option);
         }
     },
     destroyed() {

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

@@ -1,6 +1,9 @@
 <template>
     <div>
-        <div id="analysisChartBottomLeft4" style="width:3.4rem;height:2.2rem;"></div>
+        <div id="analysisChartBottomLeft4" @click="dialogVisible = true" style="width:3.4rem;height:2.2rem;"></div>
+        <el-dialog title="一周 COD 趋势" :visible.sync="dialogVisible" width="1600px" @open="open" destroy-on-close append-to-body>
+            <div id="analysisChartBottomLeft44" style="width:20rem;height:6rem;margin:0.5rem auto;"></div>
+        </el-dialog>
     </div>
 </template>
 
@@ -9,7 +12,8 @@ import echartMixins from "@/utils/resizeMixins";
 export default {
     data() {
         return {
-        chart: null,
+            chart: null,
+            dialogVisible: false
         }
     },
     mixins: [echartMixins],
@@ -17,6 +21,14 @@ export default {
         this.init();
     },
     methods: {
+        opnenDialg(){
+            this.dialogVisible = true
+        },
+        open(){
+            this.$nextTick(() => {
+                this.init2()
+            })
+        },
         init() {
             this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft4"), 'dark');
             let option = {
@@ -62,7 +74,7 @@ export default {
                         lineStyle:{
                             color: 'rgba(255,255,255,.7)'
                         }
-                }
+                    }
                 },
                 series: [
                     {
@@ -98,6 +110,76 @@ export default {
                 ]
                 };
             this.chart.setOption(option);
+        },
+        init2() {
+            this.chart2 = this.echarts.init(document.getElementById("analysisChartBottomLeft44"));
+            let option = {
+                backgroundColor: 'transparent',
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['Waste Water', 'Rain Water'],
+                    padding: [30, 0, 0, 0]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLabel: {
+                        color: '#808080'
+                    }
+                },
+                series: [
+                    {
+                        name: 'Waste Water',
+                        type: 'line',
+                        smooth: true,
+                        data: [120, 132, 101, 134, 150, 230, 210],
+                        symbolSize: 10,
+                        color: '#5470c6',
+                        lineStyle: {
+                            width: 4,
+                        },
+                        itemStyle: {
+                            borderWidth: 3,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'Rain Water',
+                        type: 'line',
+                        smooth: true,
+                        data: [220, 250, 291, 234, 290, 330, 310],
+                        symbolSize: 10,
+                        color: '#73c0de',
+                        lineStyle: {
+                            width: 4,
+                        },
+                        itemStyle: {
+                            borderWidth: 3,
+                            borderColor: '#fff',
+                        }
+                    },
+                ]
+                };
+            this.chart2.setOption(option);
         }
     },
     destroyed() {

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

@@ -1,6 +1,9 @@
 <template>
     <div>
-        <div id="analysisChartTopCenter" style="width:6.8rem;height:2.5rem;"></div>
+        <div id="analysisChartTopCenter" @click="dialogVisible = true" style="width:6.8rem;height:2.5rem;"></div>
+        <el-dialog title="HRSG 2#" :visible.sync="dialogVisible" width="1600px" @open="open" destroy-on-close append-to-body>
+            <div id="analysisChartTopCenter2" style="width:20rem;height:6rem;margin:0.5rem auto;"></div>
+        </el-dialog>
     </div>
 </template>
 
@@ -9,7 +12,8 @@ import echartMixins from "@/utils/resizeMixins";
 export default {
     data() {
         return {
-        chart: null,
+            chart: null,
+            dialogVisible: false
         }
     },
     mixins: [echartMixins],
@@ -17,6 +21,14 @@ export default {
         this.init();
     },
     methods: {
+        opnenDialg(){
+            this.dialogVisible = true
+        },
+        open(){
+            this.$nextTick(() => {
+                this.init2()
+            })
+        },
         init() {
             this.chart = this.echarts.init(document.getElementById("analysisChartTopCenter"), 'dark');
             let option = {
@@ -54,6 +66,7 @@ export default {
                 },
                 yAxis: {
                     type: 'value',
+                    name: 'mg/m3',
                     axisLabel: {
                         color: '#808080'
                     },
@@ -113,6 +126,92 @@ export default {
                 ]
                 };
             this.chart.setOption(option);
+        },
+        init2() {
+            this.chart2 = this.echarts.init(document.getElementById("analysisChartTopCenter2"));
+            let option = {
+                backgroundColor: 'transparent',
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['烟尘', 'SO2', 'NOx'],
+                    padding: [30, 0, 0, 0]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'mg/m3',
+                    axisLabel: {
+                        color: '#808080'
+                    }
+                },
+                series: [
+                    {
+                        name: '烟尘',
+                        type: 'line',
+                        smooth: true,
+                        data: [80,90,70,20,10,60,50],
+                        symbolSize: 10,
+                        color: '#FF9800',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'SO2',
+                        type: 'line',
+                        smooth: true,
+                        data: [1400,2200,1300,1800,2500,1100,1300],
+                        symbolSize: 10,
+                        color: '#9D00FF',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'NOx',
+                        type: 'line',
+                        smooth: true,
+                        data: [400,200,300,800,500,100,300],
+                        symbolSize: 10,
+                        color: '#00FF0D',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                ]
+            };
+            this.chart2.setOption(option);
         }
     },
     destroyed() {

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

@@ -1,6 +1,9 @@
 <template>
     <div>
-        <div id="analysisChartTopLeft" style="width:6.8rem;height:2.5rem;"></div>
+        <div id="analysisChartTopLeft" @click="dialogVisible = true" style="width:6.8rem;height:2.5rem;"></div>
+        <el-dialog title="HRSG 1#" :visible.sync="dialogVisible" width="1600px" @open="open" destroy-on-close append-to-body>
+            <div id="analysisChartTopLeft2" style="width:20rem;height:6rem;margin:0.5rem auto;"></div>
+        </el-dialog>
     </div>
 </template>
 
@@ -9,7 +12,8 @@ import echartMixins from "@/utils/resizeMixins";
 export default {
     data() {
         return {
-        chart: null,
+            chart: null,
+            dialogVisible: false
         }
     },
     mixins: [echartMixins],
@@ -17,6 +21,14 @@ export default {
         this.init();
     },
     methods: {
+        opnenDialg(){
+            this.dialogVisible = true
+        },
+        open(){
+            this.$nextTick(() => {
+                this.init2()
+            })
+        },
         init() {
             this.chart = this.echarts.init(document.getElementById("analysisChartTopLeft"), 'dark');
             let option = {
@@ -54,6 +66,7 @@ export default {
                 },
                 yAxis: {
                     type: 'value',
+                    name: 'mg/m3',
                     axisLabel: {
                         color: '#808080'
                     },
@@ -113,6 +126,92 @@ export default {
                 ]
                 };
             this.chart.setOption(option);
+        },
+        init2() {
+            this.chart2 = this.echarts.init(document.getElementById("analysisChartTopLeft2"));
+            let option = {
+                backgroundColor: 'transparent',
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['烟尘', 'SO2', 'NOx'],
+                    padding: [30, 0, 0, 0]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'mg/m3',
+                    axisLabel: {
+                        color: '#808080'
+                    }
+                },
+                series: [
+                    {
+                        name: '烟尘',
+                        type: 'line',
+                        smooth: true,
+                        data: [80,90,70,20,10,60,50],
+                        symbolSize: 10,
+                        color: '#FF9800',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'SO2',
+                        type: 'line',
+                        smooth: true,
+                        data: [1400,2200,1300,1800,2500,1100,1300],
+                        symbolSize: 10,
+                        color: '#9D00FF',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'NOx',
+                        type: 'line',
+                        smooth: true,
+                        data: [400,200,300,800,500,100,300],
+                        symbolSize: 10,
+                        color: '#00FF0D',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                ]
+            };
+            this.chart2.setOption(option);
         }
     },
     destroyed() {

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

@@ -1,6 +1,9 @@
 <template>
     <div>
-        <div id="analysisChartTopRight" style="width:6.8rem;height:2.5rem;"></div>
+        <div id="analysisChartTopRight" @click="dialogVisible = true" style="width:6.8rem;height:2.5rem;"></div>
+        <el-dialog title="HRSG 2#" :visible.sync="dialogVisible" width="1600px" @open="open" destroy-on-close append-to-body>
+            <div id="analysisChartTopRight2" style="width:20rem;height:6rem;margin:0.5rem auto;"></div>
+        </el-dialog>
     </div>
 </template>
 
@@ -9,7 +12,8 @@ import echartMixins from "@/utils/resizeMixins";
 export default {
     data() {
         return {
-        chart: null,
+            chart: null,
+            dialogVisible: false
         }
     },
     mixins: [echartMixins],
@@ -17,6 +21,14 @@ export default {
         this.init();
     },
     methods: {
+        opnenDialg(){
+            this.dialogVisible = true
+        },
+        open(){
+            this.$nextTick(() => {
+                this.init2()
+            })
+        },
         init() {
             this.chart = this.echarts.init(document.getElementById("analysisChartTopRight"), 'dark');
             let option = {
@@ -54,6 +66,7 @@ export default {
                 },
                 yAxis: {
                     type: 'value',
+                    name: 'mg/m3',
                     axisLabel: {
                         color: '#808080'
                     },
@@ -113,6 +126,92 @@ export default {
                 ]
                 };
             this.chart.setOption(option);
+        },
+        init2() {
+            this.chart2 = this.echarts.init(document.getElementById("analysisChartTopRight2"));
+            let option = {
+                backgroundColor: 'transparent',
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['烟尘', 'SO2', 'NOx'],
+                    padding: [30, 0, 0, 0]
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'mg/m3',
+                    axisLabel: {
+                        color: '#808080'
+                    }
+                },
+                series: [
+                    {
+                        name: '烟尘',
+                        type: 'line',
+                        smooth: true,
+                        data: [80,90,70,20,10,60,50],
+                        symbolSize: 10,
+                        color: '#FF9800',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'SO2',
+                        type: 'line',
+                        smooth: true,
+                        data: [1400,2200,1300,1800,2500,1100,1300],
+                        symbolSize: 10,
+                        color: '#9D00FF',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                    {
+                        name: 'NOx',
+                        type: 'line',
+                        smooth: true,
+                        data: [400,200,300,800,500,100,300],
+                        symbolSize: 10,
+                        color: '#00FF0D',
+                        lineStyle: {
+                            width: 3,
+                        },
+                        itemStyle: {
+                            borderWidth: 2,
+                            borderColor: '#fff',
+                        }
+                    },
+                ]
+            };
+            this.chart2.setOption(option);
         }
     },
     destroyed() {

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

@@ -3,83 +3,87 @@
   <div id="frontThree">
       <!-- 第一排开始 -->
       <div id="rowOne">
-        <dv-border-box-1 style="height:5rem;width:33.3%;display:inline-block;float:left;">
-          <div style="width:6.6rem;margin:0px auto;margin-top:25px;">
-            <analysisTopLeft style="display:inline-block;float:left;"></analysisTopLeft>
+        <!-- HRSG #1 -->
+        <dv-border-box-1 class="outer-div">
+          <div class="inner-div">
+            <analysisTopLeft class="analysis-top"></analysisTopLeft>
           </div>
-          <div style="width:6.6rem;margin:0px auto;margin-top:25px;">
-            <div style="width:2.1rem;height:1.5rem;display:inline-block;float:left;margin:0.05rem;">
-              <span style="width:2.1rem;height:0.1rem;fontWeight:bold;fontSize:14px;">烟尘</span>
-              <dv-water-level-pond :config="configTopLeft1" style="width: 2.1rem;height:1.4rem;" />
+          <div class="inner-div">
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">烟尘</span>
+              <dv-water-level-pond :config="configTopLeft1" class="analysis-percentage"/>
             </div>
-            <div style="width:2.1rem;height:1.5rem;display:inline-block;float:left;margin:0.05rem;">
-              <span style="width:2.1rem;height:0.1rem;fontWeight:bold;fontSize:14px;">SO2</span>
-              <dv-water-level-pond :config="configTopLeft2" style="width: 2.1rem;height:1.4rem;"/>
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">SO2</span>
+              <dv-water-level-pond :config="configTopLeft2" class="analysis-percentage"/>
             </div>
-            <div style="width:2.1rem;height:1.5rem;display:inline-block;float:left;margin:0.05rem;">
-              <span style="width:2.1rem;height:0.1rem;fontWeight:bold;fontSize:14px;">NOx</span>
-              <dv-water-level-pond :config="configTopLeft3" style="width: 2.1rem;height:1.4rem;"/>
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">NOx</span>
+              <dv-water-level-pond :config="configTopLeft3" class="analysis-percentage"/>
             </div>
           </div>
         </dv-border-box-1>
-
-        <dv-border-box-1 style="height:5rem;width:33.3%;display:inline-block;float:left;">
-          <div style="width:6.6rem;margin:0px auto;margin-top:25px;">
-            <analysisTopCenter style="display:inline-block;float:left;"></analysisTopCenter>
+        <!-- HRSG #2 -->
+        <dv-border-box-1 class="outer-div">
+          <div class="inner-div">
+            <analysisTopCenter class="analysis-top"></analysisTopCenter>
           </div>
-          <div style="width:6.6rem;margin:0px auto;margin-top:25px;">
-            <div style="width:2.1rem;height:1.5rem;display:inline-block;float:left;margin:0.05rem;">
-              <span style="width:2.1rem;height:0.1rem;fontWeight:bold;fontSize:14px;">烟尘</span>
-              <dv-water-level-pond :config="configTopCenter1" style="width: 2.1rem;height:1.4rem;" />
+          <div class="inner-div">
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">烟尘</span>
+              <dv-water-level-pond :config="configTopCenter1" class="analysis-percentage"/>
             </div>
-            <div style="width:2.1rem;height:1.5rem;display:inline-block;float:left;margin:0.05rem;">
-              <span style="width:2.1rem;height:0.1rem;fontWeight:bold;fontSize:14px;">SO2</span>
-              <dv-water-level-pond :config="configTopCenter2" style="width: 2.1rem;height:1.4rem;"/>
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">SO2</span>
+              <dv-water-level-pond :config="configTopCenter2" class="analysis-percentage"/>
             </div>
-            <div style="width:2.1rem;height:1.5rem;display:inline-block;float:left;margin:0.05rem;">
-              <span style="width:2.1rem;height:0.1rem;fontWeight:bold;fontSize:14px;">NOx</span>
-              <dv-water-level-pond :config="configTopCenter3" style="width: 2.1rem;height:1.4rem;"/>
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">NOx</span>
+              <dv-water-level-pond :config="configTopCenter3" class="analysis-percentage"/>
             </div>
           </div>
         </dv-border-box-1>
-
-        <dv-border-box-1 style="height:5rem;width:33.3%;display:inline-block;float:left;">
-          <div style="width:6.6rem;margin:0px auto;margin-top:25px;">
-            <analysisTopRight style="display:inline-block;float:left;"></analysisTopRight>
+        <!-- HRSG #3 -->
+        <dv-border-box-1 class="outer-div">
+          <div class="inner-div">
+            <analysisTopRight class="analysis-top"></analysisTopRight>
           </div>
-          <div style="width:6.6rem;margin:0px auto;margin-top:25px;">
-            <div style="width:2.1rem;height:1.5rem;display:inline-block;float:left;margin:0.05rem;">
-              <span style="width:2.1rem;height:0.1rem;fontWeight:bold;fontSize:14px;">烟尘</span>
-              <dv-water-level-pond :config="configTopRight1" style="width: 2.1rem;height:1.4rem;" />
+          <div class="inner-div">
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">烟尘</span>
+              <dv-water-level-pond :config="configTopRight1" class="analysis-percentage"/>
             </div>
-            <div style="width:2.1rem;height:1.5rem;display:inline-block;float:left;margin:0.05rem;">
-              <span style="width:2.1rem;height:0.1rem;fontWeight:bold;fontSize:14px;">SO2</span>
-              <dv-water-level-pond :config="configTopRight2" style="width: 2.1rem;height:1.4rem;"/>
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">SO2</span>
+              <dv-water-level-pond :config="configTopRight2" class="analysis-percentage"/>
             </div>
-            <div style="width:2.1rem;height:1.5rem;display:inline-block;float:left;margin:0.05rem;">
-              <span style="width:2.1rem;height:0.1rem;fontWeight:bold;fontSize:14px;">NOx</span>
-              <dv-water-level-pond :config="configTopRight3" style="width: 2.1rem;height:1.4rem;"/>
+            <div class="analysis-percentage-box">
+              <span class="analysis-percentage-span">NOx</span>
+              <dv-water-level-pond :config="configTopRight3" class="analysis-percentage"/>
             </div>
           </div>
         </dv-border-box-1>
       </div>
       <!-- 第一排结束 -->
-
       <!-- 第二排开始 -->
       <div id="rowTwo">
-        <dv-border-box-13 style="height:5rem;width:33.3%;display:inline-block;float:left;">
-          <div style="width:6.8rem;margin:0px auto;margin-top:25px;">
-            <analysisBottomLeft1 style="display:inline-block;float:left;"></analysisBottomLeft1>
-            <analysisBottomLeft2 style="display:inline-block;float:left;"></analysisBottomLeft2>
+        <dv-border-box-13 class="outer-div">
+          <div class="analysis-bottom-box">
+            <!-- PH 柱状图 -->
+            <analysisBottomLeft1 class="analysis-bottom"></analysisBottomLeft1>
+            <!-- COD 柱状图 -->
+            <analysisBottomLeft2 class="analysis-bottom"></analysisBottomLeft2>
           </div>
-          <div style="width:6.8rem;margin:0px auto;">
-            <analysisBottomLeft3 style="display:inline-block;float:left;"></analysisBottomLeft3>
-            <analysisBottomLeft4 style="display:inline-block;float:left;"></analysisBottomLeft4>
+          <div class="analysis-bottom-box">
+            <!-- PH 折线图 -->
+            <analysisBottomLeft3 class="analysis-bottom"></analysisBottomLeft3>
+            <!-- COD 折线图 -->
+            <analysisBottomLeft4 class="analysis-bottom"></analysisBottomLeft4>
           </div>
         </dv-border-box-13>
-        
-        <div style="height:4.8rem;width:66%;display:inline-block;float:left;margin:0.1rem 0px;margin-left:5px;">
-          <dv-scroll-board :config="configBottomRight" style="height:100%;width:100%;"/>
+        <div id="scroll-board-box">
+          <!-- 预警大屏 -->
+          <dv-scroll-board :config="configBottomRight"/>
         </div>
       </div>
       <!-- 第二排结束 -->
@@ -94,6 +98,7 @@
   import analysisTopLeft from './analysisTopLeft.vue';
   import analysisTopCenter from './analysisTopCenter.vue';
   import analysisTopRight from './analysisTopRight.vue';
+
   export default {
     name: "materialBalance",
     components: {
@@ -230,5 +235,17 @@
 </script>
 
 <style scoped>
-
+  /* 外层盒子 */
+  .outer-div{ height:5rem;width:33.3%;display:inline-block;float:left; }
+    /* 第一排样式 */
+    .inner-div{ width:6.6rem;margin:0px auto;margin-top:25px; }
+    .analysis-top{ display:inline-block;float:left; }
+    .analysis-percentage-box{ width:2.1rem;height:1.5rem;display:inline-block;float:left;margin:0.05rem; }
+      .analysis-percentage-span{ width:2.1rem;height:0.1rem;fontWeight:bold;fontSize:14px; }
+      .analysis-percentage{ width: 2.1rem;height:1.4rem; }
+    /* 第二排样式 */
+    .analysis-bottom-box{ width:6.8rem;margin:0px auto;margin-top:25px; }
+      .analysis-bottom{ display:inline-block;float:left; }
+    #scroll-board-box{ height:4.8rem;width:66%;display:inline-block;float:left;margin:0.1rem 0px;margin-left:5px; }
+      dv-scroll-board{ height:100%;width:100%; }
 </style>