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

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

@@ -1,13 +1,12 @@
 <template>
   <div>
-    <analysisChartTopCenter :xDataTopCenter="xDataTopCenter" :yDataTopCenter="yDataTopCenter"></analysisChartTopCenter>
+    <analysisChartTopCenter></analysisChartTopCenter>
   </div>
 </template>
 
 <script>
 import analysisChartTopCenter from './echart/analysisChart/analysisChartTopCenter';
 export default {
-  props:['xDataTopCenter','yDataTopCenter'],
   data() {
     return {};
   },

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

@@ -1,13 +1,12 @@
 <template>
   <div>
-    <analysisChartTopLeft :xDataTopLeft="xDataTopLeft" :yDataTopLeft="yDataTopLeft"></analysisChartTopLeft>
+    <analysisChartTopLeft></analysisChartTopLeft>
   </div>
 </template>
 
 <script>
 import analysisChartTopLeft from './echart/analysisChart/analysisChartTopLeft';
 export default {
-  props:['xDataTopLeft','yDataTopLeft'],
   data() {
     return {};
   },

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

@@ -1,13 +1,12 @@
 <template>
   <div>
-    <analysisChartTopRight :xDataTopRight="xDataTopRight" :yDataTopRight="yDataTopRight"></analysisChartTopRight>
+    <analysisChartTopRight></analysisChartTopRight>
   </div>
 </template>
 
 <script>
 import analysisChartTopRight from './echart/analysisChart/analysisChartTopRight';
 export default {
-  props:['xDataTopRight','yDataTopRight'],
   data() {
     return {};
   },

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

@@ -49,7 +49,7 @@
         <div>
           <div id="naturalGasChart" style="width:100%;height:3rem;"></div>
         </div>
-        <el-dialog class="my-info-dialog" :visible.sync="openChart" title="每日煤耗状态" @open="open" width="1600px" destroy-on-close append-to-body>
+        <el-dialog class="my-info-dialog" :visible.sync="openChart" title="" @open="open" width="1600px" destroy-on-close append-to-body>
           <div id="naturalGasChartDialog" style="width:100%;height:600px;"></div>
         </el-dialog>
       </div>

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div id="analysisChartBottomLeft1" style="width:3rem;height:3rem;"></div>
+        <div id="analysisChartBottomLeft1" style="width:3.4rem;height:2.2rem;"></div>
     </div>
 </template>
 
@@ -9,7 +9,7 @@ import echartMixins from "@/utils/resizeMixins";
 export default {
     data() {
         return {
-            chart: null,
+        chart: null,
         }
     },
     mixins: [echartMixins],
@@ -20,46 +20,83 @@ export default {
         init() {
             this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft1"), 'dark');
             let option = {
+                backgroundColor: 'transparent',
                 title: {
-                    text: 'PH of Waste Water',
-                    x: 'center'
+                    text: ''
                 },
                 tooltip: {
-                    formatter: '{a} <br/>{b} : {c}%'
+                    trigger: 'axis',
+                    axisPointer: {
+                    type: 'shadow'
+                    }
+                },
+                legend: {},
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                yAxis: {
+                    type: 'value',
+                    boundaryGap: [0, 0.01],
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle:{
+                            color: 'rgba(255,255,255,.7)'
+                        }
+                }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['Waste Water', 'Rain Water',],
+                    axisLabel: {
+                        color: '#808080'
+                    },
                 },
                 series: [
                     {
-                        name: 'PH of Waste Water',
-                        type: 'gauge',
-                        progress: {
-                            show: true,
-                            width: 5
-                        },
-                        detail: {
-                            valueAnimation: true,
-                            formatter: '{value}'
+                        name: '实时 PH',
+                        type: 'bar',
+                        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)" }
+                                ])
+                            }
                         },
-                        data: [
-                            {
-                                value: 75,
-                                name: ''
+                        label: {
+                            show: true,
+                            position: 'top',
+                            textStyle: {
+                                fontSize: 25,
+                                fontWeight: 'bold',
+                                color: '#fff'
                             }
-                        ],
-                        axisLine: {
-                            lineStyle: {
-                                width: 5
+                        }
+                    },
+                    {
+                        name: '7 天平均 PH',
+                        type: 'bar',
+                        data: [11, 7],
+                        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)" }
+                                ])
                             }
-                        },
-                        axisLabel: {
-                            fontSize: 10
-                        },
-                        pointer: {
-                            width: 4,
-                            length: 80
                         }
-                    }
-                ],
-                backgroundColor: 'transparent'
+                    },
+                ]
             };
             this.chart.setOption(option);
         }

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div id="analysisChartBottomLeft2" style="width:3rem;height:3rem;"></div>
+        <div id="analysisChartBottomLeft2" style="width:3.4rem;height:2.2rem;"></div>
     </div>
 </template>
 
