| | |
| | | <template> |
| | | <div class="AINowFly"> |
| | | <div>智引即飞</div> |
| | | <div class="title">指点飞行</div> |
| | | <el-form ref="ruleFormRef" :model="params" :rules="rules" label-width="auto" size="small" status-icon> |
| | | <el-form-item label="任务名称" prop="name"> |
| | | <el-input v-model="params.name" /> |
| | | </el-form-item> |
| | | <el-form-item label="关联算法" prop="ai_types"> |
| | | <el-select v-model="params.ai_types" placeholder="请选择" multiple> |
| | | <el-select v-model="params.ai_types" placeholder="请选择" multiple collapse-tags collapse-tags-tooltip> |
| | | <el-option v-for="item in taskAlgorithm" :key="item.id" :label="item.dictValue" :value="item.dictKey" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="地址"> |
| | | <el-input disabled type="text" v-model="di" /> |
| | | <el-input disabled type="text" v-model="di" placeholder="地名&经纬度"/> |
| | | </el-form-item> |
| | | <!-- todo--> |
| | | <el-form-item label="事件"> |
| | | <div>默认拍照</div> |
| | | <div class="event"> |
| | | <img src="@/assets/images/aiNowFly/picture-recording.png" alt=""> |
| | | </div> |
| | | </el-form-item> |
| | | </el-form> |
| | | |
| | | <div>可用机巢列表</div> |
| | | <el-table :data="list" @selection-change="handleSelectionChange"> |
| | | <el-table-column type="selection" width="55" /> |
| | | <el-table-column type="index" label="序号" /> |
| | | <div class="title-list">可飞行机巢列表:</div> |
| | | <el-table :data="list" height="120" @selection-change="handleSelectionChange"> |
| | | <el-table-column type="selection" width="40" /> |
| | | <!-- <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="预计飞行距离(m)" /> |
| | | <el-table-column prop="minute" label="可飞行时间" /> |
| | | <el-table-column prop="exe_distance" label="可飞行距离" /> |
| | | </el-table> |
| | | <el-button type="primary" @click="nowFly">迅速起飞</el-button> |
| | | <div class="btn-submit" @click="nowFly"><img src="@/assets/images/aiNowFly/fly.png" alt=""></div> |
| | | </div> |
| | | </template> |
| | | <script setup> |
| | |
| | | import { cartesian3Convert } from '@/utils/cesium/mapUtil' |
| | | import { Cartesian3 } from 'cesium' |
| | | import uavImg from '@/assets/images/home/useUavHome/uavImg.png' |
| | | import endingImg from '@/assets/images/aiNowFly/ending.png' |
| | | import endingHighImg from '@/assets/images/aiNowFly/ending-high.png' |
| | | import startingImg from '@/assets/images/aiNowFly/starting.png' |
| | | import ImageTrailMaterial from '@/utils/cesium/ImageTrailMaterial' |
| | | import lineImg from '@/assets/images/arrow-right-blue.png' |
| | | import _ from 'lodash' |
| | |
| | | const start = Cartesian3.fromDegrees(Number(item.longitude), Number(item.latitude)) |
| | | const end = Cartesian3.fromDegrees(Number(longitude), Number(latitude)) |
| | | const positionsList = [start, end] |
| | | // 计算中点位置 |
| | | const midpoint = Cartesian3.midpoint(start, end, new Cartesian3()) |
| | | // 计算线段方向 |
| | | const direction = Cartesian3.subtract(end, start, new Cartesian3()) |
| | | Cartesian3.normalize(direction, direction) |
| | | // 线 |
| | | // 添加中点文字标签 |
| | | viewer.entities.add({ |
| | | id: `AINow-time-${index}`, |
| | | position: midpoint, |
| | | label: { |
| | | text: `预计${item.minute}分钟`, |
| | | font: 'bold 16px Source Han Sans CN', // 加粗并增大字号 |
| | | fillColor: new Cesium.Color(27/255, 179/255, 255/255, 1.0), |
| | | fillColor: Cesium.Color.WHITE, |
| | | style: Cesium.LabelStyle.FILL_AND_OUTLINE, |
| | | verticalOrigin: Cesium.VerticalOrigin.CENTER, |
| | | horizontalOrigin: Cesium.HorizontalOrigin.CENTER, |
| | | eyeOffset: new Cesium.Cartesian3(0, 0, -10), |
| | | pixelOffset: new Cesium.Cartesian2(0, -10), |
| | | rotation: Math.atan2(direction.y, direction.x) |
| | | } |
| | | }) |
| | | viewer.entities.add({ |
| | | id: `AINow-line-${index}`, |
| | | polyline: { |
| | | width: 4, |
| | | positions: positionsList, |
| | | material: new ImageTrailMaterial({ |
| | | color: { alpha: 1, blue: 1, green: 1, red: 1 }, |
| | | speed: 20, |
| | | image: lineImg, |
| | | repeat: { x: Math.floor(40), y: 1 }, |
| | | }), |
| | | material: new Cesium.Color(27/255, 179/255, 255/255, 1.0), |
| | | clampToGround: false, |
| | | }, |
| | | }) |
| | |
| | | viewer.entities.add({ |
| | | id: `AINow-point-${index}`, |
| | | position: start, |
| | | label: { |
| | | text: item.nickname, |
| | | font: '12pt Source Han Sans CN', |
| | | fillColor: Cesium.Color.WHITE, |
| | | outlineColor: Cesium.Color.BLACK, |
| | | outlineWidth: 2, |
| | | style: Cesium.LabelStyle.FILL_AND_OUTLINE, |
| | | verticalOrigin: Cesium.VerticalOrigin.BOTTOM, |
| | | pixelOffset: new Cesium.Cartesian2(0, -9), |
| | | }, |
| | | // label: { |
| | | // text: item.nickname, |
| | | // font: '12pt Source Han Sans CN', |
| | | // fillColor: Cesium.Color.WHITE, |
| | | // outlineColor: Cesium.Color.BLACK, |
| | | // outlineWidth: 2, |
| | | // style: Cesium.LabelStyle.FILL_AND_OUTLINE, |
| | | // verticalOrigin: Cesium.VerticalOrigin.BOTTOM, |
| | | // pixelOffset: new Cesium.Cartesian2(0, -9), |
| | | // }, |
| | | billboard: { |
| | | image: new Cesium.ConstantProperty(uavImg), |
| | | width: 24, |
| | | height: 24, |
| | | image: new Cesium.ConstantProperty(index === 0 ? endingHighImg : endingImg), |
| | | width: 40, |
| | | height: 40, |
| | | }, |
| | | properties: { |
| | | customData: { |
| | |
| | | viewer.entities.add({ |
| | | position: earthPosition, |
| | | id: `AINow-event-0`, |
| | | point: { |
| | | pixelSize: 10, |
| | | color: Cesium.Color.RED, |
| | | outlineColor: Cesium.Color.WHITE, |
| | | outlineWidth: 2, |
| | | }, |
| | | billboard: { |
| | | image: new Cesium.ConstantProperty(startingImg), |
| | | width: 40, |
| | | height: 40, |
| | | } |
| | | }) |
| | | const { longitude, latitude } = cartesian3Convert(earthPosition, viewer) |
| | | eventPoint = { longitude, latitude } |
| | |
| | | }) |
| | | } |
| | | |
| | | let pagingParams = ref({ |
| | | current: 1, |
| | | size: 10 |
| | | }); |
| | | |
| | | // 获取飞机列表 |
| | | const getFJList = async () => { |
| | | params.value.dock_sns = [] |
| | | const getListParams = { ...eventPoint, page: 1, limit: 9999, type: 1 } |
| | | const res = await getFlyingNestBy(getListParams) |
| | | let pageParams = ref({ |
| | | ...eventPoint, |
| | | type: 1, |
| | | }); |
| | | params.value.dock_sns = []; |
| | | const res = await getFlyingNestBy(pageParams.value, pagingParams.value) |
| | | list.value = (res.data?.data || []).map(item => ({ |
| | | ...item, |
| | | minute: _.round(item.estimated_arrival_time / 60, 0), |
| | |
| | | <style scoped lang="scss"> |
| | | .AINowFly { |
| | | position: absolute; |
| | | top: 200px; |
| | | right: 0; |
| | | width: 400px; |
| | | height: 700px; |
| | | background: white; |
| | | color: black; |
| | | font-size: 20px; |
| | | top: 263px; |
| | | right: 74px; |
| | | width: 320px; |
| | | height: 518.6px; |
| | | font-size: 14px; |
| | | color: #FFFFFF; |
| | | background: url('@/assets/images/aiNowFly/ai-fly-bg.png') no-repeat center / 100% 100%; |
| | | .title { |
| | | height: 50px; |
| | | line-height: 50px; |
| | | margin-left: 20px; |
| | | font-family: Segoe UI, Segoe UI; |
| | | font-weight: bold; |
| | | font-size: 20px; |
| | | letter-spacing: 2px; |
| | | background: linear-gradient(180deg, #FFFFFF 50%, #35D0FF 100%); |
| | | -webkit-background-clip: text; |
| | | -webkit-text-fill-color: transparent; |
| | | background-clip: text; |
| | | } |
| | | .el-form { |
| | | padding: 20px 16px 13px 11px; |
| | | :deep(.el-form-item__label) { |
| | | color: #FFFFFF; |
| | | } |
| | | :deep(.el-input__wrapper), |
| | | :deep(.el-select), |
| | | :deep(.el-select__wrapper) { |
| | | background-color: #021740; |
| | | box-shadow: 0 0 0 1px #026AD6; |
| | | |
| | | &.is-focus { |
| | | box-shadow: 0 0 0 1px #026AD6; |
| | | } |
| | | } |
| | | |
| | | :deep(.el-input__wrapper.is-disabled) { |
| | | background-color: #021740; |
| | | box-shadow: 0 0 0 1px #026AD6; |
| | | } |
| | | .event { |
| | | img { |
| | | width: 40px; |
| | | height: 34px; |
| | | } |
| | | } |
| | | } |
| | | .title-list { |
| | | padding: 0 0 14px 11px; |
| | | } |
| | | .el-table { |
| | | width: 300px; |
| | | height: 120px; |
| | | margin: 0 0 0 11px; |
| | | :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; |
| | | |
| | | .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; |
| | | } |
| | | } |
| | | .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> |