gis

src/views/alarm/gis/index.vue

@@ -2,7 +2,7 @@
   <div class="table-box">
     <!-- 顶部查询栏 -->
     <div class="card table-search" style="overflow: hidden; display: flex; justify-content: space-between;">
-      <el-form :inline="true" label-width="auto">        
+      <el-form :inline="true" label-width="auto">
         <el-form-item label="所属基地：" prop="base">
           <el-select v-model="pageable.base" placeholder="请选择" style="width: 200px" @change="changeBase">
             <el-option label="全部" value=" " />
@@ -25,7 +25,8 @@
         <!-- 设备正常 -->
         <el-form-item>
           <el-dropdown placement="bottom" max-height="200">
-            <div class="lv-state" style="height: 40px;line-height: 40px;cursor: pointer;">台站正常{{ normalPlatforms ? normalPlatforms.length : 0 }}</div>
+            <div class="lv-state" style="height: 40px;line-height: 40px;cursor: pointer;">台站正常{{ normalPlatforms ?
+              normalPlatforms.length : 0 }}</div>
 
             <template #dropdown>
               <el-dropdown-menu>
@@ -38,23 +39,10 @@
           </el-dropdown>
         </el-form-item>
         <!-- 设备故障 -->
-        <!-- <el-form-item>
-          <el-dropdown placement="bottom" max-height="200">
-            <div class="hong-state" style="height: 40px;line-height: 40px;cursor: pointer;">台站故障{{ platformList.length - normalPlatforms.length}}</div>
-
-            <template #dropdown>
-              <el-dropdown-menu>
-                <template v-if="errorPlatforms.length > 0"> <el-dropdown-item v-for="item in errorPlatforms"
-                    :key="item.as_code">{{ item.as_name }}</el-dropdown-item>
-                </template>
-                <el-dropdown-item v-else></el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </el-form-item> -->
         <el-form-item>
           <el-dropdown placement="bottom" max-height="200">
-            <div class="hong-state" style="height: 40px;line-height: 40px;cursor: pointer;">设备故障{{ stateList.error ? stateList.error.length : 0 }}</div>
+            <div class="hong-state" style="height: 40px;line-height: 40px;cursor: pointer;">台站故障{{ errorPlatforms ?
+              errorPlatforms.length : 0}}</div>
 
             <template #dropdown>
               <el-dropdown-menu>
@@ -66,19 +54,25 @@
             </template>
           </el-dropdown>
         </el-form-item>
+
         <!-- 危险天气 -->
         <el-form-item>
           <el-dropdown placement="bottom" max-height="200">
-            <div class="cheng-state" style="height: 40px;line-height: 40px;cursor: pointer;">危险天气{{ dangetWeatherNum.length }}
+            <div class="cheng-state" style="height: 40px;line-height: 40px;cursor: pointer;">危险天气{{
+              dangetWeatherNum.length }}
             </div>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item v-for="item in dangetWeatherNum" :key="item">{{ item }}</el-dropdown-item>
+                <!-- <el-dropdown-item v-for="item in dangetWeatherNum" :key="item">{{ item }}</el-dropdown-item> -->
+                <template v-if="dangetWeatherNum.length > 0">
+                  <el-dropdown-item v-for="item in dangetWeatherNum" :key="item">{{ item }}</el-dropdown-item>
+                </template>
+                <el-dropdown-item v-else>暂无数据</el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
         </el-form-item>
-        
+
         <!-- 基本信息 -->
         <el-form-item>
           <el-popover v-model="visible" @show="handleShowChange" @hide="handleHideChange" placement="bottom"
@@ -87,7 +81,7 @@
               <!--鹰眼  -->
               <el-form-item>
                 <el-switch size="large" v-model="isEagleEyeOn" inline-prompt active-text="打开鹰眼" inactive-text="关闭鹰眼" />
-              </el-form-item>              
+              </el-form-item>
               <!-- 站名 -->
               <el-form-item>
                 <el-switch size="large" v-model="isstationName" inline-prompt active-text="打开站名" inactive-text="关闭站名" />
@@ -98,7 +92,8 @@
               </el-form-item>
               <!-- 街道地图 -->
               <el-form-item>
-                <el-switch size="large" v-model="isstreet" inline-prompt active-text="街道地图" inactive-text="关闭" />
+                <el-switch size="large" v-model="isstreet" inline-prompt active-text="街道地图" inactive-text="卫星地图"
+                  @change="toggleMapLayer" />
               </el-form-item>
             </el-checkbox-group>
             <template #reference>
@@ -256,25 +251,26 @@
 
     <!-- 地图与经纬度显示区域 -->
     <div id="map" class="map" style="width: 100%; height: 100vh;">
-        <!-- 九宫格盒子 -->
-        <div class="grid-container" v-if="isNineGrid">
-          <div v-for="item in 9" :key="item" class="grid-item">
-            <!-- -- 放置内容  -->
-            {{ item }}
-          </div>
-        </div> 
+      <!-- 九宫格盒子 -->
+      <div class="grid-container" v-if="isNineGrid">
+        <div v-for="item in 9" :key="item" class="grid-item">
+          <!-- -- 放置内容  -->
+          {{ item }}
+        </div>
+      </div>
       <!-- 新增图例 -->
       <div id="map-legend"></div>
     </div>
