fix🐛: 修复公共组件

src/components/PubUpload.vue

@@ -33,7 +33,7 @@
         <div class="u-upload__tip text-red text-12px mt-7px">上传视频不能超过1GB, 只能上传mp4</div>
       </div>
     </template>
-    <pub-modal v-model:showModal="showModal" title="" class="video-show">
+    <!-- <pub-modal v-model:showModal="showModal" title="" class="video-show">
       <template #modal-slot>
         <img w-full :src="imgUrl" alt="查看图片" v-if="imgUrl" />
         <PubPlayer
@@ -46,15 +46,19 @@
           :autoplay="true"
         />
       </template>
-    </pub-modal>
+    </pub-modal> -->
   </div>
 </template>
 <script setup>
   import { NUpload } from 'naive-ui'
   import { msg } from '@/utils'
+  import { useModal } from 'naive-ui'
+  import PubPlayer from './PubPlayer.vue'
+
   import axios from 'axios'
   const CancelToken = axios.CancelToken
   let source = CancelToken.source()
+  const modal = useModal()
 
   const { API_CREATE_UPLOAD_POST, API_UPLOAD_PART_PUT, API_COMPLETE_PART_POST } = useRequest()
   const baseUrl =
@@ -170,6 +174,7 @@
   const handlePreview = ({ file }, type) => {
     videoUrl.value = ''
     imgUrl.value = ''
+
     switch (type) {
       case 'img':
         imgUrl.value = file.path
@@ -180,6 +185,36 @@
         showModal.value = true
         break
     }
+
+    modal.create({
+      title: '查看',
+      draggable: true,
+      preset: 'card',
+      maskClosable: false,
+      content: () =>
+        /*
+      <img w-full :src="imgUrl" alt="查看图片" v-if="imgUrl" />
+        <PubPlayer
+          v-else
+          ref="pubPlayerRef"
+          id="dplayerShow"
+          w="100%"
+          h="400px"
+          :url="videoUrl"
+          :autoplay="true"
+        />
+      */
+        type === 'video'
+          ? h(PubPlayer, {
+              ref: 'pubPlayerRef',
+              id: 'dplayerShow',
+              w: '100%',
+              h: '400px',
+              url: videoUrl.value,
+              autoplay: true
+            })
+          : ''
+    })
   }
 
   const handleThumbnail = (file, fileInfo) => {

src/components/PubVideoNew.vue

@@ -2,7 +2,7 @@
   <div class="pub-video-box" :style="{ width }" relative overflow-hidden flex>
     <video
       name="videoElement"
-      style="width: 100%; transform-origin: left top; object-fit: fill"
+      style="width: 100%"
       :class="newClass"
       :id="newClass"
       muted

src/components/UniversalWindow/UWindow.vue

@@ -5,10 +5,6 @@
   </div>
 </template>
 <script setup>
-  // import PartBox from '../../views/VideoMonitoring/pages/PanoramicSituation/components/PartBox.vue'
-  // import Glance from '../../views/VideoMonitoring/pages/Glance/Glance.vue'
-  // import AdvancedLinkage from '../../views/VideoMonitoring/pages/AdvancedLinkage/AdvancedLinkage.vue'
-  // import RealTime from '../../views/VideoMonitoring/components/RealTime.vue'
   defineOptions({
     name: 'UWindow'
   })
@@ -17,19 +13,19 @@
   const comData = ref({})
   const onMenuClick = (item) => {
     switch (item.key) {
-      // case 'xjhm':
-      //   comName.value = PartBox
-      //   break
-      // case 'ydjs_list' + item.id:
-      //   comData.value = item
-      //   comName.value = defineAsyncComponent(
-      //     () => import('../../views/VideoMonitoring/pages/Glance/Glance.vue')
-      //   )
-      //   break
+      case 'xjhm':
+        comName.value = defineAsyncComponent(
+          () => import('../../views/Home/middleBottomBox/components/partBox.vue')
+        )
+        break
+      case 'ydjs_list' + item.id:
+        comData.value = item
+        comName.value = defineAsyncComponent(
+          () => import('../../views/Home/middleBottomBox/components/glance.vue')
+        )
+        break
       case 'gjld_list' + item.id:
         comData.value = item
-        console.log(123132);
-
         comName.value = defineAsyncComponent(
           () => import('../../views/Home/middleBottomBox/components/advancedLinkage.vue')
         )
@@ -39,12 +35,12 @@
       //     import('../../views/VideoMonitoring/components/RealTime.vue')
       //   )
       //   break
-      // case 'znxj_list' + item.id:
-      //   comData.value = item
-      //   comName.value = defineAsyncComponent(
-      //     () => import('../../views/VideoMonitoring/pages/Tour/Tour.vue')
-      //   )
-      //   break
+      case 'znxj_list' + item.id:
+        comData.value = item
+        comName.value = defineAsyncComponent(
+          () => import('../../views/Home/middleBottomBox/components/tour.vue')
+        )
+        break
     }
   }
   const uwMenuRef = ref(null)

src/components/UniversalWindow/components/uwMenu.vue

@@ -40,7 +40,7 @@
   import { useOutsideSystemStore } from '@/stores/modules/system.js'
   const useSystem = useOutsideSystemStore()
 
-  const { API_MR_TP_CAMERAS_GET } = useRequest()
+  const { API_MR_TP_CAMERAS_GET, API_TOUR_GET, API_GETALL_BC_GET } = useRequest()
 
   defineOptions({ name: 'uwMenu' })
   const props = defineProps({
@@ -61,15 +61,15 @@
     //   auth: [],
     //   uuid: uuidv4().substring(0, 8)
     // },
-    // {
-    //   label: '一点即视',
-    //   key: 'ydjs',
-    //   icon: 'fluent:cursor-click-24-regular',
-    //   w: '40',
-    //   h: '22',
-    //   auth: ['DomeCamera'],
-    //   uuid: uuidv4().substring(0, 8)
-    // },
+    {
+      label: '一点即视',
+      key: 'ydjs',
+      icon: 'fluent:cursor-click-24-regular',
+      w: '40',
+      h: '22',
+      auth: ['DomeCamera'],
+      uuid: uuidv4().substring(0, 8)
+    },
     {
       label: '高级联动',
       key: 'gjld',
@@ -78,7 +78,7 @@
       h: '18',
       auth: ['Linkage'],
       uuid: uuidv4().substring(0, 8)
-    }
+    },
     // {
     //   label: 'AI告警',
     //   key: 'aigj',
@@ -88,15 +88,15 @@
     //   auth: [],
     //   uuid: uuidv4().substring(0, 8)
     // },
-    // {
-    //   label: '智能巡检',
-    //   key: 'znxj',
-    //   icon: 'mdi:transit-detour',
-    //   w: '40',
-    //   h: '20',
-    //   auth: [],
-    //   uuid: uuidv4().substring(0, 8)
-    // }
+    {
+      label: '智能巡检',
+      key: 'znxj',
+      icon: 'mdi:transit-detour',
+      w: '40',
+      h: '20',
+      auth: [],
+      uuid: uuidv4().substring(0, 8)
+    }
   ])
 
   const menuLog = {}
