驾驶舱

2024-04-24 13:30:06 +08:00
parent 0fffed9b0e
commit 1d9e272f99
11 changed files with 674 additions and 463 deletions
--- a/.env.dev
+++ b/.env.dev
@@ -12,15 +12,15 @@ ENV = 'development'
 VUE_APP_TITLE = MES系统

 # 芋道管理系统/开发环境
-VUE_APP_BASE_API = 'http://192.168.0.33:48082'
-# VUE_APP_BASE_API = 'http://192.168.1.104:48082'
+# VUE_APP_BASE_API = 'http://192.168.0.33:48082'
+VUE_APP_BASE_API = 'http://10.70.2.2:8080'
 # 积木报表指向地址
 VUE_APP_JIMU_API = 'http://192.168.0.33:48082'

 # socket地址(现场)
-# VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
+VUE_APP_Socket_API = 'ws://10.70.2.2:8080'
 # socket地址(公司线上)
-VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
+# VUE_APP_Socket_API = 'ws://192.168.0.33:48082'
 # socket dcs地址(只有现场)
 VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081'

--- a/src/views/databoard/components/GasChart.vue
+++ b/src/views/databoard/components/GasChart.vue
@@ -1,22 +1,26 @@
 <template>
 	<div>
-		<NotMsg v-show="notMsg"/>
-		<div id='gasChart' class="gas-chart" style="width:600px;height:200px;" v-show='!notMsg'></div>
+		<NotMsg v-show="notMsg" />
+		<div
+			id="gasChart"
+			class="gas-chart"
+			style="width: 600px; height: 200px"
+			v-show="!notMsg"></div>
 	</div>
 </template>

 <script>
 import * as echarts from 'echarts';
