From f869482c0152e0ecba58ff5e9525173d5cbd4c50 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Sat, 31 Aug 2024 16:20:20 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=88=90=E6=9E=9C=E5=B1=95=E7=A4=BA-?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E8=BD=B4=E7=AC=AC=E4=B8=80=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/achievement/Display/TimeLine.vue   | 229 +++++++++++++++++
 .../demo/system/achievement/Display/index.vue | 236 ++++++++++--------
 src/views/demo/system/achievement/index.vue   |  10 +-
 .../clound/mapComponent.vue                   |   1 +
 4 files changed, 356 insertions(+), 120 deletions(-)
 create mode 100644 src/views/demo/system/achievement/Display/TimeLine.vue

diff --git a/src/views/demo/system/achievement/Display/TimeLine.vue b/src/views/demo/system/achievement/Display/TimeLine.vue
new file mode 100644
index 00000000..ec228122
--- /dev/null
+++ b/src/views/demo/system/achievement/Display/TimeLine.vue
@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <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="margin-left: 5px; color: #ffffff" :size="20" />
+        </a-button>
+      </a-tooltip>
+      <a-tooltip class="box-item" placement="top">
+        <template #title>
+          <span>上一月</span>
+        </template>
+        <a-button type="text" @click="handleSubMouth">
+          <Icon icon="bi:chevron-left" style="margin-left: 5px; color: #ffffff" :size="20" />
+        </a-button>
+      </a-tooltip>
+
+      <a-tooltip class="box-item" placement="top">
+        <template #title>
+          <span>播放/暂停</span>
+        </template>
+        <a-button type="text" @click="handlePlay">
+          <Icon
+            v-if="!playSwitch"
+            icon="bi:play"
+            style="margin-left: 5px; color: #ffffff"
+            :size="23"
+          />
+          <Icon
+            v-if="playSwitch"
+            icon="bi:pause"
+            style="margin-left: 5px; color: #ffffff"
+            :size="23"
+          />
+        </a-button>
+      </a-tooltip>
+
+      <a-tooltip class="box-item" placement="top">
+        <template #title>
+          <span>下一月</span>
+        </template>
+        <a-button type="text" @click="handleAddMouth">
+          <Icon icon="bi:chevron-right" style="margin-left: 5px; color: #ffffff" :size="20" />
+        </a-button>
+      </a-tooltip>
+      <a-tooltip class="box-item" placement="top">
+        <template #title>
+          <span>下一年</span>
+        </template>
+        <a-button type="text" @click="handleAddYear">
+          <Icon icon="bi:chevron-double-right" style="color: #ffffff" :size="20" />
+        </a-button>
+      </a-tooltip>
+    </div>
+    <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.splice(-2) == '01'"> -->
+          <!-- <span :style="{ color: 'white' }">{{ label.splice(0, 6) }}</span> -->
+          <!-- </template> -->
+          <template>
+            <span :style="{ color: 'white' }">{{ label }}</span>
+          </template>
+        </template>
+      </a-slider>
+    </div>
+  </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() {
+    if (playSwitch.value) {
+      setTimeout(() => {
+        if (playSwitch.value) {
+          value.value = parseInt(dayjs(getValue(value.value)).add(7, 'day').dayOfYear());
+          emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(value.value))]);
+          addValue();
+        }
+      }, 5000);
+    }
+  }
+
+  // 上一年
+  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: 55px;
+    left: 250px;
+    width: 900px;
+  }
+
+  .RightBox {
+    position: absolute;
+    border: 2px red;
+    top: 45px;
+    left: 30px;
+    width: 300px;
+  }
+
+  .box-item {
+    width: 25px;
+
+    Icon {
+      display: flex;
+      justify-content: center;
+    }
+  }
+</style>
diff --git a/src/views/demo/system/achievement/Display/index.vue b/src/views/demo/system/achievement/Display/index.vue
index a54fb2bb..aee953db 100644
--- a/src/views/demo/system/achievement/Display/index.vue
+++ b/src/views/demo/system/achievement/Display/index.vue
@@ -5,17 +5,21 @@
       <div class="case-tree">
         <a-directory-tree
           v-model:selectedKeys="selectedKeys"
