merge
commit
752c869865
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 779 B |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 789 B |
|
|
@ -0,0 +1,322 @@
|
||||||
|
<template>
|
||||||
|
<div class="pathModal">
|
||||||
|
<!-- 左侧目录 -->
|
||||||
|
<div
|
||||||
|
class="leftMenuDiv"
|
||||||
|
:style="{
|
||||||
|
width: leftMenuShow ? '340px' : '64px',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<PathLeftMenu
|
||||||
|
ref="pathLeftMenuRef"
|
||||||
|
:leftMenuShow="leftMenuShow"
|
||||||
|
:allAreaDataList="allAreaDataList"
|
||||||
|
:nowShowAreaData="nowShowAreaData"
|
||||||
|
@changeLeftMenuShow="changeLeftMenuShow"
|
||||||
|
@handlerLocation="handlerLocation"
|
||||||
|
@changeAnnotationInfoShow="changeAnnotationInfoShow"
|
||||||
|
@setNowShowAnnotationData="setNowShowAnnotationData"
|
||||||
|
@setNowShowImageData="setNowShowImageData"
|
||||||
|
@setNowShowAreaData="setNowShowAreaData"
|
||||||
|
@setAllAnnotationData="setAllAnnotationData"
|
||||||
|
@setAllAreaData="setAllAreaData"
|
||||||
|
@deleteAnnotation="deleteAnnotation"
|
||||||
|
@deleteArea="deleteArea"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- 地图 -->
|
||||||
|
<div class="mapDiv" :style="{ width: dynamicWidth }">
|
||||||
|
<PathMap
|
||||||
|
ref="pathMapRef"
|
||||||
|
:allAnnotationDataList="allAnnotationDataList"
|
||||||
|
:nowShowAnnotationData="nowShowAnnotationData"
|
||||||
|
:allAreaDataList="allAreaDataList"
|
||||||
|
:nowShowAreaData="nowShowAreaData"
|
||||||
|
:allImageDataList="allImageDataList"
|
||||||
|
:nowShowImageData="nowShowImageData"
|
||||||
|
@setNowShowAnnotationData="setNowShowAnnotationData"
|
||||||
|
@setNowShowImageData="setNowShowImageData"
|
||||||
|
@setNowShowAreaData="setNowShowAreaData"
|
||||||
|
@setAllAnnotationData="setAllAnnotationData"
|
||||||
|
@setAllAreaData="setAllAreaData"
|
||||||
|
@closePathImageInfo="closePathImageInfo"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<!-- 地图作业区域 -->
|
||||||
|
<div class="areaInfoDiv" v-if="areaInfoShow">
|
||||||
|
<PathAreaInfo
|
||||||
|
:allAreaDataList="allAreaDataList"
|
||||||
|
:nowShowAreaData="nowShowAreaData"
|
||||||
|
@setNowShowAreaData="setNowShowAreaData"
|
||||||
|
@closePathAreaInfo="closePathAreaInfo"
|
||||||
|
@handlerLocation="handlerLocation"
|
||||||
|
@deleteArea="deleteArea"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed, onMounted } from 'vue';
|
||||||
|
import { PathLeftMenu, PathMap, PathAreaInfo } from './path';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import imageJson from './json/image.json';
|
||||||
|
import {
|
||||||
|
GetAnnotationList,
|
||||||
|
DeleteAnnotation,
|
||||||
|
GetWorkAreaList,
|
||||||
|
DeleteWorkArea,
|
||||||
|
} from '@/api/demo/mediaLibrary';
|
||||||
|
import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
|
||||||
|
import { useMessage } from '@/hooks/web/useMessage';
|
||||||
|
const { createMessage, createConfirm } = useMessage();
|
||||||
|
|
||||||
|
const props = defineProps(['pathRecord']);
|
||||||
|
// 地图宽度
|
||||||
|
const dynamicWidth = computed(() => {
|
||||||
|
let width = 0;
|
||||||
|
// 左侧目录
|
||||||
|
if (leftMenuShow.value) {
|
||||||
|
width += 340;
|
||||||
|
} else {
|
||||||
|
width += 64;
|
||||||
|
}
|
||||||
|
// 地图作业区域
|
||||||
|
if (areaInfoShow.value) {
|
||||||
|
width += 320;
|
||||||
|
}
|
||||||
|
return 'calc(100% - ' + width + 'px)';
|
||||||
|
});
|
||||||
|
|
||||||
|
// 地图ref
|
||||||
|
const pathMapRef = ref();
|
||||||
|
|
||||||
|
// 左侧目录是否显示----------------------------------------------------
|
||||||
|
const pathLeftMenuRef = ref();
|
||||||
|
const leftMenuShow = ref(true);
|
||||||
|
function changeLeftMenuShow() {
|
||||||
|
leftMenuShow.value = !leftMenuShow.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function changeAnnotationInfoShow() {
|
||||||
|
|
||||||
|
}
|
||||||
|
// 关闭右侧标注
|
||||||
|
function closePathAnnotationInfo() {
|
||||||
|
nowShowAnnotationData.value = {};
|
||||||
|
pathMapRef.value.annotationRestoreDefault();
|
||||||
|
}
|
||||||
|
// 当前展示的标注信息
|
||||||
|
const nowShowAnnotationData = ref();
|
||||||
|
const allAnnotationDataList: any = ref([]);
|
||||||
|
// 设置当前展示的标注信息
|
||||||
|
function setNowShowAnnotationData(value, restore = true) {
|
||||||
|
|
||||||
|
if (restore) {
|
||||||
|
pathMapRef.value.annotationRestoreDefault();
|
||||||
|
}
|
||||||
|
nowShowAnnotationData.value = value;
|
||||||
|
}
|
||||||
|
// 刷新区域信息
|
||||||
|
function setAllAnnotationData() {
|
||||||
|
// 查询地图工作区域
|
||||||
|
getAnnotationList();
|
||||||
|
}
|
||||||
|
// 查询地图标注
|
||||||
|
async function getAnnotationList(showThis = true) {
|
||||||
|
allAnnotationDataList.value = await GetAnnotationList({ workspaceid: 1 });
|
||||||
|
if (allAnnotationDataList.value.length > 0) {
|
||||||
|
allAnnotationDataList.value.forEach((annotation, index) => {
|
||||||
|
let geomjson = WktToGeojson(annotation.geom);
|
||||||
|
annotation = {
|
||||||
|
...annotation,
|
||||||
|
properties: JSON.parse(annotation.properties),
|
||||||
|
geomtype: getGeomType(annotation),
|
||||||
|
coordinates: geomjson.coordinates,
|
||||||
|
};
|
||||||
|
allAnnotationDataList.value[index] = annotation;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (showThis) {
|
||||||
|
setTimeout(() => {
|
||||||
|
pathLeftMenuRef.value.updateShowMenuInfoList('地图标注');
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除标注
|
||||||
|
function deleteAnnotation(value) {
|
||||||
|
if (nowShowAnnotationData.value && nowShowAnnotationData.value.id == value.id) {
|
||||||
|
nowShowAnnotationData.value = {};
|
||||||
|
}
|
||||||
|
DeleteAnnotation({
|
||||||
|
id: value.id,
|
||||||
|
}).then((result) => {
|
||||||
|
if (result) {
|
||||||
|
// 刷新
|
||||||
|
getAnnotationList();
|
||||||
|
createMessage.success('删除成功');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 右侧区域信息是否显示----------------------------------------------------
|
||||||
|
const areaInfoShow = ref(false);
|
||||||
|
function changeAreaInfoShow() {
|
||||||
|
areaInfoShow.value = !areaInfoShow.value;
|
||||||
|
}
|
||||||
|
// 关闭右侧标注
|
||||||
|
function closePathAreaInfo() {
|
||||||
|
areaInfoShow.value = false;
|
||||||
|
nowShowAreaData.value = {};
|
||||||
|
pathMapRef.value.areaRestoreDefault();
|
||||||
|
}
|
||||||
|
// 当前展示的区域信息
|
||||||
|
const nowShowAreaData = ref();
|
||||||
|
const allAreaDataList: any = ref([]);
|
||||||
|
// 设置当前展示的区域信息
|
||||||
|
function setNowShowAreaData(value, restore = true) {
|
||||||
|
if (value.id) {
|
||||||
|
areaInfoShow.value = true;
|
||||||
|
} else {
|
||||||
|
areaInfoShow.value = false;
|
||||||
|
}
|
||||||
|
if (restore) {
|
||||||
|
pathMapRef.value.areaRestoreDefault();
|
||||||
|
}
|
||||||
|
nowShowAreaData.value = value;
|
||||||
|
}
|
||||||
|
// 刷新区域信息
|
||||||
|
function setAllAreaData() {
|
||||||
|
// 查询地图工作区域
|
||||||
|
getWorkAreaList();
|
||||||
|
}
|
||||||
|
// 查询地图工作区域
|
||||||
|
async function getWorkAreaList(showThis = true) {
|
||||||
|
allAreaDataList.value = await GetWorkAreaList({ workspaceid: 1 });
|
||||||
|
if (allAreaDataList.value.length > 0) {
|
||||||
|
allAreaDataList.value.forEach((area, index) => {
|
||||||
|
let geomjson = WktToGeojson(area.geom);
|
||||||
|
area = {
|
||||||
|
...area,
|
||||||
|
properties: JSON.parse(area.properties),
|
||||||
|
geomtype: getGeomType(area),
|
||||||
|
coordinates: geomjson.coordinates,
|
||||||
|
};
|
||||||
|
allAreaDataList.value[index] = area;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
if (showThis) {
|
||||||
|
setTimeout(() => {
|
||||||
|
pathLeftMenuRef.value.updateShowMenuInfoList('地图作业区域');
|
||||||
|
}, 50);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除区域
|
||||||
|
async function deleteArea(value) {
|
||||||
|
if (nowShowAreaData.value && nowShowAreaData.value.id == value.id) {
|
||||||
|
areaInfoShow.value = false;
|
||||||
|
nowShowAreaData.value = {};
|
||||||
|
}
|
||||||
|
DeleteWorkArea({
|
||||||
|
id: value.id,
|
||||||
|
}).then((result) => {
|
||||||
|
if (result) {
|
||||||
|
// 刷新
|
||||||
|
getWorkAreaList();
|
||||||
|
createMessage.success('删除成功');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭右侧图片
|
||||||
|
function closePathImageInfo() {
|
||||||
|
|
||||||
|
}
|
||||||
|
// 当前展示的图片
|
||||||
|
const nowShowImageData = ref();
|
||||||
|
const allImageDataList = ref(imageJson);
|
||||||
|
|
||||||
|
// 设置当前展示的图片
|
||||||
|
function setNowShowImageData(value) {
|
||||||
|
|
||||||
|
nowShowImageData.value = value;
|
||||||
|
pathMapRef.value.setNowShowImageByRight();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 其他方法-----------------------------------------------------------------
|
||||||
|
|
||||||
|
// 移动位置
|
||||||
|
function handlerLocation(position) {
|
||||||
|
pathMapRef.value.handlerLocation([position.lng, position.lat]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取WKT类型
|
||||||
|
function getGeomType(area) {
|
||||||
|
let geom = area.geom;
|
||||||
|
let radiusFlag = area.properties.indexOf('radius') > -1 ? true : false;
|
||||||
|
// 点
|
||||||
|
if (geom.indexOf('POINT') > -1 && !radiusFlag) {
|
||||||
|
return 'Point';
|
||||||
|
}
|
||||||
|
// 线
|
||||||
|
if (geom.indexOf('LINESTRING') > -1 && !radiusFlag) {
|
||||||
|
return 'Polyline';
|
||||||
|
}
|
||||||
|
// 多边形
|
||||||
|
if (geom.indexOf('POLYGON') > -1 && !radiusFlag) {
|
||||||
|
return 'Polygon';
|
||||||
|
}
|
||||||
|
// 圈
|
||||||
|
if (geom.indexOf('POLYGON') > -1 && radiusFlag) {
|
||||||
|
return 'Circle';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 查询地图工作区域
|
||||||
|
getWorkAreaList(false);
|
||||||
|
getAnnotationList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.pathModal {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
.leftMenuDiv {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapDiv {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
// width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annotationInfoDiv {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
width: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.areaInfoDiv {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
width: 320px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imageInfoDiv {
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
// width: 37%;
|
||||||
|
width: 720px;
|
||||||
|
// min-width: 720px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,3 @@
|
||||||
|
export { default as PathLeftMenu } from './pathLeftMenu.vue';
|
||||||
|
export { default as PathMap } from './pathMap.vue';
|
||||||
|
export { default as PathAreaInfo } from './pathAreaInfo.vue';
|
||||||
|
|
@ -0,0 +1,374 @@
|
||||||
|
<template>
|
||||||
|
<div class="areaInfo">
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div class="annotationTitle"> 自定义飞行区 </div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div class="annotationTitle">
|
||||||
|
<!-- 自定义禁降区 -->
|
||||||
|
<div
|
||||||
|
v-if="props.nowShowAreaData.type == 'noland'"
|
||||||
|
:style="{
|
||||||
|
width: '15px',
|
||||||
|
height: '15px',
|
||||||
|
outline: `2px solid #FF9900`,
|
||||||
|
'margin-left': '2px',
|
||||||
|
'margin-right': '12px',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<!-- 自定义作业区 -->
|
||||||
|
<div
|
||||||
|
v-if="props.nowShowAreaData.type == 'dfence'"
|
||||||
|
:style="{
|
||||||
|
width: '13px',
|
||||||
|
height: '13px',
|
||||||
|
outline: `2px solid #00FF00`,
|
||||||
|
'margin-left': '2px',
|
||||||
|
'margin-right': '12px',
|
||||||
|
'border-radius': props.nowShowAreaData.geomtype == 'Circle' ? '6.5px' : '0px',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<!-- 自定义限飞区 -->
|
||||||
|
<div
|
||||||
|
v-if="props.nowShowAreaData.type == 'nfz'"
|
||||||
|
:style="{
|
||||||
|
width: '13px',
|
||||||
|
height: '13px',
|
||||||
|
outline: `2px solid #FF0000`,
|
||||||
|
background: `#FF000055`,
|
||||||
|
'margin-left': '2px',
|
||||||
|
'margin-right': '12px',
|
||||||
|
'border-radius': props.nowShowAreaData.geomtype == 'Circle' ? '6.5px' : '0px',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<a-input v-model:value="nowAreaData.name" style="width: 65%" size="small"></a-input>
|
||||||
|
<div class="annotationTitleButton" @click="handlerLocation">
|
||||||
|
<AimOutlined />
|
||||||
|
</div>
|
||||||
|
<div class="annotationTitleButton" @click="deleteArea">
|
||||||
|
<DeleteOutlined />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div class="annotationPrompt" v-if="props.nowShowAreaData.type == 'noland'">
|
||||||
|
自定义作业区绘制后，飞行器只能在该区域内飞行
|
||||||
|
</div>
|
||||||
|
<div class="annotationPrompt" v-if="props.nowShowAreaData.type == 'dfence'">
|
||||||
|
自定义禁降区绘制后，飞行器不能在绘制区域内自动降落
|
||||||
|
</div>
|
||||||
|
<div class="annotationPrompt" v-if="props.nowShowAreaData.type == 'nfz'">
|
||||||
|
自定义作业区绘制后，飞行器只能在该区域内飞行
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div class="annotationTitle"> 更多信息 </div>
|
||||||
|
</a-col>
|
||||||
|
<!-- 启用状态 -->
|
||||||
|
<a-col :span="6">
|
||||||
|
<div class="annotationTitle">启用状态</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="18">
|
||||||
|
<div class="annotationContent">
|
||||||
|
{{ props.nowShowAreaData.state == 0 ? '已启用' : '已禁用' }}
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<!-- 水平周长 -->
|
||||||
|
<a-col :span="6">
|
||||||
|
<div class="annotationTitle">水平周长</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="18">
|
||||||
|
<div class="annotationContent"> {{ length.toFixed(2) }}m</div>
|
||||||
|
</a-col>
|
||||||
|
<!-- 水平面积 -->
|
||||||
|
<a-col :span="6">
|
||||||
|
<div class="annotationTitle">水平面积</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="18">
|
||||||
|
<div class="annotationContent"> {{ area.toFixed(2) }}㎡</div>
|
||||||
|
</a-col>
|
||||||
|
<!-- 半径 -->
|
||||||
|
<a-col :span="6" v-if="props.nowShowAreaData.geomtype == 'Circle'">
|
||||||
|
<div class="annotationTitle">半径</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="18" v-if="props.nowShowAreaData.geomtype == 'Circle'">
|
||||||
|
<div class="annotationContent">
|
||||||
|
<a-input v-model:value="nowAreaData.properties.radius" style="width: 100%" size="small">
|
||||||
|
<template #addonAfter> <span style="color: white">m</span> </template>
|
||||||
|
</a-input>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<!-- 绘制者 -->
|
||||||
|
<a-col :span="6">
|
||||||
|
<div class="annotationTitle">绘制者</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="18">
|
||||||
|
<div class="annotationContent"> {{ props.nowShowAreaData.createdUser }}</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="24">
|
||||||
|
<div class="area_buttons">
|
||||||
|
<div class="cancelDiv" @click="closePathAreaInfo">取消</div>
|
||||||
|
<div class="startDiv" :class="{ disabled: props.nowShowAreaData }">确认</div>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</div>
|
||||||
|
</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,
|
||||||
|
CheckOutlined,
|
||||||
|
AimOutlined,
|
||||||
|
AlignLeftOutlined,
|
||||||
|
InfoCircleOutlined,
|
||||||
|
AntDesignOutlined,
|
||||||
|
ExpandAltOutlined,
|
||||||
|
BorderOutlined,
|
||||||
|
LogoutOutlined,
|
||||||
|
MinusOutlined,
|
||||||
|
PlusOutlined,
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
|
import {
|
||||||
|
GetWorkAreaList,
|
||||||
|
AddWorkArea,
|
||||||
|
UpdateWorkArea,
|
||||||
|
DeleteWorkArea,
|
||||||
|
} from '@/api/demo/mediaLibrary';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import { useMessage } from '@/hooks/web/useMessage';
|
||||||
|
const { createMessage, createConfirm } = useMessage();
|
||||||
|
|
||||||
|
const props = defineProps(['allAreaDataList', 'nowShowAreaData']);
|
||||||
|
console.log('nowShowAreaData',props.nowShowAreaData)
|
||||||
|
const emits = defineEmits([
|
||||||
|
'setNowShowAreaData',
|
||||||
|
'closePathAreaInfo',
|
||||||
|
'handlerLocation',
|
||||||
|
'deleteArea',
|
||||||
|
]);
|
||||||
|
const nowAreaData: any = ref(props.nowShowAreaData);
|
||||||
|
|
||||||
|
// 关闭
|
||||||
|
function closePathAreaInfo() {
|
||||||
|
emits('closePathAreaInfo');
|
||||||
|
}
|
||||||
|
// 移动到中心位置
|
||||||
|
function handlerLocation() {
|
||||||
|
emits('handlerLocation', {
|
||||||
|
lng: props.nowShowAreaData.properties.centerPoint[0],
|
||||||
|
lat: props.nowShowAreaData.properties.centerPoint[1],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 删除此区域
|
||||||
|
function deleteArea() {
|
||||||
|
createConfirm({
|
||||||
|
iconType: 'info',
|
||||||
|
title: '提示',
|
||||||
|
content: '将会影响到项目内设备的作业范围，是否删除该区域？',
|
||||||
|
onOk: async () => {
|
||||||
|
emits('deleteArea', props.nowShowAreaData);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 水平周长和水平面积
|
||||||
|
const length: any = ref();
|
||||||
|
const area: any = ref();
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => nowAreaData.value,
|
||||||
|
() => {
|
||||||
|
emits('setNowShowAreaData', nowAreaData.value, false);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
watch(
|
||||||
|
() => props.nowShowAreaData,
|
||||||
|
() => {
|
||||||
|
nowAreaData.value = props.nowShowAreaData;
|
||||||
|
if (props.nowShowAreaData.geomtype == 'Polygon') {
|
||||||
|
// 水平距离
|
||||||
|
length.value = mars3d.MeasureUtil.getDistance(nowAreaData.value.coordinates[0]);
|
||||||
|
// 水平面积
|
||||||
|
area.value = mars3d.MeasureUtil.getArea(nowAreaData.value.coordinates[0]);
|
||||||
|
}
|
||||||
|
if (props.nowShowAreaData.geomtype == 'Circle') {
|
||||||
|
// 水平距离
|
||||||
|
length.value = 2 * Math.PI * parseFloat(nowAreaData.value.properties.radius);
|
||||||
|
// 水平面积
|
||||||
|
area.value =
|
||||||
|
Math.PI *
|
||||||
|
parseFloat(nowAreaData.value.properties.radius) *
|
||||||
|
parseFloat(nowAreaData.value.properties.radius);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true,
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.areaInfo {
|
||||||
|
// 页面不能被选中
|
||||||
|
-webkit-user-select: none; /* Safari */
|
||||||
|
-moz-user-select: none; /* Firefox */
|
||||||
|
-ms-user-select: none; /* IE/Edge */
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #232323;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annotationTitle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 14px;
|
||||||
|
min-height: 45px;
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.annotationTitleButton_right {
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 12px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
.annotationTitleButton {
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: 12px;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.annotationContent {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
min-height: 45px;
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annotationButton {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
min-height: 45px;
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.annotationPrompt {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
min-height: 45px;
|
||||||
|
height: auto;
|
||||||
|
width: 100%;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
color: #ffffff55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
background: #3c3c3c;
|
||||||
|
border-radius: 2px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #5d5f61;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button.disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.5;
|
||||||
|
background-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.numDiv {
|
||||||
|
width: calc(80% - 70px);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.numSpan {
|
||||||
|
color: #2d8cf0;
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: #2d8cf0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 取消和开始检测按钮
|
||||||
|
.area_buttons {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-top: 1px solid #ffffff55;
|
||||||
|
width: 100%;
|
||||||
|
height: 68px;
|
||||||
|
gap: 20px;
|
||||||
|
|
||||||
|
.cancelDiv {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #3c3c3c;
|
||||||
|
color: #ffffff;
|
||||||
|
width: 40%;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #5d5f61;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.startDiv {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: #0960bd;
|
||||||
|
color: #ffffff;
|
||||||
|
width: 40%;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 5px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #2a7dc9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,592 @@
|
||||||
|
<template>
|
||||||
|
<div class="leftMenu">
|
||||||
|
<div class="leftMenuContent">
|
||||||
|
<div class="leftMenuContent_2" v-if="leftMenuShow">
|
||||||
|
<div class="leftMenuContent_title">
|
||||||
|
{{ showMenuInfoName }}
|
||||||
|
</div>
|
||||||
|
<div class="leftMenuContent_list">
|
||||||
|
<!-- 地图作业区域 -->
|
||||||
|
<div v-if="showMenuInfoName == '地图作业区域'" style="margin: 10px">
|
||||||
|
<a-select
|
||||||
|
v-model:value="areatype"
|
||||||
|
style="width: 120px; margin-right: 15px"
|
||||||
|
@change="handleChangeAreaSelect"
|
||||||
|
>
|
||||||
|
<a-select-option value="all">全部类型</a-select-option>
|
||||||
|
<a-select-option value="dfence">全部作业区</a-select-option>
|
||||||
|
<a-select-option value="nfz">全部限飞区</a-select-option>
|
||||||
|
<a-select-option value="noland">全部禁降区</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<a-select
|
||||||
|
v-model:value="areastate"
|
||||||
|
style="width: 120px"
|
||||||
|
@change="handleChangeAreaSelect"
|
||||||
|
>
|
||||||
|
<a-select-option value="all">全部状态</a-select-option>
|
||||||
|
<a-select-option value="0">已启用</a-select-option>
|
||||||
|
<a-select-option value="1">已禁用</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
<!-- 列表 -->
|
||||||
|
<div v-for="show in showMenuInfoList" :key="show.id">
|
||||||
|
<!-- 地图作业区域 -->
|
||||||
|
<div
|
||||||
|
class="showMenuInfo_area"
|
||||||
|
:style="{
|
||||||
|
outline:
|
||||||
|
props.nowShowAreaData && props.nowShowAreaData.id == show.id
|
||||||
|
? '2px solid #2D8CF0'
|
||||||
|
: '',
|
||||||
|
background: props.nowShowAreaData && show.state == 0 ? '#3c3c3c' : '#3c3c3c55',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<a-tooltip placement="right">
|
||||||
|
<template #title> {{ show.name }} </template>
|
||||||
|
<div
|
||||||
|
class="name"
|
||||||
|
@click="setNowShowAreaData(show)"
|
||||||
|
:style="{
|
||||||
|
color: show.state == 0 ? '#ffffff' : '#ffffff55',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ show.name }}
|
||||||
|
</div>
|
||||||
|
</a-tooltip>
|
||||||
|
<div
|
||||||
|
class="type"
|
||||||
|
@click="setNowShowAreaData(show)"
|
||||||
|
:style="{
|
||||||
|
color: show.state == 0 ? '#ffffff' : '#ffffff55',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- 自定义禁降区 -->
|
||||||
|
<div
|
||||||
|
v-if="show.type == 'noland'"
|
||||||
|
:style="{
|
||||||
|
width: '13px',
|
||||||
|
height: '13px',
|
||||||
|
outline: `2px solid #FF9900`,
|
||||||
|
'margin-right': '6px',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<!-- 自定义作业区 -->
|
||||||
|
<div
|
||||||
|
v-if="show.type == 'dfence'"
|
||||||
|
:style="{
|
||||||
|
width: '13px',
|
||||||
|
height: '13px',
|
||||||
|
outline: `2px solid #00FF00`,
|
||||||
|
'margin-right': '6px',
|
||||||
|
'border-radius': show.geomtype == 'Circle' ? '6.5px' : '0px',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<!-- 自定义限飞区 -->
|
||||||
|
<div
|
||||||
|
v-if="show.type == 'nfz'"
|
||||||
|
:style="{
|
||||||
|
width: '13px',
|
||||||
|
height: '13px',
|
||||||
|
outline: `2px solid #FF0000`,
|
||||||
|
background: `#FF000055`,
|
||||||
|
'margin-right': '6px',
|
||||||
|
'border-radius': show.geomtype == 'Circle' ? '6.5px' : '0px',
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<span>{{ getType(show.type) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="buttonlist">
|
||||||
|
<div class="button" v-if="show.state == 1">
|
||||||
|
<a-popconfirm
|
||||||
|
title="将会影响到项目内设备的作业范围，是否启用该区域？"
|
||||||
|
ok-text="启用"
|
||||||
|
cancel-text="取消"
|
||||||
|
placement="right"
|
||||||
|
@confirm="enableThisArea(show)"
|
||||||
|
>
|
||||||
|
<a-tooltip placement="top">
|
||||||
|
<template #title>
|
||||||
|
<span>可点击启用该区域</span>
|
||||||
|
</template>
|
||||||
|
<CheckCircleOutlined />
|
||||||
|
</a-tooltip>
|
||||||
|
</a-popconfirm>
|
||||||
|
</div>
|
||||||
|
<div class="button" v-if="show.state == 0">
|
||||||
|
<a-popconfirm
|
||||||
|
title="将会影响到项目内设备的作业范围，是否禁用该区域？"
|
||||||
|
ok-text="禁用"
|
||||||
|
cancel-text="取消"
|
||||||
|
placement="right"
|
||||||
|
@confirm="disableThisArea(show)"
|
||||||
|
>
|
||||||
|
<a-tooltip placement="top">
|
||||||
|
<template #title>
|
||||||
|
<span>可点击禁用该区域</span>
|
||||||
|
</template>
|
||||||
|
<StopOutlined />
|
||||||
|
</a-tooltip>
|
||||||
|
</a-popconfirm>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<a-tooltip placement="top">
|
||||||
|
<template #title>
|
||||||
|
<span>回中</span>
|
||||||
|
</template>
|
||||||
|
<AimOutlined @click="handlerLocation(show)" />
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<a-popconfirm
|
||||||
|
title="将会影响到项目内设备的作业范围，是否删除该区域？"
|
||||||
|
ok-text="删除"
|
||||||
|
cancel-text="取消"
|
||||||
|
placement="right"
|
||||||
|
@confirm="deleteArea(show)"
|
||||||
|
>
|
||||||
|
<a-tooltip placement="top">
|
||||||
|
<template #title>
|
||||||
|
<span>删除</span>
|
||||||
|
</template>
|
||||||
|
<DeleteOutlined />
|
||||||
|
</a-tooltip>
|
||||||
|
</a-popconfirm>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="suojinButton" @click="changeLeftMenuShow">
|
||||||
|
<DoubleLeftOutlined v-if="leftMenuShow" style="font-size: 16px" />
|
||||||
|
<DoubleRightOutlined v-if="!leftMenuShow" style="font-size: 16px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, watch } from 'vue';
|
||||||
|
import {
|
||||||
|
CloseOutlined,
|
||||||
|
AntDesignOutlined,
|
||||||
|
DoubleLeftOutlined,
|
||||||
|
DoubleRightOutlined,
|
||||||
|
EnvironmentOutlined,
|
||||||
|
CodeSandboxOutlined,
|
||||||
|
ExpandAltOutlined,
|
||||||
|
BorderOutlined,
|
||||||
|
LogoutOutlined,
|
||||||
|
EyeOutlined,
|
||||||
|
EyeInvisibleOutlined,
|
||||||
|
AimOutlined,
|
||||||
|
DeleteOutlined,
|
||||||
|
FileImageOutlined,
|
||||||
|
CheckCircleOutlined,
|
||||||
|
StopOutlined,
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
|
import { UpdateWorkArea, UpdateAnnotation } from '@/api/demo/mediaLibrary';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import { useMessage } from '@/hooks/web/useMessage';
|
||||||
|
const { createMessage, createConfirm } = useMessage();
|
||||||
|
|
||||||
|
const props = defineProps([
|
||||||
|
'leftMenuShow',
|
||||||
|
'allAreaDataList',
|
||||||
|
'nowShowAreaData',
|
||||||
|
]);
|
||||||
|
const emits = defineEmits([
|
||||||
|
'changeLeftMenuShow',
|
||||||
|
'handlerLocation',
|
||||||
|
'setNowShowAreaData',
|
||||||
|
'setAllAreaData',
|
||||||
|
'deleteArea',
|
||||||
|
]);
|
||||||
|
const showMenuInfoList = ref(props.allAreaDataList);
|
||||||
|
const showMenuInfoName = ref('地图作业区域');
|
||||||
|
function updateShowMenuInfoList(type) {
|
||||||
|
handleChangeAreaSelect();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 目录-隐藏或者显示
|
||||||
|
function changeLeftMenuShow() {
|
||||||
|
emits('changeLeftMenuShow');
|
||||||
|
}
|
||||||
|
// 地图作业区域-------------------------------------------------
|
||||||
|
// 地图作业区域-单选
|
||||||
|
const areatype = ref('all');
|
||||||
|
const areastate = ref('all');
|
||||||
|
// 地图作业区域-获取类别区分
|
||||||
|
function getType(type) {
|
||||||
|
let name = '';
|
||||||
|
switch (type) {
|
||||||
|
case 'nfz':
|
||||||
|
name = '自定义限飞区';
|
||||||
|
break;
|
||||||
|
case 'dfence':
|
||||||
|
name = '自定义作业区';
|
||||||
|
break;
|
||||||
|
case 'noland':
|
||||||
|
name = '自定义禁降区';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return name;
|
||||||
|
}
|
||||||
|
// 地图作业区域-下拉框
|
||||||
|
const filterAfterAreaDataList = ref(props.allAreaDataList);
|
||||||
|
function handleChangeAreaSelect() {
|
||||||
|
let filterAreaData = props.allAreaDataList;
|
||||||
|
if (areatype.value !== 'all') {
|
||||||
|
filterAreaData = filterAreaData.filter((item) => item.type == areatype.value);
|
||||||
|
}
|
||||||
|
if (areastate.value !== 'all') {
|
||||||
|
filterAreaData = filterAreaData.filter((item) => item.state == areastate.value);
|
||||||
|
}
|
||||||
|
filterAfterAreaDataList.value = filterAreaData;
|
||||||
|
showMenuInfoList.value = filterAfterAreaDataList.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 地图作业区域-启用该区域
|
||||||
|
function enableThisArea(value) {
|
||||||
|
setNowShowAreaData({
|
||||||
|
...value,
|
||||||
|
state: 0,
|
||||||
|
});
|
||||||
|
UpdateWorkArea({
|
||||||
|
...value,
|
||||||
|
properties: JSON.stringify(value.properties),
|
||||||
|
state: 0,
|
||||||
|
}).then((res) => {
|
||||||
|
emits('setAllAreaData');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 地图作业区域-禁用该区域
|
||||||
|
function disableThisArea(value) {
|
||||||
|
setNowShowAreaData({
|
||||||
|
...value,
|
||||||
|
state: 1,
|
||||||
|
});
|
||||||
|
UpdateWorkArea({
|
||||||
|
...value,
|
||||||
|
properties: JSON.stringify(value.properties),
|
||||||
|
state: 1,
|
||||||
|
}).then((res) => {
|
||||||
|
emits('setAllAreaData');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 地图作业区域-删除此区域
|
||||||
|
function deleteArea(show) {
|
||||||
|
emits('deleteArea', show);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设定当前区域
|
||||||
|
function setNowShowAreaData(value) {
|
||||||
|
emits('setNowShowAreaData', value);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ------------------------------------------------------------------
|
||||||
|
// 移动到中心位置
|
||||||
|
function handlerLocation(position) {
|
||||||
|
// if (showMenuInfoName.value == '地图标注') {
|
||||||
|
// let coordinates = position.coordinates;
|
||||||
|
// switch (position.type) {
|
||||||
|
// case 0:
|
||||||
|
// emits('handlerLocation', {
|
||||||
|
// lng: coordinates[0],
|
||||||
|
// lat: coordinates[1],
|
||||||
|
// });
|
||||||
|
// break;
|
||||||
|
// case 1:
|
||||||
|
// emits('handlerLocation', {
|
||||||
|
// lng: coordinates[0][0],
|
||||||
|
// lat: coordinates[0][1],
|
||||||
|
// });
|
||||||
|
// break;
|
||||||
|
// case 2:
|
||||||
|
// emits('handlerLocation', {
|
||||||
|
// lng: coordinates[0][0][0],
|
||||||
|
// lat: coordinates[0][0][1],
|
||||||
|
// });
|
||||||
|
// break;
|
||||||
|
// case 3:
|
||||||
|
// emits('handlerLocation', {
|
||||||
|
// lng: coordinates[0],
|
||||||
|
// lat: coordinates[1],
|
||||||
|
// });
|
||||||
|
// break;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// if (showMenuInfoName.value == '地图照片') {
|
||||||
|
// emits('handlerLocation', {
|
||||||
|
// lng: position.photo_position.lng,
|
||||||
|
// lat: position.photo_position.lat,
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
if (showMenuInfoName.value == '地图作业区域') {
|
||||||
|
if (position.geomtype == 'Circle') {
|
||||||
|
emits('handlerLocation', {
|
||||||
|
lng: position.properties.centerPoint[0],
|
||||||
|
lat: position.properties.centerPoint[1],
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
emits('handlerLocation', {
|
||||||
|
lng: position.properties.centerPoint[0],
|
||||||
|
lat: position.properties.centerPoint[1],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
updateShowMenuInfoList,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.leftMenu {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #232323;
|
||||||
|
|
||||||
|
.leftMenuTitle {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
padding: 10px;
|
||||||
|
border-bottom: 1px solid #ffffff55;
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #ffffff;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* 关键属性 */
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftMenuContent {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100%-50px);
|
||||||
|
// height: 800px;
|
||||||
|
|
||||||
|
.leftMenuContent_1 {
|
||||||
|
position: relative;
|
||||||
|
width: 64px;
|
||||||
|
height: 100%;
|
||||||
|
border-right: 1px solid #ffffff55;
|
||||||
|
// padding-top: 10px;
|
||||||
|
// padding-bottom: 10px;
|
||||||
|
|
||||||
|
.leftMenu_closeButton {
|
||||||
|
position: relative;
|
||||||
|
padding-top: 7px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftMenu_buttonList {
|
||||||
|
position: relative;
|
||||||
|
width: 50px;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #1a375a;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: 7px;
|
||||||
|
margin-right: 7px;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.leftMenu_buttonList_annotation {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 5px;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
margin: 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.leftMenu_buttonList_image {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 5px;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
margin: 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.leftMenu_buttonList_area {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 5px;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
|
margin: 5px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftMenuContent_2 {
|
||||||
|
position: relative;
|
||||||
|
width: 275px;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.leftMenuContent_title {
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftMenuContent_list {
|
||||||
|
overflow-y: auto;
|
||||||
|
max-height: 800px;
|
||||||
|
|
||||||
|
// 地图标注
|
||||||
|
.showMenuInfo_annotation {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
color: #ffffff;
|
||||||
|
height: 30px;
|
||||||
|
padding-left: 15px;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.eye {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.buttonRight2 {
|
||||||
|
position: absolute;
|
||||||
|
right: 30px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.buttonRight1 {
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 地图照片
|
||||||
|
.showMenuInfo_image {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
color: #ffffff;
|
||||||
|
height: 30px;
|
||||||
|
padding-left: 15px;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.eye {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
}
|
||||||
|
.buttonRight2 {
|
||||||
|
position: absolute;
|
||||||
|
right: 35px;
|
||||||
|
}
|
||||||
|
.buttonRight1 {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 地图作业区域
|
||||||
|
.showMenuInfo_area {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
height: 70px;
|
||||||
|
margin: 10px 15px;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
left: 6px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 15px;
|
||||||
|
width: 90%;
|
||||||
|
height: 30px;
|
||||||
|
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.type {
|
||||||
|
position: absolute;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
bottom: 6px;
|
||||||
|
left: 8px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 15px;
|
||||||
|
width: 165px;
|
||||||
|
}
|
||||||
|
.buttonlist {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 6px;
|
||||||
|
right: 6px;
|
||||||
|
width: 75px;
|
||||||
|
height: 25px;
|
||||||
|
display: flex;
|
||||||
|
gap: 1px;
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 16px;
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.suojinButton {
|
||||||
|
position: absolute;
|
||||||
|
top: 45%;
|
||||||
|
right: -18px;
|
||||||
|
height: 90px;
|
||||||
|
width: 18px;
|
||||||
|
background: #ffffff;
|
||||||
|
z-index: 1000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -814,6 +814,7 @@
|
||||||
// 打开变化检测弹窗
|
// 打开变化检测弹窗
|
||||||
const pathRecord = ref({});
|
const pathRecord = ref({});
|
||||||
function openPathModal(record) {
|
function openPathModal(record) {
|
||||||
|
console.log('pathRecord',record)
|
||||||
pathRecord.value = record;
|
pathRecord.value = record;
|
||||||
pathOpen.value = true;
|
pathOpen.value = true;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -144,6 +144,7 @@
|
||||||
const { createMessage, createConfirm } = useMessage();
|
const { createMessage, createConfirm } = useMessage();
|
||||||
|
|
||||||
const props = defineProps(['allAreaDataList', 'nowShowAreaData']);
|
const props = defineProps(['allAreaDataList', 'nowShowAreaData']);
|
||||||
|
console.log('nowShowAreaData',props.nowShowAreaData)
|
||||||
const emits = defineEmits([
|
const emits = defineEmits([
|
||||||
'setNowShowAreaData',
|
'setNowShowAreaData',
|
||||||
'closePathAreaInfo',
|
'closePathAreaInfo',
|
||||||
|
|
|
||||||
|
|
@ -406,23 +406,15 @@ const getLocationCenter = () => {
|
||||||
const position = { lng: lon, lat }
|
const position = { lng: lon, lat }
|
||||||
project.value.centerLng = lon
|
project.value.centerLng = lon
|
||||||
project.value.centerLat = lat
|
project.value.centerLat = lat
|
||||||
const pointGraphic = new mars3d.graphic.PointEntity({
|
const pointGraphic = new mars3d.graphic.BillboardEntity({
|
||||||
position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
|
position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
|
||||||
style: {
|
style: {
|
||||||
color: '#ff0000',
|
image: '/projecthome/project_location.png',
|
||||||
pixelSize: 10,
|
width: 53,
|
||||||
outlineColor: '#ffffff',
|
height: 97,
|
||||||
outlineWidth: 2,
|
scale: 1,
|
||||||
label: {
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||||
text: `经度: ${lon.toFixed(6)}\n纬度: ${lat.toFixed(6)}`,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||||
font_size: 16,
|
|
||||||
color: '#000000',
|
|
||||||
outline: true,
|
|
||||||
outlineColor: '#ffffff',
|
|
||||||
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
|
||||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
||||||
pixelOffsetY: -20
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
props.graphicLayer.clear()
|
props.graphicLayer.clear()
|
||||||
|
|
|
||||||
|
|
@ -85,6 +85,7 @@ const selectProject = (item) => {
|
||||||
if(props.activeProject != item.Id){
|
if(props.activeProject != item.Id){
|
||||||
props.airPort.latitude = null
|
props.airPort.latitude = null
|
||||||
props.airPort.longitude = null
|
props.airPort.longitude = null
|
||||||
|
props.airPort.mode_code = null
|
||||||
getClient().unsubscribe(lastSubscriptUrl.value,(error, res) => {})
|
getClient().unsubscribe(lastSubscriptUrl.value,(error, res) => {})
|
||||||
}
|
}
|
||||||
emits('update:activeProject',item.Id)
|
emits('update:activeProject',item.Id)
|
||||||
|
|
@ -99,24 +100,16 @@ const selectProject = (item) => {
|
||||||
})
|
})
|
||||||
let { centerLat:lat, centerLng: lon } = res.workspace
|
let { centerLat:lat, centerLng: lon } = res.workspace
|
||||||
const position:any = [lon, lat]
|
const position:any = [lon, lat]
|
||||||
const pointGraphic = new mars3d.graphic.PointEntity({
|
const pointGraphic = new mars3d.graphic.BillboardEntity({
|
||||||
position: position,
|
position: position,
|
||||||
style: {
|
style: {
|
||||||
color: '#ff0000',
|
image: '/projecthome/project_location.png',
|
||||||
pixelSize: 10,
|
width: 53,
|
||||||
outlineColor: '#ffffff',
|
height: 97,
|
||||||
outlineWidth: 2,
|
scale: 1,
|
||||||
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||||
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||||
clampToGround: true,
|
clampToGround: true,
|
||||||
label: {
|
|
||||||
text: `${res.workspace.workspaceName}`,
|
|
||||||
font_size: 16,
|
|
||||||
color: '#000000',
|
|
||||||
outline: true,
|
|
||||||
outlineColor: '#ffffff',
|
|
||||||
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
|
||||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
||||||
pixelOffsetY: -20
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
graphicLayer.value.clear()
|
graphicLayer.value.clear()
|
||||||
|
|
|
||||||
|
|
@ -39,6 +39,7 @@ const airRoute = ref({
|
||||||
const airPort = ref({
|
const airPort = ref({
|
||||||
latitude: null,
|
latitude: null,
|
||||||
longitude: null,
|
longitude: null,
|
||||||
|
mode_code: null,
|
||||||
});
|
});
|
||||||
const activeProject = ref('')
|
const activeProject = ref('')
|
||||||
const DESIGN_WIDTH = 1912
|
const DESIGN_WIDTH = 1912
|
||||||
|
|
@ -76,6 +77,7 @@ const connectionCallback = () => {
|
||||||
if (rs.data.latitude && rs.data.longitude) {
|
if (rs.data.latitude && rs.data.longitude) {
|
||||||
airPort.value.latitude = rs.data.latitude;
|
airPort.value.latitude = rs.data.latitude;
|
||||||
airPort.value.longitude = rs.data.longitude;
|
airPort.value.longitude = rs.data.longitude;
|
||||||
|
airPort.value.mode_code = rs.data.mode_code;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -209,6 +209,7 @@ const generatePreviewPoint = (placemark)=>{
|
||||||
|
|
||||||
// 项目首页机场位置
|
// 项目首页机场位置
|
||||||
let homeStartGraphic;
|
let homeStartGraphic;
|
||||||
|
let homeStartGraphicLive;
|
||||||
|
|
||||||
let graphic = null;
|
let graphic = null;
|
||||||
|
|
||||||
|
|
@ -1812,7 +1813,7 @@ const clearAllLayer = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
//////////////////////////////机场和无人机////////////////////////////////////////////
|
//////////////////////////////项目、机场、无人机////////////////////////////////////////////
|
||||||
|
|
||||||
// 设置机场位置
|
// 设置机场位置
|
||||||
const setAirportPosition = async () => {
|
const setAirportPosition = async () => {
|
||||||
|
|
@ -1876,21 +1877,26 @@ const setAirportPosition = async () => {
|
||||||
// 项目首页设置机场位置
|
// 项目首页设置机场位置
|
||||||
const homeSetAirportPosition = () => {
|
const homeSetAirportPosition = () => {
|
||||||
if(!graphicLayer){
|
if(!graphicLayer){
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// // 创建点的经纬度信息
|
// // 创建点的经纬度信息
|
||||||
let position = [props.homeAirport.longitude, props.homeAirport.latitude, 70];
|
let position = [props.homeAirport.longitude, props.homeAirport.latitude, 70];
|
||||||
// 更新航点
|
let airportImg = props.homeAirport.mode_code == 4? '/projecthome/work_airport.png': '/projecthome/standby_airport.png'
|
||||||
if (homeStartGraphic) {
|
let airportLiveImg = props.homeAirport.mode_code == 4? '/projecthome/work_airport_live.png': '/projecthome/standby_airport_live.png'
|
||||||
homeStartGraphic.position = position
|
// 更新航点
|
||||||
} else {
|
if (homeStartGraphic && homeStartGraphicLive) {
|
||||||
homeStartGraphic = new mars3d.graphic.BillboardEntity({
|
homeStartGraphic.position = position
|
||||||
id: 'set-home-airport',
|
homeStartGraphic.image = airportImg
|
||||||
position: position,
|
homeStartGraphicLive.position = position
|
||||||
style: {
|
homeStartGraphicLive.image = airportLiveImg
|
||||||
image: '/projecthome/airport.png',
|
} else {
|
||||||
width: 35,
|
homeStartGraphic = new mars3d.graphic.BillboardEntity({
|
||||||
height: 59,
|
id: 'set-home-airport',
|
||||||
|
position: position,
|
||||||
|
style: {
|
||||||
|
image: airportImg,
|
||||||
|
width: 118,
|
||||||
|
height: 133,
|
||||||
scale: 1,
|
scale: 1,
|
||||||
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||||
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||||
|
|
@ -1902,15 +1908,36 @@ const homeSetAirportPosition = () => {
|
||||||
outlineColor: '#000000',
|
outlineColor: '#000000',
|
||||||
pixelOffsetY: -70,
|
pixelOffsetY: -70,
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
homeStartGraphicLive = new mars3d.graphic.BillboardEntity({
|
||||||
|
id: 'set-home-airport-live',
|
||||||
|
position: position,
|
||||||
|
style: {
|
||||||
|
image: airportLiveImg,
|
||||||
|
width: 21,
|
||||||
|
height: 21,
|
||||||
|
scale: 1,
|
||||||
|
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
||||||
|
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
||||||
|
pixelOffset: new Cesium.Cartesian2(45, -107),
|
||||||
|
label: {
|
||||||
|
text: '机场',
|
||||||
|
font_size: 14,
|
||||||
|
color: '#ffffff',
|
||||||
|
outline: true,
|
||||||
|
outlineColor: '#000000',
|
||||||
|
pixelOffsetY: -70,
|
||||||
},
|
},
|
||||||
|
},
|
||||||
});
|
});
|
||||||
homeStartGraphic.on(mars3d.EventType.click, function (event) {
|
homeStartGraphic.on(mars3d.EventType.click, function (event) {
|
||||||
emits('clickAirPort')
|
emits('clickAirPort')
|
||||||
});
|
});
|
||||||
graphicLayer.addGraphic(homeStartGraphic);
|
graphicLayer.addGraphic(homeStartGraphic);
|
||||||
|
graphicLayer.addGraphic(homeStartGraphicLive);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 设置无人机轨迹
|
// 设置无人机轨迹
|
||||||
const setUAVPosition = () => {
|
const setUAVPosition = () => {
|
||||||
let point = graphicLayer.getGraphicById('set-uav');
|
let point = graphicLayer.getGraphicById('set-uav');
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue