zhulongchuan/cquavui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

地图cesium的完善及空域优化

Browse Source
This commit is contained in:
zhulongchuan 2025-11-25 10:38:39 +08:00
parent 9763668130
commit 1c41adb898
12 changed files with 680 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
auto-imports.d.ts vendored
View File

@ -2,7 +2,6 @@
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const ElMessage: typeof import('element-plus/es')['ElMessage']
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const customRef: typeof import('vue')['customRef']

6
package.json
View File

@ -24,7 +24,7 @@
"axios": "0.27.2",
"cesium": "^1.105.0",
"echarts": "5.4.0",
"element-plus": "2.2.27",
"element-plus": "^2.2.27",
"file-saver": "2.0.5",
"fuse.js": "6.6.2",
"js-cookie": "3.0.1",
@ -47,6 +47,7 @@
"@vitejs/plugin-vue": "3.1.0",
"@vue/compiler-sfc": "3.2.45",
"del": "^7.0.0",
"less": "^4.1.3",
"recursive-copy": "^2.0.14",
"sass": "1.56.1",
"unplugin-auto-import": "^0.13.0",
@ -54,7 +55,6 @@
"vite": "3.2.3",
"vite-plugin-compression": "0.5.1",
"vite-plugin-svg-icons": "2.0.1",
"vite-plugin-vue-setup-extend": "0.4.0",
"less": "^4.1.3"
"vite-plugin-vue-setup-extend": "0.4.0"
}
}

68
src/assets/styles/c_style.scss Normal file
View File

