1.主机详情页面，图表添加负载y轴，压缩机参数不采用tab形式

2.热水监控系统中，修改热泵开关模式为select选择
3.修改温度监测系统中，传参和样式的问题

.env.development

@@ -7,9 +7,9 @@ ENV = 'development'
 # 开发环境
 # VUE_APP_BASE_API = '/dev-api'
 # 后台
-# VUE_APP_BASE_API = 'http://192.168.1.222:8080'
+VUE_APP_BASE_API = 'http://192.168.1.222:8080'
 # 梅州云端
-VUE_APP_BASE_API = 'http://106.55.173.225:8091'
+# VUE_APP_BASE_API = 'http://106.55.173.225:8091'
 
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

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

@@ -62,44 +62,94 @@ export default {
               if (item.timeStr) {
                 this.bottomData = item.timeStr;
               }
+
               if (item.dataList) {
                 // 用于存储 name 的数组
                 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 数组的值赋值给 this.chartDataX
-                this.chartData1 = chartData[0];
+                this.chartData1 = chartData[0] || "";
-                this.chartData2 = chartData[1];
+                this.chartData2 = chartData[1] || "";
-                this.chartData3 = chartData[2];
+                this.chartData3 = chartData[2] || "";
-                this.chartData4 = chartData[3];
+                this.chartData4 = chartData[3] || "";
-                this.chartData5 = chartData[4];
 
                 // 将 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,
@@ -122,7 +172,7 @@ export default {
                     data: this.chartData4,
                   },
                   {
-                    yAxisIndex: 0,
+                    yAxisIndex: 1,
                     name: name5,
                     data: this.chartData5,
                   },
@@ -138,6 +188,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,
@@ -193,6 +258,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) {
         // 初始化图表的代码
@@ -200,6 +276,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,
@@ -242,12 +354,45 @@ export default {
             }, //x轴分割线
             data: this.bottomData,
           },
-          yAxis: {
+          yAxis: [
-            min: 0,
+            {
-            // max:20,
+              min: Min1,
-            // // // min:'dataMin',
+              max: Max1,
-            // // // max:'dataMax',
+              splitNumber: 10,
-            // name: "kwh", // 第一个 y 轴的单位描述
+              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", // 设置分割线为虚线
+                },
+              },
+            },
+            {
+              min: Min2,
+              max: Max2,
+              splitNumber: 10,
+              interval: (Max2 - Min2) / 10,
               // 设置 name 的样式
               nameTextStyle: {
                 color: "rgba(255, 255, 255, 1)",
@@ -255,6 +400,11 @@ export default {
               },
               miniInterval: 5,
               type: "value",
+              name: "负载", // y 轴的单位描述
+              // 修饰刻度标签的颜色即y坐标数据
+              axisLabel: {
+                color: "#ffffff",
+              },
               // 修饰刻度标签的颜色即y坐标数据
               axisLabel: {
                 color: "rgba(255, 255, 255, 1)",
@@ -276,12 +426,14 @@ export default {
                 },
               },
             },
+          ],
           series: [
             {
               type: "line",
               // 拐点大小
               symbolSize: 8,
               data: this.chartData1,
+              yAxisIndex: 0,
               //折线颜色
               itemStyle: {
                 color: "#00CED1", //折线点的颜色
@@ -292,33 +444,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", //折线的颜色
@@ -326,125 +458,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
-              //   },
-              // },
             },
           ],
         };

src/views/centerairC/sysMonitor/hostDetails.vue

@@ -163,33 +163,67 @@
               </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">
             <title-img></title-img>
             <div class="choice">
+              <div>{{ compressorData1.mtTypeName }}</div>
+            </div>
+            <title-img></title-img>
+          </div>
+          <div class="detail-data-bottom">
             <div
-                class="mr20"
+              class="detail-data-li"
-                v-for="(item, index) in compressorData"
+              v-for="(subItem, subIndex) in compressorData1.list"
-                :key="index"
+              :key="subIndex"
-                @click="handleEnter(index, item.name)"
-                :class="{ timeStyle: sharedIndex == index }"
             >
-                {{ item.mtTypeName }}
+              <div class="rightDot">
+                <div class="leftDot">
+                  <span>{{ subItem.otherName }}:</span>
+                  <span class="dotData">{{ subItem.curValue }}</span>
+                  <span>{{ subItem.unit }}</span>
+                </div>
               </div>
             </div>
+          </div>
+        </div>
+        <div class="detail-data compressor">
+          <div class="detail-data-top">
+            <title-img></title-img>
+            <div class="choice">
+              <div>{{ compressorData2.mtTypeName }}</div>
+            </div>
             <title-img></title-img>
           </div>
           <div class="detail-data-bottom">
             <div
               class="detail-data-li"
-              v-for="(subItem, subIndex) in currentDisplayData"
+              v-for="(subItem, subIndex) in compressorData2.list"
+              :key="subIndex"
+            >
+              <div class="rightDot">
+                <div class="leftDot">
+                  <span>{{ subItem.otherName }}:</span>
+                  <span class="dotData">{{ subItem.curValue }}</span>
+                  <span>{{ subItem.unit }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="detail-data compressor">
+          <div class="detail-data-top">
+            <title-img></title-img>
+            <div class="choice">
+              <div>{{ compressorData3.mtTypeName }}</div>
+            </div>
+            <title-img></title-img>
+          </div>
+          <div class="detail-data-bottom">
+            <div
+              class="detail-data-li"
+              v-for="(subItem, subIndex) in compressorData3.list"
               :key="subIndex"
             >
               <div class="rightDot">
@@ -239,13 +273,14 @@ export default {
       localObj: {}, //本地远程状态
       badObj: {}, //故障状态
       timeObj: {}, //累计运行时间
-      compressorData: [], //压缩机参数
+      compressorData1: [], //压缩机1参数
+      compressorData2: [],
+      compressorData3: [],
       temArray: [], //冷冻冷却水温度
       isMagnetic: false,
       isShowWarning: false, //是否有报警
       dayData: "", //监测天数
       sharedIndex: 0,
-      currentDisplayData: [],
     };
   },
   computed: {
@@ -387,10 +422,6 @@ export default {
                 return Number(a.orderNum) - Number(b.orderNum);
               });
               this.hostData.forEach((item) => {
-                // // 右边主机参数  温度12
-                // if (item.paramType === "12") {
-                //   this.rightHostData.push(item);
-                // }
                 //左边主机参数 根据不同的 paramType 处理 showValue
                 if (item.paramType === "6") {
                   // 运行状态
@@ -415,30 +446,24 @@ export default {
             }
           });
           // 使用 filter 方法过滤掉 item 为 '0' 的对象
-          this.compressorData = data.filter((obj) => obj.mtType !== "0");
+          let compressorData = data.filter((obj) => obj.mtType !== "0");
           console.log("压缩机数组", this.compressorData);
-          // 在组件挂载后触发 handleEnter 方法，这里默认点击第一个元素
+          compressorData.forEach((item) => {
-          if (this.compressorData.length > 0) {
+            if (item.mtType === "9") {
-            this.handleEnter(0, this.compressorData[0].name);
+              // 压缩机1
+              this.compressorData1 = item;
             }
+            if (item.mtType === "10") {
+              // 压缩机2
+              this.compressorData2 = item;
             }
-      });
+            if (item.mtType === "11") {
-    },
+              // 压缩机3
-    handleEnter(index, event) {
+              this.compressorData3 = item;
-      console.log("index", index);
-      this.sharedIndex = index;
-      // 更新当前显示的数据为点击项的子列表
-      this.currentDisplayData = this.compressorData[index].list;
-      // 遍历数组
-      for (let i = 0; i < this.currentDisplayData.length; i++) {
-        const item = this.currentDisplayData[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 = "运行";
             }
+          });
         }
+      });
     },
     // 采集参数列表
     getCollect(id) {
@@ -769,7 +794,7 @@ export default {
           z-index: 10;
           position: absolute;
           top: 0.6rem;
-          left: 4.8rem;
+          left: 4.9rem;
           display: flex;
           flex-direction: column;
           justify-content: flex-start;
@@ -864,8 +889,8 @@ export default {
         .fanBlade {
           z-index: 10;
           position: absolute;
-          top: 2.3rem;
+          top: 2.5rem;
-          left: 4.3rem;
+          left: 4.1rem;
           width: 0.5rem;
           height: 0.5rem;
           transform-style: preserve-3d;
@@ -888,9 +913,9 @@ export default {
         .host-name {
           z-index: 10;
           position: absolute;
-          top: 1.43rem;
+          top: 1.6rem;
           left: 1.44rem;
-          color: #3520f8;
+          color: #2925f8;
           font-weight: bold;
           font-size: 0.18rem;
         }
@@ -1104,12 +1129,12 @@ export default {
         }
       }
       .compressor {
-        width: 7.6rem;
+        width: 3.5rem;
         .detail-data-bottom {
           // padding-left: 0.75rem;
           .detail-data-li {
             // width: 3.4rem;
-            width: calc(50% - 0.2rem) !important;
+            width: calc(100%) !important;
             margin: 0 0.1rem;
           }
         }

src/views/centerairC/timeSwitch/index.vue

@@ -419,13 +419,7 @@ export default {
   border-radius: 10px;
   font-size: 14px;
   .device-li {
-    width: 100%;
+    flex: none !important;
-    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;
@@ -441,9 +435,6 @@ export default {
       }
     }
   }
-  .device-li:nth-child(1) {
-    color: #9ca3af;
-  }
 }
 // 媒体查询，适配大于2000px分辨率的大屏样式
 @media (min-width: 2000px) {

src/views/hotWater/waterControl/index.vue

@@ -69,15 +69,19 @@
                   <div class="words-li">
                     <div class="ash">开关状态:</div>
                     <div class="white">
-                      <el-switch
+                      <el-select
-                        style="display: block"
+                        v-model="item.hotPumpStatus"
-                        v-model="item.switchStatus"
+                        placeholder="请选择"
-                        active-color="#13ce66"
-                        active-text="开启"
-                        inactive-text="关闭"
                         @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">
@@ -583,6 +587,24 @@ export default {
       },
       tabsList: [],
       expandedKeys: [],
+      hotPumpOptions: [
+        {
+          label: "关机",
+          value: 0,
+        },
+        {
+          label: "制冷",
+          value: 2,
+        },
+        {
+          label: "制热",
+          value: 3,
+        },
+        {
+          label: "热水",
+          value: 4,
+        },
+      ],
       currentId: "", //当前选中高亮的id
       currentName: "", //当前选中的名称
       currentLevel: "", //当前节点的层级
@@ -746,6 +768,7 @@ export default {
               ...item,
               waterLevel: Number(item.waterLevel),
               runningStatus: Number(item.runningStatus) == 0 ? "停止" : "运行", //运行状态
+              hotPumpStatus: item.switchStatus, //热泵开关状态
               switchStatus: Number(item.switchStatus) == 0 ? false : true, //启停控制
               alarmStatus: Number(item.alarmStatus) == 0 ? "无故障" : "故障", //故障状态
               handAutomaticSwitch:
@@ -805,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:
@@ -909,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.name}"的状态为:${statusLabel} 吗?"`,
-          item.switchStatus ? "开启" : "关闭 吗?"
-        }`,
         "提示",
         {
           confirmButtonText: "确定",
@@ -921,19 +961,11 @@ export default {
         }
       )
         .then(() => {
-          // 这里调用请求函数，示例中只是简单打印信息
+          this.hadleOperationConrol(item.switchStatusId, item.hotPumpStatus);
-          console.log("请求后台", item.switchStatus);
-          let param = null;
-          if (item.switchStatus) {
-            param = 1;
-          } else {
-            param = 0;
-          }
-          this.hadleOperationConrol(item.switchStatusId, param);
         })
         .catch(() => {
-          // 用户取消操作，恢复开关状态
+          // 用户取消操作，恢复状态
-          item.switchStatus = !item.switchStatus;
+          item.hotPumpStatus = originalStatus;
         });
     },
     // 设置供水泵手自动状态

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>

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

@@ -1,18 +1,14 @@
 <template>
   <div>
-    <el-table class="historyTables" :data="tableList" height="200px">
+    <el-table
-      <el-table-column
+      class="historyTables"
-        prop="curTime"
+      :class="{ oneClass: isShowOne }"
-        label="时间"
+      :data="tableList"
-      ></el-table-column>
+      height="230px"
-      <el-table-column
+    >
-        prop="indoorTemp"
+      <el-table-column prop="curTime" label="时间"></el-table-column>
-        label="温度(℃)"
+      <el-table-column prop="indoorTemp" label="温度(℃)"></el-table-column>
-      ></el-table-column>
+      <el-table-column prop="indoorHumidity" 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>

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,8 +78,13 @@
         <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>
@@ -109,20 +118,8 @@ export default {
         multiple: true,
       },
       options: [],
-      tableData: [
+      tableData: [],
-        {
+      showOneClass: true,
-          name: "A201",
-          showCharts: true, // 初始显示图表组件
-        },
-        {
-          name: "A202",
-          showCharts: true, // 初始显示图表组件
-        },
-        {
-          name: "A203",
-          showCharts: true, // 初始显示图表组件
-        },
-      ],
     };
   },
   mounted() {
@@ -165,6 +162,7 @@ export default {
               this.selectedValue = [path];
             }
             console.log("反推三个id", path);
+            this.queryParams.houseIds = path;
           }
 
           this.getList();
@@ -205,13 +203,18 @@ 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;
+      temHistory(data)
+        .then((res) => {
+          console.log("历史数据返回", res);
+          if (res.code == 200) {
             // 过滤掉 dataList 为空的对象
             const filteredRows = res.rows.filter(
               (item) => item.dataList && item.dataList.length > 0
@@ -222,10 +225,18 @@ export default {
               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) => {
+        })
+        .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,6 +315,10 @@ export default {
   }
   .oneClass {
     width: 100% !important;
+    height: 750px !important;
+  }
+  .twoClass {
+    height: 750px !important;
   }
 }
 </style>