-import resize from './../mixins/resize'
-import NotMsg from './../components/NotMsg'
+import resize from './../mixins/resize';
+import NotMsg from './../components/NotMsg';

 export default {
 	name: 'GasChart',
 	mixins: [resize],
-	components:{ NotMsg },
+	components: { NotMsg },
 	props: {
 		chartType: '', // 能源类型
-		chartTime: ''
+		chartTime: '',
 	},
 	data() {
 		const colors = [
@@ -31,159 +35,170 @@ export default {
 		];
 		return {
 			chart: null,
-			notMsg:false
+			notMsg: false,
 		};
 	},
 	computed: {
 		gasChartMsg() {
-			return this.$store.state.websocket.sumGasInfo
+			return this.$store.state.websocket.sumGasInfo;
 		},
 		energyWeekTrend() {
-			return this.$store.state.websocket.energyWeekTrend
+			return this.$store.state.websocket.energyWeekTrend;
 		},
 		energyMonthTrend() {
-			return this.$store.state.websocket.energyMonthTrend
+			return this.$store.state.websocket.energyMonthTrend;
 		},
 		energyYearTrend() {
-			return this.$store.state.websocket.energyYearTrend
-		}
+			return this.$store.state.websocket.energyYearTrend;
+		},
 	},
 	watch: {
-		energyWeekTrend: {// 监听周电能，更新图
+		energyWeekTrend: {
+			// 监听周电能，更新图
 			handler(newVal, oldVal) {
 				if (this.chartTime === '周' && this.chartType === '电耗能') {
-					this.updateChart()
-					this.$emit('emitFun')
+					this.updateChart();
+					this.$emit('emitFun');
 				}
-			}
+			},
 		},
-		energyMonthTrend: {// 监听月电能，更新图
+		energyMonthTrend: {
+			// 监听月电能，更新图
 			handler(newVal, oldVal) {
 				if (this.chartTime === '月' && this.chartType === '电耗能') {
-					this.updateChart()
-					this.$emit('emitFun')
+					this.updateChart();
+					this.$emit('emitFun');
 				}
-			}
+			},
 		},
-		energyYearTrend: {// 监听年电能，更新图
+		energyYearTrend: {
+			// 监听年电能，更新图
 			handler(newVal, oldVal) {
 				if (this.chartTime === '年' && this.chartType === '电耗能') {
-					this.updateChart()
-					this.$emit('emitFun')
+					this.updateChart();
+					this.$emit('emitFun');
 				}
-			}
+			},
 		},
-		gasChartMsg: {// 监听天然气，更新图
+		gasChartMsg: {
+			// 监听天然气，更新图
 			handler(newVal, oldVal) {
 				if (this.chartType === '天然气I' || this.chartType === '天然气II') {
-					this.updateChart()
-					this.$emit('emitFun')
+					this.updateChart();
+					this.$emit('emitFun');
 				}
-			}
+			},
 		},
-		chartTime: {// 监听时间变化，更新图
+		chartTime: {
+			// 监听时间变化，更新图
 			handler(newVal, oldVal) {
-				this.updateChart()
-			}
+				this.updateChart();
+			},
 		},
-		chartType: {// 监听能源类型变化，更新图
+		chartType: {
+			// 监听能源类型变化，更新图
 			handler(newVal, oldVal) {
-				this.updateChart()
-			}
-		}
+				this.updateChart();
+			},
+		},
 	},
 	mounted() {
 		this.$el.addEventListener('resize', () => {
 			console.log('resziing.....');
 		});
-		this.updateChart()
+		this.updateChart();
 	},
 	methods: {
 		updateChart() {
-			let gasName  = ''
+			let gasName = '';
 			const colors = ['#FFCB59'];
-			let temp = []
-			let seriesData = []
-			let xData = []
-			let yData = []
+			let temp = [];
+			let seriesData = [];
+			let xData = [];
+			let yData = [];
 			switch (this.chartType) {
-				case '电耗能':{
-					gasName = '电耗能'
+				case '电耗能': {
+					gasName = '电耗能';
 					if (this.chartTime === '周') {
-						temp = this.energyWeekTrend || []
-					}else if(this.chartTime === '月') {
-						temp = this.energyMonthTrend || []
-					}else{
-						temp = this.energyYearTrend || []
+						temp = this.energyWeekTrend || [];
+					} else if (this.chartTime === '月') {
+						temp = this.energyMonthTrend || [];
+					} else {
+						temp = this.energyYearTrend || [];
 					}
-					temp && temp.map(i => {
-						xData.push(i.time)
-						yData.push(i.qty)
-					})
+					temp &&
+						temp.map((i) => {
+							xData.push(i.time);
+							yData.push(i.qty);
+						});
 					break;
 				}
-				case '天然气I':{
+				case '天然气I': {
 					if (this.chartTime === '周') {
-						yData = this.gasChartMsg.hisSumGas1For7Day || []
-					}else if(this.chartTime === '月') {
-						yData = this.gasChartMsg.sumGas1ForMonth || []
-					}else{
-						yData = this.gasChartMsg.sumGas1ForYear || []
+						yData = this.gasChartMsg.hisSumGas1For7Day || [];
+					} else if (this.chartTime === '月') {
+						yData = this.gasChartMsg.sumGas1ForMonth || [];
+					} else {
+						yData = this.gasChartMsg.sumGas1ForYear || [];
 					}
-					gasName = '天然气I'
-					xData = this.getXdata()
+					gasName = '天然气I';
+					xData = this.getXdata();
 					break;
 				}
 				default:
-				gasName = '天然气II'
-				if (this.chartTime === '周') {
-						yData = this.gasChartMsg.hisSumGas2For7Day || []
-					}else if(this.chartTime === '月') {
-						yData = this.gasChartMsg.sumGas2ForMonth || []
-					}else{
-						yData = this.gasChartMsg.sumGas2ForYear || []
+					gasName = '天然气II';
+					if (this.chartTime === '周') {
+						yData = this.gasChartMsg.hisSumGas2For7Day || [];
+					} else if (this.chartTime === '月') {
+						yData = this.gasChartMsg.sumGas2ForMonth || [];
+					} else {
+						yData = this.gasChartMsg.sumGas2ForYear || [];
 					}
-				xData = this.getXdata()
+					xData = this.getXdata();
 			}
 			if (yData.length === 0) {
-         this.notMsg = true
-         return
-      } else {
-        this.notMsg = false
-      }
+				this.notMsg = true;
+				return;
+			} else {
+				this.notMsg = false;
+			}
 			if (yData.length == 0) {
-				seriesData = []
-			}else {
-				seriesData = [{
-					name: gasName,
-					data: yData,
-					type: "line",
-					areaStyle: {
+				seriesData = [];
+			} else {
+				yData = yData.map((item) => {
+					return (item = Number(item.toFixed(2)));
+				});
+				seriesData = [
+					{
+						name: gasName,
+						data: yData,
+						type: 'line',
+						areaStyle: {
 							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-							{ offset: 0, color: '#FFCB59' + "40" },
-							{ offset: 0.5, color: '#FFCB59' + "20" },
-							{ offset: 1, color: '#FFCB59' + "00" },
+								{ offset: 0, color: '#FFCB59' + '40' },
+								{ offset: 0.5, color: '#FFCB59' + '20' },
+								{ offset: 1, color: '#FFCB59' + '00' },
 							]),
+						},
+						lineStyle: {
+							width: 1,
+						},
+						symbol: 'circle',
+						symbolSize: 5,
+						emphasis: {
+							focus: 'series',
+						},
 					},
-					lineStyle: {
-							width: 1
-					},
-					symbol: 'circle',
-					symbolSize: 5,
-					emphasis: {
-							focus: 'series'
-					}
-				}]
-					
+				];
 			}
 			// 绘图
 			if (
-        this.chart !== null &&
-        this.chart !== '' &&
-        this.chart !== undefined
-      ) {
-        this.chart.dispose() // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
-      }
+				this.chart !== null &&
+				this.chart !== '' &&
+				this.chart !== undefined
+			) {
+				this.chart.dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
+			}
 			this.chart = echarts.init(document.getElementById('gasChart'));
 			var option = {
 				color: colors,
@@ -204,7 +219,7 @@ export default {
 					},
 				},
 				yAxis: {
-					name: this.chartType === '电耗能'?'单位kwh':'单位Nm³',
+					name: this.chartType === '电耗能' ? '单位kwh' : '单位Nm³',
 					nameTextStyle: {
 						color: '#fff',
 						fontSize: 10,
@@ -230,10 +245,10 @@ export default {
 				series: seriesData,
 				tooltip: {
 					trigger: 'axis',
-					className: "gas-tooltip"
+					className: 'gas-tooltip',
 				},
-			}
-			option && this.chart.setOption(option)
+			};
+			option && this.chart.setOption(option);
 		},
 		getXdata() {
 			const today = new Date();
@@ -242,31 +257,39 @@ export default {
 			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 == "月") {
+					.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()
+					.fill(1)
+					.map((_, index) => {
+						return `${currentMonth}.${days - index}`;
+					})
+					.reverse();
 			} else {
 				return Array(12)
-						.fill(1)
-						.map((_, index) => {
-							return `${12 - index}`;}).reverse()
+					.fill(1)
+					.map((_, index) => {
+						return `${12 - index}`;
+					})
+					.reverse();
 			}
 		},
 		isLeapYear(year) {
 			return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0);
-		}
+		},
 	},
 };
 </script>
@@ -278,12 +301,12 @@ export default {
 }
 </style>
 <style>
-  .gas-tooltip {
-    background: #0a2b4f77 !important;
-    border: none !important;
-    backdrop-filter: blur(12px);
-  }
-  .gas-tooltip * {
-    color: #fff !important;
-  }
+.gas-tooltip {
+	background: #0a2b4f77 !important;
+	border: none !important;
+	backdrop-filter: blur(12px);
+}
+.gas-tooltip * {
+	color: #fff !important;
+}
 </style>
--- a/src/views/databoard/components/ISRAChart.vue
+++ b/src/views/databoard/components/ISRAChart.vue
@@ -1,68 +1,89 @@
 <template>
 	<div>
