mky-vent-base/src/views/vent/monitorManager/tunFaceMonitor/components/tunFaceSVG.vue

<template>
  <!-- 二维模型：掘进工作面（模型包 public/svg-models/tun-face-2d/）；本组件只保留业务驱动 -->
  <SvgModelViewer ref="viewerRef" model-id="tun-face-2d" :identify="identify" />
</template>

<script setup lang="ts">
  import { onBeforeUnmount, ref, watch } from 'vue';
  import SvgModelViewer from '/@/components/vent/SvgModelViewer.vue';
  import { useEngineAnim } from '/@/utils/svg-model/useEngineAnim';

  withDefaults(
    defineProps<{
      /** 组件唯一标识符，提供后可以确保多个组件复用时的元素定位依旧准确 */
      identify?: string;
    }>(),
    { identify: '' }
  );

  /**
   * 掘进工作面流动箭头（与 model.json 的 elements 一一对应）：
   * 模型里 3 个箭头元素共用一个开关，运行 → 循环流动，停止 → 隐藏。
   */
  const ARROW_IDS = ['auto_anim_0', 'auto_anim_1', 'auto_anim_2'];
  /** 一轮循环时长（10 帧，按观感可调） */
  const LOOP_PERIOD_MS = 2200;

  const viewerRef = ref<any>(null);
  const { engine } = useEngineAnim(viewerRef);

  /** 每个箭头元素上的 WAAPI 循环动画 */
  let anims: Animation[] = [];
  let running = true;

  function stop() {
    anims.forEach((a) => {
      try {
        a.cancel();
      } catch (e) {
        /* ignore */
      }
    });
    anims = [];
  }

  function setVisible(visible: boolean) {
    const eng = engine.value;
    if (!eng) return;
    ARROW_IDS.forEach((id) => {
      const el = eng.getElement(id) as HTMLElement | undefined;
      if (el) el.style.display = visible ? '' : 'none';
    });
  }

  /** 开始循环流动：帧序列本身就是一段完整的小动画，直接循环播放 */
  function start() {
    stop();
    const eng = engine.value;
    if (!eng) return;
    ARROW_IDS.forEach((id) => {
      const el = eng.getElement(id);
      const frames = eng.getElementInfo(id)?.frames;
      if (!el || !frames || frames.length < 2) return;
      // model.json 里这排箭头的首尾位移 = 相邻箭头图案间距，循环回绕时正好落到相邻箭头上
      const keyframes = frames.map((transform) => ({ transform }));
      const anim = (el as HTMLElement).animate(keyframes, {
        duration: LOOP_PERIOD_MS,
        iterations: Infinity,
        easing: 'linear',
        fill: 'both',
      });
      anims.push(anim);
    });
  }

  /**
   * 掘进工作面二维模型开关
   *
   * @param flag 是否运行：true（默认）→ 箭头显示并循环流动；false → 箭头隐藏（停止态）
   */
  function animate(flag: boolean = true) {
    running = flag;
    setVisible(flag);
    if (flag) start();
    else stop();
  }

  watch(engine, (eng) => {
    if (!eng) return;
    if (running) {
      setVisible(true);
      start();
    } else {
      setVisible(false);
    }
  });

  onBeforeUnmount(() => {
    stop();
  });

  /** 页面通过 modelRef.value?.animate?.(running) 控制（当前页面打开即常驻循环） */
  defineExpose({ animate });
</script>