<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-table
|
:data="tableData"
|
max-height = '180'
|
style="width: 100%">
|
<el-table-column
|
prop="deviceName"
|
label="设备名称"
|
width="150">
|
</el-table-column>
|
<el-table-column
|
prop="muban"
|
label="模板"
|
width="150">
|
</el-table-column>
|
<el-table-column
|
fixed="right"
|
label="操作"
|
width="100">
|
<template slot-scope="scope">
|
<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="showModel" @cancel ='cancel' @dealChooseArr="dealChooseArr" ></chooseDeviceDialog>
|
</div>
|
</template>
|
<script>
|
import CesiumMap from "../../../../utils/components/cesium-map.vue";
|
import chooseDeviceDialog from './chooseDeviceDialog.vue';
|
export default{
|
components: {
|
CesiumMap,
|
chooseDeviceDialog
|
},
|
data(){
|
return{
|
dialogVisible :true,
|
tableData: [],
|
treeData:[],
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
showModel:false,
|
multipleSelection: []
|
}
|
},
|
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: 1000,
|
},
|
});
|
console.log(entity)
|
// 飞行到模型位置
|
viewer.flyTo(entity)
|
},
|
addDevice(){
|
this.showModel = true
|
},
|
cancel(){
|
this.showModel = 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
|
}
|
}
|
}
|
|
</script>
|
<style scoped>
|
.filter-tree{
|
height: 365px;
|
width: 100%;
|
overflow: auto;
|
}
|
.fontJust{
|
text-align: center;
|
}
|
.el-table {
|
height: 180px;
|
}
|
</style>
|