@@ -9,7 +9,7 @@ import echartMixins from "@/utils/resizeMixins";
 export default {
     data() {
         return {
-            chart: null,
+        chart: null,
         }
     },
     mixins: [echartMixins],
@@ -20,46 +20,84 @@ export default {
         init() {
             this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft2"), 'dark');
             let option = {
+                backgroundColor: 'transparent',
                 title: {
-                    text: 'COD of Waste Water',
-                    x: 'center'
+                    text: ''
                 },
                 tooltip: {
-                    formatter: '{a} <br/>{b} : {c}%'
+                    trigger: 'axis',
+                    axisPointer: {
+                    type: 'shadow'
+                    }
+                },
+                legend: {},
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                yAxis: {
+                    type: 'value',
+                    name: 'mg/l',
+                    boundaryGap: [0, 0.01],
+                    axisLabel: {
+                        color: '#808080'
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle:{
+                            color: 'rgba(255,255,255,.7)'
+                        }
+                }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['Waste Water', 'Rain Water',],
+                    axisLabel: {
+                        color: '#808080'
+                    },
                 },
                 series: [
                     {
-                        name: 'COD of Waste Water',
-                        type: 'gauge',
-                        progress: {
-                            show: true,
-                            width: 5
-                        },
-                        detail: {
-                            valueAnimation: true,
-                            formatter: '{value}'
-                        },
-                        data: [
-                            {
-                                value: 75,
-                                name: ''
-                            }
-                        ],
-                        axisLine: {
-                            lineStyle: {
-                                width: 5
+                        name: '实时 COD',
+                        type: 'bar',
+                        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)" }
+                                ])
                             }
                         },
-                        axisLabel: {
-                            fontSize: 10
+                        label: {
+                            show: true,
+                            position: 'top',
+                            textStyle: {
+                                fontSize: 25,
+                                fontWeight: 'bold',
+                                color: '#fff'
+                            }
                         },
-                        pointer: {
-                            width: 4,
-                            length: 80
+                    },
+                    {
+                        name: '7 天平均 COD',
+                        type: 'bar',
+                        data: [170, 110],
+                        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)" }
+                                ])
+                            }
                         }
-                    }
-                ],
-                backgroundColor: 'transparent'
+                    },
+                ]
             };
             this.chart.setOption(option);
         }

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div id="analysisChartBottomLeft3" style="width:3rem;height:3rem;"></div>
+        <div id="analysisChartBottomLeft3" style="width:3.4rem;height:2.2rem;"></div>
     </div>
 </template>
 
