zzw

.env.development

@@ -18,4 +18,4 @@ VITE_PWA = false
 VITE_API_URL = /api
 
 # 开发环境跨域代理，支持配置多个
-VITE_PROXY = [["/api","http://192.168.0.106:18088"]]
+VITE_PROXY = [["/api","http://192.168.187.133:18088"]]

src/views/alarm/singleStationData/index.vue

@@ -4,15 +4,25 @@
 			<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-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">
+						<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">站名：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">站名：{{ 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">观测时间：2023-06-12 15:00</div>
 			</div>
 			<div class="header-button-ri">
@@ -301,27 +311,127 @@
 				<el-tabs tab-position="left" class="demo-tabs" style="height: 100%">
 					<el-tab-pane label="风">
 						<div class="container-tag">
-							<div class="item-tag">2分钟平均风速</div>
-							<div class="item-tag-active">2分钟平均风向</div>
-							<div class="item-tag">10分钟平均风速</div>
-							<div class="item-tag">10分钟平均风向</div>
-							<div class="item-tag">小时最大风速</div>
-							<div class="item-tag-active">小时最大风速的风向</div>
-							<div class="item-tag">小时极大风速出现时间</div>
+							<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-tab-pane label="温湿度">Config</el-tab-pane>
-					<el-tab-pane label="气压">Role</el-tab-pane>
-					<el-tab-pane label="降水">Task</el-tab-pane>
-					<el-tab-pane label="云">Task</el-tab-pane>
-					<el-tab-pane label="能见度">Task</el-tab-pane>
-					<el-tab-pane label="天气现象">Task</el-tab-pane>
-					<el-tab-pane label="积雪">Task</el-tab-pane>
-					<el-tab-pane label="地面温度">Task</el-tab-pane>
-					<el-tab-pane label="大气电场">Task</el-tab-pane>
-					<el-tab-pane label="闪电">Task</el-tab-pane>
-					<el-tab-pane label="日照">Task</el-tab-pane>
-					<el-tab-pane label="总辐射">Task</el-tab-pane>
 				</el-tabs>
 			</div>
 			<template #footer>
@@ -336,12 +446,22 @@
 </template>
 
 <script setup lang="tsx" name="singleData">
-
 import * as echarts from 'echarts';
-import { ref, computed, onMounted, reactive, watch } from "vue";
+import { ref, computed, onMounted, reactive, watch, onDeactivated, onActivated } from "vue";
 import { useGlobalStore } from "@/stores/modules/global";
+import { getDataItemList, getPlatformList, getRgDataList,getTacRecordList } from "@/api/modules/allData";
+import { Platform } from "@/api/interface";
 
 const queryInfo = ref(0)
+const pageable = ref({
+  data_type: true,
+  time_order: 0,
+  as_code:undefined,
+  data_items:[],
+  pageNum: 1,
+  pageSize: 20,
+  total: 0
+});
 
 const pressure = ref()
 const humidity = ref()
@@ -357,18 +477,216 @@ const dialog = reactive<any>({
 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
+	}
+])
+//操作 自定义部分表头
+const copiedCustomizeColumns = ref<any>([...customizeColumns.value]);
+// 查询自动站列表
+const queryas = ref<Platform>({
+	pageSize: 50,
+	pageNum:1,
+	currentpage: 1
+})
+
+const platformList = ref<any>([])
+const selectPlatform=ref()
+
+const getPlatforms = async () => {
+	const { data } = await getPlatformList(queryas.value);
+	platformList.value = data.list
+	pageable.value.as_code=data.list[0].as_code
+	selectPlatform.value=data.list[0]
+	getList()
+
+};
+
+
+// 查询所有人工要素字典表
+const elementList = ref<any>([])
+const getAllRgDataList = async () => {
+	const { data } = await getRgDataList();
+	elementList.value = data.list
+};
+
+const getList = async () => {
+	const { data } = await getDataItemList({...pageable.value,as_code_list:[pageable.value.as_code]});
+	console.log(data,'观测要素');
+	
+};
+// 要素的选中和取消
+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 = () => {
-
+	dialog.visible = false;
+	customizeColumns.value = [...copiedCustomizeColumns.value]
+	//   updateColumns()
+	saveCustomizeColumns()
 }
 
 const cancel = () => {
 	dialog.visible = false;
 }
+const weatherInfo = async () => {
+  const { data } = await getTacRecordList({});
+  console.log(data,'weatherInfo');
+  
+};
 
 //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]);
@@ -376,10 +694,13 @@ const data2 = ref([30, 40, 40, 35, 45, 40, 50, 40, 45, 50, 55, 65, 60, 55, 50, 4
 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小时'
+	label: '30分钟'
 }, {
 	value: 2,
-	label: '12小时'
+	label: '24小时'
+},{
+	value: 3,
+	label: '48小时'
 }]
 const value = ref(1);
 const currentValue = ref(20);
@@ -527,7 +848,7 @@ const showPressure = () => {
 					}
 				},
 				axisLabel: {
-					color:  isDark.value ? '#fff' : "#666",
+					color: isDark.value ? '#fff' : "#666",
 					distance: 8,
 					fontSize: 10
 				},
@@ -535,7 +856,7 @@ const showPressure = () => {
 					offsetCenter: [0, 0],
 					valueAnimation: true,
 					formatter: '{value}',
-					color:  isDark.value ? '#fff' : "#000",
+					color: isDark.value ? '#fff' : "#000",
 					fontSize: 30,
 				},
 				data: [
@@ -666,7 +987,7 @@ const showHumidity = () => {
 					}
 				},
 				axisLabel: {
-					color:  isDark.value ? '#fff' : "#666",
+					color: isDark.value ? '#fff' : "#666",
 					distance: 8,
 					fontSize: 10
 				},
@@ -674,7 +995,7 @@ const showHumidity = () => {
 					offsetCenter: [0, 0],
 					valueAnimation: true,
 					formatter: '{value}',
-					color:  isDark.value ? '#fff' : "#000",
+					color: isDark.value ? '#fff' : "#000",
 					fontSize: 30,
 				},
 				data: [
@@ -1164,7 +1485,7 @@ const showTemp = () => {
 					}
 				},
 				axisLabel: {
-					color:  isDark.value ? '#fff' : "#666",
+					color: isDark.value ? '#fff' : "#666",
 					distance: 8,
 					fontSize: 10
 				},
@@ -1172,7 +1493,7 @@ const showTemp = () => {
 					offsetCenter: [0, 0],
 					valueAnimation: true,
 					formatter: '{value}',
-					color:  isDark.value ? '#fff' : "#000",
+					color: isDark.value ? '#fff' : "#000",
 					fontSize: 30,
 				},
 				data: [
@@ -1435,6 +1756,12 @@ watch(isDark, () => {
 });
 
 onMounted(() => {
+	loadCustomizeColumns()
+	getPlatforms()
+
+	getAllRgDataList()
+
+
 	showTemp()
 	showWind()
 	showWindSpeed()
@@ -1443,6 +1770,32 @@ onMounted(() => {
 	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();
+  }, 60 * 1000);
+});
+
+onDeactivated(() => {
+  clearInterval(intervalId);
+});
 </script>
 <style lang="scss" scoped>
 .card {