Merge branch 'main' of http://123.132.248.154:10000/gitY/DiKongGanZhiPingTai
commit
929ffcb2a5
|
|
@ -283,7 +283,6 @@
|
|||
import { columns, searchFormSchema } from './modal.data';
|
||||
import dayjs from 'dayjs';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import dataJson from './data.json';
|
||||
|
||||
const { createConfirm, createMessage } = useMessage();
|
||||
|
||||
|
|
@ -447,13 +446,6 @@
|
|||
// },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: '新建计划1 2025-06-11 16:28:23 (UTC+08)',
|
||||
createtime: '2025-06-11 16:28:23',
|
||||
type: 'folder',
|
||||
children: dataJson,
|
||||
},
|
||||
// {
|
||||
// id: '4',
|
||||
// name: '模型',
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@
|
|||
const allMarkDataList = ref(markJson);
|
||||
// 设置当前展示的标注信息
|
||||
function setNowShowMarkData(value) {
|
||||
if (value) {
|
||||
if (value.id) {
|
||||
markInfoShow.value = true;
|
||||
} else {
|
||||
markInfoShow.value = false;
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
|
||||
// 设置当前展示的区域信息
|
||||
function setNowShowAreaData(value) {
|
||||
if (value) {
|
||||
if (value.id) {
|
||||
areaInfoShow.value = true;
|
||||
} else {
|
||||
areaInfoShow.value = false;
|
||||
|
|
@ -202,7 +202,7 @@
|
|||
|
||||
// 设置当前展示的图片
|
||||
function setNowShowImageData(value) {
|
||||
if (value) {
|
||||
if (value.id) {
|
||||
imageInfoShow.value = true;
|
||||
} else {
|
||||
imageInfoShow.value = false;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,31 @@
|
|||
[
|
||||
{
|
||||
"id": "84b09cdc-8138-461a-9008-2ac2fd2dabe1",
|
||||
"name": "fence-2025-07-09 10:58",
|
||||
"status": "enable",
|
||||
"type": "dfence",
|
||||
"content": {
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Circle",
|
||||
"radius": 25.98278531053457,
|
||||
"coordinates": [
|
||||
113.94260619946274,
|
||||
22.581532991805254
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"color": "#00FF00"
|
||||
}
|
||||
},
|
||||
"area_hash": "enable_dfence_602389930bf13745ad901786a991ee0a",
|
||||
"created_time": 1752029923657,
|
||||
"created_by": "1921832882836627456",
|
||||
"created_nickname": "17854119262",
|
||||
"updated_time": 1752029923657,
|
||||
"updated_by": "1921832882836627456",
|
||||
"updated_nickname": "17854119262"
|
||||
},
|
||||
{
|
||||
"id": "f8a1ba2f-3d75-45e3-8c37-c305b8a8a18f",
|
||||
"name": "noland-2025-07-03 09:37",
|
||||
|
|
@ -43,82 +70,7 @@
|
|||
"created_time": 1751506632716,
|
||||
"created_by": "1921832882836627456",
|
||||
"created_nickname": "17854119262",
|
||||
"updated_time": 1751506632716,
|
||||
"updated_by": "1921832882836627456",
|
||||
"updated_nickname": "17854119262"
|
||||
},
|
||||
{
|
||||
"id": "4b312405-a1f9-4326-b7ad-f684912931c7",
|
||||
"name": "fence-2025-07-03 09:36",
|
||||
"status": "enable",
|
||||
"type": "dfence",
|
||||
"content": {
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Circle",
|
||||
"radius": 15.568918453415524,
|
||||
"coordinates": [
|
||||
113.94244540081064,
|
||||
22.581260697110643
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"color": "#00FF00"
|
||||
}
|
||||
},
|
||||
"area_hash": "enable_dfence_cec1fe6f1bdf6ba3de183332ec941336",
|
||||
"created_time": 1751506620283,
|
||||
"created_by": "1921832882836627456",
|
||||
"created_nickname": "17854119262",
|
||||
"updated_time": 1751699622015,
|
||||
"updated_by": "1921832882836627456",
|
||||
"updated_nickname": "17854119262"
|
||||
},
|
||||
{
|
||||
"id": "5ef9074f-332e-4c2c-8caf-0d5e9c2d4bb0",
|
||||
"name": "fence-2025-07-03 09:36",
|
||||
"status": "enable",
|
||||
"type": "dfence",
|
||||
"content": {
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
113.94217071448199,
|
||||
22.580710270949893
|
||||
],
|
||||
[
|
||||
113.94234419200872,
|
||||
22.580557223329823
|
||||
],
|
||||
[
|
||||
113.94234708696375,
|
||||
22.580804244635136
|
||||
],
|
||||
[
|
||||
113.942101324811,
|
||||
22.580866002541086
|
||||
],
|
||||
[
|
||||
113.94217071448199,
|
||||
22.580710270949893
|
||||
]
|
||||
]
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"color": "#00FF00",
|
||||
"width": 50,
|
||||
"clampToGround": true
|
||||
}
|
||||
},
|
||||
"area_hash": "enable_dfence_491bd3ba995a30b943fce12cd277f319",
|
||||
"created_time": 1751506610758,
|
||||
"created_by": "1921832882836627456",
|
||||
"created_nickname": "17854119262",
|
||||
"updated_time": 1751506610758,
|
||||
"updated_time": 1752051379960,
|
||||
"updated_by": "1921832882836627456",
|
||||
"updated_nickname": "17854119262"
|
||||
},
|
||||
|
|
@ -149,58 +101,10 @@
|
|||
"updated_by": "1921832882836627456",
|
||||
"updated_nickname": "17854119262"
|
||||
},
|
||||
{
|
||||
"id": "8fb48c63-b840-448d-b331-0e0dd505cdb2",
|
||||
"name": "nfz-2025-07-03 09:36",
|
||||
"status": "enable",
|
||||
"type": "nfz",
|
||||
"content": {
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
113.94081757610996,
|
||||
22.581070072300122
|
||||
],
|
||||
[
|
||||
113.94103442563689,
|
||||
22.580927765651026
|
||||
],
|
||||
[
|
||||
113.94117610149931,
|
||||
22.581056645867445
|
||||
],
|
||||
[
|
||||
113.94095925169468,
|
||||
22.58111303220476
|
||||
],
|
||||
[
|
||||
113.94081757610996,
|
||||
22.581070072300122
|
||||
]
|
||||
]
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"color": "#FF0000",
|
||||
"width": 50,
|
||||
"clampToGround": true
|
||||
}
|
||||
},
|
||||
"area_hash": "enable_nfz_069b0cdcae471e9849ff2af1c407cb63",
|
||||
"created_time": 1751506590102,
|
||||
"created_by": "1921832882836627456",
|
||||
"created_nickname": "17854119262",
|
||||
"updated_time": 1751506590102,
|
||||
"updated_by": "1921832882836627456",
|
||||
"updated_nickname": "17854119262"
|
||||
},
|
||||
{
|
||||
"id": "53d34e36-83a1-4f27-9379-59916ac22f94",
|
||||
"name": "作业区",
|
||||
"status": "disable",
|
||||
"status": "enable",
|
||||
"type": "dfence",
|
||||
"content": {
|
||||
"type": "Feature",
|
||||
|
|
@ -240,18 +144,18 @@
|
|||
"color": "#00FF00"
|
||||
}
|
||||
},
|
||||
"area_hash": "disable_dfence_d0dc9ea80f32a4ddf9737ed27059da89",
|
||||
"area_hash": "enable_dfence_d0dc9ea80f32a4ddf9737ed27059da89",
|
||||
"created_time": 1747035695040,
|
||||
"created_by": "",
|
||||
"created_nickname": "",
|
||||
"updated_time": 1751700024743,
|
||||
"updated_time": 1751870133102,
|
||||
"updated_by": "1921832882836627456",
|
||||
"updated_nickname": "17854119262"
|
||||
},
|
||||
{
|
||||
"id": "189b2247-a5be-49ef-83cb-768056a00ed6",
|
||||
"name": "限飞区",
|
||||
"status": "disable",
|
||||
"status": "enable",
|
||||
"type": "nfz",
|
||||
"content": {
|
||||
"type": "Feature",
|
||||
|
|
@ -291,11 +195,11 @@
|
|||
"clampToGround": true
|
||||
}
|
||||
},
|
||||
"area_hash": "disable_nfz_d362c13ac83407d94d7e8754f25b1f8d",
|
||||
"area_hash": "enable_nfz_d362c13ac83407d94d7e8754f25b1f8d",
|
||||
"created_time": 1747035694853,
|
||||
"created_by": "",
|
||||
"created_nickname": "",
|
||||
"updated_time": 1751700027203,
|
||||
"updated_time": 1751870135023,
|
||||
"updated_by": "1921832882836627456",
|
||||
"updated_nickname": "17854119262"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,9 +10,9 @@
|
|||
<div
|
||||
v-if="props.nowShowAreaData.type == 'noland'"
|
||||
:style="{
|
||||
width: '13px',
|
||||
height: '13px',
|
||||
outline: `2px solid ${props.nowShowAreaData.content.properties.color}`,
|
||||
width: '15px',
|
||||
height: '15px',
|
||||
background: `linear-gradient(to bottom right, transparent 45%, ${props.nowShowAreaData.content.properties.color} 45%, ${props.nowShowAreaData.content.properties.color} 60%, transparent 60%), #ffffff00`,
|
||||
'margin-left': '2px',
|
||||
'margin-right': '12px',
|
||||
}"
|
||||
|
|
@ -81,21 +81,21 @@
|
|||
<div class="markTitle">水平距离</div>
|
||||
</a-col>
|
||||
<a-col :span="18" v-if="props.nowShowAreaData.type == 'noland'">
|
||||
<div class="markContent"> m</div>
|
||||
<div class="markContent"> {{ distance.toFixed(1) }}m</div>
|
||||
</a-col>
|
||||
<!-- 水平面积 -->
|
||||
<a-col :span="6">
|
||||
<div class="markTitle">水平面积</div>
|
||||
</a-col>
|
||||
<a-col :span="18">
|
||||
<div class="markContent"> ㎡</div>
|
||||
<div class="markContent"> {{ area.toFixed(2) }}㎡</div>
|
||||
</a-col>
|
||||
<!-- 水平周长 -->
|
||||
<a-col :span="6" v-if="props.nowShowAreaData.content.geometry.type == 'Polygon'">
|
||||
<div class="markTitle">水平周长</div>
|
||||
</a-col>
|
||||
<a-col :span="18" v-if="props.nowShowAreaData.content.geometry.type == 'Polygon'">
|
||||
<div class="markContent"> m</div>
|
||||
<div class="markContent"> {{ distance2 }}m</div>
|
||||
</a-col>
|
||||
<!-- 半径 -->
|
||||
<a-col :span="6" v-if="props.nowShowAreaData.content.geometry.type == 'Circle'">
|
||||
|
|
@ -166,6 +166,8 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, nextTick } from 'vue';
|
||||
import * as mars3d from 'mars3d';
|
||||
import * as Cesium from 'mars3d-cesium';
|
||||
import {
|
||||
CloseOutlined,
|
||||
DeleteOutlined,
|
||||
|
|
@ -267,10 +269,50 @@
|
|||
emits('deleteArea', props.nowShowAreaData);
|
||||
}
|
||||
|
||||
// 水平距离
|
||||
const distance = ref(0);
|
||||
async function getDistance() {
|
||||
distance.value = mars3d.MeasureUtil.getSurfaceDistance(
|
||||
props.nowShowAreaData.content.geometry.coordinates[0],
|
||||
);
|
||||
}
|
||||
|
||||
// 水平面积
|
||||
const area = ref(0);
|
||||
async function getArea() {
|
||||
if (props.nowShowAreaData.content.geometry.type == 'Circle') {
|
||||
let radius = props.nowShowAreaData.content.geometry.radius;
|
||||
area.value = Math.PI * radius * radius;
|
||||
} else {
|
||||
area.value = mars3d.MeasureUtil.getSurfaceArea(
|
||||
props.nowShowAreaData.content.geometry.coordinates[0],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// 水平周长
|
||||
const distance2 = ref(0);
|
||||
async function getDistance2() {
|
||||
distance.value = mars3d.MeasureUtil.getDistance(
|
||||
props.nowShowAreaData.content.geometry.coordinates[0],
|
||||
true,
|
||||
);
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.nowShowAreaData,
|
||||
() => {
|
||||
nowAreaData.value = props.nowShowAreaData;
|
||||
// 水平面积
|
||||
getArea();
|
||||
if (props.nowShowAreaData.type == 'noland') {
|
||||
// 水平距离
|
||||
getDistance();
|
||||
}
|
||||
if (props.nowShowAreaData.content.geometry.type == 'Polygon') {
|
||||
// 水平距离
|
||||
getDistance2();
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
|
|
|
|||
|
|
@ -284,9 +284,9 @@
|
|||
<div
|
||||
v-if="show.type == 'noland'"
|
||||
:style="{
|
||||
width: '13px',
|
||||
height: '13px',
|
||||
outline: `2px solid ${show.content.properties.color}`,
|
||||
width: '15px',
|
||||
height: '15px',
|
||||
background: `linear-gradient(to bottom right, transparent 45%, ${show.content.properties.color} 45%, ${show.content.properties.color} 60%, transparent 60%), #ffffff00`,
|
||||
'margin-right': '6px',
|
||||
}"
|
||||
/>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,201 @@
|
|||
<template>
|
||||
<div>
|
||||
<div style="width:100%;height: calc( 100vh - 80px);" >
|
||||
<Map :workPlanFormShow="workPlanFormShow" :airRoute="airRoute" @exitDraw="exitDraw" @flyToThere="flyToThere" :wayline="wayline" :waylineInfo="waylineInfo"></Map>
|
||||
</div>
|
||||
|
||||
<!-- 航线库 -->
|
||||
<div v-if="ariLineShow" style="width:566px;position:absolute;top:30px;left:30px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
|
||||
<airLineList :title="'航线管理'" @checkAriLine="checkAriLine" @previewAirLine="previewAirLine" @createAirLine="handlerCreateAirLine"></airLineList>
|
||||
</div>
|
||||
|
||||
<!-- 新建航线 -->
|
||||
<div v-if="createAirLineShow" style="width:566px;background:#0d0e15c1 ;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
|
||||
<createAirLine @createAirLine="handlerCreateAirRoute" @cancle="cancleCreateAirLine"></createAirLine>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {ref,watch} from 'vue';
|
||||
import airLineList from '../workplan/components/airLineList.vue';
|
||||
import createAirLine from '../workplan/components/createAirLine.vue'
|
||||
import Map from '../workplan/components/map.vue'
|
||||
import AirPolygon from './components/airPolygon.vue';
|
||||
import {getAirLine} from '@/api/sys/workplan';
|
||||
|
||||
import JSZip from 'jszip';
|
||||
import axios from 'axios';
|
||||
|
||||
import { XMLParser, XMLBuilder } from 'fast-xml-parser';
|
||||
|
||||
const airRoute = ref({})
|
||||
|
||||
const flyToTherePosition = ref({
|
||||
lng:null,
|
||||
lat:null,
|
||||
alt:null,
|
||||
})
|
||||
|
||||
|
||||
const flyToThere = (e)=>{
|
||||
console.log(e);
|
||||
}
|
||||
const planListShow = ref(true);
|
||||
const workPlanFormShow = ref(false);
|
||||
const ariLineShow = ref(true);
|
||||
const aircraftShow = ref(false);
|
||||
const createAirLineShow = ref(false);
|
||||
|
||||
const selectAriLine = ()=> {
|
||||
ariLineShow.value = true;
|
||||
aircraftShow.value = false;
|
||||
}
|
||||
|
||||
const selectAircraft = ()=>{
|
||||
aircraftShow.value = true;
|
||||
ariLineShow.value = false;
|
||||
}
|
||||
|
||||
const cancleCraete = ()=>{
|
||||
workPlanFormShow.value = false;
|
||||
ariLineShow.value = false;
|
||||
aircraftShow.value = false;
|
||||
planListShow.value = true;
|
||||
}
|
||||
|
||||
const checkedAriLine = ref({});
|
||||
|
||||
const checkAriLine = (item)=>{
|
||||
if(item){
|
||||
ariLineShow.value = false;
|
||||
checkedAriLine.value = item;
|
||||
}
|
||||
}
|
||||
|
||||
const checkedDronePort = ref({});
|
||||
|
||||
const checkDronePort = (item)=>{
|
||||
if(item){
|
||||
aircraftShow.value = false;
|
||||
checkedDronePort.value = item;
|
||||
}
|
||||
}
|
||||
|
||||
const formData = ref(null);
|
||||
|
||||
const toCreateWorkPlan = (data)=> {
|
||||
formData.value = data;
|
||||
planListShow.value = false;
|
||||
workPlanFormShow.value = true;
|
||||
}
|
||||
|
||||
// 创建航线
|
||||
const handlerCreateAirLine = ()=>{
|
||||
createAirLineShow.value = true;
|
||||
}
|
||||
|
||||
const cancleCreateAirLine = ()=>{
|
||||
createAirLineShow.value = false;
|
||||
}
|
||||
|
||||
const handlerCreateAirRoute = (info)=>{
|
||||
console.log("info",info);
|
||||
workPlanFormShow.value = false;
|
||||
ariLineShow.value = false;
|
||||
aircraftShow.value = false;
|
||||
planListShow.value = false;
|
||||
createAirLineShow.value = false;
|
||||
airRoute.value = info
|
||||
}
|
||||
|
||||
|
||||
const successCreatePlan = ()=>{
|
||||
workPlanFormShow.value = false;
|
||||
ariLineShow.value = false;
|
||||
aircraftShow.value = false;
|
||||
planListShow.value = true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 保存航线后退出
|
||||
const exitDraw = ()=>{
|
||||
planListShow.value = false;
|
||||
workPlanFormShow.value = true;
|
||||
ariLineShow.value = true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// 预览航线
|
||||
const wayline = ref({});
|
||||
const waylineInfo = ref(null)
|
||||
const previewAirLine =async (line,type) => {
|
||||
let info =await getAirLine({airLineId:type.value?.id});
|
||||
if(info){
|
||||
wayline.value = line;
|
||||
waylineInfo.value = info;
|
||||
}
|
||||
}
|
||||
|
||||
// 查看航线详情
|
||||
const planDetail =async (item) => {
|
||||
formData.value = item;
|
||||
console.log("formData",formData.value?.airLineId);
|
||||
|
||||
let info =await getAirLine({airLineId : formData.value?.airLineId});
|
||||
if(info){
|
||||
// wayline.value = line;
|
||||
waylineInfo.value = info;
|
||||
wayline.value = await airLineDetail(info);
|
||||
}
|
||||
|
||||
workPlanFormShow.value = true;
|
||||
}
|
||||
|
||||
|
||||
// 获取wpml文件
|
||||
|
||||
const currentPreviewWayLine = ref(null);
|
||||
|
||||
const airLineDetail =async (item) => {
|
||||
|
||||
currentPreviewWayLine.value = item;
|
||||
|
||||
try{
|
||||
let response = await axios.get(item.wpml,{responseType: 'arraybuffer'});
|
||||
// 解压kmz文件
|
||||
let xmlStr =await extractKmz(response.data);
|
||||
let xmlData = xmlStr.replace(/wpml:/g,"");
|
||||
const parser = new XMLParser();
|
||||
const jsonObj = parser.parse(xmlData);
|
||||
return jsonObj.kml.Document;
|
||||
|
||||
}catch(e){
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 解压航线文件
|
||||
const extractKmz = async (kmzBlob)=>{
|
||||
|
||||
const zip = new JSZip();
|
||||
|
||||
const contents = await zip.loadAsync(kmzBlob);
|
||||
|
||||
// 查找.wmpl文件
|
||||
for (const [filename, file] of Object.entries(contents.files)) {
|
||||
if (filename.toLowerCase().endsWith('.wpml')) {
|
||||
return await file.async('text');
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error('KMZ文件中未找到WMPL文件');
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,37 +1,383 @@
|
|||
<template>
|
||||
<div style="margin-bottom: 10px;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<span style="margin-right: 10px;">远程调试</span>
|
||||
<div class="setting-control-title">机场</div>
|
||||
<div class="setting-control-list" style="gap: 0px;">
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ (props.deviceInfoList[props.controlSN].acc_time / 60 / 60 / 24).toFixed(1) }}天</div>
|
||||
<div class="info-label">累计运行时长</div>
|
||||
</div>
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ props.deviceInfoList[props.controlSN].job_number }}次</div>
|
||||
<div class="info-label">作业架次</div>
|
||||
</div>
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ (props.deviceInfoList[props.controlSN].position_state.gps_number + props.deviceInfoList[props.controlSN].position_state.rtk_number) }}个</div>
|
||||
<div class="info-label">机场搜星</div>
|
||||
</div>
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ sourceTypeOptions[props.deviceInfoList[props.controlSN]?.rtcm_info?.source_type] || '--'}}</div>
|
||||
<div class="info-label">标定状态</div>
|
||||
</div>
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ `${(props.deviceInfoList[props.controlSN].working_voltage / 1000).toFixed(1)}V` || '--'}}</div>
|
||||
<div class="info-label">供电电压</div>
|
||||
</div>
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ qualityOptions[props.deviceInfoList[props.controlSN]?.network_state?.quality] || '--'}}</div>
|
||||
<div class="info-label">网络</div>
|
||||
</div>
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ isConfiguredOptions[props.deviceInfoList[props.controlSN]?.alternate_land_point?.is_configured] || '--'}}</div>
|
||||
<div class="info-label">备降点</div>
|
||||
</div>
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">--</div>
|
||||
<div class="info-label">进离场航线</div>
|
||||
</div>
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ airConditionerStateOptions[props.deviceInfoList[props.controlSN]?.air_conditioner?.air_conditioner_state] || '--'}}</div>
|
||||
<div class="info-label">空调状态</div>
|
||||
</div>
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ `${(props.deviceInfoList[props.controlSN]?.drone_battery_maintenance_info?.batteries[0].voltage / 1000).toFixed(1)}V` || '--' }}</div>
|
||||
<div class="info-label">蓄电池电压</div>
|
||||
</div>
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ `${props.deviceInfoList[props.controlSN]?.drone_battery_maintenance_info?.batteries[0].temperature}℃` || '--' }}</div>
|
||||
<div class="info-label">蓄电池温度</div>
|
||||
</div>
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ props.deviceInfoList[props.controlSN].temperature }}℃</div>
|
||||
<div class="info-label">舱内温度</div>
|
||||
</div>
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ props.deviceInfoList[props.controlSN].humidity }}%RH</div>
|
||||
<div class="info-label">舱内湿度</div>
|
||||
</div>
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ props.deviceInfoList[props.controlSN].environment_temperature }}℃</div>
|
||||
<div class="info-label">舱外温度</div>
|
||||
</div>
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ rainfallOptions[props.deviceInfoList[props.controlSN].rainfall] }}</div>
|
||||
<div class="info-label">雨量</div>
|
||||
</div>
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ props.deviceInfoList[props.controlSN].wind_speed }}m/s</div>
|
||||
<div class="info-label">风速</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="setting-control-title">飞行器</div>
|
||||
<div class="setting-control-list" style="gap: 0px;">
|
||||
<div class="show-info-item">
|
||||
<div class="info-value">{{ (props.deviceInfoList[props.controlSN].acc_time / 60 / 60 / 24).toFixed(1) }}天</div>
|
||||
<div class="info-label">累计运行时长</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="open-control-div">
|
||||
<div class="control-content">
|
||||
<span class="open-title">远程调试</span>
|
||||
<a-switch :checked="props.deviceInfoList[props.controlSN].mode_code == 2" @change="openDebug"/>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom: 10px;">机场控制</div>
|
||||
<div style="margin-bottom: 20px;">
|
||||
<div style="width: 252px;height: 58px;background-color: #f7f9fa;padding-left: 8px;padding-right: 8px;display: flex;justify-content: space-between;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div :style="`width: 21px;height: 21px;background-color: ${props.deviceInfoList[props.controlSN].cover_state == 1? 'green': 'red'};margin-right: 8px;`"></div>
|
||||
<div class="setting-control-title">机场控制</div>
|
||||
<div class="setting-control-list">
|
||||
<div class="control-item">
|
||||
<div class="info-div">
|
||||
<div class="icon">
|
||||
<Icon icon="tabler:drone" style="font-size: 21px;"/>
|
||||
</div>
|
||||
<div>
|
||||
<div style="line-height: 22px;">{{getCoverState(props.deviceInfoList[props.controlSN].cover_state)}}</div>
|
||||
<div style="line-height: 22px;">舱盖</div>
|
||||
<div class="show-span">
|
||||
{{
|
||||
modeCodeOptions[props.deviceInfoList[props.controlSN].mode_code]
|
||||
}}
|
||||
</div>
|
||||
<div class="show-span">机场系统</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<a-button style="width: 70px;height: 30px;" @click="openCoverState" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">{{props.deviceInfoList[props.controlSN].cover_state == 0? '打开': '关闭'}}</a-button>
|
||||
<div class="button-div">
|
||||
<a-button class="control-button" @click="changeState('device_reboot')" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">重启</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<div class="info-div">
|
||||
<div class="icon">
|
||||
<Icon icon="tabler:capture" style="font-size: 21px;"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="show-span">
|
||||
{{
|
||||
getCoverState(props.deviceInfoList[props.controlSN].cover_state)
|
||||
}}
|
||||
</div>
|
||||
<div class="show-span">舱盖</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<a-button
|
||||
class="control-button"
|
||||
@click="changeState(props.deviceInfoList[props.controlSN].cover_state == 0? 'cover_open': 'cover_close')"
|
||||
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
||||
{{props.deviceInfoList[props.controlSN].cover_state == 0? '打开': '关闭'}}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<div class="info-div">
|
||||
<div class="icon">
|
||||
<Icon icon="streamline:travel-hotel-air-conditioner-heating-ac-air-hvac-cool-cooling-cold-hot-conditioning" style="font-size: 21px;"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="show-span">
|
||||
{{
|
||||
props.deviceInfoList[props.controlSN].air_conditioner && airConditionerStateOptions[props.deviceInfoList[props.controlSN].air_conditioner.air_conditioner_state]
|
||||
}}
|
||||
</div>
|
||||
<div class="show-span">空调</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<a-button
|
||||
v-if="props.deviceInfoList[props.controlSN]?.air_conditioner.air_conditioner_state != 0"
|
||||
class="control-button"
|
||||
@click="changeState('air_conditioner_mode_switch',0)"
|
||||
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
||||
停止
|
||||
</a-button>
|
||||
<a-dropdown v-else placement="bottom" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
||||
<a-button class="control-button">开启</a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="changeState('air_conditioner_mode_switch',1)">制冷</a-menu-item>
|
||||
<a-menu-item @click="changeState('air_conditioner_mode_switch',2)">制热</a-menu-item>
|
||||
<a-menu-item @click="changeState('air_conditioner_mode_switch',3)">除湿</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<div class="info-div">
|
||||
<div class="icon">
|
||||
<Icon icon="material-symbols:volume-off" style="font-size: 21px;"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="show-span">
|
||||
{{
|
||||
silentModeOptions[props.deviceInfoList[props.controlSN].silent_mode]
|
||||
}}
|
||||
</div>
|
||||
<div class="show-span">静音模式</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<a-button
|
||||
class="control-button"
|
||||
@click=""
|
||||
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
||||
{{props.deviceInfoList[props.controlSN].silent_mode == 0? '开启': '关闭'}}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<div class="info-div">
|
||||
<div class="icon">
|
||||
<Icon icon="mdi:alarm-light-outline" style="font-size: 21px;"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="show-span">
|
||||
{{
|
||||
alarmStateOptions[props.deviceInfoList[props.controlSN].alarm_state]
|
||||
}}
|
||||
</div>
|
||||
<div class="show-span">机场声光报警</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<a-button
|
||||
class="control-button"
|
||||
@click="changeState('alarm_state_switch',props.deviceInfoList[props.controlSN].alarm_state == 0? 1: 0)"
|
||||
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
||||
{{props.deviceInfoList[props.controlSN].alarm_state == 0? '开启': '关闭'}}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<div class="info-div">
|
||||
<div class="icon">
|
||||
<Icon icon="icon-park-twotone:storage-card-two" style="font-size: 21px;"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="show-span">
|
||||
{{
|
||||
props.deviceInfoList[props.controlSN].storage &&
|
||||
`${(props.deviceInfoList[props.controlSN].storage.used / 1000 / 1024).toFixed(1)}/${(props.deviceInfoList[props.controlSN].storage.total / 1000 / 1024).toFixed(1)}GB`
|
||||
}}
|
||||
</div>
|
||||
<div class="show-span">机场存储</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<a-button
|
||||
class="control-button"
|
||||
@click="changeState('device_format')"
|
||||
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
||||
格式化
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<div class="info-div">
|
||||
<div class="icon">
|
||||
<Icon icon="icon-park-outline:storage-card-one" style="font-size: 21px;"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="show-span">--</div>
|
||||
<div class="show-span">机场增强图传</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<a-button
|
||||
class="control-button"
|
||||
@click=""
|
||||
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
||||
设置
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<div class="info-div">
|
||||
<div class="icon">
|
||||
<Icon icon="carbon:certificate-check" style="font-size: 21px;"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="show-span">解禁证书</div>
|
||||
<div class="show-span">限飞解禁证书</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<a-button
|
||||
class="control-button"
|
||||
@click=""
|
||||
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
||||
设置
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-bottom: 10px;">飞行器控制</div>
|
||||
<div>
|
||||
<div style="width: 252px;height: 58px;background-color: #f7f9fa;padding-left: 8px;padding-right: 8px;display: flex;justify-content: space-between;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div :style="`width: 21px;height: 21px;background-color: ${props.deviceInfoList[props.controlSN].sub_device.device_online_status == 1? 'green': 'red'};margin-right: 8px;`"></div>
|
||||
<div class="setting-control-title">飞行器控制</div>
|
||||
<div class="setting-control-list">
|
||||
<div class="control-item">
|
||||
<div class="info-div">
|
||||
<div class="icon">
|
||||
<Icon icon="material-symbols:power-settings-new" style="font-size: 21px;"/>
|
||||
</div>
|
||||
<div>
|
||||
<div style="line-height: 22px;">{{props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? "关机": "开机"}}</div>
|
||||
<div style="line-height: 22px;">飞行器电源</div>
|
||||
<div class="show-span">
|
||||
{{
|
||||
deviceOnlineStatusOptions[props.deviceInfoList[props.controlSN].sub_device.device_online_status]
|
||||
}}
|
||||
</div>
|
||||
<div class="show-span">飞行器电源</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<a-button style="width: 70px;height: 30px;" @click="openDeviceOnline" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">{{props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? '开机': '关机'}}</a-button>
|
||||
<div class="button-div">
|
||||
<a-button
|
||||
class="control-button"
|
||||
@click="changeDeviceState(props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? 'drone_open': 'drone_close')"
|
||||
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
||||
{{props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? '开机': '关机'}}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<div class="info-div">
|
||||
<div class="icon">
|
||||
<Icon icon="mdi:battery-high" style="font-size: 21px;"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="show-span">
|
||||
{{
|
||||
droneChargeStateOptions[props.deviceInfoList[props.controlSN].drone_charge_state.state]
|
||||
}}
|
||||
</div>
|
||||
<div class="show-span">飞行器充电</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<a-button
|
||||
class="control-button"
|
||||
@click="changeDeviceState(props.deviceInfoList[props.controlSN]?.drone_charge_state?.state == 0? 'charge_open': 'charge_close')"
|
||||
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
||||
{{props.deviceInfoList[props.controlSN]?.drone_charge_state?.state == 0? '充电': '停止'}}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<div class="info-div">
|
||||
<div class="icon">
|
||||
<Icon icon="mdi:signal-4g" style="font-size: 21px;"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="show-span">
|
||||
{{
|
||||
fourgLinkStateOptions[props.deviceInfoList[props.controlSN]?.wireless_link['4g_link_state']]
|
||||
}}
|
||||
</div>
|
||||
<div class="show-span">增强图传</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<a-button
|
||||
class="control-button"
|
||||
@click="changeDeviceState('sdr_workmode_switch',props.deviceInfoList[props.controlSN]?.wireless_link['4g_link_state'] == 0? 1: 0, 'link_workmode')"
|
||||
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
||||
{{props.deviceInfoList[props.controlSN]?.wireless_link['4g_link_state'] == 0? '开启': '关闭'}}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<div class="info-div">
|
||||
<div class="icon">
|
||||
<Icon icon="icon-park-twotone:storage-card-two" style="font-size: 21px;"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="show-span">
|
||||
--
|
||||
</div>
|
||||
<div class="show-span">飞行器存储</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<a-button
|
||||
class="control-button"
|
||||
@click="changeDeviceState('drone_format')"
|
||||
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
||||
格式化
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-item">
|
||||
<div class="info-div">
|
||||
<div class="icon">
|
||||
<Icon icon="ph:sim-card-duotone" style="font-size: 21px;"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="show-span">
|
||||
{{
|
||||
linkWorkmodeOptions[props.deviceInfoList[props.controlSN].wireless_link.link_workmode]
|
||||
}}
|
||||
</div>
|
||||
<div class="show-span">飞行器增强图传</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-div">
|
||||
<a-button
|
||||
class="control-button"
|
||||
@click=""
|
||||
:disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
|
||||
设置
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -41,6 +387,10 @@
|
|||
import { defineProps } from "vue"
|
||||
import { clientPublish } from '@/utils/mqtt'
|
||||
import { buildGUID } from '@/utils/uuid';
|
||||
import Icon from '@/components/Icon/Icon.vue';
|
||||
import { modeCodeOptions, deviceOnlineStatusOptions, coverStateOptions, airConditionerStateOptions, silentModeOptions,
|
||||
alarmStateOptions, droneChargeStateOptions, fourgLinkStateOptions, linkWorkmodeOptions, sourceTypeOptions, qualityOptions,
|
||||
isConfiguredOptions, rainfallOptions } from './util'
|
||||
const props = defineProps(['deviceInfoList', 'controlSN'])
|
||||
|
||||
const openDebug = () => {
|
||||
|
|
@ -60,28 +410,95 @@ const getCoverState = (value) => {
|
|||
}
|
||||
return options[value]
|
||||
}
|
||||
const openCoverState = () => {
|
||||
const changeState = (method,action?) => {
|
||||
let publishUrl = `thing/product/${props.controlSN}/services`
|
||||
let params = {
|
||||
method: props.deviceInfoList[props.controlSN].cover_state == 0? 'cover_open': 'cover_close',
|
||||
method: method,
|
||||
bid: buildGUID(),
|
||||
tid: buildGUID(),
|
||||
timestamp: new Date().getTime(),
|
||||
data: null,
|
||||
data: action? { action }: null,
|
||||
};
|
||||
clientPublish(publishUrl,params)
|
||||
}
|
||||
const openDeviceOnline = () => {
|
||||
const changeDeviceState = (method, action?, type?) => {
|
||||
let publishUrl = `thing/product/${props.controlSN}/services`
|
||||
let params = {
|
||||
method: props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? 'drone_open': 'drone_close',
|
||||
method,
|
||||
bid: buildGUID(),
|
||||
tid: buildGUID(),
|
||||
timestamp: new Date().getTime(),
|
||||
data: null,
|
||||
data: type? { [type]: action }: action? { action }: null,
|
||||
};
|
||||
clientPublish(publishUrl,params)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
.open-control-div{
|
||||
margin-bottom: 10px;
|
||||
.control-content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.open-title{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.setting-control-title{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.setting-control-list{
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
.control-item{
|
||||
width: 252px;
|
||||
height: 58px;
|
||||
background-color: #f7f9fa;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.info-div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.icon{
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.show-span{
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
.button-div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.control-button{
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
.show-info-item{
|
||||
width: 190px;
|
||||
height: 79px;
|
||||
.info-value{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 20px;
|
||||
}
|
||||
.info-label{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: rgba(0,0,0,0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
export const modeCodeOptions = {
|
||||
0: '空闲中',
|
||||
1: '现场调试',
|
||||
2: '远程调试',
|
||||
3: '固件升级中',
|
||||
4: '作业中',
|
||||
5: '待标定',
|
||||
}
|
||||
export const deviceOnlineStatusOptions = {
|
||||
0: '关机',
|
||||
1: '开机'
|
||||
}
|
||||
export const coverStateOptions = {
|
||||
0: '关闭',
|
||||
1: '打开',
|
||||
2: '半开',
|
||||
3: '舱盖状态异常',
|
||||
}
|
||||
export const airConditionerStateOptions = {
|
||||
0: '空闲模式',
|
||||
1: '制冷模式',
|
||||
2: '制热模式',
|
||||
3: '除湿模式',
|
||||
4: '制冷退出模式',
|
||||
5: '制热退出模式',
|
||||
6: '除湿退出模式',
|
||||
7: '制冷准备模式',
|
||||
8: '制热准备模式',
|
||||
9: '除湿准备模式',
|
||||
10: '风冷准备中',
|
||||
11: '风冷中',
|
||||
12: '风冷退出中',
|
||||
13: '除雾准备中',
|
||||
14: '除雾中',
|
||||
15: '除雾退出中',
|
||||
}
|
||||
export const silentModeOptions = {
|
||||
0: '非静音模式',
|
||||
1: '静音模式',
|
||||
}
|
||||
export const alarmStateOptions = {
|
||||
0: '关闭',
|
||||
1: '开启',
|
||||
}
|
||||
export const droneChargeStateOptions = {
|
||||
0: '空闲',
|
||||
1: '充电中',
|
||||
}
|
||||
export const fourgLinkStateOptions = {
|
||||
0: '断开',
|
||||
1: '连接',
|
||||
}
|
||||
export const linkWorkmodeOptions = {
|
||||
0: 'SDR 模式',
|
||||
1: '4G 融合模式',
|
||||
}
|
||||
export const sourceTypeOptions = {
|
||||
0: '未标定',
|
||||
1: '自收敛标定',
|
||||
2: '手动标定',
|
||||
3: '网络RTK标定',
|
||||
}
|
||||
export const qualityOptions = {
|
||||
0: '无信号',
|
||||
1: '差',
|
||||
2: '较差',
|
||||
3: '一般',
|
||||
4: '较好',
|
||||
5: '好',
|
||||
}
|
||||
export const isConfiguredOptions = {
|
||||
0: '未设置',
|
||||
1: '已设置',
|
||||
}
|
||||
export const rainfallOptions = {
|
||||
0: '无雨',
|
||||
1: '小雨',
|
||||
2: '中雨',
|
||||
3: '大雨',
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="title">
|
||||
<LeftOutlined @click="checkAriLine(null)" /> 选择航线
|
||||
<LeftOutlined @click="checkAriLine(null)" v-show="props.title=='选择航线'" /> {{props.title}}
|
||||
</div>
|
||||
<div class="filter-container">
|
||||
|
||||
|
|
@ -77,48 +77,48 @@
|
|||
<PlusOutlined @click="createAirLine" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ari-line" v-for="(item,index) in ariLineList" :key="index"
|
||||
|
||||
>
|
||||
<div class="title">
|
||||
<div style="flex:1;">
|
||||
{{item.airLineName}}
|
||||
<div class="slide-container">
|
||||
<div class="ari-line" v-for="(item,index) in ariLineList" :key="index" >
|
||||
<div class="title">
|
||||
<div style="flex:1;">
|
||||
{{item.airLineName}}
|
||||
</div>
|
||||
<div style="">
|
||||
<!-- <EditOutlined @click="editLine" /> -->
|
||||
|
||||
<a-dropdown>
|
||||
<MoreOutlined />
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="checkAriLine(item)" >
|
||||
<a href="javascript:;">选择</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="airLineDetail(item)" >
|
||||
<a href="javascript:;">预览</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">编辑</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="deletePlan(item.id)">
|
||||
<a href="javascript:;">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div style="">
|
||||
<!-- <EditOutlined @click="editLine" /> -->
|
||||
|
||||
<a-dropdown>
|
||||
<MoreOutlined />
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item @click="checkAriLine(item)" >
|
||||
<a href="javascript:;">选择</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="airLineDetail(item)" >
|
||||
<a href="javascript:;">预览</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item>
|
||||
<a href="javascript:;">编辑</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item @click="deletePlan(item.id)">
|
||||
<a href="javascript:;">删除</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<div class="type" >
|
||||
<img src="/public/iocn/uav.png" alt="">
|
||||
{{item.uavId}}Matrice 4TD
|
||||
</div>
|
||||
</div>
|
||||
<div class="type" >
|
||||
<img src="/public/iocn/uav.png" alt="">
|
||||
{{item.uavId}}
|
||||
</div>
|
||||
<div class="time">
|
||||
<div>
|
||||
更新时间：{{item.createTime}}
|
||||
<div class="time">
|
||||
<div>
|
||||
更新时间：{{item.createTime}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -184,12 +184,14 @@
|
|||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ExclamationCircleOutlined,PlusOutlined,FileAddOutlined,LeftOutlined,ImportOutlined,MoreOutlined,EditOutlined,InboxOutlined } from '@ant-design/icons-vue';
|
||||
import {ref,defineEmits,createVNode} from 'vue'
|
||||
import {ref,defineEmits,defineProps,createVNode} from 'vue'
|
||||
|
||||
import { getAirLineList,uploadXmlFile,deleteAirLine,addAirLine} from '@/api/sys/workplan';
|
||||
import { Modal, message } from 'ant-design-vue';
|
||||
const emit = defineEmits(["checkAriLine","createAirLine","previewAirLine"])
|
||||
|
||||
const props = defineProps(["title"])
|
||||
|
||||
import {templateTypeOptions} from '../waylineConfig/index';
|
||||
|
||||
import JSZip from 'jszip';
|
||||
|
|
@ -292,7 +294,7 @@
|
|||
const parser = new XMLParser();
|
||||
const jsonObj = parser.parse(xmlData);
|
||||
emit("previewAirLine",jsonObj.kml.Document,currentPreviewWayLine)
|
||||
|
||||
|
||||
}catch(e){
|
||||
console.error(e);
|
||||
}
|
||||
|
|
@ -396,6 +398,10 @@
|
|||
.container{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background: #0D0E15;
|
||||
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 10px 30px 1px rgba(0,0,6,0.15), inset 0px 0px 20px 8px rgba(58,87,232,0.73);
|
||||
border-radius: 6px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.title{
|
||||
padding:15px;
|
||||
|
|
@ -429,7 +435,6 @@
|
|||
}
|
||||
.routers-container{
|
||||
display:flex;
|
||||
gap:10px;
|
||||
font-size:14px;
|
||||
border-top:1px solid rgba(204, 204, 204, 0.219) ;
|
||||
height: 100%;
|
||||
|
|
@ -438,38 +443,77 @@
|
|||
.file-container{
|
||||
width:220px;
|
||||
border-right: 1px solid rgba(204, 204, 204, 0.227) ;
|
||||
padding:15px
|
||||
padding:0px;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
gap:20px;
|
||||
}
|
||||
.file-container .tip{
|
||||
display: flex;
|
||||
color:#fff;
|
||||
padding:8px 0px;
|
||||
padding:15px 10px;
|
||||
background: linear-gradient( 270deg, rgba(89,98,128,0) 0%, #2D3349 100%);
|
||||
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||
position:relative;
|
||||
}
|
||||
.file-container .tip::before{
|
||||
content:"";
|
||||
height: 0px;
|
||||
width:0px;
|
||||
border-top:6px solid #2C45B8;
|
||||
border-left:6px solid #2C45B8;
|
||||
border-right: 6px solid rgba(0,0,0,0);
|
||||
border-bottom: 6px solid rgba(0,0,0,0);
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
.file-container .tip .info{
|
||||
flex:1;
|
||||
}
|
||||
|
||||
|
||||
.routers-list{
|
||||
flex:1;
|
||||
padding:15px;
|
||||
}
|
||||
|
||||
.routers-list .tip{
|
||||
display: flex;
|
||||
color:#fff;
|
||||
padding:8px 0px;
|
||||
padding:15px 10px;
|
||||
background: linear-gradient( 270deg, rgba(89,98,128,0) 0%, #2D3349 100%);
|
||||
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||
position:relative;
|
||||
}
|
||||
.routers-list .tip .info{
|
||||
flex:1;
|
||||
}
|
||||
.routers-list .tip::before{
|
||||
content:"";
|
||||
height: 0px;
|
||||
width:0px;
|
||||
border-top:6px solid #2C45B8;
|
||||
border-left:6px solid #2C45B8;
|
||||
border-right: 6px solid rgba(0,0,0,0);
|
||||
border-bottom: 6px solid rgba(0,0,0,0);
|
||||
position:absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
}
|
||||
|
||||
.routers-list .slide-container{
|
||||
padding:20px;
|
||||
}
|
||||
.ari-line{
|
||||
background:#3F4150;
|
||||
color:#fff;
|
||||
padding:5px 10px;
|
||||
margin-bottom:10px;
|
||||
position:relative;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient( 132deg, #323D62 0%, #525F83 100%);
|
||||
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.ari-line::before{
|
||||
|
|
|
|||
|
|
@ -71,7 +71,6 @@
|
|||
<a-slider v-model:value="props.currentAirPoint.cameraHorizontalAngle" :min="-180" :max="180" :step="0.01" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="config-item">
|
||||
<div class="item-title">
|
||||
<div class="label">
|
||||
|
|
@ -80,7 +79,6 @@
|
|||
<div class="">
|
||||
{{ props.currentAirPoint.cameraVerticalAngle }} °
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<a-slider v-model:value="props.currentAirPoint.cameraVerticalAngle" :min="-180" :max="180" :step="0.01" />
|
||||
|
|
|
|||
|
|
@ -2,9 +2,11 @@
|
|||
<div class="container">
|
||||
<div class="title">
|
||||
<div style="flex:1;">
|
||||
<LeftOutlined @click="checkAriLine(null);"/> 新建航线
|
||||
创建新航线
|
||||
</div>
|
||||
<div>
|
||||
<LeftOutlined @click="checkAriLine(null);"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="item-label">航线类型</div>
|
||||
|
|
@ -200,14 +202,26 @@
|
|||
color:#fff;
|
||||
}
|
||||
.title{
|
||||
padding:15px;
|
||||
padding:15px 0px;
|
||||
color:#fff;
|
||||
font-size:14px;
|
||||
display:flex;
|
||||
}
|
||||
.item-label{
|
||||
padding:10px 0px;
|
||||
color:#999;
|
||||
padding:15px 0px;
|
||||
color:#fff;
|
||||
position:relative;
|
||||
}
|
||||
.item-label::before{
|
||||
content:"";
|
||||
height:14px;
|
||||
width:3px;
|
||||
position:absolute;
|
||||
top:15px;
|
||||
left:-8px;
|
||||
background: linear-gradient( 180deg, #234AFF 0%, #4981FF 100%);
|
||||
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.draw-type{
|
||||
display:grid;
|
||||
|
|
|
|||
|
|
@ -354,6 +354,10 @@ const resetForm = () => {
|
|||
.container{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background: #0D0E15;
|
||||
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 10px 30px 1px rgba(0,0,6,0.15), inset 0px 0px 20px 8px rgba(58,87,232,0.73);
|
||||
border-radius: 6px;
|
||||
opacity: 0.8;
|
||||
padding:10px 20px;
|
||||
}
|
||||
.title{
|
||||
|
|
@ -388,14 +392,15 @@ const resetForm = () => {
|
|||
width:100%;
|
||||
display: flex;
|
||||
color:#fff;
|
||||
border:1px solid rgba(204, 204, 204, 0.787);
|
||||
border:1px solid #3B4154;
|
||||
padding:0px;
|
||||
border-radius: 15px;
|
||||
|
||||
}
|
||||
|
||||
.select-item .item-name{
|
||||
flex:1;
|
||||
border-right:1px solid rgba(204, 204, 204, 0.787);
|
||||
border-right:1px solid #3B4154;
|
||||
padding:4px;
|
||||
}
|
||||
.select-item .item-operate{
|
||||
|
|
@ -410,13 +415,16 @@ const resetForm = () => {
|
|||
display: flex;
|
||||
overflow: hidden;
|
||||
border:0.5px solid #3B4154 ;
|
||||
background:#050608;
|
||||
font-size:13px;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
|
||||
.radio-box .radio-item{
|
||||
flex:1;
|
||||
color:#8A92A6 ;
|
||||
text-align: center;
|
||||
background:#222738 ;
|
||||
padding:5px;
|
||||
cursor:pointer;
|
||||
|
||||
|
|
@ -428,6 +436,7 @@ const resetForm = () => {
|
|||
text-align: center;
|
||||
background:#3A57E8 ;
|
||||
padding:5px;
|
||||
border-radius: 15px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
|
|
@ -444,6 +453,7 @@ const resetForm = () => {
|
|||
padding:3px;
|
||||
text-align: center;
|
||||
cursor:pointer;
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
::v-deep .ant-form-item-label > label{
|
||||
|
|
@ -539,4 +549,8 @@ const resetForm = () => {
|
|||
::v-deep .ant-input::placeholder{
|
||||
color:rgba(255, 255, 255, 0.533)!important;
|
||||
}
|
||||
|
||||
::v-deep .ant-btn{
|
||||
border-radius: 15px!important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -60,11 +60,9 @@
|
|||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.airPort,
|
||||
(val) => {
|
||||
// {latitude: 35.134595330068336,longitude: 118.29665315821578}
|
||||
setAirportPosition();
|
||||
},
|
||||
{ deep: true },
|
||||
|
|
@ -89,6 +87,13 @@
|
|||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.wayline,
|
||||
(newVal, oldVal) => {
|
||||
generatePreviewPoint(newVal?.Folder?.Placemark);
|
||||
},
|
||||
);
|
||||
|
||||
// 航线预览：生成点
|
||||
const generatePreviewPoint = (placemark) => {
|
||||
// 设置默认起飞点
|
||||
|
|
@ -108,7 +113,7 @@
|
|||
aircraftHorizontalAngle: 0,
|
||||
cameraHorizontalAngle: 0,
|
||||
cameraVerticalAngle: 0,
|
||||
focalLength: 0,
|
||||
focalLength: 2,
|
||||
};
|
||||
airPoints.value?.push(airPointInfo);
|
||||
});
|
||||
|
|
@ -152,7 +157,10 @@
|
|||
watch(
|
||||
currentAirPoint,
|
||||
(newVal, oldVal) => {
|
||||
// 更新航点
|
||||
updateAirPoint(newVal);
|
||||
// 更新镜头
|
||||
handlerDrawCamera(newVal);
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
|
@ -332,7 +340,6 @@
|
|||
id: 10,
|
||||
name: '地图底图',
|
||||
type: 'group',
|
||||
opacity: 1,
|
||||
},
|
||||
{
|
||||
id: 2021,
|
||||
|
|
@ -341,117 +348,20 @@
|
|||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
eventParent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
private: false,
|
||||
id: 'm-770c35e7-9054-4259-b5ee-c15f108becd0',
|
||||
opacity: 1,
|
||||
pid: 2021,
|
||||
parent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
zIndex: 1,
|
||||
},
|
||||
// {
|
||||
// "name": "底图",
|
||||
// "type": "tdt",
|
||||
// "layer": "img_d"
|
||||
// },
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
eventParent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
private: false,
|
||||
id: 'm-3b881368-574b-48a5-88b2-8b3c2c48fd62',
|
||||
opacity: 1,
|
||||
pid: 2021,
|
||||
parent: {
|
||||
id: 2021,
|
||||
pid: 10,
|
||||
name: '天地图影像',
|
||||
icon: 'https://data.mars3d.cn/img/thumbnail/basemap/tdt_img.png',
|
||||
type: 'group',
|
||||
layers: [
|
||||
{
|
||||
name: '底图',
|
||||
type: 'tdt',
|
||||
layer: 'img_d',
|
||||
show: true,
|
||||
},
|
||||
{
|
||||
name: '注记',
|
||||
type: 'tdt',
|
||||
layer: 'img_z',
|
||||
show: true,
|
||||
},
|
||||
],
|
||||
show: true,
|
||||
},
|
||||
zIndex: 2,
|
||||
zIndex: 20,
|
||||
},
|
||||
],
|
||||
zIndex: 20,
|
||||
show: true,
|
||||
opacity: 1,
|
||||
},
|
||||
],
|
||||
layers: [],
|
||||
|
|
@ -539,9 +449,28 @@
|
|||
if (props.uavTrack) {
|
||||
setUAVPosition();
|
||||
}
|
||||
// 加载长光高清影像
|
||||
loadChangGuangLayer();
|
||||
});
|
||||
};
|
||||
|
||||
// 加载长光卫星高分影像
|
||||
const loadChangGuangLayer = () => {
|
||||
var layer = new mars3d.layer.XyzLayer({
|
||||
url: 'https://api.jl1mall.com/getMap/{z}/{x}/{reverseY}',
|
||||
queryParameters: {
|
||||
mk: '73ad26c4aa6957eef051ecc5a15308b4',
|
||||
tk: '5538f710dfc641048a8bdf1a7f705cd1',
|
||||
pro: '9297426cbe4c4ac2a01ca228a4ad30f7',
|
||||
vf: 0,
|
||||
},
|
||||
minimumLevel: 1,
|
||||
maximumLevel: 18,
|
||||
zIndex: 2,
|
||||
});
|
||||
map.addLayer(layer);
|
||||
};
|
||||
|
||||
// 绑定地图右键菜单
|
||||
const handlerBindMapMenus = () => {
|
||||
const mapContextmenuItems = [
|
||||
|
|
@ -578,117 +507,6 @@
|
|||
map.bindContextMenu(mapContextmenuItems);
|
||||
};
|
||||
|
||||
const uavPoints = ref([]);
|
||||
|
||||
// 绘制航点
|
||||
const handlerDrawPoint = (e) => {
|
||||
if (moveTool) {
|
||||
moveTool.destroy();
|
||||
moveTool = null;
|
||||
}
|
||||
|
||||
let position = mars3d.LngLatPoint.fromCartesian(e.position);
|
||||
|
||||
let uuid = buildUUID();
|
||||
|
||||
// 航点
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
id: uuid,
|
||||
name: '航点',
|
||||
position: [position._lng, position._lat, position._alt],
|
||||
style: {
|
||||
image: '/map/node.png',
|
||||
scale: 1,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
label: {
|
||||
text: '航点',
|
||||
font_size: 14,
|
||||
color: '#ffffff',
|
||||
outline: true,
|
||||
outlineColor: '#000000',
|
||||
pixelOffsetY: -35,
|
||||
},
|
||||
},
|
||||
});
|
||||
graphicLayer.addGraphic(graphic);
|
||||
|
||||
// 地面投影点
|
||||
let stickGraphic = new mars3d.graphic.PointEntity({
|
||||
id: 'stick' + uuid,
|
||||
position: [position._lng, position._lat],
|
||||
style: {
|
||||
color: '#f5f5f5',
|
||||
pixelSize: 8,
|
||||
outline: true,
|
||||
outlineColor: '#f5f5f5',
|
||||
outlineWidth: 1,
|
||||
clampToGround: true,
|
||||
},
|
||||
});
|
||||
stickGroundPointLayer.addGraphic(stickGraphic);
|
||||
|
||||
// 航点 投影点连接线
|
||||
let lineGraphic = new mars3d.graphic.PolylineEntity({
|
||||
id: 'line' + uuid,
|
||||
positions: [
|
||||
[position._lng, position._lat, position._alt],
|
||||
[position._lng, position._lat, 0],
|
||||
],
|
||||
style: {
|
||||
color: '#f5f5f5',
|
||||
width: 1,
|
||||
},
|
||||
});
|
||||
lineGroundPointLayer.addGraphic(lineGraphic);
|
||||
|
||||
// 相机
|
||||
// const rectSensor = new mars3d.graphic.RectSensor({
|
||||
// id: "camera"+uuid,
|
||||
// position: [position._lng,position._lat,position._alt],
|
||||
// show:true,
|
||||
// style: {
|
||||
// angle1: 30, // 椎体夹角1
|
||||
// angle2: 30, // 椎体夹角2
|
||||
// length: 10, // 椎体长度
|
||||
// rayEllipsoid: false,
|
||||
// color: "rgba(0,255,255,0.3)",
|
||||
// outline: true,
|
||||
// topShow: true,
|
||||
// topSteps: 2,
|
||||
// flat: true,
|
||||
// cameraHpr: true,
|
||||
// heading: 0,
|
||||
// pitch: 90, // 俯仰角 0 - 360度
|
||||
// roll: 0,
|
||||
|
||||
// }
|
||||
// })
|
||||
// graphicLayer.addGraphic(rectSensor);
|
||||
|
||||
// 航点列表
|
||||
let airPointInfo = {
|
||||
id: uuid,
|
||||
name: '航点',
|
||||
lng: position._lng,
|
||||
lat: position._lat,
|
||||
alt: position._alt,
|
||||
aircraftHorizontalAngle: 0,
|
||||
cameraHorizontalAngle: 0,
|
||||
cameraVerticalAngle: 0,
|
||||
focalLength: 0,
|
||||
};
|
||||
airPoints.value?.push(airPointInfo);
|
||||
|
||||
uavPoints.value.push(graphic);
|
||||
|
||||
// 当前航点
|
||||
currentAirPoint.value = airPoints.value[airPoints.value?.length - 1];
|
||||
|
||||
// 绘制航线
|
||||
handlerDrawLine();
|
||||
};
|
||||
|
||||
// 航点移动
|
||||
const pointMove = (e, id) => {
|
||||
const cartographic = mars3d.Cesium.Cartographic.fromCartesian(e.position);
|
||||
|
|
@ -1066,6 +884,145 @@
|
|||
// 照片数量
|
||||
};
|
||||
|
||||
const uavPoints = ref([]);
|
||||
|
||||
// 绘制航点
|
||||
const handlerDrawPoint = (e) => {
|
||||
if (moveTool) {
|
||||
moveTool.destroy();
|
||||
moveTool = null;
|
||||
}
|
||||
|
||||
let position = mars3d.LngLatPoint.fromCartesian(e.position);
|
||||
|
||||
let uuid = buildUUID();
|
||||
|
||||
// 航点
|
||||
let graphic = new mars3d.graphic.BillboardEntity({
|
||||
id: uuid,
|
||||
name: '航点',
|
||||
position: [position._lng, position._lat, position._alt],
|
||||
style: {
|
||||
image: '/map/node.png',
|
||||
scale: 1,
|
||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||
label: {
|
||||
text: '航点',
|
||||
font_size: 14,
|
||||
color: '#ffffff',
|
||||
outline: true,
|
||||
outlineColor: '#000000',
|
||||
pixelOffsetY: -35,
|
||||
},
|
||||
},
|
||||
});
|
||||
graphicLayer.addGraphic(graphic);
|
||||
|
||||
// 地面投影点
|
||||
let stickGraphic = new mars3d.graphic.PointEntity({
|
||||
id: 'stick' + uuid,
|
||||
position: [position._lng, position._lat],
|
||||
style: {
|
||||
color: '#f5f5f5',
|
||||
pixelSize: 8,
|
||||
outline: true,
|
||||
outlineColor: '#f5f5f5',
|
||||
outlineWidth: 1,
|
||||
clampToGround: true,
|
||||
},
|
||||
});
|
||||
stickGroundPointLayer.addGraphic(stickGraphic);
|
||||
|
||||
// 航点 投影点连接线
|
||||
let lineGraphic = new mars3d.graphic.PolylineEntity({
|
||||
id: 'line' + uuid,
|
||||
positions: [
|
||||
[position._lng, position._lat, position._alt],
|
||||
[position._lng, position._lat, 0],
|
||||
],
|
||||
style: {
|
||||
color: '#f5f5f5',
|
||||
width: 1,
|
||||
},
|
||||
});
|
||||
lineGroundPointLayer.addGraphic(lineGraphic);
|
||||
|
||||
// 航点列表
|
||||
let airPointInfo = {
|
||||
id: uuid,
|
||||
name: '航点',
|
||||
lng: position._lng,
|
||||
lat: position._lat,
|
||||
alt: position._alt,
|
||||
aircraftHorizontalAngle: 0,
|
||||
cameraHorizontalAngle: 0,
|
||||
cameraVerticalAngle: 0,
|
||||
focalLength: 2,
|
||||
};
|
||||
airPoints.value?.push(airPointInfo);
|
||||
|
||||
uavPoints.value.push(graphic);
|
||||
|
||||
// 当前航点
|
||||
currentAirPoint.value = airPoints.value[airPoints.value?.length - 1];
|
||||
|
||||
// 绘制航线
|
||||
handlerDrawLine();
|
||||
};
|
||||
|
||||
// 绘制镜头
|
||||
const handlerDrawCamera = (e) => {
|
||||
console.log('EEE', e);
|
||||
|
||||
// 判断是否已经添加
|
||||
const graphic = graphicLayer.getGraphicById('cameraGraphic');
|
||||
if (graphic) {
|
||||
// 如果存在更新数据
|
||||
graphic.setOptions({
|
||||
id: 'cameraGraphic',
|
||||
position: [e.lng, e.lat, e.alt],
|
||||
show: true,
|
||||
style: {
|
||||
angle1: 30, // 椎体夹角1
|
||||
angle2: 30, // 椎体夹角2
|
||||
length: 100, // 椎体长度
|
||||
rayEllipsoid: false,
|
||||
color: 'rgba(0,255,255,0.3)',
|
||||
outline: true,
|
||||
topShow: true,
|
||||
topSteps: 2,
|
||||
flat: true,
|
||||
cameraHpr: true,
|
||||
heading: e.aircraftHorizontalAngle,
|
||||
pitch: e.cameraVerticalAngle + 90, // 俯仰角 0 - 360度
|
||||
roll: 0,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
let satelliteSensor = new mars3d.graphic.RectSensor({
|
||||
id: 'cameraGraphic',
|
||||
position: [e.lng, e.lat, e.alt],
|
||||
style: {
|
||||
flat: true,
|
||||
angle1: 30, // 椎体夹角1
|
||||
angle2: 30, // 椎体夹角2
|
||||
length: 100, // 椎体长度
|
||||
rayEllipsoid: false,
|
||||
color: 'rgba(0,255,255,0.3)',
|
||||
outline: true,
|
||||
topShow: true,
|
||||
topSteps: 2,
|
||||
cameraHpr: true,
|
||||
heading: e.aircraftHorizontalAngle,
|
||||
pitch: e.cameraVerticalAngle + 90, // 俯仰角 0 - 360度
|
||||
roll: 0,
|
||||
},
|
||||
});
|
||||
graphicLayer.addGraphic(satelliteSensor);
|
||||
}
|
||||
};
|
||||
|
||||
// 更新航点
|
||||
const updateAirPoint = (e) => {
|
||||
// 更新航点
|
||||
|
|
@ -1539,6 +1496,7 @@
|
|||
polygonLineGraphicLayer ? polygonLineGraphicLayer.clear() : null;
|
||||
airPoints.value = [];
|
||||
};
|
||||
|
||||
// 设置机场位置
|
||||
const setAirportPosition = async () => {
|
||||
let point = graphicLayer.getGraphicById('set-airport');
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div style="flex:1;">
|
||||
工作计划
|
||||
</div>
|
||||
<div>
|
||||
<div class="create-button">
|
||||
<PlusOutlined @click="createWorkPlan(null)" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<div>
|
||||
<a-select
|
||||
ref="select"
|
||||
style="width: 140px"
|
||||
style="width: 100px"
|
||||
placeholder="计划状态"
|
||||
>
|
||||
<a-select-option value="jack">全部</a-select-option>
|
||||
|
|
@ -60,11 +60,8 @@
|
|||
</a-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="type" >
|
||||
{{item.description}}
|
||||
</div>
|
||||
<div class="time">更新时间：{{item.createTime}}</div>
|
||||
<div class="username"><UserOutlined /> {{item.createId}}</div>
|
||||
<div class="time">更新时间：{{item.createTime}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -217,13 +214,23 @@
|
|||
.container{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background: #0D0E15;
|
||||
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15), 0px 10px 30px 1px rgba(0,0,6,0.15), inset 0px 0px 20px 8px rgba(58,87,232,0.73);
|
||||
border-radius: 6px;
|
||||
opacity: 0.8;
|
||||
padding:0px 10px;
|
||||
}
|
||||
.title{
|
||||
padding:30px 15px;
|
||||
color:#fff;
|
||||
color:#ffffff;
|
||||
font-size:16px;
|
||||
display:flex;
|
||||
}
|
||||
.create-button{
|
||||
border:1px solid #fff;
|
||||
padding:4px 6px;
|
||||
font-size:12px;
|
||||
}
|
||||
.filter-container{
|
||||
padding:0px 15px;
|
||||
display:flex;
|
||||
|
|
@ -285,13 +292,15 @@
|
|||
flex:1;
|
||||
}
|
||||
.ari-line{
|
||||
background:#3F4150;
|
||||
color:#fff;
|
||||
padding:5px 10px;
|
||||
margin-bottom:10px;
|
||||
position:relative;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
background: linear-gradient( 315deg, #515F84 0%, #313C62 100%);
|
||||
box-shadow: 0px 10px 30px 0px rgba(0,0,6,0.15);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.ari-line .title{
|
||||
|
|
@ -316,8 +325,8 @@
|
|||
}
|
||||
|
||||
.ari-line .state-no{
|
||||
border:1px solid rgb(246, 18, 18);
|
||||
color:rgb(246, 18, 18);;
|
||||
border:1px solid #F6B50A;
|
||||
color:#F6B50A;
|
||||
font-size:12px;
|
||||
height:24px;
|
||||
line-height:20px;
|
||||
|
|
@ -343,8 +352,8 @@
|
|||
}
|
||||
|
||||
.ari-line .username{
|
||||
margin-top:10px;
|
||||
color:#ccc;
|
||||
margin:12px 0px;
|
||||
}
|
||||
|
||||
.pagenation{
|
||||
|
|
@ -354,8 +363,10 @@
|
|||
::v-deep .ant-select-selector{
|
||||
border:none!important;
|
||||
color:#fff!important;
|
||||
background:#3F4150!important ;
|
||||
background: linear-gradient( 101deg, #3F4B71 0%, #1F2840 100%)!important ;
|
||||
border-radius: 3px!important;
|
||||
border-top-left-radius: 15px!important;
|
||||
border-bottom-left-radius: 15px!important;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -426,13 +437,19 @@
|
|||
}
|
||||
|
||||
::v-deep .ant-input{
|
||||
background:#3c3c3c!important ;
|
||||
background: #364167!important ;
|
||||
border:none!important;
|
||||
border-top-left-radius: 3px !important;
|
||||
border-bottom-left-radius: 3px !important;
|
||||
border-top-right-radius: 0px !important;
|
||||
border-bottom-right-radius: 0px !important;
|
||||
color:#fff!important;
|
||||
}
|
||||
|
||||
::v-deep .ant-input-search-button{
|
||||
border-top-right-radius: 15px!important;
|
||||
border-bottom-right-radius: 15px!important;
|
||||
}
|
||||
::v-deep .ant-input::placeholder{
|
||||
color:rgba(255, 255, 255, 0.533)!important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,18 +5,18 @@
|
|||
</div>
|
||||
|
||||
<!-- 工作计划列表 -->
|
||||
<div v-show="planListShow" style="width:360px;background:#0d0e15c1 ;position:absolute;top:0px;left:0px;z-index:1;height: calc( 100vh - 104px);overflow-y:hidden;">
|
||||
<div v-show="planListShow" style="width:360px;position:absolute;top:20px;left:20px;z-index:1;height: calc( 100vh - 144px);overflow-y:hidden;">
|
||||
<planList :planListShow="planListShow" @planDetail="planDetail" @createWorkPlan="toCreateWorkPlan" ></planList>
|
||||
</div>
|
||||
|
||||
<!-- 创建计划弹窗 -->
|
||||
<div v-if="workPlanFormShow" style="width:380px;background:#0d0e15ce ;position:absolute;top:30px;left:30px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
|
||||
<div v-if="workPlanFormShow" style="width:380px;position:absolute;top:30px;left:30px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
|
||||
<createWorkPlan :formData="formData" @successCreatePlan="successCreatePlan" @cancleCraete="cancleCraete" @selectAircraft="selectAircraft" @selectAriLine="selectAriLine" :checkedAriLine="checkedAriLine" :checkedDronePort="checkedDronePort"></createWorkPlan>
|
||||
</div>
|
||||
|
||||
<!-- 航线库 -->
|
||||
<div v-if="ariLineShow" style="width:566px;background:#0d0e15c1 ;position:absolute;top:30px;left:440px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
|
||||
<airLineList @checkAriLine="checkAriLine" @previewAirLine="previewAirLine" @createAirLine="handlerCreateAirLine"></airLineList>
|
||||
<div v-if="ariLineShow" style="width:566px;position:absolute;top:30px;left:440px;z-index:1;height: calc( 100vh - 164px);overflow-y:hidden;">
|
||||
<airLineList :title="'选择航线'" @checkAriLine="checkAriLine" @previewAirLine="previewAirLine" @createAirLine="handlerCreateAirLine"></airLineList>
|
||||
</div>
|
||||
|
||||
<!-- 飞行器 -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue