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 class="tables">
			<base-table
				:key="1 + '__basetable'"
				:table-props="table1.tableProps"
				:page="table1.pageNo"
				:limit="table1.pageSize"
				:table-data="table1.data"
				@emitFun="(val) => handleEmitFun(table1, val)"></base-table>
			<pagination
				v-show="table1.total > 0"
				:total="table1.total"
				:page.sync="table1.pageNo"
				:limit.sync="table1.pageSize"
				:page-size="table1.pageSize"
				:page-sizes="[1, 3, 5, 10, 20]"
				@pagination="(val) => getListFor(table1, val)" />
			<base-table
				:key="2 + '__basetable'"
				:table-props="table2.tableProps"
				:page="1"
				:limit="999"
				:table-data="table2.data"
				@emitFun="(val) => handleEmitFun(table2, val)"></base-table>
			<base-table
				:key="3 + '__basetable'"
				:table-props="table3.tableProps"
				:page="1"
				:limit="999"
				:table-data="table3.data"
				@emitFun="(val) => handleEmitFun(table3, val)"></base-table>
			<base-table
				:key="4 + '__basetable'"
				:table-props="table4.tableProps"
				:page="1"
				:limit="999"
				:table-data="table4.data"
				@emitFun="(val) => handleEmitFun(table4, val)"></base-table>
			<base-table
				:key="5 + '__basetable'"
				:table-props="table5.tableProps"
				:page="1"
				:limit="999"
				:table-data="table5.data"
				@emitFun="(val) => handleEmitFun(table5, val)"></base-table>
			<base-table
				:key="6 + '__basetable'"
				:table-props="table6.tableProps"
				:page="1"
				:limit="999"
				:table-data="table6.data"
				@emitFun="(val) => handleEmitFun(table6, val)"></base-table>
			<base-table
				:key="7 + '__basetable'"
				:table-props="table7.tableProps"
				:page="1"
				:limit="999"
				:table-data="table7.data"
				@emitFun="(val) => handleEmitFun(table7, val)"></base-table>
		</div>
		<!-- <div class="tables">
			<div class="table-wrapper" v-for="table in tableList" :key="table.key">
				<div class="table-title">PLC 1</div>
				<base-table
					:key="table.key + '__basetable'"
					:table-props="table.tableProps"
					:page="1"
					:limit="999"
					:table-data="table.data"
					@emitFun="(val) => handleEmitFun(table, val)">
				</base-table>
				<pagination
					v-show="table.total > 0"
					:total="table.total"
					:page.sync="table.queryParams.pageNo"
					:limit.sync="table.queryParams.pageSize"
					@pagination="(val) => getListFor(table, val)" />
			</div>
		</div> -->
	</div>
</template>

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

