历史轨迹

src/views/BI/components/historical_trajectory_options.vue

@@ -36,12 +36,14 @@
       </el-col>
       <el-col :span="12">
         <div class="play_options">
-          <el-icon :size="30" class="icon" @click="fnPlay">
-            <video-play v-if="!data.isPlay" />
-            <video-pause v-else />
+          <el-icon v-if="!data.isPlay" :size="30" class="icon" @click="fnPlay">
+            <video-play />
           </el-icon>
-          <div class="schedule ml-10 pb-10">
-            <el-slider v-model="data.currentSchedule" :max="data.maxSchedule" />
+          <el-icon v-else :size="30" class="icon" @click="fnPause">
+            <video-pause />
+          </el-icon>
+          <div class="schedule ml-20 pb-10">
+            <el-slider v-model="currentSchedule" :max="data.maxSchedule" />
             <div>
               <span class="time">{{ data.time }}</span>
               <span class="text-yellow ml-10">
@@ -49,7 +51,7 @@
               </span>
             </div>
           </div>
-          <div class="speed ml-10">
+          <div class="speed ml-20">
             <el-select v-model="data.speed">
               <el-option label="X 16.0" :value="16.0" />
               <el-option label="X 8.0" :value="8.0" />
@@ -69,6 +71,7 @@
 import { reactive } from "vue";
 import { ElMessage } from "element-plus";
 import { VideoPause, VideoPlay } from "@element-plus/icons-vue";
+import { useInterval } from "@vueuse/core";
 
 const data = reactive({
   searchForm: {
@@ -76,12 +79,19 @@ const data = reactive({
     dates: [],
   },
   isPlay: false,
-  currentSchedule: 10,
   maxSchedule: 100,
   time: "2021-08-01 12:00:00",
   position: "图层1",
   speed: 1.0,
 });
+const {
+  counter: currentSchedule,
+  pause,
+  resume,
+} = useInterval(() => 1000 / data.speed, {
+  immediate: false,
+  controls: true,
+});
 const fnGetData = () => {
   if (data.searchForm.personnel === "") {
     ElMessage.warning("请选择人员");
@@ -94,7 +104,12 @@ const fnGetData = () => {
   ElMessage.success("搜索成功");
 };
 const fnPlay = () => {
-  data.isPlay = !data.isPlay;
+  data.isPlay = true;
+  resume();
+};
+const fnPause = () => {
+  data.isPlay = false;
+  pause();
 };
 </script>