动态缩放svg

README.md

@@ -23,5 +23,7 @@
 ![image](./public/imgs/11.png)
 12. '/geo' CAD瓦片反差图-Demo
 ![image](./public/imgs/12.png)
-13. '/svgAnimate' svg动画同步-Demo
+13. '/svgAnimate/assets' 静态svg动画同步-Demo
+![image](./public/imgs/13.png)
+14. '/svgAnimate/scale' 动态缩放svg动画同步-Demo
 ![image](./public/imgs/13.png)

package.json

@@ -19,6 +19,7 @@
     "leaflet": "^1.9.4",
     "naive-ui": "^2.38.2",
     "openseadragon": "^4.1.1",
+    "panzoom": "^9.4.3",
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
     "socket.io-client": "^4.7.5",

src/App.vue

@@ -38,7 +38,8 @@ console.log(
 10. '/process' process SVG画图-Demo
 11. '/video' 荧石视频SDK-Demo
 12. '/geo' CAD瓦片反差图-Demo
-13. '/svgAnimate' svg动画同步-Demo`
+13. '/svgAnimate/assets' 静态svg动画同步-Demo
+14. '/svgAnimate/scale'  动态svg动画同步-Demo`
 )
 </script>
 <style>

src/pages/svgAnimation/assets.vue

