From ccde8e61873d8fc4f75d51f27fa5d2d9dfda472c Mon Sep 17 00:00:00 2001
From: selia-zx <1771203023@qq.com>
Date: Fri, 9 May 2025 17:57:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=B8=BB=E6=9C=BA=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E9=A1=B5=E9=9D=A2=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sysMonitor/components/hostChart.vue       | 283 +++++++++++-------
 .../centerairC/sysMonitor/hostDetails.vue     |  62 ++--
 2 files changed, 201 insertions(+), 144 deletions(-)

diff --git a/src/views/centerairC/sysMonitor/components/hostChart.vue b/src/views/centerairC/sysMonitor/components/hostChart.vue
index 52294c2..921b03a 100644
--- a/src/views/centerairC/sysMonitor/components/hostChart.vue
+++ b/src/views/centerairC/sysMonitor/components/hostChart.vue
@@ -21,6 +21,7 @@ export default {
       chartData2: [],
       chartData3: [],
       chartData4: [],
+      chartData5: [],
       bottomData: [],
     };
   },
@@ -36,10 +37,10 @@ export default {
           let data = newVal;
           if (data.length > 0) {
             // 获取 title 和 titleStr 数组
-            const title = data.data[0].title;
-            const titleStr = data.data[1].titleStr;
+            const title = data[0].title;
+            const titleStr = data[1].titleStr;
             // 获取 dataList 数组
-            const dataList = data.data[3].dataList;
+            const dataList = data[3].dataList;
 
             // 遍历 dataList 数组
             dataList.forEach((item) => {
@@ -51,41 +52,49 @@ export default {
               }
             });
             console.log("处理后的data", data);
+            let name1 = "";
+            let name2 = "";
+            let name3 = "";
+            let name4 = "";
+            let name5 = "";
+
             data.forEach((item) => {
               if (item.timeStr) {
                 this.bottomData = item.timeStr;
               }
               if (item.dataList) {
-                let name1 = "";
-                let name2 = "";
-                let name3 = "";
-                let name4 = "";
+                // 用于存储 name 的数组
+                const names = [];
+                // 用于存储 chartData 的数组
+                const chartData = [];
+
                 item.dataList.forEach((val, index) => {
                   if (val.name) {
-                    switch (index) {
-                      case 0:
-                        this.chartData1 = val.value;
-                        name1 = val.name;
-                        break;
-                      case 1:
-                        this.chartData2 = val.value;
-                        name2 = val.name;
-                        break;
-                      case 2:
-                        this.chartData3 = val.value;
-                        name3 = val.name;
-                        break;
-                      case 3:
-                        this.chartData4 = val.value;
-                        name4 = val.name;
-                        break;
-                      default:
-                        break;
+                    // 只处理前 5 个元素
+                    if (index < 5) {
+                      chartData[index] = val.value;
+                      names[index] = val.name;
+                      console.log("多少个name",chartData[index] )
                     }
                   }
                 });
+
+                // 将 chartData 数组的值赋值给 this.chartDataX
+                this.chartData1 = chartData[0];
+                this.chartData2 = chartData[1];
+                this.chartData3 = chartData[2];
+                this.chartData4 = chartData[3];
+                this.chartData5 = chartData[4];
+
+                // 将 names 数组的值赋值给外部作用域的变量
+                name1 = names[0] || "";
+                name2 = names[1] || "";
+                name3 = names[2] || "";
+                name4 = names[3] || "";
+                name5 = names[4] || "";
               }
             });
+
             this.$nextTick(() => {
               const adapterOption = {
                 xAxis: {
@@ -94,28 +103,33 @@ export default {
                 series: [
                   {
                     yAxisIndex: 0,
-                    name:name1,
+                    name: name1,
                     data: this.chartData1,
                   },
                   {
                     yAxisIndex: 0,
-                    name:name2,
+                    name: name2,
                     data: this.chartData2,
                   },
                   {
                     yAxisIndex: 0,
-                    name:name3,
+                    name: name3,
                     data: this.chartData3,
                   },
                   {
                     yAxisIndex: 0,
-                    name:name4,
+                    name: name4,
                     data: this.chartData4,
                   },
+                  {
+                    yAxisIndex: 0,
+                    name: name5,
+                    data: this.chartData5,
+                  },
                 ],
               };
               this.chartInstance.setOption(adapterOption);
-              //手动的调用图标对象的resize才能产生效果
+              // 手动的调用图标对象的 resize 才能产生效果
               this.chartInstance.resize();
             });
           } else {
@@ -141,6 +155,10 @@ export default {
                     yAxisIndex: 0,
                     data: [],
                   },
+                  {
+                    yAxisIndex: 0,
+                    data: [],
+                  },
                 ],
               };
               this.chartInstance.setOption(adapterOption);
@@ -266,35 +284,35 @@ export default {
               data: this.chartData1,
               //折线颜色
               itemStyle: {
-                color: "#1a69f1", //折线点的颜色
+                color: "#00CED1", //折线点的颜色
               },
               lineStyle: {
-                color: "#1a69f1", //折线点的颜色
+                color: "#00CED1", //折线点的颜色
               },
               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
-                },
-              },
+              // // 区域填充样式，添加渐变背景
+              // 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",
@@ -303,31 +321,31 @@ export default {
               data: this.chartData2,
               //折线颜色
               itemStyle: {
-                color: "#00CED1", //折线的颜色
+                color: "#3ba272", //折线的颜色
               },
               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
-                },
-              },
+              // 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",
@@ -336,31 +354,31 @@ export default {
               data: this.chartData3,
               //折线颜色
               itemStyle: {
-                color: "#00CED1", //折线的颜色
+                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
-                },
-              },
+              // 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",
@@ -369,31 +387,64 @@ export default {
               data: this.chartData4,
               //折线颜色
               itemStyle: {
-                color: "#00CED1", //折线的颜色
+                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
-                },
+              // 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,
+              //折线颜色
+              itemStyle: {
+                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
+              //   },
+              // },
             },
           ],
         };
