Browse Source

1.系统监测调整数据和样式,添加报警和系统模式内容,添加启动停止状态

2.联调设备策略select选择问题
3.修改设备延时开关的流程,自适应页面
dev
selia-zx 2 weeks ago
parent
commit
a87d22ae17
  1. 8
      src/api/centerairC/sysMonitor.js
  2. BIN
      src/assets/images/blue.png
  3. BIN
      src/assets/images/border5.png
  4. BIN
      src/assets/images/border6.png
  5. BIN
      src/assets/images/green.png
  6. BIN
      src/assets/images/orange.png
  7. BIN
      src/assets/images/red.png
  8. BIN
      src/assets/images/step.png
  9. 283
      src/views/centerairC/delaySwitch/index.vue
  10. 81
      src/views/centerairC/deviceStrategy/index.vue
  11. 578
      src/views/centerairC/sysMonitor/index.vue
  12. 2
      src/views/index.vue

8
src/api/centerairC/sysMonitor.js

@ -57,3 +57,11 @@ export function operationConrol(data) {
data: data,
});
}
// 获取当前系统模式/启动、停止运行状态/报警列表
export function systemMode(query) {
return request({
url: "/device/cs/getSystemMode",
method: "get",
params: query,
});
}

BIN
src/assets/images/blue.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.5 KiB

BIN
src/assets/images/border5.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
src/assets/images/border6.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.8 KiB

BIN
src/assets/images/green.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
src/assets/images/orange.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
src/assets/images/red.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
src/assets/images/step.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

283
src/views/centerairC/delaySwitch/index.vue

