[Feat 0000]完善风门svg组件功能

src/views/vent/home/configurable/belt/belt-new.vue

@@ -54,7 +54,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref, watch, computed } from 'vue';
-import customHeader from './components/customHeader.vue';
+import customHeader from './components/customHeader-belt.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
 import { testBeltNew, testYjkf, testSpary } from './configurable.data';
 import ModuleCommon from './components/ModuleCommon.vue';

src/views/vent/home/configurable/belt/components/ModuleCommon.vue

@@ -12,7 +12,7 @@
         <slot>
           <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event"></Header>
           <Content
-            :style="{ height: header.show ? 'calc(100% - 30px)' : 'calc(100% - 20px)' }"
+            :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
             :moduleData="moduleData"
             :data="selectedDevice"
             :chartData="chartData"

src/views/vent/home/configurable/belt/components/detail/gateBoard.vue

@@ -19,7 +19,7 @@
               <div class="door-name"
                 ><span>位置</span><span>{{ item.strname }}</span></div
               >
-              <a-button class="door-btn">一键双开</a-button>
+              <a-button class="door-btn" @click="oneKeyOpen(index)">一键双开</a-button>
             </div>
             <div class="door-header">
               <div class="info-column" v-for="(i, idx) in config.config.items" :key="idx">
@@ -39,7 +39,7 @@
             </div>
             <!-- 模型展示占位div -->
             <div class="model-placeholder">
-              <gateSVG :ref="(el) => setChildRef(el, index)" :identify="index"> </gateSVG>
+              <gateSVG :ref="(el) => setChildRef(el, index)" :identify="String(index)"> </gateSVG>
             </div>
           </div>
         </div>
@@ -51,7 +51,8 @@
 <script setup lang="ts">
 import { ref, onMounted, defineProps, watch } from 'vue';
 import { getFormattedText } from '../../../hooks/helper';
