|
@@ -32,21 +32,50 @@
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="photo-list" ref="listVm">
|
|
<div class="photo-list" ref="listVm">
|
|
- <div
|
|
|
|
- v-for="(path, i) in paths"
|
|
|
|
- class="photo"
|
|
|
|
- :key="path.id"
|
|
|
|
- :class="{ active: current === path, disabled: isScenePlayIng }"
|
|
|
|
- @click="changeCurrent(path)"
|
|
|
|
- >
|
|
|
|
- <ui-icon
|
|
|
|
- type="del"
|
|
|
|
- ctrl
|
|
|
|
- @click.stop="deletePath(path)"
|
|
|
|
- :class="{ disabled: isScenePlayIng }"
|
|
|
|
- />
|
|
|
|
- <img :src="getFileUrl(path.cover)" />
|
|
|
|
- </div>
|
|
|
|
|
|
+ <template v-for="(path, i) in paths" :key="path.id">
|
|
|
|
+ <div
|
|
|
|
+ class="photo"
|
|
|
|
+ :class="{ active: current === path, disabled: isScenePlayIng }"
|
|
|
|
+ @click="changeCurrent(path)"
|
|
|
|
+ >
|
|
|
|
+ <ui-icon
|
|
|
|
+ type="del"
|
|
|
|
+ ctrl
|
|
|
|
+ @click.stop="deletePath(path)"
|
|
|
|
+ :class="{ disabled: isScenePlayIng }"
|
|
|
|
+ />
|
|
|
|
+ <img :src="getResource(getFileUrl(path.cover))" />
|
|
|
|
+ </div>
|
|
|
|
+ <div class="set-phone-attr" v-if="i !== paths.length - 1">
|
|
|
|
+ <ui-input
|
|
|
|
+ type="number"
|
|
|
|
+ width="54px"
|
|
|
|
+ height="26px"
|
|
|
|
+ :modelValue="path.speed"
|
|
|
|
+ @update:modelValue="(val: number) => updatePathInfo(i, { speed: val })"
|
|
|
|
+ :ctrl="false"
|
|
|
|
+ :min="0.1"
|
|
|
|
+ :max="10"
|
|
|
|
+ >
|
|
|
|
+ <template #icon><span>m/s</span></template>
|
|
|
|
+ </ui-input>
|
|
|
|
+ <ui-input
|
|
|
|
+ type="number"
|
|
|
|
+ width="54px"
|
|
|
|
+ height="26px"
|
|
|
|
+ v-model="path.time"
|
|
|
|
+ :modelValue="path.time"
|
|
|
|
+ @update:modelValue="(val: number) => updatePathInfo(i, { time: val })"
|
|
|
|
+ :ctrl="false"
|
|
|
|
+ :min="0.1"
|
|
|
|
+ :max="20"
|
|
|
|
+ class="time"
|
|
|
|
+ >
|
|
|
|
+ <template #icon><span class="time">s</span></template>
|
|
|
|
+ </ui-input>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="un-video" v-else>暂无导览</p>
|
|
<p class="un-video" v-else>暂无导览</p>
|
|
@@ -56,18 +85,29 @@
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
import { loadPack, togetherCallback, getFileUrl, asyncTimeout } from '@/utils'
|
|
import { loadPack, togetherCallback, getFileUrl, asyncTimeout } from '@/utils'
|
|
import { sdk, playSceneGuide, pauseSceneGuide, isScenePlayIng } from '@/sdk'
|
|
import { sdk, playSceneGuide, pauseSceneGuide, isScenePlayIng } from '@/sdk'
|
|
-import { createGuidePath, isTemploraryID, useAutoSetMode, guides, enterOld } from '@/store'
|
|
|
|
|
|
+import { createGuidePath, isTemploraryID, useAutoSetMode, guides } from '@/store'
|
|
import { Dialog } from 'bill/index'
|
|
import { Dialog } from 'bill/index'
|
|
import { useViewStack } from '@/hook'
|
|
import { useViewStack } from '@/hook'
|
|
import { nextTick, ref, toRaw, watchEffect } from 'vue'
|
|
import { nextTick, ref, toRaw, watchEffect } from 'vue'
|
|
-import { showRightPanoStack, showLeftCtrlPanoStack, showLeftPanoStack, showRightCtrlPanoStack } from '@/env'
|
|
|
|
|
|
+import { showRightPanoStack, showLeftCtrlPanoStack, showLeftPanoStack, showRightCtrlPanoStack, getResource } from '@/env'
|
|
|
|
|
|
import type { Guide, GuidePaths, GuidePath } from '@/store'
|
|
import type { Guide, GuidePaths, GuidePath } from '@/store'
|
|
|
|
+import type { CalcPathProps } from '@/sdk'
|
|
|
|
|
|
const props = defineProps< { data: Guide }>()
|
|
const props = defineProps< { data: Guide }>()
|
|
const paths = ref<GuidePaths>([...props.data.paths])
|
|
const paths = ref<GuidePaths>([...props.data.paths])
|
|
const current = ref<GuidePath>(paths.value[0])
|
|
const current = ref<GuidePath>(paths.value[0])
|
|
|
|
|
|
|
|
+const updatePathInfo = (index: number, calcInfo: CalcPathProps[1]) => {
|
|
|
|
+ console.log(paths.value.slice(index, index + 2))
|
|
|
|
+ const info = sdk.calcPathInfo(
|
|
|
|
+ paths.value.slice(index, index + 2) as any,
|
|
|
|
+ calcInfo
|
|
|
|
+ )
|
|
|
|
+ console.log(info)
|
|
|
|
+ Object.assign(paths.value[index], info)
|
|
|
|
+}
|
|
|
|
+
|
|
useViewStack(() =>
|
|
useViewStack(() =>
|
|
togetherCallback([
|
|
togetherCallback([
|
|
showRightPanoStack.push(ref(false)),
|
|
showRightPanoStack.push(ref(false)),
|
|
@@ -84,7 +124,6 @@ useAutoSetMode(paths, {
|
|
props.data.cover = paths.value[0].cover
|
|
props.data.cover = paths.value[0].cover
|
|
}
|
|
}
|
|
if (isTemploraryID(props.data.id)) {
|
|
if (isTemploraryID(props.data.id)) {
|
|
- console.log(JSON.stringify(props.data))
|
|
|
|
guides.value.push(props.data)
|
|
guides.value.push(props.data)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -141,7 +180,7 @@ const play = async () => {
|
|
await asyncTimeout(400)
|
|
await asyncTimeout(400)
|
|
playSceneGuide(toRaw(paths.value), (index) => {
|
|
playSceneGuide(toRaw(paths.value), (index) => {
|
|
console.log('guide', index)
|
|
console.log('guide', index)
|
|
- current.value = paths.value[index]
|
|
|
|
|
|
+ current.value = paths.value[index - 1]
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -210,10 +249,42 @@ watchEffect(async () => {
|
|
overflow-x: auto;
|
|
overflow-x: auto;
|
|
display: flex;
|
|
display: flex;
|
|
|
|
|
|
|
|
+ .set-phone-attr {
|
|
|
|
+ width: 80px;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: space-evenly;
|
|
|
|
+ align-items: center;
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ &::before,
|
|
|
|
+ &::after {
|
|
|
|
+ content: '';
|
|
|
|
+ color: rgba(255,255,255,.6);
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 50%;
|
|
|
|
+ transform: translateY(-50%);
|
|
|
|
+ }
|
|
|
|
+ &::before {
|
|
|
|
+ left: 0;
|
|
|
|
+ right: 7px;
|
|
|
|
+ height: 2px;
|
|
|
|
+ background-color: currentColor;
|
|
|
|
+ }
|
|
|
|
+ &::after {
|
|
|
|
+ right: -5px;
|
|
|
|
+ width: 0;
|
|
|
|
+ height: 0;
|
|
|
|
+ border: 5px solid transparent;
|
|
|
|
+ border-left: 7px solid currentColor;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
.photo {
|
|
.photo {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
flex: none;
|
|
flex: none;
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+
|
|
|
|
|
|
&.active {
|
|
&.active {
|
|
outline: 2px solid var(--colors-primary-base);
|
|
outline: 2px solid var(--colors-primary-base);
|
|
@@ -235,9 +306,6 @@ watchEffect(async () => {
|
|
border-radius: 50%;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
|
|
- &:not(:last-child) {
|
|
|
|
- margin-right: 10px;
|
|
|
|
- }
|
|
|
|
|
|
|
|
img {
|
|
img {
|
|
width: 230px;
|
|
width: 230px;
|
|
@@ -256,3 +324,24 @@ watchEffect(async () => {
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|
|
|
|
|
|
|
|
+<style lang="scss">
|
|
|
|
+.set-phone-attr {
|
|
|
|
+ .ui-input .text input {
|
|
|
|
+ padding: 8px 4px;
|
|
|
|
+ }
|
|
|
|
+ .ui-input .text {
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ }
|
|
|
|
+ .ui-input .text.suffix .retouch {
|
|
|
|
+ right: 4px;
|
|
|
|
+ }
|
|
|
|
+ .ui-input .text.suffix input {
|
|
|
|
+ padding-right: 28px;
|
|
|
|
+ text-align: right;
|
|
|
|
+ }
|
|
|
|
+ .ui-input.time .text.suffix input {
|
|
|
|
+ padding-right: 18px;
|
|
|
|
+ text-align: right;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|