<template>
	<div class="table-box">
		<div class="card mb10">
			<div class="queryInfo">
				<div style="display: flex;align-items: center;" class="top_item">
					<span style="flex-shrink: 0;">自动站：</span>
					<el-select v-model="queryInfo" clearable placeholder="设备系统" style="width: 180px;">
						<el-option label="M1986" :value="0" />
						<el-option label="M1987" :value="1" />
					</el-select>
				</div>
				<div class="top_item">站名：M1986</div>
				<div class="top_item">站址：未名路29号</div>
				<div class="top_item">经度：121°11′11″E</div>
				<div class="top_item">纬度：36°25′24″N</div>
				<div class="top_item">观测时间：2023-06-12 15:00</div>
			</div>
			<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">
				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
					<div class="chart_item">
						<div style="font-weight: bold;">天气现象</div>
						<div class="mt15">
							<div style="height: 200px;">
								<div
									style="text-align: center;margin-bottom: 40px;padding-top: 10px;font-weight: bold;color: #000;">
									无明显天气现象</div>
								<div style="font-weight: bold;">危险天气</div>
								<div style="text-align: center;margin-top: 25px;color: red;font-weight: bold;">无</div>

							</div>
						</div>
					</div>
				</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 class="mt15 box1">
							<div ref="windSpeed" class="ve-ring" style="height: 200px"></div>
							<div class="icon icon1">270 <span>°</span></div>
							<div class="icon icon2">2.8<span>m/s</span></div>
						</div>
					</div>
				</el-col>
				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
					<div class="chart_item">

						<div style="font-weight: bold;">温度 ( ℃ )</div>
						<div class="mt15">
							<div ref="pie" class="ve-ring" style="height: 200px"></div>
						</div>

					</div>

				</el-col>
				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
					<div class="chart_item">

						<div style="font-weight: bold;">相对湿度 ( % )</div>
						<div class="mt15">
							<div ref="humidity" class="ve-ring" style="height: 200px"></div>
						</div>

					</div>

				</el-col>


				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
					<div class="chart_item">

						<div style="font-weight: bold;">本站气压 ( hPa )</div>
						<div class="mt15">
							<div ref="pressure" class="ve-ring" style="height: 200px"></div>
						</div>

					</div>

				</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 class="mt15">
							<div style="height: 200px">
								<div class="gradient-container">
									<div class="item">
										<div class="gradient-box" :style="gradientStyle">
											<span style="right: -20px;display: flex;align-items: center"
												:style="arrowStyle"><el-icon style="color: #007aff;">
													<CaretLeft />
												</el-icon><span style="font-size: 26px;">{{
													currentValue }}</span></span>
											<span style="position: absolute;top: 0;left: -25px;">40</span>
											<span style="position: absolute;bottom: 0;left: -15px;">0</span>
										</div>
										<!-- <div style="text-align: center;">小时雨量</div> -->
									</div>
									<div class="item">
										<div class="gradient-box" :style="minStyle">
											<span style="right: -20px;display: flex;align-items: center"
												:style="minarrowStyle">
												<el-icon style="color: #007aff;">
													<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>
										</div>
										<!-- <div style="text-align: center;">小时雨量</div> -->
									</div>
								</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>

			<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="mt15 ">
							<div class="info_content">
								0.2
							</div>
						</div>
					</div>
				</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="mt15 ">
							<div class="info_content">
								35
							</div>
						</div>
					</div>
				</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="mt15 ">
							<div class="info_content">
								23.5
							</div>
						</div>
					</div>
				</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="mt15 ">
							<div class="info_content">
								86
							</div>
						</div>
					</div>
				</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="mt15 ">
							<div class="info_content">
								12.5
							</div>
						</div>
					</div>
				</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="mt15 ">
							<div class="info_content">
								26.8
							</div>
						</div>
					</div>
				</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="mt15 ">
							<div class="info_content">
								1800
							</div>
						</div>
					</div>
				</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="mt15 ">
							<div class="info_content" style="color:red ;">
								10.9
							</div>
						</div>
					</div>
				</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="mt15 ">
							<div class="info_content">
								5
							</div>
						</div>
					</div>
				</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="mt15 ">
							<div class="info_content">
								2
							</div>
						</div>
					</div>
				</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="mt15 ">
							<div class="info_content">
								1
							</div>
						</div>
					</div>
				</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="mt15 ">
							<div class="info_content">
								29
							</div>
						</div>
					</div>
				</el-col>
			</el-row>

			<el-row :gutter="15">
				<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>
							<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">
								</el-option>
							</el-select>
						</div>
						<div class="mt15">
							<div ref="wind" class="ve-ring" style="height: 200px"></div>
						</div>
					</div>
				</el-col>
				<el-col :xs="12" :sm="8" :md="8" :lg="8">
					<div class="chart_item">
						<div style="font-weight: bold;" class="item_title">
							<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">
								</el-option>
							</el-select>
						</div>
						<div class="mt15">
							<div ref="tempLine" class="ve-ring" style="height: 200px"></div>
						</div>
					</div>
				</el-col>
				<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>
							<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">
								</el-option>
							</el-select>
						</div>
						<div class="mt15">
							<div ref="pressureLine" class="ve-ring" style="height: 200px"></div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="tsx" name="singleData">

