feat(init): save

src/components/assembly/Tags/metas/metas-image.vue

@@ -12,22 +12,12 @@
         :style="imageStyle"
         @wheel.prevent="onImageWheel"
       /> -->
-      <Swiper
-        @swiper="onSwiper"
-        @slideChange="onSwiperChange"
-        @wheel.prevent="onImageWheel"
-        :pagination="{
-          type: 'fraction',
-        }"
-        :zoom="{
-          maxRatio: 5,
-          minRatio: 0.5,
-        }"
-        class="mySwiper"
-        :modules="modules"
-        :slides-per-view="1"
-        :free-mode="true"
-      >
+      <Swiper @swiper="onSwiper" @slideChange="onSwiperChange" @wheel.prevent="onImageWheel" :pagination="{
+        type: 'fraction',
+      }" :zoom="{
+        maxRatio: 5,
+        minRatio: 0.5,
+      }" class="mySwiper" :modules="modules" :slides-per-view="1" :free-mode="true">
         <swiper-slide v-for="(item, index) in currentTag.image" :key="index">
           <div class="swiper-zoom-container">
             <img :src="item.ossPath" :style="{ objectFit: objectFit }" />
@@ -36,61 +26,42 @@
       </Swiper>
     </div>
 
-    <div class="toolbar"  v-if="currentTag.image">
-      <i
-        v-if="currentTag.image.length > 1"
-        class="iconfont image-icon icon-material_preview_previous hover-tips"
-        :class="{ disabled: currentIndex === 0 }"
-        @click="onClickPrevious()"
-      >
+    <div class="toolbar" v-if="currentTag.image">
+      <i v-if="currentTag.image.length > 1" class="iconfont image-icon icon-material_preview_previous hover-tips"
+        :class="{ disabled: currentIndex === 0 }" @click="onClickPrevious()">
         <div>
           <div class="remark">{{ $t("common.prev") }}</div>
         </div>
       </i>
-      <i
-        v-if="currentTag.image.length > 1"
+      <i v-if="currentTag.image.length > 1"
         class="iconfont image-icon icon-material_preview_next1 hover-tips append-splitter"
-        :class="{ disabled: currentIndex === currentTag.image.length - 1 }"
-        @click="onClickNext()"
-      >
+        :class="{ disabled: currentIndex === currentTag.image.length - 1 }" @click="onClickNext()">
         <div>
           <div class="remark">{{ $t("common.next") }}</div>
         </div>
       </i>
-      <i
-        :class="{ disabled: scaleRate >= maxScaleRate }"
-        class="iconfont image-icon icon-material_preview_enlarge hover-tips"
-        @click="onClickZoomIn()"
-      >
+      <i :class="{ disabled: scaleRate >= maxScaleRate }"
+        class="iconfont image-icon icon-material_preview_enlarge hover-tips" @click="onClickZoomIn()">
         <div>
           <div class="remark">{{ $t("common.zoomIn") }}</div>
         </div>
       </i>
       <span>{{ Math.floor(scaleRate.toFixed(2) * 100) }}%</span>
-      <i
-        :class="{ disabled: scaleRate <= 0.5 }"
-        class="iconfont image-icon icon-material_preview_narrow hover-tips"
-        @click="onClickZoomOut()"
-      >
+      <i :class="{ disabled: scaleRate <= 0.5 }" class="iconfont image-icon icon-material_preview_narrow hover-tips"
+        @click="onClickZoomOut()">
         <div>
           <div class="remark">{{ $t("common.zoomOut") }}</div>
         </div>
       </i>
 
-      <i
-        v-if="canFullScreen && objectFit === 'scale-down'"
-        class="iconfont image-icon icon-material_preview_full_screen hover-tips"
-        @click="onClickFullScreen()"
-      >
+      <i v-if="canFullScreen && objectFit === 'scale-down'"
+        class="iconfont image-icon icon-material_preview_full_screen hover-tips" @click="onClickFullScreen()">
         <div>
           <div class="remark">{{ $t("common.fullScene") }}</div>
         </div>
       </i>
-      <i
-        v-if="canFullScreen && objectFit === 'contain'"
-        class="iconfont image-icon icon-material_preview_drop_out hover-tips"
-        @click="onClickCancelFullScreen()"
-      >
+      <i v-if="canFullScreen && objectFit === 'contain'"
+        class="iconfont image-icon icon-material_preview_drop_out hover-tips" @click="onClickCancelFullScreen()">
         <div>
           <div class="remark">{{ $t("common.exitFullScene") }}</div>
         </div>
@@ -102,7 +73,7 @@
 </template>
 
 <script setup>
-import { ref, computed, unref } from "vue";
+import { ref, computed, unref,onMounted } from "vue";
 import { useStore } from "vuex";
 const store = useStore();
 import { Swiper, SwiperSlide } from "swiper/vue";
@@ -199,7 +170,12 @@ const onSwiperChange = (swiper) => {
   const { activeIndex } = swiper;
   currentIndex.value = activeIndex;
   scaleRate.value = 1;
-  console.log("activeIndex", activeIndex);
+  const currentname = currentTag.value.image[activeIndex].name;
+
+  if (currentTag.value.isCustom) {
+    console.log("activeIndex", activeIndex, currentname);
+    currentTag.value.hotspotTitle = currentname;
+  }
 };
 </script>
 
