Merge branch 'main' of http://123.132.248.154:10000/HC_YFZX/CaiYuanYiTiHua

src/views/demo/system/achievement/Display/TimeLine.vue

@@ -0,0 +1,223 @@
+<template>
+  <div>
+    <a-row ::gutter="0">
+      <a-col :span="5">
+        <div class="RightBox">
+          <a-tooltip class="box-item" placement="top">
+            <template #title>
+              <span>上一年</span>
+            </template>
+            <a-button type="text" @click="handleSubYear">
+              <Icon icon="bi:chevron-double-left" style="color: #ffffff" :size="30" />
+            </a-button>
+          </a-tooltip>
+          <a-tooltip class="box-item" placement="top">
+            <template #title>
+              <span>上一月</span>
+            </template>
+            <a-button type="text" style="margin-left: 10px" @click="handleSubMouth">
+              <Icon icon="bi:chevron-left" style="color: #ffffff" :size="30" />
+            </a-button>
+          </a-tooltip>
+
+          <a-tooltip class="box-item" placement="top">
+            <template #title>
+              <span>播放/暂停</span>
+            </template>
+            <a-button type="text" style="margin-left: 10px" @click="handlePlay">
+              <Icon v-if="!playSwitch" icon="bi:play-circle" style="color: #ffffff" :size="30" />
+              <Icon v-if="playSwitch" icon="bi:pause-circle" style="color: #ffffff" :size="30" />
+            </a-button>
+          </a-tooltip>
+
+          <a-tooltip class="box-item" placement="top">
+            <template #title>
+              <span>下一月</span>
+            </template>
+            <a-button type="text" style="margin-left: 10px" @click="handleAddMouth">
+              <Icon icon="bi:chevron-right" style="color: #ffffff" :size="30" />
+            </a-button>
+          </a-tooltip>
+          <a-tooltip class="box-item" placement="top">
+            <template #title>
+              <span>下一年</span>
+            </template>
+            <a-button type="text" style="margin-left: 10px" @click="handleAddYear">
+              <Icon icon="bi:chevron-double-right" style="color: #ffffff" :size="30" />
+            </a-button>
+          </a-tooltip>
+        </div>
+      </a-col>
+      <a-col :span="19">
+        <div class="timeBox">
+          <a-slider
+            v-model:value="value"
+            :tooltipOpen="true"
+            :tip-formatter="getValue"
+            :marks="marks"
+            :step="1"
+            :max="maxDays"
+            :min="1"
+            @afterChange="sliderChange"
+          >
+            <template #mark="{ label, point }">
+              <template v-if="label.slice(-2) == '01'">
+                <span :style="{ color: 'white' }">{{ label }}</span>
+              </template>
+              <template v-if="label.slice(-4) == '1231'">
+                <span :style="{ color: 'white' }">{{ label }}</span>
+              </template>
+            </template>
+          </a-slider>
+        </div>
+      </a-col>
+    </a-row>
+    <!--  </div>
+    <div class="timeBox">
+    -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+  // vue
+  import { ref, watch, computed, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from 'vue';
+  import Icon from '@/components/Icon/Icon.vue';
+  import dayjs from 'dayjs';
+
+  const emit = defineEmits(['handleNowValueChange']);
+
+  const value = ref<number>(parseInt(dayjs().dayOfYear()));
+  const marks = ref<Record<number, any>>();
+  const maxDays = ref(365);
+
+  const calculateDayOfYearAndDates = (time) => {
+    const startDate = dayjs(time).startOf('year');
+    const endDate = dayjs(time).endOf('year');
+    // 初始化 marks 为空对象
+    marks.value = {};
+    maxDays.value = parseInt(endDate.dayOfYear());
+    for (
+      let currentDate = startDate;
+      currentDate.isBefore(endDate);
+      currentDate = currentDate.add(1, 'day')
+    ) {
+      const dayOfYear = parseInt(currentDate.dayOfYear());
+      const dateString = currentDate.format('YYYYMMDD');
+      marks.value[dayOfYear] = dateString;
+    }
+  };
+
+  const getValue = (key: number) => {
+    if (marks.value) {
+      return marks.value[key];
+    } else {
+      return key;
+    }
+  };
+
+  // 发生改变
+  const sliderChange = (key: number) => {
+    emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(value.value))]);
+    playSwitch.value = false;
+  };
+
+  // 播放/暂停
+  const playSwitch = ref(false);
+  const handlePlay = () => {
+    playSwitch.value = !playSwitch.value;
+    if (playSwitch.value && value.value < maxDays.value) {
+      addValue();
+    }
+  };
+
+  function addValue() {
+    console.log(playSwitch.value);
+    if (playSwitch.value) {
+      setTimeout(() => {
+        value.value = parseInt(dayjs(getValue(value.value)).add(7, 'day').dayOfYear());
+        emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(value.value))]);
+        addValue();
+      }, 1000);
+    }
+  }
+
+  // 上一年
+  const handleSubYear = () => {
+    if (isLeapYear(dayjs(getValue(value.value)).year()) && value.value > 58) {
+      value.value -= 1;
+    }
+    if (isLeapYear(dayjs(getValue(value.value)).year() - 1) && value.value > 58) {
+      value.value += 1;
+    }
+    calculateDayOfYearAndDates(dayjs(getValue(value.value)).add(-1, 'year'));
+    emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(value.value))]);
+    playSwitch.value = false;
+  };
+
+  // 上一月
+  const handleSubMouth = () => {
+    if (value.value <= 31) {
+      calculateDayOfYearAndDates(dayjs(getValue(value.value)).add(-1, 'month'));
+      value.value = parseInt(dayjs(getValue(value.value)).add(11, 'month').dayOfYear());
+    } else {
+      value.value = parseInt(dayjs(getValue(value.value)).add(-1, 'month').dayOfYear());
+    }
+    emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(value.value))]);
+    playSwitch.value = false;
+  };
+
+  // 下一月
+  const handleAddMouth = () => {
+    if (value.value >= parseInt(dayjs(dayjs().year() + '-12-01').dayOfYear())) {
+      calculateDayOfYearAndDates(dayjs(getValue(value.value)).add(1, 'month'));
+      value.value = parseInt(dayjs(getValue(value.value)).add(-11, 'month').dayOfYear());
+    } else {
+      value.value = parseInt(dayjs(getValue(value.value)).add(1, 'month').dayOfYear());
+    }
+    emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(value.value))]);
+    playSwitch.value = false;
+  };
+
+  // 下一年
+  const handleAddYear = () => {
+    if (isLeapYear(dayjs(getValue(value.value)).year()) && value.value > 58) {
+      value.value -= 1;
+    }
+    if (isLeapYear(dayjs(getValue(value.value)).year() + 1) && value.value > 58) {
+      value.value += 1;
+    }
+    calculateDayOfYearAndDates(dayjs(getValue(value.value)).add(1, 'year'));
+    emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(value.value))]);
+    playSwitch.value = false;
+  };
+
+  /// 判断是否为闰年的函数
+  function isLeapYear(y: number): boolean {
+    return (y % 4 === 0 && y % 100 !== 0) || y % 400 === 0;
+  }
+
+  onMounted(() => {
+    calculateDayOfYearAndDates(dayjs());
+  });
+</script>
+<style lang="less" scoped>
+  .timeBox {
+    position: relative;
+    top: 40px;
+    width: 900px;
+  }
+
+  .RightBox {
+    position: relative;
+    top: 40px;
+    width: 300px;
+  }
+
+  .box-item {
+    justify-content: center;
+    width: 25px;
+    Icon {
+      display: flex;
+    }
+  }
+</style>