@@ -0,0 +1,1433 @@
+<template>
+  <div
+    id="SVGBOX"
+    class="box"
+  >
+    <svg
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <!-- 模版 -->
+      <defs>
+        <!-- 短竖线-->
+        <marker
+          id="s"
+          viewBox="0 0 2 10"
+          refX="0"
+          refY="5"
+          markerWidth="5"
+          markerHeight="10"
+        >
+          <line
+            x1="0"
+            y1="0.5"
+            x2="0"
+            y2="10"
+            stroke="white"
+            stroke-width="2"
+          />
+        </marker>
+        <!-- 定义描边滤镜 -->
+        <filter
+          id="outline"
+          x="-10%"
+          y="-10%"
+          width="120%"
+          height="120%"
+        >
+          <!-- 扩张图片边缘 -->
+          <feMorphology
+            operator="dilate"
+            radius="2"
+            in="SourceAlpha"
+            result="thicker"
+          />
+          <!-- 描边颜色 -->
+          <feFlood
+            flood-color="#25DCE2"
+            result="color"
+          />
+          <!-- 合并描边和原图 -->
+          <feComposite
+            in="color"
+            in2="thicker"
+            operator="in"
+            result="outline"
+          />
+          <feComposite
+            in="SourceGraphic"
+            in2="outline"
+            operator="over"
+          />
+        </filter>
+      </defs>
+      <!-- 底色 -->
+      <image
+        v-for="(item, index) in svgConfig.tunnel"
+        :key="index"
+        :href="item.img"
+        :x="item.x"
+        :y="item.y"
+        :width="item.w"
+        :height="item.h"
+        preserveAspectRatio="none"
+      />
+      <!-- leng -->
+      <g v-if="svgConfig.leng.length">
+        <polyline
+          :points="`0,${svgConfig.height + 5} ${svgConfig.leng[1].x},${svgConfig.height + 5} ${svgConfig.domWidth - 1},${svgConfig.height + 5}`"
+          fill="none"
+          stroke="white"
+          stroke-width="1"
+          marker-start="url(#s)"
+          marker-mid="url(#s)"
+          marker-end="url(#s)"
+        />
+        <g
+          v-for="(item, index) in svgConfig.leng"
+          :key="index"
+        >
+          <text
+            :x="item.x"
+            :y="svgConfig.height + 25"
+            fill="white"
+            font-size="12"
+            :text-anchor="item.type"
+          >{{ item.name
+          }}</text>
+          <text
+            :x="item.x"
+            :y="svgConfig.height + 40"
+            fill="white"
+            font-size="11"
+            :text-anchor="item.type"
+          >{{ item.stake
+          }}</text>
+        </g>
+      </g>
+
+      <!-- 移动目标 -->
+      <g
+        v-for="(item, index) in devices"
+        :key="index"
+      >
+        <!-- 存运动路径+动画 -->
+        <g :id="item.pathId" />
+        <!-- 对象 -->
+        <g :id="item.imgId">
+          <image
+            :href="item.img"
+            :x="item.x"
+            :y="item.y"
+            :width="item.w"
+            :height="svgConfig.height / 2"
+            :transform="item.transform"
+            :filter="props.dataCheck === index ? 'url(#outline)':''"
+          />
+          <!-- tip -->
+          <image
+            v-if="item.isDevice"
+            :href="img5"
+            :x="props.startAnimate? item.x-item.w/2-187/2: item.x+187/2"
+            :y="item.y"
+            width="187"
+            height="60"
+            preserveAspectRatio="xMidYMid meet"
+          />
+          <text
+            v-if="item.isDevice"
+            :x="props.startAnimate? item.x-item.w/2-187/2+3: item.x+187/2+3"
+            :y="item.y+20"
+            font-size="20"
+            fill="white"
+            textLength="180"
+            font-weight="bold"
+            dominant-baseline="middle"
+          >{{ item.positionTime }}</text>
+        </g>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import {
+  onMounted,
+  onUnmounted, reactive, ref, watch
+} from 'vue'
+import img1 from './img/1.png'
+import img2 from './img/2.png'
+import img5 from './img/5.png'
+
+const props = withDefaults(defineProps<{
+  data?: { img: string, postions: any[] }[], // 原始数据
+  dataCheck?: number, // 对象选中
+  startAnimate?: boolean, // 显示动画
+  menuItem?: { isIn: boolean, startStake: number, endStake: number, currentStake: number, length: number, stakeType: string },
+}>(), {
+  menuItem: () => ({
+    currentStake: 167175.4,
+    endStake: 167395,
+    isIn: false,
+    length: 6560,
+    name: '出口',
+    stakeType: 'K',
+    startStake: 160835
+  }),
+  data: () => [ {
+    img: new URL('./img/3.png', import.meta.url).href,
+    name: '台车',
+    isDevice: true,
+    w: 350,
+    postions: [
+      {
+        id: 1867949485392,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+240.6',
+        stakeType: 'K',
+        mileage: 167240.6,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:15:40',
+        createTime: '2025-04-01 09:15:58',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867949732232,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+238.1',
+        stakeType: 'K',
+        mileage: 167238.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:16:11',
+        createTime: '2025-04-01 09:16:29',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867949978792,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+235.4',
+        stakeType: 'K',
+        mileage: 167235.4,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:16:45',
+        createTime: '2025-04-01 09:17:00',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867950225528,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.1',
+        stakeType: 'K',
+        mileage: 167236.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:17:16',
+        createTime: '2025-04-01 09:17:31',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867950472120,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.9',
+        stakeType: 'K',
+        mileage: 167236.9,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:17:47',
+        createTime: '2025-04-01 09:18:01',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867950718728,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+237.2',
+        stakeType: 'K',
+        mileage: 167237.2,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:18:02',
+        createTime: '2025-04-01 09:18:32',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867950965224,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+239.0',
+        stakeType: 'K',
+        mileage: 167239,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:18:48',
+        createTime: '2025-04-01 09:19:03',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867951211776,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+230.1',
+        stakeType: 'K',
+        mileage: 167230.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:19:18',
+        createTime: '2025-04-01 09:19:34',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867951458280,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+230.1',
+        stakeType: 'K',
+        mileage: 167230.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:19:18',
+        createTime: '2025-04-01 09:20:05',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867951704944,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+230.1',
+        stakeType: 'K',
+        mileage: 167230.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:19:18',
+        createTime: '2025-04-01 09:20:35',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867951951600,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+230.1',
+        stakeType: 'K',
+        mileage: 167230.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:19:18',
+        createTime: '2025-04-01 09:21:06',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867966989040,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.0',
+        stakeType: 'K',
+        mileage: 167236,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:51:59',
+        createTime: '2025-04-01 09:52:26',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867967235976,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+234.6',
+        stakeType: 'K',
+        mileage: 167234.6,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:52:41',
+        createTime: '2025-04-01 09:52:57',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867967482088,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+241.0',
+        stakeType: 'K',
+        mileage: 167241,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:53:12',
+        createTime: '2025-04-01 09:53:28',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867967728584,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+241.0',
+        stakeType: 'K',
+        mileage: 167241,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:53:12',
+        createTime: '2025-04-01 09:53:58',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867967975160,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+241.0',
+        stakeType: 'K',
+        mileage: 167241,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:53:12',
+        createTime: '2025-04-01 09:54:29',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867968221744,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+241.0',
+        stakeType: 'K',
+        mileage: 167241,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:53:12',
+        createTime: '2025-04-01 09:55:00',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867969208024,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+235.0',
+        stakeType: 'K',
+        mileage: 167235,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:56:46',
+        createTime: '2025-04-01 09:57:03',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867969454552,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+235.3',
+        stakeType: 'K',
+        mileage: 167235.3,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:57:16',
+        createTime: '2025-04-01 09:57:34',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867969701016,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+237.0',
+        stakeType: 'K',
+        mileage: 167237,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:57:39',
+        createTime: '2025-04-01 09:58:05',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867969947232,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+234.1',
+        stakeType: 'K',
+        mileage: 167234.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:58:21',
+        createTime: '2025-04-01 09:58:36',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867970193744,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+234.1',
+        stakeType: 'K',
+        mileage: 167234.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:58:52',
+        createTime: '2025-04-01 09:59:07',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867970440616,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.2',
+        stakeType: 'K',
+        mileage: 167236.2,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:59:23',
+        createTime: '2025-04-01 09:59:37',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867970686784,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+235.7',
+        stakeType: 'K',
+        mileage: 167235.7,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:59:30',
+        createTime: '2025-04-01 10:00:08',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867970933312,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+237.0',
+        stakeType: 'K',
+        mileage: 167237,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:00:17',
+        createTime: '2025-04-01 10:00:39',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867971179808,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+237.0',
+        stakeType: 'K',
+        mileage: 167237,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:00:17',
+        createTime: '2025-04-01 10:01:10',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867971426616,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+237.0',
+        stakeType: 'K',
+        mileage: 167237,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:00:17',
+        createTime: '2025-04-01 10:01:41',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867971672784,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+237.0',
+        stakeType: 'K',
+        mileage: 167237,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:00:17',
+        createTime: '2025-04-01 10:02:11',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867974384400,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+380.0',
+        stakeType: 'K',
+        mileage: 167380,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:07:32',
+        createTime: '2025-04-01 10:07:50',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867974631248,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.6',
+        stakeType: 'K',
+        mileage: 167236.6,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:08:03',
+        createTime: '2025-04-01 10:08:21',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867974877752,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+235.6',
+        stakeType: 'K',
+        mileage: 167235.6,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:08:34',
+        createTime: '2025-04-01 10:08:52',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867975119856,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+232.6',
+        stakeType: 'K',
+        mileage: 167232.6,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:08:57',
+        createTime: '2025-04-01 10:09:22',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867975363520,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+235.7',
+        stakeType: 'K',
+        mileage: 167235.7,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:09:34',
+        createTime: '2025-04-01 10:09:53',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867975610072,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K165+387.7',
+        stakeType: 'K',
+        mileage: 165387.7,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:10:05',
+        createTime: '2025-04-01 10:10:24',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867975856184,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+230.6',
+        stakeType: 'K',
+        mileage: 167230.6,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:10:36',
+        createTime: '2025-04-01 10:10:54',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867976102720,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+235.5',
+        stakeType: 'K',
+        mileage: 167235.5,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:10:51',
+        createTime: '2025-04-01 10:11:25',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867976349496,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.6',
+        stakeType: 'K',
+        mileage: 167236.6,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:11:33',
+        createTime: '2025-04-01 10:11:56',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867976595752,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+232.8',
+        stakeType: 'K',
+        mileage: 167232.8,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:12:12',
+        createTime: '2025-04-01 10:12:27',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867976842304,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+241.8',
+        stakeType: 'K',
+        mileage: 167241.8,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:12:42',
+        createTime: '2025-04-01 10:12:58',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867977089152,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+239.8',
+        stakeType: 'K',
+        mileage: 167239.8,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:13:13',
+        createTime: '2025-04-01 10:13:28',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867977335624,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.5',
+        stakeType: 'K',
+        mileage: 167236.5,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:13:44',
+        createTime: '2025-04-01 10:13:59',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867977581744,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+237.3',
+        stakeType: 'K',
+        mileage: 167237.3,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:14:15',
+        createTime: '2025-04-01 10:14:30',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867978074784,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+239.7',
+        stakeType: 'K',
+        mileage: 167239.7,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:15:12',
+        createTime: '2025-04-01 10:15:32',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867978321336,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+240.8',
+        stakeType: 'K',
+        mileage: 167240.8,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:15:43',
+        createTime: '2025-04-01 10:16:02',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867978567776,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+240.0',
+        stakeType: 'K',
+        mileage: 167240,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:16:14',
+        createTime: '2025-04-01 10:16:33',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867979060840,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+238.0',
+        stakeType: 'K',
+        mileage: 167238,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:17:13',
+        createTime: '2025-04-01 10:17:35',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867979307328,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+238.4',
+        stakeType: 'K',
+        mileage: 167238.4,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:17:52',
+        createTime: '2025-04-01 10:18:06',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867979554296,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+238.2',
+        stakeType: 'K',
+        mileage: 167238.2,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:18:22',
+        createTime: '2025-04-01 10:18:37',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867979800704,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.9',
+        stakeType: 'K',
+        mileage: 167236.9,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:18:52',
+        createTime: '2025-04-01 10:19:07',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      }
+    ]
+  } ],
+  startAnimate: true,
+  dataCheck: -1
+})
+
+// svg 配置
+const svgConfig = reactive({
+  width: 600,
+  height: 300,
+  domWidth: 1408,
+  tunnel: [] as any,
+  leng: [] as any
+})
+const devices = ref([] as { [key: string]: any }[])
+const timer = ref()
+const mileage2string = (num: number, type = '') => {
+  const a = Math.floor(num / 1000).toString()
+  const ab = parseFloat((num % 1000).toFixed(1))
+  const b = Math.floor(num % 1000).toString()
+  const c = b.length === 1 ? `00${ab}` : b.length === 2 ? `0${ab}` : ab
+  return `${type}${a}+${c}`
+}
+
+// 初始化svg
+function initSVG() {
+  if (!props.menuItem || !props.menuItem.currentStake) {
+    svgConfig.tunnel = []
+    svgConfig.leng = []
+    window.$notification.warning({ content: `无数据${JSON.stringify(props.menuItem)}`, duration: 3000 })
+    return
+  }
+  const box = document.getElementById('SVGBOX')?.getBoundingClientRect()
+  if (!box?.width) { window.$notification.warning({ content: 'dom初始化错误,请刷新重试!', duration: 3000 }); return }
+  // 隧道长度=已开挖/2+已开挖
+  const width = props.menuItem.isIn ? Math.floor(props.menuItem!.currentStake - props.menuItem!.startStake) : Math.floor(props.menuItem.endStake - props.menuItem.currentStake)
+  svgConfig.width = Math.floor(width / 2 + width)
+  svgConfig.domWidth = box!.width
+  // 计算当前已开挖dom实际位置
+  const w = (width / svgConfig.width) * box!.width
+  svgConfig.tunnel = [
+    {
+      x: 0, y: 0, w: props.menuItem.isIn ? w : box!.width - w, h: svgConfig.height, img: props.menuItem.isIn ? img2 : img1
+    },
+    {
+      x: props.menuItem.isIn ? w : box!.width - w, y: 0, w: props.menuItem.isIn ? box!.width - w : w, h: svgConfig.height, img: !props.menuItem.isIn ? img2 : img1
+    }
+  ]
+  svgConfig.leng = [
+    {
+      name: '进口', stake: mileage2string(props.menuItem.startStake, props.menuItem!.stakeType), x: 0, type: 'start'
+    },
+    {
+      name: '当前位置', stake: mileage2string(props.menuItem!.currentStake, props.menuItem!.stakeType), x: props.menuItem.isIn ? w : box!.width - w, type: 'middle'
+    },
+    {
+      name: '出口', stake: mileage2string(props.menuItem.endStake, props.menuItem!.stakeType), x: box!.width, type: 'end'
+    }
+  ]
+  console.log('隧道配置', svgConfig)
+  console.log('传递参数', props)
+}
+
+// 计算path 路径
+function countPath(arr: { mileage: number }[]) {
+  if (!props.menuItem || !svgConfig.domWidth) return ''
+  let str = 'M'
+  const y = svgConfig.height / 2 + svgConfig.height / 4
+  for (let k = 0; k < arr.length; k++) {
+    const el = arr[k]
+    const width = props.menuItem.isIn ? (el.mileage - props.menuItem!.startStake) : (props.menuItem.endStake - el.mileage)
+    const x = props.menuItem?.isIn ? Math.floor((width / svgConfig.width) * svgConfig.domWidth) : svgConfig.domWidth - Math.floor((width / svgConfig.width) * svgConfig.domWidth)
+    str += ` ${x},${y}`
+  }
+  return str
+}
+
+function setData(data: any) {
+  if (!data || !data.length || !svgConfig.tunnel.length || !props.menuItem || !svgConfig.domWidth) { devices.value = []; return }
+  devices.value = data.map((el: { postions: { mileage: number, positionTime: string }[], w: number, isDevice:boolean }, index:number) => {
+    const lastPositon = el.postions[el.postions.length - 1]
+    const width = props.menuItem!.isIn ? (lastPositon.mileage - props.menuItem!.startStake) : (props.menuItem!.endStake - lastPositon.mileage)
+    const x = props.menuItem?.isIn ? Math.floor((width / svgConfig.width) * svgConfig.domWidth) : svgConfig.domWidth - Math.floor((width / svgConfig.width) * svgConfig.domWidth)
+    const y = svgConfig.height / 4
+    const transform = props.menuItem!.isIn && el.isDevice ? '' : `translate(${x + el.w / 2},${y}) scale(-1, 1) translate(${-(x + el.w / 2)},${-y})`
+    const h = svgConfig.height / 2
+    const obj = {
+      ...el,
+      pathId: `SVGPATH${index}`,
+      imgId: `SVGIMG${index}`,
+      pathD: countPath(el.postions),
+      positionTime: lastPositon.positionTime,
+      h,
+      x: props.startAnimate ? el.w / 2 : x,
+      y: props.startAnimate ? -h : y,
+      transform: props.startAnimate ? `translate(${el.w / 2},${h}) scale(-1, 1) translate(-${el.w / 2},-${h})` : transform,
+      mileage: lastPositon.mileage,
+      duration: data.length * 100,
+      startAnimate() {
+        // 路径
+        const g = document.getElementById(this.pathId)
+        // 创建path及动画
+        const pathChild = g?.childNodes
+        if (pathChild?.length) g?.replaceChildren()
+        // 移动目标
+        const img = document.getElementById(this.imgId)
+        const imgChild = img?.querySelectorAll('animateMotion')
+        if (imgChild?.length) imgChild.forEach((el) => el.remove())
+        // 开始动画
+        if (props.startAnimate) {
+        // 设置动画参数
+          const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+          path.setAttribute('d', this.pathD)
+          path.setAttribute('fill', 'none')
+          path.setAttribute('stroke', '#3498db')
+          path.setAttribute('stroke-width', '1')
+          path.setAttribute('stroke-dashoffset', '0')
+          const pathLength = Math.ceil(path?.getTotalLength())
+          path.setAttribute('stroke-dasharray', `0, ${pathLength}`)
+          const pathAnimate = document.createElementNS('http://www.w3.org/2000/svg', 'animate')
+          pathAnimate.setAttribute('attributeName', 'stroke-dasharray')
+          pathAnimate.setAttribute('begin', '0s')
+          pathAnimate.setAttribute('dur', `${this.duration}s`)
+          pathAnimate.setAttribute('values', `0, ${pathLength}; ${pathLength}, 0`)
+          pathAnimate.setAttribute('calcMode', 'linear')
+          pathAnimate.setAttribute('fill', 'freeze')
+          path.appendChild(pathAnimate)
+          g?.appendChild(path)
+
+          // 给移动目标创建动画
+          const animateMotion = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion')
+          animateMotion.setAttribute('dur', `${this.duration}s`)
+          animateMotion.setAttribute('fill', 'freeze')
+          animateMotion.setAttribute('path', this.pathD)
+          img?.appendChild(animateMotion)
+
+          // 开始动画
+          animateMotion.beginElement()
+          pathAnimate.beginElement()
+        }
+      }
+    }
+    return obj
+  })
+  console.log('台车位置', devices.value)
+  if (timer.value) clearTimeout(timer.value)
+  timer.value = setTimeout(() => {
+    for (let k = 0; k < devices.value.length; k++) {
+      const el = devices.value[k]
+      el.startAnimate()
+    }
+  }, 200)
+}
+
+watch(() => props.menuItem, (v) => initSVG())
+watch(() => props.data, (v) => setData(v))
+onMounted(() => { initSVG(); setData(props.data) })
+onUnmounted(() => clearTimeout(timer.value))
+</script>
+
+<style lang="scss" scoped>
+.box {
+  width: 100vw;
+  height: 390px;
+  background: black;
+  svg {
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+  }
+}
+</style>

