jihongshun
4 天以前 0b906280ec163a3e80364e091550d8462db6b9f9
src/views/system/shootPoint/components/shootPointDialog.vue
@@ -10,7 +10,7 @@
          <el-col :span="4">
              <el-card class="noScroll">
                <div class="chooseModel">
                  <el-button type="primary" @click='chooseModel'>选择模型</el-button>
                  <el-button type="primary" @click='chooseModel'>模型</el-button>
                  <div class="modelType">
                    模型名称:{{ modelName }}
                  </div>
@@ -45,7 +45,7 @@
                        <!-- 航点列表 -->
                        <div class="waypoints">
                          <div 
                            v-for="(wp, index) in waypoints"
                            v-for="(wp, index) in treeData"
                            :key="index" 
                            class="waypoint-item"
                            :class="{ active: selectedIndex === index }"
@@ -55,12 +55,21 @@
                              <i 
                                class="el-icon-success" 
                              ></i>
                              <span>
                                <span class="waypoint-index">{{ wp.label }}</span>
                                <i class="el-icon-camera"></i>
                                <i class="el-icon-video-camera"></i>
                                <i class="el-icon-picture-outline"></i>
                              </span>
                              <div class="waypoint-contnet">
                                <span class="waypoint-index">{{ wp.label +'----'  +wp.children[0].label }}</span>
                                <span v-for="(action, aIndex) in wp.children[0].actions"
                                      :key="action.id"
                                      class="action-icon"
                                      @click.stop="clickItem(action)">
                                  <img src="@/assets/images/xuanting.svg" alt="svg图片" v-if="action.type==='悬停'" />
                                  <img src="@/assets/images/photo.svg" alt="svg图片" v-if="action.type==='拍照'" />
                                  <img src="@/assets/images/startVideo.svg" alt="svg图片" v-if="action.type==='开始录像'" />
                                  <img src="@/assets/images/stopVideo.svg" alt="svg图片" v-if="action.type==='结束录像'" />
                                  <img src="@/assets/images/zoom.svg" alt="svg图片" v-if="action.type==='变焦'" />
                                  <!-- <i v-if="action.type==='拍照'" class="el-icon-video-camera"></i> -->
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
@@ -72,7 +81,7 @@
              </el-card>
          </el-col>
          <el-col :span="20">
              <InitMap v-if="showMap" @mergePoint="mergePoint" :towerUrl="towerUrl"  :deviceData="deviceData"  @dealTreeData="dealTreeData" ref="initMap"></InitMap>
              <InitMap v-if="showMap" @mergePoint="mergePoint" :towerUrl="towerUrl"  :deviceData="deviceData"  @dealTreeData="dealTreeData" ref="initMap" :chooseItem="chooseItem" @dealAction = 'dealAction'></InitMap>
          </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
@@ -93,6 +102,14 @@
let towerHeight = 45
//塔的朝向算法所用到的 旋转度数
let rotationAngle = Cesium.Math.toRadians(0)
const typeDictionary = {
  "拍照": "01",
  "变倍": "02",
  "开始录像": "03",
  '结束录像':'04',
  "悬停": "05",
}
export default{
  name:'shootPointDialog',
   components: {
@@ -127,12 +144,10 @@
        form:{},
        deviceData:null,
        activeName: 'first',
        totalDistance: 3054.9,
        totalTime: '5m 56s',
        totalPoints: 11,
        totalPhotos: 3,
        waypoints:[],
        selectedIndex:null
        selectedIndex:null,
        chooseItem: null,
        lastTableArr:[]
    }
  },
  mounted(){
@@ -153,23 +168,27 @@
    }
  },  
  methods:{
    toggleSelect(wq,index) {
    toggleSelect(data,index) {
      this.chooseItem = data
      console.log(this.treeData)
      console.log(wq)
      console.log(data)
      // 如果点击的是当前行,则取消选中
      if (this.selectedIndex === index) {
        this.selectedIndex = null
      } else {
        this.selectedIndex = index
      }
      const result = this.treeData.filter(item =>
          item.children && item.children.some(child => child.label === wq.label)
      );
      const dataObj = result[0]
      const from = [dataObj.children[0]?.longitude,dataObj.children[0]?.latitude, dataObj.children[0]?.height];
      const to = [dataObj.longitude,dataObj.latitude, dataObj.height];
      // const result = this.treeData.filter(item =>
      //     item.children && item.children.some(child => child.label === data.label)
      // );
      // const dataObj = result[0]
      // const from = [dataObj.children[0]?.longitude,dataObj.children[0]?.latitude, dataObj.children[0]?.height];
      // const to = [dataObj.longitude,dataObj.latitude, dataObj.height];
       const from = [data.children[0].longitude,data.children[0].latitude, data.children[0].height];
        const to = [data.longitude,data.latitude, data.height];
        // this.flyToAndLookAt(from, to);
      this.flyToAndLookAt(from, to);
      this.$refs.initMap.DealVisualCone(dataObj)
      this.$refs.initMap.DealVisualCone(data)
    },
   // 计算 heading(偏航角)
    computeHeading(fromCartesian, toCartesian) {
@@ -200,7 +219,7 @@
        Cesium.Matrix4.inverseTransformation(transform, new Cesium.Matrix4()),
        direction,
        new Cesium.Cartesian3()
      );
      );
      Cesium.Cartesian3.normalize(directionLocal, directionLocal);
      return Math.asin(directionLocal.z); // z轴向上
    },
