mky-vent-base/src/views/vent/monitorManager/dedustMonitor/components/dedustSVG.vue

<template>
  <!-- 二维模型：除尘风机（复用掘进工作面模型包 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: '' }
  );

  /**
   * 除尘风机页面复用掘进工作面模型：模型整体照常显示，但 3 个流动箭头不播放、直接隐藏。
   * 驱动保留 animate(running) 开关：true → 箭头显示并循环流动，false（默认）→ 箭头隐藏。
   */
  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);

  let anims: Animation[] = [];
  let running = false;

  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 是否播放箭头：false（默认）→ 箭头隐藏；true → 箭头显示并循环流动
   */
  function animate(flag: boolean = false) {
    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();
  });

  defineExpose({ animate });
</script>