自动播放

src/stores/mapStore.js

@@ -64,6 +64,8 @@ export const useMapStore = defineStore('mapStore', () => {
     }
     return resultArr;
   };
+
+  const currentTimePoint = ref(0);
   //自动播放点位获取
   const getSprinkleSomeByType = (startTime, endTime) => {
     closePoint('autoPlay');
@@ -76,25 +78,33 @@ export const useMapStore = defineStore('mapStore', () => {
         addImagePoint('autoPlay', res.data, {
           imageUrl: new URL(`@/assets/image/bidding.png`, import.meta.url).href
         });
+        currentTimePoint.value = res?.data?.length || 0;
       }
     });
   };
 
-  const intervalFlag = ref(false)
-  const timeInterval = ref(null)
-  const timeArr = ref([])
+  const intervalFlag = ref(false);
+  const timeInterval = ref(null);
+  const timeArr = ref([]);
   const autoNum = ref(0);
   // 自动播放事件
   const autoPlayFun = () => {
     timeArr.value = getTimeArray();
-    intervalFlag.value = true
+    intervalFlag.value = true;
     timeInterval.value = setInterval(() => {
-      getSprinkleSomeByType(timeArr.value[autoNum.value].startTime, timeArr.value[autoNum.value].endTime);
+      try {
+        getSprinkleSomeByType(
+          timeArr.value[autoNum.value].startTime,
+          timeArr.value[autoNum.value].endTime
+        );
+      } catch (error) {
+        console.log(error);
+      }
       autoNum.value = autoNum.value + 1;
       if (autoNum.value >= timeArr.value.length) {
         autoNum.value = 0;
       }
-    }, 5000);
+    }, 10000);
   };
 
   // 地图地图类型
@@ -317,6 +327,7 @@ export const useMapStore = defineStore('mapStore', () => {
     timeInterval,
     intervalFlag,
     autoNum,
-    timeArr
+    timeArr,
+    currentTimePoint
   };
 });

src/views/DataCenterGis/components/LeftMap.vue

@@ -172,22 +172,33 @@
             mapStore.intervalFlag ? '暂停' : '开始'
           }}</el-button>
         </el-form>
-
-          <div class="timeline-box">
-            <div class="line-box">
-              <el-icon class="icon-box"><ArrowLeft /></el-icon>
-              <template v-for="(item, index) in mapStore.timeArr" :key="index + Date.now()">
-                <div class="time-box-item">
-                  <div class="dot">
-                    <div class="content">12-12 12:12:02</div>
+        <el-icon class="icon-box icon-box-left" @click="handleLeft"><ArrowLeft /></el-icon>
+        <el-icon class="icon-box icon-box-right" @click="handleRight"><ArrowRight /></el-icon>
+        <div class="timeline-box">
+          <div
+            class="line-box line-box-id"
+            :style="{ transform: `translateX(${-translateXNum}px)` }"
+          >
+            <template v-for="(item, index) in mapStore.timeArr" :key="index + Date.now()">
+              <div class="time-box-item line-box-item-id">
+                <div
+                  class="dot"
+                  :class="{ active: mapStore.autoNum == index }"
+                  @click="handleDot(index)"
+                >
+                  <div class="content" v-if="mapStore.autoPlayTime == 1">
+                    {{ item.startTime.slice(5) }}
+                    <div style="text-align: center" v-if="mapStore.autoNum == index">
+                      数量：{{ mapStore.currentTimePoint }}
+                    </div>
                   </div>
-                  <div class="line"></div>
+                  <div class="content" v-else>{{ item.startTime }}</div>
                 </div>
-              </template>
-              <el-icon class="icon-box"><ArrowRight /></el-icon>
-            </div>
+                <div class="line" v-if="mapStore?.timeArr?.length !== index + 1"></div>
+              </div>
+            </template>
           </div>
-
+        </div>
       </div>
     </div>
   </div>
@@ -196,16 +207,17 @@
 <script setup>
 import GisMap from '@/components/map/GisMap.vue';
 import Tools from './Tools.vue';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import { useDrawPointStore } from '@/stores/drawPointManage';
 import { useMapStore } from '@/stores/mapStore';
