驾驶舱
This commit is contained in:
		
							
								
								
									
										8
									
								
								.env.dev
									
									
									
									
									
								
							
							
						
						
									
										8
									
								
								.env.dev
									
									
									
									
									
								
							| @@ -12,15 +12,15 @@ ENV = 'development' | |||||||
| VUE_APP_TITLE = MES系统 | VUE_APP_TITLE = MES系统 | ||||||
|  |  | ||||||
| # 芋道管理系统/开发环境 | # 芋道管理系统/开发环境 | ||||||
| VUE_APP_BASE_API = 'http://192.168.0.33:48082' | # 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://10.70.2.2:8080' | ||||||
| # 积木报表指向地址 | # 积木报表指向地址 | ||||||
| VUE_APP_JIMU_API = 'http://192.168.0.33:48082' | VUE_APP_JIMU_API = 'http://192.168.0.33:48082' | ||||||
|  |  | ||||||
| # socket地址(现场) | # socket地址(现场) | ||||||
| # VUE_APP_Socket_API = 'ws://10.70.2.2:8080' | VUE_APP_Socket_API = 'ws://10.70.2.2:8080' | ||||||
| # socket地址(公司线上) | # socket地址(公司线上) | ||||||
| VUE_APP_Socket_API = 'ws://192.168.0.33:48082' | # VUE_APP_Socket_API = 'ws://192.168.0.33:48082' | ||||||
| # socket dcs地址(只有现场) | # socket dcs地址(只有现场) | ||||||
| VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081' | VUE_APP_Socket_Dcs_API = 'ws://10.70.180.10:8081' | ||||||
|  |  | ||||||
|   | |||||||
| @@ -1,22 +1,26 @@ | |||||||
| <template> | <template> | ||||||
| 	<div> | 	<div> | ||||||
| 		<NotMsg v-show="notMsg"/> | 		<NotMsg v-show="notMsg" /> | ||||||
| 		<div id='gasChart' class="gas-chart" style="width:600px;height:200px;" v-show='!notMsg'></div> | 		<div | ||||||
|  | 			id="gasChart" | ||||||
|  | 			class="gas-chart" | ||||||
|  | 			style="width: 600px; height: 200px" | ||||||
|  | 			v-show="!notMsg"></div> | ||||||
| 	</div> | 	</div> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
| <script> | <script> | ||||||
| import * as echarts from 'echarts'; | import * as echarts from 'echarts'; | ||||||
| import resize from './../mixins/resize' | import resize from './../mixins/resize'; | ||||||
| import NotMsg from './../components/NotMsg' | import NotMsg from './../components/NotMsg'; | ||||||
|  |  | ||||||
| export default { | export default { | ||||||
| 	name: 'GasChart', | 	name: 'GasChart', | ||||||
| 	mixins: [resize], | 	mixins: [resize], | ||||||
| 	components:{ NotMsg }, | 	components: { NotMsg }, | ||||||
| 	props: { | 	props: { | ||||||
| 		chartType: '', // 能源类型 | 		chartType: '', // 能源类型 | ||||||
| 		chartTime: '' | 		chartTime: '', | ||||||
| 	}, | 	}, | ||||||
| 	data() { | 	data() { | ||||||
| 		const colors = [ | 		const colors = [ | ||||||
| @@ -31,159 +35,170 @@ export default { | |||||||
| 		]; | 		]; | ||||||
| 		return { | 		return { | ||||||
| 			chart: null, | 			chart: null, | ||||||
| 			notMsg:false | 			notMsg: false, | ||||||
| 		}; | 		}; | ||||||
| 	}, | 	}, | ||||||
| 	computed: { | 	computed: { | ||||||
| 		gasChartMsg() { | 		gasChartMsg() { | ||||||
| 			return this.$store.state.websocket.sumGasInfo | 			return this.$store.state.websocket.sumGasInfo; | ||||||
| 		}, | 		}, | ||||||
| 		energyWeekTrend() { | 		energyWeekTrend() { | ||||||
| 			return this.$store.state.websocket.energyWeekTrend | 			return this.$store.state.websocket.energyWeekTrend; | ||||||
| 		}, | 		}, | ||||||
| 		energyMonthTrend() { | 		energyMonthTrend() { | ||||||
| 			return this.$store.state.websocket.energyMonthTrend | 			return this.$store.state.websocket.energyMonthTrend; | ||||||
| 		}, | 		}, | ||||||
| 		energyYearTrend() { | 		energyYearTrend() { | ||||||
| 			return this.$store.state.websocket.energyYearTrend | 			return this.$store.state.websocket.energyYearTrend; | ||||||
| 		} | 		}, | ||||||
| 	}, | 	}, | ||||||
| 	watch: { | 	watch: { | ||||||
| 		energyWeekTrend: {// 监听周电能,更新图 | 		energyWeekTrend: { | ||||||
|  | 			// 监听周电能,更新图 | ||||||
| 			handler(newVal, oldVal) { | 			handler(newVal, oldVal) { | ||||||
| 				if (this.chartTime === '周' && this.chartType === '电耗能') { | 				if (this.chartTime === '周' && this.chartType === '电耗能') { | ||||||
| 					this.updateChart() | 					this.updateChart(); | ||||||
| 					this.$emit('emitFun') | 					this.$emit('emitFun'); | ||||||
| 				} | 				} | ||||||
| 			} | 			}, | ||||||
| 		}, | 		}, | ||||||
| 		energyMonthTrend: {// 监听月电能,更新图 | 		energyMonthTrend: { | ||||||
|  | 			// 监听月电能,更新图 | ||||||
| 			handler(newVal, oldVal) { | 			handler(newVal, oldVal) { | ||||||
| 				if (this.chartTime === '月' && this.chartType === '电耗能') { | 				if (this.chartTime === '月' && this.chartType === '电耗能') { | ||||||
| 					this.updateChart() | 					this.updateChart(); | ||||||
| 					this.$emit('emitFun') | 					this.$emit('emitFun'); | ||||||
| 				} | 				} | ||||||
| 			} | 			}, | ||||||
| 		}, | 		}, | ||||||
| 		energyYearTrend: {// 监听年电能,更新图 | 		energyYearTrend: { | ||||||
|  | 			// 监听年电能,更新图 | ||||||
| 			handler(newVal, oldVal) { | 			handler(newVal, oldVal) { | ||||||
| 				if (this.chartTime === '年' && this.chartType === '电耗能') { | 				if (this.chartTime === '年' && this.chartType === '电耗能') { | ||||||
| 					this.updateChart() | 					this.updateChart(); | ||||||
| 					this.$emit('emitFun') | 					this.$emit('emitFun'); | ||||||
| 				} | 				} | ||||||
| 			} | 			}, | ||||||
| 		}, | 		}, | ||||||
| 		gasChartMsg: {// 监听天然气,更新图 | 		gasChartMsg: { | ||||||
|  | 			// 监听天然气,更新图 | ||||||
| 			handler(newVal, oldVal) { | 			handler(newVal, oldVal) { | ||||||
| 				if (this.chartType === '天然气I' || this.chartType === '天然气II') { | 				if (this.chartType === '天然气I' || this.chartType === '天然气II') { | ||||||
| 					this.updateChart() | 					this.updateChart(); | ||||||
| 					this.$emit('emitFun') | 					this.$emit('emitFun'); | ||||||
| 				} | 				} | ||||||
| 			} | 			}, | ||||||
| 		}, | 		}, | ||||||
| 		chartTime: {// 监听时间变化,更新图 | 		chartTime: { | ||||||
|  | 			// 监听时间变化,更新图 | ||||||
| 			handler(newVal, oldVal) { | 			handler(newVal, oldVal) { | ||||||
| 				this.updateChart() | 				this.updateChart(); | ||||||
| 			} | 			}, | ||||||
| 		}, | 		}, | ||||||
| 		chartType: {// 监听能源类型变化,更新图 | 		chartType: { | ||||||
|  | 			// 监听能源类型变化,更新图 | ||||||
| 			handler(newVal, oldVal) { | 			handler(newVal, oldVal) { | ||||||
| 				this.updateChart() | 				this.updateChart(); | ||||||
| 			} | 			}, | ||||||
| 		} | 		}, | ||||||
| 	}, | 	}, | ||||||
| 	mounted() { | 	mounted() { | ||||||
| 		this.$el.addEventListener('resize', () => { | 		this.$el.addEventListener('resize', () => { | ||||||
| 			console.log('resziing.....'); | 			console.log('resziing.....'); | ||||||
| 		}); | 		}); | ||||||
| 		this.updateChart() | 		this.updateChart(); | ||||||
| 	}, | 	}, | ||||||
| 	methods: { | 	methods: { | ||||||
| 		updateChart() { | 		updateChart() { | ||||||
| 			let gasName  = '' | 			let gasName = ''; | ||||||
| 			const colors = ['#FFCB59']; | 			const colors = ['#FFCB59']; | ||||||
| 			let temp = [] | 			let temp = []; | ||||||
| 			let seriesData = [] | 			let seriesData = []; | ||||||
| 			let xData = [] | 			let xData = []; | ||||||
| 			let yData = [] | 			let yData = []; | ||||||
| 			switch (this.chartType) { | 			switch (this.chartType) { | ||||||
| 				case '电耗能':{ | 				case '电耗能': { | ||||||
| 					gasName = '电耗能' | 					gasName = '电耗能'; | ||||||
| 					if (this.chartTime === '周') { | 					if (this.chartTime === '周') { | ||||||
| 						temp = this.energyWeekTrend || [] | 						temp = this.energyWeekTrend || []; | ||||||
| 					}else if(this.chartTime === '月') { | 					} else if (this.chartTime === '月') { | ||||||
| 						temp = this.energyMonthTrend || [] | 						temp = this.energyMonthTrend || []; | ||||||
| 					}else{ | 					} else { | ||||||
| 						temp = this.energyYearTrend || [] | 						temp = this.energyYearTrend || []; | ||||||
| 					} | 					} | ||||||
| 					temp && temp.map(i => { | 					temp && | ||||||
| 						xData.push(i.time) | 						temp.map((i) => { | ||||||
| 						yData.push(i.qty) | 							xData.push(i.time); | ||||||
| 					}) | 							yData.push(i.qty); | ||||||
|  | 						}); | ||||||
| 					break; | 					break; | ||||||
| 				} | 				} | ||||||
| 				case '天然气I':{ | 				case '天然气I': { | ||||||
| 					if (this.chartTime === '周') { | 					if (this.chartTime === '周') { | ||||||
| 						yData = this.gasChartMsg.hisSumGas1For7Day || [] | 						yData = this.gasChartMsg.hisSumGas1For7Day || []; | ||||||
| 					}else if(this.chartTime === '月') { | 					} else if (this.chartTime === '月') { | ||||||
| 						yData = this.gasChartMsg.sumGas1ForMonth || [] | 						yData = this.gasChartMsg.sumGas1ForMonth || []; | ||||||
| 					}else{ | 					} else { | ||||||
| 						yData = this.gasChartMsg.sumGas1ForYear || [] | 						yData = this.gasChartMsg.sumGas1ForYear || []; | ||||||
| 					} | 					} | ||||||
| 					gasName = '天然气I' | 					gasName = '天然气I'; | ||||||
| 					xData = this.getXdata() | 					xData = this.getXdata(); | ||||||
| 					break; | 					break; | ||||||
| 				} | 				} | ||||||
| 				default: | 				default: | ||||||
| 				gasName = '天然气II' | 					gasName = '天然气II'; | ||||||
| 				if (this.chartTime === '周') { | 					if (this.chartTime === '周') { | ||||||
| 						yData = this.gasChartMsg.hisSumGas2For7Day || [] | 						yData = this.gasChartMsg.hisSumGas2For7Day || []; | ||||||
| 					}else if(this.chartTime === '月') { | 					} else if (this.chartTime === '月') { | ||||||
| 						yData = this.gasChartMsg.sumGas2ForMonth || [] | 						yData = this.gasChartMsg.sumGas2ForMonth || []; | ||||||
| 					}else{ | 					} else { | ||||||
| 						yData = this.gasChartMsg.sumGas2ForYear || [] | 						yData = this.gasChartMsg.sumGas2ForYear || []; | ||||||
| 					} | 					} | ||||||
| 				xData = this.getXdata() | 					xData = this.getXdata(); | ||||||
| 			} | 			} | ||||||
| 			if (yData.length === 0) { | 			if (yData.length === 0) { | ||||||
|          this.notMsg = true | 				this.notMsg = true; | ||||||
|          return | 				return; | ||||||
|       } else { | 			} else { | ||||||
|         this.notMsg = false | 				this.notMsg = false; | ||||||
|       } | 			} | ||||||
| 			if (yData.length == 0) { | 			if (yData.length == 0) { | ||||||
| 				seriesData = [] | 				seriesData = []; | ||||||
| 			}else { | 			} else { | ||||||
| 				seriesData = [{ | 				yData = yData.map((item) => { | ||||||
| 					name: gasName, | 					return (item = Number(item.toFixed(2))); | ||||||
| 					data: yData, | 				}); | ||||||
| 					type: "line", | 				seriesData = [ | ||||||
| 					areaStyle: { | 					{ | ||||||
|  | 						name: gasName, | ||||||
|  | 						data: yData, | ||||||
|  | 						type: 'line', | ||||||
|  | 						areaStyle: { | ||||||
| 							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | 							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | ||||||
| 							{ offset: 0, color: '#FFCB59' + "40" }, | 								{ offset: 0, color: '#FFCB59' + '40' }, | ||||||
| 							{ offset: 0.5, color: '#FFCB59' + "20" }, | 								{ offset: 0.5, color: '#FFCB59' + '20' }, | ||||||
| 							{ offset: 1, color: '#FFCB59' + "00" }, | 								{ 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 ( | 			if ( | ||||||
|         this.chart !== null && | 				this.chart !== null && | ||||||
|         this.chart !== '' && | 				this.chart !== '' && | ||||||
|         this.chart !== undefined | 				this.chart !== undefined | ||||||
|       ) { | 			) { | ||||||
|         this.chart.dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例 | 				this.chart.dispose(); // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例 | ||||||
|       } | 			} | ||||||
| 			this.chart = echarts.init(document.getElementById('gasChart')); | 			this.chart = echarts.init(document.getElementById('gasChart')); | ||||||
| 			var option = { | 			var option = { | ||||||
| 				color: colors, | 				color: colors, | ||||||
| @@ -204,7 +219,7 @@ export default { | |||||||
| 					}, | 					}, | ||||||
| 				}, | 				}, | ||||||
| 				yAxis: { | 				yAxis: { | ||||||
| 					name: this.chartType === '电耗能'?'单位kwh':'单位Nm³', | 					name: this.chartType === '电耗能' ? '单位kwh' : '单位Nm³', | ||||||
| 					nameTextStyle: { | 					nameTextStyle: { | ||||||
| 						color: '#fff', | 						color: '#fff', | ||||||
| 						fontSize: 10, | 						fontSize: 10, | ||||||
| @@ -230,10 +245,10 @@ export default { | |||||||
| 				series: seriesData, | 				series: seriesData, | ||||||
| 				tooltip: { | 				tooltip: { | ||||||
| 					trigger: 'axis', | 					trigger: 'axis', | ||||||
| 					className: "gas-tooltip" | 					className: 'gas-tooltip', | ||||||
| 				}, | 				}, | ||||||
| 			} | 			}; | ||||||
| 			option && this.chart.setOption(option) | 			option && this.chart.setOption(option); | ||||||
| 		}, | 		}, | ||||||
| 		getXdata() { | 		getXdata() { | ||||||
| 			const today = new Date(); | 			const today = new Date(); | ||||||
| @@ -242,31 +257,39 @@ export default { | |||||||
| 			let days = 30; | 			let days = 30; | ||||||
| 			if (this.chartTime === '周') { | 			if (this.chartTime === '周') { | ||||||
| 				return Array(7) | 				return Array(7) | ||||||
| 						.fill(1) | 					.fill(1) | ||||||
| 						.map((_, index) => { | 					.map((_, index) => { | ||||||
| 							const today = new Date(); | 						const today = new Date(); | ||||||
| 							const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000; | 						const dtimestamp = today - (index + 1) * 24 * 60 * 60 * 1000; | ||||||
| 							return `${new Date(dtimestamp).getMonth()+1}.${new Date(dtimestamp).getDate()}`;}).reverse() | 						return `${new Date(dtimestamp).getMonth() + 1}.${new Date( | ||||||
| 			}else if (this.chartTime == "月") { | 							dtimestamp | ||||||
|  | 						).getDate()}`; | ||||||
|  | 					}) | ||||||
|  | 					.reverse(); | ||||||
|  | 			} else if (this.chartTime == '月') { | ||||||
| 				if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) { | 				if (currentMonth in [1, 3, 5, 7, 8, 10, 12]) { | ||||||
| 					days = 31; | 					days = 31; | ||||||
| 				} else if (currentMonth == 2) { | 				} else if (currentMonth == 2) { | ||||||
| 					days = this.isLeapYear(currentYear) ? 29 : 28; | 					days = this.isLeapYear(currentYear) ? 29 : 28; | ||||||
| 				} | 				} | ||||||
| 				return Array(days) | 				return Array(days) | ||||||
| 						.fill(1) | 					.fill(1) | ||||||
| 						.map((_, index) => { | 					.map((_, index) => { | ||||||
| 							return `${currentMonth}.${days - index}`;}).reverse() | 						return `${currentMonth}.${days - index}`; | ||||||
|  | 					}) | ||||||
|  | 					.reverse(); | ||||||
| 			} else { | 			} else { | ||||||
| 				return Array(12) | 				return Array(12) | ||||||
| 						.fill(1) | 					.fill(1) | ||||||
| 						.map((_, index) => { | 					.map((_, index) => { | ||||||
| 							return `${12 - index}`;}).reverse() | 						return `${12 - index}`; | ||||||
|  | 					}) | ||||||
|  | 					.reverse(); | ||||||
| 			} | 			} | ||||||
| 		}, | 		}, | ||||||
| 		isLeapYear(year) { | 		isLeapYear(year) { | ||||||
| 			return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0); | 			return year % 400 == 0 || (year % 4 == 0 && year % 100 != 0); | ||||||
| 		} | 		}, | ||||||
| 	}, | 	}, | ||||||
| }; | }; | ||||||
| </script> | </script> | ||||||
| @@ -278,12 +301,12 @@ export default { | |||||||
| } | } | ||||||
| </style> | </style> | ||||||
| <style> | <style> | ||||||
|   .gas-tooltip { | .gas-tooltip { | ||||||
|     background: #0a2b4f77 !important; | 	background: #0a2b4f77 !important; | ||||||
|     border: none !important; | 	border: none !important; | ||||||
|     backdrop-filter: blur(12px); | 	backdrop-filter: blur(12px); | ||||||
|   } | } | ||||||
|   .gas-tooltip * { | .gas-tooltip * { | ||||||
|     color: #fff !important; | 	color: #fff !important; | ||||||
|   } | } | ||||||
| </style> | </style> | ||||||
|   | |||||||
| @@ -1,68 +1,89 @@ | |||||||
| <template> | <template> | ||||||
| 	<div> | 	<div> | ||||||
| 		<NotMsg v-show="notMsg"/> | 		<NotMsg v-show="notMsg" /> | ||||||
| 		<div id="israChart" class="isra-chart" style="width:600px;height:390px;" v-show='!notMsg'></div> | 		<div | ||||||
|  | 			id="israChart" | ||||||
|  | 			class="isra-chart" | ||||||
|  | 			style="width: 600px; height: 390px" | ||||||
|  | 			v-show="!notMsg"></div> | ||||||
| 	</div> | 	</div> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
| <script> | <script> | ||||||
| import * as echarts from 'echarts'; | import * as echarts from 'echarts'; | ||||||
| import resize from './../mixins/resize' | import resize from './../mixins/resize'; | ||||||
| import NotMsg from './../components/NotMsg' | import NotMsg from './../components/NotMsg'; | ||||||
|  |  | ||||||
| export default { | export default { | ||||||
| 	name: 'ISRAChart', | 	name: 'ISRAChart', | ||||||
| 	mixins: [resize], | 	mixins: [resize], | ||||||
| 	components:{ NotMsg }, | 	components: { NotMsg }, | ||||||
| 	props: {}, | 	props: {}, | ||||||
| 	data() { | 	data() { | ||||||
| 		return { | 		return { | ||||||
| 			chart: null, | 			chart: null, | ||||||
| 			notMsg:true, | 			notMsg: true, | ||||||
| 			colors:['#2760ff', '#518eec', '#0ee8e4', '#ddb523'], | 			colors: ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'], | ||||||
| 			chartData: [] | 			chartData: [], | ||||||
| 		}; | 		}; | ||||||
| 	}, | 	}, | ||||||
| 	activated() { | 	activated() {}, | ||||||
| 	}, |  | ||||||
| 	computed: { | 	computed: { | ||||||
| 		israChartMsg() { | 		israChartMsg() { | ||||||
| 			return this.$store.state.websocket.israKiln | 			return this.$store.state.websocket.israKiln; | ||||||
| 		} | 		}, | ||||||
| 	}, | 	}, | ||||||
| 	watch: { | 	watch: { | ||||||
| 		israChartMsg: { | 		israChartMsg: { | ||||||
| 			handler(newVal, oldVal) { | 			handler(newVal, oldVal) { | ||||||
| 				this.chartData = newVal || [] | 				this.chartData = newVal || []; | ||||||
| 				this.updateChart() | 				this.updateChart(); | ||||||
| 				this.$emit('emitFun') | 				this.$emit('emitFun'); | ||||||
| 			} | 			}, | ||||||
| 		} | 		}, | ||||||
| 	}, | 	}, | ||||||
| 	methods: { | 	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() { | 		updateChart() { | ||||||
| 			console.log('update') | 			console.log('update'); | ||||||
| 			let num = 0 | 			let num = 0; | ||||||
| 			this.chartData && this.chartData.length > 0 && this.chartData.map(i => { | 			this.chartData && | ||||||
| 				num+=i.num | 				this.chartData.length > 0 && | ||||||
| 			}) | 				this.chartData.map((i) => { | ||||||
|  | 					num += i.num; | ||||||
|  | 				}); | ||||||
| 			if ( | 			if ( | ||||||
|         this.chart !== null && | 				this.chart !== null && | ||||||
|         this.chart !== '' && | 				this.chart !== '' && | ||||||
|         this.chart !== undefined | 				this.chart !== undefined | ||||||
|       ) { | 			) { | ||||||
|         this.chart.dispose() | 				this.chart.dispose(); | ||||||
|       } | 			} | ||||||
| 			if (this.chartData && this.chartData.length > 0) { | 			if (this.chartData && this.chartData.length > 0) { | ||||||
|          this.notMsg = false | 				this.notMsg = false; | ||||||
|       } else { | 			} else { | ||||||
|         this.notMsg = true | 				this.notMsg = true; | ||||||
| 				return | 				return; | ||||||
|       } | 			} | ||||||
| 			this.chart = echarts.init(document.getElementById('israChart')); | 			this.chart = echarts.init(document.getElementById('israChart')); | ||||||
| 			var option = { | 			var option = { | ||||||
| 				color:this.colors, | 				color: this.colors, | ||||||
| 				title:{ | 				title: { | ||||||
| 					text: num, | 					text: num, | ||||||
| 					subtext: '总数', | 					subtext: '总数', | ||||||
| 					top: '32%', | 					top: '32%', | ||||||
| @@ -81,55 +102,92 @@ export default { | |||||||
| 					bottom: '2%', | 					bottom: '2%', | ||||||
| 					left: 'center', | 					left: 'center', | ||||||
| 					itemWidth: 18, | 					itemWidth: 18, | ||||||
| 					itemHeight:18, | 					itemHeight: 18, | ||||||
| 					icon: 'circle', | 					icon: 'circle', | ||||||
| 					textStyle: { | 					textStyle: { | ||||||
| 						color: '#fff' | 						color: '#fff', | ||||||
| 					}, | 					}, | ||||||
| 					data:this.chartData && this.chartData.length > 0 && this.chartData.map((item,index)=>({ | 					data: | ||||||
| 						name:item.name, | 						this.chartData && | ||||||
| 						itemStyle:{ | 						this.chartData.length > 0 && | ||||||
| 							color: this.colors[index%4] | 						this.chartData.map((item, index) => ({ | ||||||
| 						} | 							name: item.name, | ||||||
| 					})) | 							itemStyle: { | ||||||
|  | 								color: this.colors[index % 4], | ||||||
|  | 							}, | ||||||
|  | 						})), | ||||||
| 				}, | 				}, | ||||||
| 				series:[{ | 				series: [ | ||||||
|  | 					{ | ||||||
| 						name: 'ISRA缺陷检测', | 						name: 'ISRA缺陷检测', | ||||||
| 						type: 'pie', | 						type: 'pie', | ||||||
| 						center: ['50%', '40%'], | 						center: ['50%', '40%'], | ||||||
| 						radius: ['45%', '70%'], | 						radius: ['45%', '70%'], | ||||||
| 						avoidLabelOverlap: true, | 						avoidLabelOverlap: true, | ||||||
|  | 						// label: { | ||||||
|  | 						// 	show: true, | ||||||
|  | 						// }, | ||||||
|  | 						// labelLine: { | ||||||
|  | 						// 	show: true, | ||||||
|  | 						// }, | ||||||
| 						label: { | 						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: { | 						labelLine: { | ||||||
| 							show: true, | 							show: true, | ||||||
|  | 							length: 25, | ||||||
|  | 							length2: 10, | ||||||
| 						}, | 						}, | ||||||
| 						data: this.chartData && this.chartData.length > 0 && this.chartData.map((item, index) => ({ | 						data: | ||||||
| 						name:item.name, | 							this.chartData && | ||||||
| 						value: item.num, | 							this.chartData.length > 0 && | ||||||
| 						itemStyle:{ | 							this.chartData.map((item, index) => ({ | ||||||
| 							color:{ | 								name: item.name, | ||||||
| 								type: 'linear', | 								value: item.num, | ||||||
| 								x: 1, | 								label: { | ||||||
| 								y: 1, | 									color: this.colors[index % 4], | ||||||
| 								x2: 0, | 								}, | ||||||
| 								y2: 0, | 								itemStyle: { | ||||||
| 								global: false, | 									color: { | ||||||
| 								colorStops:[ | 										type: 'linear', | ||||||
| 									{offset: 0,color: this.colors[index%4]}, | 										x: 1, | ||||||
| 									{offset: 1,color: this.colors[index%4]+'33'} | 										y: 1, | ||||||
| 								] | 										x2: 0, | ||||||
| 							} | 										y2: 0, | ||||||
| 						} | 										global: false, | ||||||
| 					}))}], | 										colorStops: [ | ||||||
| 					tooltip: { | 											{ offset: 0, color: this.colors[index % 4] }, | ||||||
| 						trigger: 'item', | 											{ offset: 1, color: this.colors[index % 4] + '33' }, | ||||||
| 						className: "isra-chart-tooltip" | 										], | ||||||
|  | 									}, | ||||||
|  | 								}, | ||||||
|  | 							})), | ||||||
| 					}, | 					}, | ||||||
| 			} | 				], | ||||||
|  | 				tooltip: { | ||||||
|  | 					trigger: 'item', | ||||||
|  | 					className: 'isra-chart-tooltip', | ||||||
|  | 				}, | ||||||
|  | 			}; | ||||||
| 			this.chart.setOption(option); | 			this.chart.setOption(option); | ||||||
| 		} | 		}, | ||||||
| 	}, | 	}, | ||||||
| }; | }; | ||||||
| </script> | </script> | ||||||
| @@ -141,12 +199,12 @@ export default { | |||||||
| } | } | ||||||
| </style> | </style> | ||||||
| <style> | <style> | ||||||
|   .isra-chart-tooltip { | .isra-chart-tooltip { | ||||||
|     background: #0a2b4f77 !important; | 	background: #0a2b4f77 !important; | ||||||
|     border: none !important; | 	border: none !important; | ||||||
|     backdrop-filter: blur(12px); | 	backdrop-filter: blur(12px); | ||||||
|   } | } | ||||||
|   .isra-chart-tooltip * { | .isra-chart-tooltip * { | ||||||
|     color: #fff !important; | 	color: #fff !important; | ||||||
|   } | } | ||||||
| </style> | </style> | ||||||
|   | |||||||
| @@ -1,77 +1,93 @@ | |||||||
| <template> | <template> | ||||||
|   <div style="flex: 1;"> | 	<div style="flex: 1"> | ||||||
|     <Container name="设备报警" size="middle" style=""> | 		<Container | ||||||
|       <TimePrompt class="timeShow" :timestr="timestr" /> | 			name="设备报警" | ||||||
|       <div style="padding: 5px 10px;"> | 			size="middle" | ||||||
|         <dv-scroll-board :config="config" style="width:575px;height:380px" ref='eqScrollBoard'/> | 			style=""> | ||||||
|       </div> | 			<TimePrompt | ||||||
|     </Container> | 				class="timeShow" | ||||||
|   </div> | 				:timestr="timestr" /> | ||||||
|  | 			<div style="padding: 5px 10px"> | ||||||
|  | 				<dv-scroll-board | ||||||
|  | 					:config="config" | ||||||
|  | 					style="width: 575px; height: 380px" | ||||||
|  | 					ref="eqScrollBoard" /> | ||||||
|  | 			</div> | ||||||
|  | 		</Container> | ||||||
|  | 	</div> | ||||||
| </template> | </template> | ||||||
| <script> | <script> | ||||||
| import Container from '../components/Container.vue'; | import Container from '../components/Container.vue'; | ||||||
| import TimePrompt from '../components/TimePrompt'; | import TimePrompt from '../components/TimePrompt'; | ||||||
| import { switchShowTime } from '../utils' | import { switchShowTime } from '../utils'; | ||||||
| export default { | export default { | ||||||
|   name: 'EqAlarm', | 	name: 'EqAlarm', | ||||||
|   components: { Container, TimePrompt }, | 	components: { Container, TimePrompt }, | ||||||
|   computed: { | 	computed: { | ||||||
|     sjgEquipment() { | 		sjgEquipment() { | ||||||
|       return this.$store.state.websocket.sjgEquipment | 			return this.$store.state.websocket.sjgEquipment; | ||||||
|     } | 		}, | ||||||
|   }, | 	}, | ||||||
|   data() { | 	data() { | ||||||
|     return { | 		return { | ||||||
|       timestr: '', | 			timestr: '', | ||||||
|       config: { | 			config: { | ||||||
|         header: ['序号', '设备名称', '设备编码','设备状态','是否故障'], | 				header: ['序号', '设备名称', '设备编码', '设备状态', '是否故障'], | ||||||
|         headerBGC: 'rgba(32, 55, 96, 0.8)', | 				headerBGC: 'rgba(32, 55, 96, 0.8)', | ||||||
|         oddRowBGC: 'rgba(32, 55, 96, 0.8)', | 				oddRowBGC: 'rgba(32, 55, 96, 0.8)', | ||||||
|         evenRowBGC: 'rgba(14, 32, 62, 0.8)', | 				evenRowBGC: 'rgba(14, 32, 62, 0.8)', | ||||||
|         columnWidth: [60, 150, 190], | 				columnWidth: [60, 150, 190], | ||||||
|         align: ['center'], | 				align: ['center'], | ||||||
|         data: [], | 				data: [], | ||||||
|         // data: [ | 				// data: [ | ||||||
|         //   [1, '四大线3小线铺纸机', 'EQ20240110130909000255', '正常', '否'], | 				//   [1, '四大线3小线铺纸机', 'EQ20240110130909000255', '正常', '否'], | ||||||
|         //   [2, '四大线2小线铺纸机', 'EQ20240110130848000254', '正常', '否'], | 				//   [2, '四大线2小线铺纸机', 'EQ20240110130848000254', '正常', '否'], | ||||||
|         //   [3, '四大线1小线铺纸机', 'EQ20240110130832000253', '正常', '否'], | 				//   [3, '四大线1小线铺纸机', 'EQ20240110130832000253', '正常', '否'], | ||||||
|         //   [4, '12线下片台', 'EQ20240110130817000252', '正常', '否'], | 				//   [4, '12线下片台', 'EQ20240110130817000252', '正常', '否'], | ||||||
|         //   [5, '11线下片台', '	EQ20240110130743000250', '正常', '否'], | 				//   [5, '11线下片台', '	EQ20240110130743000250', '正常', '否'], | ||||||
|         //   [6, '10线下片台', '	EQ20240110130743000250', '正常', '否'], | 				//   [6, '10线下片台', '	EQ20240110130743000250', '正常', '否'], | ||||||
|         //   [7, '4大线五区自动连线柜', 'EQ20240110130731000249', '正常', '否'], | 				//   [7, '4大线五区自动连线柜', 'EQ20240110130731000249', '正常', '否'], | ||||||
|         //   [8, '四大线四区2小线清洗机', 'EQ20240110112716000248', '正常', '否'], | 				//   [8, '四大线四区2小线清洗机', 'EQ20240110112716000248', '正常', '否'], | ||||||
|         //   [9, '四大线四区1小线清洗机', 'EQ20240110112700000247', '正常', '否'], | 				//   [9, '四大线四区1小线清洗机', 'EQ20240110112700000247', '正常', '否'], | ||||||
|         //   [10, '4大线四区自动连线柜', 'EQ20240110112646000246', '正常', '否'] | 				//   [10, '4大线四区自动连线柜', 'EQ20240110112646000246', '正常', '否'] | ||||||
|         // ], | 				// ], | ||||||
|         rowNum: 10 | 				rowNum: 10, | ||||||
|       } | 			}, | ||||||
|     } | 		}; | ||||||
|   }, | 	}, | ||||||
|   mounted(){ | 	mounted() { | ||||||
|     this.timestr = switchShowTime('日') | 		this.timestr = switchShowTime('日'); | ||||||
|   }, | 	}, | ||||||
|   watch:{ | 	watch: { | ||||||
|     sjgEquipment: { | 		sjgEquipment: { | ||||||
| 			handler(newVal, oldVal) { | 			handler(newVal, oldVal) { | ||||||
|         let outArr = this.sjgEquipment.map((item, index) => [ | 				let outArr = this.sjgEquipment.map((item, index) => [ | ||||||
|           index+1, | 					index + 1, | ||||||
|           `<span title=${item.name || ''}>${item.name || ''}</span>`, | 					`<span title=${item.name || ''}>${item.name || ''}</span>`, | ||||||
|           `<span title=${item.code || ''}>${item.code || ''}</span>`, | 					`<span title=${item.code || ''}>${item.code || ''}</span>`, | ||||||
|           item.status, | 					`<span><div style="${ | ||||||
|           item.error? '是': '否' | 						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 ' | ||||||
|         this.config.data = outArr | 							: 'box-shadow: 0px 0px 2px 1px #FFBD02;width:6px;height:6px;border-radius: 50%;  background-color: #FFBD02;float:left;margin:13px 10px 0 0 ' | ||||||
|         this.$refs['eqScrollBoard'].updateRows(outArr) | 					}"></div>  ${item.status || ''}</span>`, | ||||||
|         this.timestr = switchShowTime('日') | 					`<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> | </script> | ||||||
| <style lang='scss' scoped> | <style lang="scss" scoped> | ||||||
| .timeShow { | .timeShow { | ||||||
|   position: absolute; | 	position: absolute; | ||||||
|   top: 20px; | 	top: 20px; | ||||||
|   left: 170px; | 	left: 170px; | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|   | |||||||
| @@ -1,67 +1,88 @@ | |||||||
| <template> | <template> | ||||||
|   <Container name="工单监控" size="middle" style=""> | 	<Container | ||||||
|     <TimePrompt class="timeShow" :timestr="timestr" /> | 		name="工单监控" | ||||||
|     <div style="padding: 5px 10px;" class="WOMonitoring"> | 		size="middle" | ||||||
|       <dv-scroll-board :config="config" style="width:900px;height:380px" ref='worderScrollBoard'/> | 		style=""> | ||||||
|     </div> | 		<TimePrompt | ||||||
|   </Container> | 			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> | </template> | ||||||
| <script> | <script> | ||||||
| import Container from '../components/Container.vue'; | import Container from '../components/Container.vue'; | ||||||
| import TimePrompt from '../components/TimePrompt'; | import TimePrompt from '../components/TimePrompt'; | ||||||
| import { switchShowTime } from '../utils' | import { switchShowTime } from '../utils'; | ||||||
| import { formatDate } from '@/utils' | import { formatDate } from '@/utils'; | ||||||
| export default { | export default { | ||||||
|   name: 'WorkOrderMonitoring', | 	name: 'WorkOrderMonitoring', | ||||||
|   components: { Container, TimePrompt }, | 	components: { Container, TimePrompt }, | ||||||
|   computed: { | 	computed: { | ||||||
|     order() { | 		order() { | ||||||
|       return this.$store.state.websocket.workOrder | 			return this.$store.state.websocket.workOrder; | ||||||
|     } | 		}, | ||||||
|   }, | 	}, | ||||||
|   data() { | 	data() { | ||||||
|     return { | 		return { | ||||||
|       timestr: '', | 			timestr: '', | ||||||
|       config: { | 			config: { | ||||||
|         header: ['序号', '工单名称', '规格','产线','工单状态', '计划完成时间','计划产量','实际产量'], | 				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(){ | 				headerBGC: 'rgba(32, 55, 96, 0.8)', | ||||||
|     this.timestr = switchShowTime('日') | 				oddRowBGC: 'rgba(32, 55, 96, 0.8)', | ||||||
|   }, | 				evenRowBGC: 'rgba(14, 32, 62, 0.8)', | ||||||
|   watch:{ | 				columnWidth: [60, 120, 120, 60, 100, 150], | ||||||
|     order: { | 				align: ['center'], | ||||||
|  | 				data: [], | ||||||
|  | 				rowNum: 10, | ||||||
|  | 			}, | ||||||
|  | 		}; | ||||||
|  | 	}, | ||||||
|  | 	mounted() { | ||||||
|  | 		this.timestr = switchShowTime('日'); | ||||||
|  | 	}, | ||||||
|  | 	watch: { | ||||||
|  | 		order: { | ||||||
| 			handler(newVal, oldVal) { | 			handler(newVal, oldVal) { | ||||||
|         let outArr = this.order.map((item, index) => [ | 				let outArr = this.order.map((item, index) => [ | ||||||
|           index+1, | 					index + 1, | ||||||
|           `<span title=${item.name || ''}>${item.name || ''}</span>`, | 					`<span title=${item.name || ''}>${item.name || ''}</span>`, | ||||||
|           item.specifications, | 					item.specifications, | ||||||
|           item.lines, | 					item.lines, | ||||||
|           this.getDictDatas(this.DICT_TYPE.ORDER_STATUS)[item.status]?.label, | 					this.getDictDatas(this.DICT_TYPE.ORDER_STATUS)[item.status]?.label, | ||||||
|           formatDate(item.planFinishTime), | 					formatDate(item.planFinishTime), | ||||||
|           item.planQuantity, | 					item.planQuantity, | ||||||
|           item.planAssignQuantity | 					item.actualQuantity, | ||||||
|       ]); | 					(item.progressRate * 100).toFixed(0) + '%', | ||||||
|         this.config.data = outArr | 				]); | ||||||
|         this.$refs['worderScrollBoard'].updateRows(outArr) | 				this.config.data = outArr; | ||||||
|         this.timestr = switchShowTime('日') | 				this.$refs['worderScrollBoard'].updateRows(outArr); | ||||||
| 			} | 				this.timestr = switchShowTime('日'); | ||||||
| 		} | 			}, | ||||||
|   } | 		}, | ||||||
| } | 	}, | ||||||
|  | }; | ||||||
| </script> | </script> | ||||||
| <style lang='scss' scoped> | <style lang="scss" scoped> | ||||||
| .timeShow { | .timeShow { | ||||||
|   position: absolute; | 	position: absolute; | ||||||
|   top: 20px; | 	top: 20px; | ||||||
|   left: 170px; | 	left: 170px; | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|   | |||||||
| @@ -1,22 +1,24 @@ | |||||||
| <!--  |  | ||||||
|     filename: MaterialCost.vue |  | ||||||
|     author: liubin |  | ||||||
|     date: 2023-12-06 09:09:27 |  | ||||||
|     description:  |  | ||||||
| --> |  | ||||||
|  |  | ||||||
| <template> | <template> | ||||||
| 	<Container name="能耗" size="middle" style=""> | 	<Container | ||||||
| 		<TimePrompt class="timeShow" :timestr="timestr" /> | 		name="能耗" | ||||||
|  | 		size="middle" | ||||||
|  | 		style=""> | ||||||
| 		<EnergeTop /> | 		<EnergeTop /> | ||||||
| 		<SplitLine :horizontal="true" /> | 		<SplitLine :horizontal="true" /> | ||||||
| 		<div class="" style="flex: 2; padding: 8px"> | 		<div | ||||||
|  | 			class="" | ||||||
|  | 			style="flex: 2; padding: 8px"> | ||||||
| 			<div | 			<div | ||||||
| 				class="header-line" | 				class="header-line" | ||||||
| 				style="margin: 8px 0 16px; display: flex; align-items: center"> | 				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> | 				</h2> | ||||||
|  | 				<TimePrompt | ||||||
|  | 					class="timeShow" | ||||||
|  | 					:timestr="timestr" /> | ||||||
| 				<!-- <Switcher /> --> | 				<!-- <Switcher /> --> | ||||||
| 				<div> | 				<div> | ||||||
| 					<!-- <span class="lgd lgd-total">总量</span> --> | 					<!-- <span class="lgd lgd-total">总量</span> --> | ||||||
| @@ -32,11 +34,21 @@ | |||||||
| 					justify-content: space-between; | 					justify-content: space-between; | ||||||
| 				"> | 				"> | ||||||
| 				<SelectorBtnGroup | 				<SelectorBtnGroup | ||||||
| 					:options="['电耗能', '天然气I', '天然气II']" @emitFun='toggleType' :active='chartType'/> | 					:options="['电耗能', '天然气I', '天然气II']" | ||||||
| 				<SelectorBtnGroup :options="['周', '月', '年']" @emitFun='toggleDate' :active='chartTime'/> | 					@emitFun="toggleType" | ||||||
|  | 					:active="chartType" /> | ||||||
|  | 				<SelectorBtnGroup | ||||||
|  | 					:options="['周', '月', '年']" | ||||||
|  | 					@emitFun="toggleDate" | ||||||
|  | 					:active="chartTime" /> | ||||||
| 			</div> | 			</div> | ||||||
| 			<div class="chart" style="height: 200px; margin-top: 8px;"> | 			<div | ||||||
| 				<GasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/> | 				class="chart" | ||||||
|  | 				style="height: 200px; margin-top: 8px"> | ||||||
|  | 				<GasChart | ||||||
|  | 					:chartType="chartType" | ||||||
|  | 					:chartTime="chartTime" | ||||||
|  | 					@emitFun="dateUpdate" /> | ||||||
| 			</div> | 			</div> | ||||||
| 		</div> | 		</div> | ||||||
| 	</Container> | 	</Container> | ||||||
| @@ -51,7 +63,7 @@ import EnergeTop from './EnergeTop'; | |||||||
| import GasChart from '../components/GasChart.vue'; | import GasChart from '../components/GasChart.vue'; | ||||||
| import SelectorBtnGroup from '../components/SelectorBtnGroup'; | import SelectorBtnGroup from '../components/SelectorBtnGroup'; | ||||||
| import TimePrompt from '../components/TimePrompt'; | import TimePrompt from '../components/TimePrompt'; | ||||||
| import { switchShowTime } from '../utils' | import { switchShowTime } from '../utils'; | ||||||
| export default { | export default { | ||||||
| 	name: 'EnergeCost', | 	name: 'EnergeCost', | ||||||
| 	components: { | 	components: { | ||||||
| @@ -61,48 +73,43 @@ export default { | |||||||
| 		EnergeTop, | 		EnergeTop, | ||||||
| 		GasChart, | 		GasChart, | ||||||
| 		SelectorBtnGroup, | 		SelectorBtnGroup, | ||||||
| 		TimePrompt | 		TimePrompt, | ||||||
| 	}, | 	}, | ||||||
| 	props: {}, | 	props: {}, | ||||||
| 	data() { | 	data() { | ||||||
| 		return { | 		return { | ||||||
| 			chartType:'电耗能', | 			chartType: '电耗能', | ||||||
| 			chartTime:'周', | 			chartTime: '周', | ||||||
| 			timestr: '' | 			timestr: '', | ||||||
| 		}; | 		}; | ||||||
| 	}, | 	}, | ||||||
| 	mounted() { | 	mounted() { | ||||||
|     this.timestr = switchShowTime(this.chartTime) | 		this.timestr = switchShowTime(this.chartTime); | ||||||
|   }, | 	}, | ||||||
| 	computed: { | 	computed: { | ||||||
| 		gasInfoMsg() { | 		gasInfoMsg() { | ||||||
| 			return this.$store.state.websocket.gasInfo | 			return this.$store.state.websocket.gasInfo; | ||||||
| 		}, | 		}, | ||||||
| 	}, | 	}, | ||||||
| 	methods: { | 	methods: { | ||||||
| 		// 切换能源 | 		// 切换能源 | ||||||
| 		toggleType(val) { | 		toggleType(val) { | ||||||
| 			this.chartType = val | 			this.chartType = val; | ||||||
| 		}, | 		}, | ||||||
| 		// 切换时间 | 		// 切换时间 | ||||||
| 		toggleDate(val) { | 		toggleDate(val) { | ||||||
| 			this.chartTime = val | 			this.chartTime = val; | ||||||
| 			this.timestr = switchShowTime(val) | 			this.timestr = switchShowTime(val); | ||||||
| 		}, | 		}, | ||||||
| 		// 数据更新 | 		// 数据更新 | ||||||
|     dateUpdate() { | 		dateUpdate() { | ||||||
|       this.timestr = switchShowTime(this.chartTime) | 			this.timestr = switchShowTime(this.chartTime); | ||||||
|     } | 		}, | ||||||
| 	}, | 	}, | ||||||
| }; | }; | ||||||
| </script> | </script> | ||||||
|  |  | ||||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||||
| .timeShow { |  | ||||||
|   position: absolute; |  | ||||||
|   top: 20px; |  | ||||||
|   left: 120px; |  | ||||||
| } |  | ||||||
| .lgd { | .lgd { | ||||||
| 	color: #fff; | 	color: #fff; | ||||||
|  |  | ||||||
|   | |||||||
| @@ -1,7 +1,11 @@ | |||||||
| <template> | <template> | ||||||
| 	<div class="gas-handle" style="flex: 2"> | 	<div | ||||||
| 		<Container name="烟气处理" size="large" style=""> | 		class="gas-handle" | ||||||
| 			<TimePrompt class="timeShow" :timestr="timestr" /> | 		style="flex: 2"> | ||||||
|  | 		<Container | ||||||
|  | 			name="烟气处理" | ||||||
|  | 			size="large" | ||||||
|  | 			style=""> | ||||||
| 			<div | 			<div | ||||||
| 				class="" | 				class="" | ||||||
| 				style=" | 				style=" | ||||||
| @@ -24,7 +28,13 @@ | |||||||
| 						"> | 						"> | ||||||
| 						氧气含量 | 						氧气含量 | ||||||
| 					</span> | 					</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> | ||||||
| 				<ShadowRect> | 				<ShadowRect> | ||||||
| 					<div | 					<div | ||||||
| @@ -33,13 +43,19 @@ | |||||||
| 							line-height: 1.24; | 							line-height: 1.24; | ||||||
| 							flex: 1; | 							flex: 1; | ||||||
| 							text-align: right; | 							text-align: right; | ||||||
| 							padding:5px 8px 5px 0; | 							padding: 5px 8px 5px 0; | ||||||
| 							letter-spacing: 3px; | 							letter-spacing: 3px; | ||||||
| 						"> | 						"> | ||||||
| 						<p style="margin: 0; line-height: inherit">氮氧化物</p> | 						<p style="margin: 0; line-height: inherit">氮氧化物</p> | ||||||
| 						<p style="margin: 0; line-height: inherit">排放浓度</p> | 						<p style="margin: 0; line-height: inherit">排放浓度</p> | ||||||
| 					</div> | 					</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> | ||||||
|  |  | ||||||
| 				<ShadowRect> | 				<ShadowRect> | ||||||
| @@ -49,13 +65,19 @@ | |||||||
| 							line-height: 1.24; | 							line-height: 1.24; | ||||||
| 							flex: 1; | 							flex: 1; | ||||||
| 							text-align: right; | 							text-align: right; | ||||||
| 							padding:5px 8px 5px 0; | 							padding: 5px 8px 5px 0; | ||||||
| 							letter-spacing: 3px; | 							letter-spacing: 3px; | ||||||
| 						"> | 						"> | ||||||
| 						<p style="margin: 0; line-height: inherit">二氧化硫</p> | 						<p style="margin: 0; line-height: inherit">二氧化硫</p> | ||||||
| 						<p style="margin: 0; line-height: inherit">排放浓度</p> | 						<p style="margin: 0; line-height: inherit">排放浓度</p> | ||||||
| 					</div> | 					</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> | ||||||
|  |  | ||||||
| 				<ShadowRect> | 				<ShadowRect> | ||||||
| @@ -70,17 +92,30 @@ | |||||||
| 						"> | 						"> | ||||||
| 						颗粒物浓度 | 						颗粒物浓度 | ||||||
| 					</span> | 					</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> | 				</ShadowRect> | ||||||
| 			</div> | 			</div> | ||||||
| 			<KilnLine :horizontal="true" /> | 			<KilnLine :horizontal="true" /> | ||||||
| 			<div class="" style="flex: 2; padding: 8px"> | 			<div | ||||||
|  | 				class="" | ||||||
|  | 				style="flex: 2; padding: 8px"> | ||||||
| 				<div | 				<div | ||||||
| 					class="header-line" | 					class="header-line" | ||||||
| 					style="margin-bottom: 10px; display: flex; align-items: center"> | 					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> | 					</h2> | ||||||
|  | 					<TimePrompt | ||||||
|  | 						class="timeShow" | ||||||
|  | 						:timestr="timestr" /> | ||||||
| 					<!-- <Switcher /> --> | 					<!-- <Switcher /> --> | ||||||
| 					<div> | 					<div> | ||||||
| 						<!-- <span class="lgd lgd-total">总量</span> --> | 						<!-- <span class="lgd lgd-total">总量</span> --> | ||||||
| @@ -96,11 +131,21 @@ | |||||||
| 						justify-content: space-between; | 						justify-content: space-between; | ||||||
| 					"> | 					"> | ||||||
| 					<SelectorBtnGroup | 					<SelectorBtnGroup | ||||||
| 						:options="['氧气含量', '二氧化硫', '氮氧化物', '颗粒物']" @emitFun='toggleType' :active='chartType'/> | 						:options="['氧气含量', '二氧化硫', '氮氧化物', '颗粒物']" | ||||||
| 					<SelectorBtnGroup :options="['日', '周', '月', '年']" @emitFun='toggleDate' :active='chartTime' /> | 						@emitFun="toggleType" | ||||||
|  | 						:active="chartType" /> | ||||||
|  | 					<SelectorBtnGroup | ||||||
|  | 						:options="['日', '周', '月', '年']" | ||||||
|  | 						@emitFun="toggleDate" | ||||||
|  | 						:active="chartTime" /> | ||||||
| 				</div> | 				</div> | ||||||
| 				<div class="chart" style="height: 250px;margin-top: 10px;"> | 				<div | ||||||
| 					<FlueGasChart :chartType='chartType' :chartTime='chartTime' @emitFun='dateUpdate'/> | 					class="chart" | ||||||
|  | 					style="height: 250px; margin-top: 10px"> | ||||||
|  | 					<FlueGasChart | ||||||
|  | 						:chartType="chartType" | ||||||
|  | 						:chartTime="chartTime" | ||||||
|  | 						@emitFun="dateUpdate" /> | ||||||
| 				</div> | 				</div> | ||||||
| 			</div> | 			</div> | ||||||
| 		</Container> | 		</Container> | ||||||
| @@ -115,7 +160,7 @@ import KilnLine from '../components/line'; | |||||||
| import SelectorBtnGroup from '../components/SelectorBtnGroup'; | import SelectorBtnGroup from '../components/SelectorBtnGroup'; | ||||||
| import FlueGasChart from '../components/FlueGasChart'; | import FlueGasChart from '../components/FlueGasChart'; | ||||||
| import TimePrompt from '../components/TimePrompt'; | import TimePrompt from '../components/TimePrompt'; | ||||||
| import { switchShowTime } from '../utils' | import { switchShowTime } from '../utils'; | ||||||
|  |  | ||||||
| export default { | export default { | ||||||
| 	name: 'GasHandle', | 	name: 'GasHandle', | ||||||
| @@ -125,49 +170,44 @@ export default { | |||||||
| 		KilnLine, | 		KilnLine, | ||||||
| 		SelectorBtnGroup, | 		SelectorBtnGroup, | ||||||
| 		FlueGasChart, | 		FlueGasChart, | ||||||
| 		TimePrompt | 		TimePrompt, | ||||||
| 	}, | 	}, | ||||||
| 	props: {}, | 	props: {}, | ||||||
| 	data() { | 	data() { | ||||||
| 		return { | 		return { | ||||||
| 			chartType:'氧气含量', | 			chartType: '氧气含量', | ||||||
| 			chartTime:'日', | 			chartTime: '日', | ||||||
| 			timestr: '' | 			timestr: '', | ||||||
| 		}; | 		}; | ||||||
| 	}, | 	}, | ||||||
| 	computed: { | 	computed: { | ||||||
| 		exhaustGasInfo() { | 		exhaustGasInfo() { | ||||||
| 			return this.$store.state.websocket.exhaustGasInfo | 			return this.$store.state.websocket.exhaustGasInfo; | ||||||
| 		} | 		}, | ||||||
| 	}, | 	}, | ||||||
| 	mounted() { | 	mounted() { | ||||||
|     this.timestr = switchShowTime(this.chartTime) | 		this.timestr = switchShowTime(this.chartTime); | ||||||
|   }, | 	}, | ||||||
| 	methods: { | 	methods: { | ||||||
| 		// 烟气 | 		// 烟气 | ||||||
| 		toggleType(val) { | 		toggleType(val) { | ||||||
| 			console.log('烟气' + val) | 			console.log('烟气' + val); | ||||||
| 			this.chartType = val | 			this.chartType = val; | ||||||
| 		}, | 		}, | ||||||
| 		// 切换时间 | 		// 切换时间 | ||||||
| 		toggleDate(val) { | 		toggleDate(val) { | ||||||
| 			this.chartTime = val | 			this.chartTime = val; | ||||||
| 			this.timestr = switchShowTime(val) | 			this.timestr = switchShowTime(val); | ||||||
| 		}, | 		}, | ||||||
| 		// 数据更新 | 		// 数据更新 | ||||||
|     dateUpdate() { | 		dateUpdate() { | ||||||
|       this.timestr = switchShowTime(this.chartTime) | 			this.timestr = switchShowTime(this.chartTime); | ||||||
|     } | 		}, | ||||||
| 	}, | 	}, | ||||||
| }; | }; | ||||||
| </script> | </script> | ||||||
|  |  | ||||||
| <style scoped lang="scss"> | <style scoped lang="scss"> | ||||||
| .timeShow { |  | ||||||
|   position: absolute; |  | ||||||
|   top: 20px; |  | ||||||
|   left: 170px; |  | ||||||
| } |  | ||||||
| .gas-handle { | .gas-handle { | ||||||
| } | } | ||||||
|  |  | ||||||
|   | |||||||
| @@ -3,6 +3,9 @@ | |||||||
| 		name="原料用量统计" | 		name="原料用量统计" | ||||||
| 		size="middle" | 		size="middle" | ||||||
| 		style=""> | 		style=""> | ||||||
|  | 		<TimePrompt | ||||||
|  | 			class="timeShow" | ||||||
|  | 			:timestr="timestr" /> | ||||||
| 		<div style="flex: 1; display: flex; gap: 8px; flex-direction: column"> | 		<div style="flex: 1; display: flex; gap: 8px; flex-direction: column"> | ||||||
| 			<div | 			<div | ||||||
| 				class="absolute" | 				class="absolute" | ||||||
| @@ -10,8 +13,8 @@ | |||||||
| 					flex: 2; | 					flex: 2; | ||||||
| 					padding: 12px 12px 0 12px; | 					padding: 12px 12px 0 12px; | ||||||
| 					display: grid; | 					display: grid; | ||||||
| 					grid-template-columns: repeat(2, 1fr); | 					grid-template-columns: repeat(3, 1fr); | ||||||
| 					grid-auto-rows: repeat(4, 1fr); | 					grid-auto-rows: repeat(3, 1fr); | ||||||
| 					gap: 8px; | 					gap: 8px; | ||||||
| 				"> | 				"> | ||||||
| 				<ShadowRect | 				<ShadowRect | ||||||
| @@ -22,7 +25,8 @@ | |||||||
| 						class="material" | 						class="material" | ||||||
| 						style=" | 						style=" | ||||||
| 							flex: 1; | 							flex: 1; | ||||||
| 							padding-bottom: 3px; | 							padding-bottom: 18px; | ||||||
|  | 							padding-top: 18px; | ||||||
| 							display: flex; | 							display: flex; | ||||||
| 							flex-direction: column; | 							flex-direction: column; | ||||||
| 							gap: 4px; | 							gap: 4px; | ||||||
| @@ -53,20 +57,33 @@ | |||||||
| <script> | <script> | ||||||
| import Container from '../components/Container'; | import Container from '../components/Container'; | ||||||
| import ShadowRect from '../components/ShadowRect.vue'; | import ShadowRect from '../components/ShadowRect.vue'; | ||||||
|  | import TimePrompt from '../components/TimePrompt'; | ||||||
|  | import { switchShowTime } from '../utils'; | ||||||
| export default { | export default { | ||||||
| 	name: 'MaterialCost', | 	name: 'MaterialCost', | ||||||
| 	components: { Container, ShadowRect }, | 	components: { Container, ShadowRect, TimePrompt }, | ||||||
| 	props: {}, | 	props: {}, | ||||||
| 	data() { | 	data() { | ||||||
| 		return {}; | 		return { | ||||||
|  | 			timestr: '', | ||||||
|  | 		}; | ||||||
| 	}, | 	}, | ||||||
| 	computed: { | 	computed: { | ||||||
| 		materialMsg() { | 		materialMsg() { | ||||||
| 			return this.$store.state.websocket.material; | 			return this.$store.state.websocket.material; | ||||||
| 		}, | 		}, | ||||||
| 	}, | 	}, | ||||||
|  | 	mounted() { | ||||||
|  | 		this.timestr = switchShowTime('日'); | ||||||
|  | 	}, | ||||||
| 	methods: {}, | 	methods: {}, | ||||||
| }; | }; | ||||||
| </script> | </script> | ||||||
|  |  | ||||||
| <style scoped lang="scss"></style> | <style lang="scss" scoped> | ||||||
|  | .timeShow { | ||||||
|  | 	position: absolute; | ||||||
|  | 	top: 20px; | ||||||
|  | 	left: 210px; | ||||||
|  | } | ||||||
|  | </style> | ||||||
|   | |||||||
| @@ -29,6 +29,8 @@ export const switchShowTime = (type) => { | |||||||
|       } |       } | ||||||
|       if (lastMonth === 12) { |       if (lastMonth === 12) { | ||||||
|         startYear = currentYear - 1 |         startYear = currentYear - 1 | ||||||
|  |       }else{ | ||||||
|  |         startYear = currentYear | ||||||
|       } |       } | ||||||
|       startTime = startYear+'.'+lastMonth+'.'+day |       startTime = startYear+'.'+lastMonth+'.'+day | ||||||
|       endTime = currentYear+'.'+(nowTime.getMonth()+1)+'.28' |       endTime = currentYear+'.'+(nowTime.getMonth()+1)+'.28' | ||||||
|   | |||||||
| @@ -1,70 +1,94 @@ | |||||||
| <template> | <template> | ||||||
|   <div style="flex: 1;" class="orderContainer"> | 	<div | ||||||
|     <Container name="订单完成情况" size="small" style=""> | 		style="flex: 1" | ||||||
|       <TimePrompt class="timeShow" :timestr="timestr" /> | 		class="orderContainer"> | ||||||
|       <div style="padding: 5px 10px;"> | 		<Container | ||||||
|         <dv-scroll-board :config="config" style="width:575px;height:230px" ref='orderScrollBoard'/> | 			name="订单完成情况" | ||||||
|       </div> | 			size="small" | ||||||
|     </Container> | 			style=""> | ||||||
|   </div> | 			<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> | </template> | ||||||
| <script> | <script> | ||||||
| import Container from '../components/Container' | import Container from '../components/Container'; | ||||||
| import TimePrompt from '../components/TimePrompt'; | import TimePrompt from '../components/TimePrompt'; | ||||||
| import { formatDate } from '@/utils' | import { formatDate } from '@/utils'; | ||||||
| import { switchShowTime } from '../utils' | import { switchShowTime } from '../utils'; | ||||||
| export default { | export default { | ||||||
|   name: 'OrderStatus', | 	name: 'OrderStatus', | ||||||
|   components: { Container, TimePrompt }, | 	components: { Container, TimePrompt }, | ||||||
|   computed: { | 	computed: { | ||||||
|     order() { | 		order() { | ||||||
|       return this.$store.state.websocket.order | 			return this.$store.state.websocket.order; | ||||||
|     } | 		}, | ||||||
|   }, | 	}, | ||||||
|   data() { | 	data() { | ||||||
|     return { | 		return { | ||||||
|       timestr: '', | 			timestr: '', | ||||||
|       config: { | 			config: { | ||||||
|         header: ['上线时间', '客户名称', '规格','完成度'], | 				header: ['上线时间', '客户名称', '规格', '完成度'], | ||||||
|         headerBGC: 'rgba(32, 55, 96, 0.8)', | 				headerBGC: 'rgba(32, 55, 96, 0.8)', | ||||||
|         oddRowBGC: 'rgba(32, 55, 96, 0.8)', | 				oddRowBGC: 'rgba(32, 55, 96, 0.8)', | ||||||
|         evenRowBGC: 'rgba(14, 32, 62, 0.8)', | 				evenRowBGC: 'rgba(14, 32, 62, 0.8)', | ||||||
|         columnWidth: [155, 160, 150], | 				columnWidth: [155, 160, 150], | ||||||
|         data: [], | 				data: [], | ||||||
|         rowNum: 6 | 				rowNum: 6, | ||||||
|       } | 			}, | ||||||
|     } | 		}; | ||||||
|   }, | 	}, | ||||||
|   mounted() { | 	mounted() { | ||||||
|     this.timestr = switchShowTime('日') | 		this.timestr = switchShowTime('日'); | ||||||
|   }, | 	}, | ||||||
|   watch:{ | 	watch: { | ||||||
|     order:{ | 		order: { | ||||||
|       handler() { | 			handler() { | ||||||
|         let outArr = this.order.map((item) => [ | 				let outArr = this.order.map((item) => [ | ||||||
|         formatDate(item.planStartTime) || '', | 					formatDate(item.planStartTime) || '', | ||||||
|           `<span title=${item.customerName || ''}>${item.customerName || ''}</span>`, | 					`<span title=${item.customerName || ''}>${ | ||||||
|           `<span title=${item.specifications || ''}>${item.specifications || ''}</span>`, | 						item.customerName || '' | ||||||
|           `<span style="display:inline-block;width:60px;">${item.completeRate?(item.completeRate*100).toFixed(2)+'%':'0%'}</span> | 					}</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;"> |           <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"> |             <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 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> |             </svg> | ||||||
|           </div>` |           </div>`, | ||||||
|       ]); | 				]); | ||||||
|       this.config.data = outArr | 				this.config.data = outArr; | ||||||
|       this.$refs['orderScrollBoard'].updateRows(outArr) | 				this.$refs['orderScrollBoard'].updateRows(outArr); | ||||||
|       this.timestr = switchShowTime('日') | 				this.timestr = switchShowTime('日'); | ||||||
|       } | 			}, | ||||||
|     } | 		}, | ||||||
|   } | 	}, | ||||||
| } | }; | ||||||
| </script> | </script> | ||||||
| <style lang='scss' scoped> | <style lang="scss" scoped> | ||||||
| .timeShow { | .timeShow { | ||||||
|   position: absolute; | 	position: absolute; | ||||||
|   top: 20px; | 	top: 20px; | ||||||
|   left: 210px; | 	left: 210px; | ||||||
| } | } | ||||||
| </style> | </style> | ||||||
|   | |||||||
| @@ -111,7 +111,10 @@ const mesEN = new WsConnect( | |||||||
|     if (msgData == null) return; |     if (msgData == null) return; | ||||||
|     switch (msgData?.type) { |     switch (msgData?.type) { | ||||||
|       case "EnergyInfo": { |       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; |         break; | ||||||
|       } |       } | ||||||
|       case "EnergyTrend": { |       case "EnergyTrend": { | ||||||
|   | |||||||
		Referens i nytt ärende
	
	Block a user