const fakeTable1Data = [
	{
		time: 1111111111111111,
		plcCode: 2,
		val1: 3,
		bol1: 4,
		val2: 5,
		bol2: 6,
	},
	{
		time: 1,
		plcCode: 22222222222222,
		val1: 3,
		bol1: 4,
		val2: 5,
		bol2: 6,
	},
	{
		time: 1,
		plcCode: 2,
		val1: 33333333333333,
		bol1: 4,
		val2: 5,
		bol2: 6,
	},
	{
		time: 1,
		plcCode: 2,
		val1: 3,
		bol1: 44444444444444,
		val2: 5,
		bol2: 6,
	},
	{
		time: 1,
		plcCode: 2,
		val1: 3,
		bol1: 4,
		val2: 5555555555555,
		bol2: 6,
	},
	{
		time: 1,
		plcCode: 2,
		val1: 3,
		bol1: 4,
		val2: 5,
		bol2: 6666666666666666666,
	},
	{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
	{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
	{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
	{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
	{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
	{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
	{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
	{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
	{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
	{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
	{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
];

const table1LDM = new LocalDataManager(fakeTable1Data, 1, 3);

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)],
			},

			table1: {
				tableProps: [
					{
						prop: 'time',
						label: '时间',
					},
					{
						prop: 'plcCode',
						label: 'PLC编码',
					},
					{
						prop: 'val1',
						label: '数值1',
					},
					{
						prop: 'bol1',
						label: '布尔1',
					},
					{
						prop: 'val2',
						label: '数值2',
					},
					{
						prop: 'bol2',
						label: '布尔2',
					},
					{
						prop: 'val3',
						label: '数值3',
					},
					{
						prop: 'bol3',
						label: '布尔3',
					},
					{
						prop: 'val4',
						label: '数值4',
					},
					{
						prop: 'bol4',
						label: '布尔4',
					},
				],
				data: table1LDM.dataList,
				pageNo: table1LDM.pageNo,
				pageSize: table1LDM.pageSize,
				total: table1LDM.total,
			},
			table2: {
				tableProps: [
					{
						prop: 'time',
						label: '时间',
					},
					{
						prop: 'plcCode',
						label: 'PLC编码',
					},
					{
						prop: 'val1',
						label: '数值1',
					},
					{
						prop: 'bol1',
						label: '布尔1',
					},
					{
						prop: 'val2',
						label: '数值2',
					},
					{
						prop: 'bol2',
						label: '布尔2',
					},
				],
				data: [],
			},
			table3: {
				tableProps: [
					{
						prop: 'time',
						label: '时间',
					},
					{
						prop: 'plcCode',
						label: 'PLC编码',
					},
					{
						prop: 'val1',
						label: '数值1',
					},
					{
						prop: 'bol1',
						label: '布尔1',
					},
					{
						prop: 'val2',
						label: '数值2',
					},
					{
						prop: 'bol2',
						label: '布尔2',
					},
				],
				data: [],
			},
			table4: {
				tableProps: [
					{
						prop: 'time',
						label: '时间',
					},
					{
						prop: 'plcCode',
						label: 'PLC编码',
					},
					{
						prop: 'val1',
						label: '数值1',
					},
					{
						prop: 'bol1',
						label: '布尔1',
					},
					{
						prop: 'val2',
						label: '数值2',
					},
					{
						prop: 'bol2',
						label: '布尔2',
					},
				],
				data: [],
			},
			table5: {
				tableProps: [
					{
						prop: 'time',
						label: '时间',
					},
					{
						prop: 'plcCode',
						label: 'PLC编码',
					},
					{
						prop: 'val1',
						label: '数值1',
					},
					{
						prop: 'bol1',
						label: '布尔1',
					},
					{
						prop: 'val2',
						label: '数值2',
					},
					{
						prop: 'bol2',
						label: '布尔2',
					},
				],
				data: [],
			},
			table6: {
				tableProps: [
					{
						prop: 'time',
						label: '时间',
					},
					{
						prop: 'plcCode',
						label: 'PLC编码',
					},
					{
						prop: 'val1',
						label: '数值1',
					},
					{
						prop: 'bol1',
						label: '布尔1',
					},
					{
						prop: 'val2',
						label: '数值2',
					},
					{
						prop: 'bol2',
						label: '布尔2',
					},
				],
				data: [],
			},
			table7: {
				tableProps: [
					{
						prop: 'time',
						label: '时间',
					},
					{
						prop: 'plcCode',
						label: 'PLC编码',
					},
					{
						prop: 'val1',
						label: '数值1',
					},
					{
						prop: 'bol1',
						label: '布尔1',
					},
					{
						prop: 'val2',
						label: '数值2',
					},
					{
						prop: 'bol2',
						label: '布尔2',
					},
				],
				data: [],
			},
		};
	},
	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);
	},
	methods: {
		/** 查询 */
		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);
		},

		/** 构造 props */
		buildProps() {
			this.tableList.forEach((table) => {
				this.buildTableProp(table);
			});
		},

		/** 构造一个 tableProps - 根据动态结构 */
		buildTableProp(table) {},

		/** 为某个 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>