|
|
@@ -6,12 +6,29 @@
|
|
|
<iframe ref="sourceFrame" v-if="sourceURL" :src="sourceURL" frameborder="0" @load="onLoadSource"></iframe>
|
|
|
<div class="tools" v-if="source" v-show="!showAdjust && !fscChecked && (dbsChecked || (!target && !bimChecked))">
|
|
|
<div class="item-date">
|
|
|
- <calendar name="source" :count="scenes.length" :controls="controls" :value="sourceDate" :highlighted="sourceDays" @selected="onSelected" @pick="onPickDate" @prev="onPrevDate" @next="onNextDate"></calendar>
|
|
|
+ <calendar
|
|
|
+ name="source"
|
|
|
+ :count="scenes.length"
|
|
|
+ :controls="controls"
|
|
|
+ :value="sourceDate"
|
|
|
+ :highlighted="sourceDays"
|
|
|
+ @selected="onSelected"
|
|
|
+ @pick="onPickDate"
|
|
|
+ @prev="onPrevDate"
|
|
|
+ @next="onNextDate"
|
|
|
+ ></calendar>
|
|
|
</div>
|
|
|
<div class="item-mode" v-if="source.type == 2">
|
|
|
<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)" :class="{active:showDensity}" @click="showDensity=!showDensity">
|
|
|
+ <span>{{densityType.text}}</span>
|
|
|
+ <i class="iconfont icon-arrows_down"></i>
|
|
|
+ <ul>
|
|
|
+ <li v-for="density in densityTypes" @click="onDensityChange(density)">{{density.text}}</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="points" v-if="showAdjust">
|
|
|
<div :class="{ active: points.p1 }" @click="onP1Click('left')">
|
|
|
@@ -28,12 +45,22 @@
|
|
|
<iframe ref="targetFrame" :src="targetURL" frameborder="0" @load="onLoadTarget"></iframe>
|
|
|
<div class="tools" v-show="!fscChecked && !bimChecked">
|
|
|
<div class="item-date target">
|
|
|
- <calendar name="target" :count="scenes.length" :controls="controls" :value="targetDate" :highlighted="targetDays" @selected="onSelected" @pick="onPickDate" @prev="onPrevDate" @next="onNextDate"></calendar>
|
|
|
+ <calendar
|
|
|
+ name="target"
|
|
|
+ :count="scenes.length"
|
|
|
+ :controls="controls"
|
|
|
+ :value="targetDate"
|
|
|
+ :highlighted="targetDays"
|
|
|
+ @selected="onSelected"
|
|
|
+ @pick="onPickDate"
|
|
|
+ @prev="onPrevDate"
|
|
|
+ @next="onNextDate"
|
|
|
+ ></calendar>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="points" v-if="showAdjust">
|
|
|
<div :class="{ active: points.p1 }" @click="onP1Click('right')">
|
|
|
- <i class="iconfont" :class="[points.p1 ? 'icon-positioning01' : 'icon-positioning02']"></i>
|
|
|
+ <i class="iconfont" :class="[points.p1 ? 'icon-positioning01' : 'icon-positioning02']"></i>
|
|
|
<span>P1</span>
|
|
|
</div>
|
|
|
<div :class="{ active: points.p2 }" @click="onP2Click('right')">
|
|
|
@@ -43,13 +70,13 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="model" v-show="!showAdjust">
|
|
|
- <div class="bim" :class="{ active: bimChecked, disable: bimDisable }" v-show="!fscChecked && !showBim">
|
|
|
+ <div class="bim" :class="{ active: bimChecked, disable: bimDisable }" v-show="!fscChecked && !showBim">
|
|
|
<div @click="onBimChecked">
|
|
|
<i class="iconfont icon-BIM"></i>
|
|
|
<span>BIM</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="dbs" :class="{ active: dbsChecked, disable: dbsDisable }" v-show="!fscChecked && !showBim">
|
|
|
+ <div class="dbs" :class="{ active: dbsChecked, disable: dbsDisable }" v-show="!fscChecked && !showBim">
|
|
|
<div @click="onDbsChecked">
|
|
|
<i class="iconfont icon-split_screen"></i>
|
|
|
<span>分屏</span>
|
|
|
@@ -72,7 +99,7 @@ import browser from '@/utils/browser'
|
|
|
import Toast from '@/components/dialog/Toast'
|
|
|
import AppHeader from '@/components/header'
|
|
|
import Calendar from '@/components/calendar'
|
|
|
-import sync, { laserChangeMode, beforeChangeURL, loadSourceScene, loadTargetScene, setPanoWithBim, flyToP1P2} from '@/utils/sync'
|
|
|
+import sync, { laserChangeMode, beforeChangeURL, loadSourceScene, loadTargetScene, setPanoWithBim, flyToP1P2 } from '@/utils/sync'
|
|
|
const isDev = process.env.VUE_APP_TEST == 1
|
|
|
// 是否BIM模式
|
|
|
const showBim = ref(browser.urlHasValue('bim'))
|
|
|
@@ -95,8 +122,18 @@ const target = ref(null)
|
|
|
const project = ref(null)
|
|
|
const points = ref({ p1: null, p2: null })
|
|
|
|
|
|
+const densityTypes = ref([
|
|
|
+ {type:'high',text:'高'},
|
|
|
+ {type:'middle',text:'中'},
|
|
|
+ {type:'low',text:'低'}
|
|
|
+])
|
|
|
+
|
|
|
+const densityType = ref(densityTypes.value[0])
|
|
|
+
|
|
|
const showTips = ref(null)
|
|
|
|
|
|
+const showDensity = ref(false)
|
|
|
+
|
|
|
const scenes = computed(() => {
|
|
|
if (!project.value) {
|
|
|
return []
|
|
|
@@ -109,30 +146,29 @@ const scenes = computed(() => {
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
-const controls = computed(()=>{
|
|
|
- if(bimChecked.value){
|
|
|
- return scenes.value.length>1
|
|
|
+const controls = computed(() => {
|
|
|
+ if (bimChecked.value) {
|
|
|
+ return scenes.value.length > 1
|
|
|
}
|
|
|
- return dbsChecked.value? scenes.value.length>2: scenes.value.length>1
|
|
|
+ return dbsChecked.value ? scenes.value.length > 2 : scenes.value.length > 1
|
|
|
})
|
|
|
const sourceURL = computed(() => {
|
|
|
-
|
|
|
- beforeChangeURL('source' )
|
|
|
+ beforeChangeURL('source')
|
|
|
|
|
|
if (bimChecked.value && !dbsChecked.value) {
|
|
|
return `smart-bim.html?m=${project.value.bimData.bimOssFilePath}`
|
|
|
}
|
|
|
-
|
|
|
- if(!source.value){
|
|
|
+
|
|
|
+ if (!source.value) {
|
|
|
return
|
|
|
}
|
|
|
|
|
|
if (source.value.type < 2) {
|
|
|
// 看看、看见场景
|
|
|
- return `smart-kankan.html?m=${source.value.num}${isDev?'&dev':''}`
|
|
|
+ return `smart-kankan.html?m=${source.value.num}${isDev ? '&dev' : ''}`
|
|
|
} else {
|
|
|
// 深时场景
|
|
|
- return `smart-laser.html?m=${source.value.num}${isDev?'&dev':''}`
|
|
|
+ return `smart-laser.html?m=${source.value.num}${isDev ? '&dev' : ''}`
|
|
|
}
|
|
|
})
|
|
|
const targetURL = computed(() => {
|
|
|
@@ -142,10 +178,10 @@ const targetURL = computed(() => {
|
|
|
|
|
|
if (source.value.type < 2) {
|
|
|
// 看看、看见场景
|
|
|
- return `smart-kankan.html?m=${target.value.num}${isDev?'&dev':''}`
|
|
|
+ return `smart-kankan.html?m=${target.value.num}${isDev ? '&dev' : ''}`
|
|
|
} else {
|
|
|
// 深时场景
|
|
|
- return `smart-laser.html?m=${target.value.num}${isDev?'&dev':''}`
|
|
|
+ return `smart-laser.html?m=${target.value.num}${isDev ? '&dev' : ''}`
|
|
|
}
|
|
|
})
|
|
|
const sourceDate = computed(() => {
|
|
|
@@ -193,17 +229,19 @@ const targetDays = computed(() => {
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-const bimDisable = computed(()=>{
|
|
|
- if(!project.value || !project.value.bimData){
|
|
|
+const bimDisable = computed(() => {
|
|
|
+ if (!project.value || !project.value.bimData) {
|
|
|
return true
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-const dbsDisable = computed(()=>{
|
|
|
- if(scenes.value.length == 0){ // 没有场景的情况
|
|
|
+const dbsDisable = computed(() => {
|
|
|
+ if (scenes.value.length == 0) {
|
|
|
+ // 没有场景的情况
|
|
|
return 1
|
|
|
}
|
|
|
- if(!bimChecked.value && scenes.value.length == 1){ // 只有1个场景的情况
|
|
|
+ if (!bimChecked.value && scenes.value.length == 1) {
|
|
|
+ // 只有1个场景的情况
|
|
|
return 2
|
|
|
}
|
|
|
})
|
|
|
@@ -232,6 +270,17 @@ const onModeChange = targetMode => {
|
|
|
sync.views.laserChangeMode(mode.value)
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+const onDensityChange = (density)=>{
|
|
|
+ if (sync.sourceInst) {
|
|
|
+ sync.sourceInst.loaded.then(sdk => {
|
|
|
+ let data = sdk.scene.changePointDensity(density.type)
|
|
|
+ sdk.scene.changeDensityPercent(data.percent)
|
|
|
+ })
|
|
|
+ densityType.value = density
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
const onPickDate = name => {
|
|
|
datepickName.value = name
|
|
|
}
|
|
|
@@ -258,7 +307,7 @@ const onSelected = data => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- } else{
|
|
|
+ } else {
|
|
|
showTips.value = '选择日期未上传场景'
|
|
|
}
|
|
|
|
|
|
@@ -333,10 +382,12 @@ const onNextDate = name => {
|
|
|
scene.value = scenes.value[index]
|
|
|
}
|
|
|
|
|
|
+
|
|
|
+
|
|
|
// bim点击
|
|
|
const onBimChecked = () => {
|
|
|
if (bimDisable.value) {
|
|
|
- return showTips.value = '未发现BIM文件'
|
|
|
+ return (showTips.value = '未发现BIM文件')
|
|
|
}
|
|
|
if (bimChecked.value) {
|
|
|
bimChecked.value = false
|
|
|
@@ -364,14 +415,14 @@ const onBimChecked = () => {
|
|
|
|
|
|
// 分屏点击
|
|
|
const onDbsChecked = () => {
|
|
|
- if(dbsDisable.value && !dbsChecked.value){
|
|
|
- return showTips.value = '未发现对比场景'
|
|
|
+ if (dbsDisable.value && !dbsChecked.value) {
|
|
|
+ return (showTips.value = '未发现对比场景')
|
|
|
}
|
|
|
dbsChecked.value = !dbsChecked.value
|
|
|
if (dbsChecked.value) {
|
|
|
if (bimChecked.value) {
|
|
|
// BIM分屏
|
|
|
- source.value = scenes.value[scenes.value.length-1]
|
|
|
+ source.value = scenes.value[scenes.value.length - 1]
|
|
|
target.value = project.value.bimData
|
|
|
} else {
|
|
|
// 四维看看、激光场景分屏
|
|
|
@@ -418,29 +469,28 @@ const onFscChecked = () => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const onPointsUpdate = (type,data) => {
|
|
|
+const onPointsUpdate = (type, data) => {
|
|
|
points.value[type] = data
|
|
|
}
|
|
|
|
|
|
-const onP1Click = (type) =>{
|
|
|
- if(!points.value.p1){
|
|
|
+const onP1Click = type => {
|
|
|
+ if (!points.value.p1) {
|
|
|
showTips.value = '您还未选择关联位置'
|
|
|
return
|
|
|
}
|
|
|
console.log(points.value.p1)
|
|
|
// todo 定位
|
|
|
-
|
|
|
+
|
|
|
flyToP1P2(points.value.p1)
|
|
|
-
|
|
|
}
|
|
|
|
|
|
-const onP2Click = (type) =>{
|
|
|
- if(!points.value.p2){
|
|
|
+const onP2Click = type => {
|
|
|
+ if (!points.value.p2) {
|
|
|
showTips.value = '您还未选择关联位置'
|
|
|
return
|
|
|
}
|
|
|
// todo 定位
|
|
|
-
|
|
|
+
|
|
|
flyToP1P2(points.value.p2)
|
|
|
}
|
|
|
|
|
|
@@ -458,31 +508,28 @@ onMounted(() => {
|
|
|
points.value.p1 = response.data.panos.p1
|
|
|
points.value.p2 = response.data.panos.p2
|
|
|
setPanoWithBim(response.data.panos)
|
|
|
-
|
|
|
} catch (error) {
|
|
|
console.error(error)
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
project.value = response.data
|
|
|
if (showBim.value) {
|
|
|
onBimChecked()
|
|
|
- }
|
|
|
- else if (project.value.sceneList.length) {
|
|
|
+ } else if (project.value.sceneList.length) {
|
|
|
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 = '当前场景已被删除，无法进行查看')
|
|
|
}
|
|
|
if (showAdjust.value || showSplit.value) {
|
|
|
onBimChecked()
|
|
|
nextTick(() => onDbsChecked())
|
|
|
}
|
|
|
} else {
|
|
|
- return showTips.value = '当前场景已被删除，无法进行查看'
|
|
|
+ return (showTips.value = '当前场景已被删除，无法进行查看')
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
@@ -492,7 +539,6 @@ onMounted(() => {
|
|
|
} else {
|
|
|
showTips.value = response.message
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
})
|
|
|
.catch(() => {
|
|
|
@@ -570,7 +616,7 @@ main {
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
div {
|
|
|
- cursor:pointer;
|
|
|
+ cursor: pointer;
|
|
|
margin-left: 20px;
|
|
|
width: 70px;
|
|
|
height: 88px;
|
|
|
@@ -676,6 +722,58 @@ main {
|
|
|
color: #0076f6;
|
|
|
}
|
|
|
}
|
|
|
+ .item-density {
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ height: 50px;
|
|
|
+ width: 68px;
|
|
|
+ background: rgba(27, 27, 28, 0.8);
|
|
|
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
|
+ border-radius: 47px 47px 47px 47px;
|
|
|
+ border: 1px solid #000000;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ padding: 0 16px;
|
|
|
+ &.active{
|
|
|
+ ul{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ i{
|
|
|
+ transform: scale(0.8) rotate(180deg)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ transform: scale(0.8);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ ul {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: calc(100% + 10px);
|
|
|
+ width: 68px;
|
|
|
+ padding: 10px 0;
|
|
|
+ border-radius: 12px;
|
|
|
+ text-align: center;
|
|
|
+ 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;
|
|
|
+ li{
|
|
|
+ padding: 5px 0;
|
|
|
+ &:hover{
|
|
|
+ color: #0076f6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
@@ -717,16 +815,16 @@ main {
|
|
|
.vuejs3-datepicker__calendar header .next:not(.disabled):hover {
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
}
|
|
|
-.vuejs3-datepicker__calendar .cell{
|
|
|
- font-size:16px !important;
|
|
|
- border-radius:4px;
|
|
|
+.vuejs3-datepicker__calendar .cell {
|
|
|
+ font-size: 16px !important;
|
|
|
+ border-radius: 4px;
|
|
|
}
|
|
|
.highlighted {
|
|
|
- color:#076EDE !important;
|
|
|
+ color: #076ede !important;
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
.selected {
|
|
|
- color:#fff !important;
|
|
|
+ color: #fff !important;
|
|
|
background: #0076f6 !important;
|
|
|
}
|
|
|
</style>
|