@@ -228,21 +247,47 @@
        //点击父级
        const from = [data.children[0].longitude,data.children[0].latitude, data.children[0].height];
        const to = [data.longitude,data.latitude, data.height];      
        this.flyToAndLookAt(from, to);
        // this.flyToAndLookAt(from, to);
      } else  {
        //点击子级
        const from = [data.longitude,data.latitude, data.height]; 
        const to = [node.parent?.data?.longitude,node.parent?.data?.latitude, node.parent?.data?.height]; 
        this.flyToAndLookAt(from, to);
        // this.flyToAndLookAt(from, to);
      }
      this.$refs.initMap.DealVisualCone(data,node)
    },
    dealTreeData(arrList){
      console.log(arrList)
      console.log(this.treeData)
      console.log(this.lastTableArr)
      this.treeData = arrList
      const childrenArr = arrList
        .filter(item => Array.isArray(item.children))
        .map(item => item.children)
        .reduce((acc, cur) => acc.concat(cur), []);
        //通过右点击 对比之前的动作的数组 把之前动作数组缓存 然后反赋值给新数据
      if(this.lastTableArr?.length >0){
        this.treeData = this.treeData.map(item2 => {
        const matchingItem1 = this.lastTableArr.find(item1 => item1.label === item2.label);
          if (matchingItem1) {
            item2.children = item2.children.map(child2 => {
              const matchingChild1 = matchingItem1.children.find(child1 => child1.label === child2.label);
              if (matchingChild1) {
                // 将 actions 从 array1 复制到 this.treeData
                child2.actions = [...matchingChild1.actions];
              }
              return child2;
            });
          }
          return item2;
        })
      }
      childrenArr?.forEach((ele)=>{
        if(ele.actions) {
        }else {
          ele.actions = []
        }
      })
      this.waypoints = childrenArr
      console.log(childrenArr)
      console.log(this.treeData)
@@ -390,7 +435,10 @@
    },
    //合并逻辑  将附近n米范围内的点合并 并且处理成数据
    mergePoint(arr,mergeNumber,viewer){
      this.treeData = arr
      console.log(arr)
      console.log(this.treeData)
      // this.treeData = arr
      this.treeData = this.lastTableArr
      const result = this.replaceCloseChildrenWithHighestPoint(this.treeData,mergeNumber);
      // const updated = this.insertRaisedPoints(result, 0,0, 236, 130);
      const updated = this.insertRaisedPoints(result, globalon, globalat, towerHeight);
@@ -461,7 +509,9 @@
                ...pointA,
                id: this.generateId(),
                label: pointA.label + "-加高",
                height: pointA.height + 50
                // height: pointA.height + 50,
                height: pointA.height  + (towerHeight  - pointA.height  +  20),
                actions:[]
              }
            ]
          };
@@ -480,7 +530,8 @@
                ...pointB,
                id: this.generateId(),
                label: pointB.label + "-加高",
                height: pointB.height + 50
                height: pointB.height  + (towerHeight  - pointB.height  +  20),
                actions:[]
              }
            ]
          };
