jihongshun
2025-07-12 b498685e9c29c9c4b56f24f1ee1c9db9fd109ad9
src/views/system/project/components/addPorjectDialog.vue
@@ -13,6 +13,9 @@
                  <!-- <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-button @click="test"> 转换</el-button>
                   <el-button @click="huixian"> 0.0</el-button>
                  <el-table
                    :data="tableData"
                    max-height = '180'
@@ -23,15 +26,16 @@
                      width="150">
                    </el-table-column>
                    <el-table-column
                      prop="muban"
                      prop="mode"
                      label="模板"
                      width="150">
                      width="120">
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      label="操作"
                      width="100">
                      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>
@@ -63,28 +67,283 @@
        <el-button type="primary" @click="submit()" >生成航线任务</el-button>
      </span>
    </el-dialog>
     <chooseDeviceDialog v-if="showModel" @cancel ='cancel' @dealChooseArr="dealChooseArr" ></chooseDeviceDialog>
     <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
    chooseDeviceDialog,
    chooseModelDialog
  },
  data(){
    return{
       dialogVisible :true,
        tableData: [],
        treeData:[],
        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": "197f211797aa9f32",
                "label": "地面点0",
                "longitude": 125.01254690233337,
                "latitude": 46.408037041988585,
                "height": 5.517266389025914,
                "children": [
                    {
                        "id": "197f211797afb196",
                        "label": "空中点0",
                        "longitude": 125.01240358310912,
                        "latitude": 46.40814584281285,
                        "height": 6.971525719304772
                    }
                ]
            },
            {
                "id": "197f211797af91d9",
                "label": "地面点1",
                "longitude": 125.01254808759698,
                "latitude": 46.4080365594918,
                "height": 7.385339183474696,
                "children": [
                    {
                        "id": "197f211797afdb9a",
                        "label": "空中点1",
                        "longitude": 125.0125163640242,
                        "latitude": 46.407960727919516,
                        "height": 10.451384666363694
                    }
                ]
            },
            {
                "id": "197f211797afab31",
                "label": "地面点2",
                "longitude": 125.01255947706582,
                "latitude": 46.408036885119245,
                "height": 7.42469267651616,
                "children": [
                    {
                        "id": "197f211797a61300",
                        "label": "空中点2",
                        "longitude": 125.0128655208287,
                        "latitude": 46.4080332165472,
                        "height": 14.51791089195843
                    }
                ]
            },
            {
                "id": "197f211797af21e7",
                "label": "地面点3",
                "longitude": 125.01256023273389,
                "latitude": 46.408036999460684,
                "height": 5.5171023712317435,
                "children": [
                    {
                        "id": "197f211797a19b34",
                        "label": "空中点3",
                        "longitude": 125.01277085845463,
                        "latitude": 46.40822397536244,
                        "height": 16.06139535507995
                    }
                ]
            }
        ]
    },
    {
        "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": "197f2157b83d1d1e",
                "label": "地面点0",
                "longitude": 124.98495046473204,
                "latitude": 46.60913764437918,
                "height": 5.517192953851729,
                "children": [
                    {
                        "id": "197f2157b833e7e6",
                        "label": "空中点0",
                        "longitude": 124.98487290823232,
                        "latitude": 46.609159110536,
                        "height": 8.492315413669576
                    }
                ]
            },
            {
                "id": "197f2157b83cb37c",
                "label": "地面点1",
                "longitude": 124.98495132002881,
                "latitude": 46.609137518901555,
                "height": 7.424720940488529,
                "children": [
                    {
                        "id": "197f2157b83dbf31",
                        "label": "空中点1",
                        "longitude": 124.984847808066,
                        "latitude": 46.60911367086078,
                        "height": 8.37839897370324
                    }
                ]
            },
            {
                "id": "197f2157b831259d",
                "label": "地面点2",
                "longitude": 124.98496295996078,
                "latitude": 46.60913752946039,
                "height": 7.424330357264399,
                "children": [
                    {
                        "id": "197f2157b837245b",
                        "label": "空中点2",
                        "longitude": 124.98502199892675,
                        "latitude": 46.60913926099941,
                        "height": 12.416325107963392
                    }
                ]
            },
            {
                "id": "197f2157b83112ee",
                "label": "地面点3",
                "longitude": 124.9849638899571,
                "latitude": 46.60913769557282,
                "height": 5.51721178277007,
                "children": [
                    {
                        "id": "197f2157b8349c7d",
                        "label": "空中点3",
                        "longitude": 124.98502033157477,
                        "latitude": 46.609152323278046,
                        "height": 4.804689162058357
                    }
                ]
            }
        ]
    },
    {
        "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": "197f21d1d1a28cf6",
        "label": "地面点0",
        "longitude": 125.14335344922452,
        "latitude": 46.558982037049276,
        "height": 5.556334669315725,
        "children": [
            {
                "id": "197f21d1d1adcbe6",
                "label": "空中点0",
                "longitude": 125.14330233595797,
                "latitude": 46.55904743869546,
                "height": 6.468726016875199
            }
        ]
    },
    {
        "id": "197f21d1d1a4aa12",
        "label": "地面点1",
        "longitude": 125.14335458905991,
        "latitude": 46.558981268478746,
        "height": 7.384477227891685,
        "children": [
            {
                "id": "197f21d1d1a846ae",
                "label": "空中点1",
                "longitude": 125.14298096389273,
                "latitude": 46.558969173376134,
                "height": 22.10867400719622
            }
        ]
    },
    {
        "id": "197f21d1d1a52190",
        "label": "地面点2",
        "longitude": 125.14336589537841,
        "latitude": 46.558981709304724,
        "height": 7.424676991507425,
        "children": [
            {
                "id": "197f21d1d1a6a4fe",
                "label": "空中点2",
                "longitude": 125.14339720378332,
                "latitude": 46.5590446327473,
                "height": 16.720685909327106
            }
        ]
    },
    {
        "id": "197f21d1d1a272b1",
        "label": "地面点3",
        "longitude": 125.14336689453488,
        "latitude": 46.558981604123645,
        "height": 5.516875737104807,
        "children": [
            {
                "id": "197f21d1d1af7638",
                "label": "空中点3",
                "longitude": 125.14397230855407,
                "latitude": 46.55882377669704,
                "height": 45.87173852318548
            }
        ]
    }
]
    }
],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        showDevice:false,
        multipleSelection: [],
        showModel:false,
        multipleSelection: []
        deviceId:null
    }
  },
  methods:{
@@ -96,7 +355,8 @@
    flyToLocal(row){
      console.log(row)
      console.log(viewer)
       const position = Cesium.Cartesian3.fromDegrees(row.longitude,row.latitude, row.altitude);
      //  const position = Cesium.Cartesian3.fromDegrees(row.longitude,row.latitude, row.altitude);
       const position = Cesium.Cartesian3.fromDegrees(0,0,0);
      // 设置模型方向(可选)
      const heading = Cesium.Math.toRadians(row.face); // 朝东南方向
@@ -113,19 +373,35 @@
        position: position,
        orientation: orientation,
        model: {
          uri: "http://192.168.1.5:9000/tower/2025/07/01/tower_20250701145739A004.glb", // 替换成你的模型路径
          scale: 1000,
          uri: "http://192.168.1.5:9000/tower/2025/07/11/铁塔_20250711093701A001.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.showModel = true
      this.showDevice = true
    },
    cancel(){
      this.showModel = false
      this.showDevice = false
    },
    hasSameId(array1, array2) {
      const ids1 = new Set(array1.map(item => item.id));
@@ -148,7 +424,7 @@
        this.tableData = this.tableData.concat(arr)
      }
      const dealTreeData =this.dealTee()
      this.treeData = dealTreeData
      // this.treeData = dealTreeData
      console.log(this.treeData)
    },
    dealTee(){
@@ -167,7 +443,397 @@
        this.tableData.splice(index, 1);
      }
      const dealTreeData = this.dealTee()
      this.treeData = dealTreeData
      // 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)));
        }
      });
    },
    drawConnectionsWithLabels1111(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
          }
        });
      }
    },
    drawConnectionsWithLabels(devices) {
      const airPoints = [];
      devices.forEach(device => {
        if (!Array.isArray(device.children)) return;
        device.children.forEach(airPoint => {
          // 空中点位置
          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,
              outlineColor: Cesium.Color.BLACK,
              outlineWidth: 2,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              pixelOffset: new Cesium.Cartesian2(0, -12)
            }
          });
          airPoints.push(airPos);
          // 遍历地面点(子项)
          if (Array.isArray(airPoint.children)) {
            airPoint.children.forEach(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,
                  outlineColor: Cesium.Color.BLACK,
                  outlineWidth: 2,
                  verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                  pixelOffset: new Cesium.Cartesian2(0, -12)
                }
              });
              // ✅ 蓝色虚线连接:空中点 ➜ 地面点
              viewer.entities.add({
                polyline: {
                  positions: [airPos, groundPos],
                  width: 2,
                  material: new Cesium.PolylineDashMaterialProperty({
                    color: Cesium.Color.BLUE,
                    dashLength: 8
                  })
                }
              });
            });
          }
        });
      });
      // ✅ 黄色实线连接所有空中点
      if (airPoints.length > 1) {
        viewer.entities.add({
          polyline: {
            positions: airPoints,
            width: 3,
            material: Cesium.Color.YELLOW
          }
        });
      }
    },
    draw(){
      this.drawConnectionsWithLabels(this.treeData)
    },
    test(){
        this.treeData = this.swapGroundAir(this.treeData);
    },
    swapGroundAir(data) {
      return data.map(device => {
        const newChildren = [];
        device.children.forEach(ground => {
          const air = ground.children && ground.children[0];
          if (air) {
            newChildren.push({
              ...air,
              children: [
                {
                  ...ground,
                  children: undefined
                }
              ]
            });
          }
        });
        return {
          ...device,
          children: newChildren
        };
      });
    },
    huixian(){
      let data=[
    {
        "altitude": 35.09683139439875,
        "ardGroundPoint": [
            {
                "height": 35.0960134603141,
                "latitude": 0.000032899894086000126,
                "longitude": 3.2789183307897707e-7,
                "pointNumber": 1,
                "targetName": "地面点0"
            }
        ],
        "latitude": 0.0009372188427979371,
        "longitude": 0.000009340650264268872,
        "pointNumber": 1,
        "targetName": "空中点0"
    },
    {
        "altitude": 40.057437157900914,
        "ardGroundPoint": [
            {
                "height": 40.05662385374772,
                "latitude": 0.00002759265968150938,
                "longitude": 7.877836487599675e-7,
                "pointNumber": 1,
                "targetName": "地面点1"
            }
        ],
        "latitude": 0.0009315830781716235,
        "longitude": 0.000026597143043885405,
        "pointNumber": 2,
        "targetName": "空中点1"
    },
    {
        "altitude": 90.05743715790092,
        "ardGroundPoint": [
            {
                "height": 40.05662385374772,
                "latitude": 0.00002759265968150938,
                "longitude": 7.877836487599675e-7,
                "pointNumber": 1,
                "targetName": "地面点1-加高"
            }
        ],
        "latitude": 0.0009315830781716235,
        "longitude": 0.000026597143043885405,
        "pointNumber": 3,
        "targetName": "空中点1-加高"
    },
    {
        "altitude": 85.4017386642163,
        "ardGroundPoint": [
            {
                "height": 35.09000336658791,
                "latitude": -0.0000329911085806409,
                "longitude": 4.656954257439534e-7,
                "pointNumber": 1,
                "targetName": "地面点2"
            }
        ],
        "latitude": -0.0009372610742669285,
        "longitude": 0.000013144727598247196,
        "pointNumber": 4,
        "targetName": "空中点2-加高"
    },
    {
        "altitude": 35.401738664216296,
        "ardGroundPoint": [
            {
                "height": 35.09000336658791,
                "latitude": -0.0000329911085806409,
                "longitude": 4.656954257439534e-7,
                "pointNumber": 1,
                "targetName": "地面点2"
            }
        ],
        "latitude": -0.0009372610742669285,
        "longitude": 0.000013144727598247196,
        "pointNumber": 5,
        "targetName": "空中点2"
    }
]
      let aaa = this.convertToTree(data)
      console.log(aaa)
      this.drawLines(aaa)
    },
    convertToTree(data) {
      return data.map((item, index) => {
        const parentId = 'air_' + index;
        return {
          id: parentId,
          label: item.targetName,
          longitude: item.longitude,
          latitude: item.latitude,
          height: item.altitude,
          children: (item.ardGroundPoint || []).map((g, i) => {
            return {
              id: parentId + '_ground_' + i,
              label: g.targetName,
              longitude: g.longitude,
              latitude: g.latitude,
              height: g.height
            }
          })
        }
      });
    },
    drawLines(treeData) {
      console.log(treeData)
      // 收集空中点位置
      const airPositions = treeData.map(point => {
        return Cesium.Cartesian3.fromDegrees(
          point.longitude,
          point.latitude,
          point.height
        );
      });
      // 1. 空中点之间用黄色实线连接
      viewer.entities.add({
        polyline: {
          positions: airPositions,
          width: 2,
          material: Cesium.Color.YELLOW
        }
      });
      // 2. 每个空中点与地面点用蓝色虚线连接
      treeData.forEach(point => {
        const airPos = Cesium.Cartesian3.fromDegrees(point.longitude, point.latitude, point.height);
        point.children.forEach(child => {
          const groundPos = Cesium.Cartesian3.fromDegrees(child.longitude, child.latitude, child.height);
          viewer.entities.add({
            polyline: {
              positions: [airPos, groundPos],
              width: 1,
              material: new Cesium.PolylineDashMaterialProperty({
                color: Cesium.Color.BLUE,
                dashLength: 8
              })
            }
          });
        });
      });
    }
  }
}