zangch
/
JDAirPort.Ems.UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ems): 环境监测记录页面增加设备树筛选功能

Browse Source 
- 添加左侧设备树，支持按设备名称筛选
- 点击树节点时查询对应设备的环境监测记录
- 优化表格列显示，移除主键标识列，增加序号列
- 调整查询参数，支持同时按多个设备 ID 查询
boardTest
zch 2 months ago
parent 2c770d2db4
commit 93f6c6d1a3
1 changed files with 147 additions and 25 deletions
Show Stats Download Patch File Download Diff File

136
src/views/ems/record/recordIotenvInstant/index.vue
Unescape Escape View File

@ -1,5 +1,32 @@
<template>
<div class="app-container">
<el-row :gutter="28">
<el-col :span="5" :xs="24">
<div class="head-container">
<el-input
v-model="workUnitName"
placeholder="请输入物联网设备名称"
clearable
size="small"
prefix-icon="el-icon-search"
style="margin-bottom: 20px"
/>
</div>
<div class="head-container">
<el-tree
:data="monitorInfoOptions"
:props="monitorProps"
:expand-on-click-node="false"
:filter-node-method="filterNode"
ref="tree"
node-key="id"
default-expand-all
highlight-current
@node-click="handleNodeClick"
/>
</div>
</el-col>
<el-col :span="19" :xs="24">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<!-- <el-form-item label="计量设备编号" prop="monitorId">
<el-input
@ -81,14 +108,14 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>-->
<el-form-item label="采集时间" prop="collectTime">
<!-- <el-form-item label="采集时间" prop="collectTime">
<el-date-picker clearable
v-model="queryParams.collectTime"
type="date"
value-format="yyyy-MM-dd"
placeholder="请选择采集时间">
</el-date-picker>
</el-form-item>
</el-form-item>-->
<!-- <el-form-item label="记录时间" prop="recodeTime">
<el-date-picker clearable
v-model="queryParams.recodeTime"
@ -162,7 +189,8 @@
<el-table v-loading="loading" :data="recordIotenvInstantList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键标识" align="center" prop="objid" v-if="columns[0].visible"/>
<!-- <el-table-column label="主键标识" align="center" prop="objid" v-if="columns[0].visible"/>-->
<el-table-column label="序号" type="index" width="55" align="center" v-if="columns[0].visible" />
<el-table-column label="计量设备编号" align="center" prop="monitorId" v-if="columns[1].visible">
</el-table-column>
@ -219,6 +247,9 @@
</el-table-column>
</el-table>
</el-col>
</el-row>
<pagination
v-show="total>0"
:total="total"
@ -288,11 +319,25 @@
<script>
import { listRecordIotenvInstant, getRecordIotenvInstant, delRecordIotenvInstant, addRecordIotenvInstant, updateRecordIotenvInstant } from "@/api/ems/record/recordIotenvInstant";
import {parseTime} from "@/utils/ruoyi";
import {getMonitorInfoTree, listBaseMonitorInfo} from "@/api/ems/base/baseMonitorInfo";
export default {
name: "RecordIotenvInstant",
data() {
return {
workUnitName:null,
//下拉树List
baseMonitorInfoOptions: [],
//左侧树结构List
monitorInfoOptions: [],
//能原类型信息
baseMonitorInfoList: [],
monitorProps: {
children: 'children',
label: 'label'
},
// 记录时间时间范围
daterangeRecordTime: [],
@ -331,7 +376,7 @@
vibrationTemp: null,
collectTime: null,
recodeTime: null,
monitorIds: [],
},
// 表单参数
form: {},
@ -339,7 +384,7 @@
rules: {
},
columns: [
{ key: 0, label: `主键标识`, visible: true },
{ key: 0, label: `标识`, visible: true },
{ key: 1, label: `计量设备编号`, visible: true },
{ key: 2, label: `温度`, visible: true },
{ key: 3, label: `湿度`, visible: true },
@ -350,7 +395,7 @@
{ key: 8, label: `振动-位移(um)`, visible: true },
{ key: 9, label: `振动-加速度(g)`, visible: true },
{ key: 10, label: `振动-温度(℃)`, visible: true },
{ key: 11, label: `采集时间`, visible: true },
{ key: 11, label: `采集时间`, visible: false },
{ key: 12, label: `记录时间`, visible: true },
]
};
@ -365,9 +410,72 @@
this.daterangeRecordTime[1] = today + ' 08:00:00'
this.getTreeMonitorInfo()
this.getTreeselect()
this.getList();
},
watch: {
// 根据名称筛选计量设备树
workUnitName(val) {
this.$refs.tree.filter(val)
}
},
methods: {
/** 转换计量设备信息数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
delete node.children
}
return {
id: node.monitorId,
label: node.monitorName,
children: node.children
}
},
/** 查询计量设备信息下拉树结构 新增用*/
getTreeMonitorInfo() {
listBaseMonitorInfo({ monitorTypeList: [5,6,7,8,9] }).then(response => {
this.baseMonitorInfoOptions = []
const data = { objId: 0, monitorName: '顶级节点', children: [] }
data.children = this.handleTree(response.data, 'objId', 'parentId')
this.baseMonitorInfoOptions.push(data)
})
},
// 递归获取树中所有节点的monitorId
getAllMonitorIds(nodes) {
let ids = [];
if (!nodes || nodes.length === 0) return ids;
nodes.forEach(node => {
if (node.id) {
ids.push(node.id);
}
if (node.children && node.children.length > 0) {
ids = ids.concat(this.getAllMonitorIds(node.children));
}
});
console.log(ids)
return ids;
},
// 筛选节点
filterNode(value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
// 节点单击事件
handleNodeClick(data) {
// 点击节点时清空monitorIds，只使用选中的monitorId
this.queryParams.monitorIds = [];
this.queryParams.monitorId = data.code
this.handleQuery()
},
/** 查询物联网数据列表 */
getList() {
this.loading = true;
@ -382,6 +490,13 @@
this.queryParams.params['endRecordTime'] = this.daterangeRecordTime[1]
}
// 如果没有选中节点，则获取所有设备ID
if (!this.queryParams.monitorId) {
this.queryParams.monitorIds = this.getAllMonitorIds(this.monitorInfoOptions);
}
console.log(this.queryParams.monitorIds)
listRecordIotenvInstant(this.queryParams).then(response => {
this.recordIotenvInstantList = response.rows;
this.total = response.total;
@ -482,7 +597,14 @@
this.download('ems/record/recordIotenvInstant/export', {
...this.queryParams
}, `recordIotenvInstant_${new Date().getTime()}.xlsx`)
}
},
getTreeselect() {
getMonitorInfoTree({ monitorTypeList: [5,6,7,8,9]}).then(response => {
this.monitorInfoOptions = response.data
})
},
}
};
</script>

Write Preview
Loading…
Cancel
Save