-		<NotMsg v-show="notMsg"/>
-		<div id="israChart" class="isra-chart" style="width:600px;height:390px;" v-show='!notMsg'></div>
+		<NotMsg v-show="notMsg" />
+		<div
+			id="israChart"
+			class="isra-chart"
+			style="width: 600px; height: 390px"
+			v-show="!notMsg"></div>
 	</div>
 </template>

 <script>
 import * as echarts from 'echarts';
-import resize from './../mixins/resize'
-import NotMsg from './../components/NotMsg'
+import resize from './../mixins/resize';
+import NotMsg from './../components/NotMsg';

 export default {
 	name: 'ISRAChart',
 	mixins: [resize],
-	components:{ NotMsg },
+	components: { NotMsg },
 	props: {},
 	data() {
 		return {
 			chart: null,
-			notMsg:true,
-			colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
-			chartData: []
+			notMsg: true,
+			colors: ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
+			chartData: [],
 		};
 	},
-	activated() {
-	},
+	activated() {},
 	computed: {
 		israChartMsg() {
-			return this.$store.state.websocket.israKiln
-		}
+			return this.$store.state.websocket.israKiln;
+		},
 	},
 	watch: {
 		israChartMsg: {
 			handler(newVal, oldVal) {
-				this.chartData = newVal || []
-				this.updateChart()
-				this.$emit('emitFun')
-			}
-		}
+				this.chartData = newVal || [];
+				this.updateChart();
+				this.$emit('emitFun');
+			},
+		},
 	},
 	methods: {
+		getEqualNewlineString(params, length) {
+			let text = '';
+			let count = Math.ceil(params.length / length); // 向上取整数
+			// 一行展示length个
+			if (count > 1) {
+				for (let z = 1; z <= count; z++) {
+					text += params.substr((z - 1) * length, length);
+					if (z < count) {
+						text += '\n';
+					}
+				}
+			} else {
+				text += params.substr(0, length);
+			}
+			return text;
+		},
 		updateChart() {
-			console.log('update')
-			let num = 0
-			this.chartData && this.chartData.length > 0 && this.chartData.map(i => {
-				num+=i.num
-			})
+			console.log('update');
+			let num = 0;
+			this.chartData &&
+				this.chartData.length > 0 &&
+				this.chartData.map((i) => {
+					num += i.num;
+				});
 			if (
-        this.chart !== null &&
-        this.chart !== '' &&
-        this.chart !== undefined
-      ) {
-        this.chart.dispose()
-      }
+				this.chart !== null &&
+				this.chart !== '' &&
+				this.chart !== undefined
+			) {
+				this.chart.dispose();
+			}
 			if (this.chartData && this.chartData.length > 0) {
-         this.notMsg = false
-      } else {
-        this.notMsg = true
-				return
-      }
+				this.notMsg = false;
+			} else {
+				this.notMsg = true;
+				return;
+			}
 			this.chart = echarts.init(document.getElementById('israChart'));
 			var option = {
-				color:this.colors,
-				title:{
+				color: this.colors,
+				title: {
 					text: num,
 					subtext: '总数',
 					top: '32%',
@@ -81,55 +102,92 @@ export default {
 					bottom: '2%',
 					left: 'center',
 					itemWidth: 18,
-					itemHeight:18,
+					itemHeight: 18,
 					icon: 'circle',
 					textStyle: {
-						color: '#fff'
+						color: '#fff',
 					},
-					data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({
-						name:item.name,
-						itemStyle:{
-							color: this.colors[index%4]
-						}
-					}))
+					data:
+						this.chartData &&
+						this.chartData.length > 0 &&
+						this.chartData.map((item, index) => ({
+							name: item.name,
+							itemStyle: {
+								color: this.colors[index % 4],
+							},
+						})),
 				},
-				series:[{
+				series: [
+					{
 						name: 'ISRA缺陷检测',
 						type: 'pie',
 						center: ['50%', '40%'],
 						radius: ['45%', '70%'],
 						avoidLabelOverlap: true,
+						// label: {
+						// 	show: true,
+						// },
+						// labelLine: {
+						// 	show: true,
+						// },
 						label: {
-							show: false
+							show: true,
+							normal: {
+								alignTo: 'labelLine',
+								margin: 10,
+								edgeDistance: 10,
+								lineHeight: 16,
+								formatter: (params) => {
+									//调用自定义显示格式
+									return this.getEqualNewlineString(
+										params.value + ' | ' + params.percent.toFixed(0) + '%'
+									);
+								},
+								textStyle: {
+									// 提示文字的样式
+									// color: '#595959',
+									fontSize: 16,
+								},
+							},
 						},
 						labelLine: {
 							show: true,
+							length: 25,
+							length2: 10,
 						},
-						data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({
-						name:item.name,
-						value: item.num,
-						itemStyle:{
-							color:{
-								type: 'linear',
-								x: 1,
-								y: 1,
-								x2: 0,
-								y2: 0,
-								global: false,
-								colorStops:[
-									{offset: 0,color: this.colors[index%4]},
-									{offset: 1,color: this.colors[index%4]+'33'}
-								]
-							}
-						}
-					}))}],
-					tooltip: {
-						trigger: 'item',
-						className: "isra-chart-tooltip"
+						data:
+							this.chartData &&
+							this.chartData.length > 0 &&
+							this.chartData.map((item, index) => ({
+								name: item.name,
+								value: item.num,
+								label: {
+									color: this.colors[index % 4],
+								},
+								itemStyle: {
+									color: {
+										type: 'linear',
+										x: 1,
+										y: 1,
+										x2: 0,
+										y2: 0,
+										global: false,
+										colorStops: [
+											{ offset: 0, color: this.colors[index % 4] },
+											{ offset: 1, color: this.colors[index % 4] + '33' },
+										],
+									},
+								},
+							})),
 					},
-			}
+				],
+				tooltip: {
+					trigger: 'item',
+					className: 'isra-chart-tooltip',
+				},
+			};
 			this.chart.setOption(option);
-		}
+		},
 	},
 };
 </script>
