From 0b96d3a864125050d94dadc5ba070d84c4396c53 Mon Sep 17 00:00:00 2001
From: selia-zx <1771203023@qq.com>
Date: Sat, 9 May 2026 10:09:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=8E=86=E5=8F=B2=E5=A4=A9?=
=?UTF-8?q?=E6=B0=94=E6=9F=A5=E8=AF=A2=E4=B8=AD=E5=9B=BE=E8=A1=A8=E7=9A=84?=
=?UTF-8?q?=E5=8F=8Cy=E8=BD=B4=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../centerairC/temHistoryQuery/index.vue | 226 ++++++++++--------
1 file changed, 127 insertions(+), 99 deletions(-)
diff --git a/src/views/centerairC/temHistoryQuery/index.vue b/src/views/centerairC/temHistoryQuery/index.vue
index b2c6b2b..e82adcf 100644
--- a/src/views/centerairC/temHistoryQuery/index.vue
+++ b/src/views/centerairC/temHistoryQuery/index.vue
@@ -2,75 +2,37 @@
-
+
-
+
- 搜索
+ 搜索
- 导出
+ 导出
- 重置
+ 重置
-
+
-
-
-
-
+
+
+
+
-
+
@@ -175,66 +137,50 @@ export default {
minHumidityValue.push(element.minHumidity);
});
let adapterOption = {};
+ // 计算双y轴最大最小值，
+ var Min1 = 0,
+ Min2 = 0,
+ Max1 = Math.ceil(Math.max(...hightValue, ...lowValue)),
+ Max2 = Math.ceil(Math.max(...maxHumidityValue, ...minHumidityValue));
+ console.log("Min1", Min1);
+ console.log("Min2", Min2);
+ console.log("Max1", Max1);
+ console.log("Max2", Max2);
adapterOption = {
xAxis: {
data: timeValue,
},
yAxis: [
+ //两个y轴
{
- name: "℃",
- nameTextStyle: {
- color: "rgba(255, 255, 255, 1)",
- fontSize: 12,
- },
+ min: Min1,
+ max: Max1,
+ splitNumber: 10,
+ interval: (Max1 - Min1) / 10,
},
{
- name: "%",
- nameTextStyle: {
- color: "rgba(255, 255, 255, 1)",
- fontSize: 12,
- },
+ min: Min2,
+ max: Max2,
+ splitNumber: 10,
+ interval: (Max2 - Min2) / 10,
},
],
series: [
{
+ name: "最高气温",
data: hightValue,
- //折线颜色
- itemStyle: {
- color: "rgb(18, 126, 226)", //折线的颜色
- },
- lineStyle: {
- color: "rgb(18, 126, 226)", //折线点的颜色
- },
},
{
+ name: "最低气温",
data: lowValue,
- //折线颜色
- itemStyle: {
- color: "rgb(250, 169, 19)", //折线的颜色
- },
- lineStyle: {
- color: "rgb(250, 169, 19)", //折线点的颜色
- },
},
{
+ name: "最高湿度",
data: maxHumidityValue,
- //折线颜色
- itemStyle: {
- color: "rgb(52, 197, 94)", //折线的颜色
- },
- lineStyle: {
- color: "rgb(52, 197, 94)", //折线点的颜色
- },
},
{
+ name: "最低湿度",
data: minHumidityValue,
- //折线颜色
- itemStyle: {
- color: "rgb(239, 68, 68)", //折线的颜色
- },
- lineStyle: {
- color: "rgb(239, 68, 68)", //折线点的颜色
- },
},
],
};
@@ -272,6 +218,10 @@ export default {
},
/** 搜索按钮操作 */
handleQuery() {
+ if (!this.monthValue) {
+ this.$message.warning("请选择日期");
+ return
+ }
this.queryParams.pageNum = 1;
this.getList();
this.getChartData();
@@ -282,6 +232,10 @@ export default {
},
/** 导出按钮操作 */
handleExport() {
+ if (!this.monthValue) {
+ this.$message.warning("请选择日期");
+ return
+ }
this.queryParams.pageNum = 1;
this.queryParams.pageSize = 32;
this.queryParams.startTime = this.queryParams.endTime = this.monthValue;
@@ -289,7 +243,7 @@ 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",
@@ -304,7 +258,7 @@ export default {
excel.export_json_to_excel({
header: tHeader, //表头
data, //数据
- filename: "历史天气报表", //名称
+ filename: `${this.monthValue}历史天气报表`, //名称
autoWidth: true, //宽度自适应
});
this.$message({
@@ -352,16 +306,61 @@ export default {
// 设置提示框内文字的大小
fontSize: titleFontSize,
},
+ // 自定义 tooltip 内容
+ formatter: function (params) {
+ var res = params[0].name + "
";
+ for (var i = 0, l = params.length; i < l; i++) {
+ var seriesName = params[i].seriesName;
+ var value = params[i].value;
+ var marker =
+ '';
+ // 根据不同德seriesName 返回不同的单位
+ if (seriesName.includes("气温")) {
+ res +=
+ marker +
+ seriesName +
+ ":" +
+ '' +
+ value +
+ " " +
+ "℃" +
+ "
";
+ } else if (seriesName.includes("湿度")) {
+ res +=
+ marker +
+ seriesName +
+ ":" +
+ '' +
+ value +
+ " " +
+ "%" +
+ "
";
+ }
+ else {
+ res +=
+ marker +
+ seriesName +
+ ":" +
+ '' +
+ value +
+ "
";
+ }
+ }
+ return res;
+ },
},
legend: {
- show: false,
- // textStyle: {
- // // 设置图例文字的大小
- // fontSize: 14
- // }
+ data: ["最高气温", "最低气温", "最高湿度", "最低湿度"],
+ // selectedMode: false, // 是否允许图例进行点击
+ show: true, // 不显示图例
+ textStyle: {
+ color: "white", // 设置图例文字颜色为蓝色
+ },
},
grid: {
- top: "10%",
+ top: "15%",
left: "4%",
right: "6%",
bottom: "3%",
@@ -398,7 +397,7 @@ export default {
{
min: 0,
// max:20,
- // name: "kwh", // 第一个 y 轴的单位描述
+ name: "气温(℃)",
// 设置 name 的样式
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
@@ -430,7 +429,7 @@ export default {
},
{
type: "value",
- name: "%",
+ name: "湿度(%)",
position: "right",
nameTextStyle: {
color: "rgba(255, 255, 255, 1)",
@@ -463,6 +462,13 @@ export default {
symbol: "circle",
name: "最高气温",
yAxisIndex: 0,
+ //折线颜色
+ itemStyle: {
+ color: "rgb(18, 126, 226)", //折线的颜色
+ },
+ lineStyle: {
+ color: "rgb(18, 126, 226)", //折线点的颜色
+ },
},
{
type: "line",
@@ -475,6 +481,13 @@ export default {
symbol: "circle",
name: "最低气温",
yAxisIndex: 0,
+ //折线颜色
+ itemStyle: {
+ color: "rgb(250, 169, 19)", //折线的颜色
+ },
+ lineStyle: {
+ color: "rgb(250, 169, 19)", //折线点的颜色
+ },
},
{
type: "line",
@@ -487,6 +500,13 @@ export default {
symbol: "circle",
name: "最高湿度",
yAxisIndex: 1,
+ //折线颜色
+ itemStyle: {
+ color: "rgb(52, 197, 94)", //折线的颜色
+ },
+ lineStyle: {
+ color: "rgb(52, 197, 94)", //折线点的颜色
+ },
},
{
type: "line",
@@ -499,6 +519,13 @@ export default {
symbol: "circle",
name: "最低湿度",
yAxisIndex: 1,
+ //折线颜色
+ itemStyle: {
+ color: "rgb(239, 68, 68)", //折线的颜色
+ },
+ lineStyle: {
+ color: "rgb(239, 68, 68)", //折线点的颜色
+ },
},
],
};
@@ -514,6 +541,7 @@ export default {
height: 300px;
margin-bottom: 0.1rem;
}
+
// 媒体查询，适配大于2000px分辨率的大屏样式
@media (min-width: 2000px) {
.charts {