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

@@ -16,13 +16,36 @@
 
 		<div class="main-area">
 			<div class="graphs" v-if="graphList.length">
-				<div class="graph" v-for="eq,index in graphList" :key="eq.key">
+				<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)" />
+					<LineChart
+						:key="eq.key + '__linechart'"
+						:config="getRealConfig(index)" />
 				</div>
 			</div>
 			<h2 v-else>请添加设备</h2>
 		</div>
+
+		<!-- 对话框(添加 / 修改) -->
+		<base-dialog
+			dialogTitle="添加设备"
+			:dialogVisible="open"
+			width="500px"
+			@close="open = false"
+			@cancel="open = false"
+			@confirm="submitForm">
+			<el-select
+				v-if="open"
+				style="width: 100%"
+				v-model="queryParams.equipmentId"
+				placeholder="请选择一个设备">
+				<el-option
+					v-for="eq in eqList"
+					:key="eq.id"
+					:value="eq.id"
+					:label="eq.name"></el-option>
+			</el-select>
+		</base-dialog>
 	</div>
 </template>
 
@@ -88,6 +111,8 @@ export default {
 				equipmentId: null,
 				recordTime: [],
 			},
+			open: false,
+			eqList: [],
 			graphList: [],
 			templateConfig: {
 				grid: {
@@ -141,6 +166,7 @@ export default {
 	created() {
 		this.initProductline();
 		this.initWorksection();
+		this.initEquipment();
 		this.getList();
 	},
 	methods: {
@@ -154,7 +180,7 @@ export default {
 					this.getList();
 					break;
 				case 'compare':
-					this.$message.info('暂未实现该接口');
+					this.open = true;
 					break;
 			}
 		},
@@ -215,7 +241,9 @@ export default {
 
 		/** 获得设备产量的时间 */
 		getTimeinfo(equipmentArr) {
-			return equipmentArr.map((item) => new Date(item.startTime).toLocaleTimeString());
+			return equipmentArr.map((item) =>
+				new Date(item.startTime).toLocaleTimeString()
+			);
 		},
 
 		getRealConfig(index) {
@@ -224,11 +252,29 @@ export default {
 			// 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.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({
+				url: '/base/equipment/listAll',
+				method: 'get',
+			});
+			if (code == 0) {
+				this.eqList = data.map((item) => {
+					return {
+						name: item.name,
+						id: item.id,
+					};
+				});
+			}
+		},
+
 		/** 准备产线数据 */
 		async initProductline() {
 			const { code, data } = await this.$axios({
@@ -260,6 +306,23 @@ export default {
 				});
 			}
 		},
+
+		async submitForm() {
+			const { code, data } = await this.$axios({
+				url: '/analysis/equipment-analysis/quantity',
+				method: 'get',
+				params: this.queryParams,
+			});
+			if (code == 0) {
+				const newEqlist = this.objectToArray(data);
+				if (!newEqlist || newEqlist.length == 0) {
+					this.$message.error('该设备没有产量数据');
+					return;
+				}
+				this.graphList.push(newEqlist[0]);
+			}
+			this.open = false;
+		}
 	},
 };
 </script>

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

@@ -113,6 +113,27 @@
 			</div>
 			<h2 v-else>请添加设备</h2>
 		</div>
+
+		<!-- 对话框(添加 / 修改) -->
+		<base-dialog
+			dialogTitle="添加设备"
+			:dialogVisible="open"
+			width="500px"
+			@close="open = false"
+			@cancel="open = false"
+			@confirm="submitForm">
+			<el-select
+				v-if="open"
+				style="width: 100%"
+				v-model="queryParams.equipmentId"
+				placeholder="请选择一个设备">
+				<el-option
+					v-for="eq in eqList"
+					:key="eq.id"
+					:value="eq.id"
+					:label="eq.name"></el-option>
+			</el-select>
+		</base-dialog>
 	</div>
 </template>
 
@@ -177,6 +198,8 @@ export default {
 				recordTime: [],
 			},
 			graphList: [],
+			open: false,
+			eqList: [],
 			// demo: [
 			// 	[
 			// 		{
@@ -203,6 +226,7 @@ export default {
 	created() {
 		this.initProductline();
 		this.initWorksection();
+		this.initEquipment();
 		this.getList();
 	},
 	methods: {
@@ -235,6 +259,22 @@ export default {
 			}
 		},
 
+		/** 准备设备数据 */
+		async initEquipment() {
+			const { code, data } = await this.$axios({
+				url: '/base/equipment/listAll',
+				method: 'get',
+			});
+			if (code == 0) {
+				this.eqList = data.map((item) => {
+					return {
+						name: item.name,
+						id: item.id,
+					};
+				});
+			}
+		},
+
 		/** 准备产线数据 */
 		async initProductline() {
 			const { code, data } = await this.$axios({
@@ -276,11 +316,28 @@ export default {
 					this.queryParams.recordTime = payload.recordTime || null;
 					this.getList();
 					break;
-                case 'compare':
-                    this.$message.info('暂未实现该接口')
-                    break;
+				case 'compare':
+					this.open = true;
+					break;
 			}
 		},
+
+		async submitForm() {
+			const { code, data } = await this.$axios({
+				url: '/analysis/equipment-analysis/status',
+				method: 'get',
+				params: this.queryParams,
+			});
+			if (code == 0) {
+				const newEqlist = this.objectToArray(data);
+				if (!newEqlist || newEqlist.length == 0) {
+					this.$message.error('该设备没有状态数据');
+					return;
+				}
+				this.graphList.push(newEqlist[0]);
+			}
+			this.open = false;
+		},
 	},
 };
 </script>