<template>
|
<div>
|
<Popup ref="demo" :title="title" :left="left" :top="top" @close="close">
|
<div class="topbtn">
|
<el-button type="primary" @click="pause(true)" v-if="isPlay"
|
>暂停</el-button
|
>
|
<el-button
|
type="primary"
|
@click="pause(false)"
|
v-if="!isPlay && playIndex"
|
>继续</el-button
|
>
|
<el-button type="primary" @click="stop" v-if="isPlay || playIndex"
|
>停止</el-button
|
>
|
<el-button
|
type="primary"
|
@click="start(undefined)"
|
v-if="!isPlay && !playIndex"
|
>开始播放</el-button
|
>
|
<el-button type="primary" @click="save">保存</el-button>
|
</div>
|
<div class="dataTable" v-contextmenu:contextmenu>
|
<el-table
|
ref="table"
|
@cell-mouse-enter="mouseIn"
|
@cell-mouse-leave="mouseOut"
|
@row-contextmenu="rightClick"
|
@row-dblclick="rowClick"
|
:data="animationData"
|
style="width: 100%"
|
border
|
max-height="450"
|
highlight-current-row
|
>
|
<el-table-column
|
label="ID"
|
type="index"
|
width="40px"
|
align="center"
|
:resizable="false"
|
>
|
</el-table-column>
|
<el-table-column
|
type="index"
|
width="60px"
|
label="类型"
|
align="center"
|
:resizable="false"
|
>
|
<template slot-scope="scope">
|
<div size="medium">
|
{{ scope.row.type === "位置" ? "位置" : scope.row.actionType }}
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="描述"
|
align="center"
|
width=" 180px"
|
:resizable="false"
|
>
|
<template slot-scope="scope">
|
<el-input size="medium" v-model="scope.row.description">
|
</el-input>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="响应方式"
|
align="center"
|
width="100px"
|
:resizable="false"
|
>
|
<template slot-scope="scope">
|
<el-select
|
v-model="scope.row.value"
|
@change="change(scope.row.value, scope.$index)"
|
placeholder="请选择"
|
>
|
<el-option label="点击" value="0"> </el-option>
|
<el-option label="立即" value="1"> </el-option>
|
<el-option label="等待" value="2"> </el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="等待时间(秒)"
|
align="center"
|
:resizable="false"
|
width="130px"
|
>
|
<template slot-scope="scope">
|
<el-input-number
|
controls-position="right"
|
v-model="scope.row.time"
|
:disabled="scope.row.value !== '2'"
|
>
|
</el-input-number>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="操作"
|
align="center"
|
width="200px"
|
:resizable="false"
|
>
|
<template slot-scope="scope">
|
<el-button-group class="btncontainer">
|
<el-button
|
type="primary"
|
icon="el-icon-arrow-up"
|
@click="moveUp(scope.$index)"
|
:disabled="scope.$index == 0"
|
></el-button>
|
<el-button
|
type="primary"
|
icon="el-icon-arrow-down"
|
@click="moveDown(scope.$index)"
|
:disabled="scope.$index == animationData.length - 1"
|
></el-button>
|
<el-popconfirm
|
title="确定删除吗？"
|
@confirm="remove(scope.$index)"
|
>
|
<el-button
|
slot="reference"
|
type="primary"
|
icon="el-icon-delete"
|
></el-button>
|
</el-popconfirm>
|
</el-button-group>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<v-contextmenu ref="contextmenu" v-model="showRightMenu">
|
<v-contextmenu-item @click="addData('location')"
|
>添加位置</v-contextmenu-item
|
>
|
<v-contextmenu-submenu title="添加操作">
|
<v-contextmenu-item @click="addData('action', '显示对象')"
|
>显示对象</v-contextmenu-item
|
>
|
<v-contextmenu-item @click="addData('action', '隐藏对象')"
|
>隐藏对象</v-contextmenu-item
|
>
|
<v-contextmenu-item @click="undergroundMode(true)"
|
>开启地下模式</v-contextmenu-item
|
>
|
<v-contextmenu-item @click="undergroundMode(false)"
|
>关闭地下模式
|
</v-contextmenu-item>
|
</v-contextmenu-submenu>
|
<v-contextmenu-item
|
@click="updateLocation"
|
v-if="selectItem.type === '位置'"
|
>更新位置</v-contextmenu-item
|
>
|
<v-contextmenu-item
|
@click="updateAction"
|
v-if="selectItem.type === '操作' && !selectItem.isUnderground"
|
>更新操作</v-contextmenu-item
|
>
|
</v-contextmenu>
|
</Popup>
|
<div class="controlbtn" v-if="isPlay || playIndex">
|
<el-button-group>
|
<el-button
|
type="primary"
|
icon="el-icon-video-play"
|
circle
|
@click="next"
|
></el-button>
|
<!-- <el-button type="primary" icon="el-icon-video-pause" circle></el-button> -->
|
<el-button
|
type="primary"
|
icon="el-icon-close"
|
@click="stop"
|
circle
|
></el-button>
|
</el-button-group>
|
</div>
|
<dataTree ref="dataTree" @success="getTreedata" @updateData="updateData" />
|
</div>
|
</template>
|
<script>
|
import contentmenu from 'v-contextmenu'
|
import Popup from "@tools/Popup";
|
import dataTree from "@c/demoAnimation/dataTree";
|
import Bus from "@tools/Bus";
|
export default {
|
name: "animationEdit",
|
components: {
|
Popup,
|
dataTree,
|
},
|
data() {
|
return {
|
title: "演示动画",
|
left: "calc(100% - 725px)",
|
top: "10px",
|
value: "0",
|
selectItem: { type: "" },
|
rightClickMenuStyle: {},
|
rightClickMenuDisplay: false,
|
animationData: [], // 一组动画的一系列片段
|
nodeId: "", // 当前操作演示动画id
|
showRightMenu: false,
|
playIndex: 0,
|
palyingAnimation: [], //正在播放的数据
|
isPlay: false, // 是否正在播放
|
showControl: false,
|
};
|
},
|
methods: {
|
open(id, data) {
|
this.nodeId = id;
|
if (data) {
|
this.animationData = data;
|
}
|
this.$refs.demo.open();
|
},
|
close() {
|
this.nodeId = "";
|
this.animationData = [];
|
this.save();
|
this.stop();
|
},
|
// 获取下标
|
getIndexById(id) {
|
for (let i = 0; i < this.animationData.length; i++) {
|
if (this.animationData[i].id === id) {
|
return i;
|
}
|
}
|
return undefined;
|
},
|
// 上移
|
moveUp(index) {
|
const upDate = this.animationData[index - 1];
|
this.animationData.splice(index - 1, 1);
|
this.animationData.splice(index, 0, upDate);
|
},
|
// 下移
|
moveDown(index) {
|
const downDate = this.animationData[index + 1];
|
this.animationData.splice(index + 1, 1);
|
this.animationData.splice(index, 0, downDate);
|
},
|
// 删除
|
remove(index) {
|
this.animationData.splice(index, 1);
|
},
|
//获取视角
|
getView() {
|
let degrees = sgworld.Navigate.getDegrees(); //经纬度
|
let heading = Cesium.Math.toDegrees(Viewer.camera.heading); //水平角
|
let pitch = Cesium.Math.toDegrees(Viewer.camera.pitch); //俯仰角度
|
return {
|
lon: degrees.lon.toFixed(6),
|
lat: degrees.lat.toFixed(6),
|
height: degrees.height.toFixed(2),
|
heading,
|
pitch,
|
};
|
},
|
// 获取树中记录的数据
|
getTreedata(selectInfo, actionType) {
|
let obj = {
|
id: window.sgworld.Core.getuid(),
|
description: "此处编辑描述",
|
actionType, //记录 操作的种类
|
type: "操作",
|
selectInfo,
|
value: "1",
|
time: undefined,
|
isClick: false,
|
};
|
if (this.selectItem && this.selectItem.id) {
|
let index = this.getIndexById(this.selectItem.id);
|
this.animationData.splice(index + 1, 0, obj);
|
} else {
|
this.animationData.push(obj);
|
}
|
},
|
// 添加记录
|
addData(type, actionType) {
|
if (type === "action") {
|
this.$refs.dataTree.open(actionType);
|
} else {
|
let location = this.getView();
|
let obj = {
|
id: window.sgworld.Core.getuid(),
|
description: "此处编辑描述",
|
type: "位置",
|
view: location,
|
value: "1",
|
time: undefined,
|
isClick: false,
|
};
|
if (this.selectItem) {
|
let index = this.getIndexById(this.selectItem.id);
|
this.animationData.splice(index + 1, 0, obj);
|
} else {
|
this.animationData.push(obj);
|
}
|
}
|
},
|
// 地下模式
|
undergroundMode(val) {
|
let actionType = val ? "开启地下模式" : "关闭地下模式";
|
let obj = {
|
id: window.sgworld.Core.getuid(),
|
isUnderground: true,
|
description: "此处编辑描述",
|
actionType,
|
type: "操作",
|
value: "1",
|
time: undefined,
|
isClick: false,
|
};
|
if (this.selectItem) {
|
let index = this.getIndexById(this.selectItem.id);
|
this.animationData.splice(index + 1, 0, obj);
|
} else {
|
this.animationData.push(obj);
|
}
|
},
|
// 更新位置
|
updateLocation() {
|
if (this.selectItem && this.selectItem.type === "位置") {
|
let location = this.getView();
|
let index = this.getIndexById(this.selectItem.id);
|
if (this.animationData[index].view) {
|
this.animationData[index].view = location;
|
}
|
}
|
},
|
// 更新操作
|
updateAction() {
|
if (this.selectItem && this.selectItem.type === "操作") {
|
this.$refs.dataTree.open(
|
this.selectItem.actionType,
|
this.selectItem.selectInfo,
|
true
|
);
|
}
|
},
|
//保存更新
|
updateData(newData) {
|
let index = this.getIndexById(this.selectItem.id);
|
this.animationData[index].selectInfo = newData;
|
},
|
// 保存
|
save() {
|
this.$emit("success", this.nodeId, this.animationData);
|
},
|
// 开始播放
|
start(data) {
|
if (data) {
|
this.animationData = data;
|
}
|
this.playIndex = 0;
|
this.isPlay = true;
|
this.display();
|
},
|
// 播放
|
display(data, click = false) {
|
if (data) {
|
this.stop();
|
this.playIndex = this.getIndexById(data.id);
|
this.isPlay = true;
|
click = true;
|
}
|
if (this.playIndex > this.animationData.length - 1) {
|
this.stop();
|
return;
|
} else if (!this.isPlay) {
|
return;
|
}
|
let thisPlay = this.animationData[this.playIndex];
|
this.$refs.table && this.$refs.table.setCurrentRow(thisPlay);
|
if (thisPlay.isClick && !click) {
|
this.playIndex--;
|
} else {
|
if (thisPlay.type === "位置") {
|
let position = thisPlay.view;
|
let maximumHeight =
|
position.height < 0 && Viewer.camera.positionCartographic.height < 0
|
? Math.max([
|
position.height,
|
Viewer.camera.positionCartographic.height,
|
])
|
: undefined;
|
Viewer.camera.flyTo({
|
destination: Cesium.Cartesian3.fromDegrees(
|
position.lon,
|
position.lat,
|
position.height
|
),
|
orientation: {
|
heading: Cesium.Math.toRadians(position.heading),
|
pitch: Cesium.Math.toRadians(position.pitch),
|
roll: 0,
|
},
|
maximumHeight,
|
});
|
} else if (thisPlay.type === "操作") {
|
let show;
|
if (thisPlay.actionType === "显示对象") {
|
show = true;
|
} else if (thisPlay.actionType === "隐藏对象") {
|
show = false;
|
}
|
if (thisPlay.actionType === "开启地下模式") {
|
sgworld.Analysis.UndergroundMode(true, 0.5);
|
} else if (thisPlay.actionType === "关闭地下模式") {
|
sgworld.Analysis.UndergroundMode(false);
|
}
|
this.$emit("setAnimation", thisPlay.selectInfo, show);
|
}
|
let time = 0;
|
if (thisPlay.type === "位置") {
|
time = 3;
|
}
|
if (thisPlay.time) {
|
this.timeOut(() => {
|
// 定时
|
this.playIndex++;
|
this.display();
|
}, thisPlay.time + time);
|
} else {
|
this.timeOut(() => {
|
this.playIndex++;
|
this.display();
|
}, time);
|
}
|
}
|
},
|
next() {
|
this.playIndex++;
|
this.display(undefined, true);
|
},
|
// 停止
|
stop() {
|
clearTimeout(this.time);
|
sgworld.Navigate.Stop(); //取消飞行状态
|
this.$refs.table && this.$refs.table.setCurrentRow();
|
window.sgworld.Analysis.UndergroundMode(false, 0.5);
|
this.playIn;
|
this.playIndex = 0;
|
this.isPlay = false;
|
},
|
//暂停
|
pause(val) {
|
this.isPlay = !this.isPlay;
|
if (!val) {
|
this.display();
|
}
|
},
|
timeOut(callback, time) {
|
clearTimeout(this.time);
|
this.time = setTimeout(callback, time * 1000);
|
},
|
change(value, index) {
|
switch (value) {
|
case "0":
|
this.animationData[index].isClick = true;
|
this.animationData[index].time = undefined;
|
break;
|
case "1":
|
this.animationData[index].time = undefined;
|
this.animationData[index].isClick = false;
|
break;
|
case "2":
|
this.animationData[index].time = 1;
|
this.animationData[index].isClick = false;
|
break;
|
}
|
},
|
rowClick(row, column, event) {
|
// this.display(row);
|
},
|
//鼠标操作
|
mouseIn(row) {
|
if (this.$refs.contextmenu.visible || this.$refs.dataTree.isOpen) {
|
return;
|
}
|
this.selectItem = row;
|
},
|
mouseOut() {
|
if (this.$refs.contextmenu.visible || this.$refs.dataTree.isOpen) {
|
return;
|
}
|
this.selectItem = { type: "" };
|
},
|
rightClick(row, column, event) {
|
if (row) {
|
this.selectItem = row;
|
}
|
},
|
},
|
mounted() {
|
Bus.$off("closeAnimationEdit");
|
Bus.$on("closeAnimationEdit", () => {
|
this.close();
|
this.$refs.demo.close();
|
});
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.topbtn {
|
margin-left: 5px;
|
.el-button {
|
width: 100px;
|
}
|
}
|
.popupBody {
|
.dataTable {
|
margin: 10px 5px;
|
/deep/ .el-table__cell {
|
padding: 7px 0 !important;
|
}
|
|
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
|
width: 10px;
|
scrollbar-arrow-color: red;
|
}
|
// 设置滚动条的背景色和圆角
|
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
background: #797979;
|
scrollbar-arrow-color: red;
|
}
|
}
|
}
|
.controlbtn {
|
.el-button-group {
|
width: 80px;
|
position: fixed;
|
top: 140px;
|
left: 50%;
|
right: 50%;
|
z-index: 999;
|
margin: auto auto;
|
}
|
}
|
</style>
|