+          multiple
           :tree-data="treeData"
           @select="onSelect"
         />
       </div>
     </div>
+    <div class="timeLineBox">
+      <TimeLine @handleNowValueChange="handleNowValueChange" />
+    </div>
     <div>
       <MapComponent
         ref="mapboxComponentRef"
         :style="{
           position: 'absolute',
-          height: `calc(100vh - 90px)`,
+          height: `calc(100vh)`,
           width: `100%`,
           marginLeft: '6px',
           top: '0px',
@@ -37,26 +41,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';
@@ -70,8 +65,12 @@
   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 +107,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 +164,81 @@
 
   // 地图ref
   const mapboxComponentRef = ref();
+  let selectedKeys_now: any;
+  let info_now: any;
   // 树选中
   const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {
-    console.log(177, selectedKeys, info);
-    if (!['1', '2', '3'].includes(selectedKeys[selectedKeys.length - 1])) {
-      // 图层管理-图层
-      if (info?.node?.parent?.key == '1') {
-        tableData1.forEach((data) => {
-          if (selectedKeys[0] == data.id) {
-            // // 获取图层中心
-            // getGeomData({ dataTable: data.dataTable }).then((res) => {
-            //   if (res == undefined) {
-            //     createMessage.error('数据库不存在此图层的数据表');
-            //   } else {
-            //     let st: any = res.slice(6, -1);
-            //     st = st.split(' ');
-            mapboxComponentRef.value.GeoserverManagementRaster(
-              data,
-              [118.30207505530701, 35.30123435040745],
-              7.848587811931849,
-            );
-            //   }
-            // });
-          }
-        });
-      }
-      // 影像管理-图层
-      else if (info?.node?.parent?.key == '2') {
-        tableData2.forEach((data) => {
-          if (selectedKeys[0] == data.id) {
-            // let bbox = getBboxFromUrl(data.accessUrl);
-            // let lngLat = getCenterPoint(bbox);
-            mapboxComponentRef.value.GeoTiffManagerRaster(
-              data,
-              [118.30207505530701, 35.30123435040745],
-              7.848587811931849,
-            );
-          }
-        });
-      }
-      // 航飞图片-图层
-      else if (info?.node?.parent?.key == '3') {
-        // console.log('3', selectedKeys, info);
-        tableData3.forEach((data) => {
-          if (selectedKeys[0] == data.id) {
-            AchievementManageListDroneShpImageexif({
-              pageIndex: 1,
-              pageSize: data.imageCount,
-            }).then((res) => {
-              if (res.items.length > 0) {
-                handlerUpdateTaskLayerData(res.items);
+    // console.log(177, selectedKeys, info);
+    selectedKeys_now = selectedKeys;
+    info_now = info;
+    let filter_hangfei = [];
+    selectedKeys.forEach((selectedKey) => {
+      if (!['1', '2', '3'].includes(selectedKey)) {
+        // 图层管理-图层
+        if (info?.node?.parent?.key == '1') {
+          let tabledata = getDataByTypeAndTime(1);
+          tabledata.forEach((data) => {
+            if (selectedKey == data.id) {
+              mapboxComponentRef.value.GeoserverManagementRaster(
+                data,
+                [118.30207505530701, 35.30123435040745],
+                7.848587811931849,
+              );
+            }
+          });
+        }
+        // 影像管理-图层
+        else if (info?.node?.parent?.key == '2') {
+          let tabledata = getDataByTypeAndTime(2);
+          tabledata.forEach((data) => {
+            if (selectedKey == data.id) {
+              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) => {
+                  if (tupian.taskId == data.id) {
+                    if (
+                      dayjs(startTime).isBefore(data.uploadTime) &&
+                      dayjs(endTime).isAfter(data.uploadTime)
+                    ) {
+                      filter_hangfei.push(tupian);
+                    }
+                  }
+                });
               } else {
                 createMessage.info('当前选中的任务并无航飞图片');
               }
-            });
-          }
-        });
-      }
-      // 航飞图片-任务
-      else {
-        let filter = tableData3_tupian.filter((item) => item.id == selectedKeys);
-        handlerUpdateTaskLayerData(filter);
+            }
+          });
+        }
+        // 航飞图片-任务
+        else {
+          let filter = tableData3_tupian.filter((item) => item.id == selectedKey);
+          filter?.forEach((f) => {
+            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 +267,6 @@
       taskLayerGeoJson.features.push(feature);
     });
 
-    // 确定中心点和zoom等级
-    // let result = calculateCenterAndZoom(lngList, latList);
     // 航飞图片-图层
     mapboxComponentRef.value.AchievementManageRaster(
       taskLayerGeoJson,
@@ -297,30 +290,41 @@
     }
   }
 
-  // 航飞图片-确定中心点和zoom等级
-  function calculateCenterAndZoom(lngList, latList) {
-    // 检查输入的有效性
-    if (!lngList || !latList || lngList.length !== latList.length) {
-      throw new Error('');
+  // 时间轴筛选数据
+  function getDataByTypeAndTime(type): any {
+    let result: any = [];
+    switch (type) {
+      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;
     }
-    // 计算中心点
-    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,
-    };
+    return result;
   }
+
+  // 时间轴发生改变返回值
+  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();
   });
@@ -362,6 +366,7 @@
     position: absolute;
     z-index: 1;
     top: 100px;
+    margin-left: 20px;
     margin-bottom: 20px;
   }
 
@@ -384,6 +389,15 @@
     overflow: auto;
   }
 
-  ::v-deep .case-tree {
+  .timeLineBox {
+    position: relative;
+    z-index: 1;
+    left: 420px;
+    bottom: -690px;
+    width: 1200px;
+    height: 120px;
+    border: 2px #155dd8;
+    background-color: rgba(0, 0, 0, 0.5);
+    border-radius: 60px / 60px;
   }
 </style>
diff --git a/src/views/demo/system/achievement/index.vue b/src/views/demo/system/achievement/index.vue
index a3360964..d7f13201 100644
--- a/src/views/demo/system/achievement/index.vue
+++ b/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>
diff --git a/src/views/demo/system/geoservermanagement/clound/mapComponent.vue b/src/views/demo/system/geoservermanagement/clound/mapComponent.vue
index 1236a826..9995a48c 100644
--- a/src/views/demo/system/geoservermanagement/clound/mapComponent.vue
+++ b/src/views/demo/system/geoservermanagement/clound/mapComponent.vue
@@ -331,6 +331,7 @@
     GeoTiffManagerRaster,
     AchievementManageRaster,
     resize,
+    clearTaskLayer,
   });
 </script>
 <style type="less" scoped>

