feat(video): 更换ui框架

src/App.vue

@@ -1,46 +1,51 @@
 <script setup>
   import { RouterView } from 'vue-router'
-  // import {
-  //   NConfigProvider,
-  //   darkTheme,
-  //   NThemeEditor,
-  //   zhCN,
-  //   dateZhCN,
-  //   enUS,
-  //   dateEnUS,
-  // } from "naive-ui";
-  // import { useOutsideSystemStore } from "@/stores/modules/system.js";
+  import { NConfigProvider, darkTheme, zhCN, dateZhCN, enUS, dateEnUS } from 'naive-ui'
+  import { useOutsideSystemStore } from '@/stores/modules/system.js'
 
-  // const useSystem = useOutsideSystemStore();
+  const useSystem = useOutsideSystemStore()
 
-  // const locale = shallowRef(zhCN);
-  // const dateLocale = shallowRef(dateZhCN);
-  // const theme = shallowRef(useSystem.scheme === "dark" ? darkTheme : null);
-  // watch(
-  //   [() => useSystem.language, () => useSystem.scheme],
-  //   ([newL, newS]) => {
-  //     switch (newL) {
-  //       case "zh":
-  //         locale.value = zhCN;
-  //         dateLocale.value = dateZhCN;
-  //         break;
-  //       case "en":
-  //         locale.value = enUS;
-  //         dateLocale.value = dateEnUS;
-  //         break;
-  //     }
-  //     theme.value = newS === "dark" ? darkTheme : null;
-  //   },
-  //   { immediate: true }
-  // );
+  const locale = shallowRef(zhCN)
+  const dateLocale = shallowRef(dateZhCN)
+  const theme = shallowRef(useSystem.scheme === 'dark' ? darkTheme : null)
+  watch(
+    [() => useSystem.language, () => useSystem.scheme],
+    ([newL, newS]) => {
+      switch (newL) {
+        case 'zh':
+          locale.value = zhCN
+          dateLocale.value = dateZhCN
+          break
+        case 'en':
+          locale.value = enUS
+          dateLocale.value = dateEnUS
+          break
+      }
+      theme.value = newS === 'dark' ? darkTheme : null
+    },
+    { immediate: true }
+  )
+
+  /**
+   * js 文件下使用这个做类型提示
+   * @type import('naive-ui').GlobalThemeOverrides
+   */
+  const themeOverrides = {
+    Spin: {
+      color: '#2BABF2'
+    }
+    // ...
+  }
 </script>
 
 <template>
-  <router-view v-slot="{ Component }">
-    <transition name="fade">
-      <component :is="Component" />
-    </transition>
-  </router-view>
+  <n-config-provider class="w-full h-full" :theme="darkTheme" :theme-overrides="themeOverrides">
+    <router-view v-slot="{ Component }">
+      <transition name="fade">
+        <component :is="Component" />
+      </transition>
+    </router-view>
+  </n-config-provider>
 </template>
 
 <style scoped lang="scss">

src/main.js

@@ -2,8 +2,6 @@ import { createApp } from 'vue'
 
 import App from './App.vue'
 import directives from './directives'
-import PrimeVue from 'primevue/config'
-import Nora from '@primevue/themes/nora'
 import { i18n } from '@/locales'
 import { setupStore } from '@/stores'
 import { setupRouter, router } from './router'
