40 changed files with 2351 additions and 197 deletions
@ -0,0 +1,10 @@ |
|||||||
|
import request from "@/utils/request"; |
||||||
|
|
||||||
|
// 获取设备策略管理列表
|
||||||
|
export function policyListData(query) { |
||||||
|
return request({ |
||||||
|
url: "/policy/list", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 513 B |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 317 KiB |
|
After Width: | Height: | Size: 277 KiB |
|
After Width: | Height: | Size: 205 KiB |
|
After Width: | Height: | Size: 285 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 217 KiB |
|
After Width: | Height: | Size: 1.6 MiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 186 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 317 B |
|
After Width: | Height: | Size: 783 B |
@ -0,0 +1,433 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<img |
||||||
|
class="right-line" |
||||||
|
src="../../../assets/images/right_line.png" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<div class="delay-title">自动开关机时间设置</div> |
||||||
|
<div class="delaySwitch"> |
||||||
|
<div class="delay-li" v-for="(item, index) in delayList" :key="index"> |
||||||
|
<div class="buildingDiv"> |
||||||
|
<img |
||||||
|
class="title-bg" |
||||||
|
src="../../../assets/images/title-bg.png" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<div class="title-word">{{ item.name }}:</div> |
||||||
|
</div> |
||||||
|
<div class="delay-bottom"> |
||||||
|
<div class="start"> |
||||||
|
<div>初始化</div> |
||||||
|
<img |
||||||
|
class="start-img" |
||||||
|
src="../../../assets/images/start.png" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
<div class="delay-right"> |
||||||
|
<div |
||||||
|
class="delay-context" |
||||||
|
v-for="(children, subIndex) in item.values" |
||||||
|
:key="subIndex + 1" |
||||||
|
> |
||||||
|
<div class="device-arrow"> |
||||||
|
<div class="delay-input"> |
||||||
|
<el-input |
||||||
|
size="mini" |
||||||
|
v-model="children.curValue" |
||||||
|
@keyup.enter.native="handleEnter(children, $event)" |
||||||
|
@input="handleInput(children)" |
||||||
|
@focus="handleFocus(index, subIndex)" |
||||||
|
@blur="handleBlur()" |
||||||
|
></el-input |
||||||
|
>S |
||||||
|
</div> |
||||||
|
<!-- 将 isHovered 状态传递给 dynamic-arrow 组件 --> |
||||||
|
<dynamic-arrow |
||||||
|
:is-hovered="currentFocusIndex === `${index}-${subIndex}`" |
||||||
|
></dynamic-arrow> |
||||||
|
</div> |
||||||
|
<div class="device-body"> |
||||||
|
<div>{{ children.pointName }}</div> |
||||||
|
<img |
||||||
|
v-if="children.pointName === '冷却泵'" |
||||||
|
src="../../../assets/images/coolingPump.png" |
||||||
|
class="butterflyValve" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<img |
||||||
|
v-if="children.pointName === '冷冻泵'" |
||||||
|
src="../../../assets/images/freezingPump.png" |
||||||
|
class="butterflyValve" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<img |
||||||
|
v-if="children.pointName.includes('主机')" |
||||||
|
src="../../../assets/images/host.png" |
||||||
|
class="butterflyValve" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<img |
||||||
|
v-if="children.pointName.includes('塔')" |
||||||
|
src="../../../assets/images/coolingTower.png" |
||||||
|
class="butterflyValve" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<img |
||||||
|
v-if="children.pointName.includes('阀')" |
||||||
|
src="../../../assets/images/butterflyValve.png" |
||||||
|
class="butterflyValve" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<img class="left-line" src="../../../assets/images/left_line.png" alt="" /> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { policyListData } from "@/api/centerairC/strategy"; |
||||||
|
import dynamicArrow from "../../components/dynamicArrow.vue"; |
||||||
|
import { operationConrol } from "@/api/hotWater/waterControl"; |
||||||
|
export default { |
||||||
|
components: { dynamicArrow }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
delayList: [], |
||||||
|
currentFocusIndex: -1, // 用于记录当前鼠标悬停的索引 |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getPolicyList(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 请求列表 |
||||||
|
getPolicyList() { |
||||||
|
let data = { |
||||||
|
systemType: "0", |
||||||
|
funPolicyType: "2", |
||||||
|
}; |
||||||
|
policyListData(data).then((res) => { |
||||||
|
console.log("设备延时开关返回res", res); |
||||||
|
if (res.code == 200) { |
||||||
|
this.delayList = res.rows; |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleFocus(index, subIndex) { |
||||||
|
console.log("index", index); |
||||||
|
// 当 el-input 获得焦点时，更新 focusedIndex |
||||||
|
this.currentFocusIndex = `${index}-${subIndex}`; |
||||||
|
}, |
||||||
|
// 失去焦点 |
||||||
|
handleBlur() { |
||||||
|
this.currentFocusIndex = ""; |
||||||
|
}, |
||||||
|
// 处理输入事件，过滤非数字字符 |
||||||
|
handleInput(item) { |
||||||
|
console.log("校验"); |
||||||
|
// 实时校验并过滤非数字和非小数点字符 |
||||||
|
item.curValue = String(item.curValue).replace(/[^\d.]/g, ""); |
||||||
|
// 确保只有一个小数点 |
||||||
|
const parts = item.curValue.split("."); |
||||||
|
if (parts.length > 2) { |
||||||
|
// 如果有多个小数点，只保留第一个小数点及之前的部分和第一个小数点之后的部分 |
||||||
|
item.curValue = parts[0] + "." + parts[1]; |
||||||
|
} |
||||||
|
// 确保小数点后最多两位 |
||||||
|
if (parts.length === 2) { |
||||||
|
item.curValue = parts[0] + "." + parts[1].slice(0, 2); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 设置延时时间 |
||||||
|
handleEnter(item, event) { |
||||||
|
console.log("item", item); |
||||||
|
console.log("event", event); |
||||||
|
this.$confirm( |
||||||
|
`确定要修改"${item.pointName}"的延迟时间为:${item.curValue} S吗?`, |
||||||
|
"提示", |
||||||
|
{ |
||||||
|
confirmButtonText: "确定", |
||||||
|
cancelButtonText: "取消", |
||||||
|
type: "warning", |
||||||
|
} |
||||||
|
) |
||||||
|
.then(() => { |
||||||
|
this.hadleOperationConrol(item.cpmId, item.curValue); |
||||||
|
// 失去焦点 |
||||||
|
event.target.blur(); |
||||||
|
this.currentFocusIndex = ""; |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
// // 失去焦点 |
||||||
|
// event.target.blur(); |
||||||
|
// this.currentFocusIndex = ""; |
||||||
|
}); |
||||||
|
}, |
||||||
|
hadleOperationConrol(id, param) { |
||||||
|
let data = { |
||||||
|
id: id, |
||||||
|
param: param, |
||||||
|
}; |
||||||
|
console.log("操作参数", data); |
||||||
|
operationConrol([data]) |
||||||
|
.then((res) => { |
||||||
|
if (res.code == 200) { |
||||||
|
this.$modal.msgSuccess("操作成功"); |
||||||
|
// 更新所有设备状态; |
||||||
|
this.getPolicyList(); |
||||||
|
} else { |
||||||
|
// this.$modal.msgError("操作失败"); |
||||||
|
console.log("应该更新状态的"); |
||||||
|
// 更新所有设备状态; |
||||||
|
this.getPolicyList(); |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
console.log("请求发生错误，更新设备状态", error); |
||||||
|
// 更新所有设备状态; |
||||||
|
this.getPolicyList(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.app-container { |
||||||
|
position: relative; |
||||||
|
padding: 0.2rem; |
||||||
|
.delay-title { |
||||||
|
/* 基础样式 */ |
||||||
|
display: inline-block; |
||||||
|
padding: 0.1rem; |
||||||
|
font-family: "Arial Rounded MT Bold", sans-serif; |
||||||
|
font-size: 0.18rem; |
||||||
|
font-weight: 700; |
||||||
|
color: #e6f3ff; |
||||||
|
text-shadow: 0 2px 4px rgba(0, 60, 120, 0.4); |
||||||
|
letter-spacing: 2px; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
cursor: default; |
||||||
|
|
||||||
|
/* 双背景叠加 */ |
||||||
|
background: linear-gradient( |
||||||
|
65deg, |
||||||
|
rgba(1, 11, 24, 0.8) 0%, |
||||||
|
rgba(36, 91, 146, 0.6) 50%, |
||||||
|
rgba(18, 53, 95, 0.5) 100% |
||||||
|
), |
||||||
|
linear-gradient(-25deg, #0b274b 20%, #2b4d6b 80%); |
||||||
|
background-blend-mode: overlay; |
||||||
|
|
||||||
|
/* 动态边框 */ |
||||||
|
border: 2px solid; |
||||||
|
border-image: linear-gradient(45deg, #026bbb, transparent) 1; |
||||||
|
|
||||||
|
|
||||||
|
/* 主流光动画 */ |
||||||
|
&::before { |
||||||
|
content: ""; |
||||||
|
position: absolute; |
||||||
|
top: -50%; |
||||||
|
left: -100%; |
||||||
|
width: 250%; |
||||||
|
height: 200%; |
||||||
|
background: linear-gradient( |
||||||
|
60deg, |
||||||
|
transparent 20%, |
||||||
|
rgba(255, 255, 255, 0.3) 50%, |
||||||
|
transparent 80% |
||||||
|
); |
||||||
|
animation: shine 2.5s infinite linear; |
||||||
|
} |
||||||
|
|
||||||
|
/* 副流光动画 */ |
||||||
|
&::after { |
||||||
|
content: ""; |
||||||
|
position: absolute; |
||||||
|
top: -30%; |
||||||
|
left: -50%; |
||||||
|
width: 200%; |
||||||
|
height: 160%; |
||||||
|
background: linear-gradient( |
||||||
|
-30deg, |
||||||
|
transparent 30%, |
||||||
|
rgba(255, 255, 255, 0.2) 50%, |
||||||
|
transparent 70% |
||||||
|
); |
||||||
|
animation: shineReverse 3s infinite linear; |
||||||
|
animation-delay: 0.8s; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* 主流光动画 */ |
||||||
|
@keyframes shine { |
||||||
|
0% { |
||||||
|
transform: translateX(-20%) rotate(60deg); |
||||||
|
} |
||||||
|
100% { |
||||||
|
transform: translateX(120%) rotate(60deg); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* 反向副流光 */ |
||||||
|
@keyframes shineReverse { |
||||||
|
0% { |
||||||
|
transform: translateX(20%) rotate(-30deg); |
||||||
|
} |
||||||
|
100% { |
||||||
|
transform: translateX(-120%) rotate(-30deg); |
||||||
|
} |
||||||
|
} |
||||||
|
.right-line { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
width: 1.7rem; |
||||||
|
height: 0.4rem; |
||||||
|
} |
||||||
|
.left-line { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
width: 0.5rem; |
||||||
|
height: 2.2rem; |
||||||
|
} |
||||||
|
} |
||||||
|
.delaySwitch { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
background-color: #142c4e; |
||||||
|
border-radius: 10px; |
||||||
|
padding: 0 20px; |
||||||
|
font-size: 18px; |
||||||
|
color: rgb(166, 217, 252); |
||||||
|
.delay-li { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: flex-start; |
||||||
|
padding: 40px 0; |
||||||
|
border-bottom: 1px dashed #0349ac; |
||||||
|
.buildingDiv { |
||||||
|
padding-left: 54px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 20px; |
||||||
|
position: relative; |
||||||
|
.title-bg { |
||||||
|
width: 208px; |
||||||
|
height: 38px; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
z-index: 0; |
||||||
|
} |
||||||
|
.title-word { |
||||||
|
z-index: 10; |
||||||
|
font-family: YouSheBiaoTiHei; |
||||||
|
font-size: 24px; |
||||||
|
color: #ffffff; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
} |
||||||
|
.delay-bottom { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: flex-start; |
||||||
|
.start { |
||||||
|
margin-right: 20px; |
||||||
|
margin-top: 10px; |
||||||
|
white-space: nowrap; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
.start-img { |
||||||
|
width: 70px; |
||||||
|
height: 70px; |
||||||
|
margin-top: 10px; |
||||||
|
animation: rotateZ 5s linear infinite; |
||||||
|
transition: 0.6s; /* 设置过渡时间，控制翻转速度 */ |
||||||
|
transform-style: preserve-3d; /* 保持子元素的 3D 效果 */ |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
} |
||||||
|
/* 定义旋转动画 */ |
||||||
|
@keyframes rotateZ { |
||||||
|
0% { |
||||||
|
transform: rotateY(0deg); /* 初始状态，不旋转 */ |
||||||
|
} |
||||||
|
50% { |
||||||
|
transform: rotateY(180deg); /* 旋转到 180 度，呈现翻面效果 */ |
||||||
|
} |
||||||
|
100% { |
||||||
|
transform: rotateY(360deg); /* 旋转回 360 度，回到初始状态 */ |
||||||
|
} |
||||||
|
} |
||||||
|
.delay-right { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
.delay-context { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 20px; |
||||||
|
min-width: 150px; |
||||||
|
.device-arrow { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
.device-body { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
margin: 0px 30px; |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
.butterflyValve { |
||||||
|
width: 70px; |
||||||
|
height: 70px; |
||||||
|
margin-top: 10px; |
||||||
|
padding: 5px; |
||||||
|
border-radius: 5px; |
||||||
|
background-color: #2c4970; |
||||||
|
} |
||||||
|
} |
||||||
|
.delay-input { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: nowrap; |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.delay-li:nth-last-child(1) { |
||||||
|
border-bottom: none; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
<style scoped> |
||||||
|
.delay-input >>> .el-input { |
||||||
|
width: 80px !important; |
||||||
|
margin: 0 15px 0 5px; |
||||||
|
} |
||||||
|
.delay-input >>> .el-input__inner { |
||||||
|
background-color: #04193a; |
||||||
|
border: 1px solid #1262db; |
||||||
|
color: #3ef0fd; |
||||||
|
font-weight: 700; |
||||||
|
text-align: center; |
||||||
|
padding: 0 0.1rem !important; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,348 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container policy-flex"> |
||||||
|
<div |
||||||
|
class="policy" |
||||||
|
:class="{ 'radio-style': hasRadioInput(item.values) }" |
||||||
|
v-for="(item, index) in policyList" |
||||||
|
:key="index" |
||||||
|
> |
||||||
|
<div class="policy-title">{{ item.name }}</div> |
||||||
|
<div |
||||||
|
class="policy-li" |
||||||
|
v-for="(children, index) in item.values" |
||||||
|
:key="index + 1" |
||||||
|
> |
||||||
|
<template v-if="children.inputType === 'text'"> |
||||||
|
<div>{{ children.pointName }}:</div> |
||||||
|
<div class="right-data"> |
||||||
|
<el-input |
||||||
|
v-if="children.inputType === 'text'" |
||||||
|
v-model="children.curValue" |
||||||
|
placeholder="请输入" |
||||||
|
size="mini" |
||||||
|
@keyup.enter.native="handleEnter(children)" |
||||||
|
@input="handleInput(children)" |
||||||
|
></el-input> |
||||||
|
<div v-if="children.inputType === 'radio'"> |
||||||
|
<el-radio-group |
||||||
|
v-model="children.curValue" |
||||||
|
@change="handleRadioChange(children, item)" |
||||||
|
> |
||||||
|
<el-radio |
||||||
|
:label="option.pointName" |
||||||
|
v-for="option in item.values" |
||||||
|
:key="option.id" |
||||||
|
>{{ option.pointName }}</el-radio |
||||||
|
> |
||||||
|
</el-radio-group> |
||||||
|
</div> |
||||||
|
<div class="unit">{{ children.unit }}</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<template v-if="children.inputType === 'radio'"> |
||||||
|
<div class="right-data"> |
||||||
|
<el-radio-group |
||||||
|
v-model="children.curValue" |
||||||
|
@change="handleRadioChange(children, item)" |
||||||
|
> |
||||||
|
<el-radio border :label="children.pointName">{{ |
||||||
|
children.pointName |
||||||
|
}}</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { policyListData } from "@/api/centerairC/strategy"; |
||||||
|
import { operationConrol } from "@/api/hotWater/waterControl"; |
||||||
|
export default { |
||||||
|
name: "deviceStrategy", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
policyList: [], |
||||||
|
policyDetails: [], |
||||||
|
value: "", |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getPolicyList(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 如果有radio,则需要改变policy类名的样式了 |
||||||
|
hasRadioInput(values) { |
||||||
|
return values.some((child) => child.inputType === "radio"); |
||||||
|
}, |
||||||
|
// 请求列表 |
||||||
|
getPolicyList() { |
||||||
|
let data = { |
||||||
|
systemType: "0", |
||||||
|
funPolicyType: "1", |
||||||
|
}; |
||||||
|
policyListData(data).then((res) => { |
||||||
|
console.log("策略返回res", res); |
||||||
|
if (res.code == 200) { |
||||||
|
this.policyList = res.rows; |
||||||
|
this.initRadioSelection(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 处理初始页面时候radio的默认选中值 |
||||||
|
initRadioSelection() { |
||||||
|
this.policyList.forEach((item) => { |
||||||
|
item.values.forEach((children) => { |
||||||
|
if (children.inputType === "radio") { |
||||||
|
if (Number(children.curValue) == 0) { |
||||||
|
// console.log("当前项是0", children.curValue); |
||||||
|
children.curValue = null; // 设置为 null 确保 radio 不选中 |
||||||
|
} else { |
||||||
|
console.log("当前项是1", children.curValue); |
||||||
|
const selectedOption = item.values.find( |
||||||
|
(option) => option.curValue === 1 |
||||||
|
); |
||||||
|
// 选中当前的pointName |
||||||
|
if (selectedOption) { |
||||||
|
children.curValue = selectedOption.pointName; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 处理输入事件，过滤非数字字符 |
||||||
|
handleInput(children) { |
||||||
|
console.log("校验"); |
||||||
|
// 实时校验并过滤非数字和非小数点字符 |
||||||
|
children.curValue = String(children.curValue).replace(/[^\d.]/g, ""); |
||||||
|
// 确保只有一个小数点 |
||||||
|
const parts = children.curValue.split("."); |
||||||
|
if (parts.length > 2) { |
||||||
|
// 如果有多个小数点，只保留第一个小数点及之前的部分和第一个小数点之后的部分 |
||||||
|
children.curValue = parts[0] + "." + parts[1]; |
||||||
|
} |
||||||
|
// 确保小数点后最多两位 |
||||||
|
if (parts.length === 2) { |
||||||
|
children.curValue = parts[0] + "." + parts[1].slice(0, 2); |
||||||
|
} |
||||||
|
}, |
||||||
|
handleEnter(children) { |
||||||
|
console.log("请求后端", children); |
||||||
|
this.$confirm( |
||||||
|
`确定要修改"${children.pointName}"的数据为:${children.curValue} ${children.unit}吗?`, |
||||||
|
"提示", |
||||||
|
{ |
||||||
|
confirmButtonText: "确定", |
||||||
|
cancelButtonText: "取消", |
||||||
|
type: "warning", |
||||||
|
} |
||||||
|
) |
||||||
|
.then(() => { |
||||||
|
this.hadleOperationConrol(children.cpmId, children.curValue); |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
// 用户取消操作，需要更新原来的频率 |
||||||
|
// this.getOperationList(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleRadioChange(children, item) { |
||||||
|
this.$confirm( |
||||||
|
`确定要修改"${item.name}"的数据为:${children.curValue} ${children.unit}吗?`, |
||||||
|
"提示", |
||||||
|
{ |
||||||
|
confirmButtonText: "确定", |
||||||
|
cancelButtonText: "取消", |
||||||
|
type: "warning", |
||||||
|
} |
||||||
|
) |
||||||
|
.then(() => { |
||||||
|
console.log("children.curValue", children.curValue); |
||||||
|
if (children.curValue) { |
||||||
|
this.hadleOperationConrol(children.cpmId, "1"); |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch(() => { |
||||||
|
// 用户取消操作，需要更新原来的数据 |
||||||
|
children.curValue = "0"; |
||||||
|
}); |
||||||
|
}, |
||||||
|
hadleOperationConrol(id, param) { |
||||||
|
let data = { |
||||||
|
id: id, |
||||||
|
param: param, |
||||||
|
}; |
||||||
|
console.log("操作参数", data); |
||||||
|
operationConrol([data]) |
||||||
|
.then((res) => { |
||||||
|
if (res.code == 200) { |
||||||
|
this.$modal.msgSuccess("操作成功"); |
||||||
|
// 更新所有设备状态; |
||||||
|
this.getPolicyList(); |
||||||
|
} else { |
||||||
|
// this.$modal.msgError("操作失败"); |
||||||
|
console.log("应该更新状态的"); |
||||||
|
// 更新所有设备状态; |
||||||
|
this.getPolicyList(); |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
console.log("请求发生错误，更新设备状态", error); |
||||||
|
// 更新所有设备状态; |
||||||
|
this.getPolicyList(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.policy-flex { |
||||||
|
margin-top: 15px; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
.policy { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
position: relative; |
||||||
|
width: calc(33.33% - 40px); |
||||||
|
margin: 0 20px; |
||||||
|
min-height: 300px; |
||||||
|
background-image: url(../../../assets/images/strategy-border.png); |
||||||
|
background-size: 100% 100%; |
||||||
|
border-bottom: 1px solid #1587cc; |
||||||
|
border-left: 1px solid #1587cc; |
||||||
|
margin-bottom: 25px; |
||||||
|
padding: 70px 60px 20px 40px; |
||||||
|
.policy-title { |
||||||
|
font-size: 0.18rem; |
||||||
|
font-weight: bold; |
||||||
|
position: absolute; |
||||||
|
top: 15px; |
||||||
|
left: 25px; |
||||||
|
margin-bottom: 25px; |
||||||
|
} |
||||||
|
.policy-li { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
z-index: 0; |
||||||
|
font-size: 0.16rem; |
||||||
|
color: #94b8ce; |
||||||
|
margin-bottom: 10px; |
||||||
|
.right-data { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
justify-content: flex-start; |
||||||
|
flex-wrap: wrap; |
||||||
|
// max-width: 2.5rem; |
||||||
|
.unit { |
||||||
|
width: 25px; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
} |
||||||
|
.el-input { |
||||||
|
width: 80px !important; |
||||||
|
margin: 0 15px 0 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.radio-style { |
||||||
|
display: flex; |
||||||
|
flex-direction: row !important; |
||||||
|
align-items: flex-start !important; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-content: flex-start; /* 调整多行元素的对齐方式 */ |
||||||
|
.policy-li { |
||||||
|
margin: 10px; |
||||||
|
width: calc(50% - 20px) !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
@media (min-width: 1560px) and (max-width: 1670px) { |
||||||
|
.policy { |
||||||
|
padding: 70px 0.3rem 20px 40px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
@media (min-width: 1400px) and (max-width: 1560px) { |
||||||
|
.policy { |
||||||
|
padding: 70px 0.3rem 20px 40px !important; |
||||||
|
width: calc(33.33% - 20px) !important; |
||||||
|
margin: 0 10px 25px 10px !important; |
||||||
|
} |
||||||
|
.policy-li { |
||||||
|
font-size: 14px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
@media (min-width: 1340px) and (max-width: 1400px) { |
||||||
|
.policy { |
||||||
|
padding: 70px 0.3rem 20px 40px !important; |
||||||
|
width: calc(33.33% - 20px) !important; |
||||||
|
margin: 0 10px 25px 10px !important; |
||||||
|
} |
||||||
|
.policy-li { |
||||||
|
font-size: 14px !important; |
||||||
|
} |
||||||
|
.radio-style { |
||||||
|
padding: 70px 0.3rem 20px 20px !important; |
||||||
|
.policy-li { |
||||||
|
width: calc(50% - 20px) !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
@media (min-width: 1025px) and (max-width: 1340px) { |
||||||
|
.policy { |
||||||
|
width: calc(49% - 20px) !important; |
||||||
|
margin: 0 10px 25px 10px !important; |
||||||
|
padding: 70px 30px 15px 40px !important; |
||||||
|
} |
||||||
|
.policy-title { |
||||||
|
font-size: 16px !important; |
||||||
|
} |
||||||
|
.policy-li { |
||||||
|
font-size: 14px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
@media (max-width: 1240px) { |
||||||
|
.policy { |
||||||
|
width: calc(80% - 20px) !important; |
||||||
|
margin: 0 10px 25px 10px !important; |
||||||
|
padding: 70px 60px 15px 40px !important; |
||||||
|
} |
||||||
|
.policy-title { |
||||||
|
font-size: 16px !important; |
||||||
|
left: 40px !important; |
||||||
|
} |
||||||
|
.policy-li { |
||||||
|
font-size: 14px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
<style scoped> |
||||||
|
.policy-li >>> .el-input__inner { |
||||||
|
background-color: #04193a; |
||||||
|
border: 1px solid #1262db; |
||||||
|
color: #3ef0fd; |
||||||
|
font-weight: 700; |
||||||
|
text-align: center; |
||||||
|
padding: 0 0.1rem !important; |
||||||
|
} |
||||||
|
.policy-li >>> .el-radio { |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
.policy-li >>> .el-radio__label { |
||||||
|
color: #3ef0fd; |
||||||
|
} |
||||||
|
.policy-li >>> .el-radio__inner { |
||||||
|
border: 1px solid #042063; |
||||||
|
/* background-color: transparent !important; */ |
||||||
|
} |
||||||
|
.policy-li >>> .el-radio.is-bordered { |
||||||
|
border: 1px solid #2c6afa; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
<template> |
||||||
|
<div class="arrow"> |
||||||
|
<!-- 循环渲染 5 个圆点图片 --> |
||||||
|
<img |
||||||
|
v-for="i in 5" |
||||||
|
:key="i" |
||||||
|
class="yuan" |
||||||
|
src="../../assets/images/yuan.png" |
||||||
|
alt="" |
||||||
|
:class="{ 'animate-yuan': isHovered }" |
||||||
|
/> |
||||||
|
<!-- 渲染右箭头图片 --> |
||||||
|
<img |
||||||
|
class="arrow-l" |
||||||
|
src="../../assets/images/arrow-l.png" |
||||||
|
alt="" |
||||||
|
:class="{ 'animate-arrow': isHovered }" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
isHovered: { |
||||||
|
type: Boolean, |
||||||
|
default: false, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.arrow { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
.yuan { |
||||||
|
width: 6px; |
||||||
|
height: 6px; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.arrow-l { |
||||||
|
width: 15px; |
||||||
|
height: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
/* 圆点动画 */ |
||||||
|
@keyframes yuanAnimation { |
||||||
|
0% { |
||||||
|
transform: scale(1) translateX(0); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
50% { |
||||||
|
transform: scale(1.2) translateX(5px); /* 增加向右移动 5px，可按需调整 */ |
||||||
|
opacity: 0.6; |
||||||
|
} |
||||||
|
100% { |
||||||
|
transform: scale(1) translateX(0); |
||||||
|
opacity: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* 箭头动画 */ |
||||||
|
@keyframes arrowAnimation { |
||||||
|
0% { |
||||||
|
transform: translateX(0); |
||||||
|
} |
||||||
|
50% { |
||||||
|
transform: translateX(10px); /* 根据实际情况调整移动距离 */ |
||||||
|
} |
||||||
|
100% { |
||||||
|
transform: translateX(0); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* 应用圆点动画的类 */ |
||||||
|
.animate-yuan { |
||||||
|
animation: yuanAnimation 1s infinite; |
||||||
|
} |
||||||
|
|
||||||
|
/* 应用箭头动画的类 */ |
||||||
|
.animate-arrow { |
||||||
|
animation: arrowAnimation 1s infinite; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,126 @@ |
|||||||
|
<template> |
||||||
|
<div class="monitor-container"> |
||||||
|
<!-- 水箱图片 --> |
||||||
|
<img class="monitor-img3" src="../../assets/images/waterBox.png" /> |
||||||
|
<!-- 表示水的 div --> |
||||||
|
<div class="waves" :style="{ height: waterHeight + '%' }"> |
||||||
|
<div class="wave wave1"></div> |
||||||
|
<div class="wave wave2"></div> |
||||||
|
<div class="wave wave3"></div> |
||||||
|
<div class="wave wave4"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
// 接收父组件传来的数字 |
||||||
|
props: { |
||||||
|
waterLevel: { |
||||||
|
type: Number, |
||||||
|
default: 0, |
||||||
|
validator: (value) => { |
||||||
|
// 确保传入的数字在 0 到 100 之间 |
||||||
|
return value >= 0 && value <= 100; |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
// 计算水的高度百分比 |
||||||
|
waterHeight() { |
||||||
|
return this.waterLevel; |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.monitor-container { |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.monitor-img3 { |
||||||
|
width: 1.2rem; |
||||||
|
height: 1.3rem; |
||||||
|
} |
||||||
|
.waves { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
width: 100%; |
||||||
|
/* 修改颜色表示，添加透明度 */ |
||||||
|
background-color: rgba(23, 106, 201, 0.1); |
||||||
|
overflow: hidden; |
||||||
|
.wave { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: url(../../assets/images/wave.png); |
||||||
|
background-size: 200% 100%; |
||||||
|
} |
||||||
|
.wave1 { |
||||||
|
opacity: 1; |
||||||
|
top: 0; |
||||||
|
z-index: 1000; |
||||||
|
animation: animate 4s linear infinite; |
||||||
|
} |
||||||
|
.wave2 { |
||||||
|
opacity: 0.5; |
||||||
|
top: 0.2rem; |
||||||
|
z-index: 999; |
||||||
|
animation: animate2 4s linear infinite; |
||||||
|
} |
||||||
|
.wave3 { |
||||||
|
opacity: 0.2; |
||||||
|
top: 0.3rem; |
||||||
|
z-index: 999; |
||||||
|
animation: animate 2s linear infinite; |
||||||
|
} |
||||||
|
.wave4 { |
||||||
|
opacity: 0.7; |
||||||
|
top: 0.4rem; |
||||||
|
z-index: 999; |
||||||
|
animation: animate2 2s linear infinite; |
||||||
|
} |
||||||
|
} |
||||||
|
@keyframes animate{ |
||||||
|
0%{ |
||||||
|
background-position-x: 110px; |
||||||
|
} |
||||||
|
100%{ |
||||||
|
background-position-x: 0px; |
||||||
|
} |
||||||
|
} |
||||||
|
@keyframes animate2{ |
||||||
|
0%{ |
||||||
|
background-position-x: 0px; |
||||||
|
} |
||||||
|
100%{ |
||||||
|
background-position-x: 110px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 1400px) and (max-width: 1620px) { |
||||||
|
.monitor-img3 { |
||||||
|
width: 110px !important; |
||||||
|
height: 120px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (min-width: 1240px) and (max-width: 1400px) { |
||||||
|
.monitor-img3 { |
||||||
|
width: 90px !important; |
||||||
|
height: 100px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 1240px) { |
||||||
|
.monitor-img3 { |
||||||
|
width: 100px !important; |
||||||
|
height: 110px !important; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,18 +1,361 @@ |
|||||||
<template> |
<template> |
||||||
<div>热水监测</div> |
<div class="app-container"> |
||||||
</template> |
<div class="left-tree"> |
||||||
|
<!-- 为 el-tree 设置一个固定的高度和滚动条 --> |
||||||
<script> |
<div style="height: 750px; overflow-y: auto"> |
||||||
import { monitorList } from "@/api/centerairC/sysMonitor"; |
<el-tree |
||||||
export default { |
ref="tree" |
||||||
data() { |
:data="treeData" |
||||||
return { |
node-key="id" |
||||||
deviceList: [], |
:default-expand-all="false" |
||||||
}; |
:default-expanded-keys="expandedKeys" |
||||||
}, |
:auto-expand-parent="true" |
||||||
mounted() {}, |
icon-class="none" |
||||||
methods: {}, |
@node-expand="handleNodeExpand" |
||||||
}; |
@node-collapse="handleNodeCollapse" |
||||||
</script> |
:highlight-current="true" |
||||||
|
@node-click="handleNodeClick" |
||||||
<style></style> |
> |
||||||
|
<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"> |
||||||
|
<div class="buildingDiv"> |
||||||
|
<img |
||||||
|
class="title-bg" |
||||||
|
src="../../../assets/images/title-bg.png" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<div class="title-word">楼层：{{ currentName }}</div> |
||||||
|
</div> |
||||||
|
<div class="details-header"> |
||||||
|
<el-tabs v-model="activeName" @tab-click="handleClick"> |
||||||
|
<el-tab-pane label="热泵" name="first"> </el-tab-pane> |
||||||
|
<el-tab-pane label="高区水泵" name="second"> </el-tab-pane> |
||||||
|
<el-tab-pane label="低区水泵" name="three"> </el-tab-pane> |
||||||
|
<el-tab-pane label="水箱" name="four"> </el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { spaceTree } from "@/api/region"; |
||||||
|
import { waterOperateList, operationConrol } from "@/api/hotWater/waterControl"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
loading: false, |
||||||
|
treeData: [], |
||||||
|
defaultProps: { |
||||||
|
children: "children", |
||||||
|
label: "label", |
||||||
|
}, |
||||||
|
deviceList: [], |
||||||
|
expandedKeys: [], |
||||||
|
currentId: "", //当前选中高亮的id |
||||||
|
currentName: "", //当前选中的名称 |
||||||
|
currentLevel: "", //当前节点的层级 |
||||||
|
currentParentId: "", //当前节点的上级的id |
||||||
|
|
||||||
|
activeName: "first", //设备管理 |
||||||
|
}; |
||||||
|
}, |
||||||
|
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, 2); |
||||||
|
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); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 递归函数，用于去除指定层级往后的 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-opened"; // 三级菜单展开时的图标类名 |
||||||
|
} |
||||||
|
return "el-icon-document"; // 三级菜单收缩时的图标类名 |
||||||
|
} |
||||||
|
if (node.expanded) { |
||||||
|
return "el-icon-folder-opened"; // 非三级菜单展开时的图标类名 |
||||||
|
} |
||||||
|
return "el-icon-folder-add"; // 非三级菜单收缩时的图标类名 |
||||||
|
}, |
||||||
|
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("第4层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); |
||||||
|
return; |
||||||
|
} |
||||||
|
}, |
||||||
|
handleClick(tab, event) { |
||||||
|
console.log(tab, event); |
||||||
|
console.log("activeName", this.activeName); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.app-container { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: stretch; |
||||||
|
height: 100%; |
||||||
|
.left-tree { |
||||||
|
width: 216px; |
||||||
|
padding: 15px 10px; |
||||||
|
border: 1px solid #004b8c; |
||||||
|
min-height: 800px; |
||||||
|
.status { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-between; |
||||||
|
flex-wrap: wrap; |
||||||
|
margin-top: 20px; |
||||||
|
.status-li { |
||||||
|
width: 50%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
margin-bottom: 15px; |
||||||
|
} |
||||||
|
.status1, |
||||||
|
.status2, |
||||||
|
.status3, |
||||||
|
.status4 { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 5px; |
||||||
|
} |
||||||
|
.status1::before { |
||||||
|
content: ""; |
||||||
|
width: 10px; |
||||||
|
height: 10px; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: #00d2ff; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
.status2::before { |
||||||
|
content: ""; |
||||||
|
width: 10px; |
||||||
|
height: 10px; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: #ff2f2f; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
.status3::before { |
||||||
|
content: ""; |
||||||
|
width: 10px; |
||||||
|
height: 10px; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: #ff9908; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
.status4::before { |
||||||
|
content: ""; |
||||||
|
width: 10px; |
||||||
|
height: 10px; |
||||||
|
border-radius: 50%; |
||||||
|
background-color: #7398c7; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.right-monitor { |
||||||
|
width: calc(100% - 240px); |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: flex-start; |
||||||
|
.buildingDiv { |
||||||
|
padding-left: 54px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 20px; |
||||||
|
position: relative; |
||||||
|
.title-bg { |
||||||
|
width: 208px; |
||||||
|
height: 38px; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
z-index: 0; |
||||||
|
} |
||||||
|
.title-word { |
||||||
|
z-index: 10; |
||||||
|
font-family: YouSheBiaoTiHei; |
||||||
|
font-size: 24px; |
||||||
|
color: #ffffff; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
} |
||||||
|
.monitor-context { |
||||||
|
height: 640px; |
||||||
|
width: 100%; |
||||||
|
overflow-y: auto; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: flex-start; |
||||||
|
justify-content: flex-start; |
||||||
|
flex-wrap: wrap; |
||||||
|
align-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> |
||||||
|
|||||||
Loading…
Reference in new issue