-import gateSVG from '../gateSVG.vue';
+// import gateSVG from '../gateSVG.vue';
+import gateSVG from '../../../../../monitorManager/gateMonitor/components/gateDualSVG.vue';
 const props = defineProps<{
   config: {
     config: {
@@ -67,26 +68,46 @@ const props = defineProps<{
     [key: string]: any;
   };
 }>();
-const childRefs = ref<any[]>([]);
+const childRefs = ref<(InstanceType<typeof gateSVG> | null)[]>([]);
 const setChildRef = (el, index) => {
-  childRefs.value[index] = el;
+  if (el) {
+    childRefs.value[index] = el;
+  }
 };
 function yjControl() {
   console.log('应急控制');
 }
-//模型动画
 function monitorAnimation(selectData, index) {
-  console.log(selectData, index, `${index}`);
-  childRefs.value[index]?.animate?.(selectData.frontGateOpen == '1', selectData.rearGateOpen == '1');
+  if (!selectData?.readData) return;
+  const frontOpen = selectData.readData.frontGateOpen === '1';
+  const midOpen = selectData.readData.midGateOpen === '1';
+  const rearOpen = selectData.readData.rearGateOpen === '1';
+  if (childRefs.value[index]) {
+    childRefs.value[index].animate(frontOpen, midOpen, rearOpen);
+  }
 }
 
-onMounted(() => {
-  props.data.forEach((el: any, index: number) => {
-    el = Object.assign(el, el.readData);
-    monitorAnimation(el, index);
-  });
-});
-onMounted(() => {});
+function oneKeyOpen(index) {
+  if (childRefs.value[index]) {
+    // 直接强制两个都打开！
+    childRefs.value[index].animate(true, true, true);
+  }
+}
+
+watch(
+  () => props.data,
+  (newData) => {
+    const values = Object.values(newData ?? {});
+    const allItems = values.flat();
+    allItems.forEach((item, index) => {
+      monitorAnimation(item, index);
+    });
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
 </script>
 
 <style scoped lang="less">

src/views/vent/home/configurable/belt/components/ventBoxBelt.vue

@@ -81,8 +81,7 @@ export default defineComponent({
     margin-top: 12px;
   }
   .box1-center-beltYjkf {
-    height: calc(100% - 50px);
-    margin-top: 10px;
+    height: calc(100% - 72px);
   }
   .box1-center-beltYjkf1 {
     height: calc(100% - 73px);

src/views/vent/home/configurable/components/belt/CameraList.vue

@@ -1,14 +1,11 @@
 <template>
   <div class="camera-modal">
-    <!-- 遍历每个设备 -->
-    <div v-for="(group, index) in props.data" :key="index" class="sensor-group">
+    <!-- 遍历每个设备组 -->
+    <div v-for="(group, groupIndex) in props.data" :key="groupIndex" class="sensor-group">
       <div class="group-title">{{ group.strname }}</div>
-      <div class="camrea-area">
-        <div
-          v-if="renderPlayer"
-          ref="playerRef"
-          style="display: flex; width: 100%; height: 100%; overflow-y: auto; pointer-events: none; flex-direction: column"
-        ></div>
+      <div class="camera-area">
+        <div v-for="camera in group.cameras || []" :key="camera.id" :ref="(el) => setPlayerRef(el, group.deviceID)" class="single-camera-container">
+        </div>
       </div>
     </div>
   </div>
@@ -24,40 +21,56 @@ const props = defineProps<{
   }>;
   data: any[];
 }>();
-const { getCamera, removeCamera } = useCamera();
-const playerRef = ref<any[]>([]);
 const renderPlayer = ref(true);
+const { getCamera, removeCamera } = useCamera();
+const deviceDomMap = reactive<Record<string, HTMLElement>>({});
+const setPlayerRef = (el: HTMLElement | null, deviceId: string) => {
+  if (el) {
+    deviceDomMap[deviceId] = el;
+  } else {
+    delete deviceDomMap[deviceId];
+  }
+};
 const allVideos = computed(() => {
-  return props.data?.flatMap((item) => item.cameras || []) || [];
-});
-
-let cameraD: any = computed(() => {
-  let cameras: any[] = [];
-
-  const result: any = [];
-  cameras = result[1];
-  return cameras;
+  return (
+    props.data?.flatMap((item) => {
+      const cameras = item.cameras || [];
+      return [item, ...cameras];
+    }) || []
+  );
 });
 
 onMounted(async () => {
-  await getCamera(playerRef, renderPlayer, cameraD.value);
+  const videos = allVideos.value;
+  for (const video of videos) {
+    if (video.deviceID) {
+      const targetDom = deviceDomMap[video.deviceID];
+      if (targetDom) {
+        await getCamera(video.deviceID, targetDom, renderPlayer);
+      } else {
+        console.warn(`未找到设备 ${video.deviceID} 的 DOM 容器`);
+      }
+    }
+  }
 });
-// 销毁时清理所有视频
+
 onBeforeUnmount(() => {
-  removeCamera(playerRef);
+  removeCamera(Object.values(deviceDomMap));
 });
 </script>
 
 <style lang="less" scoped>
 .camera-modal {
   width: 100%;
-  height: 100%;
+  height: 95%;
   padding: 5px 10px;
+  box-sizing: border-box; // 防止 padding 撑破容器
   .sensor-group {
     background: url('@/assets/images/beltFire/fireMonitor/2-1.png') no-repeat;
     background-size: 100% 100%;
     padding: 10px;
     height: 580px;
+    margin-bottom: 10px; // 增加组间距
   }
   .group-title {
     background: url('@/assets/images/beltFire/fireMonitor/2-2.png') no-repeat;
@@ -70,8 +83,18 @@ onBeforeUnmount(() => {
     padding-bottom: 5px;
     padding-left: 10px;
   }
-  .camrea-area {
+  .camera-area {
     width: 100%;
+    height: calc(100% - 40px); // 减去标题高度
+    display: flex;
+    flex-wrap: wrap; // 允许换行
+    align-content: flex-start;
+    overflow-y: auto;
+  }
+  .single-camera-container {
+    // 这里可以根据需要调整大小，或者让内部的播放器自适应
+    flex: 0 0 auto;
+    width: 100%; // 或者根据需求设置为 50% 等
     height: 100%;
   }
 }

src/views/vent/home/configurable/components/content.vue

@@ -202,7 +202,7 @@
           <SprayControl class="content__module" :config="config.config" :data="config.data" />
         </template>
         <template v-if="config.name === 'cameraList'">
-          <CameraList class="content__module" :config="config.config" :data="config.data" />
+          <CameraList class="content__module" style="height: calc(100% - 20px)" :config="config.config" :data="config.data" />
         </template>
         <!-- <template v-if="config.key === 'fire_control'">
         <FIreControl class="content__module" />
@@ -213,7 +213,7 @@
         <!-- ==================== 新增皮带巷火灾监测模块 ==================== -->
         <!-- 1. 传感器状态面板 -->
         <template v-if="config.name === 'sensor_status'">
-          <SensorStatusPanel class="content__module" style="height: calc(100% - 30px)" :config="config.config" :data="config.data" />
+          <SensorStatusPanel class="content__module" style="height: calc(100% - 30px) !important" :config="config.config" :data="config.data" />
         </template>
 
         <!-- 3. 火灾监测设备分析 -->

src/views/vent/monitorManager/gateMonitor/components/gateDualSVG.vue

@@ -6,9 +6,8 @@
     preserveAspectRatio="none"
     x="0px"
     y="0px"
-    width="1920px"
-    height="1080"
     viewBox="0 230 1920 1080"
+    :style="svgStyle"
   >
     <defs>
       <linearGradient id="Gradient_1" gradientUnits="userSpaceOnUse" x1="-961.8" y1="-242.45" x2="-961.8" y2="-242.45" spreadMethod="pad">
@@ -1267,7 +1266,7 @@
         </g>
       </g>
     </g>
-    <g transform="matrix( 1, 0, 0, 1.038848876953125, 1186.7,606.95) " data-anim-id="anim_FengMen1_R_0_Layer0_0_FILL_0">
+    <g transform="matrix( 1, 0, 0, 1.038848876953125, 1186.7,606.95) " :data-anim-id="`anim_FengMen1_R_0_Layer0_0_FILL_0${props.identify || ''}`">
       <g transform="matrix( 1, 0, 0, 1, 0,0) ">
         <use xlink:href="#FengMen1_R_0_Layer0_0_FILL" />
       </g>
@@ -1278,12 +1277,12 @@
         <use xlink:href="#FengMen1_Kuang_0_Layer0_0_1_STROKES" />
       </g>
     </g>
-    <g transform="matrix( 1, 0, 0, 1.038848876953125, 1139.9,619.65) " data-anim-id="anim_FengMen1_L_0_Layer0_0_FILL_0">
+    <g transform="matrix( 1, 0, 0, 1.038848876953125, 1139.9,619.65) " :data-anim-id="`anim_FengMen1_L_0_Layer0_0_FILL_0${props.identify || ''}`">
       <g transform="matrix( 1, 0, 0, 1, 0,0) ">
         <use xlink:href="#FengMen1_L_0_Layer0_0_FILL" />
       </g>
     </g>
-    <g transform="matrix( 1, 0, 0, 1, 707.35,540.5) " data-anim-id="anim_FengMen2_R_0_Layer0_0_FILL_0">
+    <g transform="matrix( 1, 0, 0, 1, 707.35,540.5) " :data-anim-id="`anim_FengMen2_R_0_Layer0_0_FILL_0${props.identify || ''}`">
       <g transform="matrix( 1, 0, 0, 1, 0,0) ">
         <use xlink:href="#FengMen2_R_0_Layer0_0_FILL" />
       </g>
@@ -1294,7 +1293,7 @@
         <use xlink:href="#FengMen2_Kuang_0_Layer0_0_1_STROKES" />
       </g>
     </g>
-    <g transform="matrix( 1, 0, 0, 1, 659.9,553.4) " data-anim-id="anim_FengMen2_L_0_Layer0_0_FILL_0">
+    <g transform="matrix( 1, 0, 0, 1, 659.9,553.4) " :data-anim-id="`anim_FengMen2_L_0_Layer0_0_FILL_0${props.identify || ''}`">
       <g transform="matrix( 1, 0, 0, 1, 0,0) ">
         <use xlink:href="#FengMen2_L_0_Layer0_0_FILL" />
       </g>
@@ -1326,196 +1325,214 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, defineExpose } from 'vue';
-  import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
+import { onMounted, defineExpose, computed } from 'vue';
+import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
+const props = withDefaults(
+  defineProps<{
+    identify?: string;
+  }>(),
+  { identify: '' }
+);
+// 核心判断：是否传递了 identify
+const hasIdentify = computed(() => props.identify !== '');
 
-  // 元素信息（常量数据，使用Map）
-  const elementInfo = new Map([
-    [
-      'anim_FengMen1_L_0_Layer0_0_FILL_0',
-      {
-        key: 'FengMen1_L_0_Layer0_0_FILL',
-        initialTransform: 'matrix( 1, 0, 0, 1.038848876953125, 1139.9,619.65) ',
-        transforms: [
-          'matrix( 1, 0, 0, 1.038848876953125, 1139.9,619.65) ',
-          'matrix( 1.0105743408203125, 0.01226806640625, 0, 1.038818359375, 1140.15,619.9) ',
-          'matrix( 1.0210113525390625, 0.0247955322265625, 0, 1.038818359375, 1140.4,620.25) ',
-          'matrix( 1.0312957763671875, 0.03759765625, 0, 1.038818359375, 1140.65,620.5) ',
-          'matrix( 1.0413970947265625, 0.0506439208984375, 0, 1.038818359375, 1140.9,620.85) ',
-          'matrix( 1.051361083984375, 0.0639495849609375, 0, 1.038818359375, 1141.1,621.15) ',
-          'matrix( 1.061126708984375, 0.0774993896484375, 0, 1.038818359375, 1141.35,621.45) ',
-          'matrix( 1.0707550048828125, 0.0912933349609375, 0, 1.038818359375, 1141.6,621.85) ',
-          'matrix( 1.080169677734375, 0.1053314208984375, 0, 1.038818359375, 1141.8,622.15) ',
-          'matrix( 1.08941650390625, 0.1196136474609375, 0, 1.038818359375, 1142.05,622.45) ',
-          'matrix( 1.09844970703125, 0.1341400146484375, 0, 1.038818359375, 1142.25,622.8) ',
-          'matrix( 1.1073150634765625, 0.148895263671875, 0, 1.038818359375, 1142.45,623.2) ',
-          'matrix( 1.115966796875, 0.16387939453125, 0, 1.038818359375, 1142.65,623.5) ',
-          'matrix( 1.124420166015625, 0.1791229248046875, 0, 1.038818359375, 1142.85,623.9) ',
-          'matrix( 1.1326751708984375, 0.1945648193359375, 0, 1.038818359375, 1143.05,624.3) ',
-          'matrix( 1.140716552734375, 0.21026611328125, 0, 1.038818359375, 1143.3,624.65) ',
-          'matrix( 1.1485443115234375, 0.226165771484375, 0, 1.038818359375, 1143.45,625) ',
-          'matrix( 1.1561431884765625, 0.242279052734375, 0, 1.038818359375, 1143.6,625.4) ',
-          'matrix( 1.1635284423828125, 0.258636474609375, 0, 1.038818359375, 1143.85,625.8) ',
-          'matrix( 1.1706695556640625, 0.2751922607421875, 0, 1.038818359375, 1143.95,626.2) ',
-          'matrix( 1.177581787109375, 0.291961669921875, 0, 1.038818359375, 1144.15,626.6) ',
-          'matrix( 1.18426513671875, 0.3089447021484375, 0, 1.038818359375, 1144.25,627) ',
-          'matrix( 1.190704345703125, 0.326141357421875, 0, 1.038818359375, 1144.45,627.45) ',
-          'matrix( 1.1969146728515625, 0.343505859375, 0, 1.038818359375, 1144.6,627.85) ',
-          'matrix( 1.2028656005859375, 0.361114501953125, 0, 1.038818359375, 1144.75,628.25) ',
-          'matrix( 1.20855712890625, 0.3788909912109375, 0, 1.038818359375, 1144.9,628.65) ',
-          'matrix( 1.2139892578125, 0.3968505859375, 0, 1.038818359375, 1145,629.1) ',
-          'matrix( 1.21917724609375, 0.4150238037109375, 0, 1.038818359375, 1145.1,629.55) ',
-          'matrix( 1.224090576171875, 0.433349609375, 0, 1.038818359375, 1145.25,629.95) ',
-          'matrix( 1.2287445068359375, 0.4518890380859375, 0, 1.038848876953125, 1145.35,630.35) ',
-        ],
-      },
-    ],
-    [
-      'anim_FengMen1_R_0_Layer0_0_FILL_0',
-      {
-        key: 'FengMen1_R_0_Layer0_0_FILL',
-        initialTransform: 'matrix( 1, 0, 0, 1.038848876953125, 1186.7,606.95) ',
-        transforms: [
-          'matrix( 1, 0, 0, 1.038848876953125, 1186.7,606.95) ',
-          'matrix( 1.0095977783203125, 0.0126190185546875, 0, 1.038818359375, 1186.5,606.7) ',
-          'matrix( 1.019073486328125, 0.0254974365234375, 0, 1.038818359375, 1186.25,606.35) ',
-          'matrix( 1.0283660888671875, 0.03863525390625, 0, 1.038818359375, 1186.05,606.1) ',
-          'matrix( 1.0374908447265625, 0.0519866943359375, 0, 1.038818359375, 1185.8,605.8) ',
-          'matrix( 1.04644775390625, 0.0655670166015625, 0, 1.038818359375, 1185.65,605.45) ',
-          'matrix( 1.05523681640625, 0.07940673828125, 0, 1.038818359375, 1185.45,605.15) ',
-          'matrix( 1.063812255859375, 0.0934600830078125, 0, 1.038818359375, 1185.25,604.8) ',
-          'matrix( 1.0722198486328125, 0.1077423095703125, 0, 1.038818359375, 1185.05,604.5) ',
-          'matrix( 1.0804290771484375, 0.12225341796875, 0, 1.038818359375, 1184.8,604.15) ',
-          'matrix( 1.0884552001953125, 0.1369781494140625, 0, 1.038818359375, 1184.7,603.85) ',
-          'matrix( 1.0962371826171875, 0.1519317626953125, 0, 1.038818359375, 1184.5,603.5) ',
-          'matrix( 1.1038360595703125, 0.1670989990234375, 0, 1.038818359375, 1184.3,603.15) ',
-          'matrix( 1.111236572265625, 0.182464599609375, 0, 1.038818359375, 1184.2,602.8) ',
-          'matrix( 1.1184234619140625, 0.19805908203125, 0, 1.038818359375, 1184,602.45) ',
-          'matrix( 1.1254119873046875, 0.2138671875, 0, 1.038818359375, 1183.85,602.1) ',
-          'matrix( 1.1321563720703125, 0.2298583984375, 0, 1.038818359375, 1183.7,601.75) ',
-          'matrix( 1.1386871337890625, 0.246063232421875, 0, 1.038818359375, 1183.55,601.35) ',
-          'matrix( 1.14495849609375, 0.262481689453125, 0, 1.038818359375, 1183.35,601) ',
-          'matrix( 1.1510009765625, 0.279083251953125, 0, 1.038818359375, 1183.25,600.6) ',
-          'matrix( 1.156829833984375, 0.295867919921875, 0, 1.038818359375, 1183.15,600.2) ',
-          'matrix( 1.162384033203125, 0.3128662109375, 0, 1.038818359375, 1183,599.85) ',
-          'matrix( 1.167724609375, 0.3300323486328125, 0, 1.038818359375, 1182.8,599.45) ',
-          'matrix( 1.1728057861328125, 0.347381591796875, 0, 1.038818359375, 1182.75,599.05) ',
-          'matrix( 1.1776275634765625, 0.364898681640625, 0, 1.038818359375, 1182.6,598.65) ',
-          'matrix( 1.1822052001953125, 0.382598876953125, 0, 1.038818359375, 1182.55,598.25) ',
-          'matrix( 1.1865234375, 0.4004669189453125, 0, 1.038818359375, 1182.4,597.8) ',
-          'matrix( 1.190582275390625, 0.41851806640625, 0, 1.038818359375, 1182.35,597.4) ',
-          'matrix( 1.1943511962890625, 0.4367218017578125, 0, 1.038818359375, 1182.25,597) ',
-          'matrix( 1.1978759765625, 0.455108642578125, 0, 1.038848876953125, 1182.15,596.5) ',
-        ],
-      },
-    ],
-    [
-      'anim_FengMen2_L_0_Layer0_0_FILL_0',
-      {
-        key: 'FengMen2_L_0_Layer0_0_FILL',
-        initialTransform: 'matrix( 1, 0, 0, 1, 659.9,553.4) ',
-        transforms: [
-          'matrix( 1, 0, 0, 1, 659.9,553.4) ',
-          'matrix( 1.0109100341796875, 0.0113525390625, 0, 1, 660.15,553.65) ',
-          'matrix( 1.0217437744140625, 0.02294921875, 0, 1, 660.4,553.9) ',
-          'matrix( 1.03240966796875, 0.0347900390625, 0, 1, 660.65,554.25) ',
-          'matrix( 1.0429534912109375, 0.0468902587890625, 0, 1, 660.9,554.5) ',
-          'matrix( 1.0533447265625, 0.0592193603515625, 0, 1, 661.2,554.85) ',
-          'matrix( 1.0636138916015625, 0.0717926025390625, 0, 1, 661.4,555.15) ',
-          'matrix( 1.073699951171875, 0.0846099853515625, 0, 1, 661.65,555.45) ',
-          'matrix( 1.0836334228515625, 0.0976409912109375, 0, 1, 661.85,555.75) ',
-          'matrix( 1.0934295654296875, 0.110931396484375, 0, 1, 662.15,556.1) ',
-          'matrix( 1.1030426025390625, 0.12445068359375, 0, 1, 662.35,556.4) ',
-          'matrix( 1.1125030517578125, 0.1381683349609375, 0, 1, 662.55,556.75) ',
-          'matrix( 1.1217803955078125, 0.15216064453125, 0, 1, 662.8,557.1) ',
-          'matrix( 1.1309051513671875, 0.166351318359375, 0, 1, 663,557.4) ',
-          'matrix( 1.1398162841796875, 0.1807708740234375, 0, 1, 663.25,557.75) ',
-          'matrix( 1.1485595703125, 0.195404052734375, 0, 1, 663.4,558.1) ',
-          'matrix( 1.1571044921875, 0.2102813720703125, 0, 1, 663.6,558.5) ',
-          'matrix( 1.165496826171875, 0.225341796875, 0, 1, 663.8,558.9) ',
-          'matrix( 1.173675537109375, 0.2406463623046875, 0, 1, 664,559.25) ',
-          'matrix( 1.181640625, 0.2561492919921875, 0, 1, 664.2,559.6) ',
-          'matrix( 1.189422607421875, 0.2718658447265625, 0, 1, 664.4,560) ',
-          'matrix( 1.1970062255859375, 0.2877655029296875, 0, 1, 664.55,560.35) ',
-          'matrix( 1.2043609619140625, 0.30389404296875, 0, 1, 664.75,560.7) ',
-          'matrix( 1.21148681640625, 0.320220947265625, 0, 1, 664.9,561.15) ',
-          'matrix( 1.21844482421875, 0.3367462158203125, 0, 1, 665.1,561.5) ',
-          'matrix( 1.22515869140625, 0.3534698486328125, 0, 1, 665.2,562) ',
-          'matrix( 1.2316436767578125, 0.3703765869140625, 0, 1, 665.4,562.4) ',
-          'matrix( 1.2378997802734375, 0.387481689453125, 0, 1, 665.5,562.75) ',
-          'matrix( 1.2439422607421875, 0.4047698974609375, 0, 1, 665.65,563.2) ',
-          'matrix( 1.2497406005859375, 0.4222564697265625, 0, 1, 665.8,563.4) ',
-        ],
-      },
-    ],
-    [
-      'anim_FengMen2_R_0_Layer0_0_FILL_0',
-      {
-        key: 'FengMen2_R_0_Layer0_0_FILL',
-        initialTransform: 'matrix( 1, 0, 0, 1, 707.35,540.5) ',
-        transforms: [
-          'matrix( 1, 0, 0, 1, 707.35,540.5) ',
-          'matrix( 1.0090789794921875, 0.01275634765625, 0, 1, 707.15,540.2) ',
-          'matrix( 1.018035888671875, 0.0257568359375, 0, 1, 706.95,539.9) ',
-          'matrix( 1.02679443359375, 0.0389862060546875, 0, 1, 706.8,539.55) ',
-          'matrix( 1.035400390625, 0.0524444580078125, 0, 1, 706.5,539.25) ',
-          'matrix( 1.0438079833984375, 0.066131591796875, 0, 1, 706.3,538.95) ',
-          'matrix( 1.05206298828125, 0.08001708984375, 0, 1, 706.15,538.6) ',
-          'matrix( 1.0601043701171875, 0.094146728515625, 0, 1, 705.95,538.25) ',
-          'matrix( 1.0679779052734375, 0.108489990234375, 0, 1, 705.75,537.9) ',
-          'matrix( 1.0756378173828125, 0.123046875, 0, 1, 705.6,537.55) ',
-          'matrix( 1.083099365234375, 0.1378021240234375, 0, 1, 705.4,537.25) ',
-          'matrix( 1.0903472900390625, 0.15277099609375, 0, 1, 705.2,536.9) ',
-          'matrix( 1.097412109375, 0.1679534912109375, 0, 1, 705.05,536.55) ',
-          'matrix( 1.1042633056640625, 0.1833343505859375, 0, 1, 704.95,536.15) ',
-          'matrix( 1.1108856201171875, 0.19891357421875, 0, 1, 704.75,535.8) ',
-          'matrix( 1.1173248291015625, 0.2147064208984375, 0, 1, 704.6,535.45) ',
-          'matrix( 1.1235198974609375, 0.2306671142578125, 0, 1, 704.5,535.05) ',
-          'matrix( 1.1294708251953125, 0.246826171875, 0, 1, 704.3,534.65) ',
-          'matrix( 1.1352081298828125, 0.26318359375, 0, 1, 704.2,534.3) ',
-          'matrix( 1.1407012939453125, 0.2797088623046875, 0, 1, 704.1,533.9) ',
-          'matrix( 1.145965576171875, 0.296417236328125, 0, 1, 703.95,533.5) ',
-          'matrix( 1.150970458984375, 0.313323974609375, 0, 1, 703.85,533.1) ',
-          'matrix( 1.1557464599609375, 0.33038330078125, 0, 1, 703.75,532.65) ',
-          'matrix( 1.1602783203125, 0.347625732421875, 0, 1, 703.65,532.25) ',
-          'matrix( 1.16455078125, 0.3650360107421875, 0, 1, 703.55,531.9) ',
-          'matrix( 1.1685638427734375, 0.382598876953125, 0, 1, 703.4,531.45) ',
-          'matrix( 1.172332763671875, 0.4003143310546875, 0, 1, 703.3,531.05) ',
-          'matrix( 1.1758270263671875, 0.4181976318359375, 0, 1, 703.3,530.65) ',
-          'matrix( 1.179046630859375, 0.4362335205078125, 0, 1, 703.15,530.2) ',
-          'matrix( 1.1820068359375, 0.454437255859375, 0, 1, 703.05,529.7) ',
-        ],
-      },
-    ],
-  ]);
+// 宽高
+const svgWidth = computed(() => (hasIdentify.value ? '100%' : '1920px'));
+const svgHeight = computed(() => (hasIdentify.value ? '380px' : '1080px'));
+const svgStyle = computed(() => {
+  return {
+    width: svgWidth.value,
+    height: svgHeight.value,
+    marginTop: hasIdentify.value ? '39%' : '0',
+  };
+});
+// 元素信息（常量数据，使用Map）
+const elementInfo = new Map([
+  [
+    `anim_FengMen1_L_0_Layer0_0_FILL_0${props.identify || ''}`,
+    {
+      key: 'FengMen1_L_0_Layer0_0_FILL',
+      initialTransform: 'matrix( 1, 0, 0, 1.038848876953125, 1139.9,619.65) ',
+      transforms: [
+        'matrix( 1, 0, 0, 1.038848876953125, 1139.9,619.65) ',
+        'matrix( 1.0105743408203125, 0.01226806640625, 0, 1.038818359375, 1140.15,619.9) ',
+        'matrix( 1.0210113525390625, 0.0247955322265625, 0, 1.038818359375, 1140.4,620.25) ',
+        'matrix( 1.0312957763671875, 0.03759765625, 0, 1.038818359375, 1140.65,620.5) ',
+        'matrix( 1.0413970947265625, 0.0506439208984375, 0, 1.038818359375, 1140.9,620.85) ',
+        'matrix( 1.051361083984375, 0.0639495849609375, 0, 1.038818359375, 1141.1,621.15) ',
+        'matrix( 1.061126708984375, 0.0774993896484375, 0, 1.038818359375, 1141.35,621.45) ',
+        'matrix( 1.0707550048828125, 0.0912933349609375, 0, 1.038818359375, 1141.6,621.85) ',
+        'matrix( 1.080169677734375, 0.1053314208984375, 0, 1.038818359375, 1141.8,622.15) ',
+        'matrix( 1.08941650390625, 0.1196136474609375, 0, 1.038818359375, 1142.05,622.45) ',
+        'matrix( 1.09844970703125, 0.1341400146484375, 0, 1.038818359375, 1142.25,622.8) ',
+        'matrix( 1.1073150634765625, 0.148895263671875, 0, 1.038818359375, 1142.45,623.2) ',
+        'matrix( 1.115966796875, 0.16387939453125, 0, 1.038818359375, 1142.65,623.5) ',
+        'matrix( 1.124420166015625, 0.1791229248046875, 0, 1.038818359375, 1142.85,623.9) ',
+        'matrix( 1.1326751708984375, 0.1945648193359375, 0, 1.038818359375, 1143.05,624.3) ',
+        'matrix( 1.140716552734375, 0.21026611328125, 0, 1.038818359375, 1143.3,624.65) ',
+        'matrix( 1.1485443115234375, 0.226165771484375, 0, 1.038818359375, 1143.45,625) ',
+        'matrix( 1.1561431884765625, 0.242279052734375, 0, 1.038818359375, 1143.6,625.4) ',
+        'matrix( 1.1635284423828125, 0.258636474609375, 0, 1.038818359375, 1143.85,625.8) ',
+        'matrix( 1.1706695556640625, 0.2751922607421875, 0, 1.038818359375, 1143.95,626.2) ',
+        'matrix( 1.177581787109375, 0.291961669921875, 0, 1.038818359375, 1144.15,626.6) ',
+        'matrix( 1.18426513671875, 0.3089447021484375, 0, 1.038818359375, 1144.25,627) ',
+        'matrix( 1.190704345703125, 0.326141357421875, 0, 1.038818359375, 1144.45,627.45) ',
+        'matrix( 1.1969146728515625, 0.343505859375, 0, 1.038818359375, 1144.6,627.85) ',
+        'matrix( 1.2028656005859375, 0.361114501953125, 0, 1.038818359375, 1144.75,628.25) ',
+        'matrix( 1.20855712890625, 0.3788909912109375, 0, 1.038818359375, 1144.9,628.65) ',
+        'matrix( 1.2139892578125, 0.3968505859375, 0, 1.038818359375, 1145,629.1) ',
+        'matrix( 1.21917724609375, 0.4150238037109375, 0, 1.038818359375, 1145.1,629.55) ',
+        'matrix( 1.224090576171875, 0.433349609375, 0, 1.038818359375, 1145.25,629.95) ',
+        'matrix( 1.2287445068359375, 0.4518890380859375, 0, 1.038848876953125, 1145.35,630.35) ',
+      ],
+    },
+  ],
+  [
+    `anim_FengMen1_R_0_Layer0_0_FILL_0${props.identify || ''}`,
+    {
+      key: 'FengMen1_R_0_Layer0_0_FILL',
+      initialTransform: 'matrix( 1, 0, 0, 1.038848876953125, 1186.7,606.95) ',
+      transforms: [
+        'matrix( 1, 0, 0, 1.038848876953125, 1186.7,606.95) ',
+        'matrix( 1.0095977783203125, 0.0126190185546875, 0, 1.038818359375, 1186.5,606.7) ',
+        'matrix( 1.019073486328125, 0.0254974365234375, 0, 1.038818359375, 1186.25,606.35) ',
+        'matrix( 1.0283660888671875, 0.03863525390625, 0, 1.038818359375, 1186.05,606.1) ',
+        'matrix( 1.0374908447265625, 0.0519866943359375, 0, 1.038818359375, 1185.8,605.8) ',
+        'matrix( 1.04644775390625, 0.0655670166015625, 0, 1.038818359375, 1185.65,605.45) ',
+        'matrix( 1.05523681640625, 0.07940673828125, 0, 1.038818359375, 1185.45,605.15) ',
+        'matrix( 1.063812255859375, 0.0934600830078125, 0, 1.038818359375, 1185.25,604.8) ',
+        'matrix( 1.0722198486328125, 0.1077423095703125, 0, 1.038818359375, 1185.05,604.5) ',
+        'matrix( 1.0804290771484375, 0.12225341796875, 0, 1.038818359375, 1184.8,604.15) ',
+        'matrix( 1.0884552001953125, 0.1369781494140625, 0, 1.038818359375, 1184.7,603.85) ',
+        'matrix( 1.0962371826171875, 0.1519317626953125, 0, 1.038818359375, 1184.5,603.5) ',
+        'matrix( 1.1038360595703125, 0.1670989990234375, 0, 1.038818359375, 1184.3,603.15) ',
+        'matrix( 1.111236572265625, 0.182464599609375, 0, 1.038818359375, 1184.2,602.8) ',
+        'matrix( 1.1184234619140625, 0.19805908203125, 0, 1.038818359375, 1184,602.45) ',
+        'matrix( 1.1254119873046875, 0.2138671875, 0, 1.038818359375, 1183.85,602.1) ',
+        'matrix( 1.1321563720703125, 0.2298583984375, 0, 1.038818359375, 1183.7,601.75) ',
+        'matrix( 1.1386871337890625, 0.246063232421875, 0, 1.038818359375, 1183.55,601.35) ',
+        'matrix( 1.14495849609375, 0.262481689453125, 0, 1.038818359375, 1183.35,601) ',
+        'matrix( 1.1510009765625, 0.279083251953125, 0, 1.038818359375, 1183.25,600.6) ',
+        'matrix( 1.156829833984375, 0.295867919921875, 0, 1.038818359375, 1183.15,600.2) ',
+        'matrix( 1.162384033203125, 0.3128662109375, 0, 1.038818359375, 1183,599.85) ',
+        'matrix( 1.167724609375, 0.3300323486328125, 0, 1.038818359375, 1182.8,599.45) ',
+        'matrix( 1.1728057861328125, 0.347381591796875, 0, 1.038818359375, 1182.75,599.05) ',
+        'matrix( 1.1776275634765625, 0.364898681640625, 0, 1.038818359375, 1182.6,598.65) ',
+        'matrix( 1.1822052001953125, 0.382598876953125, 0, 1.038818359375, 1182.55,598.25) ',
+        'matrix( 1.1865234375, 0.4004669189453125, 0, 1.038818359375, 1182.4,597.8) ',
+        'matrix( 1.190582275390625, 0.41851806640625, 0, 1.038818359375, 1182.35,597.4) ',
+        'matrix( 1.1943511962890625, 0.4367218017578125, 0, 1.038818359375, 1182.25,597) ',
+        'matrix( 1.1978759765625, 0.455108642578125, 0, 1.038848876953125, 1182.15,596.5) ',
+      ],
+    },
+  ],
+  [
+    `anim_FengMen2_L_0_Layer0_0_FILL_0${props.identify || ''}`,
+    {
+      key: 'FengMen2_L_0_Layer0_0_FILL',
+      initialTransform: 'matrix( 1, 0, 0, 1, 659.9,553.4) ',
+      transforms: [
+        'matrix( 1, 0, 0, 1, 659.9,553.4) ',
+        'matrix( 1.0109100341796875, 0.0113525390625, 0, 1, 660.15,553.65) ',
+        'matrix( 1.0217437744140625, 0.02294921875, 0, 1, 660.4,553.9) ',
+        'matrix( 1.03240966796875, 0.0347900390625, 0, 1, 660.65,554.25) ',
+        'matrix( 1.0429534912109375, 0.0468902587890625, 0, 1, 660.9,554.5) ',
+        'matrix( 1.0533447265625, 0.0592193603515625, 0, 1, 661.2,554.85) ',
+        'matrix( 1.0636138916015625, 0.0717926025390625, 0, 1, 661.4,555.15) ',
+        'matrix( 1.073699951171875, 0.0846099853515625, 0, 1, 661.65,555.45) ',
+        'matrix( 1.0836334228515625, 0.0976409912109375, 0, 1, 661.85,555.75) ',
+        'matrix( 1.0934295654296875, 0.110931396484375, 0, 1, 662.15,556.1) ',
+        'matrix( 1.1030426025390625, 0.12445068359375, 0, 1, 662.35,556.4) ',
+        'matrix( 1.1125030517578125, 0.1381683349609375, 0, 1, 662.55,556.75) ',
+        'matrix( 1.1217803955078125, 0.15216064453125, 0, 1, 662.8,557.1) ',
+        'matrix( 1.1309051513671875, 0.166351318359375, 0, 1, 663,557.4) ',
+        'matrix( 1.1398162841796875, 0.1807708740234375, 0, 1, 663.25,557.75) ',
+        'matrix( 1.1485595703125, 0.195404052734375, 0, 1, 663.4,558.1) ',
+        'matrix( 1.1571044921875, 0.2102813720703125, 0, 1, 663.6,558.5) ',
+        'matrix( 1.165496826171875, 0.225341796875, 0, 1, 663.8,558.9) ',
+        'matrix( 1.173675537109375, 0.2406463623046875, 0, 1, 664,559.25) ',
+        'matrix( 1.181640625, 0.2561492919921875, 0, 1, 664.2,559.6) ',
+        'matrix( 1.189422607421875, 0.2718658447265625, 0, 1, 664.4,560) ',
+        'matrix( 1.1970062255859375, 0.2877655029296875, 0, 1, 664.55,560.35) ',
+        'matrix( 1.2043609619140625, 0.30389404296875, 0, 1, 664.75,560.7) ',
+        'matrix( 1.21148681640625, 0.320220947265625, 0, 1, 664.9,561.15) ',
+        'matrix( 1.21844482421875, 0.3367462158203125, 0, 1, 665.1,561.5) ',
+        'matrix( 1.22515869140625, 0.3534698486328125, 0, 1, 665.2,562) ',
+        'matrix( 1.2316436767578125, 0.3703765869140625, 0, 1, 665.4,562.4) ',
+        'matrix( 1.2378997802734375, 0.387481689453125, 0, 1, 665.5,562.75) ',
+        'matrix( 1.2439422607421875, 0.4047698974609375, 0, 1, 665.65,563.2) ',
+        'matrix( 1.2497406005859375, 0.4222564697265625, 0, 1, 665.8,563.4) ',
+      ],
+    },
+  ],
+  [
+    `anim_FengMen2_R_0_Layer0_0_FILL_0${props.identify || ''}`,
+    {
+      key: 'FengMen2_R_0_Layer0_0_FILL',
+      initialTransform: 'matrix( 1, 0, 0, 1, 707.35,540.5) ',
+      transforms: [
+        'matrix( 1, 0, 0, 1, 707.35,540.5) ',
+        'matrix( 1.0090789794921875, 0.01275634765625, 0, 1, 707.15,540.2) ',
+        'matrix( 1.018035888671875, 0.0257568359375, 0, 1, 706.95,539.9) ',
+        'matrix( 1.02679443359375, 0.0389862060546875, 0, 1, 706.8,539.55) ',
+        'matrix( 1.035400390625, 0.0524444580078125, 0, 1, 706.5,539.25) ',
+        'matrix( 1.0438079833984375, 0.066131591796875, 0, 1, 706.3,538.95) ',
+        'matrix( 1.05206298828125, 0.08001708984375, 0, 1, 706.15,538.6) ',
+        'matrix( 1.0601043701171875, 0.094146728515625, 0, 1, 705.95,538.25) ',
+        'matrix( 1.0679779052734375, 0.108489990234375, 0, 1, 705.75,537.9) ',
+        'matrix( 1.0756378173828125, 0.123046875, 0, 1, 705.6,537.55) ',
+        'matrix( 1.083099365234375, 0.1378021240234375, 0, 1, 705.4,537.25) ',
+        'matrix( 1.0903472900390625, 0.15277099609375, 0, 1, 705.2,536.9) ',
+        'matrix( 1.097412109375, 0.1679534912109375, 0, 1, 705.05,536.55) ',
+        'matrix( 1.1042633056640625, 0.1833343505859375, 0, 1, 704.95,536.15) ',
+        'matrix( 1.1108856201171875, 0.19891357421875, 0, 1, 704.75,535.8) ',
+        'matrix( 1.1173248291015625, 0.2147064208984375, 0, 1, 704.6,535.45) ',
+        'matrix( 1.1235198974609375, 0.2306671142578125, 0, 1, 704.5,535.05) ',
+        'matrix( 1.1294708251953125, 0.246826171875, 0, 1, 704.3,534.65) ',
+        'matrix( 1.1352081298828125, 0.26318359375, 0, 1, 704.2,534.3) ',
+        'matrix( 1.1407012939453125, 0.2797088623046875, 0, 1, 704.1,533.9) ',
+        'matrix( 1.145965576171875, 0.296417236328125, 0, 1, 703.95,533.5) ',
+        'matrix( 1.150970458984375, 0.313323974609375, 0, 1, 703.85,533.1) ',
+        'matrix( 1.1557464599609375, 0.33038330078125, 0, 1, 703.75,532.65) ',
+        'matrix( 1.1602783203125, 0.347625732421875, 0, 1, 703.65,532.25) ',
+        'matrix( 1.16455078125, 0.3650360107421875, 0, 1, 703.55,531.9) ',
+        'matrix( 1.1685638427734375, 0.382598876953125, 0, 1, 703.4,531.45) ',
+        'matrix( 1.172332763671875, 0.4003143310546875, 0, 1, 703.3,531.05) ',
+        'matrix( 1.1758270263671875, 0.4181976318359375, 0, 1, 703.3,530.65) ',
+        'matrix( 1.179046630859375, 0.4362335205078125, 0, 1, 703.15,530.2) ',
+        'matrix( 1.1820068359375, 0.454437255859375, 0, 1, 703.05,529.7) ',
+      ],
+    },
+  ],
+]);
 
-  const { animationElements, triggerAnimation } = useSvgAnimation(elementInfo);
+const { animationElements, triggerAnimation } = useSvgAnimation(elementInfo);
 
-  // 初始化元素引用
-  onMounted(() => {
-    elementInfo.forEach((__, elementId) => {
-      const el = document.querySelector(`[data-anim-id="${elementId}"]`);
-      if (el) {
-        animationElements.set(elementId, el as HTMLElement);
-      }
-    });
+// 初始化元素引用
+onMounted(() => {
+  elementInfo.forEach((__, elementId) => {
+    const el = document.querySelector(`[data-anim-id="${elementId}"]`);
+    if (el) {
+      animationElements.set(elementId, el as HTMLElement);
+    }
   });
+});
 
-  /** 根据SVG的使用场景播放动画 */
-  function animate(frontDoorIsOpen: boolean, middleDoorIsOpen: boolean, rearDoorIsOpen: boolean) {
-    // 在SVG图片中，找到需要动起来的元素（类似<use xlink:href="#FengMen2_L_0_Layer0_0_FILL"></use>），并填入id即可控制该元素的动画（如有）
-    triggerAnimation(['FengMen2_L_0_Layer0_0_FILL', 'FengMen2_R_0_Layer0_0_FILL'], !frontDoorIsOpen);
-    triggerAnimation(['FengMen1_L_0_Layer0_0_FILL', 'FengMen1_R_0_Layer0_0_FILL'], !rearDoorIsOpen);
-  }
+/** 根据SVG的使用场景播放动画 */
+function animate(frontDoorIsOpen: boolean, middleDoorIsOpen: boolean, rearDoorIsOpen: boolean) {
+  // 在SVG图片中，找到需要动起来的元素（类似<use xlink:href="#FengMen2_L_0_Layer0_0_FILL"></use>），并填入id即可控制该元素的动画（如有）
+  triggerAnimation(['FengMen2_L_0_Layer0_0_FILL', 'FengMen2_R_0_Layer0_0_FILL'], !frontDoorIsOpen);
+  triggerAnimation(['FengMen1_L_0_Layer0_0_FILL', 'FengMen1_R_0_Layer0_0_FILL'], !rearDoorIsOpen);
+}
 
-  // 导出方法以便外部调用
-  defineExpose({
-    animate,
-  });
+// 导出方法以便外部调用
+defineExpose({
+  animate,
+});
 </script>
 <style scoped>
-  /* 可以添加一些基础样式 */
-  [data-anim-id] {
-    transition: transform 3s;
-  }
+/* 可以添加一些基础样式 */
+[data-anim-id] {
+  transition: transform 3s;
+}
 </style>