|
@@ -1,6 +1,16 @@
|
|
<template>
|
|
<template>
|
|
<main>
|
|
<main>
|
|
- <van-datetime-picker v-model="sourceDate" :filter="onFilter" type="date" title="选择年月日" />
|
|
|
|
|
|
+ <iframe v-if="source" :src="sourceURL" frameborder="0"></iframe>
|
|
|
|
+ <div class="tools" v-show="!bimChecked">
|
|
|
|
+ <div class="item-date">
|
|
|
|
+ <Calendar :value="sourceDate" />
|
|
|
|
+ </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>
|
|
|
|
+ <!-- <van-datetime-picker v-model="sourceDate" :filter="onFilter" :formatter="onFormatter" type="date" title="选择时间" confirm-button-text="确定" /> -->
|
|
</main>
|
|
</main>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
@@ -8,15 +18,10 @@
|
|
import { ref, onMounted, computed, nextTick } from 'vue'
|
|
import { ref, onMounted, computed, nextTick } from 'vue'
|
|
import { http } from '@/utils/request'
|
|
import { http } from '@/utils/request'
|
|
import browser from '@/utils/browser'
|
|
import browser from '@/utils/browser'
|
|
|
|
+import Calendar from '@/components/calendar/mobile.vue'
|
|
import sync, { loadSourceScene, loadTargetScene } from '@/utils/sync'
|
|
import sync, { loadSourceScene, loadTargetScene } from '@/utils/sync'
|
|
|
|
|
|
-// 是否校准模式
|
|
|
|
-const showSplit = ref(browser.urlHasValue('split'))
|
|
|
|
-const showAdjust = ref(browser.urlHasValue('adjust'))
|
|
|
|
-
|
|
|
|
const bimChecked = ref(null)
|
|
const bimChecked = ref(null)
|
|
-const dbsChecked = ref(null)
|
|
|
|
-const fscChecked = ref(null)
|
|
|
|
|
|
|
|
const datepickName = ref(null)
|
|
const datepickName = ref(null)
|
|
|
|
|
|
@@ -42,7 +47,7 @@ const scenes = computed(() => {
|
|
})
|
|
})
|
|
})
|
|
})
|
|
const sourceURL = computed(() => {
|
|
const sourceURL = computed(() => {
|
|
- if (bimChecked.value && !dbsChecked.value) {
|
|
|
|
|
|
+ if (bimChecked.value) {
|
|
return `smart-bim.html?m=${source.value.num}`
|
|
return `smart-bim.html?m=${source.value.num}`
|
|
}
|
|
}
|
|
|
|
|
|
@@ -54,31 +59,13 @@ const sourceURL = computed(() => {
|
|
return `smart-laser.html?m=${source.value.num}&dev`
|
|
return `smart-laser.html?m=${source.value.num}&dev`
|
|
}
|
|
}
|
|
})
|
|
})
|
|
-const targetURL = computed(() => {
|
|
|
|
- if (bimChecked.value) {
|
|
|
|
- return `smart-bim.html?m=${target.value.num}`
|
|
|
|
- }
|
|
|
|
|
|
|
|
- if (source.value.type < 2) {
|
|
|
|
- // 看看、看见场景
|
|
|
|
- return `smart-kankan.html?m=${target.value.num}&dev`
|
|
|
|
- } else {
|
|
|
|
- // 深时场景
|
|
|
|
- return `smart-laser.html?m=${target.value.num}&dev`
|
|
|
|
- }
|
|
|
|
-})
|
|
|
|
const sourceDate = computed(() => {
|
|
const sourceDate = computed(() => {
|
|
if (source.value) {
|
|
if (source.value) {
|
|
return source.value.createTime.toDate()
|
|
return source.value.createTime.toDate()
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
-const targetDate = computed(() => {
|
|
|
|
- if (target.value) {
|
|
|
|
- return target.value.createTime.toDate()
|
|
|
|
- }
|
|
|
|
-})
|
|
|
|
-
|
|
|
|
const sourceDays = computed(() => {
|
|
const sourceDays = computed(() => {
|
|
let dates = []
|
|
let dates = []
|
|
if (datepickName.value == 'source') {
|
|
if (datepickName.value == 'source') {
|
|
@@ -101,18 +88,23 @@ const sourceDays = computed(() => {
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
-const targetDays = computed(() => {
|
|
|
|
- let dates = []
|
|
|
|
- if (datepickName.value == 'target') {
|
|
|
|
- dates = scenes.value.filter(item => item.createTime != source.value.createTime).map(item => item.createTime.toDate())
|
|
|
|
|
|
+const onFilter = (type, options) => {
|
|
|
|
+ console.log(type, options)
|
|
|
|
+ return options
|
|
|
|
+}
|
|
|
|
+const onFormatter = (type, val) => {
|
|
|
|
+ if (type === 'year') {
|
|
|
|
+ return `${val}年`
|
|
}
|
|
}
|
|
- return {
|
|
|
|
- dates: dates,
|
|
|
|
|
|
+ if (type === 'month') {
|
|
|
|
+ return `${val}月`
|
|
}
|
|
}
|
|
-})
|
|
|
|
-const onFilter = (type, options)=> {
|
|
|
|
- console.log(type,options)
|
|
|
|
|
|
+ if (type === 'day') {
|
|
|
|
+ return `${val}日`
|
|
|
|
+ }
|
|
|
|
+ return val
|
|
}
|
|
}
|
|
|
|
+
|
|
const onLoadSource = () => {
|
|
const onLoadSource = () => {
|
|
if (bimChecked.value && !dbsChecked.value) {
|
|
if (bimChecked.value && !dbsChecked.value) {
|
|
// BIM单屏模式
|
|
// BIM单屏模式
|
|
@@ -121,13 +113,6 @@ const onLoadSource = () => {
|
|
|
|
|
|
loadSourceScene(sourceFrame, source.value.type < 2 ? 'kankan' : 'laser')
|
|
loadSourceScene(sourceFrame, source.value.type < 2 ? 'kankan' : 'laser')
|
|
}
|
|
}
|
|
-const onLoadTarget = () => {
|
|
|
|
- if (bimChecked.value) {
|
|
|
|
- loadTargetScene(targetFrame, 'bim')
|
|
|
|
- } else {
|
|
|
|
- loadTargetScene(targetFrame, target.value.type < 2 ? 'kankan' : 'laser', mode.value)
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
|
|
|
|
const onModeChange = targetMode => {
|
|
const onModeChange = targetMode => {
|
|
if (sync.sourceInst) {
|
|
if (sync.sourceInst) {
|
|
@@ -238,81 +223,11 @@ const onNextDate = name => {
|
|
const onBimChecked = () => {
|
|
const onBimChecked = () => {
|
|
if (bimChecked.value) {
|
|
if (bimChecked.value) {
|
|
bimChecked.value = false
|
|
bimChecked.value = false
|
|
- if (dbsChecked.value) {
|
|
|
|
- // 判断是否分屏状态
|
|
|
|
- let index = scenes.value.findIndex(item => item.num == source.value.num)
|
|
|
|
- if (index == -1) {
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- if (++index > scenes.value.length - 1) {
|
|
|
|
- index = 0
|
|
|
|
- }
|
|
|
|
- target.value = scenes.value[index]
|
|
|
|
- }
|
|
|
|
} else {
|
|
} else {
|
|
bimChecked.value = true
|
|
bimChecked.value = true
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
-// 分屏点击
|
|
|
|
-const onDbsChecked = () => {
|
|
|
|
- dbsChecked.value = !dbsChecked.value
|
|
|
|
- if (dbsChecked.value) {
|
|
|
|
- if (bimChecked.value) {
|
|
|
|
- // BIM分屏
|
|
|
|
- source.value = scenes.value[0]
|
|
|
|
- target.value = project.value.bimData
|
|
|
|
- } else {
|
|
|
|
- // 四维看看、激光场景分屏
|
|
|
|
- let index = scenes.value.findIndex(item => item.num == source.value.num)
|
|
|
|
- if (index == -1) {
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- if (++index > scenes.value.length - 1) {
|
|
|
|
- index = 0
|
|
|
|
- }
|
|
|
|
- target.value = scenes.value[index]
|
|
|
|
- }
|
|
|
|
- } else {
|
|
|
|
- target.value = null
|
|
|
|
- targetApp = null
|
|
|
|
- views.clear()
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-// 全屏点击
|
|
|
|
-const onFscChecked = () => {
|
|
|
|
- let element = document.documentElement
|
|
|
|
-
|
|
|
|
- fscChecked.value = !fscChecked.value
|
|
|
|
-
|
|
|
|
- if (fscChecked.value) {
|
|
|
|
- if (element.requestFullscreen) {
|
|
|
|
- element.requestFullscreen()
|
|
|
|
- } else if (element.webkitRequestFullScreen) {
|
|
|
|
- element.webkitRequestFullScreen()
|
|
|
|
- } else if (element.mozRequestFullScreen) {
|
|
|
|
- element.mozRequestFullScreen()
|
|
|
|
- } else if (element.msRequestFullscreen) {
|
|
|
|
- element.msRequestFullscreen()
|
|
|
|
- }
|
|
|
|
- } else {
|
|
|
|
- if (document.exitFullscreen) {
|
|
|
|
- document.exitFullscreen()
|
|
|
|
- } else if (document.webkitCancelFullScreen) {
|
|
|
|
- document.webkitCancelFullScreen()
|
|
|
|
- } else if (document.mozCancelFullScreen) {
|
|
|
|
- document.mozCancelFullScreen()
|
|
|
|
- } else if (document.msExitFullscreen) {
|
|
|
|
- document.msExitFullscreen()
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
-const onPointsUpdate = type => {
|
|
|
|
- points.value[type] = true
|
|
|
|
-}
|
|
|
|
-
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
const projectId = browser.valueFromUrl('projectId') || 1
|
|
const projectId = browser.valueFromUrl('projectId') || 1
|
|
http.get(`smart-site/project/info?projectId=${projectId}`)
|
|
http.get(`smart-site/project/info?projectId=${projectId}`)
|
|
@@ -321,25 +236,64 @@ onMounted(() => {
|
|
project.value = response.data
|
|
project.value = response.data
|
|
if (project.value.sceneList.length) {
|
|
if (project.value.sceneList.length) {
|
|
source.value = project.value.sceneList[0]
|
|
source.value = project.value.sceneList[0]
|
|
- if (showAdjust.value || showSplit.value) {
|
|
|
|
- onBimChecked()
|
|
|
|
- nextTick(() => onDbsChecked())
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
} else {
|
|
} else {
|
|
alert('获取数据失败')
|
|
alert('获取数据失败')
|
|
}
|
|
}
|
|
})
|
|
})
|
|
- .catch(() => {
|
|
|
|
|
|
+ .catch(err => {
|
|
alert('服务器连接失败')
|
|
alert('服务器连接失败')
|
|
})
|
|
})
|
|
})
|
|
})
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
-main{
|
|
|
|
|
|
+main {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
|
|
+ iframe {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ }
|
|
|
|
+ .tools {
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 100%;
|
|
|
|
+ bottom: 40px;
|
|
|
|
+ z-index: 2000;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ color: #fff;
|
|
|
|
+ pointer-events: none;
|
|
|
|
+ > div {
|
|
|
|
+ pointer-events: all;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .item-mode {
|
|
|
|
+ height: 50px;
|
|
|
|
+ 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;
|
|
|
|
+ div {
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ }
|
|
|
|
+ div:last-child {
|
|
|
|
+ margin-left: 20px;
|
|
|
|
+ }
|
|
|
|
+ div.active {
|
|
|
|
+ color: #0076f6;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|
|
<style lang="scss">
|
|
<style lang="scss">
|
|
@@ -348,4 +302,28 @@ main{
|
|
display: flex;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
+:root {
|
|
|
|
+ --van-gray-8: rgba(255, 255, 255, 0.3);
|
|
|
|
+ --van-picker-background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
+}
|
|
|
|
+// .van-picker {
|
|
|
|
+// position: absolute;
|
|
|
|
+// left: 0;
|
|
|
|
+// right: 0;
|
|
|
|
+// bottom: 0;
|
|
|
|
+// }
|
|
|
|
+.van-picker__mask {
|
|
|
|
+ display: none;
|
|
|
|
+}
|
|
|
|
+.van-picker__toolbar {
|
|
|
|
+ button {
|
|
|
|
+ font-size: 16px !important;
|
|
|
|
+ &.van-picker__confirm {
|
|
|
|
+ color: #0076f6;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.van-picker-column__item--selected {
|
|
|
|
+ color: #fff;
|
|
|
|
+}
|
|
</style>
|
|
</style>
|