update 设备全参数查询

This commit is contained in:
lb 2023-08-31 16:11:41 +08:00
parent 0e6c01e578
commit 62256b57a5

View File

@ -6,14 +6,64 @@
--> -->
<template> <template>
<div class="app-container"> <div class="app-container full-param-page">
<el-row>设备全参数查询</el-row>
<SearchBar <SearchBar
:formConfigs="searchBarFormConfig" :formConfigs="searchBarFormConfig"
ref="search-bar" ref="search-bar"
@headBtnClick="handleSearchBarBtnClick" /> @headBtnClick="handleSearchBarBtnClick" />
<div class="tables"> <div class="tables">
<base-table
:key="1 + '__basetable'"
:table-props="table1.tableProps"
:page="1"
:limit="999"
:table-data="table1.data"
@emitFun="(val) => handleEmitFun(table1, val)"></base-table>
<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-wrapper" v-for="table in tableList" :key="table.key">
<div class="table-title">PLC 1</div> <div class="table-title">PLC 1</div>
<base-table <base-table
@ -23,15 +73,7 @@
:limit="999" :limit="999"
:table-data="table.data" :table-data="table.data"
@emitFun="(val) => handleEmitFun(table, val)"> @emitFun="(val) => handleEmitFun(table, val)">
<!-- <method-btn
v-if="tableBtn.length"
slot="handleBtn"
label="操作"
:method-list="tableBtn"
@clickBtn="handleTableBtnClick" /> -->
</base-table> </base-table>
<!-- 分页组件 -->
<pagination <pagination
v-show="table.total > 0" v-show="table.total > 0"
:total="table.total" :total="table.total"
@ -39,7 +81,7 @@
:limit.sync="table.queryParams.pageSize" :limit.sync="table.queryParams.pageSize"
@pagination="(val) => getListFor(table, val)" /> @pagination="(val) => getListFor(table, val)" />
</div> </div>
</div> </div> -->
</div> </div>
</template> </template>
@ -49,6 +91,10 @@ export default {
components: {}, components: {},
props: {}, props: {},
data() { data() {
const now = new Date();
const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
const today = new Date(y, m, d, 0, 0, 0, 0).getTime();
const aWeekAgo = today - 3600 * 1000 * 24 * 7;
return { return {
tableList: [], tableList: [],
searchBarFormConfig: [ searchBarFormConfig: [
@ -57,18 +103,20 @@ export default {
label: '设备名称', label: '设备名称',
placeholder: '请输入设备名称', placeholder: '请输入设备名称',
param: 'name', param: 'name',
disabled: true,
}, },
{ {
type: 'input', type: 'input',
label: '设备编码', label: '设备编码',
placeholder: '请输入设备编码', placeholder: '请输入设备编码',
param: 'codes', param: 'code',
disabled: true,
}, },
{ {
type: 'datePicker', type: 'datePicker',
label: '时间段', label: '时间段',
dateType: 'daterange', // datetimerange dateType: 'daterange', // datetimerange
format: 'yyyy-MM-dd', format: 'yyyy-MM-dd HH:mm:ss',
valueFormat: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss',
rangeSeparator: '-', rangeSeparator: '-',
startPlaceholder: '开始时间', startPlaceholder: '开始时间',
@ -76,6 +124,7 @@ export default {
defaultTime: ['00:00:00', '23:59:59'], defaultTime: ['00:00:00', '23:59:59'],
param: 'timeVal', param: 'timeVal',
width: 350, width: 350,
defaultSelect: [new Date(aWeekAgo), new Date(today)],
}, },
{ {
type: 'button', type: 'button',
@ -84,14 +133,315 @@ export default {
color: 'primary', color: 'primary',
}, },
], ],
queryParams: {
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: [
{
time: 1111111111111111,
plcCode: 2,
val1: 3,
bol1: 4,
val2: 5,
bol2: 6,
},
{
time: 1,
plcCode: 22222222222222,
val1: 3,
bol1: 4,
val2: 5,
bol2: 6,
},
{
time: 1,
plcCode: 2,
val1: 33333333333333,
bol1: 4,
val2: 5,
bol2: 6,
},
{
time: 1,
plcCode: 2,
val1: 3,
bol1: 44444444444444,
val2: 5,
bol2: 6,
},
{
time: 1,
plcCode: 2,
val1: 3,
bol1: 4,
val2: 5555555555555,
bol2: 6,
},
{
time: 1,
plcCode: 2,
val1: 3,
bol1: 4,
val2: 5,
bol2: 6666666666666666666,
},
{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
{ time: 1, plcCode: 2, val1: 3, bol1: 4, val2: 5, bol2: 6 },
],
},
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: [],
},
}; };
}, },
mounted() {}, computed: {
id() {
return this.$route.params.equipmentId;
},
code() {
return this.$route.params.equipmentCode;
},
name() {
return this.$route.params.equipmentName;
},
},
mounted() {
if (this.id) this.$set(this.queryParams, 'id', this.id);
if (this.code)
this.$set(this.searchBarFormConfig[0], 'defaultSelect', this.code);
if (this.name)
this.$set(this.searchBarFormConfig[1], 'defaultSelect', this.name);
},
methods: { methods: {
/** 查询 */ /** 查询 */
handleQuery() {}, handleQuery() {},
handleSearchBarBtnClick() {}, handleSearchBarBtnClick() {},
handleEmitFun(table, val) { handleEmitFun(table, val) {
console.log('table val', table, val); console.log('table val', table, val);
@ -115,4 +465,24 @@ export default {
}; };
</script> </script>
<style scoped lang="scss"></style> <style scoped>
.full-param-page {
/* overflow-y: auto; */
background: lightblue;
position: relative;
}
/* .full-param-page >>> .baseTable:not(:last-child) {
margin-bottom: 18px;
} */
.tables {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.tables >>> .baseTable {
overflow-x: hidden;
}
</style>