fix🐛: 细节修复

src/components/UniversalWindow/UWindow.vue

@@ -5,6 +5,7 @@
   </div>
 </template>
 <script setup>
+  import PartBox from '../../views/Home/middleBottomBox/components/partBox.vue'
   defineOptions({
     name: 'UWindow'
   })
@@ -14,9 +15,7 @@
   const onMenuClick = (item) => {
     switch (item.key) {
       case 'xjhm':
-        comName.value = defineAsyncComponent(
-          () => import('../../views/Home/middleBottomBox/components/partBox.vue')
-        )
+        comName.value = PartBox
         break
       case 'ydjs_list' + item.id:
         comData.value = item

src/components/UniversalWindow/components/uwMenu.vue

@@ -52,15 +52,15 @@
   const collapsed = ref(false)
   const level = ref(1)
   const menuOptions = ref([
-    // {
-    //   label: '细节画面',
-    //   key: 'xjhm',
-    //   icon: 'material-symbols-light:frame-source-sharp',
-    //   w: '40',
-    //   h: '20',
-    //   auth: [],
-    //   uuid: uuidv4().substring(0, 8)
-    // },
+    {
+      label: '细节画面',
+      key: 'xjhm',
+      icon: 'material-symbols-light:frame-source-sharp',
+      w: '40',
+      h: '20',
+      auth: [],
+      uuid: uuidv4().substring(0, 8)
+    },
     {
       label: '一点即视',
       key: 'ydjs',
@@ -180,7 +180,7 @@
   watch(
     () => useSystem.partObj,
     () => {
-      if (route.name === 'PanoramicSituation') {
+      if (route.name === 'Map') {
         if (
           props.currentActive !== useSystem.winActive ||
           useSystem.menuCom[props.currentActive]?.includes('ydjs_list')

src/directives/modules/doubleClick.js

@@ -5,6 +5,7 @@
  * @E-mail boyzcf@qq.com
  */
 import { useOutsideSystemStore } from '@/stores/modules/system.js'
+import { getAutofitScale } from '@/utils'
 
 const useSystem = useOutsideSystemStore()
 export default {
@@ -21,7 +22,9 @@ export default {
 
         Object.assign(useSystem.partObj, {
           PartCenterX: `${mouseX / useSystem.ratio.wR}`,
-          PartCenterY: `${mouseY / useSystem.ratio.hR}`
+          PartCenterY: `${mouseY / useSystem.ratio.hR}`,
+          noRationX: mouseX,
+          noRationY: mouseY
         })
       })
     } else {

src/layout/Three3D/index.vue

@@ -30,7 +30,7 @@
   import { onMounted, onUnmounted, provide, ref } from 'vue'
   import { useOutsideHomeStore } from '@/stores/modules/home'
   import { useOutsideSystemStore } from '@/stores/modules/system'
-  import { getCorrectMousePosition } from '@/utils'
+  import { getAutofitScale } from '@/utils'
   import storage from '@/utils/storage'
   import RightClick from './components/rightClick.vue'
 
@@ -147,11 +147,10 @@
     if (intersects.length > 0) {
       if (intersects[0].object.type === 'Sprite') return
       // 显示右键菜单
-      const scale = document.body.style.transform.split('(')[2].split(')')[0]
 
       rightClickD.show = true
-      rightClickD.x = event.clientX / scale
-      rightClickD.y = event.clientY / scale
+      rightClickD.x = event.clientX / getAutofitScale()
+      rightClickD.y = event.clientY / getAutofitScale()
 
       // 存储交点信息
       rightClickD.intersection = intersects[0].point

src/stores/modules/system.js

@@ -5,6 +5,7 @@ import { useNotification, useModal, NButton } from 'naive-ui'
 import { h } from 'vue'
 import { useOutsideHomeStore } from './home'
 import AlarmVideo from '../../views/VideoBox/components/AlarmVideo.vue'
+import { getAutofitScale } from '@/utils'
 
 const {
   API_PANORAMA_POST,
@@ -90,7 +91,10 @@ export const useSystemStore = defineStore('systemStore', {
       const pD = document.querySelector('.pub-video')
       const { width, height } = pD.getBoundingClientRect()
 
-      this.ratio = { wR: width / pD.videoWidth, hR: height / pD.videoHeight }
+      this.ratio = {
+        wR: width / pD.videoWidth,
+        hR: height / pD.videoHeight
+      }
     },
     // 连接报警信息
     async connectAlarmWS() {

src/stores/modules/tag.js

@@ -59,9 +59,6 @@ export const useTagStore = defineStore('tag', {
     initTagList() {
       const useSystemStore = useOutsideSystemStore()
       const showTag = this.getTrueTag().filter((item) => item.isShow)
-      const scale = document.body.style.transform.split('(')[2].split(')')[0]
-      console.log(scale)
-      console.log(useSystemStore.ratio)
 
       const tagList = showTag.map((item) => ({
         ...item,

src/utils/index.js

@@ -95,6 +95,8 @@ function getCorrectMousePosition(event, container) {
     y: (event.clientY - containerRect.top) * transform.scaleY
   }
 }
+const getAutofitScale = () => document.body.style.transform.split('(')[2].split(')')[0]
+
 export {
   getStaticResource,
   msg,
@@ -103,5 +105,6 @@ export {
   uuid,
   getContainerTransform,
   getCorrectMousePosition,
-  dialogFn
+  dialogFn,
+  getAutofitScale
 }

src/views/home/middleBottomBox/components/partBox.vue

@@ -1,29 +1,14 @@
 <template>
   <div class="part-box h-full">
     <div class="part-box-wrapper h-full">
-      <UseFullscreen v-slot="{ toggle, isFullscreen }">
-        <div class="tour-video-box screen-full-target h-full flex justify-center items-center">
-          <!-- <template v-if="tourId"> -->
-          <!-- <div class="w-full h-full flex flex-justify-center flex-items-center">
-            <pub-video
-              :newClass="'tour-video' + currentActive"
-              :style="{ maxWidth: '100%', maxHeight: '100%', aspectRatio: 16 / 9 }"
-            />
-          </div> -->
-          <pub-video-new :newClass="'t-video' + currentActive" />
-          <!-- 工具面板 -->
-          <!-- <operation-panel
-          :index="currentActive"
-          z-98
-          :op-class="'tour-video' + currentActive"
-          uuid="uuid"
-        /> -->
-          <!-- </template> -->
+      <UseFullscreen class="h-full" v-slot="{ toggle, isFullscreen }">
+        <div class="part-video-box relative screen-full-target h-full">
+          <pub-video-new :newClass="'p-video' + currentActive" />
           <!-- 操作按钮 -->
-          <div class="tour-main-btn-box" absolute top-10px right-10px flex flex-row-reverse z-999>
+          <div class="part-main-btn-box" absolute top-10px right-10px flex flex-row-reverse z-999>
             <!-- 全屏按钮 -->
             <div
-              class="tour-main-all-screen screen-full-trigger"
+              class="part-main-all-screen screen-full-trigger"
               cursor-pointer
               ml-1
               alt="全屏按钮"
@@ -56,7 +41,10 @@
               @click="closeVideo(currentActive)"
             />
           </div>
-          <div v-if="!playerObj" class="flex flex-justify-center flex-items-center h-full">
+          <div
+            v-if="!playerObj"
+            class="absolute top-0 bottom-0 right-0 left-0 flex flex-justify-center flex-items-center"
+          >
             <span style="animation: fadeIn 0.8s alternate infinite">请双击全景画面</span>
           </div>
           <div
@@ -73,7 +61,7 @@
 <script setup>
   import { NSpin } from 'naive-ui'
   import { useOutsideSystemStore } from '@/stores/modules/system.js'
-  import { uuid } from '@/utils'
+  import { uuid, getAutofitScale } from '@/utils'
   import { omatVideoPlayer } from '@/assets/js/video-lib/flv/omatVideoPlayer'
   import { UseFullscreen } from '@vueuse/components'
 
@@ -86,79 +74,47 @@
   const tourId = ref('')
   const clearCom = inject('clearCom')
   let playerObj = null
-  const videoList = computed(() => useSystem.videoList)
 
-  const tempArr = ref([
-    // {
-    //   x: 158,
-    //   y: 259,
-    //   show: true,
-    //   key: uuid()
-    // },
-    // {
-    //   x: 731,
-    //   y: 374,
-    //   show: false,
-    //   key: uuid()
-    // },
-    // {
-    //   x: 1358,
-    //   y: 444,
-    //   show: false,
-    //   key: uuid()
-    // },
-    // {
-    //   x: 2201,
-    //   y: 642,
-    //   show: false,
-    //   key: uuid()
-    // }
-  ])
   let tempArrI = 0
   let tempArrT = null
   const loading = ref(false)
-  const videoClick = async (item, index) => {
-    if (playerObj) return
-    if (item.id) {
-      closeWorker(index)
+  const videoUrl = computed(() => useSystem.videoUrl)
+  const videoClick = async () => {
+    if (playerObj) {
+      closeWorker()
     }
-    tourId.value = props.data.id
 
-    tempArr.value =
-      props.data?.route.map((path) => ({
-        ...path,
-        z: 0,
-        show: false,
-        key: uuid()
-      })) || []
     nextTick(() => {
-      const url = videoList.value.pano_view.replace('{14}', useSystem.deviceInfo.id)
       loading.value = true
 
       try {
         // await useSystem.getDeviceInfo()
         console.log('websocket请求')
         playerObj = omatVideoPlayer(
-          '.t-video' + props.currentActive,
-          url,
+          '.p-video' + props.currentActive,
+          videoUrl.value,
           () => {
-            const videoDom = document.querySelector('.t-video' + props.currentActive)
-            console.log(videoDom.style.transform)
+            const videoDom = document.querySelector('.p-video' + props.currentActive)
+            console.log(useSystem.partObj)
+            setTimeout(() => {
+              videoDom.style.width = videoDom.videoWidth + 'px'
+              const { width, height } = videoDom.getBoundingClientRect()
+              const { PartCenterY: py, PartCenterX: px } = useSystem.partObj
+              const [x, y] = [
+                px < 237 ? 0 : px > width ? width : px - 237,
+                py < 132 ? 0 : py > height ? height : py - 132
+              ]
+              videoDom.style.transform = `translate(${-x}px, ${-y}px)`
 
-            videoDom.style.transform = `scale(3) translate(${-tempArr.value[tempArrI].x}px, ${-tempArr.value[tempArrI].y}px)`
-            loading.value = false
-            tempArrT = setInterval(() => {
-              if (tempArrI < tempArr.value.length - 1) {
-                ++tempArrI
-              } else {
-                tempArrI = 0
-              }
-              videoDom.style.transform = `scale(3) translate(${-tempArr.value[tempArrI].x}px, ${-tempArr.value[tempArrI].y}px)`
-            }, tempArr.value[tempArrI].duration * 1000)
+              loading.value = false
+            }, 200)
           },
           {
-            enableZoom: false,
-            enableDrag: false
+            enableZoom: false, // 启用缩放
+            enableDrag: false, // 启用拖动
+            minScale: 1, // 最小缩放比例
+            maxScale: 6, // 最大缩放比例
+            dragSpeed: 1.9 // 拖动速度
           }
         )
       } catch (error) {
@@ -173,17 +129,26 @@
   // 关闭线程
   const closeWorker = (index) => {
     if (!playerObj) return
-    clearInterval(tempArrT)
     playerObj?.destroyed()
     playerObj = null
   }
+  const init = () => {
+    videoClick()
+  }
 
-  onMounted(() => {
-    videoClick(props.data, props.currentActive)
-  })
+  watch(
+    () => useSystem.partObj,
+    () => {
+      if (props.currentActive !== useSystem.winActive) return
+      init()
+    },
+    { deep: true }
+  )
 
   onBeforeUnmount(() => {
     closeWorker()
   })
+
+  defineExpose({ init })
 </script>
 <style scoped lang="scss"></style>

src/views/home/middleBottomBox/index.vue

@@ -18,9 +18,13 @@
       <transition name="scaleHide" @after-enter="onAfterEnter">
         <div v-if="show" :class="['part-plan w-full flex justify-between']">
           <div
-            class="w-50% first:mr-2 relative flex flex-col bg-#00000080 overflow-hidden"
             v-for="(part, i) in partList"
             :key="i"
+            :class="[
+              'w-50% first:mr-2 box-border border b-solid relative flex flex-col bg-#00000080 overflow-hidden',
+              useSystem.winActive === i ? ' border-red' : 'border-transparent'
+            ]"
+            @click="useSystem.winActive = i"
           >
             <UWindow :currentActive="i"></UWindow>
           </div>
@@ -33,8 +37,10 @@
 <script setup>
   import { $mitt } from '@/utils'
   import { useOutsideHomeStore } from '@/stores/modules/home'
+  import { useOutsideSystemStore } from '@/stores/modules/system'
 
   const useHomeStore = useOutsideHomeStore()
+  const useSystem = useOutsideSystemStore()
 
   const route = useRoute()
   const show = ref(false)