update 设备产量时序图

src/views/equipment/timing-diagram/output/components/lineChart.vue

@@ -21,7 +21,14 @@ export default {
 			chart: null,
 		};
 	},
-	computed: {},
+	watch: {
+		config: {
+			handler(value) {
+				if (value != null) this.setOption(value);
+			},
+			deep: true,
+		},
+	},
 	mounted() {
 		this.init();
 	},
@@ -32,9 +39,11 @@ export default {
 	},
 	methods: {
 		init() {
-			console.log('thsi el', this.$el);
 			if (!this.chart) this.chart = echarts.init(this.$el);
-			this.chart.setOption(this.config);
+			this.setOption(this.config);
+		},
+		setOption(option) {
+			if (this.chart) this.chart.setOption(option);
 		},
 	},
 };

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

@@ -32,21 +32,16 @@
 			style="
 				margin-bottom: 12px;
 				background: #fff;
-				padding: 16px 16px 32px;
+				padding: 16px 16px 24px;
 				border-radius: 8px;
 			">
 			<div class="blue-title">设备产量时序图</div>
 
 			<div class="main-area">
 				<div class="graphs" v-if="graphList.length">
-					<div class="graph" v-for="(eq, index) in graphList" :key="eq.key">
-						<h2 class="graph-title">{{ eq.key }}</h2>
-						<LineChart
-							:key="eq.key + '__linechart'"
-							:config="getRealConfig(index)" />
-					</div>
+					<LineChart :config="templateConfig" />
 				</div>
-				<h2 v-else>请添加设备</h2>
+				<div class="no-data-bg" v-else></div>
 			</div>
 		</el-row>
 
