基础弹框

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 dist
 out
+.history
 .DS_Store
 .eslintcache
 *.log*

src/renderer/components.d.ts

@@ -8,6 +8,8 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    BaseDialog: typeof import('./src/components/dialog/baseDialog.vue')['default']
+    Dialog: typeof import('./src/components/dialog/index.vue')['default']
     Directory: typeof import('./src/components/dialog/directory.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']

src/renderer/src/assets/styles/font.css

@@ -29,3 +29,13 @@
   /* src: url('./your-font-file.woff') format('woff');  */
   /* src: url('./your-font-file.eot') format('embedded-opentype');  */
 }
+
+@font-face {
+  font-family: 'sy-boldface';
+  src: url('../fonts/sy-boldface.otf') format('opentype');
+}
+
+@font-face {
+  font-family: 'Ali-mother-counts-bold';
+  src: url('../fonts/Ali-mother-counts-bold.ttf') format('truetype');
+}

src/renderer/src/components/dialog/baseDialog.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="YJ-custom-base-dialog" ref="baseDialog" :id="id" :style="{
+      width: width,
+      height: height,
+      top: top,
+      left: left,
+      position: fix ? 'fixed' : 'absolute'
+    }" v-if="dialogVisible || first" v-show="dialogVisible">
+    <div class="title-box" ref="titleBox"><span class="title">{{ title }}</span><span class="close-box"
+        @click="close"><span class="close"></span><i>✕</i></span></div>
+    <div class="content" style="padding: 0 24px 0 24px;">
+      <div>
+        <slot name="content"></slot>
+      </div>
+    </div>
+    <div class="foot">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, nextTick } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  width: {
+    type: String,
+    default: "",
+  },
+  height: {
+    type: String,
+    default: "",
+  },
+  top: {
+    type: String,
+    default: "",
+  },
+  left: {
+    type: String,
+    default: "",
+  },
+  id: {
+    type: String,
+    default: "",
+  },
+  bodyId: {
+    type: String,
+    default: "",
+  },
+  clearAnimation: {
+    type: Boolean,
+    default: false,
+  },
+  fix: {
+    type: Boolean,
+    default: false,
+  },
+  className: {
+    type: String,
+  },
+  nofold: {
+    type: Boolean,
+    default: false,
+  },
+  isfold: {
+    type: Boolean,
+    default: false,
+  },
+  noClose: {
+    type: Boolean,
+    default: false,
+  },
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  closeCallback: {
+    type: Function,
+    default: () => { },
+  }
+});
+
+// 内部状态
+const first = ref(false);
+const dialogVisible = ref(false);
+const FontChart = ref(undefined);
+const callback = ref(undefined);
+const baseDialog = ref(null);
+const titleBox = ref(null);
+const dialogContent = ref(null);
+const tableData = ref([]);
+
+// 监听show属性变化
+watch(
+  () => props.show,
+  (val) => {
+    dialogVisible.value = val;
+  },
+  { immediate: true }
+);
+
+// 组件挂载后执行
+onMounted(() => {
+  // 可以在这里添加初始化逻辑
+});
+
+// 方法定义
+const open = (data) => {
+  if (!first.value) {
+    first.value = true;
+    nextTick(() => {
+      moveDiv();
+    });
+  }
+  dialogVisible.value = true;
+  nextTick(() => {
+    setTimeout(() => {
+      openPosition();
+    }, 0);
+  });
+};
+
+const close = () => {
+  dialogVisible.value = false;
+  if (props.clearAnimation) {
+    // 假设mapService是全局可用的
+    window.mapService?.removeAnimation();
+  }
+  callback.value && callback.value();
+  props.closeCallback && props.closeCallback()
+};
+
+const moveDiv = () => {
+  let x = 0;
+  let y = 0;
+  let l = 0;
+  let t = 0;
+
+  const oClickDiv = baseDialog.value;
+  const oMoveDiv = titleBox.value;
+
+  if (oClickDiv) {
+    oMoveDiv.onmousedown = (e) => {
+      // 获取对话框尺寸
+      const oMoveDivHeight = baseDialog.value.offsetHeight;
+      const oMoveDivWidth = baseDialog.value.offsetWidth;
+
+      x = e.clientX;
+      y = e.clientY;
+
+      const leftPx = window.getComputedStyle(baseDialog.value).left;
+      const topPx = window.getComputedStyle(baseDialog.value).top;
+
+      l = parseFloat(leftPx);
+      t = parseFloat(topPx);
+
+      // 获取视口大小
+      const container = props.bodyId
+        ? document.getElementById(props.bodyId)
+        : document.body;
+      const windowHeight = container.clientHeight;
+      const windowWidth = container.clientWidth;
+
+      // 鼠标移动事件处理
+      const handleMouseMove = (e) => {
+        e.preventDefault();
+        const nx = e.clientX;
+        const ny = e.clientY;
+
+        // 计算新位置
+        let newLeft = nx - (x - l);
+        let newTop = ny - (y - t);
+
+        // 边界检查
+        if (newLeft < 0) {
+          newLeft = 0;
+        } else if (newLeft + oMoveDivWidth > windowWidth) {
+          newLeft = windowWidth - oMoveDivWidth;
+        }
+
+        if (newTop <= 0) {
+          newTop = 0;
+        } else if (newTop + oMoveDivHeight > windowHeight) {
+          newTop = windowHeight - oMoveDivHeight;
+        }
+
+        // 更新位置
+        if (baseDialog.value) {
+          baseDialog.value.style.left = newLeft + "px";
+          baseDialog.value.style.top = newTop + "px";
+          baseDialog.value.style.bottom = "unset";
+          baseDialog.value.style.right = "unset";
+        }
+      };
+
+      // 鼠标抬起事件处理
+      const handleMouseUp = () => {
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', handleMouseUp);
+      };
+
+      // 添加事件监听
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    };
+  }
+};
+
+const openPosition = () => {
+  const oMoveDiv = baseDialog.value;
+  if (!oMoveDiv) return;
+
+  // 获取对话框尺寸
+  const oMoveDivHeight = oMoveDiv.offsetHeight;
+  const oMoveDivWidth = oMoveDiv.offsetWidth;
+
+  // 获取当前位置
+  const leftPx = parseFloat(window.getComputedStyle(oMoveDiv).left);
+  const topPx = parseFloat(window.getComputedStyle(oMoveDiv).top);
+
+  // 获取视口大小
+  const container = props.bodyId
+    ? document.getElementById(props.bodyId)
+    : document.body;
+  const windowHeight = container.clientHeight;
+  const windowWidth = container.clientWidth;
+
+  // 边界检查
+  let newLeft = leftPx;
+  let newTop = topPx;
+
+  if (newLeft < 0) {
+    newLeft = 0;
+  } else if (newLeft + oMoveDivWidth > windowWidth) {
+    newLeft = windowWidth - oMoveDivWidth;
+  }
+
+  if (newTop - 10 <= 0) {
+    newTop = -10;
+  } else if (newTop + oMoveDivHeight > windowHeight) {
+    newTop = windowHeight - oMoveDivHeight;
+  }
+
+  // 更新位置
+  oMoveDiv.style.left = newLeft + "px";
+  oMoveDiv.style.top = newTop + "px";
+};
+
+// 暴露公共方法
+defineExpose({
+  open,
+  close,
+  moveDiv,
+  openPosition
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/renderer/src/views/components/bottomSide/bottomSide.vue

@@ -20,7 +20,9 @@
 
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
+import { inject } from "vue";
 const { t } = useI18n()
+const eventBus = inject("bus");
 
 const i8n = ref({
   DrawRect: 'rect',
@@ -158,7 +160,36 @@ const fold = () => {
     (itemCount - 1) * itemDelay + itemDuration
   )
 }
-const addMarker = (item: any) => {}
+const addMarker = (item: any) => {
+  switch (item.source_type) {
+    case 'groundText':
+      eventBus.emit("openDialog");
+      break;
+    case 'standText':
+      break;
+    case 'point':
+      break;
+    case 'line':
+      break;
+    case 'curve':
+      break;
+    case 'panel':
+      break;
+    case 'circle':
+      break;
+    case 'rectangle':
+      break;
+    case 'rendezvous':
+      break;
+    case 'attackArrow':
+      break;
+    case 'pincerArrow':
+      break;
+    default:
+      break;
+  }
+
+}
 </script>
 
 <style scoped lang="scss">

src/renderer/src/views/components/propertyBox/standText.vue

@@ -0,0 +1,25 @@
+<template>
+  <Dialog ref="baseDialog" title="贴地文字" left="180px" top="100px">
+    <template #content>
+        <textarea style="height: 76px; width: 270px;"></textarea>
+    </template>
+    <template #footer>
+      <button>确定</button>
+    </template>
+
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { inject } from "vue";
+import Dialog from '@/components/dialog/baseDialog.vue'
+
+const baseDialog = ref(null);
+const eventBus = inject("bus");
+eventBus.on("openDialog", () => {
+  baseDialog.value?.open()
+});
+</script>
+
+<style scoped lang="scss"></style>

src/renderer/src/views/home/index.vue

@@ -3,6 +3,7 @@
   <div id="earthContainer" class="fullSize"></div>
   <Tree class="tree" ref="tree"></Tree>
   <addDirectory ref="adddirectoryBox" class="adddirectoryBox absolute zIndex999"></addDirectory>
+  <PropertyDialog ref="baseDialog"></PropertyDialog>
   <!--左侧一级菜单-->
   <firstMenu class="absolute zIndex9" ref="firstMenu"></firstMenu>
   <!--底部菜单-->
@@ -12,6 +13,7 @@
 <script setup lang="ts">
 import Headers from '../components/headers/index.vue'
 import Tree from '../components/tree/index.vue'
+import PropertyDialog from '../components/propertyBox/standText.vue'
 import addDirectory from '@/components/dialog/directory.vue'
 import firstMenu from '@/views/components/leftSide/leftSideFirst.vue'
 import bottomMenu from '@/views/components/bottomSide/bottomSide.vue'