import * as echarts from 'echarts';
import { ref, computed, onMounted } from "vue";

const queryInfo = ref(0)

const pressure = ref()
const humidity = ref()
const windSpeed = ref()
const wind = ref()
const pie = ref()
const tempLine = ref()
const pressureLine = ref()

//chart 数据
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小时'
}, {
	value: 2,
	label: '12小时'
}]
const value = ref(1);
const currentValue = ref(20);
const mincurrentValue = ref(2)

const gradientStyle = computed(() => {
	return {
		height: '180px',
		background: 'linear-gradient(to top, #D9FDD5, #CCFB99,#FDFFAC,#FCF4C6,#F7D2A6,#EB9C8B,#E46528,#D32E22,#C71D11,#BC1408,#B41408,#9A0D03)', // 从下到上，从红色到白色  
		width: '40px', // 盒子的宽度  
	};
});

const minStyle = computed(() => {
	return {
		height: '180px',
		background: 'linear-gradient(to top, #D9FDD5, #CCFB99,#FDFFAC,#FCF4C6,#F7D2A6,#EB9C8B,#E46528,#D32E22)', // 从下到上，从红色到白色  
		width: '40px', // 盒子的宽度  
	};
});
const arrowStyle = computed(() => {
	// 计算箭头顶部位置，使其指向盒子内的相应位置  
	// 由于盒子高度是150px，而值域是0-100，因此需要进行缩放  
	const maxTop = '0px'; // 表示100的位置 
	const scaleFactor = 180 / 40; // 缩放因子  
	// const top = `${(180 - (currentValue.value / 40) * 180)}px`; // 从底部开始计算  
	const calculatedTop = `${(180 - (Math.min(currentValue.value, 40) / 40) * 180)}px`;
	const top = currentValue.value > 40 ? maxTop : calculatedTop;
	return {
		top,
		position: 'absolute',
		// right: '10', // 箭头紧贴盒子右侧  
		transform: 'translateY(-50%) translateX(50%)', // 旋转并尝试垂直居中（但这里的-50%是相对于箭头自身的）  
	};
});
const minarrowStyle = computed(() => {
	// 计算箭头顶部位置，使其指向盒子内的相应位置  
	// 由于盒子高度是150px，而值域是0-100，因此需要进行缩放  
	const scaleFactor = 180 / 4; // 缩放因子  
	const top = `${(180 - (mincurrentValue.value / 4) * 180)}px`; // 从底部开始计算  
	return {
		top,
		position: 'absolute',
		// right: '10', // 箭头紧贴盒子右侧  
		transform: 'translateY(-50%) translateX(50%)', // 旋转并尝试垂直居中（但这里的-50%是相对于箭头自身的）  
	};
});

