345 lines
8.3 KiB
Vue
345 lines
8.3 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" />
|
||
|
||
<div v-if="tableList.length" class="tables">
|
||
<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.dataManager?.dataList ?? []"
|
||
: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="
|
||
({ page, limit, current }) =>
|
||
getListFor(table, { page, limit, current })
|
||
" />
|
||
</div>
|
||
</div>
|
||
<div v-else class="no-data-bg"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Message } from 'element-ui';
|
||
import LocalDataManager from './utils/local-data-manager';
|
||
// import response from './response';
|
||
import moment from 'moment';
|
||
import { parseTime } from '@/utils/ruoyi'
|
||
|
||
export default {
|
||
name: 'EquipmentFullParams',
|
||
components: {},
|
||
props: {},
|
||
data() {
|
||
// const now = new Date().getTime();
|
||
// const [y, m, d] = [now.getFullYear(), now.getMonth(), now.getDate()];
|
||
const today = new Date().getTime();
|
||
const tenminAgo = new Date(today - (10 * 60 * 1000)).getTime();
|
||
return {
|
||
searchBarFormConfig: [
|
||
{
|
||
type: 'input',
|
||
label: '设备名称',
|
||
placeholder: '请输入设备名称',
|
||
param: 'name',
|
||
disabled: true,
|
||
},
|
||
{
|
||
type: 'input',
|
||
label: '设备编码',
|
||
placeholder: '请输入设备编码',
|
||
param: 'code',
|
||
disabled: true,
|
||
},
|
||
{
|
||
type: 'datePicker',
|
||
label: '时间段',
|
||
dateType: 'datetimerange', // datetimerange
|
||
format: 'yyyy-MM-dd HH:mm:ss',
|
||
// valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||
valueFormat: 'yyyy-MM-dd HH:mm:ss',
|
||
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',
|
||
},
|
||
{
|
||
type: 'button',
|
||
btnName: '返回',
|
||
name: 'return',
|
||
color: 'primary',
|
||
},
|
||
],
|
||
queryParams: {
|
||
equipmentId: null,
|
||
recordTime: [parseTime(tenminAgo), parseTime(today)],
|
||
},
|
||
tableList: [
|
||
// {
|
||
// key: 'base-table__key__1',
|
||
// tableProps: [{
|
||
// prop: 'name',
|
||
// label: 'name'
|
||
// }],
|
||
// dataManager: {dataList: [{name: '1'}]},
|
||
// list: [{
|
||
// name: '11'
|
||
// }],
|
||
// pageNo: 1,
|
||
// pageSize: 3,
|
||
// total: 0,
|
||
// },
|
||
],
|
||
};
|
||
},
|
||
beforeRouteEnter(to, from, next) {
|
||
if (Object.keys(to.params).length > 0) {
|
||
next((vm) => {
|
||
vm.$set(vm.queryParams, 'equipmentId', to.params.equipmentId);
|
||
vm.$set(
|
||
vm.searchBarFormConfig[0],
|
||
'defaultSelect',
|
||
to.params.equipmentName
|
||
);
|
||
vm.$set(
|
||
vm.searchBarFormConfig[1],
|
||
'defaultSelect',
|
||
to.params.equipmentCode
|
||
);
|
||
vm.$set(
|
||
vm.searchBarFormConfig[2],
|
||
'defaultSelect',
|
||
vm.queryParams.recordTime
|
||
);
|
||
vm.handleQuery();
|
||
});
|
||
} else {
|
||
// let timeleft = 3;
|
||
|
||
// const message = Message({
|
||
// type: 'warning',
|
||
// duration: 0,
|
||
// message: `请先选择设备, 即将引导进入设备状态和参数页面, 剩余 ${timeleft} s`,
|
||
// });
|
||
|
||
// const timer = setInterval(() => {
|
||
// if (timeleft > 0) {
|
||
// timeleft--;
|
||
// message.$data.message = `请先选择设备, 即将引导进入设备状态和参数页面, 剩余 ${timeleft} s`
|
||
// return;
|
||
// }
|
||
// message.close();
|
||
// clearInterval(timer);
|
||
// timer = null;
|
||
// }, 1000);
|
||
|
||
// next({ name: 'EquipmentStatusAndParams' });
|
||
next((vm) => {
|
||
vm.$message({
|
||
type: 'error',
|
||
message: `请先选择设备`,
|
||
});
|
||
});
|
||
}
|
||
},
|
||
beforeRouteLeave(to, from, next) {
|
||
// clean job
|
||
this.$set(this.queryParams, 'equipmentId', null);
|
||
this.$set(this.searchBarFormConfig[0], 'defaultSelect', null);
|
||
this.$set(this.searchBarFormConfig[1], 'defaultSelect', null);
|
||
this.tableList = [];
|
||
next();
|
||
},
|
||
methods: {
|
||
buildProps(table) {
|
||
// 通过 otherList 来构建 props
|
||
const { otherList } = table;
|
||
const props = [
|
||
{
|
||
// type: 'index',
|
||
width: 56,
|
||
prop: 'index',
|
||
label: '序号',
|
||
},
|
||
{
|
||
width: 160,
|
||
prop: 'time',
|
||
label: '时间',
|
||
},
|
||
{
|
||
width: 240,
|
||
prop: 'plcCode',
|
||
label: 'PLC编码',
|
||
},
|
||
];
|
||
const firstLineData = {
|
||
index: '参考值： [最小]-[最大][/标准]',
|
||
time: null, // 此处必须是空白
|
||
plcCode: null, // 此处必须是空白
|
||
};
|
||
otherList.forEach((item) => {
|
||
props.push({
|
||
label: item.name,
|
||
prop: item.name,
|
||
// width: 128,
|
||
});
|
||
firstLineData[item.name] = `${item.minValue ?? ''}-${
|
||
item.maxValue ?? ''
|
||
}${item.defaultValue != null ? '/' + item.defaultValue : ''}`;
|
||
});
|
||
return { props, firstLineData };
|
||
},
|
||
|
||
handleResponse(response) {
|
||
const { code, data } = response;
|
||
if (code == 0) {
|
||
// 处理一个表格
|
||
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],
|
||
dataManager: null,
|
||
pageNo: 1,
|
||
pageSize: 5,
|
||
total: 0,
|
||
});
|
||
|
||
// 处理某一表格的各个行
|
||
const { data } = table;
|
||
if (data) {
|
||
data.forEach((row, idx) => {
|
||
const listItem = {
|
||
index: idx + 1,
|
||
time: moment(+row.time).format('YYYY-MM-DD HH:mm:ss'),
|
||
plcCode: row.plcCode,
|
||
};
|
||
row.data.forEach((column) => {
|
||
listItem[column.dynamicName] = column.dynamicValue;
|
||
});
|
||
this.tableList[index].list.push(listItem);
|
||
this.tableList[index].total++;
|
||
});
|
||
|
||
// 处理分页
|
||
const { pageNo, pageSize, list } = this.tableList[index];
|
||
this.tableList[index].dataManager = new LocalDataManager(
|
||
list,
|
||
pageNo,
|
||
pageSize
|
||
);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
spanMethod({ row, column, rowIndex, columnIndex }) {
|
||
if (rowIndex == 0 && columnIndex == 0) {
|
||
return [1, 3];
|
||
} else if (rowIndex == 0 && (columnIndex == 1 || columnIndex == 2)) {
|
||
return [0, 0];
|
||
}
|
||
return [1, 1];
|
||
},
|
||
|
||
/** 查询 */
|
||
async handleQuery() {
|
||
this.handleResponse(
|
||
await this.$axios({
|
||
url: '/monitoring/equipment-monitor/runLog',
|
||
method: 'get',
|
||
params: this.queryParams,
|
||
})
|
||
);
|
||
},
|
||
|
||
async handleSearchBarBtnClick({ btnName, timeVal }) {
|
||
console.log(btnName);
|
||
if (btnName === 'search') {
|
||
if (timeVal && timeVal.length > 0) {
|
||
console.log('nihc ', timeVal)
|
||
if (new Date(timeVal[1]).getTime() - new Date(timeVal[0]).getTime() <= 30 * 60 * 1000) {
|
||
this.queryParams.recordTime = timeVal;
|
||
await this.handleQuery();
|
||
} else {
|
||
this.$message.warning('时间范围最大30分钟限制！')
|
||
}
|
||
} else {
|
||
this.queryParams.recordTime = [];
|
||
this.$message.warning('时间段必选！')
|
||
}
|
||
} else {
|
||
this.$router.go(-1)
|
||
}
|
||
|
||
},
|
||
|
||
handleEmitFun(table, val) {
|
||
console.log('table val', table, val);
|
||
},
|
||
|
||
/** 为某个 table 获取 list 数据 */
|
||
getListFor(table, { page, limit, current }) {
|
||
console.log('get list for', table, { page, limit, current });
|
||
table.dataManager.pageNo = page ?? current;
|
||
table.dataManager.pageSize = limit;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.full-param-page {
|
||
position: relative;
|
||
}
|
||
|
||
.tables {
|
||
/* display: grid; */
|
||
/* grid-template-columns: 1fr 1fr; */
|
||
/* gap: 18px; */
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
}
|
||
|
||
.tables >>> .baseTable {
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.custom-table {
|
||
overflow-x: hidden;
|
||
margin-bottom: 10px;
|
||
}
|
||
</style>
|