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

1.修改风柜监测系统 

2.修改生活热水-监控页面为大屏
meizhou
selia-zx 2 months ago
parent
277a81df49
commit
1d35fb16f5
8 changed files with 2045 additions and 7613 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. 27
      src/store/modules/permission.js
  2. 2120
      src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails(new).vue
  3. 2110
      src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails(old).vue
  4. 608
      src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue
  5. 41
      src/views/aircAndWindc/awSysMonitor/components/damperMonitor.vue
  6. 1112
      src/views/hotWater/waterMonitor/index copy.vue
  7. 1667
      src/views/hotWater/waterMonitor/index.vue
  8. 1973
      src/views/hotWater/waterMonitor/waterMonitorDetails.vue

27
src/store/modules/permission.js
Unescape View File

@ -166,6 +166,33 @@ const permission = {
} else {
// console.log("不满足条件");
}
// 热水
const result4 = sidebarRoutes.find(
(item) => item.name === "HotWater"
);
if (result4) {
// 定义要添加的多个路由对象数组
const additionalRoutes4 = [
{
path: "/waterMonitorDetails",
name: "waterMonitorDetails",
hidden: true,
component: () =>
import("@/views/hotWater/waterMonitor/waterMonitorDetails"),
meta: { title: "热水监控", icon: "screen" },
},
// 可以继续添加更多路由对象
];
// 循环添加额外的路由对象到各路由数组
additionalRoutes4.forEach((route) => {
sidebarRoutes.push(route);
rewriteRoutes.push(route);
asyncRoutes.push(route);
});
} else {
// console.log("不满足条件");
}
commit("SET_ROUTES", rewriteRoutes);
commit("SET_SIDEBAR_ROUTERS", constantRoutes.concat(sidebarRoutes));
commit("SET_DEFAULT_ROUTES", sidebarRoutes);

2120
src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails(new).vue
View File

File diff suppressed because it is too large Load Diff

2110
src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails(old).vue
View File

File diff suppressed because it is too large Load Diff

608
src/views/aircAndWindc/awSysMonitor/asSysMonitorDetails.vue
Unescape View File

