媒体库-历史路径展示、标注、作业区域-第三版

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

@@ -283,7 +283,6 @@
   import { columns, searchFormSchema } from './modal.data';
   import dayjs from 'dayjs';
   import { cloneDeep } from 'lodash-es';
-  import dataJson from './data.json';
 
   const { createConfirm, createMessage } = useMessage();
 
@@ -447,13 +446,6 @@
         // },
       ],
     },
-    {
-      id: '4',
-      name: '新建计划1 2025-06-11 16:28:23 (UTC+08)',
-      createtime: '2025-06-11 16:28:23',
-      type: 'folder',
-      children: dataJson,
-    },
     // {
     //   id: '4',
     //   name: '模型',

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

@@ -139,7 +139,7 @@
   const allMarkDataList = ref(markJson);
   // 设置当前展示的标注信息
   function setNowShowMarkData(value) {
-    if (value) {
+    if (value.id) {
       markInfoShow.value = true;
     } else {
       markInfoShow.value = false;
@@ -173,7 +173,7 @@
 
   // 设置当前展示的区域信息
   function setNowShowAreaData(value) {
-    if (value) {
+    if (value.id) {
       areaInfoShow.value = true;
     } else {
       areaInfoShow.value = false;
@@ -202,7 +202,7 @@
 
   // 设置当前展示的图片
   function setNowShowImageData(value) {
-    if (value) {
+    if (value.id) {
       imageInfoShow.value = true;
     } else {
       imageInfoShow.value = false;

src/views/demo/system/mediaLibrary/path/json/area.json

@@ -1,4 +1,31 @@
 [
+  {
+    "id": "84b09cdc-8138-461a-9008-2ac2fd2dabe1",
+    "name": "fence-2025-07-09 10:58",
+    "status": "enable",
+    "type": "dfence",
+    "content": {
+      "type": "Feature",
+      "geometry": {
+        "type": "Circle",
+        "radius": 25.98278531053457,
+        "coordinates": [
+          113.94260619946274,
+          22.581532991805254
+        ]
+      },
+      "properties": {
+        "color": "#00FF00"
+      }
+    },
+    "area_hash": "enable_dfence_602389930bf13745ad901786a991ee0a",
+    "created_time": 1752029923657,
+    "created_by": "1921832882836627456",
+    "created_nickname": "17854119262",
+    "updated_time": 1752029923657,
+    "updated_by": "1921832882836627456",
+    "updated_nickname": "17854119262"
+  },
   {
     "id": "f8a1ba2f-3d75-45e3-8c37-c305b8a8a18f",
     "name": "noland-2025-07-03 09:37",
@@ -43,82 +70,7 @@
     "created_time": 1751506632716,
     "created_by": "1921832882836627456",
     "created_nickname": "17854119262",
-    "updated_time": 1751506632716,
+    "updated_time": 1752051379960,
-    "updated_by": "1921832882836627456",
-    "updated_nickname": "17854119262"
-  },
-  {
-    "id": "4b312405-a1f9-4326-b7ad-f684912931c7",
-    "name": "fence-2025-07-03 09:36",
-    "status": "enable",
-    "type": "dfence",
-    "content": {
-      "type": "Feature",
-      "geometry": {
-        "type": "Circle",
-        "radius": 15.568918453415524,
-        "coordinates": [
-          113.94244540081064,
-          22.581260697110643
-        ]
-      },
-      "properties": {
-        "color": "#00FF00"
-      }
-    },
-    "area_hash": "enable_dfence_cec1fe6f1bdf6ba3de183332ec941336",
-    "created_time": 1751506620283,
-    "created_by": "1921832882836627456",
-    "created_nickname": "17854119262",
-    "updated_time": 1751699622015,
-    "updated_by": "1921832882836627456",
-    "updated_nickname": "17854119262"
-  },
-  {
-    "id": "5ef9074f-332e-4c2c-8caf-0d5e9c2d4bb0",
-    "name": "fence-2025-07-03 09:36",
-    "status": "enable",
-    "type": "dfence",
-    "content": {
-      "type": "Feature",
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              113.94217071448199,
-              22.580710270949893
-            ],
-            [
-              113.94234419200872,
-              22.580557223329823
-            ],
-            [
-              113.94234708696375,
-              22.580804244635136
-            ],
-            [
-              113.942101324811,
-              22.580866002541086
-            ],
-            [
-              113.94217071448199,
-              22.580710270949893
-            ]
-          ]
-        ]
-      },
-      "properties": {
-        "color": "#00FF00",
-        "width": 50,
-        "clampToGround": true
-      }
-    },
-    "area_hash": "enable_dfence_491bd3ba995a30b943fce12cd277f319",
-    "created_time": 1751506610758,
-    "created_by": "1921832882836627456",
-    "created_nickname": "17854119262",
-    "updated_time": 1751506610758,
     "updated_by": "1921832882836627456",
     "updated_nickname": "17854119262"
   },
@@ -149,58 +101,10 @@
     "updated_by": "1921832882836627456",
     "updated_nickname": "17854119262"
   },
-  {
-    "id": "8fb48c63-b840-448d-b331-0e0dd505cdb2",
-    "name": "nfz-2025-07-03 09:36",
-    "status": "enable",
-    "type": "nfz",
-    "content": {
-      "type": "Feature",
-      "geometry": {
-        "type": "Polygon",
-        "coordinates": [
-          [
-            [
-              113.94081757610996,
-              22.581070072300122
-            ],
-            [
-              113.94103442563689,
-              22.580927765651026
-            ],
-            [
-              113.94117610149931,
-              22.581056645867445
-            ],
-            [
-              113.94095925169468,
-              22.58111303220476
-            ],
-            [
-              113.94081757610996,
-              22.581070072300122
-            ]
-          ]
-        ]
-      },
-      "properties": {
-        "color": "#FF0000",
-        "width": 50,
-        "clampToGround": true
-      }
-    },
-    "area_hash": "enable_nfz_069b0cdcae471e9849ff2af1c407cb63",
-    "created_time": 1751506590102,
-    "created_by": "1921832882836627456",
-    "created_nickname": "17854119262",
-    "updated_time": 1751506590102,
-    "updated_by": "1921832882836627456",
-    "updated_nickname": "17854119262"
-  },
   {
     "id": "53d34e36-83a1-4f27-9379-59916ac22f94",
     "name": "作业区",
-    "status": "disable",
+    "status": "enable",
     "type": "dfence",
     "content": {
       "type": "Feature",
@@ -240,18 +144,18 @@
         "color": "#00FF00"
       }
     },
-    "area_hash": "disable_dfence_d0dc9ea80f32a4ddf9737ed27059da89",
+    "area_hash": "enable_dfence_d0dc9ea80f32a4ddf9737ed27059da89",
     "created_time": 1747035695040,
     "created_by": "",
     "created_nickname": "",
-    "updated_time": 1751700024743,
+    "updated_time": 1751870133102,
     "updated_by": "1921832882836627456",
     "updated_nickname": "17854119262"
   },
   {
     "id": "189b2247-a5be-49ef-83cb-768056a00ed6",
     "name": "限飞区",
-    "status": "disable",
+    "status": "enable",
     "type": "nfz",
     "content": {
       "type": "Feature",
@@ -291,11 +195,11 @@
         "clampToGround": true
       }
     },
-    "area_hash": "disable_nfz_d362c13ac83407d94d7e8754f25b1f8d",
+    "area_hash": "enable_nfz_d362c13ac83407d94d7e8754f25b1f8d",
     "created_time": 1747035694853,
     "created_by": "",
     "created_nickname": "",
-    "updated_time": 1751700027203,
+    "updated_time": 1751870135023,
     "updated_by": "1921832882836627456",
     "updated_nickname": "17854119262"
   }

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

@@ -10,9 +10,9 @@
           <div
             v-if="props.nowShowAreaData.type == 'noland'"
             :style="{
-              width: '13px',
+              width: '15px',
-              height: '13px',
+              height: '15px',
-              outline: `2px solid ${props.nowShowAreaData.content.properties.color}`,
+              background: `linear-gradient(to bottom right, transparent 45%, ${props.nowShowAreaData.content.properties.color} 45%, ${props.nowShowAreaData.content.properties.color} 60%, transparent 60%), #ffffff00`,
               'margin-left': '2px',
               'margin-right': '12px',
             }"
@@ -81,21 +81,21 @@
         <div class="markTitle">水平距离</div>
       </a-col>
       <a-col :span="18" v-if="props.nowShowAreaData.type == 'noland'">
-        <div class="markContent"> m</div>
+        <div class="markContent"> {{ distance.toFixed(1) }}m</div>
       </a-col>
       <!-- 水平面积 -->
       <a-col :span="6">
         <div class="markTitle">水平面积</div>
       </a-col>
       <a-col :span="18">
-        <div class="markContent"> ㎡</div>
+        <div class="markContent"> {{ area.toFixed(2) }}㎡</div>
       </a-col>
       <!-- 水平周长 -->
       <a-col :span="6" v-if="props.nowShowAreaData.content.geometry.type == 'Polygon'">
         <div class="markTitle">水平周长</div>
       </a-col>
       <a-col :span="18" v-if="props.nowShowAreaData.content.geometry.type == 'Polygon'">
-        <div class="markContent"> m</div>
+        <div class="markContent"> {{ distance2 }}m</div>
       </a-col>
       <!-- 半径 -->
       <a-col :span="6" v-if="props.nowShowAreaData.content.geometry.type == 'Circle'">
@@ -166,6 +166,8 @@
 </template>
 <script lang="ts" setup>
   import { ref, watch, nextTick } from 'vue';
+  import * as mars3d from 'mars3d';
+  import * as Cesium from 'mars3d-cesium';
   import {
     CloseOutlined,
     DeleteOutlined,
@@ -267,10 +269,50 @@
     emits('deleteArea', props.nowShowAreaData);
   }
 
+  // 水平距离
+  const distance = ref(0);
+  async function getDistance() {
+    distance.value = mars3d.MeasureUtil.getSurfaceDistance(
+      props.nowShowAreaData.content.geometry.coordinates[0],
+    );
+  }
+
+  // 水平面积
+  const area = ref(0);
+  async function getArea() {
+    if (props.nowShowAreaData.content.geometry.type == 'Circle') {
+      let radius = props.nowShowAreaData.content.geometry.radius;
+      area.value = Math.PI * radius * radius;
+    } else {
+      area.value = mars3d.MeasureUtil.getSurfaceArea(
+        props.nowShowAreaData.content.geometry.coordinates[0],
+      );
+    }
+  }
+
+  // 水平周长
+  const distance2 = ref(0);
+  async function getDistance2() {
+    distance.value = mars3d.MeasureUtil.getDistance(
+      props.nowShowAreaData.content.geometry.coordinates[0],
+      true,
+    );
+  }
+
   watch(
     () => props.nowShowAreaData,
     () => {
       nowAreaData.value = props.nowShowAreaData;
+      // 水平面积
+      getArea();
+      if (props.nowShowAreaData.type == 'noland') {
+        // 水平距离
+        getDistance();
+      }
+      if (props.nowShowAreaData.content.geometry.type == 'Polygon') {
+        // 水平距离
+        getDistance2();
+      }
     },
     {
       deep: true,

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

@@ -284,9 +284,9 @@
                 <div
                   v-if="show.type == 'noland'"
                   :style="{
-                    width: '13px',
+                    width: '15px',
-                    height: '13px',
+                    height: '15px',
-                    outline: `2px solid ${show.content.properties.color}`,
+                    background: `linear-gradient(to bottom right, transparent 45%, ${show.content.properties.color} 45%, ${show.content.properties.color} 60%, transparent 60%), #ffffff00`,
                     'margin-right': '6px',
                   }"
                 />