@@ -19,11 +17,6 @@ import '@/assets/scss/theme.scss'
 async function bootstrap() {
   const app = createApp(App)
 
-  app.use(PrimeVue, {
-    theme: {
-      preset: Nora
-    }
-  })
   app.use(directives)
   app.use(i18n)
 

src/views/VideoBox/index.vue

@@ -18,25 +18,40 @@
         ></path>
       </svg>
     </div>
-    <!-- <pub-video /> -->
-    <div class="video-box-wrapper mt-10px relative">
-      <video
-        class="video-count object-fill"
-        width="100%"
-        height="550px"
-        autoplay
-        muted
-        playsinline
-        loop
-      >
-        <source src="@/assets/videos/temp.mp4" type="video/mp4" />
+    <div class="video-box-wrapper mt-10px relative bg-#00000080">
+      <UseFullscreen v-slot="{ toggle, isFullscreen }">
+        <div class="relative w-full h-full flex items-center">
+          <pub-video-new class="aspect-ratio-video" @click.right.prevent="rightClickFn" />
+          <!-- 全屏按钮 -->
+          <div
+            class="all-screen popover-screen-full-trigger cursor-pointer z-99 absolute right-8px top-8px"
+          >
+            <Icon
+              icon="icon-park-outline:off-screen"
+              color="#8ac5ff"
+              width="25"
+              height="25"
+              v-if="isFullscreen"
+              @click="toggle"
+            />
+            <Icon
+              icon="iconamoon:screen-full"
+              color="#8ac5ff"
+              width="25"
+              height="25"
+              @click="toggle"
+              v-else
+            />
+          </div>
+          <div
+            v-if="loading"
+            class="absolute top-50% left-50% transform-translate--50% flex justify-center items-center"
+          >
+            <NSpin />
+          </div>
+        </div>
+      </UseFullscreen>
 
-        Download the
-        <a href="/media/cc0-videos/flower.webm">WEBM</a>
-        or
-        <a href="/assets/videos/temp.mp4">MP4</a>
-        video.
-      </video>
       <TagBox
         v-for="(tag, i) in tagList"
         :key="i"
@@ -45,20 +60,29 @@
         :left="tag.x"
         :label="tag.name"
       ></TagBox>
+      <!-- <RightClick :x="xy.x" :y="xy.y" /> -->
     </div>
   </div>
 </template>
 
 <script setup>
-  import useWorker from '@/assets/js/video-lib/omnimatrix-video-player'
-  import TagBox from './components/TagBox.vue'
+  // import useWorker from '@/assets/js/video-lib/omnimatrix-video-player'
+  import { omatVideoPlayer } from '@/assets/js/video-lib/flv/omatVideoPlayer'
+  import TagBox from './components/tagBox.vue'
   import { useOutsideSystemStore } from '@/stores/modules/system.js'
   import { useOutsideHomeStore } from '@/stores/modules/home'
-  import { useRatio } from '@/hooks/useRatio.js'
+  import { UseFullscreen } from '@vueuse/components'
+  import { NSpin } from 'naive-ui'
+  // import { useRatio } from '@/hooks/useRatio.js'
+  import RightClick from './components/rightBox.vue'
 
+  const props = defineProps({
+    id: Number
+  })
+  const { API_MR_VIDEO_LIST_GET } = useRequest()
   const useHomeStore = useOutsideHomeStore()
   const useSystem = useOutsideSystemStore()
-  let workerObj = shallowRef(null)
+  const loading = ref(true)
 
   const tagList = [
     {
@@ -88,14 +112,31 @@
     }
   ]
 
+  let playerObj = null
+
   const init = async () => {
-    useRatio()
-    await useSystem.getDeviceInfo()
-    await useSystem.getVideoUrl(0)
-    console.log('websocket请求')
-    workerObj.value = useWorker(useSystem.videoUrl, '.pub-video', null, () => {
-      useSystem.videoLoading = false
-    })
+    const res = await API_MR_VIDEO_LIST_GET()
+    const url = res.pano_view.replace('{14}', props.id)
+    console.log(url)
+
+    loading.value = true
+    try {
+      // await useSystem.getDeviceInfo()
+      console.log('websocket请求')
+      playerObj = omatVideoPlayer(
+        '.pub-video',
+        url,
+        () => {
+          loading.value = false
+        },
+        {
+          enableZoom: false,
+          enableDrag: false
+        }
+      )
+    } catch (error) {
+      console.log(error)
+    }
   }
 
   const toMap = () => {
@@ -104,10 +145,21 @@
     useHomeStore.temp = 'map'
   }
 
+  const xy = ref({ x: 0, y: 0 })
+  const rightClickFn = (event) => {
+    console.log(event.target.offsetWidth)
+    console.log()
+    const scale = document.body.style.transform.split('(')[1].split(')')[0]
+    const [x, y] = [event.offsetX * parseFloat(scale), event.offsetY * parseFloat(scale)]
+
+    xy.value.x = event.offsetX
+    xy.value.y = event.offsetY
+  }
+
   onMounted(() => {
-    // init()
+    init()
   })
   onUnmounted(() => {
-    useSystem.resetQj(workerObj.value)
+    playerObj?.destroyed()
   })
 </script>

src/views/home/rightbox/topBox.vue

@@ -1,14 +1,7 @@
 <template>
   <div class="right-top-box">
     <div class="flex gap-2 justify-between relative">
-      <ScrollPanel
-        style="width: 40%; height: 230px"
-        :dt="{
-          bar: {
-            background: 'rgba( 44, 95,156, 0.2)'
-          }
-        }"
-      >
+      <NScrollbar style="width: 40%; max-height: 230px">
         <ul class="flex flex-col gap-15px justify-start">
           <li
             :class="[
@@ -22,7 +15,7 @@
             <span class="text-12px">{{ item.name }}</span>
           </li>
         </ul>
-      </ScrollPanel>
+      </NScrollbar>
       <div class="flex-1">
         <ECharts
           id="bjzx-echarts"
@@ -38,6 +31,7 @@
 
 <script setup>
   import { chartOptions } from '@/components/ECharts/optionsConfig'
+  import { NScrollbar } from 'naive-ui'
   const loading = ref(true)
   const fullOptions = ref({ options: {} })