fix：首页修改，交安事件联调，

src/views/xj/inspection/task-management/components/task-view.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-14 10:36:09
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-10-25 14:25:31
+ * @LastEditTime: 2024-10-28 11:29:03
  * @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\task-view.vue
  * @Description: 巡检任务-查看路径
 -->
@@ -17,7 +17,41 @@
       ></fssm-map>
     </div>
     <div class="footer">
-      <el-slider v-model="timeTip" :show-tooltip="false"></el-slider>
+      <div class="slider">
+        <el-slider
+          v-model="timeTip"
+          :step="sliderStep"
+          :marks="sliderMarks"
+          :show-tooltip="true"
+        ></el-slider>
+      </div>
+      <div class="pause">
+        <i
+          class="el-icon-video-play"
+          v-if="!animationVisable"
+          @click="animation(true)"
+        ></i>
+        <i
+          class="el-icon-video-pause"
+          v-if="animationVisable"
+          @click="animation(false)"
+        ></i>
+      </div>
+      <div class="speed">
+        <el-select
+          v-model="spaadCode"
+          @change="changeTimeTip"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in speedOption"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+      </div>
     </div>
   </div>
 </template>
@@ -37,16 +71,73 @@ export default {
   data() {
     return {
       // 进度条位置绑定值
-      timeTip: 26,
+      timeTip: "0",
+      // 进度条标记配置项
+      sliderMarks: {
+        0: "18",
+        100: "24",
+      },
+      // 进度条步长
+      sliderStep: 0.1,
+      // 暂停/开始绑定
+      animationVisable: false,
+      // 定时器绑定
+      timer: null,
+      // 倍速绑定
+      spaadCode: 1,
+      // 倍数下拉
+      speedOption: [
+        {
+          value: 1,
+          label: "1x",
+        },
+        {
+          value: 2,
+          label: "2x",
+        },
+        {
+          value: 5,
+          label: "5x",
+        },
+        {
+          value: 10,
+          label: "10x",
+        },
+      ],
     };
   },
+  watch: {
+    timeTip: {
+      handler(val) {},
+    },
+  },
   mounted() {},
   methods: {
+    /* 暂停/开始事件 */
+    animation(boolen) {
+      this.animationVisable = boolen;
+      if (boolen) {
+        this.timer = setInterval(() => {
+          this.timeTip = (this.timeTip + this.sliderStep).toFixed(1) * 1;
+        }, 500);
+      } else {
+        clearInterval(this.timer);
+      }
+    },
+    /* 进度条修改事件 */
+    changeTimeTip(value) {
+      this.sliderStep = value * 0.1;
+    },
+    /* 定时器事件 */
+    startTime(value) {},
     /* 地图点击事件 */
     mapClick(feature) {},
     /* 地图双击事件 */
     mapDbclick(feature) {},
   },
+  beforeDestroy() {
+    clearInterval(this.timer);
+  },
 };
 </script>
 
@@ -65,6 +156,27 @@ export default {
 .footer {
   height: 5rem;
   width: 100%;
-  background-color: aqua;
+  padding: 1rem;
+  display: flex;
+  background-color: rgba(104, 128, 147, 0.3);
+
+  .slider {
+    width: calc(100% - 8rem);
+    padding: 0 2rem;
+
+    ::v-deep .el-slider__marks-text {
+      width: 3rem;
+    }
+  }
+
+  .pause {
+    width: 3rem;
+    font-size: 1.5rem;
+    line-height: 2.5rem;
+  }
+
+  .speed {
+    width: 5rem;
+  }
 }
 </style>