地图cesium的完善及空域优化

auto-imports.d.ts

@@ -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']

package.json

@@ -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",
+    "vite-plugin-vue-setup-extend": "0.4.0"
-    "less": "^4.1.3"
   }
 }

src/assets/styles/c_style.scss

@@ -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;
+}

src/views/cesiums/CesiumViewers.vue

@@ -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

src/views/cesiums/DrawingToolPanel.vue

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

src/views/cesiums/RouteAdd.vue

@@ -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>

src/views/cesiums/RouteGet.vue

@@ -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>

src/views/cesiums/api.js

@@ -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
+    })
+}
 
 /**
  * 获取无人机类型

src/views/cesiums/components/DrawingTool.ts

@@ -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;
   }
 

src/views/cesiums/components/routeList.vue

@@ -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 + '"', "提示", {
+    ElMessageBox.confirm('是否确认删除空域"' + idName + '"', '确认', {
-        confirmButtonText: "确定",
+        distinguishCancelAndClose: true,
-        cancelButtonText: "取消",
+        confirmButtonText: '保存',
-        type: "warning"
+        cancelButtonText: '放弃',
-    }).then(function () {
+        type:"warning"
+    })
+    .then(() => {
       return API_PUT_removeAirline(id);
     }).then(() => {
         getLineList()
-        proxy.$message.success(`删除成功`)
+        ElMessage.success('删除成功')
-    }).catch(function () { return false });
+    })
+    .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()

src/views/cesiums/components/useDrawingManager.ts

@@ -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);

src/views/login.vue

@@ -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;
         // 重新获取验证码