src/views/equipment/monitor/SearchBar.vue

@@ -105,7 +105,12 @@ export default {
 			}
 			this.listEq.splice(0);
 		},
-		handleSearch() {},
+		handleSearch() {
+			this.$emit('action', {
+				action: 'search',
+				payload: this.form,
+			});
+		},
 	},
 };
 </script>

src/views/equipment/monitor/StatusAndParams/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="app-container">
 		<!-- 搜索工作栏 -->
-		<SearchBarNew v-model="searchBarForm" />
+		<SearchBarNew v-model="searchBarForm" @action="handleSearchBarActions" />
 
 		<!-- 列表 -->
 		<base-table
@@ -128,13 +128,31 @@ export default {
 			list: [],
 		};
 	},
+	mounted() {
+		this.getList();
+	},
 	methods: {
-		handleEmitFun(val) {
-			console.log('你好', val);
-			if (val.action === '状态可视化') {
+		/**
+		 * 处理表格按钮点击事件
+		 * @param {string} action 按钮名称
+		 * @param {object} value 按钮数据(行数据) { equipmentId, equipmentCode, equipmentName, inQuantity, outQuantity, run, status, error, quantityRecordTime, statusRecordTime}
+		 */
+		handleEmitFun({ action, value: row } = {}) {
+			if (action === '状态可视化') {
 				// 状态可视化
-			} else {
+			} else if (action === '参数监控') {
 				// 参数监控
+				// 接口需要 equipmentId recordTime workOrderId 工单id
+				this.$router.push({
+					// path: '/equipment/monitor/full-params',
+					name: 'EquipmentFullParams',
+					params: {
+						equipmentId: row.equipmentId,
+						equipmentCode: row.equipmentCode,
+						equipmentName: row.equipmentName,
+					},
+				});
+			} else {
 			}
 		},
 		/** 查询列表 */
@@ -172,9 +190,25 @@ export default {
 		// 	};
 		// 	this.resetForm('form');
 		// },
+		handleSearchBarActions({ action, payload }) {
+			switch (action) {
+				case 'search':
+					this.handleQuery();
+					break;
+				case 'reset':
+					this.resetQuery();
+					break;
+				default:
+					break;
+			}
+		},
 		/** 搜索按钮操作 */
 		handleQuery() {
-			this.queryParams.pageNo = 1;
+			this.queryParams = {
+				...this.queryParams,
+				...this.searchBarForm,
+				pageNo: 1,
+			};
 			this.getList();
 		},
 		/** 重置按钮操作 */

src/views/monitoring/equipmentFullParams/index.vue

@@ -35,12 +35,12 @@
 					" />
 			</div>
 		</div>
-		<div v-else class="no-data-bg">
-		</div>
+		<div v-else class="no-data-bg"></div>
 	</div>
 </template>
 
 <script>
+import { Message } from 'element-ui';
 import LocalDataManager from './utils/local-data-manager';
 // import response from './response';
 import moment from 'moment';
@@ -55,7 +55,6 @@ export default {
 		const today = new Date(y, m, d, 0, 0, 0, 0).getTime();
 		const aWeekAgo = today - 3600 * 1000 * 24 * 7;
 		return {
-			tableList: [],
 			searchBarFormConfig: [
 				{
 					type: 'input',
@@ -109,35 +108,67 @@ export default {
 			],
 		};
 	},
-	computed: {
-		id() {
-			return this.$route.params.equipmentId;
-		},
-		code() {
-			return this.$route.params.equipmentCode;
-		},
-		name() {
-			return this.$route.params.equipmentName;
-		},
-	},
-	mounted() {
-		if (this.id) this.$set(this.queryParams, 'id', this.id);
-		if (this.code)
-			this.$set(this.searchBarFormConfig[0], 'defaultSelect', this.code);
-		if (this.name)
-			this.$set(this.searchBarFormConfig[1], 'defaultSelect', this.name);
+	beforeRouteEnter(to, from, next) {
+		if (Object.keys(to.params).length > 0) {
+			next((vm) => {
+				vm.$set(vm.queryParams, 'id', to.params.equipmentId);
+				vm.$set(
+					vm.searchBarFormConfig[0],
+					'defaultSelect',
+					to.params.equipmentCode
+				);
+				vm.$set(
+					vm.searchBarFormConfig[1],
+					'defaultSelect',
+					to.params.equipmentName
+				);
+				vm.handleQuery();
+			});
+		} else {
+			// let timeleft = 3;
 
-		// this.handleResponse();
+			// const message = Message({
+			// 	type: 'warning',
+			// 	duration: 0,
+			// 	message: `请先选择设备, 即将引导进入设备状态和参数页面, 剩余 ${timeleft} s`,
+			// });
+
+			// const timer = setInterval(() => {
+			// 	if (timeleft > 0) {
+			// 		timeleft--;
+			// 		message.$data.message = `请先选择设备, 即将引导进入设备状态和参数页面, 剩余 ${timeleft} s`
+			// 		return;
+			// 	}
+			// 	message.close();
+			// 	clearInterval(timer);
+			// 	timer = null;
+			// }, 1000);
+
+			// next({ name: 'EquipmentStatusAndParams' });
+			next((vm) => {
+				vm.$message({
+					type: 'error',
+					message: `请先选择设备`,
+				});
+			});
+		}
+	},
+	beforeRouteLeave(to, from, next) {
+		// clean job
+		this.$set(this.queryParams, 'id', null);
+		this.$set(this.searchBarFormConfig[0], 'defaultSelect', null);
+		this.$set(this.searchBarFormConfig[1], 'defaultSelect', null);
+		this.tableList = [];
+		next();
 	},
 	methods: {
 		buildProps(table) {
-			console.log('building props', table);
 			// 通过 otherList 来构建 props
 			const { otherList } = table;
 			const props = [
 				{
 					// type: 'index',
-					width: 48,
+					width: 56,
 					prop: 'index',
 					label: '序号',
 				},
@@ -147,7 +178,7 @@ export default {
 					label: '时间',
 				},
 				{
-					width: 200,
+					width: 240,
 					prop: 'plcCode',
 					label: 'PLC编码',
 				},