Browse Source
2.系统监测页面区别冷却塔的风机 3.系统控制：列表中手动自动两个位置调换、当自动的时候频率调节输入框禁止输入、设备增加运行时间、冷却塔列表的本地远程状态去掉 4.修复系统一些页面Input设置值enter后再enter的bug错误 5.设备策略：当自动模式选择定时模式的时候，先请求设备定时开关列表是否有定时设置启用，再进行确认操作 6.设备策略需求量、优先级、优先级编号根据返回的min-max值区间选择select(写实现逻辑)dev
10 changed files with 737 additions and 133 deletions
@ -1,13 +1,263 @@
|
||||
<template> |
||||
<div>温度监测控制</div> |
||||
<div class="app-container"> |
||||
<div class="left-tree"> |
||||
<!-- 为 el-tree 设置一个固定的高度和滚动条 --> |
||||
<div style="height: 7rem; overflow-y: auto"> |
||||
<el-tree |
||||
ref="tree" |
||||
:data="treeData" |
||||
node-key="id" |
||||
:default-expand-all="false" |
||||
:default-expanded-keys="expandedKeys" |
||||
:auto-expand-parent="true" |
||||
icon-class="none" |
||||
@node-expand="handleNodeExpand" |
||||
@node-collapse="handleNodeCollapse" |
||||
:highlight-current="true" |
||||
@node-click="handleNodeClick" |
||||
> |
||||
<template #default="{ node }"> |
||||
<span class="custom-tree-node"> |
||||
<!-- 根据节点状态动态设置图标类名 --> |
||||
<div class="tree-left"> |
||||
<i :class="getIconClass(node)" class="custom-tree-icon"></i> |
||||
<span class="tree-label">{{ node.label }}</span> |
||||
</div> |
||||
</span> |
||||
</template> |
||||
</el-tree> |
||||
</div> |
||||
</div> |
||||
<div class="right-monitor">111</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { spaceTree } from "@/api/region"; |
||||
import { temList } from "@/api/temSys/temMonitor"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
treeData: [], |
||||
defaultProps: { |
||||
children: "children", |
||||
label: "label", |
||||
}, |
||||
deviceList: [], |
||||
expandedKeys: [], |
||||
currentId: "", //当前选中高亮的id |
||||
currentName: "", //当前选中的名称 |
||||
currentLevel: "", //当前节点的层级 |
||||
currentParentId: "", //当前节点的上级的id |
||||
|
||||
} |
||||
tableData: [], //系统状态表格数据 |
||||
}; |
||||
}, |
||||
mounted() { |
||||
this.getSysBuild(); |
||||
}, |
||||
methods: { |
||||
getSysBuild() { |
||||
spaceTree().then((res) => { |
||||
if (res.code == 200) { |
||||
// 只需要保留热水的系统 |
||||
console.log("楼栋返回值", res); |
||||
let newRes = { ...res }; |
||||
|
||||
if (newRes.data && newRes.data[0] && newRes.data[0].children) { |
||||
newRes.data[0].children = newRes.data[0].children.filter((item) => { |
||||
// 假设子项有一个 label属性，用于检查是否包含 "热水" |
||||
return item.label && item.label.includes("温度监测"); |
||||
}); |
||||
} |
||||
// 指定要保留的最大层级（从 1 开始计数），这里假设指定为第 4 级 |
||||
const targetLevel = 4; |
||||
// 从 data[0] 开始处理，当前层级为 1 |
||||
if (newRes.data[0]) { |
||||
this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel); |
||||
} |
||||
console.log("筛选后的新结果", newRes); |
||||
this.treeData = newRes.data; |
||||
this.$nextTick(() => { |
||||
// 默认展开节点 |
||||
this.getExpandedKeys(this.treeData, 1); |
||||
if (this.treeData.length > 0) { |
||||
// 找到最后一层的第一个子节点 |
||||
const lastLevelFirstChild = this.findLastLevelFirstChild( |
||||
this.treeData[0] |
||||
); |
||||
// this.$refs.tree.setCurrentKey( |
||||
// this.treeData[0].children[0].children[0].children[0].id |
||||
// ); |
||||
// 设置当前选中的节点,默认高亮 |
||||
this.$refs.tree.setCurrentKey(lastLevelFirstChild.id); |
||||
// 更新当前节点的信息 |
||||
this.currentId = lastLevelFirstChild.id; |
||||
this.currentLevel = lastLevelFirstChild.level; |
||||
this.currentName = lastLevelFirstChild.label; |
||||
console.log("当前选中节点ID", this.currentId); |
||||
console.log("当前选中节点层级", this.currentLevel); |
||||
console.log("当前选中节点名称", this.currentName); |
||||
this.getTemList(); |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
}, |
||||
// 递归函数，用于去除指定层级往后的 children 数据 |
||||
removeChildrenAfterLevel(obj, currentLevel, targetLevel) { |
||||
if (currentLevel >= targetLevel) { |
||||
// 当达到指定层级时，将 children 属性置为空数组 |
||||
obj.children = []; |
||||
return; |
||||
} |
||||
if (obj.children && obj.children.length > 0) { |
||||
// 若存在 children 数组，则递归处理每个子项 |
||||
for (let i = 0; i < obj.children.length; i++) { |
||||
this.removeChildrenAfterLevel( |
||||
obj.children[i], |
||||
currentLevel + 1, |
||||
targetLevel |
||||
); |
||||
} |
||||
} |
||||
}, |
||||
// 递归函数，找到最后一层的第一个子节点 |
||||
findLastLevelFirstChild(node, level = 1) { |
||||
if (!node.children || node.children.length === 0) { |
||||
return { |
||||
id: node.id, |
||||
level, |
||||
label: node.label, |
||||
}; |
||||
} |
||||
return this.findLastLevelFirstChild(node.children[0], level + 1); |
||||
}, |
||||
// 默认只展示一二级菜单 |
||||
getExpandedKeys(nodes, level) { |
||||
nodes.forEach((node) => { |
||||
if (level <= this.currentId + 4) { |
||||
this.expandedKeys.push(node.id); |
||||
} |
||||
if (node.children) { |
||||
this.getExpandedKeys(node.children, level + 1); |
||||
} |
||||
}); |
||||
}, |
||||
// 更换图标 |
||||
getIconClass(node) { |
||||
// console.log("当前图标的节点内容", node); |
||||
if (node.level === 4) { |
||||
// 4级菜单时的图标 |
||||
if (node.expanded) { |
||||
return "el-icon-document"; // 4级菜单展开时的图标类名 |
||||
} |
||||
return "el-icon-document"; // 4级菜单收缩时的图标类名 |
||||
} |
||||
if (node.expanded) { |
||||
return "el-icon-folder-opened"; // 4三级菜单展开时的图标类名 |
||||
} |
||||
return "el-icon-folder-add"; // 4三级菜单收缩时的图标类名 |
||||
}, |
||||
handleNodeExpand(node) { |
||||
// 节点展开时触发 |
||||
}, |
||||
handleNodeCollapse(node) { |
||||
// 节点收缩时触发 |
||||
}, |
||||
// 点击当前节点，保存节点内容 |
||||
handleNodeClick(node, data) { |
||||
console.log("点击的当前节点", node, data); |
||||
if (data.level !== 4) { |
||||
console.log("不是第4层000"); |
||||
// 设置当前选中的节点,默认高亮 |
||||
this.$refs.tree.setCurrentKey(this.currentId); |
||||
console.log("当前选中节点ID", this.currentId); |
||||
console.log("当前选中节点层级", this.currentLevel); |
||||
console.log("当前选中节点名称", this.currentName); |
||||
} else { |
||||
console.log("第5层111"); |
||||
this.currentId = node.id; |
||||
this.currentLevel = data.level; |
||||
this.currentName = node.label; |
||||
// 设置当前选中的节点,默认高亮 |
||||
this.$refs.tree.setCurrentKey(this.currentId); |
||||
console.log("当前选中节点ID", this.currentId); |
||||
console.log("当前选中节点层级", this.currentLevel); |
||||
console.log("当前选中节点名称", this.currentName); |
||||
this.getTemList(); |
||||
} |
||||
}, |
||||
getTemList() { |
||||
let data = { |
||||
systemType: "4", |
||||
floorId: this.currentId, |
||||
}; |
||||
temList(data).then((res) => { |
||||
console.log("温度返回", res); |
||||
if (res.code == 200) { |
||||
} |
||||
}); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
<style lang="scss" scoped> |
||||
.app-container { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-between; |
||||
flex-wrap: nowrap; |
||||
align-items: stretch; |
||||
height: 100%; |
||||
.left-tree { |
||||
width: 256px; |
||||
padding: 15px 10px 10px 10px; |
||||
border: 1px solid #004b8c; |
||||
} |
||||
.right-monitor { |
||||
width: calc(100% - 280px); |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: flex-start; |
||||
} |
||||
} |
||||
.tree-container { |
||||
height: 300px; /* 设置固定高度 */ |
||||
overflow-y: auto; /* 启用垂直滚动条 */ |
||||
} |
||||
// 滚动条 |
||||
:-webkit-scrollbar { |
||||
width: 10px; /* 滚动条宽度 */ |
||||
} |
||||
|
||||
</style> |
||||
::-webkit-scrollbar-track { |
||||
background: transparent !important; /* 滚动条轨道背景色 */ |
||||
} |
||||
.custom-tree-node { |
||||
flex: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
font-size: 14px; |
||||
padding-right: 8px; |
||||
.tree-left { |
||||
.custom-tree-icon { |
||||
margin-right: 5px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
<style scoped> |
||||
/* 自定义高亮颜色 */ |
||||
.left-tree |
||||
>>> .el-tree--highlight-current |
||||
.el-tree-node.is-current |
||||
> .el-tree-node__content { |
||||
background-color: #285b9e !important; |
||||
/* color: #f56c6c; */ |
||||
color: #25f1f8; |
||||
} |
||||
</style> |
||||
|
||||
Loading…
Reference in new issue