-
+    <!-- popover弹出框 -->
+    <div id="popup" class="ol-popup"></div>  
+    
+    <!-- <span style="color: ${statusColor} !important;">${autoStationStatus}</span> -->
 
 
     <!-- 右下角经纬度显示-->
     <div id="mouse-position" class="mouse-position">经纬度: </div>
-
     <!-- 地图底部控制栏 -->
     <div class="gis-bottom-box">
-
       <!-- 播放/暂停按钮 -->
       <div class="gis-bottom-item">
         <div class="button-bg" @click="togglePlay">
@@ -293,8 +289,8 @@
       </div>
       <!-- 设置当前日期为默认值 -->
       <div class="gis-bottom-item">
-        <el-date-picker style="margin-top: 5px" v-model="value1"  :disabled-date="disabledDate"
-          type="date" placeholder="请选择时间" />
+        <el-date-picker style="margin-top: 5px" v-model="value1" :disabled-date="disabledDate" type="date"
+          placeholder="请选择时间" />
       </div>
       <!-- 时间滑块 -->
       <div class="gis-bottom-item">
@@ -313,6 +309,7 @@
       <!-- 添加事件下拉框-->
       <div class="gis-bottom-item">
         <el-select v-model="timeInterval" placeholder="选择时间间隔" style="width: 150px;">
+          <!-- <el-option label="1分钟间隔" :value="1"></el-option> -->
           <el-option label="2分钟间隔" :value="2"></el-option>
           <!-- <el-option label="5分钟间隔" :value="5"></el-option> -->
           <el-option label="10分钟间隔" :value="10"></el-option>
@@ -331,7 +328,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, defineComponent, computed, reactive, onBeforeUnmount, onMounted, onUnmounted,onDeactivated, onActivated, } from "vue";
+import { ref, watch, defineComponent, computed, reactive, onBeforeUnmount, onMounted, onUnmounted, onDeactivated, onActivated, } from "vue";
 import logoImg from '/src/assets/images/logo.svg'
 import onLine from '/src/assets/images/on_line.svg'
 import weiZhi from '/src/assets/images/weiZhi.svg'
@@ -341,7 +338,7 @@ import OverviewMap from 'ol/control/OverviewMap';
 import { Vector as VectorLayer } from 'ol/layer'; // 引入矢量图层
 import { Vector as VectorSource } from 'ol/source';
 import { Platform } from "@/api/interface";
-import { getDataItemList,getAs_status, getPlatformList, getRgDataList, getStaitemList, getTacRecordList } from "@/api/modules/allData";
+import { getDataItemList, getAs_status, getPlatformList, getRgDataList, getStaitemList, getTacRecordList } from "@/api/modules/allData";
 import { XYZ, TileWMS, ImageWMS } from 'ol/source';
 import 'ol/ol.css';
 import { Map, View, Feature, Overlay } from 'ol';
@@ -352,47 +349,12 @@ import { getStamp, groupByType } from '@/utils/dateTime'
 import { parseTime } from '@/utils/index';
 import { useUserStore } from "@/stores/modules/user";
 import { ResPage } from '@/api/interface';
+import { State } from "driver.js";
+import { Tile as TileLayerOl } from 'ol/layer';
+import { Options } from 'ol/source/XYZ'; // 引入 XYZOptions 类型
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-// const pageable = ref<any>({
-//   data_type: false,
-//   base: ' ',
-//   time_order: 0,
-//   as_code_list: [],
-//   data_items: [],
-//   pageNum: 1,
-//   pageSize: 20,
-
-// });
-
-// const pageable = ref<any>({
-//   data_type: false,
-//   time_order: 0,
-//   time_space:60,
-//   begin_time:undefined,
-//   end_time: undefined,
-//   // begin_time: pageable.value.data_type ? undefined : getStamp(pageable.value.begin_time), // 如果 data_type 为 true，则不传递 begin_time
-//   // end_time: pageable.value.data_type ? undefined : getStamp(pageable.value.end_time),   // 如果 data_type 为 true，则不传递 end_time
-//   as_code_list:[],
-//   data_items:[],
-//   pageNum: 1,
-//   pageSize: 20,
-//   total: 0
-// });
+import { toLonLat } from 'ol/proj.js';
+import { toStringHDMS } from 'ol/coordinate.js';
 
 
 const createPageable = () => {
@@ -407,7 +369,7 @@ const createPageable = () => {
     total: 0,         // 总记录数
     // beginTime: undefined, // 开始时间
     // endTime: undefined, // 结束时间
-    
+
   };
 };
 