@@ -141,12 +199,12 @@ export default {
 }
 </style>
 <style>
-  .isra-chart-tooltip {
-    background: #0a2b4f77 !important;
-    border: none !important;
-    backdrop-filter: blur(12px);
-  }
-  .isra-chart-tooltip * {
-    color: #fff !important;
-  }
+.isra-chart-tooltip {
+	background: #0a2b4f77 !important;
+	border: none !important;
+	backdrop-filter: blur(12px);
+}
+.isra-chart-tooltip * {
+	color: #fff !important;
+}
 </style>
--- a/src/views/databoard/deepProcessing/EqAlarm.vue
+++ b/src/views/databoard/deepProcessing/EqAlarm.vue
@@ -1,77 +1,93 @@
 <template>
-  <div style="flex: 1;">
-    <Container name="设备报警" size="middle" style="">
-      <TimePrompt class="timeShow" :timestr="timestr" />
-      <div style="padding: 5px 10px;">
-        <dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/>
-      </div>
-    </Container>
-  </div>
+	<div style="flex: 1">
+		<Container
+			name="设备报警"
+			size="middle"
+			style="">
+			<TimePrompt
+				class="timeShow"
+				:timestr="timestr" />
+			<div style="padding: 5px 10px">
+				<dv-scroll-board
+					:config="config"
+					style="width: 575px; height: 380px"
+					ref="eqScrollBoard" />
+			</div>
+		</Container>
+	</div>
 </template>
 <script>
 import Container from '../components/Container.vue';
 import TimePrompt from '../components/TimePrompt';
-import { switchShowTime } from '../utils'
+import { switchShowTime } from '../utils';
 export default {
-  name: 'EqAlarm',
-  components: { Container, TimePrompt },
-  computed: {
-    sjgEquipment() {
-      return this.$store.state.websocket.sjgEquipment
-    }
-  },
-  data() {
-    return {
-      timestr: '',
-      config: {
-        header: ['序号', '设备名称', '设备编码','设备状态','是否故障'],
-        headerBGC: 'rgba(32, 55, 96, 0.8)',
-        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
-        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
-        columnWidth: [60, 150, 190],
-        align: ['center'],
-        data: [],
-        // data: [
-        //   [1, '四大线3小线铺纸机', 'EQ20240110130909000255', '正常', '否'],
-        //   [2, '四大线2小线铺纸机', 'EQ20240110130848000254', '正常', '否'],
-        //   [3, '四大线1小线铺纸机', 'EQ20240110130832000253', '正常', '否'],
-        //   [4, '12线下片台', 'EQ20240110130817000252', '正常', '否'],
-        //   [5, '11线下片台', '	EQ20240110130743000250', '正常', '否'],
-        //   [6, '10线下片台', '	EQ20240110130743000250', '正常', '否'],
-        //   [7, '4大线五区自动连线柜', 'EQ20240110130731000249', '正常', '否'],
-        //   [8, '四大线四区2小线清洗机', 'EQ20240110112716000248', '正常', '否'],
-        //   [9, '四大线四区1小线清洗机', 'EQ20240110112700000247', '正常', '否'],
-        //   [10, '4大线四区自动连线柜', 'EQ20240110112646000246', '正常', '否']
-        // ],
-        rowNum: 10
-      }
-    }
-  },
-  mounted(){
-    this.timestr = switchShowTime('日')
-  },
-  watch:{
-    sjgEquipment: {
+	name: 'EqAlarm',
+	components: { Container, TimePrompt },
+	computed: {
+		sjgEquipment() {
+			return this.$store.state.websocket.sjgEquipment;
+		},
+	},
+	data() {
+		return {
+			timestr: '',
+			config: {
+				header: ['序号', '设备名称', '设备编码', '设备状态', '是否故障'],
+				headerBGC: 'rgba(32, 55, 96, 0.8)',
+				oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+				evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+				columnWidth: [60, 150, 190],
+				align: ['center'],
+				data: [],
+				// data: [
+				//   [1, '四大线3小线铺纸机', 'EQ20240110130909000255', '正常', '否'],
+				//   [2, '四大线2小线铺纸机', 'EQ20240110130848000254', '正常', '否'],
+				//   [3, '四大线1小线铺纸机', 'EQ20240110130832000253', '正常', '否'],
+				//   [4, '12线下片台', 'EQ20240110130817000252', '正常', '否'],
+				//   [5, '11线下片台', '	EQ20240110130743000250', '正常', '否'],
+				//   [6, '10线下片台', '	EQ20240110130743000250', '正常', '否'],
+				//   [7, '4大线五区自动连线柜', 'EQ20240110130731000249', '正常', '否'],
+				//   [8, '四大线四区2小线清洗机', 'EQ20240110112716000248', '正常', '否'],
+				//   [9, '四大线四区1小线清洗机', 'EQ20240110112700000247', '正常', '否'],
+				//   [10, '4大线四区自动连线柜', 'EQ20240110112646000246', '正常', '否']
+				// ],
+				rowNum: 10,
+			},
+		};
+	},
+	mounted() {
+		this.timestr = switchShowTime('日');
+	},
+	watch: {
+		sjgEquipment: {
 			handler(newVal, oldVal) {
-        let outArr = this.sjgEquipment.map((item, index) => [
-          index+1,
-          `<span title=${item.name || ''}>${item.name || ''}</span>`,
-          `<span title=${item.code || ''}>${item.code || ''}</span>`,
-          item.status,
-          item.error? '是': '否'
-      ]);
-        this.config.data = outArr
-        this.$refs['eqScrollBoard'].updateRows(outArr)
-        this.timestr = switchShowTime('日')
-			}
-		}
-  }
-}
+				let outArr = this.sjgEquipment.map((item, index) => [
+					index + 1,
+					`<span title=${item.name || ''}>${item.name || ''}</span>`,
+					`<span title=${item.code || ''}>${item.code || ''}</span>`,
+					`<span><div style="${
+						item.status == '正常'
+							? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 '
+							: 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:13px 10px 0 0 '
+					}"></div>  ${item.status || ''}</span>`,
+					`<span"><div style="${
+						item.error == false
+							? 'box-shadow: 0px 0px 2px 1px #2760FF;width:6px;height:6px;border-radius: 50%;background-color: #2760FF;float:left;margin:13px 10px 0 0 '
+							: 'box-shadow: 0px 0px 2px 1px red;width:6px;height:6px;border-radius: 50%;  background-color: red;float:left;margin:13px 10px 0 0 '
+					}"></div>  ${item.error == true ? '是' : '否' || ''}</span>`,
+				]);
+				this.config.data = outArr;
+				this.$refs['eqScrollBoard'].updateRows(outArr);
+				this.timestr = switchShowTime('日');
+			},
+		},
+	},
+};
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .timeShow {
-  position: absolute;
-  top: 20px;
-  left: 170px;
+	position: absolute;
+	top: 20px;
+	left: 170px;
 }
