lb #19
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user