src/pages/svgAnimation/index.vue

@@ -1,1453 +1,11 @@
 <template>
-  <div
-    id="SVGBOX"
-    class="box"
-  >
-    <svg
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-    >
-      <!-- 模版 -->
-      <defs>
-        <!-- 短竖线-->
-        <marker
-          id="s"
-          viewBox="0 0 2 10"
-          refX="0"
-          refY="5"
-          markerWidth="5"
-          markerHeight="10"
-        >
-          <line
-            x1="0"
-            y1="0.5"
-            x2="0"
-            y2="10"
-            stroke="white"
-            stroke-width="2"
-          />
-        </marker>
-        <!-- 定义描边滤镜 -->
-        <filter
-          id="outline"
-          x="-10%"
-          y="-10%"
-          width="120%"
-          height="120%"
-        >
-          <!-- 扩张图片边缘 -->
-          <feMorphology
-            operator="dilate"
-            radius="2"
-            in="SourceAlpha"
-            result="thicker"
-          />
-          <!-- 描边颜色 -->
-          <feFlood
-            flood-color="#25DCE2"
-            result="color"
-          />
-          <!-- 合并描边和原图 -->
-          <feComposite
-            in="color"
-            in2="thicker"
-            operator="in"
-            result="outline"
-          />
-          <feComposite
-            in="SourceGraphic"
-            in2="outline"
-            operator="over"
-          />
-        </filter>
-      </defs>
-      <!-- 底色 -->
-      <image
-        v-for="(item, index) in svgConfig.tunnel"
-        :key="index"
-        :href="item.img"
-        :x="item.x"
-        :y="item.y"
-        :width="item.w"
-        :height="item.h"
-        preserveAspectRatio="none"
-      />
-      <!-- leng -->
-      <g v-if="svgConfig.leng.length">
-        <polyline
-          :points="`0,${svgConfig.height + 5} ${svgConfig.leng[1].x},${svgConfig.height + 5} ${svgConfig.domWidth - 1},${svgConfig.height + 5}`"
-          fill="none"
-          stroke="white"
-          stroke-width="1"
-          marker-start="url(#s)"
-          marker-mid="url(#s)"
-          marker-end="url(#s)"
-        />
-        <g
-          v-for="(item, index) in svgConfig.leng"
-          :key="index"
-        >
-          <text
-            :x="item.x"
-            :y="svgConfig.height + 25"
-            fill="white"
-            font-size="12"
-            :text-anchor="item.type"
-          >{{ item.name
-          }}</text>
-          <text
-            :x="item.x"
-            :y="svgConfig.height + 40"
-            fill="white"
-            font-size="11"
-            :text-anchor="item.type"
-          >{{ item.stake
-          }}</text>
-        </g>
-      </g>
-
-      <!-- 移动目标 -->
-      <g
-        v-for="(item, index) in devices"
-        :key="index"
-      >
-        <!-- 存运动路径+动画 -->
-        <g :id="item.pathId" />
-        <!-- 对象 -->
-        <g :id="item.imgId">
-          <image
-            :href="item.img"
-            :x="item.x"
-            :y="item.y"
-            :width="item.w"
-            :height="svgConfig.height / 2"
-            :transform="item.transform"
-            :filter="props.dataCheck === index ? 'url(#outline)':''"
-          />
-          <!-- tip -->
-          <image
-            v-if="item.isDevice"
-            :href="img5"
-            :x="props.startAnimate? item.x-item.w/2-187/2: item.x+187/2"
-            :y="item.y"
-            width="187"
-            height="60"
-            preserveAspectRatio="xMidYMid meet"
-          />
-          <text
-            v-if="item.isDevice"
-            :x="props.startAnimate? item.x-item.w/2-187/2+3: item.x+187/2+3"
-            :y="item.y+20"
-            font-size="20"
-            fill="white"
-            textLength="180"
-            font-weight="bold"
-            dominant-baseline="middle"
-          >{{ item.positionTime }}</text>
-        </g>
-      </g>
-    </svg>
-  </div>
+  <router-view />
 </template>
 
 <script setup lang='ts'>