@@ -415,10 +377,8 @@ const createPageable = () => {
 const pageable = ref<any>(createPageable());
 
 
-
-
 const userStore = useUserStore();
-const platformList = ref<any>(computed(() => userStore.stations))
+const platformList = ref<any>(computed(() => userStore.stations)) // platformList可查询自动站基本信息接口
 const baseList = ref<any>([])
 
 const selectPlatForms = ref<any>([]) // 选中的站点
@@ -430,7 +390,7 @@ const getPlatforms = async () => {
 
   pageable.value.base = ' '
   pageable.value.as_code_list = platformList.value.map(item => item.as_code)
-  
+
 };
 
 const changeBase = (e) => {
@@ -446,15 +406,13 @@ const changeBase = (e) => {
     getList()
     // getArrive()
   }
-
-  
 }
 
-// 获取设备工况
-const stateList = ref<any>({ normal: [], warning: [], error: [] })
-const errorPlatforms = ref<any>([])
-const normalPlatforms = ref<any>([])
-const getDeviceStatus = async () => {
+
+const stateList = ref<any>({ normal: [], warning: [], error: [] }) // 获取设备状态
+const errorPlatforms = ref<any>([])   // 获取异常站点
+const normalPlatforms = ref<any>([])  // 获取正常站点
+const getDeviceStatus = async () => { // 获取设备状态
   errorPlatforms.value = []
   normalPlatforms.value = []
 
@@ -487,21 +445,26 @@ const getDeviceStatus = async () => {
     }
     if (item.sta_list.some(item1 => item1.state === 0)) {
       normalPlatforms.value.push(item)
-
     }
     const staList = item.sta_list;
     staList.forEach(sta => {
       if (sta.state === 0) {
-        state.normal.push(sta);
+        state.normal.push(sta)
       } else if (sta.state === 2) { // 注意：要求中提到了state为2的个数，但原始数据中并没有state为2的例子，这里假设需要统计它  
         state.warning.push(sta);
       } else if (sta.state === 3) {
         state.error.push(sta);
       }
-      // 对于其他state值，这里不做处理，如果需要可以添加额外的条件分支  
+
     });
 
   });
+
+  // 从normalPlatforms中过滤掉在errorPlatforms中存在的元素，返回一个没有在errorPlatforms.value中没有匹配as_code的元素的数组
+  normalPlatforms.value = normalPlatforms.value.filter(item1 => {
+    return !errorPlatforms.value.find(item2 => item2.as_code === item1.as_code);
+  });
+
   stateList.value = state
 };
 
