|
|
@@ -1,34 +1,33 @@
|
|
|
<template>
|
|
|
<Rules v-if="showRules" @close="closeRules" />
|
|
|
|
|
|
- <AppHeader v-show="!fscChecked" :project="project" @getUserId="getUserId" :show-adjust="showAdjust" @update="onPointsUpdate" />
|
|
|
+ <AppHeader v-show="!fscChecked" :project="project" @getUserId="getUserId" :show-adjust="showAdjust"
|
|
|
+ @update="onPointsUpdate" />
|
|
|
<article>
|
|
|
<main>
|
|
|
<div class="split">
|
|
|
- <iframe ref="sourceFrame" v-if="sourceURL" :src="sourceURL" frameborder="0" @load="onLoadSource"></iframe>
|
|
|
- <div class="tools" v-if="source && !showRules && !ruleChecked" v-show="showWidget && !showAdjust && !fscChecked && (dbsChecked || (!target && !bimChecked))">
|
|
|
+ <iframe ref="sourceFrame" v-if="sourceURL" :src="sourceURL" frameborder="0"
|
|
|
+ @load="onLoadSource"></iframe>
|
|
|
+ <div class="tools" v-if="source && !showRules && !ruleChecked"
|
|
|
+ v-show="showWidget && !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 || source.type == 3">
|
|
|
- <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 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) || (source.type == 3 && mode == 1)" :class="{ active: showDensity }" @click="showDensity = !showDensity">
|
|
|
+ <div class="item-density" v-if="(source.type == 2 && mode == 1) || (source.type == 3 && 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>
|
|
|
+ <li v-for="density in densityTypes" @click="onDensityChange(density)">{{ density.text }}
|
|
|
+ </li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -47,17 +46,9 @@
|
|
|
<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">
|
|
|
@@ -72,33 +63,38 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="model" v-show="showWidget && !showAdjust && !showRules">
|
|
|
- <div class="rule" :class="{ active: ruleChecked, disable: fileDisable }" v-show="!fscChecked && !showBim && !dbsChecked && !bimChecked">
|
|
|
+ <div class="rule" :class="{ active: ruleChecked, disable: fileDisable }"
|
|
|
+ v-show="!fscChecked && !showBim && !dbsChecked && !bimChecked">
|
|
|
<div @click="onRuleChecked">
|
|
|
<i class="iconfont icon-measurement"></i>
|
|
|
<span>{{ $t('common.measure') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="isLogin && isAuth" class="file" :class="{ active: fileChecked, disable: fileDisable }" v-show="!fscChecked && !showBim && !dbsChecked && !bimChecked && !ruleChecked">
|
|
|
+ <div v-if="isLogin && isAuth" class="file" :class="{ active: fileChecked, disable: fileDisable }"
|
|
|
+ v-show="!fscChecked && !showBim && !dbsChecked && !bimChecked && !ruleChecked">
|
|
|
<div @click="onFileChecked">
|
|
|
<i class="iconfont icon-note1"></i>
|
|
|
<span>{{ $t('home.tag') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div class="bim" :class="{ active: bimChecked, disable: bimDisable }" v-show="!fscChecked && !showBim && !ruleChecked">
|
|
|
+ <div class="bim" :class="{ active: bimChecked, disable: bimDisable }"
|
|
|
+ v-show="!fscChecked && !showBim && !ruleChecked">
|
|
|
<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 && !ruleChecked">
|
|
|
+ <div class="dbs" :class="{ active: dbsChecked, disable: dbsDisable }"
|
|
|
+ v-show="!fscChecked && !showBim && !ruleChecked">
|
|
|
<div @click="onDbsChecked">
|
|
|
<i class="iconfont icon-split_screen"></i>
|
|
|
<span>{{ $t('home.splitScreen') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="fsc" :class="{ active: fscChecked }" @click="onFscChecked">
|
|
|
- <i class="iconfont" :class="[fscChecked ? 'icon-full_screen_selected' : 'icon-full_screen_normal']"></i>
|
|
|
+ <i class="iconfont"
|
|
|
+ :class="[fscChecked ? 'icon-full_screen_selected' : 'icon-full_screen_normal']"></i>
|
|
|
<span>{{ $t('home.fullScreen') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -122,6 +118,7 @@ import TagManager from '@/components/files/TagManager'
|
|
|
import sync, { beforeChangeURL, loadSourceScene, loadTargetScene, setPanoWithBim, flyToP1P2 } from '@/utils/sync'
|
|
|
import i18n, { getLocale, useI18n, useScope, setI18nLanguage, loadLocaleMessages } from '@/i18n'
|
|
|
import Rules from './Rules'
|
|
|
+let tagsNum = null
|
|
|
const { t } = useI18n({ useScope: 'global' })
|
|
|
const isDev = process.env.VUE_APP_TEST == 1
|
|
|
const rules = []
|
|
|
@@ -176,6 +173,40 @@ const target = ref(null)
|
|
|
const project = ref(null)
|
|
|
const points = ref({ p1: null, p2: null })
|
|
|
|
|
|
+watch(
|
|
|
+ () => dbsChecked.value,
|
|
|
+ (val, old) => {
|
|
|
+ let tagsVieww = document.querySelector(`div[xui_tags_view]`)
|
|
|
+ if (val) {
|
|
|
+ // tagsVieww.style.visibility = 'hidden'
|
|
|
+ // tagsVieww.style.width = '50%'
|
|
|
+ // tagsVieww.style.overflow = 'hidden'
|
|
|
+ } else {
|
|
|
+ // tagsVieww.style.visibility = 'visible'
|
|
|
+ // tagsVieww.style.width = '100%'
|
|
|
+ // tagsVieww.style.overflow = 'visible'
|
|
|
+ if(bimChecked.value){
|
|
|
+ tagsVieww.style.visibility = 'hidden'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+)
|
|
|
+watch(
|
|
|
+ () => bimChecked.value,
|
|
|
+ (val, old) => {
|
|
|
+ let tagsVieww = document.querySelector(`div[xui_tags_view]`)
|
|
|
+ if (val) {
|
|
|
+ if (!dbsChecked.value) {
|
|
|
+ tagsVieww.style.visibility = 'hidden'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (!dbsChecked.value) {
|
|
|
+ tagsVieww.style.visibility = 'visible'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+)
|
|
|
+
|
|
|
const densityTypes = ref([
|
|
|
{ type: 'high', text: t('common.high') },
|
|
|
{ type: 'middle', text: t('common.middle') },
|
|
|
@@ -214,6 +245,7 @@ const controls = computed(() => {
|
|
|
return dbsChecked.value ? scenes.value.length > 2 : scenes.value.length > 1
|
|
|
})
|
|
|
const sourceURL = computed(() => {
|
|
|
+
|
|
|
beforeChangeURL('source')
|
|
|
|
|
|
if (bimChecked.value && !dbsChecked.value) {
|
|
|
@@ -230,9 +262,16 @@ const sourceURL = computed(() => {
|
|
|
} else {
|
|
|
getLaserInfo(source.value.num)
|
|
|
// 深时场景
|
|
|
- return `smart-laser.html?m=${source.value.num}${isDev ? '&dev' : ''}&lang=${getLocale()}&serve_link=${process.env.VUE_APP_LASER_URL}&panoResourceBasePath=${
|
|
|
- process.env.VUE_APP_RESOURCE_URL
|
|
|
- }&resourceBasePath=${process.env.VUE_APP_LASER_RESOURCE_URL}`
|
|
|
+
|
|
|
+ let url = ''
|
|
|
+ if (process.env.VUE_APP_ENV == 'aws') {
|
|
|
+ url = `smart-laser.html?m=${source.value.num}${isDev ? '&dev' : ''}&lang=${getLocale()}&serve_link=${process.env.VUE_APP_LASER_URL}&panoResourceBasePath=${process.env.VUE_APP_RESOURCE_URL
|
|
|
+ }&resourceBasePath=${process.env.VUE_APP_LASER_RESOURCE_URL}®ion=${process.env.VUE_APP_ENV}`
|
|
|
+ } else {
|
|
|
+ url = `smart-laser.html?m=${source.value.num}${isDev ? '&dev' : ''}&lang=${getLocale()}&serve_link=${process.env.VUE_APP_LASER_URL}&panoResourceBasePath=${process.env.VUE_APP_RESOURCE_URL
|
|
|
+ }&resourceBasePath=${process.env.VUE_APP_LASER_RESOURCE_URL}`
|
|
|
+ }
|
|
|
+ return url
|
|
|
}
|
|
|
})
|
|
|
const noPanorama = ref(true)
|
|
|
@@ -268,9 +307,15 @@ const targetURL = computed(() => {
|
|
|
return `smart-kankan.html?m=${target.value.num}${isDev ? '&dev' : ''}&lang=${getLocale()}&serve_link=${process.env.VUE_APP_LASER_URL}`
|
|
|
} else {
|
|
|
// 深时场景
|
|
|
- return `smart-laser.html?m=${target.value.num}${isDev ? '&dev' : ''}&lang=${getLocale()}&serve_link=${process.env.VUE_APP_LASER_URL}&panoResourceBasePath=${
|
|
|
- process.env.VUE_APP_RESOURCE_URL
|
|
|
- }&resourceBasePath=${process.env.VUE_APP_LASER_RESOURCE_URL}`
|
|
|
+ let url = ''
|
|
|
+ if (process.env.VUE_APP_ENV == 'aws') {
|
|
|
+ url = `smart-laser.html?m=${target.value.num}${isDev ? '&dev' : ''}&lang=${getLocale()}&serve_link=${process.env.VUE_APP_LASER_URL}&panoResourceBasePath=${process.env.VUE_APP_RESOURCE_URL
|
|
|
+ }&resourceBasePath=${process.env.VUE_APP_LASER_RESOURCE_URL}®ion=${process.env.VUE_APP_ENV}`
|
|
|
+ } else {
|
|
|
+ url = `smart-laser.html?m=${target.value.num}${isDev ? '&dev' : ''}&lang=${getLocale()}&serve_link=${process.env.VUE_APP_LASER_URL}&panoResourceBasePath=${process.env.VUE_APP_RESOURCE_URL
|
|
|
+ }&resourceBasePath=${process.env.VUE_APP_LASER_RESOURCE_URL}`
|
|
|
+ }
|
|
|
+ return url
|
|
|
}
|
|
|
})
|
|
|
const sourceDate = computed(() => {
|
|
|
@@ -364,7 +409,7 @@ const onLoadSource = () => {
|
|
|
const info2d = sdk.scene.getScreenByPoint(tag.position)
|
|
|
tag.x = info2d.pos.x
|
|
|
tag.y = info2d.pos.y
|
|
|
- tag.visible = info2d.trueSide
|
|
|
+ tag.visible = info2d.trueSide && info2d.inSight
|
|
|
})
|
|
|
})
|
|
|
|
|
|
@@ -658,20 +703,31 @@ const onRuleChecked = () => {
|
|
|
}
|
|
|
}
|
|
|
const getTagList = num => {
|
|
|
+
|
|
|
+ const pnum = num ? num : browser.getURLParam('m')
|
|
|
+
|
|
|
http.post(`smart-site/marking/list`, {
|
|
|
projectId: projectId,
|
|
|
pageNum: 1,
|
|
|
pageSize: 200,
|
|
|
- num: num ? num : browser.getURLParam('m'),
|
|
|
+ num: pnum,
|
|
|
}).then(response => {
|
|
|
if (response.data && response.data.list) {
|
|
|
- tags.value = response.data.list.map(item => {
|
|
|
+ tags.value.length = 0
|
|
|
+ response.data.list.map(item => {
|
|
|
item.hotData.visible = false
|
|
|
item.hotData.id = item.markingId
|
|
|
item.hotData.createTime = item.createTime
|
|
|
item.hotData.createBy = item.createBy
|
|
|
return item.hotData
|
|
|
+ }).forEach(item => {
|
|
|
+ tags.value.push(item)
|
|
|
+
|
|
|
})
|
|
|
+ if (window['kankan']) {
|
|
|
+ window['kankan'].TagManager.load(tags.value)
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
@@ -752,40 +808,48 @@ article {
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
aside {
|
|
|
width: 160px;
|
|
|
height: 100%;
|
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
|
+
|
|
|
h4 {
|
|
|
font-size: 16px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+
|
|
|
ul {
|
|
|
margin-top: 20px;
|
|
|
}
|
|
|
+
|
|
|
li {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
font-size: 16px;
|
|
|
margin-left: 20px;
|
|
|
cursor: pointer;
|
|
|
+
|
|
|
&:hover,
|
|
|
&.active {
|
|
|
color: #00c8af;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
main {
|
|
|
flex: 1;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: relative;
|
|
|
display: flex;
|
|
|
+
|
|
|
&.full {
|
|
|
.split {
|
|
|
width: 50%;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
iframe {
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
@@ -796,12 +860,14 @@ main {
|
|
|
border: none;
|
|
|
outline: none;
|
|
|
}
|
|
|
+
|
|
|
.split {
|
|
|
margin-left: 2px;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
+
|
|
|
&:first-child,
|
|
|
&:last-child {
|
|
|
margin-left: 0;
|
|
|
@@ -829,12 +895,15 @@ main {
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+
|
|
|
&.active {
|
|
|
color: #0076f6;
|
|
|
}
|
|
|
+
|
|
|
i {
|
|
|
font-size: 24px;
|
|
|
}
|
|
|
+
|
|
|
span {
|
|
|
font-size: 16px;
|
|
|
margin-top: 10px;
|
|
|
@@ -842,6 +911,7 @@ main {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.model {
|
|
|
position: absolute;
|
|
|
left: 50px;
|
|
|
@@ -849,7 +919,8 @@ main {
|
|
|
z-index: 1000;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
- > div {
|
|
|
+
|
|
|
+ >div {
|
|
|
cursor: pointer;
|
|
|
width: 50px;
|
|
|
height: 50px;
|
|
|
@@ -863,7 +934,7 @@ main {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
|
|
|
- > div {
|
|
|
+ >div {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
@@ -871,12 +942,15 @@ main {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+
|
|
|
&.active {
|
|
|
color: #0076f6;
|
|
|
}
|
|
|
+
|
|
|
&.disable {
|
|
|
opacity: 0.5;
|
|
|
}
|
|
|
+
|
|
|
span {
|
|
|
font-size: 12px;
|
|
|
padding-top: 1px;
|
|
|
@@ -885,6 +959,7 @@ main {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.tools {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
@@ -895,7 +970,8 @@ main {
|
|
|
align-items: center;
|
|
|
color: #fff;
|
|
|
pointer-events: none;
|
|
|
- > div {
|
|
|
+
|
|
|
+ >div {
|
|
|
pointer-events: all;
|
|
|
}
|
|
|
|
|
|
@@ -912,17 +988,21 @@ main {
|
|
|
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;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.item-density {
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
@@ -939,21 +1019,26 @@ main {
|
|
|
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;
|
|
|
@@ -967,8 +1052,10 @@ main {
|
|
|
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;
|
|
|
}
|
|
|
@@ -984,6 +1071,7 @@ main {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
+
|
|
|
.vuejs3-datepicker__calendar {
|
|
|
background: rgba(27, 27, 28, 0.8);
|
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
|
@@ -993,9 +1081,11 @@ main {
|
|
|
filter: blur(undefinedpx);
|
|
|
color: #fff;
|
|
|
}
|
|
|
+
|
|
|
.vuejs3-datepicker__calendar-topbar {
|
|
|
display: none !important;
|
|
|
}
|
|
|
+
|
|
|
.vuejs3-datepicker__calendar header .up:not(.disabled):hover {
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
color: #fff;
|
|
|
@@ -1005,6 +1095,7 @@ main {
|
|
|
border-left: 1px solid #fff;
|
|
|
border-bottom: 1px solid #fff;
|
|
|
}
|
|
|
+
|
|
|
.vuejs3-datepicker__calendar header .prev:not(.disabled):hover {
|
|
|
background: rgba(0, 0, 0, 0.3);
|
|
|
}
|
|
|
@@ -1013,17 +1104,21 @@ main {
|
|
|
border-top: 1px solid #fff;
|
|
|
border-right: 1px solid #fff;
|
|
|
}
|
|
|
+
|
|
|
.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;
|
|
|
}
|
|
|
+
|
|
|
.highlighted {
|
|
|
color: #076ede !important;
|
|
|
background: transparent !important;
|
|
|
}
|
|
|
+
|
|
|
.selected {
|
|
|
color: #fff !important;
|
|
|
background: #0076f6 !important;
|
jinx
rindy
xzw