-import {
-  onMounted,
-  onUnmounted, reactive, ref, watch
-} from 'vue'
-import img1 from './img/1.png'
-import img2 from './img/2.png'
-import img5 from './img/5.png'
-
-const props = withDefaults(defineProps<{
-  data?: { img: string, postions: any[] }[], // 原始数据
-  dataCheck?: number, // 对象选中
-  startAnimate?: boolean, // 显示动画
-  menuItem?: { isIn: boolean, startStake: number, endStake: number, currentStake: number, length: number, stakeType: string },
-}>(), {
-  menuItem: () => ({
-    currentStake: 167175.4,
-    endStake: 167395,
-    isIn: false,
-    length: 6560,
-    name: '出口',
-    stakeType: 'K',
-    startStake: 160835
-  }),
-  data: () => [ {
-    img: new URL('./img/3.png', import.meta.url).href,
-    name: '台车',
-    isDevice: true,
-    w: 350,
-    postions: [
-      {
-        id: 1867949485392,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+240.6',
-        stakeType: 'K',
-        mileage: 167240.6,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:15:40',
-        createTime: '2025-04-01 09:15:58',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867949732232,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+238.1',
-        stakeType: 'K',
-        mileage: 167238.1,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:16:11',
-        createTime: '2025-04-01 09:16:29',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867949978792,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+235.4',
-        stakeType: 'K',
-        mileage: 167235.4,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:16:45',
-        createTime: '2025-04-01 09:17:00',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867950225528,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+236.1',
-        stakeType: 'K',
-        mileage: 167236.1,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:17:16',
-        createTime: '2025-04-01 09:17:31',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867950472120,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+236.9',
-        stakeType: 'K',
-        mileage: 167236.9,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:17:47',
-        createTime: '2025-04-01 09:18:01',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867950718728,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+237.2',
-        stakeType: 'K',
-        mileage: 167237.2,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:18:02',
-        createTime: '2025-04-01 09:18:32',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867950965224,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+239.0',
-        stakeType: 'K',
-        mileage: 167239,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:18:48',
-        createTime: '2025-04-01 09:19:03',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867951211776,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+230.1',
-        stakeType: 'K',
-        mileage: 167230.1,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:19:18',
-        createTime: '2025-04-01 09:19:34',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867951458280,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+230.1',
-        stakeType: 'K',
-        mileage: 167230.1,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:19:18',
-        createTime: '2025-04-01 09:20:05',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867951704944,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+230.1',
-        stakeType: 'K',
-        mileage: 167230.1,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:19:18',
-        createTime: '2025-04-01 09:20:35',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867951951600,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+230.1',
-        stakeType: 'K',
-        mileage: 167230.1,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:19:18',
-        createTime: '2025-04-01 09:21:06',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867966989040,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+236.0',
-        stakeType: 'K',
-        mileage: 167236,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:51:59',
-        createTime: '2025-04-01 09:52:26',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867967235976,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+234.6',
-        stakeType: 'K',
-        mileage: 167234.6,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:52:41',
-        createTime: '2025-04-01 09:52:57',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867967482088,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+241.0',
-        stakeType: 'K',
-        mileage: 167241,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:53:12',
-        createTime: '2025-04-01 09:53:28',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867967728584,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+241.0',
-        stakeType: 'K',
-        mileage: 167241,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:53:12',
-        createTime: '2025-04-01 09:53:58',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867967975160,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+241.0',
-        stakeType: 'K',
-        mileage: 167241,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:53:12',
-        createTime: '2025-04-01 09:54:29',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867968221744,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+241.0',
-        stakeType: 'K',
-        mileage: 167241,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:53:12',
-        createTime: '2025-04-01 09:55:00',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867969208024,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+235.0',
-        stakeType: 'K',
-        mileage: 167235,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:56:46',
-        createTime: '2025-04-01 09:57:03',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867969454552,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+235.3',
-        stakeType: 'K',
-        mileage: 167235.3,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:57:16',
-        createTime: '2025-04-01 09:57:34',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867969701016,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+237.0',
-        stakeType: 'K',
-        mileage: 167237,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:57:39',
-        createTime: '2025-04-01 09:58:05',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867969947232,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+234.1',
-        stakeType: 'K',
-        mileage: 167234.1,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:58:21',
-        createTime: '2025-04-01 09:58:36',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867970193744,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+234.1',
-        stakeType: 'K',
-        mileage: 167234.1,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:58:52',
-        createTime: '2025-04-01 09:59:07',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867970440616,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+236.2',
-        stakeType: 'K',
-        mileage: 167236.2,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:59:23',
-        createTime: '2025-04-01 09:59:37',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867970686784,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+235.7',
-        stakeType: 'K',
-        mileage: 167235.7,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 09:59:30',
-        createTime: '2025-04-01 10:00:08',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867970933312,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+237.0',
-        stakeType: 'K',
-        mileage: 167237,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:00:17',
-        createTime: '2025-04-01 10:00:39',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867971179808,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+237.0',
-        stakeType: 'K',
-        mileage: 167237,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:00:17',
-        createTime: '2025-04-01 10:01:10',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867971426616,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+237.0',
-        stakeType: 'K',
-        mileage: 167237,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:00:17',
-        createTime: '2025-04-01 10:01:41',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867971672784,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+237.0',
-        stakeType: 'K',
-        mileage: 167237,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:00:17',
-        createTime: '2025-04-01 10:02:11',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867974384400,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+380.0',
-        stakeType: 'K',
-        mileage: 167380,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:07:32',
-        createTime: '2025-04-01 10:07:50',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867974631248,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+236.6',
-        stakeType: 'K',
-        mileage: 167236.6,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:08:03',
-        createTime: '2025-04-01 10:08:21',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867974877752,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+235.6',
-        stakeType: 'K',
-        mileage: 167235.6,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:08:34',
-        createTime: '2025-04-01 10:08:52',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867975119856,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+232.6',
-        stakeType: 'K',
-        mileage: 167232.6,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:08:57',
-        createTime: '2025-04-01 10:09:22',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867975363520,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+235.7',
-        stakeType: 'K',
-        mileage: 167235.7,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:09:34',
-        createTime: '2025-04-01 10:09:53',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867975610072,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K165+387.7',
-        stakeType: 'K',
-        mileage: 165387.7,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:10:05',
-        createTime: '2025-04-01 10:10:24',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867975856184,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+230.6',
-        stakeType: 'K',
-        mileage: 167230.6,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:10:36',
-        createTime: '2025-04-01 10:10:54',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867976102720,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+235.5',
-        stakeType: 'K',
-        mileage: 167235.5,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:10:51',
-        createTime: '2025-04-01 10:11:25',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867976349496,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+236.6',
-        stakeType: 'K',
-        mileage: 167236.6,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:11:33',
-        createTime: '2025-04-01 10:11:56',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867976595752,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+232.8',
-        stakeType: 'K',
-        mileage: 167232.8,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:12:12',
-        createTime: '2025-04-01 10:12:27',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867976842304,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+241.8',
-        stakeType: 'K',
-        mileage: 167241.8,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:12:42',
-        createTime: '2025-04-01 10:12:58',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867977089152,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+239.8',
-        stakeType: 'K',
-        mileage: 167239.8,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:13:13',
-        createTime: '2025-04-01 10:13:28',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867977335624,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+236.5',
-        stakeType: 'K',
-        mileage: 167236.5,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:13:44',
-        createTime: '2025-04-01 10:13:59',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867977581744,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+237.3',
-        stakeType: 'K',
-        mileage: 167237.3,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:14:15',
-        createTime: '2025-04-01 10:14:30',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867978074784,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+239.7',
-        stakeType: 'K',
-        mileage: 167239.7,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:15:12',
-        createTime: '2025-04-01 10:15:32',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867978321336,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+240.8',
-        stakeType: 'K',
-        mileage: 167240.8,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:15:43',
-        createTime: '2025-04-01 10:16:02',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867978567776,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+240.0',
-        stakeType: 'K',
-        mileage: 167240,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:16:14',
-        createTime: '2025-04-01 10:16:33',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867979060840,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+238.0',
-        stakeType: 'K',
-        mileage: 167238,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:17:13',
-        createTime: '2025-04-01 10:17:35',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867979307328,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+238.4',
-        stakeType: 'K',
-        mileage: 167238.4,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:17:52',
-        createTime: '2025-04-01 10:18:06',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867979554296,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+238.2',
-        stakeType: 'K',
-        mileage: 167238.2,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:18:22',
-        createTime: '2025-04-01 10:18:37',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      },
-      {
-        id: 1867979800704,
-        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
-        stakeNumber: 'K167+236.9',
-        stakeType: 'K',
-        mileage: 167236.9,
-        isInTunnel: true,
-        longitude: 102.541554,
-        latitude: 30.051554,
-        elevation: 0,
-        tunnelId: 'dt',
-        tunnelPositioningId: 'zj_ylq_dt',
-        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
-        positionTime: '2025-04-01 10:18:52',
-        createTime: '2025-04-01 10:19:07',
-        createBy: 119,
-        tolerantTime: null,
-        startTime: null,
-        endTime: null,
-        isIn: null,
-        state: 0
-      }
-    ]
-  } ],
-  startAnimate: true,
-  dataCheck: -1
-})
-
-// svg 配置
-const svgConfig = reactive({
-  width: 600,
-  height: 300,
-  domWidth: 1408,
-  tunnel: [] as any,
-  leng: [] as any
-})
-const devices = ref([] as { [key: string]: any }[])
-const timer = ref()
-const mileage2string = (num: number, type = '') => {
-  const a = Math.floor(num / 1000).toString()
-  const ab = parseFloat((num % 1000).toFixed(1))
-  const b = Math.floor(num % 1000).toString()
-  const c = b.length === 1 ? `00${ab}` : b.length === 2 ? `0${ab}` : ab
-  return `${type}${a}+${c}`
-}
-
-// 初始化svg
-function initSVG() {
-  if (!props.menuItem || !props.menuItem.currentStake) {
-    svgConfig.tunnel = []
-    svgConfig.leng = []
-    window.$notification.warning({ content: `无数据${JSON.stringify(props.menuItem)}`, duration: 3000 })
-    return
-  }
-  const box = document.getElementById('SVGBOX')?.getBoundingClientRect()
-  if (!box?.width) { window.$notification.warning({ content: 'dom初始化错误,请刷新重试!', duration: 3000 }); return }
-  // 隧道长度=已开挖/2+已开挖
-  const width = props.menuItem.isIn ? Math.floor(props.menuItem!.currentStake - props.menuItem!.startStake) : Math.floor(props.menuItem.endStake - props.menuItem.currentStake)
-  svgConfig.width = Math.floor(width / 2 + width)
-  svgConfig.domWidth = box!.width
-  // 计算当前已开挖dom实际位置
-  const w = (width / svgConfig.width) * box!.width
-  svgConfig.tunnel = [
-    {
-      x: 0, y: 0, w: props.menuItem.isIn ? w : box!.width - w, h: svgConfig.height, img: props.menuItem.isIn ? img2 : img1
-    },
-    {
-      x: props.menuItem.isIn ? w : box!.width - w, y: 0, w: props.menuItem.isIn ? box!.width - w : w, h: svgConfig.height, img: !props.menuItem.isIn ? img2 : img1
-    }
-  ]
-  svgConfig.leng = [
-    {
-      name: '进口', stake: mileage2string(props.menuItem.startStake, props.menuItem!.stakeType), x: 0, type: 'start'
-    },
-    {
-      name: '当前位置', stake: mileage2string(props.menuItem!.currentStake, props.menuItem!.stakeType), x: props.menuItem.isIn ? w : box!.width - w, type: 'middle'
-    },
-    {
-      name: '出口', stake: mileage2string(props.menuItem.endStake, props.menuItem!.stakeType), x: box!.width, type: 'end'
-    }
-  ]
-  console.log('隧道配置', svgConfig)
-  console.log('传递参数', props)
-}
-
-// 计算path 路径
-function countPath(arr: { mileage: number }[]) {
-  if (!props.menuItem || !svgConfig.domWidth) return ''
-  let str = 'M'
-  const y = svgConfig.height / 2 + svgConfig.height / 4
-  for (let k = 0; k < arr.length; k++) {
-    const el = arr[k]
-    const width = props.menuItem.isIn ? (el.mileage - props.menuItem!.startStake) : (props.menuItem.endStake - el.mileage)
-    const x = props.menuItem?.isIn ? Math.floor((width / svgConfig.width) * svgConfig.domWidth) : svgConfig.domWidth - Math.floor((width / svgConfig.width) * svgConfig.domWidth)
-    str += ` ${x},${y}`
-  }
-  return str
-}
 