From 159e822a87efe1b982b087547fff604792b46778 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=BB=95=E5=B5=A9?= <17854119262@163.com>
Date: Sat, 31 Aug 2024 17:49:35 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=88=90=E6=9E=9C=E5=B1=95=E7=A4=BA-?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E8=BD=B4=E5=8F=AF=E6=92=AD=E6=94=BE=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../system/achievement/Display/TimeLine.vue   | 168 +++++++++---------
 .../demo/system/achievement/Display/index.vue |  17 +-
 2 files changed, 91 insertions(+), 94 deletions(-)

diff --git a/src/views/demo/system/achievement/Display/TimeLine.vue b/src/views/demo/system/achievement/Display/TimeLine.vue
index ec228122..274a5862 100644
--- a/src/views/demo/system/achievement/Display/TimeLine.vue
+++ b/src/views/demo/system/achievement/Display/TimeLine.vue
@@ -1,81 +1,80 @@
 <template>
   <div>
-    <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="margin-left: 5px; color: #ffffff" :size="20" />
-        </a-button>
-      </a-tooltip>
-      <a-tooltip class="box-item" placement="top">
-        <template #title>
-          <span>上一月</span>
-        </template>
-        <a-button type="text" @click="handleSubMouth">
-          <Icon icon="bi:chevron-left" style="margin-left: 5px; color: #ffffff" :size="20" />
-        </a-button>
-      </a-tooltip>
+    <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" @click="handlePlay">
-          <Icon
-            v-if="!playSwitch"
-            icon="bi:play"
-            style="margin-left: 5px; color: #ffffff"
-            :size="23"
-          />
-          <Icon
-            v-if="playSwitch"
-            icon="bi:pause"
-            style="margin-left: 5px; color: #ffffff"
-            :size="23"
-          />
-        </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" @click="handleAddMouth">
-          <Icon icon="bi:chevron-right" style="margin-left: 5px; color: #ffffff" :size="20" />
-        </a-button>
-      </a-tooltip>
-      <a-tooltip class="box-item" placement="top">
-        <template #title>
-          <span>下一年</span>
-        </template>
-        <a-button type="text" @click="handleAddYear">
-          <Icon icon="bi:chevron-double-right" style="color: #ffffff" :size="20" />
-        </a-button>
-      </a-tooltip>
-    </div>
+          <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">
-      <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.splice(-2) == '01'"> -->
-          <!-- <span :style="{ color: 'white' }">{{ label.splice(0, 6) }}</span> -->
-          <!-- </template> -->
-          <template>
-            <span :style="{ color: 'white' }">{{ label }}</span>
-          </template>
-        </template>
-      </a-slider>
-    </div>
+    -->
   </div>
 </template>
 
