|
|
@@ -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); |
|
|
|