119 lines
2.6 KiB
Vue
119 lines
2.6 KiB
Vue
|
<!--
|
||
|
|
filename: index.vue
|
||
|
|
author: liubin
|
||
|
|
date: 2023-08-31 09:14:19
|
||
|
|
description: 设备全参数查询
|
||
|
|
-->
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="app-container">
|
||
|
|
<el-row>设备全参数查询</el-row>
|
||
|
|
<SearchBar
|
||
|
|
:formConfigs="searchBarFormConfig"
|
||
|
|
ref="search-bar"
|
||
|
|
@headBtnClick="handleSearchBarBtnClick" />
|
||
|
|
|
||
|
|
<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)">
|
||
|
|
<!-- <method-btn
|
||
|
|
v-if="tableBtn.length"
|
||
|
|
slot="handleBtn"
|
||
|
|
label="操作"
|
||
|
|
:method-list="tableBtn"
|
||
|
|
@clickBtn="handleTableBtnClick" /> -->
|
||
|
|
</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>
|
||
|
|
export default {
|
||
|
|
name: 'EquipmentFullParams',
|
||
|
|
components: {},
|
||
|
|
props: {},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tableList: [],
|
||
|
|
searchBarFormConfig: [
|
||
|
|
{
|
||
|
|
type: 'input',
|
||
|
|
label: '设备名称',
|
||
|
|
placeholder: '请输入设备名称',
|
||
|
|
param: 'name',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'input',
|
||
|
|
label: '设备编码',
|
||
|
|
placeholder: '请输入设备编码',
|
||
|
|
param: 'codes',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'datePicker',
|
||
|
|
label: '时间段',
|
||
|
|
dateType: 'daterange', // datetimerange
|
||
|
|
format: 'yyyy-MM-dd',
|
||
|
|
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||
|
|
rangeSeparator: '-',
|
||
|
|
startPlaceholder: '开始时间',
|
||
|
|
endPlaceholder: '结束时间',
|
||
|
|
defaultTime: ['00:00:00', '23:59:59'],
|
||
|
|
param: 'timeVal',
|
||
|
|
width: 350,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: 'button',
|
||
|
|
btnName: '查询',
|
||
|
|
name: 'search',
|
||
|
|
color: 'primary',
|
||
|
|
},
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
mounted() {},
|
||
|
|
methods: {
|
||
|
|
/** 查询 */
|
||
|
|
handleQuery() {},
|
||
|
|
|
||
|
|
handleSearchBarBtnClick() {},
|
||
|
|
|
||
|
|
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 lang="scss"></style>
|