-</style>
+</style>
--- a/src/views/databoard/deepProcessing/WorkOrderMonitoring.vue
+++ b/src/views/databoard/deepProcessing/WorkOrderMonitoring.vue
@@ -1,67 +1,88 @@
 <template>
-  <Container name="工单监控" size="middle" style="">
-    <TimePrompt class="timeShow" :timestr="timestr" />
-    <div style="padding: 5px 10px;" class="WOMonitoring">
-      <dv-scroll-board :config="config" style="width:900px;height:380px" ref='worderScrollBoard'/>
-    </div>
-  </Container>
+	<Container
+		name="工单监控"
+		size="middle"
+		style="">
+		<TimePrompt
+			class="timeShow"
+			:timestr="timestr" />
+		<div
+			style="padding: 5px 10px"
+			class="WOMonitoring">
+			<dv-scroll-board
+				:config="config"
+				style="width: 900px; height: 380px"
+				ref="worderScrollBoard" />
+		</div>
+	</Container>
 </template>
 <script>
 import Container from '../components/Container.vue';
 import TimePrompt from '../components/TimePrompt';
-import { switchShowTime } from '../utils'
-import { formatDate } from '@/utils'
+import { switchShowTime } from '../utils';
+import { formatDate } from '@/utils';
 export default {
-  name: 'WorkOrderMonitoring',
-  components: { Container, TimePrompt },
-  computed: {
-    order() {
-      return this.$store.state.websocket.workOrder
-    }
-  },
-  data() {
-    return {
-      timestr: '',
-      config: {
-        header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间','计划产量','实际产量'],
-        headerBGC: 'rgba(32, 55, 96, 0.8)',
-        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
-        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
-        columnWidth: [60, 120, 120, 60, 100, 150],
-        align: ['center'],
-        data: [],
-        rowNum:10
-      }
-    }
-  },
-  mounted(){
-    this.timestr = switchShowTime('日')
-  },
-  watch:{
-    order: {
+	name: 'WorkOrderMonitoring',
+	components: { Container, TimePrompt },
+	computed: {
+		order() {
+			return this.$store.state.websocket.workOrder;
+		},
+	},
+	data() {
+		return {
+			timestr: '',
+			config: {
+				header: [
+					'序号',
+					'工单名称',
+					'规格',
+					'产线',
+					'工单状态',
+					'计划完成时间',
+					'计划产量',
+					'实际产量',
+					'完成进度',
+				],
+				headerBGC: 'rgba(32, 55, 96, 0.8)',
+				oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+				evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+				columnWidth: [60, 120, 120, 60, 100, 150],
+				align: ['center'],
+				data: [],
+				rowNum: 10,
+			},
+		};
+	},
+	mounted() {
+		this.timestr = switchShowTime('日');
+	},
+	watch: {
+		order: {
 			handler(newVal, oldVal) {
-        let outArr = this.order.map((item, index) => [
-          index+1,
-          `<span title=${item.name || ''}>${item.name || ''}</span>`,
-          item.specifications,
-          item.lines,
-          this.getDictDatas(this.DICT_TYPE.ORDER_STATUS)[item.status]?.label,
-          formatDate(item.planFinishTime),
-          item.planQuantity,
-          item.planAssignQuantity
-      ]);
-        this.config.data = outArr
-        this.$refs['worderScrollBoard'].updateRows(outArr)
-        this.timestr = switchShowTime('日')
-			}
-		}
-  }
-}
+				let outArr = this.order.map((item, index) => [
+					index + 1,
+					`<span title=${item.name || ''}>${item.name || ''}</span>`,
+					item.specifications,
+					item.lines,
+					this.getDictDatas(this.DICT_TYPE.ORDER_STATUS)[item.status]?.label,
+					formatDate(item.planFinishTime),
+					item.planQuantity,
+					item.actualQuantity,
+					(item.progressRate * 100).toFixed(0) + '%',
+				]);
+				this.config.data = outArr;
+				this.$refs['worderScrollBoard'].updateRows(outArr);
+				this.timestr = switchShowTime('日');
+			},
+		},
+	},
+};
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .timeShow {
-  position: absolute;
-  top: 20px;
-  left: 170px;
+	position: absolute;
+	top: 20px;
+	left: 170px;
 }
-</style>
+</style>
--- a/src/views/databoard/kiln/EnergeCost.vue
+++ b/src/views/databoard/kiln/EnergeCost.vue
@@ -1,22 +1,24 @@
-<!-- 
-    filename: MaterialCost.vue
-    author: liubin
-    date: 2023-12-06 09:09:27
-    description: 
-->
-
 <template>
-	<Container name="能耗" size="middle" style="">
-		<TimePrompt class="timeShow" :timestr="timestr" />
+	<Container
+		name="能耗"
+		size="middle"
+		style="">
 		<EnergeTop />
 		<SplitLine :horizontal="true" />
-		<div class="" style="flex: 2; padding: 8px">
+		<div
+			class=""
+			style="flex: 2; padding: 8px">
 			<div
 				class="header-line"
 				style="margin: 8px 0 16px; display: flex; align-items: center">