@ -94,8 +94,6 @@ import { runTime } from "@/api/centerairC/sysMonitor";
import { alarmRecordList } from "@/api/alarm/alarmRecord";
import { getDay } from "@/utils/datetime";
import { spaceTree } from "@/api/region";
import { windList, timeList, undateTime } from "@/api/aircAndWindc/index";
import { operationConrol } from "@/api/hotWater/waterControl";
import damperMonitor from "./components/damperMonitor.vue";
import normalMonitor from "./components/normalMonitor.vue";
export default {
@ -213,13 +211,15 @@ export default {
console.log("今天是星期几", this.currentWeekday);
},
mounted() {
this.requestFullscreen();
// 首次进入页面时执行
this.getSysBuild();
this.getAlarnStatus();
this.getDayData();
// 在组件挂载后尝试进入全屏
setTimeout(() => {
this.requestFullscreen();
}, 100); // 延迟 100 毫秒执行全屏操作
// 每秒更新一次时间
this.nowTimer = setInterval(() => {
this.currentDate = new Date();
}, 1000);
},
beforeDestroy() {
// 组件销毁前清除定时器
@ -562,390 +562,6 @@ export default {
}
}
}
.buildingDiv {
padding-left: 54px;
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
position: relative;
.title-bg {
width: 208px;
height: 38px;
position: absolute;
left: 0;
z-index: 0;
}
.title-word {
z-index: 10;
font-family: YouSheBiaoTiHei;
font-size: 24px;
color: #ffffff;
white-space: nowrap;
}
}
.mostDiv {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.windC {
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: 9;
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;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.wind-tem1 {
z-index: 10;
width: 1.3rem;
position: absolute;
top: 0.3rem;
left: 7.3rem;
display: flex;
flex-direction: column;
align-items: center;
.wind-text {
color: #00d2ff;
font-size: 0.18rem;
margin-bottom: 0.15rem;
}
}
.wind-tem2 {
z-index: 10;
width: 1.3rem;
position: absolute;
top: 1.7rem;
right: 0.3rem;
display: flex;
flex-direction: column;
align-items: center;
.wind-text {
color: #00d2ff;
font-size: 0.18rem;
margin-bottom: 0.15rem;
}
}
.fan-frequency {
z-index: 10;
position: absolute;
top: 1.7rem;
left: 8.5rem;
width: 1.3rem;
display: flex;
flex-direction: column;
align-items: center;
.wind-text {
color: #00d2ff;
font-size: 0.18rem;
margin-bottom: 0.15rem;
}
}
.fan-satatus1 {
position: absolute;
top: 4.5rem;
left: 8.5rem;
display: flex;
flex-direction: column;
align-items: flex-start;
.context-li {
z-index: 10;
// width: 2rem;
margin-bottom: 0.1rem;
display: flex;
flex-direction: row;
align-items: center;
}
.wind-text {
color: #00d2ff;
font-size: 0.18rem;
margin-right: 0.15rem;
white-space: nowrap;
}
}
.fan-satatus2 {
position: absolute;
top: 5.5rem;
left: 6rem;
display: flex;
flex-direction: column;
align-items: flex-start;
.context-li {
z-index: 10;
width: 2rem;
margin-bottom: 0.1rem;
display: flex;
flex-direction: row;
align-items: center;
}
.wind-text {
color: #00d2ff;
font-size: 0.18rem;
margin-right: 0.15rem;
white-space: nowrap;
}
}
.fan-satatus3 {
position: absolute;
top: 1.7rem;
left: 8.5rem;
display: flex;
flex-direction: column;
align-items: flex-start;
.context-li {
z-index: 10;
// width: 2rem;
margin-bottom: 0.1rem;
display: flex;
flex-direction: row;
align-items: center;
}
.wind-text {
color: #00d2ff;
font-size: 0.18rem;
margin-right: 0.15rem;
white-space: nowrap;
}
.goodStautus {
color: rgb(57, 248, 51);
font-size: 0.18rem;
font-weight: bold;
display: flex;
flex-direction: row;
align-items: center;
}
.goodStautus::before {
content: "";
display: inline-block;
width: 0.1rem;
height: 0.1rem;
margin-right: 0.1rem;
border-radius: 50%;
background-color: rgb(57, 248, 51);
}
.badStautus {
color: rgb(248, 48, 41);
font-size: 0.18rem;
font-weight: bold;
display: flex;
flex-direction: row;
align-items: center;
animation: blink 1s infinite;
}
.badStautus::before {
content: "";
display: inline-block;
width: 0.1rem;
height: 0.1rem;
margin-right: 0.1rem;
border-radius: 50%;
background-color: rgb(248, 48, 41);
animation: blink 1s infinite;
}
.noneStautus {
color: rgb(194, 191, 191);
font-size: 0.18rem;
font-weight: bold;
display: flex;
flex-direction: row;
align-items: center;
}
.noneStautus::before {
content: "";
display: inline-block;
width: 0.1rem;
height: 0.1rem;
margin-right: 0.1rem;
border-radius: 50%;
background-color: rgb(194, 191, 191);
}
}
/* 定义灯闪烁的动画 */
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
.wind-valve {
z-index: 10;
position: absolute;
top: 4.6rem;
left: 3rem;
width: 2rem;
display: flex;
flex-direction: row;
align-items: center;
font-size: 0.18rem;
.wind-text {
color: #00d2ff;
font-size: 0.18rem;
white-space: nowrap;
}
}
.wind-valve2 {
z-index: 10;
position: absolute;
top: 5rem;
left: 3rem;
width: 2rem;
display: flex;
flex-direction: row;
align-items: center;
.wind-text {
color: #00d2ff;
font-size: 0.18rem;
margin-right: 0.1rem;
white-space: nowrap;
}
}
.windMove {
width: 0.72rem;
height: 0.73rem;
position: absolute;
top: 3.23rem;
right: 3.81rem;
z-index: 10;
}
.tunCircle {
/* 应用动画 */
animation: rotate 2s linear infinite;
} /* 定义旋转动画 */
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.arrow-flex {
display: flex;
flex-direction: row;
align-items: center;
z-index: 10;
position: absolute;
top: 3.2rem;
left: -0.1rem;
}
.arrow-flex2 {
display: flex;
flex-direction: row;
align-items: center;
z-index: 10;
position: absolute;
top: 3.2rem;
right: 0.6rem;
}
.arrow-flex3 {
display: flex;
flex-direction: row;
align-items: center;
z-index: 10;
position: absolute;
top: 0.6rem;
right: 6rem;
transform: rotateY(180deg);
}
.wind-arrow {
width: 0.4rem;
height: 0.6rem;
margin-right: 0.15rem;
animation: moveArrow 2s linear infinite;
}
/* 定义每个箭头的透明度 */
.wind-arrow:nth-child(1) {
opacity: 1;
}
.wind-arrow:nth-child(2) {
opacity: 0.6;
}
.wind-arrow:nth-child(3) {
opacity: 0.4;
}
.wind-arrow:nth-child(4) {
opacity: 0.2;
}
/* 定义箭头移动的动画 */
@keyframes moveArrow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(0.2rem);
/* 箭头向右移动的距离 */
}
}
}
.app-container {
display: flex;
flex-direction: row;
@ -1051,112 +667,11 @@ 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);
}
}
@media (min-width: 1160px) and (max-width: 1360px) {
.windC {
transform: scale(0.8);
}
}
@media (min-width: 990px) and (max-width: 1160px) {
.windC {
transform: scale(0.7);
}
}
// 手机端样式
@media (min-width: 0px) and (max-width: 990px) {
.app-container {
@ -1178,17 +693,6 @@ export default {
.custom-tree-node {
font-size: 12px !important;
}
.buildingDiv {
padding-left: 0.54rem !important;
margin-bottom: 0.2rem !important;
.title-bg {
width: 2.08rem !important;
height: 0.38rem !important;
}
.title-word {
font-size: 15px !important;
}
}
}
</style>
<style scoped>
@ -1201,110 +705,10 @@ export default {
/* color: #f56c6c; */
color: #25f1f8;
}
.windC >>> .el-input__inner {
background-color: #04193a;
border: 1px solid #1262db;
color: #3ef0fd;
font-weight: 700;
text-align: center;
padding: 0 0.1rem !important;
font-size: 0.18rem !important;
}
.windC >>> .el-input__prefix {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.windC >>> .svg-icon {
width: 0.2rem !important;
height: 0.2rem !important;
fill: #ffffff !important;
}
.windC >>> .el-form-item {
margin-bottom: 0 !important;
}
.windC >>> .el-form-item--medium .el-form-item__content {
line-height: 0 !important;
}
/* 手机端样式 */
@media (min-width: 0px) and (max-width: 990px) {
.left-tree >>> .el-tree-node__content > .el-tree-node__expand-icon {
padding: 3px !important;
}
.windC >>> .el-input--mini .el-input__inner {
height: 0.28rem !important;
line-height: 0.28rem !important;
padding: 0.2rem 0.1rem !important;
}
.windC >>> .el-switch {
height: 0.2rem !important;
line-height: 0.2rem !important;
font-size: 0.18rem !important;
}
.windC >>> .el-switch__label {
height: 0.2rem !important;
line-height: 0.2rem !important;
font-size: 0.18rem !important;
}
.windC >>> .el-switch__label * {
font-size: 0.18rem !important;
}
.windC >>> .el-switch__core {
width: 0.4rem !important;
height: 0.2rem !important;
border-radius: 0.1rem !important;
}
.windC >>> .el-switch__core:after {
width: 0.16rem !important;
height: 0.16rem !important;
}
.windC >>> .el-switch.is-checked .el-switch__core::after {
margin-left: -0.17rem !important;
}
.custom-dialog >>> .el-dialog {
width: 550px !important;
}
.custom-dialog >>> .el-dialog__title {
width: 224px !important;
height: 35px !important;
font-size: 18px !important;
line-height: 20px !important;
}
.custom-dialog >>> .el-dialog__body {
padding: 10px 20px !important;
}
.device-li .device-name {
font-size: 12px !important;
}
.device-container .device-li {
padding: 10px 0 !important;
}
.device-li .device-name .el-input {
width: 50px !important;
}
.device-li.highlight::before {
left: -5px !important;
width: 20px !important;
height: 20px !important;
top: 30% !important;
}
.custom-dialog >>> .el-switch__label * {
font-size: 12px !important;
}
.custom-dialog >>> .el-switch__core {
width: 37px !important;
height: 17px !important;
}
.custom-dialog >>> .el-switch__core:after {
width: 13px !important;
height: 13px !important;
}
.custom-dialog >>> .el-form-item {
margin-bottom: 0 !important;
}
.custom-dialog >>> .el-form-item--medium .el-form-item__content {
line-height: 0 !important;
}
}
</style>

41
src/views/aircAndWindc/awSysMonitor/components/damperMonitor.vue
Unescape View File

@ -326,7 +326,9 @@
<el-form @submit.native.prevent>
<el-form-item>
<el-input
@keyup.enter.native="handleEnter(waterValveObjSet, $event, '%')"
@keyup.enter.native="
handleEnter(waterValveObjSet, $event, '%')
"
@input="handleInput(waterValveObjSet)"
@blur="handleBlur()"
v-model="waterValveObjSet.collectValue"
@ -878,6 +880,7 @@ export default {
this.startStopObj = item;
if (String(this.startStopObj.collectValue) === "0.00") {
this.startStopObj.collectValue = 0;
this.startStopValue = 0;
}
}
//远程手动启停 0停止1开启
@ -1701,7 +1704,7 @@ export default {
.fan-satatus1 {
position: absolute;
top: 4.3rem;
left: 5.5rem;
left: 5.9rem;
display: flex;
flex-direction: column;
align-items: flex-start;
@ -1767,8 +1770,8 @@ export default {
}
.fan-satatus3 {
position: absolute;
top: 0.9rem;
left: 6.3rem;
top: 0.7rem;
left: 6.4rem;
display: flex;
flex-direction: column;
align-items: flex-start;
@ -2078,21 +2081,30 @@ export default {
transform: scale(0.9);
}
}
@media (min-width: 1160px) and (max-width: 1360px) {
@media (min-width: 990px) and (max-width: 1360px) {
.windC {
transform: scale(0.8);
.fan-satatus3 {
top: 0.3rem !important;
}
}
}
@media (min-width: 990px) and (max-width: 1160px) {
.windC {
transform: scale(0.7);
}
}
// @media (min-width: 990px) and (max-width: 1160px) {
// .windC {
// transform: scale(0.7);
// }
// }
// 手机端样式
@media (min-width: 0px) and (max-width: 990px) {
.right-monitor {
width: calc(100% - 210px) !important;
}
.windC {
transform: scale(0.86);
.fan-satatus3 {
top: 0.4rem !important;
}
}
.buildingDiv {
padding-left: 0.54rem !important;
margin-bottom: 0.2rem !important;
@ -2218,5 +2230,14 @@ export default {
.custom-dialog >>> .el-form-item--medium .el-form-item__content {
line-height: 0 !important;
}
.windC >>> .el-select .el-input .el-select__caret {
font-size: 0.14rem !important;
}
.windC >>> .el-input--mini .el-input__icon {
line-height: 0.28rem !important;
}
.windC >>> .el-input__icon {
width: 0.25rem !important;
}
}
</style>

1112
src/views/hotWater/waterMonitor/index copy.vue
View File

File diff suppressed because it is too large Load Diff

1667
src/views/hotWater/waterMonitor/index.vue
View File

File diff suppressed because it is too large Load Diff

1973
src/views/hotWater/waterMonitor/waterMonitorDetails.vue
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save