大屏感染科模块修改

src/views/Home/components/map/SX.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="svg-map">
+  <div
+    class="svg-map"
+    :style="`transform: scale(${scaleX},${scaleY}); transform-origin: center center;`"
+  >
     <svg
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
@@ -87,7 +90,7 @@
           height="330"
           class="map-base"
           xlink:href="./map_sx_h.png"
-          transform="matrix(1 0 0 1 180 0)"
+          :style="`transform: translate(${offsetX}px, ${offsetY}px) matrix(1, 0, 0, 1, 180, 0);`"
         ></image>
         <image
           v-if="$store.state.themeName === 'light'"
@@ -106,6 +109,7 @@
               showType === 'fc' ||
               companyid == 'SXJ_KGDL_FLFD_ZGS0'
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <svg
               version="1.1"
@@ -251,6 +255,7 @@
               showType === 'fc' ||
               companyid == 'SXJ_KGDL_FLFD_ZGS0'
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <svg
               version="1.1"
@@ -336,6 +341,7 @@
               showType === 'fc' ||
               companyid == 'SXJ_KGDL_FLFD_ZGS0'
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <svg
               version="1.1"
@@ -457,6 +463,7 @@
               showType === 'fc' ||
               companyid == 'SXJ_KGDL_FLFD_ZGS0'
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <svg
               version="1.1"
@@ -663,6 +670,7 @@
             @click.stop="
               clickLabel('SXJ_KGDL_ZK_FDC_STA', '平遥朱坑', penetrateType)
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <svg
               version="1.1"
@@ -737,6 +745,7 @@
             @click.stop="
               clickLabel('SXJ_KGDL_TZ_GDC_STA', '天镇旭升', penetrateType)
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <image
               width="20"
@@ -794,6 +803,7 @@
             @click.stop="
               clickLabel('SXJ_KGDL_SY_GDC_STA', '山阴荣新', penetrateType)
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <image
               width="20"
@@ -851,6 +861,7 @@
             @click.stop="
               clickLabel('SXJ_KGDL_HR_GDC_STA', '怀仁初晨', penetrateType)
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <image
               width="20"
@@ -902,6 +913,7 @@
             @click.stop="
               clickLabel('SXJ_KGDL_YG_GDC_STA', '阳高蔚家堡', penetrateType)
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <image
               width="20"
@@ -959,6 +971,7 @@
             @click.stop="
               clickLabel('SXJ_KGDL_YX_GDC_STA', '应县晶辉', penetrateType)
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <image
               width="20"
@@ -1010,6 +1023,7 @@
             @click.stop="
               clickLabel('SXJ_KGDL_YY_GDC_STA', '右玉右卫', penetrateType)
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <image
               width="20"
@@ -1067,6 +1081,7 @@
             @click.stop="
               clickLabel('SXJ_KGDL_JR_GDC_STA', '繁峙均然', penetrateType)
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <image
               width="20"
@@ -1118,6 +1133,7 @@
             @click.stop="
               clickLabel('SXJ_KGDL_TL_GDC_STA', '屯留吾元', penetrateType)
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <image
               v-if="sourceMap.TL_GDC_fczt === 3"
@@ -1169,6 +1185,7 @@
             @click.stop="
               clickLabel('SXJ_KGDL_FS_GDC_STA', '方山孙家山', penetrateType)
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <image
               v-if="sourceMap.FS_GDC_fczt === 3"
@@ -1220,6 +1237,7 @@
             @click.stop="
               clickLabel('SXJ_KGDL_PL_GDC_STA', '平鲁阻虎', penetrateType)
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <image
               v-if="sourceMap.PL_GDC_fczt === 3"
@@ -1267,6 +1285,7 @@
               showType === 'fc' ||
               companyid == 'SXJ_KGDL_FLFD_ZGS0'
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <svg
               version="1.1"
@@ -1387,6 +1406,7 @@
                 penetrateType
               )
             "
+            :style="`transform: translate(${offsetX}px, ${offsetY}px);`"
           >
             <svg
               version="1.1"
@@ -1489,6 +1509,10 @@ export default {
       svgLeft: 0,
       svgWidth: "100%",
       svgHeight: "100%",
+      offsetX: 100,
+      offsetY: -100,
+      scaleX: 0.1,
+      scaleY: 0.1,
     };
   },
   // 函数