@@ -210,10 +186,12 @@ const onSwiperChange = (swiper) => {
   justify-content: center;
   height: 100%;
   width: 100%;
+
   .mySwiper {
     width: 100%;
     height: 100%;
   }
+
   .swiper-slide {
     text-align: center;
     font-size: 18px;
@@ -221,13 +199,14 @@ const onSwiperChange = (swiper) => {
     justify-content: center;
     align-items: center;
   }
+
   .swiper-slide .swiper-zoom-container img {
     width: 100%;
     height: 100%;
     object-fit: scale-down;
   }
 
-  > video {
+  >video {
     max-width: 960px;
     height: 540px;
   }
@@ -247,7 +226,7 @@ const onSwiperChange = (swiper) => {
     font-size: 14px;
     z-index: 999;
 
-    > i {
+    >i {
       margin-right: 4px;
     }
   }
@@ -282,7 +261,7 @@ const onSwiperChange = (swiper) => {
       }
     }
 
-    > span {
+    >span {
       color: #fff;
       text-align: center;
       display: inline-block;
@@ -334,13 +313,13 @@ const onSwiperChange = (swiper) => {
   font-size: 18px;
 
   &:hover {
-    > div {
+    >div {
       display: block;
     }
   }
 
   // tip的方框
-  > div {
+  >div {
     background: rgba(0, 0, 0, 0.6);
     border: none;
     cursor: default;
@@ -379,6 +358,7 @@ const onSwiperChange = (swiper) => {
     }
   }
 }
+
 .btnmask {
   width: 100%;
   position: absolute;
@@ -389,11 +369,9 @@ const onSwiperChange = (swiper) => {
   opacity: 0.5;
   z-index: 1;
   height: 60px;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.7) 52%,
-    #000000 100%
-  );
+  background: linear-gradient(180deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.7) 52%,
+      #000000 100%);
 }
 </style>

src/components/guide/index.vue

@@ -2,7 +2,7 @@
     <Teleport to="body">
         <div class="guide-menu">
             <div class="guide-menu-item" @click="openlayer(0)">
-               室外消防栓平面位置图
+                室外消防栓平面位置图
             </div>
             <div class="guide-menu-item" @click="openlayer(1)">
                 方位图
@@ -16,6 +16,9 @@
             <div class="guide-menu-item" @click="openlayer(4)">
                 基本情况
             </div>
+            <div class="guide-menu-item" @click="openlayer(5)">
+                水、电、燃气图
+            </div>
         </div>
 
     </Teleport>
@@ -45,7 +48,7 @@ const imageTags1 = ref({
 })
 const imageTags2 = ref({
     hotspotType: "image",
-    hotspotTitle: "总平面图",
+    hotspotTitle: "南华附一医院消防车道图",
     image: [{
         ossPath: require('@/assets/images/guide/3.jpg')
     }]
@@ -60,7 +63,7 @@ const imageTags3 = ref({
     }],
     articleInfo: {
         html:
-        
+
             `<div style="display:inline-flex;overflow:hidden;flex-direction:row;flex-wrap:nowrap;width:100%;gap:10px;">
             
             <div style="flex:1;text-align:center">
@@ -89,11 +92,59 @@ const textTags4 = ref({
             <div><img style="flex:1;display:block;" src="${require('@/assets/images/guide/txt/2.png')}" /></div>
             <div><img style="flex:1;display:block;" src="${require('@/assets/images/guide/txt/3.png')}" /></div>
         </div>
-      
         `
     }
 })
 
+
+const textTags5 = ref({
+    hotspotType: "image",
+    hotspotTitle: "雨水总平面图",
+    isCustom: true,
+    image: [
+        {
+            ossPath: require('@/assets/images/guide/6/water/1.jpg'),
+            name: "雨水总平面图",
+        },
+        {
+            ossPath: require('@/assets/images/guide/6/water/2.jpg'),
+            name: "给水总平面图",
+
+        },
+        {
+            ossPath: require('@/assets/images/guide/6/water/3.jpg'),
+            name: "污水总平面图",
+
+        },
+        {
+            ossPath: require('@/assets/images/guide/6/water/4.jpg'),
+            name: "周边外水管线平面图",
+
+        },
+        {
+            ossPath: require('@/assets/images/guide/6/el/1.jpg'),
+            name: "室外路灯点位总图",
+
+        },
+        {
+            ossPath: require('@/assets/images/guide/6/el/2.jpg'),
+            name: "室外监控点位总图",
+
+        },
+        {
+            ossPath: require('@/assets/images/guide/6/el/3.jpg'),
+            name: "室外电井总图",
+
+        },
+        {
+            ossPath: require('@/assets/images/guide/6/gas/1.jpg'),
+            name: "天然气管道图",
+        },
+
+    ]
+})
+
+
 const isLayerOpen = ref(false);
 
 const openlayer = (type) => {
@@ -118,6 +169,10 @@ const openlayer = (type) => {
             store.commit("tags/setCurrentTag", textTags4.value);
             currentType.value = 1
             break;
+        case 5:
+            store.commit("tags/setCurrentTag", textTags5.value);
+            currentType.value = 1
+            break;
         default:
             break;
     }
@@ -137,7 +192,7 @@ const openlayer = (type) => {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    gap: 70px 0;
+    gap: 40px 0;
 
     .guide-menu-item {
         background: rgba(0, 0, 0, 0.8);