<template>
|
<div>
|
<div>
|
<el-row :gutter="20" style="margin-bottom: 10px">
|
<el-col :span="8">
|
<span
|
style="font-size: 14px;font-weight: bold;color: #636E78;line-height: 19px;color:#fff">漫游路径</span></el-col>
|
<el-col :span="4" :offset="12">
|
<div @click="addPath" style="cursor: pointer;">
|
<i class="el-icon-plus" style="color:#fff"></i>
|
</div>
|
</el-col>
|
</el-row>
|
<div class="lj_box scrollbar">
|
<div v-for="(item, index) in ljList" :class="ljIndex === index ? 'lj_box_item background' : 'lj_box_item'"
|
ref="lj">
|
<el-row>
|
<div @click="clickLjItem(index)">
|
<el-col :span="19">
|
<div style="overflow:hidden;width:250px;text-Overflow:ellipsis;white-Space:nowrap;">{{
|
(index + 1) >= 10 ? (index + 1) : '0' + (index + 1) }}{{ item.name }}</div>
|
</el-col>
|
</div>
|
<el-col :span="2"><i class="el-icon-video-play" @click="palyPath(index, `1`, true)"
|
:ref='`play${index}`'></i></el-col>
|
<el-col :span="2" :offset="1"><i class="el-icon-close" @click="removeLj(index)"></i></el-col>
|
</el-row>
|
</div>
|
</div>
|
</div>
|
<div class="lj_box_2" v-if="showLjBox">
|
<el-row class="lj_box_2_top">
|
<el-col :span="8">
|
<div class="lj_box_2_text">新建漫游路径</div>
|
</el-col>
|
<el-col :span="2" :offset="14">
|
<div @click="cancle()"><i class="el-icon-close lj_box_2_close"></i></div>
|
</el-col>
|
</el-row>
|
<div style="color:#3C4A56;font-size: 14px">
|
<el-row style="margin-bottom: 10px">
|
<el-col :span="7">
|
<div style="line-height: 30px;color:#fff">路径名称</div>
|
</el-col>
|
<el-col :span="17">
|
<el-input size="small" v-model="ljName" @focus="foucsRemoveEventListener"></el-input>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="7">
|
<div style="line-height: 30px;color:#fff">路径流向</div>
|
</el-col>
|
<el-col :span="16">
|
<div @click="addPoint" style="width:20px;margin-top:5px;cursor: pointer;">
|
<img style="margin: auto 2px;" src="../../../../assets/img/icon/icon_tianjiashidian_nor.png"
|
alt="">
|
</div>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="17" :offset="7">
|
<div class="sd_box scrollbar" v-if="!ljFirst">
|
<div class="sd_box_item" v-for="(item, index) in ljList[ljIndex].points" @dblclick="flyTo(index)" style="color:#fff">
|
<el-row>
|
<el-col :span="22">{{ item.name }}</el-col>
|
<el-col :span="2"><i class="el-icon-close" @click="removeSd(index)"></i></el-col>
|
</el-row>
|
</div>
|
</div>
|
<div class="sd_box scrollbar" v-if="ljFirst">
|
<div class="sd_box_item" v-for="(item, index) in pointList" @dblclick="flyTo(index)" style="color:#fff">
|
<el-row>
|
<el-col :span="22">{{ item.name }}</el-col>
|
<el-col :span="2"><i class="el-icon-close" @click="removeSd(index)"></i></el-col>
|
</el-row>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<div style="display: flex;padding-left:80px;" class="sd_box_b">
|
<div class="sd_box_b_text;" style="color:#fff">漫游时间</div>
|
<el-input class="sd_box_b_input" size="mini" type="number" :min="0" v-model="ljTime"
|
@change="timeChange"></el-input>
|
<div style="line-height: 30px;color:#fff">秒</div>
|
<el-button class="sd_box_b_button" size="small" @click="palyPath(ljIndex, `2`)"><i v-bind:class="yulan"
|
ref="play" style="margin-right:5px"></i>预览</el-button>
|
</div>
|
<div class="sd_box_foot">
|
<el-button @click="cancle()" size="mini">取消</el-button>
|
<el-button type="primary" @click="returnLj()" size="mini">保存</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { saveOrUpdatePalh,getRoamPathList,deletePath } from "@/api/datacenter.js"
|
export default {
|
data() {
|
return {
|
yulan: "el-icon-video-play",
|
moveCameraTimeHandle: 0,
|
showLjBox: false,//路径漫游
|
ljList: [], //路径列表
|
ljName: null,
|
ljIndex: null,
|
ljTime: null,
|
ljFirst: true,
|
pointList: [],
|
pointListOld: [],
|
projectId: ""
|
}
|
},
|
methods: {
|
//刷新漫游路径目录界面
|
renovateData() {
|
//获取路径数据
|
getRoamPathList(1).then((res) => {
|
console.log(res)
|
if (res.code == 200) { this.ljList = res.data }
|
console.log(this.ljList)
|
})
|
},
|
//取消按钮
|
cancle() {
|
this.showLjBox = false
|
this.ljFirst = false
|
this.ljList[this.ljIndex].points = JSON.parse(JSON.stringify(this.pointListOld))
|
},
|
addPath() {
|
this.showLjBox = true
|
this.ljFirst = true
|
this.ljName = "新路径"
|
this.ljTime = 15
|
this.pointList = []
|
},
|
//移除漫游路径
|
removeLj(index) {
|
let that = this
|
let params = { "id": this.ljList[index].id }
|
deletePath(params).then((res) => {
|
if (res.code == 200) { this.$message.info("删除路径成功"); that.renovateData(); if (!this.ljFirst) this.showLjBox = false }
|
})
|
},
|
//单击漫游路径打开参数窗口
|
clickLjItem(index) {
|
this.showLjBox = true
|
this.ljFirst = false
|
this.pointListOld = JSON.parse(JSON.stringify(this.ljList[index].points))
|
this.ljName = this.ljList[index].name
|
this.ljIndex = index
|
this.ljTime = ((this.ljList[index].totalTime) * (this.ljList[this.ljIndex]?.points?.length)) || 15
|
},
|
//保存漫游信息
|
returnLj() {
|
if (this.ljName == "") {
|
this.$message.error("请输入路径名称")
|
return
|
}
|
if (this.ljName.match(/^[ ]*$/)) {
|
this.$message.error("名称不能只由空格组成")
|
return
|
}
|
//保存 新建 漫游路径信息
|
if (this.ljFirst) {
|
this.showLjBox = !this.showLjBox
|
let params = {
|
name: this.ljName,
|
points: this.pointList,
|
userId: "1",
|
totalTime: (this.ljTime / this.pointList.length),
|
}
|
saveOrUpdatePalh(params).then((res) => {
|
console.log(res)
|
if (res.code == 200) { this.$message.info("保存新路径成功"); this.renovateData() }
|
})
|
this.ljFirst = false
|
} else {
|
//保存 更改 漫游路径信息
|
this.showLjBox = !this.showLjBox
|
let params = {
|
id: this.ljList[this.ljIndex].id,
|
name: this.ljName,
|
points: this.ljList[this.ljIndex].points,
|
projectId: this.ljList[this.ljIndex].projectId,
|
totalTime: (this.ljTime / this.ljList[this.ljIndex].points.length),
|
}
|
saveOrUpdatePalh(params).then((res) => {
|
console.log(res)
|
if (res.code == 200) { this.$message.info("修改路径信息成功"); this.renovateData() }
|
})
|
}
|
},
|
//添加视点
|
addPoint() {
|
let earthCtrl = window.sgworld
|
let num;
|
//判断是修改路径时的视点修改，还是新建路径时的视点修改
|
if (this.ljFirst) {
|
if (!this.pointList) return
|
if ((this.pointList?.length < 1))
|
num = 1
|
else num = this.pointList[this.pointList.length - 1].num
|
console.log(earthCtrl)
|
//新建路径添加视点
|
this.pointList.push({
|
name: "视点" + num,
|
class: "LOOKAT",
|
lon: earthCtrl.camera.position.longitude.toFixed(6),
|
lat: earthCtrl.camera.position.latitude.toFixed(6),
|
alt: earthCtrl.camera.position.height.toFixed(6),
|
heading: earthCtrl.camera.heading.toFixed(6),
|
pitch: earthCtrl.camera.pitch.toFixed(6),
|
roll: earthCtrl.camera.roll.toFixed(6),
|
num: num + 1,
|
})
|
console.log(this.pointList)
|
} else {
|
//修改路径添加视点
|
if (!this.ljList[this.ljIndex]?.points) return
|
let earthCtrl = window.earthCtrl
|
if (!earthCtrl) return
|
if ((this.ljList[this.ljIndex]?.points?.length < 1))
|
num = 1
|
else num = this.ljList[this.ljIndex]?.points[this.ljList[this.ljIndex]?.points?.length - 1].num
|
this.ljList[this.ljIndex]?.points.push({
|
name: "视点" + num,
|
class: "LOOKAT",
|
lon: earthCtrl.camera.position.longitude,
|
lat: earthCtrl.camera.position.latitude,
|
alt: earthCtrl.camera.position.height,
|
heading: earthCtrl.camera.heading,
|
pitch: earthCtrl.camera.pitch,
|
roll: earthCtrl.camera.roll,
|
num: num + 1,
|
})
|
}
|
},
|
//停止漫游
|
stopManYou() {
|
this.stopMY = false
|
},
|
//根据视点开始漫游
|
palyPath(index, status, a) {
|
if (!window.sgworld) return;
|
let that = this;
|
//判断是从新建窗口，更改窗口，或者目录处开始漫游
|
this.stopMY = true
|
console.log(a, !this.ljFirst)
|
if (a || !this.ljFirst) {
|
//更改路径窗口，目录处开始漫游
|
if ((that.ljList[index]?.points).length < 1) that.$message.error('请先添加视点！')
|
else {
|
let time = that.ljList[index]?.totalTime
|
if (this.showLjBox && !this.ljFirst && this.ljIndex == index) {
|
time = (that.ljTime / that.ljList[index]?.points.length)
|
}
|
let num = 0
|
let pointLength = that.ljList[index]?.points.length
|
let points = that.ljList[index]?.points
|
// this.$parent.$parent.showLoading(true)
|
if (status == "1") { this.$refs[`play${index}`][0].setAttribute('class', 'el-icon-video-pause') }
|
if (status == "2") { this.yulan = "el-icon-video-pause" }
|
this.flyToPoints(points, points[num], num, time, pointLength, index, a)
|
}
|
} else {
|
//新建路径窗口
|
if (this.pointList.length < 1) that.$message.error('请先添加视点！')
|
else {
|
let time = (that.ljTime / this.pointList.length)
|
let num = 0
|
let pointLength = this.pointList.length
|
let points = this.pointList
|
// this.$parent.$parent.showLoading(true)
|
this.yulan = "el-icon-video-pause"
|
this.flyToPoints(points, points[num], num, time, pointLength, index)
|
}
|
}
|
},
|
//漫游
|
flyToPoints(points, point, num, time, pointLength, index, a) {
|
let earthCtrl = window.sgworld
|
let that = this
|
let lat = point.lat
|
let lon = point.lon
|
let alt = point.alt
|
let heading = point.heading
|
let pitch = point.pitch
|
earthCtrl.camera.flyTo(lon, lat, alt, heading, pitch, 0.0, time, function () {
|
if (!that.stopMY) {
|
that.yulan = "el-icon-video-play"
|
if (a) { that.$refs[`play${index}`][0]?.setAttribute('class', 'el-icon-video-play') }
|
return
|
}
|
num++
|
if (num < pointLength) { that.flyToPoints(points, points[num], num, time, pointLength, index, a) }
|
else {
|
// that.$parent.$parent.showLoading(false)
|
that.yulan = "el-icon-video-play"
|
if (a) { that.$refs[`play${index}`][0]?.setAttribute('class', 'el-icon-video-play') }
|
}
|
});
|
},
|
timeChange(val) {
|
if (val <= 0) {
|
this.ljTime = 1;
|
this.$message.error("输入时间值应大于0")
|
return;
|
}
|
if (val > 300) {
|
this.ljTime = 300;
|
this.$message.error("输入时间值应小于300")
|
return;
|
}
|
let pList = this.ljList[this.ljIndex]?.pointList;
|
if (pList) {
|
for (let i in pList) {
|
(pList)[i].stopTime = ((this.ljTime / pList.length) * 1000);
|
(pList)[i].timeStamp = ((this.ljTime / pList.length) * 1000);
|
}
|
}
|
},
|
//去除当前点击视点
|
removeSd(index) {
|
if (!this.ljFirst) {
|
if (this.ljList[this.ljIndex]?.points?.length < index) return;
|
this.ljList[this.ljIndex]?.points.splice(index, 1);
|
} else {
|
if (this.pointList?.length < index) return;
|
this.pointList.splice(index, 1);
|
}
|
},
|
//飞向视点
|
flyTo(index) {
|
if (!this.ljFirst) {
|
let lat = this.ljList[this.ljIndex].points[index].lat
|
let lon = this.ljList[this.ljIndex].points[index].lon
|
let alt = this.ljList[this.ljIndex].points[index].alt
|
let heading = this.ljList[this.ljIndex].points[index].heading
|
let pitch = this.ljList[this.ljIndex].points[index].pitch
|
earthCtrl.camera.flyTo(lon, lat, alt, heading, pitch, 0.0, 3);
|
}
|
else {
|
let lat = this.pointList[index].lat
|
let lon = this.pointList[index].lon
|
let alt = this.pointList[index].alt
|
let heading = this.pointList[index].heading
|
let pitch = this.pointList[index].pitch
|
earthCtrl.camera.flyTo(lon, lat, alt, heading, pitch, 0.0, 3);
|
}
|
},
|
//输入框获得焦点移除键盘漫游事件句柄
|
foucsRemoveEventListener() {
|
document.removeEventListener('keydown', this.keyDown)
|
document.removeEventListener('keyup', this.keyUp)
|
this.moveCameraTimeHandle = 0
|
}
|
},
|
mounted() {
|
this.renovateData()
|
},
|
}
|
</script>
|
|
<style scoped lang="less">
|
.lj_box {
|
color: #fff;
|
height: 110px;
|
overflow: auto;
|
padding: 10px;
|
|
.lj_box_item {
|
height: 35px;
|
border-radius: 4px;
|
line-height: 34px;
|
padding: 0 5px;
|
font-size: 14px;
|
|
i {
|
font-size: 18px;
|
cursor: pointer;
|
}
|
|
&:hover {
|
background-color: #3384c6;
|
;
|
opacity: 0.8;
|
cursor: pointer;
|
}
|
}
|
|
.background {
|
opacity: 0.8;
|
background-color: #3384c6;
|
;
|
}
|
}
|
|
.lj_box_2 {
|
width: 300px;
|
border-radius: 3px;
|
padding: 10px;
|
color: #fff;
|
|
.lj_box_2_top {
|
margin: 0 0 15px;
|
|
.lj_box_2_text {
|
color: #ffffff;
|
line-height: 25px;
|
font-size: 14px
|
}
|
|
.lj_box_2_close:hover {
|
cursor: pointer;
|
}
|
}
|
|
.sd_box {
|
margin: 0 0 10px;
|
border-radius: 2px;
|
border: 1px solid #BEC2C6;
|
min-height: 82px;
|
max-height: 82px;
|
overflow: auto;
|
padding: 5px;
|
|
.sd_box_item {
|
height: 30px;
|
border-radius: 4px;
|
line-height: 29px;
|
padding: 0 5px;
|
font-size: 12px;
|
|
i {
|
font-size: 18px;
|
cursor: pointer;
|
}
|
|
&:hover {
|
background-color: #3384c6;
|
cursor: pointer;
|
}
|
}
|
}
|
|
.sd_box_b {
|
.sd_box_b_text {
|
line-height: 30px;
|
font-size: 14px;
|
}
|
|
.sd_box_b_input {
|
width: 48px;
|
margin-left: 5px;
|
margin-right: 5px;
|
|
/deep/ .el-input__inner {
|
padding: 4px;
|
}
|
}
|
|
.sd_box_b_button {
|
padding: 0;
|
width: 60px;
|
height: 28px;
|
line-height: 7px;
|
border: 1px solid #148BD1;
|
color: #148BD1;
|
margin: 0px 5px;
|
}
|
}
|
|
.sd_box_foot {
|
height: 32px;
|
margin: 20px 0 5px;
|
text-align: center;
|
|
button {
|
height: 32px;
|
line-height: 7px;
|
width: 88px;
|
}
|
}
|
}
|
</style>
|
