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

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

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <analysisChartBottomLeft1></analysisChartBottomLeft1>
+  </div>
+</template>
+
+<script>
+import analysisChartBottomLeft1 from './echart/analysisChart/analysisChartBottomLeft1';
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    analysisChartBottomLeft1
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <analysisChartBottomLeft2></analysisChartBottomLeft2>
+  </div>
+</template>
+
+<script>
+import analysisChartBottomLeft2 from './echart/analysisChart/analysisChartBottomLeft2';
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    analysisChartBottomLeft2
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <analysisChartBottomLeft3></analysisChartBottomLeft3>
+  </div>
+</template>
+
+<script>
+import analysisChartBottomLeft3 from './echart/analysisChart/analysisChartBottomLeft3';
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    analysisChartBottomLeft3
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <analysisChartBottomLeft4></analysisChartBottomLeft4>
+  </div>
+</template>
+
+<script>
+import analysisChartBottomLeft4 from './echart/analysisChart/analysisChartBottomLeft4';
+export default {
+  data() {
+    return {};
+  },
+  components: {
+    analysisChartBottomLeft4
+  },
+  mounted() {},
+  methods: {}
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <div id="analysisChartBottomLeft1" style="width:3rem;height:3rem;"></div>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+    data() {
+        return {
+            chart: null,
+        }
+    },
+    mixins: [echartMixins],
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft1"), 'dark');
+            let option = {
+                title: {
+                    text: 'PH of Waste Water',
+                    x: 'center'
+                },
+                tooltip: {
+                    formatter: '{a} <br/>{b} : {c}%'
+                },
+                series: [
+                    {
+                        name: 'PH of Waste Water',
+                        type: 'gauge',
+                        progress: {
+                            show: true,
+                            width: 5
+                        },
+                        detail: {
+                            valueAnimation: true,
+                            formatter: '{value}'
+                        },
+                        data: [
+                            {
+                                value: 75,
+                                name: ''
+                            }
+                        ],
+                        axisLine: {
+                            lineStyle: {
+                                width: 5
+                            }
+                        },
+                        axisLabel: {
+                            fontSize: 10
+                        },
+                        pointer: {
+                            width: 4,
+                            length: 80
+                        }
+                    }
+                ],
+                backgroundColor: 'transparent'
+            };
+            this.chart.setOption(option);
+        }
+    },
+    destroyed() {
+        window.onresize = null;
+    }
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <div id="analysisChartBottomLeft2" style="width:3rem;height:3rem;"></div>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+    data() {
+        return {
+            chart: null,
+        }
+    },
+    mixins: [echartMixins],
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft2"), 'dark');
+            let option = {
+                title: {
+                    text: 'COD of Waste Water',
+                    x: 'center'
+                },
+                tooltip: {
+                    formatter: '{a} <br/>{b} : {c}%'
+                },
+                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
+                            }
+                        },
+                        axisLabel: {
+                            fontSize: 10
+                        },
+                        pointer: {
+                            width: 4,
+                            length: 80
+                        }
+                    }
+                ],
+                backgroundColor: 'transparent'
+            };
+            this.chart.setOption(option);
+        }
+    },
+    destroyed() {
+        window.onresize = null;
+    }
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,75 @@
+<template>
+    <div>
+        <div id="analysisChartBottomLeft3" style="width:3rem;height:3rem;"></div>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+    data() {
+        return {
+            chart: null,
+        }
+    },
+    mixins: [echartMixins],
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft3"), 'dark');
+            let option = {
+                title: {
+                    text: 'PH of Rain Water',
+                    x: 'center'
+                },
+                tooltip: {
+                    formatter: '{a} <br/>{b} : {c}%'
+                },
+                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
+                        },
+                        pointer: {
+                            width: 4,
+                            length: 80
+                        }
+                    }
+                ],
+                backgroundColor: 'transparent'
+            };
+            this.chart.setOption(option);
+        }
+    },
+    destroyed() {
+        window.onresize = null;
+    }
+}
+</script>
+
+<style>
+
+</style>

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

@@ -0,0 +1,74 @@
+<template>
+    <div>
+        <div id="analysisChartBottomLeft4" style="width:3rem;height:3rem;"></div>
+    </div>
+</template>
+
+<script>
+import echartMixins from "@/utils/resizeMixins";
+export default {
+    data() {
+        return {
+            chart: null,
+        }
+    },
+    mixins: [echartMixins],
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            this.chart = this.echarts.init(document.getElementById("analysisChartBottomLeft4"), 'dark');
+            let option = {
+                title: {
+                    text: 'COD of Rain Water',
+                    x: 'center'
+                },
+                tooltip: {
+                    formatter: '{a} <br/>{b} : {c}%'
+                },
+                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
+                        },
+                        pointer: {
+                            width: 4,
+                            length: 80
+                        }
+                    }
+                ],
+                backgroundColor: 'transparent'
+            };
+            this.chart.setOption(option);
+        }
+    },
+    destroyed() {
+        window.onresize = null;
+    }
+}
+</script>
+
+<style>
+
+</style>