forked from drone/command-center-dashboard

shuishen
2025-04-16 115bd56702e2ce09b7a7c1e6bb5e93e2f6174cdf
src/views/Home/AINowFly.vue
@@ -14,21 +14,46 @@
            <el-input disabled type="text" v-model="di" placeholder="地名&经纬度"/>
         </el-form-item>
         <!--         todo-->
         <el-form-item label="事件">
         <el-form-item label="飞行事件">
            <div class="event">
               <img src="@/assets/images/aiNowFly/picture-recording.png" alt="">
               <div class="img-close" v-show="isPhoto">
                  <img @click="isPhoto=false" class="close" src="@/assets/images/aiNowFly/close.png" alt="">
                  <img src="@/assets/images/aiNowFly/photo.png" alt="">
               </div>
               <div class="img-close" v-show="isStop">
                  <img @click="isStop=false" class="close" src="@/assets/images/aiNowFly/close.png" alt="">
                  <img src="@/assets/images/aiNowFly/stop.png" alt="">
               </div>
               <div class="add-event" @click="isShowEvent = !isShowEvent">+
                  <div class="event-select" v-show="isShowEvent">
                     <div class="photo" @click="isPhoto=true">拍照</div>
                     <div class="stop" @click="isStop=true">悬停</div>
                  </div>
               </div>
            </div>
         </el-form-item>
      </el-form>
      <div class="title-list">可飞行机巢列表:</div>
      <el-table :data="list" height="120" @selection-change="handleSelectionChange">
         <el-table-column type="selection" />
         <!-- <el-table-column type="index" label="序号" /> -->
         <el-table-column prop="nickname" label="机巢名称" />
         <el-table-column prop="minute" label="可飞行时间" />
         <el-table-column prop="exe_distance" label="可飞行距离" />
      </el-table>
      <div class="tabledata">
         <div class="table-content">
            <div class="tabler-item">
               <el-checkbox v-model="isCheckAll" @change="checkedAll"/>
            </div>
            <div class="table-item">机巢名称</div>
            <div class="table-item">可飞行时间</div>
            <div class="table-item">可飞行距离</div>
         </div>
         <div class="table-content" v-for="item in list">
            <div class="tabler-item">
               <el-checkbox v-model="item.checked" @change="handleItemCheck"/>
            </div>
            <div class="table-item">{{ item.nickname }}</div>
            <div class="table-item">{{ item.minute }}</div>
            <div class="table-item">{{ item.exe_distance }}</div>
         </div>
      </div>
      <div class="btn-submit" @click="nowFly"><img src="@/assets/images/aiNowFly/fly.png" alt=""></div>
   </div>