const showPressure = () => {
	let gradientColor = {
		type: 'linear',
		x: 0,
		y: 0,
		x2: 0,
		y2: 1,
		colorStops: [
			{
				offset: 0,
				color: '#760202'
			},
			{
				offset: 0.5,
				color: '#DE3333'
			},
			{
				offset: 1,
				color: 'rgba(236, 111, 105,0.1)'
			}
		]
	};
	let mychart = echarts.init(pressure.value);
	let option = {
		series: [
			{
				type: 'gauge',
				radius: '100%',
				min: 500,
				max: 1100,
				splitNumber: 6,
				axisLine: {
					lineStyle: {
						width: 4,
						color: [
							[0.4, {
								type: "linear",
								colorStops: [
									{ offset: 0, color: "#99A9F9" },
									{ offset: 1, color: "#99A9F9" }
								]

							}],
							[0.55, {
								type: "linear",
								colorStops: [
									{ offset: 0, color: "#99A9F9" },
									{ offset: 1, color: "#3734c8" }
								]

							}],
							[0.8, {
								type: "linear",
								colorStops: [
									{ offset: 0, color: "#3734c8" },
									{ offset: 1, color: "#140AC4" }
								]

							}],

							[1, {
								type: "linear",
								colorStops: [
									{ offset: 0, color: "#140AC4" },
									{ offset: 1, color: "#140AC4" }
								]
							}],

						]

					}
				},
				pointer: {
					width: 3,
					length: '50%',
					offsetCenter: ['0%', '-30%'],
					itemStyle: {
						color: gradientColor
					}
				},
				axisTick: {
					distance: 5,
					splitNumber: 10,
					length: 5,
					lineStyle: {
						color: 'auto',
						width: 1
					}
				},
				splitLine: {
					distance: 0,
					length: 10,
					lineStyle: {
						color: 'auto',

						width: 2
					}
				},
				axisLabel: {
					color: '#666666',
					distance: 8,
					fontSize: 10
				},
				detail: {
					offsetCenter: [0, 0],
					valueAnimation: true,
					formatter: '{value}',
					color: 'black',
					fontSize: 30,
				},
				data: [
					{
						value: 992.3
					}
				]
			}
		]
	};
	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}
const showHumidity = () => {
	let gradientColor = {
		type: 'linear',
		x: 0,
		y: 0,
		x2: 0,
		y2: 1,
		colorStops: [
			{
				offset: 0,
				color: '#760202'
			},
			{
				offset: 0.5,
				color: '#DE3333'
			},
			{
				offset: 1,
				color: 'rgba(236, 111, 105,0.1)'
			}
		]
	};
	let mychart = echarts.init(humidity.value);
	let option = {
		series: [
			{
				type: 'gauge',
				radius: '100%',
				min: 0,
				max: 100,
				axisLine: {
					lineStyle: {
						width: 4,
						color: [
							[0.6, {
								type: "linear",
								colorStops: [
									{ offset: 0, color: "#016FE8" },
									{ offset: 1, color: "#016FE8" }
								]

							}],
							[0.7, {
								type: "linear",
								colorStops: [
									{ offset: 0, color: "#016FE8" },
									{ offset: 1, color: "#4058a4" }
								]

							}],
							[0.8, {
								type: "linear",
								colorStops: [
									{ offset: 0, color: "#4058a4" },
									{ offset: 1, color: "#824161" }
								]

							}],

							[0.90, {
								type: "linear",
								colorStops: [
									{ offset: 0, color: "#824161" },


									{ offset: 1, color: "#aa3339" }
								]
							}],
							[0.98, {
								type: "linear",
								colorStops: [
									{ offset: 0, color: "#aa3339" },


									{ offset: 1, color: "#b03133" }
								]
							}],
							[1, {
								type: "linear",
								colorStops: [
									{ offset: 0, color: "#C92A1D" },
									{ offset: 1, color: "#C92A1D" }
								]
							}]
						]

					}
				},
				pointer: {
					width: 3,
					length: '50%',
					offsetCenter: ['0%', '-30%'],
					itemStyle: {
						color: gradientColor
					}
				},
				axisTick: {
					distance: 5,
					splitNumber: 10,
					length: 5,
					lineStyle: {
						color: 'auto',
						width: 1
					}
				},
				splitLine: {
					distance: 0,
					length: 10,
					lineStyle: {
						color: 'auto',

						width: 2
					}
				},
				axisLabel: {
					color: '#666666',
					distance: 8,
					fontSize: 10
				},
				detail: {
					offsetCenter: [0, 0],
					valueAnimation: true,
					formatter: '{value}',
					color: 'black',
					fontSize: 30,
				},
				data: [
					{
						value: 47
					}
				]
			}
		]
	};
	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}

