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

1.修改热水系统实时监控页面

meizhou
selia-zx 3 days ago
parent
717c7a82ea
commit
bcdd625cc7
3 changed files with 2469 additions and 154 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. 4
      .env.development
  2. 2398
      src/views/hotWater/waterMonitor/waterMonitorDetails copy.vue
  3. 221
      src/views/hotWater/waterMonitor/waterMonitorDetails.vue

4
.env.development
Unescape View File

@ -7,9 +7,9 @@ ENV = 'development'
# 开发环境
# VUE_APP_BASE_API = '/dev-api'
# 后台
VUE_APP_BASE_API = 'http://192.168.1.222:8080'
# VUE_APP_BASE_API = 'http://192.168.1.222:8080'
# 梅州云端
# VUE_APP_BASE_API = 'http://106.55.173.225:8091'
VUE_APP_BASE_API = 'http://106.55.173.225:8091'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

2398
src/views/hotWater/waterMonitor/waterMonitorDetails copy.vue
View File

File diff suppressed because it is too large Load Diff

221
src/views/hotWater/waterMonitor/waterMonitorDetails.vue
Unescape View File

@ -579,154 +579,55 @@
</div>
<!-- 三个泵 -->
<div class="folw" v-else>
<!-- 动态流程图 -->
<div class="changeimage">
<div class="flowimg">
<!-- 整体图 -->
<img
class="supply3"
src="../../../assets/flowimg/supply-move3.gif"
alt=""
v-if="
[1, 2, '1', '2', '1.000', '2.000'].includes(threePumpObj.upWaterState1) ||
[1, 2, '1', '2', '1.000', '2.000'].includes(threePumpObj.upWaterState2) ||
[1, 2, '1', '2', '1.000', '2.000'].includes(threePumpObj.upWaterState3)
"
/>
<img
class="supply3"
v-else
src="../../../assets/flowimg/supply-move3.png"
alt=""
/>
<!-- 报警信号 -->
<img
class="warning"
src="../../../assets/images/warning.png"
alt=""
v-if="[1, '1','1.000'].includes(threePumpObj.isWarning)"
/>
<div
class="flow-text warning-text"
v-if="[1, '1','1.000'].includes(threePumpObj.isWarning)"
>
当前有报警信号触发
</div>
<!-- 三个泵 -->
<!-- 泵1定位 -->
<img
class="coolpum1"
src="../../../assets/flowimg/startpum.png"
alt=""
v-if="[1, 2, '1', '2', '1.000', '2.000'].includes(threePumpObj.upWaterState1)"
/>
<img
class="coolpum1"
v-else-if="[3, '3','3.000'].includes(threePumpObj.upWaterState1)"
src="../../../assets/flowimg/badpum.png"
alt=""
/>
<img
class="coolpum1"
v-else
src="../../../assets/flowimg/closepum.png"
alt=""
/>
<div class="pumpName1 flow-text">
泵1<span
class="pumpHz flow-text"
v-if="[1, 2, '1', '2', '1.000', '2.000'].includes(threePumpObj.upWaterState1)"
>:{{ Number(threePumpObj.freq1) }}Hz</span
>
</div>
<!-- 泵2定位 -->
<img
class="coolpum2"
src="../../../assets/flowimg/startpum.png"
alt=""
v-if="[1, 2, '1', '2', '1.000', '2.000'].includes(threePumpObj.upWaterState2)"
/>
<img
class="coolpum2"
v-else-if="[3, '3'].includes(threePumpObj.upWaterState2)"
src="../../../assets/flowimg/badpum.png"
alt=""
/>
<img
class="coolpum2"
v-else
src="../../../assets/flowimg/closepum.png"
alt=""
/>
<div class="pumpName2 flow-text">
泵2<span
class="pumpHz flow-text"
v-if="[1, 2, '1', '2', '1.000', '2.000'].includes(threePumpObj.upWaterState2)"
>:{{ Number(threePumpObj.freq2) }}Hz</span
>
</div>
<!-- 泵3定位 -->
<img
class="coolpum3"
src="../../../assets/flowimg/startpum.png"
alt=""
v-if="[1, 2, '1', '2', '1.000', '2.000'].includes(threePumpObj.upWaterState3)"
/>
<img
class="coolpum3"
v-else-if="[3, '3','3.000'].includes(threePumpObj.upWaterState3)"
src="../../../assets/flowimg/badpum.png"
alt=""
/>
<img
class="coolpum3"
v-else
src="../../../assets/flowimg/closepum.png"
alt=""
/>
<div class="pumpName3 flow-text">
泵3<span
class="pumpHz flow-text"
v-if="[1, 2, '1', '2', '1.000', '2.000'].includes(threePumpObj.upWaterState3)"
>:{{ Number(threePumpObj.freq3) }}Hz</span
>
</div>
<!-- 冷水水箱定位 -->
<img
class="waterBox"
src="../../../assets/flowimg/coolWaterBox.png"
alt=""
/>
<!-- 水位定位1 -->
<div
class="progressContainer1"
v-if="getPercentage(progress1) > 50"
>
<div
class="progress"
:style="{ height: getPercentage(progress1) + '%' }"
></div>
<b class="propo">{{ getPercentage(progress1) }}%</b>
</div>
<div class="progressContainer2" v-else>
<div class="changeimage" v-if="isSHowWaterPump">
<div
class="iframeDiv"
style="display: flex; flex-direction: column; gap: 10px"
>
<iframe
src="https://mp.usr.cn/draw/s.html?s=r16650ip36&a=aHR0cHM6Ly9hcGltcC51c3IuY24vdXNyQ2xvdWQ=&l=cn"
frameborder="0"
style="width: 100%; height: 400px; border: none"
></iframe>
<iframe
src="https://mp.usr.cn/draw/s.html?s=1055cne5y8&a=aHR0cHM6Ly9hcGltcC51c3IuY24vdXNyQ2xvdWQ=&l=cn"
frameborder="0"
style="width: 100%; height: 400px; border: none"
></iframe>
</div>
</div>
<div v-else>
<!-- 动态流程图 -->
<div class="changeimage">
<div class="flowimg">
<!-- 冷水水箱定位 -->
<img
class="waterBox"
src="../../../assets/flowimg/coolWaterBox.png"
alt=""
/>
<!-- 水位定位1 -->
<div
class="progress"
:style="{ height: getPercentage(progress1) + '%' }"
></div>
<b class="propo">{{ getPercentage(progress1) }}%</b>
</div>
<div class="waterBoxLong">
<div>最大值:3.2米</div>
<div>实际值:{{ progress1 }}米</div>
</div>
<div class="flow-text inPressure">
入口压力:{{ threePumpObj.inPress }}bar
</div>
<div class="flow-text goalPressure">
目标压力:{{ threePumpObj.goalPress }}bar
</div>
<div class="flow-text outPressure">
出口压力:{{ threePumpObj.outPress }}bar
class="progressContainer1"
v-if="getPercentage(progress1) > 50"
>
<div
class="progress"
:style="{ height: getPercentage(progress1) + '%' }"
></div>
<b class="propo">{{ getPercentage(progress1) }}%</b>
</div>
<div class="progressContainer2" v-else>
<div
class="progress"
:style="{ height: getPercentage(progress1) + '%' }"
></div>
<b class="propo">{{ getPercentage(progress1) }}%</b>
</div>
<div class="waterBoxLong">
<div>最大值:3.2米</div>
<div>实际值:{{ progress1 }}米</div>
</div>
</div>
</div>
</div>
@ -789,7 +690,7 @@ export default {
pumname: "",
currentWeekday: "",
isShowHotWater: false,
isSHowWaterPump: false,
threePumpObj: {},
};
},
@ -844,10 +745,10 @@ export default {
this.getDayData();
// 设置定时器，每 10 秒执行一次
this.timer = setInterval(() => {
if (this.isShowHotWater) {
if (this.isShowHotWater && !this.isSHowWaterPump) {
this.baseMessgae();
this.sysStatus();
}
this.sysStatus();
}, 10000);
// 每秒更新一次时间
this.nowTimer = setInterval(() => {
@ -993,17 +894,23 @@ export default {
this.progressName1 = "裙楼";
this.progressName2 = "中厨";
this.isShowHotWater = true;
this.isSHowWaterPump = false;
this.baseMessgae();
this.sysStatus();
} else if (this.currentName === "3楼") {
this.progressName1 = "高区";
this.progressName2 = "中区";
this.isShowHotWater = true;
this.isSHowWaterPump = false;
this.baseMessgae();
this.sysStatus();
} else if (this.currentName.includes("水泵")) {
this.isShowHotWater = false;
this.isSHowWaterPump = true;
// this.sysStatus();
} else {
this.isShowHotWater = false;
this.sysStatus();
this.isSHowWaterPump = false;
}
}
});
@ -1104,8 +1011,13 @@ export default {
this.isShowHotWater = true;
this.baseMessgae();
this.sysStatus();
} else if (this.currentName.includes("水泵")) {
this.isShowHotWater = false;
this.isSHowWaterPump = true;
// this.sysStatus();
} else {
this.isShowHotWater = false;
this.isSHowWaterPump = false;
this.sysStatus();
}
},
@ -1215,7 +1127,9 @@ export default {
// 模拟点击第一行
this.handlerow(firstRow);
// 设置当前选中行
this.$refs.maintable.setCurrentRow(firstRow);
if (this.isShowHotWater && !isSHowWaterPump) {
this.$refs.maintable.setCurrentRow(firstRow);
}
}
} else {
this.tableData = [];
@ -2225,6 +2139,9 @@ export default {
color: #e40825;
}
}
.iframeDiv {
width: 100%;
}
}
.changecontent {

Write Preview
Loading…
Cancel
Save