@@ -122,50 +122,50 @@
     if (item.key === 'gjld') {
       const res = await API_MR_TP_CAMERAS_GET()
       menuLog[level.value] = menuOptions.value
-      menuOptions.value = res.map((item) => {
+      menuOptions.value =
+        res?.map((item) => {
+          return {
+            label: item.Name,
+            key: 'gjld_list' + item.Id,
+            id: item.Id,
+            address: item.Address,
+            icon: 'tabler:device-cctv',
+            w: '40',
+            h: '20',
+            auth: [],
+            uuid: uuidv4()
+          }
+        }) || []
+      level.value = 2
+    } else if (item.key === 'znxj') {
+      const res = await API_TOUR_GET()
+      menuLog[level.value] = menuOptions.value
+      menuOptions.value =
+        res?.map((item) => {
+          return {
+            ...item,
+            label: item.name,
+            key: 'znxj_list' + item.id,
+            id: item.id,
+            auth: [],
+            uuid: uuidv4()
+          }
+        }) || []
+      level.value = 2
+    } else if (item.key === 'ydjs') {
+      const res = await API_GETALL_BC_GET()
+      menuLog[level.value] = menuOptions.value
+      menuOptions.value = Object.keys(res).map((item) => {
         return {
-          label: item.Name,
-          key: 'gjld_list' + item.Id,
-          id: item.Id,
-          address: item.Address,
-          icon: 'tabler:device-cctv',
-          w: '40',
-          h: '20',
+          label: res[item],
+          key: 'ydjs_list' + item,
+          id: item,
           auth: [],
           uuid: uuidv4()
         }
       })
       level.value = 2
-    }
-    // else if (item.key === 'znxj') {
-    //   const res = await API_TOUR_GET()
-    //   menuLog[level.value] = menuOptions.value
-    //   menuOptions.value =
-    //     res?.map((item) => {
-    //       return {
-    //         ...item,
-    //         label: item.name,
-    //         key: 'znxj_list' + item.id,
-    //         id: item.id,
-    //         auth: [],
-    //         uuid: uuidv4()
-    //       }
-    //     }) || []
-    //   level.value = 2
-    // } else if (item.key === 'ydjs') {
-    //   const res = await API_GETALL_BC_GET()
-    //   menuLog[level.value] = menuOptions.value
-    //   menuOptions.value = Object.keys(res).map((item) => {
-    //     return {
-    //       label: res[item],
-    //       key: 'ydjs_list' + item,
-    //       id: item,
-    //       auth: [],
-    //       uuid: uuidv4()
-    //     }
-    //   })
-    //   level.value = 2
-    else {
+    } else {
       if (menuCache.value.key !== item.key) {
         useSystem.menuCom[props.currentActive] = item.key
         emits('onMenuClick', item)
@@ -194,13 +194,15 @@
 
   const reset = () => {
     levelReturn()
-    nextTick(() => {
-      menuClick(menuOptions.value[0])
-      menuCache.value = {}
-      nextTick(() => {
-        comRef.value?.reset()
-      })
-    })
+    useSystem.menuCom = {}
+    menuCache.value = {}
+    // nextTick(() => {
+    //   menuClick(menuOptions.value[0])
+    //   menuCache.value = {}
+    //   nextTick(() => {
+    //     comRef.value?.reset()
+    //   })
+    // })
   }
 
   const closeCollapsed = () => {

src/directives/modules/doubleClick.js

@@ -11,26 +11,17 @@ export default {
   mounted(el) {
     if (['pub-video', 'rpb-video'].includes(el.className)) {
       el.addEventListener('dblclick', (e) => {
+        console.dir(el)
         e.preventDefault()
         // 取消全选
         window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
-        let ratio = e.target.offsetWidth / useSystem.videoArrange.WidthMain
-        if (el.className === 'rpb-video') {
-          ratio = e.target.offsetWidth / useSystem.videoArrange.WidthMainBack
-        }
-        const mouseX = e.offsetX
-        const mouseY = e.offsetY
+        const { left, top } = e.target.getBoundingClientRect()
+        const mouseX = e.clientX - left
+        const mouseY = e.clientY - top
+
         Object.assign(useSystem.partObj, {
-          PartCenterX: `${
-            mouseX / ratio > useSystem.videoArrange.WidthMain
-              ? useSystem.videoArrange.WidthMain
-              : mouseX / ratio
-          }`,
-          PartCenterY: `${
-            mouseY / ratio > useSystem.videoArrange.HeightMain
-              ? useSystem.videoArrange.HeightMain
-              : mouseY / ratio
-          }`
+          PartCenterX: `${mouseX / useSystem.ratio.wR}`,
+          PartCenterY: `${mouseY / useSystem.ratio.hR}`
         })
       })
     } else {

src/layout/index.vue

@@ -32,7 +32,12 @@
       dw: 1920,
       el: 'body',
       resize: true,
-      ignore: ['#map-canvas', '#canvasDom', 'div[class*="v-binder-follower-container"]']
+      ignore: [
+        '#map-canvas',
+        '#canvasDom',
+        'div[class*="v-binder-follower-container"]',
+        '.selector.square'
+      ]
     })
   })
 </script>

src/stores/modules/system.js

@@ -21,6 +21,7 @@ export const useSystemStore = defineStore('systemStore', {
     menuCom: {}, //菜单组件对应存储
     partObj: {}, //细节X Y
     videoList: {}, // 视频地址列表
+    partObj: {}, //细节X Y
     ratio: 0 //全景比例
   }),
   getters: {

src/stores/modules/tag.js

@@ -10,8 +10,8 @@ export const useTagStore = defineStore('tag', {
   actions: {
     async getGroupTag() {
       const { API_GETGROUP_GET, API_TAGLIST_GET } = useRequest()
-      const listGroup = await API_GETGROUP_GET({ type: 'all' })
-      const list = await API_TAGLIST_GET({ type: 'all' })
+      // const listGroup = await API_GETGROUP_GET({ type: 'all' })
+      const list = await API_TAGLIST_GET({ type: 'alltag' })
       const temp = () => {
         return (
           list?.map((item, i) => {
@@ -34,18 +34,18 @@ export const useTagStore = defineStore('tag', {
         )
       }
       this.tagList = temp()
-      listGroup?.forEach((item, i) => {
-        let group = this.tagList.filter((child, ii) => item.GroupId === child.id)
-        if (!group.length) {
-          this.tagList.push({
-            groupName: item.GroupName,
-            id: item.GroupId,
-            uuid: uuid(),
-            children: [],
-            isLeaf: true
-          })
-        }
-      })
+      // listGroup?.forEach((item, i) => {
+      //   let group = this.tagList.filter((child, ii) => item.GroupId === child.id)
+      //   if (!group.length) {
+      //     this.tagList.push({
+      //       groupName: item.GroupName,
+      //       id: item.GroupId,
+      //       uuid: uuid(),
+      //       children: [],
+      //       isLeaf: true
+      //     })
+      //   }
+      // })
       this.cloneTagList = JSON.parse(JSON.stringify(this.tagList))
     },
     getTrueTag() {
@@ -59,6 +59,10 @@ 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,
         X: item.X * useSystemStore.ratio.wR,

src/utils/index.js

@@ -49,4 +49,14 @@ const $mitt = mitt()
 
 const uuid = () => uuidv4().split('-')[0]
 
-export { getStaticResource, msg, modulesHandle, $mitt, uuid }
+// 在 AutoFit.js 初始化后，获取容器的实际变换矩阵
+function getContainerTransform(container) {
+  const style = window.getComputedStyle(container)
+  const transform = style.transform
+  if (transform === 'none') return { scaleX: 1, scaleY: 1 }
+
+  const matrix = new DOMMatrix(transform)
+  return { scaleX: matrix.a, scaleY: matrix.d }
+}
+
+export { getStaticResource, msg, modulesHandle, $mitt, uuid, getContainerTransform }