媒体库-作业区域-可测试版（自定义禁降区未实装）

src/api/demo/mediaLibrary.ts

@@ -0,0 +1,40 @@
+import { defHttp } from '@/utils/http/axios';
+enum Api {
+  // 获取地图作业区域列表
+  GetWorkAreaList = '/api/Manage/GetWorkAreaList',
+  // 添加地图作业区域
+  AddWorkArea = '/api/Manage/AddWorkArea',
+  // 更新地图作业区域
+  UpdateWorkArea = '/api/Manage/UpdateWorkArea',
+  // 删除地图作业区域
+  DeleteWorkArea = '/api/Manage/DeleteWorkArea',
+}
+
+// 获取地图作业区域列表
+export function GetWorkAreaList(params) {
+  return defHttp.get({
+    url: Api.GetWorkAreaList,
+    params
+  });
+}
+// 添加地图作业区域
+export function AddWorkArea(params) {
+  return defHttp.post({
+    url: Api.AddWorkArea,
+    data:params
+  });
+}
+// 更新地图作业区域
+export function UpdateWorkArea(params) {
+return defHttp.post({
+    url: Api.UpdateWorkArea,
+    data:params
+});
+}
+// 删除地图作业区域
+export function DeleteWorkArea(params) {
+return defHttp.post({
+    url: Api.DeleteWorkArea + '?id=' + params.id,
+    data:params
+});
+}

src/components/MapboxMaps/src/WktGeojsonTransform.ts

@@ -3,20 +3,20 @@ import { wktToGeoJSON,geojsonToWKT  } from "@terraformer/wkt"
 
 
 const wktCollectionToGeoJson = (wktStr) => {
-  console.log("wktStr",wktStr);
+  // console.log("wktStr",wktStr);
   let geojson = WKT.parse(wktStr);
-  console.log("geojson",geojson);
+  // console.log("geojson",geojson);
 }
 
 const WktToGeojson = (wktData)=> {
     // return WKT.parse(wktData)
-    console.log("wktData",wktData);
+    // console.log("wktData",wktData);
     return wktToGeoJSON(wktData);
 }
 
 const GeojsonToWkt = (geojsonData)=> {
     // return WKT.convert(geojsonData)
-    console.log("geojsonData",geojsonData)
+    // console.log("geojsonData",geojsonData)
     return geojsonToWKT(geojsonData)
 }
 

src/views/demo/system/mediaLibrary/path/index.vue

@@ -24,6 +24,7 @@
         @setNowShowMarkData="setNowShowMarkData"
         @setNowShowImageData="setNowShowImageData"
         @setNowShowAreaData="setNowShowAreaData"
+        @setAllAreaData="setAllAreaData"
         @deleteMark="deleteMark"
         @deleteArea="deleteArea"
       />
@@ -41,6 +42,9 @@
         @setNowShowMarkData="setNowShowMarkData"
         @setNowShowImageData="setNowShowImageData"
         @setNowShowAreaData="setNowShowAreaData"
+        @setAllMarkData="setAllMarkData"
+        @setAllImageData="setAllImageData"
+        @setAllAreaData="setAllAreaData"
         @closePathImageInfo="closePathImageInfo"
       />
     </div>
@@ -85,6 +89,13 @@
   import markJson from './json/mark.json';
   import areaJson from './json/area.json';
   import imageJson from './json/image.json';
+  import {
+    GetWorkAreaList,
+    AddWorkArea,
+    UpdateWorkArea,
+    DeleteWorkArea,
+  } from '@/api/demo/mediaLibrary';
+  import { WktToGeojson, GeojsonToWkt } from '@/components/MapboxMaps/src/WktGeojsonTransform';
   import { useMessage } from '@/hooks/web/useMessage';
   const { createMessage, createConfirm } = useMessage();
 
@@ -166,28 +177,41 @@
   function closePathAreaInfo() {
     areaInfoShow.value = false;
     nowShowAreaData.value = {};
+    pathMapRef.value.areaRestoreDefault();
   }
   // 当前展示的区域信息
   const nowShowAreaData = ref();