@ -84,6 +84,80 @@
</div>
</div>
</div>
<!-- 第一组冷却塔放在冷却泵连接处 -->
<div class="last openLast" v-if="item.name === '自动开机'">
<div class="reverse-img">
<img src="../../../assets/images/yuan.png" class="yuan" alt="" />
<img src="../../../assets/images/yuan.png" class="yuan" alt="" />
<img src="../../../assets/images/yuan.png" class="yuan" alt="" />
<img src="../../../assets/images/yuan.png" class="yuan" alt="" />
<img src="../../../assets/images/yuan.png" class="yuan" alt="" />
<img src="../../../assets/images/yuan.png" class="yuan" alt="" />
<img src="../../../assets/images/yuan.png" class="yuan" alt="" />
</div>
<div class="lastTower">
<div class="device-arrow">
<div class="delay-input">
<el-input
size="mini"
v-model="openTower.curValue"
@keyup.enter.native="handleEnter(openTower, $event)"
@input="handleInput(openTower)"
@focus="handleFocus('openTower')"
@blur="handleBlur()"
></el-input
>S
</div>
<!-- isHovered 状态传递给 dynamic-arrow 组件 -->
<dynamic-arrow :is-hovered="isOpenTowerHover"></dynamic-arrow>
</div>
<div class="device-body">
<img
src="../../../assets/images/coolingTower.png"
class="butterflyValve"
alt=""
/>
<div>{{ openTower.pointName }}</div>
</div>
</div>
</div>
<!-- 第二组冷却塔放在主机连接处 -->
<div class="last closeLast" v-if="item.name === '自动关机'">
<div class="reverse-img">
<img src="../../../assets/images/yuan.png" class="yuan" alt="" />
<img src="../../../assets/images/yuan.png" class="yuan" alt="" />
<img src="../../../assets/images/yuan.png" class="yuan" alt="" />
<img src="../../../assets/images/yuan.png" class="yuan" alt="" />
<img src="../../../assets/images/yuan.png" class="yuan" alt="" />
<img src="../../../assets/images/yuan.png" class="yuan" alt="" />
<img src="../../../assets/images/yuan.png" class="yuan" alt="" />
</div>
<div class="lastTower">
<div class="device-arrow">
<div class="delay-input">
<el-input
size="mini"
v-model="closeTower.curValue"
@keyup.enter.native="handleEnter(closeTower, $event)"
@input="handleInput(closeTower)"
@focus="handleFocus('closeTower')"
@blur="handleBlur()"
></el-input
>S
</div>
<!-- isHovered 状态传递给 dynamic-arrow 组件 -->
<dynamic-arrow :is-hovered="isCloseTowerHover"></dynamic-arrow>
</div>
<div class="device-body">
<img
src="../../../assets/images/coolingTower.png"
class="butterflyValve"
alt=""
/>
<div>{{ closeTower.pointName }}</div>
</div>
</div>
</div>
</div>
</div>
<img class="left-line" src="../../../assets/images/left_line.png" alt="" />
@ -100,6 +174,10 @@ export default {
return {
loading: false,
delayList: [],
openTower: {},
closeTower: {},
isOpenTowerHover: false,
isCloseTowerHover: false,
currentFocusIndex: -1, //
};
},
@ -117,10 +195,22 @@ export default {
policyListData(data)
.then((res) => {
console.log("设备延时开关返回res", res);
if (res.code === 200) {
this.delayList = res.rows;
if (res.code == 200) {
// res.rows delayList
this.delayList = JSON.parse(JSON.stringify(res.rows));
// openTower
if (this.delayList[0] && this.delayList[0].values.length > 0) {
// pop delayList values
this.openTower = { ...this.delayList[0].values.pop() };
}
// closeTower
if (this.delayList[1] && this.delayList[1].values.length > 0) {
this.closeTower = { ...this.delayList[1].values.pop() };
}
} else {
this.delayList = [];
this.openTower = {};
this.closeTower = {};
}
// Promise
resolve(res);
@ -135,10 +225,18 @@ export default {
console.log("index", index);
// el-input focusedIndex
this.currentFocusIndex = `${index}-${subIndex}`;
if (index === "openTower") {
this.isOpenTowerHover = true;
}
if (index === "closeTower") {
this.isCloseTowerHover = true;
}
},
//
handleBlur() {
this.currentFocusIndex = "";
this.isOpenTowerHover = false;
this.isCloseTowerHover = false;
},
//
handleInput(item) {
@ -221,13 +319,13 @@ export default {
<style lang="scss" scoped>
.app-container {
position: relative;
padding: 0.2rem;
padding: 20px;
.delay-title {
/* 基础样式 */
display: inline-block;
padding: 0.1rem;
padding: 10px;
font-family: "Arial Rounded MT Bold", sans-serif;
font-size: 0.18rem;
font-size: 18px;
font-weight: 700;
color: #e6f3ff;
text-shadow: 0 2px 4px rgba(0, 60, 120, 0.4);
@ -309,15 +407,15 @@ export default {
position: absolute;
top: 0;
left: 0;
width: 1.7rem;
height: 0.4rem;
width: 170px;
height: 40px;
}
.left-line {
position: absolute;
right: 0;
bottom: 0;
width: 0.5rem;
height: 2.2rem;
width: 50px;
height: 220px;
}
}
.delaySwitch {
@ -390,51 +488,152 @@ export default {
}
}
.delay-right {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}
.delay-context {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
min-width: 150px;
.device-arrow {
display: flex;
flex-direction: column;
align-items: center;
}
.device-body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0px 30px;
padding: 10px;
}
.butterflyValve {
width: 70px;
height: 70px;
margin-top: 10px;
padding: 5px;
border-radius: 5px;
background-color: #2c4970;
}
}
.delay-input {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
}
}
.delay-context {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
min-width: 150px;
}
.butterflyValve {
width: 70px;
height: 70px;
margin-top: 10px;
padding: 5px;
border-radius: 5px;
background-color: #2c4970;
}
.device-arrow {
display: flex;
flex-direction: column;
align-items: center;
}
.delay-input {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
margin-bottom: 10px;
}
.device-body {
display: flex;
flex-direction: column;
align-items: center;
margin: 0px 30px;
padding: 10px;
}
.last {
display: flex;
flex-direction: row;
align-items: center;
}
.openLast {
margin-top: -22px;
margin-left: 535px;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.closeLast {
margin-top: -22px;
margin-left: 275px;
display: flex;
flex-direction: row;
align-items: flex-start;
}
.reverse-img {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.yuan {
width: 6px;
height: 6px;
margin-bottom: 10px;
}
}
.lastTower {
display: flex;
flex-direction: row;
align-items: flex-start;
margin-left: 0px;
margin-top: 50px;
.device-body {
flex-direction: row !important;
margin-left: 0px !important;
}
.butterflyValve {
margin-right: 10px;
margin-top: 0 !important;
}
}
}
.delay-li:nth-last-child(1) {
border-bottom: none;
}
}
@media (min-width: 1605px) and (max-width: 1730px) {
.app-container {
transform: scale(0.9);
transform-origin: top left;
width: 110%;
}
}
@media (min-width: 1450px) and (max-width: 1605px) {
.app-container {
transform: scale(0.8);
transform-origin: top left;
width: 125%;
}
}
@media (min-width: 1330px) and (max-width: 1450px) {
.app-container {
transform: scale(0.7);
transform-origin: top left;
width: 140%;
}
}
@media (min-width: 1260px) and (max-width: 1450px) {
.app-container {
transform: scale(0.65);
transform-origin: top left;
width: 155%;
}
}
@media (min-width: 1170px) and (max-width: 1260px) {
.app-container {
transform: scale(0.6);
transform-origin: top left;
width: 165%;
}
}
@media (min-width: 980px) and (max-width: 1170px) {
.app-container {
transform: scale(0.55);
transform-origin: top left;
width: 180%;
}
}
@media (min-width: 900px) and (max-width: 1100px) {
.app-container {
transform: scale(0.5);
transform-origin: top left;
width: 200%;
}
}
@media (min-width: 0px) and (max-width: 900px) {
.app-container {
transform: scale(0.55);
transform-origin: top left;
width: 180%;
}
}
</style>
<style scoped>
.delay-input >>> .el-input {

81
src/views/centerairC/deviceStrategy/index.vue

@ -24,17 +24,30 @@
@input="handleInput(children)"
@blur="handleBlur()"
></el-input>
<template v-if="children.inputType === 'selet'">
<el-select v-model="children.curValue" placeholder="请选择">
<el-option
v-for="option in getOptions(children.min, children.max)"
:key="option"
:label="option.toString()"
:value="option"
>
</el-option>
</el-select>
</template>
<div class="unit">{{ children.unit }}</div>
</div>
</template>
<template v-if="children.inputType === 'select'">
<div>{{ children.pointName }}:</div>
<div class="right-data">
<el-select
v-model="children.curValue"
placeholder="请选择"
size="mini"
ref="selectRef"
@change="selectThink(children)"
@visible-change="
(visible) => handleVisibleChange(visible, children)
"
>
<el-option
v-for="option in getOptions(children.min, children.max)"
:key="option"
:label="option.toString()"
:value="option"
>
</el-option>
</el-select>
<div class="unit">{{ children.unit }}</div>
</div>
</template>
@ -67,6 +80,8 @@ export default {
policyList: [],
policyDetails: [],
value: "",
//
oldValue: null,
};
},
mounted() {
@ -110,6 +125,42 @@ export default {
});
});
},
// select
handleVisibleChange(visible, children) {
if (visible) {
//
this.$set(children, "_oldValue", children.curValue);
}
},
// select
selectThink(children) {
const oldValue = children._oldValue
this.$confirm(
`确定要修改"${children.pointName}"的数据为:${children.curValue}吗?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(() => {
this.hadleOperationConrol(children.cpmId, children.curValue);
})
.catch(() => {
//
children.curValue = oldValue;
});
},
// select
handleSelectVisibleChange(val, visible) {
if (visible) {
//
this.oldValue = val;
console.log("显示的旧值", this.oldValue);
}
return val;
},
// radio
initRadioSelection() {
this.policyList.forEach((item) => {
@ -191,7 +242,7 @@ export default {
let values = timeList[i].values;
for (let j = 0; j < values.length; j++) {
if (
values[j].pointName === "启标志" &&
values[j].pointName === "启标志" &&
values[j].curValue === 1
) {
return true;
@ -217,7 +268,7 @@ export default {
.then(() => {
console.log("children.curValue", children.curValue);
if (children.curValue) {
this.hadleOperationConrol(children.cpmId, "1");
this.hadleOperationConrol(children.cpmId, "2");
}
})
.catch(() => {
@ -357,6 +408,10 @@ export default {
width: 80px !important;
margin: 0 15px 0 5px;
}
.el-select {
width: 80px !important;
margin: 0 15px 0 5px;
}
}
}
.radio-style {

578
src/views/centerairC/sysMonitor/index.vue

@ -75,6 +75,11 @@
<div v-if="isShowOn" class="off-bg on-animation">ON</div>
<div v-else class="off-bg">OFF</div>
</div>
<!-- 系统提示 -->
<div class="sysTips" v-if="startOrStopStatus">
<img class="step" src="../../../assets/images/step.png" alt="" />
<div class="tips-text">{{ startOrStopStatus }}</div>
</div>
<!-- 整体图 -->
<img
class="monitor-img"
@ -96,7 +101,9 @@
alt=""
:class="{ moveClass: hostListRunClass(0) }"
/>
<div class="hostLoad1">11%</div>
<div class="hostLoad1" v-if="hostLoadData(0) && hostListRunClass(0)">
{{ hostLoad0 }}%
</div>
<div class="water-flow1">
<div class="water-flow-li">
<span>1#冷却水流:</span>
@ -139,7 +146,9 @@
alt=""
:class="{ moveClass: hostListRunClass(1) }"
/>
<div class="hostLoad2">11%</div>
<div class="hostLoad2" v-if="hostLoadData(1) && hostListRunClass(1)">
{{ hostLoad1 }}%
</div>
<div class="water-flow2">
<div class="water-flow-li">
<span>2#冷却水流:</span>
@ -185,7 +194,9 @@
:class="{ moveClass: hostListRunClass(2) }"
/>
<!-- 主机负载 -->
<div class="hostLoad3">11%</div>
<div class="hostLoad3" v-if="hostLoadData(2) && hostListRunClass(2)">
{{ hostLoad2 }}%
</div>
<!-- 主机冷却冷冻水流信息 -->
<div class="water-flow3">
<div class="water-flow-li">
@ -243,13 +254,22 @@
:class="{ moveClass2: coolingPumpRunClass(2) }"
/>
<!-- 频率反馈 -->
<div class="cooling-hz1" v-if="coolingPumpHz(0)">
<div
class="cooling-hz1"
v-if="coolingPumpHz(0) && coolingPumpRunClass(0)"
>
{{ coolingPumpHz0 }}Hz
</div>
<div class="cooling-hz2" v-if="coolingPumpHz(1)">
<div
class="cooling-hz2"
v-if="coolingPumpHz(1) && coolingPumpRunClass(1)"
>
{{ coolingPumpHz1 }}Hz
</div>
<div class="cooling-hz3" v-if="coolingPumpHz(2)">
<div
class="cooling-hz3"
v-if="coolingPumpHz(2) && coolingPumpRunClass(2)"
>
{{ coolingPumpHz2 }}Hz
</div>
<!-- 冷冻泵数据定位 -->
@ -277,14 +297,23 @@
alt=""
:class="{ moveClass2: freezingPumpRunClass(2) }"
/>
<!-- 频率反馈 -->
<div class="freezing-hz1" v-if="freezingPumpHz(0)">
<!-- 频率反馈 旋转+有频率反馈才显示 -->
<div
class="freezing-hz1"
v-if="freezingPumpHz(0) && freezingPumpRunClass(0)"
>
{{ freezingPumpHz0 }}Hz
</div>
<div class="freezing-hz2" v-if="freezingPumpHz(1)">
<div
class="freezing-hz2"
v-if="freezingPumpHz(1) && freezingPumpRunClass(1)"
>
{{ freezingPumpHz1 }}Hz
</div>
<div class="freezing-hz3" v-if="freezingPumpHz(2)">
<div
class="freezing-hz3"
v-if="freezingPumpHz(2) && freezingPumpRunClass(2)"
>
{{ freezingPumpHz2 }}Hz
</div>
<!-- 冷却塔数据定位 五个风机 三个出水阀 -->
@ -293,11 +322,37 @@
<div class="coolingTower21">2#-1</div>
<div class="coolingTower12">1#-2</div>
<div class="coolingTower11">1#-1</div>
<div class="colingTowerHz3">50Hz</div>
<div class="colingTowerHz22">50Hz</div>
<div class="colingTowerHz21">50Hz</div>
<div class="colingTowerHz12">50Hz</div>
<div class="colingTowerHz11">50Hz</div>
<!-- 风机频率 -->
<div
class="coolingTowerHz3"
v-if="coolingTowerHz(2, 1) && coolingTowerRunClass(2, 1)"
>
{{ coolingTowerHz31 }}Hz
</div>
<div
class="coolingTowerHz22"
v-if="coolingTowerHz(1, 2) && coolingTowerRunClass(1, 2)"
>
{{ coolingTowerHz22 }}Hz
</div>
<div
class="coolingTowerHz21"
v-if="coolingTowerHz(1, 1) && coolingTowerRunClass(1, 1)"
>
{{ coolingTowerHz21 }}Hz
</div>
<div
class="coolingTowerHz12"
v-if="coolingTowerHz(0, 2) && coolingTowerRunClass(0, 2)"
>
{{ coolingTowerHz12 }}Hz
</div>
<div
class="coolingTowerHz11"
v-if="coolingTowerHz(0, 1) && coolingTowerRunClass(0, 1)"
>
{{ coolingTowerHz11 }}Hz
</div>
<!-- 3号冷却塔风机1 -->
<img
class="fan-img1"
@ -383,13 +438,59 @@
src="../../../assets/images/out-arrow.png"
alt=""
/>
<!-- 冷冻进出水温度 -->
<div class="freezingInTem">20</div>
<div class="freezingOutTem">20</div>
<!-- 冷冻进出水温度 0是out供()1是in回() -->
<div class="freezingInTem">{{ freezingInTem }}</div>
<div class="freezingOutTem">{{ freezingOutTem }}</div>
<!-- 冷冻水流 -->
<div class="freezingOutWater">{{ freezingOutWater }}/h</div>
<!-- 冷冻进出水压力 -->
<div class="freezingInPre">20kpa</div>
<div class="freezingOutPre">20kpa</div>
<div class="freezingInPre">{{ freezingInPre }}kpa</div>
<div class="freezingOutPre">{{ freezingOutPre }}kpa</div>
<!-- 冷却进出水温度 -->
<div class="coolingInTem">{{ coolingInTem }}</div>
<div class="coolingOutTem">{{ coolingOutTem }}</div>
<!-- 报警状态与系统模式 -->
<div class="statusAndModel" v-if="isWarning">
<img src="../../../assets/images/red.png" class="warnStatus" alt="" />
<img
src="../../../assets/images/border6.png"
class="modelStatus"
alt=""
/>
<div class="sysWarning" @click="showAlarm">Warning</div>
<div class="sysStatus">{{ sysStatus }}</div>
</div>
<div class="statusAndModel" v-else>
<img src="../../../assets/images/blue.png" class="warnStatus" alt="" />
<img
src="../../../assets/images/border5.png"
class="modelStatus"
alt=""
/>
<div class="sysNormal">Normal</div>
<div class="sysStatus">{{ sysStatus }}</div>
</div>
</div>
<!-- 报警弹框内容 -->
<el-dialog
title="报警内容"
:visible.sync="openDialog"
width="680px"
append-to-body
>
<el-table :data="alarmList">
<el-table-column
prop="otherName"
label="报警位置"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
prop="curTime"
label="报警时间"
:show-overflow-tooltip="true"
></el-table-column>
</el-table>
</el-dialog>
</div>
</template>
@ -400,6 +501,7 @@ import {
oneKeyButton,
monitorList,
operationConrol,
systemMode,
} from "@/api/centerairC/sysMonitor";
import LineChildren from "./lineChildren.vue";
export default {
@ -418,9 +520,14 @@ export default {
coolingValue: [], //
coolingTowerInlet: [], //
coolingTowerOutlet: [], //
freezingManifold: [], //
isShowOn: false, //,falseOff,trueOn
oneKeyButtonId: "",
//
hostLoad0: "",
hostLoad1: "",
hostLoad2: "",
//
coolingPumpHz0: "",
coolingPumpHz1: "",
@ -429,6 +536,33 @@ export default {
freezingPumpHz0: "",
freezingPumpHz1: "",
freezingPumpHz2: "",
//
coolingTowerHz31: "",
coolingTowerHz22: "",
coolingTowerHz21: "",
coolingTowerHz12: "",
coolingTowerHz11: "",
//
freezingInTem: "",
freezingOutTem: "",
//
freezingOutWater: "",
//
freezingInPre: "",
freezingOutPre: "",
//
coolingInTem: "",
coolingOutTem: "",
//
isWarning: false,
//
alarmList: [],
//
sysStatus: "",
//
startOrStopStatus: "",
openDialog: false,
timer: null, // ID
};
},
@ -436,6 +570,7 @@ export default {
mounted() {
//
this.getWeatherData();
this.getSystemMode();
this.getPerformance();
this.getOneKeyButton();
this.getMonitorList();
@ -443,6 +578,7 @@ export default {
// 10
this.timer = setInterval(() => {
this.getWeatherData();
this.getSystemMode();
this.getPerformance();
this.getOneKeyButton();
this.getMonitorList();
@ -471,6 +607,29 @@ export default {
}
});
},
// //
getSystemMode() {
let data = {
systemType: "0",
paramType: "27",
};
systemMode(data).then((res) => {
console.log("当前系统模式与报警列表返回", res);
if (res.code == 200) {
this.sysStatus = res.data.autoType;
this.alarmList = res.data.alarmList;
if (res.data.alarmList.length > 0) {
this.isWarning = true;
} else {
this.isWarning = false;
}
this.startOrStopStatus = res.data.startOrStopStatus;
}
});
},
showAlarm() {
this.openDialog = true;
},
//
getOneKeyButton() {
return new Promise((resolve, reject) => {
@ -562,6 +721,7 @@ export default {
this.coolingValue = [];
this.coolingTowerInlet = [];
this.coolingTowerOutlet = [];
this.freezingManifold = [];
res.rows.forEach((row) => {
switch (row.name) {
@ -597,6 +757,11 @@ export default {
this.coolingTowerOutlet = this.processDeviceList(row.values);
console.log("冷却塔出水阀列表", this.coolingTowerOutlet);
break;
case "15":
this.freezingManifold = row.values;
console.log("冷冻总管", this.freezingManifold);
this.freezingManifoldData();
break;
default:
break;
}
@ -627,6 +792,31 @@ export default {
// deviceList
return deviceList.filter((item) => item);
},
//
hostLoadData(index) {
// hostList
if (this.hostList.length <= index) {
return false;
}
// properties hostList[index]properties
const properties = this.hostList[index].properties;
if (!properties || properties.length === 0) {
return false;
}
// properties paramType === 28
for (let i = 0; i < properties.length; i++) {
const item = properties[i];
if (item.paramType === "28") {
//
const propertyName = `hostLoad${index}`;
// 使
this[propertyName] = item.collectValue;
return true;
}
}
//
return false;
},
//
hostListControlClass(index) {
// hostList
@ -751,7 +941,7 @@ export default {
const propertyName = `coolingPumpHz${index}`;
// 使
this[propertyName] = item.collectValue;
this.coolingPumpHz[index] = item.collectValue;
// this.coolingPumpHz[index] = item.collectValue;
return true;
}
}
@ -799,7 +989,7 @@ export default {
const propertyName = `freezingPumpHz${index}`;
// 使
this[propertyName] = item.collectValue;
this.freezingPumpHz[index] = item.collectValue;
// this.freezingPumpHz[index] = item.collectValue;
return true;
}
}
@ -835,8 +1025,8 @@ export default {
// if (Object.keys(filterItem).length > 1) {
// filteredProperties.push(filterItem);
// }
console.log("paramType为1的对象", filteredProperties);
console.log("index, item", index, item);
// console.log("paramType1", filteredProperties);
// console.log("index, item", index, item);
// index item
const towerNumber = index + 1;
const targetPropertyName = `${towerNumber}号冷却塔风机${item}运行`;
@ -848,11 +1038,11 @@ export default {
Number(filteredProperties[i].collectValue) !== 0
) {
if (index === 0 && item === 1) {
console.log(
"返回的true",
filteredProperties[i].collectName === targetPropertyName &&
Number(filteredProperties[i].collectValue) !== 0
);
// console.log(
// "true",
// filteredProperties[i].collectName === targetPropertyName &&
// Number(filteredProperties[i].collectValue) !== 0
// );
}
return true;
}
@ -861,6 +1051,62 @@ export default {
//
return false;
},
// ,index,01;itemx
coolingTowerHz(index, item) {
// coolingTower
if (this.coolingTower.length <= index) {
return false;
}
// coolingTower properties
const properties = this.coolingTower[index].properties;
// properties
if (!properties || properties.length === 0) {
return false;
}
// paramType === 4
const filteredProperties = [];
let filterItem = {};
for (let i = 0; i < properties.length; i++) {
// console.log('properties[i].paramType',properties[i].paramType)
if (properties[i].paramType === "4") {
filteredProperties.push(properties[i]);
// filterItem = properties[i]
}
}
// // deviceList
// if (Object.keys(filterItem).length > 1) {
// filteredProperties.push(filterItem);
// }
// console.log("paramType4", filteredProperties);
// console.log("index, item", index, item);
// index item
const towerNumber = index + 1;
const targetPropertyName = `${towerNumber}号冷却塔风机${item}频率反馈`;
// console.log("targetPropertyName",targetPropertyName)
// collectValue "0.00"
for (let i = 0; i < filteredProperties.length; i++) {
if (filteredProperties[i].collectName === targetPropertyName) {
// coolingTowerHz
const coolingTowerHzPropertyName = `coolingTowerHz${towerNumber}${item}`;
// console.log(
// "coolingTowerHzPropertyName---",
// coolingTowerHzPropertyName
// );
// collectValue
const value = Number(filteredProperties[i].collectValue);
// 使
this[coolingTowerHzPropertyName] = value;
// console.log("Number(filteredProperties[i].collectValue)", value);
return true;
}
}
//
return false;
},
//
towerValveControlClass(index) {
// coolingTowerOutlet
@ -983,6 +1229,33 @@ export default {
// true ,,
return valveOpenFeedbackFound && valveCloseFeedbackFound;
},
//
freezingManifoldData(index, val) {
console.log("this.freezingManifold", this.freezingManifold);
// freezingManifold
if (this.freezingManifold.length <= index) {
return false;
}
this.freezingManifold.forEach((item) => {
if (item.collectName === "冷冻供水温度") {
this.freezingOutTem = item.collectValue;
console.log("item.collectName", item.collectName);
} else if (item.collectName === "冷冻回水温度") {
this.freezingInTem = item.collectValue;
} else if (item.collectName === "冷冻供水压力") {
this.freezingOutPre = item.collectValue;
} else if (item.collectName === "冷冻回水压力") {
this.freezingInPre = item.collectValue;
} else if (item.collectName === "冷却供水温度") {
this.coolingOutTem = item.collectValue;
} else if (item.collectName === "冷却回水温度") {
this.coolingInTem = item.collectValue;
} else if (item.collectName === "总冷量计瞬时流量") {
this.freezingOutWater = item.collectValue;
}
});
return true;
},
},
};
</script>
@ -1111,12 +1384,28 @@ export default {
height: 0.6rem;
z-index: 10;
}
.coolingInTem {
z-index: 10;
position: absolute;
top: 2.1rem;
left: 8.35rem;
font-size: 0.16rem;
font-weight: bold;
}
.coolingOutTem {
z-index: 10;
position: absolute;
top: 3rem;
left: 4.77rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezingInTem {
z-index: 10;
position: absolute;
top: 4.54rem;
right: 5.4rem;
font-size: 0.14rem;
right: 5.3rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezingOutTem {
@ -1124,15 +1413,24 @@ export default {
position: absolute;
top: 5.2rem;
right: 3.8rem;
font-size: 0.14rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezingOutWater {
z-index: 10;
position: absolute;
top: 6.2rem;
right: 4.9rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezingInPre {
z-index: 10;
position: absolute;
top: 5rem;
right: 5.3rem;
font-size: 0.14rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezingOutPre {
@ -1140,7 +1438,7 @@ export default {
position: absolute;
top: 5.7rem;
right: 3.7rem;
font-size: 0.14rem;
font-size: 0.16rem;
font-weight: bold;
}
.host-line1 {
@ -1244,25 +1542,25 @@ export default {
.hostLoad1 {
z-index: 10;
position: absolute;
top: 6.2rem;
left: 3rem;
font-size: 0.14rem;
top: 5.9rem;
left: 3.7rem;
font-size: 0.16rem;
font-weight: bold;
}
.hostLoad2 {
z-index: 10;
position: absolute;
top: 5.42rem;
left: 5rem;
font-size: 0.14rem;
top: 5.12rem;
left: 5.7rem;
font-size: 0.16rem;
font-weight: bold;
}
.hostLoad3 {
z-index: 10;
position: absolute;
top: 4.52rem;
left: 7.1rem;
font-size: 0.14rem;
top: 4.4rem;
left: 7.65rem;
font-size: 0.16rem;
font-weight: bold;
}
.water-flow1 {
@ -1351,30 +1649,30 @@ export default {
}
.coolingPump1 {
z-index: 10;
font-size: 0.18rem;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 3.8rem;
left: 7.22rem;
left: 7.3rem;
}
.coolingPump2 {
z-index: 10;
font-size: 0.18rem;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 3.45rem;
left: 8.12rem;
left: 8.28rem;
}
.coolingPump3 {
z-index: 10;
font-size: 0.18rem;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 3.11rem;
left: 9.05rem;
left: 9.12rem;
}
.cooling-img1 {
z-index: 10;
@ -1409,53 +1707,53 @@ export default {
.cooling-hz1 {
z-index: 10;
position: absolute;
top: 3.88rem;
left: 7.52rem;
font-size: 0.14rem;
top: 3.25rem;
left: 7.16rem;
font-size: 0.16rem;
font-weight: bold;
}
.cooling-hz2 {
z-index: 10;
position: absolute;
top: 3.51rem;
left: 8.5rem;
font-size: 0.14rem;
top: 2.94rem;
left: 8.15rem;
font-size: 0.16rem;
font-weight: bold;
}
.cooling-hz3 {
z-index: 10;
position: absolute;
top: 3.18rem;
left: 9.38rem;
font-size: 0.14rem;
top: 2.6rem;
left: 9.1rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezingPump1 {
z-index: 10;
font-size: 0.18rem;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 7.5rem;
left: 6.6rem;
left: 6.8rem;
}
.freezingPump2 {
z-index: 10;
font-size: 0.18rem;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 6.82rem;
left: 8rem;
left: 8.15rem;
}
.freezingPump3 {
z-index: 10;
font-size: 0.18rem;
font-size: 0.15rem;
font-weight: bold;
color: #46f1e3;
position: absolute;
top: 6.28rem;
left: 9.1rem;
left: 9.3rem;
}
.freezing-img1 {
z-index: 10;
@ -1490,25 +1788,25 @@ export default {
.freezing-hz1 {
z-index: 10;
position: absolute;
top: 7.6rem;
left: 7rem;
font-size: 0.14rem;
top: 6.83rem;
left: 6.7rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezing-hz2 {
z-index: 10;
position: absolute;
top: 6.9rem;
left: 8.42rem;
font-size: 0.14rem;
top: 6.24rem;
left: 8.05rem;
font-size: 0.16rem;
font-weight: bold;
}
.freezing-hz3 {
z-index: 10;
position: absolute;
top: 6.32rem;
left: 9.5rem;
font-size: 0.14rem;
top: 5.66rem;
left: 9.16rem;
font-size: 0.16rem;
font-weight: bold;
}
.coolingTower3 {
@ -1561,49 +1859,49 @@ export default {
font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
}
.colingTowerHz11 {
.coolingTowerHz11 {
z-index: 10;
font-size: 0.14rem;
font-size: 0.16rem;
color: #ffffff;
position: absolute;
top: -0.1rem;
left: 7.32rem;
top: -0.08rem;
left: 7.36rem;
font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
}
.colingTowerHz12 {
.coolingTowerHz12 {
z-index: 10;
font-size: 0.14rem;
font-size: 0.16rem;
color: #ffffff;
position: absolute;
top: 0.033rem;
left: 6.8rem;
top: 0.04rem;
left: 6.76rem;
font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
}
.colingTowerHz21 {
.coolingTowerHz21 {
z-index: 10;
font-size: 0.14rem;
font-size: 0.16rem;
color: #ffffff;
position: absolute;
top: 0.24rem;
left: 6rem;
top: 0.22rem;
left: 6.06rem;
font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
}
.colingTowerHz22 {
.coolingTowerHz22 {
z-index: 10;
font-size: 0.14rem;
font-size: 0.16rem;
color: #ffffff;
position: absolute;
top: 0.37rem;
left: 5.5rem;
left: 5.49rem;
font-weight: bold;
transform: rotateX(20deg) rotateY(-25deg) rotateZ(-5deg);
}
.colingTowerHz3 {
.coolingTowerHz3 {
z-index: 10;
font-size: 0.14rem;
font-size: 0.16rem;
color: #ffffff;
position: absolute;
top: 0.64rem;
@ -1683,6 +1981,71 @@ export default {
background-color: #ebebeb;
border-radius: 50%;
}
.statusAndModel {
z-index: 10;
position: absolute;
top: 8.4rem;
right: 3rem;
width: 3rem;
.warnStatus {
position: absolute;
left: 0.04rem;
top: 0.3rem;
width: 0.45rem;
height: 0.45rem;
animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe {
0% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.1);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0.5;
}
}
.modelStatus {
position: absolute;
top: 0;
right: 0rem;
width: 2.65rem;
height: 0.83rem;
}
.sysNormal {
position: absolute;
top: 0.63rem;
right: 0.7rem;
font-size: 0.14rem;
font-weight: bold;
color: #3bb3f8;
letter-spacing: 0.02rem;
}
.sysWarning {
position: absolute;
top: 0.63rem;
right: 0.7rem;
font-size: 0.14rem;
font-weight: bold;
cursor: pointer;
color: #ffffff;
letter-spacing: 0.02rem;
animation: blink 0.5s ease-in-out infinite;
}
.sysStatus {
position: absolute;
top: 0.2rem;
left: 0.8rem;
font-size: 0.18rem;
font-weight: bold;
color: #1fb7f3;
letter-spacing: 0.02rem;
}
}
}
.weather {
min-width: 2.5rem;
@ -1699,7 +2062,7 @@ export default {
background-image: url(../../../assets/images/border1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 0.15rem 0 0.25rem 0rem;
padding: 0.15rem 0.1rem 0.25rem 0rem;
}
.weather-li {
width: 100%;
@ -1741,7 +2104,7 @@ export default {
background-image: url(../../../assets/images/border4.png);
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 0.15rem 0 0.25rem 0rem;
padding: 0.15rem 0.1rem 0.25rem 0rem;
}
.title {
z-index: 10;
@ -1752,8 +2115,9 @@ export default {
background-size: 2rem 0.45rem;
background-position: bottom left;
font-family: SourceHanSansCN-Medium;
font-size: 0.16rem;
font-size: 0.18rem;
font-style: italic;
font-weight: bold;
line-height: 0.6rem;
color: rgba(209, 214, 223, 1);
padding-left: 0.6rem;
@ -1768,7 +2132,7 @@ export default {
background-repeat: no-repeat;
background-size: 100% 100%;
top: 0;
right: 2rem;
right: 1.7rem;
z-index: 10;
display: flex;
flex-direction: column;
@ -1813,6 +2177,27 @@ export default {
.offClass:hover .on-animation {
animation: none;
}
.sysTips {
position: absolute;
top: 1.7rem;
left: 13rem;
display: flex;
flex-direction: row;
align-items: center;
z-index: 10;
.step {
width: 0.2rem;
height: 0.3rem;
}
.tips-text {
border: 0.01rem solid transparent;
border-image: linear-gradient(to right, #007bff, #00ffff);
border-image-slice: 1;
font-size: 0.18rem;
color: #1fecf3;
padding: 0.01rem 0.03rem;
}
}
}
// @media (min-width: 1240px) and (max-width: 1440px) {
// }
@ -1822,3 +2207,8 @@ export default {
}
}
</style>
<style scoped>
.monitor >>> .el-dialog:not(.is-fullscreen) {
margin-top: 15% !important;
}
</style>

2
src/views/index.vue

@ -74,7 +74,7 @@
<div class="overview-li">
<div>总耗水量()</div>
<div class="overview-details">
{{ projectView.totalEle }}
{{ projectView.totalWater }}
</div>
</div>
<div class="overview-li">

Loading…
Cancel
Save