自动播放

src/components/map/GisMap.vue

@@ -31,7 +31,7 @@ onMounted(() => {
       url: window.CityGisHtml,
       onReady: function () {
         console.log('ready');
-        regionZone('松江');
+        regionZone('松江区');
         //默认加载
         addImagePoint('newAdress', [{ x: -14926.528171515301, y: -1705.2657878212942 }], {
           imageUrl: new URL(`@/assets/image/mapTools/new_icon.png`, import.meta.url).href

src/stores/mapStore.js

@@ -104,7 +104,7 @@ export const useMapStore = defineStore('mapStore', () => {
       if (autoNum.value >= timeArr.value.length) {
         autoNum.value = 0;
       }
-    }, 1000);
+    }, 5000);
   };
 
   // 地图地图类型

src/views/DataCenterGis/components/LeftMap.vue

@@ -148,8 +148,8 @@
       </div>
 
       <div class="auto-play-container" v-if="mapStore.currentToolSelectArray.includes('autoPlay')">
-        <el-form :inline="true" class="form-item-box">
-          <el-form-item label="类型" class="form-item">
+        <el-form class="form-item-box">
+          <el-form-item label="类型" class="form-item form-item-1">
             <el-select
               placeholder="选择病例类型"
               v-model="mapStore.autoPlayType"
@@ -168,26 +168,30 @@
               <el-option label="近一月" :value="30"></el-option>
             </el-select>
           </el-form-item>
-          <el-button type="primary" @click="startStop">{{
-            mapStore.intervalFlag ? '暂停' : '开始'
-          }}</el-button>
+          <el-icon class="iconPlay-box" v-if="!mapStore.intervalFlag" @click="startStop"
+            ><VideoPlay
+          /></el-icon>
+          <el-icon class="iconPlay-box" v-else @click="startStop"><VideoPause /></el-icon>
         </el-form>
-        <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>
+
+      <div
+        class="auto-play-container-timeline"
+        v-if="mapStore.currentToolSelectArray.includes('autoPlay')"
+      >
+        <el-icon class="icon-box icon-box-left" @click="handleLeft"><ArrowUp /></el-icon>
         <div class="timeline-box">
           <div
             class="line-box line-box-id"
-            :style="{ transform: `translateX(${-translateXNum}px)` }"
+            :style="{ transform: `translateY(${-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="time-content" @click="handleDot(index)">
+                  <div class="dot" :class="{ active: mapStore.autoNum == index }"></div>
                   <div class="content" v-if="mapStore.autoPlayTime == 1">
-                    {{ item.startTime.slice(5) }}
+                    <div>{{ item.startTime.slice(5, 10) }}</div>
+                    <div>{{ item.startTime.slice(10) }}</div>
                     <div style="text-align: center" v-if="mapStore.autoNum == index">
                       数量：{{ mapStore.currentTimePoint }}
                     </div>
@@ -199,6 +203,7 @@
             </template>
           </div>
         </div>
+        <el-icon class="icon-box icon-box-right" @click="handleRight"><ArrowDown /></el-icon>
       </div>
     </div>
   </div>
@@ -213,9 +218,11 @@ import { useMapStore } from '@/stores/mapStore';
 import {
   ArrowLeftBold,
   ArrowRightBold,
+  VideoPlay,
+  VideoPause,
   Search,
-  ArrowLeft,
-  ArrowRight
+  ArrowUp,
+  ArrowDown
 } from '@element-plus/icons-vue';
 import { startOutputPoint, closeOutputPoint, gotoPosition } from '@/utils/map/mapOperation.js';
 import {
@@ -730,8 +737,18 @@ const nextPoint = () => {
       position: absolute;
       top: 20px;
       left: 20px;
-      padding: 10px 30px;
-      padding-right: 50px;
+      padding: 10px 10px;
+      background-color: rgba(0, 128, 255, 0.4);
+      :deep(.el-form-item__label) {
+        color: #ffffff;
+      }
+    }
+    .auto-play-container-timeline {
+      padding: 10px 0;
+      position: absolute;
+      top: 100px;
+      text-align: center;
+      right: 0px;
       background-color: rgba(0, 128, 255, 0.4);
       :deep(.el-form-item__label) {
         color: #ffffff;
@@ -740,13 +757,13 @@ const nextPoint = () => {
   }
 }
 .form-item-box {
-  width: 550px;
+  width: 420px;
   height: 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   .form-item {
-    width: calc(100% - 30px);
+    width: calc(100% - 80px);
     color: #ffffff;
     margin-right: 10px;
     margin-bottom: 0;
@@ -755,6 +772,9 @@ const nextPoint = () => {
       height: 22px;
     }
   }
+  .form-item-1 {
+    width: calc(100% - 120px) !important;
+  }
 }
 .icon-box {
   color: #ffffff;
@@ -762,65 +782,69 @@ const nextPoint = () => {
   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: 550px;
-  height: 80px;
-  padding: 0 45px;
+  width: 100px;
+  height: 550px;
   overflow-x: auto;
   scrollbar-width: none;
 
   .line-box {
     display: flex;
-    justify-content: flex-start;
+    flex-direction: column;
+    align-items: center;
     transition: transform 0.4s;
   }
   .time-box-item {
     display: flex;
-    width: 140px;
+    flex-direction: column;
+    height: 140px;
     flex-shrink: 0;
     align-items: center;
     justify-content: flex-start;
     position: relative;
-    .dot {
-      position: relative;
-      width: 20px;
-      height: 20px;
-      flex-shrink: 0;
-      border-radius: 50%;
-      background-color: #0080ff;
-      cursor: pointer;
+    .time-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .dot {
+        position: relative;
+        width: 20px;
+        height: 20px;
+        flex-shrink: 0;
+        border-radius: 50%;
+        background-color: #0080ff;
+        margin-top: 5px;
+        cursor: pointer;
+        cursor: pointer;
+        &.active {
+          background-color: #fedc19;
+        }
+      }
       .content {
-        position: absolute;
-        width: 100px;
         color: #ffffff;
         white-space: nowrap;
-        left: 50%;
-        top: 30px;
-        font-size: 18px;
-        transform: translate(-50%, 0);
-      }
-      &.active {
-        background-color: #fedc19;
+        font-size: 16px;
+        margin-top: 5px;
       }
     }
+
     .line {
-      width: 100%;
-      height: 2px;
+      width: 2px;
+      flex: 2;
       background-color: #0080ff;
     }
   }
 }
+.iconPlay-box {
+  color: #ffffff;
+  font-size: 30px;
+  margin-right: 10px;
+}
 </style>