-  const allAreaDataList = ref(areaJson);
+  const allAreaDataList: any = ref(areaJson);
 
   // 设置当前展示的区域信息
-  function setNowShowAreaData(value) {
+  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();
+  }
   // 删除区域
-  function deleteArea(value) {
-    allAreaDataList.value = cloneDeep(allAreaDataList.value).filter((item) => item.id != value.id);
-    areaInfoShow.value = false;
-    nowShowAreaData.value = {};
-    setTimeout(() => {
-      pathLeftMenuRef.value.updateShowMenuInfoList('地图作业区域');
-    }, 50);
+  async function deleteArea(value) {
+    DeleteWorkArea({
+      id: value.id,
+    }).then((result) => {
+      if (result) {
+        // 刷新
+        getWorkAreaList();
+        areaInfoShow.value = false;
+        nowShowAreaData.value = {};
+      }
+    });
   }
 
   // 右侧图片是否显示----------------------------------------------------
@@ -222,7 +246,49 @@
     pathMapRef.value.handlerLocation([position.lng, position.lat]);
   }
 
+  // 查询地图工作区域
+  async function getWorkAreaList() {
+    allAreaDataList.value = await GetWorkAreaList({ workspaceid: 1 });
+    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;
+    });
+    setTimeout(() => {
+      pathLeftMenuRef.value.updateShowMenuInfoList('地图作业区域');
+    }, 50);
+  }
+
+  // 获取WKT类型
+  function getGeomType(area) {
+    let geom = area.geom;
+    let radiusFlag = area.properties.indexOf('radius') > -1 ? true : false;
+    // 点
+    if (geom.indexOf('POINT Z') > -1 && !radiusFlag) {
+      return 'Point';
+    }
+    // 线
+    if (geom.indexOf('LINESTRING Z') > -1 && !radiusFlag) {
+      return 'Polyline';
+    }
+    // 多边形
+    if (geom.indexOf('MULTIPOLYGON Z') > -1 && !radiusFlag) {
+      return 'Polygon';
+    }
+    // 圈
+    if (geom.indexOf('MULTIPOLYGON Z') > -1 && radiusFlag) {
+      return 'Circle';
+    }
+  }
+
   onMounted(() => {
+    // 查询地图工作区域
+    getWorkAreaList();
     nowShowMarkData.value = markJson[1];
   });
 </script>

src/views/demo/system/mediaLibrary/path/pathAreaInfo.vue

@@ -6,13 +6,13 @@
       </a-col>
       <a-col :span="24">
         <div class="markTitle">
-          <!-- 自定义限飞区 -->
+          <!-- 自定义禁降区 -->
           <div
             v-if="props.nowShowAreaData.type == 'noland'"
             :style="{
               width: '15px',
               height: '15px',
-              background: `linear-gradient(to bottom right, transparent 45%, ${props.nowShowAreaData.content.properties.color} 45%, ${props.nowShowAreaData.content.properties.color} 60%, transparent 60%), #ffffff00`,
+              background: `linear-gradient(to bottom right, transparent 45%, #FF9900 45%, #FF9900 60%, transparent 60%), #ffffff00`,
               'margin-left': '2px',
               'margin-right': '12px',
             }"
@@ -23,25 +23,23 @@
             :style="{
               width: '13px',
               height: '13px',
-              outline: `2px solid ${props.nowShowAreaData.content.properties.color}`,
+              outline: `2px solid #00FF00`,
               'margin-left': '2px',
               'margin-right': '12px',
-              'border-radius':
-                props.nowShowAreaData.content.geometry.type == 'Circle' ? '6.5px' : '0px',
+              'border-radius': props.nowShowAreaData.geomtype == 'Circle' ? '6.5px' : '0px',
             }"
           />
-          <!-- 自定义禁降区 -->
+          <!-- 自定义限飞区 -->
           <div
             v-if="props.nowShowAreaData.type == 'nfz'"
             :style="{
               width: '13px',
               height: '13px',