-				<h2 class="" style="margin: 0; color: #0ee8fe; margin-right: 12px">
+				<h2
+					class=""
+					style="margin: 0; color: #0ee8fe; margin-right: 12px">
 					能耗趋势图
 				</h2>
+				<TimePrompt
+					class="timeShow"
+					:timestr="timestr" />
 				<!-- <Switcher /> -->
 				<div>
 					<!-- <span class="lgd lgd-total">总量</span> -->
@@ -32,11 +34,21 @@
 					justify-content: space-between;
 				">
 				<SelectorBtnGroup
-					:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType' :active='chartType'/>
-				<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/>
+					:options="['电耗能', '天然气I', '天然气II']"
+					@emitFun="toggleType"
+					:active="chartType" />
+				<SelectorBtnGroup
+					:options="['周', '月', '年']"
+					@emitFun="toggleDate"
+					:active="chartTime" />
 			</div>
-			<div class="chart" style="height: 200px; margin-top: 8px;">
-				<GasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/>
+			<div
+				class="chart"
+				style="height: 200px; margin-top: 8px">
+				<GasChart
+					:chartType="chartType"
+					:chartTime="chartTime"
+					@emitFun="dateUpdate" />
 			</div>
 		</div>
 	</Container>
@@ -51,7 +63,7 @@ import EnergeTop from './EnergeTop';
 import GasChart from '../components/GasChart.vue';
 import SelectorBtnGroup from '../components/SelectorBtnGroup';
 import TimePrompt from '../components/TimePrompt';
-import { switchShowTime } from '../utils'
+import { switchShowTime } from '../utils';
 export default {
 	name: 'EnergeCost',
 	components: {
@@ -61,48 +73,43 @@ export default {
 		EnergeTop,
 		GasChart,
 		SelectorBtnGroup,
-		TimePrompt
+		TimePrompt,
 	},
 	props: {},
 	data() {
 		return {
-			chartType:'电耗能',
-			chartTime:'周',
-			timestr: ''
+			chartType: '电耗能',
+			chartTime: '周',
+			timestr: '',
 		};
 	},
 	mounted() {
-    this.timestr = switchShowTime(this.chartTime)
-  },
+		this.timestr = switchShowTime(this.chartTime);
+	},
 	computed: {
 		gasInfoMsg() {
-			return this.$store.state.websocket.gasInfo
+			return this.$store.state.websocket.gasInfo;
 		},
 	},
 	methods: {
 		// 切换能源
 		toggleType(val) {
-			this.chartType = val
+			this.chartType = val;
 		},
 		// 切换时间
 		toggleDate(val) {
-			this.chartTime = val
-			this.timestr = switchShowTime(val)
+			this.chartTime = val;
+			this.timestr = switchShowTime(val);
 		},
 		// 数据更新
-    dateUpdate() {
-      this.timestr = switchShowTime(this.chartTime)
-    }
+		dateUpdate() {
+			this.timestr = switchShowTime(this.chartTime);
+		},
 	},
 };
 </script>

 <style scoped lang="scss">
-.timeShow {
-  position: absolute;
-  top: 20px;
-  left: 120px;
-}
 .lgd {
 	color: #fff;

--- a/src/views/databoard/kiln/GasHandle.vue
+++ b/src/views/databoard/kiln/GasHandle.vue
@@ -1,7 +1,11 @@
 <template>
-	<div class="gas-handle" style="flex: 2">
-		<Container name="烟气处理" size="large" style="">
-			<TimePrompt class="timeShow" :timestr="timestr" />
+	<div
+		class="gas-handle"
+		style="flex: 2">
+		<Container
+			name="烟气处理"
+			size="large"
+			style="">
 			<div
 				class=""
 				style="
@@ -24,7 +28,13 @@
 						">
 						氧气含量
 					</span>
-					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.O2_float ? (Number(exhaustGasInfo.O2_float)).toFixed(2) : ''}}%</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1">
+						{{
+							exhaustGasInfo?.O2_float
+								? Number(exhaustGasInfo.O2_float).toFixed(2)
+								: ''
+						}}%
+					</span>
 				</ShadowRect>
 				<ShadowRect>
 					<div
@@ -33,13 +43,19 @@
 							line-height: 1.24;
 							flex: 1;
 							text-align: right;
-							padding:5px 8px 5px 0;
+							padding: 5px 8px 5px 0;
 							letter-spacing: 3px;
 						">
 						<p style="margin: 0; line-height: inherit">氮氧化物</p>
 						<p style="margin: 0; line-height: inherit">排放浓度</p>
 					</div>
-					<span style="font-size: 20px; line-height: 1.24; flex: 1.2">{{exhaustGasInfo?.NOX_float ? (Number(exhaustGasInfo.NOX_float)).toFixed(2) : ''}}mg/m³</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1.2">
+						{{
+							exhaustGasInfo?.NOX_float
+								? Number(exhaustGasInfo.NOX_float).toFixed(2)
+								: ''
+						}}mg/m³
+					</span>
 				</ShadowRect>

 				<ShadowRect>
@@ -49,13 +65,19 @@
 							line-height: 1.24;
 							flex: 1;
 							text-align: right;
-							padding:5px 8px 5px 0;
+							padding: 5px 8px 5px 0;
 							letter-spacing: 3px;
 						">
 						<p style="margin: 0; line-height: inherit">二氧化硫</p>
 						<p style="margin: 0; line-height: inherit">排放浓度</p>
 					</div>
-					<span style="font-size: 20px; line-height: 1.24; flex: 1">{{exhaustGasInfo?.SO2_float ? (Number(exhaustGasInfo.SO2_float)).toFixed(2) : ''}}mg/m³</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1">
+						{{
+							exhaustGasInfo?.SO2_float
+								? Number(exhaustGasInfo.SO2_float).toFixed(2)
+								: ''
+						}}mg/m³
+					</span>
 				</ShadowRect>

 				<ShadowRect>
@@ -70,17 +92,30 @@
 						">
 						颗粒物浓度
 					</span>
