update 产量时序图
This commit is contained in:
		| @@ -8,7 +8,7 @@ | ||||
| <template> | ||||
| 	<div | ||||
| 		class="production-timegraph-container" | ||||
| 		style="background: #f2f4f9; flex: 1"> | ||||
| 		style="background: #f2f4f9; flex: 1; display: flex; flex-direction: column"> | ||||
| 		<el-row | ||||
| 			class="" | ||||
| 			style=" | ||||
| @@ -30,6 +30,9 @@ | ||||
| 		<el-row | ||||
| 			class="" | ||||
| 			style=" | ||||
| 				flex: 1; | ||||
| 				display: flex; | ||||
| 				flex-direction: column; | ||||
| 				margin-bottom: 12px; | ||||
| 				background: #fff; | ||||
| 				padding: 16px 16px 24px; | ||||
| @@ -37,7 +40,7 @@ | ||||
| 			"> | ||||
| 			<div class="blue-title">设备产量时序图</div> | ||||
|  | ||||
| 			<div class="main-area"> | ||||
| 			<div class="main-area" style="flex: 1"> | ||||
| 				<div class="graphs" v-if="graphList.length"> | ||||
| 					<LineChart :config="templateConfig" /> | ||||
| 				</div> | ||||
| @@ -71,12 +74,24 @@ | ||||
| <script> | ||||
| import LineChart from './components/lineChart.vue'; | ||||
|  | ||||
| import response from './response.json'; | ||||
|  | ||||
| export default { | ||||
| 	name: 'SGProduction', | ||||
| 	components: { LineChart }, | ||||
| 	props: {}, | ||||
| 	data() { | ||||
| 		return { | ||||
| 			startTime: new Date( | ||||
| 				(() => { | ||||
| 					const date = new Date(); | ||||
| 					date.setHours(0); | ||||
| 					date.setMinutes(0); | ||||
| 					date.setSeconds(0); | ||||
| 					date.setMilliseconds(0); | ||||
| 					return date; | ||||
| 				})() | ||||
| 			).getTime(), | ||||
| 			accumulators: new Map(), | ||||
| 			searchBarFormConfig: [ | ||||
| 				{ | ||||
| @@ -144,7 +159,7 @@ export default { | ||||
| 					top: 48, | ||||
| 					left: 48, | ||||
| 					right: 24, | ||||
| 					bottom: 64, | ||||
| 					bottom: 24, | ||||
| 				}, | ||||
| 				legend: { | ||||
| 					top: 0, | ||||
| @@ -162,28 +177,15 @@ export default { | ||||
| 				tooltip: { | ||||
| 					show: true, | ||||
| 					trigger: 'axis', | ||||
| 				}, | ||||
| 				xAxis: { | ||||
| 					type: 'category', | ||||
| 					boundaryGap: true, | ||||
| 					axisTick: { | ||||
| 						// show: false, | ||||
| 						alignWithLabel: true, | ||||
| 						lineStyle: { | ||||
| 							color: '#0003', | ||||
| 						}, | ||||
| 					formatter: function (params) { | ||||
| 						// const content = '' | ||||
| 						// params.forEach(({ value, seriesName }) => { | ||||
| 						// 	content += `${seriesName}: ${value}\n`; | ||||
| 						// }); | ||||
| 						// return content | ||||
| 					}, | ||||
| 					axisLabel: { | ||||
| 						// show: true, | ||||
| 						// textStyle: { | ||||
| 						// 	color: '#0007', | ||||
| 						// }, | ||||
| 					}, | ||||
| 					data: [], | ||||
| 					// data: Array(24) | ||||
| 					// 	.fill(1) | ||||
| 					// 	.map((item, index) => `${index}:00`), | ||||
| 				}, | ||||
| 				xAxis: null, | ||||
| 				yAxis: { | ||||
| 					type: 'value', | ||||
| 					name: '产量', | ||||
| @@ -192,9 +194,12 @@ export default { | ||||
| 						fontSize: 14, | ||||
| 						align: 'center', | ||||
| 					}, | ||||
| 					nameGap: 26, | ||||
| 					axisLine: { | ||||
| 						show: true, | ||||
| 					}, | ||||
| 					max: function (value) { | ||||
| 						return value.max + Math.floor(value.max / 5); | ||||
| 						return value.max + Math.ceil(value.max / 4); | ||||
| 						// return value.max + 50 | ||||
| 					}, | ||||
| 				}, | ||||
| 				series: [ | ||||
| @@ -229,12 +234,22 @@ export default { | ||||
| 			}, | ||||
| 		}; | ||||
| 	}, | ||||
| 	computed: { | ||||
| 		timeArr() { | ||||
| 			return Array(24) | ||||
| 				.fill(this.startTime) | ||||
| 				.map((time, index) => time + index * 3600000); | ||||
| 		}, | ||||
| 	}, | ||||
| 	created() { | ||||
| 		this.initProductline(); | ||||
| 		this.initWorksection(); | ||||
| 		this.initEquipment(); | ||||
| 		this.getList(); | ||||
| 	}, | ||||
| 	mounted() { | ||||
| 		console.log('this.startTIme', this.startTime); | ||||
| 	}, | ||||
| 	methods: { | ||||
| 		handleSearchBarBtnClick({ btnName, ...payload }) { | ||||
| 			switch (btnName) { | ||||
| @@ -275,19 +290,22 @@ export default { | ||||
|  | ||||
| 		initState() { | ||||
| 			this.accumulators = new Map(); | ||||
| 			this.templateConfig.series = [] | ||||
| 			this.templateConfig.series = []; | ||||
| 		}, | ||||
|  | ||||
| 		async getList() { | ||||
| 			this.initState(); | ||||
|  | ||||
| 			const { code, data } = await this.$axios({ | ||||
| 				url: '/analysis/equipment-analysis/quantity', | ||||
| 				method: 'get', | ||||
| 				params: this.queryParams, | ||||
| 			}); | ||||
| 			// const { code, data } = await this.$axios({ | ||||
| 			// 	url: '/analysis/equipment-analysis/quantity', | ||||
| 			// 	method: 'get', | ||||
| 			// 	params: this.queryParams, | ||||
| 			// }); | ||||
|  | ||||
| 			const { code, data } = response; | ||||
| 			if (code == 0) { | ||||
| 				this.graphList = this.objectToArray(data); | ||||
| 				console.log('this graphList', this.graphList); | ||||
| 				// const eq1 = [ | ||||
| 				// 	{ totalQuantity: 20, startTime: 1693964578000 }, | ||||
| 				// 	{ totalQuantity: 43, startTime: 1693964678000 }, | ||||
| @@ -308,7 +326,7 @@ export default { | ||||
| 				// ]; | ||||
| 				// eq2.key = 'SS2'; | ||||
| 				// this.graphList = [eq1, eq2]; | ||||
|  | ||||
| 				this.setXaxis(); | ||||
| 				this.graphList.forEach(this.setSeries); | ||||
| 			} else { | ||||
| 				this.graphList = []; | ||||
| @@ -316,7 +334,52 @@ export default { | ||||
| 			} | ||||
| 		}, | ||||
|  | ||||
| 		setSeries(eqArr) { | ||||
| 		setXaxis() { | ||||
| 			const xaxis = { | ||||
| 				type: 'category', | ||||
| 				// interval: 12, | ||||
| 				axisTick: { | ||||
| 					alignWithLabel: true, | ||||
| 					lineStyle: { | ||||
| 						color: '#0003', | ||||
| 					}, | ||||
| 				}, | ||||
| 				axisLabel: { | ||||
| 					formatter: function (value, index) { | ||||
| 						console.log('value', value, new Date(value)); | ||||
| 						return new Date(+value) | ||||
| 							.toLocaleTimeString() | ||||
| 							.split(':') | ||||
| 							.slice(0, 2) | ||||
| 							.join(':'); | ||||
| 					}, | ||||
| 				}, | ||||
| 				data: this.timeArr, | ||||
| 			}; | ||||
| 			this.templateConfig.xAxis = xaxis; | ||||
| 		}, | ||||
|  | ||||
| 		setYaxis() {}, | ||||
|  | ||||
| 		setSeries(list) { | ||||
| 			console.log('set series'); | ||||
| 			const data = Array(24).fill(null); | ||||
| 			list.map((item, index) => { | ||||
| 				const idx = this.timeArr.indexOf(item.startTime); | ||||
| 				if (idx != -1) { | ||||
| 					data[idx] = item.totalQuantity; | ||||
| 				} | ||||
| 			}); | ||||
| 			const seriesItem = { | ||||
| 				name: list.key, | ||||
| 				type: 'line', | ||||
| 				symbol: 'circle', | ||||
| 				data, | ||||
| 			}; | ||||
| 			this.templateConfig.series.push(seriesItem); | ||||
| 		}, | ||||
|  | ||||
| 		setSeriesOld(eqArr) { | ||||
| 			if (eqArr.length == 0) { | ||||
| 				this.templateConfig.series = []; | ||||
| 				return; | ||||
| @@ -343,18 +406,6 @@ export default { | ||||
| 			}); | ||||
| 		}, | ||||
|  | ||||
| 		/** 获得设备产量 */ | ||||
| 		getEquipmentQuantity(equipmentArr) { | ||||
| 			return equipmentArr.map((item) => item.totalQuantity); | ||||
| 		}, | ||||
|  | ||||
| 		/** 获得设备产量的时间 */ | ||||
| 		getTimeinfo(equipmentArr) { | ||||
| 			return equipmentArr.map((item) => | ||||
| 				new Date(item.startTime).toLocaleTimeString() | ||||
| 			); | ||||
| 		}, | ||||
|  | ||||
| 		/** 准备设备数据 */ | ||||
| 		async initEquipment() { | ||||
| 			const { code, data } = await this.$axios({ | ||||
|   | ||||
| @@ -4,6 +4,7 @@ | ||||
| 		"上片机": [ | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 199, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 199, | ||||
| 				"nokQuantity": 1, | ||||
| @@ -12,6 +13,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 189, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 189, | ||||
| 				"nokQuantity": 11, | ||||
| @@ -20,6 +22,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 198, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 198, | ||||
| 				"nokQuantity": 2, | ||||
| @@ -28,6 +31,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 197, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 197, | ||||
| 				"nokQuantity": 3, | ||||
| @@ -36,6 +40,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 200, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 200, | ||||
| 				"nokQuantity": 0, | ||||
| @@ -44,6 +49,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 170, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 170, | ||||
| 				"nokQuantity": 30, | ||||
| @@ -52,6 +58,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 199, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 199, | ||||
| 				"nokQuantity": 1, | ||||
| @@ -60,6 +67,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 199, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 199, | ||||
| 				"nokQuantity": 1, | ||||
| @@ -68,6 +76,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 195, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 195, | ||||
| 				"nokQuantity": 5, | ||||
| @@ -76,6 +85,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 198, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 198, | ||||
| 				"nokQuantity": 2, | ||||
| @@ -84,6 +94,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 199, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 199, | ||||
| 				"nokQuantity": 1, | ||||
| @@ -92,6 +103,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 197, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 197, | ||||
| 				"nokQuantity": 3, | ||||
| @@ -100,6 +112,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 197, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 197, | ||||
| 				"nokQuantity": 3, | ||||
| @@ -108,6 +121,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 196, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 196, | ||||
| 				"nokQuantity": 4, | ||||
| @@ -116,6 +130,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 193, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 193, | ||||
| 				"nokQuantity": 7, | ||||
| @@ -124,6 +139,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 190, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 190, | ||||
| 				"nokQuantity": 10, | ||||
| @@ -132,6 +148,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 199, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 199, | ||||
| 				"nokQuantity": 1, | ||||
| @@ -140,6 +157,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 200, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 200, | ||||
| 				"nokQuantity": 0, | ||||
| @@ -148,6 +166,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 200, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 200, | ||||
| 				"nokQuantity": 0, | ||||
| @@ -156,6 +175,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 198, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 198, | ||||
| 				"nokQuantity": 2, | ||||
| @@ -164,6 +184,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 199, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 199, | ||||
| 				"nokQuantity": 1, | ||||
| @@ -172,6 +193,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 189, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 189, | ||||
| 				"nokQuantity": 11, | ||||
| @@ -180,6 +202,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 179, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 179, | ||||
| 				"nokQuantity": 21, | ||||
| @@ -188,6 +211,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 200, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 200, | ||||
| 				"nokQuantity": 0, | ||||
| @@ -198,6 +222,7 @@ | ||||
| 		"下片机": [ | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 190, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 190, | ||||
| 				"nokQuantity": 10, | ||||
| @@ -206,6 +231,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 177, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 177, | ||||
| 				"nokQuantity": 23, | ||||
| @@ -214,6 +240,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 198, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 198, | ||||
| 				"nokQuantity": 2, | ||||
| @@ -222,6 +249,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 200, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 200, | ||||
| 				"nokQuantity": 0, | ||||
| @@ -230,6 +258,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 185, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 185, | ||||
| 				"nokQuantity": 15, | ||||
| @@ -238,6 +267,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 198, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 198, | ||||
| 				"nokQuantity": 2, | ||||
| @@ -246,6 +276,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 200, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 200, | ||||
| 				"nokQuantity": 0, | ||||
| @@ -254,6 +285,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 193, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 193, | ||||
| 				"nokQuantity": 7, | ||||
| @@ -262,6 +294,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 200, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 200, | ||||
| 				"nokQuantity": 0, | ||||
| @@ -270,6 +303,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 200, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 200, | ||||
| 				"nokQuantity": 0, | ||||
| @@ -278,6 +312,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 192, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 192, | ||||
| 				"nokQuantity": 8, | ||||
| @@ -286,6 +321,7 @@ | ||||
| 			}, | ||||
| 			{ | ||||
| 				"inQuantity": 200, | ||||
| 				"totalQuantity": 199, | ||||
| 				"outQuantity": 200, | ||||
| 				"okQuantity": 199, | ||||
| 				"nokQuantity": 1, | ||||
|   | ||||
		Reference in New Issue
	
	Block a user