-              outline: `2px solid ${props.nowShowAreaData.content.properties.color}`,
-              background: `${props.nowShowAreaData.content.properties.color}55`,
+              outline: `2px solid #FF0000`,
+              background: `#FF000055`,
               'margin-left': '2px',
               'margin-right': '12px',
-              'border-radius':
-                props.nowShowAreaData.content.geometry.type == 'Circle' ? '6.5px' : '0px',
+              'border-radius': props.nowShowAreaData.geomtype == 'Circle' ? '6.5px' : '0px',
             }"
           />
           <a-input v-model:value="nowAreaData.name" style="width: 65%" size="small"></a-input>
@@ -73,7 +71,7 @@
       </a-col>
       <a-col :span="18">
         <div class="markContent">
-          {{ props.nowShowAreaData.status == 'enable' ? '已启用' : '已禁用' }}
+          {{ props.nowShowAreaData.state == 0 ? '已启用' : '已禁用' }}
         </div>
       </a-col>
       <!-- 水平距离 -->
@@ -81,33 +79,29 @@
         <div class="markTitle">水平距离</div>
       </a-col>
       <a-col :span="18" v-if="props.nowShowAreaData.type == 'noland'">
-        <div class="markContent"> {{ distance.toFixed(1) }}m</div>
+        <div class="markContent"> {{ nowAreaData.length.toFixed(1) }}m</div>
       </a-col>
       <!-- 水平面积 -->
       <a-col :span="6">
         <div class="markTitle">水平面积</div>
       </a-col>
       <a-col :span="18">
-        <div class="markContent"> {{ area.toFixed(2) }}㎡</div>
+        <div class="markContent"> {{ nowAreaData.area.toFixed(2) }}㎡</div>
       </a-col>
       <!-- 水平周长 -->
-      <a-col :span="6" v-if="props.nowShowAreaData.content.geometry.type == 'Polygon'">
+      <a-col :span="6" v-if="props.nowShowAreaData.geomtype == 'Polygon'">
         <div class="markTitle">水平周长</div>
       </a-col>
-      <a-col :span="18" v-if="props.nowShowAreaData.content.geometry.type == 'Polygon'">
-        <div class="markContent"> {{ distance2 }}m</div>
+      <a-col :span="18" v-if="props.nowShowAreaData.geomtype == 'Polygon'">
+        <div class="markContent"> {{ nowAreaData.length.toFixed(1) }}m</div>
       </a-col>
       <!-- 半径 -->
-      <a-col :span="6" v-if="props.nowShowAreaData.content.geometry.type == 'Circle'">
+      <a-col :span="6" v-if="props.nowShowAreaData.geomtype == 'Circle'">
         <div class="markTitle">半径</div>
       </a-col>
-      <a-col :span="18" v-if="props.nowShowAreaData.content.geometry.type == 'Circle'">
+      <a-col :span="18" v-if="props.nowShowAreaData.geomtype == 'Circle'">
         <div class="markContent">
-          <a-input
-            v-model:value="nowAreaData.content.geometry.radius"
-            style="width: 100%"
-            size="small"
-          >
+          <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>
@@ -120,19 +114,19 @@
         <div class="markContent">
           <div
             class="button"
-            :class="{ disabled: nowAreaData.content.properties.width == 10 }"
+            :class="{ disabled: nowAreaData.properties.width == 10 }"
             @click="removeRecordNum"
           >
             <MinusOutlined style="font-size: 20px; color: #ffffff" />
           </div>
           <div class="numDiv">
             <span v-if="!numInputFlag" class="numSpan" @click="focusInput">
-              {{ nowAreaData.content.properties.width }}
+              {{ nowAreaData.properties.width }}
             </span>
             <a-input
               v-if="numInputFlag"
               ref="focusInputRef"
-              v-model:value="nowAreaData.content.properties.width"
+              v-model:value="nowAreaData.properties.width"
               style="width: 50%"
               @blur="blurInput"
               @keypress.enter="blurInput"