@@ -521,7 +484,7 @@ const wertherColumns = ref<any>({
 const weatherInfoArr = ref()
 const dangetWeatherNum = ref<any>([])
 
-const weatherInfo = async () => {
+const weatherInfo = async () => {  // 获取条件查询危险天气记录表getTacRecordList 
   const { data } = await getTacRecordList({ ...wertherColumns.value, as_code_list: pageable.value.as_code_list });
   dangetWeatherNum.value = [...new Set(data.list?.map(obj => obj.as_name))]
 };
@@ -569,41 +532,51 @@ const stationLayer = new VectorLayer({
 });
 // 定义状态变量
 const value1 = ref<Date | null>(null); // 日期变量，设置为当前日期
-const value2 = ref(0); 
+const value2 = ref(0);
 const maxValue = ref(0); // 滑块最大值默认为当前时间
 const visible = ref(false);
 const visible2 = ref(false);
 const checkList = ref(['Value selected and disabled', 'Value A']);
 const isPlay = ref(false);
-const isEagleEyeOn = ref(true); // 鹰眼开关状态
-const isjGG = ref(false); // 九宫格开关状态 默认关闭  
-const isboxDrawn = ref(false); // 框选开关状态 默认关闭  boxDrawn 
+const isEagleEyeOn = ref(true); // 鹰眼开关状态 
 const isstationName = ref(false); // 站名开关状态 默认关闭  
 const isstationCode = ref(false); // 站号开关状态 默认打开  
-const isstreet = ref(true); // 街道地图开关状态 默认关闭  
-const searchParam = reactive({ base: undefined, station: undefined });
-const baseOptions = ref([{ value: 0, label: '基地1' }, { value: 1, label: '基地2' }]);
-const stationOptions = ref([{ value: 0, label: 'M1986' }, { value: 1, label: 'M1987' }]);
-const stationCount = ref(0); // 初始值为0
+const isstreet = ref(true); // 街道地图开关状态  
+const isNineGrid = ref(false)
 
+const content = ref('');
+const popoverOverlay = ref<Overlay | null>(null);
+// let overlay: Overlay;
+
+// const overlay = new Overlay({
+//   element: document.getElementById('popover') as HTMLElement,
+//   positioning: 'bottom-center',
+//   offset: [0, -10],
+// });
 
 
 
 /** 底部时间轴 */
-const timeInterval = ref(2);
-const getCurrentTimestamp = (): number => {
-  return new Date().getTime(); // 返回当前时间戳
+const timeInterval = ref(2); // 默认时间间隔为2分钟
+const getCurrentTimestamp = (): number => {// 返回当前时间戳
+  return new Date().getTime();
 };
+
 // 设置最大时间为当前时间戳
 let maxTime = getCurrentTimestamp();
-const getCurrentMinutes = (): number => {
+const getCurrentMinutes = (): number => { // 返回一天中的分钟数（00:00开始计算）
   const now = new Date();
   return now.getHours() * 60 + now.getMinutes();
 };
 // 滑动条更新方法，确保时间不超过当前时间
-const changeSlider = (): void => {
+const changeSlider = (data): void => {
   const currentMinutes = getCurrentMinutes();
+  console.log("changeSlider1",value1.value);
+  console.log("changeSlider4",data);
+  console.log("changeSlider3",currentMinutes);
+
   if (value1.value && isToday(value1.value) && value2.value > currentMinutes) {
+    console.log("changeSlider2",changeSlider);
     value2.value = currentMinutes; // 如果超过当前时间则重设为当前分钟数
   }
   getList(); // 确保选中的要素信息更新
@@ -618,7 +591,7 @@ const getCurrentMinutesOfDay = () => {
   const now = new Date();
   return now.getHours() * 60 + now.getMinutes() - 1;
 };
-
+// 切换播放状态
 const togglePlay = () => {
   isPlay.value = !isPlay.value;
   if (isPlay.value) {
@@ -626,16 +599,13 @@ const togglePlay = () => {
     playInterval = window.setInterval(() => {
       const currentTime = getCurrentTimestamp(); // 当前时间戳
       maxTime = getCurrentMinutesOfDay(); // 更新最大时间
-      console.log("maxTime----------",maxTime);
       if (value2.value < currentTime) {
         value2.value += timeInterval.value;
         getList(); // 获取当前时间点的要素信息
       } else {
-        // stopFetchingData(); // 达到最大值时停止播放 
-        getList()
-        console.log("停止播放")
+        getList(); // 获取当前时间点的要素信息
       }
-    }, 10000); // 每3秒滑动一次
+    }, 5000); // 每10秒滑动一次
   } else {
     // 暂停播放，清除定时器
     console.log("暂停播放");
@@ -670,18 +640,18 @@ const isToday = (date: Date) => {
   // 判断传入的日期是否在今天的范围内
   return date >= startOfDay && date <= endOfDay;
 };
-// 时间格式化函数  
+// 时间格式化函数(12:30)  
 const formatTooltip = (val: number) => {
   const hours = Math.floor(val / 60).toString().padStart(2, '0');
   const minutes = (val % 60).toString().padStart(2, '0');
-  return `${hours}:${minutes}`;
+  return `${hours}:${minutes}`; //12:30
 };
 
-// // 监听日期选择（value1）和滑块变化（value2）
+// 监听日期选择（value1）和滑块值变化（value2）
 watch([value1, value2], ([selectedDate, newValue]) => {
-  const selectedMinutesValue = newValue;   
+  const selectedMinutesValue = newValue;
   // 如果选中日期是今天，则滑块最大值为当前时间的分钟数，否则为 1440（翌日00:00）
-  maxValue.value = isToday(selectedDate) ? getCurrentMinutesOfDay() : 1440;
+  maxValue.value = isToday(selectedDate!) ? getCurrentMinutesOfDay() : 1440;
   // 如果当前滑块值超过最大值，则将其限制为最大值
   if (value2.value > maxValue.value) {
     value2.value = maxValue.value;
@@ -689,11 +659,10 @@ watch([value1, value2], ([selectedDate, newValue]) => {
   // 更新 date.value，用于显示选中的日期时间
   date.value = `${parseTime(selectedDate, '{y}-{m}-{d} ')}${formatTooltip(value2.value)}`;
 
-
   // 控制数据展示，如果日期是今天且超过当前分钟数，则不展示未来时间的数据
   if (selectedMinutesValue <= maxValue.value) {
     getList(); // 确保当前选择的时间展示对应的要素信息
-  }  
+  }
 });
 
 
@@ -710,48 +679,42 @@ const stopFetchingData = () => {
 };
 
 
-
-const getList = async () => {  
+const getList = async () => {
   // 当滑块值达到最大时间点 实时展示
   if (value2.value >= maxValue.value) {
-    pageable.value.data_type = true; // 实时数据模式
-    // stopFetchingData(); // 停止获取数据 
-    // return []; 
-  }else{
-    pageable.value.data_type = false;
+    pageable.value.data_type = true; // 实时数据模式  
+  } else {
+    pageable.value.data_type = false; // 历史数据模式   
   }
   try {
     // 发送 API 请求并解构返回的数据 getDataItemList获取实时数据
     const response = await getDataItemList({
       ...pageable.value,
-      // data_item:copiedCustomizeColumns.value,
       begin_time: getStamp(date.value),
       end_time: getStamp(date.value),
-      time_space: 1
+      time_space: 1 // 时间间隔
     });
     const dataList = response.data?.list ?? []; // 使用空值合并操作符保证 dataList 总是为数组
     processTableData.value = dataList; // 存储数据，避免 null 值
+
+    console.log("processTableData.value11111",processTableData.value);
+    
     // 更新站点数据，减少重复调用
     getStations(selectPlatForms.value);
     return dataList; // 返回数据列表
   } catch (error) {
-    // console.error("获取数据时出错:", error);
     return []; // 如果出错，返回空数组以确保数据类型一致
   }
 }
-
-
-
 /**站号和站名的开关监听 */
 watch([isstationCode, isstationName], ([newIsStationCode, newIsStationName]) => {
   getList()
 });
 
 
-
 // 更新图例函数
 const updateLegend = (
-  selectedElements: Array<{ data_name: string; data_unit: string }>, 
+  selectedElements: Array<{ data_name: string; data_unit: string }>,
   timestamp: string
 ) => {
   const legendContainer = document.getElementById('map-legend');
@@ -784,29 +747,24 @@ const updateLegend = (
 };
 
 
-
-// 更新站状态
-const stationsStatus=ref<any>([])
-const getStations_Status =async () => {
+// 更新自动站状态
+const stationsStatus = ref<any>([])
+const getStations_Status = async () => {
   const { data } = await getAs_status();
   stationsStatus.value = data.list;
 }
 
 // 更换站点实时图标
-const isLiShi=()=>{
+const isLiShi = () => {
   if (value2.value >= maxValue.value) {
-    return  false    
-  }else{
+    return false
+  } else {
     return true
   }
 }
-
+// 更换站点图标路径
 const getIconPath = (station) => {
   const status = searchData(station.as_code);
-  // 取消历史数据图标展示问题
-  // if (isLiShi()) {
-  //   return logoImg;
-  // } 
   if (status === 0) {
     return weiZhi;
   } else if (status === 1) {
@@ -818,7 +776,7 @@ const getIconPath = (station) => {
   }
 };
 
-
+// 台站状态筛选
 const searchData = (code, suffix = "|LEVEL_MAIN") => {
   const searchKey = `${code}${suffix}`;
   const item = stationsStatus.value.find(item => item.key === searchKey);
@@ -830,11 +788,6 @@ const searchData = (code, suffix = "|LEVEL_MAIN") => {
 const timeGamp = ref<any>([])
 
 
-
-
-
-
-
 // 获取站点列表 地图台站信息标注 
 const getStations = (stations) => {
   stationSource.clear(); // 清除之前的站点标记
@@ -847,9 +800,9 @@ const getStations = (stations) => {
   const hours = Math.floor(minutesOfDay / 60);
   const minutes = minutesOfDay % 60;
   const timestamp = new Date(
-    selectedDate.getFullYear(),
-    selectedDate.getMonth(),
-    selectedDate.getDate(),
+    selectedDate!.getFullYear(),
+    selectedDate!.getMonth(),
+    selectedDate!.getDate(),
     hours,
     minutes
   );
@@ -879,29 +832,25 @@ const getStations = (stations) => {
       );
       const latitude = parseFloat(station.as_lat.replace('N', ''));
       const longitude = parseFloat(station.as_lon.replace('E', ''));
-   
-
-      // 打印解析后的经纬度
-      // const featureTextParts = [`${station.as_code}`];
 
       let featureTextParts: string[] = [];
 
-     if (isstationCode.value && isstationName.value) {
-      // 如果 both station code and name are available
-      featureTextParts = [`${station.as_code}`, `${station.as_name}`];
+      if (isstationCode.value && isstationName.value) {
+        // 如果 both station code and name are available
+        featureTextParts = [`${station.as_code}`, `${station.as_name}`];
       } else if (isstationCode.value) {
-      // 如果只有 station code 可用
-          featureTextParts = [`${station.as_code}`];
-        } else if (isstationName.value) {
+        // 如果只有 station code 可用
+        featureTextParts = [`${station.as_code}`];
+      } else if (isstationName.value) {
         // 如果只有 station name 可用
-         featureTextParts = [`${station.as_name}`];
-     }
+        featureTextParts = [`${station.as_name}`];
+      }
 
       // 只显示选中列的数据，不显示单位，无数据时用“/”代替
       const selectedElementsText = copiedCustomizeColumns.value
         .map((selectedElem) => {
           if (result && result[selectedElem.data_id] !== ' ') {
-            const value = result[selectedElem.data_id] || '/'; // 如果值不存在则显示“暂无数据”
+            const value = result[selectedElem.data_id] || '/'; // 如果值不存在则显示“/”
             return `${value}`; // 显示名称和数值
           } else {
             return ' /'; // 如果未找到匹配项，只返回“/”
@@ -920,20 +869,17 @@ const getStations = (stations) => {
         code: station.as_code,
         description: selectedElementsText,
       });
-      console.log("====================6")
-      // 设置站点图标和文字样式
-
 
+      // 设置站点图标和文字样式
       feature.setStyle(
         new Style({
           image: new Icon({
-            // src:isLiShi()?logoImg: searchData(station.as_code) === 0 ? weiZhi : searchData(station.as_code) === 1 ? onLine : searchData(station.as_code) === 2 ? weiLianJie : weiZhi, // 图标路径
-            src:getIconPath(station), //调用图标方法
+            src: getIconPath(station), //调用图标方法
             scale: 0.008,
           }),
           text: new Text({
             text: featureText, // 显示站号、站名和选中要素信息
-            font: '12px Calibri,sans-serif',
+            font: '15px Calibri,sans-serif',
             fill: new Fill({ color: '#000' }),
             stroke: new Stroke({ color: '#fff', width: 2 }),
             offsetY: -20,
@@ -948,7 +894,6 @@ const getStations = (stations) => {
 };
 
 
-
 const tabPaneData = ref([
   { label: '气温', icon: '@/assets/images/temperature.svg' },
   { label: '气压', icon: '@/assets/images/pressure.svg' },
@@ -975,7 +920,7 @@ const handleBack = () => {
 // 下一个时间节点
 const handleForward = () => {
   maxTime = getCurrentMinutesOfDay(); // 更新最大时间
-  if (isToday(parseTime(value1.value, '{y}-{m}-{d} ') + formatTooltip(value2.value))) {
+  if (isToday(new Date(parseTime(value1.value, '{y}-{m}-{d} ') + formatTooltip(value2.value)))) {
     if (value2.value < maxTime) {
       value2.value += timeInterval.value;
     }
@@ -989,6 +934,9 @@ const handleShowChange = () => { visible.value = true; };
 const handleShowChange2 = () => { visible2.value = true; };
 const handleHideChange2 = () => { visible2.value = false; };
 
+
+
+
 // 图层配置数组
 const layersConfig = [
   { layerName: 'basemap:boundary', minZoom: 0, maxZoom: 6, opacity: 1 },
@@ -1001,13 +949,11 @@ const layersConfig = [
   { layerName: 'basemap:provinceName', minZoom: 1, maxZoom: 6 }
 ];
 
-// 创建图层的函数
+// 添加街道图层的函数
 const createWMSLayer = ({ layerName, minZoom, maxZoom, opacity = 1 }) => {
   return new TileLayer({
     source: new TileWMS({
-      url: import.meta.env.VITE_API_GIS_URL as string+'/geoserver/wms',
-      // url: 'http://192.168.43.77:8080/geoserver/wms',
-      // url: 'http://192.168.14.123:8080/geoserver/wms',
+      url: import.meta.env.VITE_API_GIS_URL as string + '/geoserver/wms',
       params: { 'LAYERS': layerName, 'TILED': true, 'FORMAT': 'image/png', 'TRANSPARENT': true, 'ENCODING': 'UTF-8' },
       serverType: 'geoserver'
     }),
@@ -1017,64 +963,76 @@ const createWMSLayer = ({ layerName, minZoom, maxZoom, opacity = 1 }) => {
   });
 };
 
+
+
+
+// let streetLayer: TileLayer<TileWMS>; // 街道图层
+// let satelliteLayer: TileLayer<XYZ>; // 卫星图层
+
+
+// // 创建街道图层
+// streetLayer = createWMSLayer({
+//   layerName: 'street_layer', // 街道地图的 WMS 图层名
+//   minZoom: 0,
+//   maxZoom: 18,
+//   opacity: 1
+// });
+
+// // 创建卫星图层
+// const createSatelliteLayer = () => {
+//   return new TileLayer({
+//     source: new XYZ({
+//       url: 'http://t1.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=49ea1deec0ffd88ef13a3f69987e9a63',
+//       wrapX: false
+//     }),
+//     visible: false // 默认卫星图层是隐藏的
+//   });
+// };
+// satelliteLayer = createSatelliteLayer();
+
+// // 切换地图图层的显示与隐藏
+// const toggleMapLayer = () => {
+//   if (map) {
+//     streetLayer.setVisible(isstreet.value);  // 根据 isstreet 状态控制街道图层的显示
+//     satelliteLayer.setVisible(!isstreet.value);  // 根据 isstreet 状态控制卫星图层的显示
+//   }
+// };
+
+
+// return {
+//   isstreet,    // 控制街道图层显示的状态
+//   toggleMapLayer  // 切换图层显示的函数
+// };
+
+
+
+
+
+
 let map: any; // 定义为全局变量
+let overlay: Overlay; // 定义为全局变量
 let overviewMapControl: OverviewMap;
 // 地图初始化
 const initializeMap = () => {
-
   let view = new View({
     center: fromLonLat([104.1954, 35.8617]),
     zoom: 4,
-    projection: 'EPSG:3857'//定义坐标系
+      
   })
   map = new Map({
     target: 'map',
     layers: [
       ...layersConfig.map(createWMSLayer),
-      stationLayer  // 初始化时添加 stationLayer
+      stationLayer,  // 初始化时添加 stationLayer      
     ],
-    view: view
+    view: view,
+    // overlays: [overlay], // 将 Overlay 添加到地图中
   });
 
-  
-  //实例化map对象加载地图、创建天地图层tif函数
-  // var map = new ol.Map({
-  //           //地图容器div的id 
-  //           target: 'container',           
-  //           //地图容器中加载的图层
-  //           layers: [
-  //               //加载瓦片图层数据
-  //               new ol.layer.Tile({
-  //                   title: "天地图矢量图层",
-  //                   source: new ol.source.XYZ({
-  //                       url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=你的密钥",                        
-  //                       wrapX: false
-  //                   })                    
-  //               }),
-  //               new ol.layer.Tile({
-  //                   title: "天地图矢量图层注记",
-  //                   source: new ol.source.XYZ({
-  //                       url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=你的密钥",                        
-  //                       wrapX: false
-  //                   })                    
-  //               })
-  //           ],
-  //           //地图视图设置
-  //           view: new ol.View({
-  //               //地图初始中心点
-  //               center: ol.proj.transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'), //地图初始中心点
-  //               //地图初始显示级别
-  //               zoom: 4
-  //           })
-  //       });
-
-
   // 定义鹰眼视图层
   const overviewMapLayer = new TileLayer({
     source: new TileWMS({
-      url: import.meta.env.VITE_API_GIS_URL as string+'/geoserver/wms',
-      // url: 'http://192.168.43.77:8080/geoserver/wms',
-      // url: 'http://192.168.14.123:8080/geoserver/wms',
+      url: import.meta.env.VITE_API_GIS_URL as string + '/geoserver/wms',
       params: {
         'LAYERS': 'basemap:province',  // 选择可见的图层为省级
         'TILED': true,
@@ -1095,10 +1053,101 @@ const initializeMap = () => {
 
   // 显示小数点经纬度
   map.on('pointermove', (evt) => {
-    // const [lon, lat] = toLonLat(map.getCoordinateFromPixel(evt.pixel));
     const [lon, lat] = transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326'); // 转换为标准经纬度
-    document.getElementById('mouse-position').innerHTML = `经度: ${lon.toFixed(6)}°,  纬度: ${lat.toFixed(6)}°`;
+    document.getElementById('mouse-position')!.innerHTML = `经度: ${lon.toFixed(6)}°,  纬度: ${lat.toFixed(6)}°`;
   });
+
+
+  
+  
+  
+
+
+
+// 初始化 Overlay 弹出框
+const popupContainer = document.getElementById('popup')!;
+  overlay = new Overlay({
+    element: popupContainer,
+    positioning: 'center-center',
+    stopEvent: false, // 允许事件继续传递到地图bottom-center
+  });
+  map.addOverlay(overlay);
+
+  // 添加点击事件监听
+  map.on('singleclick', (event) => {
+    const features = map.getFeaturesAtPixel(event.pixel); // 获取点击处的要素
+    if (features.length > 0) {
+      const feature = features[0];
+      console.log("feature11111111111",feature);
+
+      
+      const coordinates = feature.getGeometry().getCoordinates(); // 获取要素坐标
+      // const content = feature.get('name'); // 获取自定义属性，如名称
+
+         // 获取站名和自动站状态
+    const stationName = feature.get('name') || '未知站名'; // 获取站名
+    console.log("stationName",feature);
+    
+    const stationCode = feature.get('code') || '未知站名'; // 获取站名
+         
+    
+    const matchedData = platformList.value.find(item => item.as_code === stationCode);
+    if (matchedData) {
+      console.log('匹配到的数据:', matchedData);
+      console.log('matchedData.as_lat',matchedData.as_lat);
+      
+    } else {
+      console.log('未找到匹配的数据');
+    }
+
+    // // 获取返回的经纬度
+    const latitude = matchedData.as_lat || '未知纬度';
+    const longitude = matchedData.as_lon || '未知经度';
+
+    
+    console.log("stationCode",stationCode);    
+    let autoStationStatus = searchData(feature.get('code')) ; // 根据code 获取 as_link 状态  
+    let statusColor = 'black'; // 默认颜色为黑色
+
+
+
+    
+    // 根据状态值设置状态文本和颜色
+if (autoStationStatus == 0) {
+  autoStationStatus = '未知';
+  statusColor = 'gray';
+} else if (autoStationStatus == 1) {
+  autoStationStatus = '在线';
+  statusColor = 'green';
+} else if (autoStationStatus == 2) {
+  autoStationStatus = '未连接';
+  statusColor = 'red';
+}
+
+    
+    // 拼接内容展示
+    const content = 
+    `
+      <div style="text-align: left; font-size: 12px;">
+        状态：<span style="color: ${statusColor};">${autoStationStatus}</span><br>        
+        站号：${stationCode}<br>
+        站名：${stationName}<br>
+        经纬度：${longitude},${latitude}<br>
+        
+      </div>
+    `;
+    
+
+      // 显示弹出框
+      popupContainer.innerHTML = content ;
+      overlay.setPosition(coordinates);
+    } else {
+      // 点击空白处隐藏弹出框
+      overlay.setPosition(undefined);
+    }
+  });
+
+
 };
 
 // 监听 isEagleEyeOn 变化，触发折叠状态
@@ -1109,9 +1158,7 @@ watch(isEagleEyeOn, (newValue) => {
 const initializeOverviewMap = () => {
   const overviewMapLayer = new TileLayer({
     source: new TileWMS({
-      url: import.meta.env.VITE_API_GIS_URL as string+'/geoserver/wms',
-      // url: 'http://192.168.43.77:8080/geoserver/wms',
-      // url: 'http://192.168.14.123:8080/geoserver/wms',
+      url: import.meta.env.VITE_API_GIS_URL as string + '/geoserver/wms',
       params: {
         'LAYERS': 'basemap:province',
         'TILED': true,
@@ -1124,11 +1171,20 @@ const initializeOverviewMap = () => {
   })
 };
 
+
 // 查询所有人工要素字典表
 const elementList = ref<any>([])
+
 const getAllRgDataList = async () => {
   const { data } = await getRgDataList();
   elementList.value = data.list
+
+  // 如果需要根据选中的要素立即更新数据，强制触发一次数据加载
+  if (copiedCustomizeColumns.value.length > 0) {
+    // 调用 getList() 来加载与选中要素相关的数据
+    getList();
+  }
+
 };
 
 // 存放选中要素列表
@@ -1144,13 +1200,8 @@ const toggleSelection = (item) => {
     // 取消选中的要素
     copiedCustomizeColumns.value = copiedCustomizeColumns.value.filter(column => column.data_id !== item.data_id);
   }
-
   //根据要素查询数据
   pageable.value.data_items = copiedCustomizeColumns.value
-  // getList().then((data) => {
-  // }).catch((error) => {
-  //   console.error("获取数据时出错:", error);
-  // });
   getList()
 };
 
@@ -1158,9 +1209,6 @@ const toggleSelection = (item) => {
 
 
 
-
-
-
 // 在组件挂载时初始化地图 
 onMounted(() => {
   getStations_Status()
@@ -1171,10 +1219,10 @@ onMounted(() => {
   value2.value = currentMinutes; // 将滑块的起始值设置为当前时间
   const minutesSinceMidnight = now.getHours() * 60 + now.getMinutes();
   maxValue.value = minutesSinceMidnight;// 设置滑块的最大值为当前时间的分钟数
-  console.log("value2.value, maxValue.value+++++++++",value2.value, maxValue.value)
-  getAllRgDataList(); // 存放人工选择的要素列表
+  console.log("value2.value, maxValue.value+++++++++", value2.value, maxValue.value)
+  getAllRgDataList(); // 存放人工选择的要素列表  
   initializeMap();
-  getPlatforms();
+  getPlatforms();    
 });
 
 
@@ -1182,6 +1230,11 @@ onMounted(() => {
 
 
 
+
+
+
+
+
 let intervalId;
 
 onActivated(() => {
@@ -1316,7 +1369,8 @@ onDeactivated(() => {
   width: 20px;
   height: 20px;
   border-radius: 50%;
-  border: 2px solid black; /* 黑色边框 */
+  border: 2px solid black;
+  /* 黑色边框 */
   display: inline-block;
   position: relative;
 }
@@ -1333,22 +1387,49 @@ onDeactivated(() => {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   font-size: 14px;
   font-family: Arial, sans-serif;
-  z-index: 1000; /* 确保图例在地图之上 */
-  pointer-events: none; /* 避免影响地图交互 */
-  max-width: 950px; /* 控制图例的最大宽度 */
-  display: none; /* 默认隐藏 */
+  z-index: 1000;
+  /* 确保图例在地图之上 */
+  pointer-events: none;
+  /* 避免影响地图交互 */
+  max-width: 950px;
+  /* 控制图例的最大宽度 */
+  display: none;
+  /* 默认隐藏 */
   display: flex;
-  flex-wrap: wrap; /* 支持换行 */
-  gap: 10px; /* 控制每个要素之间的间距 */
-  align-items: center; /* 垂直居中对齐 */
+  flex-wrap: wrap;
+  /* 支持换行 */
+  gap: 10px;
+  /* 控制每个要素之间的间距 */
+  align-items: center;
+  /* 垂直居中对齐 */
 }
 
 #map-legend .legend-item {
-  white-space: nowrap; /* 确保单个内容不换行 */
+  white-space: nowrap;
+  /* 确保单个内容不换行 */
   background: rgba(0, 0, 0, 0.05);
   border-radius: 3px;
   padding: 2px 8px;
 }
 
 
+
+.ol-popup {
+  background-color: rgba(255, 255, 255, 0.5); /* 背景设置透明 */
+  border: 1px solid rgba(204, 204, 204, 1);  /* 边框颜色 */
+  color: black; /* 保持文字完全不透明 */
+  padding: 10px;
+  border-radius: 10px;  /**设置圆角为10 */
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  position: absolute;
+  white-space: nowrap;
+  font-size: 14px;
+  pointer-events: none;
+  transform: translateX(5px) translateY(5px) ; /* 向右偏移 20px，上下偏移 */
+  text-align: center;
+}
+
+
+
+
 </style>