diff --git a/src/assets/images/steamHeating.png b/src/assets/images/steamHeating.png new file mode 100644 index 0000000..c6b53c5 Binary files /dev/null and b/src/assets/images/steamHeating.png differ diff --git a/src/views/boilerSys/steamHeating/components/lineChildren.vue b/src/views/boilerSys/steamHeating/components/lineChildren.vue new file mode 100644 index 0000000..0f3f6ff --- /dev/null +++ b/src/views/boilerSys/steamHeating/components/lineChildren.vue @@ -0,0 +1,120 @@ + + + + + \ No newline at end of file diff --git a/src/views/boilerSys/steamHeating/steamHeatingDetails.vue b/src/views/boilerSys/steamHeating/steamHeatingDetails.vue index 6f274bd..b172cf5 100644 --- a/src/views/boilerSys/steamHeating/steamHeatingDetails.vue +++ b/src/views/boilerSys/steamHeating/steamHeatingDetails.vue @@ -45,16 +45,328 @@ alt="" /> +
+ + + + + + +
+
+
{{ item.deviceName }}
+
+
+ 出水温度： + {{ + getTemperature(item.properties, "出水温度") + }} + ℃ +
+
+ 回水温度： + {{ + getTemperature(item.properties, "回水温度") + }} + ℃ +
+
+ 炉水温度： + {{ + getTemperature(item.properties, "炉水温度") + }} + ℃ +
+
+ 烟道温度： + {{ + getTemperature(item.properties, "烟道温度") + }} + ℃ +
+
+
+
+ +
+ {{ steamHeatingFire[0].deviceName }} +
+
+ {{ steamHeatingFire[1].deviceName }} +
+ +
+
+ + + + +
+ 1# +
+
+ 2# +
+
+ 3# +
+ +
+
+
+ + + + + +
+ {{ steamHeatingPumpHz1 }}Hz +
+
+ {{ steamHeatingPumpHz2 }}Hz +
+
+ {{ steamHeatingPumpHz3 }}Hz +
+ +
{{ steamHeatingInTem }}℃
+
{{ steamHeatingOutTem }}℃
+ +
+
+ 裙楼供暖进水阀: + +
+ {{ getValueByType(this.hotInletBuild, "13") }}bar +
+
+
+ 客房供暖进水阀: + +
+ {{ getValueByType(this.hotInletGuest, "13") }}bar +
+
+
+ + +
+
+ 裙楼供暖出水阀: + +
+ {{ getValueByType(this.hotOutletBuild, "13") }}bar +
+
+
+ 客房供暖出水阀: + +
+ {{ getValueByType(this.hotOutletGuest, "13") }}bar +
+
+
+ + +
+
+
+
+
+
采暖报警信息
+
+
+
+
+
+
报警位置
+
报警时间
+
+ + +
+
+
+
@@ -416,5 +955,478 @@ export default { cursor: pointer; } } + .monitor-content { + width: 100%; + min-height: calc(10.74rem - 1rem); + position: relative; + .monitor-img { + position: absolute; + top: 1rem; + left: calc((100% - 12.4rem) / 2); + // left:1rem; + width: 12.4rem; + height: 7.25rem; + z-index: 1; + } + .in-arrow { + position: absolute; + top: 3.46rem; + right: 6.95rem; + transform: rotate(180deg); + width: 0.3rem; + height: 0.45rem; + z-index: 10; + } + .out-arrow { + position: absolute; + top: 3.35rem; + right: 7.25rem; + width: 0.3rem; + height: 0.45rem; + z-index: 10; + } + .performance-div { + position: absolute; + top: 1.1rem !important; + left: 0.5rem !important; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + font-size: 0.16rem; + } + .performance { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + font-size: 0.16rem; + margin-top: 0.55rem; + .perdformance-bg { + width: 2.85rem; + z-index: 10; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + font-size: 0.2rem; + color: #ffffff; + background-image: url(../../../assets/images/border4.png); + background-size: 100% 100%; + background-repeat: no-repeat; + padding: 0.15rem 0.1rem 0.25rem 0rem; + } + .title { + z-index: 10; + width: 100%; + background-image: url(../../../assets/images/text_img_title.png); + background-repeat: no-repeat; + background-repeat: no-repeat; + background-size: 2rem 0.45rem; + background-position: bottom left; + font-family: SourceHanSansCN-Medium; + font-size: 0.2rem; + font-style: italic; + font-weight: bold; + line-height: 0.6rem; + color: #ffffff; + padding-left: 0.5rem; + margin-bottom: 0.01rem; + margin-left: 0.4rem; + } + .weather { + min-width: 2.85rem; + min-height: 1.6rem; + z-index: 10; + position: absolute; + top: 0.8rem; + left: 0rem; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + font-size: 0.2rem; + // color: rgb(18, 155, 209); + // color: rgb(147, 204, 236); + color: #ffffff; + background-image: url(../../../assets/images/border1.png); + background-size: 100% 100%; + background-repeat: no-repeat; + padding: 0.15rem 0.1rem 0.25rem 0rem; + } + .weather-li { + width: 100%; + padding: 0.05rem 0 0.05rem 0.3rem; + /* 初始设置上下边框宽度为 1px，颜色和样式可以先设为透明，后续由 border-image 覆盖 */ + border-top: 1px solid transparent; + border-bottom: 1px dashed #1a3f8f; + position: relative; + .deepColor { + display: inline-block; + margin: 0 0.1rem 0 0.05rem; + // color: #20ebfa; + // color: #18f13c; + // color: #6cf02f; + color: #6cf02f; + font-weight: bold; + font-family: DIN; + font-size: 0.25rem; + } + } + } + .steamHeatingBoiler1 { + border-bottom: 1px solid rgba(0, 255, 255, 1); + z-index: 10; + font-size: 0.22rem; + font-weight: bold; + color: aqua; + position: absolute; + cursor: pointer; + top: 5rem; + left: 7.5rem; + transform: rotateX(50deg) rotateY(0deg) rotateZ(40deg); /* 分别在 X、Y、Z 轴上旋转 */ + transform-origin: bottom center; /* 设置旋转的基点为底部中心 */ + text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */ + } + .steamHeatingBoiler2 { + border-bottom: 1px solid rgba(0, 255, 255, 1); + z-index: 10; + font-size: 0.22rem; + font-weight: bold; + color: aqua; + position: absolute; + cursor: pointer; + top: 5.8rem; + left: 9rem; + transform: rotateX(50deg) rotateY(0deg) rotateZ(38deg); /* 分别在 X、Y、Z 轴上旋转 */ + transform-origin: bottom center; /* 设置旋转的基点为底部中心 */ + text-shadow: 0.02rem 0.02rem 0.04rem rgba(0, 0, 0, 0.9); /* 添加文字阴影增强立体感 */ + } + .steamHeatingBoiler-main1 { + z-index: 100; + position: absolute; + top: 4.6rem; + left: 8.6rem; + width: 0.7rem; + height: 0.7rem; + // background-color: #007bff; + cursor: pointer; + opacity: 0.4; + transform-style: preserve-3d; + } + .steamHeatingBoiler-main2 { + z-index: 100; + position: absolute; + top: 5.25rem; + left: 10.2rem; + width: 0.7rem; + height: 0.7rem; + // background-color: #007bff; + cursor: pointer; + opacity: 0.4; + transform-style: preserve-3d; + } + .steamHeatingBoiler-img1 { + z-index: 10; + position: absolute; + top: 4.42rem; + left: 8.95rem; + width: 0.35rem; + height: 0.35rem; + transform-style: preserve-3d; + transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); + } + .steamHeatingBoiler-img2 { + z-index: 10; + position: absolute; + top: 5.12rem; + left: 10.55rem; + width: 0.35rem; + height: 0.35rem; + transform-style: preserve-3d; + transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); + } + .steamHeatingPump1 { + cursor: pointer; + z-index: 10; + font-size: 0.15rem; + font-weight: bold; + color: #46f1e3; + position: absolute; + top: 4.7rem; + left: 9.85rem; + } + .steamHeatingPump2 { + cursor: pointer; + z-index: 10; + font-size: 0.15rem; + font-weight: bold; + color: #46f1e3; + position: absolute; + top: 4.9rem; + left: 10.5rem; + } + .steamHeatingPump3 { + cursor: pointer; + z-index: 10; + font-size: 0.15rem; + font-weight: bold; + color: #46f1e3; + position: absolute; + top: 5.2rem; + left: 11.1rem; + } + .steamHeatingPump-main1 { + z-index: 100; + position: absolute; + top: 4.35rem; + left: 9.77rem; + width: 0.3rem; + height: 0.55rem; + // background-color: #007bff; + cursor: pointer; + opacity: 0.4; + transform-style: preserve-3d; + } + .steamHeatingPump-main2 { + z-index: 100; + position: absolute; + top: 4.6rem; + left: 10.4rem; + width: 0.3rem; + height: 0.55rem; + // background-color: #007bff; + cursor: pointer; + opacity: 0.4; + transform-style: preserve-3d; + } + .steamHeatingPump-main3 { + z-index: 100; + position: absolute; + top: 4.85rem; + left: 11rem; + width: 0.3rem; + height: 0.55rem; + // background-color: #007bff; + cursor: pointer; + opacity: 0.4; + transform-style: preserve-3d; + } + .steamHeatingPump-img1 { + z-index: 10; + position: absolute; + top: 4.23rem; + left: 9.96rem; + width: 0.35rem; + height: 0.35rem; + transform-style: preserve-3d; + transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); + } + .steamHeatingPump-img2 { + z-index: 10; + position: absolute; + top: 4.46rem; + left: 10.59rem; + width: 0.35rem; + height: 0.35rem; + transform-style: preserve-3d; + transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); + } + .steamHeatingPump-img3 { + z-index: 10; + position: absolute; + top: 4.7rem; + left: 11.2rem; + width: 0.35rem; + height: 0.35rem; + transform-style: preserve-3d; + transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); + } + .steamHeatingPump-hz1 { + z-index: 10; + position: absolute; + top: 4.15rem; + left: 9.7rem; + font-size: 0.16rem; + font-weight: bold; + } + .steamHeatingPump-hz2 { + z-index: 10; + position: absolute; + top: 4.4rem; + left: 10.35rem; + font-size: 0.16rem; + font-weight: bold; + } + .steamHeatingPump-hz3 { + z-index: 10; + position: absolute; + top: 4.64rem; + left: 11rem; + font-size: 0.16rem; + font-weight: bold; + } + .steamHeatingInTem { + z-index: 10; + position: absolute; + top: 5.3rem; + right: 6.5rem; + font-size: 0.16rem; + font-weight: bold; + } + .steamHeatingOutTem { + z-index: 10; + position: absolute; + top: 4.9rem; + right: 7.1rem; + font-size: 0.16rem; + font-weight: bold; + } + .hotIn-vavle { + z-index: 10; + position: absolute; + top: 1rem; + right: 4.14rem; + font-size: 0.16rem; + } + .hotIn-line { + z-index: 10; + position: absolute; + top: 3.82rem; + right: 8.3rem; + font-size: 0.16rem; + } + .hotOut-vavle { + z-index: 10; + position: absolute; + top: 2rem; + right: 3rem; + font-size: 0.16rem; + } + .hotOut-line { + z-index: 10; + position: absolute; + top: 4.35rem; + right: 7rem; + font-size: 0.16rem; + } + .outInre { + font-size: 0.16rem; + font-weight: bold; + color: #ffffff; + margin-left: 0.1rem; + } + .water-flow-li { + margin-bottom: 0.04rem; + color: #46f1e3; + display: flex; + flex-direction: row; + align-items: center; + span { + background-color: rgba(0, 255, 255, 0.2); + border-radius: 0.1rem; + padding: 0.01rem 0.03rem; + } + .break { + margin-left: 0.07rem; + display: inline-block; + width: 0.18rem; + height: 0.18rem; + border-radius: 50%; + border: 1px solid #46f1e3; + background-color: transparent !important; + } + .connect { + animation: blink 1s infinite; + background-color: #38fc52 !important; + } + } + .moveClass { + animation: host 2s linear infinite; + } + .moveClass2 { + animation: fan 2s linear infinite; + } + /* 定义 fan 动画关键帧 */ + @keyframes fan { + 0% { + /* 修改初始旋转角度 */ + transform: translateX(-50%) rotateX(60deg) rotateZ(0deg); + } + 100% { + /* 修改结束旋转角度 */ + transform: translateX(-50%) rotateX(60deg) rotateZ(360deg); + } + } + .startClass { + /* 应用动画 */ + animation: blink 1s infinite; + background-color: #38fc52 !important; + } + .alarm { + position: absolute; + top: 6.3rem; + right: 0.5rem; + width: 3.7rem; + .pumpli-monitor { + margin-top: 0.2rem; + display: flex; + flex-direction: column; + width: 100%; + height: 2rem; + overflow-y: auto; + .pumpli-li { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 0.1rem 0; + background-color: rgba(0, 71, 125, 0.2); + border-bottom: 1px solid #00264f !important; + .pumpli-li-text { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 50%; + font-size: 0.14rem !important; + } + } + .none-data { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + padding: 0.1rem 0; + background-color: rgba(0, 71, 125, 0.2); + border-bottom: 1px solid #00264f !important; + width: 100%; + font-size: 0.14rem !important; + } + .pumpli-li:nth-child(1) { + font-size: 0.13rem !important; + height: 0.4rem !important; + background-color: #00477d !important; + color: #b5dfff !important; + position: sticky; + top: 0; + z-index: 1; + } + } + } + } +} + +