@@ -141,7 +135,7 @@
           </div>
           <div
             class="button"
-            :class="{ disabled: nowAreaData.content.properties.width == 100 }"
+            :class="{ disabled: nowAreaData.properties.width == 100 }"
             @click="addRecordNum"
           >
             <PlusOutlined style="font-size: 20px; color: #ffffff" />
@@ -153,7 +147,7 @@
         <div class="markTitle">绘制者</div>
       </a-col>
       <a-col :span="18">
-        <div class="markContent"> {{ props.nowShowAreaData.created_nickname }}</div>
+        <div class="markContent"> {{ props.nowShowAreaData.createdUser }}</div>
       </a-col>
       <a-col :span="24">
         <div class="area_buttons">
@@ -182,7 +176,15 @@
     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']);
   const emits = defineEmits([
@@ -193,6 +195,16 @@
   ]);
   const nowAreaData: any = ref(props.nowShowAreaData);
 
+  watch(
+    () => nowAreaData.value,
+    () => {
+      emits('setNowShowAreaData', nowAreaData.value, false);
+    },
+    {
+      deep: true,
+    },
+  );
+
   // 宽度----------------------------------------------------------------------
   const numInputFlag = ref(false);
   const focusInputRef = ref();
@@ -209,40 +221,40 @@
   function blurInput() {
     numInputFlag.value = false;
     // 检测是否是数字
-    if (/^-?\d+(\.\d+)?$/.test(nowAreaData.value.content.properties.width.toString())) {
-      if (nowAreaData.value.content.properties.width > 100) {
+    if (/^-?\d+(\.\d+)?$/.test(nowAreaData.value.properties.width.toString())) {
+      if (nowAreaData.value.properties.width > 100) {
         // 不能大于100
-        nowAreaData.value.content.properties.width = 100;
-      } else if (nowAreaData.value.content.properties.width < 10) {
+        nowAreaData.value.properties.width = 100;
+      } else if (nowAreaData.value.properties.width < 10) {
         // 不能小于10
-        nowAreaData.value.content.properties.width = 10;
+        nowAreaData.value.properties.width = 10;
       } else {
         // 保存小数点后两位
-        let newnum = cloneDeep(nowAreaData.value.content.properties.width);
-        nowAreaData.value.content.properties.width = parseFloat(parseFloat(newnum).toFixed(2));
+        let newnum = cloneDeep(nowAreaData.value.properties.width);
+        nowAreaData.value.properties.width = parseFloat(parseFloat(newnum).toFixed(2));
       }
     } else {
       // 不是数字
-      nowAreaData.value.content.properties.width = 10;
+      nowAreaData.value.properties.width = 10;
     }
   }
   // 宽度-减少
   function removeRecordNum() {
-    let newnum = cloneDeep(nowAreaData.value.content.properties.width);
+    let newnum = cloneDeep(nowAreaData.value.properties.width);
     if (newnum == 10) {
       return;
     }
     newnum -= 5;
-    nowAreaData.value.content.properties.width = parseFloat(newnum.toFixed(2));
+    nowAreaData.value.properties.width = parseFloat(newnum.toFixed(2));
   }
   // 宽度-增加
   function addRecordNum() {
-    let newnum = cloneDeep(nowAreaData.value.content.properties.width);
+    let newnum = cloneDeep(nowAreaData.value.properties.width);
     if (newnum == 100) {
       return;
     }
     newnum += 5;
-    nowAreaData.value.content.properties.width = parseFloat(newnum.toFixed(2));
+    nowAreaData.value.properties.width = parseFloat(newnum.toFixed(2));
   }
 
   // 关闭
@@ -251,52 +263,28 @@
   }
   // 移动到中心位置
   function handlerLocation() {
-    let coordinates = props.nowShowAreaData.content.geometry.coordinates;
-    if (props.nowShowAreaData.content.geometry.type == 'Circle') {
+    if (props.nowShowAreaData.geomtype == 'Circle') {
       emits('handlerLocation', {
-        lng: coordinates[0],
-        lat: coordinates[1],
+        lng: props.nowShowAreaData.properties.centerPoint[0],
+        lat: props.nowShowAreaData.properties.centerPoint[1],
       });
     } else {
       emits('handlerLocation', {
-        lng: coordinates[0][0][0],
-        lat: coordinates[0][0][1],
+        lng: props.nowShowAreaData.properties.centerPoint[0],
+        lat: props.nowShowAreaData.properties.centerPoint[1],
       });
     }
   }
   // 删除此区域
   function deleteArea() {
-    emits('deleteArea', props.nowShowAreaData);
-  }
-
-  // 水平距离
-  const distance = ref(0);
-  async function getDistance() {
-    distance.value = mars3d.MeasureUtil.getSurfaceDistance(
-      props.nowShowAreaData.content.geometry.coordinates[0],
-    );
-  }
-
-  // 水平面积
-  const area = ref(0);
-  async function getArea() {
-    if (props.nowShowAreaData.content.geometry.type == 'Circle') {
-      let radius = props.nowShowAreaData.content.geometry.radius;
-      area.value = Math.PI * radius * radius;
-    } else {
-      area.value = mars3d.MeasureUtil.getSurfaceArea(
-        props.nowShowAreaData.content.geometry.coordinates[0],
-      );
-    }
-  }
-
-  // 水平周长
-  const distance2 = ref(0);
-  async function getDistance2() {
-    distance.value = mars3d.MeasureUtil.getDistance(
-      props.nowShowAreaData.content.geometry.coordinates[0],
-      true,
-    );
+    createConfirm({
+      iconType: 'info',
+      title: '提示',
+      content: '将会影响到项目内设备的作业范围，是否删除该区域？',
+      onOk: async () => {
+        emits('deleteArea', props.nowShowAreaData);
+      },
+    });
   }
 
   watch(
@@ -304,14 +292,14 @@
     () => {
       nowAreaData.value = props.nowShowAreaData;
       // 水平面积
-      getArea();
+      // getArea();
       if (props.nowShowAreaData.type == 'noland') {
         // 水平距离
-        getDistance();
+        // getDistance();
       }
-      if (props.nowShowAreaData.content.geometry.type == 'Polygon') {
+      if (props.nowShowAreaData.geomtype == 'Polygon') {
         // 水平距离
-        getDistance2();
+        // getDistance();
       }
     },
     {

src/views/demo/system/mediaLibrary/path/pathLeftMenu.vue

@@ -89,28 +89,17 @@
               <a-select-option value="noland">全部禁降区</a-select-option>
             </a-select>
             <a-select
-              v-model:value="areastatus"
+              v-model:value="areastate"
               style="width: 120px"
               @change="handleChangeAreaSelect"
             >
               <a-select-option value="all">全部状态</a-select-option>
-              <a-select-option value="enable">已启用</a-select-option>
-              <a-select-option value="disable">已禁用</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"
-            @mouseenter="
-              show.mouse = true;
-              show.deleteClickNum = 0;
-            "
-            @mouseleave="
-              show.mouse = false;
-              show.deleteClickNum = 0;
-            "
-          >
+          <div v-for="show in showMenuInfoList" :key="show.id">
             <!-- 地图标注 -->
             <div
               v-if="showMenuInfoName == '地图标注'"
@@ -123,20 +112,31 @@
                       ? '#393939'
                       : '',
               }"
+              @mouseenter="
+                show.mouse = true;
+                show.deleteClickNum = 0;
+              "
+              @mouseleave="
+                show.mouse = false;
+                show.deleteClickNum = 0;
+              "
             >
               <div @click="setNowShowMarkData(show)">
-                <AntDesignOutlined v-if="show.resource.type == '0'" />
-                <ExpandAltOutlined v-if="show.resource.type == '1'" />
-                <BorderOutlined v-if="show.resource.type == '2'" />
-                <LogoutOutlined v-if="show.resource.type == '3'" />
+                <AntDesignOutlined v-if="show.type == '0'" />
+                <ExpandAltOutlined v-if="show.type == '1'" />
+                <BorderOutlined v-if="show.type == '2'" />
+                <LogoutOutlined v-if="show.type == '3'" />
               </div>
               <div
                 class="eye"
-                @click="show.status = !show.status"
-                :style="{ background: show.status ? '#2d8cf0' : '#000000' }"
+                @click="show.status == 0 ? (show.status = 1) : (show.status = 0)"
+                :style="{ background: show.status == 1 ? '#2d8cf0' : '#000000' }"
               >
-                <EyeOutlined v-if="show.status" style="color: #ffffff; font-size: 16px" />
-                <EyeInvisibleOutlined v-if="!show.status" style="color: #ffffff; font-size: 16px" />
+                <EyeOutlined v-if="show.status == 1" style="color: #ffffff; font-size: 16px" />
+                <EyeInvisibleOutlined
+                  v-if="show.status == 0"
+                  style="color: #ffffff; font-size: 16px"
+                />
               </div>
               <div @click="setNowShowMarkData(show)">{{ show.name }}</div>
               <div class="buttonRight2" v-if="show.mouse">
@@ -260,33 +260,35 @@
                   props.nowShowAreaData && props.nowShowAreaData.id == show.id
                     ? '2px solid #2D8CF0'
                     : '',
-                background:
-                  props.nowShowAreaData && show.status == 'enable' ? '#3c3c3c' : '#3c3c3c55',
+                background: props.nowShowAreaData && show.state == 0 ? '#3c3c3c' : '#3c3c3c55',
               }"
             >
-              <div
-                class="name"
-                @click="setNowShowAreaData(show)"
-                :style="{
-                  color: show.status == 'enable' ? '#ffffff' : '#ffffff55',
-                }"
-              >
-                {{ show.name }}
-              </div>
+              <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.status == 'enable' ? '#ffffff' : '#ffffff55',
+                  color: show.state == 0 ? '#ffffff' : '#ffffff55',
                 }"
               >
-                <!-- 自定义限飞区 -->
+                <!-- 自定义禁降区 -->
                 <div
                   v-if="show.type == 'noland'"
                   :style="{
                     width: '15px',
                     height: '15px',
-                    background: `linear-gradient(to bottom right, transparent 45%, ${show.content.properties.color} 45%, ${show.content.properties.color} 60%, transparent 60%), #ffffff00`,
+                    background: `linear-gradient(to bottom right, transparent 45%, #FF9900 45%, #FF9900 60%, transparent 60%), #ffffff00`,
                     'margin-right': '6px',
                   }"
                 />
