SMO/src/views/alarm/singleStationData/index.vue

<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> -->
					<el-select v-model="pageable.as_code" filterable placeholder="请搜索自动站" remote reserve-keyword
						clearable style="width: 200px" @change="changeStation">
						<el-option v-for="item in platformList" :key="item.as_code"
							:label="item.as_code + ' ' + item.as_name" :value="item.as_code" />
						<template #prefix>
							<el-icon class="el-input__icon">
								<search />
							</el-icon>
						</template>
					</el-select>
				</div>
				<div class="top_item">站名：{{ selectPlatform?.as_name }}</div>
				<div class="top_item">站址：{{
					selectPlatform?.as_province + selectPlatform?.as_city + selectPlatform?.as_area +
					selectPlatform?.as_address
				}}</div>
				<div class="top_item">经度：{{ selectPlatform?.as_lon }}</div>
				<div class="top_item">纬度：{{ selectPlatform?.as_lat }}</div>
				<div class="top_item">观测时间：{{ dataItemInfo && dataItemInfo.data_time_i ?
					formatDate(dataItemInfo?.data_time_i, 2) : '--' }}
				</div>
			</div>
			<div class="header-button-ri">
				<slot name="toolButton">
					<img class="setting" src="@/assets/images/setting2.png" @click="handleSetting" />
				</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 zhuti" style="overflow: auto;">
						<div style="font-weight: bold;">天气现象</div>
						<div class="mt15">
							<div style="height: 200px;">

								<!-- <div v-if="dataItemInfo && dataItemInfo[601] === '--' && dataItemInfo[602] === '--' && dataItemInfo[603] === '--' && dataItemInfo[604] === '--' && dataItemInfo[605] === '--'" -->

								<div class="wweatherBox" style="padding-top: 10px;"
									v-if="dangerWeather && dangerWeather.length > 0"
									:style="{ marginBottom: dangerWeather && dangerWeather.length <= 2 ? '40px' : '20px' }">
									<div class="weatherItem" v-for="item in dangerWeather" :key="item.data_id">{{
										getYenSymbolLaterCharacters(item.remark) }}
									</div>
									<!-- <div class="weatherItem" v-if="dataItemInfo && dataItemInfo[602] != '--'">{{
										getYenSymbolLaterCharacters(dataItemInfo.data_list.find(item => item.data_id ==
											602)?.remark) }}
									</div>
									<div class="weatherItem" v-if="dataItemInfo && dataItemInfo[603] != '--'">{{
										getYenSymbolLaterCharacters(dataItemInfo.data_list.find(item => item.data_id ==
											603)?.remark) }}
									</div>
									<div class="weatherItem" v-if="dataItemInfo && dataItemInfo[604] != '--'">{{
										getYenSymbolLaterCharacters(dataItemInfo.data_list.find(item => item.data_id ==
											604)?.remark) }}
									</div>
									<div class="weatherItem" v-if="dataItemInfo && dataItemInfo[605] != '--'">{{
										getYenSymbolLaterCharacters(dataItemInfo.data_list.find(item => item.data_id ==
											605)?.remark) }}
									</div> -->

								</div>
								<div v-else
									style="text-align: center;margin-bottom: 40px;padding-top: 10px;font-weight: bold;">
									无明显天气现象</div>

								<div style="font-weight: bold;">危险天气</div>
								<div v-if="!weatherInfoArr || weatherInfoArr.length <= 0"
									style="text-align: center;margin-top: 15px;padding-bottom: 20px;color: red;font-weight: bold;">
									无</div>
								<div v-else v-for="item in weatherInfoArr" :key="item"
									style="text-align: center;margin-top: 15px;padding-bottom: 20px;color: red;font-weight: bold;">
									{{ findLabelByValue(dataTypeList, item.data_type) }}-{{ item.data_value }}</div>

							</div>
						</div>
					</div>
				</el-col>
				<el-col :xs="12" :sm="8" :md="8" :lg="8" :xl="4">
					<div class="chart_item zhuti">
						<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">{{ dataItemInfo && dataItemInfo[9] ? dataItemInfo[9] : '--' }}
								<span>°</span>
							</div>
							<div class="icon icon2">{{ dataItemInfo && dataItemInfo[8] ? dataItemInfo[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 zhuti">

						<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 zhuti">

						<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 zhuti">

						<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 zhuti">
						<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: -30px;display: flex;align-items: center"
												:style="arrowStyle"><el-icon style="color: #007aff;">
													<CaretLeft />
												</el-icon><span style="font-size: 20px;">{{
													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="position: absolute;bottom: 0;left: 20px;">小时雨量</div>
									</div>
									<div class="item">
										<div class="gradient-box" :style="minStyle">
											<span style="right: -30px;display: flex;align-items: center"
												:style="minarrowStyle">
												<el-icon style="color: #007aff;">
													<CaretLeft />
												</el-icon><span style="font-size: 20px;">{{
													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="position: absolute;bottom: 0;left: 20px;">分钟雨量</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"
					v-for="item in selectElement.length > 0 ? selectElement : customizeColumns" :key="item.data_id">
					<div class="chart_item info_box zhuti">
						<div class="info_title">{{ item.data_name }} ( {{ item.data_unit }} )</div>
						<div class="mt15 ">
							<div class="info_content">
								{{ item.data_value ? item.data_value : '--' }}
							</div>
						</div>
					</div>
				</el-col>
				<!-- <el-col :xs="12" :sm="8" :md="8" :lg="4" :xl="4">
					<div class="chart_item info_box zhuti">
						<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 zhuti">
						<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 zhuti">
						<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 zhuti">
						<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 zhuti">
						<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 zhuti">
						<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 zhuti">
						<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 zhuti">
						<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 zhuti">
						<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 zhuti">
						<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 zhuti">
						<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 zhuti">
						<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 zhuti">
						<div style="font-weight: bold;" class="item_title">
							<span>风向 / 风速 ( m/s )</span>
							<el-select v-model="timeValue" @change="changeTime" 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 zhuti">
						<div style="font-weight: bold;" class="item_title">
							<span>气温 ( ℃ ) / 相对湿度 ( % )</span>
							<el-select v-model="timeValue" @change="changeTime" 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 zhuti">
						<div style="font-weight: bold;" class="item_title">
							<span>本站气压 ( hPa )</span>
							<el-select v-model="timeValue" @change="changeTime" 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>
		<!-- 添加或修改岗位对话框 -->
		<el-dialog :title="dialog.title" v-model="dialog.visible" width="1200px" append-to-body>
			<div style="height: 500px;display: flex">
				<el-tabs tab-position="left" class="demo-tabs" style="height: 100%">
					<el-tab-pane label="风">
						<div class="container-tag">
							<template v-for="item in elementList" :key="item.id">
								<div v-if="item.data_type === '风'" :class="item.isSelected ? 'item-tag-active' : 'item-tag'"
									@click="toggleSelection(item)">{{ item.data_name }}</div>
							</template>
						</div>
					</el-tab-pane>
					<el-tab-pane label="温湿度">
						<div class="container-tag">
							<template v-for="item in elementList" :key="item.id">
								<div v-if="item.data_type === '温湿度'" :class="item.isSelected ? 'item-tag-active' : 'item-tag'"
									@click="toggleSelection(item)">{{ item.data_name }}</div>
							</template>
						</div>
					</el-tab-pane>
					<el-tab-pane label="气压">
						<div class="container-tag">
							<template v-for="item in elementList" :key="item.id">
								<div v-if="item.data_type === '气压'" :class="item.isSelected ? 'item-tag-active' : 'item-tag'"
									@click="toggleSelection(item)">{{ item.data_name }}</div>
							</template>
						</div>
					</el-tab-pane>
					<el-tab-pane label="降水">
						<div class="container-tag">
							<template v-for="item in elementList" :key="item.id">
								<div v-if="item.data_type === '降水'" :class="item.isSelected ? 'item-tag-active' : 'item-tag'"
									@click="toggleSelection(item)">{{ item.data_name }}</div>
							</template>
						</div>
					</el-tab-pane>
					<el-tab-pane label="云">
						<div class="container-tag">
							<template v-for="item in elementList" :key="item.id">
								<div v-if="item.data_type === '云'" :class="item.isSelected ? 'item-tag-active' : 'item-tag'"
									@click="toggleSelection(item)">{{ item.data_name }}</div>
							</template>
						</div>
					</el-tab-pane>
					<el-tab-pane label="能见度">
						<div class="container-tag">
							<template v-for="item in elementList" :key="item.id">
								<div v-if="item.data_type === '能见度'" :class="item.isSelected ? 'item-tag-active' : 'item-tag'"
									@click="toggleSelection(item)">{{ item.data_name }}</div>
							</template>
						</div>
					</el-tab-pane>
					<el-tab-pane label="天气现象">
						<div class="container-tag">
							<template v-for="item in elementList" :key="item.id">
								<div v-if="item.data_type === '天气现象'"
									:class="item.isSelected ? 'item-tag-active' : 'item-tag'"
									@click="toggleSelection(item)">{{ item.data_name }}</div>
							</template>
						</div>
					</el-tab-pane>
					<el-tab-pane label="积雪">
						<div class="container-tag">
							<template v-for="item in elementList" :key="item.id">
								<div v-if="item.data_type === '积雪'" :class="item.isSelected ? 'item-tag-active' : 'item-tag'"
									@click="toggleSelection(item)">{{ item.data_name }}</div>
							</template>
						</div>
					</el-tab-pane>
					<el-tab-pane label="地面温度">
						<div class="container-tag">
							<template v-for="item in elementList" :key="item.id">
								<div v-if="item.data_type === '地面温度'"
									:class="item.isSelected ? 'item-tag-active' : 'item-tag'"
									@click="toggleSelection(item)">{{ item.data_name }}</div>
							</template>
						</div>
					</el-tab-pane>
					<el-tab-pane label="大气电场">
						<div class="container-tag">
							<template v-for="item in elementList" :key="item.id">
								<div v-if="item.data_type === '大气电场'"
									:class="item.isSelected ? 'item-tag-active' : 'item-tag'"
									@click="toggleSelection(item)">{{ item.data_name }}</div>
							</template>
						</div>
					</el-tab-pane>
					<el-tab-pane label="闪电">
						<div class="container-tag">
							<template v-for="item in elementList" :key="item.id">
								<div v-if="item.data_type === '闪电'" :class="item.isSelected ? 'item-tag-active' : 'item-tag'"
									@click="toggleSelection(item)">{{ item.data_name }}</div>
							</template>
						</div>
					</el-tab-pane>
					<el-tab-pane label="日照">
						<div class="container-tag">
							<template v-for="item in elementList" :key="item.id">
								<div v-if="item.data_type === '日照'" :class="item.isSelected ? 'item-tag-active' : 'item-tag'"
									@click="toggleSelection(item)">{{ item.data_name }}</div>
							</template>
						</div>
					</el-tab-pane>
					<el-tab-pane label="总辐射">
						<div class="container-tag">
							<template v-for="item in elementList" :key="item.id">
								<div v-if="item.data_type === '总辐射'" :class="item.isSelected ? 'item-tag-active' : 'item-tag'"
									@click="toggleSelection(item)">{{ item.data_name }}</div>
							</template>
						</div>
					</el-tab-pane>
					<el-tab-pane label="日照文">
						<div class="container-tag">
							<template v-for="item in elementList" :key="item.id">
								<div v-if="item.data_type === '日照文'" :class="item.isSelected ? 'item-tag-active' : 'item-tag'"
									@click="toggleSelection(item)">{{ item.data_name }}</div>
							</template>
						</div>
					</el-tab-pane>
					<el-tab-pane label="水文">
						<div class="container-tag">
							<template v-for="item in elementList" :key="item.id">
								<div v-if="item.data_type === '水文'" :class="item.isSelected ? 'item-tag-active' : 'item-tag'"
									@click="toggleSelection(item)">{{ item.data_name }}</div>
							</template>
						</div>
					</el-tab-pane>
				</el-tabs>
				<div class="selected-list-box">
					<div class="disposition-title" style="margin-top: 0px">已选要素</div>
					<div class="selected-list-c">
						<template v-for="(item, index) in copiedCustomizeColumns" :key="item.id">
							<div :class="selectedItemIndex === index ? 'selected-item-tag-active' : 'selected-item-tag'"
								@click="changeSelected(index)">{{ item.data_name }}</div>
						</template>
					</div>
					<div class="button-container">
						<el-button type="primary" plain class="top-left" @click="changeMoveUp">上移</el-button>
						<el-button type="primary" plain class="top-right" @click="changeMoveDown">下移</el-button>
						<el-button type="primary" plain class="bottom-left" @click="changeRemove">移除</el-button>
						<el-button type="primary" plain class="bottom-right" @click="changeCleared">清空</el-button>
					</div>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submitForm">确 定</el-button>
				</div>
			</template>
		</el-dialog>
	</div>

</template>

<script setup lang="tsx" name="singleData">
import * as echarts from 'echarts';
import { ref, onMounted, reactive, watch, onDeactivated, onActivated,computed } from "vue";
import { useGlobalStore } from "@/stores/modules/global";
import { getDataItemList, getPlatformList, getRgDataList, getTacRecordList } from "@/api/modules/allData";
import { Platform } from "@/api/interface";
import { ElLoading } from "element-plus";
import {useUserStore} from "@/stores/modules/user";

/* 全局请求 loading */
const loading = ref()

/**
 * @description 开启 Loading
 * */
const startFullLoading = () => {
	loading.value = ElLoading.service({
		fullscreen: true,
		lock: true,
		text: "Loading",
		background: "rgba(0, 0, 0, 0.7)"
	});
};

/**
 * @description 结束 Loading
 * */
const endFullLoading = () => {
	loading.value.close();
};
const timeValue = ref(1);
const queryInfo = ref(0)
const pageable = ref({
	data_type: true,
	time_order: 1,
	as_code: undefined,
	data_items: [],
	pageNum: 1,
	pageSize: 20,
	total: 0
});

const pressure = ref()
const humidity = ref()
const windSpeed = ref()
const wind = ref()
const pie = ref()
const tempLine = ref()
const pressureLine = ref()
const dialog = reactive<any>({
	visible: false,
	title: ''
});
const globalStore = useGlobalStore();
const isDark = computed(() => globalStore.isDark);

//自定义部分表头
let customizeColumns = ref<any>([
	{
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 2,
		data_type: "风",
		data_item: "ER_FEN_ZHONG_PING_JUN_FENG_XIANG",
		data_name: "2分钟风向",
		data_unit: "°",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_id: 1,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "风",
		data_name: "2分钟风速",
		data_item: "ER_FEN_ZHONG_PING_JUN_FENG_SU",
		data_unit: "m/s",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_id: 4,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "风",
		data_name: "10分钟风向",
		data_item: "SHI_FEN_ZHONG_PING_JUN_FENG_XIANG",
		data_unit: "°",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 3,
		data_type: "风",
		data_item: "SHI_FEN_ZHONG_PING_JUN_FENG_SU",
		data_name: "10分钟风速",
		data_unit: "m/s",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 501,
		data_type: "能见度",
		data_item: "YI_FEN_ZHONG_PING_JUN_NENG_JIAN_DU",
		data_name: "1分钟平均能见度",
		data_unit: "m",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 101,
		data_type: "温湿度",
		data_item: "QI_WEN",
		data_name: "气温",
		data_unit: "℃",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_id: 201,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "气压",
		data_name: "水汽压",
		data_item: "SHUI_QI_YA",
		data_unit: "hPa",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 109,
		data_type: "温湿度",
		data_item: "LU_DIAN_WEN_DU",
		data_name: "露点温度",
		data_unit: "℃",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_id: 202,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "气压",
		data_name: "本站气压",
		data_item: "BEN_ZHAN_QI_YA",
		data_unit: "hPa",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	}, {
		data_id: 207,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "气压",
		data_name: "海平面气压",
		data_item: "HAI_PING_MIAN_QI_YA",
		data_unit: "hPa",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 312,
		data_type: "降水",
		data_item: "XIAO_SHI_LEI_JI_JIANG_SHUI_LIANG_CHENG_ZHONG",
		data_name: "小时累计降水量(称重)",
		data_unit: "mm",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	}
]);
let defaultColumns = [
	{
		data_id: 8,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "风",
		data_name: "瞬时风速",
		data_item: "SHUN_SHI_FENG_SU",
		data_unit: "m/s",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0,
		isSelected: true
	},
	{
		data_id: 9,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "风",
		data_name: "瞬时风向",
		data_item: "SHUN_SHI_FENG_XIANG",
		data_unit: "°",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0,
		isSelected: true
	},
	{
		data_id: 202,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "气压",
		data_name: "本站气压",
		data_item: "BEN_ZHAN_QI_YA",
		data_unit: "hPa",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 101,
		data_type: "温湿度",
		data_item: "QI_WEN",
		data_name: "气温",
		data_unit: "℃",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 106,
		data_type: "温湿度",
		data_item: "XIANG_DUI_SHI_DU",
		data_name: "相对湿度",
		data_unit: "％",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0,
		isSelected: true
	},
	{
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 312,
		data_type: "降水",
		data_item: "XIAO_SHI_LEI_JI_JIANG_SHUI_LIANG_CHENG_ZHONG",
		data_name: "小时累计降水量(称重)",
		data_unit: "mm",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	}, {
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 311,
		data_type: "降水",
		data_item: "FEN_ZHONG_JIANG_SHUI_LIANG_CHENG_ZHONG",
		data_name: "分钟降水量(称重)",
		data_unit: "mm",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0,
		isSelected: true
	},
	{
		data_id: 301,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "降水",
		data_name: "分钟降水量(翻斗)",
		data_item: "FEN_ZHONG_JIANG_SHUI_LIANG_FAN_DOU",
		data_unit: "mm",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0,
		isSelected: true
	},
	{
		data_id: 302,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "降水",
		data_name: "小时累计降水量(翻斗)",
		data_item: "XIAO_SHI_LEI_JI_JIANG_SHUI_LIANG_FAN_DOU",
		data_unit: "mm",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0,
		isSelected: true
	},
	{
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 601,
		data_type: "天气现象",
		data_item: "SHI_CHENG_ZHANG_AI_XIAN_XIANG",
		data_name: "视程障碍现象",
		data_unit: "",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 602,
		data_type: "天气现象",
		data_item: "JIANG_SHUI_XIAN_XIANG",
		data_name: "降水现象",
		data_unit: "",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_id: 603,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "天气现象",
		data_name: "雷暴现象",
		data_item: "LEI_BAO_XIAN_XIANG",
		data_unit: "",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_id: 604,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "天气现象",
		data_name: "地面凝结现象",
		data_item: "DI_MIAN_NING_JIE_XIAN_XIANG",
		data_unit: "",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_id: 605,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "天气现象",
		data_name: "其他现象",
		data_item: "QI_TA_XIAN_XIANG",
		data_unit: "",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	}
];

let historyColumns = [
	{
		data_id: 8,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "风",
		data_name: "瞬时风速",
		data_item: "SHUN_SHI_FENG_SU",
		data_unit: "m/s",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0,
		isSelected: true
	},
	{
		data_id: 9,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "风",
		data_name: "瞬时风向",
		data_item: "SHUN_SHI_FENG_XIANG",
		data_unit: "°",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0,
		isSelected: true
	},
	{
		data_id: 202,
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_type: "气压",
		data_name: "本站气压",
		data_item: "BEN_ZHAN_QI_YA",
		data_unit: "hPa",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 101,
		data_type: "温湿度",
		data_item: "QI_WEN",
		data_name: "气温",
		data_unit: "℃",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0
	},
	{
		data_r_table: "SHI_SHI_LIU_YAO_SU_SHU_JU",
		data_id: 106,
		data_type: "温湿度",
		data_item: "XIANG_DUI_SHI_DU",
		data_name: "相对湿度",
		data_unit: "％",
		data_h_table: "LI_SHI_LIU_YAO_SU_SHU_JU",
		data_value: "",
		data_order: 0,
		data_condition: 0,
		isSelected: true
	},
]
const sensorList = ref<any>([])
// 被选中当条数据下标
const selectedItemIndex = ref(0)


const changeMoveUp = () => {
	//上移
	if (selectedItemIndex.value > 0) {
		const temp = copiedCustomizeColumns.value[selectedItemIndex.value - 1]
		copiedCustomizeColumns.value[selectedItemIndex.value - 1] = copiedCustomizeColumns.value[selectedItemIndex.value]
		copiedCustomizeColumns.value[selectedItemIndex.value] = temp
		selectedItemIndex.value--
	}
}

const changeMoveDown = () => {
	//下移
	if (selectedItemIndex.value < copiedCustomizeColumns.value.length - 1) {
		const temp = copiedCustomizeColumns.value[selectedItemIndex.value + 1]
		copiedCustomizeColumns.value[selectedItemIndex.value + 1] = copiedCustomizeColumns.value[selectedItemIndex.value]
		copiedCustomizeColumns.value[selectedItemIndex.value] = temp
		selectedItemIndex.value++
	}
}

const changeRemove = () => {
	//删除数据
	if (copiedCustomizeColumns.value.length > 0) {
		const custom = copiedCustomizeColumns.value[selectedItemIndex.value];
		const se_type = custom.se_type
		for (let i = 0; i < sensorList.value.length; i++) {
			if (sensorList.value[i].se_type === se_type) {
				sensorList.value[i].isSelected = false;
			}
		}
		copiedCustomizeColumns.value.splice(selectedItemIndex.value, 1)
		if (selectedItemIndex.value === copiedCustomizeColumns.value.length) {
			selectedItemIndex.value--
		}

	}
}

const changeCleared = () => {
	//清空所有数据
	selectedItemIndex.value = 0
	copiedCustomizeColumns.value = []
	for (let i = 0; i < sensorList.value.length; i++) {
		sensorList.value[i].isSelected = false;
	}
}

const changeSelected = (index) => {
	selectedItemIndex.value = index
}

const dataTypeList = [
	{
		value: 0,
		label: '能见度',
	},
	{
		value: 1,
		label: '风速',
	},
	{
		value: 2,
		label: '大气电场',
	}, {
		value: 3,
		label: '云量',
	}, {
		value: 4,
		label: '云高',
	}, {
		value: 5,
		label: '温度',
	}, {
		value: 6,
		label: '湿度',
	}, {
		value: 7,
		label: '小时雨量',
	}
]

function findLabelByValue(noticeTypeList, value) {
	const item = noticeTypeList.find(item => item.value === value);
	return item ? item.label : null;
}

// 判断风级的方法  
function getWindLevel(windSpeed) {
	// 定义风级表  
	const windScale = [
		{ start: 0.0, end: 0.2, level: 0 },
		{ start: 0.3, end: 1.5, level: 1 },
		{ start: 1.6, end: 3.3, level: 2 },
		{ start: 3.4, end: 5.4, level: 3 },
		{ start: 5.5, end: 7.9, level: 4 },
		{ start: 8.0, end: 10.7, level: 5 },
		{ start: 10.8, end: 13.8, level: 6 },
		{ start: 13.9, end: 17.1, level: 7 },
		{ start: 17.2, end: 20.7, level: 8 },
		{ start: 20.8, end: 24.4, level: 9 },
		{ start: 24.5, end: 28.4, level: 10 },
		{ start: 28.5, end: 32.6, level: 11 },
		{ start: 32.7, end: 36.9, level: 12 },
		{ start: 37.0, end: 41.4, level: 13 },
		{ start: 41.5, end: 46.1, level: 14 },
		{ start: 46.2, end: 50.9, level: 15 },
		{ start: 51.0, end: 56.0, level: 16 },
		// 对于最后一个范围，我们可以使用Number.MAX_SAFE_INTEGER来表示DBL_MAX  
		{ start: 56.1, end: Number.MAX_SAFE_INTEGER, level: 17 }
	];
	for (let i = 0; i < windScale.length; i++) {
		if (Number(windSpeed) >= Number(windScale[i].start) && (Number(windSpeed) <= Number(windScale[i].end) || Number(windSpeed) === Number.MAX_SAFE_INTEGER)) {
			return windScale[i].level;
		}
	}
	// 如果没有匹配到任何风级（理论上不应该发生），返回-1或其他错误码  
	return '--';
}
// const updateColumns = () => {
// 	pageable.value.data_items = [...customizeColumns.value,...defaultColumns];
// 	// getList();
// }
//操作 自定义部分表头
const copiedCustomizeColumns = ref<any>([...customizeColumns.value]);
// 查询自动站列表
const queryas = ref<Platform>({
	pageSize: 5000,
	pageNum: 1,
	currentpage: 1
})


const userStore = useUserStore();
const platformList =ref<any>(computed(() => userStore.stations))
const selectPlatform = ref()

const getPlatforms = async () => {
	pageable.value.as_code = platformList.value[0].as_code
	selectPlatform.value = platformList.value[0]
	getList()
	// getHistoryList()
	weatherInfo()
};

const changeStation = (e) => {
	selectPlatform.value = platformList.value.find(item => item.as_code === e);
	// pageable.value.as_code = selectPlatform.value.as_code
	getList()
	// getHistoryList()
	weatherInfo()
}
const changeTime = () => {
	getHistoryList()
}
//时间戳转换为指定格式的日期字符串
function formatDate(timestamp, type) {
	const date = new Date(timestamp * 1000); // 将时间戳转换为毫秒
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0');
	const day = String(date.getDate()).padStart(2, '0');
	const hours = String(date.getHours()).padStart(2, '0');
	const minutes = String(date.getMinutes()).padStart(2, '0');
	if (type === 1) {
		return `${month}/${day} ${hours}:${minutes}`;
	} else {
		return `${year}-${month}-${day} ${hours}:${minutes}`;
	}
}

// 获取天气现象
function getYenSymbolLaterCharacters(inputString) {
	// 使用正则表达式匹配￥符号及其后面的字符  
	const regex = /#([\s\S]*)/;
	const match = inputString.match(regex);

	// 如果匹配成功，则返回￥后面的字符，否则返回null  
	if (match && match.length > 1) {
		return match[1];
	} else {
		return null;
	}
}
// 获取指定时间戳之前的时间戳
function getTimeStamp(type, timestamp) {
	let date = new Date(timestamp * 1000); // 将秒的时间戳转换为毫秒的时间戳
	let now = date;

	let timestampResult;

	switch (type) {
		case 0:
			// 获取当前时间的时间戳  
			timestampResult = Math.floor(now.getTime() / 1000);
			break;
		case 1:
			// 获取30分钟之前的时间戳  
			now.setMinutes(now.getMinutes() - 30);
			timestampResult = Math.floor(now.getTime() / 1000);
			break;
		case 2:
			// 获取24小时之前的整点时间戳  
			now.setHours(now.getHours() - 24, 0, 0, 0);
			timestampResult = Math.floor(now.getTime() / 1000);
			break;
		case 3:
			// 获取48小时之前的整点时间戳  
			now.setHours(now.getHours() - 48, 0, 0, 0);
			timestampResult = Math.floor(now.getTime() / 1000);
			break;
		case 4:
			// 获取现在的整点时间戳  
			now.setMinutes(0, 0, 0);
			timestampResult = Math.floor(now.getTime() / 1000);
			break;
		default:
			throw new Error('Invalid type');
	}

	return timestampResult;
}

// 获取指定id的数组
function getObjectById(array, id) {
	return array.find(item => item.id === id);
}


// 查询所有人工要素字典表
const elementList = ref<any>([])
const getAllRgDataList = async () => {
	const { data } = await getRgDataList();
	elementList.value = data.list
};
const dataItemInfo = ref<any>({})
const selectElement = ref<any>([])
const dangerWeather = ref<any>([])
const getList = async () => {
	const arr = [...customizeColumns.value, ...defaultColumns].reduce((acc, item) => {
		if (!acc.some(existingItem => existingItem.data_id === item.data_id)) {
			acc.push(item);
		}
		return acc;
	}, []);
	const res = await getDataItemList({ ...pageable.value, as_code_list: [pageable.value.as_code], data_items: arr });



	dataItemInfo.value = res.data.list ? (res.data.list.length === 0 ? {} : res.data.list[0]) : {};
	// console.log(dataItemInfo.value, 555);

	showTemp()
	showHumidity()
	showPressure()
	showWindSpeed()
	currentValue.value = dataItemInfo.value[312] && dataItemInfo.value[312] != 0 && dataItemInfo.value[312] != '--' ? dataItemInfo.value[302] : dataItemInfo.value[302] && dataItemInfo.value[302] != 0 ? dataItemInfo.value[302] : '--'
	// currentValue.value = dataItemInfo.value[312] && dataItemInfo.value[312] != 0 && dataItemInfo.value[312] != '--' ? dataItemInfo.value[302] : dataItemInfo.value[302] && dataItemInfo.value[302] != 0 ? dataItemInfo.value[302] : 0
	mincurrentValue.value = dataItemInfo.value[311] && dataItemInfo.value[311] != 0 && dataItemInfo.value[311] != '--' ? dataItemInfo.value[301] : dataItemInfo.value[301] && dataItemInfo.value[301] != 0 ? dataItemInfo.value[302] : '--'
	selectElement.value = res.data.list ? dataItemInfo.value?.data_list.filter(itemB => customizeColumns.value.some(itemA => itemA.data_id === itemB.data_id)) : [];
	const ids = [601, 602, 603, 604, 605]
	dangerWeather.value = res.data.list ? dataItemInfo.value.data_list
		.filter(item => ids.includes(item.data_id) && item.data_value !== '--' && item.data_value !== '')
		.map(item => item) : []
	console.log(dangerWeather.value, 666);

	// .filter(item => ids.includes(item.data_id) && getYenSymbolLaterCharacters(item.remark) !== '无明显天气现象')
	getHistoryList()
};

function adjustValue(value) {
	if (value === 'C') {
		return 0
	} else if (value <= 180) {
		return '-' + value;
	} else {
		return 360 - value;
	}
}

const showChart = ref(false)
const timeArr = ref()
const tempLineArr = ref()
const humidityLineArr = ref()
const pressureLineArr = ref()
const windLineArr = ref()
const getHistoryList = async () => {
	showChart.value = false
	const arr = [...customizeColumns.value, ...defaultColumns].reduce((acc, item) => {
		if (!acc.some(existingItem => existingItem.data_id === item.data_id)) {
			acc.push(item);
		}
		return acc;
	}, []);
	const { data } = await getDataItemList({ ...pageable.value, pageSize: 999, as_code_list: [pageable.value.as_code], data_items: historyColumns, data_type: false, begin_time: getTimeStamp(timeValue.value, dataItemInfo.value.data_time_i), end_time: getTimeStamp(timeValue.value == 1 ? 0 : 4, dataItemInfo.value.data_time_i), time_space: timeValue.value == 1 ? 1 : 60 });
	timeArr.value = data.list?.map(item => {
		return formatDate(item.data_time_i, 1)
	})
	tempLineArr.value = data.list?.map(item => {
		return item[101]
	})
	humidityLineArr.value = data.list?.map(item => {
		return item[106]
	})
	pressureLineArr.value = data.list?.map(item => {
		return item[202]
	})
	windLineArr.value = data.list?.map(item => {
		return {
			value: item[8],
			symbolRotate: adjustValue(item[9]),
			symbolRotateStr: item[9] === 'C' ? 0 : item[9]
		}
	})

	showTempLine()
	showPressureLine()
	showWind()
	showChart.value = true


};

// 要素的选中和取消
const toggleSelection = (item) => {
	item.isSelected = !item.isSelected
	if (item.isSelected) {
		//添加
		copiedCustomizeColumns.value.push(item)
	} else {
		//删除
		copiedCustomizeColumns.value = copiedCustomizeColumns.value.filter(column => column.data_id !== item.data_id);
	}

}
const handleSetting = () => {
	copiedCustomizeColumns.value = [...customizeColumns.value]
	elementList.value.forEach(element => {
		const column = copiedCustomizeColumns.value.find(col => col.data_id === element.data_id);
		if (column) {
			element.isSelected = true;
		} else {
			element.isSelected = false;
		}
	});

	dialog.title = "列表字段设置"
	dialog.visible = true;
}

const submitForm = async () => {
	dialog.visible = false;
	customizeColumns.value = [...copiedCustomizeColumns.value]
	// updateColumns()
	await getList()
	await weatherInfo()
	// await getHistoryList()
	saveCustomizeColumns()
}

const cancel = () => {
	dialog.visible = false;
}

const wertherColumns = ref<any>({
	tact_state_on: true,
	tact_data_on: false,
	tact_state: 0,
	tact_data: 0,
	begin_time: undefined,
	end_time: undefined,
	pageNum: 1,
	pageSize: 20,
	total: 1
});


const weatherInfoArr = ref()
const weatherInfo = async () => {
	const { data } = await getTacRecordList({ ...wertherColumns.value, as_code_list: [pageable.value.as_code] });
	weatherInfoArr.value = data.list

};


const options = [{
	value: 1,
	label: '30分钟'
}, {
	value: 2,
	label: '24小时'
}, {
	value: 3,
	label: '48小时'
}]
const currentValue = ref<any>(0);
const mincurrentValue = ref<any>(0)

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=='--'?0:currentValue.value, 40) / 40) * 180)}px`;
	const top = (currentValue.value=='--'?0: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==='--'?0: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: isDark.value ? '#fff' : "#666",
					distance: 8,
					fontSize: 10
				},
				detail: {
					offsetCenter: [0, 0],
					valueAnimation: true,
					formatter: '{value}',
					color: isDark.value ? '#fff' : "#000",
					fontSize: 30,
				},
				data: [
					{
						value: dataItemInfo.value && dataItemInfo.value[202] ? dataItemInfo.value[202] : '--'
					}
				]
			}
		]
	};
	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: isDark.value ? '#fff' : "#666",
					distance: 8,
					fontSize: 10
				},
				detail: {
					offsetCenter: [0, 0],
					valueAnimation: true,
					formatter: '{value}',
					color: isDark.value ? '#fff' : "#000",
					fontSize: 30,
				},
				data: [
					{
						value: dataItemInfo.value && dataItemInfo.value[106] ? dataItemInfo.value[106] : '--'
					}
				]
			}
		]
	};
	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: isDark.value ? '#fff' : "#000",
						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,
					color: isDark.value ? '#fff' : "#666",
					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: getWindLevel(dataItemInfo.value && dataItemInfo.value[8] ? dataItemInfo.value[8] : -1).toString(),
					// formatter:'2' ,
					color: isDark.value ? '#fff' : "#000",
					// 	fontSize: 10,
				},
				data: [
					{
						// value:270,
						value: dataItemInfo.value && dataItemInfo.value[9] == 'C' ? 0 : Number(dataItemInfo.value[9]),
						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 mychart = echarts.init(wind.value);
	let option = {
		title: {
			text: '暂无数据',
			show: !timeArr.value ? true : false,
			x: 'center',
			y: 'center',
			textStyle: {
				fontSize: 14,
				fontWeight: 'normal',
			}
		},

		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: timeArr.value,
			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: windLineArr.value,
			type: 'line',
			smooth: true, //这句就是让曲线变平滑的
			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: isDark.value ? '#fff' : "#666",
					distance: 8,
					fontSize: 10
				},
				detail: {
					offsetCenter: [0, 0],
					valueAnimation: true,
					formatter: '{value}',
					color: isDark.value ? '#fff' : "#000",
					fontSize: 30,
				},

				data: [
					{
						value: dataItemInfo.value[101],
					}
				]
			}
		]
	};
	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 + 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 <= 0 ? 0 : minval; // 输出最小值
	}
	// 调用方法，获取数据的最大值&最小值
	let maxData1 = calMax(tempLineArr.value);
	let maxData2 = calMax(humidityLineArr.value);
	let minData1 = calMin(tempLineArr.value);
	let minData2 = calMin(humidityLineArr.value);

	let mychart = echarts.init(tempLine.value);
	let option = {
		title: {
			text: '暂无数据',
			show: !timeArr.value ? true : false,
			x: 'center',
			y: 'center',
			textStyle: {
				fontSize: 14,
				fontWeight: 'normal',
			}
		},
		// 直角坐标系内绘图网格
		// 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,
			textStyle: {//图例文字的样式
				color: isDark.value ? '#fff' : "#000",
			}

		},
		// X轴
		xAxis: {
			type: 'category',
			splitLine: {
				show: false
			},
			boundaryGap: false,
			axisTick: {
				alignWithLabel: true, // true：标签位于刻度线正下方；false：标签位于2个刻度线中间
			},
			data: timeArr.value,
			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",
				// boundaryGap: [0, '30%'],
				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: tempLineArr.value
			},
			{
				name: "相对湿度",
				type: "line",
				color: ["#5470c6"],

				smooth: true,
				yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
				data: humidityLineArr.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(pressureLineArr.value);
	let minData1 = calMin(pressureLineArr.value);


	let mychart = echarts.init(pressureLine.value);
	let option = {
		title: {
			text: '暂无数据',
			show: !timeArr.value ? true : false,
			x: 'center',
			y: 'center',
			textStyle: {
				fontSize: 14,
				fontWeight: 'normal',
			}
		},

		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: timeArr.value,
			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: pressureLineArr.value,
			},

		]
	};

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

watch(isDark, () => {
	showTemp()
	showWind()
	showWindSpeed()
	showHumidity()
	showPressure()
	showTempLine()
	showPressureLine()

});

onMounted(() => {
	loadCustomizeColumns()
	// updateColumns()
	getPlatforms()
	// weatherInfo()

	getAllRgDataList()
	showTemp()
	// showWind()
	showWindSpeed()
	showHumidity()
	showPressure()
	// showTempLine()
	// showPressureLine()
})


// 保存customizeColumns数组到localStorage
function saveCustomizeColumns() {
	const jsonString = JSON.stringify(customizeColumns.value);
	localStorage.setItem('customizeColumns', jsonString);
}

// 从localStorage中获取customizeColumns数组
function loadCustomizeColumns() {
	const jsonString = localStorage.getItem('customizeColumns');
	if (jsonString) {
		customizeColumns.value = JSON.parse(jsonString);
	}
}
let intervalId;

onActivated(() => {
	intervalId = setInterval(() => {
		getList();
		weatherInfo()
		// getHistoryList()
	}, 600 * 1000);
});

onDeactivated(() => {
	clearInterval(intervalId);
});
</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;
		// 	background-color: var(--el-bg-color) !important;
		// border: 1px solid var(--el-border-color-light);

		// 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;
		position: relative;
	}
}

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

.wweatherBox {
	.weatherItem {
		text-align: center;
		font-weight: bold;

	}

}
</style>