代码提交

src/api/modules/allData.ts

@@ -20,7 +20,7 @@ export const getRgDataList = () => {
 
 //查询观测要素
 export const getDataItemList = (params:{}) => {
-  return http.post<ResPage<any>>(PORT1 + `/querydataitem`,params);
+  return http.post<ResPage<any>>(PORT1 + `/querydataitem`,params,{ loading: false });
 };
 
 

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=" " />
@@ -10,6 +10,7 @@
             <el-option v-for="item in baseList" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
+        <!-- 台站参数 -->
         <el-form-item>
           <el-dropdown placement="bottom" max-height="200">
             <div class="lan-state" style="height: 40px;line-height: 40px;cursor: pointer;">台站总数{{ platformList.length }}
@@ -21,10 +22,10 @@
             </template>
           </el-dropdown>
         </el-form-item>
+        <!-- 设备正常 -->
         <el-form-item>
           <el-dropdown placement="bottom" max-height="200">
-            <div class="lv-state" style="height: 40px;line-height: 40px;cursor: pointer;">设备正常{{ stateList.normal ?
-              stateList.normal.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>
@@ -36,10 +37,24 @@
             </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;">台站故障{{ 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;">设备故障{{ stateList.error ? stateList.error.length : 0 }}</div>
 
             <template #dropdown>
               <el-dropdown-menu>
@@ -51,10 +66,10 @@
             </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>
@@ -63,7 +78,7 @@
             </template>
           </el-dropdown>
         </el-form-item>
-
+        
         <!-- 基本信息 -->
         <el-form-item>
           <el-popover v-model="visible" @show="handleShowChange" @hide="handleHideChange" placement="bottom"
@@ -72,7 +87,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="关闭站名" />
@@ -247,20 +262,9 @@
             <!-- -- 放置内容  -->
             {{ item }}
           </div>
-        </div>
-
-      <!-- 台站不同状态画圆圈 -->
-      <!-- <div
-        v-for="station in stations"
-        :key="station.id"
-        class="status-circle"
-        :style="getCircleStyle(station.status)"
-      ></div>  -->
-
+        </div> 
       <!-- 新增图例 -->
       <div id="map-legend"></div>
-
-
     </div>
 
 
@@ -289,12 +293,12 @@
       </div>
       <!-- 设置当前日期为默认值 -->
       <div class="gis-bottom-item">
-        <el-date-picker style="margin-top: 5px" v-model="value1" @change="changeDate" :disabled-date="disabledDate"
+        <el-date-picker style="margin-top: 5px" v-model="value1"  :disabled-date="disabledDate"
           type="date" placeholder="请选择时间" />
       </div>
       <!-- 时间滑块 -->
       <div class="gis-bottom-item">
-        <el-slider @change="changeSlider" :min="0" :max="1439" :format-tooltip="formatTooltip" v-model="value2"
+        <el-slider @change="changeSlider" :min="1" :max="1440" :format-tooltip="formatTooltip" v-model="value2"
           style="width: 720px;margin: 0px 0px 0px 10px" />
         <img src="../../../assets/images/scale.svg" style="width: 720px; margin-top: -10px" />
       </div>
@@ -332,15 +336,14 @@ 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'
 import weiLianJie from '/src/assets/images/weiLianJie.svg'
-import 'ol/ol.css';
 import TileLayer from 'ol/layer/Tile';
 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 '@/assets/map/popup.css'
 import { XYZ, TileWMS, ImageWMS } from 'ol/source';
+import 'ol/ol.css';
 import { Map, View, Feature, Overlay } from 'ol';
 import { fromLonLat, transform } from 'ol/proj';
 import { Point } from 'ol/geom';
@@ -348,8 +351,6 @@ import { Style, Icon, Text, Fill, Stroke, Circle } from 'ol/style';
 import { getStamp, groupByType } from '@/utils/dateTime'
 import { parseTime } from '@/utils/index';
 import { useUserStore } from "@/stores/modules/user";
-// import Overlay from 'ol/Overlay';
-// import L from 'leaflet';
 import { ResPage } from '@/api/interface';
 
 
@@ -367,16 +368,53 @@ import { ResPage } from '@/api/interface';
 
 
 
-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,
+//   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
+// });
+
+
+const createPageable = () => {
+  return {
+    data_type: false, // 查询模式，默认非实时
+    base: '',         // 基础查询分类，默认为空
+    time_order: 0,    // 时间排序方式，0: 倒序，1: 正序
+    as_code_list: [], // 站点代码列表
+    data_items: [],   // 数据项列表
+    pageNum: 1,       // 当前页码
+    pageSize: 20,     // 每页记录数
+    total: 0,         // 总记录数
+    // beginTime: undefined, // 开始时间
+    // endTime: undefined, // 结束时间
+    
+  };
+};
+
+// 使用 pageable
+const pageable = ref<any>(createPageable());
+
 
-});
 
 
 const userStore = useUserStore();
@@ -392,7 +430,7 @@ const getPlatforms = async () => {
 
   pageable.value.base = ' '
   pageable.value.as_code_list = platformList.value.map(item => item.as_code)
-
+  
 };
 
 const changeBase = (e) => {
@@ -409,7 +447,7 @@ const changeBase = (e) => {
     // getArrive()
   }
 
-
+  
 }
 
 // 获取设备工况
@@ -455,18 +493,19 @@ const getDeviceStatus = async () => {
     staList.forEach(sta => {
       if (sta.state === 0) {
         state.normal.push(sta);
-      } else if (sta.state === 2) { // 注意：要求中提到了state为2的个数，但原始数据中并没有state为2的例子，这里假设需要统计它
+      } else if (sta.state === 2) { // 注意：要求中提到了state为2的个数，但原始数据中并没有state为2的例子，这里假设需要统计它  
         state.warning.push(sta);
       } else if (sta.state === 3) {
         state.error.push(sta);
-
       }
-      // 对于其他state值，这里不做处理，如果需要可以添加额外的条件分支
+      // 对于其他state值，这里不做处理，如果需要可以添加额外的条件分支  
     });
 
   });
   stateList.value = state
 };
