<template>
|
<div>
|
<Popup
|
ref="pathAnimation"
|
:title="form.title"
|
width="416px"
|
left="calc(100% - 450px)"
|
@close="close"
|
>
|
<div class="btnContainer">
|
<el-button type="primary" align="center" @click="addRoute"
|
>新增路线</el-button
|
>
|
</div>
|
<div class="dataTable">
|
<el-table
|
:data="form.PathAnimation.tData"
|
style="width: 100%"
|
border
|
max-height="250"
|
>
|
<el-table-column prop="name" align="center" label="名称" width="140">
|
<template slot-scope="scope">
|
<el-input size="medium" v-model="scope.row.name"> </el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center">
|
<template slot-scope="scope">
|
<el-button size="mini" @click="detail(scope.row)">浏览</el-button>
|
<el-button size="mini" type="success" @click="change(scope.row)"
|
>修改</el-button
|
>
|
<el-button size="mini" type="danger" @click="remove(scope.$index)"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</Popup>
|
<PathAnimationSec ref="PathAnimationSec" />
|
<PathAnimationEdit ref="PathAnimationEdit" />
|
</div>
|
</template>
|
|
<script>
|
import Popup from "@tools/Popup.vue";
|
import Bus from "@tools/Bus";
|
import PathAnimationSec from "@c/object/PathAnimationSec.vue";
|
import PathAnimationEdit from "@c/object/PathAnimationEdit";
|
export default {
|
name: "PathAnimation",
|
components: {
|
Popup,
|
Bus,
|
PathAnimationSec,
|
PathAnimationEdit,
|
},
|
data() {
|
return {
|
form: {
|
title: "路径动画",
|
PathAnimation: {
|
tData: [
|
{
|
id: "test",
|
name: "测试",
|
Totaltime: 30,
|
distance: "5400", //总长度
|
showPoint: false, //显示点
|
showLine: true, //显示线
|
showModel: true, //显示模型
|
isLoop: false, //是否循环
|
height: 50, //飞行高度
|
pitch: -20, //俯仰角
|
range: 10, //距离模型距离
|
geojson: {
|
// orientation: {heading: 0.07372076173362352, pitch: -1.5574628887292024, roll: 0},
|
// position: {x: -2205629.231433604, y: 5509184.64306962, z: 2331219.615547844},
|
geometry: {
|
type: "LineString",
|
coordinates: [
|
[111.8181532375421, 21.57868178213224],
|
[111.81835028960268, 21.578460581633188],
|
[111.81832383076255, 21.57812489081727],
|
[111.81847943987464, 21.577930686377922],
|
[111.81878489838651, 21.57765953027421],
|
[111.81916083936886, 21.577412646930927],
|
[111.81958489944898, 21.57729241143278],
|
[111.82004766614196, 21.57718315464893],
|
[111.8206409631356, 21.577000552080584],
|
[111.82134398589339, 21.576873639989994],
|
[111.8219423400026, 21.576726154070943],
|
[111.822467537162, 21.576376210912294],
|
[111.82307030263561, 21.576058642812292],
|
[111.8237103973151, 21.5756704298083],
|
[111.8240924390803, 21.575296152837485],
|
[111.82504071801145, 21.575766169089448],
|
[111.82603850185104, 21.576124273877287],
|
[111.82694738799758, 21.576428149353344],
|
[111.82754018969692, 21.576728981595224],
|
[111.828099605676, 21.57697046673728],
|
[111.82845968318266, 21.577307788777407],
|
[111.8287111214647, 21.577998110617774],
|
[111.82881328135024, 21.578557636789135],
|
[111.82905095574245, 21.57877846306897],
|
[111.82918966895863, 21.579074053131905],
|
[111.82928422024466, 21.579329257594996],
|
[111.82930019172734, 21.579630618390876],
|
[111.82966603969574, 21.580020790142015],
|
[111.82960868244719, 21.580744679418963],
|
[111.82989219533579, 21.581251462292837],
|
[111.83013608532544, 21.582236343172],
|
[111.83037855800974, 21.58254231013029],
|
[111.83032824715998, 21.58299431932842],
|
[111.83001717858694, 21.583468817164515],
|
[111.8299185766154, 21.584290601587544],
|
[111.82948276544901, 21.58496623602712],
|
[111.8289749235787, 21.58556878427974],
|
[111.82886305199469, 21.585776309810406],
|
[111.8287779821505, 21.585946333271792],
|
[111.82865496967007, 21.586265136888645],
|
[111.82847674720864, 21.586438092096014],
|
[111.82845974740698, 21.586567373767977],
|
[111.828355170664, 21.586736247366822],
|
[111.82830843296874, 21.586863152790087],
|
[111.82825365102633, 21.58710380271154],
|
[111.82821734971404, 21.587138762444976],
|
[111.82817916952548, 21.587294814193356],
|
[111.82787759367034, 21.587314539280754],
|
[111.82719468513524, 21.587237821164194],
|
[111.82672929414602, 21.58716013804561],
|
[111.82658494057793, 21.587131014021804],
|
[111.82652478882481, 21.587094797111455],
|
[111.82647814913857, 21.58694770659332],
|
[111.82649812273736, 21.58651375697629],
|
[111.82650209141173, 21.586517166652694],
|
[111.82650209141173, 21.586517166652694],
|
],
|
},
|
},
|
},
|
],
|
},
|
},
|
};
|
},
|
methods: {
|
// 关闭弹窗
|
close() {
|
// this.$refs.pathAnimation.close();
|
},
|
// 打开弹窗
|
open() {
|
this.$refs.pathAnimation.open();
|
},
|
// 浏览
|
detail(data) {
|
this.$refs.PathAnimationSec.tData = JSON.parse(JSON.stringify(data));
|
this.$refs.pathAnimation.close();
|
this.$refs.PathAnimationSec.open();
|
},
|
//修改
|
change(data) {
|
this.$refs.PathAnimationEdit.tData = data;
|
this.$refs.pathAnimation.close();
|
this.$refs.PathAnimationEdit.open();
|
},
|
//删除
|
remove(index) {
|
let data = this.form.PathAnimation.tData;
|
this.$confirm("是否确定删除?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
data.splice(index, 1);
|
this.$message({
|
type: "success",
|
message: "删除成功!",
|
});
|
})
|
.catch(() => {
|
this.$message({
|
type: "info",
|
message: "已取消删除",
|
});
|
});
|
},
|
// 新增路线
|
addRoute() {
|
let tData = this.form.PathAnimation.tData;
|
sgworld.Command.execute(2, 3, "", function (data) {
|
data.name = "新建路线";
|
tData.push(data);
|
});
|
},
|
},
|
mounted() {
|
//绑定退出漫游
|
Bus.$off("exit");
|
Bus.$on("exit", () => {
|
this.$refs.pathAnimation.open();
|
});
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
.btnContainer {
|
width: 90%;
|
margin: auto;
|
height: 58px;
|
text-align: center;
|
margin-top: 10px;
|
}
|
.dataTable {
|
width: 376px;
|
background-color: transparent;
|
margin: auto 15px 10px 15px;
|
/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;
|
}
|
// /deep/ .el-table__body-wrapper{
|
// right: -6px;
|
// }
|
// /deep/ .el-table__body-wrapper{
|
// width: 98%;
|
// }
|
.tb-edit .input-box {
|
display: none;
|
}
|
.tb-edit .current-cell .input-box {
|
display: block;
|
margin-left: -15px;
|
}
|
}
|
</style>
|
