<template>
|
<div>
|
<el-dialog
|
title="新建项目"
|
:visible="dialogVisible"
|
append-to-body
|
fullscreen
|
:before-close="handleClose">
|
<el-row :gutter="6">
|
<el-col :span=6>
|
<el-card class="noScroll">
|
<div class="chooseModel">
|
<!-- <el-button type="primary" @click='chooseModel'>添加设备</el-button> -->
|
<div class="fontJust">设备列表</div>
|
<el-button @click="addDevice"> 新增</el-button>
|
<el-button @click="draw"> 渲染</el-button>
|
<el-table
|
:data="tableData"
|
max-height = '180'
|
style="width: 100%">
|
<el-table-column
|
prop="deviceName"
|
label="设备名称"
|
width="150">
|
</el-table-column>
|
<el-table-column
|
prop="mode"
|
label="模板"
|
width="120">
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
label="操作"
|
width="130">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click="chooseModel(scope.row)">模板</el-button>
|
<el-button type="text" size="small" @click="flyToLocal(scope.row)">定位</el-button>
|
<el-button type="text" size="small" @click="deleteData(scope.row)">移除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-card>
|
<el-card >
|
<div class="chooseModelTree">
|
<!-- <el-button type="primary" @click='chooseModel'>添加设备</el-button> -->
|
<div class="fontJust">巡检点目录</div>
|
<el-tree
|
class="filter-tree"
|
:data="treeData"
|
:props="defaultProps"
|
draggable
|
default-expand-all
|
ref="tree">
|
</el-tree>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span=18>
|
<CesiumMap ></CesiumMap>
|
</el-col>
|
</el-row>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" @click="submit()" >生成航线任务</el-button>
|
</span>
|
</el-dialog>
|
<chooseDeviceDialog v-if="showDevice" @cancel ='cancel' @dealChooseArr="dealChooseArr" ></chooseDeviceDialog>
|
<chooseModelDialog v-if="showModel" @cancelModel ='cancelModel' @receiveModel="receiveModel" :deviceId="deviceId"></chooseModelDialog>
|
</div>
|
</template>
|
<script>
|
import CesiumMap from "../../../../utils/components/cesium-map.vue";
|
import chooseDeviceDialog from './chooseDeviceDialog.vue';
|
import chooseModelDialog from './chooseModelDialog.vue';
|
export default{
|
components: {
|
CesiumMap,
|
chooseDeviceDialog,
|
chooseModelDialog
|
},
|
data(){
|
return{
|
dialogVisible :true,
|
tableData: [],
|
treeData:[
|
{
|
"createBy": null,
|
"createTime": null,
|
"updateBy": null,
|
"updateTime": null,
|
"remark": null,
|
"id": "3c5fc76c46c54c1187ff0bbcc092194b",
|
"modelId": "6257cf734cf94c7caae0dee2ac2231d1",
|
"deviceName": "设备3",
|
"deviceType": null,
|
"longitude": 125.01255362568844,
|
"latitude": 46.40803605631184,
|
"altitude": -0.029793403136164368,
|
"belongingRoute": "线路3",
|
"face": 30,
|
"label": "设备3",
|
"children": [
|
{
|
"id": "197ee63df18b0af0",
|
"label": "地面点0",
|
"longitude": 125.01254682821249,
|
"latitude": 46.40803726847258,
|
"height": 5.55594577349203,
|
"children": [
|
{
|
"id": "197ee63df18539a3",
|
"label": "空中点1",
|
"longitude": 125.01128753149214,
|
"latitude": 46.4082612208105,
|
"height": 6.492838981926156
|
}
|
]
|
},
|
{
|
"id": "197ee63df18cce29",
|
"label": "地面点1",
|
"longitude": 125.01254709729052,
|
"latitude": 46.408037217374755,
|
"height": 6.4920524070572645,
|
"children": [
|
{
|
"id": "197ee63df18539a3",
|
"label": "空中点1",
|
"longitude": 125.01128753149214,
|
"latitude": 46.4082612208105,
|
"height": 6.492838981926156
|
}
|
]
|
},
|
{
|
"id": "197ee63df188aa47",
|
"label": "地面点2",
|
"longitude": 125.01254783039168,
|
"latitude": 46.408036932133236,
|
"height": 7.424864167610554,
|
"children": [
|
{
|
"id": "197ee63df1845bc7",
|
"label": "空中点2",
|
"longitude": 125.0112772702233,
|
"latitude": 46.40822893934041,
|
"height": 7.425650325131619
|
}
|
]
|
},
|
{
|
"id": "197ee63df199a530",
|
"label": "地面点3",
|
"longitude": 125.01255933758492,
|
"latitude": 46.40803691722688,
|
"height": 7.424719094681872,
|
"children": [
|
{
|
"id": "197ee63df1908bad",
|
"label": "空中点3",
|
"longitude": 125.0138300519516,
|
"latitude": 46.40822843553173,
|
"height": 7.425505375628057
|
}
|
]
|
},
|
{
|
"id": "197ee63df198ebdf",
|
"label": "地面点4",
|
"longitude": 125.01256021566009,
|
"latitude": 46.408036958116895,
|
"height": 6.454013013927198,
|
"children": [
|
{
|
"id": "197ee63df192e649",
|
"label": "空中点4",
|
"longitude": 125.0138360193498,
|
"latitude": 46.40821153783117,
|
"height": 6.454799694246353
|
}
|
]
|
},
|
{
|
"id": "197ee63df1989863",
|
"label": "地面点5",
|
"longitude": 125.01256037655455,
|
"latitude": 46.40803705402738,
|
"height": 5.5173191358810305,
|
"children": [
|
{
|
"id": "197ee63df19fb1cb",
|
"label": "空中点5",
|
"longitude": 125.01384789553899,
|
"latitude": 46.408163891976834,
|
"height": 6.023658449094137
|
}
|
]
|
}
|
]
|
},
|
{
|
"createBy": null,
|
"createTime": null,
|
"updateBy": null,
|
"updateTime": null,
|
"remark": null,
|
"id": "5d7c595466094e369c6ed9fdcab6ba50",
|
"modelId": "416a0c3361a9409495623eff5c19fb41",
|
"deviceName": "设备2",
|
"deviceType": null,
|
"longitude": 124.98495711631958,
|
"latitude": 46.60913669289758,
|
"altitude": -0.010649270561847658,
|
"belongingRoute": "线路2",
|
"face": 30,
|
"label": "设备2",
|
"children": [
|
{
|
"id": "197ee6746f64a423",
|
"label": "地面点0",
|
"longitude": 124.98496378621228,
|
"latitude": 46.60913556199556,
|
"height": 5.517188951102072,
|
"children": [
|
{
|
"id": "197ee6746f74e23a",
|
"label": "空中点0",
|
"longitude": 124.98623131325654,
|
"latitude": 46.60892064074182,
|
"height": 5.517975962983238
|
}
|
]
|
},
|
{
|
"id": "197ee6746f7d5cbb",
|
"label": "地面点1",
|
"longitude": 124.98496380688303,
|
"latitude": 46.609135777787124,
|
"height": 6.454174518781066,
|
"children": [
|
{
|
"id": "197ee6746f76d1f7",
|
"label": "空中点1",
|
"longitude": 124.98624416031694,
|
"latitude": 46.60896064802085,
|
"height": 6.454961413485681
|
}
|
]
|
},
|
{
|
"id": "197ee6746f7f75d3",
|
"label": "地面点2",
|
"longitude": 124.9849627026509,
|
"latitude": 46.6091358190698,
|
"height": 7.4247849395402445,
|
"children": [
|
{
|
"id": "197ee6746f7bd9af",
|
"label": "空中点2",
|
"longitude": 124.98623564998626,
|
"latitude": 46.608936693647046,
|
"height": 7.425571052201786
|
}
|
]
|
},
|
{
|
"id": "197ee6746f786c30",
|
"label": "地面点3",
|
"longitude": 124.98495139129277,
|
"latitude": 46.609136202860036,
|
"height": 7.385436810668997,
|
"children": [
|
{
|
"id": "197ee6746f7220cc",
|
"label": "空中点3",
|
"longitude": 124.98365601680429,
|
"latitude": 46.60902531680706,
|
"height": 7.386222783506121
|
}
|
]
|
},
|
{
|
"id": "197ee6746f70eac7",
|
"label": "地面点4",
|
"longitude": 124.98495046384257,
|
"latitude": 46.6091358802505,
|
"height": 6.453950090508963,
|
"children": [
|
{
|
"id": "197ee6746f74dd82",
|
"label": "空中点4",
|
"longitude": 124.98366517250753,
|
"latitude": 46.60897886511559,
|
"height": 6.4547368247826675
|
}
|
]
|
},
|
{
|
"id": "197ee6746f7ac599",
|
"label": "地面点5",
|
"longitude": 124.984950334958,
|
"latitude": 46.609135834916806,
|
"height": 5.516518597126235,
|
"children": [
|
{
|
"id": "197ee6746f7220cc",
|
"label": "空中点3",
|
"longitude": 124.98365601680429,
|
"latitude": 46.60902531680706,
|
"height": 7.386222783506121
|
}
|
]
|
}
|
]
|
},
|
{
|
"createBy": null,
|
"createTime": null,
|
"updateBy": null,
|
"updateTime": null,
|
"remark": null,
|
"id": "f796896ac1c445c183456c500502bef0",
|
"modelId": "1bd29eedeaaf4a3da83212fbb1793fd5",
|
"deviceName": "设备1",
|
"deviceType": null,
|
"longitude": 125.14336018333184,
|
"latitude": 46.558980802047344,
|
"altitude": -0.0019061848373990704,
|
"belongingRoute": "线路1",
|
"face": 60,
|
"label": "设备1",
|
"children": [
|
{
|
"id": "197ee65dac710766",
|
"label": "地面点0",
|
"longitude": 125.14335344347126,
|
"latitude": 46.55898205916312,
|
"height": 5.556756800574575,
|
"children": [
|
{
|
"id": "197ee65dac75edbb",
|
"label": "空中点0",
|
"longitude": 125.14209452120562,
|
"latitude": 46.55921686479333,
|
"height": 5.557543680589247
|
}
|
]
|
},
|
{
|
"id": "197ee65dac76a522",
|
"label": "地面点1",
|
"longitude": 125.14335363213557,
|
"latitude": 46.55898182607255,
|
"height": 6.651683951645225,
|
"children": [
|
{
|
"id": "197ee65dac772525",
|
"label": "空中点2",
|
"longitude": 125.14208232214659,
|
"latitude": 46.559179705774746,
|
"height": 7.425743074154034
|
}
|
]
|
},
|
{
|
"id": "197ee65dac712c69",
|
"label": "地面点2",
|
"longitude": 125.14335446603941,
|
"latitude": 46.55898169199969,
|
"height": 7.424957062075383,
|
"children": [
|
{
|
"id": "197ee65dac772525",
|
"label": "空中点2",
|
"longitude": 125.14208232214659,
|
"latitude": 46.559179705774746,
|
"height": 7.425743074154034
|
}
|
]
|
},
|
{
|
"id": "197ee65dac7d469a",
|
"label": "地面点3",
|
"longitude": 125.14336581328187,
|
"latitude": 46.55898112552418,
|
"height": 7.385369522508276,
|
"children": [
|
{
|
"id": "197ee65dac74b335",
|
"label": "空中点3",
|
"longitude": 125.14460210993491,
|
"latitude": 46.55869709406983,
|
"height": 11.416007026601994
|
}
|
]
|
},
|
{
|
"id": "197ee65dac7817ff",
|
"label": "地面点4",
|
"longitude": 125.14336674537108,
|
"latitude": 46.55898211835868,
|
"height": 6.48472072335647,
|
"children": [
|
{
|
"id": "197ee65dac7602d7",
|
"label": "空中点4",
|
"longitude": 125.14461900411601,
|
"latitude": 46.559233306964344,
|
"height": 6.485507501890941
|
}
|
]
|
},
|
{
|
"id": "197ee65dac74500d",
|
"label": "地面点5",
|
"longitude": 125.14336684823117,
|
"latitude": 46.55898218335435,
|
"height": 5.556803725040882,
|
"children": [
|
{
|
"id": "197ee65dac7d10f5",
|
"label": "空中点5",
|
"longitude": 125.14464805019499,
|
"latitude": 46.559149450894154,
|
"height": 7.227587215704448
|
}
|
]
|
}
|
]
|
}
|
],
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
showDevice:false,
|
multipleSelection: [],
|
showModel:false,
|
deviceId:null
|
}
|
},
|
methods:{
|
handleClose(){
|
console.log("close")
|
this.dialogVisible = false
|
this.$emit('close')
|
},
|
flyToLocal(row){
|
console.log(row)
|
console.log(viewer)
|
const position = Cesium.Cartesian3.fromDegrees(row.longitude,row.latitude, row.altitude);
|
|
// 设置模型方向（可选）
|
const heading = Cesium.Math.toRadians(row.face); // 朝东南方向
|
const pitch = 0;
|
const roll = 0;
|
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
|
position,
|
new Cesium.HeadingPitchRoll(heading, pitch, roll)
|
);
|
|
// 加载 glTF 模型
|
const entity = viewer.entities.add({
|
name: row.id,
|
position: position,
|
orientation: orientation,
|
model: {
|
uri: "http://192.168.1.5:9000/tower/2025/07/01/tower_20250701145739A004.glb", // 替换成你的模型路径
|
scale: 1,
|
},
|
label: {
|
show: true,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
font: '28px Helvetica',
|
outlineColor: Cesium.Color.BLUE,
|
outlineWidth: 3,
|
fillColor: Cesium.Color.fromCssColorString('#FFFFFF'), //44c3cc
|
text: row.deviceName,
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
pixelOffset: new Cesium.Cartesian2(0.0, -56.0),
|
scaleByDistance: new Cesium.NearFarScalar(1000, 0.6, 10000, 0.4),
|
pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1000, 0.4, 10000, 0.4),
|
disableDepthTestDistance: 100000000
|
}
|
});
|
console.log(entity)
|
// 飞行到模型位置
|
console.log(this.treeData)
|
viewer.flyTo(entity)
|
},
|
addDevice(){
|
this.showDevice = true
|
},
|
cancel(){
|
this.showDevice = false
|
},
|
hasSameId(array1, array2) {
|
const ids1 = new Set(array1.map(item => item.id));
|
const ids2 = new Set(array2.map(item => item.id));
|
return ids1.size !== [...ids1].filter(id => ids2.has(id)).length;
|
},
|
dealChooseArr(arr){
|
if(this.tableData?.length == 0 ){
|
this.tableData = arr
|
}else {
|
const hasSameId = arr.filter(obj1 =>
|
this.tableData.some(obj2 => obj1.id === obj2.id)
|
);
|
if(hasSameId?.length != 0){
|
return this.$message({
|
message: '选择设备数据和已有数据重复',
|
type: 'warning'
|
})
|
}
|
this.tableData = this.tableData.concat(arr)
|
}
|
const dealTreeData =this.dealTee()
|
// this.treeData = dealTreeData
|
console.log(this.treeData)
|
},
|
dealTee(){
|
return this.tableData.map(item => ({
|
...item,
|
label: item.deviceName,
|
children: []
|
}));
|
},
|
deleteData(row){
|
// 找到 id 为 "1" 的元素索引
|
const index = this.tableData.findIndex(item => item.id === row.id);
|
|
// 如果找到了，删除该元素
|
if (index !== -1) {
|
this.tableData.splice(index, 1);
|
}
|
const dealTreeData = this.dealTee()
|
// this.treeData = dealTreeData
|
},
|
chooseModel(row){
|
this.deviceId = row.id
|
this.showModel = true
|
},
|
cancelModel(){
|
this.showModel = false
|
},
|
receiveModel(obj){
|
//deal逻辑
|
console.log(obj)
|
this.dealTableTemplate(obj)
|
// this.dealTreeMerge(obj)
|
},
|
dealTableTemplate(obj){
|
const target = this.tableData.find(item => item.id === obj.deviceId)
|
if (target) {
|
this.$set(target, 'mode', obj.modelObj.name) // ✅ Vue2 需要使用 $set 以确保响应式
|
}
|
},
|
dealTreeMerge(obj){
|
let newChildrenData= [
|
{ id: 100, label: '新子节点A',children:[{id: 1001,label: '新子节点A-1'}]},
|
{ id: 101, label: '新子节点B' }
|
]
|
this.treeData.forEach(item => {
|
if(item.id == obj.deviceId) {
|
// 替换第一层每个节点的 children
|
this.$set(item, 'children', JSON.parse(JSON.stringify(newChildrenData)));
|
}
|
});
|
},
|
drawConnectionsWithLabels(devices) {
|
const airPoints = [];
|
|
devices.forEach(device => {
|
if (!Array.isArray(device.children)) return;
|
|
device.children.forEach(groundPoint => {
|
console.log(groundPoint)
|
const groundPos = Cesium.Cartesian3.fromDegrees(
|
groundPoint.longitude,
|
groundPoint.latitude,
|
groundPoint.height
|
);
|
|
// ✅ 地面点：添加实体 + label
|
viewer.entities.add({
|
position: groundPos,
|
point: {
|
pixelSize: 6,
|
color: Cesium.Color.BLUE
|
},
|
label: {
|
text: groundPoint.label || '',
|
font: '14px sans-serif',
|
fillColor: Cesium.Color.WHITE,
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
outlineWidth: 2,
|
outlineColor: Cesium.Color.BLACK,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
pixelOffset: new Cesium.Cartesian2(0, -12)
|
}
|
});
|
|
// 遍历空中点
|
if (Array.isArray(groundPoint.children)) {
|
groundPoint.children.forEach(airPoint => {
|
console.log(airPos)
|
const airPos = Cesium.Cartesian3.fromDegrees(
|
airPoint.longitude,
|
airPoint.latitude,
|
airPoint.height
|
);
|
|
// ✅ 空中点：添加实体 + label
|
viewer.entities.add({
|
position: airPos,
|
point: {
|
pixelSize: 6,
|
color: Cesium.Color.YELLOW
|
},
|
label: {
|
text: airPoint.label || '',
|
font: '14px sans-serif',
|
fillColor: Cesium.Color.YELLOW,
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
outlineWidth: 2,
|
outlineColor: Cesium.Color.BLACK,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
pixelOffset: new Cesium.Cartesian2(0, -12)
|
}
|
});
|
|
// ✅ 地面点 ➜ 空中点 蓝色虚线
|
viewer.entities.add({
|
polyline: {
|
positions: [groundPos, airPos],
|
width: 2,
|
material: new Cesium.PolylineDashMaterialProperty({
|
color: Cesium.Color.BLUE,
|
dashLength: 8
|
})
|
}
|
});
|
|
airPoints.push(airPos);
|
});
|
}
|
});
|
});
|
|
// ✅ 所有空中点 ➜ 黄色实线连接
|
if (airPoints.length > 1) {
|
viewer.entities.add({
|
polyline: {
|
positions: airPoints,
|
width: 3,
|
material: Cesium.Color.YELLOW
|
}
|
});
|
}
|
},
|
draw(){
|
this.drawConnectionsWithLabels(this.treeData)
|
}
|
}
|
}
|
|
</script>
|
<style scoped>
|
.filter-tree{
|
height: 365px;
|
width: 100%;
|
overflow: auto;
|
}
|
.fontJust{
|
text-align: center;
|
}
|
.el-table {
|
height: 180px;
|
}
|
</style>
|
