zzw

src/assets/json/authMenuList.json

@@ -150,7 +150,7 @@
                 {
                     "path": "/analysis/windSpeed",
                     "name": "windSpeed",
-                    "component": "/proTable/useProTable/index",
+                    "component": "/analysis/windSpeed/index",
                     "meta": {
                         "title": "风速风向玫瑰图",
                         "isLink": "",
@@ -163,7 +163,7 @@
                 {
                     "path": "/analysis/rainfall",
                     "name": "rainfall",
-                    "component": "/proTable/useProTable/index",
+                    "component": "/analysis/rainfall/index",
                     "meta": {
                         "title": "雨量柱状图分析",
                         "isLink": "",
@@ -176,7 +176,7 @@
                 {
                     "path": "/analysis/lightningArea",
                     "name": "lightningArea",
-                    "component": "/proTable/useProTable/index",
+                    "component": "/analysis/lightningArea/index",
                     "meta": {
                         "title": "雷电区域分析",
                         "isLink": "",
@@ -406,4 +406,4 @@
         }
     ],
     "msg": "成功"
-}
+}

src/views/alarm/allDevice/index.vue

@@ -100,12 +100,7 @@ import * as echarts from 'echarts';
 
 import { ref, reactive, onMounted } from "vue";
 import { useRouter } from "vue-router";
-import { User } from "@/api/interface";
 
-import { useAuthButtons } from "@/hooks/useAuthButtons";
-import { ElMessage, ElMessageBox } from "element-plus";
-
-import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
 
 const formRef = ref()
 const device = ref()

src/views/alarm/singleStationData/index.vue

@@ -4,7 +4,7 @@
 			<div class="queryInfo">
 				<div style="display: flex;align-items: center;" class="top_item">
 					<span style="flex-shrink: 0;">自动站：</span>
-					<el-select v-model="queryInfo" size="small" clearable placeholder="设备系统" style="width: 160px;">
+					<el-select v-model="queryInfo" clearable placeholder="设备系统" style="width: 180px;">
 						<el-option label="M1986" :value="0" />
 						<el-option label="M1987" :value="1" />
 					</el-select>
@@ -15,11 +15,12 @@
 				<div class="top_item">纬度：36°25′24″N</div>
 				<div class="top_item">观测时间：2023-06-12 15:00</div>
 			</div>
-			<el-button link>
-				<el-icon :size="16">
-					<Operation />
-				</el-icon>
-			</el-button>
+			<div class="header-button-ri">
+				<slot name="toolButton">
+					<img class="setting" src="@/assets/images/setting2.png" />
+				</slot>
+			</div>
+
 		</div>
 		<div class="main_list">
 			<el-row :gutter="15">
@@ -40,7 +41,7 @@
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
 					<div class="chart_item">
-						<div style="font-weight: bold;">瞬时风(m/s)</div>
+						<div style="font-weight: bold;">瞬时风 ( m/s )</div>
 						<div class="mt15 box1">
 							<div ref="windSpeed" class="ve-ring" style="height: 200px"></div>
 							<div class="icon icon1">270 <span>°</span></div>
@@ -51,7 +52,7 @@
 				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
 					<div class="chart_item">
 
-						<div style="font-weight: bold;">温度(℃)</div>
+						<div style="font-weight: bold;">温度 ( ℃ )</div>
 						<div class="mt15">
 							<div ref="pie" class="ve-ring" style="height: 200px"></div>
 						</div>
@@ -62,7 +63,7 @@
 				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
 					<div class="chart_item">
 
-						<div style="font-weight: bold;">相对湿度(%)</div>
+						<div style="font-weight: bold;">相对湿度 ( % )</div>
 						<div class="mt15">
 							<div ref="humidity" class="ve-ring" style="height: 200px"></div>
 						</div>
@@ -75,7 +76,7 @@
 				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
 					<div class="chart_item">
 
-						<div style="font-weight: bold;">本站气压(hPa)</div>
+						<div style="font-weight: bold;">本站气压 ( hPa )</div>
 						<div class="mt15">
 							<div ref="pressure" class="ve-ring" style="height: 200px"></div>
 						</div>
@@ -85,7 +86,7 @@
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
 					<div class="chart_item">
-						<div style="font-weight: bold;">小时/分钟雨量(mm)</div>
+						<div style="font-weight: bold;">小时/分钟雨量 ( mm )</div>
 						<div class="mt15">
 							<div style="height: 200px">
 								<div class="gradient-container">
@@ -109,7 +110,7 @@
 													<CaretLeft />
 												</el-icon><span style="font-size: 26px;">{{
 													mincurrentValue }}</span>
-													
+
 											</span>
 											<span style="position: absolute;top: 0;left: -15px;">4</span>
 											<span style="position: absolute;bottom: 0;left: -15px;">0</span>
@@ -126,7 +127,7 @@
 			<el-row :gutter="15">
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
 					<div class="chart_item info_box">
-						<div class="info_title">瞬时风速(m/s)</div>
+						<div class="info_title">瞬时风速 ( m/s )</div>
 						<div class="mt15 ">
 							<div class="info_content">
 								0.2
@@ -136,7 +137,7 @@
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
 					<div class="chart_item info_box">
-						<div class="info_title">瞬时风向(°)</div>
+						<div class="info_title">瞬时风向 ( ° )</div>
 						<div class="mt15 ">
 							<div class="info_content">
 								35
@@ -146,7 +147,7 @@
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
 					<div class="chart_item info_box">
-						<div class="info_title">气温(℃)</div>
+						<div class="info_title">气温 ( ℃ )</div>
 						<div class="mt15 ">
 							<div class="info_content">
 								23.5
@@ -156,7 +157,7 @@
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
 					<div class="chart_item info_box">
-						<div class="info_title">相对湿度(%)</div>
+						<div class="info_title">相对湿度 ( % )</div>
 						<div class="mt15 ">
 							<div class="info_content">
 								86
@@ -166,7 +167,7 @@
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
 					<div class="chart_item info_box">
-						<div class="info_title">露点温度(℃)</div>
+						<div class="info_title">露点温度 ( ℃ )</div>
 						<div class="mt15 ">
 							<div class="info_content">
 								12.5
@@ -176,7 +177,7 @@
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
 					<div class="chart_item info_box">
-						<div class="info_title">地面温度(℃)</div>
+						<div class="info_title">地面温度 ( ℃ )</div>
 						<div class="mt15 ">
 							<div class="info_content">
 								26.8
@@ -186,7 +187,7 @@
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
 					<div class="chart_item info_box">
-						<div class="info_title">云底高度(m)</div>
+						<div class="info_title">云底高度 ( m )</div>
 						<div class="mt15 ">
 							<div class="info_content">
 								1800
@@ -196,7 +197,7 @@
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
 					<div class="chart_item info_box">
-						<div class="info_title">静电场强度(kV/m)</div>
+						<div class="info_title">静电场强度 ( kV/m )</div>
 						<div class="mt15 ">
 							<div class="info_content" style="color:red ;">
 								10.9
@@ -206,7 +207,7 @@
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
 					<div class="chart_item info_box">
-						<div class="info_title">总云量(成)</div>
+						<div class="info_title">总云量 ( 成 )</div>
 						<div class="mt15 ">
 							<div class="info_content">
 								5
@@ -216,7 +217,7 @@
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
 					<div class="chart_item info_box">
-						<div class="info_title">低云云量(成)</div>
+						<div class="info_title">低云云量 ( 成 )</div>
 						<div class="mt15 ">
 							<div class="info_content">
 								2
@@ -226,7 +227,7 @@
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
 					<div class="chart_item info_box">
-						<div class="info_title">光照度(lx)</div>
+						<div class="info_title">光照度 ( lx )</div>
 						<div class="mt15 ">
 							<div class="info_content">
 								1
@@ -236,7 +237,7 @@
 				</el-col>
 				<el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
 					<div class="chart_item info_box">
-						<div class="info_title">小时累计日照时数(min)</div>
+						<div class="info_title">小时累计日照时数 ( min )</div>
 						<div class="mt15 ">
 							<div class="info_content">
 								29
@@ -250,7 +251,7 @@
 				<el-col :xs="12" :sm="8" :md="8" :lg="8">
 					<div class="chart_item">
 						<div style="font-weight: bold;" class="item_title">
-							<span>风向 / 风速(m/s)</span>
+							<span>风向 / 风速 ( m/s )</span>
 							<el-select v-model="value" placeholder="请选择" size="small" style="width: 150px;">
 								<el-option v-for="item in options" :key="item.value" :label="item.label"
 									:value="item.value">
@@ -265,7 +266,7 @@
 				<el-col :xs="12" :sm="8" :md="8" :lg="8">
 					<div class="chart_item">
 						<div style="font-weight: bold;" class="item_title">
-							<span>气温(℃)/相对湿度(%)</span>
+							<span>气温 ( ℃ ) / 相对湿度 ( % )</span>
 							<el-select v-model="value" placeholder="请选择" size="small" style="width: 150px;">
 								<el-option v-for="item in options" :key="item.value" :label="item.label"
 									:value="item.value">
@@ -280,7 +281,7 @@
 				<el-col :xs="12" :sm="8" :md="8" :lg="8">
 					<div class="chart_item">
 						<div style="font-weight: bold;" class="item_title">
-							<span>本站气压(hPa)</span>
+							<span>本站气压 ( hPa )</span>
 							<el-select v-model="value" placeholder="请选择" size="small" style="width: 150px;">
 								<el-option v-for="item in options" :key="item.value" :label="item.label"
 									:value="item.value">
@@ -313,9 +314,9 @@ const tempLine = ref()
 const pressureLine = ref()
 
 //chart 数据
-const data1 = ref([25, 25, 30, 25, 35, 26, 27, 40, 15]);
-const data2 = ref([30, 40, 60, 30, 80, 70, 50, 36, 42]);
-const data3 = ref([920, 932, 901, 934, 900, 1030, 1020, 950, 960]);
+const data1 = ref([25, 25, 30, 25, 35, 26, 27, 30, 30, 28, 29, 30, 31, 32, 31, 30, 29, 28, 27, 28, 29, 30, 32]);
+const data2 = ref([30, 40, 40, 35, 45, 40, 50, 40, 45, 50, 55, 65, 60, 55, 50, 45, 50, 55, 60, 55, 50, 50, 60]);
+const data3 = ref([1003.2, 1003.4, 1003.5, 1004, 1003.6, 1003.7, 1003.8, 1003.9, 1003.8, 1003.2, 1003.4, 1003.5, 1004, 1003.6, 1003.7, 1003.8, 1003.9, 1003.8, 1003.2, 1003.4, 1003.5, 1004, 1003.6, 1003.7, 1003.8, 1003.9, 1003.8]);
 const options = [{
 	value: 1,
 	label: '24小时'
@@ -661,9 +662,9 @@ const showWindSpeed = () => {
 			{
 				type: 'gauge',
 				radius: '100%',
-				detail: {
-					show: false
-				},
+				// detail: {
+				// 	show: false
+				// },
 				// detail: {
 				//     offsetCenter: [0, 0],
 				//     valueAnimation: true,
@@ -762,10 +763,43 @@ const showWindSpeed = () => {
 						}
 					}
 				},
-				data: [{
-					value: 270,
-					name: '2级'
-				}]
+				detail: {
+        offsetCenter: [-12, 5],
+        valueAnimation: true,
+        formatter: '2',
+        color: 'black'
+
+        // 	fontSize: 10,
+      },
+      data: [
+        {
+          value: 270,
+          name: '级',
+          detail: {
+            fontSize: 40,
+            // fontWeight: 400
+          },
+          title: {
+            offsetCenter: [12, 10],
+            fontSize: 15,
+			fontWeight:400
+          }
+        }
+      ]
+				// detail: {
+				// 	offsetCenter: [0, 0],
+				// 	valueAnimation: true,
+				// 	formatter: '2',
+				// 	color: 'black',
+				// 	fontSize: 30,
+				// },
+				// data: [{
+				// 	value: 270,
+				// 	name: '2级',
+				// 	detail: {
+				// 		fontSize: 39
+				// 	}
+				// }]
 			}
 		]
 	};
@@ -778,35 +812,105 @@ const showWindSpeed = () => {
 const showWind = () => {
 	// 数据格式
 	let winArr = [{
-		value: 5.5, //风速--数值大小--变量名不可变
+		value: 4.1, //风速--数值大小--变量名不可变
+		symbolRotate: -45, //风向---旋转角度--变量名不可变
+		symbolRotateStr: '西南风' //风向中文--变量名可变（tooltip 提示随之修改）
+
+	}, {
+		value: 4.5,
+		symbolRotate: 45,
+		symbolRotateStr: '东南风'
+	}, {
+		value: 4.5,
+		symbolRotate: 90,
+		symbolRotateStr: '东风'
+	}, {
+		value: 5.0,
+		symbolRotate: -180,
+		symbolRotateStr: '南风'
+	}, {
+		value: 4.3,
+		symbolRotate: -45,
+		symbolRotateStr: '西南风'
+	}, {
+		value: 4.5,
+		symbolRotate: -90,
+		symbolRotateStr: '西风'
+	}, {
+		value: 4.5,
+		symbolRotate: -45,
+		symbolRotateStr: '西南风'
+	}, {
+		value: 4.5,
+		symbolRotate: -90,
+		symbolRotateStr: '西风'
+	}, {
+		value: 4.1, //风速--数值大小--变量名不可变
+		symbolRotate: -45, //风向---旋转角度--变量名不可变
+		symbolRotateStr: '西南风' //风向中文--变量名可变（tooltip 提示随之修改）
+
+	}, {
+		value: 4.5,
+		symbolRotate: 45,
+		symbolRotateStr: '东南风'
+	}, {
+		value: 4.5,
+		symbolRotate: 90,
+		symbolRotateStr: '东风'
+	}, {
+		value: 5.0,
+		symbolRotate: -180,
+		symbolRotateStr: '南风'
+	}, {
+		value: 4.3,
+		symbolRotate: -45,
+		symbolRotateStr: '西南风'
+	}, {
+		value: 4.5,
+		symbolRotate: -90,
+		symbolRotateStr: '西风'
+	}, {
+		value: 4.5,
+		symbolRotate: -45,
+		symbolRotateStr: '西南风'
+	}, {
+		value: 4.5,
+		symbolRotate: -90,
+		symbolRotateStr: '西风'
+	}, {
+		value: 4.1, //风速--数值大小--变量名不可变
 		symbolRotate: -45, //风向---旋转角度--变量名不可变
 		symbolRotateStr: '西南风' //风向中文--变量名可变（tooltip 提示随之修改）
 
 	}, {
-		value: 1.5,
+		value: 4.5,
 		symbolRotate: 45,
 		symbolRotateStr: '东南风'
 	}, {
-		value: 8.5,
+		value: 4.5,
 		symbolRotate: 90,
 		symbolRotateStr: '东风'
 	}, {
-		value: 10,
+		value: 5.0,
 		symbolRotate: -180,
 		symbolRotateStr: '南风'
 	}, {
-		value: 3,
+		value: 4.3,
 		symbolRotate: -45,
 		symbolRotateStr: '西南风'
 	}, {
-		value: 7,
+		value: 4.5,
 		symbolRotate: -90,
 		symbolRotateStr: '西风'
 	}, {
-		value: 3.5,
+		value: 4.5,
 		symbolRotate: -45,
 		symbolRotateStr: '西南风'
-	}]
+	}, {
+		value: 4.5,
+		symbolRotate: -90,
+		symbolRotateStr: '西风'
+	},]
 	let mychart = echarts.init(wind.value);
 	let option = {
 
@@ -814,7 +918,7 @@ const showWind = () => {
 			left: '10',
 			right: '10',
 			bottom: '3%',
-			top: '10',
+			top: 20,
 			containLabel: true
 		},
 		// X轴
@@ -823,19 +927,33 @@ const showWind = () => {
 			splitLine: {
 				show: false
 			},
-			boundaryGap: false,
+			boundaryGap: true,
 			axisTick: {
 				alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
 			},
-			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+			data: ['06/12 08:00', '06/12 09:00', '06/12 10:00', '06/12 11:00', '06/12 12:00', '06/12 13:00', '06/12 14:00', '06/12 15:00', '06/12 16:00', '06/12 17:00', '06/12 18:00', '06/12 19:00', '06/12 20:00', '06/12 21:00', '06/12 22:00', '06/12 23:00', '06/13 00:00', '06/13 01:00', '06/13 02:00', '06/13 03:00', '06/13 04:00', '06/13 05:00', '06/13 06:00', '06/13 07:00',],
 			axisLabel: {
-				interval: 1
+				interval: 4,
+				formatter: function (value) {
+					// if (value.index % 4 === 0) {
+					// 	return value.replace(/ /g, '\n');
+					// } else {
+					// 	return '';
+					// }
+					return value.replace(/ /g, '\n');
+				},
+
 			},
 		},
 		// Y轴
+		// yAxis: {
+		// 	type: 'value',
+		// 	// name: "风速(m/s)",
+		// },
 		yAxis: {
-			type: 'value',
-			// name: "风速(m/s)",
+			min: 0,
+			max: 10,
+			type: 'value'
 		},
 		// 鼠标悬浮提示
 		tooltip: {
@@ -858,17 +976,25 @@ const showWind = () => {
 			smooth: true, //这句就是让曲线变平滑的
 			// symbol: "image://" + require("../../../assets/img/weather/wind.png"),
 			symbol: 'path://M4.866,0,0,15.193l4.866-4.449L9.738,15.2Z',
-			symbolSize: 18,
+			symbolSize: 11,
 			//折线样式
 			lineStyle: {
 				color: '#a5cfff',
-				width: 2,
+				width: 1,
 			},
-			// symbol样式
-			// itemStyle: {
-			//     borderWidth: 18,
+			// label: {
+			// 	normal: {
+			// 		formatter: '{c}',
+			// 		show: false,
+			// 		position: 'top',
+			// 		distance: 15
+			// 	}
+			// },
+			itemStyle: {
+				normal: {
 
-			// }
+				},
+			},
 		}]
 	};
 
@@ -1010,7 +1136,7 @@ const showTempLine = () => {
 	function calMax(arr) {
 		let max = Math.max.apply(null, arr); // 获取最大值方法
 		let maxint = Math.ceil(max / 5); // 向上以5的倍数取整
-		let maxval = maxint * 5 + 5; // 最终设置的最大值
+		let maxval = max >= 100 ? maxint * 5 : maxint * 5 + 10; // 最终设置的最大值
 		return maxval; // 输出最大值
 	}
 	// 获取最小值方法
@@ -1060,9 +1186,18 @@ const showTempLine = () => {
 			axisTick: {
 				alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
 			},
-			data: ["10", "20", "30", "40", "50", "60", "70", "80", "90"],
+			data: ['06/12 08:00', '06/12 09:00', '06/12 10:00', '06/12 11:00', '06/12 12:00', '06/12 13:00', '06/12 14:00', '06/12 15:00', '06/12 16:00', '06/12 17:00', '06/12 18:00', '06/12 19:00', '06/12 20:00', '06/12 21:00', '06/12 22:00', '06/12 23:00', '06/13 00:00', '06/13 01:00', '06/13 02:00', '06/13 03:00', '06/13 04:00', '06/13 05:00', '06/13 06:00', '06/13 07:00',],
 			axisLabel: {
-				interval: 1
+				interval: 4,
+				formatter: function (value) {
+					// if (value.index % 4 === 0) {
+					// 	return value.replace(/ /g, '\n');
+					// } else {
+					// 	return '';
+					// }
+					return value.replace(/ /g, '\n');
+				},
+
 			},
 		},
 		yAxis: [
@@ -1175,9 +1310,18 @@ const showPressureLine = () => {
 			axisTick: {
 				alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
 			},
-			data: ["10", "20", "30", "40", "50", "60", "70", "80", "90"],
+			data: ['06/12 08:00', '06/12 09:00', '06/12 10:00', '06/12 11:00', '06/12 12:00', '06/12 13:00', '06/12 14:00', '06/12 15:00', '06/12 16:00', '06/12 17:00', '06/12 18:00', '06/12 19:00', '06/12 20:00', '06/12 21:00', '06/12 22:00', '06/12 23:00', '06/13 00:00', '06/13 01:00', '06/13 02:00', '06/13 03:00', '06/13 04:00', '06/13 05:00', '06/13 06:00', '06/13 07:00',],
 			axisLabel: {
-				interval: 1
+				interval: 4,
+				formatter: function (value) {
+					// if (value.index % 4 === 0) {
+					// 	return value.replace(/ /g, '\n');
+					// } else {
+					// 	return '';
+					// }
+					return value.replace(/ /g, '\n');
+				},
+
 			},
 		},
 		yAxis: {
@@ -1242,7 +1386,7 @@ onMounted(() => {
 	font-size: 14px;
 
 	.top_item {
-		margin-right: 15px;
+		margin-right: 25px;
 
 	}
 }

src/views/analysis/dataSynthesis/index.vue

@@ -8,7 +8,7 @@
 							:value="item.value" />
 					</el-select>
 				</el-form-item>
-				<el-form-item label="自动站：" prop="base" >
+				<el-form-item label="观测时间：" prop="base" >
 					<el-date-picker v-model="searchParam.date" type="daterange" range-separator="至"
 						start-placeholder="开始时间" end-placeholder="结束时间"  style="width: 300px" />
 				</el-form-item>
@@ -25,7 +25,7 @@
 				<el-col :span="24">
 					<div class="chart_item">
 						<div style="font-weight: bold;" class="item_title">
-							<span>气温(℃)/相对湿度(%)/本站气压(hPa)</span>
+							<span>气温 ( ℃ ) / 相对湿度 ( % ) / 本站气压 ( hPa )</span>
 						</div>
 						<div class="mt5">
 							<div ref="data" class="data_box"></div>
@@ -42,12 +42,7 @@ import * as echarts from 'echarts';
 
 import { ref, reactive, onMounted } from "vue";
 import { useRouter } from "vue-router";
-import { User } from "@/api/interface";
 
-import { useAuthButtons } from "@/hooks/useAuthButtons";
-import { ElMessage, ElMessageBox } from "element-plus";
-
-import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
 
 const formRef = ref()
 const data = ref()

src/views/analysis/featureCurves/index.vue

@@ -10,7 +10,7 @@
 				</el-form-item>
 				<el-form-item label="自动站：" prop="base">
 					<div><el-switch v-model="searchParam.switch" class="ml-2" inline-prompt active-text="正点"
-							inactive-text="非正点" style="margin-right: 10px;" />
+							inactive-text="分钟" style="margin-right: 10px;" />
 						<el-date-picker v-model="searchParam.date" type="daterange" range-separator="至"
 							start-placeholder="开始时间" end-placeholder="结束时间" style="width: 300px" />
 					</div>
@@ -22,18 +22,18 @@
 					</div>
 				</el-form-item>
 			</el-form>
-			<el-button link>
-				<el-icon :size="16">
-					<Operation />
-				</el-icon>
-			</el-button>
+			<div class="header-button-ri">
+				<slot name="toolButton">
+					<img class="setting" style="margin-top: 5px;" src="@/assets/images/setting2.png" />
+				</slot>
+			</div>
 		</div>
 		<div class="main_list">
 			<el-row :gutter="15">
 				<el-col :xs="24" :sm="12" :md="8" :lg="8">
 					<div class="chart_item">
 						<div style="font-weight: bold;" class="item_title">
-							<span>2分钟平均风向(°)/2分钟平均风速(m/s)</span>
+							<span>2分钟平均风向 ( ° )/2分钟平均风速 ( m/s )</span>
 						</div>
 						<div class="mt5">
 							<div ref="wind" class="ve-ring" style="height: 330px"></div>
@@ -43,7 +43,7 @@
 				<el-col :xs="24" :sm="12" :md="8" :lg="8">
 					<div class="chart_item">
 						<div style="font-weight: bold;" class="item_title">
-							<span>总辐射曝辐量(MJ/㎡)</span>
+							<span>总辐射曝辐量 ( MJ/㎡ )</span>
 						</div>
 						<div class="mt5">
 							<div ref="radio" class="ve-ring" style="height: 330px"></div>
@@ -53,7 +53,7 @@
 				<el-col :xs="24" :sm="12" :md="8" :lg="8">
 					<div class="chart_item">
 						<div style="font-weight: bold;" class="item_title">
-							<span>本站气压(hPa)</span>
+							<span>本站气压 ( hPa )</span>
 						</div>
 						<div class="mt5">
 							<div ref="pressureLine" class="ve-ring" style="height: 330px"></div>
@@ -65,7 +65,7 @@
 				<el-col :span="24">
 					<div class="chart_item">
 						<div style="font-weight: bold;" class="item_title">
-							<span>总辐射辐照度(W/㎡)</span>
+							<span>总辐射辐照度 ( W/㎡ )</span>
 						</div>
 						<div class="mt5">
 							<div ref="radio2" class="ve-ring" style="height: 340px"></div>
@@ -86,8 +86,8 @@ import { useRouter } from "vue-router";
 const formRef = ref()
 const wind = ref()
 const pressureLine = ref()
-const radio=ref()
-const radio2=ref()
+const radio = ref()
+const radio2 = ref()
 
 
 const router = useRouter();
@@ -221,7 +221,7 @@ const showWind = () => {
 			left: '10',
 			right: '10',
 			bottom: '3%',
-			top: '20',
+			top: 20,
 			containLabel: true
 		},
 		// X轴
@@ -279,7 +279,7 @@ const showWind = () => {
 			smooth: true, //这句就是让曲线变平滑的
 			// symbol: "image://" + require("../../../assets/img/weather/wind.png"),
 			symbol: 'path://M4.866,0,0,15.193l4.866-4.449L9.738,15.2Z',
-			symbolSize: 12,
+			symbolSize: 11,
 			//折线样式
 			lineStyle: {
 				color: '#a5cfff',
@@ -293,18 +293,11 @@ const showWind = () => {
 			// 		distance: 15
 			// 	}
 			// },
-
 			itemStyle: {
 				normal: {
 
 				},
-
-			}
-			// symbol样式
-			// itemStyle: {
-			//     borderWidth: 18,
-
-			// }
+			},
 		}]
 	};
 
@@ -377,21 +370,22 @@ const showPressureLine = () => {
 		// 数据
 		series: [
 			{
+				data: data3.value,
+
 				name: "气压",
 				type: "line",
 				smooth: true,
-				data: data3.value,
 				lineStyle: {
 					color: '#157aea',
 					width: 1,
 				},
 				itemStyle: {
-				normal: {
-					color:'#157aea'
+					normal: {
+						color: '#157aea'
 
-				},
+					},
 
-			}
+				}
 			},
 
 		]
@@ -455,12 +449,12 @@ const showRadio = () => {
 					width: 1,
 				},
 				itemStyle: {
-				normal: {
-					color:'#157aea'
+					normal: {
+						color: '#157aea'
 
-				},
+					},
 
-			}
+				}
 			},
 
 		]
@@ -524,12 +518,12 @@ const showRadio2 = () => {
 					width: 1,
 				},
 				itemStyle: {
-				normal: {
-					color:'#157aea'
+					normal: {
+						color: '#157aea'
 
-				},
+					},
 
-			}
+				}
 			},
 
 		]

