From 115bd56702e2ce09b7a7c1e6bb5e93e2f6174cdf Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 16 Apr 2025 20:50:13 +0800
Subject: [PATCH] Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard
---
src/views/Home/AINowFly.vue | 188 +++++++++++++++++++++++++++++++---------------
1 files changed, 125 insertions(+), 63 deletions(-)
diff --git a/src/views/Home/AINowFly.vue b/src/views/Home/AINowFly.vue
index 45eff86..2cbe190 100644
--- a/src/views/Home/AINowFly.vue
+++ b/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>
--
Gitblit v1.9.3