Browse Source

1.主机详情页添加可设置界面参数冷冻水温度、需求量

2.同步其他系统代码
dev
selia-zx 3 weeks ago
parent
commit
d8de8ba2a2
  1. BIN
      src/assets/flowimg/bu-move.gif
  2. BIN
      src/assets/flowimg/bu-nomove.png
  3. BIN
      src/assets/flowimg/circulate-move.gif
  4. BIN
      src/assets/flowimg/pump.png
  5. BIN
      src/assets/flowimg/replenish-move.gif
  6. BIN
      src/assets/flowimg/replenish-nomove.png
  7. BIN
      src/assets/flowimg/replenish-nomove3.png
  8. BIN
      src/assets/flowimg/supply-move.gif
  9. BIN
      src/assets/flowimg/supply-nomove - 副本.png
  10. BIN
      src/assets/flowimg/supply-nomove.png
  11. BIN
      src/assets/flowimg/supply-nomove2.png
  12. BIN
      src/assets/images/host-img3.png
  13. BIN
      src/assets/images/host-img5.png
  14. BIN
      src/assets/images/pump.png
  15. BIN
      src/assets/images/supply-nomove.png
  16. 268
      src/assets/styles/index.scss
  17. 490
      src/views/aircAndWindc/awSysMonitor/index.vue
  18. 34
      src/views/bigScreen/components/allEnergy.vue
  19. 18
      src/views/bigScreen/components/coldSysEnergy.vue
  20. 1132
      src/views/bigScreen/components/waterSysEnergy.vue
  21. 431
      src/views/centerairC/sysControl/index copy 2.vue
  22. 643
      src/views/centerairC/sysControl/index copy.vue
  23. 352
      src/views/centerairC/sysMonitor/components/hostChart.vue
  24. 187
      src/views/centerairC/sysMonitor/hostDetails.vue
  25. 1037
      src/views/centerairC/sysMonitor/monitorCenter.vue
  26. 252
      src/views/hotWater/waterControl/index.vue
  27. 147
      src/views/hotWater/waterMonitor/index.vue
  28. 15
      src/views/temSys/temHistory/components/historyCharts.vue
  29. 32
      src/views/temSys/temHistory/components/historyTables.vue
  30. 91
      src/views/temSys/temHistory/index.vue
  31. 29
      src/views/temSys/temMonitor/index.vue

BIN
src/assets/flowimg/bu-move.gif

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

BIN
src/assets/flowimg/bu-nomove.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
src/assets/flowimg/circulate-move.gif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/flowimg/pump.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/assets/flowimg/replenish-move.gif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 20 KiB

BIN
src/assets/flowimg/replenish-nomove.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

BIN
src/assets/flowimg/replenish-nomove3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
src/assets/flowimg/supply-move.gif

Binary file not shown.

Before

Width:  |  Height:  |  Size: 178 KiB

After

Width:  |  Height:  |  Size: 248 KiB

BIN
src/assets/flowimg/supply-nomove - 副本.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

BIN
src/assets/flowimg/supply-nomove.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 284 KiB

After

Width:  |  Height:  |  Size: 135 KiB

BIN
src/assets/flowimg/supply-nomove2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 KiB

BIN
src/assets/images/host-img3.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 417 KiB

After

Width:  |  Height:  |  Size: 410 KiB

BIN
src/assets/images/host-img5.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 417 KiB

BIN
src/assets/images/pump.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
src/assets/images/supply-nomove.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

268
src/assets/styles/index.scss

@ -357,7 +357,7 @@ aside {
}
// 弹框内容超出高度滚动
.dialog-content {
max-height: 500px; /* 设置最大高度,可根据实际情况调整 */
max-height: 600px; /* 设置最大高度,可根据实际情况调整 */
overflow-y: auto; /* 当内容超出最大高度时,显示垂直滚动条 */
}
.intput-text {
@ -449,7 +449,7 @@ table th {
.el-dialog .el-row .el-select {
width: 100% !important;
}
.el-dialog .el-row .el-date-editor{
.el-dialog .el-row .el-date-editor {
width: 100% !important;
}
@ -502,7 +502,7 @@ table th {
/* 设置滚动条背景颜色 */
}
.analysis-table::-webkit-scrollbar-thumb {
background-color: rgb(21, 50, 104);
background-color: rgb(21, 50, 104);
/* 设置滑块颜色 */
}
.analysis-table::-webkit-scrollbar-thumb:hover {
@ -513,3 +513,265 @@ table th {
background-color: #002249;
/* 设置滑道颜色 */
}
.detail-data-li {
width: 80%;
margin-right: 0.1rem;
position: relative;
color: #c0dffc;
font-family: Arial, sans-serif;
letter-spacing: 0.02rem;
font-size: 0.18rem;
position: relative;
margin-bottom: 0.08rem;
border-left: 0.01rem solid #217df5;
border-right: 0.01rem solid #217df5;
background-image: radial-gradient(
circle at left top,
#217df5 0.01rem,
transparent 0.01rem
),
radial-gradient(circle at right top, #217df5 0.01rem, transparent 0.01rem),
radial-gradient(circle at left bottom, #217df5 0.01rem, transparent 0.01rem),
radial-gradient(
circle at right bottom,
#217df5 0.01rem,
transparent 0.01rem
);
background-repeat: no-repeat;
background-position: left top, right top, left bottom, right bottom;
}
.detail-data-li::before,
.detail-data-li::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 0.01rem;
background-image: linear-gradient(
to right,
#217df5 0%,
rgba(41, 128, 185, 0) 50%,
#217df5 100%
) !important;
}
.year-data {
margin-top: 0.1rem;
}
.rightDot {
position: relative;
width: 100%;
height: 100%;
z-index: 999;
}
.leftDot {
position: relative;
width: 100%;
height: 100%;
padding: 0.04rem 0.1rem;
display: flex;
flex-direction: row;
justify-content: space-between;
.dotData {
font-weight: bold;
margin: 0 0.06rem;
color: #3b80ff;
display: flex;
align-items: center;
}
.dotUnit {
width: 0.55rem;
text-align: left;
display: flex;
align-items: center;
}
}
.rightDot::before {
content: "";
position: absolute;
top: -0.03rem;
right: -0.03rem;
width: 0.06rem;
height: 0.06rem;
background-color: #217df5;
box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
background-image: radial-gradient(
circle at 30% 30%,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0) 70%
);
border-radius: 50%;
}
.rightDot::after {
content: "";
position: absolute;
bottom: -0.03rem;
right: -0.03rem;
width: 0.06rem;
height: 0.06rem;
background-color: #217df5;
box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
background-image: radial-gradient(
circle at 30% 30%,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0) 70%
);
border-radius: 50%;
}
.leftDot::before {
content: "";
position: absolute;
top: -0.03rem;
left: -0.03rem;
width: 0.06rem;
height: 0.06rem;
background-color: #217df5;
border-radius: 50%;
box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
background-image: radial-gradient(
circle at 30% 30%,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0) 70%
);
}
.leftDot::after {
content: "";
position: absolute;
bottom: -0.03rem;
left: -0.03rem;
width: 0.06rem;
height: 0.06rem;
background-color: #217df5;
box-shadow: 0 0 0.1rem 0.02rem rgba(33, 125, 245, 0.9);
background-image: radial-gradient(
circle at 30% 30%,
rgba(255, 255, 255, 0.8) 0%,
rgba(255, 255, 255, 0) 70%
);
border-radius: 50%;
}
/* 设备控制列表样式 */
.device-container {
display: flex;
flex-direction: column;
width: 100%;
background-color: #142c4e;
padding: 10px 10px 30px 10px;
border-radius: 10px;
margin-bottom: 20px;
}
.device-li {
flex: 1;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 0;
color: #abcdfc;
border-bottom: 1px dashed #0349ac;
.device-name {
flex: 1;
white-space: nowrap;
font-size: 14px;
.el-switch {
width: 120px !important;
}
.run {
display: flex;
flex-direction: row;
align-items: center;
display: block;
}
.run::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: rgb(16, 231, 16);
border-radius: 50%;
margin-right: 5px;
}
.no-run {
display: flex;
flex-direction: row;
align-items: center;
display: block;
}
.no-run::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: rgb(180, 180, 180);
border-radius: 50%;
margin-right: 5px;
}
.el-input {
width: 100px;
}
.strong-electric {
background-color: rgba(59, 130, 246, 0.2);
color: #60a5fa;
padding: 5px 20px;
border-radius: 10px;
}
.auto-electric {
background-color: rgba(231, 144, 45, 0.2);
color: #e47f21;
padding: 5px 20px;
border-radius: 10px;
}
.good-status {
color: #4ade80;
}
.bad-status {
color: #f05348;
}
}
.device-name2 {
width: 140px;
}
}
.device-li:nth-child(1) {
color: #9ca3af;
}
// 媒体查询适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.device-li {
padding: 0.12rem 0 !important;
border-bottom: 0.01rem dashed #0349ac !important;
.device-name {
font-size: 0.14rem !important;
.el-switch {
width: 1.2rem !important;
}
.run::before {
width: 0.1rem !important;
height: 0.1rem !important;
margin-right: 0.05rem !important;
}
.no-run::before {
width: 0.1rem !important;
height: 0.1rem !important;
margin-right: 0.05rem !important;
}
.el-input {
width: 1rem !important;
}
.strong-electric {
padding: 0.05rem 0.2rem;
border-radius: 0.1rem !important;
}
.auto-electric {
padding: 0.05rem 0.2rem;
border-radius: 0.1rem !important;
}
}
}
}

490
src/views/aircAndWindc/awSysMonitor/index.vue

