Accueil Explorer Aide
S'inscrire Connexion
tangning
/
SichuanDaily
1
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

feat: .

rindy il y a 9 mois
Parent
cd589967e9
commit
6bcf975f9f
8 fichiers modifiés avec 120 ajouts et 70 suppressions
Vue séparée Afficher les stats Diff
  1. 0 2
      index.html
  2. 5 0
      scene.json
  3. 15 12
      src/App.vue
  4. 16 27
      src/sdk.js
  5. 20 3
      src/store/main.ts
  6. 37 14
      src/views/basicSettings/index.vue
  7. 14 8
      src/views/topicNavigation/index.vue
  8. 13 4
      vite.config.ts

+ 0 - 2
index.html
Voir le fichier 

@@ -8,8 +8,6 @@
 
   </head>
 
   <body>
 
     <div id="app"></div>
 
-    <script src="https://vr-test.scdjw.com.cn/sdk/kankan-sdk-deps.js"></script>
 
-    <script src="https://vr-test.scdjw.com.cn/sdk/kankan-sdk.js"></script>
 
     <script type="module" src="/src/main.ts"></script>
 
   </body>
 
 </html>

+ 5 - 0
scene.json
Voir le fichier 

@@ -0,0 +1,5 @@
 
+{
 
+  "scrb": {
 
+    
+  }
 
+}

+ 15 - 12
src/App.vue
Voir le fichier 

@@ -42,7 +42,9 @@
 
               class="app-scene"
 
               ref="sceneRef"
 
               :style="{ width: sceneRefWidth, opacity: showScene ? 0 : 1 }"
 
-            ></div>
 
+            >
 
+            <iframe v-if="sceneURL" :src="sceneURL" frameborder="0" :style="sceneMobileMode && {width:'375px',height:'677px'}" @load="setupSDK($event.target)"></iframe>
 
+          </div>
 
           </div>
 
           <div class="app-view pointer-events-none" id="drawer-target">
 
             <n-message-provider>
 
@@ -58,7 +60,7 @@
 
 </template>
 
 
 <script setup lang="ts">
 
-import { useSDK } from '@/sdk'
 