@ -0,0 +1,68 @@
.el-container {height: calc(100vh - 84px);}
.el-container.flexD {flex-direction: column }
.flexD{flex-direction: column !important;}
.el-aside {border-right: 1px solid var(--el-border-color-light);}
.el-container + .el-aside {border-right: 0;border-left: 1px solid var(--el-border-color-light);}
.el-header {background: #fff;border-bottom: 1px solid var(--el-border-color-light);padding:13px 15px;display: flex;justify-content: space-between;align-items: center;height: auto;}
.el-header .left-panel {display: flex;align-items: center;}
.el-header .right-panel {display: flex;align-items: center;}
.el-header .right-panel > * + * {margin-left:10px;}
.el-footer {background: #fff;border-top: 1px solid var(--el-border-color-light);padding:13px 15px;height: auto;}
.el-main {padding:15px; overflow-y: scroll;}
.el-main.nopadding {padding:0;background: #fff;padding-bottom: 70px;}
.scTable-page{border-top: 1px solid var(--el-border-color-light);}
.el-header .el-form--inline .el-form-item{margin-bottom: 70px;}
.el-main .el-table__inner-wrapper::before {
content: {height: 800px};
// content: "";
position: absolute;
background:none;
z-index: 3;
overflow-y: scroll;
}
.displayFlex{
display: flex;
justify-content: space-around;
align-items: stretch;
.contentDom{
flex: 1;
}
}
.labelBtnDom{
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
.label{
flex: 1;
display: inline-flex;
justify-content: flex-end;
align-items: flex-start;
flex: 0 0 auto;
font-size: var(--el-form-label-font-size);
color: var(--el-text-color-regular);
margin-bottom: 8px;
padding: 0 12px 0 0;
box-sizing: border-box;
font-weight: bold;
}
}
.lnglataltDom{
box-shadow: 0 0 0 1px #4f4f4f;
background: #141414;
padding: 10px;
margin-bottom: 12px;
}
.marginBottom18{
margin-bottom: 18px;
}
.el-form-item__label{
font-weight: 700;
}

28
src/views/cesiums/CesiumViewers.vue
View File

@ -37,7 +37,7 @@
<!-- 空域列表 -->
<routeList v-if="showType=='routeList'" @setShowType="setShowType" :id="planId" />
<!-- 空域新增 -->
<routeAdd v-if="showType=='routeAdd'" @setShowType="setShowType" :id="planId" :hxid="hxId" />
<!-- <routeAdd v-if="showType=='routeAdd'" @setShowType="setShowType" :id="planId" :hxid="hxId" /> -->
<!-- 空域查看 -->
<!-- <routeGet v-if="showType=='routeGet'" @setShowType="setShowType" :id="planId" :hxid="hxId" /> -->
@ -48,8 +48,31 @@
:import-airspace-data="importAirspaceData"
:get-import-statistics="getImportStatistics"
@import-complete="handleImportComplete"
@remove-drawing="removeDrawing"
@clear-drawings="clearAllDrawings"
/>
<RouteAdd
v-if="showType=='routeAdd'"
@setShowType="setShowType" :id="planId" :hxid="hxId"
:import-from-file="importFromFile"
:import-airspace-data="importAirspaceData"
:get-import-statistics="getImportStatistics"
@import-complete="handleImportComplete"
@remove-drawing="removeDrawing"
@clear-drawings="clearAllDrawings"
@start-circle-drawing="startCircleDrawing"
@start-polygon-drawing="startPolygonDrawing"
@cancel-drawing="cancelDrawing"
@copy-drawing-info="copyDrawingInfo"
@fly-to-selected-drawing="flyToSelectedDrawing"
@print-selected-drawing-info="handlePrintSelectedDrawingInfo"
@print-all-drawings-info="handlePrintAllDrawingsInfo"
@print-drawing-info="handlePrintDrawingInfo"
@export-drawing-info="handleExportDrawingInfo"
/>
<!-- 导入工具面板 -->
<!-- <ImportToolPanel
@ -77,9 +100,10 @@ import DrawingToolPanel from './DrawingToolPanel.vue';
import ImportToolPanel from './ImportToolPanel.vue';
import routeList from "./components/routeList.vue";
import routeAdd from "./components/routeAdd.vue";
// import routeAdd from "./components/routeAdd.vue";
// import routeGet from "./components/routeGets.vue";
import RouteGet from "./RouteGet.vue";
import RouteAdd from "./RouteAdd.vue";
// 项目ID

2
src/views/cesiums/DrawingToolPanel.vue
View File

@ -397,10 +397,12 @@ const cancelDrawing = () => {
// };
const removeDrawing = (id: string) => {
console.log("删除了")
emit('remove-drawing', id);
};
const clearAllDrawings = () => {
console.log("清除了")
emit('clear-drawings');
};

494
src/views/cesiums/RouteAdd.vue Normal file
View File

@ -0,0 +1,494 @@
<!--
航线规划-航线列表
crate by churl
2023-3-6
-->
<template>
<div class="el-container flexD dark">
<div class="el-header">
<div style="display: flex;align-items: center;">
<!-- <el-popconfirm title="返回后内容不会保存;确定返回吗？" @confirm="toList()">
<template #reference>
<el-icon size="24px" class="addBtn">
<ArrowLeftBold />
</el-icon>
</template>
</el-popconfirm> -->
<h2 class="title" style="display: inline-block;margin-left: 8px;">创建空域</h2>
</div>
</div>
<div class="el-main">
<el-form :model="form" :rules="rules" ref="formRef" label-position="top">
<el-form-item label="空域名称" prop="name">
<el-input v-model.trim="form.name" placeholder="请输入空域名称(建议:分局名称+时间+编号)"></el-input>
</el-form-item>
<el-form-item label="所属战区" prop="militaryAreaName">
<el-select v-model="form.militaryAreaName" placeholder="请选择所属战区" style="width: 100%;">
<el-option v-for="item in slectmilitaryAreaList" :key="item.value" :label="item.name"
:value="item.value">{{ item.name }}</el-option>
</el-select>
</el-form-item>
<el-form-item label="空域性制" prop="airspaceProp">
<el-select v-model="form.airspaceProp" placeholder="请选择空域性制" style="width: 100%;">
<el-option v-for="item in slectAirspacePropList" :key="item.value" :label="item.name"
:value="item.value">{{ item.name }}</el-option>
</el-select>
</el-form-item>
<div>
<el-form-item label="空域类型" prop="airspaceType">
<el-select v-model="form.airspaceType" placeholder="请选择空域类型" style="width: 40%;" >
<el-option v-for="item in slectAirspaceTypeList" :key="item.value" :label="item.name"
:value="item.value">{{ item.name }}</el-option>
</el-select>
<div style="margin-left: 10px;"></div>
<el-tooltip
class="box-item"
effect="dark"
content="圆"
placement="top-start"
>
<el-button class="vertical-button" v-if="form.airspaceType==1" type="primary" @click="startCircleDrawing">
绘制空域:⭕
<!-- <svg-icon icon-class="circle"/> -->
</el-button>
</el-tooltip>
<el-tooltip
class="box-item"
effect="dark"
content="多边形"
placement="top-start"
>
<el-button class="vertical-button" v-if="form.airspaceType==2" type="primary" @click="startPolygonDrawing">
绘制空域:♦️
<!-- <svg-icon icon-class="polygon"/> -->
</el-button>
</el-tooltip>
<el-button type="primary" v-if="form.airspaceType==1 || form.airspaceType==2 " @click="clear">清除空域</el-button>
</el-form-item>
</div>
<el-form-item label="最大高度" prop="hightMax">
<el-input v-model.trim="form.hightMax" maxlength="15"></el-input>
</el-form-item>
<el-form-item label="开始时间" prop="planBeg">
<el-date-picker
v-model="form.planBeg"
type="datetime"
placeholder="选择日期时间"
value-format="YYYY-MM-DD hh:mm:ss"
>
</el-date-picker>
</el-form-item>
<el-form-item label="截止时间" prop="planEnd">
<el-date-picker v-model="form.planEnd" type="datetime"
placeholder="选择日期时间"
value-format="YYYY-MM-DD hh:mm:ss"
/>
</el-form-item>
</el-form>
</div>
<div class="el-footer">
<!-- <el-popconfirm title="提交后会覆盖之前内容;确定提交吗？" @confirm=" editForm()" v-if="props.hxid">
<template #reference>
<div>
<el-tooltip :content="form.isOriginal === 0 ? '该副本不支持修改后保存' : ''" placement="top">
<el-button :type="form.isOriginal === 0 ? 'info' : 'primary'" :disabled="form.isOriginal === 0">
提交
</el-button>
</el-tooltip>
</div>
</template>
</el-popconfirm> -->
<el-button type="primary" @click="submitForms">返回</el-button>
<el-button type="primary" v-if="props.hxid" @click="editForm">提交</el-button>
<el-button type="primary" v-else @click="submitForm">提交</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import "./components/ele.dark.style.css";
import "@/assets/styles/c_style.scss"
import { ref, reactive, onMounted, getCurrentInstance, computed } from 'vue';
import { addAirLine_c, eidtAirLine_c, getLineListDetial_c,getPlottingByUuid,API_POST_ADD_PLOT_WEB } from "./api";
import type { DrawingResult } from './components/DrawingTool';
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps<{
importFromFile: (file: File, options: any) => Promise<string[]>;
importAirspaceData: (data: any[], options: any) => string[];
getImportStatistics: () => { total: number; circles: number; polygons: number };
id:string;
hxid:string;
isDrawing: boolean;
currentDrawingType: string | null;
drawings: Map<string, DrawingResult>;
selectedDrawing: string | null;
drawingInfo: any;
drawingOptions: any;
getDrawingStatus: () => string;
getDrawingInfoText: () => string;
isEditing: boolean;
editingDrawing: any;
startCircleDrawing: () => void;
startPolygonDrawing: () => void;
cancelDrawing: () => void;
startEditing: (id: string) => void;
finishEditing: () => void;
cancelEditing: () => void;
selectDrawing: (id: string) => void;
removeDrawing: (id: string) => void;
flyToDrawing: (id: string) => void;
exportAllToJSON: () => void;
clearAllDrawings: () => void;
}>();
const emit = defineEmits<{
'start-circle-drawing': [];
'start-polygon-drawing': [];
'cancel-drawing': [];
'select-drawing': [id: string];
'deselect-drawing': [];
'remove-drawing': [id: string];
'clear-drawings': [];
'fly-to-drawing': [id: string];
'update-circle-option': [key: string, value: any];
'update-polygon-option': [key: string, value: any];
'copy-drawing-info': [];
'fly-to-selected-drawing': [id: string];
'print-selected-drawing-info': [];
'print-all-drawings-info': [];
'print-drawing-info': [id: string];
'export-drawing-info': [id: string];
'export-drawing': [id: string];
'start-editing': [id: string];
'finish-editing': [];
'cancel-editing': [];
'setShowType':[id: string];
}>();
// const { proxy } = getCurrentInstance();
// const props = defineProps(["id", 'hxid'])
// const emit = defineEmits(["setShowType"])
//表单数据
const formRef = ref(null)
const form = reactive({
// airlineName: '',
airlineType: 0,
waypointCount: '',
length: '',
expectedTime: '',
flyToWaylineMode: 'safely',
alt: 0,
heightType: 'relativeToStartPoint',
// height: 0,
// speed: 1,
waypointHeadingMode: 'followWayline',
gimbalPitchMode: 'manual',
waypointTurnMode: 'coordinateTurn',
executionType: 'goHome',
uavType: '',
uavPTZ: '',
storageType: ['wide', 'zoom', 'ir'],
hightMax: '',
hightMin: '',
lat: '',
lng: '',
militaryAreaName: '',
militaryAreaId: null,
name: '',
flightRule: '',
airspaceType: '',
airspaceProp: '',
radLength: '',
startTime: null,
endTime: null,
planBeg: null,
planEnd: null,
uuid: null
})
//
// 表单校验
const rules = reactive({
name: [{ required: true, message: '请输入名称' },],
militaryAreaName: [{ required: true, message: '请选择所属战区' },],
airspaceType: [{ required: true, message: '请选择空域类型' },],
airspaceProp: [{ required: true, message: '请选择空域性质' },],
flightRule: [{ required: true, message: '请选择飞行规则' },],
})
//表单提交方法
const submitForm = async () => {
const importedIds = await handlePrintAllDrawingsInfo();
formRef.value.validate(async (valid) => {
if (valid) {
// form.itemId = props.id
// form.uuid =mapWork.kyuuid
// console.log("form.uuID",form.uuid)
addAirLine_c(form).then((res) => {
if (res.code === 200) {
// proxy.$message.success("添加成功");
ElMessage.success('添加成功')
toList()
} else {
// proxy.$message.error(res.message);
}
});
} else {
return false;
}
});
}
const submitForms = () => {
toList()
}
// 修改保存
const editForm = () => {
handlePrintAllDrawingsInfo();
formRef.value.validate(async (valid) => {
if (valid) {
// form.uuid =mapWork.kyuuid
// console.log("form.uuID",form.uuid)
eidtAirLine_c(form).then((res) => {
if (res.code === 200) {
ElMessage.success('修改成功')
// proxy.$message.success("修改成功");
toList()
} else {
ElMessage({ message: res.message, type: 'error' })
// proxy.$message.error(res.message);
}
});
} else {
return false;
}
});
}
const clearAllDrawings = () => {
emit('clear-drawings');
};
// 方法实现
const startCircleDrawing = () => {
console.log("圆形空域")
emit('start-circle-drawing');
};
const startPolygonDrawing = () => {
console.log("多边形空域")
emit('start-polygon-drawing');
};
const cancelDrawing = () => {
emit('cancel-drawing');
};
// 打印方法
const handlePrintSelectedDrawingInfo = () => {
console.log('点击了打印选中空域按钮');
emit('print-selected-drawing-info');
};
const handlePrintAllDrawingsInfo = () => {
console.log('点击了保存选中空域按钮');
emit('print-all-drawings-info');
};
const handlePrintDrawingInfo = (id: string) => {
console.log('点击了打印空域信息按钮:', id);
emit('print-drawing-info', id);
};
const handleExportSelectedDrawingInfo = () => {
console.log('点击了导出空域信息按钮');
emit('export-drawing-info');
};
const clear = () => {
// mapWork.resethangxian()
clearAllDrawings()
console.log("清除地图")
}
// 返回列表
const toList = () => {
console.log("重置地图")
clearAllDrawings()
emit('setShowType', 'routeList', props.id)
}
// 无人机下拉列表
const slectUavTypeList = [{ name: 'M30 系列', value: '67' }, { name: 'Mavic 3 行业系列', value: '77' }]
const slectmilitaryAreaList = [{ name: '东部战区', value: '1' }, { name: '南部战区', value: '2' }, { name: '西部战区', value: '3' }, { name: '北部战区', value: '4' }, { name: '中部战区', value: '5' }]
const slectAirspaceTypeList = [{ name: '圆形空域', value: '1' }, { name: '多边形空域', value: '2' }]
const slectFlightRuleList = [{ name: 'VFR', value: '1' }, { name: 'IFR', value: '2' }]
const slectAirspacePropList = [{ name: '固定空域', value: '1' }, { name: '临时空域', value: '2' }]
const fileInput = ref<HTMLInputElement>();
const selectedFile = ref<File | null>(null);
const jsonInput = ref('');
const isImporting = ref(false);
const importResult = ref<any>(null);
const importOptions = ref({
autoZoom: true,
mergeExisting: false
});
// 获取详情
const getDetial = (id) => {
getLineListDetial_c(id).then((res) => {
if (res.code === 200) {
Object.assign(form, res.data)
console.log("返回的经纬度",res.data.lat)
console.log("返回的UUID",res.data.uuid)
getPlotting(res.data.uuid)
}
});
}
const getPlotting = (id) => {
getPlottingByUuid(id).then((res) => {
if (res.code == 200) {
console.log("返回的数据0:",res)
console.log("返回的数据1:",res.data[0].data)
const jsonData = res.data[0].data
console.log("此间数据如下111："+jsonData.id)
jsonInput.value = jsonData;
if (!jsonInput.value.trim()) return;
isImporting.value = true;
importResult.value = null;
try {
console.log("jsonInput.value:",jsonInput.value)
const data = JSON.parse(jsonInput.value);
console.log("data:",data)
const importedIds = props.importAirspaceData(data, importOptions.value);
const statistics = props.getImportStatistics();
importResult.value = {
success: true,
message: `成功导入 ${importedIds.length} 个空域`,
importedIds,
statistics
};
// emit('import-complete', importResult.value);
} catch (error) {
importResult.value = {
success: false,
message: `JSON解析失败: ${error}`
};
} finally {
isImporting.value = false;
}
console.log("返回的数据:",res.data)
} else {
ElMessage({ message: res.message, type: 'error' })
// proxy.$message.error(res.msg);
}
});
}
onMounted(() => {
if (props.hxid) {
getDetial(props.hxid)
}
})
</script>
<style lang="scss" scoped>
.el-container {
position: absolute;
left: 0;
top: 0;
right: auto;
bottom: 70px;
z-index: 1001;
width: 420px;
height: auto;
background: rgba(29, 37, 50, 0.85);
.el-header,
.el-footer {
background: transparent;
}
.title {
font-size: 16px;
font-weight: bold;
color: white;
}
.addBtn {
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
.editBtn {
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
cursor: pointer;
background: #414243;
&:hover {
opacity: 0.8;
}
}
}
.displayFlex {
border-bottom: 1px solid #414243;
.contentDom {
padding: 15px 0;
}
&:last-child {
border-bottom: none;
.contentDom {
padding-bottom: 0;
}
}
&:first-child {
.contentDom {
padding-top: 0;
}
}
li {
line-height: 22px;
}
}
</style>

232
src/views/cesiums/RouteGet.vue
View File

@ -65,6 +65,13 @@ import "./components/ele.dark.style.css";
import "@/assets/styles/c_style.scss"
import { eidtAirLine_c, getLineListDetial_c,getPlottingByUuid } from "./api.js";
import type { DrawingResult } from './components/DrawingTool';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useDrawingManager } from './components/useDrawingManager';
import { useCesium } from './components/useCesium';
// 初始化 Cesium
// const { viewer, viewTool, markerTool, modelTool, coordinatePicker, drawingTool, isInitialized } = useCesium('cesiumContainer');
const props = defineProps<{
importFromFile: (file: File, options: any) => Promise<string[]>;
@ -133,7 +140,6 @@ const emit = defineEmits<{
//表单数据
const formRef = ref(null)
const form = reactive({
// airlineName: '',
airlineType: 0,
waypointCount: '',
length: '',
@ -177,17 +183,24 @@ const rules = reactive({
})
//表单提交方法
const submitForm = () => {
toList()
toList();
}
// 返回列表
const toList = () => {
console.log("重置地图")
// removeDrawing("drawing_1762762464013");
clearAllDrawings();
emit('setShowType', 'routeList', props.id)
}
// 无人机下拉列表
const slectUavTypeList = [{ name: 'M30 系列', value: '67' }, { name: 'Mavic 3 行业系列', value: '77' }]
const slectmilitaryAreaList = [{ name: '东部战区', value: '1' }, { name: '南部战区', value: '2' }, { name: '西部战区', value: '3' }, { name: '北部战区', value: '4' }, { name: '中部战区', value: '5' }]
const slectAirspaceTypeList = [{ name: '圆形空域', value: '1' }, { name: '多边形空域', value: '2' }]
const slectFlightRuleList = [{ name: 'VFR', value: '1' }, { name: 'IFR', value: '2' }]
const slectAirspacePropList = [{ name: '固定空域', value: '1' }, { name: '临时空域', value: '2' }]
@ -210,7 +223,7 @@ const getPlotting = (id) => {
console.log("返回的数据1:",res.data[0].data)
const jsonData = res.data[0].data
console.log("此间数据如下111："+jsonData)
console.log("此间数据如下111："+jsonData.id)
jsonInput.value = jsonData;
if (!jsonInput.value.trim()) return;
@ -249,6 +262,15 @@ const getPlotting = (id) => {
}
const removeDrawing = (id:string) => {
console.log("进入该炒作了")
emit('remove-drawing', id);
};
const clearAllDrawings = () => {
emit('clear-drawings');
};
// const emit = defineEmits<{
// 'import-complete': [result: any];
// }>();
@ -264,211 +286,9 @@ const importOptions = ref({
mergeExisting: false
});
// 触发文件选择
const triggerFileInput = () => {
fileInput.value?.click();
};
// 处理文件选择
const handleFileSelect = (event: Event) => {
const target = event.target as HTMLInputElement;
if (target.files && target.files[0]) {
selectedFile.value = target.files[0];
}
};
// 清除文件选择
const clearFile = () => {
selectedFile.value = null;
if (fileInput.value) {
fileInput.value.value = '';
}
};
// 执行文件导入
const executeFileImport = async () => {
if (!selectedFile.value) return;
isImporting.value = true;
importResult.value = null;
try {
const importedIds = await props.importFromFile(selectedFile.value, importOptions.value);
const statistics = props.getImportStatistics();
importResult.value = {
success: true,
message: `成功导入 ${importedIds.length} 个空域`,
importedIds,
statistics
};
// emit('import-complete', importResult.value);
} catch (error) {
importResult.value = {
success: false,
message: `导入失败: ${error}`
};
isImporting.value = false;
}
};
// 执行JSON导入
const executeJsonImport = () => {
if (!jsonInput.value.trim()) return;
isImporting.value = true;
importResult.value = null;
try {
console.log("jsonInput.value:",jsonInput.value)
const data = JSON.parse(jsonInput.value);
console.log("data:",data)
const importedIds = props.importAirspaceData(data, importOptions.value);
const statistics = props.getImportStatistics();
importResult.value = {
success: true,
message: `成功导入 ${importedIds.length} 个空域`,
importedIds,
statistics
};
// emit('import-complete', importResult.value);
} catch (error) {
importResult.value = {
success: false,
message: `JSON解析失败: ${error}`
};
} finally {
isImporting.value = false;
}
};
const loadData= () => {
API_GET_list().then((response) => {
if (response.code === 200) {
// message.success("图上标绘加载成功");
response.rows.forEach((item) => {
const jsonData = item.plottingJson
console.log("此间数据如下111："+jsonData)
jsonInput.value = jsonData;
if (!jsonInput.value.trim()) return;
isImporting.value = true;
importResult.value = null;
try {
console.log("jsonInput.value:",jsonInput.value)
const data = JSON.parse(jsonInput.value);
console.log("data:",data)
const importedIds = props.importAirspaceData(data, importOptions.value);
const statistics = props.getImportStatistics();
importResult.value = {
success: true,
message: `成功导入 ${importedIds.length} 个空域`,
importedIds,
statistics
};
// emit('import-complete', importResult.value);
} catch (error) {
importResult.value = {
success: false,
message: `JSON解析失败: ${error}`
};
} finally {
isImporting.value = false;
}
})
} else {
// message.error(response.msg);
}
}, error => {
// message.success("图上标绘加载失败");
});
executeJsonImport();
}
// 加载示例数据
const loadSampleData = () => {
const sampleData = [
{
id: 'sample_circle_1',
type: 'circle',
coordinates: {
center: {
longitude: 106.5516,
latitude: 29.5630,
height: 500
},
radius: 2000
},
properties: {
name: '示例圆形空域1',
color: '#FF6B6B',
outlineColor: '#C44D4D'
}
},
{
id: 'sample_circle_2',
type: 'circle',
coordinates: {
center: {
longitude: 106.5716,
latitude: 29.5730,
height: 500
},
radius: 1500
},
properties: {
name: '示例圆形空域2',
color: '#4ECDC4',
outlineColor: '#3AA39C'
}
},
{
id: 'sample_polygon_1',
type: 'polygon',
coordinates: [
{ longitude: 106.5400, latitude: 29.5500, height: 300 },
{ longitude: 106.5600, latitude: 29.5500, height: 300 },
{ longitude: 106.5600, latitude: 29.5700, height: 300 },
{ longitude: 106.5400, latitude: 29.5700, height: 300 }
],
properties: {
name: '示例多边形空域1',
color: '#45B7D1',
outlineColor: '#368EA6'
}
}
];
jsonInput.value = JSON.stringify(sampleData, null, 2);
};
// 格式示例
const formatExample = computed(() => {
return `{
"id": "airspace_001",
"type": "circle",
"coordinates": {
"center": {
"longitude": 106.5516,
"latitude": 29.5630,
"height": 500
},
"radius": 2000
},
"properties": {
"name": "禁飞区",
"color": "#FF0000"
}
}`;
});
</script>
<style lang="scss" scoped>

9
src/views/cesiums/api.js
View File

@ -100,6 +100,15 @@ export function getPlottingByUuid (data) {
})
}
// 标绘web-新增web
export function API_POST_ADD_PLOT_WEB(data) {
console.log("添加标绘数据：", data);
return request({
url: '/plot/addPlotWeb',
method: 'post',
data: data
})
}
/**
* 获取无人机类型

19
src/views/cesiums/components/DrawingTool.ts
View File

@ -53,7 +53,8 @@ export interface DrawingResult {
import { AirspaceEditor } from './AirspaceEditor';
import { map } from 'lodash-es';
import { Position } from '@element-plus/icons-vue/dist/types/index.js';
import { API_GET_list, API_GET_byId, API_DELETE_delPlotting, API_POST_addPlotting, API_PUT_updatePlotting,} from "../../../api/uav/plotting";
import { API_GET_list, API_GET_byId, API_DELETE_delPlotting, API_POST_addPlotting, API_PUT_updatePlotting} from "../../../api/uav/plotting";
import { addAirLine_c, eidtAirLine_c, getLineListDetial_c,getPlottingByUuid,API_POST_ADD_PLOT_WEB } from "../api";
export class DrawingTool {
@ -1304,12 +1305,19 @@ export class DrawingTool {
result.push(this.formatToCustomStructure(info));
}
console.log("result:",result);
console.log("result.id:",result[0].id);
console.log("result.type:",result[0].type);
// 转换为格式化的 JSON 字符串
const jsonString = JSON.stringify(result, null, 2);
let fromData = {
plottingJson: JSON.stringify(result)
}
let fromDatas = {
data: JSON.stringify(result),
plottingType:result[0].type,
uuid:result[0].id,
}
console.log("result 字符串:", jsonString);
API_POST_addPlotting(fromData).then((response) => {
if (response.code === 200) {
@ -1320,6 +1328,15 @@ export class DrawingTool {
}, error => {
// message.success("保存文件失败");
});
API_POST_ADD_PLOT_WEB(fromDatas).then((response) => {
if (response.code === 200) {
// proxy.success("保存文件成功");
} else {
// message.error(response.msg);
}
}, error => {
// message.success("保存文件失败");
});
return result;
}

56
src/views/cesiums/components/routeList.vue
View File

@ -82,10 +82,11 @@ import "./ele.dark.style.css";
import "@/assets/styles/c_style.scss"
import { ref,reactive, onMounted, getCurrentInstance } from 'vue';
import { API_PUT_archiveAirline, getLineList_c,API_PUT_removeAirline } from "../api";
const { proxy } = getCurrentInstance();
// const { proxy } = getCurrentInstance();
const props = defineProps(["id"])
const emit = defineEmits(["setShowType"])
import { ElMessage, ElMessageBox } from 'element-plus'
// 判断是否为列表页面
// 筛选条件
@ -118,7 +119,8 @@ const getLineList = () => {
tableData.list = res.rows;
tableData.total = res.total;
} else {
proxy.$message.error(res.message);
// proxy.$message.error(res.message);
ElMessage({ message: res.message, type: 'error' })
}
});
@ -129,42 +131,46 @@ const toList = () => {
}
// 编辑
const getDetial = (id) => {
console.log('setShowType:routeAdd')
emit('setShowType', 'routeAdd', props.id, id)
}
// 获取详情
const getDetials = (id) => {
console.log('setShowType:routeGet')
emit('setShowType', 'routeGet', props.id, id)
}
// 归档
const handleTask = async (row) => { //归档事件
const id = row.id;
const idName = row.airlineName
proxy.$confirm('是否确认归档空域"' + idName + '"', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return API_PUT_archiveAirline(id);
}).then(() => {
getLineList()
proxy.$message.success(`归档成功`)
}).catch(function () { return false });
}
// 删除
const handleDel = async (row) => { //删除事件
const id = row.id;
const idName = row.name
proxy.$confirm('是否确认删除空域"' + idName + '"', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(function () {
return API_PUT_removeAirline(id);
ElMessageBox.confirm('是否确认删除空域"' + idName + '"', '确认', {
distinguishCancelAndClose: true,
confirmButtonText: '保存',
cancelButtonText: '放弃',
type:"warning"
})
.then(() => {
return API_PUT_removeAirline(id);
}).then(() => {
getLineList()
proxy.$message.success(`删除成功`)
}).catch(function () { return false });
ElMessage.success('删除成功')
})
.catch((action: string) => {
if (action === 'cancel') {
ElMessage.info('已放弃删除')
}
})
// proxy.$confirm('是否确认删除空域"' + idName + '"', "提示", {
// confirmButtonText: "确定",
// cancelButtonText: "取消",
// type: "warning"
// }).then(function () {
// return API_PUT_removeAirline(id);
// }).then(() => {
// getLineList()
// proxy.$message.success(`删除成功`)
// }).catch(function () { return false });
}
const router = useRouter()

1
src/views/cesiums/components/useDrawingManager.ts
View File

@ -218,6 +218,7 @@ export function useDrawingManager(drawingTool: any) { // 修改参数类型为 a
// 移除图形
const removeDrawing = (id: string): void => {
console.log("执行了删除计划:")
const tool = drawingTool?.value;
if (tool && tool.removeDrawing(id)) {
drawings.delete(id);

3
src/views/login.vue
View File

@ -113,7 +113,8 @@ function handleLogin() {
}
// 调用action的登录方法
userStore.login(loginForm.value).then(() => {
router.push({ path: redirect.value || "/redirect" });
router.push({ path: redirect.value || "/common/cesiums" });
// router.push({ path: redirect.value || "/redirect" });
}).catch(() => {
loading.value = false;
// 重新获取验证码