-					<span style="font-size: 20px; line-height: 1.24; flex: 1.2">{{exhaustGasInfo?.dust_float ? (Number(exhaustGasInfo.dust_float)).toFixed(2) : ''}}mg/m³</span>
+					<span style="font-size: 20px; line-height: 1.24; flex: 1.2">
+						{{
+							exhaustGasInfo?.dust_float
+								? Number(exhaustGasInfo.dust_float).toFixed(2)
+								: ''
+						}}mg/m³
+					</span>
 				</ShadowRect>
 			</div>
 			<KilnLine :horizontal="true" />
-			<div class="" style="flex: 2; padding: 8px">
+			<div
+				class=""
+				style="flex: 2; padding: 8px">
 				<div
 					class="header-line"
 					style="margin-bottom: 10px; display: flex; align-items: center">
-					<h2 class="" style="margin: 5px 0; color: #0ee8fe; margin-right: 12px">
+					<h2
+						class=""
+						style="margin: 5px 0; color: #0ee8fe; margin-right: 12px">
 						烟气趋势图
 					</h2>
+					<TimePrompt
+						class="timeShow"
+						:timestr="timestr" />
 					<!-- <Switcher /> -->
 					<div>
 						<!-- <span class="lgd lgd-total">总量</span> -->
@@ -96,11 +131,21 @@
 						justify-content: space-between;
 					">
 					<SelectorBtnGroup
-						:options="['氧气含量', '二氧化硫', '氮氧化物', '颗粒物']" @emitFun='toggleType' :active='chartType'/>
-					<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' />
+						:options="['氧气含量', '二氧化硫', '氮氧化物', '颗粒物']"
+						@emitFun="toggleType"
+						:active="chartType" />
+					<SelectorBtnGroup
+						:options="['日', '周', '月', '年']"
+						@emitFun="toggleDate"
+						:active="chartTime" />
 				</div>
-				<div class="chart" style="height: 250px;margin-top: 10px;">
-					<FlueGasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/>
+				<div
+					class="chart"
+					style="height: 250px; margin-top: 10px">
+					<FlueGasChart
+						:chartType="chartType"
+						:chartTime="chartTime"
+						@emitFun="dateUpdate" />
 				</div>
 			</div>
 		</Container>
@@ -115,7 +160,7 @@ import KilnLine from '../components/line';
 import SelectorBtnGroup from '../components/SelectorBtnGroup';
 import FlueGasChart from '../components/FlueGasChart';
 import TimePrompt from '../components/TimePrompt';
-import { switchShowTime } from '../utils'
+import { switchShowTime } from '../utils';

 export default {
 	name: 'GasHandle',
@@ -125,49 +170,44 @@ export default {
 		KilnLine,
 		SelectorBtnGroup,
 		FlueGasChart,
-		TimePrompt
+		TimePrompt,
 	},
 	props: {},
 	data() {
 		return {
-			chartType:'氧气含量',
-			chartTime:'日',
-			timestr: ''
+			chartType: '氧气含量',
+			chartTime: '日',
+			timestr: '',
 		};
 	},
 	computed: {
 		exhaustGasInfo() {
-			return this.$store.state.websocket.exhaustGasInfo
-		}
+			return this.$store.state.websocket.exhaustGasInfo;
+		},
 	},
 	mounted() {
-    this.timestr = switchShowTime(this.chartTime)
-  },
+		this.timestr = switchShowTime(this.chartTime);
+	},
 	methods: {
 		// 烟气
 		toggleType(val) {
-			console.log('烟气' + val)
-			this.chartType = val
+			console.log('烟气' + val);
+			this.chartType = val;
 		},
 		// 切换时间
 		toggleDate(val) {
-			this.chartTime = val
-			this.timestr = switchShowTime(val)
+			this.chartTime = val;
+			this.timestr = switchShowTime(val);
 		},
 		// 数据更新
-    dateUpdate() {
-      this.timestr = switchShowTime(this.chartTime)
-    }
+		dateUpdate() {
+			this.timestr = switchShowTime(this.chartTime);
+		},
 	},
 };
 </script>

 <style scoped lang="scss">
-.timeShow {
-  position: absolute;
-  top: 20px;
-  left: 170px;
-}
 .gas-handle {
 }

--- a/src/views/databoard/kiln/MaterialCost.vue
+++ b/src/views/databoard/kiln/MaterialCost.vue
@@ -3,6 +3,9 @@
 		name="原料用量统计"
 		size="middle"
 		style="">
+		<TimePrompt
+			class="timeShow"
+			:timestr="timestr" />
 		<div style="flex: 1; display: flex; gap: 8px; flex-direction: column">
 			<div
 				class="absolute"
@@ -10,8 +13,8 @@
 					flex: 2;
 					padding: 12px 12px 0 12px;
 					display: grid;
-					grid-template-columns: repeat(2, 1fr);
-					grid-auto-rows: repeat(4, 1fr);
+					grid-template-columns: repeat(3, 1fr);
+					grid-auto-rows: repeat(3, 1fr);
 					gap: 8px;
 				">
 				<ShadowRect
@@ -22,7 +25,8 @@
 						class="material"
 						style="
 							flex: 1;
-							padding-bottom: 3px;
+							padding-bottom: 18px;
+							padding-top: 18px;
 							display: flex;
 							flex-direction: column;
 							gap: 4px;
@@ -53,20 +57,33 @@
 <script>
 import Container from '../components/Container';
 import ShadowRect from '../components/ShadowRect.vue';
+import TimePrompt from '../components/TimePrompt';
+import { switchShowTime } from '../utils';
 export default {
 	name: 'MaterialCost',
-	components: { Container, ShadowRect },
+	components: { Container, ShadowRect, TimePrompt },
 	props: {},
 	data() {
-		return {};
+		return {
+			timestr: '',
+		};
 	},
 	computed: {
 		materialMsg() {
 			return this.$store.state.websocket.material;
 		},
 	},
+	mounted() {
+		this.timestr = switchShowTime('日');
+	},
 	methods: {},
 };
 </script>

