update

packages/qjkankan-editor/src/views/material/pano/index.vue

@@ -75,7 +75,7 @@
         :header="tabHeader"
         :showLine="true"
         :selection="lastestUsedSearchKey ? false : true"
-        :data="list"
+        :data="tableListData"
         class="table-list"
         ref="table-list"
       >
@@ -374,6 +374,15 @@ export default {
         return name.length > 10 ? String(name).substring(0, 10) + "..." : name;
       };
     },
+    tableListData() {
+      return this.list.filter((i) => {
+        if (i.type !== "dir" && i.status < 3) {
+          return false;
+        } else {
+          return true;
+        }
+      });
+    },
   },
   mounted() {},
   watch: {

packages/qjkankan-view/src/components/Pano/index.vue

@@ -98,7 +98,8 @@ watch(
             if (unref(isHasNormalBGM)) {
               console.log("不存在V3并存在普通bgm");
               await store.dispatch("audio/setLock", false);
-              store.dispatch("audio/playBGM", 0);
+              // store.dispatch("audio/playBGM", 0);
+              setTimeout(() => store.dispatch("audio/pauseBGM"), 50);
             }
           } else {
             setTimeout(() => store.dispatch("audio/pauseBGM"), 100);
@@ -163,6 +164,7 @@ useApp().then((app) => {
           store.commit("tags/setCurrentTag", hotspot);
           if (
             hotspot.hotspotType == "audio" ||
+            hotspot.hotspotType == "imageText" ||
             hotspot.hotspotType == "video"
           ) {
             store.dispatch("audio/pauseBGM");

packages/qjkankan-view/src/components/assembly/Tags/metas/metas-image.vue

@@ -6,12 +6,34 @@
     </div>
 
     <div class="realimgcon" :class="{ fullimgcon: objectFit === 'contain' }">
-      <img
+      <!-- <img
         class="image"
         :src="currentTag.image[currentIndex].ossPath"
         :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-slide v-for="(item, index) in currentTag.image" :key="index">
+          <div class="swiper-zoom-container">
+            <img :src="item.ossPath" :style="{ objectFit: objectFit }" />
+          </div>
+        </swiper-slide>
+      </Swiper>
     </div>
 
     <div class="toolbar">
@@ -80,25 +102,19 @@
 </template>
 
 <script setup>
-import {
-  reactive,
-  defineEmits,
-  onBeforeMount,
-  onMounted,
-  ref,
-  watchEffect,
-  computed,
-  watch,
-  nextTick,
-} from "vue";
+import { ref, computed, unref } from "vue";
 import { useStore } from "vuex";
 const store = useStore();
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Navigation, Zoom } from "swiper";
+const modules = ref([Navigation, Zoom]);
 
 const scaleRate = ref(1);
 const maxScaleRate = ref(5);
 const objectFit = ref("scale-down");
 
 const canFullScreen = ref(true);
+const imageSwiper = ref(null);
 
 const imageStyle = computed(() => {
   return {
@@ -112,48 +128,77 @@ const currentTag = computed(() => store.getters["tags/currentTag"]);
 const currentIndex = ref(0);
 
 const onImageWheel = (e) => {
+  let scale = parseFloat(scaleRate.value);
   if (e.deltaY < 0) {
-    let scle = scaleRate.value * 1.1;
-    if (scle > maxScaleRate.value) {
+    let upScale = parseFloat(scale + 0.1).toFixed(1);
+    // let scle = scaleRate.value * 1.1;
+    if (upScale > maxScaleRate.value) {
       scaleRate.value = maxScaleRate.value;
     } else {
-      scaleRate.value = scle;
+      scaleRate.value = Number(upScale);
     }
   } else {
-    let scle = scaleRate.value * 0.9;
-    if (scle < 0.5) {
+    let scale = parseFloat(scaleRate.value);
+    let downScale = parseFloat(scale - 0.1).toFixed(1);
+    if (downScale < 0.5) {
       scaleRate.value = 0.5;
     } else {
-      scaleRate.value = scle;
+      scaleRate.value = Number(downScale);
     }
   }
+  if (unref(imageSwiper)) {
+    unref(imageSwiper).zoom.in(scaleRate.value);
+  }
 };
 
 const onClickZoomIn = () => {
-  scaleRate.value = Math.min(scaleRate.value * 1.1, maxScaleRate.value);
+  let scale = parseFloat(scaleRate.value);
+  let upScale = parseFloat(scale + 0.1).toFixed(1);
+  scaleRate.value = Number(upScale);
+  if (unref(imageSwiper)) {
+    unref(imageSwiper).zoom.in(scaleRate.value);
+  }
 };
 const onClickZoomOut = () => {
-  scaleRate.value = Math.max(scaleRate.value * 0.9, 0.5);
+  let scale = parseFloat(scaleRate.value);
+  let downScale = parseFloat(scale - 0.1).toFixed(1);
+  scaleRate.value = Number(downScale);
+  if (unref(imageSwiper)) {
+    unref(imageSwiper).zoom.in(scaleRate.value);
+  }
 };
-
 const onClickPrevious = () => {
-  if (currentIndex.value > 0) {
-    currentIndex.value--;
+  if (unref(imageSwiper)) {
+    unref(imageSwiper).slidePrev();
   }
 };
 const onClickNext = () => {
-  if (currentIndex.value < currentTag.value.image.length - 1) {
-    currentIndex.value++;
+  if (unref(imageSwiper)) {
+    unref(imageSwiper).slideNext();
   }
 };
 
 const onClickFullScreen = () => {
   scaleRate.value = 1;
   objectFit.value = "contain";
+  if (unref(imageSwiper)) {
+    unref(imageSwiper).zoom.in(scaleRate.value);
+  }
 };
 const onClickCancelFullScreen = () => {
   scaleRate.value = 1;
   objectFit.value = "scale-down";
+  if (unref(imageSwiper)) {
+    unref(imageSwiper).zoom.in(scaleRate.value);
+  }
+};
+const onSwiper = (swiper) => {
+  imageSwiper.value = swiper;
+};
+const onSwiperChange = (swiper) => {
+  const { activeIndex } = swiper;
+  currentIndex.value = activeIndex;
+  console.log("activeIndex", activeIndex);
 };
 </script>
 
@@ -164,6 +209,22 @@ const onClickCancelFullScreen = () => {
   justify-content: center;
   height: 100%;
   width: 100%;
+  .mySwiper {
+    width: 100%;
+    height: 100%;
+  }
+  .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .swiper-slide .swiper-zoom-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: scale-down;
+  }
 
   > video {
     max-width: 960px;

packages/qjkankan-view/src/components/assembly/Tags/metas/metas-imagetext.vue

@@ -11,12 +11,32 @@
           class="realimgcon"
           :class="{ fullimgcon: objectFit === 'contain' }"
         >
-          <img
-            class="image"
-            v-lazy="currentTag.imageTextInfo.imageList[currentIndex].ossPath"
-            :style="imageStyle"
+          <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"
+            @paginationRender="handlePageRender"
+          >
+            <swiper-slide
+              v-for="(item, index) in currentTag.imageTextInfo.imageList"
+              :key="index"
+            >
+              <div class="swiper-zoom-container">
+                <img :src="item.ossPath" :style="{ objectFit: objectFit }" />
+              </div>
+            </swiper-slide>
+          </Swiper>
         </div>
         <div class="toolbar-container">
           <div
@@ -54,7 +74,7 @@
             </div>
             <div class="right">
               <i
-                :class="{ disabled: scaleRate >= 2 }"
+                :class="{ disabled: scaleRate >= 5 }"
                 class="iconfont icon-material_preview_enlarge hover-tips"
                 @click="onClickZoomIn()"
               >
@@ -124,6 +144,10 @@
 import { nextTick } from "process";
 import { ref, computed, unref, onMounted, onUnmounted, watchEffect } from "vue";
 import { useStore } from "vuex";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Navigation, Zoom } from "swiper";
+const modules = ref([Navigation, Zoom]);
+
 const store = useStore();
 const hasAudio = computed(
   () =>
@@ -137,64 +161,83 @@ const objectFit = ref("scale-down");
 
 const canFullScreen = ref(true);
 
-const imageStyle = computed(() => {
-  return {
-    transform: `scale(${scaleRate.value})`,
-    objectFit: objectFit.value,
-  };
-});
-
 const currentTag = computed(() => store.getters["tags/currentTag"]);
 
 const currentIndex = ref(0);
+const imageSwiper = ref(null);
 
 const onImageWheel = (e) => {
+  let scale = parseFloat(scaleRate.value);
   if (e.deltaY < 0) {
-    let scle = scaleRate.value * 1.1;
-    if (scle > maxScaleRate.value) {
+    let upScale = parseFloat(scale + 0.1).toFixed(1);
+    // let scle = scaleRate.value * 1.1;
+    if (upScale > maxScaleRate.value) {
       scaleRate.value = maxScaleRate.value;
     } else {
-      scaleRate.value = scle;
+      scaleRate.value = Number(upScale);
     }
   } else {
-    let scle = scaleRate.value * 0.9;
-    if (scle < 0.5) {
+    let scale = parseFloat(scaleRate.value);
+    let downScale = parseFloat(scale - 0.1).toFixed(1);
+    if (downScale < 0.5) {
       scaleRate.value = 0.5;
     } else {
-      scaleRate.value = scle;
+      scaleRate.value = Number(downScale);
     }
   }
+  if (unref(imageSwiper)) {
+    unref(imageSwiper).zoom.in(scaleRate.value);
+  }
 };
 
 const onClickZoomIn = () => {
-  scaleRate.value = Math.min(scaleRate.value * 1.1, maxScaleRate.value);
+  let scale = parseFloat(scaleRate.value);
+  let upScale = parseFloat(scale + 0.1).toFixed(1);
+  scaleRate.value = Number(upScale);
+  if (unref(imageSwiper)) {
+    unref(imageSwiper).zoom.in(scaleRate.value);
+  }
 };
 const onClickZoomOut = () => {
-  scaleRate.value = Math.max(scaleRate.value * 0.9, 0.5);
+  let scale = parseFloat(scaleRate.value);
+  let downScale = parseFloat(scale - 0.1).toFixed(1);
+  scaleRate.value = Number(downScale);
+  if (unref(imageSwiper)) {
+    unref(imageSwiper).zoom.in(scaleRate.value);
+  }
+};
+const onSwiper = (swiper) => {
+  imageSwiper.value = swiper;
+};
+const onSwiperChange = (swiper) => {
+  const { activeIndex } = swiper;
+  currentIndex.value = activeIndex;
+  console.log("activeIndex", activeIndex);
 };
-
 const onClickPrevious = () => {
-  if (currentIndex.value > 0) {
-    currentIndex.value--;
+  if (unref(imageSwiper)) {
+    unref(imageSwiper).slidePrev();
   }
 };
 const onClickNext = () => {
-  if (
-    currentIndex.value <
-    unref(currentTag).imageTextInfo.imageList.length - 1
-  ) {
-    currentIndex.value++;
-    console.log("currentIndex", unref(currentIndex));
+  if (unref(imageSwiper)) {
+    unref(imageSwiper).slideNext();
   }
 };
 
 const onClickFullScreen = () => {
   scaleRate.value = 1;
   objectFit.value = "contain";
+  if (unref(imageSwiper)) {
+    unref(imageSwiper).zoom.in(scaleRate.value);
+  }
 };
 const onClickCancelFullScreen = () => {
   scaleRate.value = 1;
   objectFit.value = "scale-down";
+  if (unref(imageSwiper)) {
+    unref(imageSwiper).zoom.in(scaleRate.value);
+  }
 };
 function transTime(time) {
   var duration = parseInt(time);
@@ -267,6 +310,12 @@ watchEffect(() => {
     debugger;
   }
 });
+function handlePageRender(_, el) {
+  if (unref(hasAudio)) {
+    // el.style.left = "20px";
+    // el.style.transform = "translateX(0)";
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -295,6 +344,22 @@ watchEffect(() => {
       overflow: hidden;
       position: relative;
       background: rgba(0, 0, 0, 1);
+      .mySwiper {
+        width: 100%;
+        height: 100%;
+      }
+      .swiper-slide {
+        text-align: center;
+        font-size: 18px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .swiper-slide .swiper-zoom-container img {
+        width: 100%;
+        height: 100%;
+        object-fit: scale-down;
+      }
     }
     .text-right {
       flex: 0 0 23.2%;
@@ -341,6 +406,7 @@ watchEffect(() => {
     transform: translateX(-50%);
     display: flex;
     flex-direction: row;
+    z-index: 10000;
   }
   .iconfont {
     cursor: pointer;
@@ -439,16 +505,17 @@ watchEffect(() => {
     width: 100%;
     height: 100%;
     z-index: 1;
+    position: relative;
 
     .image {
       width: 100%;
       height: 100%;
+      position: absolute;
       // top: 0;
       // left: 0;
       // width: 100%;
-      // height: 100%;
-      // position: absolute;
-      // z-index: 1;
+
+      z-index: 1;
     }
   }