update StatusAndParams

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编码',
 				},