@@ -82,6 +77,7 @@ export default {
 	props: {},
 	data() {
 		return {
+			accumulators: new Map(),
 			searchBarFormConfig: [
 				{
 					type: 'select',
@@ -101,15 +97,16 @@ export default {
 				{
 					type: 'datePicker',
 					label: '时间段',
-					dateType: 'daterange', // datetimerange
+					dateType: 'date', // datetimerange
 					// format: 'yyyy-MM-dd HH:mm:ss',
 					format: 'yyyy-MM-dd',
 					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 					// valueFormat: 'timestamp',
-					rangeSeparator: '-',
-					startPlaceholder: '开始日期',
-					endPlaceholder: '结束日期',
-					defaultTime: ['00:00:00', '23:59:59'],
+					// rangeSeparator: '-',
+					// startPlaceholder: '开始日期',
+					// endPlaceholder: '结束日期',
+					// defaultTime: ['00:00:00', '23:59:59'],
+					placeholder: '选择日期',
 					param: 'recordTime',
 				},
 				{
@@ -139,30 +136,47 @@ export default {
 			eqList: [],
 			graphList: [],
 			templateConfig: {
+				color: ['#283D68', '#FFB61F', '#4481FF', '#5AD8A6', '#E97466'],
 				grid: {
-					top: 88,
-					left: 56,
-					right: 56,
-					bottom: 56,
+					top: 48,
+					left: 48,
+					right: 24,
+					bottom: 24,
 				},
 				legend: {
 					top: 0,
-					left: 0,
-					padding: 5,
-					icon: 'roundRect',
-					itemWidth: 12,
-					itemHeight: 12,
+					right: 12,
+					padding: 6,
+					itemWidth: 16,
+					itemHeight: 8,
 					itemGap: 20,
 					textStyle: {
-						fontSize: 14,
-						lineHeight: 14,
+						fontSize: 12,
+						lineHeight: 12,
+						color: '#0007',
 					},
 				},
+				tooltip: {
+					show: true,
+					trigger: 'axis',
+				},
 				xAxis: {
 					type: 'category',
-					data: Array(24)
-						.fill(1)
-						.map((item, index) => `${index}:00`),
+					boundaryGap: true,
+					axisTick: {
+						// show: false,
+						alignWithLabel: true,
+						lineStyle: {
+							color: '#0003',
+						},
+					},
+					axisLabel: {
+						color: '#0007',
+					},
+					data: [],
+					// data: Array(24)
+					// 	.fill(1)
+					// 	.map((item, index) => `${index}:00`),
 				},
 				yAxis: {
 					type: 'value',
@@ -170,19 +184,41 @@ export default {
 					nameLocation: 'end',
 					nameTextStyle: {
 						fontSize: 14,
-						align: 'right',
+						align: 'center',
 					},
 					nameGap: 26,
+					max: function (value) {
+						return value.max + Math.floor(value.max / 5);
+					},
 				},
 				series: [
-					{
-						name: '产线1',
-						data: Array(24)
-							.fill(1)
-							.map(() => Math.random() * 100),
-						type: 'line',
-						smooth: true,
-					},
+					// {
+					// 	name: '产线1',
+					// 	data: Array(24)
+					// 		.fill(1)
+					// 		.map(() => Math.random() * 100),
+					// 	type: 'line',
+					// 	symbol: 'circle',
+					// 	// smooth: true,
+					// },
+					// {
+					// 	name: '产线2',
+					// 	data: Array(24)
+					// 		.fill(1)
+					// 		.map(() => Math.random() * 100),
+					// 	type: 'line',
+					// 	symbol: 'circle',
+					// 	// smooth: true,
+					// },
+					// {
+					// 	name: '产线3',
+					// 	data: Array(24)
+					// 		.fill(1)
+					// 		.map(() => Math.random() * 100),
+					// 	type: 'line',
+					// 	symbol: 'circle',
+					// 	// smooth: true,
+					// },
 				],
 			},
 		};
@@ -200,7 +236,12 @@ export default {
 					this.queryParams.lineId = payload.lineId || null;
 					this.queryParams.sectionId = payload.sectionId || null;
 					this.queryParams.equipmentId = payload.equipmentId || null;
-					this.queryParams.recordTime = payload.recordTime || null;
+					this.queryParams.recordTime = payload.recordTime
+						? [
+								payload.recordTime,
+								payload.recordTime.replace('00:00:00', '23:59:59'),
+						  ]
+						: null;
 					this.getList();
 					break;
 				case 'compare':
@@ -254,10 +295,41 @@ export default {
 				// ];
 				// eq2.key = 'SS2';
 				// this.graphList = [eq1, eq2];
-				console.log('graph list', this.graphList);
+
+				this.graphList.forEach(this.setSeries);
+			} else {
+				this.graphList = [];
+				this.graphList.forEach(this.setSeries);
 			}
 		},
 
+		setSeries(eqArr) {
+			if (eqArr.length == 0) {
+				this.templateConfig.series = [];
+				return;
+			}
+
+			let isInit = false;
+			if (this.accumulators.has(eqArr.key) == false) {
+				this.accumulators.set(eqArr.key, 0);
+				isInit = true;
+			}
+
+			let accumulator = this.accumulators.get(eqArr.key);
+			if ((accumulator && !isInit) || (accumulator == 0 && isInit == false)) {
+				accumulator++;
+				this.accumulators.set(eqArr.key, accumulator);
+			}
+
+			this.templateConfig.series.push({
+				name: eqArr.key + (accumulator == 0 ? '' : '-' + accumulator),
+				// name: Math.random(),
+				type: 'line',
+				symbol: 'circle',
+				data: this.getEquipmentQuantity(eqArr),
+			});
+		},
+
 		/** 获得设备产量 */
 		getEquipmentQuantity(equipmentArr) {
 			return equipmentArr.map((item) => item.totalQuantity);
@@ -270,19 +342,6 @@ export default {
 			);
 		},
 
-		getRealConfig(index) {
-			// if (!this.graphList || this.graphList.length == 0) return;
-			const config = JSON.parse(JSON.stringify(this.templateConfig));
-			// config.legend.data = this.graphList[index].key;
-			config.series[0].name = this.graphList[index]?.key;
-			// console.log("this.graphList?.[index]", this.graphList?.[index]);
-			config.series[0].data = this.getEquipmentQuantity(
-				this.graphList?.[index] || []
-			);
-			config.xAxis.data = this.getTimeinfo(this.graphList?.[index] || []);
-			return config;
-		},
-
 		/** 准备设备数据 */
 		async initEquipment() {
 			const { code, data } = await this.$axios({
@@ -337,13 +396,16 @@ export default {
 				method: 'get',
 				params: this.queryParams,
 			});
+
+			this.queryParams.equipmentId = null; // 清空一下
 			if (code == 0) {
 				const newEqlist = this.objectToArray(data);
 				if (!newEqlist || newEqlist.length == 0) {
 					this.$message.error('该设备没有产量数据');
 					return;
 				}
-				this.graphList.push(newEqlist[0]);
+				this.graphList.push(...newEqlist);
+				newEqlist.forEach(this.setSeries);
 			}
 			this.open = false;
 		},