test #47
@ -36,13 +36,13 @@
|
|||||||
"
|
"
|
||||||
@emitFun="(val) => handleEmitFun(table, val)"></base-table> -->
|
@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">
|
<div class="custom-table" v-for="table in tableList" :key="table.key">
|
||||||
<!-- {{ JSON.stringify(spanMethod) }} -->
|
<!-- {{ JSON.stringify(spanMethod) }} -->
|
||||||
<base-table
|
<base-table
|
||||||
:key="table.key + '__basetable'"
|
:key="table.key + '__basetable'"
|
||||||
:table-props="table.tableProps"
|
:table-props="table.tableProps"
|
||||||
:table-data="table.list"
|
:table-data="table.dataManager?.dataList ?? []"
|
||||||
:span-method="spanMethod"
|
:span-method="spanMethod"
|
||||||
@emitFun="(val) => handleEmitFun(table, val)"></base-table>
|
@emitFun="(val) => handleEmitFun(table, val)"></base-table>
|
||||||
<pagination
|
<pagination
|
||||||
@ -53,8 +53,14 @@
|
|||||||
:limit.sync="table.pageSize"
|
:limit.sync="table.pageSize"
|
||||||
:page-size="table.pageSize"
|
:page-size="table.pageSize"
|
||||||
:page-sizes="[1, 3, 5, 10, 20]"
|
:page-sizes="[1, 3, 5, 10, 20]"
|
||||||
@pagination="(val) => getListFor(table, val)" />
|
@pagination="
|
||||||
|
({ page, limit, current }) =>
|
||||||
|
getListFor(table, { page, limit, current })
|
||||||
|
" />
|
||||||
</div>
|
</div>
|
||||||
|
<!-- v-show="table.dataManager?.total > 0"
|
||||||
|
:total="table.dataManager?.total || 0" -->
|
||||||
|
<!-- @size-change="($event) => handleSizeChange(table, $event)" -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -62,6 +68,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import LocalDataManager from './utils/local-data-manager';
|
import LocalDataManager from './utils/local-data-manager';
|
||||||
import response from './response';
|
import response from './response';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'EquipmentFullParams',
|
name: 'EquipmentFullParams',
|
||||||
@ -159,47 +166,36 @@ export default {
|
|||||||
prop: 'index',
|
prop: 'index',
|
||||||
label: '序号',
|
label: '序号',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
// children: [{ label: '参考值: [最小]-[最大][/标准]' }],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
width: 128,
|
width: 160,
|
||||||
prop: 'time',
|
prop: 'time',
|
||||||
label: '时间',
|
label: '时间',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
// children: [{ label: '参考值: [最小]-[最大][/标准]' }],
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
width: 128,
|
width: 200,
|
||||||
prop: 'plcCode',
|
prop: 'plcCode',
|
||||||
label: 'PLC编码',
|
label: 'PLC编码',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
// children: [{ label: '参考值: [最小]-[最大][/标准]' }],
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
const firstLineData = {
|
const firstLineData = {
|
||||||
index: '参考值: [最小]-[最大][/标准]',
|
index: '参考值: [最小]-[最大][/标准]',
|
||||||
time: '参考值: [最小]-[最大][/标准]',
|
time: null, // 此处必须是空白
|
||||||
plcCode: '参考值: [最小]-[最大][/标准]',
|
plcCode: null, // 此处必须是空白
|
||||||
};
|
};
|
||||||
otherList.forEach((item) => {
|
otherList.forEach((item) => {
|
||||||
props.push({
|
props.push({
|
||||||
label: item.name,
|
label: item.name,
|
||||||
align: 'center',
|
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 ?? ''}-${
|
firstLineData[item.name] = `${item.minValue ?? ''}-${
|
||||||
item.maxValue ?? ''
|
item.maxValue ?? ''
|
||||||
}${item.defaultValue != null ? '/' + item.defaultValue : ''}`;
|
}${item.defaultValue != null ? '/' + item.defaultValue : ''}`;
|
||||||
});
|
});
|
||||||
console.log('new props:', props);
|
|
||||||
return { props, firstLineData };
|
return { props, firstLineData };
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -207,6 +203,8 @@ export default {
|
|||||||
const { code, data } = response;
|
const { code, data } = response;
|
||||||
if (code == 0) {
|
if (code == 0) {
|
||||||
console.log('response', code, data);
|
console.log('response', code, data);
|
||||||
|
|
||||||
|
// 处理一个表格
|
||||||
data.forEach((table, index) => {
|
data.forEach((table, index) => {
|
||||||
console.log('handle index:', index, table);
|
console.log('handle index:', index, table);
|
||||||
const { props: tableProps, firstLineData } = this.buildProps(table);
|
const { props: tableProps, firstLineData } = this.buildProps(table);
|
||||||
@ -214,31 +212,44 @@ export default {
|
|||||||
key: 'base-table__key__' + index,
|
key: 'base-table__key__' + index,
|
||||||
tableProps,
|
tableProps,
|
||||||
list: [firstLineData],
|
list: [firstLineData],
|
||||||
|
dataManager: null,
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
pageSize: 5,
|
pageSize: 5,
|
||||||
total: 0,
|
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 }) {
|
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];
|
return [1, 3];
|
||||||
|
} else if (rowIndex == 0 && (columnIndex == 1 || columnIndex == 2)) {
|
||||||
|
return [0, 0];
|
||||||
}
|
}
|
||||||
console.log('therer..............');
|
|
||||||
return [1, 1];
|
return [1, 1];
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -266,8 +277,10 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
/** 为某个 table 获取 list 数据 */
|
/** 为某个 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 {
|
.tables >>> .baseTable {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-table {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -122,6 +122,126 @@ export default {
|
|||||||
],
|
],
|
||||||
"nameData": [],
|
"nameData": [],
|
||||||
"otherMap": []
|
"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": []
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -5,16 +5,23 @@ export default class LocalDataManager {
|
|||||||
this._pageSize = pageSize;
|
this._pageSize = pageSize;
|
||||||
}
|
}
|
||||||
|
|
||||||
setPageNo(pageNo) {
|
set pageNo(pageNo) {
|
||||||
|
console.log('set pageNo', pageNo);
|
||||||
this._pageNo = pageNo;
|
this._pageNo = pageNo;
|
||||||
}
|
}
|
||||||
|
|
||||||
setPageSize(pageSize) {
|
set pageSize(pageSize) {
|
||||||
|
console.log('set pageSize', pageSize);
|
||||||
this._pageSize = pageSize;
|
this._pageSize = pageSize;
|
||||||
}
|
}
|
||||||
|
|
||||||
get dataList() {
|
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() {
|
get total() {
|
||||||
|
Loading…
Reference in New Issue
Block a user