[Feat 0000] 风门-门窗一体双道风门SVG模型开发和动画对接

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

@@ -1314,7 +1314,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, defineExpose, withDefaults } from 'vue';
+  import { onMounted } from 'vue';
   import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
 
   const props = withDefaults(

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

@@ -1325,214 +1325,215 @@
 </template>
 
 <script setup lang="ts">
-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 !== '');
+  import { onMounted, computed } from 'vue';
+  import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
 
-// 宽高
-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 props = withDefaults(
+    defineProps<{
+      identify?: string;
+    }>(),
+    { identify: '' }
+  );
+  // 核心判断：是否传递了 identify
+  const hasIdentify = computed(() => props.identify !== '');
 
-const { animationElements, triggerAnimation } = useSvgAnimation(elementInfo);
+  // 宽高
+  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);
 
-// 初始化元素引用
-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>

src/views/vent/monitorManager/gateMonitor/components/gateSVG.ssl.vue

@@ -1189,7 +1189,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, defineExpose, withDefaults } from 'vue';
+  import { onMounted } from 'vue';
   import { useSvgAnimation } from '/@/hooks/vent/useSvgAnimation';
 
   const props = withDefaults(

src/views/vent/monitorManager/gateMonitor/gate.data.ts

@@ -76,85 +76,85 @@ export const faultColumns: BasicColumn[] = [
   {
     title: '安装位置',
     dataIndex: 'strInstallPos',
-    align: 'center'
+    align: 'center',
   },
   {
     title: '设备名称',
     dataIndex: 'strName',
-    align: 'center'
+    align: 'center',
   },
   {
     title: '是否开启统计',
     dataIndex: 'status',
-    align: 'center'
+    align: 'center',
   },
   {
     title: '总成功次数',
     dataIndex: 'totalSuccess',
-    align: 'center'
+    align: 'center',
   },
   {
     title: '总故障次数',
     dataIndex: 'totalFail',
-    align: 'center'
+    align: 'center',
   },
   {
     title: '自动开闭成功次数',
     dataIndex: 'successByAuto',
-    align: 'center'
+    align: 'center',
   },
   {
     title: '开关未到位故障次数',
     dataIndex: 'failBySwitch',
-    align: 'center'
+    align: 'center',
   },
   {
     title: '气源压力不足故障次数',
     dataIndex: 'failByPressure',
-    align: 'center'
+    align: 'center',
   },
   {
     title: '网络断开故障次数',
     dataIndex: 'failByNetwork',
-    align: 'center'
+    align: 'center',
   },
 ];
 //风门状态
-export let typeList:any[] =[
+export let typeList: any[] = [
   { label: '正常开闭', value: '0' },
-  { label: '无法关闭', value: '1' }
-]
+  { label: '无法关闭', value: '1' },
+];
 //车辆损坏排查
 export const carColumns: BasicColumn[] = [
   {
     title: '安装位置',
     dataIndex: 'gateInstallPos',
-    align: 'center'
+    align: 'center',
   },
   {
     title: '状态',
     dataIndex: 'type',
-    align: 'center'
+    align: 'center',
   },
   {
     title: '车辆编号',
     dataIndex: 'carNo',
-    align: 'center'
+    align: 'center',
   },
   {
     title: '车与门的距离',
     dataIndex: 'distance',
-    align: 'center'
+    align: 'center',
   },
   {
     title: '抓拍图像',
     dataIndex: 'photoC',
-    align: 'center'
+    align: 'center',
   },
   {
     title: '抓拍时间',
     dataIndex: 'captureTime',
-    align: 'center'
+    align: 'center',
   },
 ];
 
@@ -405,18 +405,26 @@ export const chartsColumns = [
   // },
 ];
 
-export function getModelComponent(is2DModel: boolean = false, sysOrgCode?: string) {
+export function getModelComponent(is2DModel: boolean = false, type?: string) {
   if (!is2DModel) return EntryThree;
   // @ts-ignore
   return defineAsyncComponent(() => {
     // return import('./components/gateTripleSVG.vue');
-    switch (sysOrgCode) {
+    switch (type) {
       // case '000000':
       //   双道风门
       //   return import('./components/gateDualSVG.vue');
+      case 'fmWindow':
+        return import('./components/gateDualAIO.vue');
+      case 'fm1':
+        return import('./components/gateDualSVG.vue');
+      case 'fmSp1':
+        return import('./components/gateSVG.ssl.vue');
+      case 'fmSsl':
+        return import('./components/gateDualSVG.ssl.vue');
       default:
         // return import('./components/gateTripleSVG.vue');
-        return import('./components/gateDualSVG.vue');
+        return import('./components/gateTripleSVG.vue');
     }
   });
 }

src/views/vent/monitorManager/gateMonitor/gate.threejs.ts

@@ -307,6 +307,22 @@ export function computePlay(data, maxarea, isFirst = false) {
 }
 
 // 切换风门类型
+// fm1 纯黄色双门
+// fm2 纯红色三门
+// fmWindow 橘黄风窗一体双门
+// fmWindowHjg 橘黄上窗下门双门
+// fmWindowZhq 蓝色上窗下门双门
+// fm_fc_bd 橘黄风窗一体单门
+// fm_fc_ssl 蓝色风窗一体单门
+// fmThreeTl 黄色自动风门三门
+// fm3 黄色自动风门双门
+// fmXr 白色蓝底双门
+// fmTwoSs 红色双门
+// fmHsw3 隧道半圆蓝色三门
+// fmYjXr 隧道半圆蓝色双门
+// fmYj 隧道半圆红色双门
+// fmSp1 蓝色警示条单门
+// fmSsl 蓝色警示条双门
 export const setModelType = (type) => {
   if (!model) return Promise.reject('model is null');
   fmType = type;

src/views/vent/monitorManager/gateMonitor/index.vue

@@ -436,7 +436,7 @@
 
   const modelRef = ref();
   /** 模型对应的组件，根据实际情况分为二维三维 */
-  const modelComponent = getModelComponent(globalConfig.is2DModel, sysOrgCode);
+  const modelComponent = getModelComponent(globalConfig.is2DModel);
 
   const { currentRoute } = useRouter();
   const gateId = ref(''); //风门ID
@@ -671,11 +671,11 @@
       }
     }
 
-    debugger;
-    setModelType(type).then(async () => {
-      addMonitorText(selectData);
-      loading.value = false;
-    });
+    await setSVGModelType(type);
+    await setModelType(type);
+    addMonitorText(selectData);
+    // playAnimation(selectRow, selectData.value.maxarea, true);
+    loading.value = false;
     await getCamera(selectRow.deviceID, playerRef, renderPlayer);
   }
 
@@ -889,6 +889,11 @@
     setControl('manualAutoMode_w', '手动/自动模式切换');
   };
 
+  function setSVGModelType(type) {
+    modelComponent.value = getModelComponent(globalConfig.is2DModel, type);
+    return nextTick();
+  }
+
   onMounted(async () => {
     const { query } = unref(currentRoute);
     if (query['deviceType']) deviceType.value = query['deviceType'] as string;