-import { ArrowLeftBold, ArrowRightBold, Search } from '@element-plus/icons-vue';
 import {
-  startOutputPoint,
-  change3DTheme,
-  closeOutputPoint,
-  gotoPosition
-} from '@/utils/map/mapOperation.js';
+  ArrowLeftBold,
+  ArrowRightBold,
+  Search,
+  ArrowLeft,
+  ArrowRight
+} from '@element-plus/icons-vue';
+import { startOutputPoint, closeOutputPoint, gotoPosition } from '@/utils/map/mapOperation.js';
 import {
   addTrajectorPointOnPeople,
   getGeocode,
@@ -222,6 +234,8 @@ const described = ref('');
 const searchParam = ref('');
 const address = ref('');
 
+const translateXNum = ref(0);
+
 const startStop = () => {
   if (mapStore.intervalFlag) {
     clearInterval(mapStore.timeInterval);
@@ -238,6 +252,45 @@ const typeTimeChange = () => {
   mapStore.autoPlayFun();
 };
 
+watch(
+  () => mapStore.autoNum,
+  () => {
+    if (mapStore.autoNum > 2) {
+      const boxShowWidth = document.getElementsByClassName('line-box-item-id')[0].clientWidth;
+      translateXNum.value = boxShowWidth * (mapStore.autoNum - 2);
+    }
+    if (mapStore.autoNum == 0) {
+      translateXNum.value = 0;
+    }
+  }
+);
+
+const handleLeft = () => {
+  if (translateXNum.value <= 0) {
+    translateXNum.value = 0;
+  } else {
+    translateXNum.value -= 100;
+  }
+};
+
+const handleRight = () => {
+  const boxWidth = document.getElementsByClassName('line-box-id')[0].scrollWidth;
+  const boxShowWidth = document.getElementsByClassName('line-box-id')[0].clientWidth;
+  console.log(document.getElementsByClassName('line-box-id'));
+  if (translateXNum.value >= boxWidth - boxShowWidth - 100) {
+    translateXNum.value = boxWidth - boxShowWidth;
+  } else {
+    translateXNum.value += 100;
+  }
+};
+
+const handleDot = (index) => {
+  mapStore.autoNum = index;
+  clearInterval(mapStore.timeInterval);
+  mapStore.timeInterval = null;
+  mapStore.autoPlayFun();
+};
+
 // 定义格式化封装函数
 const formaData = (timer) => {
   const year = timer.getFullYear();
@@ -677,7 +730,8 @@ const nextPoint = () => {
       position: absolute;
       top: 20px;
       left: 20px;
-      padding: 10px 15px;
+      padding: 10px 30px;
+      padding-right: 50px;
       background-color: rgba(0, 128, 255, 0.4);
       :deep(.el-form-item__label) {
         color: #ffffff;
@@ -686,53 +740,81 @@ const nextPoint = () => {
   }
 }
 .form-item-box {
-  width: 600px;
+  width: 550px;
+  height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
-
   .form-item {
     width: calc(100% - 30px);
     color: #ffffff;
     margin-right: 10px;
     margin-bottom: 0;
+    :deep(.el-select__wrapper) {
+      min-height: 22px;
+      height: 22px;
+    }
   }
 }
+.icon-box {
+  color: #ffffff;
+  font-size: 30px;
+  cursor: pointer;
+}
+.icon-box-left {
+  position: absolute;
+  left: 10px;
+  top: 75px;
+  z-index: 99;
+}
+.icon-box-right {
+  position: absolute;
+  top: 75px;
+  right: 10px;
+  z-index: 99;
+}
 .timeline-box {
+  position: relative;
   margin-top: 20px;
-  width: 600px;
-  height: 50px;
-  padding: 0 60px;
-  overflow: hidden;
+  width: 550px;
+  height: 80px;
+  padding: 0 45px;
+  overflow-x: auto;
+  scrollbar-width: none;
+
   .line-box {
     display: flex;
     justify-content: flex-start;
-    .icon-box{
-      color: #ffffff;
-    }
+    transition: transform 0.4s;
   }
   .time-box-item {
     display: flex;
-    width: 150px;
+    width: 140px;
     flex-shrink: 0;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
     position: relative;
     .dot {
       position: relative;
-      width: 10px;
-      height: 10px;
+      width: 20px;
+      height: 20px;
+      flex-shrink: 0;
       border-radius: 50%;
       background-color: #0080ff;
+      cursor: pointer;
       .content {
         position: absolute;
-        width: 80px;
+        width: 100px;
         color: #ffffff;
         white-space: nowrap;
         left: 50%;
-        top: 20px;
+        top: 30px;
+        font-size: 18px;
         transform: translate(-50%, 0);
       }
+      &.active {
+        background-color: #fedc19;
+      }
     }
     .line {
       width: 100%;