|
|
@@ -0,0 +1,329 @@
|
|
|
+<template>
|
|
|
+ <main>
|
|
|
+ <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>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted, computed, nextTick } from 'vue'
|
|
|
+import { http } from '@/utils/request'
|
|
|
+import browser from '@/utils/browser'
|
|
|
+import Calendar from '@/components/calendar/mobile.vue'
|
|
|
+import sync, { loadSourceScene, loadTargetScene } from '@/utils/sync'
|
|
|
+
|
|
|
+const bimChecked = ref(null)
|
|
|
+
|
|
|
+const datepickName = ref(null)
|
|
|
+
|
|
|
+const sourceFrame = ref(null)
|
|
|
+const targetFrame = ref(null)
|
|
|
+
|
|
|
+const mode = ref(0)
|
|
|
+const source = ref(null)
|
|
|
+const target = ref(null)
|
|
|
+const project = ref(null)
|
|
|
+const points = ref({ p1: false, p2: false })
|
|
|
+
|
|
|
+const scenes = computed(() => {
|
|
|
+ if (!project.value) {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ return project.value.sceneList.map(item => {
|
|
|
+ return {
|
|
|
+ num: item.num,
|
|
|
+ type: item.type,
|
|
|
+ createTime: item.createTime,
|
|
|
+ }
|
|
|
+ })
|
|
|
+})
|
|
|
+const sourceURL = computed(() => {
|
|
|
+ if (bimChecked.value) {
|
|
|
+ return `smart-bim.html?m=${source.value.num}`
|
|
|
+ }
|
|
|
+
|
|
|
+ if (source.value.type < 2) {
|
|
|
+ // 看看、看见场景
|
|
|
+ return `smart-kankan.html?m=${source.value.num}&dev`
|
|
|
+ } else {
|
|
|
+ // 深时场景
|
|
|
+ return `smart-laser.html?m=${source.value.num}&dev`
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const sourceDate = computed(() => {
|
|
|
+ if (source.value) {
|
|
|
+ return source.value.createTime.toDate()
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const sourceDays = computed(() => {
|
|
|
+ let dates = []
|
|
|
+ if (datepickName.value == 'source') {
|
|
|
+ if (dbsChecked.value) {
|
|
|
+ // 分屏模式
|
|
|
+ if (bimChecked.value) {
|
|
|
+ // BIM模式
|
|
|
+ dates = scenes.value.map(item => item.createTime.toDate())
|
|
|
+ } else {
|
|
|
+ // 非BIM模式
|
|
|
+ dates = scenes.value.filter(item => item.createTime != target.value.createTime).map(item => item.createTime.toDate())
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 非分屏模式
|
|
|
+ dates = scenes.value.map(item => item.createTime.toDate())
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ dates: dates,
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const onFilter = (type, options) => {
|
|
|
+ console.log(type, options)
|
|
|
+ return options
|
|
|
+}
|
|
|
+const onFormatter = (type, val) => {
|
|
|
+ if (type === 'year') {
|
|
|
+ return `${val}年`
|
|
|
+ }
|
|
|
+ if (type === 'month') {
|
|
|
+ return `${val}月`
|
|
|
+ }
|
|
|
+ if (type === 'day') {
|
|
|
+ return `${val}日`
|
|
|
+ }
|
|
|
+ return val
|
|
|
+}
|
|
|
+
|
|
|
+const onLoadSource = () => {
|
|
|
+ if (bimChecked.value && !dbsChecked.value) {
|
|
|
+ // BIM单屏模式
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ loadSourceScene(sourceFrame, source.value.type < 2 ? 'kankan' : 'laser')
|
|
|
+}
|
|
|
+
|
|
|
+const onModeChange = targetMode => {
|
|
|
+ if (sync.sourceInst) {
|
|
|
+ sync.sourceInst.loaded.then(sdk => sdk.scene.changeMode(targetMode))
|
|
|
+ mode.value = targetMode
|
|
|
+ }
|
|
|
+}
|
|
|
+const onPickDate = name => {
|
|
|
+ datepickName.value = name
|
|
|
+}
|
|
|
+
|
|
|
+const onSelected = data => {
|
|
|
+ if (!data.payload) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let { name, payload } = data
|
|
|
+ let date = payload.format('YYYY-mm-dd')
|
|
|
+ let dates = (name == 'source' ? sourceDays : targetDays).value.dates.map(item => item.format('YYYY-mm-dd'))
|
|
|
+
|
|
|
+ if (dates.indexOf(date) != -1) {
|
|
|
+ let time = payload.format('YYYY-mm-dd HH:MM')
|
|
|
+ let find = scenes.value.find(c => c.createTime.indexOf(time) != -1)
|
|
|
+ if (find) {
|
|
|
+ if (name == 'source') {
|
|
|
+ if (find.num != source.value.num) {
|
|
|
+ source.value = find
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (find.num != target.value.num) {
|
|
|
+ target.value = find
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ datepickName.value = null
|
|
|
+}
|
|
|
+
|
|
|
+const onPrevDate = name => {
|
|
|
+ let scene = null
|
|
|
+ if (name == 'source') {
|
|
|
+ scene = source
|
|
|
+ } else {
|
|
|
+ scene = target
|
|
|
+ }
|
|
|
+ let index = scenes.value.findIndex(item => item.num == scene.value.num)
|
|
|
+ if (index == -1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (--index == -1) {
|
|
|
+ index = scenes.value.length - 1
|
|
|
+ }
|
|
|
+
|
|
|
+ if (target.value) {
|
|
|
+ // 分屏模式判断
|
|
|
+ if (name == 'source') {
|
|
|
+ if (scenes.value[index].createTime == target.value.createTime) {
|
|
|
+ index--
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (scenes.value[index].createTime == source.value.createTime) {
|
|
|
+ index--
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (index == -1) {
|
|
|
+ index = scenes.value.length - 1
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ scene.value = scenes.value[index]
|
|
|
+}
|
|
|
+const onNextDate = name => {
|
|
|
+ let scene = null
|
|
|
+ if (name == 'source') {
|
|
|
+ scene = source
|
|
|
+ } else {
|
|
|
+ scene = target
|
|
|
+ }
|
|
|
+ let index = scenes.value.findIndex(item => item.num == scene.value.num)
|
|
|
+ if (index == -1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (++index > scenes.value.length - 1) {
|
|
|
+ index = 0
|
|
|
+ }
|
|
|
+
|
|
|
+ if (target.value) {
|
|
|
+ // 分屏模式判断
|
|
|
+ if (name == 'source') {
|
|
|
+ if (scenes.value[index].createTime == target.value.createTime) {
|
|
|
+ index++
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (scenes.value[index].createTime == source.value.createTime) {
|
|
|
+ index++
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (index > scenes.value.length - 1) {
|
|
|
+ index = 0
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ scene.value = scenes.value[index]
|
|
|
+}
|
|
|
+
|
|
|
+// bim点击
|
|
|
+const onBimChecked = () => {
|
|
|
+ if (bimChecked.value) {
|
|
|
+ bimChecked.value = false
|
|
|
+ } else {
|
|
|
+ bimChecked.value = true
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ const projectId = browser.valueFromUrl('projectId') || 1
|
|
|
+ http.get(`smart-site/project/info?projectId=${projectId}`)
|
|
|
+ .then(response => {
|
|
|
+ if (response.success) {
|
|
|
+ project.value = response.data
|
|
|
+ if (project.value.sceneList.length) {
|
|
|
+ source.value = project.value.sceneList[0]
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ alert('获取数据失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ alert('服务器连接失败')
|
|
|
+ })
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+main {
|
|
|
+ width: 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 lang="scss">
|
|
|
+#app {
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ display: flex;
|
|
|
+ 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>
|
xzw