274 lines
8.1 KiB
Vue
274 lines
8.1 KiB
Vue
<template>
|
|
<Dialog
|
|
ref="baseDialog"
|
|
class="fly-roam"
|
|
title="飞行漫游"
|
|
width="382px"
|
|
left="180px"
|
|
top="100px"
|
|
:closeCallback="closeCallBack"
|
|
>
|
|
<template #content v-if="show">
|
|
<span class="custom-divider"></span>
|
|
<div class="div-item">
|
|
<div class="row">
|
|
<div class="col" style="flex: 0 0 205px">
|
|
<span class="label">名称</span>
|
|
<input class="input" type="text" name="name" />
|
|
</div>
|
|
<div class="col">
|
|
<input
|
|
type="checkbox"
|
|
name="repeat"
|
|
style="
|
|
width: 16px;
|
|
line-height: 15px;
|
|
height: 15px;
|
|
cursor: pointer;
|
|
width: auto;
|
|
margin-right: 5px;
|
|
"
|
|
/>
|
|
<span class="label">循环播放</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="custom-divider"></span>
|
|
<!-- <div class="div-item">
|
|
<div class="row">
|
|
<div class="col">
|
|
<input
|
|
type="checkbox"
|
|
name="isTotalTime"
|
|
style="
|
|
width: 16px;
|
|
line-height: 15px;
|
|
height: 15px;
|
|
cursor: pointer;
|
|
width: auto;
|
|
margin-right: 5px;
|
|
"
|
|
/>
|
|
<span class="label">设置总时长</span>
|
|
<div class="input-number input-number-unit-3">
|
|
<input
|
|
class="input total-time"
|
|
type="number"
|
|
title=""
|
|
min="0"
|
|
max="999999.99"
|
|
step="0.01"
|
|
name="totalTime"
|
|
value="0"
|
|
/>
|
|
<span class="unit" style="top: 6px">秒(s)</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<input
|
|
type="checkbox"
|
|
name="repeat"
|
|
style="
|
|
width: 16px;
|
|
line-height: 15px;
|
|
height: 15px;
|
|
cursor: pointer;
|
|
width: auto;
|
|
margin-right: 5px;
|
|
"
|
|
/>
|
|
<span class="label">是否循环播放</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="custom-divider"></span> -->
|
|
<div class="div-item">
|
|
<div class="row">
|
|
<!-- <div class="col">
|
|
<button class="add-point">
|
|
<svg class="icon-add"><use xlink:href="#yj-icon-add"></use></svg>增加视点
|
|
</button>
|
|
</div> -->
|
|
<!-- <div class="col">
|
|
<button class="modify-point">
|
|
<svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>调整视点
|
|
</button>
|
|
</div> -->
|
|
<div class="col">
|
|
<button class="afreshPlay">
|
|
<svg class="icon-play"><use xlink:href="#yj-icon-play"></use></svg>全局播放
|
|
</button>
|
|
<button class="cease" style="margin-left: 10px">
|
|
<svg-icon name="stop" :size="12" color="rgba(255, 255, 255, 1)"></svg-icon>结束播放
|
|
</button>
|
|
</div>
|
|
<!-- <div class="col">
|
|
<button class="cease">
|
|
<svg class="icon-pause"><use xlink:href="#yj-icon-pause"></use></svg>结束播放
|
|
</button>
|
|
</div> -->
|
|
</div>
|
|
<div class="row">
|
|
<div class="col" style="flex: 0 0 200px">
|
|
<input
|
|
type="checkbox"
|
|
name="isTotalTime"
|
|
style="
|
|
width: 16px;
|
|
line-height: 15px;
|
|
height: 15px;
|
|
cursor: pointer;
|
|
width: auto;
|
|
margin-right: 5px;
|
|
"
|
|
/>
|
|
<span class="label">设置总时长</span>
|
|
<div class="input-number input-number-unit-3">
|
|
<input
|
|
class="input total-time"
|
|
type="number"
|
|
title=""
|
|
min="0"
|
|
max="999999.99"
|
|
step="0.01"
|
|
name="totalTime"
|
|
value="0"
|
|
/>
|
|
<span class="unit" style="top: 6px">s</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
<!-- <button style="margin-left: 10px" @click="apply">应用</button> -->
|
|
</div>
|
|
</div>
|
|
<div class="table">
|
|
<div class="table-head">
|
|
<div class="tr">
|
|
<div class="th">序号</div>
|
|
<div class="th">时长(s)</div>
|
|
<div class="th">操作</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-body">
|
|
<div class="table-empty">
|
|
<div class="empty-img"></div>
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="custom-divider"></span>
|
|
</template>
|
|
<template #footer>
|
|
<div style="position: absolute; left: 24px; display: flex">
|
|
<button class="add-point">
|
|
<svg class="icon-add"><use xlink:href="#yj-icon-add"></use></svg>增加视点
|
|
</button>
|
|
</div>
|
|
<button class="saveRoam" @click="draw">保存</button>
|
|
<button @click="close">取消</button>
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive } from 'vue'
|
|
import { inject } from 'vue'
|
|
import Dialog from '@/components/dialog/baseDialog.vue'
|
|
import { app } from 'electron'
|
|
import { TreeApi } from '@/api/tree'
|
|
import { useTreeNode } from '../tree/hooks/treeNode'
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
const { cusAddNodes } = useTreeNode()
|
|
|
|
const baseDialog: any = ref(null)
|
|
const eventBus: any = inject('bus')
|
|
let viewPointHeight:any = ref(0)
|
|
|
|
var show: any = ref(false)
|
|
var flyRoam: any = reactive([])
|
|
eventBus.on('flyRoamDialog', () => {
|
|
show.value = true
|
|
baseDialog.value?.open()
|
|
setTimeout(() => {
|
|
flyRoam = YJ.Global.FlyRoam.open(window.earth, { repeat: Infinity }, {}, draw)
|
|
}, 100)
|
|
})
|
|
const draw = (data) => {
|
|
if (data.points.length != 0) {
|
|
let selectedNodes = window.treeObj.getSelectedNodes()
|
|
let node = selectedNodes && selectedNodes[selectedNodes.length - 1]
|
|
let parentId
|
|
if (node) {
|
|
if (node.sourceType === 'directory') {
|
|
parentId = node.id
|
|
} else {
|
|
parentId = node.parentId
|
|
}
|
|
}
|
|
let id = new YJ.Tools().randomString()
|
|
let paramsData: any = {
|
|
params: data,
|
|
id,
|
|
sourceName: '漫游路径',
|
|
sourceType: 'roam',
|
|
parentId: parentId
|
|
}
|
|
|
|
TreeApi.addOtherSource(paramsData)
|
|
paramsData.isShow = true
|
|
paramsData.params = JSON.stringify(paramsData.params)
|
|
cusAddNodes(window.treeObj, paramsData.parentId, [paramsData])
|
|
baseDialog.value?.close()
|
|
} else {
|
|
ElMessage({
|
|
message: '请添加数据',
|
|
type: 'warning'
|
|
})
|
|
}
|
|
|
|
console.log(data)
|
|
}
|
|
|
|
const clangeViewPointHeight = () => {}
|
|
const viewPointHeightInput = () => {
|
|
let dom:any = document.getElementById('viewPointHeight')
|
|
if (viewPointHeight.value < dom.min * 1) {
|
|
viewPointHeight.value = dom.min * 1
|
|
} else if (viewPointHeight.value > dom.max * 1) {
|
|
viewPointHeight.value = dom.max * 1
|
|
}
|
|
}
|
|
const closeCallBack = (e) => {
|
|
YJ.Global.FlyRoam.cease(window.earth)
|
|
YJ.Global.FlyRoam.close()
|
|
}
|
|
const apply = (e) => {
|
|
YJ.Global.FlyRoam.apply()
|
|
}
|
|
const close = (e) => {
|
|
show.value = false
|
|
baseDialog.value?.close()
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.afreshPlay {
|
|
background:
|
|
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
|
|
linear-gradient(180deg, rgba(27, 248, 195, 0.2) 0%, rgba(27, 248, 195, 0) 100%) !important;
|
|
border: 1px solid rgba(27, 248, 195, 1) !important;
|
|
}
|
|
.cease {
|
|
background:
|
|
linear-gradient(180deg, rgba(241, 108, 85, 0.2) 0%, rgba(241, 108, 85, 0) 100%),
|
|
rgba(0, 0, 0, 0.5) !important;
|
|
border: 1px solid rgba(241, 108, 85, 1) !important;
|
|
}
|
|
::v-deep .content input.YJ-custom-checkbox[type='checkbox'] {
|
|
border: 1px solid rgba(var(--color-sdk-base-rgb), 1) !important;
|
|
background-color: rgba(0, 0, 0, 0.5) !important;
|
|
}
|
|
</style>
|