<template>
|
<div v-drag class="flyBox">
|
<div class="layerTitle">
|
<div class="tileLeft">
|
<div class="titleLable">方案测试</div>
|
</div>
|
|
<div class="set">
|
<div
|
@click="setAddManagerFile()"
|
class="titleImg"
|
style="margin-right: 10px"
|
title="导入"
|
>
|
<el-icon :size="20">
|
<FolderOpened />
|
</el-icon>
|
</div>
|
<div
|
@click="setoutManagerFile()"
|
class="titleImg"
|
style="margin-right: 10px"
|
title="导出"
|
>
|
<el-icon :size="20">
|
<Download />
|
</el-icon>
|
</div>
|
<div
|
@click="setAddManagerLayer()"
|
class="titleImg"
|
style="margin-right: 10px"
|
title="添加"
|
>
|
<el-icon :size="20">
|
<Plus />
|
</el-icon>
|
</div>
|
<div
|
class="titleImg"
|
@click="store.state.setFlyPlanFlag = false"
|
title="关闭"
|
>
|
<el-icon :size="20">
|
<Close />
|
</el-icon>
|
</div>
|
</div>
|
</div>
|
<div class="layerContent">
|
<div class="planMessge"></div>
|
<div class="planTree">
|
<el-tree :data="treeData" :props="defaultProps">
|
<template #default="{ node, data }">
|
<span class="custom-tree-node">
|
<div @dblclick="flyTo(data)" style="display: flex; margin: 1px">
|
<div>{{ node.label }}</div>
|
<div
|
v-show="data.children"
|
style="display: flex; align-items: center"
|
>
|
<a @click="setAddManagerLayer(data)">
|
<el-icon style="margin-left: 10px"><Plus /> </el-icon
|
></a>
|
<a @click="seVideoPlay(data)">
|
<el-icon style="margin-left: 10px"><VideoPlay /> </el-icon
|
></a>
|
<a @click="seVideoStop(data)">
|
<el-icon style="margin-left: 10px"><Close /> </el-icon
|
></a>
|
</div>
|
|
<div
|
v-show="data.planType == 2"
|
style="display: flex; align-items: center"
|
>
|
<a @click="setEditData(data)">
|
<el-icon style="margin-left: 10px"><Edit /> </el-icon
|
></a>
|
</div>
|
</div>
|
</span>
|
</template>
|
</el-tree>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
|
import {
|
ArrowRight,
|
ArrowLeft,
|
Plus,
|
CloseBold,
|
VideoPause,
|
VideoPlay,
|
Delete,
|
Close,
|
Upload,
|
Download,
|
FolderOpened,
|
Edit
|
} from "@element-plus/icons-vue";
|
import configTool from "../../assets/js/tool/configTool";
|
import { useStore } from "vuex";
|
import mapPlan from "./../../assets/js/tool/mapPlan.js";
|
import palyTools from "../../assets/js/tool/palyTools";
|
import { jsx } from "vue/jsx-runtime";
|
const store = useStore();
|
interface Tree {
|
label: string;
|
children?: Tree[];
|
}
|
const defaultProps = {
|
children: "children",
|
label: "name"
|
};
|
const checkData = ref(null);
|
const treeData = ref([]);
|
const setAddManagerLayer = (res) => {
|
checkData.value = null;
|
if (res) {
|
store.state.setAddEntityList = {
|
flag: true,
|
title: "节点添加",
|
type: 2
|
};
|
checkData.value = res;
|
} else {
|
store.state.setAddEntityList = {
|
flag: true,
|
title: "方案添加",
|
type: 2
|
};
|
}
|
};
|
const setAddManagerFile = () => {
|
store.state.setAddEntityList = {
|
flag: true,
|
title: "数据导入",
|
type: 3
|
};
|
};
|
|
const setoutManagerFile = () => {
|
configTool.saveToJson(treeData.value, "方案导出");
|
};
|
const setEditData = (res) => {
|
const obj = { ...res };
|
console.log(obj);
|
store.state.setAddEntityList = {
|
flag: true,
|
title: "节点修改",
|
type: 2,
|
editData: obj
|
};
|
};
|
const flyTo = (res) => {
|
if (res.children) return;
|
earthCtrl.camera.flyTo(
|
res.lon,
|
res.lat,
|
res.alt,
|
res.height,
|
res.pitch,
|
res.roll,
|
null,
|
() => {}
|
);
|
};
|
const seVideoPlay = (res) => {
|
mapPlan.Init(res);
|
};
|
const seVideoStop = () => {
|
mapPlan.closed();
|
};
|
const addEntityData = (val) => {
|
const id = configTool.getEndDateTime();
|
if (val.flag == 1) {
|
treeData.value.push({
|
children: [],
|
id: id,
|
name: val.name,
|
planType: 1
|
});
|
} else if (val.flag == 2) {
|
if (val.pid) {
|
const valDatta = JSON.parse(JSON.stringify(treeData.value));
|
const objData = valDatta.filter((rs) => {
|
if (rs.id == val.pid) {
|
if (rs.children) {
|
const obj = rs.children.filter((os) => {
|
if (os.id == val.id) {
|
os.name = val.name;
|
os.lon = val.lon;
|
os.lat = val.lat;
|
os.alt = val.alt;
|
os.heading = val.heading;
|
os.pitch = val.pitch;
|
os.roll = val.roll;
|
os.time = val.time;
|
}
|
return os;
|
});
|
rs.children = obj;
|
}
|
}
|
return rs;
|
});
|
if (objData) {
|
treeData.value = [];
|
treeData.value = objData;
|
}
|
|
// for (var i in resData) {
|
// if (resData[i].id === val.pid) {
|
// console.log(resData[i].children);
|
|
// if (resData[i].children) {
|
// for (var j in resData[i].children) {
|
// if (resData[i].children[j].id == val.id) {
|
// resData[i].children[j] = val;
|
// }
|
// }
|
// }
|
// }
|
// }
|
// console.log(resData);
|
// treeData.value= resData;
|
// treeData.value.forEach((element) => {
|
// if (element.id == val.id) {
|
// element.children.forEach(obj =>{
|
// if(obj.id === val.id){
|
// obj= val;
|
// }
|
// })
|
// }
|
// });
|
} else {
|
treeData.value.forEach((element) => {
|
if (element.id == checkData.value.id) {
|
val.id = id;
|
val.pid = element.id;
|
val.type = "位置";
|
(val.planType = 2), element.children.push(val);
|
}
|
});
|
}
|
} else if (val.flag == 3) {
|
const object = val.value;
|
for (var i in object) {
|
treeData.value.push(object[i]);
|
}
|
}
|
};
|
defineExpose({
|
addEntityData
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.flyBox {
|
width: 300px;
|
height: 600px;
|
background: rgba(7, 8, 14, 0.8);
|
box-shadow: inset 0px 10px 40px 10px rgba(38, 47, 71, 1);
|
z-index: 41;
|
top: 150px;
|
right: 1%;
|
position: absolute;
|
display: flex;
|
flex-direction: column;
|
|
.layerTitle {
|
width: calc(100% - 27px);
|
height: 42px;
|
background: #30bcff;
|
box-shadow: 0 2px 3px rgba(16, 133, 80, 0.5);
|
border-bottom: 1px solid #20bc74;
|
display: flex;
|
justify-content: space-between;
|
padding-left: 7px;
|
padding-right: 20px;
|
color: white;
|
|
.tileLeft {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
|
.titleLable {
|
font-size: 18px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
}
|
|
.titleImg {
|
width: 20px;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
color: #fff;
|
}
|
|
.set {
|
cursor: pointer;
|
display: flex;
|
}
|
}
|
.layerContent {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
.planMessge {
|
:first-child {
|
margin: 2% 0%;
|
}
|
margin-left: 40%;
|
transform: translate(-30%, 0);
|
}
|
.planTree {
|
flex: 1;
|
|
justify-content: center;
|
}
|
}
|
.el-tree {
|
background: transparent;
|
color: white;
|
}
|
/deep/.el-tree-node__content:hover {
|
background: transparent !important;
|
}
|
|
/deep/ .el-tree-node:focus > .el-tree-node__content {
|
background: transparent;
|
}
|
}
|
</style>
|
