update 设备全参数

src/views/monitoring/equipmentFullParams/index.vue

@@ -12,93 +12,56 @@
 			ref="search-bar"
 			@headBtnClick="handleSearchBarBtnClick" />
 
-		<div class="tables">
-			<div class="custom-table">
-				<!-- <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)" /> -->
-			</div>
-			<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
+			: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"
-					:page="1"
-					:limit="999"
-					:table-data="table.data"
-					@emitFun="(val) => handleEmitFun(table, val)">
-				</base-table>
+					: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.queryParams.pageNo"
-					:limit.sync="table.queryParams.pageSize"
+					: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>
 	</div>
 </template>
 
 <script>
 import LocalDataManager from './utils/local-data-manager';
 import response from './response';
- 
 
 export default {
 	name: 'EquipmentFullParams',
@@ -152,229 +115,16 @@ export default {
 				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: [],
-			},
+			tableList: [
+				{
+					key: 'base-table__key__1',
+					tableProps: [],
+					list: [],
+					pageNo: 1,
+					pageSize: 3,
+					total: 0,
+				},
+			],
 		};
 	},
 	computed: {
@@ -394,14 +144,104 @@ export default {
 			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({
@@ -425,16 +265,6 @@ export default {
 			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);

src/views/monitoring/equipmentFullParams/response.js

@@ -33,7 +33,8 @@ export default {
 					"plcParamName": "P1V2",
 					"name": "P1V2",
 					"minValue": 10,
-					"maxValue": 90
+					"maxValue": 90,
+					"defaultValue": 24
 				},
 				{
 					"id": "attr-3",
@@ -53,15 +54,16 @@ export default {
 					"id": "attr-5",
 					"plcParamName": "P1V5",
 					"name": "P1V5",
-					"minValue": 10,
-					"maxValue": 99
+					"minValue": null,
+					"maxValue": null
 				},
 				{
 					"id": "attr-6",
 					"plcParamName": "P1V6",
 					"name": "P1V6",
-					"minValue": 10,
-					"maxValue": 90
+					"minValue": null,
+					"maxValue": null,
+					"defaultValue": false
 				},
 			],
 			"nameData": [],