const showWindSpeed = () => {
	let gradientColor = {
		type: 'linear',
		x: 0,
		y: 0,
		x2: 0,
		y2: 1,
		colorStops: [
			{
				offset: 0,
				color: '#760202'
			},
			{
				offset: 0.5,
				color: '#DE3333'
			},
			{
				offset: 1,
				color: 'rgba(236, 111, 105,0.1)'
			}
		]
	};
	let mychart = echarts.init(windSpeed.value);
	let option = {
		series: [
			{
				type: 'gauge',
				radius: '100%',
				// detail: {
				// 	show: false
				// },
				// detail: {
				//     offsetCenter: [0, 0],
				//     valueAnimation: true,
				//     formatter: function(params) {
				//         return params.name + 'm/s';
				//     },
				//     color: 'black',
				//     fontSize: 30,
				// },
				title: {
					show: true,
					offsetCenter: [0, '-0%'], // x, y，单位px
					textStyle: {
						color: 'black',
						fontSize: 30
					}
				},
				// detail: {
				//     formatter: function (params) {
				//         // 返回数据项的 name 属性  
				//         return params.name;
				//     }
				// },
				startAngle: 90,
				splitNumber: 8,
				endAngle: 450,
				min: 0,
				max: 360,
				axisLine: {
					lineStyle: {
						width: 4,
						color: [
							[1, {
								type: "linear",
								colorStops: [
									{ offset: 0, color: "#016fe8" },
									{ offset: 1, color: "#016fe8" }
								]
							}]
						]
					}
				},

				pointer: {
					width: 3,
					length: '50%',
					offsetCenter: ['0%', '-30%'],
					itemStyle: {
						color: gradientColor
					}
				},
				axisTick: {
					distance: 5,
					splitNumber: 10,
					length: 5,
					lineStyle: {
						color: 'auto',
						width: 1
					}
				},
				splitLine: {
					distance: 3,
					length: 10,
					lineStyle: {
						color: 'auto',
						width: 2
					}
				},
				axisLabel: {
					fontSize: 10,
					distance: 10,
					formatter: function (value) {
						if (value === 0) {
							return '北';
						}
						else if (value === 45) {
							return '东北';
						}
						else if (value === 90) {
							return '东';
						}
						else if (value === 135) {
							return '东南';
						}
						else if (value === 180) {
							return '南';
						}
						else if (value === 225) {
							return '西南';
						}
						else if (value === 270) {
							return '西';
						}
						else if (value === 315) {
							return '西北';
						}
					}
				},
				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
				// 	}
				// }]
			}
		]
	};
	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}