src/views/analysis/lightningArea/index.vue

@@ -0,0 +1,232 @@
+<template>
+	<div class="table-box">
+		<div class="card table-search" style="overflow: hidden;">
+			<el-form ref="formRef" :model="searchParam" :inline="true" label-width="auto">
+				<el-form-item label="自动站：" prop="base">
+					<el-select v-model="searchParam.base" placeholder="请选择" style="width: 200px">
+						<el-option v-for="item in baseOptions" :key="item.value" :label="item.label"
+							:value="item.value" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="观测时间：" prop="base" >
+					<el-date-picker v-model="searchParam.date" type="daterange" range-separator="至"
+						start-placeholder="开始时间" end-placeholder="结束时间"  style="width: 300px" />
+				</el-form-item>
+				<el-form-item>
+					<div>
+						<el-button plain>查询</el-button>
+						<el-button plain @click="resetForm(formRef)">重置</el-button>
+					</div>
+				</el-form-item>
+			</el-form>
+		</div>
+		<div class="main_list">
+			<el-row :gutter="15">
+				<el-col :span="24">
+					<div class="chart_item">
+						<div style="font-weight: bold;" class="item_title">
+							<span>雷电区域分析</span>
+						</div>
+						<div class="mt5">
+							<div ref="data" class="data_box"></div>
+						</div>
+					</div>
+				</el-col>
+			</el-row>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="dataSynthesis">
+import * as echarts from 'echarts';
+
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
+
+
+const formRef = ref()
+const data = ref()
+
+
+const router = useRouter();
+const searchParam = reactive({
+	base: undefined,
+	date: ''
+
+})
+const baseOptions = ref([{
+	value: 0,
+	label: 'M1986',
+},
+{
+	value: 1,
+	label: 'M1987',
+}])
+
+// resetForm
+const resetForm = (formEl) => {
+	if (!formEl) return;
+	formEl.resetFields();
+};
+
+const showData = () => {
+
+	let mychart = echarts.init(data.value);
+	let option = {
+
+
+  radar: {
+    shape: 'circle',
+	// radius: 320, // 大小
+    
+    
+    name: { // (圆外的标签)雷达图每个指示器名称的配置项。
+            formatter: '{value}',
+            textStyle: {
+                fontSize: 15,
+                color: '#000'
+            }
+        },
+        nameGap: 5,
+        // 指示器名称和指示器轴的距离。[ default: 15 ]
+        splitNumber: 5,
+        splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
+            lineStyle: {
+                color: '#bbbbbb',
+                // 分隔线颜色
+                width: 1,
+                // 分隔线线宽
+            }
+        },
+        splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
+            show: true,
+            areaStyle: { // 分隔区域的样式设置。
+                color: ['#fff', '#fff'],
+                // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
+            }
+        },
+    indicator: [
+      { name: '360°', max: 200,axisLabel: { show: true,formatter:'{value}km',color:'#000',showMinLabel: false, }, },
+      { name: '',max:200},
+      { name: '315°',  },
+      { name: '', },
+      { name: '270°', },
+      { name: '',  },
+      { name: '225°', },
+      { name: '',  },
+      { name: '180°', },
+      { name: '',  },
+      { name: '135°',  },
+      { name: '',  },
+      { name: '90°',  },
+      { name: '',  },
+      { name: '45°',  },
+      { name: '',  },
+    ]
+  },
+  series: [
+    {
+      name: 'Budget vs spending',
+      type: 'radar',
+      
+      data: [
+        {
+          value: [20],
+          name: 'Allocated Budget',
+           itemStyle: { // 单个拐点标志的样式设置。
+                normal: {
+                    // color:'#d1d6dd'
+                }
+            },
+        },
+        
+      ]
+    }
+  ]
+};
+	mychart.setOption(option)
+	window.addEventListener("resize", function () {
+		mychart.resize();
+	});
+}
+onMounted(() => {
+	showData()
+
+
+})
+
+</script>
+<style scoped lang="scss">
+.el-row .el-col {
+	// margin-bottom: 15px;
+}
+
+
+.main_list {
+	background: transparent !important;
+	box-shadow: none !important;
+	padding: 0 !important;
+	height: calc(100vh - 150px);
+	margin-bottom: 10px;
+	overflow-y: scroll;
+	overflow-x: hidden;
+
+
+	.chart_item {
+		border-radius: 10px;
+		padding: 10px;
+		background-color: #fff;
+		// height: 100%;
+		// margin-bottom: 15px;
+
+
+		.item_title {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		.FTP_box {
+			padding: 0 50px;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.FTP_item {
+				flex: 1;
+				flex-shrink: 0;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+
+				img {
+					width: 56px;
+					margin-bottom: 20px;
+				}
+			}
+
+		}
+	}
+
+	.info_box {
+		.info_title {
+			color: #999999;
+			font-size: 16px;
+		}
+
+		.info_content {
+			height: 40px;
+			font-weight: bold;
+			color: #000;
+			font-size: 26px;
+		}
+	}
+
+}
+
+.data_box {
+	height: calc(100vh - 215px);
+	// height: 100%;
+}
+</style>

src/views/analysis/rainfall/index.vue

@@ -0,0 +1,209 @@
+<template>
+	<div class="table-box">
+		<div class="card table-search" style="overflow: hidden;">
+			<el-form ref="formRef" :model="searchParam" :inline="true" label-width="auto">
+				<el-form-item label="自动站：" prop="base">
+					<el-select v-model="searchParam.base" placeholder="请选择" style="width: 200px">
+						<el-option v-for="item in baseOptions" :key="item.value" :label="item.label"
+							:value="item.value" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="自动站：" prop="base">
+					<el-switch v-model="searchParam.switch" class="ml-2" inline-prompt active-text="日"
+						inactive-text="小时" />
+				</el-form-item>
+				<el-form-item label="观测时间：" prop="base">
+					<el-date-picker v-model="searchParam.date" type="daterange" range-separator="至"
+						start-placeholder="开始时间" end-placeholder="结束时间" style="width: 300px" />
+				</el-form-item>
+				<el-form-item>
+					<div>
+						<el-button plain>查询</el-button>
+						<el-button plain @click="resetForm(formRef)">重置</el-button>
+					</div>
+				</el-form-item>
+			</el-form>
+		</div>
+		<div class="main_list">
+			<el-row :gutter="15">
+				<el-col :span="24">
+					<div class="chart_item">
+						<div style="font-weight: bold;" class="item_title">
+							<span v-if="searchParam.switch">日降水量（mm）</span>
+							<span v-else>小时累计降水量 (称重)(mm)</span>
+						</div>
+						<div class="mt5">
+							<div ref="data" class="data_box"></div>
+						</div>
+					</div>
+				</el-col>
+			</el-row>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="dataSynthesis">
+import * as echarts from 'echarts';
+
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
+
+
+const formRef = ref()
+const data = ref()
+
+
+const router = useRouter();
+const searchParam = reactive({
+	base: undefined,
+	date: '',
+	switch: true,
+
+
+})
+const baseOptions = ref([{
+	value: 0,
+	label: 'M1986',
+},
+{
+	value: 1,
+	label: 'M1987',
+}])
+
+// resetForm
+const resetForm = (formEl) => {
+	if (!formEl) return;
+	formEl.resetFields();
+};
+
+const showData = () => {
+	let mychart = echarts.init(data.value);
+	let option = {
+		tooltip: {
+			trigger: 'axis',
+			axisPointer: {
+				type: 'shadow'
+			}
+		},
+		grid: {
+			left: '20',
+			right: '20',
+			bottom: '20',
+			// top: '20',
+			containLabel: true
+		},
+
+		xAxis: [
+			{
+				type: 'category',
+				data: ['06/11 16:00', '06/11 20:00', '06/12 00:00', '06/12 04:00', '06/12 08:00', '06/12 12:00', '06/12 16:00', '06/12 20:00', '06/13 00:00', '06/13 04:00', '06/13 08:00', '06/13 12:00'],
+				axisTick: {
+					alignWithLabel: true
+				},
+				axisLabel: {
+					interval: 1,
+
+				},
+			}
+		],
+		yAxis: [
+			{
+				type: 'value'
+			}
+		],
+		series: [
+			{
+				name: '降水量',
+				type: 'bar',
+				barWidth: '50%',
+				color: '#88c1ff',
+				data: [2, 3, 5, 3, 1, 0, 5, 2, 3, 4.5, 3.6, 2.8]
+			}
+		]
+	};
+	mychart.setOption(option)
+	window.addEventListener("resize", function () {
+		mychart.resize();
+	});
+}
+onMounted(() => {
+	showData()
+
+
+})
+
+</script>
+<style scoped lang="scss">
+.el-row .el-col {
+	// margin-bottom: 15px;
+}
+
+
+.main_list {
+	background: transparent !important;
+	box-shadow: none !important;
+	padding: 0 !important;
+	height: calc(100vh - 150px);
+	margin-bottom: 10px;
+	overflow-y: scroll;
+	overflow-x: hidden;
+
+
+	.chart_item {
+		border-radius: 10px;
+		padding: 10px;
+		background-color: #fff;
+		// height: 100%;
+		// margin-bottom: 15px;
+
+
+		.item_title {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		.FTP_box {
+			padding: 0 50px;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.FTP_item {
+				flex: 1;
+				flex-shrink: 0;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+
+				img {
+					width: 56px;
+					margin-bottom: 20px;
+				}
+			}
+
+		}
+	}
+
+	.info_box {
+		.info_title {
+			color: #999999;
+			font-size: 16px;
+		}
+
+		.info_content {
+			height: 40px;
+			font-weight: bold;
+			color: #000;
+			font-size: 26px;
+		}
+	}
+
+}
+
+.data_box {
+	height: calc(100vh - 215px);
+	// height: 100%;
+}
+</style>

src/views/analysis/windSpeed/index.vue

@@ -0,0 +1,235 @@
+<template>
+	<div class="table-box">
+		<div class="card table-search" style="overflow: hidden;">
+			<el-form ref="formRef" :model="searchParam" :inline="true" label-width="auto">
+				<el-form-item label="自动站：" prop="base">
+					<el-select v-model="searchParam.base" placeholder="请选择" style="width: 200px">
+						<el-option v-for="item in baseOptions" :key="item.value" :label="item.label"
+							:value="item.value" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="观测时间：" prop="base">
+					<el-date-picker v-model="searchParam.date" type="daterange" range-separator="至"
+						start-placeholder="开始时间" end-placeholder="结束时间" style="width: 300px" />
+				</el-form-item>
+				<el-form-item>
+					<div>
+						<el-button plain>查询</el-button>
+						<el-button plain @click="resetForm(formRef)">重置</el-button>
+					</div>
+				</el-form-item>
+			</el-form>
+		</div>
+		<div class="main_list">
+			<el-row :gutter="15">
+				<el-col :span="24">
+					<div class="chart_item">
+						<div style="font-weight: bold;" class="item_title">
+							<span>风向风速玫瑰图</span>
+						</div>
+						<div class="mt5">
+							<div ref="data" class="data_box"></div>
+						</div>
+					</div>
+				</el-col>
+			</el-row>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts" name="dataSynthesis">
+import * as echarts from 'echarts';
+
+import { ref, reactive, onMounted } from "vue";
+import { useRouter } from "vue-router";
+
+
+const formRef = ref()
+const data = ref()
+
+
+const router = useRouter();
+const searchParam = reactive({
+	base: undefined,
+	date: ''
+
+})
+const baseOptions = ref([{
+	value: 0,
+	label: 'M1986',
+},
+{
+	value: 1,
+	label: 'M1987',
+}])
+
+// resetForm
+const resetForm = (formEl) => {
+	if (!formEl) return;
+	formEl.resetFields();
+};
+
+const showData = () => {
+
+	let mychart = echarts.init(data.value);
+	let option = {
+		
+		legend: {
+			// data: ['Allocated Budget', 'Actual Spending']
+		},
+		radar: {
+			shape: 'circle',
+			name: { // (圆外的标签)雷达图每个指示器名称的配置项。
+				formatter: '{value}',
+				textStyle: {
+					fontSize: 15,
+					color: '#000'
+				}
+			},
+			nameGap: 5,
+			// 指示器名称和指示器轴的距离。[ default: 15 ]
+			splitNumber: 7,
+			splitLine: { // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
+				lineStyle: {
+					color: '#bbbbbb',
+					// 分隔线颜色
+					width: 1,
+					// 分隔线线宽
+				}
+			},
+			splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
+				show: true,
+				areaStyle: { // 分隔区域的样式设置。
+					color: ['#fff', '#fff'],
+					// 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
+				}
+			},
+			indicator: [
+				{ name: 'N', max: 21, axisLabel: { show: true, color: '#000' }, },
+				{ name: 'NNW', max: 21 },
+				{ name: 'NW°', max: 21 },
+				{ name: 'WNW', max: 21 },
+				{ name: 'W°', max: 21 },
+				{ name: 'WSW', max: 21 },
+				{ name: 'WS°', max: 21 },
+				{ name: 'SSW', max: 21 },
+				{ name: 'S', max: 21 },
+				{ name: 'SSE', max: 21 },
+				{ name: 'SE', max: 21 },
+				{ name: 'ESE', max: 21 },
+				{ name: 'E', max: 21 },
+				{ name: 'ENE', max: 21 },
+				{ name: 'NE', max: 21 },
+				{ name: 'NNE', max: 21 },
+			]
+		},
+		series: [
+			{
+				name: 'Budget vs spending',
+				type: 'radar',
+				symbolSize: 0,//拐点大小
+				data: [
+					{
+						value: [0, 12, 12, 12, 0, 0, 0, 12, 15, 15, 9, 0, 0, 0, 15, 8],
+						name: '风向',
+						itemStyle: { // 单个拐点标志的样式设置。
+							normal: {
+
+								// color:'#d1d6dd'
+							}
+						},
+					},
+					{
+						value: [0, 4, 16, 9, 0, 0, 0, 15, 13, 10, 12, 0, 0, 0, 5, 11],
+						name: '风速 (0.1m/s)'
+					}
+				]
+			}
+		]
+	};
+	mychart.setOption(option)
+	window.addEventListener("resize", function () {
+		mychart.resize();
+	});
+}
+onMounted(() => {
+	showData()
+
+
+})
+
+</script>
+<style scoped lang="scss">
+.el-row .el-col {
+	// margin-bottom: 15px;
+}
+
+
+.main_list {
+	background: transparent !important;
+	box-shadow: none !important;
+	padding: 0 !important;
+	height: calc(100vh - 150px);
+	margin-bottom: 10px;
+	overflow-y: scroll;
+	overflow-x: hidden;
+
+
+	.chart_item {
+		border-radius: 10px;
+		padding: 10px;
+		background-color: #fff;
+		// height: 100%;
+		// margin-bottom: 15px;
+
+
+		.item_title {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		.FTP_box {
+			padding: 0 50px;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.FTP_item {
+				flex: 1;
+				flex-shrink: 0;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+
+				img {
+					width: 56px;
+					margin-bottom: 20px;
+				}
+			}
+
+		}
+	}
+
+	.info_box {
+		.info_title {
+			color: #999999;
+			font-size: 16px;
+		}
+
+		.info_content {
+			height: 40px;
+			font-weight: bold;
+			color: #000;
+			font-size: 26px;
+		}
+	}
+
+}
+
+.data_box {
+	height: calc(100vh - 215px);
+	// height: 100%;
+}
+</style>