@@ -9,7 +9,7 @@ import echartMixins from "@/utils/resizeMixins";
 export default {
     data() {
         return {
-            chart: null,
+        chart: null,
         }
     },
     mixins: [echartMixins],
@@ -20,47 +20,83 @@ export default {
         init() {
             this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft3"), 'dark');
             let option = {
+                backgroundColor: 'transparent',
                 title: {
-                    text: 'PH of Rain Water',
-                    x: 'center'
+                    text: '一周 PH 趋势',
+                    textStyle: {
+                        fontSize: 12
+                    }
                 },
                 tooltip: {
-                    formatter: '{a} <br/>{b} : {c}%'
+                    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'
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle:{
+                            color: 'rgba(255,255,255,.7)'
+                        }
+                }
                 },
                 series: [
                     {
-                        name: 'PH of Rain Water',
-                        type: 'gauge',
-                        progress: {
-                            show: true,
-                            width: 5
-                        },
-                        detail: {
-                            valueAnimation: true,
-                            formatter: '{value}'
-                        },
-                        data: [
-                            {
-                                value: 75,
-                                name: ''
-                            }
-                        ],
-                        axisLine: {
-                            lineStyle: {
-                                width: 5
-                            }
-                        },
-                        axisLabel: {
-                            fontSize: 10
+                        name: 'Waste Water',
+                        type: 'line',
+                        smooth: true,
+                        data: [120, 132, 101, 134, 150, 230, 210],
+                        symbolSize: 10,
+                        color: '#5470c6',
+                        lineStyle: {
+                            width: 4,
                         },
-                        pointer: {
+                        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,
-                            length: 80
+                        },
+                        itemStyle: {
+                            borderWidth: 3,
+                            borderColor: '#fff',
                         }
-                    }
-                ],
-                backgroundColor: 'transparent'
-            };
+                    },
+                ]
+                };
             this.chart.setOption(option);
         }
     },

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div id="analysisChartBottomLeft4" style="width:3rem;height:3rem;"></div>
+        <div id="analysisChartBottomLeft4" style="width:3.4rem;height:2.2rem;"></div>
     </div>
 </template>
 
@@ -9,7 +9,7 @@ import echartMixins from "@/utils/resizeMixins";
 export default {
     data() {
         return {
-            chart: null,
+        chart: null,
         }
     },
     mixins: [echartMixins],
@@ -20,46 +20,83 @@ export default {
         init() {
             this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft4"), 'dark');
             let option = {
+                backgroundColor: 'transparent',
                 title: {
-                    text: 'COD of Rain Water',
-                    x: 'center'
+                    text: '一周 COD 趋势',
+                    textStyle: {
+                        fontSize: 12
+                    }
                 },
                 tooltip: {
-                    formatter: '{a} <br/>{b} : {c}%'
+                    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'
+                    },
+                    splitLine: {
+                        show: true,
+                        lineStyle:{
+                            color: 'rgba(255,255,255,.7)'
+                        }
+                }
                 },
                 series: [
                     {
-                        name: 'COD of Rain Water',
-                        type: 'gauge',
-                        progress: {
-                            show: true,
-                            width: 5
-                        },
-                        detail: {
-                            valueAnimation: true,
-                            formatter: '{value}'
-                        },
-                        data: [
-                            {
-                                value: 75
-                            }
-                        ],
-                        axisLine: {
-                            lineStyle: {
-                                width: 5
-                            }
-                        },
-                        axisLabel: {
-                            fontSize: 10
+                        name: 'Waste Water',
+                        type: 'line',
+                        smooth: true,
+                        data: [120, 132, 101, 134, 150, 230, 210],
+                        symbolSize: 10,
+                        color: '#5470c6',
+                        lineStyle: {
+                            width: 4,
                         },
-                        pointer: {
+                        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,
-                            length: 80
+                        },
+                        itemStyle: {
+                            borderWidth: 3,
+                            borderColor: '#fff',
                         }
-                    }
-                ],
-                backgroundColor: 'transparent'
-            };
+                    },
+                ]
+                };
             this.chart.setOption(option);
         }
     },

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

@@ -1,13 +1,12 @@
 <template>
     <div>