src/views/demo/system/achievement/Display/index.vue

@@ -4,12 +4,18 @@
       <div class="title"> 图层列表 </div>
       <div class="case-tree">
         <a-directory-tree
+          v-model:expandedKeys="expandedKeys"
           v-model:selectedKeys="selectedKeys"
+          v-model:checkedKeys="checkedKeys"
+          multiple
           :tree-data="treeData"
           @select="onSelect"
         />
       </div>
     </div>
+    <div class="timeLineBox">
+      <TimeLine @handleNowValueChange="handleNowValueChange" />
+    </div>
     <div>
       <MapComponent
         ref="mapboxComponentRef"
@@ -37,26 +43,17 @@
   import type { TreeProps } from 'ant-design-vue';
   // vben
   import { useMessage } from '@/hooks/web/useMessage';
+  // 组件
   import MapComponent from '@/views/demo/system/geoservermanagement/clound/mapComponent.vue';
+  import TimeLine from './TimeLine.vue';
   import {
-    AchievementManageAddImageexif,
-    AchievementManageIntactById,
-    AchievementManageAddTask,
     AchievementManageListTask,
     AchievementManageListDroneShpImageexif,
-    GeoTiffManagerUpdateGeoTiff,
     GeoTiffManagerLoadPage,
-    GeoTiffManagerGet,
     getGeomData,
-    getStatisticalList,
-    ShpGeoLayerAdd,
     ShpGeoLayerLoadPage,
-    ShpGeoLayerGet,
-    ShpGeoLayerUpdateLayer,
-    ShpGeoLayerDelete,
-    ShpGeoLayerParseShpInfo,
   } from '@/api/demo/system';
