update 基本完成设备全参数查询

src/views/monitoring/equipmentFullParams/index.vue

@@ -36,13 +36,13 @@
 			"
 			@emitFun="(val) => handleEmitFun(table, val)"></base-table> -->
 
-		<div class="tables-s">
+		<div 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.list"
+					:table-data="table.dataManager?.dataList ?? []"
 					:span-method="spanMethod"
 					@emitFun="(val) => handleEmitFun(table, val)"></base-table>
 				<pagination
@@ -53,8 +53,14 @@
 					:limit.sync="table.pageSize"
 					:page-size="table.pageSize"
 					:page-sizes="[1, 3, 5, 10, 20]"
-					@pagination="(val) => getListFor(table, val)" />
+					@pagination="
+						({ page, limit, current }) =>
+							getListFor(table, { page, limit, current })
+					" />
 			</div>
+			<!-- v-show="table.dataManager?.total > 0"
+				:total="table.dataManager?.total || 0" -->
+			<!-- @size-change="($event) => handleSizeChange(table, $event)" -->
 		</div>
 	</div>
 </template>
@@ -62,6 +68,7 @@
 <script>
 import LocalDataManager from './utils/local-data-manager';
 import response from './response';
+import moment from 'moment';
 
 export default {
 	name: 'EquipmentFullParams',
@@ -159,47 +166,36 @@ export default {
 					prop: 'index',
 					label: '序号',
 					align: 'center',
-					// children: [{ label: '参考值： [最小]-[最大][/标准]' }],
 				},
 				{
-					width: 128,
+					width: 160,
 					prop: 'time',
 					label: '时间',
 					align: 'center',
-					// children: [{ label: '参考值： [最小]-[最大][/标准]' }],
 				},
 				{
-					width: 128,
+					width: 200,
 					prop: 'plcCode',
 					label: 'PLC编码',
 					align: 'center',
-					// children: [{ label: '参考值： [最小]-[最大][/标准]' }],
 				},
 			];
 			const firstLineData = {
 				index: '参考值： [最小]-[最大][/标准]',
-				time: '参考值： [最小]-[最大][/标准]',
+				time: null, // 此处必须是空白
-				plcCode: '参考值： [最小]-[最大][/标准]',
+				plcCode: null, // 此处必须是空白
 			};
 			otherList.forEach((item) => {
 				props.push({
 					label: item.name,
 					align: 'center',
-					// children: [
+					prop: item.name,
-					// 	{
+					width: 128,
-					// 		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 };
 		},
 
@@ -207,6 +203,8 @@ export default {
 			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);
@@ -214,31 +212,44 @@ export default {
 						key: 'base-table__key__' + index,
 						tableProps,
 						list: [firstLineData],
+						dataManager: null,
 						pageNo: 1,
 						pageSize: 5,
 						total: 0,
 					});
+
+					// 处理某一表格的各个行
+					const { data } = table;
+					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
+					);
 				});
 			}
 		},
 
-		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 == 0 && columnIndex == 0) {
-			if (rowIndex == 1 && columnIndex == 0) {
-				console.log('herer..............');
 				return [1, 3];
+			} else if (rowIndex == 0 && (columnIndex == 1 || columnIndex == 2)) {
+				return [0, 0];
 			}
-			console.log('therer..............');
 			return [1, 1];
 		},
 
@@ -266,8 +277,10 @@ export default {
 		},
 
 		/** 为某个 table 获取 list 数据 */
-		getListFor(table, val) {
+		getListFor(table, { page, limit, current }) {
-			console.log('get list for', table, val);
+			console.log('get list for', table, { page, limit, current });
+			table.dataManager.pageNo = page ?? current;
+			table.dataManager.pageSize = limit;
 		},
 	},
 };
@@ -287,4 +300,8 @@ export default {
 .tables >>> .baseTable {
 	overflow-x: hidden;
 }
+
+.custom-table {
+	overflow-x: hidden;
+}
 </style>

src/views/monitoring/equipmentFullParams/response.js

@@ -122,6 +122,126 @@ export default {
 			],
 			"nameData": [],
 			"otherMap": []
+		},
+		// 一个表格
+		{
+			"data": [
+				// 一行参数
+				{
+					"time": "1694056100800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				},
+				{
+					"time": "1694056102800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				},
+				{
+					"time": "1694056109800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				},
+				{
+					"time": "1694066109800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				},
+				{
+					"time": "1694067109800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				},
+				{
+					"time": "1694068109800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				},
+				{
+					"time": "1694069109800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				},
+				{
+					"time": "1694071109800",
+					"plcCode": "PLC_CODE_2",
+					"data": [
+						// 一个参数值
+						{ "id": 'param-1', "parentId": 0, "dynamicName": "P1V1", "dynamicValue": 15 },
+						{ "id": 'param-2', "parentId": 0, "dynamicName": "P1V2", "dynamicValue": 15 },
+						{ "id": 'param-3', "parentId": 0, "dynamicName": "P1V3", "dynamicValue": 15 },
+
+					]
+				}
+			],
+			"otherList": [
+				// 一个参数的属性
+				{
+					"id": "attr-1",
+					"plcParamName": "P1V1",
+					"name": "P1V1", // 和 dynamicName 对应
+					"minValue": 1,
+					"maxValue": 100
+				},
+				{
+					"id": "attr-2",
+					"plcParamName": "P1V2",
+					"name": "P1V2",
+					"minValue": 10,
+					"maxValue": 90
+				},
+				{
+					"id": "attr-3",
+					"plcParamName": "P1V3",
+					"name": "P1V3",
+					"minValue": 10,
+					"maxValue": 98
+				}
+			],
+			"nameData": [],
+			"otherMap": []
 		}
 	]
 }

src/views/monitoring/equipmentFullParams/utils/local-data-manager.js

@@ -5,16 +5,23 @@ export default class LocalDataManager {
         this._pageSize = pageSize;
     }
 
-    setPageNo(pageNo) {
+    set pageNo(pageNo) {
+        console.log('set pageNo', pageNo);
         this._pageNo = pageNo;
     }
 
-    setPageSize(pageSize) {
+    set pageSize(pageSize) {
+        console.log('set pageSize', pageSize);
         this._pageSize = pageSize;
     }
 
     get dataList() {
-        return this._dataListStore.slice((this._pageNo - 1) * this._pageSize, this._pageNo * this._pageSize);
+        const firstLine = this._dataListStore[0];
+        const realDataList = this._dataListStore.slice(1);
+        return [
+            firstLine,
+            ...realDataList.slice((this._pageNo - 1) * this._pageSize, this._pageNo * this._pageSize)
+        ]
     }
 
     get total() {