From 9f1d2e9e4f87113a4e25eb69b1776c69678da8c5 Mon Sep 17 00:00:00 2001
From: zh <972939975@qq.com>
Date: Fri, 5 Sep 2025 19:19:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/bottomSide/bottomSide.vue      |  26 ++
 .../components/propertyBox/CircleObject.vue   | 336 ++++++++++++++++++
 src/renderer/src/views/home/index.vue         |   7 +-
 3 files changed, 367 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/src/views/components/propertyBox/CircleObject.vue

diff --git a/src/renderer/src/views/components/bottomSide/bottomSide.vue b/src/renderer/src/views/components/bottomSide/bottomSide.vue
index 7f9de3d..25707d9 100644
--- a/src/renderer/src/views/components/bottomSide/bottomSide.vue
+++ b/src/renderer/src/views/components/bottomSide/bottomSide.vue
@@ -196,6 +196,32 @@ const bottomMenuList = ref([
     key: 'DrawCircle',
     sourceType: 'circle',
     className: 'public',
+    fun: () => {
+      let Draw = new YJ.Draw.DrawCircle(window.earth)
+      Draw.start(async (a, opt) => {
+        // let id = new YJ.Tools().randomString()
+        let id = 'aaa'
+        let name = '圆'
+        let options: any = await initMapData('circle', {
+          id: id,
+          name: name,
+          center: opt.center, radius: opt.radius
+        })
+
+        let selectedNodes = window.treeObj.getSelectedNodes()
+        let params = {
+          "id": id,
+          "sourceName": name,
+          "sourceType": "circle",
+          "parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
+          // "treeIndex": 0,
+          "params": options
+        }
+        console.log(params)
+        // eventBus.emit("openDialog", 'circle');
+        TreeApi.addOtherSource(params)
+      })
+    }
   },
   {
     sourceName: '矩形',
diff --git a/src/renderer/src/views/components/propertyBox/CircleObject.vue b/src/renderer/src/views/components/propertyBox/CircleObject.vue
new file mode 100644
index 0000000..00d6d0e
--- /dev/null
+++ b/src/renderer/src/views/components/propertyBox/CircleObject.vue
@@ -0,0 +1,336 @@
+<template>
+  <Dialog ref="baseDialog" :title="title+'属性'" left="180px" top="100px" className="polygon" :closeCallback="closeCallback">
+    <template #content>
+      <span class="custom-divider"></span>
+      <div class="div-item">
+        <div class="row" style="align-items: flex-start;">
+          <div class="col">
+            <span class="label">名称</span>
+            <input class="input" maxlength="40" type="text" v-model="entityOptions.name">
+          </div>
+          <div class="col" style="flex: 0 0 60%;">
+            <div class="row">
+              <div class="col input-select-unit-box">
+                <span class="label" style="margin-right: 0px;">投影面积:</span>
+                <input class="input input-text" readonly type="text" v-model="area">
+                <el-select v-model="areaUnit">
+                    <el-option label="平方米" value="m2"></el-option>
+                    <el-option label="平方千米" value="km2"></el-option>
+                    <el-option label="亩" value="mu"></el-option>
+                    <el-option label="公顷" value="ha"></el-option>
+                  </el-select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="div-item">
+        <div class="row">
+          <el-tabs v-model="activeName">
+            <el-tab-pane label="属性信息" name="1">
+              <attribute :entityOptions="entityOptions"></attribute>
+            </el-tab-pane>
+            <el-tab-pane label="空间信息" name="2">
+              <div class="row">
+                <div class="col height-mode-box">
+                  <span class="label" style="flex: 0 0 56px;">高度模式</span>
+                  <el-select class="input input-select height-mode-scelect" style="width: 155px;margin-left: 20px"
+                    v-model="heightMode" @change="heightModeChange" placeholder="请选择">
+                    <el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key">
+                    </el-option>
+                  </el-select>
+                </div>
+                <div class="col">
+                  <span class="label">Z值统一增加</span>
+                  <div class="input-number input-number-unit-1 height-box" :class="{ 'disabled': heightMode == 2 }">
+                    <input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height">
+                    <span class="unit">m</span>
+                    <span class="arrow"></span>
+                  </div>
+                  <button class="confirm height-confirm" style="margin-left: 5px;" @click="heightConfirm"
+                    :disabled="heightMode == 2">应用</button>
+                </div>
+              </div>
+              <div class="row">
+                <div class="table spatial-info-table">
+                  <div class="table-head">
+                    <div class="tr">
+                      <div class="th"></div>
+                      <div class="th">经度（X）</div>
+                      <div class="th">纬度（Y）</div>
+                      <div class="th">高度（Z）</div>
+                    </div>
+                  </div>
+                  <div class="table-body">
+                    <div class="tr">
+                      <div class="td">圆心坐标</div>
+                      <div class="td lng align-center" @dblclick="inputDblclick($event, 1, 'lng')">
+                        <input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number"
+                          v-model="entityOptions.center.lng" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lng'">
+                        <span style="pointer-events: none;" v-else>{{ (item.lng).toFixed(8) }}</span>
+                      </div>
+                      <div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
+                        <input class="input" @blur="inputBlurCallBack($event, i, 'lat', 8)" type="number"
+                          v-model="entityOptions.center.lat" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lat'">
+                        <span style="pointer-events: none;" v-else>{{ (item.lat).toFixed(8) }}</span>
+                      </div>
+                      <div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
+                        <input class="input" @blur="inputBlurCallBack($event, i, 'alt', 2)" type="number"
+                          v-model="entityOptions.height" min="-9999999" max="999999999"
+                          v-if="activeTd.index == i && activeTd.name == 'alt'">
+                        <span style="pointer-events: none;" v-else>{{ (entityOptions.height).toFixed(2) }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="面风格" name="3">
+              <div class="row">
+                <div class="col">
+                  <span class="label">面颜色</span>
+                  <div class="color" ref="colorRef"></div>
+                </div>
+                <div class="col">
+                  <span class="label">描边颜色</span>
+                  <div class="lineColor" ref="lineColorRef"></div>
+                </div>
+                <div class="col">
+                  <span class="label">描边宽度</span>
+                  <div class="input-number input-number-unit-2">
+                    <input class="input" type="number" title="" min="0" max="99" v-model="entityOptions.lineWidth">
+                    <span class="unit">px</span>
+                    <span class="arrow"></span>
+                  </div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="标签风格" name="4">
+              <labelStyle :type="title" :entityOptions="entityOptions"></labelStyle>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+      <span class="custom-divider"></span>
+    </template>
+    <template #footer>
+      <div style="position: absolute; left: 24px; display: flex;">
+        <button @click="nodeEdit"><svg class="icon-edit">
+            <use xlink:href="#yj-icon-edit"></use>
+          </svg>二次编辑</button>
+        <button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
+            <use xlink:href="#yj-icon-py"></use>
+          </svg>平移</button>
+      </div>
+      <button @click="confirm">确定</button>
+      <button @click="close">关闭</button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { inject } from "vue";
+import { TreeApi } from '@/api/tree'
+import Dialog from '@/components/dialog/baseDialog.vue'
+import attribute from './attribute.vue'
+import labelStyle from './labelStyle.vue'
+import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
+
+const { cusUpdateNode } = useTreeNode()
+
+const title = ref('圆')
+const baseDialog: any = ref(null);
+const eventBus: any = inject("bus");
+const options = ref({});
+const colorRef = ref(null)
+const lineColorRef = ref(null)
+eventBus.on("openPolygonEdit", () => {
+  baseDialog.value?.open()
+});
+
+const area = ref(0)
+const areaUnit = ref('m2')
+const height = ref(10)
+const heightModeData = ref([
+  {
+    name: '海拔高度',
+    value: '海拔高度',
+    key: 0
+  },
+  {
+    name: '相对地表',
+    value: '相对地表',
+    key: 1
+  },
+  {
+    name: '依附模型',
+    value: '依附模型',
+    key: 2
+  }
+])
+
+const activeName = ref('1')
+const activeTd = ref({
+  index: -1,
+  name: ''
+})
+const center = ref({})
+const heightMode = ref(0)
+const entityOptions: any = ref({});
+let originalOptions: any
+let that: any
+
+const open = async (id: any, type: any) => {
+  that = window.earth.entityMap.get('aaa')
+  originalOptions = structuredClone(that.options)
+  entityOptions.value = that
+  heightMode.value = entityOptions.value.heightMode
+  area.value = entityOptions.value.areaByMeter
+  center.value = structuredClone(that.options.center)
+  that.areaChangeCallBack = () => {
+    switch (areaUnit.value) {
+      case 'm2'://平方米
+        area.value = entityOptions.value.areaByMeter
+        break
+      case 'km2'://平方千米
+        area.value = Number((entityOptions.value.areaByMeter / 1000000).toFixed(8))
+        break
+      case 'mu'://亩
+        area.value = Number(
+          (entityOptions.value.areaByMeter / 666.6666667).toFixed(4)
+        )
+        break
+      case 'ha'://公顷
+        area.value = Number((entityOptions.value.areaByMeter / 10000).toFixed(6))
+        break
+      default:
+        area.value = entityOptions.value.areaByMeter
+    }
+  }
+  heightModeChange(heightMode.value)
+  baseDialog.value?.open()
+
+  await nextTick()
+  let colorPicker = new window.YJColorPicker({
+    el: colorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.color,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: color => {
+      entityOptions.value.color = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.color = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+  let linecolorPicker = new window.YJColorPicker({
+    el: lineColorRef.value,
+    size: 'mini', //颜色box类型
+    alpha: true, //是否开启透明度
+    defaultColor: entityOptions.value.lineColor,
+    disabled: false, //是否禁止打开颜色选择器
+    openPickerAni: 'opacity', //打开颜色选择器动画
+    sure: color => {
+      entityOptions.value.lineColor = color
+    }, //点击确认按钮事件回调
+    clear: () => {
+      entityOptions.value.lineColor = 'rgba(255,255,255,1)'
+    } //点击清空按钮事件回调
+  })
+}
+
+const heightModeChange = (val) => {
+  that.heightMode = heightMode.value
+}
+
+const heightConfirm = () => {
+  if (entityOptions.value.operate.positionEditing) {
+    that.positionEditing = false
+    entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
+  }
+  else {
+    that.closeNodeEdit(this)
+    that.heightMode = that.heightMode
+    setTimeout(() => {
+      entityOptions.value.height = Number((entityOptions.value.height + Number(height.value)).toFixed(2))
+    }, 100);
+  }
+}
+const inputDblclick = async (event, i, anme) => {
+  if(heightMode.value == 2) {
+    return
+  }
+  activeTd.value = {
+    index: i,
+    name: anme
+  }
+  await nextTick()
+  let inputElm = event.target.getElementsByClassName('input')[0]
+  if (inputElm) {
+    inputElm.focus()
+  }
+}
+const inputBlurCallBack = (event, i, name, digit = 2) => {
+  activeTd.value = {
+    index: -1,
+    name: ''
+  }
+}
+
+const translate = () => {
+  that.openPositionEditing(() => {
+    entityOptions.value.options.center = structuredClone(that.options.center)
+  })
+}
+
+const closeCallback = () => {
+  entityOptions.value.originalOptions = structuredClone(originalOptions)
+  that.positionEditing = false
+  entityOptions.value.closeNodeEdit()
+  entityOptions.value.reset()
+  eventBus.emit("destroyComponent")
+}
+
+const nodeEdit = () => {
+  that.nodeEdit((e, center, areaByMeter) => {
+    entityOptions.value.options.center = structuredClone(center)
+  })
+}
+
+const confirm = () => {
+  originalOptions = structuredClone(that.options)
+  baseDialog.value?.close()
+  let params = structuredClone(that.options)
+  delete params.host
+  let params2 = {
+    "id": params.id,
+    "sourceName": params.name,
+    "params": params,
+    "isShow": params.show ? 1 : 0,
+  }
+  TreeApi.updateDirectoryInfo(params2)
+  cusUpdateNode({ "id": params.id, "sourceName": params.name, "params": JSON.stringify(params) })
+}
+const close = () => {
+  baseDialog.value?.close()
+}
+
+watch(
+  () => areaUnit.value,
+  (val) => {
+    if ((entityOptions.value.areaByMeter || entityOptions.value.areaByMeter == 0) && that) {
+      that.areaChangeCallBack()
+    }
+  },
+  { immediate: true }
+);
+
+defineExpose({
+  open
+})
+</script>
+
+<style scoped lang="scss"></style>
\ No newline at end of file
diff --git a/src/renderer/src/views/home/index.vue b/src/renderer/src/views/home/index.vue
index 3f8cca8..39df918 100644
--- a/src/renderer/src/views/home/index.vue
+++ b/src/renderer/src/views/home/index.vue
@@ -84,6 +84,9 @@ eventBus.on("openDialog", async (sourceType: any, id: any) => {
       dynamicComponentRef.value?.open(id)
       break;
     case 'circle':
+      currentComponent.value = polygonObject
+      await nextTick()
+      dynamicComponentRef.value?.open(id, 'circle')
       break;
     case 'rectangle':
       currentComponent.value = polygonObject
@@ -96,12 +99,12 @@ eventBus.on("openDialog", async (sourceType: any, id: any) => {
       dynamicComponentRef.value?.open(id, 'rendezvous')
       break;
     case 'attackArrow':
-    currentComponent.value = attackArrow
+      currentComponent.value = attackArrow
       await nextTick()
       dynamicComponentRef.value?.open(id, 'attackArrow')
       break;
     case 'pincerArrow':
-    currentComponent.value = attackArrow
+      currentComponent.value = attackArrow
       await nextTick()
       dynamicComponentRef.value?.open(id, 'pincerArrow')
       break;