更新

src/views/monitoring/equipmentFullParams/index.vue

@@ -1,4 +1,4 @@
-<!-- 
+<!--
     filename: index.vue
     author: liubin
     date: 2023-08-31 09:14:19
@@ -35,27 +35,27 @@
 					" />
 			</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';
+import { parseTime } from '@/utils/ruoyi'
 
 export default {
 	name: 'EquipmentFullParams',
 	components: {},
 	props: {},
 	data() {
-		const now = new Date();
-		const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
-		const today = new Date(y, m, d, 0, 0, 0, 0).getTime();
-		const aWeekAgo = today - 3600 * 1000 * 24 * 7;
+		// const now = new Date().getTime();
+		// const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
+		const today = new Date().getTime();
+		const tenminAgo = new Date(today - (10 * 60 * 1000)).getTime();
 		return {
-			tableList: [],
 			searchBarFormConfig: [
 				{
 					type: 'input',
@@ -74,10 +74,10 @@ export default {
 				{
 					type: 'datePicker',
 					label: '时间段',
-					dateType: 'daterange', // datetimerange
+					dateType: 'datetimerange', // datetimerange
 					format: 'yyyy-MM-dd HH:mm:ss',
 					// valueFormat: 'yyyy-MM-dd HH:mm:ss',
-					valueFormat: 'timestamp',
+					valueFormat: 'yyyy-MM-dd HH:mm:ss',
 					rangeSeparator: '-',
 					startPlaceholder: '开始时间',
 					endPlaceholder: '结束时间',
@@ -94,14 +94,20 @@ export default {
 				},
 			],
 			queryParams: {
-				id: null,
-				time: [new Date(aWeekAgo), new Date(today)],
+				equipmentId: null,
+				recordTime: [parseTime(tenminAgo), parseTime(today)],
 			},
 			tableList: [
 				// {
 				// 	key: 'base-table__key__1',
-				// 	tableProps: [],
-				// 	list: [],
+				// 	tableProps: [{
+				// 		prop: 'name',
+				// 		label: 'name'
+				// 	}],
+				// 	dataManager: {dataList: [{name: '1'}]},
+				// 	list: [{
+				// 		name: '11'
+				// 	}],
 				// 	pageNo: 1,
 				// 	pageSize: 3,
 				// 	total: 0,
@@ -109,35 +115,72 @@ 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, 'equipmentId', to.params.equipmentId);
+				vm.$set(
+					vm.searchBarFormConfig[0],
+					'defaultSelect',
+					to.params.equipmentName
+				);
+				vm.$set(
+					vm.searchBarFormConfig[1],
+					'defaultSelect',
+					to.params.equipmentCode
+				);
+				vm.$set(
+					vm.searchBarFormConfig[2],
+					'defaultSelect',
+					vm.queryParams.recordTime
+				);
+				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, 'equipmentId', 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 +190,7 @@ export default {
 					label: '时间',
 				},
 				{
-					width: 200,
+					width: 240,
 					prop: 'plcCode',
 					label: 'PLC编码',
 				},
@@ -161,7 +204,7 @@ export default {
 				props.push({
 					label: item.name,
 					prop: item.name,
-					width: 128,
+					// width: 128,
 				});
 				firstLineData[item.name] = `${item.minValue ?? ''}-${
 					item.maxValue ?? ''
@@ -237,11 +280,18 @@ export default {
 
 		async handleSearchBarBtnClick({ btnName, timeVal }) {
 			if (timeVal && timeVal.length > 0) {
-				this.queryParams.time = timeVal;
+				console.log('nihc ', timeVal)
+				if (new Date(timeVal[1]).getTime() - new Date(timeVal[0]).getTime() <= 30 * 60 * 1000) {
+					this.queryParams.recordTime = timeVal;
+					await this.handleQuery();
+				} else {
+					this.$message.warning('时间范围最大30分钟限制！')
+				}
 			} else {
-				this.queryParams.time = [];
+				this.queryParams.recordTime = [];
+				this.$message.warning('时间段必选！')
 			}
-			await this.handleQuery();
+
 		},
 
 		handleEmitFun(table, val) {
@@ -264,9 +314,12 @@ export default {
 }
 
 .tables {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 18px;
+	/* display: grid; */
+	/* grid-template-columns: 1fr 1fr; */
+	/* gap: 18px; */
+	display: flex;
+	flex-direction: column;
+	width: 100%;
 }
 
 .tables >>> .baseTable {
@@ -275,5 +328,6 @@ export default {
 
 .custom-table {
 	overflow-x: hidden;
+	margin-bottom: 10px;
 }
 </style>