feat: 完成点云密度选择

public/smart-sviewer.html

@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
         <link rel="icon" type="image/svg+xml" href="//4dkk.4dage.com/FDKKIMG/icon/kankan_icon.ico" />
         <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/ext/iconfont/iconfont.css" />
-        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3693743_qnz6eozqyvk.css" />
+        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3693743_j4ly3fuf3y.css" />
         <script src="<%= VUE_APP_STATIC_DIR %>/ext/mobile-detect.js"></script>
         <script src="<%= VUE_APP_STATIC_DIR %>/ext/base64.min.js"></script>
         <script src="<%= VUE_APP_STATIC_DIR %>/lib/three.js/build/three.min.js"></script>

src/pages/SViewer.vue

@@ -9,7 +9,7 @@
                 <span v-show="showBimTips">BIM</span>
             </div>
         </div>
-        <div class="tools"  v-if="source" v-show="!bimChecked">
+        <div class="tools" v-if="source" v-show="!bimChecked">
             <div class="item-date">
                 <Calendar :value="sourceDate" :highlighted="sourceDays" @selected="onSelected" @prev="onPrevDate" @next="onNextDate" />
             </div>
@@ -17,6 +17,17 @@
                 <div class="iconfont icon-show_roaming" :class="{ active: mode == 0 }" @click="onModeChange(0)"></div>
                 <div class="iconfont icon-show_plane" :class="{ active: mode == 1 }" @click="onModeChange(1)"></div>
             </div>
+            <div class="item-density" v-if="source.type == 2 && mode == 1" @click="showDensity = true">
+                <span>{{ densityType.text }}</span>
+                <div @click.stop="(showDensity = false)" v-if="showDensity">
+                    <ul>
+                        <li class="title">密度选择</li>
+                        <li v-for="density in densityTypes" @click="onDensityChange(density)">
+                            {{ density.text }}<i class="iconfont" :class="{ 'icon-check': density.type == densityType.type }"></i>
+                        </li>
+                    </ul>
+                </div>
+            </div>
         </div>
     </main>
     <Toast v-if="showTips" type="warn" :content="showTips" :close="() => (showTips = null)" />
@@ -28,7 +39,7 @@ import { http } from '@/utils/request'
 import Toast from '@/components/dialog/Toast'
 import browser from '@/utils/browser'
 import Calendar from '@/components/calendar/mobile.vue'
-import sync, {laserChangeMode, loadSourceScene, loadTargetScene , setPanoWithBim} from '@/utils/sync'
+import sync, { laserChangeMode, loadSourceScene, loadTargetScene, setPanoWithBim } from '@/utils/sync'
 const isDev = process.env.VUE_APP_TEST == 1
 // 点位信息
 let lastFakeApp = null
@@ -38,6 +49,7 @@ let panoData
 const showBim = ref(browser.urlHasValue('bim'))
 const showBimTips = ref(false)
 const showTips = ref(null)
+const showDensity = ref(false)
 const bimChecked = ref(null)
 const sourceFrame = ref(null)
 const mode = ref(0)
@@ -45,6 +57,13 @@ const source = ref(null)
 const target = ref(null)
 const project = ref(null)
 
