增加最高最低湿度

Co-authored-by: Copilot <copilot@github.com>

src/views/centerairC/temHistoryQuery/index.vue

@@ -58,6 +58,8 @@
       <el-table-column label="日期" align="center" prop="dateAndWeek" />
       <el-table-column label="最高气温" align="center" prop="maxTemp" />
       <el-table-column label="最低气温" align="center" prop="minTemp" />
+      <el-table-column label="最高湿度" align="center" prop="maxHumidity" />
+      <el-table-column label="最低湿度" align="center" prop="minHumidity" />
       <el-table-column label="天气" align="center" prop="weatherConditions" />
       <el-table-column label="风向" align="center" prop="windDirection" />
     </el-table>
@@ -163,23 +165,36 @@ export default {
           let timeValue = [];
           let hightValue = [];
           let lowValue = [];
+          let maxHumidityValue = [];
+          let minHumidityValue = [];
           data.forEach((element) => {
             timeValue.push(element.weatherDate);
             hightValue.push(element.maxTemp);
             lowValue.push(element.minTemp);
+            maxHumidityValue.push(element.maxHumidity);
+            minHumidityValue.push(element.minHumidity);
           });
           let adapterOption = {};
           adapterOption = {
             xAxis: {
               data: timeValue,
             },
-            yAxis: {
+            yAxis: [
-              name: "℃",
+              {
-              nameTextStyle: {
+                name: "℃",
-                color: "rgba(255, 255, 255, 1)",
+                nameTextStyle: {
-                fontSize: 12,
+                  color: "rgba(255, 255, 255, 1)",
+                  fontSize: 12,
+                },
               },
-            },
+              {
+                name: "%",
+                nameTextStyle: {
+                  color: "rgba(255, 255, 255, 1)",
+                  fontSize: 12,
+                },
+              },
+            ],
             series: [
               {
                 data: hightValue,
@@ -201,6 +216,26 @@ export default {
                   color: "rgb(250, 169, 19)", //折线点的颜色
                 },
               },
+              {
+                data: maxHumidityValue,
+                //折线颜色
+                itemStyle: {
+                  color: "rgb(52, 197, 94)", //折线的颜色
+                },
+                lineStyle: {
+                  color: "rgb(52, 197, 94)", //折线点的颜色
+                },
+              },
+              {
+                data: minHumidityValue,
+                //折线颜色
+                itemStyle: {
+                  color: "rgb(239, 68, 68)", //折线的颜色
+                },
+                lineStyle: {
+                  color: "rgb(239, 68, 68)", //折线点的颜色
+                },
+              },
             ],
           };
           //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
@@ -220,6 +255,12 @@ export default {
               {
                 data: [],
               },
+              {
+                data: [],
+              },
+              {
+                data: [],
+              },
             ],
           };
           //记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关
@@ -248,11 +289,13 @@ export default {
       weatherTempData(this.queryParams).then((response) => {
         if (response.code == 200) {
           import("@/assets/excel/Export2Excel").then((excel) => {
-            var tHeader = ["日期", "最高气温", "最低气温", "天气", "风向"]; // 导出的excel表头名信息 改参数
+            var tHeader = ["日期", "最高气温", "最低气温", "最高湿度", "最低湿度", "天气", "风向"]; // 导出的excel表头名信息 改参数
             var filterVal = [
               "dateAndWeek",
               "maxTemp",
               "minTemp",
+              "maxHumidity",
+              "minHumidity",
               "weatherConditions",
               "windDirection",
             ];
@@ -351,40 +394,88 @@ export default {
             },
           }, //x轴分割线
         },
-        yAxis: {
+        yAxis: [
-          min: 0,
+          {
-          // max:20,
+            min: 0,
-          // name: "kwh", // 第一个 y 轴的单位描述
+            // max:20,
-          // 设置 name 的样式
+            // name: "kwh", // 第一个 y 轴的单位描述
-          nameTextStyle: {
+            // 设置 name 的样式
-            color: "rgba(255, 255, 255, 1)",
+            nameTextStyle: {
-            fontSize: 12, //y轴单位文字大小
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: 12, //y轴单位文字大小
+            },
+            miniInterval: 5,
+            type: "value",
+            // 修饰刻度标签的颜色即y坐标数据
+            axisLabel: {
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: titleFontSize, //x轴文字大小
+            },
+            // 显示y坐标轴
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#365576", // 设置 y 轴线的颜色
+              },
+            },
+            //y轴分割线段数
+            // splitNumber: 10,
+            // 修改y轴分割线的颜色
+            splitLine: {
+              lineStyle: {
+                color: "#1a3d62", // 设置分割线的颜色
+                type: "dashed", // 设置分割线为虚线
+              },
+            },
           },
-          miniInterval: 5,
+          {
-          type: "value",
+            type: "value",
-          // 修饰刻度标签的颜色即y坐标数据
+            name: "%",
-          axisLabel: {
+            position: "right",
-            color: "rgba(255, 255, 255, 1)",
+            nameTextStyle: {
-            fontSize: titleFontSize, //x轴文字大小
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: 12,
+            },
+            axisLabel: {
+              color: "rgba(255, 255, 255, 1)",
+              fontSize: titleFontSize,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#365576",
+              },
+            },
+            splitLine: {
+              show: false,
+            },
           },
-          // 显示y坐标轴
+        ],
-          axisLine: {
+        series: [
-            show: true,
+          {
+            type: "line",
+            // 拐点大小
+            symbolSize: titleFontSize * 0.5,
             lineStyle: {
-              color: "#365576", // 设置 y 轴线的颜色
+              // 设置折线的厚度
+              width: titleFontSize * 0.1,
             },
+            symbol: "circle",
+            name: "最高气温",
+            yAxisIndex: 0,
           },
-          //y轴分割线段数
+          {
-          // splitNumber: 10,
+            type: "line",
-          // 修改y轴分割线的颜色
+            // 拐点大小
-          splitLine: {
+            symbolSize: titleFontSize * 0.5,
             lineStyle: {
-              color: "#1a3d62", // 设置分割线的颜色
+              // 设置折线的厚度
-              type: "dashed", // 设置分割线为虚线
+              width: titleFontSize * 0.1,
             },
+            symbol: "circle",
+            name: "最低气温",
+            yAxisIndex: 0,
           },
-        },
-        series: [
           {
             type: "line",
             // 拐点大小
@@ -394,7 +485,8 @@ export default {
               width: titleFontSize * 0.1,
             },
             symbol: "circle",
-            name: "最高气温",
+            name: "最高湿度",
+            yAxisIndex: 1,
           },
           {
             type: "line",
@@ -405,7 +497,8 @@ export default {
               width: titleFontSize * 0.1,
             },
             symbol: "circle",
-            name: "最低气温",
+            name: "最低湿度",
+            yAxisIndex: 1,
           },
         ],
       };