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" />

		<!-- <base-table
			:table-props="[
				{ type: 'index', label: '序号' },
				{ prop: 'name', label: '设备名称', align: 'center' },
				{ prop: 'code', label: '设备代码', align: 'center' },
				{ prop: 'time', label: '时间', align: 'center' },
			]"
			:table-data="[
				{ index: 1, name: '1', code: 'c1', time: '2021-08-31 09:14:19' },
				{ index: 2, name: '2', code: 'c2', time: '2021-08-31 09:14:19' },
				{ index: 3, name: '3', code: 'c3', time: '2021-08-31 09:14:19' },
				{ index: 4, name: '4', code: 'c4', time: '2021-08-31 09:14:19' },
				{ index: 5, name: '5', code: 'c5', time: '2021-08-31 09:14:19' },
			]"
			:span-method="
				({ rowIndex, columnIndex }) => {
					if (rowIndex == 1 && columnIndex == 0) {
						return [1, 3];
					}
					return [1, 1];
				}
			"
			@emitFun="(val) => handleEmitFun(table, val)"></base-table> -->

		<div class="tables-s">
			<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.list"
					: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="(val) => getListFor(table, val)" />
			</div>
		</div>
	</div>
</template>

<script>
import LocalDataManager from './utils/local-data-manager';
import response from './response';

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 {
			tableList: [],
			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,
				},
			],
		};
	},
	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);

		this.handleResponse();
	},
	methods: {
		buildProps(table) {
			console.log('building props', table);
			// 通过 otherList 来构建 props
			const { otherList } = table;
			const props = [
				{
					// type: 'index',
					width: 48,
					prop: 'index',
					label: '序号',
					align: 'center',
					// children: [{ label: '参考值： [最小]-[最大][/标准]' }],
				},
				{
					width: 128,
					prop: 'time',
					label: '时间',
					align: 'center',
					// children: [{ label: '参考值： [最小]-[最大][/标准]' }],
				},
				{
					width: 128,
					prop: 'plcCode',
					label: 'PLC编码',
					align: 'center',
					// children: [{ label: '参考值： [最小]-[最大][/标准]' }],
				},
			];
			const firstLineData = {
				index: '参考值： [最小]-[最大][/标准]',
				time: '参考值： [最小]-[最大][/标准]',
				plcCode: '参考值： [最小]-[最大][/标准]',
			};
			otherList.forEach((item) => {
				props.push({
					label: item.name,
					align: 'center',
					// children: [
					// 	{
					// 		prop: item.name,
					// 		align: 'center',
					// 		label: `${item.minValue ?? ''}-${item.maxValue ?? ''}${
					// 			item.defaultValue != null ? '/' + item.defaultValue : ''
					// 		}`,
					// 	},
					// ],
				});
				firstLineData[item.name] = `${item.minValue ?? ''}-${
					item.maxValue ?? ''
				}${item.defaultValue != null ? '/' + item.defaultValue : ''}`;
			});
			console.log('new props:', props);
			return { props, firstLineData };
		},

		handleResponse() {
			const { code, data } = response;
			if (code == 0) {
				console.log('response', code, data);
				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],
						pageNo: 1,
						pageSize: 5,
						total: 0,
					});
				});
			}
		},

		injectFirstLine(table) {
			// 给table的第一行注入固定数据
		},

		getList(dataManager, pageNo, pageSize) {
			dataManager.setPageNo(pageNo);
			dataManager.setPageSize(pageSize);
			return { data: dataManager.dataList, total: dataManager.total };
		},

		spanMethod({ row, column, rowIndex, columnIndex }) {
			console.log('span method', row, column, rowIndex, columnIndex);
			if (rowIndex == 1 && columnIndex == 0) {
				console.log('herer..............');
				return [1, 3];
			}
			console.log('therer..............');
			return [1, 1];
		},

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

		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, val) {
			console.log('get list for', table, val);
		},
	},
};
</script>

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

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

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