@@ -296,27 +298,27 @@
                   :style="{
                     width: '13px',
                     height: '13px',
-                    outline: `2px solid ${show.content.properties.color}`,
+                    outline: `2px solid #00FF00`,
                     'margin-right': '6px',
-                    'border-radius': show.content.geometry.type == 'Circle' ? '6.5px' : '0px',
+                    'border-radius': show.geomtype == 'Circle' ? '6.5px' : '0px',
                   }"
                 />
-                <!-- 自定义禁降区 -->
+                <!-- 自定义限飞区 -->
                 <div
                   v-if="show.type == 'nfz'"
                   :style="{
                     width: '13px',
                     height: '13px',
-                    outline: `2px solid ${show.content.properties.color}`,
-                    background: `${show.content.properties.color}55`,
+                    outline: `2px solid #FF0000`,
+                    background: `#FF000055`,
                     'margin-right': '6px',
-                    'border-radius': show.content.geometry.type == 'Circle' ? '6.5px' : '0px',
+                    'border-radius': show.geomtype == 'Circle' ? '6.5px' : '0px',
                   }"
                 />
                 <span>{{ getType(show.type) }}</span>
               </div>
               <div class="buttonlist">
-                <div class="button" v-if="show.status == 'disable'">
+                <div class="button" v-if="show.state == 1">
                   <a-popconfirm
                     title="将会影响到项目内设备的作业范围，是否启用该区域？"
                     ok-text="启用"