@ -1,5 +1,5 @@
<template>
<div class="app-container" v-loading="loading">
<div class="app-container">
<div class="left-tree">
<!-- el-tree 设置一个固定的高度和滚动条 -->
<div style="height: 7rem; overflow-y: auto">
@ -39,6 +39,10 @@
</div>
<div class="mostDiv">
<div class="windC">
<!-- 定时开关机定位 -->
<div class="menu-title" @click="openTimeSwitch">
<div @click="openTimeSwitch">定时开关机</div>
</div>
<!-- 空调风柜定位 -->
<img
class="wind-img"
@ -137,6 +141,7 @@
@keyup.enter.native="handleEnter(airSupplyObj, $event, '℃')"
@input="handleInput(airSupplyObj)"
@blur="handleBlur()"
disabled
v-model="airSupplyObj.collectValue"
size="mini"
>
@ -199,6 +204,7 @@
@keyup.enter.native="handleEnter(waterSupplyObj, $event, '℃')"
@input="handleInput(waterSupplyObj)"
@blur="handleBlur()"
disabled
v-model="waterSupplyObj.collectValue"
size="mini"
>
@ -215,6 +221,7 @@
@keyup.enter.native="handleEnter(backwaterObj, $event, '℃')"
@input="handleInput(backwaterObj)"
@blur="handleBlur()"
disabled
v-model="backwaterObj.collectValue"
size="mini"
>
@ -243,11 +250,11 @@
</div>
</div>
<div class="wind-valve" v-if="isObjectValid(airValveBackObj)">
<div class="wind-text">风阀反馈</div>
<div class="wind-text">风阀反馈</div>
<div>{{ airValveBackObj.collectValue }}%</div>
</div>
<div class="wind-valve2" v-if="isObjectValid(airValveObj)">
<div class="wind-text">风阀调节</div>
<div class="wind-text">风阀调节</div>
<el-input
@keyup.enter.native="handleEnter(airValveObj, $event, '%')"
@input="handleInput(airValveObj)"
@ -265,12 +272,88 @@
</div>
</div>
</div>
<!-- 定时开关内容 -->
<el-dialog
title="定时开关机功能"
:visible.sync="isOpenTimeSwitch"
append-to-body
width="800px"
>
<div class="dialog-content">
<div class="device-container" v-loading="loading">
<div class="device-li">
<div class="device-name">定时名称</div>
<div class="device-name">定时开机</div>
<div class="device-name">定时关机</div>
<div class="device-name">启动状态</div>
</div>
<div
class="device-li"
v-for="(item, index) in delayList"
:key="index"
:class="{ highlight: item.name.includes(currentWeekday) }"
>
<div class="device-name">{{ item.name }}</div>
<div class="device-name">
<el-input
size="mini"
v-model="item.delayOpenHour"
@keyup.enter.native="
handleSwitchEnter(item, 'openHour', $event)
"
@input="handleSwitchInput(item, 'delayOpenHour', 'hour')"
></el-input>
<div class="slip">:</div>
<el-input
size="mini"
v-model="item.delayOpenMinute"
@keyup.enter.native="
handleSwitchEnter(item, 'openMinute', $event)
"
@input="handleSwitchInput(item, 'delayOpenMinute', 'minute')"
></el-input>
</div>
<div class="device-name">
<el-input
size="mini"
v-model="item.delayCloseHour"
@keyup.enter.native="
handleSwitchEnter(item, 'closeHour', $event)
"
@input="handleSwitchInput(item, 'delayCloseHour', 'hour')"
></el-input>
<div class="slip">:</div>
<el-input
size="mini"
v-model="item.delayCloseMinute"
@keyup.enter.native="
handleSwitchEnter(item, 'closeMinute', $event)
"
@input="handleSwitchInput(item, 'delayCloseMinute', 'minute')"
></el-input>
</div>
<div class="device-name">
<el-switch
style="display: block"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="开启"
inactive-text="停用"
v-model="item.delayStatus"
@change="handleSwitchStatus(item)"
>
</el-switch>
</div>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { spaceTree } from "@/api/region";
import { windList } from "@/api/aircAndWindc/index";
import { windList, timeList, undateTime } from "@/api/aircAndWindc/index";
import { operationConrol } from "@/api/hotWater/waterControl";
export default {
data() {
@ -308,6 +391,9 @@ export default {
autoStatus: false, //
startStatus: false, //
frequency: "v",
isOpenTimeSwitch: false,
delayList: [],
currentWeekday: "",
};
},
watch: {
@ -339,6 +425,21 @@ export default {
}
},
},
created() {
const weekdays = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
];
const date = new Date();
const dayIndex = date.getDay();
this.currentWeekday = weekdays[dayIndex];
console.log("今天是星期几", this.currentWeekday);
},
mounted() {
this.getSysBuild();
},
@ -513,7 +614,7 @@ export default {
//
else if (
item.paramType === "3" &&
item.collectName.includes("新风阀")
item.collectName.includes("新风阀")
) {
this.airValveObj = item;
}
@ -524,7 +625,7 @@ export default {
//
else if (
item.paramType === "3" &&
item.collectName.includes("调节")
item.collectName.includes("水阀调节")
) {
this.waterValveObj = item;
}
@ -720,6 +821,239 @@ export default {
this.getWindList();
});
},
//
openTimeSwitch() {
this.isOpenTimeSwitch = true;
this.getPolicyList();
},
//
getPolicyList() {
return new Promise((resolve, reject) => {
let data = {
systemType: "2",
funPolicyType: "3",
houseId: this.currentId,
};
timeList(data)
.then((res) => {
console.log("设备定时开关返回res", res);
if (res.code === 200) {
let handleList = res.rows;
this.delayList = [];
handleList.forEach((element, index) => {
if (element.values && element.values.length > 0) {
//
let delayItem = {
name: element.name,
};
const limitedChildren = element.values;
limitedChildren.forEach((child) => {
// console.log("${index}_", `${index}_`);
// console.log("child.pointName", child.pointName);
if (child.pointName) {
// -
if (child.pointName.includes("开_时")) {
// console.log("-·························");
delayItem.delayOpenHour = child.curValue;
delayItem.delayOpenHourId = child.id;
}
// -
else if (
child.pointName.includes("开_分")
) {
delayItem.delayOpenMinute = child.curValue;
delayItem.delayOpenMinuteId = child.id;
}
// -
else if (
child.pointName.includes("关_时")
) {
delayItem.delayCloseHour = child.curValue;
delayItem.delayCloseHourId = child.id;
}
// -
else if (
child.pointName.includes("关_分")
) {
delayItem.delayCloseMinute = child.curValue;
delayItem.delayCloseMinuteId = child.id;
}
//
else if (child.pointName.includes(`启动标志`)) {
delayItem.delayStatus =
Number(child.curValue) == 0 ? false : true;
delayItem.delayStatusId = child.id;
}
}
});
// delayList
if (Object.keys(delayItem).length > 1) {
this.delayList.push(delayItem);
}
}
});
console.log("处理后的数组", this.delayList);
// this.delayList = res.rows;
} else {
this.delayList = [];
}
// Promise
resolve(res);
})
.catch((error) => {
// Promise
reject(error);
});
});
},
//
handleSwitchInput(item, propertyName, name) {
console.log("校验", item[propertyName]);
//
if (item[propertyName] === "") {
return;
}
let isValid = true;
//
let inputValue = String(item[propertyName]).replace(/[^\d]/g, "");
if (name === "hour") {
isValid =
!isNaN(inputValue) &&
parseInt(inputValue) >= 0 &&
parseInt(inputValue) <= 23;
if (!isValid) {
this.$message.error("输入值在0-23区间,请重新输入");
item[propertyName] = "";
return;
}
} else if (name === "minute") {
isValid =
!isNaN(inputValue) &&
parseInt(inputValue) >= 0 &&
parseInt(inputValue) <= 59;
if (!isValid) {
this.$message.error("输入值在0-59区间,请重新输入");
item[propertyName] = "";
return;
}
}
item[propertyName] = inputValue;
},
handleSwitchEnter(item, name, event) {
console.log("item",item)
//
event.target.blur();
let id = "";
let value = "";
let title = "";
let unit = "";
if (name === "openHour") {
id = item.delayOpenHourId;
value = item.delayOpenHour;
title = "定时开机-小时";
unit = "时";
} else if (name === "openMinute") {
id = item.delayOpenMinuteId;
value = item.delayOpenMinute;
title = "定时开机-分钟";
unit = "分";
} else if (name === "closeHour") {
id = item.delayCloseHourId;
value = item.delayCloseHour;
title = "定时关机-小时";
unit = "时";
} else if (name === "closeMinute") {
id = item.delayCloseMinuteId;
value = item.delayCloseMinute;
title = "定时关机-分钟";
unit = "分";
}
if (value === "") {
this.$message.warning("请输入当前设置值!");
return;
}
console.log("请求后端", item);
this.$confirm(
`确定要把"${item.name}"的${title}设置为:${value} ${unit}吗?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
console.log("打印id",id)
// this.handleSwitchOperationConrol(id, value);
})
.catch(() => {
//
this.getPolicyList();
});
},
handleSwitchOperationConrol(id, param) {
let data = {
policyId: id,
timeValue: param,
};
console.log("操作参数", data);
undateTime(data)
.then((res) => {
if (res.code == 200) {
this.$modal.msgSuccess("指令下发成功!");
// loading
this.loading = true;
// ;
setTimeout(() => {
this.getPolicyList().finally(() => {
// loading
this.loading = false;
});
}, 500);
} else {
// this.$modal.msgError("");
console.log("应该更新状态的");
// ;
this.getPolicyList();
}
})
.catch((error) => {
console.log("请求发生错误,更新设备状态", error);
// ;
this.getPolicyList();
});
},
//
handleSwitchStatus(item) {
this.$confirm(
`确定要切换"${item.name}"的状态为:${
item.delayStatus ? "开启" : "停用 吗?"
}`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
//
console.log("请求后台", item.delayStatus);
let param = null;
if (item.delayStatus) {
param = 1;
} else {
param = 0;
}
this.handleSwitchOperationConrol(item.delayStatusId, param);
})
.catch(() => {
//
item.delayStatus = !item.delayStatus;
console.log("不请求后台");
});
},
},
};
</script>
@ -758,6 +1092,59 @@ export default {
width: 13rem;
height: 5.38rem;
position: relative;
.menu-title {
color: #e1f4ff;
font-size: 0.18rem;
--bRadius: 0.05rem;
text-align: center;
position: absolute;
top: 0;
right: 0.5rem;
width: 1.25rem;
cursor: pointer;
z-index: 999;
div {
position: relative;
text-align: center;
border-radius: var(--bRadius);
transition: all 0.3s;
padding: 0.01rem 0.02rem;
background-color: rgba(85, 139, 211, 0.2);
cursor: pointer;
&::before,
&::after {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 2px solid #46b2f1;
transition: all 0.5s;
border-radius: var(--bRadius);
animation: clippath 3s infinite linear;
cursor: pointer;
}
&::after {
animation: clippath 3s infinite -1.5s linear;
}
@keyframes clippath {
0%,
100% {
clip-path: inset(0 0 98% 0);
}
25% {
clip-path: inset(0 98% 0 0);
}
50% {
clip-path: inset(98% 0 0 0);
}
75% {
clip-path: inset(0 0 0 98%);
}
}
}
}
.wind-img {
width: 13.1rem;
height: 5.5rem;
@ -1155,6 +1542,97 @@ export default {
}
}
}
.device-container {
display: flex;
flex-direction: column;
width: 100%;
min-height: 530px;
background-color: #142c4e;
padding: 10px 10px 30px 10px;
border-radius: 10px;
font-size: 14px;
.device-li {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 0;
color: #abcdfc;
border-bottom: 1px dashed #0349ac;
.device-name {
flex: 1;
white-space: nowrap;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
padding: 0 5px;
.slip {
margin: 0 5px;
color: #1282d8;
font-weight: bold;
}
}
}
.device-li:nth-child(1) {
color: #9ca3af;
}
}
.highlight {
background-color: #003863 !important; /* 定义高亮的背景颜色 */
color: #ffffff !important;
font-weight: bold;
}
.device-container .highlight .device-name .slip {
color: #ffffff !important;
font-weight: bold;
}
/* 为高亮行添加图片箭头 */
.device-li.highlight::before {
content: "";
background-image: url("../../../assets/images/step.png");
background-size: contain;
background-repeat: no-repeat;
width: 30px;
height: 30px;
position: absolute;
left: 2px; /* 图片位置,根据实际情况调整 */
top: 20%;
transform: translateY(-50%);
z-index: 999;
animation: moveRight 1s ease-in-out infinite alternate;
}
@keyframes moveRight {
0% {
transform: translateX(0); /* 初始位置,不移动 */
}
100% {
transform: translateX(0.04rem); /* 向右移动 1rem 的距离 */
}
}
/* 确保 device-li 有相对定位 */
.device-li {
position: relative;
}
// 2000px
@media (min-width: 2000px) {
.device-container {
min-height: 7rem !important;
padding: 0.1rem 0.1rem 0.3rem 0.1rem !important;
border-radius: 0.1rem !important;
font-size: 0.14rem !important;
.device-li {
padding: 0.12rem 0 !important;
.device-name {
.slip {
margin: 0 0.05rem !important;
}
}
}
}
}
@media (min-width: 1360px) and (max-width: 1680px) {
.windC {
transform: scale(0.9);

34
src/views/bigScreen/components/allEnergy.vue

@ -124,10 +124,10 @@ export default {
{
name: "数据详情:",
data: [
{ value: this.energyMes.totalEle, name: "耗电量标准煤" },
{ value: this.energyMes.totalEle, name: "用水量标准煤" },
{ value: this.energyMes.totalEle, name: "产冷量标准煤" },
{ value: this.energyMes.totalEle, name: "蒸汽量标准煤" },
{ value: this.energyMes.eleStandardCoal, name: "耗电量" },
{ value: this.energyMes.waterStandardCoal, name: "用水量" },
{ value: this.energyMes.coldStandardCoal, name: "产冷量" },
{ value: this.energyMes.gasStandardCoal, name: "蒸汽量" },
],
itemStyle: {
color: function (params) {
@ -140,10 +140,10 @@ export default {
},
{
data: [
{ value: this.energyMes.totalEle, name: "耗电量标准煤" },
{ value: this.energyMes.totalEle, name: "用水量标准煤" },
{ value: this.energyMes.totalEle, name: "产冷量标准煤" },
{ value: this.energyMes.totalEle, name: "蒸汽量标准煤" },
{ value: this.energyMes.eleStandardCoal, name: "耗电量" },
{ value: this.energyMes.waterStandardCoal, name: "用水量" },
{ value: this.energyMes.coldStandardCoal, name: "产冷量" },
{ value: this.energyMes.gasStandardCoal, name: "蒸汽量" },
],
},
],
@ -227,10 +227,10 @@ export default {
{
name: "数据详情:",
data: [
{ value: 0, name: "耗电量标准煤" },
{ value: 0, name: "用水量标准煤" },
{ value: 0, name: "产冷量标准煤" },
{ value: 0, name: "蒸汽量标准煤" },
{ value: 0, name: "耗电量" },
{ value: 0, name: "用水量" },
{ value: 0, name: "产冷量" },
{ value: 0, name: "蒸汽量" },
],
itemStyle: {
color: function (params) {
@ -243,10 +243,10 @@ export default {
},
{
data: [
{ value: 0, name: "耗电量标准煤" },
{ value: 0, name: "用水量标准煤" },
{ value: 0, name: "产冷量标准煤" },
{ value: 0, name: "蒸汽量标准煤" },
{ value: 0, name: "耗电量" },
{ value: 0, name: "用水量" },
{ value: 0, name: "产冷量" },
{ value: 0, name: "蒸汽量" },
],
},
],
@ -278,7 +278,7 @@ export default {
this.option = {
//
title: {
subtext: "标准煤",
subtext: "标准煤",
textStyle: {
color: "#ffffff",
},

18
src/views/bigScreen/components/coldSysEnergy.vue

@ -2,8 +2,8 @@
<div class="energy_content">
<div class="sys_charts" ref="sys_charts"></div>
<div class="eer">
<div>用电量:{{energyMes.totalEle}}kw/h</div>
<div>产冷量:{{energyMes.totalCold}}kwh</div>
<div>用电量:{{ energyMes.totalEle }}kw/h</div>
<div>产冷量:{{ energyMes.totalCold }}kwh</div>
</div>
</div>
</template>
@ -460,8 +460,18 @@ export default {
console.log("两个系统参数返回", res);
if (res.code == 200) {
this.energyMes = res.rows[0];
this.useForm.maxData = 10;
this.useForm.useData = res.rows[0].eer;
this.useForm.maxData = 10; //
const { totalEle, totalCold } = res.rows[0];
if (totalEle === 0 || totalCold === 0) {
this.useForm.useData = 0;
} else {
const result = totalCold / totalEle;
if (Number.isInteger(result)) {
this.useForm.useData = result;
} else {
this.useForm.useData = parseFloat(result.toFixed(2));
}
}
let that = this;
// 使
const axisLineColor = this.getAxisLineColor(

1132
src/views/bigScreen/components/waterSysEnergy.vue

File diff suppressed because it is too large Load Diff

431
src/views/centerairC/sysControl/index copy 2.vue

@ -1,431 +0,0 @@
<template>
<div class="app-container" v-loading="loading">
<!-- 状态统计 -->
<div class="status-statistics">
<div class="status-card">
<div class="status-label">运行设备</div>
<div class="status-value-running">
{{ statistics.running }}/{{ total }}
</div>
</div>
<div class="status-card">
<div class="status-label">手动模式</div>
<div class="status-value-auto">{{ statistics.manual }}/{{ total }}</div>
</div>
<div class="status-card">
<div class="status-label">自动模式</div>
<div class="status-value-maintenance">
{{ statistics.auto }}/{{ total }}
</div>
</div>
<div class="status-card">
<div class="status-label">故障设备</div>
<div class="status-value-error">{{ statistics.warn }}/{{ total }}</div>
</div>
</div>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="主机" name="host"> </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="three"> </el-tab-pane>
<el-tab-pane label="冷冻蝶阀" name="three"> </el-tab-pane>
<el-tab-pane label="冷却蝶阀" name="three"> </el-tab-pane>
<el-tab-pane label="冷却塔出水阀" name="three"> </el-tab-pane>
</el-tabs>
<!-- 非蝶阀控制列表 -->
<div class="device-container">
<list-header
:deviceList="hostList"
@operationControl="hadleOperationConrol"
></list-header>
</div>
<div class="device-container">
<list-header
:deviceList="coolingTowerFanList"
@operationControl="hadleOperationConrol"
></list-header>
</div>
<div class="device-container">
<list-header
:deviceList="coolingPump"
@operationControl="hadleOperationConrol"
></list-header>
</div>
<div class="device-container">
<list-header
:deviceList="freezingPump"
@operationControl="hadleOperationConrol"
></list-header>
</div>
<!-- 蝶阀控制列表 -->
<div class="device-container">
<vavleheader
:valveList="freezingValve"
@operationControl="hadleOperationConrol"
></vavleheader>
</div>
<div class="device-container">
<vavleheader
:valveList="coolingValve"
@operationControl="hadleOperationConrol"
></vavleheader>
</div>
<div class="device-container">
<vavleheader
:valveList="coolingTowerOutValve"
@operationControl="hadleOperationConrol"
></vavleheader>
</div>
</div>
</template>
<script>
import { operationList, operationConrol } from "@/api/centerairC/sysMonitor";
import listHeader from "./listHeader.vue";
import Vavleheader from "./vavleheader.vue";
export default {
components: { listHeader, Vavleheader },
name: "sysMonitor",
data() {
return {
loading: false,
deviceList: [], //
hostList: [], //
coolingTowerFanList: [], //
coolingPump: [], //
freezingPump: [], //
valveList: [], //
total: null,
freezingValve: [], //
coolingValve: [], //
coolingTowerOutValve: [], //
activeName: "host", //
};
},
computed: {
statistics() {
const deviceManual = this.deviceList.filter(
(d) => d.automaticText === false
).length;
const deviceAuto = this.deviceList.filter(
(d) => d.automaticText === true
).length;
const valveManual = this.valveList.filter(
(v) => v.automaticText === false
).length;
const valveAuto = this.valveList.filter(
(v) => v.automaticText === true
).length;
return {
running: this.deviceList.filter((d) => d.runStatus === "运行").length,
manual: deviceManual + valveManual,
auto: deviceAuto + valveAuto,
warn: this.deviceList.filter((d) => d.warnText === "故障").length,
};
},
},
mounted() {
this.getOperationList();
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
},
//
getOperationList() {
return new Promise((resolve, reject) => {
operationList({ systemType: 0 })
.then((res) => {
console.log("列表返回res", res);
if (res.code === 200) {
let handleList = res.rows;
this.deviceList = [];
this.valveList = [];
handleList.forEach((element) => {
if (element.children && element.children.length > 0) {
//
let deviceItem = {
name: element.name,
};
//
let valveItem = {
name: element.name,
};
const limitedChildren = element.children;
let valveClosed = false;
let valveOpened = false;
limitedChildren.forEach((child) => {
if (child.name) {
//
if (
child.paramType === "1" &&
!child.name.includes("阀")
) {
deviceItem.runStatus =
Number(child.value) == 0 ? "不运行" : "运行";
}
//
else if (
child.paramType === "2" &&
!child.name.includes("阀")
) {
deviceItem.controlText =
Number(child.value) == 0 ? false : true;
deviceItem.controlId = child.id;
}
// 01
else if (
child.paramType === "6" &&
!child.name.includes("阀")
) {
deviceItem.automaticText =
Number(child.value) == 0 ? true : false;
deviceItem.automaticId = child.id;
}
//
else if (
child.paramType === "5" &&
!child.name.includes("阀")
) {
deviceItem.warnText =
Number(child.value) == 0 ? "未故障" : "故障";
//
} else if (
child.paramType === "22" &&
!child.name.includes("阀")
) {
deviceItem.localRemote =
Number(child.value) == 0 ? "本地" : "远程";
}
//
else if (
child.paramType === "3" &&
!child.name.includes("阀")
) {
deviceItem.frequencySet =
Number(child.value) == 0 ? "0" : child.value;
deviceItem.frequencyId = child.id;
}
//
else if (child.paramType === "4") {
deviceItem.frequency = child.value;
}
// -
else if (
child.paramType === "6" &&
child.name.includes("阀")
) {
valveItem.automaticText =
Number(child.value) == 0 ? true : false;
valveItem.automaticId = child.id;
}
// -
else if (
child.paramType === "2" &&
child.name.includes("阀")
) {
valveItem.controlText =
Number(child.value) == 0 ? false : true;
valveItem.controlId = child.id;
}
//
if (
child.name.includes("阀关到位") &&
Number(child.value) == 0
) {
valveClosed = false;
} else if (
child.name.includes("阀关到位") &&
Number(child.value) == 1
) {
valveClosed = true;
}
//
if (
child.name.includes("阀开到位") &&
Number(child.value) == 0
) {
valveOpened = false;
} else if (
child.name.includes("阀开到位") &&
Number(child.value) == 1
) {
valveOpened = true;
}
}
});
//
if (valveClosed && !valveOpened) {
valveItem.closeStatus = "开启";
valveItem.openStauts = "关闭";
} else if (!valveClosed && valveOpened) {
valveItem.closeStatus = "关闭";
valveItem.openStauts = "开启";
} else if (!valveClosed && !valveOpened) {
valveItem.closeStatus = "关闭";
valveItem.openStauts = "关闭";
}
// deviceList
if (Object.keys(deviceItem).length > 1) {
this.deviceList.push(deviceItem);
}
// valveList
if (Object.keys(valveItem).length > 1) {
this.valveList.push(valveItem);
}
}
});
this.valveList = this.valveList.filter(
(item) => item.name && item.name.includes("阀")
);
console.log("处理过的this.deviceList", this.deviceList);
console.log("处理过的this.valveList", this.valveList);
this.total = this.deviceList.length + this.valveList.length;
//
this.hostList = [];
this.coolingTowerFanList = [];
this.coolingPump = [];
this.freezingPump = [];
this.freezingValve = [];
this.coolingValve = [];
this.coolingTowerOutValve = [];
this.deviceList.forEach((list) => {
if (list.name.includes("机") && !list.name.includes("风")) {
this.hostList.push(list);
}
if (list.name.includes("风机")) {
this.coolingTowerFanList.push(list);
}
if (list.name.includes("冷却泵")) {
this.coolingPump.push(list);
}
if (list.name.includes("冷冻泵")) {
this.freezingPump.push(list);
}
});
this.valveList.forEach((list) => {
if (list.name.includes("冷冻蝶阀")) {
this.freezingValve.push(list);
}
if (list.name.includes("冷却蝶阀")) {
this.coolingValve.push(list);
}
if (list.name.includes("冷却塔出水阀")) {
this.coolingTowerOutValve.push(list);
}
});
console.log("处理过后的主机列表", this.hostList);
} else {
this.deviceList = [];
this.valveList = [];
this.total = 0;
}
// Promise
resolve(res);
})
.catch((error) => {
// Promise
reject(error);
});
});
},
//
hadleOperationConrol(id, param) {
let data = {
id: id,
param: param,
};
console.log("操作参数", data);
operationConrol([data])
.then((res) => {
if (res.code == 200) {
this.$modal.msgSuccess("指令下发成功!");
// loading
this.loading = true;
// ;
setTimeout(() => {
this.getOperationList().finally(() => {
// loading
this.loading = false;
});
}, 6000);
} else {
// this.$modal.msgError("");
console.log("应该更新状态的");
// ;
this.getOperationList();
}
})
.catch((error) => {
console.log("请求发生错误,更新设备状态", error);
// ;
this.getOperationList();
});
},
},
};
</script>
<style lang="scss" scoped>
/* 设备控制列表样式 */
.device-container {
display: flex;
flex-direction: column;
width: 100%;
background-color: #142c4e;
padding: 10px 10px 30px 10px;
border-radius: 10px;
margin-bottom: 20px;
}
/* 状态统计样式 */
.status-statistics {
margin-bottom: 25px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.status-card {
background-color: #142c4e;
border-radius: 10px;
padding: 10px;
width: 24%;
}
.status-label {
color: #9ca3af;
margin-bottom: 20px;
}
.status-value-running {
font-size: 24px;
font-weight: bold;
color: #22c55e;
}
.status-value-auto {
font-size: 24px;
font-weight: bold;
color: #60a5fa;
}
.status-value-error {
font-size: 24px;
font-weight: bold;
color: #ef4444;
}
.status-value-maintenance {
font-size: 24px;
font-weight: bold;
color: #f59e0b;
}
</style>

643
src/views/centerairC/sysControl/index copy.vue

@ -1,643 +0,0 @@
<template>
<div class="app-container" v-loading="loading">
<!-- 状态统计 -->
<div class="status-statistics">
<div class="status-card">
<div class="status-label">运行设备</div>
<div class="status-value-running">
{{ statistics.running }}/{{ total }}
</div>
</div>
<div class="status-card">
<div class="status-label">手动模式</div>
<div class="status-value-auto">{{ statistics.manual }}/{{ total }}</div>
</div>
<div class="status-card">
<div class="status-label">自动模式</div>
<div class="status-value-maintenance">
{{ statistics.auto }}/{{ total }}
</div>
</div>
<div class="status-card">
<div class="status-label">故障设备</div>
<div class="status-value-error">{{ statistics.warn }}/{{ total }}</div>
</div>
</div>
<!-- 非蝶阀控制列表 -->
<div class="device-container">
<!-- <div class="device-li">
<div class="device-name">设备名称</div>
<div class="device-name">运行状态</div>
<div class="device-name">手动控制</div>
<div class="device-name">手自动切换</div>
<div class="device-name">本地远程状态</div>
<div class="device-name">故障报警</div>
<div class="device-name">频率调节</div>
<div class="device-name">频率反馈</div>
</div> -->
<list-header :deviceList ="deviceList"></list-header>
<!-- <div class="device-li" v-for="(item, index) in deviceList" :key="index">
<div class="device-name">{{ item.name }}</div>
<div class="device-name">
<div
class="run"
:class="item.runStatus === '运行' ? 'run' : 'no-run'"
>
{{ item.runStatus }}
</div>
</div>
<div class="device-name">
<el-switch
style="display: block"
v-model="item.controlText"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="开启"
inactive-text="停止"
@change="handleControlText(item)"
>
</el-switch>
</div>
<div class="device-name">
<el-switch
style="display: block"
v-model="item.automaticText"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="自动"
inactive-text="手动"
@change="handleAutomaticText(item)"
>
</el-switch>
</div>
<div class="device-name">
<span
:class="
item.localRemote === '远程' ? 'strong-electric' : 'auto-electric'
"
>{{ item.localRemote }}</span
>
</div>
<div class="device-name">
<div :class="item.warnText === '故障' ? 'bad-status' : 'good-status'">
{{ item.warnText }}
</div>
</div>
<div class="device-name">
<el-input
v-if="item.frequencySet !== null && item.frequencySet !== undefined"
v-model="item.frequencySet"
size="mini"
@keyup.enter.native="handleEnter(item)"
@input="handleInput(item)"
></el-input>
<div class="device-name" v-else></div>
</div>
<div class="device-name" v-if="item.frequency">
{{ item.frequency }}Hz
</div>
<div class="device-name" v-else></div>
</div> -->
</div>
<!-- 蝶阀控制列表 -->
<div class="device-container second">
<div class="device-li">
<div class="device-name">设备名称</div>
<div class="device-name">手动控制</div>
<div class="device-name">手自动切换</div>
<div class="device-name">本地远程状态</div>
<div class="device-name">阀关反馈</div>
<div class="device-name">阀开反馈</div>
</div>
<div class="device-li" v-for="(item, index) in valveList" :key="index">
<div class="device-name">{{ item.name }}</div>
<div class="device-name">
<el-switch
style="display: block"
v-model="item.controlText"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="开启"
inactive-text="停止"
@change="handleControlText(item)"
>
</el-switch>
</div>
<div class="device-name">
<el-switch
style="display: block"
v-model="item.automaticText"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="自动"
inactive-text="手动"
@change="handleAutomaticText(item)"
>
</el-switch>
</div>
<div class="device-name">
<span
:class="
item.localRemote === '远程' ? 'strong-electric' : 'auto-electric'
"
>{{ item.localRemote }}</span
>
</div>
<div class="device-name">
<div
:class="item.openStauts === '关闭' ? 'bad-status' : 'good-status'"
>
{{ item.openStauts }}
</div>
</div>
<div class="device-name">
<div
:class="item.closeStatus === '关闭' ? 'bad-status' : 'good-status'"
>
{{ item.closeStatus }}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { operationList, operationConrol } from "@/api/centerairC/sysMonitor";
import listHeader from "./listHeader.vue";
export default {
components: { listHeader },
name: "sysMonitor",
data() {
return {
loading: false,
deviceList: [], //
hostList: [], //
coolingTowerFanList: [], //
coolingPump: [], //
freezingPump: [], //
valveList: [], //
total: null,
freezingValve: [], //
coolingValve: [], //
coolingTowerOutValve: [], //
};
},
computed: {
statistics() {
const deviceManual = this.deviceList.filter(
(d) => d.automaticText === false
).length;
const deviceAuto = this.deviceList.filter(
(d) => d.automaticText === true
).length;
const valveManual = this.valveList.filter(
(v) => v.automaticText === false
).length;
const valveAuto = this.valveList.filter(
(v) => v.automaticText === true
).length;
return {
running: this.deviceList.filter((d) => d.runStatus === "运行").length,
manual: deviceManual + valveManual,
auto: deviceAuto + valveAuto,
warn: this.deviceList.filter((d) => d.warnText === "故障").length,
};
},
},
mounted() {
this.getOperationList();
},
methods: {
//
getOperationList() {
return new Promise((resolve, reject) => {
operationList({ systemType: 0 })
.then((res) => {
console.log("列表返回res", res);
if (res.code === 200) {
let handleList = res.rows;
this.deviceList = [];
this.valveList = [];
handleList.forEach((element) => {
if (element.children && element.children.length > 0) {
//
let deviceItem = {
name: element.name,
};
//
let valveItem = {
name: element.name,
};
const limitedChildren = element.children;
let valveClosed = false;
let valveOpened = false;
limitedChildren.forEach((child) => {
if (child.name) {
//
if (
child.paramType === "1" &&
!child.name.includes("阀")
) {
deviceItem.runStatus =
Number(child.value) == 0 ? "不运行" : "运行";
}
//
else if (
child.paramType === "2" &&
!child.name.includes("阀")
) {
deviceItem.controlText =
Number(child.value) == 0 ? false : true;
deviceItem.controlId = child.id;
}
// 01
else if (
child.paramType === "6" &&
!child.name.includes("阀")
) {
deviceItem.automaticText =
Number(child.value) == 0 ? true : false;
deviceItem.automaticId = child.id;
}
//
else if (
child.paramType === "5" &&
!child.name.includes("阀")
) {
deviceItem.warnText =
Number(child.value) == 0 ? "未故障" : "故障";
//
} else if (
child.paramType === "22" &&
!child.name.includes("阀")
) {
deviceItem.localRemote =
Number(child.value) == 0 ? "本地" : "远程";
}
//
else if (
child.paramType === "3" &&
!child.name.includes("阀")
) {
deviceItem.frequencySet =
Number(child.value) == 0 ? "0" : child.value;
deviceItem.frequencyId = child.id;
}
//
else if (child.paramType === "4") {
deviceItem.frequency = child.value;
}
// -
else if (
child.paramType === "22" &&
child.name.includes("阀")
) {
valveItem.localRemote =
Number(child.value) == 0 ? "本地" : "远程";
}
// -
else if (
child.paramType === "6" &&
child.name.includes("阀")
) {
valveItem.automaticText =
Number(child.value) == 0 ? true : false;
valveItem.automaticId = child.id;
}
// -
else if (
child.paramType === "2" &&
child.name.includes("阀")
) {
valveItem.controlText =
Number(child.value) == 0 ? false : true;
valveItem.controlId = child.id;
}
//
if (
child.name.includes("阀关到位") &&
Number(child.value) == 0
) {
valveClosed = false;
} else if (
child.name.includes("阀关到位") &&
Number(child.value) == 1
) {
valveClosed = true;
}
//
if (
child.name.includes("阀开到位") &&
Number(child.value) == 0
) {
valveOpened = false;
} else if (
child.name.includes("阀开到位") &&
Number(child.value) == 1
) {
valveOpened = true;
}
}
});
//
if (valveClosed && !valveOpened) {
valveItem.closeStatus = "开启";
valveItem.openStauts = "关闭";
} else if (!valveClosed && valveOpened) {
valveItem.closeStatus = "关闭";
valveItem.openStauts = "开启";
}
// deviceList
if (Object.keys(deviceItem).length > 1) {
this.deviceList.push(deviceItem);
}
// valveList
if (Object.keys(valveItem).length > 1) {
this.valveList.push(valveItem);
}
}
});
console.log("处理过的this.deviceList", this.deviceList);
console.log("处理过的this.valveList", this.valveList);
this.total = this.deviceList.length + this.valveList.length;
//
this.hostList = [];
this.deviceList.forEach((list) => {
if (list.name.includes("机") && !list.name.includes("风")) {
this.hostList.push(list);
}
});
console.log("处理过后的主机列表", this.hostList);
} else {
this.deviceList = [];
this.valveList = [];
this.total = 0;
}
// Promise
resolve(res);
})
.catch((error) => {
// Promise
reject(error);
});
});
},
//
handleInput(item) {
console.log("校验");
//
item.frequencySet = String(item.frequencySet).replace(/[^\d]/g, "");
},
handleEnter(item) {
console.log("请求后端");
this.$confirm(
`确定要修改"${item.name}"的频率为:${item.frequencySet} Hz吗?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
this.hadleOperationConrol(item.frequencyId, item.frequencySet);
})
.catch(() => {
//
this.getOperationList();
});
},
//
handleControlText(item) {
this.$confirm(
`确定要切换设备"${item.name}"的状态为:${
item.controlText ? "开启" : "停止 吗?"
}`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
//
console.log("请求后台", item.controlText);
let param = null;
if (item.controlText) {
param = 1;
} else {
param = 0;
}
this.hadleOperationConrol(item.controlId, param);
})
.catch(() => {
//
item.controlText = !item.controlText;
console.log("不请求后台");
});
},
//
handleAutomaticText(item) {
this.$confirm(
`确定要切换设备"${item.name}"的状态为:${
item.automaticText ? "自动" : "手动 吗?"
}`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
//
console.log("请求后台", item.automaticText);
let param = null;
if (item.automaticText) {
param = 0;
} else {
param = 1;
}
this.hadleOperationConrol(item.automaticId, param);
})
.catch(() => {
//
item.automaticText = !item.automaticText;
console.log("不请求后台");
});
},
hadleOperationConrol(id, param) {
let data = {
id: id,
param: param,
};
console.log("操作参数", data);
operationConrol([data])
.then((res) => {
if (res.code == 200) {
this.$modal.msgSuccess("操作成功");
// loading
this.loading = true;
// ;
setTimeout(() => {
this.getOperationList().finally(() => {
// loading
this.loading = false;
});
}, 6000);
} else {
// this.$modal.msgError("");
console.log("应该更新状态的");
// ;
this.getOperationList();
}
})
.catch((error) => {
console.log("请求发生错误,更新设备状态", error);
// ;
this.getOperationList();
});
},
},
};
</script>
<style lang="scss" scoped>
/* 设备控制列表样式 */
.device-container {
display: flex;
flex-direction: column;
width: 100%;
background-color: #142c4e;
padding: 10px 10px 30px 10px;
border-radius: 10px;
.device-li {
flex: 1;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
padding: 12px 0;
color: #abcdfc;
border-bottom: 1px dashed #0349ac;
.device-name {
flex: 1;
white-space: nowrap;
.el-switch {
width: 120px !important;
}
.run {
display: flex;
flex-direction: row;
align-items: center;
display: block;
}
.run::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: rgb(16, 231, 16);
border-radius: 50%;
margin-right: 5px;
}
.no-run {
display: flex;
flex-direction: row;
align-items: center;
display: block;
}
.no-run::before {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-color: rgb(180, 180, 180);
border-radius: 50%;
margin-right: 5px;
}
.el-input {
width: 100px;
}
.strong-electric {
background-color: rgba(59, 130, 246, 0.2);
color: #60a5fa;
padding: 5px 20px;
border-radius: 10px;
}
.auto-electric {
background-color: rgba(231, 144, 45, 0.2);
color: #e47f21;
padding: 5px 20px;
border-radius: 10px;
}
.good-status {
color: #4ade80;
}
.bad-status {
color: #f05348;
}
}
}
.device-li:nth-child(1) {
color: #9ca3af;
}
}
.second {
margin-top: 20px;
}
/* 状态统计样式 */
.status-statistics {
margin-bottom: 25px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.status-card {
background-color: #142c4e;
border-radius: 10px;
padding: 10px;
width: 24%;
}
.status-label {
color: #9ca3af;
margin-bottom: 20px;
}
.status-value-running {
font-size: 24px;
font-weight: bold;
color: #22c55e;
}
.status-value-auto {
font-size: 24px;
font-weight: bold;
color: #60a5fa;
}
.status-value-error {
font-size: 24px;
font-weight: bold;
color: #ef4444;
}
.status-value-maintenance {
font-size: 24px;
font-weight: bold;
color: #f59e0b;
}
</style>

352
src/views/centerairC/sysMonitor/components/hostChart.vue

@ -64,35 +64,83 @@ export default {
const names = [];
// chartData
const chartData = [];
item.dataList.forEach((val, index) => {
//
let loadDataIndex = -1;
for (let i = 0; i < item.dataList.length; i++) {
if (
item.dataList[i].name &&
item.dataList[i].name.includes("负载")
) {
loadDataIndex = i;
this.chartData5 = item.dataList[i].value;
name5 = item.dataList[i].name;
break;
}
}
//
if (loadDataIndex !== -1) {
item.dataList.splice(loadDataIndex, 1);
}
//
item.dataList.slice(0, 4).forEach((val, index) => {
if (val.name) {
// 5
if (index < 5) {
chartData[index] = val.value;
names[index] = val.name;
console.log("多少个name",chartData[index] )
}
chartData[index] = val.value;
names[index] = val.name;
}
});
// chartData this.chartDataX
this.chartData1 = chartData[0];
this.chartData2 = chartData[1];
this.chartData3 = chartData[2];
this.chartData4 = chartData[3];
this.chartData5 = chartData[4];
this.chartData1 = chartData[0] || "";
this.chartData2 = chartData[1] || "";
this.chartData3 = chartData[2] || "";
this.chartData4 = chartData[3] || "";
// names
name1 = names[0] || "";
name2 = names[1] || "";
name3 = names[2] || "";
name4 = names[3] || "";
name5 = names[4] || "";
}
});
console.log("this.chartData1", this.chartData1);
console.log("this.chartData2", this.chartData2);
console.log("this.chartData3", this.chartData3);
console.log("this.chartData4", this.chartData4);
console.log("this.chartData5", this.chartData5);
this.$nextTick(() => {
// y
var Min1 = 0,
Min2 = 0,
Max1 = Math.ceil(
Math.max(
...this.chartData1,
...this.chartData2,
...this.chartData3,
...this.chartData4
)
),
Max2 = Math.ceil(Math.max(...this.chartData5));
console.log("Min1", Min1);
console.log("Min2", Min2);
console.log("Max1", Max1);
console.log("Max2", Max2);
const adapterOption = {
xAxis: {
data: this.bottomData,
},
yAxis: [
//y
{
min: Min1,
max: Max1,
splitNumber: 10,
interval: (Max1 - Min1) / 10,
},
{
min: Min2,
max: Max2,
splitNumber: 10,
interval: (Max2 - Min2) / 10,
},
],
series: [
{
yAxisIndex: 0,
@ -115,7 +163,7 @@ export default {
data: this.chartData4,
},
{
yAxisIndex: 0,
yAxisIndex: 1,
name: name5,
data: this.chartData5,
},
@ -131,6 +179,21 @@ export default {
xAxis: {
data: [],
},
yAxis: [
//y
{
min: 0,
max: 0,
splitNumber: 10,
interval: 0,
},
{
min: 0,
max: 0,
splitNumber: 10,
interval: 0,
},
],
series: [
{
yAxisIndex: 0,
@ -186,6 +249,17 @@ export default {
},
//chartInstance
initChart() {
var Min1 = 0,
Min2 = 0,
Max1 = Math.ceil(
Math.max(
...this.chartData1,
...this.chartData2,
...this.chartData3,
...this.chartData4
) + 4
),
Max2 = Math.ceil(Math.max(...this.chartData5) + 4);
const chartRef = this.$refs.chart_ref;
if (chartRef) {
//
@ -193,6 +267,42 @@ export default {
this.option = {
tooltip: {
trigger: "axis",
// tooltip
formatter: function (params) {
var res = params[0].name + "<br/>";
for (var i = 0, l = params.length; i < l; i++) {
var seriesName = params[i].seriesName;
var value = params[i].value;
console.log("打印颜色", params[i].color)
var marker =
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
params[i].color +
'"></span>';
// seriesName
if (seriesName.includes("负载")) {
res +=
marker +
seriesName +
":" +
'<span style="color: #000000; font-weight: bold;margin-left:5px">' +
value +
" " +
"%" +
"</span><br>";
} else {
res +=
marker +
seriesName +
":" +
'<span style="color: #000000; font-weight: bold;margin-left:5px">' +
value +
" " +
"℃" +
"</span><br>";
}
}
return res;
},
},
legend: {
show: true,
@ -235,46 +345,86 @@ export default {
}, //x线
data: this.bottomData,
},
yAxis: {
min: 0,
// max:20,
// // // min:'dataMin',
// // // max:'dataMax',
// name: "kwh", // y
// name
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12,
},
miniInterval: 5,
type: "value",
// y
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
// y
axisLine: {
show: true,
lineStyle: {
color: "#365576", // y 线
yAxis: [
{
min: Min1,
max: Max1,
splitNumber: 10,
interval: (Max1 - Min1) / 10,
// name
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12,
},
miniInterval: 5,
type: "value",
// y
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
// y
axisLine: {
show: true,
lineStyle: {
color: "#365576", // y 线
},
},
//y线
// splitNumber: 10,
// y线
splitLine: {
lineStyle: {
color: "#1a3d62", // 线
type: "dashed", // 线线
},
},
},
//y线
// splitNumber: 10,
// y线
splitLine: {
lineStyle: {
color: "#1a3d62", // 线
type: "dashed", // 线线
{
min: Min2,
max: Max2,
splitNumber: 10,
interval: (Max2 - Min2) / 10,
// name
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12,
},
miniInterval: 5,
type: "value",
name: "负载", // y
// y
axisLabel: {
color: "#ffffff",
},
// y
axisLabel: {
color: "rgba(255, 255, 255, 1)",
},
// y
axisLine: {
show: true,
lineStyle: {
color: "#365576", // y 线
},
},
//y线
// splitNumber: 10,
// y线
splitLine: {
lineStyle: {
color: "#1a3d62", // 线
type: "dashed", // 线线
},
},
},
},
],
series: [
{
type: "line",
//
symbolSize: 8,
data: this.chartData1,
yAxisIndex: 0,
//线
itemStyle: {
color: "#00CED1", //线
@ -285,33 +435,13 @@ export default {
smooth: false,
// 线
showSymbol: false,
// //
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "rgba(26, 105, 241, 0.5)", //
// },
// {
// offset: 1,
// color: "rgba(26, 105, 241, 0)", //
// },
// ],
// global: false, // false
// },
// },
},
{
type: "line",
//
symbolSize: 8,
data: this.chartData2,
yAxisIndex: 0,
//线
itemStyle: {
color: "#3ba272", //线
@ -319,125 +449,48 @@ export default {
smooth: false,
// 线
showSymbol: false,
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "rgba(0, 206, 209, 0.5)", //
// },
// {
// offset: 1,
// color: "rgba(0, 206, 209, 0)", //
// },
// ],
// global: false, // false
// },
// },
},
{
type: "line",
//
symbolSize: 8,
data: this.chartData3,
yAxisIndex: 0,
//线
itemStyle: {
color: "#fac858", //线
color: "#1a69f1", //线
},
smooth: false,
// 线
showSymbol: false,
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "rgba(0, 206, 209, 0.5)", //
// },
// {
// offset: 1,
// color: "rgba(0, 206, 209, 0)", //
// },
// ],
// global: false, // false
// },
// },
},
{
type: "line",
//
symbolSize: 8,
data: this.chartData4,
yAxisIndex: 0,
//线
itemStyle: {
color: "#1a69f1", //线
color: "#ee6666", //线
},
smooth: false,
// 线
showSymbol: false,
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "rgba(0, 206, 209, 0.5)", //
// },
// {
// offset: 1,
// color: "rgba(0, 206, 209, 0)", //
// },
// ],
// global: false, // false
// },
// },
},
{
type: "line",
//
symbolSize: 8,
data: this.chartData5,
yAxisIndex: 1,
//线
itemStyle: {
color: "#ee6666", //线
color: "#fac858", //线
},
smooth: false,
// 线
showSymbol: false,
// areaStyle: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "rgba(0, 206, 209, 0.5)", //
// },
// {
// offset: 1,
// color: "rgba(0, 206, 209, 0)", //
// },
// ],
// global: false, // false
// },
// },
},
],
};
@ -455,5 +508,4 @@ export default {
width: 100%;
height: 4rem;
}
</style>
</style>

187
src/views/centerairC/sysMonitor/hostDetails.vue

@ -122,6 +122,40 @@
</div>
<div class="detail-bottom">
<div class="hostStatus">
<div class="hostStatus-li">
<span style="">冷冻供水温度:</span>
<el-input
size="mini"
style="width: 40%"
v-model="frozenupply"
@keyup.enter.native="
handleEnter(
'冷冻供水温度',
'℃',
frozenupply,
frozenupplIdy,
$event
)
"
@input="handleInput(children)"
@blur="handleBlur()"
></el-input>
<span></span>
</div>
<div class="hostStatus-li">
<span>需求设定值:</span>
<el-input
size="mini"
style="width: 40%"
v-model="requireSet"
@keyup.enter.native="
handleEnter('需求设定值', '%', requireSet, requireSetId, $event)
"
@input="handleInput(children)"
@blur="handleBlur()"
></el-input>
<span>%</span>
</div>
<div class="hostStatus-li">
<span>手自动切换:</span>
<span class="automaticData">{{ automaticObj.showValue }}</span>
@ -163,12 +197,6 @@
</div>
</div>
</div>
<!-- <line-square
class="line1"
:horizontalLength="720"
:verticalLength="440"
:overlap="15"
></line-square> -->
</div>
<div class="detail-data compressor">
<div class="detail-data-top">
@ -191,12 +219,6 @@
</div>
</div>
</div>
<!-- <line-square
class="line1"
:horizontalLength="720"
:verticalLength="440"
:overlap="15"
></line-square> -->
</div>
</div>
</div>
@ -216,6 +238,7 @@ import titleImg from "./components/titleImg.vue";
import lineSquare from "./components/lineSquare.vue";
import { format } from "@/utils/datetime";
import { getDay } from "@/utils/datetime";
import { operationConrol } from "@/api/hotWater/waterControl";
export default {
name: "sysControl",
components: { LoadData, hostChart, titleImg, lineSquare },
@ -229,6 +252,10 @@ export default {
condenserPre: "", //
evaporatorPre: "", //
rightHostData: [], //
frozenupply: "", //
frozenupplyId: "",
requireSet: "", //
requireSetId: "",
automaticObj: {}, //
localObj: {}, //
badObj: {}, //
@ -370,35 +397,69 @@ export default {
this.rightHostData = [];
// paramType
this.rightHostData = this.hostData.filter((item) => {
return !["2", "21", "20", "6", "5", "22", "26"].includes(
const specificParamTypes = [6, 5, 22, 26];
// const specificParamTypes = [];
// paramType
const isSpecificParamType = specificParamTypes.includes(
Number(item.paramType)
);
// const isCombinedCondition0 =
// Number(item.paramType) === 2 &&
// item.otherName.includes("");
// false
return !isSpecificParamType;
});
// ordernum
this.rightHostData.sort((a, b) => {
return Number(a.ordernum) - Number(b.ordernum);
});
// // ordernum
// this.rightHostData.sort((a, b) => {
// return Number(a.ordernum) - Number(b.ordernum);
// });
this.hostData.forEach((item) => {
// paramType showValue
if (item.paramType === "6") {
if (
item.paramType === "6" &&
item.otherName.includes("手自动切换")
) {
//
item.showValue =
Number(item.curValue) === 0 ? "自动" : "手动";
this.automaticObj = item;
} else if (item.paramType === "5") {
} else if (
item.paramType === "5" &&
item.otherName.includes("故障")
) {
//
item.showValue =
Number(item.curValue) === 0 ? "未故障" : "故障";
this.badObj = item;
} else if (item.paramType === "22") {
} else if (
item.paramType === "22" &&
item.otherName === "本地_远程"
) {
//
item.showValue =
Number(item.curValue) === 0 ? "本地" : "远程";
this.localObj = item;
} else if (item.paramType === "26") {
} else if (
item.paramType === "26" &&
item.otherName.includes("运行累计时间")
) {
//
item.showValue = item.curValue;
this.timeObj = item;
} else if (
item.paramType === "12" &&
item.otherName.includes("冷冻供水温度")
) {
//
this.frozenupply = item.curValue;
this.frozenupplyId = item.id;
} else if (
item.paramType === "0" &&
item.otherName.includes("需求设定值")
) {
//
this.requireSet = item.curValue;
this.requireSetId = id;
}
});
}
@ -507,6 +568,79 @@ export default {
this.exitFullscreen();
this.$router.push("/alarm/alarmRecord");
},
//
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);
}
},
//
handleBlur() {
// this.currentFocusIndex = "";
},
handleEnter(title, unit, value, id, event) {
console.log("请求后端", value);
//
event.target.blur();
this.$confirm(
`确定要修改"${title}"的数据为:${value} ${unit}吗?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
this.hadleOperationConrol(id, value);
})
.catch(() => {
//
// this.getOperationList();
});
},
hadleOperationConrol(id, param) {
let data = {
id: id,
param: param,
};
console.log("操作参数", data);
operationConrol([data])
.then((res) => {
if (res.code == 200) {
this.$modal.msgSuccess("指令下发成功!");
// loading
this.loading = true;
// ;
setTimeout(() => {
this.getPolicyList().finally(() => {
// loading
this.loading = false;
});
}, 5000);
} else {
// this.$modal.msgError("");
console.log("应该更新状态的");
// ;
this.getPolicyList();
}
})
.catch((error) => {
console.log("请求发生错误,更新设备状态", error);
// ;
this.getPolicyList();
});
},
},
};
</script>
@ -757,9 +891,9 @@ export default {
.fanBlade {
z-index: 10;
position: absolute;
top: 2.55rem;
left: 4.65rem;
width: 0.5rem;
top: 2.75rem;
left: 4.4rem;
width: 0.6rem;
height: 0.5rem;
transform-style: preserve-3d;
transform: translateX(-50%) rotateX(15deg) rotateZ(20deg)
@ -823,10 +957,13 @@ export default {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start;
align-items: center;
span {
white-space: nowrap;
}
.el-input {
margin: 0 0.05rem;
}
}
}
.detail-data {

1037
src/views/centerairC/sysMonitor/monitorCenter.vue

File diff suppressed because it is too large Load Diff

252
src/views/hotWater/waterControl/index.vue

@ -69,15 +69,19 @@
<div class="words-li">
<div class="ash">开关状态:</div>
<div class="white">
<el-switch
style="display: block"
v-model="item.switchStatus"
active-color="#13ce66"
active-text="开启"
inactive-text="关闭"
<el-select
v-model="item.hotPumpStatus"
placeholder="请选择"
@change="handleHotPump(item)"
>
</el-switch>
<el-option
v-for="item in hotPumpOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>
<div class="words-li">
@ -129,7 +133,9 @@
/>
<div class="monitor-words">
<div class="words-li">
<div class="ash">PID手自动:</div>
<div class="ash" style="letter-spacing: 5px">
频率手自动:
</div>
<div class="white">
<el-switch
style="display: block"
@ -143,7 +149,9 @@
</div>
</div>
<div class="words-li">
<div class="ash">&nbsp;&nbsp;&nbsp;:</div>
<div class="ash" style="letter-spacing: 7px">
启停&nbsp;控制:
</div>
<div class="white">
<el-switch
style="display: block"
@ -160,7 +168,7 @@
</div>
<div class="control-bottom">
<div class="words-li">
<div class="ash">故障信息:</div>
<div class="ash">故障信息</div>
<el-tag
size="mini"
v-if="item.alarmStatus === '无故障'"
@ -172,7 +180,7 @@
}}</el-tag>
</div>
<div class="words-li">
<div class="ash">运行状态:</div>
<div class="ash">运行状态</div>
<el-tag
size="mini"
v-if="item.runningStatus === '运行'"
@ -245,23 +253,98 @@
<div class="white">S</div>
</div>
<div class="words-li">
<div class="ash">换机周期:</div>
<div class="ash">换机时间:</div>
<el-input
v-model="item.switchTimeSet"
v-model="item.counterSet"
@keyup.enter.native="
handleEnter(
item,
item.switchTimeSet,
item.switchTimeSetId,
'换机周期',
'S'
item.counterSet,
item.counterSetId,
'换机时间',
''
)
"
@input="handleInput(item)"
@blur="handleBlur()"
size="mini"
></el-input>
<div class="white">min</div>
<div class="white"></div>
</div>
<div class="words-li">
<div class="white">一次50分钟</div>
</div>
</div>
</div>
<!-- 裙楼供水泵高区供水泵中厨回水泵 -->
<div class="monitor-flex-left" v-if="activeName.includes('回水')">
<div class="control-top">
<img
class="monitor-img3"
src="../../../assets/images/pump.png"
/>
<div class="monitor-words">
<div class="words-li">
<div class="ash">回水温度:</div>
<div class="white">{{ item.temp }}</div>
</div>
<div class="words-li">
<div class="ash">回水温度设置:</div>
<el-input
v-model="item.tempSet"
@keyup.enter.native="
handleEnter(
item,
item.tempSet,
item.tempSetId,
'回水温度',
'℃'
)
"
@input="handleInput(item)"
@blur="handleBlur()"
size="mini"
></el-input>
<div class="white"></div>
</div>
<div class="words-li">
<div class="ash">回水温度设定差值:</div>
<el-input
v-model="item.diffValueSet"
@keyup.enter.native="
handleEnter(
item,
item.diffValueSet,
item.diffValueSetId,
'回水温度设定差值',
'℃'
)
"
@input="handleInput(item)"
@blur="handleBlur()"
size="mini"
></el-input>
<div class="white"></div>
</div>
<div class="words-li">
<div class="ash">回水温度设定延时时间:</div>
<el-input
v-model="item.delayTimeSet"
@keyup.enter.native="
handleEnter(
item,
item.delayTimeSet,
item.delayTimeSetId,
'回水温度设定延时时间',
'S'
)
"
@input="handleInput(item)"
@blur="handleBlur()"
size="mini"
></el-input>
<div class="white">min</div>
</div>
</div>
</div>
</div>
@ -310,8 +393,8 @@
></el-input>
<div class="white">%</div>
</div>
<div class="words-li words-li5">
<div class="ash">补水延时时间:</div>
<div class="words-li words-li6">
<div class="ash">液位设定延时时间:</div>
<el-input
size="mini"
v-model="item.delayTimeSet"
@ -321,15 +404,15 @@
item,
item.delayTimeSet,
item.delayTimeSetId,
'补水延时时间',
'S'
'液位设定延时时间',
'min'
)
"
@input="handleWaterInput(item)"
></el-input>
<div class="white">S</div>
<div class="white">min</div>
</div>
<div class="words-li words-li5">
<div class="words-li words-li2">
<div class="ash ash2">液位误差值:</div>
<el-input
size="mini"
@ -369,22 +452,22 @@
class="monitor-img2"
src="../../../assets/images/startpum.png"
/>
<div class="sigClass">
<div class="monitor-words">
<div class="words-li">
<div class="ash">启动:</div>
<div class="ash" style="letter-spacing: 8px">一键启动:</div>
<div class="white">
<el-switch
style="display: block"
v-model="item.openSwitch"
active-color="#13ce66"
active-text=""
inactive-text=""
active-text="开启"
inactive-text="停止"
@change="handleAllStart(item)"
>
</el-switch>
</div>
</div>
<div class="words-li">
<!-- <div class="words-li">
<div class="ash">停止:</div>
<div class="white">
<el-switch
@ -397,7 +480,7 @@
>
</el-switch>
</div>
</div>
</div> -->
</div>
</div>
<div class="control-bottom">
@ -429,7 +512,7 @@
<div class="white">{{ item.pressure }}bar</div>
</div>
<div class="words-li words-li4">
<div class="ash">供水温度误差设定:</div>
<div class="ash">温度偏差值:</div>
<el-input
v-model="item.diffValueSet"
@keyup.enter.native="
@ -437,7 +520,7 @@
item,
item.diffValueSet,
item.diffValueSetId,
'供水温度误差设定',
'温度偏差值',
'℃'
)
"
@ -459,7 +542,7 @@
item.alarmStatus
}}</el-tag>
</div>
<div class="words-li words-li4">
<!-- <div class="words-li words-li4">
<div class="ash">补水延时时间设定:</div>
<el-input
v-model="item.delayTimeSet"
@ -477,7 +560,7 @@
size="mini"
></el-input>
<div class="white">S</div>
</div>
</div> -->
</div>
</div>
</div>
@ -504,6 +587,24 @@ export default {
},
tabsList: [],
expandedKeys: [],
hotPumpOptions: [
{
label: "关机",
value: 0,
},
{
label: "制冷",
value: 2,
},
{
label: "制热",
value: 3,
},
{
label: "热水",
value: 4,
},
],
currentId: "", //id
currentName: "", //
currentLevel: "", //
@ -666,11 +767,12 @@ export default {
let deviceItem = {
...item,
waterLevel: Number(item.waterLevel),
runningStatus: Number(item.switchStatus) == 0 ? "运行" : "停止", //
runningStatus: Number(item.runningStatus) == 0 ? "停止" : "运行", //
hotPumpStatus: item.switchStatus, //
switchStatus: Number(item.switchStatus) == 0 ? false : true, //
alarmStatus: Number(item.alarmStatus) == 0 ? "无故障" : "故障", //
handAutomaticSwitch:
Number(item.handAutomaticSwitch) == 0 ? false : true, //
Number(item.handAutomaticSwitch) == 1 ? false : true, //
openSwitch: Number(item.openSwitch) == 0 ? false : true, //
closeSwitch: Number(item.closeSwitch) == 0 ? false : true, //
};
@ -726,7 +828,8 @@ export default {
...item,
waterLevel: Number(item.waterLevel),
runningStatus:
Number(item.switchStatus) == 0 ? "运行" : "停止", //
Number(item.runningStatus) == 0 ? "运行" : "停止", //
hotPumpStatus: item.switchStatus, //
switchStatus:
Number(item.switchStatus) == 0 ? false : true, //
alarmStatus:
@ -830,10 +933,26 @@ export default {
},
//
handleHotPump(item) {
//
const originalStatus = item.hotPumpStatus;
// value label
let statusLabel = "";
switch (item.hotPumpStatus) {
case 0:
statusLabel = "关机";
break;
case 2:
statusLabel = "制冷";
break;
case 3:
statusLabel = "制热";
break;
case 4:
statusLabel = "热水";
break;
}
this.$confirm(
`确定要切换设备"${item.name}"的状态为:${
item.switchStatus ? "开启" : "关闭 吗?"
}`,
`确定要切换设备"${item.name}"的状态为:${statusLabel} 吗?"`,
"提示",
{
confirmButtonText: "确定",
@ -842,19 +961,11 @@ export default {
}
)
.then(() => {
//
console.log("请求后台", item.switchStatus);
let param = null;
if (item.switchStatus) {
param = 1;
} else {
param = 0;
}
this.hadleOperationConrol(item.switchStatusId, param);
this.hadleOperationConrol(item.switchStatusId, item.hotPumpStatus);
})
.catch(() => {
//
item.switchStatus = !item.switchStatus;
//
item.hotPumpStatus = originalStatus;
});
},
//
@ -1155,6 +1266,10 @@ export default {
width: 1.2rem;
height: 0.8rem;
}
.monitor-img3 {
width: 1.2rem;
height: 0.8rem;
}
}
.control-bottom {
width: 100%;
@ -1214,6 +1329,12 @@ export default {
width: 100px;
}
}
.words-li6 {
width: 70%;
.ash2 {
width: 100px;
}
}
}
.sigClass {
width: 40%;
@ -1272,24 +1393,11 @@ export default {
}
}
}
@media (min-width: 1400px) and (max-width: 1620px) {
.monitor-li {
width: calc(49% - 40px) !important;
margin: 0 20px !important;
.monitor-img1 {
width: 120px !important;
height: 120px !important;
}
.monitor-img2 {
width: 120px !important;
height: 80px !important;
}
.monitor-flex-left {
padding: 0 0.3rem !important;
}
@media (min-width: 1350px) and (max-width: 1460px) {
.monitor-img3 {
}
}
@media (min-width: 1240px) and (max-width: 1400px) {
@media (min-width: 1350px) and (max-width: 1850px) {
.monitor-li {
width: calc(49% - 10px) !important;
margin: 0 5px !important;
@ -1302,8 +1410,12 @@ export default {
width: 100px !important;
height: 60px !important;
}
.monitor-img3 {
width: 1.2rem !important;
height: 0.9rem !important;
}
}
@media (max-width: 1240px) {
@media (max-width: 1350px) {
.monitor-li {
width: 100% !important;
margin: 0 !important;
@ -1316,6 +1428,10 @@ export default {
width: 100px !important;
height: 80px !important;
}
.monitor-img3 {
width: 100px !important;
height: 80px !important;
}
.monitor-flex-left {
padding: 0 30px !important;
}

147
src/views/hotWater/waterMonitor/index.vue

@ -55,17 +55,18 @@
<img v-else src="../../../assets/images/flowimg/nomove.png" class="bigMove" alt="" /> -->
<!-- 文字定位 -->
<div class="flow-text text1">冷水泵</div>
<div class="flow-text text1">供水泵1</div>
<div class="flow-text text2">回水管</div>
<div class="flow-text text3">无线网关</div>
<div class="flow-text text4">回水阀</div>
<div class="flow-text text5">浴室</div>
<div class="flow-text text6">热水供水泵</div>
<div class="flow-text text5">房间</div>
<div class="flow-text text6">供水泵2</div>
<div class="flow-text text7">循环加热泵</div>
<!-- 补水定位 -->
<div class="flow-text text8">补水阀</div>
<!-- 补水阀定位 -->
<img
class="replenish"
v-if="this.coolpumstate === '运行'"
v-if="this.useWaterState === '1'"
src="../../../assets/flowimg/replenish-move.gif"
alt=""
/>
@ -78,7 +79,7 @@
<!-- 供水定位 -->
<img
class="supply"
v-if="this.waterpumstate === '运行'"
v-if="this.upWaterState1 === '1' || this.upWaterState2 === '1'"
src="../../../assets/flowimg/supply-move.gif"
alt=""
/>
@ -91,7 +92,7 @@
<!-- 加热定位 -->
<img
class="circulate"
v-if="this.hotpumstate === '运行' && this.isBad"
v-if="this.hotPumState === '1' && this.isBad !== '1'"
src="../../../assets/flowimg/circulate-move.gif"
alt=""
/>
@ -101,54 +102,49 @@
src="../../../assets/flowimg/circulate-nomove.png"
alt=""
/>
<!-- 冷水泵定位 -->
<!-- 供水泵1定位 -->
<img
class="coolpum"
v-if="this.coolpumstate === ''"
src="../../../assets/flowimg/closepum.png"
v-if="this.upWaterState1 === '1'"
src="../../../assets/flowimg/startpum.png"
alt=""
/>
<img
class="coolpum"
v-else-if="this.coolpumstate === '不运行'"
v-else
src="../../../assets/flowimg/closepum.png"
alt=""
/>
<!-- 供水泵2定位 -->
<img
class="coolpum"
v-else-if="this.coolpumstate === '运行'"
src="../../../assets/flowimg/startpum.png"
alt=""
/>
<img
class="coolpum"
v-else-if="this.coolpumstate === '补水'"
class="waterpum"
v-if="this.upWaterState2 === '1'"
src="../../../assets/flowimg/startpum.png"
alt=""
/>
<img
class="coolpum"
class="waterpum"
v-else
src="../../../assets/flowimg/closepum.png"
alt=""
/>
<!-- 热水供水泵定位 -->
<!-- 补水定位 -->
<img
class="waterpum"
v-if="this.waterpumstate === '运行'"
src="../../../assets/flowimg/startpum.png"
class="buwaterpum2"
v-if="backWaterState === '1'"
src="../../../assets/flowimg/bu-move.gif"
alt=""
/>
<img
class="waterpum"
class="buwaterpum"
v-else
src="../../../assets/flowimg/closepum.png"
src="../../../assets/flowimg/bu-nomove.png"
alt=""
/>
<!-- 循环加热泵定位-->
<img
class="cirpum"
v-if="this.hotpumstate === '运行' && this.isBad"
v-if="this.hotPumState === '1' && this.isBad !== '1'"
src="../../../assets/flowimg/startpum.png"
alt=""
/>
@ -161,13 +157,13 @@
<!-- 热泵定位 -->
<img
class="hotpum"
v-if="this.hotpumstate === '运行' && this.isBad"
v-if="this.hotPumState === '1' && this.isBad !== '1'"
src="../../../assets/flowimg/starthotpum.png"
alt=""
/>
<img
class="hotpum"
v-else-if="this.isBad === '故障'"
v-else-if="this.isBad === '1'"
src="../../../assets/flowimg/badhotpum.png"
alt=""
/>
@ -273,16 +269,34 @@
<span>{{ row.waterLevel }} </span>
</template>
</el-table-column>
<el-table-column prop="runState" label="热泵状态">
<el-table-column prop="upWaterState1" label="供水泵1状态">
<template slot-scope="{ row }">
<span v-if="row.runState === '0'">不运行 </span>
<span v-if="row.runState === '1'">运行 </span>
<span v-if="row.upWaterState1 === '0'">不运行 </span>
<span v-if="row.upWaterState1 === '1'">运行 </span>
</template>
</el-table-column>
<el-table-column prop="upWaterState2" label="供水泵2状态">
<template slot-scope="{ row }">
<span v-if="row.upWaterState2 === '0'">不运行 </span>
<span v-if="row.upWaterState2 === '1'">运行 </span>
</template>
</el-table-column>
<el-table-column prop="upWaterState" label="补水状态">
<template slot-scope="{ row }">
<span v-if="row.useWaterState === '0'">不运行 </span>
<span v-if="row.useWaterState === '1'">运行 </span>
</template>
</el-table-column>
<el-table-column prop="upWaterState" label="供水状态">
<el-table-column prop="backWaterState" label="回水状态">
<template slot-scope="{ row }">
<span v-if="row.upWaterState === '0'">不运行 </span>
<span v-if="row.upWaterState === '1'">运行 </span>
<span v-if="row.backWaterState === '0'">不运行 </span>
<span v-if="row.backWaterState === '1'">运行 </span>
</template>
</el-table-column>
<el-table-column prop="runState" label="热泵状态">
<template slot-scope="{ row }">
<span v-if="row.runState === '0'">不运行 </span>
<span v-if="row.runState === '1'">运行 </span>
</template>
</el-table-column>
<el-table-column prop="isFault" label="是否故障">
@ -320,15 +334,14 @@ export default {
baseTable: [], //
tableData: [], //
// 0 1
coolpumstate: "",
// 0 1
waterpumstate: "",
// 0 1
useWaterState: "",
upWaterState1: "", //1
upWaterState2: "", //2
backWaterState: "", //
//
hotpumstate: "关机模式",
hotPumState: "",
isBad: "无故障",
// 使 0使 1使
bathstate: 0,
// 线 0线 1线
webstate: 1,
//
@ -488,8 +501,13 @@ export default {
this.temdata = row.waterTemp;
this.pumname = row.pumpName;
//
this.hotpumstate = row.runState;
this.hotPumState = row.runState;
this.isBad = row.isFault;
this.useWaterState = row.useWaterState;
this.upWaterState1 = row.upWaterState1;
this.upWaterState2 = row.upWaterState2;
this.backWaterState = row.backWaterState;
console.log("补水阀状态11111111111111111111", this.useWaterState);
},
/* 加入小手状态 */
tableRowStyle({ row, column, rowIndex, columnIndex }) {
@ -516,7 +534,7 @@ export default {
baseltem.unit = "℃";
}
if (item.name.includes("压力")) {
baseltem.unit = "Mpa";
baseltem.unit = "bar";
}
if (item.value.includes("采集失败")) {
baseltem.value = "0";
@ -725,8 +743,8 @@ export default {
.text1 {
position: absolute;
top: 0.28rem;
left: 0.24rem;
top: 2.9rem;
left: 0.6rem;
z-index: 1;
}
@ -748,7 +766,7 @@ export default {
.text4 {
position: absolute;
top: 2.3rem;
top: 2.6rem;
right: 0.5rem;
z-index: 1;
}
@ -763,7 +781,7 @@ export default {
.text6 {
position: absolute;
top: 4.27rem;
left: 0.24rem;
left: 0.6rem;
z-index: 1;
}
@ -773,12 +791,18 @@ export default {
left: 5.6rem;
z-index: 1;
}
.text8 {
position: absolute;
top: 0.5rem;
left: 1.4rem;
z-index: 1;
}
.replenish {
position: absolute;
top: 0.7rem;
left: 0.9rem;
width: 1.7rem;
left: 0rem;
width:2.55rem;
height: 0.34rem;
z-index: 1;
}
@ -804,7 +828,8 @@ export default {
width: 1rem;
height: 0.78rem;
position: absolute;
top: 0.54rem;
top: 2rem;
left: 0.5rem;
z-index: 2;
}
@ -813,7 +838,23 @@ export default {
height: 0.78rem;
position: absolute;
top: 3.37rem;
left: 0.4rem;
left: 0.5rem;
}
.buwaterpum {
width: 8.5rem;
height: 2.9rem;
position: absolute;
top: -0.1rem;
right: -0.02rem;
z-index: 2;
}
.buwaterpum2 {
width: 8.5rem;
height: 4.4rem;
position: absolute;
top: -0.9rem;
right: -0.02rem;
z-index: 2;
}
.cirpum {
@ -894,7 +935,7 @@ export default {
background-color: #dff1fa;
margin-left: 2%;
position: absolute;
top: 1.78rem;
top: 1.47rem;
left: 2.6rem;
border: solid 0.01rem #11aaea;
z-index: 3;

15
src/views/temSys/temHistory/components/historyCharts.vue

@ -1,6 +1,10 @@
<template>
<div>
<div class="historyCharts" ref="chart_ref"></div>
<div
class="historyCharts"
:class="{ oneClass: isShowOne }"
ref="chart_ref"
></div>
</div>
</template>
@ -12,6 +16,9 @@ export default {
type: Array,
default: () => [],
},
isShowOne: {
type: Boolean,
},
},
data() {
return {
@ -293,6 +300,10 @@ export default {
<style lang="scss" scoped>
.historyCharts {
width: 100%;
height: 200px;
height: 230px;
}
.oneClass {
width: 100% !important;
height: 600px !important;
}
</style>

32
src/views/temSys/temHistory/components/historyTables.vue

@ -1,18 +1,14 @@
<template>
<div>
<el-table class="historyTables" :data="tableList" height="200px">
<el-table-column
prop="curTime"
label="时间"
></el-table-column>
<el-table-column
prop="indoorTemp"
label="温度(℃)"
></el-table-column>
<el-table-column
prop="indoorHumidity"
label="湿度(%)"
></el-table-column>
<el-table
class="historyTables"
:class="{ oneClass: isShowOne }"
:data="tableList"
height="230px"
>
<el-table-column prop="curTime" label="时间"></el-table-column>
<el-table-column prop="indoorTemp" label="温度(℃)"></el-table-column>
<el-table-column prop="indoorHumidity" label="湿度(%)"></el-table-column>
</el-table>
</div>
</template>
@ -24,6 +20,9 @@ export default {
type: Array,
default: () => [],
},
isShowOne: {
type: Boolean,
},
},
data() {
return {
@ -50,4 +49,9 @@ export default {
};
</script>
<style></style>
<style lang="scss" scoped>
.oneClass {
width: 100% !important;
height: 600px !important;
}
</style>

91
src/views/temSys/temHistory/index.vue

@ -26,6 +26,7 @@
v-model="timeDate"
:default-time="['00:00:00', '23:59:59']"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
placeholder="选择日期"
start-placeholder="开始日期"
@ -48,7 +49,10 @@
<div class="history" v-loading="loading">
<div
class="history-li"
:class="{ oneClass: tableData.length === 1 }"
:class="{
oneClass: tableData.length === 1,
twoClass: tableData.length === 2,
}"
v-for="(item, index) in tableData"
:key="index"
>
@ -74,15 +78,20 @@
<history-charts
v-if="item.showCharts"
:chartsData="item.dataList"
:isShowOne="showOneClass"
></history-charts>
<history-tables v-else :tableData="item.dataList"></history-tables>
<history-tables
v-else
:tableData="item.dataList"
:isShowOne="showOneClass"
></history-tables>
</div>
</div>
</div>
</template>
<script>
import { format2,formatDay } from "@/utils/datetime";
import { format2, formatDay } from "@/utils/datetime";
import { spaceTree } from "@/api/region";
import { temHistory } from "@/api/temSys/temMonitor";
import historyCharts from "./components/historyCharts.vue";
@ -93,7 +102,7 @@ export default {
return {
loading: false,
timeDate: [],
dayDate:[],
dayDate: [],
//
queryParams: {
systemType: "4",
@ -109,20 +118,8 @@ export default {
multiple: true,
},
options: [],
tableData: [
{
name: "A201",
showCharts: true, //
},
{
name: "A202",
showCharts: true, //
},
{
name: "A203",
showCharts: true, //
},
],
tableData: [],
showOneClass: true,
};
},
mounted() {
@ -165,6 +162,7 @@ export default {
this.selectedValue = [path];
}
console.log("反推三个id", path);
this.queryParams.houseIds = path;
}
this.getList();
@ -205,27 +203,40 @@ export default {
getList() {
this.queryParams.startTime = this.timeDate[0];
this.queryParams.endTime = this.timeDate[1];
this.dayDate = [
formatDay(this.queryParams.startTime),
formatDay(this.queryParams.endTime),
];
let data = this.queryParams;
console.log("参数", data);
temHistory(data).then((res) => {
console.log("历史数据返回", res);
if (res.code == 200) {
// loading
this.loading = true;
// dataList
const filteredRows = res.rows.filter(
(item) => item.dataList && item.dataList.length > 0
);
// showCharts: true
const newRows = filteredRows.map((item) => ({
...item,
showCharts: true,
}));
this.tableData = newRows;
console.log("处理后的历史数据", newRows);
}
}).catch((error) => {
// loading
this.loading = true;
temHistory(data)
.then((res) => {
console.log("历史数据返回", res);
if (res.code == 200) {
// dataList
const filteredRows = res.rows.filter(
(item) => item.dataList && item.dataList.length > 0
);
// showCharts: true
const newRows = filteredRows.map((item) => ({
...item,
showCharts: true,
}));
this.tableData = newRows;
if (this.tableData.length > 2) {
this.showOneClass = false;
} else {
this.showOneClass = true;
}
console.log("处理后的历史数据", newRows);
console.log("动态class布尔值", this.showOneClass);
}
})
.catch((error) => {
console.error("查询表格数据时发生错误:", error);
this.loading = false;
})
.finally(() => {
setTimeout(() => {
@ -263,7 +274,7 @@ export default {
.history-li {
background-color: rgb(38, 64, 99);
width: calc(49% - 20px);
height: 330px;
height: 350px;
margin: 0 10px;
padding: 20px;
border-radius: 20px;
@ -304,11 +315,15 @@ export default {
}
.oneClass {
width: 100% !important;
height: 750px !important;
}
.twoClass {
height: 750px !important;
}
}
</style>
<style scoped>
.elCascader >>>.el-input__inner::placeholder {
.elCascader >>> .el-input__inner::placeholder {
color: transparent !important;
}
</style>

29
src/views/temSys/temMonitor/index.vue

@ -559,19 +559,15 @@ export default {
type: "line",
//
symbolSize: 8,
data: this.chartData1,
name: "度",
data: this.chartData2,
name: "湿度",
//线
itemStyle: {
color: "#1a69f1", //线
},
lineStyle: {
color: "#1a69f1", //线
color: "#00CED1", //线
},
smooth: false,
// 线
showSymbol: true,
//
areaStyle: {
color: {
type: "linear",
@ -582,11 +578,11 @@ export default {
colorStops: [
{
offset: 0,
color: "rgba(26, 105, 241, 0.5)", //
color: "rgba(0, 206, 209, 0.5)", //
},
{
offset: 1,
color: "rgba(26, 105, 241, 0)", //
color: "rgba(0, 206, 209, 0)", //
},
],
global: false, // false
@ -597,15 +593,19 @@ export default {
type: "line",
//
symbolSize: 8,
data: this.chartData2,
name: "湿度",
data: this.chartData1,
name: "度",
//线
itemStyle: {
color: "#00CED1", //线
color: "#1a69f1", //线
},
lineStyle: {
color: "#1a69f1", //线
},
smooth: false,
// 线
showSymbol: true,
//
areaStyle: {
color: {
type: "linear",
@ -616,11 +616,11 @@ export default {
colorStops: [
{
offset: 0,
color: "rgba(0, 206, 209, 0.5)", //
color: "rgba(26, 105, 241, 0.5)", //
},
{
offset: 1,
color: "rgba(0, 206, 209, 0)", //
color: "rgba(26, 105, 241, 0)", //
},
],
global: false, // false
@ -714,6 +714,7 @@ export default {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
height: 800px;
overflow-y: auto;
.tem-li {

Loading…
Cancel
Save