291 lines
7.1 KiB
Vue
291 lines
7.1 KiB
Vue
<!--
|
|
filename: index.vue
|
|
author: liubin
|
|
date: 2023-08-31 09:14:19
|
|
description: 设备全参数查询
|
|
-->
|
|
|
|
<template>
|
|
<div class="app-container full-param-page">
|
|
<SearchBar
|
|
:formConfigs="searchBarFormConfig"
|
|
ref="search-bar"
|
|
@headBtnClick="handleSearchBarBtnClick" />
|
|
|
|
<!-- <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"
|
|
: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.pageNo"
|
|
:limit.sync="table.pageSize"
|
|
:page-size="table.pageSize"
|
|
:page-sizes="[1, 3, 5, 10, 20]"
|
|
@pagination="(val) => getListFor(table, val)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import LocalDataManager from './utils/local-data-manager';
|
|
import response from './response';
|
|
|
|
export default {
|
|
name: 'EquipmentFullParams',
|
|
components: {},
|
|
props: {},
|
|
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 {
|
|
tableList: [],
|
|
searchBarFormConfig: [
|
|
{
|
|
type: 'input',
|
|
label: '设备名称',
|
|
placeholder: '请输入设备名称',
|
|
param: 'name',
|
|
disabled: true,
|
|
},
|
|
{
|
|
type: 'input',
|
|
label: '设备编码',
|
|
placeholder: '请输入设备编码',
|
|
param: 'code',
|
|
disabled: true,
|
|
},
|
|
{
|
|
type: 'datePicker',
|
|
label: '时间段',
|
|
dateType: 'daterange', // datetimerange
|
|
format: 'yyyy-MM-dd HH:mm:ss',
|
|
// valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
|
valueFormat: 'timestamp',
|
|
rangeSeparator: '-',
|
|
startPlaceholder: '开始时间',
|
|
endPlaceholder: '结束时间',
|
|
defaultTime: ['00:00:00', '23:59:59'],
|
|
param: 'timeVal',
|
|
width: 350,
|
|
// defaultSelect: [new Date(aWeekAgo), new Date(today)],
|
|
},
|
|
{
|
|
type: 'button',
|
|
btnName: '查询',
|
|
name: 'search',
|
|
color: 'primary',
|
|
},
|
|
],
|
|
queryParams: {
|
|
id: null,
|
|
time: [new Date(aWeekAgo), new Date(today)],
|
|
},
|
|
tableList: [
|
|
{
|
|
key: 'base-table__key__1',
|
|
tableProps: [],
|
|
list: [],
|
|
pageNo: 1,
|
|
pageSize: 3,
|
|
total: 0,
|
|
},
|
|
],
|
|
};
|
|
},
|
|
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);
|
|
|
|
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({
|
|
url: '/monitoring/equipment-monitor/runLog',
|
|
method: 'get',
|
|
params: this.queryParams,
|
|
});
|
|
console.log('data', data);
|
|
},
|
|
|
|
async handleSearchBarBtnClick({ btnName, timeVal }) {
|
|
if (timeVal && timeVal.length > 0) {
|
|
this.queryParams.time = timeVal;
|
|
} else {
|
|
this.queryParams.time = [];
|
|
}
|
|
await this.handleQuery();
|
|
},
|
|
|
|
handleEmitFun(table, val) {
|
|
console.log('table val', table, val);
|
|
},
|
|
|
|
/** 为某个 table 获取 list 数据 */
|
|
getListFor(table, val) {
|
|
console.log('get list for', table, val);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.full-param-page {
|
|
position: relative;
|
|
}
|
|
|
|
.tables {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 18px;
|
|
}
|
|
|
|
.tables >>> .baseTable {
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|