-function setData(data: any) {
-  if (!data || !data.length || !svgConfig.tunnel.length || !props.menuItem || !svgConfig.domWidth) { devices.value = []; return }
-  devices.value = data.map((el: { postions: { mileage: number, positionTime: string }[], w: number, isDevice:boolean }, index:number) => {
-    const lastPositon = el.postions[el.postions.length - 1]
-    const width = props.menuItem!.isIn ? (lastPositon.mileage - props.menuItem!.startStake) : (props.menuItem!.endStake - lastPositon.mileage)
-    const x = props.menuItem?.isIn ? Math.floor((width / svgConfig.width) * svgConfig.domWidth) : svgConfig.domWidth - Math.floor((width / svgConfig.width) * svgConfig.domWidth)
-    const y = svgConfig.height / 4
-    const transform = props.menuItem!.isIn && el.isDevice ? '' : `translate(${x + el.w / 2},${y}) scale(-1, 1) translate(${-(x + el.w / 2)},${-y})`
-    const h = svgConfig.height / 2
-    const obj = {
-      ...el,
-      pathId: `SVGPATH${index}`,
-      imgId: `SVGIMG${index}`,
-      pathD: countPath(el.postions),
-      positionTime: lastPositon.positionTime,
-      h,
-      x: props.startAnimate ? el.w / 2 : x,
-      y: props.startAnimate ? -h : y,
-      transform: props.startAnimate ? `translate(${el.w / 2},${h}) scale(-1, 1) translate(-${el.w / 2},-${h})` : transform,
-      mileage: lastPositon.mileage,
-      duration: data.length * 100,
-      startAnimate() {
-        // 路径
-        const g = document.getElementById(this.pathId)
-        // 创建path及动画
-        const pathChild = g?.childNodes
-        if (pathChild?.length) g?.replaceChildren()
-        // 移动目标
-        const img = document.getElementById(this.imgId)
-        const imgChild = img?.querySelectorAll('animateMotion')
-        if (imgChild?.length) imgChild.forEach((el) => el.remove())
-        // 开始动画
-        if (props.startAnimate) {
-        // 设置动画参数
-          const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
-          path.setAttribute('d', this.pathD)
-          path.setAttribute('fill', 'none')
-          path.setAttribute('stroke', '#3498db')
-          path.setAttribute('stroke-width', '1')
-          path.setAttribute('stroke-dashoffset', '0')
-          const pathLength = Math.ceil(path?.getTotalLength())
-          path.setAttribute('stroke-dasharray', `0, ${pathLength}`)
-          const pathAnimate = document.createElementNS('http://www.w3.org/2000/svg', 'animate')
-          pathAnimate.setAttribute('attributeName', 'stroke-dasharray')
-          pathAnimate.setAttribute('begin', '0s')
-          pathAnimate.setAttribute('dur', `${this.duration}s`)
-          pathAnimate.setAttribute('values', `0, ${pathLength}; ${pathLength}, 0`)
-          pathAnimate.setAttribute('calcMode', 'linear')
-          pathAnimate.setAttribute('fill', 'freeze')
-          path.appendChild(pathAnimate)
-          g?.appendChild(path)
-
-          // 给移动目标创建动画
-          const animateMotion = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion')
-          animateMotion.setAttribute('dur', `${this.duration}s`)
-          animateMotion.setAttribute('fill', 'freeze')
-          animateMotion.setAttribute('path', this.pathD)
-          img?.appendChild(animateMotion)
-
-          // 开始动画
-          animateMotion.beginElement()
-          pathAnimate.beginElement()
-        }
-      }
-    }
-    return obj
-  })
-  console.log('台车位置', devices.value)
-  if (timer.value) clearTimeout(timer.value)
-  timer.value = setTimeout(() => {
-    for (let k = 0; k < devices.value.length; k++) {
-      const el = devices.value[k]
-      el.startAnimate()
-    }
-  }, 200)
-}
-
-watch(() => props.menuItem, (v) => initSVG())
-watch(() => props.data, (v) => setData(v))
-onMounted(() => { initSVG(); setData(props.data) })
-onUnmounted(() => clearTimeout(timer.value))
 </script>
 