+
+
 const wertherColumns = ref<any>({
   tact_state_on: true,
   tact_data_on: false,
@@ -485,11 +524,6 @@ const dangetWeatherNum = ref<any>([])
 const weatherInfo = async () => {
   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))]
-
-
-
-
-
 };
 watch(() => pageable.value.as_code_list, (newValue, oldValue) => {
   if (newValue) {
@@ -526,54 +560,6 @@ const hot = ref(true);
 const points = ref(true);
 const singleTime = ref(undefined)
 const multiTime = ref(undefined)
-//重置功能
-const resetQuery = () => {
-  const allCodes = platformList.value.map(item => item.as_code);
-  pageable.value.as_code_list = allCodes
-  selectedData.value = []
-
-  isStand.value = true
-  as_code_list.value = undefined;
-  hot.value = true;
-  points.value = true;
-  singleTime.value = undefined;
-  multiTime.value = undefined;
-
-
-  pageable.value.time_order = 1
-  pageable.value.time_space = 60
-  pageable.value.begin_time = undefined
-  pageable.value.end_time = undefined
-  pageable.value.data_type = false
-  pageable.value.state_list = [
-    "STATE_PART",
-    "STATE_SENSOR",
-    "STATE_ARTIFICIAL"
-  ]
-
-  pageable.value.pageNum = 1
-  pageable.value.pageSize = 24
-  pageable.value.total = 0
-
-  processTableData.value = []
-  getList();
-};
-
-
-
-
-
-
-// 计算属性，根据自动站的位置计算grid-container的位置
-const gridContainerStyle = (station) => {
-  return {
-    top: `${station.lat}px`,
-    left: `${station.lon}px`,
-  };
-};
-const isNineGrid = ref(false); // 控制九宫格显示与否)
-
-
 
 
 // 新建VectorSource（矢量信息图层） 来存放台站数据
@@ -583,18 +569,18 @@ 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 isstationName = ref(false); // 站名开关状态 默认关闭
-const isstationCode = ref(true); // 站号开关状态 默认打开
-const isstreet = ref(true); // 街道地图开关状态 默认关闭
+const isjGG = ref(false); // 九宫格开关状态 默认关闭  
+const isboxDrawn = ref(false); // 框选开关状态 默认关闭  boxDrawn 
+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' }]);
@@ -630,7 +616,7 @@ let playInterval: number | null = null; // 播放状态
 // 获取当前时间在一天中的分钟数（从00:00算起）
 const getCurrentMinutesOfDay = () => {
   const now = new Date();
-  return now.getHours() * 60 + now.getMinutes();
+  return now.getHours() * 60 + now.getMinutes() - 1;
 };
 
 const togglePlay = () => {
@@ -645,12 +631,11 @@ const togglePlay = () => {
         value2.value += timeInterval.value;
         getList(); // 获取当前时间点的要素信息
       } else {
-
-        // stopFetchingData(); // 达到最大值时停止播放
+        // stopFetchingData(); // 达到最大值时停止播放 
         getList()
         console.log("停止播放")
       }
-    }, 20000); // 每3秒滑动一次
+    }, 10000); // 每3秒滑动一次
   } else {
     // 暂停播放，清除定时器
     console.log("暂停播放");
@@ -685,7 +670,7 @@ const isToday = (date: Date) => {
   // 判断传入的日期是否在今天的范围内
   return date >= startOfDay && date <= endOfDay;
 };
-// 时间格式化函数
+// 时间格式化函数  
 const formatTooltip = (val: number) => {
   const hours = Math.floor(val / 60).toString().padStart(2, '0');
   const minutes = (val % 60).toString().padStart(2, '0');
@@ -694,9 +679,9 @@ const formatTooltip = (val: number) => {
 
 // // 监听日期选择（value1）和滑块变化（value2）
 watch([value1, value2], ([selectedDate, newValue]) => {
-  const selectedMinutesValue = newValue;
-  // 如果选中日期是今天，则滑块最大值为当前时间的分钟数，否则为 1439（23:59）
-  maxValue.value = isToday(selectedDate) ? getCurrentMinutesOfDay() : 1439;
+  const selectedMinutesValue = newValue;   
+  // 如果选中日期是今天，则滑块最大值为当前时间的分钟数，否则为 1440（翌日00:00）
+  maxValue.value = isToday(selectedDate) ? getCurrentMinutesOfDay() : 1440;
   // 如果当前滑块值超过最大值，则将其限制为最大值
   if (value2.value > maxValue.value) {
     value2.value = maxValue.value;
@@ -708,12 +693,12 @@ watch([value1, value2], ([selectedDate, newValue]) => {
   // 控制数据展示，如果日期是今天且超过当前分钟数，则不展示未来时间的数据
   if (selectedMinutesValue <= maxValue.value) {
     getList(); // 确保当前选择的时间展示对应的要素信息
-  }
+  }  
 });
 
 
 const date = ref<any>(parseTime(new Date(), '{y}-{m}-{d} {h}{i}'))
-// 存放选中要素的数据
+// 存放选中要素的数据 
 const processTableData = ref<any>([]);
 // 停止播放和数据请求的函数
 const stopFetchingData = () => {
@@ -723,18 +708,20 @@ const stopFetchingData = () => {
   }
   isPlay.value = false; // 设置为暂停状态
 };
-const getList = async () => {
 
+
+
+const getList = async () => {  
   // 当滑块值达到最大时间点 实时展示
   if (value2.value >= maxValue.value) {
-    pageable.value.data_type = true; // 重置页码
-    // stopFetchingData(); // 停止获取数据
-    // return [];
+    pageable.value.data_type = true; // 实时数据模式
+    // stopFetchingData(); // 停止获取数据 
+    // return []; 
   }else{
     pageable.value.data_type = false;
   }
   try {
-    // 发送 API 请求并解构返回的数据
+    // 发送 API 请求并解构返回的数据 getDataItemList获取实时数据
     const response = await getDataItemList({
       ...pageable.value,
       // data_item:copiedCustomizeColumns.value,
@@ -748,7 +735,7 @@ const getList = async () => {
     getStations(selectPlatForms.value);
     return dataList; // 返回数据列表
   } catch (error) {
-    console.error("获取数据时出错:", error);
+    // console.error("获取数据时出错:", error);
     return []; // 如果出错，返回空数组以确保数据类型一致
   }
 }
@@ -762,12 +749,9 @@ watch([isstationCode, isstationName], ([newIsStationCode, newIsStationName]) =>
 
 
 
-
-
-
 // 更新图例函数
 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');
@@ -805,21 +789,35 @@ const updateLegend = (
 const stationsStatus=ref<any>([])
 const getStations_Status =async () => {
   const { data } = await getAs_status();
-  stationsStatus.value = data.list
-  console.log(stationsStatus.value,"++++++")
-  console.log(stationsStatus.value,"++++++")
-
+  stationsStatus.value = data.list;
 }
 
+// 更换站点实时图标
 const isLiShi=()=>{
   if (value2.value >= maxValue.value) {
-    return  false
+    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) {
+    return onLine;
+  } else if (status === 2) {
+    return weiLianJie;
+  } else {
+    return weiZhi; // 默认情况，可以根据实际需求调整
+  }
+};
+
 
 const searchData = (code, suffix = "|LEVEL_MAIN") => {
   const searchKey = `${code}${suffix}`;
@@ -829,7 +827,6 @@ const searchData = (code, suffix = "|LEVEL_MAIN") => {
   }
   return item.as_link;
 };
-
 const timeGamp = ref<any>([])
 
 
@@ -838,90 +835,7 @@ const timeGamp = ref<any>([])
 
 
 
-
-
-
-
-
-// 获取站点列表 地图台站信息标注
-// const getStations = (stations) => {
-//   stationSource.clear(); // 清除之前的站点标记
-
-//   // 获取当前时间戳并格式化
-//   const now = new Date();
-//   const timestamp = now.toLocaleString('zh-CN', { hour12: false }); // 系统时间：24小时制格式化
-
-
-//   // const timestamp = value2.value;
-
-
-//   // 更新图例
-//   const selectedElements = copiedCustomizeColumns.value.map((col) => ({
-//     data_name: col.data_name,
-//     data_unit: col.data_unit || '',
-//   }));
-//   updateLegend(selectedElements, timestamp); // 传递时间戳
-
-//   stations.forEach((station) => {
-//     if (station.as_lon && station.as_lat) {
-//       const result = processTableData.value.find(
-//         (item) => item.as_code === station.as_code
-//       );
-//       const latitude = parseFloat(station.as_lat.replace('N', ''));
-//       const longitude = parseFloat(station.as_lon.replace('E', ''));
-
-//       // 打印解析后的经纬度
-//       const featureTextParts = [`${station.as_code}`];
-
-//       // 只显示选中列的数据，不显示单位，无数据时用“/”代替
-//       const selectedElementsText = copiedCustomizeColumns.value
-//         .map((selectedElem) => {
-//           if (result && result[selectedElem.data_id] !== ' ') {
-//             const value = result[selectedElem.data_id] || '/'; // 如果值不存在则显示“暂无数据”
-//             return `${value}`; // 显示名称和数值
-//           } else {
-//             return ' /'; // 如果未找到匹配项，只返回“/”
-//           }
-//         })
-//         .filter((value) => value !== '/')
-//         .join('\n'); // 过滤掉所有“/”，使用换行符分隔每个选中要素
-
-//       // 组合站点基础信息和选中要素信息
-//       const featureText = `${featureTextParts.join('\n')}\n${selectedElementsText}`;
-
-//       // 创建站点的特征（Feature）
-//       const feature = new Feature({
-//         geometry: new Point(fromLonLat([longitude, latitude], 'EPSG:3857')),
-//         name: station.as_name,
-//         code: station.as_code,
-//         description: selectedElementsText,
-//       });
-
-//       // 设置站点图标和文字样式
-//       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,
-//             scale: 0.008,
-//           }),
-//           text: new Text({
-//             text: featureText, // 显示站号、站名和选中要素信息
-//             font: '12px Calibri,sans-serif',
-//             fill: new Fill({ color: '#000' }),
-//             stroke: new Stroke({ color: '#fff', width: 2 }),
-//             offsetY: -20,
-//             textAlign: 'center',
-//           }),
-//         })
-//       );
-
-//       // 将站点特征添加到站点源
-//       stationSource.addFeature(feature);
-//     }
-//   });
-// };
-
-
+// 获取站点列表 地图台站信息标注 
 const getStations = (stations) => {
   stationSource.clear(); // 清除之前的站点标记
 
@@ -947,7 +861,7 @@ const getStations = (stations) => {
     day: '2-digit',
     hour: '2-digit',
     minute: '2-digit',
-    second: '2-digit',
+    // second: '2-digit',
     hour12: false,
   });
 
@@ -965,7 +879,7 @@ const getStations = (stations) => {
       );
       const latitude = parseFloat(station.as_lat.replace('N', ''));
       const longitude = parseFloat(station.as_lon.replace('E', ''));
-
+   
 
       // 打印解析后的经纬度
       // const featureTextParts = [`${station.as_code}`];
@@ -1013,13 +927,8 @@ const getStations = (stations) => {
       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:isLiShi()?logoImg: searchData(station.as_code) === 0 ? weiZhi : searchData(station.as_code) === 1 ? onLine : searchData(station.as_code) === 2 ? weiLianJie : weiZhi, // 图标路径
+            src:getIconPath(station), //调用图标方法
             scale: 0.008,
           }),
           text: new Text({
@@ -1097,6 +1006,7 @@ 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',
       params: { 'LAYERS': layerName, 'TILED': true, 'FORMAT': 'image/png', 'TRANSPARENT': true, 'ENCODING': 'UTF-8' },
       serverType: 'geoserver'
@@ -1107,7 +1017,6 @@ const createWMSLayer = ({ layerName, minZoom, maxZoom, opacity = 1 }) => {
   });
 };
 
-
 let map: any; // 定义为全局变量
 let overviewMapControl: OverviewMap;
 // 地图初始化
@@ -1127,11 +1036,44 @@ const initializeMap = () => {
     view: view
   });
 
+  
+  //实例化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',
       params: {
         'LAYERS': 'basemap:province',  // 选择可见的图层为省级
@@ -1163,11 +1105,12 @@ const initializeMap = () => {
 watch(isEagleEyeOn, (newValue) => {
   overviewMapControl.setCollapsed(!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',
       params: {
         'LAYERS': 'basemap:province',
@@ -1190,7 +1133,7 @@ const getAllRgDataList = async () => {
 
 // 存放选中要素列表
 const copiedCustomizeColumns = ref<any>([]);
-// 要素的选中和取消
+// 要素的选中和取消  
 const toggleSelection = (item) => {
   item.isSelected = !item.isSelected;
 
@@ -1218,7 +1161,7 @@ const toggleSelection = (item) => {
 
 
 
-// 在组件挂载时初始化地图
+// 在组件挂载时初始化地图 
 onMounted(() => {
   getStations_Status()
   getList();