自动播放

src/components/map/GisMap.vue

@@ -47,6 +47,7 @@ onMounted(() => {
             imageUrl: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href
           }
         );
+        mapStore.autoPlayFun();
       }
     });
 

src/service/api/mapRequest.js

@@ -22,6 +22,15 @@ export function addCdcDraw(data) {
   });
 }
 
+// /kanban/sprinkleSomeByType
+export function sprinkleSomeByType(data){
+  return request({
+    url: '/kanban/sprinkleSomeByType',
+    method: 'post',
+    data: data
+  });
+}
+
 //病例洒点
 export function getTrajectorPointOnPeople(params) {
   return request({

src/stores/mapStore.js

@@ -12,11 +12,90 @@ import {
   change3DTheme,
   regionZone
 } from '@/utils/map/mapOperation.js';
-import { getTrajectorPointOnPeople, getTrajectorPointOnCar } from '@/service/api/mapRequest.js';
+import {
+  getTrajectorPointOnPeople,
+  getTrajectorPointOnCar,
+  sprinkleSomeByType
+} from '@/service/api/mapRequest.js';
 import { useDrawPointStore } from '@/stores/drawPointManage';
+
 export const useMapStore = defineStore('mapStore', () => {
   //当前病例点位列表
-  const currentToolSelectArray = ref(['newAdress', 'touch']);
+  const currentToolSelectArray = ref(['newAdress', 'touch', 'autoPlay']);
+
+  //自动播放类型
+  const autoPlayType = ref(1);
+  //自动播放时间范围
+  const autoPlayTime = ref(1);
+
+  const getTimeArray = () => {
+    const nowTime = Date.now();
+    let resultArr = [];
+    if (autoPlayTime.value == 1) {
+      const datTime = 60 * 60 * 1000;
+      for (let i = 1; i < 24; i++) {
+        const end = nowTime - datTime * (i - 1);
+        const start = nowTime - datTime * i;
+        resultArr.unshift({
+          startTime: new Date(start).toLocaleString().replaceAll('/', '-'),
+          endTime: new Date(end).toLocaleString().replaceAll('/', '-')
+        });
+      }
+    } else if (autoPlayTime.value == 7) {
+      const datTime = 24 * 60 * 60 * 1000;
+      for (let i = 1; i < 7; i++) {
+        const end = nowTime - datTime * (i - 1);
+        const start = nowTime - datTime * i;
+        resultArr.unshift({
+          startTime: new Date(start).toLocaleDateString().replaceAll('/', '-'),
+          endTime: new Date(end).toLocaleDateString().replaceAll('/', '-')
+        });
+      }
+    } else if (autoPlayTime.value == 30) {
+      const datTime = 24 * 60 * 60 * 1000;
+      for (let i = 1; i < 30; i++) {
+        const end = nowTime - datTime * (i - 1);
+        const start = nowTime - datTime * i;
+        resultArr.unshift({
+          startTime: new Date(start).toLocaleDateString().replaceAll('/', '-'),
+          endTime: new Date(end).toLocaleDateString().replaceAll('/', '-')
+        });
+      }
+    }
+    return resultArr;
+  };
+  //自动播放点位获取
+  const getSprinkleSomeByType = (startTime, endTime) => {
+    closePoint('autoPlay');
+    sprinkleSomeByType({
+      endTime: endTime,
+      startTime: startTime,
+      type: autoPlayType.value
+    }).then((res) => {
+      if (res.code == 200) {
+        addImagePoint('autoPlay', res.data, {
+          imageUrl: new URL(`@/assets/image/bidding.png`, import.meta.url).href
+        });
+      }
+    });
+  };
+
+  const intervalFlag = ref(false)
+  const timeInterval = ref(null)
+  const timeArr = ref([])
+  const autoNum = ref(0);
+  // 自动播放事件
+  const autoPlayFun = () => {
+    timeArr.value = getTimeArray();
+    intervalFlag.value = true
+    timeInterval.value = setInterval(() => {
+      getSprinkleSomeByType(timeArr.value[autoNum.value].startTime, timeArr.value[autoNum.value].endTime);
+      autoNum.value = autoNum.value + 1;
+      if (autoNum.value >= timeArr.value.length) {
+        autoNum.value = 0;
+      }
+    }, 5000);
+  };
 
   // 地图地图类型
   const mapTheme = ref('dark');
@@ -230,6 +309,14 @@ export const useMapStore = defineStore('mapStore', () => {
     setCurrentToolSelectArray,
     delCurrentToolSelectArray,
     mapTheme,
-    changeTheme
+    changeTheme,
+    autoPlayType,
+    autoPlayTime,
+    getSprinkleSomeByType,
+    autoPlayFun,
+    timeInterval,
+    intervalFlag,
+    autoNum,
+    timeArr
   };
 });

src/views/DataCenterGis/components/LeftMap.vue

@@ -146,6 +146,49 @@
         <el-button type="success" @click="handleSave">保存</el-button>
         <el-button type="warning" @click="handleClose">关闭</el-button>
       </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-select
+              placeholder="选择病例类型"
+              v-model="mapStore.autoPlayType"
+              @change="typeTimeChange"
+            >
+              <el-option label="传染病" :value="1"></el-option>
+              <el-option label="发热" :value="2"></el-option>
+              <el-option label="感冒" :value="3"></el-option>
+              <el-option label="感冒" :value="4"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="时间范围" class="form-item">
+            <el-select v-model="mapStore.autoPlayTime" @change="typeTimeChange">
+              <el-option label="近一天" :value="1"></el-option>
+              <el-option label="近一周" :value="7"></el-option>
+              <el-option label="近一月" :value="30"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-button type="primary" @click="startStop">{{
+            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>
+                  </div>
+                  <div class="line"></div>
+                </div>
+              </template>
+              <el-icon class="icon-box"><ArrowRight /></el-icon>
+            </div>
+          </div>
+
+      </div>
     </div>
   </div>
 </template>
@@ -179,6 +222,22 @@ const described = ref('');
 const searchParam = ref('');
 const address = ref('');
 
+const startStop = () => {
+  if (mapStore.intervalFlag) {
+    clearInterval(mapStore.timeInterval);
+    mapStore.intervalFlag = false;
+  } else {
+    mapStore.autoPlayFun();
+  }
+};
+
+const typeTimeChange = () => {
+  mapStore.autoNum = 0;
+  clearInterval(mapStore.timeInterval);
+  mapStore.timeInterval = null;
+  mapStore.autoPlayFun();
+};
+
 // 定义格式化封装函数
 const formaData = (timer) => {
   const year = timer.getFullYear();
@@ -613,6 +672,73 @@ const nextPoint = () => {
         min-height: unset !important;
       }
     }
+
+    .auto-play-container {
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      padding: 10px 15px;
+      background-color: rgba(0, 128, 255, 0.4);
+      :deep(.el-form-item__label) {
+        color: #ffffff;
+      }
+    }
+  }
+}
+.form-item-box {
+  width: 600px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .form-item {
+    width: calc(100% - 30px);
+    color: #ffffff;
+    margin-right: 10px;
+    margin-bottom: 0;
+  }
+}
+.timeline-box {
+  margin-top: 20px;
+  width: 600px;
+  height: 50px;
+  padding: 0 60px;
+  overflow: hidden;
+  .line-box {
+    display: flex;
+    justify-content: flex-start;
+    .icon-box{
+      color: #ffffff;
+    }
+  }
+  .time-box-item {
+    display: flex;
+    width: 150px;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    .dot {
+      position: relative;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: #0080ff;
+      .content {
+        position: absolute;
+        width: 80px;
+        color: #ffffff;
+        white-space: nowrap;
+        left: 50%;
+        top: 20px;
+        transform: translate(-50%, 0);
+      }
+    }
+    .line {
+      width: 100%;
+      height: 2px;
+      background-color: #0080ff;
+    }
   }
 }
 </style>

src/views/DataCenterGis/components/Tools.vue

@@ -1,9 +1,33 @@
 <template>
   <div class="tools-bar">
     <div class="option-box" v-for="tool in toolsOptions" :key="tool.id" @click="handleSelect(tool)">
-      <img
-        :src="mapStore.currentToolSelectArray.includes(tool.id) ? tool.activeImage : tool.image"
-      />
+      <el-popover
+        placement="right"
+        title=""
+        trigger="hover"
+        width="60"
+        :content="tool.name"
+        :popper-class="tool.popClass"
+      >
+        <template #reference>
+          <div v-if="tool.id == 'autoPlay'" class="auto-play">
+            <div
+              class="auto-play-box"
+              :class="{ active: mapStore.currentToolSelectArray.includes(tool.id) }"
+            >
+              <img
+                :src="
+                  mapStore.currentToolSelectArray.includes(tool.id) ? tool.activeImage : tool.image
+                "
+              />
+            </div>
+          </div>
+          <img
+            v-else
+            :src="mapStore.currentToolSelectArray.includes(tool.id) ? tool.activeImage : tool.image"
+          />
+        </template>
+      </el-popover>
     </div>
   </div>
 </template>
@@ -18,49 +42,64 @@ const toolsOptions = [
     id: '3dChange',
     name: '三维转换',
     image: new URL(`@/assets/image/mapTools/3D.png`, import.meta.url).href,
-    activeImage: new URL(`@/assets/image/mapTools/2D.png`, import.meta.url).href
+    activeImage: new URL(`@/assets/image/mapTools/2D.png`, import.meta.url).href,
+    popClass: 'popper-option-box-60'
+  },
+  {
+    id: 'autoPlay',
+    name: '自动播放',
+    image: new URL(`@/assets/image/mapTools/play.png`, import.meta.url).href,
+    activeImage: new URL(`@/assets/image/mapTools/play-auto.png`, import.meta.url).href,
+    popClass: 'popper-option-box-60'
   },
   {
     id: 'newAdress',
     name: '新址',
     image: new URL(`@/assets/image/mapTools/newAdress.png`, import.meta.url).href,
-    activeImage: new URL(`@/assets/image/mapTools/newAddressActive.png`, import.meta.url).href
+    activeImage: new URL(`@/assets/image/mapTools/newAddressActive.png`, import.meta.url).href,
+    popClass: 'popper-option-box-60'
   },
   {
     id: 'touch',
     name: '密接',
     image: new URL(`@/assets/image/mapTools/2.png`, import.meta.url).href,
-    activeImage: new URL(`@/assets/image/mapTools/2-1.png`, import.meta.url).href
+    activeImage: new URL(`@/assets/image/mapTools/2-1.png`, import.meta.url).href,
+    popClass: 'popper-option-box-60'
   },
   {
     id: 'infectious',
     name: '传染病',
     image: new URL(`@/assets/image/mapTools/3.png`, import.meta.url).href,
-    activeImage: new URL(`@/assets/image/mapTools/3-1.png`, import.meta.url).href
+    activeImage: new URL(`@/assets/image/mapTools/3-1.png`, import.meta.url).href,
+    popClass: 'popper-option-box-60'
   },
   {
     id: 'feverClinic',
     name: '发热门诊',
     image: new URL(`@/assets/image/mapTools/4.png`, import.meta.url).href,
-    activeImage: new URL(`@/assets/image/mapTools/4-1.png`, import.meta.url).href
+    activeImage: new URL(`@/assets/image/mapTools/4-1.png`, import.meta.url).href,
+    popClass: 'popper-option-box-60'
   },
   {
     id: 'breathe',
     name: '呼吸',
     image: new URL(`@/assets/image/mapTools/5.png`, import.meta.url).href,
-    activeImage: new URL(`@/assets/image/mapTools/5-1.png`, import.meta.url).href
+    activeImage: new URL(`@/assets/image/mapTools/5-1.png`, import.meta.url).href,
+    popClass: 'popper-option-box-60'
   },
   {
     id: 'flowCar',
     name: '流调会商车',
     image: new URL(`@/assets/image/mapTools/6.png`, import.meta.url).href,
-    activeImage: new URL(`@/assets/image/mapTools/6-1.png`, import.meta.url).href
+    activeImage: new URL(`@/assets/image/mapTools/6-1.png`, import.meta.url).href,
+    popClass: 'popper-option-box-90'
   },
   {
     id: 'Bidding',
     name: '标会工具',
     image: new URL(`@/assets/image/mapTools/7.png`, import.meta.url).href,
-    activeImage: new URL(`@/assets/image/mapTools/7-1.png`, import.meta.url).href
+    activeImage: new URL(`@/assets/image/mapTools/7-1.png`, import.meta.url).href,
+    popClass: 'popper-option-box-70'
   }
 ];
 
@@ -87,5 +126,39 @@ const handleSelect = (tool) => {
       height: 100%;
     }
   }
+  .auto-play {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50px;
+    height: 50px;
+    .auto-play-box {
+      width: 34px;
+      height: 34px;
+      border-top-left-radius: 6px;
+      border-bottom-right-radius: 6px;
+      background: rgb(214, 231, 250);
+      border: 1px solid rgb(0, 128, 255);
+      &.active {
+        background: rgb(255, 242, 221);
+        border: 1px solid rgb(247, 144, 0);
+      }
+      img{
+        position: relative;
+        right: -2px;
+      }
+    }
+  }
+}
+</style>
+<style>
+.popper-option-box-60 {
+  min-width: 65px !important;
+}
+.popper-option-box-70 {
+  min-width: 70px !important;
+}
+.popper-option-box-90 {
+  min-width: 80px !important;
 }
 </style>