update 设备产量时序图

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

@@ -24,6 +24,7 @@
 				:formConfigs="searchBarFormConfig"
 				ref="search-bar"
 				:remove-blue="true"
+				@select-changed="handleSearchBarChanged"
 				@headBtnClick="handleSearchBarBtnClick" />
 		</el-row>
 
@@ -73,7 +74,6 @@
 
 <script>
 import LineChart from './components/lineChart.vue';
-
 import response from './response.json';
 
 export default {
@@ -82,16 +82,7 @@ export default {
 	props: {},
 	data() {
 		return {
-			startTime: new Date(
+			startTime: null, // new Date(2023, 8, 26, 0, 0, 0, 0).getTime(),
-				(() => {
-					const date = new Date();
-					date.setHours(0);
-					date.setMinutes(0);
-					date.setSeconds(0);
-					date.setMilliseconds(0);
-					return date;
-				})()
-			).getTime(),
 			accumulators: new Map(),
 			searchBarFormConfig: [
 				{
@@ -100,7 +91,7 @@ export default {
 					placeholder: '请选择产线',
 					selectOptions: [],
 					param: 'lineId',
-					required: true,
+					onchange: true,
 				},
 				{
 					type: 'select',
@@ -108,7 +99,6 @@ export default {
 					placeholder: '请选择工段',
 					selectOptions: [],
 					param: 'sectionId',
-					required: true,
 				},
 				// 时间段
 				{
@@ -154,7 +144,18 @@ export default {
 			eqList: [],
 			graphList: [],
 			templateConfig: {
-				color: ['#283D68', '#FFB61F', '#4481FF', '#5AD8A6', '#E97466'],
+				color: [
+					'#283D68',
+					'#FFB61F',
+					'#4481FF',
+					'#5AD8A6',
+					'#E97466',
+					'#ccc', //<=== 需按情况更新
+					'#ccc',
+					'#ccc',
+					'#ccc',
+					'#ccc',
+				],
 				grid: {
 					top: 48,
 					left: 48,
@@ -178,11 +179,26 @@ export default {
 					show: true,
 					trigger: 'axis',
 					formatter: function (params) {
-						// const content = ''
+						return `
-						// params.forEach(({ value, seriesName }) => {
+							<div style="margin-bottom: 8px;">${new Date(
-						// 	content += `${seriesName}: ${value}\n`;
+								+params[0].name
-						// });
+							).toLocaleTimeString()}</div>
-						// return content
+							${params
+								.map(({ seriesName, color, data }) =>
+									data != null
+										? `
+								<div style="min-width: 160px; display: flex; justify-content: space-between; align-items: center;">
+									<span style="display: flex; align-items: center;">
+										<span style="display: inline-block; margin-right: 8px; width: 12px; height: 12px; background: ${color}"></span>
+										<span style="">${seriesName}</span>
+									</span>
+									<span style="color: #c7c7c7; text-align: right;">${data}</span>
+								</div>
+							`
+										: ''
+								)
+								.join('')}
+						`;
 					},
 				},
 				xAxis: null,
@@ -245,15 +261,18 @@ export default {
 		this.initProductline();
 		this.initWorksection();
 		this.initEquipment();
-		this.getList();
+		// this.getList();
-	},
-	mounted() {
-		console.log('this.startTIme', this.startTime);
 	},
 	methods: {
 		handleSearchBarBtnClick({ btnName, ...payload }) {
 			switch (btnName) {
 				case 'search':
+					if (!payload.recordTime || payload.recordTime.length <= 0) {
+						this.$message.error('请选择时间段');
+						return;
+					}
+					this.startTime = new Date(payload.recordTime).getTime();
+
 					this.queryParams.lineId = payload.lineId || null;
 					this.queryParams.sectionId = payload.sectionId || null;
 					this.queryParams.equipmentId = payload.equipmentId || null;
@@ -271,6 +290,18 @@ export default {
 			}
 		},
 
+		handleSearchBarChanged({ param, value }) {
+			if (!value) {
+				this.searchBarFormConfig[1].selectOptions = [];
+				return;
+			}
+			switch (param) {
+				case 'lineId':
+					this.getWorksectionById(value);
+					break;
+			}
+		},
+
 		/** 重置查询条件 */
 		initQuery() {
 			this.queryParams.lineId = null;
@@ -296,41 +327,19 @@ export default {
 		async getList() {
 			this.initState();
 
-			// const { code, data } = await this.$axios({
+			const { code, data } = await this.$axios({
-			// 	url: '/analysis/equipment-analysis/quantity',
+				url: '/analysis/equipment-analysis/quantity',
-			// 	method: 'get',
+				method: 'get',
-			// 	params: this.queryParams,
+				params: this.queryParams,
-			// });
+			});
 
-			const { code, data } = response;
+			// 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 },
-				// 	{ totalQuantity: 12, startTime: 1693964778000 },
-				// 	{ totalQuantity: 11, startTime: 1693964878000 },
-				// 	{ totalQuantity: 98, startTime: 1693965478000 },
-				// 	{ totalQuantity: 87, startTime: 1693965578000 },
-				// ];
-				// eq1.key = 'SS1';
-				// const eq2 = [
-				// 	{ totalQuantity: 23, startTime: 1693961578000 },
-				// 	{ totalQuantity: 42, startTime: 1693964578000 },
-				// 	{ totalQuantity: 51, startTime: 1693965578000 },
-				// 	{ totalQuantity: 18, startTime: 1693966578000 },
-				// 	{ totalQuantity: 77, startTime: 1693966778000 },
-				// 	{ totalQuantity: 38, startTime: 1693967578000 },
-				// 	{ totalQuantity: 57, startTime: 1693969578000 },
-				// ];
-				// eq2.key = 'SS2';
-				// this.graphList = [eq1, eq2];
 				this.setXaxis();
 				this.graphList.forEach(this.setSeries);
 			} else {
 				this.graphList = [];
-				this.graphList.forEach(this.setSeries);
 			}
 		},
 
@@ -346,7 +355,6 @@ export default {
 				},
 				axisLabel: {
 					formatter: function (value, index) {
-						console.log('value', value, new Date(value));
 						return new Date(+value)
 							.toLocaleTimeString()
 							.split(':')
@@ -362,7 +370,6 @@ export default {
 		setYaxis() {},
 
 		setSeries(list) {
-			console.log('set series');
 			const data = Array(24).fill(null);
 			list.map((item, index) => {
 				const idx = this.timeArr.indexOf(item.startTime);
@@ -454,6 +461,25 @@ export default {
 			}
 		},
 
+		/** 根据产线获取工段 */
+		async getWorksectionById(lineId) {
+			const { code, data } = await this.$axios({
+				url: '/base/workshop-section/listByParentId',
+				method: 'get',
+				params: {
+					id: lineId,
+				},
+			});
+			if (code == 0) {
+				this.searchBarFormConfig[1].selectOptions = data.map((item) => {
+					return {
+						name: item.name,
+						id: item.id,
+					};
+				});
+			}
+		},
+
 		async submitForm() {
 			const { code, data } = await this.$axios({
 				url: '/analysis/equipment-analysis/quantity',