add tags template

src/App.vue

@@ -89,7 +89,6 @@
       mobile: true,
     });
     // SDK初始化
-
     app.use('MinMap', { theme: { camera_fillStyle: '#ED5D18' } }).then(() => {
       // refMiniMap.value = '[xui_min_map]';
       console.log('小地图SDK');
@@ -160,6 +159,7 @@
     app.Scene.on('loaded', (pano) => {
       appStore.setFloorId(pano.floorIndex);
       refMiniMap.value = '[xui_min_map]';
+
       // store.commit("setFloorId", pano.floorIndex);
       // store.commit("rtc/setShowdaogou", true);
 

src/components/hotspot/index.vue

@@ -33,12 +33,12 @@
                   class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-close"
                 ></i>
               </div>
-              <ShowTag @click.stop="" :tag="tag" v-if="tag" @open="openLayer" />
+              <ShowTag :tag="tag" v-if="tag" @open="openLayer(tag)" />
             </template>
           </div>
         </div>
 
-        <TagView @click.stop="" :data="tag" v-if="showLayer" @close="closeLayer" />
+        <TagView :data="tag" v-if="showLayer && isShowTag(tag)" @close="closeLayer" />
       </div>
     </template>
   </teleport>
@@ -54,38 +54,42 @@
   // import { useStore } from 'vuex';
   import { changeUrl } from './common';
   import { watchEffect } from 'vue';
-  // import TagView from './tag-view.vue';
+
   import ShowTag from './show-tag.vue';
   const sceneStore = useSceneStore();
   const tags$ = ref('');
   const tags = computed(() => sceneStore.tags);
 
-  const showInfo = ref<tagType | null>(null);
+  const currentTag = ref<tagType | null>(null);
   const isClick = ref(false);
   const showLayer = ref(false);
+
   const isShowTag = computed(() => {
     return (tag: tagType) => {
-      return showInfo.value && showInfo.value.sid === tag.sid;
+      return currentTag.value && currentTag.value.sid === tag.sid;
     };
   });
   const isMobile = computed(() => browser.isMobile());
-  // const toggleIndex = ref(null)
-  const openLayer = () => {
+
+  const openLayer = (tag: tagType) => {
     showLayer.value = true;
-    showInfo.value = null;
-    debugger;
+    currentTag.value = tag;
+  };
+  const closeLayer = (tag: tagType) => {
+    showLayer.value = false;
+    currentTag.value = tag;
+    setTimeout(() => {}, 1000);
   };
-  const closeLayer = () => {};
 
   const closeTag = async () => {
-    showInfo.value = null;
+    currentTag.value = null;
     isClick.value = false;
   };
 
   const goTag = async (_, item: tagType) => {
     // const app = await useApp();
     if (unref(isClick)) {
-      showInfo.value = null;
+      currentTag.value = null;
       isClick.value = false;
     } else {
       isClick.value = true;
@@ -93,12 +97,12 @@
     }
   };
   const onMouseLeave = (_, tag: tagType) => {
-    if (!unref(isClick) && showInfo.value?.sid === tag.sid) {
-      showInfo.value = null;
+    if (!unref(isClick) && currentTag.value?.sid === tag.sid && !unref(showLayer)) {
+      currentTag.value = null;
     }
   };
   const onMouseEnter = (_, tag: tagType) => {
-    showInfo.value = tag;
+    currentTag.value = tag;
   };
 
   onMounted(async () => {

src/components/hotspot/metas/metas-image.vue

@@ -45,6 +45,13 @@
       </div>
       <!-- <ui-icon v-show="loading" class="loading-icon" type="_loading_"></ui-icon> -->
     </div>
+    <div class="continue" v-if="imageList.length > 1">
+      <span class="pic-num">
+        <span class="cur">{{ imageNum + 1 }}</span>
+        <span><span>&nbsp;</span>/<span>&nbsp;</span></span>
+        <span>{{ imageList.length }}</span>
+      </span>
+    </div>
   </div>
 </template>
 
@@ -52,10 +59,12 @@
   import { onMounted, nextTick, ref, computed, defineProps, defineEmits } from 'vue';
   import { tagType } from '/@/store/modules/scene';
   import { changeUrl } from '../common';
-  import { useApp } from '/@/hooks/userApp';
+  // import { useApp } from '/@/hooks/userApp';
+  import browser from '/@/utils/browser';
   const isMobile = ref(false);
-  const type = ref('image');
+  // const type = ref('image');
   const emit = defineEmits(['close']);
+  
   const props = defineProps({
     data: {
       type: Object,
@@ -106,8 +115,9 @@
     if (list.length > 0) {
       picLength = list.length;
     }
+
     for (let i = 0; i < data.length; i++) {
-      if (list.length < customer['image'].maxNum) {
+      if (list.length < 9) {
         list.push('');
         var index = i + picLength;
         list[index] = { src: URL.createObjectURL(data[i]), file: data[i] };
@@ -163,7 +173,7 @@
       }
     });
   };
-  const containerRef = ref(null);
+  const containerRef = ref<HTMLElement | null>(null);
 
   const zoomFun = (e) => {
     let ratio = 1.1;
@@ -198,11 +208,11 @@
   };
 
   // 滚轮缩放
-  const initWheelZoom = (imgEle) => {
-    containerRef.value.addEventListener('wheel', zoomFun);
+  const initWheelZoom = () => {
+    containerRef.value?.addEventListener('wheel', zoomFun);
   };
   const removeWheelZoom = () => {
-    containerRef.value.removeEventListener('wheel', zoomFun);
+    containerRef.value?.removeEventListener('wheel', zoomFun);
   };
 
   const resetScale = () => {
@@ -221,33 +231,35 @@
       initScale();
     });
   };
-  let imgEle = null;
+  let imgEle: HTMLImageElement;
   const initScale = () => {
     imgEle = document.getElementById(`domImg${imageNum.value}`);
 
     x = 0;
     y = 0;
-    imgEle.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(1)';
+    if (imgEle) {
+      imgEle.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(1)';
 
-    result.width = imgEle.width;
-    result.height = imgEle.height;
+      result.width = imgEle.width;
+      result.height = imgEle.height;
+    }
 
     nextTick(() => {
       // 拖拽查看
       drag(imgEle);
+
       // 滚轮缩放
-      initWheelZoom(imgEle);
+      initWheelZoom();
     });
   };
   onMounted(async () => {
-    const app = await useApp();
-    isMobile.value = app.config.mobile;
+    // const app = await useApp();
+    isMobile.value = browser.isMobile();
 
     nextTick(() => {
       let img = new Image();
       img.onload = () => {
         loading.value = false;
-
         if (props.viewer && !isMobile.value) {
           //pc端缩放
           nextTick(() => {
@@ -264,29 +276,17 @@
       }
     });
   });
-  const filesError = (index) => {
-    loading.value = false;
-  };
+
   const zoomInImg = ref(null);
 
-  
-  const closePhoto = () => {
-    if (imageList.value.length == 1) {
-      emit('close');
-    } else {
-      zoomInImg.value = null;
-    }
-    // $('#tag-billboards').css({ 'z-index': '101', 'pointer-events': 'none' });
-  };
   const openScale = (src) => {
     if (isMobile.value) {
       zoomInImg.value = changeUrl(src);
-
-      let img = new Image();
+      let img: HTMLImageElement = new Image();
       img.onload = () => {
         loading.value = false;
       };
-      img.src = zoomInImg.value;
+      img.src = zoomInImg.value || '';
       // nextTick(() => {
       //     zoomElement(topology.value)
       // })

src/components/hotspot/metas/metas-video.vue

@@ -2,10 +2,7 @@
 <template>
   <!-- <div class="video-box" :style="metasHeight ? `height:${metasHeight}px;` : ''"> -->
   <div class="video-box">
-    <div v-if="isEdit" class="del-btn" @click="delVideo()">
-      <ui-icon type="del"></ui-icon>
-    </div>
-    <ui-icon v-show="loading" class="loading-icon" type="_loading_"></ui-icon>
+    <!-- <ui-icon v-show="loading" class="loading-icon" type="_loading_"></ui-icon> -->
     <video
       @error="filesError"
       v-show="!loading"

src/components/hotspot/metas/metas-web.vue

@@ -5,65 +5,30 @@
       <span>{{ $t('tag.toolbox.webShow') }}</span>
     </div>
     <div class="iframe-box" v-if="link.length > 0">
-      <div v-if="isEdit" class="del-btn" @click="delWeb()">
-        <ui-icon type="del"></ui-icon>
-      </div>
-      <iframe v-for="(i, index) in link" :src="i.src" frameborder="0"></iframe>
-    </div>
-    <div v-if="isEdit" class="input-web" :class="{ disabled: link.length > 0 }">
-      <input type="text" v-model="inputValue" placeholder="https://" autocomplete="off" />
-      <div class="ok-web" v-if="link.length <= 0" @click="confirmWeb">
-        <ui-icon type="checkbox1"></ui-icon>
-      </div>
+      <iframe :key="i.sid" v-for="i in link" :src="i.src" frameborder="0"></iframe>
     </div>
   </div>
 </template>
 
-<script setup>
-  import { ref, computed, defineProps } from 'vue';
+<script setup lang="ts">
+  import { computed, defineProps } from 'vue';
+  import { tagType } from '/@/store/modules/scene';
 
-  const store = useStore();
-  const linkNum = ref(0);
-  const hotData = computed(() => store.getters['tag/hotData']);
-  const link = computed(() => {
-    return hotData.value.media.link;
-  });
-  defineProps({
+  const props = defineProps({
+    data: {
+      type: Object,
+      default: {} as any as tagType,
+    },
     metasHeight: {
       type: Number,
       default: null,
     },
   });
-  const inputLink = computed(() => store.getters['tag/inputLink']);
-  const isEdit = computed(() => store.getters['tag/isEdit']);
-  const inputValue = computed({
-    get() {
-      if (inputLink.value && inputLink.value != void 0) {
-        return inputLink.value;
-      }
-      return inputLink.value || '';
-    },
-    set(value) {
-      store.commit('tag/setLink', value);
-    },
+  // const linkNum = ref(0);
+  // const hotData = computed(() => store.getters['tag/hotData']);
+  const link = computed(() => {
+    return props.data.media.link;
   });
-  const type = ref('link');
-  const showIframe = ref(false);
-
-  const delWeb = () => {
-    store.commit('tag/delMetas', { type: type.value, index: linkNum.value });
-    showIframe.value = false;
-    inputValue.value = null;
-  };
-  const confirmWeb = () => {
-    if (inputValue.value.indexOf('http' || 'https') == -1) {
-      inputValue.value = 'https://' + inputValue.value;
-    }
-    console.log(inputValue.value);
-    store.commit('tag/setWeb', inputValue.value);
-    showIframe.value = false;
-    showIframe.value = true;
-  };
 </script>
 <style lang="scss" scoped>
   .del-btn {

src/components/hotspot/show-tag.vue

@@ -22,6 +22,7 @@
       v-if="tag.media[tag.type].length > 0 && tag.type != 'audio'"
     >
       <metasImage :data="tag" v-if="tag.type == 'image'" />
+      <metasWeb :data="tag" v-if="tag.type == 'link'" />
       <!-- <metasImage v-if="tag.type == 'image'" />
       <metasVideo v-if="tag.type == 'video'" />
       <metasWeb v-if="tag.type == 'link'" /> -->
@@ -31,6 +32,7 @@
 
 <script setup lang="ts">
   import metasImage from './metas/metas-image.vue';
+  import metasWeb from './metas/metas-web.vue';
   import { onMounted } from 'vue';
   import { tagType } from '/@/store/modules/scene';
   defineProps({

src/components/hotspot/tag-view.vue

@@ -1,18 +1,22 @@
 <!--  -->
 <template>
   <teleport to="body">
-    <div class="tag-layer" @click.stop="" :class="{ mobile: isMobile, full: tag.type == 'image' }">
-      <div class="tag-info" @click.stop="" id="tag-info">
-        <!-- <ui-icon class="close-btn" @click.stop="close" type="close" /> -->
+    <div class="tag-layer" :class="{ mobile: isMobile, full: tag.type == 'image' }">
+      <div class="tag-info" id="tag-info">
+        <i
+          @click.stop="handleClose"
+          class="iconfont ui-kankan-icon icon tip-h-center tip-v-bottom icon-close close-btn"
+        ></i>
         <div class="tag-metas" v-if="tag.media[tag.type].length > 0 && tag.type != 'audio'">
           <metasImage
-            @close="close"
+            :data="tag"
+            @close="handleClose"
             :scale="true"
             :viewer="true"
             v-if="tag.type == 'image' && !isMobile"
           />
-          <!-- <imageView v-if="tag.type == 'image' && isMobile" /> -->
-          <!-- <metasWeb v-if="tag.type == 'link'" /> -->
+          <imageView :data="tag" v-if="tag.type == 'image' && isMobile" />
+          <metasWeb :data="tag" v-if="tag.type == 'link'" />
         </div>
       </div>
     </div>
@@ -20,53 +24,43 @@
 </template>
 
 <script setup lang="ts">
-  import { defineEmits, onMounted, ref, watchEffect, computed, nextTick } from 'vue';
-
+  import { defineEmits, onMounted, ref, computed } from 'vue';
   import metasImage from './metas/metas-image.vue';
   import imageView from './metas/image-view.vue';
-
+  import browser from '/@/utils/browser';
   import metasWeb from './metas/metas-web.vue';
-  import { useApp } from '/@/hooks/userApp';
+
   import { tagType } from '/@/store/modules/scene';
 
-  const isMobile = ref(false);
-  const metasHeight = ref(0);
+  const isMobile = computed(() => browser.isMobile());
+
   const props = defineProps({
     data: {
       type: Object,
       default: {} as any as tagType,
     },
   });
-  onMounted(async () => {
-    const app = await useApp();
-    isMobile.value = app.config.mobile;
-    nextTick(() => {
-      let Layer = document.getElementById('tag-info');
-      let layerHeight = Layer ? Layer.getBoundingClientRect().height : 0;
-      metasHeight.value = layerHeight * 0.85;
-    });
-  });
-
-  const emit = defineEmits(['close']);
-
   const tag = computed(() => props.data);
+  const emits = defineEmits(['close']);
 
-  const audioInfo = computed(() => {
-    return tag.value.media.audio;
-  });
-  const audio = ref(null);
+  onMounted(async () => {});
 
-  watchEffect(() => {
-    if (audio.value) {
-      audio.value.play();
-    }
-  });
+  // const audioInfo = computed(() => {
+  //   return tag.value.media.audio;
+  // });
+  // const audio = ref(null);
+
+  // watchEffect(() => {
+  //   if (audio.value) {
+  //     audio.value.play();
+  //   }
+  // });
 
-  const close = () => {
-    emit('close');
+  const handleClose = () => {
+    emits('close', tag.value);
   };
-  onMounted(() => {});
 </script>
+
 <style lang="scss">
   .tag-layer {
     width: 100vw;