代码提交

src/views/alarm/gis/index.vue

@@ -429,6 +429,7 @@ import { toStringHDMS } from 'ol/coordinate.js';
 
 
 
+
 // 存放所有要素的数据
 const allElementList = ref([
   { id: 1, data_name: '气温', data_type: '温湿度', isSelected: false },
@@ -680,7 +681,7 @@ const popoverOverlay = ref<Overlay | null>(null);
 
 /** 底部时间轴 */
 const timeInterval = ref(2); // 默认时间间隔为2分钟
-const getCurrentTimestamp = (): number => {// 返回当前时间戳
+const getCurrentTimestamp = (): number => {// 返回当天时间戳
   return new Date().getTime();
 };
 
@@ -731,11 +732,14 @@ const togglePlay = () => {
     // 开始播放，设置定时器
     playInterval = window.setInterval(() => {
       const currentTime = getCurrentTimestamp(); // 当前时间戳
-      maxTime = getCurrentMinutesOfDay(); // 更新最大时间
-      if (value2.value < currentTime) {
+      const time=new Date(value1.value).getTime()
+      maxTime = getCurrentMinutesOfDay(); // 更新最大时间   1
+
+      if (time + value2.value*60*1000 + timeInterval.value*60*1000 < currentTime  ) {
         value2.value += timeInterval.value;
         getList(); // 获取当前时间点的要素信息
       } else {
+        value2.value = maxTime;
         getList(); // 获取当前时间点的要素信息
       }
     }, 5000); // 每10秒滑动一次
@@ -747,31 +751,7 @@ const togglePlay = () => {
     }
   }
 };
-// const togglePlay = () => { 
-//   // isPlay.value = !isPlay.value;
-//   if (isPlay.value) {
-//     // 开始播放，设置定时器
-//     playInterval = window.setInterval(() => {
-//       const currentTime = getCurrentTimestamp(); // 当前时间戳
-//       maxTime = getCurrentMinutesOfDay(); // 更新最大时间
-
-//       // 自动更新滑块值并获取要素信息
-//       if (value2.value < currentTime) {
-//         value2.value += timeInterval.value; // 滑块值前进
-//         getList(); // 获取当前时间点的要素信息
-//       } else {
-//         getList(); // 获取当前时间点的要素信息
-//       }
-//     }, 5000); // 每5秒滑动一次
-//   } else {
-//     // 暂停播放，清除定时器
-//     console.log("暂停播放");
-//     if (playInterval !== null) {
-//       clearInterval(playInterval);
-//       playInterval = null;
-//     }
-//   }
-// };
+
 // 监听滑块变化
 const onSliderChange = (val: number) => {
   // 当滑块手动变化时，暂停播放
@@ -874,9 +854,6 @@ const getList = async () => {
         time_space: 1 // 时间间隔
       }
     }
-
-
-
     const response = await getDataItemList(pagea);
     const dataList = response.data?.list ?? []; // 使用空值合并操作符保证 dataList 总是为数组
     processTableData.value = dataList; // 存储数据，避免 null 值
@@ -1221,7 +1198,28 @@ const initializeOverviewMap = () => {
 const getStations = (stations) => {
   stationSource.clear(); // 清除之前的站点标记
 
-  // 获取选中的日期和滑块值，并计算时间戳
+  // // 获取选中的日期和滑块值，并计算时间戳
+  // const selectedDate = value1.value; // 选中日期
+  // const minutesOfDay = value2.value; // 滑块值（分钟数）
+
+  // // 将日期和分钟数合并为完整时间戳
+  // const hours = Math.floor(minutesOfDay / 60);
+  // const minutes = minutesOfDay % 60;
+  // // 时间戳格式
+  // const timestamp = new Date(selectedDate!.getFullYear(), selectedDate!.getMonth(), selectedDate!.getDate(), hours, minutes );
+
+  // // 格式化时间戳为 'yyyy-MM-dd HH:mm:ss'
+  // const formattedTimestamp = timestamp.toLocaleString('zh-CN', {
+  //   year: 'numeric',
+  //   month: '2-digit',
+  //   day: '2-digit',
+  //   hour: '2-digit',
+  //   minute: '2-digit',
+  //   // second: '2-digit',
+  //   hour12: false,
+  // });
+
+
   const selectedDate = value1.value; // 选中日期
   const minutesOfDay = value2.value; // 滑块值（分钟数）
 
@@ -1235,17 +1233,22 @@ const getStations = (stations) => {
     hours,
     minutes
   );
+  const formattedTimestamp = parseTime(timestamp, '{y}-{m}-{d} {h}:{i}'); // 格式化时间戳为 'yyyy-MM-dd HH:mm:ss'
+
+  // 使用UTC时间来格式化时间戳为 'yyyy-MM-dd HH:mm:ss'
+  // const year = timestamp.getUTCFullYear();
+  // const month = ('0' + (timestamp.getUTCMonth() + 1)).slice(-2);
+  // const day = ('0' + timestamp.getUTCDate()).slice(-2);
+  // const hour = ('0' + timestamp.getUTCHours()).slice(-2);
+  // const minute = ('0' + timestamp.getUTCMinutes()).slice(-2);
+  // const second = ('0' + timestamp.getUTCSeconds()).slice(-2);   `${year}-${month}-${day} ${hour}:${minute}`
+
+  
+
+
+
+
 
-  // 格式化时间戳为 'yyyy-MM-dd HH:mm:ss'
-  const formattedTimestamp = timestamp.toLocaleString('zh-CN', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    // second: '2-digit',
-    hour12: false,
-  });
 
   // 更新图例
   const selectedElements = copiedCustomizeColumns.value.map((col) => ({
@@ -1258,151 +1261,6 @@ const getStations = (stations) => {
 
 
 
-  // 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', ''));
-
-  //     let featureTextParts: string[] = [];
-
-  //     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 name 可用
-  //       featureTextParts = [`${station.as_name}`];
-  //     }
-
-  //     console.log(copiedCustomizeColumns.value,'copiedCustomizeColumns.value');
-
-  //     // 只显示选中列的数据，不显示单位，无数据时用“/”代替
-  //     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: getIconPath(station), //调用图标方法
-  //           scale: 0.008,
-  //         }),
-  //         text: new Text({
-  //           text: featureText, // 显示站号、站名和选中要素信息
-  //           font: '15px Calibri,sans-serif',
-  //           fill: new Fill({ color: '#000' }),
-  //           stroke: new Stroke({ color: '#fff', width: 2 }),
-  //           offsetY: -20,
-  //           textAlign: 'center',
-  //         }),
-  //       })
-  //     );
-  //     // 将站点特征添加到站点源
-  //     stationSource.addFeature(feature);
-  //   }
-  // });
-
-  /* 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', ''));
- 
-     let featureTextParts: string[] = [];
- 
-     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 name 可用
-       featureTextParts = [`${station.as_name}`];
-     }
- 
-     // 获取当前站点状态
-     const status = searchData(station.as_code);
- 
-     // 只显示选中列的数据，不显示单位，无数据时用“/”代替
-     // 当 status === 0 或 status === 2 时，不展示历史数据
-     const selectedElementsText = 
-       status === 1 // 只有实时状态才展示要素信息
-         ? 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')}${selectedElementsText ? `\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: getIconPath(station), // 调用图标方法
-           scale: 0.008,
-         }),
-         text: new Text({
-           text: featureText, // 显示站号、站名和选中要素信息
-           font: '15px Calibri,sans-serif',
-           fill: new Fill({ color: '#000' }),
-           stroke: new Stroke({ color: '#fff', width: 2 }),
-           offsetY: -20,
-           textAlign: 'center',
-         }),
-       })
-     );
- 
-     // 将站点特征添加到站点源
-     stationSource.addFeature(feature);
-   }
- });*/
-
 
   // 可正常展示气温要素默认展示信息
   stations.forEach((station) => {
@@ -1485,108 +1343,6 @@ const getStations = (stations) => {
 
 
 
-
-
-
-
-
-
-  /*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 status = searchData(station.as_code);
-  
-      // 生成站点图标和信息
-      const featureTextParts: string[] = [];
-      if (isstationCode.value && isstationName.value) {
-        featureTextParts.push(station.as_code, station.as_name);
-      } else if (isstationCode.value) {
-        featureTextParts.push(station.as_code);
-      } else if (isstationName.value) {
-        featureTextParts.push(station.as_name);
-      }
-  
-      // 获取选中要素信息
-      const selectedElementsText = copiedCustomizeColumns.value
-        .map((selectedElem) => {
-          if (status === 0 || status === 2) {
-            return ' /'; // 无数据
-          } else {
-            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')}${selectedElementsText ? `\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: getIconPath(station),
-            scale: 0.008,
-          }),
-          text: new Text({
-            text: featureText,
-            font: '15px Calibri,sans-serif',
-            fill: new Fill({ color: '#000' }),
-            stroke: new Stroke({ color: '#fff', width: 2 }),
-            offsetY: -20,
-            textAlign: 'center',
-          }),
-        })
-      );
-  
-      // 将站点特征添加到站点源
-      stationSource.addFeature(feature);
-  
-      // 计算站点图标的坐标
-      // const map = ...; // 获取地图实例
-      const pixel = map.getPixelFromCoordinate(fromLonLat([longitude, latitude], 'EPSG:4326'));
-      const x = pixel[0];
-      const y = pixel[1];
-  
-      // 创建九宫格元素并添加到地图容器
-      const nineGridBox = document.createElement('div');
-      nineGridBox.classList.add('grid-container');
-      nineGridBox.style.position = 'absolute';
-      nineGridBox.style.left = `${x}px`;
-      nineGridBox.style.top = `${y + 30}px`; // 图标下方30px（可调整）
-  
-      // 填充九宫格内容
-      nineGridBox.innerHTML = `
-        <div v-for="item in 9" :key="item" class="grid-item">
-          ${item}
-        </div>
-      `;
-  
-      // 将九宫格盒子添加到地图容器
-      document.querySelector('.map-container')?.appendChild(nineGridBox); // 假设 .map-container 是地图容器的类名
-    }
-  });*/
-
-
 };
 
 
@@ -1616,6 +1372,8 @@ const updateLegend = (
   selectedElements: Array<{ data_name: string; data_unit: string }>,
   timestamp: string
 ) => {
+  console.log("timestamp11111111",timestamp);
+  
   const legendContainer = document.getElementById('map-legend');
   if (!legendContainer) return;
 
@@ -1632,7 +1390,6 @@ const updateLegend = (
   // 添加时间
   const timeItem = document.createElement('div');
   timeItem.className = 'legend-item time-item';
-  // timeItem.textContent = `当前时间: ${timestamp}`; getCurrentTimestamp
   timeItem.textContent = `当前时间: ${timestamp}`;
   legendContainer.appendChild(timeItem);
 
@@ -1653,18 +1410,6 @@ const updateLegend = (
 // 查询所有人工要素字典表
 const elementList = ref<any>([])
 
-// const getAllRgDataList = async () => {
-//   const { data } = await getRgDataList();
-//   elementList.value = data.list
-
-//   // 如果需要根据选中的要素立即更新数据，强制触发一次数据加载
-//   if (copiedCustomizeColumns.value.length > 0) {
-//     // 调用 getList() 来加载与选中要素相关的数据
-//     getList();
-//   }
-
-// };
-
 const getAllRgDataList = async () => {
   const { data } = await getRgDataList();
   elementList.value = data.list;
@@ -1685,22 +1430,6 @@ const getAllRgDataList = async () => {
   }
 };
 
-
-// 要素的选中和取消  
-// 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);
-//   }
-//   //根据要素查询数据
-//   pageable.value.data_items = copiedCustomizeColumns.value
-//   getList()
-// };
 const toggleSelection = (item) => {
   item.isSelected = !item.isSelected;