const showWind = () => {
	// 数据格式
	let winArr = [{
		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: 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: '西风'
	},]
	let mychart = echarts.init(wind.value);
	let option = {

		grid: {
			left: '10',
			right: '10',
			bottom: '3%',
			top: 20,
			containLabel: true
		},
		// X轴
		xAxis: {
			type: 'category',
			splitLine: {
				show: false
			},
			boundaryGap: true,
			axisTick: {
				alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
			},
			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: 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: {
			min: 0,
			max: 10,
			type: 'value'
		},
		// 鼠标悬浮提示
		tooltip: {
			trigger: "axis",
			formatter(params) {
				let tip =
					"时间:" +
					params[0].axisValue +
					"<br/>风速:" +
					(params[0].value ? params[0].value : "--") +
					"m/s<br/>风向:" +
					(params[0].data ? params[0].data.symbolRotateStr : "--")
				return tip;
			},
		},
		// 数据
		series: [{
			data: winArr,
			type: 'line',
			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: 11,
			//折线样式
			lineStyle: {
				color: '#a5cfff',
				width: 1,
			},
			// label: {
			// 	normal: {
			// 		formatter: '{c}',
			// 		show: false,
			// 		position: 'top',
			// 		distance: 15
			// 	}
			// },
			itemStyle: {
				normal: {

				},
			},
		}]
	};

	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}

const showTemp = () => {
	let gradientColor = {
		type: 'linear',
		x: 0,
		y: 0,
		x2: 0,
		y2: 1,
		colorStops: [
			{
				offset: 0,
				color: '#760202'
			},
			{
				offset: 0.5,
				color: '#DE3333'
			},
			{
				offset: 1,
				color: 'rgba(236, 111, 105,0.1)'
			}
		]
	};
	let mychart = echarts.init(pie.value);
	let option = {
		series: [
			{
				type: 'gauge',
				radius: '100%',
				min: -50,
				max: 50,
				axisLine: {
					lineStyle: {
						width: 4,
						color: [
							[0.5, {
								type: "linear",
								colorStops: [
									{ offset: 0, color: "#0000FF" },
									{ offset: 1, color: "#1DA0FF" }
								]

							}],
							[0.7, {
								type: "linear",
								colorStops: [
									{ offset: 0, color: "#1DA0FF" },
									{ offset: 1, color: "#00B461" }
								]

							}],
							[0.8, {
								type: "linear",
								colorStops: [
									{ offset: 0, color: "#00B461" },
									{ offset: 1, color: "#E6DE00" }
								]

							}],
							[0.99, {
								type: "linear",
								colorStops: [
									{ offset: 1, color: "#E6DE00" },
									{ offset: 0, color: "#E80000" }
								]
							}],
							[1, {
								type: "linear",
								colorStops: [
									{ offset: 0, color: "#E80000" },
									{ offset: 1, color: "#FF0000" }
								]
							}]
						]
					}
				},
				pointer: {
					width: 3,
					length: '50%',
					offsetCenter: ['0%', '-30%'],
					itemStyle: {
						color: gradientColor
					}
				},
				axisTick: {
					distance: 5,
					splitNumber: 10,
					length: 5,
					lineStyle: {
						color: 'auto',
						width: 1
					}
				},
				splitLine: {
					distance: 0,
					length: 10,
					lineStyle: {
						color: 'auto',

						width: 2
					}
				},
				axisLabel: {
					color: '#666666',
					distance: 8,
					fontSize: 10
				},
				detail: {
					offsetCenter: [0, 0],
					valueAnimation: true,
					formatter: '{value}',
					color: 'black',
					fontSize: 30,
				},
				data: [
					{
						value: -23.5
					}
				]
			}
		]
	};
	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}

const showTempLine = () => {
	// 获取最大值方法
	function calMax(arr) {
		let max = Math.max.apply(null, arr); // 获取最大值方法
		let maxint = Math.ceil(max / 5); // 向上以5的倍数取整
		let maxval = max >= 100 ? maxint * 5 : maxint * 5 + 10; // 最终设置的最大值
		return maxval; // 输出最大值
	}
	// 获取最小值方法
	function calMin(arr) {
		let min = Math.min.apply(null, arr); // 获取最小值方法
		let minint = Math.floor(min / 1); // 向下以1的倍数取整
		let minval = minint * 1 - 5; // 最终设置的最小值
		return minval; // 输出最小值
	}
	// 调用方法，获取数据的最大值&最小值
	let maxData1 = calMax(data1.value);
	let maxData2 = calMax(data2.value);
	let minData1 = calMin(data1.value);
	let minData2 = calMin(data2.value);

	let mychart = echarts.init(tempLine.value);
	let option = {
		// 直角坐标系内绘图网格
		// grid: {
		//     show: true,
		//     x: 120,
		//     y: 50,
		//     x2: 120,
		//     y2: 50
		// },

		grid: {
			left: '10',
			right: '10',
			bottom: '3%',
			top: 25,
			containLabel: true
		},
		legend: {
			data: ['气温', '相对湿度'],
			// left: 10
			top: 0

		},
		// X轴
		xAxis: {
			type: 'category',
			splitLine: {
				show: false
			},
			boundaryGap: false,
			axisTick: {
				alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
			},
			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: 4,
				formatter: function (value) {
					// if (value.index % 4 === 0) {
					// 	return value.replace(/ /g, '\n');
					// } else {
					// 	return '';
					// }
					return value.replace(/ /g, '\n');
				},

			},
		},
		yAxis: [
			{
				type: "value",
				min: minData1,
				max: maxData1,
				splitNumber: 5, //设置坐标轴的分割段数
				interval: (maxData1 - minData1) / 5, // 标轴分割间隔
				axisLabel: {
					formatter: function (v) {
						return v.toFixed(1); //0表示小数为0位，1表示1位小数，2表示2位小数
					},
				}
			},
			{
				type: "value",
				min: minData2,
				max: maxData2,
				splitNumber: 5,
				interval: (maxData2 - minData2) / 5,
				axisLabel: {
					formatter: function (v) {
						return v.toFixed(2); //0表示小数为0位，1表示1位小数，2表示2位小数
					}
				}
			}
		],

		// 鼠标悬浮提示
		tooltip: {
			trigger: "axis",
			// formatter(params) {
			//     let tip =
			//         "时间:" +
			//         params[0].axisValue +
			//         "<br/>风速:" +
			//         (params[0].value ? params[0].value : "--") +
			//         "m/s<br/>风向:" +
			//         (params[0].data ? params[0].data.symbolRotateStr : "--")
			//     return tip;
			// },
		},
		// 数据
		series: [
			{
				name: "气温",
				type: "line",
				color: ["#fc8452"],

				smooth: true,
				data: data1.value
			},
			{
				name: "相对湿度",
				type: "line",
				color: ["#5470c6"],

				smooth: true,
				yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
				data: data2.value
			}
		]
	};

	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}