-  import { prepareTreeData, prepareTreeData2, prepareTreeData3 } from './util';
+  import { prepareTreeData } from './util';
   import dayjs from 'dayjs';
   // 图片路径拼接
   import { getAppEnvConfig } from '@/utils/env';
@@ -66,12 +63,18 @@
   const { createMessage } = useMessage();
 
   const selectedKeys = ref<string[]>([]);
+  const expandedKeys = ref<string[]>(['1', '2', '3']);
+  const checkedKeys = ref<string[]>([]);
   const treeData: any = ref(prepareTreeData);
   let tableData1: any = [];
   let tableData2: any = [];
   let tableData3: any = [];
+  let tableData3_id_list: any = [];
   let tableData3_tupian: any = [];
 
+  let startTime = dayjs().startOf('year').format('YYYY-MM-DD HH:mm:ss');
+  let endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
+
   // 右边树的数据
   function fetch() {
     // 矢量图层
@@ -108,6 +111,9 @@
       pageSize: 100,
     }).then((res) => {
       tableData3 = res.items;
+      res.items.forEach((item) => {
+        tableData3_id_list.push(item.id);
+      });
       tableData3_tupian = [];
       treeData.value[2].children = [];
       res.items.forEach((item1) => {
@@ -162,88 +168,81 @@
 
   // 地图ref
   const mapboxComponentRef = ref();
+  let selectedKeys_now: any;
+  let info_now: any;
   // 树选中
   const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
-    console.log(177, selectedKeys, info);
+    // console.log(177, selectedKeys, info);
-    if (!['1', '2', '3'].includes(selectedKeys[selectedKeys.length - 1])) {
+    selectedKeys_now = selectedKeys;
-      // 图层管理-图层
+    info_now = info;
-      if (info?.node?.parent?.key == '1') {
+    let filter_hangfei = [];
-        tableData1.forEach((data) => {
+    selectedKeys.forEach((selectedKey) => {
-          if (selectedKeys[0] == data.id) {
+      if (!['1', '2', '3'].includes(selectedKey)) {
-            // // 获取图层中心
+        // 图层管理-图层
-            // getGeomData({ dataTable: data.dataTable }).then((res) => {
+        if (info?.node?.parent?.key == '1') {
-            //   if (res == undefined) {
+          let tabledata = getDataByTypeAndTime(1);
-            //     createMessage.error('数据库不存在此图层的数据表');
+          tabledata.forEach((data) => {
-            //   } else {
+            if (selectedKey == data.id) {
-            //     let st: any = res.slice(6, -1);
+              mapboxComponentRef.value.GeoserverManagementRaster(
-            //     st = st.split(' ');
+                data,
-            mapboxComponentRef.value.GeoserverManagementRaster(
+                [118.30207505530701, 35.30123435040745],
-              data,
+                7.848587811931849,
-              [118.30207505530701, 35.30123435040745],
+              );
-              7.848587811931849,
+            }
-            );
+          });
-            //   }
+        }
-            // });
+        // 影像管理-图层
-          }
+        else if (info?.node?.parent?.key == '2') {
-        });
+          let tabledata = getDataByTypeAndTime(2);
-      }
+          tabledata.forEach((data) => {
-      // 影像管理-图层
+            if (selectedKey == data.id) {
-      else if (info?.node?.parent?.key == '2') {
+              mapboxComponentRef.value.GeoTiffManagerRaster(
-        tableData2.forEach((data) => {
+                data,
-          if (selectedKeys[0] == data.id) {
+                [118.30207505530701, 35.30123435040745],
-            // let bbox = getBboxFromUrl(data.accessUrl);
+                7.848587811931849,
-            // let lngLat = getCenterPoint(bbox);
+              );
-            mapboxComponentRef.value.GeoTiffManagerRaster(
+            }
-              data,
+          });
-              [118.30207505530701, 35.30123435040745],
+        }
-              7.848587811931849,
+        // 航飞图片-图层
-            );
+        else if (tableData3_id_list.includes(selectedKey)) {
-          }
+          tableData3.forEach((data) => {
-        });
+            if (selectedKey == data.id) {
-      }
+              if (data.imageCount > 0) {
-      // 航飞图片-图层
+                tableData3_tupian.forEach((tupian) => {
-      else if (info?.node?.parent?.key == '3') {
+                  if (tupian.taskId == data.id) {
-        // console.log('3', selectedKeys, info);
+                    if (
-        tableData3.forEach((data) => {
+                      dayjs(startTime).isBefore(data.uploadTime) &&
-          if (selectedKeys[0] == data.id) {
+                      dayjs(endTime).isAfter(data.uploadTime)
-            AchievementManageListDroneShpImageexif({
+                    ) {
-              pageIndex: 1,
+                      filter_hangfei.push(tupian);
-              pageSize: data.imageCount,
+                    }
-            }).then((res) => {
+                  }
-              if (res.items.length > 0) {
+                });
-                handlerUpdateTaskLayerData(res.items);
               } else {
                 createMessage.info('当前选中的任务并无航飞图片');
               }
-            });
+            }
-          }
+          });
-        });
+        }
-      }
+        // 航飞图片-任务
-      // 航飞图片-任务
+        else {
-      else {
+          let filter = tableData3_tupian.filter((item) => item.id == selectedKey);
-        let filter = tableData3_tupian.filter((item) => item.id == selectedKeys);
+          filter?.forEach((f) => {
-        handlerUpdateTaskLayerData(filter);
+            filter_hangfei.push(f);
+          });
+        }
       }
+    });
+    console.log(236, filter_hangfei);
+    // 航飞图片-图层、任务
+    if (filter_hangfei.length > 0) {
+      handlerUpdateTaskLayerData(filter_hangfei);
+    } else {
+      mapboxComponentRef.value.clearTaskLayer('AchievementManageRaster');
     }
   };
 
-  // 影像管理-从参数中获取 bbox 的值
-  function getBboxFromUrl(url) {
-    const urlObj = new URL(url);
-    const params = new URLSearchParams(urlObj.search);
-    const bbox = params.get('bbox');
-    return bbox;
-  }
-
-  // 影像管理-计算中心点
-  function getCenterPoint(bbox) {
-    const coords = bbox.split(',').map((coord) => parseFloat(coord));
-    const [minLon, minLat, maxLon, maxLat] = coords;
-    const centerLon = (minLon + maxLon) / 2;
-    const centerLat = (minLat + maxLat) / 2;
-    return [centerLon, centerLat];
-  }
-
   // 航飞图片-无人机图层
   function handlerUpdateTaskLayerData(tasklist) {
     let taskLayerGeoJson = {
@@ -272,8 +271,6 @@
       taskLayerGeoJson.features.push(feature);
     });
 
-    // 确定中心点和zoom等级
-    // let result = calculateCenterAndZoom(lngList, latList);
     // 航飞图片-图层
     mapboxComponentRef.value.AchievementManageRaster(
       taskLayerGeoJson,
@@ -297,30 +294,41 @@
     }
   }
 
-  // 航飞图片-确定中心点和zoom等级
+  // 时间轴筛选数据
-  function calculateCenterAndZoom(lngList, latList) {
+  function getDataByTypeAndTime(type): any {
-    // 检查输入的有效性
+    let result: any = [];
-    if (!lngList || !latList || lngList.length !== latList.length) {
+    switch (type) {
-      throw new Error('');
+      case 1:
+        tableData1.forEach((data) => {
+          if (
+            dayjs(startTime).isBefore(data.createTime) &&
+            dayjs(endTime).isAfter(data.createTime)
+          ) {
+            result.push(data);
+          }
+        });
+        break;
+      case 2:
+        tableData2.forEach((data) => {
+          if (
+            dayjs(startTime).isBefore(data.createTime) &&
+            dayjs(endTime).isAfter(data.createTime)
+          ) {
+            result.push(data);
+          }
+        });
+        break;
     }
-    // 计算中心点
+    return result;
-    const centerLng = lngList.reduce((acc, lng) => acc + lng, 0) / lngList.length;
-    const centerLat = latList.reduce((acc, lat) => acc + lat, 0) / latList.length;
-    // 计算经纬度范围
-    const minLng = Math.min(...lngList);
-    const maxLng = Math.max(...lngList);
-    const minLat = Math.min(...latList);
-    const maxLat = Math.max(...latList);
-    const deltaLng = maxLng - minLng;
-    const deltaLat = maxLat - minLat;
-    // 估算合适的缩放级别
-    let zoom = 14 - Math.log2(Math.max(deltaLng, deltaLat)); // 直接使用最大偏移量
-    zoom = Math.max(8, Math.min(15, zoom)); // 确保缩放级别在合理范围内
-    return {
-      center: [centerLng, centerLat],
-      zoomLevel: zoom,
-    };
   }
+
+  // 时间轴发生改变返回值
+  function handleNowValueChange(value) {
+    startTime = dayjs(value[0]).startOf('year').format('YYYY-MM-DD HH:mm:ss');
+    endTime = dayjs(value[1]).format('YYYY-MM-DD HH:mm:ss');
+    onSelect(selectedKeys_now, info_now);
+  }
+
   onMounted(() => {
     fetch();
   });
@@ -356,13 +364,13 @@
 </script>
 <style type="less" scoped>
   .case-tree-container {
-    width: 300px;
+    width: 320px;
     height: 720px;
     background: #041b36;
     position: absolute;
     z-index: 1;
-    top: 100px;
+    bottom: 20px;
-    margin-bottom: 20px;
+    left: 20px;
   }
 
   .title {
@@ -384,6 +392,15 @@
     overflow: auto;
   }
 
-  ::v-deep .case-tree {
+  .timeLineBox {
+    position: absolute;
+    z-index: 1;
+    left: 420px;
+    bottom: 20px;
+    width: 1200px;
+    height: 120px;
+    border: 2px #155dd8;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 60px / 60px;
   }
 </style>

src/views/demo/system/achievement/index.vue

@@ -9,9 +9,6 @@
     <a-tab-pane key="3" tab="航飞图片">
       <AchievementManage ref="AchievementManageRef" />
     </a-tab-pane>
-    <a-tab-pane key="4" tab="成果展示">
-      <Display ref="DisplayRef" />
-    </a-tab-pane>
   </a-tabs>
 </template>
 <script setup lang="ts">
@@ -20,17 +17,14 @@
   import GeoserverManagement from '@/views/demo/system/geoservermanagement/index.vue';
   import GeoTiffManager from './GeoTiffManager/index.vue';
   import AchievementManage from './AchievementManage/index.vue';
-  import Display from './Display/index.vue';
 
-  const activeKey = ref('4');
+  const activeKey = ref('1');
   // 图层管理
   const GeoserverManagementRef = ref();
   // 影像管理
   const GeoTiffManagerRef = ref();
   // 航飞图片
   const AchievementManageRef = ref();
-  // 成果展示
-  const DisplayRef = ref();
 
   function changeTabs(activeKey) {
     console.log(activeKey);
@@ -40,8 +34,6 @@
       // 影像管理
     } else if (activeKey == 3) {
       // 航飞图片
-    } else if (activeKey == 4) {
-      // 成果展示
     }
   }
 </script>

src/views/demo/system/geoservermanagement/clound/mapComponent.vue

@@ -331,6 +331,7 @@
     GeoTiffManagerRaster,
     AchievementManageRaster,
     resize,
+    clearTaskLayer,
   });
 </script>
 <style type="less" scoped>