</template>
@@ -61,9 +86,17 @@
   type: 1,
   begin_time: nowTime,
   end_time: nowTime,
   action_modes: [{action_actuator_func: 'startRecord'}],
}
const params = ref(_.cloneDeep(paramsInit))
const di = computed(() => params.value.longitude + ',' + params.value.latitude)
// 事件默认隐藏
const isShowEvent = ref(false);
// 添加事件
const isPhoto = ref(false)
const isStop = ref(false)
const rules = ref({
   name: [
@@ -89,6 +122,12 @@
   await ruleFormRef.value.validate()
   if (!params.value.dock_sns.length) return ElMessage.warning('请选择将要飞行的机巢')
   if (!params.value.longitude) return ElMessage.warning('请选择飞行的点')
   if (isPhoto.value) {
      params.value.action_modes.push({action_actuator_func:'takePhoto'})
   }
   if (isStop.value) {
      params.value.action_modes.push({action_actuator_func:'hover'})
   }
   createTask(params.value).then(res => {
      ElMessage.success('起飞成功')
      if (params.value.dock_sns.length === 1) {
@@ -205,6 +244,7 @@
  size: 10
});
const isCheckAll = ref(false);
// 获取飞机列表
const getFJList = async () => {
   let pageParams = ref({
@@ -215,10 +255,27 @@
   const res = await getFlyingNestBy(pageParams.value, pagingParams.value)
   list.value = (res.data?.data || []).map(item => ({
      ...item,
      checked: false,
      minute: _.round(item.estimated_arrival_time / 60, 0),
   }))
   if (!list.value.length) ElMessage.warning('附近暂无可用无人机')
   renderingLine()
}
// 单个选择框变化
const handleItemCheck = () => {
  const allChecked = list.value.every(item => item.checked)
  const someChecked = list.value.some(item => item.checked)
  isCheckAll.value = allChecked
  params.value.dock_sns = list.value.filter(item => item.checked).map(item => item.device_sn)
}
// 全选
const checkedAll = () => {
   list.value.forEach(item => {
      item.checked = isCheckAll.value
   })
   params.value.dock_sns = isCheckAll.value ? list.value.map(item => item.device_sn) : []
}
const initMap = () => {
@@ -240,6 +297,8 @@
   list.value = []
   eventPoint = {}
   store.commit('setFootActiveIndex', 0)
   // 显示相关的按钮
   store.commit('setHideBottomIcon', true)
}
onBeforeUnmount(() => {
@@ -304,79 +363,82 @@
      box-shadow: 0 0 0 1px #026AD6;
    }
      .event {
         display: flex;
         img {
            width: 40px;
            height: 34px;
            margin-right: 10px;
         }
         .img-close {
            position: relative;
            .close {
               cursor: pointer;
               width: 8px;
               height: 8px;
               position: absolute;
               top: -8px;
               right: 1px;
            }
         }
         .add-event {
            width: 38px;
            height: 38px;
            background: rgba(83,179,255,0.16);
            border-radius: 8px 8px 8px 8px;
            border: 1px dashed;
            text-align: center;
            line-height: 38px;
            color: #11C4FF;
            position: relative;
            cursor: pointer;
            // border-image: linear-gradient(180deg, rgba(17, 196, 255, 1), rgba(255, 255, 255, 1)) 1 1;
            .event-select {
               z-index: 10;
               position: absolute;
               top: 40px;
               width: 72px;
               height: 70px;
               background: #0F1929;
               box-shadow: inset 0px -50px 50px 0px rgba(27,148,255,0.13);
               border-radius: 8px 8px 8px 8px;
               border: 1px solid #51A8FF;
               text-align: center;
               color: #D3E9FF;
               .photo {
                  height: 36px;
                  border-bottom: 1px solid #51A8FF;
               }
            }
         }
      }
   }
   .title-list {
      padding: 0 0 14px 11px;
   }
   .el-table {
      width: 300px;
   .tabledata {
      height: 120px;
      margin: 0 0 0 11px;
      overflow: hidden;
      :deep(.el-scrollbar__wrap) {
         overflow-x: hidden !important;
      border: 1px dashed #fff;
      margin: 0px 10px;
      .table-content {
         padding: 0 8px;
         display: flex;
         justify-content: space-between;
         align-items: center;
         border-bottom: 1px dashed #fff;
      }
      :deep(.el-table__body-wrapper) {
         overflow-x: hidden !important;
      }
      :deep(.el-table__header-wrapper) {
         th {
            font-size: 12px;
            color: #D3E9FF;
            background-color: #122348;
            font-weight: normal;
            border-bottom: none;
         }
      }
      :deep(.el-table__empty-block) {
         background-color: #0A1734;
         height: auto !important;  // 移除固定高度
       min-height: 60px;        // 设置最小高度
         .el-table__empty-text {
            color: #FFFFFF;
         }
      }
      :deep(.el-table__body) {
         background-color: #0A1734;
         tr {
            background-color: #0A1734 !important;
            color: #FFFFFF;
            &:hover > td {
               background-color: #0A1734 !important;
            }
         }
      }
      :deep(.el-scrollbar) {
         background-color: #0A1734;
      .table-item {
         width: 100px;
         text-align: center;
         height: 32px;
         line-height: 32px;
      }
   }
   .btn-submit {
      cursor: pointer;
      margin-left: 88px;
      margin-top: 12px;
      img { width: 138px; height: 38px; }
   }
   :deep(.el-table__inner-wrapper) {
    border: 1px dashed #2F497D;
    &::before {
      display: none;
    }
  }
  :deep(.el-table__cell) {
    border: none;
  }
  :deep(.el-table__border) {
    display: none;
  }
}
</style>