Compare commits
2 Commits
69abc96b86
...
e9492904e5
Author | SHA1 | Date | |
---|---|---|---|
e9492904e5 | |||
dd5452e22c |
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,6 +1,7 @@
|
|||||||
node_modules
|
node_modules
|
||||||
dist
|
dist
|
||||||
out
|
out
|
||||||
|
.history
|
||||||
.DS_Store
|
.DS_Store
|
||||||
.eslintcache
|
.eslintcache
|
||||||
*.log*
|
*.log*
|
||||||
|
2
src/renderer/components.d.ts
vendored
2
src/renderer/components.d.ts
vendored
@ -8,6 +8,8 @@ export {}
|
|||||||
/* prettier-ignore */
|
/* prettier-ignore */
|
||||||
declare module 'vue' {
|
declare module 'vue' {
|
||||||
export interface GlobalComponents {
|
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']
|
Directory: typeof import('./src/components/dialog/directory.vue')['default']
|
||||||
ElButton: typeof import('element-plus/es')['ElButton']
|
ElButton: typeof import('element-plus/es')['ElButton']
|
||||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||||
|
BIN
src/renderer/src/assets/iconfont/Ali-mother-counts-bold.ttf
Normal file
BIN
src/renderer/src/assets/iconfont/Ali-mother-counts-bold.ttf
Normal file
Binary file not shown.
BIN
src/renderer/src/assets/iconfont/sy-boldface.otf
Normal file
BIN
src/renderer/src/assets/iconfont/sy-boldface.otf
Normal file
Binary file not shown.
@ -29,3 +29,13 @@
|
|||||||
/* src: url('./your-font-file.woff') format('woff'); */
|
/* src: url('./your-font-file.woff') format('woff'); */
|
||||||
/* src: url('./your-font-file.eot') format('embedded-opentype'); */
|
/* 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');
|
||||||
|
}
|
||||||
|
264
src/renderer/src/components/dialog/baseDialog.vue
Normal file
264
src/renderer/src/components/dialog/baseDialog.vue
Normal file
@ -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>
|
@ -20,7 +20,9 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
|
import { inject } from "vue";
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
const eventBus = inject("bus");
|
||||||
|
|
||||||
const i8n = ref({
|
const i8n = ref({
|
||||||
DrawRect: 'rect',
|
DrawRect: 'rect',
|
||||||
@ -158,7 +160,36 @@ const fold = () => {
|
|||||||
(itemCount - 1) * itemDelay + itemDuration
|
(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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
25
src/renderer/src/views/components/propertyBox/standText.vue
Normal file
25
src/renderer/src/views/components/propertyBox/standText.vue
Normal file
@ -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>
|
@ -3,6 +3,7 @@
|
|||||||
<div id="earthContainer" class="fullSize"></div>
|
<div id="earthContainer" class="fullSize"></div>
|
||||||
<Tree class="tree" ref="tree"></Tree>
|
<Tree class="tree" ref="tree"></Tree>
|
||||||
<addDirectory ref="adddirectoryBox" class="adddirectoryBox absolute zIndex999"></addDirectory>
|
<addDirectory ref="adddirectoryBox" class="adddirectoryBox absolute zIndex999"></addDirectory>
|
||||||
|
<PropertyDialog ref="baseDialog"></PropertyDialog>
|
||||||
<!--左侧一级菜单-->
|
<!--左侧一级菜单-->
|
||||||
<firstMenu class="absolute zIndex9" ref="firstMenu"></firstMenu>
|
<firstMenu class="absolute zIndex9" ref="firstMenu"></firstMenu>
|
||||||
<!--底部菜单-->
|
<!--底部菜单-->
|
||||||
@ -12,6 +13,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Headers from '../components/headers/index.vue'
|
import Headers from '../components/headers/index.vue'
|
||||||
import Tree from '../components/tree/index.vue'
|
import Tree from '../components/tree/index.vue'
|
||||||
|
import PropertyDialog from '../components/propertyBox/standText.vue'
|
||||||
import addDirectory from '@/components/dialog/directory.vue'
|
import addDirectory from '@/components/dialog/directory.vue'
|
||||||
import firstMenu from '@/views/components/leftSide/leftSideFirst.vue'
|
import firstMenu from '@/views/components/leftSide/leftSideFirst.vue'
|
||||||
import bottomMenu from '@/views/components/bottomSide/bottomSide.vue'
|
import bottomMenu from '@/views/components/bottomSide/bottomSide.vue'
|
||||||
|
Reference in New Issue
Block a user