@@ -132,14 +131,13 @@
   };
 
   function addValue() {
+    console.log(playSwitch.value);
     if (playSwitch.value) {
       setTimeout(() => {
-        if (playSwitch.value) {
-          value.value = parseInt(dayjs(getValue(value.value)).add(7, 'day').dayOfYear());
-          emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(value.value))]);
-          addValue();
-        }
-      }, 5000);
+        value.value = parseInt(dayjs(getValue(value.value)).add(7, 'day').dayOfYear());
+        emit('handleNowValueChange', [dayjs(getValue(1)), dayjs(getValue(value.value))]);
+        addValue();
+      }, 1000);
     }
   }
 
@@ -205,25 +203,21 @@
 <style lang="less" scoped>
   .timeBox {
     position: relative;
-    top: 55px;
-    left: 250px;
+    top: 40px;
     width: 900px;
   }
 
   .RightBox {
-    position: absolute;
-    border: 2px red;
-    top: 45px;
-    left: 30px;
+    position: relative;
+    top: 40px;
     width: 300px;
   }
 
   .box-item {
+    justify-content: center;
     width: 25px;
-
     Icon {
       display: flex;
-      justify-content: center;
     }
   }
 </style>
diff --git a/src/views/demo/system/achievement/Display/index.vue b/src/views/demo/system/achievement/Display/index.vue
index aee953db..e79d5053 100644
--- a/src/views/demo/system/achievement/Display/index.vue
+++ b/src/views/demo/system/achievement/Display/index.vue
@@ -4,7 +4,9 @@
       <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"
@@ -19,7 +21,7 @@
         ref="mapboxComponentRef"
         :style="{
           position: 'absolute',
-          height: `calc(100vh)`,
+          height: `calc(100vh - 90px)`,
           width: `100%`,
           marginLeft: '6px',
           top: '0px',
@@ -61,6 +63,8 @@
   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 = [];
@@ -360,14 +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;
-    margin-left: 20px;
-    margin-bottom: 20px;
+    bottom: 20px;
+    left: 20px;
   }
 
   .title {
@@ -390,10 +393,10 @@
   }
 
   .timeLineBox {
-    position: relative;
+    position: absolute;
     z-index: 1;
     left: 420px;
-    bottom: -690px;
+    bottom: 20px;
     width: 1200px;
     height: 120px;
     border: 2px #155dd8;