| | |
| | | <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> |
| | |
| | | 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: [ |
| | |
| | | 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) { |
| | |
| | | size: 10 |
| | | }); |
| | | |
| | | const isCheckAll = ref(false); |
| | | // 获取飞机列表 |
| | | const getFJList = async () => { |
| | | let pageParams = ref({ |
| | |
| | | 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 = () => { |
| | |
| | | list.value = [] |
| | | eventPoint = {} |
| | | store.commit('setFootActiveIndex', 0) |
| | | // 显示相关的按钮 |
| | | store.commit('setHideBottomIcon', true) |
| | | } |
| | | |
| | | onBeforeUnmount(() => { |
| | |
| | | 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> |