update 产量时序图

src/views/equipment/timing-diagram/output/index.vue

@@ -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({