-<style scoped lang="scss"></style>
+<style lang="scss" scoped>
+.timeShow {
+	position: absolute;
+	top: 20px;
+	left: 210px;
+}
+</style>
--- a/src/views/databoard/utils/index.js
+++ b/src/views/databoard/utils/index.js
@@ -29,6 +29,8 @@ export const switchShowTime = (type) => {
      }
      if (lastMonth === 12) {
        startYear = currentYear - 1
+      }else{
+        startYear = currentYear
      }
      startTime = startYear+'.'+lastMonth+'.'+day
      endTime = currentYear+'.'+(nowTime.getMonth()+1)+'.28'
--- a/src/views/databoard/wholePlant/OrderStatus.vue
+++ b/src/views/databoard/wholePlant/OrderStatus.vue
@@ -1,70 +1,94 @@
 <template>
-  <div style="flex: 1;" class="orderContainer">
-    <Container name="订单完成情况" size="small" style="">
-      <TimePrompt class="timeShow" :timestr="timestr" />
-      <div style="padding: 5px 10px;">
-        <dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/>
-      </div>
-    </Container>
-  </div>
+	<div
+		style="flex: 1"
+		class="orderContainer">
+		<Container
+			name="订单完成情况"
+			size="small"
+			style="">
+			<TimePrompt
+				class="timeShow"
+				:timestr="timestr" />
+			<div style="padding: 5px 10px">
+				<dv-scroll-board
+					:config="config"
+					style="width: 575px; height: 230px"
+					ref="orderScrollBoard" />
+			</div>
+		</Container>
+	</div>
 </template>
 <script>
-import Container from '../components/Container'
+import Container from '../components/Container';
 import TimePrompt from '../components/TimePrompt';
-import { formatDate } from '@/utils'
-import { switchShowTime } from '../utils'
+import { formatDate } from '@/utils';
+import { switchShowTime } from '../utils';
 export default {
-  name: 'OrderStatus',
-  components: { Container, TimePrompt },
-  computed: {
-    order() {
-      return this.$store.state.websocket.order
-    }
-  },
-  data() {
-    return {
-      timestr: '',
-      config: {
-        header: ['上线时间', '客户名称', '规格','完成度'],
-        headerBGC: 'rgba(32, 55, 96, 0.8)',
-        oddRowBGC: 'rgba(32, 55, 96, 0.8)',
-        evenRowBGC: 'rgba(14, 32, 62, 0.8)',
-        columnWidth: [155, 160, 150],
-        data: [],
-        rowNum: 6
-      }
-    }
-  },
-  mounted() {
-    this.timestr = switchShowTime('日')
-  },
-  watch:{
-    order:{
-      handler() {
-        let outArr = this.order.map((item) => [
-        formatDate(item.planStartTime) || '',
-          `<span title=${item.customerName || ''}>${item.customerName || ''}</span>`,
-          `<span title=${item.specifications || ''}>${item.specifications || ''}</span>`,
-          `<span style="display:inline-block;width:60px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span>
+	name: 'OrderStatus',
+	components: { Container, TimePrompt },
+	computed: {
+		order() {
+			return this.$store.state.websocket.order;
+		},
+	},
+	data() {
+		return {
+			timestr: '',
+			config: {
+				header: ['上线时间', '客户名称', '规格', '完成度'],
+				headerBGC: 'rgba(32, 55, 96, 0.8)',
+				oddRowBGC: 'rgba(32, 55, 96, 0.8)',
+				evenRowBGC: 'rgba(14, 32, 62, 0.8)',
+				columnWidth: [155, 160, 150],
+				data: [],
+				rowNum: 6,
+			},
+		};
+	},
+	mounted() {
+		this.timestr = switchShowTime('日');
+	},
+	watch: {
+		order: {
+			handler() {
+				let outArr = this.order.map((item) => [
+					formatDate(item.planStartTime) || '',
+					`<span title=${item.customerName || ''}>${
+						item.customerName || ''
+					}</span>`,
+					`<span title=${item.specifications || ''}>${
+						item.specifications || ''
+					}</span>`,
+					`<span style="display:inline-block;width:60px;">${
+						item.completeRate
+							? (item.completeRate * 100).toFixed(2) + '%'
+							: '0%'
+					}</span>
          <div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
            <svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
              <circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
-              <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${item.completeRate?item.completeRate.toFixed(2)*37.68+','+((1-item.completeRate.toFixed(2))*37.68):(0+','+37.68)}"/>
+              <circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${
+								item.completeRate
+									? item.completeRate.toFixed(2) * 37.68 +
+									  ',' +
+									  (1 - item.completeRate.toFixed(2)) * 37.68
+									: 0 + ',' + 37.68
+							}"/>
            </svg>
-          </div>`
-      ]);
-      this.config.data = outArr
-      this.$refs['orderScrollBoard'].updateRows(outArr)
-      this.timestr = switchShowTime('日')
-      }
-    }
-  }
-}
+          </div>`,
+				]);
+				this.config.data = outArr;
+				this.$refs['orderScrollBoard'].updateRows(outArr);
+				this.timestr = switchShowTime('日');
+			},
+		},
+	},
+};
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .timeShow {
-  position: absolute;
-  top: 20px;
-  left: 210px;
+	position: absolute;
+	top: 20px;
+	left: 210px;
 }
-</style>
+</style>
--- a/src/websocket/wsInterface.js
+++ b/src/websocket/wsInterface.js
@@ -111,7 +111,10 @@ const mesEN = new WsConnect(
    if (msgData == null) return;
    switch (msgData?.type) {
      case "EnergyInfo": {
-        store.dispatch({ type: "websocket/setEnergyInfo", payload: msgData.data })
+        let keys = Object.keys(msgData.data)
+        if (keys.includes('elecQty1') || keys.includes('waterQty')) {
+          store.dispatch({ type: "websocket/setEnergyInfo", payload: msgData.data })
+        }
        break;
      }
      case "EnergyTrend": {