+const densityTypes = ref([
+    { type: 'high', text: '高' },
+    { type: 'middle', text: '中' },
+    { type: 'low', text: '低' },
+])
+
+const densityType = ref(densityTypes.value[0])
 
 const scenes = computed(() => {
     if (!project.value) {
@@ -59,75 +78,63 @@ const scenes = computed(() => {
     })
 })
 const sourceURL = computed(() => {
-      
-    if(lastFakeApp && sourceFrame.value.contentWindow.fakeApp/* && sourceFrame.value && ( sourceFrame.value.contentWindow.app || sourceFrame.value.contentWindow.viewer)*/){//fakeApp代表已经初始化完毕
-         
-        sync.views.fakeAppUpdateInfo(sourceFrame.value.contentWindow)  
+    if (lastFakeApp && sourceFrame.value.contentWindow.fakeApp /* && sourceFrame.value && ( sourceFrame.value.contentWindow.app || sourceFrame.value.contentWindow.viewer)*/) {
+        //fakeApp代表已经初始化完毕
+
+        sync.views.fakeAppUpdateInfo(sourceFrame.value.contentWindow)
     }
-    if(bimChecked.value){
+    if (bimChecked.value) {
         return `smart-bim.html?m=${project.value.bimData.bimOssFilePath}`
     }
-    if(!source.value){
+    if (!source.value) {
         return
     }
-    if(source.value.type < 2) {
+    if (source.value.type < 2) {
         return `smart-kankan.html?m=${source.value.num}`
     } else {
-        return `smart-laser.html?m=${source.value.num}${isDev?'&dev':''}`
+        return `smart-laser.html?m=${source.value.num}${isDev ? '&dev' : ''}`
     }
 })
 
-const onLoadSource = () => { 
-    let win = sourceFrame.value.contentWindow 
-        window.app = win
-        
-    let loaded = ()=>{
+const onLoadSource = () => {
+    let win = sourceFrame.value.contentWindow
+    window.app = win
+
+    let loaded = () => {
         if (lastFakeApp) {
-            if(bimChecked.value || lastFakeApp.sceneType == 'bim'){//->bim   也可能是bim和bim转，当快速点击按钮，其他类型的没加载好就跳回bim 
-                sync.views.bindFakeWithBim(lastFakeApp, win, panoData) 
-            }else{
-                sync.views.bindWithSameFakeType(lastFakeApp,win) 
+            if (bimChecked.value || lastFakeApp.sceneType == 'bim') {
+                //->bim   也可能是bim和bim转，当快速点击按钮，其他类型的没加载好就跳回bim
+                sync.views.bindFakeWithBim(lastFakeApp, win, panoData)
+            } else {
+                sync.views.bindWithSameFakeType(lastFakeApp, win)
             }
-            
-              
         }
-        if(project.value.sceneList.length) {
-            lastFakeApp = sync.views.createFakeApp(sourceFrame.value.contentWindow);  
+        if (project.value.sceneList.length) {
+            lastFakeApp = sync.views.createFakeApp(sourceFrame.value.contentWindow)
         }
-    } 
+    }
 
- 
-     
-    if(bimChecked.value){//bim
+    if (bimChecked.value) {
+        //bim
         win.sceneType = 'bim'
-        win.loaded.then(sdk => { 
-            loaded() 
-        }) 
-    }else if (source.value.type < 2) { 
+        win.loaded.then(sdk => {
+            loaded()
+        })
+    } else if (source.value.type < 2) {
         win.sceneType = 'kankan'
-        let sdk = win.app 
+        let sdk = win.app
         sdk.Scene.on('loaded', () => {
-            loaded() 
-        })  
-    }else{ 
-        win.sceneType = 'laser' 
-        win.loaded.then(sdk => { 
+            loaded()
+        })
+    } else {
+        win.sceneType = 'laser'
+        win.loaded.then(sdk => {
             sync.views.laserInit(win, mode.value)
-            loaded();
-            
-            
-         }) 
+            loaded()
+        })
     }
-     
-     
 }
 
-
-
-
-
-
-
 const sourceDate = computed(() => {
     if (source.value) {
         return source.value.createTime.toDate()
@@ -157,8 +164,6 @@ const sourceDays = computed(() => {
     return outDays
 })
 
-
-
 const onModeChange = targetMode => {
     if (sourceFrame.value && sourceFrame.value.contentWindow.loaded) {
         sourceFrame.value.contentWindow.loaded.then(sdk => sdk.scene.changeMode(targetMode))
@@ -167,6 +172,18 @@ const onModeChange = targetMode => {
     }
 }
 
+const onDensityChange = density => {
+    if (sourceFrame.value && sourceFrame.value.contentWindow.loaded) {
+        sourceFrame.value &&
+            sourceFrame.value.contentWindow.loaded.then(sdk => {
+                let data = sdk.scene.changePointDensity(density.type)
+                sdk.scene.changeDensityPercent(data.percent)
+            })
+        densityType.value = density
+    }
+    showDensity.value = false
+}
+
 const onSelected = data => {
     if (!data.payload) {
         return
@@ -237,19 +254,18 @@ onMounted(() => {
                     if (num) {
                         source.value = project.value.sceneList.find(c => c.num == num)
                     } else {
-                        source.value = project.value.sceneList[project.value.sceneList.length-1]
+                        source.value = project.value.sceneList[project.value.sceneList.length - 1]
                     }
                     if (!source.value) {
-                        return  showTips.value = '当前场景已被删除，无法进行查看'
+                        return (showTips.value = '当前场景已被删除，无法进行查看')
                     }
                 } else {
-                        return  showTips.value = '当前场景已被删除，无法进行查看'
+                    return (showTips.value = '当前场景已被删除，无法进行查看')
                 }
-                if(response.data.panos){
+                if (response.data.panos) {
                     response.data.panos = JSON.parse(response.data.panos)
-                    panoData = response.data.panos  //convert with bim
+                    panoData = response.data.panos //convert with bim
                 }
-                
             } else {
                 showTips.value = response.message
             }
@@ -306,6 +322,62 @@ main {
                 color: #0076f6;
             }
         }
+
+        .item-density {
+            position: relative;
+            cursor: pointer;
+            height: 50px;
+            width: 50px;
+            background: rgba(27, 27, 28, 0.8);
+            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+            border-radius: 50%;
+            border: 1px solid #000000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: 10px;
+            margin-right: 10px;
+            font-size: 16px;
+            padding: 0 16px;
+            > div {
+                position: fixed;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                height: 100vh;
+                z-index: 1000;
+                background: rgba(0, 0, 0, 0.5);
+                display: flex;
+                align-items: flex-end;
+                justify-content: center;
+            }
+            ul {
+                width: 100%;
+                padding-bottom: 20px;
+                border-radius: 12px;
+                background: rgba(27, 27, 28, 0.8);
+                box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+                border: 1px solid #000000;
+                list-style: none;
+                .title {
+                    justify-content: center;
+                    font-weight: 500;
+                    padding: 20px 0;
+                    border-bottom: solid 1px rgba(255, 255, 255, 0.1);
+                }
+                li {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 25px 20px;
+                    font-size: 18px;
+                    i {
+                        color: #0076f6;
+                        font-size: 20px;
+                    }
+                }
+            }
+        }
     }
 
     .model {

src/pages/Viewer.vue

@@ -273,7 +273,10 @@ const onModeChange = targetMode => {
 
 const onDensityChange = (density)=>{
     if (sync.sourceInst) {
-        sync.sourceInst.loaded.then(sdk => sdk.scene.changePointDensity(density.type))
+        sync.sourceInst.loaded.then(sdk => {
+            let data = sdk.scene.changePointDensity(density.type)
+            sdk.scene.changeDensityPercent(data.percent)
+        })
         densityType.value = density
     }
 }