const showPressureLine = () => {
	// 获取最大值方法
	function calMax(arr) {
		let max = Math.max.apply(null, arr); // 获取最大值方法
		let maxint = Math.ceil(max / 5); // 向上以5的倍数取整
		let maxval = maxint * 5 + 5; // 最终设置的最大值
		return maxval; // 输出最大值
	}
	// 获取最小值方法
	function calMin(arr) {
		let min = Math.min.apply(null, arr); // 获取最小值方法
		let minint = Math.floor(min / 1); // 向下以1的倍数取整
		let minval = minint * 1 - 5; // 最终设置的最小值
		return minval; // 输出最小值
	}
	// 调用方法，获取数据的最大值&最小值
	let maxData1 = calMax(data3.value);
	let minData1 = calMin(data3.value);


	let mychart = echarts.init(pressureLine.value);
	let option = {

		grid: {
			left: '10',
			right: '10',
			bottom: '3%',
			top: 10,
			containLabel: true
		},

		// X轴
		xAxis: {
			type: 'category',
			splitLine: {
				show: false
			},
			boundaryGap: false,
			axisTick: {
				alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
			},
			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: 4,
				formatter: function (value) {
					// if (value.index % 4 === 0) {
					// 	return value.replace(/ /g, '\n');
					// } else {
					// 	return '';
					// }
					return value.replace(/ /g, '\n');
				},

			},
		},
		yAxis: {
			min: minData1,
			max: maxData1,
			type: 'value'
		},

		// 鼠标悬浮提示
		tooltip: {
			trigger: "axis",
			// formatter(params) {
			//     let tip =
			//         "时间:" +
			//         params[0].axisValue +
			//         "<br/>风速:" +
			//         (params[0].value ? params[0].value : "--") +
			//         "m/s<br/>风向:" +
			//         (params[0].data ? params[0].data.symbolRotateStr : "--")
			//     return tip;
			// },
		},
		// 数据
		series: [
			{
				name: "气压",
				type: "line",
				smooth: true,
				data: data3.value,
			},

		]
	};

	mychart.setOption(option)
	window.addEventListener("resize", function () {
		mychart.resize();
	});
}


onMounted(() => {
	showTemp()
	showWind()
	showWindSpeed()
	showHumidity()
	showPressure()
	showTempLine()
	showPressureLine()
})
</script>
<style lang="scss" scoped>
.card {
	padding: 15px;
	display: flex;
	justify-content: space-between;
}

.queryInfo {
	display: flex;
	align-items: center;
	font-size: 14px;

	.top_item {
		margin-right: 25px;

	}
}

.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;
		}
	}

	.info_box {
		.info_title {
			color: #999999;
			font-size: 16px;
		}

		.info_content {
			height: 40px;
			font-weight: bold;
			color: #000;
			font-size: 26px;
		}
	}

}

.box1 {
	position: relative;

	.icon {
		color: #000;
		font-weight: bold;
		position: absolute;

		span {

			color: #666;
			font-weight: normal;
		}

	}

	.icon1 {
		bottom: 0;
		left: 0;
	}

	.icon2 {
		bottom: 0;
		right: 0;

		span {
			font-size: 12px;
		}
	}
}

.el-row .el-col {
	margin-bottom: 15px;
}

.gradient-container {
	//   position: relative;  
	display: flex;
	justify-content: space-between;
	height: 200px;
	/* 盒子的高度 */

	.item {
		flex: 1;
		padding-left: 30px;
	}
}

.gradient-box {
	position: relative;
	width: 100%;
	height: 100%;
	align-items: flex-end;
	/* 确保箭头从底部开始 */
}
</style>