@@ -332,7 +334,7 @@
                     </a-tooltip>
                   </a-popconfirm>
                 </div>
-                <div class="button" v-if="show.status == 'enable'">
+                <div class="button" v-if="show.state == 0">
                   <a-popconfirm
                     title="将会影响到项目内设备的作业范围，是否禁用该区域？"
                     ok-text="禁用"
@@ -386,7 +388,7 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref } from 'vue';
+  import { ref, watch } from 'vue';
   import {
     CloseOutlined,
     AntDesignOutlined,
@@ -405,6 +407,12 @@
     CheckCircleOutlined,
     StopOutlined,
   } 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();
@@ -427,14 +435,13 @@
     'setNowShowMarkData',
     'setNowShowImageData',
     'setNowShowAreaData',
+    'setAllAreaData',
     'deleteMark',
     'deleteArea',
   ]);
   const showMenuInfoList = ref(props.allMarkDataList);
   const showMenuInfoName = ref('地图标注');
   function updateShowMenuInfoList(type) {
-    console.log(type);
-
     if (type == '地图标注') {
       showMenuInfoList.value = props.allMarkDataList;
     }
@@ -473,7 +480,7 @@
   // 地图作业区域-------------------------------------------------
   // 地图作业区域-单选
   const areatype = ref('all');
-  const areastatus = ref('all');
+  const areastate = ref('all');
   // 地图作业区域-获取类别区分
   function getType(type) {
     let name = '';
@@ -497,24 +504,49 @@
     if (areatype.value !== 'all') {
       filterAreaData = filterAreaData.filter((item) => item.type == areatype.value);
     }
-    if (areastatus.value !== 'all') {
-      filterAreaData = filterAreaData.filter((item) => item.status == areastatus.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,
-      status: 'enable',
+      state: 0,
+    });
+    UpdateWorkArea({
+      ...value,
+      // id: value.id,
+      // name: value.name,
+      // type: value.type,
+      properties: JSON.stringify(value.properties),
+      // geom: value.geom,
+      // workSpaceId: '1',
+      state: 0,
+    }).then((res) => {
+      emits('setAllAreaData');
     });
   }
   // 地图作业区域-禁用该区域
   function disableThisArea(value) {
     setNowShowAreaData({
       ...value,
-      status: 'disable',
+      state: 1,
+    });
+    UpdateWorkArea({
+      // id: value.id,
+      // name: value.name,
+      // type: value.type,
+      ...value,
+      properties: JSON.stringify(value.properties),
+      // geom: value.geom,
+      // workSpaceId: '1',
+      state: 1,
+    }).then((res) => {
+      emits('setAllAreaData');
     });
   }
   // 地图作业区域-删除此区域
@@ -538,52 +570,51 @@
   // ------------------------------------------------------------------
   // 移动到中心位置
   function handlerLocation(position) {
-    if (showMenuInfoName.value == '地图标注') {
-      let coordinates = position.resource.content.geometry.coordinates;
-      switch (position.resource.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 == '地图标注') {
+    //   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 == '地图作业区域') {
-      let coordinates = position.content.geometry.coordinates;
-      if (position.content.geometry.type == 'Circle') {
+      if (position.geomtype == 'Circle') {
         emits('handlerLocation', {
-          lng: coordinates[0],
-          lat: coordinates[1],
+          lng: position.properties.centerPoint[0],
+          lat: position.properties.centerPoint[1],
         });
       } else {
         emits('handlerLocation', {
-          lng: coordinates[0][0][0],
-          lat: coordinates[0][0][1],
+          lng: position.properties.centerPoint[0],
+          lat: position.properties.centerPoint[1],
         });
       }
     }
@@ -785,8 +816,12 @@
               left: 6px;
               color: #ffffff;
               font-size: 15px;
-              width: 240px;
-              height: 29px;
+              width: 90%;
+              height: 30px;
+
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
             }
             .type {
               position: absolute;