diff --git a/src/views/centerairC/sysMonitor/hostDetails.vue b/src/views/centerairC/sysMonitor/hostDetails.vue
index eb79da9..450dd3c 100644
--- a/src/views/centerairC/sysMonitor/hostDetails.vue
+++ b/src/views/centerairC/sysMonitor/hostDetails.vue
@@ -62,14 +62,14 @@
           <div class="host-name">{{ deviceName }}</div>
           <!-- 冷凝器蒸发器压力-->
           <div class="outIn">
-            <div class="outIn-li in1">
+            <!-- <div class="outIn-li in1">
               <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
               <div class="kpa">冷凝器压力:{{ condenserPre }}kpa</div>
             </div>
             <div class="outIn-li out1">
               <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
               <div class="kpa">蒸发器压力:{{ evaporatorPre }}kpa</div>
-            </div>
+            </div> -->
             <!-- <div class="outIn-li in2">
               <svg-icon slot="prefix" icon-class="arrow" class="arrow" />
               <div class="kpa">566.6kpa</div>
@@ -165,8 +165,8 @@
           </div>
           <line-square
             class="line1"
-            :horizontalLength="700"
-            :verticalLength="300"
+            :horizontalLength="720"
+            :verticalLength="440"
             :overlap="15"
           ></line-square>
         </div>
@@ -193,8 +193,8 @@
           </div>
           <line-square
             class="line1"
-            :horizontalLength="700"
-            :verticalLength="300"
+            :horizontalLength="720"
+            :verticalLength="440"
             :overlap="15"
           ></line-square>
         </div>
@@ -216,6 +216,7 @@ import hostChart from "./components/hostChart.vue";
 import titleImg from "./components/titleImg.vue";
 import lineSquare from "./components/lineSquare.vue";
 import { format } from "@/utils/datetime";
+import { getDay } from "@/utils/datetime";
 export default {
   name: "sysControl",
   components: { LoadData, hostChart, titleImg, lineSquare },
@@ -400,19 +401,16 @@ export default {
             if (item.mtType === "9") {
               // 压缩机参数
               this.compressorData = item.list;
-              this.compressorData.forEach((item) => {
-                if (
-                  item.paramType === "13" &&
-                  item.otherName.includes("冷凝器")
-                ) {
-                  this.condenserPre = item.curValue;
-                } else if (
-                  item.paramType === "13" &&
-                  item.otherName.includes("蒸发器")
-                ) {
-                  this.evaporatorPre = item.curValue;
+              // 遍历数组
+              for (let i = 0; i < this.compressorData.length; i++) {
+                const item = this.compressorData[i];
+                if (item.paramType === '1' && Number(item.curValue) === 0) {
+                  item.curValue = "停止";
+                  console.log("压缩机停止了啊是0···················")
+                }else if (item.paramType === '1' && Number(item.curValue) === 1){
+                  item.curValue = "运行";
                 }
-              });
+              }
             }
           });
         }
@@ -433,10 +431,11 @@ export default {
           let newDataArray = []; // 用于存储符合条件的对象的新数组
           data.forEach((item) => {
             if (
-              item.otherName.includes("冷冻出水温度") ||
-              item.otherName.includes("冷冻进水温度") ||
-              item.otherName.includes("冷却出水温度") ||
-              item.otherName.includes("冷却进水温度")
+              item.otherName.includes("冷冻回水温度") ||
+              item.otherName.includes("冷冻供水温度") ||
+              item.otherName.includes("冷却回水温度") ||
+              item.otherName.includes("冷却供水温度") ||
+              item.otherName.includes("负载")
             ) {
               let dataItem = {
                 name: item.otherName,
@@ -509,7 +508,6 @@ export default {
 .monitor {
   width: 100%;
   min-height: 100vh;
-  height: auto;
   background-color: black;
   color: #fff;
   .monitor-top {
@@ -797,7 +795,7 @@ export default {
       }
     }
     .detail-bottom {
-      height: 2.6rem;
+      height: 5rem;
       margin-top: 0.3rem;
       margin-left: 0.25rem;
       display: flex;
@@ -808,6 +806,7 @@ export default {
         flex-direction: column;
         justify-content: flex-end;
         width: 3rem;
+        margin-bottom: 1.5rem;
         .hostStatus-li {
           background-color: #25455a;
           color: #c0dffc;
@@ -815,6 +814,9 @@ export default {
           margin-bottom: 0.1rem;
           padding: 0.1rem;
           letter-spacing: 0.02rem;
+          display: flex;
+          flex-direction: row;
+          align-items: flex-start;
         }
       }
       .detail-data {
@@ -850,7 +852,7 @@ export default {
             // width: 100%;
             margin-right: 0.1rem;
             position: relative;
-            color: #89acc4;
+            color: #c0dffc;
             font-family: Arial, sans-serif;
             letter-spacing: 0.02rem;
             font-size: 0.18rem;
@@ -912,6 +914,10 @@ export default {
             width: 100%;
             height: 100%;
             padding: 0.04rem 0.1rem;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            justify-content: space-between;
           }
 
           .rightDot::before {
@@ -987,15 +993,15 @@ export default {
         }
         .line1 {
           position: absolute;
-          top: 0.53rem;
+          top: 0rem;
         }
       }
       .hostparams {
         width: 7.6rem;
         .detail-data-bottom {
-          padding-left: 0.75rem;
+          padding-left: 0.5rem;
           .detail-data-li {
-            width: 3rem;
+            width: 3.2rem;
           }
         }
       }