yudao-dev/src/views/monitoring/equipmentFullParams/index.vue

<!-- 
    filename: index.vue
    author: liubin
    date: 2023-08-31 09:14:19
    description: 设备全参数查询
-->

<template>
	<div class="app-container full-param-page">
		<SearchBar
			:formConfigs="searchBarFormConfig"
			ref="search-bar"
			@headBtnClick="handleSearchBarBtnClick" />

		<div v-if="tableList.length" class="tables">
			<div class="custom-table" v-for="table in tableList" :key="table.key">
				<!-- {{ JSON.stringify(spanMethod) }} -->
				<base-table
					:key="table.key + '__basetable'"
					:table-props="table.tableProps"
					:table-data="table.dataManager?.dataList ?? []"
					:span-method="spanMethod"
					@emitFun="(val) => handleEmitFun(table, val)"></base-table>
				<pagination
					:key="table.key + '__pagination'"
					v-show="table.total > 0"
					:total="table.total"
					:page.sync="table.pageNo"
					:limit.sync="table.pageSize"
					:page-size="table.pageSize"
					:page-sizes="[1, 3, 5, 10, 20]"
					@pagination="
						({ page, limit, current }) =>
							getListFor(table, { page, limit, current })
					" />
			</div>
		</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';

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;
		return {
			searchBarFormConfig: [
				{
					type: 'input',
					label: '设备名称',
					placeholder: '请输入设备名称',
					param: 'name',
					disabled: true,
				},
				{
					type: 'input',
					label: '设备编码',
					placeholder: '请输入设备编码',
					param: 'code',
					disabled: true,
				},
				{
					type: 'datePicker',
					label: '时间段',
					dateType: 'daterange', // datetimerange
					format: 'yyyy-MM-dd HH:mm:ss',
					// valueFormat: 'yyyy-MM-dd HH:mm:ss',
					valueFormat: 'timestamp',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					defaultTime: ['00:00:00', '23:59:59'],
					param: 'timeVal',
					width: 350,
					// defaultSelect: [new Date(aWeekAgo), new Date(today)],
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
			],
			queryParams: {
				id: null,
				time: [new Date(aWeekAgo), new Date(today)],
			},
			tableList: [
				// {
				// 	key: 'base-table__key__1',
				// 	tableProps: [],
				// 	list: [],
				// 	pageNo: 1,
				// 	pageSize: 3,
				// 	total: 0,
				// },
			],
		};
	},
	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.equipmentName
				);
				vm.$set(
					vm.searchBarFormConfig[1],
					'defaultSelect',
					to.params.equipmentCode
				);
				vm.handleQuery();
			});
		} else {
			// let timeleft = 3;

			// 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) {
			// 通过 otherList 来构建 props
			const { otherList } = table;
			const props = [
				{
					// type: 'index',
					width: 56,
					prop: 'index',
					label: '序号',
				},
				{
					width: 160,
					prop: 'time',
					label: '时间',
				},
				{
					width: 240,
					prop: 'plcCode',
					label: 'PLC编码',
				},
			];
			const firstLineData = {
				index: '参考值： [最小]-[最大][/标准]',
				time: null, // 此处必须是空白
				plcCode: null, // 此处必须是空白
			};
			otherList.forEach((item) => {
				props.push({
					label: item.name,
					prop: item.name,
					width: 128,
				});
				firstLineData[item.name] = `${item.minValue ?? ''}-${
					item.maxValue ?? ''
				}${item.defaultValue != null ? '/' + item.defaultValue : ''}`;
			});
			return { props, firstLineData };
		},

		handleResponse(response) {
			const { code, data } = response;
			if (code == 0) {
				// 处理一个表格
				data.forEach((table, index) => {
					console.log('handle index:', index, table);
					const { props: tableProps, firstLineData } = this.buildProps(table);
					this.$set(this.tableList, index, {
						key: 'base-table__key__' + index,
						tableProps,
						list: [firstLineData],
						dataManager: null,
						pageNo: 1,
						pageSize: 5,
						total: 0,
					});

					// 处理某一表格的各个行
					const { data } = table;
					if (data) {
						data.forEach((row, idx) => {
							const listItem = {
								index: idx + 1,
								time: moment(+row.time).format('YYYY-MM-DD HH:mm:ss'),
								plcCode: row.plcCode,
							};
							row.data.forEach((column) => {
								listItem[column.dynamicName] = column.dynamicValue;
							});
							this.tableList[index].list.push(listItem);
							this.tableList[index].total++;
						});

						// 处理分页
						const { pageNo, pageSize, list } = this.tableList[index];
						this.tableList[index].dataManager = new LocalDataManager(
							list,
							pageNo,
							pageSize
						);
					}
				});
			}
		},

		spanMethod({ row, column, rowIndex, columnIndex }) {
			if (rowIndex == 0 && columnIndex == 0) {
				return [1, 3];
			} else if (rowIndex == 0 && (columnIndex == 1 || columnIndex == 2)) {
				return [0, 0];
			}
			return [1, 1];
		},

		/** 查询 */
		async handleQuery() {
			this.handleResponse(
				await this.$axios({
					url: '/monitoring/equipment-monitor/runLog',
					method: 'get',
					params: this.queryParams,
				})
			);
		},

		async handleSearchBarBtnClick({ btnName, timeVal }) {
			if (timeVal && timeVal.length > 0) {
				this.queryParams.time = timeVal;
			} else {
				this.queryParams.time = [];
			}
			await this.handleQuery();
		},

		handleEmitFun(table, val) {
			console.log('table val', table, val);
		},

		/** 为某个 table 获取 list 数据 */
		getListFor(table, { page, limit, current }) {
			console.log('get list for', table, { page, limit, current });
			table.dataManager.pageNo = page ?? current;
			table.dataManager.pageSize = limit;
		},
	},
};
</script>

<style scoped>
.full-param-page {
	position: relative;
}

.tables {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.tables >>> .baseTable {
	overflow-x: hidden;
}

.custom-table {
	overflow-x: hidden;
}
</style>