-        <div id="analysisChartTopCenter" style="width:6rem;height:3rem;margin:0.5rem auto;"></div>
+        <div id="analysisChartTopCenter" style="width:6.8rem;height:2.5rem;"></div>
     </div>
 </template>
 
 <script>
 import echartMixins from "@/utils/resizeMixins";
 export default {
-    props:['xDataTopCenter','yDataTopCenter'],
     data() {
         return {
         chart: null,
@@ -19,69 +18,100 @@ export default {
     },
     methods: {
         init() {
-            this.chart = this.echarts.init(document.getElementById("analysisChartTopCenter"));
+            this.chart = this.echarts.init(document.getElementById("analysisChartTopCenter"), 'dark');
             let option = {
+                backgroundColor: 'transparent',
                 title: {
-                    text: 'HRSG #2 排量 (mg/m3)',
+                    text: 'HRSG 2#',
                     textStyle: {
-                        fontSize: 15,
-                        fontWeight: 'bold',
-                        color: '#DCDCDC'
-                    },
-                    x: 'center'
+                        fontSize: 18
+                    }
                 },
                 tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                    type: 'shadow'
-                    }
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['烟尘', 'SO2', 'NOx'],
+                    padding: [30, 0, 0, 0]
                 },
-                legend: {},
                 grid: {
                     left: '3%',
                     right: '4%',
                     bottom: '3%',
                     containLabel: true
                 },
+                toolbox: {
+                    feature: {
+                    }
+                },
                 xAxis: {
-                    type: 'value',
-                    boundaryGap: [0, 0.01],
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                     axisLabel: {
-                        fontSize: 12,
-                        textStyle: {
-                            fontWeight: 'bold',
-                            color: '#DCDCDC'
-                        }
+                        color: '#808080'
                     },
-                    nameTextStyle: {
-                        fontSize: 12,
-                        fontWeight: 'bold',
-                            color: '#DCDCDC'
-                    }
                 },
                 yAxis: {
-                    type: 'category',
-                    data: this.yDataTopCenter,
+                    type: 'value',
                     axisLabel: {
-                        fontSize: 12,
-                        textStyle: {
-                            fontWeight: 'bold',
-                            color: '#DCDCDC'
-                        }
+                        color: '#808080'
                     },
-                    nameTextStyle: {
-                        fontSize: 12,
-                        fontWeight: 'bold',
-                        color: '#DCDCDC'
-                    }
+                    splitLine: {
+                        show: true,
+                        lineStyle:{
+                            color: 'rgba(255,255,255,.7)'
+                        }
+                }
                 },
                 series: [
                     {
-                        type: 'bar',
-                        data: this.xDataTopCenter,
-                    }
+                        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.chart.setOption(option);
         }
     },

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

@@ -1,13 +1,12 @@
 <template>
     <div>
-        <div id="analysisChartTopLeft" style="width:6rem;height:3rem;margin:0.5rem auto;"></div>
+        <div id="analysisChartTopLeft" style="width:6.8rem;height:2.5rem;"></div>
     </div>
 </template>
 
 <script>
 import echartMixins from "@/utils/resizeMixins";
 export default {
-    props:['xDataTopLeft','yDataTopLeft'],
     data() {
         return {
         chart: null,
@@ -19,69 +18,100 @@ export default {
     },
     methods: {
         init() {
-            this.chart = this.echarts.init(document.getElementById("analysisChartTopLeft"));
+            this.chart = this.echarts.init(document.getElementById("analysisChartTopLeft"), 'dark');
             let option = {
+                backgroundColor: 'transparent',
                 title: {
-                    text: 'HRSG #1 排量 (mg/m3)',
+                    text: 'HRSG 1#',
                     textStyle: {
-                        fontSize: 15,
-                        fontWeight: 'bold',
-                        color: '#DCDCDC'
-                    },
-                    x: 'center'
+                        fontSize: 18
+                    }
                 },
                 tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                    type: 'shadow'
-                    }
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['烟尘', 'SO2', 'NOx'],
+                    padding: [30, 0, 0, 0]
                 },
-                legend: {},
                 grid: {
                     left: '3%',
                     right: '4%',
                     bottom: '3%',
                     containLabel: true
                 },
+                toolbox: {
+                    feature: {
+                    }
+                },
                 xAxis: {
-                    type: 'value',
-                    boundaryGap: [0, 0.01],
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                     axisLabel: {
-                        fontSize: 12,
-                        textStyle: {
-                            fontWeight: 'bold',
-                            color: '#DCDCDC'
-                        }
+                        color: '#808080'
                     },
-                    nameTextStyle: {
-                        fontSize: 12,
-                        fontWeight: 'bold',
-                            color: '#DCDCDC'
-                    }
                 },
                 yAxis: {
-                    type: 'category',
-                    data: this.yDataTopLeft,
+                    type: 'value',
                     axisLabel: {
-                        fontSize: 12,
-                        textStyle: {
-                            fontWeight: 'bold',
-                            color: '#DCDCDC'
-                        }
+                        color: '#808080'
                     },
-                    nameTextStyle: {
-                        fontSize: 12,
-                        fontWeight: 'bold',
-                        color: '#DCDCDC'
-                    }
+                    splitLine: {
+                        show: true,
+                        lineStyle:{
+                            color: 'rgba(255,255,255,.7)'
+                        }
+                }
                 },
                 series: [
                     {
-                        type: 'bar',
-                        data: this.xDataTopLeft
-                    }
+                        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.chart.setOption(option);
         }
     },

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

@@ -1,13 +1,12 @@
 <template>
     <div>
-        <div id="analysisChartTopRight" style="width:6rem;height:3rem;margin:0.5rem auto;"></div>
+        <div id="analysisChartTopRight" style="width:6.8rem;height:2.5rem;"></div>
     </div>
 </template>
 
 <script>
 import echartMixins from "@/utils/resizeMixins";
 export default {
-    props:['xDataTopRight','yDataTopRight'],
     data() {
         return {
         chart: null,
@@ -19,69 +18,100 @@ export default {
     },
     methods: {
         init() {
-            this.chart = this.echarts.init(document.getElementById("analysisChartTopRight"));
+            this.chart = this.echarts.init(document.getElementById("analysisChartTopRight"), 'dark');
             let option = {
+                backgroundColor: 'transparent',
                 title: {
-                    text: 'HRSG #3 排量 (mg/m3)',
+                    text: 'HRSG 3#',
                     textStyle: {
-                        fontSize: 15,
-                        fontWeight: 'bold',
-                        color: '#DCDCDC'
-                    },
-                    x: 'center'
+                        fontSize: 18
+                    }
                 },
                 tooltip: {
-                    trigger: 'axis',
-                    axisPointer: {
-                    type: 'shadow'
-                    }
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['烟尘', 'SO2', 'NOx'],
+                    padding: [30, 0, 0, 0]
                 },
-                legend: {},
                 grid: {
                     left: '3%',
                     right: '4%',
                     bottom: '3%',
                     containLabel: true
                 },
+                toolbox: {
+                    feature: {
+                    }
+                },
                 xAxis: {
-                    type: 'value',
-                    boundaryGap: [0, 0.01],
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                     axisLabel: {
-                        fontSize: 12,
-                        textStyle: {
-                            fontWeight: 'bold',
-                            color: '#DCDCDC'
-                        }
+                        color: '#808080'
                     },
-                    nameTextStyle: {
-                        fontSize: 12,
-                        fontWeight: 'bold',
-                            color: '#DCDCDC'
-                    }
                 },
                 yAxis: {
-                    type: 'category',
-                    data: this.yDataTopRight,
+                    type: 'value',
                     axisLabel: {
-                        fontSize: 12,
-                        textStyle: {
-                            fontWeight: 'bold',
-                            color: '#DCDCDC'
-                        }
+                        color: '#808080'
                     },
-                    nameTextStyle: {
-                        fontSize: 12,
-                        fontWeight: 'bold',
-                        color: '#DCDCDC'
-                    }
+                    splitLine: {
+                        show: true,
+                        lineStyle:{
+                            color: 'rgba(255,255,255,.7)'
+                        }
+                }
                 },
                 series: [
                     {
-                        type: 'bar',
-                        data: this.xDataTopRight
-                    }
+                        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.chart.setOption(option);
         }
     },

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

@@ -1,76 +1,119 @@
 <template>
-  <!-- 电厂大屏第三页：全厂在线分析仪表 -->
+  <!-- 电厂大屏第三页：环保监控 -->
   <div id="frontThree">
       <!-- 第一排开始 -->
       <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>
+        <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>
+          </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>
+            <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>
+            <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>
+          </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>
+          </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>
+            <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>
+            <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>
+          </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>
+          </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>
+            <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>
+            <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>
+          </div>
+        </dv-border-box-1>
       </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>
+        <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>
+          </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>
+        </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>
-        <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>
 
 <script>
-  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';
+  import analysisTopLeft from './analysisTopLeft.vue';
+  import analysisTopCenter from './analysisTopCenter.vue';
+  import analysisTopRight from './analysisTopRight.vue';
   export default {
     name: "materialBalance",
-    components: { analysisTopLeft, analysisTopCenter, analysisTopRight, analysisBottomLeft1, analysisBottomLeft2, analysisBottomLeft3, analysisBottomLeft4 },
+    components: {
+      analysisBottomLeft1, analysisBottomLeft2, analysisBottomLeft3, analysisBottomLeft4,
+      analysisTopLeft, analysisTopCenter, analysisTopRight
+    },
     data() {
       return {
-        // 第一排左上角柱状图横纵轴数据
-        xDataTopLeft: [
-          { value: 2050, itemStyle: { color: '#8378EA' } },
-          { value: 607, itemStyle: { color: '#F74F4E' } },
-          { value: 100, itemStyle: { color: '#6BE5EA' } }
-        ],
-        yDataTopLeft: ['NOx折算', 'SO2折算', '烟尘折算'],
-        // 第一排中间柱状图横纵轴数据
-        xDataTopCenter: [
-          { value: 1900, itemStyle: { color: '#8378EA' } },
-          { value: 572, itemStyle: { color: '#4A7CF9' } },
-          { value: 200, itemStyle: { color: '#F74F4E' } }
-        ],
-        yDataTopCenter: ['NOx折算', 'SO2折算', '烟尘折算'],
-        // 第一排右上角柱状图横纵轴数据
-        xDataTopRight: [
-          { value: 2050, itemStyle: { color: '#8378EA' } },
-          { value: 572, itemStyle: { color: '#4A7CF9' } },
-          { value: 100, itemStyle: { color: '#6BE5EA' } }
-        ],
-        yDataTopRight: ['NOx折算', 'SO2折算', '烟尘折算'],
+        // 第一排左上角水位图配置、基准值、实测值
+        configTopLeft1: {}, configTopLeft2: {}, configTopLeft3: {},
+        limitTopLeft1: 100, limitTopLeft2: 572, limitTopLeft3: 2050,
+        dataTopLeft1: 20, dataTopLeft2: 400, dataTopLeft3: 500,
+        // 第一排中间水位图配置、基准值、实测值
+        configTopCenter1: {}, configTopCenter2: {}, configTopCenter3: {},
+        limitTopCenter1: 100, limitTopCenter2: 572, limitTopCenter3: 2050,
+        dataTopCenter1: 20, dataTopCenter2: 400, dataTopCenter3: 500,
+        // 第一排右上角水位图配置、基准值、实测值
+        configTopRight1: {}, configTopRight2: {}, configTopRight3: {},
+        limitTopRight1: 100, limitTopRight2: 572, limitTopRight3: 2050,
+        dataTopRight1: 20, dataTopRight2: 400, dataTopRight3: 500,
         // 第二排右下角轮播表表头、表数据、表配置
         tableHeaderBottomRight: ['时间', '设备', '编号', '内容'],
         tableDataBottomRight: [
@@ -85,108 +128,107 @@
           ['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']
         ],
-        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: {}
+        configBottomRight: {}
       };
     },
     methods: {
+      /**
+       * 第一排左上角水位图初始化
+       */
+      initTopLeft() {
+        this.configTopLeft1 = {
+          data: [ ( (this.dataTopLeft1/this.limitTopLeft1) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopLeft1 + ' mg/m3',
+          shape: 'roundRect'
+        };
+        this.configTopLeft2 = {
+          data: [ ( (this.dataTopLeft2/this.limitTopLeft2) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopLeft2 + ' mg/m3',
+          shape: 'roundRect'
+        };
+        this.configTopLeft3 = {
+          data: [ ( (this.dataTopLeft3/this.limitTopLeft3) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopLeft3 + ' mg/m3',
+          shape: 'roundRect'
+        };
+      },
+      /**
+       * 第一排中间水位图初始化
+       */
+      initTopCenter() {
+        this.configTopCenter1 = {
+          data: [ ( (this.dataTopCenter1/this.limitTopCenter1) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopCenter1 + ' mg/m3',
+          shape: 'roundRect'
+        };
+        this.configTopCenter2 = {
+          data: [ ( (this.dataTopCenter2/this.limitTopCenter2) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopCenter2 + ' mg/m3',
+          shape: 'roundRect'
+        };
+        this.configTopCenter3 = {
+          data: [ ( (this.dataTopCenter3/this.limitTopCenter3) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopCenter3 + ' mg/m3',
+          shape: 'roundRect'
+        };
+      },
+      /**
+       * 第一排右上角水位图初始化
+       */
+      initTopRight() {
+        this.configTopRight1 = {
+          data: [ ( (this.dataTopRight1/this.limitTopRight1) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopRight1 + ' mg/m3',
+          shape: 'roundRect'
+        };
+        this.configTopRight2 = {
+          data: [ ( (this.dataTopRight2/this.limitTopRight2) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopRight2 + ' mg/m3',
+          shape: 'roundRect'
+        };
+        this.configTopRight3 = {
+          data: [ ( (this.dataTopRight3/this.limitTopRight3) * 100 ).toFixed(1) ],
+          waveHeight: 10,
+          formatter: this.dataTopRight3 + ' mg/m3',
+          shape: 'roundRect'
+        };
+      },
       /**
        * 第二排右下角轮播表配置初始化
        */
-      initCarouselBottomRight() {
+      initBottomRight() {
         this.configBottomRight = {
           data: this.tableDataBottomRight,
           header: this.tableHeaderBottomRight,
-          rowNum: 6,
+          rowNum: 8,
           headerBGC: '#00BAFF',
           oddRowBGC: '#003B51',
           evenRowBGC: '#0A2732',
-          waitTime: 1000,
-          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
-        }
-      }
+          waitTime: 3000, // in ms
+          align: ['center', 'center', 'center', 'center'],
+          columnWidth: [300, 200, 200],
+          headerHeight: 50,
+          carousel: 'single'  // 'single' | 'page'
+        };
+      }      
     },
     mounted () {
-      this.initCarouselBottomRight();
-      this.initCapsuleBottomLeft();
+      this.initBottomRight();
+      this.initTopLeft();
+      this.initTopCenter();
+      this.initTopRight();
     }
   }
 </script>
 
-<style lang="scss">
-  #frontThree {
-    padding: 0.2rem;
-    height: 11.7rem;
-    min-width: 3.75rem;
-    padding-top: 0.8rem;
-    border-radius: 0.0625rem;
-    .bg-color-black {
-      height: 11.5rem;
-      border-radius: 0.125rem;
-    }
-    .text {
-      color: #ffffff;
-    }
-    .chart-box {
-      margin-top: 0.2rem;
-      width: 2.125rem;
-      height: 2.125rem;
-      .active-ring-name {
-        padding-top: 0.125rem;
-      }
-    }
-    .bottom-data {
-      .item-box {
-        float: right;
-        position: relative;
-        width: 50%;
-        color: #d3d6dd;
-        // 金币
-        .coin {
-          position: absolute;
-          left: 0.1rem;
-          top: 0.2125rem;
-          font-size: 0.25rem;
-          color: #ffc107;
-        }
-        .colorYellow {
-          color: yellowgreen;
-        }
-      }
-    }
-  }
+<style scoped>
+
 </style>