+import { setupSDK } from '@/sdk'
 
 import {
 
   darkTheme,
 
   lightTheme,
 
@@ -113,9 +115,12 @@ const sceneRefWidth = computed(() => {
 
   return `calc(100% - ${mode.sceneRefWidth}px)`
 
 })
 
 
+const sceneURL = computed(()=>main.sceneURL)
 
+const sceneMobileMode = computed(()=>main.sceneMode == 'mobile')
 
+
 
 const sceneRef = ref()
 
 const main = useMainStore()
 
-const { setSceneRef } = main
 
+const { setSceneLink,setSceneRef } = main
 
 watchEffect(() => {
 
   localStorage.setItem('dark', `${mode.value}`)
 
 })
 
@@ -213,13 +218,8 @@ const menuOptions = [
 
 const handleUpdateValue = (value: string) => {
 
   console.log(value)
 
 }
 
-
 
-const sdk = useSDK()
 
-sdk.use('MinMap')
 
-
 
 onMounted(() => {
 
-  sdk.mount(sceneRef.value)
 
-  sdk.render()
 
+  setSceneLink('/page/spg.html?m=KJ-t-9xlMZ5ZVCfR')
 
   setSceneRef(sceneRef.value)
 
 })
 
 </script>
 
@@ -248,10 +248,13 @@ onMounted(() => {
 
 .app-scene
 
   width: 100%
 
   height: 100%
 
+  display: flex
 
+  align-items: flex-start
 
+  justify-content: center
 
 
-[xui_min_map]
 
-  right: 10px
 
-  top: 10px
 
+.app-scene iframe
 
+  width: 100%
 
+  height: 100%
 
 .required
 
   padding-left: 10px
 
   position: relative

+ 16 - 27
src/sdk.js
Voir le fichier 

@@ -1,33 +1,22 @@
 
-let config = {
 
-    server: '',//'https://vr-test.scdjw.com.cn/',
 
-    resource: 'https://djqk-vr.obsv3.scrb-cd-1.sichuandaily.com.cn/',
 
-   // edition: 'v2',
 
-    view: false,// 开启编辑模式
 
-    useAuth: false // 开启鉴权模式
 
-}
 
 
 let __sdk = null
 
-let setup = null
 
 
-export function useSDK() {
 
-    if (__sdk === null) {
 
-        let sps = new URLSearchParams(location.search.substring(1))
 
-        let num = sps.get('m')
 
-        if (num) {
 
-            config.num = num
 
-        } else {
 
-            config.num = 'KJ-t-3Y6dxgyehDk'
 
-        }
 
-        __sdk = window.__sdk = new window.KanKan(config)
 
-        setup && setup(__sdk)
 
-    }
 
-    return __sdk
 
+const withResolvers = function () {
 
+    let resolve 
+    let reject
 
+    const promise = new Promise((res, rej) => {
 
+        resolve = res
 
+        reject = rej
 
+    })
 
+    return { promise, resolve, reject }
 
 }
 
 
-export function useSDKSetup(options) {
 
-    if (typeof options.setup === 'function') {
 
-        setup = options.setup
 
-        delete options.setup
 
-    }
 
-    Object.assign(config, options || {})
 
+const { promise, resolve, reject } = withResolvers()
 
+
 
+export const sdk = promise
 
+
 
+export function setupSDK(iframe) {
 
+    __sdk = iframe.contentWindow.__sdk
 
+    // @ts-ignore
 
+    resolve(__sdk)
 
 }

+ 20 - 3
src/store/main.ts
Voir le fichier 

@@ -11,10 +11,13 @@ export const useMainStore = defineStore('main', {
 
       sceneRef: null,
 
       sceneRefWidth: 0,
 
       digitalHumanList: [],
 
+      sceneLink: '',
 
+      sceneMode: 'pc',
 
+      sceneConfig: {},
 
       basicConfig: {
 
-        view: true,//true pc false mobile
 
-        theme: 0,
 
-        panorama: false, //true 自动播放 
+        mode: 'pc',//true pc false mobile
 
+        themes: '',
 
+        autoRotate: false, //true 自动播放 
         lever: false, //true 显示
 
         leverPosition: 'left', //left right center 
         age: 18
 
@@ -23,6 +26,11 @@ export const useMainStore = defineStore('main', {
 
     }
 
   },
 
   getters: {
 
+    sceneURL: ({sceneLink,sceneConfig,sceneMode})=> {
 
+      if(sceneLink){
 
+        return sceneLink+`&mobile=${sceneMode == 'mobile' ? 'true' : 'false'}&config=`+JSON.stringify(sceneConfig || {})
 
+      }
 
+    },
 
     count: ({ counter }) => counter,
 
     getBasicConfig: ({ basicConfig }) => basicConfig,
 
     getDigitalHumanList: ({ digitalHumanList }) => digitalHumanList,
 
@@ -37,5 +45,14 @@ export const useMainStore = defineStore('main', {
 
     setWidthSceneRef(width: number) {
 
       this.sceneRef.style.width = `calc(100% - ${width||0}px)`
 
     },
 
+    setSceneLink(link:string) {
 
+      this.sceneLink = link
 
+    },
 
+    setSceneMode(mode:string) {
 
+      this.sceneMode = mode
 
+    },
 
+    setSceneConfig(config:object) {
 
+      this.sceneConfig = {...this.sceneConfig,...config}
 
+    }
 
   }
 
 })

+ 37 - 14
src/views/basicSettings/index.vue
Voir le fichier 

@@ -1,7 +1,6 @@
 
 <template>
 
-  <div class="pointer-events-auto">
 
-  <div @click="changeActive">基础设置页面{{ active }}</div>
 
-  <!-- 基础设置页面 -->
 
+  <div class="base-setting">
 
+    <!-- 基础设置页面 -->
 
     <n-drawer
 
       v-model:show="active"
 
       :width="240"
 
@@ -15,21 +14,21 @@
 
         <div class="drawerContent m-5">
 
           <div class="text-lg my-2.5" @click="active = false">基础设置</div>
 
           <n-radio-group
 
-            v-model:value="basicConfig.view"
 
+            v-model:value="basicConfig.mode"
 
             name="radiobuttongroup1"
 
           >
 
-            <n-radio-button :value="true" label="pc端" />
 
-            <n-radio-button :value="false" label="移动端" />
 
+            <n-radio-button value="pc" label="pc端" />
 
+            <n-radio-button value="mobile" label="移动端" />
 
           </n-radio-group>
 
           <div class="text-sm my-2.5" @click="changeActive">展示页面风格</div>
 
           <n-select
 
-            v-model:value="basicConfig.theme"
 
+            v-model:value="basicConfig.themes"
 
             placeholder="选择主题"
 
             :options="options"
 
           />
 
           <div class="flex justify-between my-2.5">
 
             <span>全景图自动播放</span>
 
-            <n-switch v-model:value="basicConfig.panorama" />
 
+            <n-switch v-model:value="basicConfig.autoRotate" />
 
           </div>
 
           <div class="flex justify-between my-2.5">
 
             <span>操纵杆</span>
 
@@ -55,32 +54,57 @@
 
 <script setup lang="ts">
 
 import { ref, watch, computed, onMounted } from 'vue'
 
 import { useMainStore } from '@/store'
 
+import { sdk } from '@/sdk'
 
 // import { useMessage } from 'naive-ui'
 
 defineProps<{ msg: string }>()
 
+
 
 const main = useMainStore()
 
 const { setWidthSceneRef } = main
 
 const active = ref(true)
 
+
 
 const basicConfig = computed(() => {
 
   return main.basicConfig
 
 })
 
+
 
 // const message = useMessage()
 
 const fileList = ref([])
 
 const options = [
 
   {
 
     label: '默认',
 
-    value: 0
 
+    value: ''
 
   },
 
   {
 
     label: '科技感',
 
-    value: 1
 
+    value: 'ThemesTechnology'
 
   },
 
   {
 
     label: '红色元素',
 
-    value: 2
 
+    value: 'ThemesParty'
 
+  },
 
+  {
 
+    label: '博物馆',
 
+    value: 'ThemesMuseum'
 
   }
 
 ]
 
 
 watch(
 
+  () => basicConfig.value.autoRotate,
 
+  (val) => {
 
+    sdk.then(sdk=>{
 
+      sdk.Camera.autoRotate(val)
 
+    })
 
+  }
 
+)
 
+
 
+watch(()=>basicConfig.value.mode,(val)=>{
 
+  main.setSceneMode(val)
 
+})
 
+
 
+watch(()=>basicConfig.value.themes,(val)=>{
 
+  main.setSceneConfig({themes:val})
 
+})
 
+
 
+watch(
 
   active,
 
   (newValue) => {
 
     // setWidthSceneRef(newValue ? 240 : 0)
 
@@ -97,11 +121,10 @@ function handleChange(file, event) {
 
 }
 
 function changeActive() {
 
   console.log('changeActive', active.value)
 
-  active.value = active.value?false:true
 
+  active.value = active.value ? false : true
 
   console.log('changeActive', active.value)
 
-
 
 }
 
-onMounted(()=>{
 
+onMounted(() => {
 
   // active.value = true
 
 })
 
 </script>

+ 14 - 8
src/views/topicNavigation/index.vue
Voir le fichier 

@@ -75,26 +75,32 @@
 
 
 <script setup lang="ts">
 
 import { ref } from 'vue'
 
-import { useSDK } from '@/sdk'
 
+import { sdk } from '@/sdk'
 
 import { onMounted, onUnmounted } from 'vue'
 
 import { NRadio, NPopover, useDialog, useMessage } from 'naive-ui'
 
 import { WalkSharp, TrashOutline, EllipsisHorizontal } from '@vicons/ionicons5'
 
-const sdk = useSDK()
 
+
 
 const panos = ref([])
 
 
-sdk.PanoCheckManager.on('changed', (list: any) => {
 
-  panos.value = list
 
-  console.log(panos.value)
 
+sdk.then((sdk) => {
 
+  sdk.PanoCheckManager.on('changed', (list: any) => {
 
+    panos.value = list
 
+    console.log(panos.value)
 
+  })
 
 })
 
 
 onMounted(() => {
 
-  sdk.Scene.whenLoaded(() => {
 
-    sdk.PanoCheckManager.enter()
 
+  sdk.then((sdk) => {
 
+    sdk.Scene.whenLoaded(() => {
 
+      sdk.PanoCheckManager.enter()
 
+    })
 
   })
 
 })
 
 
 onUnmounted(() => {
 
-  sdk.PanoCheckManager.leave()
 
+  sdk.then((sdk) => {
 
+    sdk.PanoCheckManager.leave()
 
+  })
 
 })
 
 
 defineProps<{ msg: string }>()

+ 13 - 4
vite.config.ts
Voir le fichier 

@@ -45,13 +45,22 @@ export default defineConfig(({ mode }) => ({
 
   server: {
 
     port: 3000,
 
     proxy: {
 
+      // '/service': {
 
+      //   target: 'https://vr-test.scdjw.com.cn',
 
+      //   changeOrigin: true
 
+      // },
 
+      // '/scene_view_data': {
 
+      //   target: 'https://djqk-vr.obsv3.scrb-cd-1.sichuandaily.com.cn',
 
+      //   changeOrigin: true
 
+      // },
 
       '/service': {
 
-        target: 'https://vr-test.scdjw.com.cn',
 
+        target: 'http://192.168.0.30:8081',
 
         changeOrigin: true
 
       },
 
-      '/scene_view_data': {
 
-        target: 'https://djqk-vr.obsv3.scrb-cd-1.sichuandaily.com.cn',
 
-        changeOrigin: true
 
+      '/page': {
 
+        target: 'http://192.168.0.30:8081',
 
+        changeOrigin: false,
 
+        rewrite: (path) => path.replace(/^\/page/, '')
 
       }
 
     }
 
   }