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] =?UTF-8?q?=E6=88=90=E6=9E=9C=E5=B1=95=E7=A4=BA-=E6=97=B6?=
 =?UTF-8?q?=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;