lijianfu
/
eemcs_ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'dev' of https://git.mhito.net/lijianfu/eemcs_ui into dev

dev
3067418132@qq.com 3 weeks ago
parent
eb3216bb25 f6b8819104
commit
34d278afdf
2 changed files with 297 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 286
      src/views/components/monitor/hotWaterMonitor.vue
  2. 2
      src/views/components/monitor/index.vue

286
src/views/components/monitor/hotWaterMonitor.vue
Unescape View File

@ -78,8 +78,10 @@
<!-- 循环加热泵定位-->
<img class="cycle-pipeline" src="../../../assets/flowimg/cycle-pipeline.png" alt="" />
<img class="cyclepum1" :src="getCyclePump1Img()" alt="" />
<img class="cyclepum2" :src="getCyclePump2Img()" alt="" />
<img class="cyclepum1" :src="getCyclePump1Img()" alt=""
@click="handleCyclePumpClick('主楼1号循环泵')" />
<img class="cyclepum2" :src="getCyclePump2Img()" alt=""
@click="handleCyclePumpClick('主楼2号循环泵')" />
<!-- 热泵定位 -->
<div :class="getHotPumPositionClass">
<div class="hotPump-li" v-for="(item, index) in tableData" :key="index">
@ -292,7 +294,8 @@
: require('../../../assets/flowimg/onlineweb.png')
" alt="" />
<!-- 保温水箱1定位 -->
<img class="waterBox3" src="../../../assets/flowimg/waterBox.png" alt="" />
<img class="waterBox3" src="../../../assets/flowimg/waterBox.png"
@click="handleWaterBoxClick('贵宾楼水箱')" alt="" />
<!-- 温度定位1 -->
<img class="tem3" src="../../../assets/flowimg/thermometer.png" alt="" />
@ -390,15 +393,99 @@
</div>
<!-- 热泵操作弹框 -->
<el-dialog :title="hotPumpTitle" :visible.sync="hotPumpDialogVisible" width="500px"
<el-dialog :title="hotPumpTitle" :visible.sync="hotPumpDialogVisible" width="450px"
:close-on-click-modal="false" :modal-append-to-body="true" :append-to-body="true" :z-index="9999"
custom-class="hot-pump-dialog">
<div v-if="hotPumpOperateData" class="hot-pump-dialog-content">
<!-- 水箱类型显示的内容 -->
<template v-if="currentPumpType === 'waterBox'">
<!-- 实际液位 -->
<div class="dialog-item">
<label class="dialog-label">实际液位：</label>
<span class="dialog-value">{{ hotPumpOperateData.waterLevel }}米</span>
</div>
<!-- 实际温度 -->
<div class="dialog-item">
<label class="dialog-label">实际温度：</label>
<span class="dialog-value">{{ hotPumpOperateData.temp }}℃</span>
</div>
<!-- 补水液位1 -->
<div class="dialog-item">
<label class="dialog-label">补水液位1：</label>
<el-input size="mini" style="width:100px" v-model="hotPumpOperateData.waterLevelSet"
placeholder="请输入" @keyup.enter.native="
handleEnter(
hotPumpOperateData,
hotPumpOperateData.waterLevelSet,
hotPumpOperateData.waterLevelSetId,
'液位设置',
'米'
)
" @input="handleInput(hotPumpOperateData)" @blur="handleBlur()"></el-input>
<span class="unit">米</span>
</div>
<!-- 补水误差1 -->
<div class="dialog-item">
<label class="dialog-label">补水误差1：</label>
<el-input size="mini" style="width:100px" v-model="hotPumpOperateData.waterLevelErrorSet"
placeholder="请输入" @keyup.enter.native="
handleEnter(
hotPumpOperateData,
hotPumpOperateData.waterLevelErrorSet,
hotPumpOperateData.waterLevelErrorSetId,
'液位误差值1',
'米'
)
" @input="handleInput(hotPumpOperateData)" @blur="handleBlur()"></el-input>
<span class="unit">米</span>
</div>
<!-- 补水液位2 -->
<div class="dialog-item">
<label class="dialog-label">补水液位1：</label>
<el-input size="mini" style="width:100px" v-model="hotPumpOperateData.waterLevelSet1"
placeholder="请输入" @keyup.enter.native="
handleEnter(
hotPumpOperateData,
hotPumpOperateData.waterLevelSet1,
hotPumpOperateData.waterLevelSetId1,
'液位设置',
'米'
)
" @input="handleInput(hotPumpOperateData)" @blur="handleBlur()"></el-input>
<span class="unit">米</span>
</div>
<!-- 补水误差2 -->
<div class="dialog-item">
<label class="dialog-label">补水误差1：</label>
<el-input size="mini" style="width:100px" v-model="hotPumpOperateData.waterLevelErrorSet1"
placeholder="请输入" @keyup.enter.native="
handleEnter(
hotPumpOperateData,
hotPumpOperateData.waterLevelErrorSet1,
hotPumpOperateData.waterLevelErrorSetId1,
'液位误差值1',
'米'
)
" @input="handleInput(hotPumpOperateData)" @blur="handleBlur()"></el-input>
<span class="unit">米</span>
</div>
<!-- 时间 -->
<div class="dialog-item">
<label class="dialog-label">时间：</label>
<span class="dialog-value">{{ hotPumpOperateData.curTime }}</span>
</div>
</template>
<!-- 热泵类型显示的内容 -->
<template v-if="currentPumpType === 'hotpump'">
<!-- 开关控制 -->
<div class="dialog-item">
<label class="dialog-label">开关控制：</label>
<el-switch style="display: block" v-model="hotPumpOperateData.hotPumpStatus" active-color="#13ce66"
active-text="开机" inactive-text="关机" @change="handleHotPump(item)">
<el-switch style="display: block" v-model="hotPumpOperateData.hotPumpStatus"
active-color="#13ce66" active-text="开机" inactive-text="关机"
@change="handleHotPump(hotPumpOperateData)">
</el-switch>
</div>
@ -431,7 +518,8 @@
<!-- 设定温度 -->
<div class="dialog-item">
<label class="dialog-label">设定温度：</label>
<el-input size="mini" style="width:100px" v-model="hotPumpOperateData.tempSet" placeholder="请输入" @keyup.enter.native="
<el-input size="mini" style="width:100px" v-model="hotPumpOperateData.tempSet" placeholder="请输入"
@keyup.enter.native="
handleEnter(
hotPumpOperateData,
hotPumpOperateData.tempSet,
@ -442,6 +530,54 @@
" @input="handleInput(hotPumpOperateData)" @blur="handleBlur()"></el-input>
<span class="unit">℃</span>
</div>
</template>
<!-- 循环泵类型显示的内容 -->
<template v-if="currentPumpType === 'cyclepump'">
<!-- 手自动状态 -->
<div class="dialog-item">
<label class="dialog-label">手自动状态：</label>
<el-switch style="display: block" v-model="hotPumpOperateData.handAutomaticSwitch"
active-color="#13ce66" active-text="手动" inactive-text="自动"
@change="handAutomatic(hotPumpOperateData)">
</el-switch>
</div>
<!-- 启停控制 -->
<div class="dialog-item">
<label class="dialog-label">启停控制：</label>
<el-switch style="display: block" v-model="hotPumpOperateData.switchStatus"
active-color="#13ce66" active-text="启动" inactive-text="停止"
@change="handleSwitch(hotPumpOperateData)">
</el-switch>
</div>
<!-- 故障信息 -->
<div class="dialog-item">
<label class="dialog-label">故障信息：</label>
<el-tag size="mini" v-if="hotPumpOperateData.alarmStatus === '无故障'" type="success">{{
hotPumpOperateData.alarmStatus
}}</el-tag>
<el-tag size="mini" v-else type="danger">{{
hotPumpOperateData.alarmStatus
}}</el-tag>
</div>
<!-- 运行状态 -->
<div class="dialog-item">
<label class="dialog-label">运行状态：</label>
<el-tag size="mini" v-if="hotPumpOperateData.runningStatus === '运行'" type="success">{{
hotPumpOperateData.runningStatus
}}</el-tag>
<el-tag size="mini" v-else type="danger">不运行</el-tag>
</div>
<!-- 累计运行时间 -->
<div class="dialog-item">
<label class="dialog-label">累计运行：</label>
<span class="dialog-value">{{ hotPumpOperateData.runningTime || '0' }} 小时</span>
</div>
</template>
</div>
</el-dialog>
</div>
@ -502,9 +638,9 @@ export default {
// 热泵弹框相关
hotPumpDialogVisible: false, // 弹框显示状态
currentHotPump: null, // 当前点击的热泵对象
hotPumpOperateData: null, // 热泵操作数据
hotPumpTitle: "", //弹框标题
currentPumpType: "", // 当前点击的类型：hotpump(热泵) / cyclepump(循环泵) / tank(水箱) / sensor(传感器) 等
};
},
computed: {
@ -581,7 +717,7 @@ export default {
if (this.level4Nodes.length > 0) {
this.treeAutoRotateTimer = setInterval(() => {
this.autoRotateTree();
}, 300000); // 5分钟 = 300000毫秒
}, 5 * 60 * 1000); // 5分钟 = 300000毫秒
console.log("树形结构自动轮播定时器已启动，间隔：5分钟");
}
@ -917,32 +1053,50 @@ export default {
// 点击热泵图片事件
handleHotPumpClick(item) {
console.log("点击热泵", item);
this.currentHotPump = item;
this.hotPumpTitle = item.pumpName
// 请求热泵操作数据
this.currentPumpType = "hotpump";
this.hotPumpTitle = item.pumpName;
this.loadOperateData("热泵", item.pumpName);
},
// 点击水箱事件
handleWaterBoxClick(boxName) {
console.log("水箱", boxName);
this.currentPumpType = "waterBox";
this.hotPumpTitle = boxName;
this.loadOperateData("水箱", boxName);
},
// 点击循环泵事件
handleCyclePumpClick(pumpName) {
console.log("点击循环泵", pumpName);
this.currentPumpType = "cyclepump";
this.hotPumpTitle = pumpName;
this.loadOperateData("贵宾楼循环泵", pumpName);
},
// 加载操作数据（通用方法）
loadOperateData(groupName, itemName) {
console.log("groupName, itemName", groupName, itemName)
let data = {
systemType: "1",
floorId: this.currentId,
};
waterOperateList(data).then((res) => {
console.log("热泵操作数据返回", res);
console.log("操作数据返回", res);
if (res.code === 200 && res.rows) {
// 找到name为"热泵"的children数组
let hotPumpGroup = null;
// 找到对应组的children数组
let targetGroup = null;
if (Array.isArray(res.rows)) {
hotPumpGroup = res.rows.find(group => group.name === "热泵");
targetGroup = res.rows.find(group => group.name === groupName);
} else if (res.rows.children && Array.isArray(res.rows.children)) {
hotPumpGroup = res.rows.children.find(group => group.name === "热泵");
targetGroup = res.rows.children.find(group => group.name === groupName);
}
if (hotPumpGroup && hotPumpGroup.children) {
// 根据pumpName匹配对应的子项
const matchedItem = hotPumpGroup.children.find(child => child.name === item.pumpName);
if (targetGroup && targetGroup.children) {
// 根据name匹配对应的子项
const matchedItem = targetGroup.children.find(child => child.name === itemName);
if (matchedItem) {
// 设置弹框数据
this.hotPumpOperateData = {
...matchedItem,
waterLevel: Number(matchedItem.waterLevel),
runningStatus: Number(matchedItem.runningStatus) === 0 ? "停止" : "运行", //运行状态
hotPumpStatus:
Number(matchedItem.switchStatus) === 0
@ -952,21 +1106,26 @@ export default {
: "", // 热泵开关状态
switchStatus: Number(matchedItem.switchStatus) == 0 ? false : true, //启停控制
alarmStatus: Number(matchedItem.alarmStatus) == 0 ? "无故障" : "故障", //故障状态
handAutomaticSwitch:
Number(matchedItem.handAutomaticSwitch) == 0 ? false : true, //手自动状态
openSwitch: Number(matchedItem.openSwitch) == 0 ? false : true, //一键启动
closeSwitch: Number(matchedItem.closeSwitch) == 0 ? false : true, //一键停止
exceptionReset: Number(matchedItem.exceptionReset) == 0 ? false : true, //异常复位
};
console.log("匹配到的热泵操作数据", this.hotPumpOperateData);
console.log("匹配到的操作数据", this.hotPumpOperateData);
this.hotPumpDialogVisible = true;
} else {
this.$message.warning(`未找到热泵"${item.pumpName}"的操作数据`);
this.$message.warning(`未找到"${itemName}"的操作数据`);
}
} else {
this.$message.warning("未找到热泵操作数据");
this.$message.warning(`未找到${groupName}操作数据`);
}
} else {
this.$message.error("获取热泵操作数据失败1");
this.$message.error("获取操作数据失败");
}
}).catch((error) => {
console.error("获取热泵操作数据失败", error);
this.$message.error("获取热泵操作数据失败2");
console.error("获取操作数据失败", error);
this.$message.error("获取操作数据失败");
});
},
// 计算水位百分比（最高值maxLevel）
@ -1004,6 +1163,62 @@ export default {
item.switchStatus = !item.switchStatus;
});
},
// 设置供水泵手自动状态
handAutomatic(item) {
this.$confirm(
`确定要切换设备"${item.name}"的状态为:${item.handAutomaticSwitch ? "手动" : "自动 吗?"
}`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
// 这里调用请求函数，示例中只是简单打印信息
console.log("请求后台", item.handAutomaticSwitch);
let param = null;
if (item.handAutomaticSwitch) {
param = 0;
} else {
param = 1;
}
this.hadleOperationConrol(item.handAutomaticSwitchId, param);
})
.catch(() => {
// 用户取消操作，恢复开关状态
item.handAutomaticSwitch = !item.handAutomaticSwitch;
});
},
// 设置启停控制
handleSwitch(item) {
this.$confirm(
`确定要切换设备"${item.name}"的状态为:${item.switchStatus ? "开启" : "停止 吗?"
}`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
// 这里调用请求函数，示例中只是简单打印信息
console.log("请求后台", item.switchStatus);
let param = null;
if (item.switchStatus) {
param = 1;
} else {
param = 0;
}
this.hadleOperationConrol(item.switchStatusId, param);
})
.catch(() => {
// 用户取消操作，恢复开关状态
item.switchStatus = !item.switchStatus;
});
},
// input设置
handleEnter(item, value, id, set, unit) {
this.$confirm(
@ -1081,10 +1296,6 @@ export default {
</script>
<style lang="scss" scoped>
img {
object-fit: contain;
}
// 热泵弹框样式
.hot-pump-dialog-content {
z-index: 9999999;
@ -1549,6 +1760,12 @@ img {
position: absolute;
top: 3.6rem;
left: 7.8rem;
cursor: pointer;
transition: transform 0.2s;
&:hover {
transform: scale(1.1);
}
}
.cyclepum2 {
@ -1557,6 +1774,12 @@ img {
position: absolute;
top: 4.4rem;
left: 7.8rem;
cursor: pointer;
transition: transform 0.2s;
&:hover {
transform: scale(1.1);
}
}
.buwaterpum {
@ -1739,6 +1962,7 @@ img {
width: 2.16rem;
height: 2.6rem;
z-index: 2;
cursor: pointer;
}
.temdiv1 {

2
src/views/components/monitor/index.vue
Unescape View File

@ -94,7 +94,7 @@ export default {
isAutoPlaying: true, // 是否正在自动轮播
isArrowHovered: false, // 是否悬停在箭头上
autoPlayTimeout: null, // 存储暂停后的恢复定时器
autoPlayInterval: 1000000, // 自动轮播间隔（毫秒）
autoPlayInterval: 10 * 60 * 1000, // 自动轮播间隔（毫秒）
};
},
computed: {

Write Preview
Loading…
Cancel
Save