驾驶舱

2024-01-08 16:59:42 +08:00
parent d619db3d89
commit 10ad3acf9c
19 changed files with 776 additions and 165 deletions
--- a/src/views/databoard/components/DefectChart.vue
+++ b/src/views/databoard/components/DefectChart.vue
@@ -17,6 +17,9 @@ export default {
    }
  },
  computed: {
+    israCheckType() {
+      return this.$store.state.websocket.israCheckType
+    },
    israDayStatistic() {
      return this.$store.state.websocket.israDayStatistic
    },
@@ -34,7 +37,7 @@ export default {
    israDayStatistic: {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '日') {
-          this.tempData = israDayStatistic
+          this.tempData = this.israDayStatistic
 					this.updateChart()
 				}
 			}
@@ -42,7 +45,7 @@ export default {
    israWeekStatistic: {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '周') {
-          this.tempData = israWeekStatistic
+          this.tempData = this.israWeekStatistic
 					this.updateChart()
 				}
 			}
@@ -50,7 +53,7 @@ export default {
    israMonthStatistic: {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '月') {
-          this.tempData = israMonthStatistic
+          this.tempData = this.israMonthStatistic
 					this.updateChart()
 				}
 			}
@@ -58,7 +61,7 @@ export default {
    israYearStatistic: {
 			handler(newVal, oldVal) {
 				if (this.chartTime === '年') {
-          this.tempData = israYearStatistic
+          this.tempData = this.israYearStatistic
 					this.updateChart()
 				}
 			}
@@ -80,56 +83,34 @@ export default {
        this.chart.dispose()
      }
      this.chart = echarts.init(this.$el);
-      let legendData = []
      let xData = []
-      let yData = []
+      let seriesData = []
+      for (let i = 0;i < this.israCheckType.length; i++) {
+        let obj = {}
+        obj.type = 'bar'
+        obj.stack = 'all'
+        obj.emphasis = {
+          focus:"series"
+        }
+        obj.name = this.israCheckType[i]
+        obj.barWidth = 12
+        obj.data = []
+        for (let j = 0;j < this.tempData.length; j++) {
+          for (let k = 0; k < this.tempData[j].data.length; k++) {
+            if (this.israCheckType[i] === this.tempData[j].data[k].checkType) {
+              obj.data.push(this.tempData[j].data[k].checkNum)
+            }
+          }
+        }
+        seriesData.push(obj)
+      }
+
      this.tempData && this.tempData.length > 0 && this.tempData.map(item => {
        xData.push(item.name)
      })
-      var series = [
-        {
-          data: [120, 200, 150, 80, 70, 110, 130],
-          type: 'bar',
-          stack: 'all',
-          name: 'a',
-          barWidth: 12,
-        },
-        {
-          data: [10, 46, 64, '-', 0, '-', 0],
-          type: 'bar',
-          stack: 'all',
-          name: 'b',
-          barWidth: 12,
-        },
-        {
-          data: [30, '-', 0, 20, 10, '-', 0],
-          type: 'bar',
-          stack: 'all',
-          barWidth: 12,
-          name: 'c'
-        },
-        {
-          data: [30, '-', 0, 20, 10, '-', 0],
-          type: 'bar',
-          stack: 'all',
-          barWidth: 12,
-          name: 'd'
-        },
-        {
-          data: [10, 20, 150, 0, '-', 50, 10],
-          type: 'bar',
-          stack: 'all',
-          name: 'e',
-          barWidth: 12,
-          label: {
-            show: true,
-            position: 'top'
-          }
-        }
-      ];
      var option = {
-        color: ['#2760FF','#5B9BFF','#FFD160','#8167F6', '#99D66C', '#FF8A40'],
-        grid: { top: 40, right: 12, bottom: 20, left: 48 },
+        color: ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160", "#FF8A40"],
+        grid: { top: 80, right: 12, bottom: 20, left: 48 },
        legend: {
          top: 10,
          left: 80,
@@ -142,7 +123,7 @@ export default {
            color: "#DFF1FE",
            fontSize: 12,
          },
-          data:['a','b','c','d','e'],
+          data:this.israCheckType,
        },
        xAxis: {
          type: "category",
@@ -191,7 +172,7 @@ export default {
          },
          className: "defect-chart-tooltip"
        },
-        series: series
+        series: seriesData
      };
      option && this.chart.setOption(option)
    }
--- a/src/views/databoard/components/FlueGas.vue
+++ b/src/views/databoard/components/FlueGas.vue
@@ -119,19 +119,19 @@ export default {
 			}
 			switch (this.chartType) {
 				case '氧气含量':{
-					temp2 = temp1.O2_float || []
+					temp2 = temp1?.O2_float || []
 					break;
 				}
 				case '二氧化硫':{
-					temp2 = temp1.SO2_float || []
+					temp2 = temp1?.SO2_float || []
 					break;
 				}
 				case '一氧化氮':{
-					temp2 = temp1.NOX_float || []
+					temp2 = temp1?.NOX_float || []
 					break;
 				}
 				case '颗粒物':{
-					temp2 = temp1.dust_float || []
+					temp2 = temp1?.dust_float || []
 					break;
 				}
 				default:
--- a/src/views/databoard/components/GasChart.vue
+++ b/src/views/databoard/components/GasChart.vue
@@ -221,6 +221,7 @@ export default {
 				series: seriesData,
 				tooltip: {
 					trigger: 'axis',
+					className: "gas-tooltip"
 				},
 			}
 			option && this.chart.setOption(option)
@@ -269,3 +270,13 @@ export default {
 	height: 100%;
 }
 </style>
+<style>
+  .gas-tooltip {
+    background: #0a2b4f77 !important;
+    border: none !important;
+    backdrop-filter: blur(12px);
+  }
+  .gas-tooltip * {
+    color: #fff !important;
+  }
+</style>
--- a/src/views/databoard/components/ScrollBoard.vue
+++ b/src/views/databoard/components/ScrollBoard.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="scroll-board-container">
-    <dv-scroll-board :config="config" :style="{'width':width,'height':height}" />
+    <dv-scroll-board :config="config" :style="{'width':width,'height':height}" :ref='id'/>
  </div>
 </template>
 <script>
@@ -18,6 +18,10 @@ export default {
    height:{
      type: String,
      default: '380px'
+    },
+    id:{
+      type: String,
+      default: ''
    }
  },
  data() {
@@ -25,14 +29,4 @@ export default {
    }
  }
 }
-</script>
-<style lang='scss'>
-.scroll-board-container {
-  .dv-scroll-board .rows .ceil, .dv-scroll-board .header .header-item {
-    border-right: 1px solid rgba(13, 23, 40, 1);
-  }
-  .dv-scroll-board .rows .ceil:last-child, .dv-scroll-board .header .header-item:last-child {
-    border-right: none;
-  }
-}
-</style>
+</script>
--- a/src/views/databoard/components/Switcher.vue
+++ b/src/views/databoard/components/Switcher.vue
@@ -7,7 +7,7 @@

 <template>
 	<div class="switcher" style="display: flex; align-items: center; gap: 12px">
-		<el-switch v-model="value"></el-switch>
+		<el-switch v-model="value" @change="handleClick"></el-switch>
 		<span style="color: #fff; font-size: 16px">{{ mode }}</span>
 		;
 	</div>
@@ -17,18 +17,31 @@
 export default {
 	name: 'Switcher',
 	components: {},
-	props: {},
+	props: {
+		showTitle:{
+			type: Array,
+      required: true,
+      default: () => {
+        return []
+      }
+		}
+	},
 	data() {
 		return {
-			value: true,
+			value: false,
 		};
 	},
 	computed: {
 		mode() {
-			return this.value ? '历史详情' : '实时数据';
+			return this.value ?  this.showTitle[0]: this.showTitle[1];
 		},
 	},
-	methods: {},
+	methods: {
+		handleClick(v) {
+			this.value = v;
+			this.$emit('emitFun', v);
+		}
+	},
 };
 </script>

--- a/src/views/databoard/components/YieldRateChart.vue
+++ b/src/views/databoard/components/YieldRateChart.vue
@@ -0,0 +1,317 @@
+<template>
+	<div class="yield-rate-chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import resize from './../mixins/resize'
+import { formatDate } from '@/utils'
+
+export default {
+	name: 'GasChart',
+	mixins: [resize],
+	components: {},
+	props: {
+		chartType: '', // 能源类型
+		chartTime: ''
+	},
+	data() {
+		return {
+			chart: null
+		};
+	},
+	computed: {
+		cutChartDay() {
+			return this.$store.state.websocket.cutChartDay
+		},
+		cutChartWeek() {
+			return this.$store.state.websocket.cutChartWeek
+		},
+		cutChartMonth() {
+			return this.$store.state.websocket.cutChartMonth
+		},
+		cutChartYear() {
+			return this.$store.state.websocket.cutChartYear
+		}
+	},
+	watch: {
+		cutChartDay: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '日') {
+					this.updateChart()
+				}
+			}
+		},
+		cutChartWeek: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '周') {
+					this.updateChart()
+				}
+			}
+		},
+		cutChartMonth: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '月') {
+					this.updateChart()
+				}
+			}
+		},
+		cutChartYear: {
+			handler(newVal, oldVal) {
+				if (this.chartTime === '年') {
+					this.updateChart()
+				}
+			}
+		},
+		chartTime: {
+			handler(newVal, oldVal) {
+				console.log("===================")
+				console.log(newVal)
+				this.updateChart()
+			}
+		},
+		chartType: {
+			handler(newVal, oldVal) {
+				this.updateChart()
+			}
+		}
+	},
+	mounted() {
+		this.$el.addEventListener('resize', () => {
+			console.log('resziing.....');
+		});
+		this.updateChart()
+	},
+	methods: {
+		updateChart() {
+			let chartData = []
+			let xData = []
+			let dayArr = []
+			let nightArr = []
+			let sumArr = []
+			let seriesData = []
+			switch(this.chartTime) {
+					case '日':
+						chartData = this.cutChartDay
+						break;
+					case '周':
+					 chartData = this.cutChartWeek
+						break;
+					case '月':
+					 chartData = this.cutChartMonth
+						break;
+					case '年':
+					 chartData = this.cutChartYear
+						break;
+					default:
+			}
+			chartData && chartData.length > 0 && chartData.map(item => {
+				if (this.chartTime === '日') {
+					xData.push((item.dataTime).slice(11))
+				}else{
+					xData.push((item.dataTime).slice(0,10))
+				}
+				dayArr.push((item.day * 100).toFixed(2))
+				nightArr.push((item.night * 100).toFixed(2))
+				sumArr.push((item.sum * 100).toFixed(2))
+			})
+			if (this.chartType) {
+				seriesData = [{
+					color: '#ff9e00',
+					name: 'sum',
+					data: sumArr,
+					type: "line",
+					areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+							{ offset: 0, color: '#FFCB5940' },
+							{ offset: 0.5, color: '#FFCB5920' },
+							{ offset: 1, color: '#FFCB5900' },
+							]),
+					},
+					lineStyle: {
+							width: 1
+					},
+					symbolSize: 1,
+					emphasis: {
+							focus: 'series'
+					}
+				},
+				{
+					color: '#08d8cd',
+					name: 'day',
+					data: dayArr,
+					type: "line",
+					areaStyle: {
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: "#12FFF540" },
+						{ offset: 0.5, color: "#12FFF520" },
+						{ offset: 1, color: "#12FFF510" },
+        ]),
+					},
+					lineStyle: {
+							width: 1
+					},
+					symbolSize: 1,
+					emphasis: {
+							focus: 'series'
+					}
+				},
+				{
+					color: '#0b58ff',
+					name: 'night',
+					data: nightArr,
+					type: "line",
+					areaStyle: {
+						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+						{ offset: 0, color: "#2760FF40" },
+						{ offset: 0.5, color: "#2760FF20" },
+						{ offset: 1, color: "#2760FF10" },
+					]),
+					},
+					lineStyle: {
+							width: 1
+					},
+					symbolSize: 1,
+					emphasis: {
+							focus: 'series'
+					}
+				}]
+			}else{
+				seriesData = [{
+					color: '#ff9e00',
+					name: 'sum',
+					data: sumArr,
+					type: "line",
+					areaStyle: {
+							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+							{ offset: 0, color: '#FFCB5940' },
+							{ offset: 0.5, color: '#FFCB5920' },
+							{ offset: 1, color: '#FFCB5900' },
+							]),
+					},
+					lineStyle: {
+							width: 1
+					},
+					symbolSize: 1,
+					emphasis: {
+							focus: 'series'
+					}
+				}]
+			}
+			// 绘图
+			if (
+        this.chart !== null &&
+        this.chart !== '' &&
+        this.chart !== undefined
+      ) {
+        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+      }
+			this.chart = echarts.init(this.$el);
+			var option = {
+				grid: { top: 15, right: 12, bottom: 45, left: 60 },
+				xAxis: {
+					type: 'category',
+					data: xData,
+					axisLabel: {
+						color: "#fff",
+						fontSize: 10,
+						rotate: 25,
+						margin: 13,
+					},
+					axisTick: { show: false },
+					axisLine: {
+						lineStyle: {
+							width: 1,
+							color: '#213259',
+						},
+					},
+				},
+				yAxis: {
+					nameTextStyle: {
+						color: '#fff',
+						fontSize: 10,
+						align: 'right',
+					},
+					type: 'value',
+					axisLabel: {
+						color: "#fff",
+						fontSize: 12,
+						formatter: "{value} %",
+					},
+					axisLine: {
+						show: true,
+						lineStyle: {
+							color: '#213259',
+						},
+					},
+					splitLine: {
+						lineStyle: {
+							color: '#213259a0',
+						},
+					},
+					interval: 10,
+					min: 0,
+					max: 100,
+				},
+				series: seriesData,
+				tooltip: {
+					trigger: 'axis',
+					className: "yield-rate-tooltip"
+				},
+			}
+			option && this.chart.setOption(option)
+		},
+		getXdata() {
+			const today = new Date();
+			const currentYear = today.getFullYear();
+			const currentMonth = today.getMonth() + 1;
+			let days = 30;
+			if (this.chartTime === '周') {
+				return Array(7)
+						.fill(1)
+						.map((_, index) => {
+							const today = new Date();
+							const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000;
+							return `${new Date(dtimestamp).getMonth() + 1}.${new Date(
+								dtimestamp
+							).getDate()}`;}).reverse()
+			}else if (this.chartTime == "月") {
+				if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) {
+					days = 31;
+				} else if (currentMonth == 2) {
+					days = this.isLeapYear(currentYear) ? 29 : 28;
+				}
+				return Array(days)
+						.fill(1)
+						.map((_, index) => {
+							return `${currentMonth}.${days - index}`;}).reverse()
+			} else {
+				return Array(12)
+						.fill(1)
+						.map((_, index) => {
+							return `${currentYear}.${12 - index}`;}).reverse()
+			}
+		},
+		isLeapYear(year) {
+			return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
+		}
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.yield-rate-chart {
+	width: 100%;
+	height: 100%;
+}
+</style>
+<style>
+  .yield-rate-tooltip {
+    background: #0a2b4f77 !important;
+    border: none !important;
+    backdrop-filter: blur(12px);
+  }
+  .yield-rate-tooltip * {
+    color: #fff !important;
+  }
+</style>