-<style lang="scss" scoped>
-.box {
-  width: 1500px;
-  height: 390px;
-  background: black;
-  svg {
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-  }
-
-  &-leng {
-    position: relative;
-    width: 100%;
-    height: 98px;
-    left: 0;
-    bottom: 0;
-
-    &-item {
-      position: absolute;
-      text-align: center;
-      font-size: 0.14rem;
-      top: 50%;
-      transform: translate(0, -50%);
+<style>
 
-      &:nth-child(2) {
-        top: 0;
-      }
-    }
-  }
-}
 </style>

src/pages/svgAnimation/route.ts

@@ -5,5 +5,10 @@ export default {
   meta: {
     authorize: true
   },
-  component: face
+  component: () => import('./index.vue'),
+  redirect: '/svgAnimate/assets',
+  children: [
+    { path: 'assets', component: () => import('./assets.vue') },
+    { path: 'scale', component: () => import('./scale.vue') }
+  ]
 } as RouteRecordRaw

src/pages/svgAnimation/scale.vue

@@ -0,0 +1,1454 @@
+<template>
+  <svg
+    width="100%"
+    height="100%"
+    :viewBox="`0 0 ${svgConfig.width} ${svgConfig.height}`"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+  >
+    <!-- 模版 -->
+    <defs>
+      <!-- 短竖线-->
+      <marker
+        id="s"
+        viewBox="0 0 2 10"
+        refX="0"
+        refY="5"
+        markerWidth="5"
+        markerHeight="10"
+      >
+        <line
+          x1="0"
+          y1="0.5"
+          x2="0"
+          y2="10"
+          stroke="white"
+          stroke-width="2"
+        />
+      </marker>
+      <!-- 定义描边滤镜 -->
+      <filter
+        id="outline"
+        x="-10%"
+        y="-10%"
+        width="120%"
+        height="120%"
+      >
+        <!-- 扩张图片边缘 -->
+        <feMorphology
+          operator="dilate"
+          radius="2"
+          in="SourceAlpha"
+          result="thicker"
+        />
+        <!-- 描边颜色 -->
+        <feFlood
+          flood-color="#25DCE2"
+          result="color"
+        />
+        <!-- 合并描边和原图 -->
+        <feComposite
+          in="color"
+          in2="thicker"
+          operator="in"
+          result="outline"
+        />
+        <feComposite
+          in="SourceGraphic"
+          in2="outline"
+          operator="over"
+        />
+      </filter>
+    </defs>
+    <g id="scene">
+      <!-- 已开挖底色 -->
+      <image
+        v-for="(item, index) in svgConfig.tunnel"
+        :key="index"
+        :href="item.img"
+        :x="item.x"
+        :y="item.y"
+        :width="item.w"
+        :height="item.h"
+        preserveAspectRatio="none"
+      />
+      <!-- 图例 -->
+      <g v-if="svgConfig.leng.length">
+        <polyline
+          :points="`0,340 ${svgConfig.tunnel[1].x},340 ${svgConfig.width},340`"
+          fill="none"
+          stroke="white"
+          stroke-width="1"
+          marker-start="url(#s)"
+          marker-mid="url(#s)"
+          marker-end="url(#s)"
+        />
+        <g
+          v-for="(item, index) in svgConfig.leng"
+          :key="index"
+        >
+          <text
+            :x="item.x"
+            y="365"
+            fill="white"
+            font-size="15"
+            :text-anchor="item.type"
+          >{{ item.name
+          }}</text>
+          <text
+            :x="item.x"
+            y="390"
+            fill="white"
+            font-size="15"
+            :text-anchor="item.type"
+          >{{ item.stake
+          }}</text>
+        </g>
+      </g>
+      <!-- 移动目标 -->
+      <g
+        v-for="(item, index) in devices"
+        :key="index"
+      >
+        <!-- 存运动路径+动画 -->
+        <g :id="item.pathId" />
+        <!-- 对象 -->
+        <g :id="item.imgId">
+          <image
+            :href="item.img"
+            :x="item.x"
+            :y="item.y"
+            :width="item.w"
+            :height="svgConfig.height / 2"
+            :transform="item.transform"
+            :filter="props.dataCheck === index ? 'url(#outline)':''"
+          />
+          <!-- tip -->
+          <image
+            v-if="item.isDevice"
+            :href="img5"
+            :x="props.startAnimate? item.x-item.w/2-187/2: item.x+187/2"
+            :y="item.y"
+            width="187"
+            height="60"
+            preserveAspectRatio="xMidYMid meet"
+          />
+          <text
+            v-if="item.isDevice"
+            :x="props.startAnimate? item.x-item.w/2-187/2+3: item.x+187/2+3"
+            :y="item.y+20"
+            font-size="20"
+            fill="white"
+            textLength="180"
+            font-weight="bold"
+            dominant-baseline="middle"
+          >{{ item.positionTime }}</text>
+        </g>
+      </g>
+    </g>
+  </svg>
+</template>
+
+<script setup lang='ts'>
+import {
+  onUnmounted, reactive, ref, watch, onMounted
+} from 'vue'
+import img1 from './img/1.png'
+import img2 from './img/2.png'
+import img5 from './img/5.png'
+import panzoom, { PanZoom } from 'panzoom'
+
+const props = withDefaults(defineProps<{
+  data?: { img: string, postions: any[] }[], // 原始数据
+  dataCheck?: number, // 对象选中
+  startAnimate?: boolean, // 显示动画
+  menuItem?: { isIn: boolean, startStake: number, endStake: number, currentStake: number, length: number, stakeType: string },
+}>(), {
+  menuItem: () => ({
+    currentStake: 167175.4,
+    endStake: 167395,
+    isIn: false,
+    length: 6560,
+    name: '出口',
+    stakeType: 'K',
+    startStake: 160835
+  }),
+  data: () => [ {
+    img: new URL('./img/3.png', import.meta.url).href,
+    name: '台车',
+    isDevice: true,
+    w: 350,
+    postions: [
+      {
+        id: 1867949485392,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+240.6',
+        stakeType: 'K',
+        mileage: 167240.6,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:15:40',
+        createTime: '2025-04-01 09:15:58',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867949732232,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+238.1',
+        stakeType: 'K',
+        mileage: 167238.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:16:11',
+        createTime: '2025-04-01 09:16:29',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867949978792,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+235.4',
+        stakeType: 'K',
+        mileage: 167235.4,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:16:45',
+        createTime: '2025-04-01 09:17:00',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867950225528,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.1',
+        stakeType: 'K',
+        mileage: 167236.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:17:16',
+        createTime: '2025-04-01 09:17:31',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867950472120,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.9',
+        stakeType: 'K',
+        mileage: 167236.9,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:17:47',
+        createTime: '2025-04-01 09:18:01',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867950718728,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+237.2',
+        stakeType: 'K',
+        mileage: 167237.2,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:18:02',
+        createTime: '2025-04-01 09:18:32',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867950965224,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+239.0',
+        stakeType: 'K',
+        mileage: 167239,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:18:48',
+        createTime: '2025-04-01 09:19:03',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867951211776,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+230.1',
+        stakeType: 'K',
+        mileage: 167230.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:19:18',
+        createTime: '2025-04-01 09:19:34',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867951458280,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+230.1',
+        stakeType: 'K',
+        mileage: 167230.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:19:18',
+        createTime: '2025-04-01 09:20:05',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867951704944,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+230.1',
+        stakeType: 'K',
+        mileage: 167230.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:19:18',
+        createTime: '2025-04-01 09:20:35',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867951951600,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+230.1',
+        stakeType: 'K',
+        mileage: 167230.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:19:18',
+        createTime: '2025-04-01 09:21:06',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867966989040,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.0',
+        stakeType: 'K',
+        mileage: 167236,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:51:59',
+        createTime: '2025-04-01 09:52:26',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867967235976,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+234.6',
+        stakeType: 'K',
+        mileage: 167234.6,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:52:41',
+        createTime: '2025-04-01 09:52:57',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867967482088,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+241.0',
+        stakeType: 'K',
+        mileage: 167241,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:53:12',
+        createTime: '2025-04-01 09:53:28',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867967728584,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+241.0',
+        stakeType: 'K',
+        mileage: 167241,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:53:12',
+        createTime: '2025-04-01 09:53:58',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867967975160,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+241.0',
+        stakeType: 'K',
+        mileage: 167241,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:53:12',
+        createTime: '2025-04-01 09:54:29',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867968221744,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+241.0',
+        stakeType: 'K',
+        mileage: 167241,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:53:12',
+        createTime: '2025-04-01 09:55:00',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867969208024,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+235.0',
+        stakeType: 'K',
+        mileage: 167235,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:56:46',
+        createTime: '2025-04-01 09:57:03',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867969454552,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+235.3',
+        stakeType: 'K',
+        mileage: 167235.3,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:57:16',
+        createTime: '2025-04-01 09:57:34',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867969701016,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+237.0',
+        stakeType: 'K',
+        mileage: 167237,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:57:39',
+        createTime: '2025-04-01 09:58:05',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867969947232,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+234.1',
+        stakeType: 'K',
+        mileage: 167234.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:58:21',
+        createTime: '2025-04-01 09:58:36',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867970193744,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+234.1',
+        stakeType: 'K',
+        mileage: 167234.1,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:58:52',
+        createTime: '2025-04-01 09:59:07',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867970440616,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.2',
+        stakeType: 'K',
+        mileage: 167236.2,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:59:23',
+        createTime: '2025-04-01 09:59:37',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867970686784,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+235.7',
+        stakeType: 'K',
+        mileage: 167235.7,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 09:59:30',
+        createTime: '2025-04-01 10:00:08',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867970933312,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+237.0',
+        stakeType: 'K',
+        mileage: 167237,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:00:17',
+        createTime: '2025-04-01 10:00:39',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867971179808,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+237.0',
+        stakeType: 'K',
+        mileage: 167237,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:00:17',
+        createTime: '2025-04-01 10:01:10',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867971426616,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+237.0',
+        stakeType: 'K',
+        mileage: 167237,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:00:17',
+        createTime: '2025-04-01 10:01:41',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867971672784,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+237.0',
+        stakeType: 'K',
+        mileage: 167237,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:00:17',
+        createTime: '2025-04-01 10:02:11',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867974384400,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+380.0',
+        stakeType: 'K',
+        mileage: 167380,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:07:32',
+        createTime: '2025-04-01 10:07:50',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867974631248,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.6',
+        stakeType: 'K',
+        mileage: 167236.6,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:08:03',
+        createTime: '2025-04-01 10:08:21',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867974877752,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+235.6',
+        stakeType: 'K',
+        mileage: 167235.6,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:08:34',
+        createTime: '2025-04-01 10:08:52',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867975119856,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+232.6',
+        stakeType: 'K',
+        mileage: 167232.6,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:08:57',
+        createTime: '2025-04-01 10:09:22',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867975363520,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+235.7',
+        stakeType: 'K',
+        mileage: 167235.7,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:09:34',
+        createTime: '2025-04-01 10:09:53',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867975610072,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K165+387.7',
+        stakeType: 'K',
+        mileage: 165387.7,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:10:05',
+        createTime: '2025-04-01 10:10:24',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867975856184,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+230.6',
+        stakeType: 'K',
+        mileage: 167230.6,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:10:36',
+        createTime: '2025-04-01 10:10:54',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867976102720,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+235.5',
+        stakeType: 'K',
+        mileage: 167235.5,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:10:51',
+        createTime: '2025-04-01 10:11:25',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867976349496,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.6',
+        stakeType: 'K',
+        mileage: 167236.6,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:11:33',
+        createTime: '2025-04-01 10:11:56',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867976595752,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+232.8',
+        stakeType: 'K',
+        mileage: 167232.8,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:12:12',
+        createTime: '2025-04-01 10:12:27',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867976842304,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+241.8',
+        stakeType: 'K',
+        mileage: 167241.8,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:12:42',
+        createTime: '2025-04-01 10:12:58',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867977089152,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+239.8',
+        stakeType: 'K',
+        mileage: 167239.8,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:13:13',
+        createTime: '2025-04-01 10:13:28',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867977335624,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.5',
+        stakeType: 'K',
+        mileage: 167236.5,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:13:44',
+        createTime: '2025-04-01 10:13:59',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867977581744,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+237.3',
+        stakeType: 'K',
+        mileage: 167237.3,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:14:15',
+        createTime: '2025-04-01 10:14:30',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867978074784,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+239.7',
+        stakeType: 'K',
+        mileage: 167239.7,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:15:12',
+        createTime: '2025-04-01 10:15:32',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867978321336,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+240.8',
+        stakeType: 'K',
+        mileage: 167240.8,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:15:43',
+        createTime: '2025-04-01 10:16:02',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867978567776,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+240.0',
+        stakeType: 'K',
+        mileage: 167240,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:16:14',
+        createTime: '2025-04-01 10:16:33',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867979060840,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+238.0',
+        stakeType: 'K',
+        mileage: 167238,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:17:13',
+        createTime: '2025-04-01 10:17:35',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867979307328,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+238.4',
+        stakeType: 'K',
+        mileage: 167238.4,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:17:52',
+        createTime: '2025-04-01 10:18:06',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867979554296,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+238.2',
+        stakeType: 'K',
+        mileage: 167238.2,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:18:22',
+        createTime: '2025-04-01 10:18:37',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      },
+      {
+        id: 1867979800704,
+        equitId: '4f9d80fe22b34c4ebd0f15dd9579b315',
+        stakeNumber: 'K167+236.9',
+        stakeType: 'K',
+        mileage: 167236.9,
+        isInTunnel: true,
+        longitude: 102.541554,
+        latitude: 30.051554,
+        elevation: 0,
+        tunnelId: 'dt',
+        tunnelPositioningId: 'zj_ylq_dt',
+        workAreaId: '147ff77f39e54c859a55840a9b38ddba',
+        positionTime: '2025-04-01 10:18:52',
+        createTime: '2025-04-01 10:19:07',
+        createBy: 119,
+        tolerantTime: null,
+        startTime: null,
+        endTime: null,
+        isIn: null,
+        state: 0
+      }
+    ]
+  } ],
+  startAnimate: true,
+  dataCheck: -1
+})
+let panZoom: PanZoom | null = null
+const svgConfig = reactive({
+  width: 8000,
+  height: 390,
+  tunnelHeight: 330, // 隧道高度
+  noExcav: 200, // 未开挖
+  excav: 7800, // 已开挖
+  tunnel: [] as { [key: string]: any }[],
+  leng: [] as { [key: string]: any }[]
+})
+const devices = ref([] as { [key: string]: any }[])
+const timer = ref()
+const mileage2string = (num: number, type = '') => {
+  const a = Math.floor(num / 1000).toString()
+  const ab = parseFloat((num % 1000).toFixed(1))
+  const b = Math.floor(num % 1000).toString()
+  const c = b.length === 1 ? `00${ab}` : b.length === 2 ? `0${ab}` : ab
+  return `${type}${a}+${c}`
+}
+
+// 初始化svg
+function initSVG() {
+  if (panZoom) { panZoom.dispose(); panZoom = null }
+  if (!props.menuItem || !props.menuItem.currentStake) {
+    devices.value = []
+    svgConfig.tunnel = []
+    svgConfig.leng = []
+    window.$notification.warning({ content: `无数据${JSON.stringify(props.menuItem)}`, duration: 3000 })
+    return
+  }
+  const { isIn } = props.menuItem
+  // 隧道配置
+  const {
+    noExcav, excav, tunnelHeight, width
+  } = svgConfig
+  svgConfig.tunnel = [
+    {
+      x: 0, y: 0, w: isIn ? excav : noExcav, h: tunnelHeight, img: isIn ? img2 : img1
+    },
+    {
+      x: isIn ? excav : noExcav, y: 0, w: isIn ? noExcav : excav, h: tunnelHeight, img: isIn ? img1 : img2
+    }
+  ]
+  // 图例
+  svgConfig.leng = [
+    {
+      name: '隧道进口', stake: mileage2string(props.menuItem.startStake, props.menuItem!.stakeType), x: 0, type: 'start'
+    },
+    {
+      name: '当前掌子面', stake: mileage2string(props.menuItem!.currentStake, props.menuItem!.stakeType), x: props.menuItem.isIn ? excav : noExcav, type: 'middle'
+    },
+    {
+      name: '隧道出口', stake: mileage2string(props.menuItem.endStake, props.menuItem!.stakeType), x: width, type: 'end'
+    }
+  ]
+  // 初始化缩放
+  const dom = document.getElementById('scene') as HTMLElement
+  panZoom = panzoom(dom, { maxZoom: 1, minZoom: 0.3 })
+  // 移动到当前掌子面位置
+  panZoom.moveTo(isIn ? -6600 : 0, 0)
+  panZoom.zoomAbs(isIn ? -6600 : 0, 0, 1)
+
+  console.log('隧道配置', svgConfig)
+  console.log('传递参数', props)
+}
+
+// 计算已开挖实际和图例比例
+function countScale(stakeWidth:number) {
+  const {
+    isIn, length, currentStake, startStake, endStake
+  } = props.menuItem!
+  const { width, excav } = svgConfig
+  const b = isIn ? (currentStake - startStake) / length * 100 : (endStake - currentStake) / length * 100
+  const c = excav / width * 100
+  const d = c / b
+  const a = isIn ? Math.floor(stakeWidth / length * svgConfig.width * d) : Math.floor(svgConfig.width - (stakeWidth / length * svgConfig.width * d))
+  return a
+}
+
+// 计算path 路径
+function countPath(arr: { mileage: number }[]) {
+  if (!props.menuItem) return ''
+  let str = 'M'
+  const y = svgConfig.height / 2 + svgConfig.height / 4
+  for (let k = 0; k < arr.length; k++) {
+    const el = arr[k]
+    const width = props.menuItem.isIn ? (el.mileage - props.menuItem!.startStake) : (props.menuItem.endStake - el.mileage)
+    const x = countScale(width)
+    str += ` ${x},${y}`
+  }
+  return str
+}
+
+function setData(data:any) {
+  if (!data || !data.length || !svgConfig.tunnel.length || !props.menuItem) { devices.value = []; return }
+  devices.value = data.map((el: { postions: { mileage: number, positionTime: string }[], w: number, isDevice:boolean }, index:number) => {
+    const lastPositon = el.postions[el.postions.length - 1]
+    const width = props.menuItem!.isIn ? (lastPositon.mileage - props.menuItem!.startStake) : (props.menuItem!.endStake - lastPositon.mileage)
+    const x = countScale(width)
+    const y = svgConfig.height / 4
+    const transform = props.menuItem!.isIn && el.isDevice ? '' : `translate(${x + el.w / 2},${y}) scale(-1, 1) translate(${-(x + el.w / 2)},${-y})`
+    const h = svgConfig.height / 2
+    const obj = {
+      ...el,
+      pathId: `SVGPATH${index}`,
+      imgId: `SVGIMG${index}`,
+      pathD: countPath(el.postions),
+      positionTime: lastPositon.positionTime,
+      h,
+      x: props.startAnimate ? el.w / 2 : x,
+      y: props.startAnimate ? -h : y,
+      transform: props.startAnimate ? `translate(${el.w / 2},${h}) scale(-1, 1) translate(-${el.w / 2},-${h})` : transform,
+      mileage: lastPositon.mileage,
+      duration: data.length * 100,
+      startAnimate() {
+        // 路径
+        const g = document.getElementById(this.pathId)
+        // 创建path及动画
+        const pathChild = g?.childNodes
+        if (pathChild?.length) g?.replaceChildren()
+        // 移动目标
+        const img = document.getElementById(this.imgId)
+        const imgChild = img?.querySelectorAll('animateMotion')
+        if (imgChild?.length) imgChild.forEach((el) => el.remove())
+        // 开始动画
+        if (props.startAnimate) {
+        // 设置动画参数
+          const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+          path.setAttribute('d', this.pathD)
+          path.setAttribute('fill', 'none')
+          path.setAttribute('stroke', '#3498db')
+          path.setAttribute('stroke-width', '1')
+          path.setAttribute('stroke-dashoffset', '0')
+          const pathLength = Math.ceil(path?.getTotalLength())
+          path.setAttribute('stroke-dasharray', `0, ${pathLength}`)
+          const pathAnimate = document.createElementNS('http://www.w3.org/2000/svg', 'animate')
+          pathAnimate.setAttribute('attributeName', 'stroke-dasharray')
+          pathAnimate.setAttribute('begin', '0s')
+          pathAnimate.setAttribute('dur', `${this.duration}s`)
+          pathAnimate.setAttribute('values', `0, ${pathLength}; ${pathLength}, 0`)
+          pathAnimate.setAttribute('calcMode', 'linear')
+          pathAnimate.setAttribute('fill', 'freeze')
+          path.appendChild(pathAnimate)
+          g?.appendChild(path)
+
+          // 给移动目标创建动画
+          const animateMotion = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion')
+          animateMotion.setAttribute('dur', `${this.duration}s`)
+          animateMotion.setAttribute('fill', 'freeze')
+          animateMotion.setAttribute('path', this.pathD)
+          img?.appendChild(animateMotion)
+
+          // 开始动画
+          animateMotion.beginElement()
+          pathAnimate.beginElement()
+        }
+      }
+    }
+    return obj
+  })
+  console.log('台车位置', devices.value)
+  if (timer.value) clearTimeout(timer.value)
+  timer.value = setTimeout(() => {
+    for (let k = 0; k < devices.value.length; k++) {
+      const el = devices.value[k]
+      el.startAnimate()
+    }
+  }, 200)
+}
+
+watch(() => props.menuItem, () => initSVG())
+watch(() => props.data, (v) => setData(v))
+onMounted(() => { initSVG(); setData(props.data) })
+onUnmounted(() => {
+  if (panZoom) { panZoom.dispose(); panZoom = null }
+  clearTimeout(timer.value)
+})
+</script>
+
+<style lang="scss" scoped>
+svg{
+  width: 100vw;
+  height: 400px;
+  background: black;
+  &:focus{
+    outline: none;
+  }
+}
+</style>