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> |
<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> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
|
import { spaceTree } from "@/api/region"; |
||||||
|
import { temList } from "@/api/temSys/temMonitor"; |
||||||
export default { |
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> |
</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; /* 滚动条宽度 */ |
||||||
|
} |
||||||
|
|
||||||
|
::-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> |
</style> |
||||||
Loading…
Reference in new issue