@@ -633,7 +684,31 @@
          type: 'warning'
        })
      }
      // this.dialogVisible = false
      console.log(this.$refs.initMap.preVideoScopePrimitiveArrTie)
      console.log(this.treeData)
      console.log(this.waypoints)
      this.$refs.initMap.preVideoScopePrimitiveArrTie.forEach(point => {
          // 遍历原始数据
          this.treeData.forEach(item => {
              item.children.forEach(child => {
                  // 如果名称相同
                  if (child.label === point.name) {
                      // 向 actions 数组的第一项 push zoomRatio
                      console.log(child)
                      console.log(point.primitive)
                      child.actions.unshift({
                          "id": Date.now(), // 使用当前时间作为唯一ID
                          "type": "变倍",
                          "extra": {
                              "value": point.primitive.zoomRatio || 1
                          }
                      });
                  }
              });
          });
      })
      console.log(this.treeData)
      this.dialogVisible = false
      // const dealArr = this.submitDealData()
      const transformed = this.treeData.map((ground, index) => {
        const pointNumber = index + 1;
@@ -647,7 +722,12 @@
              latitude: ground.latitude,
              longitude: ground.longitude,
              pointNumber: 1,
              targetName: ground.label
              targetName: ground.label,
              actions:child.actions.map((item, index) => ({
                actionIndex: index.toString(),
                actionType: typeDictionary[item.type] || "", // 如果类型不存在字典中,默认空字符串
                actionValue: item.extra.value
              }))
            }
          ],
          latitude: child.latitude,
@@ -690,11 +770,42 @@
     const rotatedZ = localStartPoint.z; // Z轴坐标保持不变
      // 将旋转后的局部坐标转换回世界坐标系
     return Cesium.Matrix4.multiplyByPoint(transformationMatrix, new Cesium.Cartesian3(rotatedX, rotatedY, rotatedZ), new Cesium.Cartesian3());
    },
    dealAction(data){
      console.log(this.treeData)
      console.log(this.waypoints)
      console.log(data)
      const byLabel = this.addOrUpdate(this.lastTableArr, data, 'label', this)
      this.waypoints  = this.lastTableArr
      console.log(byLabel)
      console.log(this.lastTableArr)
      console.log( this.waypoints)
      this.treeData = this.lastTableArr
    },
    addOrUpdate(list, newItem, key = 'label', vm = null) {
      let index = list.findIndex(item => item[key] === newItem[key]);
      console.log(index)
      if (index !== -1) {
        if (vm) {
          vm.$set(list, index, newItem); // Vue2 响应式替换
        } else {
          list.splice(index, 1, newItem);
        }
      } else {
        list.push(newItem);
      }
    },
    clickItem(value){
        this.$refs.initMap.editAction(value);
    }
  }
}
</script>
<style scoped>
::v-deep .el-dialog__header {
  padding: 10px; /* 修改内边距 */
  font-size: 18px; /* 修改字体大小 */
}
.noScroll{
    height: calc(100vh - 175px);
    overflow: auto;
@@ -820,6 +931,9 @@
  overflow-y: scroll;
  /* overflow: scroll; */
}
.waypoint-panel  .waypoints {
  min-height: 50px;
}
.stats {
  display: flex;
@@ -839,7 +953,7 @@
.waypoint-item {
  border-bottom: 1px solid #333;
  height: 40px;
  min-height: 40px;
  line-height: 40px;
}
@@ -852,25 +966,37 @@
  align-items: center;
  cursor: pointer;
  padding: 4px 8px;
  width: 280px;
  word-wrap: break-word;
}
.waypoint-header i {
  margin-right: 6px;
  height: 36px;
  line-height: 36x;
  transition: transform 0.2s;
  font-size: 24px;
  font-size: 22px;
}
.waypoint-header .waypoint-index {
  font-size: 24px;
  font-size: 22x;
}
.rotated {
  transform: rotate(-90deg);
}
.waypoint-content {
  padding: 4px 8px;
  flex: 1;
  background: rgb(73, 76, 128);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.waypoint-contnet img{
  height: 25px;
  margin-left: 5px;
}
</style>