优化左中右联动效果

jihongshun

3 天以前 f4c90cdeda652f0d40d04eefde317626593d19e5

 src/utils/components/init-map.vue

@@ -115,11 +115,7 @@
        </div>
        
      </div>
      <div class="cesiumButtonGroup">
        <el-button id="groundPoi" @click="addGroundPoi()" type="primary">地面点</el-button>
        <el-input v-model="mergeNumber" placeholder="请输入合并范围" type="number" style="width: 150px;"></el-input>
        <el-button  @click="mergePoint()" type="success">合并</el-button>
      </div>
      
      <!-- <div class="key-container">
        <div class="arrow-row">
          <div
@@ -172,7 +168,11 @@
          </div>
      </div> -->
    </div>

    <el-button id="groundPoi" class="groundPoi" @click="addGroundPoi()" type="info" plain >地面点</el-button>
    <div class="cesiumButtonGroup">
      <el-input v-model="mergeNumber" placeholder="合并范围" type="number" style="width: 120px;"></el-input>
      <el-button  @click="mergePoint()" type="success">合并</el-button>
    </div>
    <!-- 动态坐标、动态相机参数显示 -->
    <!-- <div id="moveResult" class="moveResult">
      <div id="moveResultCon" class="moveResultCon"></div>
@@ -1272,13 +1272,14 @@
    editAction(action){
      // 点击左侧小图标，右侧切换到该 action
      this.currentAction = action;
      console.log(action)
      console.log(this.currentAction)
      if(action.type == '悬停') {
          this.time = action.extra.value
      } else if(action.type == '拍照'){
          this.newTakePhoto = action.extra.value 
          this.takePhoto = action.extra.value 
      }else if(action.type == '开始录像'){
          this.newTakeVideo = action.extra.value 
          this.takeVideo = action.extra.value 
      }else if(action.type == '结束录像'){
      }
    },
@@ -1301,7 +1302,7 @@
      console.log(this.newTakePhoto)
      this.takePhoto = this.newTakePhoto;  // 点击对号时，更新数据
      this.isEditingPhoto = false;  // 结束编辑
      this.currentAction.extra.value = this.takePhoto
      this.currentAction.extra.value = this.newTakePhoto
    },
    cancelEditing() {
      this.newTakePhoto = this.takePhoto;  // 点击取消时，恢复原数据
@@ -1314,7 +1315,7 @@
    validateVideoInput() {
      this.takeVideo = this.newTakeVideo;  // 点击对号时，更新数据
      this.isEditingVideo = false;  // 结束编辑
      this.currentAction.extra.value = this.takeVideo
      this.currentAction.extra.value = this.newTakeVideo
    },
    cancelVideoEditing() {
      this.newTakeVideo = this.takeVideo;  // 点击取消时，恢复原数据
@@ -1354,8 +1355,10 @@

<style scoped>


.cesium-example{
  height: calc(100vh - 185px);
  /* height: calc(100vh - 185px); */
  height: 100%;
}
#cesiumContainer {
    margin: 0;
@@ -1370,7 +1373,7 @@
    /* padding: 0 5px; */
    right: 10px;
    /* top: 0px; */
    bottom: 80px;
    bottom: 30px;
    margin: 0;
    width: 400px;
    height: 300px;
@@ -1436,20 +1439,28 @@
}
.flayDataAll {
  background-color:#232323;
  height: calc(100% - 55px);
  /* height: calc(100% - 55px); */
  height: calc(100% - 5px);
  width: 100%;
}
.flyData{
  width: calc(100% - 32px);
  height: calc(100% - 55px);
  /* height: calc(100% - 55px); */
  height: calc(100% - 5px);
  margin: auto;
  color: white;
}
.cesiumButtonGroup{
  position: absolute;
  bottom: 0;
  top: 15px;
  left: 100px;
  /* margin-top: 10px;
  margin-left: 10px; */
}
.groundPoi {
  position: absolute;
  top: 15px;
  left: 350px;
}
.moveResult{position:absolute;z-index:2;background-color:rgba(47,53,60,1);padding:0 5px;right:50%;bottom:30px;
    border:1px solid rgba(255,255,255,.1);box-sizing:content-box;width:220px;height:30px;font-size:14px;text-align:center}
@@ -1518,7 +1529,7 @@
  height: 300px;
  position: absolute;
  right: 10px;
  bottom:80px;
  bottom:30px;
  /* background-color: red; */
  z-index: 9;