Compare commits
13 Commits
202341f0d9
...
zyl
| Author | SHA1 | Date | |
|---|---|---|---|
| 0e8793f01d | |||
| a1f5a61252 | |||
| 47fa66ce6b | |||
| 50ef8e1f05 | |||
| 6629775367 | |||
| 41bffc2e83 | |||
| a33fbb1cbe | |||
| 39dc98401d | |||
| 30745547c2 | |||
| 9f1d2e9e4f | |||
| 5d463e3632 | |||
| 9c9ac8e84f | |||
| e78b8c2073 |
86
package-lock.json
generated
86
package-lock.json
generated
@ -13,9 +13,11 @@
|
||||
"@electron-toolkit/utils": "^4.0.0",
|
||||
"@ztree/ztree_v3": "^3.5.48",
|
||||
"axios": "^1.11.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"dayjs": "^1.11.18",
|
||||
"echarts": "^6.0.0",
|
||||
"electron-updater": "^6.3.9",
|
||||
"element-plus": "^2.10.4",
|
||||
"js-md5": "^0.8.3",
|
||||
"mitt": "^3.0.1",
|
||||
"pinia": "^3.0.3",
|
||||
"pinia-plugin-persistedstate": "^4.4.1",
|
||||
@ -30,7 +32,7 @@
|
||||
"@electron-toolkit/eslint-config-ts": "^3.0.0",
|
||||
"@electron-toolkit/tsconfig": "^1.0.1",
|
||||
"@types/jquery": "^3.5.32",
|
||||
"@types/node": "^22.16.5",
|
||||
"@types/node": "^22.18.1",
|
||||
"@types/plist": "^3.0.5",
|
||||
"@types/verror": "^1.10.11",
|
||||
"@types/vue-i18n": "^6.1.3",
|
||||
@ -2649,9 +2651,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "22.16.5",
|
||||
"resolved": "https://registry.npmmirror.com/@types/node/-/node-22.16.5.tgz",
|
||||
"integrity": "sha512-bJFoMATwIGaxxx8VJPeM8TonI8t579oRvgAuT8zFugJsJZgzqv0Fu8Mhp68iecjzG7cnN3mO2dJQ5uUM2EFrgQ==",
|
||||
"version": "22.18.1",
|
||||
"resolved": "https://registry.npmmirror.com/@types/node/-/node-22.18.1.tgz",
|
||||
"integrity": "sha512-rzSDyhn4cYznVG+PCzGe1lwuMYJrcBS1fc3JqSa2PvtABwWo+dZ1ij5OVok3tqfpEBCBoaR4d7upFJk73HRJDw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~6.21.0"
|
||||
@ -4647,6 +4649,17 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/clipboard": {
|
||||
"version": "2.0.11",
|
||||
"resolved": "https://registry.npmmirror.com/clipboard/-/clipboard-2.0.11.tgz",
|
||||
"integrity": "sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"good-listener": "^1.2.2",
|
||||
"select": "^1.1.2",
|
||||
"tiny-emitter": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/cliui": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/cliui/-/cliui-8.0.1.tgz",
|
||||
@ -5196,9 +5209,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/dayjs": {
|
||||
"version": "1.11.13",
|
||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz",
|
||||
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
|
||||
"version": "1.11.18",
|
||||
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.18.tgz",
|
||||
"integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/de-indent": {
|
||||
@ -5361,6 +5374,12 @@
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/delegate": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/delegate/-/delegate-3.2.0.tgz",
|
||||
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/delegates": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/delegates/-/delegates-1.0.0.tgz",
|
||||
@ -5610,6 +5629,16 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/echarts": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-6.0.0.tgz",
|
||||
"integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0",
|
||||
"zrender": "6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ejs": {
|
||||
"version": "3.1.10",
|
||||
"resolved": "https://registry.npmmirror.com/ejs/-/ejs-3.1.10.tgz",
|
||||
@ -7248,6 +7277,15 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/good-listener": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmmirror.com/good-listener/-/good-listener-1.2.2.tgz",
|
||||
"integrity": "sha512-goW1b+d9q/HIwbVYZzZ6SsTr4IgE+WA44A0GmPIQstuOrgsFcT7VEJ48nmr9GaRtNu0XTKacFLGnBPAM6Afouw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"delegate": "^3.1.2"
|
||||
}
|
||||
},
|
||||
"node_modules/gopd": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
|
||||
@ -8453,11 +8491,6 @@
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/js-md5": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmmirror.com/js-md5/-/js-md5-0.8.3.tgz",
|
||||
"integrity": "sha512-qR0HB5uP6wCuRMrWPTrkMaev7MJZwJuuw4fnwAzRgP4J4/F8RwtodOKpGp4XpqsLBFzzgqIO42efFAyz2Et6KQ=="
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
@ -10986,6 +11019,12 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/select": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmmirror.com/select/-/select-1.1.2.tgz",
|
||||
"integrity": "sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "6.3.1",
|
||||
"resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
|
||||
@ -12243,6 +12282,12 @@
|
||||
"node": ">= 10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tiny-emitter": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
|
||||
"integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tiny-typed-emitter": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmmirror.com/tiny-typed-emitter/-/tiny-typed-emitter-2.1.0.tgz",
|
||||
@ -12461,6 +12506,12 @@
|
||||
"typescript": ">=4.8.4"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
|
||||
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
|
||||
"license": "0BSD"
|
||||
},
|
||||
"node_modules/type-check": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmmirror.com/type-check/-/type-check-0.4.0.tgz",
|
||||
@ -13886,6 +13937,15 @@
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/zrender": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-6.0.0.tgz",
|
||||
"integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==",
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"tslib": "2.3.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -25,6 +25,9 @@
|
||||
"@electron-toolkit/utils": "^4.0.0",
|
||||
"@ztree/ztree_v3": "^3.5.48",
|
||||
"axios": "^1.11.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"dayjs": "^1.11.18",
|
||||
"echarts": "^6.0.0",
|
||||
"electron-updater": "^6.3.9",
|
||||
"element-plus": "^2.10.4",
|
||||
"mitt": "^3.0.1",
|
||||
@ -41,7 +44,7 @@
|
||||
"@electron-toolkit/eslint-config-ts": "^3.0.0",
|
||||
"@electron-toolkit/tsconfig": "^1.0.1",
|
||||
"@types/jquery": "^3.5.32",
|
||||
"@types/node": "^22.16.5",
|
||||
"@types/node": "^22.18.1",
|
||||
"@types/plist": "^3.0.5",
|
||||
"@types/verror": "^1.10.11",
|
||||
"@types/vue-i18n": "^6.1.3",
|
||||
|
||||
@ -4,6 +4,8 @@ import { electronApp, optimizer, is } from '@electron-toolkit/utils'
|
||||
import icon from '../../resources/earth.png?asset'
|
||||
import fs from 'fs'
|
||||
|
||||
const { exec } = require('child_process');
|
||||
|
||||
// 开发环境路径处理 - 确保添加正确的file协议
|
||||
const devSplashPath = path.resolve(
|
||||
app.getAppPath(),
|
||||
|
||||
1
src/renderer/components.d.ts
vendored
1
src/renderer/components.d.ts
vendored
@ -19,6 +19,7 @@ declare module 'vue' {
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElSlider: typeof import('element-plus/es')['ElSlider']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
|
||||
12
src/renderer/public/sdk/YJEarth.min.js
vendored
12
src/renderer/public/sdk/YJEarth.min.js
vendored
File diff suppressed because one or more lines are too long
@ -65,7 +65,7 @@ export default {
|
||||
junbiao3d: '三维军标'
|
||||
},
|
||||
effect: {
|
||||
trajectoryMotion:"轨迹运动",
|
||||
trajectoryMotion: "轨迹运动",
|
||||
electronicFence: "电子围墙",
|
||||
// nightVision: '实体墙',
|
||||
radarLightWave: "扩散光波",
|
||||
@ -81,7 +81,7 @@ export default {
|
||||
nightVision: '夜视',
|
||||
// nightVision: '飞线',
|
||||
},
|
||||
analysis:{
|
||||
analysis: {
|
||||
inundationAnalysis: "淹没分析",
|
||||
profileAnalysis: "剖面分析",
|
||||
sightAnalysis: "视线分析",
|
||||
@ -93,7 +93,7 @@ export default {
|
||||
contour: "等高线",
|
||||
clear: "清除",
|
||||
},
|
||||
measure:{
|
||||
measure: {
|
||||
projectionArea: "投影面积",
|
||||
projectionDistanceMeasure: '投影距离',
|
||||
areaMeasure: "贴地面积",
|
||||
@ -105,11 +105,11 @@ export default {
|
||||
lopeDistanceMeasures: '坡度',
|
||||
coorMeasure: "坐标",
|
||||
clear: "清除测量",
|
||||
|
||||
|
||||
},
|
||||
tool:{
|
||||
tool: {
|
||||
routePlan: "路径规划",
|
||||
//清除轨迹
|
||||
clearRoute: '清除轨迹',
|
||||
graffiti: "涂鸦",
|
||||
// stopGraffiti: "结束涂鸦",
|
||||
clearGraffiti: "清除涂鸦",
|
||||
@ -117,17 +117,20 @@ export default {
|
||||
coorLocation: "坐标定位",
|
||||
mouseLocation: "鼠标定位",
|
||||
annotationAggregation: "标注点聚合",
|
||||
// 卷帘对比
|
||||
// 屏幕截图
|
||||
// 高清出图
|
||||
// 视频录制
|
||||
annotation: '卷帘对比',
|
||||
screenShot: '屏幕截图',
|
||||
highQuality: '高清出图',
|
||||
videoRecord: '视频录制',
|
||||
pressModel: "模型压平",
|
||||
terrainDig: "地形开挖",
|
||||
tilesetClipping: "剖切",
|
||||
clearTilesetClipping: "清除剖切",
|
||||
projConvert: '度分秒',
|
||||
projectionConvert: '投影转换',
|
||||
gdbImport: "gdb导入"
|
||||
terrainDig: "地形开挖",
|
||||
tilesetClipping: "剖切",
|
||||
clearTilesetClipping: "清除剖切",
|
||||
projConvert: '度分秒',
|
||||
projectionConvert: '投影转换',
|
||||
gdbImport: "gdb导入",
|
||||
circleStatistics: "圆形统计",
|
||||
polygonStatistics: "多边形统计",
|
||||
|
||||
},
|
||||
bottomMenu: {
|
||||
groundText: '贴地文字',
|
||||
|
||||
@ -49,7 +49,7 @@ body {
|
||||
background: var(--color-background);
|
||||
line-height: 1.6;
|
||||
font-family:
|
||||
Inter,
|
||||
SourceHanSans,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
|
||||
BIN
src/renderer/src/assets/iconfont/SourceHanSansCN-Medium.otf
Normal file
BIN
src/renderer/src/assets/iconfont/SourceHanSansCN-Medium.otf
Normal file
Binary file not shown.
BIN
src/renderer/src/assets/images/second/annotation.png
Normal file
BIN
src/renderer/src/assets/images/second/annotation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 417 B |
BIN
src/renderer/src/assets/images/second/circleStatistics.png
Normal file
BIN
src/renderer/src/assets/images/second/circleStatistics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 948 B |
BIN
src/renderer/src/assets/images/second/clearRoute.png
Normal file
BIN
src/renderer/src/assets/images/second/clearRoute.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/renderer/src/assets/images/second/highQuality.png
Normal file
BIN
src/renderer/src/assets/images/second/highQuality.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 784 B |
BIN
src/renderer/src/assets/images/second/polygonStatistics.png
Normal file
BIN
src/renderer/src/assets/images/second/polygonStatistics.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 818 B |
BIN
src/renderer/src/assets/images/second/screenShot.png
Normal file
BIN
src/renderer/src/assets/images/second/screenShot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 549 B |
BIN
src/renderer/src/assets/images/second/videoRecord.png
Normal file
BIN
src/renderer/src/assets/images/second/videoRecord.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 547 B |
@ -32,10 +32,15 @@
|
||||
|
||||
@font-face {
|
||||
font-family: 'sy-boldface';
|
||||
src: url('../fonts/sy-boldface.otf') format('opentype');
|
||||
src: url('../iconfont/sy-boldface.otf') format('opentype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Ali-mother-counts-bold';
|
||||
src: url('../fonts/Ali-mother-counts-bold.ttf') format('truetype');
|
||||
src: url('../iconfont/Ali-mother-counts-bold.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'SourceHanSans';
|
||||
src: url('../iconfont/SourceHanSansCN-Medium.otf') format('opentype');
|
||||
}
|
||||
|
||||
@ -1,14 +1,22 @@
|
||||
<template>
|
||||
<div class="YJ-custom-base-dialog" :class="className" ref="baseDialog" :id="id" :style="{
|
||||
<div
|
||||
class="YJ-custom-base-dialog"
|
||||
:class="className"
|
||||
ref="baseDialog"
|
||||
:id="id"
|
||||
:style="{
|
||||
width: width,
|
||||
height: height,
|
||||
top: top,
|
||||
left: left,
|
||||
position: fix ? 'fixed' : 'absolute'
|
||||
}" v-if="dialogVisible" 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;">
|
||||
}"
|
||||
v-if="dialogVisible"
|
||||
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>
|
||||
@ -20,237 +28,233 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch, onMounted, nextTick } from 'vue';
|
||||
import { ref, watch, onMounted, nextTick } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: ''
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: ''
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: ''
|
||||
},
|
||||
top: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: ''
|
||||
},
|
||||
left: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: ''
|
||||
},
|
||||
id: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: ''
|
||||
},
|
||||
bodyId: {
|
||||
type: String,
|
||||
default: "",
|
||||
default: ''
|
||||
},
|
||||
clearAnimation: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
fix: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
type: String
|
||||
},
|
||||
nofold: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
isfold: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
noClose: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
default: false
|
||||
},
|
||||
closeCallback: {
|
||||
type: Function,
|
||||
default: () => { },
|
||||
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([]);
|
||||
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;
|
||||
dialogVisible.value = val
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
)
|
||||
|
||||
// 组件挂载后执行
|
||||
onMounted(() => {
|
||||
// 可以在这里添加初始化逻辑
|
||||
});
|
||||
})
|
||||
|
||||
// 方法定义
|
||||
const open = (data) => {
|
||||
if (!first.value) {
|
||||
first.value = true;
|
||||
dialogVisible.value = true;
|
||||
first.value = true
|
||||
dialogVisible.value = true
|
||||
nextTick(() => {
|
||||
moveDiv();
|
||||
});
|
||||
moveDiv()
|
||||
})
|
||||
}
|
||||
dialogVisible.value = true;
|
||||
dialogVisible.value = true
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
openPosition();
|
||||
}, 0);
|
||||
});
|
||||
};
|
||||
openPosition()
|
||||
}, 0)
|
||||
})
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
dialogVisible.value = false;
|
||||
dialogVisible.value = false
|
||||
if (props.clearAnimation) {
|
||||
// 假设mapService是全局可用的
|
||||
window.mapService?.removeAnimation();
|
||||
window.mapService?.removeAnimation()
|
||||
}
|
||||
callback.value && callback.value();
|
||||
callback.value && callback.value()
|
||||
|
||||
props.closeCallback && props.closeCallback()
|
||||
};
|
||||
}
|
||||
|
||||
const moveDiv = () => {
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
let l = 0;
|
||||
let t = 0;
|
||||
let x = 0
|
||||
let y = 0
|
||||
let l = 0
|
||||
let t = 0
|
||||
|
||||
const oClickDiv = baseDialog.value;
|
||||
const oMoveDiv = titleBox.value;
|
||||
const oClickDiv = baseDialog.value
|
||||
const oMoveDiv = titleBox.value
|
||||
if (oClickDiv) {
|
||||
console.log(oMoveDiv)
|
||||
oMoveDiv.onmousedown = (e) => {
|
||||
// 获取对话框尺寸
|
||||
const oMoveDivHeight = baseDialog.value.offsetHeight;
|
||||
const oMoveDivWidth = baseDialog.value.offsetWidth;
|
||||
const oMoveDivHeight = baseDialog.value.offsetHeight
|
||||
const oMoveDivWidth = baseDialog.value.offsetWidth
|
||||
|
||||
x = e.clientX;
|
||||
y = e.clientY;
|
||||
x = e.clientX
|
||||
y = e.clientY
|
||||
|
||||
const leftPx = window.getComputedStyle(baseDialog.value).left;
|
||||
const topPx = window.getComputedStyle(baseDialog.value).top;
|
||||
const leftPx = window.getComputedStyle(baseDialog.value).left
|
||||
const topPx = window.getComputedStyle(baseDialog.value).top
|
||||
|
||||
l = parseFloat(leftPx);
|
||||
t = parseFloat(topPx);
|
||||
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 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;
|
||||
e.preventDefault()
|
||||
const nx = e.clientX
|
||||
const ny = e.clientY
|
||||
|
||||
// 计算新位置
|
||||
let newLeft = nx - (x - l);
|
||||
let newTop = ny - (y - t);
|
||||
let newLeft = nx - (x - l)
|
||||
let newTop = ny - (y - t)
|
||||
|
||||
// 边界检查
|
||||
if (newLeft < 0) {
|
||||
newLeft = 0;
|
||||
newLeft = 0
|
||||
} else if (newLeft + oMoveDivWidth > windowWidth) {
|
||||
newLeft = windowWidth - oMoveDivWidth;
|
||||
newLeft = windowWidth - oMoveDivWidth
|
||||
}
|
||||
|
||||
if (newTop <= 0) {
|
||||
newTop = 0;
|
||||
newTop = 0
|
||||
} else if (newTop + oMoveDivHeight > windowHeight) {
|
||||
newTop = windowHeight - oMoveDivHeight;
|
||||
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";
|
||||
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.removeEventListener('mousemove', handleMouseMove)
|
||||
window.removeEventListener('mouseup', handleMouseUp)
|
||||
}
|
||||
|
||||
// 添加事件监听
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
window.addEventListener('mousemove', handleMouseMove)
|
||||
window.addEventListener('mouseup', handleMouseUp)
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const openPosition = () => {
|
||||
const oMoveDiv = baseDialog.value;
|
||||
if (!oMoveDiv) return;
|
||||
const oMoveDiv = baseDialog.value
|
||||
if (!oMoveDiv) return
|
||||
|
||||
// 获取对话框尺寸
|
||||
const oMoveDivHeight = oMoveDiv.offsetHeight;
|
||||
const oMoveDivWidth = oMoveDiv.offsetWidth;
|
||||
const oMoveDivHeight = oMoveDiv.offsetHeight
|
||||
const oMoveDivWidth = oMoveDiv.offsetWidth
|
||||
|
||||
// 获取当前位置
|
||||
const leftPx = parseFloat(window.getComputedStyle(oMoveDiv).left);
|
||||
const topPx = parseFloat(window.getComputedStyle(oMoveDiv).top);
|
||||
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;
|
||||
const container = props.bodyId ? document.getElementById(props.bodyId) : document.body
|
||||
const windowHeight = container.clientHeight
|
||||
const windowWidth = container.clientWidth
|
||||
|
||||
// 边界检查
|
||||
let newLeft = leftPx;
|
||||
let newTop = topPx;
|
||||
let newLeft = leftPx
|
||||
let newTop = topPx
|
||||
|
||||
if (newLeft < 0) {
|
||||
newLeft = 0;
|
||||
newLeft = 0
|
||||
} else if (newLeft + oMoveDivWidth > windowWidth) {
|
||||
newLeft = windowWidth - oMoveDivWidth;
|
||||
newLeft = windowWidth - oMoveDivWidth
|
||||
}
|
||||
|
||||
if (newTop - 10 <= 0) {
|
||||
newTop = -10;
|
||||
newTop = -10
|
||||
} else if (newTop + oMoveDivHeight > windowHeight) {
|
||||
newTop = windowHeight - oMoveDivHeight;
|
||||
newTop = windowHeight - oMoveDivHeight
|
||||
}
|
||||
|
||||
// 更新位置
|
||||
oMoveDiv.style.left = newLeft + "px";
|
||||
oMoveDiv.style.top = newTop + "px";
|
||||
};
|
||||
oMoveDiv.style.left = newLeft + 'px'
|
||||
oMoveDiv.style.top = newTop + 'px'
|
||||
}
|
||||
|
||||
// 暴露公共方法
|
||||
defineExpose({
|
||||
@ -258,7 +262,7 @@ defineExpose({
|
||||
close,
|
||||
moveDiv,
|
||||
openPosition
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -272,14 +276,15 @@ defineExpose({
|
||||
.el-tabs__item:nth-child(2) {
|
||||
padding-left: 0;
|
||||
}
|
||||
.el-tabs__item.is-active, .el-tabs__item:hover {
|
||||
.el-tabs__item.is-active,
|
||||
.el-tabs__item:hover {
|
||||
color: #fff;
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
background-color: rgb(0, 255, 255);
|
||||
}
|
||||
.el-tabs__nav-wrap:after {
|
||||
background-color: rgba(204, 204, 204, 0.2)
|
||||
background-color: rgba(204, 204, 204, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,7 +67,7 @@ const submitForm = async (formEl: FormInstance | undefined) => {
|
||||
const add = throttle(async () => {
|
||||
let parentId = getKeyOfSelectedNode(window.treeObj, 'id')
|
||||
let fnone = getSelectedNode(window.treeObj)
|
||||
const res:any = await TreeApi.addDirectory({
|
||||
const res: any = await TreeApi.addDirectory({
|
||||
id: new YJ.Tools().randomString(),
|
||||
sourceName: form.sourceName,
|
||||
parentId
|
||||
|
||||
4
src/renderer/src/icons/svg/location.svg
Normal file
4
src/renderer/src/icons/svg/location.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="9.85693359375" height="12" viewBox="0 0 9.85693359375 12" fill="none">
|
||||
<path d="M4.92857 12C1.6194 9.59999 0 7.27058 0 4.94117C0 2.18823 2.18266 0 4.92857 0C7.67449 0 9.85714 2.18823 9.85714 4.94117C9.85714 7.27058 8.23775 9.59999 4.92857 12ZM4.92857 10.0235C7.25204 8.25883 8.44897 6.56471 8.44897 4.94117C8.44897 2.96471 6.9 1.41176 4.92857 1.41176C2.95714 1.41176 1.40817 2.96471 1.40817 4.94117C1.40817 6.56471 2.6051 8.25883 4.92857 10.0235ZM4.92857 7.05882C3.73164 7.05882 2.81633 6.14118 2.81633 4.94117C2.81633 3.74117 3.73164 2.82352 4.92857 2.82352C6.1255 2.82352 7.04081 3.74117 7.04081 4.94117C7.04081 6.14118 6.1255 7.05882 4.92857 7.05882ZM4.92857 5.64706C5.35102 5.64706 5.63266 5.3647 5.63266 4.94117C5.63266 4.51764 5.35102 4.2353 4.92857 4.2353C4.50612 4.2353 4.22449 4.51764 4.22449 4.94117C4.22449 5.3647 4.50612 5.64706 4.92857 5.64706Z" fill="#FFFFFF" >
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 983 B |
4
src/renderer/src/icons/svg/mouseLocation.svg
Normal file
4
src/renderer/src/icons/svg/mouseLocation.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="19.36865234375" height="20.00006103515625" viewBox="0 0 19.36865234375 20.00006103515625" fill="none">
|
||||
<path d="M11.576 11.2284L11.576 20.0001L14.6489 16.2511L19.3684 15.6138L11.576 11.2284ZM12.1851 1.9763C9.39733 -0.658764 4.87883 -0.658764 2.09052 1.9763C-0.696842 4.61179 -0.696842 8.88484 2.09052 11.5203L7.13785 18.0964L10.4587 13.769L10.4587 9.33545L12.923 10.6664C14.9237 8.03041 14.6917 4.3466 12.1851 1.9763ZM7.15898 8.58755C5.46872 8.58755 4.09827 7.30834 4.09827 5.72963C4.09827 4.15137 5.46872 2.87173 7.15898 2.87173C8.84876 2.87173 10.2183 4.15137 10.2183 5.72963C10.2183 7.30834 8.84876 8.58755 7.15898 8.58755Z" fill="#00FFFF" >
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 752 B |
4
src/renderer/src/icons/svg/turn.svg
Normal file
4
src/renderer/src/icons/svg/turn.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" fill="none">
|
||||
<path d="M3.06995 0.0336822C3.30345 -0.0134909 3.72175 0.0203715 4.04432 0.0203715L8.80938 0.0203715C9.40915 0.0203715 10.1307 -0.0457695 10.6647 0.0603036C11.1902 0.1647 11.5443 0.463472 11.7725 0.858946C12.0226 1.29218 11.9994 1.8259 11.9994 2.52278L11.9994 10.1232C11.9994 11.3662 11.3459 12 10.0774 12L3.41699 12C3.05145 12 2.7978 11.9615 2.78966 11.6805C2.77859 11.2992 3.13767 11.3345 3.59051 11.3345L9.62358 11.3345C9.9666 11.3345 10.3532 11.3732 10.5979 11.3078C10.9435 11.2156 11.2516 10.9028 11.3187 10.5225C11.3785 10.1841 11.3321 9.80816 11.3321 9.41772L11.3321 2.70913C11.3321 2.34708 11.3626 1.95707 11.3321 1.59103C11.2915 1.1051 10.9141 0.772719 10.5312 0.699218C10.2419 0.643685 9.88335 0.685907 9.54349 0.685907L3.55046 0.685907C3.25907 0.685907 2.87412 0.72524 2.803 0.446314C2.74999 0.238375 2.86113 0.0758638 3.06995 0.0336822ZM4.9653 7.34125L2.00215 7.34125C1.65943 7.34125 1.32269 7.37425 1.04113 7.31463C0.477442 7.19527 0.00413877 6.69706 2.77496e-05 6.02349C-0.00437695 5.30309 0.516243 4.73537 1.24135 4.67911C1.82735 4.63364 2.47369 4.67911 3.11 4.67911L4.9653 4.67911C5.01246 4.16292 4.79863 2.94146 5.29899 2.94872C5.53703 2.95217 5.7177 3.11918 5.87293 3.24155C6.7027 3.89572 7.45568 4.47287 8.31552 5.11836C8.57959 5.3166 9.11366 5.62915 9.10303 6.05011C9.09247 6.46816 8.55953 6.78468 8.30218 6.98186C7.46283 7.62495 6.69288 8.19646 5.84623 8.83205C5.69609 8.94478 5.46648 9.11088 5.2456 9.05833C4.76802 8.9447 5.0393 7.88096 4.9653 7.34125Z" fill="#FFFFFF" >
|
||||
</path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
138
src/renderer/src/utils/HighDefinitionScreenshot.ts
Normal file
138
src/renderer/src/utils/HighDefinitionScreenshot.ts
Normal file
@ -0,0 +1,138 @@
|
||||
export function processBase64Images(base64Data1, base64Data2, callback) {
|
||||
if (!base64Data1 || !base64Data2) {
|
||||
alert("请输入两个Base64图像数据");
|
||||
return;
|
||||
}
|
||||
// 创建Image对象并加载第一个Base64图像
|
||||
const img1 = new Image();
|
||||
img1.onload = function () {
|
||||
// 创建Image对象并加载第二个Base64图像
|
||||
const img2 = new Image();
|
||||
img2.onload = function () {
|
||||
// 计算拼接后的Canvas尺寸（这里示例为水平拼接，垂直拼接可调整计算方式）
|
||||
const totalWidth = img1.width + img2.width;
|
||||
const maxHeight = Math.max(img1.height, img2.height);
|
||||
console.log("maxHeight", maxHeight);
|
||||
const resultCanvas = document.createElement("canvas");
|
||||
// 设置结果Canvas的尺寸
|
||||
resultCanvas.width = totalWidth;
|
||||
resultCanvas.height = maxHeight;
|
||||
|
||||
// 获取Canvas绘图上下文
|
||||
const ctx = resultCanvas.getContext("2d");
|
||||
|
||||
// 绘制第一个图像（左上角开始）
|
||||
ctx.drawImage(img1, 0, 0);
|
||||
|
||||
// 绘制第二个图像（第一个图像右侧）
|
||||
ctx.drawImage(img2, img1.width, 0);
|
||||
|
||||
// 获取拼接后的Base64结果（默认为PNG格式，可指定其他格式如JPEG）
|
||||
const resultBase64Data = resultCanvas.toDataURL("image/png");
|
||||
callback(resultBase64Data);
|
||||
console.log("图像拼接完成，Base64结果已生成");
|
||||
};
|
||||
img2.src = base64Data1;
|
||||
};
|
||||
img1.src = base64Data2;
|
||||
}
|
||||
/**
|
||||
* 拼接两个Base64图像并返回新的Base64
|
||||
* @param {string} base641 第一个Base64图像数据
|
||||
* @param {number} width1 第一个图像要截取的宽度
|
||||
* @param {string} base642 第二个Base64图像数据
|
||||
* @param {number} width2 第二个图像要截取的宽度
|
||||
* @param {string} [format='image/png'] 输出图像格式
|
||||
* @param {number} [quality=1.0] 输出图像质量(0-1)，仅对支持的格式有效
|
||||
* @returns {Promise<string>} 拼接后的Base64图像数据
|
||||
*/
|
||||
export function combineBase64Images(
|
||||
base641,
|
||||
width1,
|
||||
base642,
|
||||
width2,
|
||||
format = "image/png",
|
||||
quality = 1.0
|
||||
) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 创建canvas元素
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// 设置canvas宽度和高度
|
||||
canvas.width = width1 + width2;
|
||||
canvas.height = 0; // 高度将在图像加载后确定
|
||||
|
||||
// 创建图像对象
|
||||
const img1 = new Image();
|
||||
const img2 = new Image();
|
||||
|
||||
// 错误处理
|
||||
function handleError(error) {
|
||||
reject(new Error(`图像处理错误: ${error.message}`));
|
||||
}
|
||||
|
||||
// 监听两个图像都加载完成
|
||||
let loadedCount = 0;
|
||||
function checkAllLoaded() {
|
||||
loadedCount++;
|
||||
if (loadedCount === 2) {
|
||||
drawAndResolve();
|
||||
}
|
||||
}
|
||||
|
||||
// 图像1加载事件
|
||||
img1.onload = function () {
|
||||
checkAllLoaded();
|
||||
};
|
||||
|
||||
// 图像2加载事件
|
||||
img2.onload = function () {
|
||||
checkAllLoaded();
|
||||
};
|
||||
|
||||
// 图像加载错误事件
|
||||
img1.onerror = img2.onerror = handleError;
|
||||
|
||||
// 加载图像
|
||||
img1.src = base641;
|
||||
img2.src = base642;
|
||||
|
||||
// 绘制图像并解析为Base64
|
||||
function drawAndResolve() {
|
||||
try {
|
||||
// 确定canvas高度为两个图像高度的最大值
|
||||
const height1 = img1.height;
|
||||
const height2 = img2.height;
|
||||
canvas.height = Math.max(height1, height2);
|
||||
|
||||
// 清除画布
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// 绘制第一个图像的左侧部分 (从左往右截取width1)
|
||||
ctx.drawImage(img1, 0, 0, width1, height1, 0, 0, width1, canvas.height);
|
||||
|
||||
// 绘制第二个图像的右侧部分 (从右往左截取width2)
|
||||
// 计算在原图上的截取起点 (从右侧开始)
|
||||
const sourceX = img2.width - width2;
|
||||
ctx.drawImage(
|
||||
img2,
|
||||
sourceX,
|
||||
0,
|
||||
width2,
|
||||
height2,
|
||||
width1,
|
||||
0,
|
||||
width2,
|
||||
canvas.height
|
||||
);
|
||||
|
||||
// 将canvas内容转换为Base64
|
||||
const resultBase64 = canvas.toDataURL(format, quality);
|
||||
resolve(resultBase64);
|
||||
} catch (error) {
|
||||
handleError(error);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
const { ipcRenderer } = require('electron')
|
||||
export const $changeComponentShow = (selector: any, state: any, styleStr: any = false) => {
|
||||
$(selector).css({ visibility: state ? 'visible' : 'hidden' })
|
||||
if (styleStr) {
|
||||
@ -17,3 +18,13 @@ export const $changeComponentPop = (selector: any, state: any, styleStr: any = f
|
||||
if (str[0] === 'z-index') $(selector).css({ zIndex: str[1] })
|
||||
}
|
||||
}
|
||||
|
||||
export const $sendElectronChanel = (chanel: any, arg: any = null) => {
|
||||
console.log('发送给electron', chanel, arg);
|
||||
ipcRenderer.send(chanel, arg);
|
||||
};
|
||||
export const $recvElectronChanel = (chanel: any, cb: any) => {
|
||||
console.log('接收来自electron', chanel);
|
||||
ipcRenderer.once(chanel, cb);
|
||||
};
|
||||
|
||||
|
||||
@ -15,11 +15,13 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { inject } from "vue";
|
||||
import { inject } from 'vue'
|
||||
import { TreeApi } from '@/api/tree'
|
||||
import { initMapData } from '../tree/initMapData'
|
||||
import { useTreeNode } from '../tree/hooks/treeNode'
|
||||
const { cusAddNodes } = useTreeNode()
|
||||
const { t } = useI18n()
|
||||
const eventBus: any = inject("bus");
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
const i8n = ref({
|
||||
DrawRect: 'rect',
|
||||
@ -42,7 +44,7 @@ const bottomMenuList = ref([
|
||||
sourceType: 'groundText',
|
||||
className: 'public',
|
||||
fun: () => {
|
||||
eventBus.emit("openDialog", 'addGroundText');
|
||||
eventBus.emit('openDialog', 'addGroundText')
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -51,7 +53,7 @@ const bottomMenuList = ref([
|
||||
sourceType: 'standText',
|
||||
className: 'public',
|
||||
fun: () => {
|
||||
eventBus.emit("openDialog", 'addStandText');
|
||||
eventBus.emit('openDialog', 'addStandText')
|
||||
// eventBus.emit("openDialog", 'standText');
|
||||
}
|
||||
},
|
||||
@ -71,19 +73,24 @@ const bottomMenuList = ref([
|
||||
let options: any = await initMapData('point', {
|
||||
id: id,
|
||||
name: name,
|
||||
position: position,
|
||||
position: position
|
||||
})
|
||||
let selectedNodes = window.treeObj.getSelectedNodes()
|
||||
delete options.host
|
||||
let params = {
|
||||
"id": id,
|
||||
"sourceName": name,
|
||||
"sourceType": "point",
|
||||
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
|
||||
id: id,
|
||||
sourceName: name,
|
||||
sourceType: 'point',
|
||||
// isShow: 1,
|
||||
parentId:
|
||||
selectedNodes && selectedNodes[selectedNodes.length - 1]
|
||||
? selectedNodes[selectedNodes.length - 1].id
|
||||
: undefined,
|
||||
// "treeIndex": 0,
|
||||
"params": options
|
||||
params: options
|
||||
}
|
||||
TreeApi.addOtherSource(params)
|
||||
cusAddNodes(window.treeObj, params.parentId, [params])
|
||||
})
|
||||
}
|
||||
},
|
||||
@ -105,18 +112,23 @@ const bottomMenuList = ref([
|
||||
let options: any = await initMapData('line', {
|
||||
id: id,
|
||||
name: name,
|
||||
positions: positions,
|
||||
positions: positions
|
||||
})
|
||||
let selectedNodes = window.treeObj.getSelectedNodes()
|
||||
let params = {
|
||||
"id": id,
|
||||
"sourceName": name,
|
||||
"sourceType": "line",
|
||||
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
|
||||
id: id,
|
||||
sourceName: name,
|
||||
sourceType: 'line',
|
||||
// isShow: 1,
|
||||
parentId:
|
||||
selectedNodes && selectedNodes[selectedNodes.length - 1]
|
||||
? selectedNodes[selectedNodes.length - 1].id
|
||||
: undefined,
|
||||
// "treeIndex": 0,
|
||||
"params": options
|
||||
params: options
|
||||
}
|
||||
TreeApi.addOtherSource(params)
|
||||
cusAddNodes(window.treeObj, params.parentId, [params])
|
||||
})
|
||||
}
|
||||
},
|
||||
@ -136,19 +148,23 @@ const bottomMenuList = ref([
|
||||
let options: any = await initMapData('curve', {
|
||||
id: id,
|
||||
name: name,
|
||||
positions: positions,
|
||||
positions: positions
|
||||
})
|
||||
|
||||
let selectedNodes = window.treeObj.getSelectedNodes()
|
||||
let params = {
|
||||
"id": id,
|
||||
"sourceName": name,
|
||||
"sourceType": "curve",
|
||||
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
|
||||
id: id,
|
||||
sourceName: name,
|
||||
sourceType: 'curve',
|
||||
// isShow: 1,
|
||||
parentId:
|
||||
selectedNodes && selectedNodes[selectedNodes.length - 1]
|
||||
? selectedNodes[selectedNodes.length - 1].id
|
||||
: undefined,
|
||||
// "treeIndex": 0,
|
||||
"params": options
|
||||
params: options
|
||||
}
|
||||
TreeApi.addOtherSource(params)
|
||||
cusAddNodes(window.treeObj, params.parentId, [params])
|
||||
})
|
||||
}
|
||||
},
|
||||
@ -173,21 +189,25 @@ const bottomMenuList = ref([
|
||||
let options: any = await initMapData('panel', {
|
||||
id: id,
|
||||
name: name,
|
||||
positions: positions,
|
||||
positions: positions
|
||||
})
|
||||
|
||||
let selectedNodes = window.treeObj.getSelectedNodes()
|
||||
let params = {
|
||||
"id": id,
|
||||
"sourceName": name,
|
||||
"sourceType": "panel",
|
||||
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
|
||||
id: id,
|
||||
sourceName: name,
|
||||
sourceType: 'panel',
|
||||
// isShow: 1,
|
||||
parentId:
|
||||
selectedNodes && selectedNodes[selectedNodes.length - 1]
|
||||
? selectedNodes[selectedNodes.length - 1].id
|
||||
: undefined,
|
||||
// "treeIndex": 0,
|
||||
"params": options
|
||||
params: options
|
||||
}
|
||||
console.log(params)
|
||||
// eventBus.emit("openDialog", 'panel');
|
||||
TreeApi.addOtherSource(params)
|
||||
cusAddNodes(window.treeObj, params.parentId, [params])
|
||||
})
|
||||
}
|
||||
},
|
||||
@ -196,6 +216,37 @@ 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 name = '圆'
|
||||
let options: any = await initMapData('circle', {
|
||||
id: id,
|
||||
name: name,
|
||||
center: opt.center, radius: opt.radius
|
||||
})
|
||||
|
||||
delete options.host
|
||||
|
||||
console.log('options', options)
|
||||
|
||||
let selectedNodes = window.treeObj.getSelectedNodes()
|
||||
let params = {
|
||||
id: id,
|
||||
sourceName: name,
|
||||
sourceType: "circle",
|
||||
// isShow: 1,
|
||||
parentId: (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
|
||||
// "treeIndex": 0,
|
||||
params: options
|
||||
}
|
||||
|
||||
// eventBus.emit("openDialog", 'circle');
|
||||
// TreeApi.addOtherSource(params)
|
||||
cusAddNodes(window.treeObj, params.parentId, [params])
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
sourceName: '矩形',
|
||||
@ -218,21 +269,26 @@ const bottomMenuList = ref([
|
||||
let options: any = await initMapData('panel', {
|
||||
id: id,
|
||||
name: name,
|
||||
positions: positions,
|
||||
positions: positions
|
||||
})
|
||||
|
||||
let selectedNodes = window.treeObj.getSelectedNodes()
|
||||
let params = {
|
||||
"id": id,
|
||||
"sourceName": name,
|
||||
"sourceType": "rectangle",
|
||||
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
|
||||
id: id,
|
||||
sourceName: name,
|
||||
sourceType: 'rectangle',
|
||||
// isShow: 1,
|
||||
parentId:
|
||||
selectedNodes && selectedNodes[selectedNodes.length - 1]
|
||||
? selectedNodes[selectedNodes.length - 1].id
|
||||
: undefined,
|
||||
// "treeIndex": 0,
|
||||
"params": options
|
||||
params: options
|
||||
}
|
||||
console.log(params)
|
||||
// eventBus.emit("openDialog", 'panel');
|
||||
TreeApi.addOtherSource(params)
|
||||
cusAddNodes(window.treeObj, params.parentId, [params])
|
||||
})
|
||||
}
|
||||
},
|
||||
@ -257,23 +313,28 @@ const bottomMenuList = ref([
|
||||
let options: any = await initMapData('rendezvous', {
|
||||
id: id,
|
||||
name: name,
|
||||
positions: positions,
|
||||
positions: positions
|
||||
})
|
||||
|
||||
delete options.label.ground
|
||||
delete options.label.position
|
||||
let selectedNodes = window.treeObj.getSelectedNodes()
|
||||
let params = {
|
||||
"id": id,
|
||||
"sourceName": name,
|
||||
"sourceType": "rendezvous",
|
||||
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
|
||||
id: id,
|
||||
sourceName: name,
|
||||
sourceType: 'rendezvous',
|
||||
// isShow: 1,
|
||||
parentId:
|
||||
selectedNodes && selectedNodes[selectedNodes.length - 1]
|
||||
? selectedNodes[selectedNodes.length - 1].id
|
||||
: undefined,
|
||||
// "treeIndex": 0,
|
||||
"params": options
|
||||
params: options
|
||||
}
|
||||
console.log(params)
|
||||
// eventBus.emit("openDialog", 'panel');
|
||||
TreeApi.addOtherSource(params)
|
||||
cusAddNodes(window.treeObj, params.parentId, [params])
|
||||
})
|
||||
}
|
||||
},
|
||||
@ -298,23 +359,28 @@ const bottomMenuList = ref([
|
||||
let options: any = await initMapData('attackArrow', {
|
||||
id: id,
|
||||
name: name,
|
||||
positions: positions,
|
||||
positions: positions
|
||||
})
|
||||
|
||||
delete options.label.ground
|
||||
delete options.label.position
|
||||
let selectedNodes = window.treeObj.getSelectedNodes()
|
||||
let params = {
|
||||
"id": id,
|
||||
"sourceName": name,
|
||||
"sourceType": "attackArrow",
|
||||
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
|
||||
id: id,
|
||||
sourceName: name,
|
||||
sourceType: 'attackArrow',
|
||||
// isShow: 1,
|
||||
parentId:
|
||||
selectedNodes && selectedNodes[selectedNodes.length - 1]
|
||||
? selectedNodes[selectedNodes.length - 1].id
|
||||
: undefined,
|
||||
// "treeIndex": 0,
|
||||
"params": options
|
||||
params: options
|
||||
}
|
||||
console.log(params)
|
||||
// eventBus.emit("openDialog", 'panel');
|
||||
TreeApi.addOtherSource(params)
|
||||
cusAddNodes(window.treeObj, params.parentId, [params])
|
||||
})
|
||||
}
|
||||
},
|
||||
@ -340,22 +406,27 @@ const bottomMenuList = ref([
|
||||
let options: any = await initMapData('pincerArrow', {
|
||||
id: id,
|
||||
name: name,
|
||||
positions: positions,
|
||||
positions: positions
|
||||
})
|
||||
|
||||
delete options.label.ground
|
||||
delete options.label.position
|
||||
let selectedNodes = window.treeObj.getSelectedNodes()
|
||||
let params = {
|
||||
"id": id,
|
||||
"sourceName": name,
|
||||
"sourceType": "pincerArrow",
|
||||
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
|
||||
id: id,
|
||||
sourceName: name,
|
||||
sourceType: 'pincerArrow',
|
||||
// isShow: 1,
|
||||
parentId:
|
||||
selectedNodes && selectedNodes[selectedNodes.length - 1]
|
||||
? selectedNodes[selectedNodes.length - 1].id
|
||||
: undefined,
|
||||
// "treeIndex": 0,
|
||||
"params": options
|
||||
params: options
|
||||
}
|
||||
// eventBus.emit("openDialog", 'panel');
|
||||
TreeApi.addOtherSource(params)
|
||||
cusAddNodes(window.treeObj, params.parentId, [params])
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,19 +2,30 @@
|
||||
<div class="leftBox">
|
||||
<div class="left animate__animated">
|
||||
<div class="menus">
|
||||
<div class="menus_itemBox" v-for="(item, index) in menuList" :title="t(`firstMenu.${item.name}`)">
|
||||
<div class="item_icon" @click="(e) => { handleClick(item, e) }">
|
||||
<div
|
||||
class="menus_itemBox"
|
||||
v-for="(item, index) in menuList"
|
||||
:title="t(`firstMenu.${item.name}`)"
|
||||
>
|
||||
<div
|
||||
class="item_icon"
|
||||
@click="
|
||||
(e) => {
|
||||
handleClick(item, e)
|
||||
}
|
||||
"
|
||||
>
|
||||
<!-- <svg-icon :class-name="['absolute', 'zIndex-1', 'left_item_bg']" icon-class="bg2"></svg-icon> -->
|
||||
<svg-icon :name="item.svg" :size="16" color="rgba(0, 255, 255, 1)"></svg-icon>
|
||||
<div class="item_text">
|
||||
{{ t(`firstMenu.${item.name}`) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<leftSideSecond class="absolute zIndex99 leftSideSecond" ref="leftSideSecondRef"></leftSideSecond>
|
||||
<leftSideSecond
|
||||
class="absolute zIndex99 leftSideSecond"
|
||||
ref="leftSideSecondRef"
|
||||
></leftSideSecond>
|
||||
</div>
|
||||
</div>
|
||||
<div class="left_bottom" @click="fold"></div>
|
||||
@ -28,7 +39,8 @@ import { bus } from '@/utils/bus'
|
||||
import leftSideSecond from '@/views/components/leftSide/leftSideSecond.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const menuList = ref([
|
||||
const eventBus: any = inject('bus')
|
||||
const menuList: any = ref([
|
||||
// 方案推演
|
||||
{
|
||||
name: 'situation',
|
||||
@ -52,20 +64,20 @@ const menuList = ref([
|
||||
// fun: this.showSecondMenu,
|
||||
key: 'effect',
|
||||
children: [
|
||||
"trajectoryMotion",
|
||||
"electronicFence",
|
||||
'trajectoryMotion',
|
||||
'electronicFence',
|
||||
// "nightVision",
|
||||
"radarLightWave",
|
||||
"diffusedLightWave",
|
||||
"scanStereoscopic",
|
||||
"multilateralBody",
|
||||
"waterSurface",
|
||||
"fountain",
|
||||
"waterL",
|
||||
"fire",
|
||||
"explosion",
|
||||
"smoke",
|
||||
"nightVision",
|
||||
'radarLightWave',
|
||||
'diffusedLightWave',
|
||||
'scanStereoscopic',
|
||||
'multilateralBody',
|
||||
'waterSurface',
|
||||
'fountain',
|
||||
'waterL',
|
||||
'fire',
|
||||
'explosion',
|
||||
'smoke',
|
||||
'nightVision'
|
||||
// "nightVision",
|
||||
]
|
||||
},
|
||||
@ -76,16 +88,16 @@ const menuList = ref([
|
||||
// fun: this.showSecondMenu,
|
||||
key: 'analysis',
|
||||
children: [
|
||||
"inundationAnalysis",
|
||||
"profileAnalysis",
|
||||
"sightAnalysis",
|
||||
"kenAnalysis",
|
||||
"circleKen",
|
||||
"slopeDirection",
|
||||
"cutFill",
|
||||
"contour",
|
||||
"globalContour",
|
||||
"clear",
|
||||
'inundationAnalysis',
|
||||
'profileAnalysis',
|
||||
'sightAnalysis',
|
||||
'kenAnalysis',
|
||||
'circleKen',
|
||||
'slopeDirection',
|
||||
'cutFill',
|
||||
'contour',
|
||||
'globalContour',
|
||||
'clear'
|
||||
]
|
||||
},
|
||||
// 测量
|
||||
@ -95,17 +107,17 @@ const menuList = ref([
|
||||
// fun: this.showSecondMenu,
|
||||
key: 'measure',
|
||||
children: [
|
||||
"projectionArea",
|
||||
"projectionDistanceMeasure",
|
||||
"areaMeasure",
|
||||
"distanceMeasure",
|
||||
"heightMeasure",
|
||||
"triangleMeasure",
|
||||
"MeasureAzimuth",
|
||||
"MeasureAngle",
|
||||
"lopeDistanceMeasures",
|
||||
"coorMeasure",
|
||||
"clear",
|
||||
'projectionArea',
|
||||
'projectionDistanceMeasure',
|
||||
'areaMeasure',
|
||||
'distanceMeasure',
|
||||
'heightMeasure',
|
||||
'triangleMeasure',
|
||||
'MeasureAzimuth',
|
||||
'MeasureAngle',
|
||||
'lopeDistanceMeasures',
|
||||
'coorMeasure',
|
||||
'clear'
|
||||
]
|
||||
},
|
||||
|
||||
@ -116,26 +128,28 @@ const menuList = ref([
|
||||
// fun: this.showSecondMenu,
|
||||
key: 'tool',
|
||||
children: [
|
||||
"routePlan",
|
||||
//清除轨迹
|
||||
"graffiti",
|
||||
'routePlan',
|
||||
'clearRoute',
|
||||
'graffiti',
|
||||
// stopGraffiti: "结束涂鸦",
|
||||
"clearGraffiti",
|
||||
"path",
|
||||
"coorLocation",
|
||||
"mouseLocation",
|
||||
"annotationAggregation",
|
||||
// 卷帘对比
|
||||
// 屏幕截图
|
||||
// 高清出图
|
||||
// 视频录制
|
||||
"pressModel",
|
||||
"terrainDig",
|
||||
"tilesetClipping",
|
||||
"clearTilesetClipping",
|
||||
"projConvert",
|
||||
"projectionConvert",
|
||||
"gdbImport",
|
||||
'clearGraffiti',
|
||||
'path',
|
||||
'coorLocation',
|
||||
'mouseLocation',
|
||||
'annotationAggregation',
|
||||
'annotation',
|
||||
'screenShot',
|
||||
'highQuality',
|
||||
'videoRecord',
|
||||
'pressModel',
|
||||
'terrainDig',
|
||||
'tilesetClipping',
|
||||
'clearTilesetClipping',
|
||||
'projConvert',
|
||||
'projectionConvert',
|
||||
'gdbImport',
|
||||
'circleStatistics',
|
||||
'polygonStatistics'
|
||||
]
|
||||
},
|
||||
{
|
||||
@ -170,12 +184,12 @@ onMounted(() => {
|
||||
})
|
||||
const leftSideSecondRef = ref()
|
||||
const handleClick = (item: any, e) => {
|
||||
console.log("点击了", item, e);
|
||||
$(".leftSideSecond")[0].style.left = "100%";
|
||||
$(".leftSideSecond")[0].style.top = e.layerY - 120 + "px"
|
||||
$(".leftSideSecond")[0].style.display = "none"
|
||||
console.log('点击了', item, e)
|
||||
$('.leftSideSecond')[0].style.left = '100%'
|
||||
$('.leftSideSecond')[0].style.top = e.layerY - 120 + 'px'
|
||||
$('.leftSideSecond')[0].style.display = 'none'
|
||||
if (item.children.length) {
|
||||
$(".leftSideSecond")[0].style.display = "block"
|
||||
$('.leftSideSecond')[0].style.display = 'block'
|
||||
leftSideSecondRef.value.initList(item)
|
||||
}
|
||||
}
|
||||
@ -228,6 +242,24 @@ const fold = () => {
|
||||
(itemCount - 1) * itemDelay + itemDuration
|
||||
)
|
||||
}
|
||||
|
||||
const clickMenu = (item: any) => {
|
||||
console.log(item, 'item')
|
||||
switch (item.key) {
|
||||
case 'analysis':
|
||||
console.log('analysis')
|
||||
// eventBus.emit('analysisDialog')
|
||||
eventBus.emit('circleViewShedDialog') //添加高程后测试
|
||||
// eventBus.emit('submergeDialog')
|
||||
// eventBus.emit('profileDialog')
|
||||
// eventBus.emit('viewShedDialog')
|
||||
// eventBus.emit('cutFillDialog')
|
||||
// eventBus.emit('contourDialog')
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -321,10 +353,6 @@ const fold = () => {
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,162 +1,471 @@
|
||||
<template>
|
||||
<div class="leftSideSecond">
|
||||
<div class="leftSideSecondBox">
|
||||
|
||||
<template v-if="obj">
|
||||
<div class="menuItem" v-for="value in obj.children" @click="handleClick(value)">
|
||||
<img :src="'src/assets/images/second/' + `${value}` + '.png'" alt="">
|
||||
<span>{{ t(`${obj.key}.${value}`) }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="leftSideSecond">
|
||||
<div class="leftSideSecondBox">
|
||||
<template v-if="obj">
|
||||
<div class="menuItem" v-for="value in obj.children" @click="handleClick(value)">
|
||||
<img
|
||||
:src="'src/assets/images/second/' + `${value}` + '.png'"
|
||||
style="color: rgb(255, 0, 0)"
|
||||
alt=""
|
||||
/>
|
||||
<span :style="{ color: !clickChange[value] ? 'var(--color-text)' : 'rgb(255,0,0)' }">{{
|
||||
t(`${obj.key}.${value}`)
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { ref, reactive, getCurrentInstance } from "vue"
|
||||
import { ref, reactive, getCurrentInstance } from 'vue'
|
||||
import { useTreeNode } from '../tree/hooks/treeNode'
|
||||
import { TreeApi } from '@/api/tree'
|
||||
import { renderMethods } from '../tree/hooks/renderTreeNode'
|
||||
import { processBase64Images, combineBase64Images } from '@/utils/HighDefinitionScreenshot'
|
||||
import { $sendElectronChanel, $recvElectronChanel } from '@/utils/communication'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import dayjs from 'dayjs'
|
||||
import fs from 'fs'
|
||||
const { proxy } = getCurrentInstance()
|
||||
const { t } = useI18n()
|
||||
const { findParentId, findTreeIndex } = useTreeNode()
|
||||
const { findParentId, findTreeIndex, cusAddNodes } = useTreeNode()
|
||||
const obj = ref(null)
|
||||
const isclick = ref(false)
|
||||
const eventBus = inject('bus')
|
||||
const initList = (value) => {
|
||||
obj.value = value
|
||||
obj.value = value
|
||||
}
|
||||
var clickChange = reactive({
|
||||
mouseLocation: false,
|
||||
annotation: false,
|
||||
annotationAggregation: false,
|
||||
videoRecord: false
|
||||
})
|
||||
var graffitiObjArr = reactive([])
|
||||
eventBus.on('graffitiObj', (data) => {
|
||||
graffitiObjArr.push(data)
|
||||
})
|
||||
const methodMap = {
|
||||
// 电子围墙
|
||||
electronicFence: () => {
|
||||
let draw = new YJ.Draw.DrawPolyline(window.earth);
|
||||
draw.start((err, positions) => {
|
||||
if (positions.length > 1) {
|
||||
let alt = positions[0].alt;
|
||||
positions.forEach((item) => {
|
||||
if (item.alt < alt) alt = item.alt;
|
||||
});
|
||||
let id = proxy.$md5(new Date().getTime() + "围墙");
|
||||
let params = {
|
||||
sourceName: "电子围墙",
|
||||
id,
|
||||
sourceType: "wallStereoscopic",
|
||||
parentId: findParentId(window.treeObj),
|
||||
params: {
|
||||
id,
|
||||
positions,
|
||||
color: "#fff",
|
||||
cornerType: undefined,
|
||||
extrudedHeight: 2.4,
|
||||
width: 0.24,
|
||||
},
|
||||
treeIndex: findTreeIndex(window.treeObj)
|
||||
}
|
||||
// console.log(params);
|
||||
// 渲染电子围墙
|
||||
renderMethods.renderWallStereoscopic(params)
|
||||
// 存入数据库
|
||||
let res = TreeApi.addOtherSource(params)
|
||||
console.log("addOtherSource", res);
|
||||
// 上树
|
||||
cusAddNodes(window.treeObj, params.parentId, [params])
|
||||
}
|
||||
// 轨迹运动
|
||||
trajectoryMotion: () => {
|
||||
// let draw = new YJ.Draw.DrawPolyline(window.earth)
|
||||
// draw.start((err, positions) => {
|
||||
// if (positions.length > 1) {}
|
||||
// })
|
||||
},
|
||||
// 电子围墙
|
||||
electronicFence: () => {
|
||||
let draw = new YJ.Draw.DrawPolyline(window.earth)
|
||||
draw.start((err, positions) => {
|
||||
if (positions.length > 1) {
|
||||
let alt = positions[0].alt
|
||||
positions.forEach((item) => {
|
||||
if (item.alt < alt) alt = item.alt
|
||||
})
|
||||
// let id = new YJ.Tools().randomString()
|
||||
let id = 'aaa'
|
||||
let params = {
|
||||
sourceName: '电子围墙',
|
||||
id,
|
||||
sourceType: 'wallStereoscopic',
|
||||
parentId: findParentId(window.treeObj),
|
||||
params: {
|
||||
id,
|
||||
positions,
|
||||
color: '#fff',
|
||||
cornerType: undefined,
|
||||
extrudedHeight: 2.4,
|
||||
width: 0.24
|
||||
},
|
||||
treeIndex: findTreeIndex(window.treeObj)
|
||||
}
|
||||
// console.log(params);
|
||||
// 渲染电子围墙
|
||||
renderMethods.renderWallStereoscopic(params)
|
||||
// 存入数据库
|
||||
// let res = TreeApi.addOtherSource(params)
|
||||
// console.log('addOtherSource', res)
|
||||
// 上树
|
||||
cusAddNodes(window.treeObj, params.parentId, [params])
|
||||
eventBus.emit('openDialog', 'wallStereoscopic')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 扩散光波
|
||||
radarLightWave: () => {
|
||||
let draw = new YJ.Draw.DrawCircle(window.earth)
|
||||
draw.start((err, params) => {
|
||||
console.log(params)
|
||||
if (params) {
|
||||
}
|
||||
})
|
||||
},
|
||||
//投影面积
|
||||
projectionArea: () => {
|
||||
new YJ.Measure.MeasureTyArea(window.earth).start()
|
||||
},
|
||||
//投影距离测量
|
||||
projectionDistanceMeasure: () => {
|
||||
new YJ.Measure.MeasureProjectionDistance(window.earth).start()
|
||||
},
|
||||
areaMeasure: () => {
|
||||
new YJ.Measure.MeasureTdArea(window.earth).start()
|
||||
},
|
||||
//距离测量
|
||||
distanceMeasure: () => {
|
||||
new YJ.Measure.MeasureDistance(window.earth).start()
|
||||
},
|
||||
//高度测量
|
||||
heightMeasure: () => {
|
||||
new YJ.Measure.MeasureHeight(window.earth).start()
|
||||
},
|
||||
//三角测量
|
||||
triangleMeasure: () => {
|
||||
new YJ.Measure.MeasureTriangle(window.earth).start()
|
||||
},
|
||||
// 方位角
|
||||
MeasureAzimuth() {
|
||||
new YJ.Measure.MeasureAzimuth(window.earth).start()
|
||||
},
|
||||
//夹角测量
|
||||
MeasureAngle() {
|
||||
new YJ.Measure.MeasureAngle(window.earth).start()
|
||||
},
|
||||
// 坡度测量
|
||||
lopeDistanceMeasures() {
|
||||
new YJ.Measure.MeasureSlopeDistance(window.earth).start()
|
||||
},
|
||||
//坐标测量
|
||||
coorMeasure() {
|
||||
new YJ.Measure.MeasureLocation(window.earth).start()
|
||||
},
|
||||
//清除测量
|
||||
clear() {
|
||||
YJ.Measure.Clear()
|
||||
},
|
||||
//淹没分析
|
||||
inundationAnalysis() {
|
||||
eventBus.emit('submergeDialog')
|
||||
},
|
||||
//剖面分析
|
||||
profileAnalysis() {
|
||||
eventBus.emit('profileDialog')
|
||||
},
|
||||
// 视线分析
|
||||
sightAnalysis() {
|
||||
eventBus.emit('analysisDialog')
|
||||
},
|
||||
//视域分析
|
||||
kenAnalysis() {
|
||||
eventBus.emit('viewShedDialog')
|
||||
},
|
||||
//圆形视域分析
|
||||
circleKen() {
|
||||
eventBus.emit('circleViewShedDialog')
|
||||
},
|
||||
//坡向分析
|
||||
slopeDirection() {
|
||||
new YJ.Analysis.SlopeAspect(window.earth)
|
||||
},
|
||||
// 填挖方分析
|
||||
cutFill() {
|
||||
eventBus.emit('cutFillDialog')
|
||||
},
|
||||
//全局等高线分析
|
||||
globalContour() {
|
||||
eventBus.emit('contourDialog')
|
||||
},
|
||||
//等高线分析
|
||||
contour() {
|
||||
let Draw = new YJ.Draw.DrawRect(window.earth)
|
||||
Draw.start((a, positions) => {
|
||||
// 等高线
|
||||
new YJ.Analysis.Contour(window.earth, { positions: positions })
|
||||
// YJ.Analysis.Clear();
|
||||
})
|
||||
},
|
||||
//分析清除
|
||||
clear() {
|
||||
YJ.Analysis.Clear()
|
||||
},
|
||||
//----------------工具------------------
|
||||
//路径规划
|
||||
routePlan() {
|
||||
eventBus.emit('routePlanningDialog')
|
||||
},
|
||||
//路径清除
|
||||
clearRoute() {},
|
||||
//涂鸦
|
||||
graffiti() {
|
||||
eventBus.emit('graffitiDialog')
|
||||
},
|
||||
//涂鸦清除
|
||||
clearGraffiti() {
|
||||
graffitiObjArr.forEach((item) => {
|
||||
item.remove()
|
||||
})
|
||||
},
|
||||
//路径
|
||||
path() {
|
||||
eventBus.emit('flyRoamDialog')
|
||||
},
|
||||
//坐标定位
|
||||
coorLocation() {
|
||||
eventBus.emit('coorLocationDialog')
|
||||
},
|
||||
//鼠标定位
|
||||
mouseLocation() {
|
||||
clickChange.mouseLocation = !clickChange.mouseLocation
|
||||
new YJ.Global.MouseCoordinate(window.earth, clickChange.mouseLocation)
|
||||
},
|
||||
//聚合标注
|
||||
annotationAggregation() {
|
||||
clickChange.annotationAggregation = !clickChange.annotationAggregation
|
||||
|
||||
},
|
||||
// 扩散光波
|
||||
radarLightWave: () => {
|
||||
let draw = new YJ.Draw.DrawCircle(window.earth);
|
||||
draw.start((err, params) => {
|
||||
console.log(params);
|
||||
if (params) {
|
||||
|
||||
}
|
||||
YJ.Global.switchCluster(window.earth, clickChange.annotationAggregation)
|
||||
},
|
||||
//卷帘对比
|
||||
annotation() {
|
||||
clickChange.annotation = !clickChange.annotation
|
||||
if (clickChange.annotation) {
|
||||
YJ.Global.splitScreen.on(window.earth)
|
||||
} else {
|
||||
YJ.Global.splitScreen.off()
|
||||
}
|
||||
},
|
||||
//屏幕截图
|
||||
async screenShot() {
|
||||
function downloadScreen(res) {
|
||||
let base64 = res.replace(/^data:image\/\w+;base64,/, '')
|
||||
console.log('base64', base64)
|
||||
let dataBuffer = new Buffer(base64, 'base64')
|
||||
$sendElectronChanel('saveFile', {
|
||||
title: '保存图片',
|
||||
filename: dayjs().format('YYYYMMDDHHmmss') + '截图',
|
||||
filters: [{ name: '保存图片', extensions: ['jpg'] }]
|
||||
})
|
||||
$recvElectronChanel('selectedFileItem', (e, path) => {
|
||||
console.log('path', fs.writeFile)
|
||||
fs.writeFile(path, dataBuffer, (res) => {
|
||||
console.log(res)
|
||||
})
|
||||
},
|
||||
//投影面积
|
||||
projectionArea: () => {
|
||||
new YJ.Measure.MeasureTyArea(window.earth).start();
|
||||
},
|
||||
//投影距离测量
|
||||
projectionDistanceMeasure: () => {
|
||||
new YJ.Measure.MeasureProjectionDistance(window.earth).start();
|
||||
},
|
||||
areaMeasure: () => {
|
||||
new YJ.Measure.MeasureTdArea(window.earth).start();
|
||||
},
|
||||
//距离测量
|
||||
distanceMeasure: () => {
|
||||
new YJ.Measure.MeasureDistance(window.earth).start();
|
||||
},
|
||||
//高度测量
|
||||
heightMeasure: () => {
|
||||
new YJ.Measure.MeasureHeight(window.earth).start();
|
||||
},
|
||||
//三角测量
|
||||
triangleMeasure: () => {
|
||||
new YJ.Measure.MeasureTriangle(window.earth).start();
|
||||
},
|
||||
// 方位角
|
||||
MeasureAzimuth() {
|
||||
new YJ.Measure.MeasureAzimuth(window.earth).start();
|
||||
},
|
||||
//夹角测量
|
||||
MeasureAngle() {
|
||||
new YJ.Measure.MeasureAngle(window.earth).start();
|
||||
},
|
||||
// 坡度测量
|
||||
lopeDistanceMeasures() {
|
||||
new YJ.Measure.MeasureSlopeDistance(window.earth).start();
|
||||
},
|
||||
//坐标测量
|
||||
coorMeasure() {
|
||||
new YJ.Measure.MeasureLocation(window.earth).start();
|
||||
},
|
||||
//清除测量
|
||||
clear() {
|
||||
YJ.Measure.Clear();
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
if (window.splitScreen || window.multiViewportMode) {
|
||||
let res = ''
|
||||
let res2 = ''
|
||||
let sdk
|
||||
if (window.splitScreen) {
|
||||
sdk = YJ.Global.splitScreen.getSdk()
|
||||
} else {
|
||||
sdk = YJ.Global.multiViewportMode.getSdk()
|
||||
}
|
||||
await new YJ.Global.ScreenShot(sdk.sdkD, (data) => {
|
||||
res = data
|
||||
})
|
||||
await new YJ.Global.ScreenShot(sdk.sdkP, (data) => {
|
||||
res2 = data
|
||||
})
|
||||
if (window.multiViewportMode) {
|
||||
processBase64Images(res, res2, (mergedBase64) => {
|
||||
downloadScreen(mergedBase64)
|
||||
// window.multiViewportMode = false;
|
||||
})
|
||||
} else {
|
||||
let doms = document.querySelectorAll('.cesium-widget')
|
||||
let leftWidth = doms[0].offsetWidth
|
||||
let rightWidth = doms[1].offsetWidth
|
||||
combineBase64Images(res2, leftWidth, res, rightWidth)
|
||||
.then((result) => {
|
||||
downloadScreen(result)
|
||||
// window.splitScreen = false;
|
||||
})
|
||||
.catch((err) => console.error('拼接失败:', err))
|
||||
}
|
||||
} else {
|
||||
let res = ''
|
||||
await new YJ.Global.ScreenShot(window.earth, (data) => {
|
||||
res = data
|
||||
})
|
||||
downloadScreen(res)
|
||||
}
|
||||
},
|
||||
//高清出图
|
||||
highQuality() {
|
||||
// eventBus.emit('screenShotDialog')
|
||||
YJ.Global.ScreenShotHD(window.earth)
|
||||
},
|
||||
//视频录制
|
||||
videoRecord() {
|
||||
clickChange.videoRecord = !clickChange.videoRecord
|
||||
|
||||
let time = 3
|
||||
this.$changeComponentShow('#secondMenu', false)
|
||||
// const onKeyDown = (e) => {
|
||||
|
||||
// if (e.keyCode === 27) {
|
||||
// item.status = !item.status;
|
||||
// $sendElectronChanel("endRecoder");
|
||||
// document.removeEventListener("keydown", onKeyDown);
|
||||
// }
|
||||
// };
|
||||
if (clickChange.videoRecord) {
|
||||
// document.addEventListener("keydown", onKeyDown);
|
||||
let loading = $root_home.openLoading(time, {
|
||||
background: 'rgba(0,0,0,0)',
|
||||
fullscreen: false,
|
||||
customClass: 'timer'
|
||||
})
|
||||
let timer = ''
|
||||
const p = document.createElement('p')
|
||||
p.style.color = '#fff'
|
||||
p.innerHTML = '再次点击录制结束'
|
||||
document.getElementsByClassName('el-loading-spinner')[0].appendChild(p)
|
||||
let func = () => {
|
||||
loading.setText(time--)
|
||||
if (time == -1) {
|
||||
clearInterval(timer)
|
||||
loading.close()
|
||||
console.log('开始了')
|
||||
p.remove()
|
||||
$sendElectronChanel('startRecoder')
|
||||
}
|
||||
}
|
||||
func()
|
||||
timer = setInterval(func, 1000)
|
||||
} else {
|
||||
$sendElectronChanel('endRecoder')
|
||||
// document.removeEventListener("keydown", onKeyDown);
|
||||
}
|
||||
},
|
||||
//压模
|
||||
pressModel() {},
|
||||
//地形开挖
|
||||
terrainDig() {
|
||||
// if (window.checkAuthIsValid) {
|
||||
// new YJ.Analysis.TerrainExcavation(window.Earth1);
|
||||
eventBus.emit('terrainExcavationDialog')
|
||||
// } else {
|
||||
// this.$message({
|
||||
// message: '您没有该功能的权限',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// }
|
||||
},
|
||||
//剖切
|
||||
tilesetClipping() {
|
||||
// if (window.checkAuthIsValid) {
|
||||
let selectedNode = window.treeObj.getSelectedNodes()
|
||||
if (selectedNode.length < 1) {
|
||||
ElMessage({
|
||||
message: '请在图层指挥舱选中对应模型进行操作',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!(selectedNode[0].sourceType === 'tileset' || selectedNode[0].sourceType === 'bim')) {
|
||||
ElMessage({
|
||||
message: '选中的节点不能进行剖切',
|
||||
type: 'warning'
|
||||
})
|
||||
return
|
||||
}
|
||||
let tileset = window.earth.entityMap.get(selectedNode[0].id)
|
||||
let draw = new YJ.Draw.DrawPolygon(window.earth)
|
||||
draw.start((err, pos) => {
|
||||
let section = new YJ.Analysis.Section(window.earth, tileset.entity, {
|
||||
positions: pos
|
||||
})
|
||||
// _entityMap.set(selectedNode.source_id + 'pouqie', section)
|
||||
})
|
||||
// } else {
|
||||
// this.$message({
|
||||
// message: '您没有该功能的权限',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// }
|
||||
},
|
||||
//删除剖切
|
||||
clearTilesetClipping() {
|
||||
YJ.Analysis.ClearSection()
|
||||
},
|
||||
//度分秒
|
||||
projConvert() {
|
||||
eventBus.emit('projConvertDialog')
|
||||
},
|
||||
//投影转换
|
||||
projectionConvert() {
|
||||
eventBus.emit('ProjectionConvertDialog')
|
||||
},
|
||||
//GDB导入
|
||||
gdbImport() {},
|
||||
//圆形统计
|
||||
circleStatistics() {
|
||||
// if (window.checkAuthIsValid) {
|
||||
eventBus.emit('goodsSearchCircleDialog')
|
||||
// } else {
|
||||
// this.$message({
|
||||
// message: '您没有该功能的权限',
|
||||
// type: 'warning'
|
||||
// })
|
||||
// }
|
||||
},
|
||||
//多边形统计
|
||||
polygonStatistics() {
|
||||
// if (window.checkAuthIsValid) {
|
||||
eventBus.emit('goodsSearchPolgonDialog')
|
||||
|
||||
// } else {
|
||||
// this.$message({
|
||||
// message: "您没有该功能的权限",
|
||||
// type: "warning",
|
||||
// });
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
const handleClick = (value = 'projectionDistanceMeasure') => {
|
||||
methodMap[value]()
|
||||
console.log('点击了', value)
|
||||
methodMap[value]()
|
||||
}
|
||||
defineExpose({
|
||||
initList
|
||||
initList
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.leftSideSecond {
|
||||
display: none;
|
||||
height: 365px;
|
||||
width: 275px;
|
||||
background: url("@/assets/images/secondBj.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 13px 4px 13px 11px;
|
||||
display: none;
|
||||
height: 365px;
|
||||
width: 275px;
|
||||
background: url('@/assets/images/secondBj.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 13px 4px 13px 11px;
|
||||
|
||||
.leftSideSecondBox {
|
||||
border: 1px solid red;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
.leftSideSecondBox {
|
||||
border: 1px solid red;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.menuItem {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 5px 0;
|
||||
.menuItem {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 5px 0;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px
|
||||
}
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
336
src/renderer/src/views/components/propertyBox/CircleObject.vue
Normal file
336
src/renderer/src/views/components/propertyBox/CircleObject.vue
Normal file
@ -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, 1, 'lng', 8)" type="number"
|
||||
v-model="entityOptions.center.lng" min="-180" max="180" v-if="activeTd.index == 1 && activeTd.name == 'lng'">
|
||||
<span style="pointer-events: none;" v-else>{{ entityOptions.center.lng.toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td lat align-center" @dblclick="inputDblclick($event, 1, 'lat')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, 1, 'lat', 8)" type="number"
|
||||
v-model="entityOptions.center.lat" min="-180" max="180" v-if="activeTd.index == 1 && activeTd.name == 'lat'">
|
||||
<span style="pointer-events: none;" v-else>{{ entityOptions.center.lat.toFixed(8) }}</span>
|
||||
</div>
|
||||
<div class="td alt align-center" @dblclick="inputDblclick($event, 1, 'alt')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, 1, 'alt', 2)" type="number"
|
||||
v-model="entityOptions.height" min="-9999999" max="999999999"
|
||||
v-if="activeTd.index == 1 && 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(id)
|
||||
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>
|
||||
123
src/renderer/src/views/components/propertyBox/CircleViewShed.vue
Normal file
123
src/renderer/src/views/components/propertyBox/CircleViewShed.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="circle-view-shed"
|
||||
title="圆形视域分析"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">视点高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
id="viewPointHeight"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="999999"
|
||||
step="0.1"
|
||||
v-model="viewPointHeight"
|
||||
@input="viewPointHeightInput"
|
||||
@change="viewPointHeightChange"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">采样精度</span>
|
||||
<!-- <input
|
||||
id="precision"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="100"
|
||||
step="1"
|
||||
v-model="precision"
|
||||
@input="precisionInput"
|
||||
@change="precisionChange"
|
||||
/>
|
||||
<span class="arrow"></span> -->
|
||||
<el-slider
|
||||
v-model="precision"
|
||||
:min="0"
|
||||
:max="360"
|
||||
placement="bottom"
|
||||
@change="precisionInput"
|
||||
/>
|
||||
<span class="firstTip">0</span>
|
||||
<span class="endTip">360</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">绘制</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
const viewPointHeight: any = ref(1.8)
|
||||
const precision: any = ref(20)
|
||||
|
||||
var visibility: any = reactive([])
|
||||
eventBus.on('circleViewShedDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
visibility = new YJ.Analysis.CircleViewShed(window.earth, {
|
||||
viewPointHeight: viewPointHeight.value,
|
||||
precision: precision.value
|
||||
})
|
||||
})
|
||||
const closeCallBack = (e) => {
|
||||
viewPointHeight.value = 1.8
|
||||
precision.value = 20
|
||||
YJ.Measure.SetMeasureStatus(false)
|
||||
}
|
||||
|
||||
const viewPointHeightChange = () => {
|
||||
visibility.viewPointHeights = viewPointHeight.value
|
||||
}
|
||||
const viewPointHeightInput = () => {
|
||||
let dom: any = document.getElementById('viewPointHeight')
|
||||
if (viewPointHeight.value < dom.min * 1) {
|
||||
viewPointHeight.value = dom.min * 1
|
||||
} else if (viewPointHeight.value > dom.max * 1) {
|
||||
viewPointHeight.value = dom.max * 1
|
||||
}
|
||||
}
|
||||
const precisionInput = () => {
|
||||
// let dom = document.getElementById('precision')
|
||||
// if (precision.value < dom.min * 1) {
|
||||
// precision.value = dom.min * 1
|
||||
// } else if (precision.value > dom.max * 1) {
|
||||
// precision.value = dom.max * 1
|
||||
// }
|
||||
console.log(precision, 'eeeeee')
|
||||
visibility.precisions = precision.value
|
||||
}
|
||||
const precisionChange = () => {
|
||||
console.log(precision, 'yyyy')
|
||||
}
|
||||
const draw = (e) => {
|
||||
visibility.draw()
|
||||
// visibility.create(this)
|
||||
// !window.analysisArr && (window.analysisArr = [])
|
||||
// window.analysisArr.push(visibility)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
182
src/renderer/src/views/components/propertyBox/Contour.vue
Normal file
182
src/renderer/src/views/components/propertyBox/Contour.vue
Normal file
@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="contour"
|
||||
title="全局等高线"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col" style="flex: 0 0 120px">
|
||||
<span class="label">等高线</span>
|
||||
<input class="btn-switch show" type="checkbox" v-model="show" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">等高距</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input equal-height-distance"
|
||||
id="equalHeightDistance"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="1000"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 60px"></div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 157px">
|
||||
<span class="label">选中线颜色</span>
|
||||
<div class="active-color"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col" style="flex: 0 0 120px">
|
||||
<span class="label">计曲线</span>
|
||||
<input class="btn-switch index-contour-switch" type="checkbox" />
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px">
|
||||
<span class="label">计曲线颜色</span>
|
||||
<div class="index-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">计曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input index-contour-width"
|
||||
type="number"
|
||||
title=""
|
||||
step="0.1"
|
||||
min="1"
|
||||
max="10"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col" style="flex: 0 0 120px">
|
||||
<span class="label">首曲线</span>
|
||||
<input class="btn-switch intermediate-contour-switch" type="checkbox" />
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px">
|
||||
<span class="label">首曲线颜色</span>
|
||||
<div class="intermediate-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">首曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input intermediate-contour-width"
|
||||
type="number"
|
||||
step="0.1"
|
||||
title=""
|
||||
min="1"
|
||||
max="10"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col" style="flex: 0 0 120px">
|
||||
<span class="label">间曲线</span>
|
||||
<input class="btn-switch halfInterval-contour-switch" type="checkbox" />
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px">
|
||||
<span class="label">间曲线颜色</span>
|
||||
<div class="halfInterval-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">间曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input halfInterval-contour-width"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="10"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col" style="flex: 0 0 120px">
|
||||
<span class="label">助曲线</span>
|
||||
<input class="btn-switch supplementary-contour-switch" type="checkbox" />
|
||||
</div>
|
||||
<div class="col input-select-unit-box" style="flex: 0 0 120px">
|
||||
<span class="label">助曲线颜色</span>
|
||||
<div class="supplementary-contour-color"></div>
|
||||
</div>
|
||||
<div class="col input-select-unit-box">
|
||||
<span class="label">助曲线宽度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input supplementary-contour-width"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="10"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="sure">确定</button>
|
||||
<button @click="close">取消</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
var show: any = ref(true)
|
||||
eventBus.on('contourDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
setTimeout(() => {
|
||||
YJ.Global.Contour(window.earth)
|
||||
})
|
||||
})
|
||||
const closeCallBack = (e) => {
|
||||
YJ.Global.ContourReset()
|
||||
show.value = true
|
||||
}
|
||||
const close = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const sure = (e) => {
|
||||
YJ.Global.ContourStartDraw(window.earth, show.value)
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
228
src/renderer/src/views/components/propertyBox/CoorLocation.vue
Normal file
228
src/renderer/src/views/components/propertyBox/CoorLocation.vue
Normal file
@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="coorLocation"
|
||||
title="坐标定位"
|
||||
left="180px"
|
||||
top="100px"
|
||||
width="418px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="小数格式" name="first">
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 58%">
|
||||
<span class="label">经度</span>
|
||||
<input class="input" type="number" v-model="longitude" />
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 58%">
|
||||
<span class="label">纬度</span>
|
||||
<input class="input" type="number" v-model="latitude" />
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">定位</span>
|
||||
<button @click="flyto"><svg-icon name="location" :size="12" />跳转</button>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="度分秒格式" name="second">
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 78%">
|
||||
<span class="label">经度</span>
|
||||
<input class="input" type="number" v-model="longitude" />
|
||||
<span class="label2">度</span>
|
||||
<input class="input" type="number" v-model="lngMin" />
|
||||
<span class="label2">分</span>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 78%">
|
||||
<span class="label">纬度</span>
|
||||
<input class="input" type="number" v-model="latitude" />
|
||||
<span class="label2">度</span>
|
||||
<input class="input" type="number" v-model="latMin" />
|
||||
<span class="label2">分</span>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">定位</span>
|
||||
<button @click="flyto"><svg-icon name="location" :size="12" />跳转</button>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="度分格式" name="third">
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 90%">
|
||||
<span class="label">经度</span>
|
||||
<input class="input" type="number" v-model="longitude" />
|
||||
<span class="label2">度</span>
|
||||
<input class="input" type="number" v-model="lngMin" />
|
||||
<span class="label2">分</span>
|
||||
<input class="input" type="number" v-model="lngSec" />
|
||||
<span class="label2">秒</span>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 90%">
|
||||
<span class="label">纬度</span>
|
||||
<input class="input" type="number" v-model="latitude" />
|
||||
<span class="label2">度</span>
|
||||
<input class="input" type="number" v-model="latMin" />
|
||||
<span class="label2">分</span>
|
||||
<input class="input" type="number" v-model="latSec" />
|
||||
<span class="label2">秒</span>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">定位</span>
|
||||
<button @click="flyto"><svg-icon name="location" :size="12" />跳转</button>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">确定</button>
|
||||
<button @click="close">取消</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
const activeName = ref('first')
|
||||
|
||||
var longitude = ref(null)
|
||||
var latitude = ref(null)
|
||||
|
||||
var lngMin = ref(null)
|
||||
var latMin = ref(null)
|
||||
|
||||
var lngSec = ref(null)
|
||||
var latSec = ref(null)
|
||||
|
||||
eventBus.on('coorLocationDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
})
|
||||
|
||||
// @ts-ignore (define in dts)
|
||||
const handleClick = (tab: TabsPaneContext, event: Event) => {
|
||||
console.log(tab, event)
|
||||
longitude.value = null
|
||||
latitude.value = null
|
||||
lngMin.value = null
|
||||
latMin.value = null
|
||||
lngSec.value = null
|
||||
latSec.value = null
|
||||
}
|
||||
const closeCallBack = (e) => {
|
||||
longitude.value = null
|
||||
latitude.value = null
|
||||
lngMin.value = null
|
||||
latMin.value = null
|
||||
lngSec.value = null
|
||||
latSec.value = null
|
||||
}
|
||||
const flyto = (e) => {
|
||||
switch (activeName.value) {
|
||||
case 'first':
|
||||
new YJ.Global.flyTo(window.earth, {
|
||||
position: { lng: longitude.value, lat: latitude.value, alt: 100 }
|
||||
})
|
||||
break
|
||||
case 'second':
|
||||
// @ts-ignore (define in dts)
|
||||
var lng = Math.abs(longitude.value) + Math.abs(lngMin.value) / 60
|
||||
// @ts-ignore (define in dts)
|
||||
var lat = Math.abs(latitude.value) + Math.abs(latMin.value) / 60
|
||||
// @ts-ignore (define in dts)
|
||||
lng = longitude.value < 0 ? -lng : lng
|
||||
// @ts-ignore (define in dts)
|
||||
lat = latitude.value < 0 ? -lat : lat
|
||||
|
||||
var position = { lng, lat, alt: 100 }
|
||||
new YJ.Global.flyTo(window.earth, {
|
||||
position: position
|
||||
})
|
||||
break
|
||||
case 'third':
|
||||
var lng =
|
||||
// @ts-ignore (define in dts)
|
||||
Math.abs(longitude.value) + Math.abs(lngMin.value) / 60 + Math.abs(lngSec.value) / 3600
|
||||
var lat =
|
||||
// @ts-ignore (define in dts)
|
||||
Math.abs(latitude.value) + Math.abs(latMin.value) / 60 + Math.abs(latSec.value) / 3600
|
||||
|
||||
// @ts-ignore (define in dts)
|
||||
lng = longitude.value < 0 ? -lng : lng
|
||||
// @ts-ignore (define in dts)
|
||||
lat = latitude.value < 0 ? -lat : lat
|
||||
|
||||
var position = { lng, lat, alt: 100 }
|
||||
new YJ.Global.flyTo(window.earth, {
|
||||
position: position
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
const draw = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const close = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .label2 {
|
||||
margin: 0 10px;
|
||||
}
|
||||
::v-deep .el-tabs__item {
|
||||
padding: 0px 30px 0px 0px !important;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0px;
|
||||
line-height: 24px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
}
|
||||
::v-deep .el-tabs__item.is-active,
|
||||
.el-tabs__item:hover {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 0px;
|
||||
text-shadow: 0px 0px 9px rgb(20, 118, 255);
|
||||
}
|
||||
</style>
|
||||
187
src/renderer/src/views/components/propertyBox/CutFill.vue
Normal file
187
src/renderer/src/views/components/propertyBox/CutFill.vue
Normal file
@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="cut-fill"
|
||||
title="土方分析"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 70px">绘制分析区域</span>
|
||||
<button class="draw-btn" @click="draw">
|
||||
<svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>开始绘制
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">基准高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input"
|
||||
id="height"
|
||||
type="number"
|
||||
title=""
|
||||
min="-999999"
|
||||
max="999999"
|
||||
v-model="height"
|
||||
@input="heightInput"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">精度</span>
|
||||
<!-- <div class="input-number input-number-unit">
|
||||
<input
|
||||
class="input"
|
||||
id="precision"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="1250"
|
||||
v-model="precision"
|
||||
@input="precisionInput"
|
||||
/>
|
||||
<span class="arrow"></span>
|
||||
</div> -->
|
||||
<el-slider v-model="precision" :min="0" :max="360" @change="precisionInput" />
|
||||
<span class="firstTip">0</span>
|
||||
<span class="endTip">360</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 74px">总分析面积:</span>
|
||||
<span class="text-number" name="allArea">{{ allArea }}</span>
|
||||
<span class="unit text-number">m²</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 90px">无须填挖面积:</span>
|
||||
<span class="text-number" name="noArea">{{ noArea }}</span>
|
||||
<span class="unit text-number">m²</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 74px">填方面积:</span>
|
||||
<span class="text-number" name="fillArea">{{ fillArea }}</span>
|
||||
<span class="unit text-number">m²</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 90px">挖方面积:</span>
|
||||
<span class="text-number" name="cutArea">{{ cutArea }}</span>
|
||||
<span class="unit text-number">m²</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 74px">填方体积:</span>
|
||||
<span class="text-number" name="fillVolume">{{ fillVolume }}</span>
|
||||
<span class="unit text-number">m³</span>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 90px">挖方体积:</span>
|
||||
<span class="text-number" name="cutVolume">{{ cutVolume }}</span>
|
||||
<span class="unit text-number">m³</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="close">取消</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
var height: any = ref(70)
|
||||
var precision: any = ref(125)
|
||||
var allArea: any = ref(0)
|
||||
var noArea: any = ref(0)
|
||||
var fillArea: any = ref(0)
|
||||
var cutArea: any = ref(0)
|
||||
var fillVolume: any = ref(0)
|
||||
var cutVolume: any = ref(0)
|
||||
|
||||
var cutFill: any = reactive([])
|
||||
|
||||
eventBus.on('cutFillDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
cutFill = new YJ.Analysis.CutFillAnalysis(window.earth, {
|
||||
height: height.value,
|
||||
precision: precision.value
|
||||
})
|
||||
})
|
||||
|
||||
const heightInput = () => {
|
||||
let dom: any = document.getElementById('height')
|
||||
if (height.value < dom.min * 1) {
|
||||
height.value = dom.min * 1
|
||||
} else if (height.value > dom.max * 1) {
|
||||
height.value = dom.max * 1
|
||||
}
|
||||
cutFill.heights = height.value
|
||||
}
|
||||
const precisionInput = () => {
|
||||
// let dom = document.getElementById('precision')
|
||||
// if (precision.value < dom.min * 1) {
|
||||
// precision.value = dom.min * 1
|
||||
// } else if (precision.value > dom.max * 1) {
|
||||
// precision.value = dom.max * 1
|
||||
// }
|
||||
cutFill.precisions = precision.value
|
||||
}
|
||||
const closeCallBack = (e) => {
|
||||
height.value = 70
|
||||
precision.value = 125
|
||||
allArea.value = 0
|
||||
noArea.value = 0
|
||||
fillArea.value = 0
|
||||
cutArea.value = 0
|
||||
fillVolume.value = 0
|
||||
cutVolume.value = 0
|
||||
|
||||
cutFill && cutFill.clean()
|
||||
YJ.Measure.SetMeasureStatus(false)
|
||||
// visibility && visibility.end()
|
||||
}
|
||||
function close() {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const draw = (e) => {
|
||||
cutFill.create()
|
||||
cutFill.onEnd = () => {
|
||||
height.value = cutFill.heights
|
||||
precision.value = cutFill.precisions
|
||||
allArea.value = cutFill.allArea
|
||||
noArea.value = cutFill.noArea
|
||||
fillArea.value = cutFill.fillArea
|
||||
cutArea.value = cutFill.cutArea
|
||||
fillVolume.value = cutFill.fillVolume
|
||||
cutVolume.value = cutFill.cutVolume
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
157
src/renderer/src/views/components/propertyBox/FlyRoam.vue
Normal file
157
src/renderer/src/views/components/propertyBox/FlyRoam.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<!-- <template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="fly-roam"
|
||||
title="飞行漫游"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content v-if="show">
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">名称</span>
|
||||
<input class="input" type="text" name="name" />
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="isTotalTime"
|
||||
style="
|
||||
width: 16px;
|
||||
line-height: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
margin-right: 5px;
|
||||
"
|
||||
/>
|
||||
<span class="label">设置总时长</span>
|
||||
<div class="input-number input-number-unit-3">
|
||||
<input
|
||||
class="input total-time"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="999999.99"
|
||||
step="0.01"
|
||||
name="totalTime"
|
||||
value="0"
|
||||
/>
|
||||
<span class="unit" style="top: 6px">秒(s)</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="repeat"
|
||||
style="
|
||||
width: 16px;
|
||||
line-height: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
width: auto;
|
||||
margin-right: 5px;
|
||||
"
|
||||
/>
|
||||
<span class="label">是否循环播放</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="add-point">
|
||||
<svg class="icon-add"><use xlink:href="#yj-icon-add"></use></svg>增加视点
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="modify-point">
|
||||
<svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>调整视点
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="afreshPlay">
|
||||
<svg class="icon-play"><use xlink:href="#yj-icon-play"></use></svg>播放
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<button class="cease">
|
||||
<svg class="icon-pause"><use xlink:href="#yj-icon-pause"></use></svg>结束
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th">序号</div>
|
||||
<div class="th">时长(s)</div>
|
||||
<div class="th">操作</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="table-empty">
|
||||
<div class="empty-img"></div>
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
var show: any = ref(false)
|
||||
var flyRoam: any = reactive([])
|
||||
eventBus.on('flyRoamDialog', () => {
|
||||
show.value = true
|
||||
baseDialog.value?.open()
|
||||
setTimeout(() => {
|
||||
flyRoam = YJ.Global.FlyRoam.open(window.earth, { repeat: Infinity })
|
||||
}, 0)
|
||||
})
|
||||
|
||||
const clangeViewPointHeight = () => {}
|
||||
const viewPointHeightInput = () => {
|
||||
let dom = document.getElementById('viewPointHeight')
|
||||
if (viewPointHeight.value < dom.min * 1) {
|
||||
viewPointHeight.value = dom.min * 1
|
||||
} else if (viewPointHeight.value > dom.max * 1) {
|
||||
viewPointHeight.value = dom.max * 1
|
||||
}
|
||||
}
|
||||
const closeCallBack = (e) => {
|
||||
YJ.Global.FlyRoam.cease(window.earth)
|
||||
YJ.Global.FlyRoam.close()
|
||||
}
|
||||
const draw = (e) => {}
|
||||
const close = (e) => {
|
||||
show.value = false
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style> -->
|
||||
@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<Dialog
|
||||
v-if="show"
|
||||
ref="baseDialog"
|
||||
title="物质统计"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<div id="goodSearchEchart" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button>绘制</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import { nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
const shpTotalDict: any = reactive({
|
||||
shlwz_jzzp: '救灾帐篷',
|
||||
mb: '棉被',
|
||||
mymdy: '棉衣、棉大衣',
|
||||
mjb: '毛巾被',
|
||||
mt: '毛毯',
|
||||
dgnsd: '睡袋',
|
||||
zdc: '折叠床',
|
||||
jycs: '简易厕所',
|
||||
xpct: '橡皮船（艇）',
|
||||
cfz: '冲锋舟',
|
||||
jsc: '救生船',
|
||||
jsy: '救生衣',
|
||||
jsq: '救生圈',
|
||||
bzd: '编织袋',
|
||||
md: '麻袋',
|
||||
csb: '抽水泵',
|
||||
fdj: '发电机',
|
||||
yjd: '应急灯',
|
||||
jzzp: '救灾帐篷',
|
||||
jzyb: '救灾衣被',
|
||||
jygj: '救援工具'
|
||||
})
|
||||
|
||||
var draw: any = reactive([])
|
||||
|
||||
var show: any = ref(false)
|
||||
eventBus.on('goodsSearchCircleDialog', () => {
|
||||
console.log('kkkkkk')
|
||||
// baseDialog.value?.open()
|
||||
draw = new YJ.Draw.DrawCircle(window.earth)
|
||||
draw.start((err, positions) => {
|
||||
console.log('err, positions', err, positions)
|
||||
if (!err && positions.center.lng) {
|
||||
show.value = true
|
||||
let nodes = booleanOverlaps(positions)
|
||||
console.log('goodsSearchCircle', nodes)
|
||||
renderCanvas(nodes)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function booleanOverlaps(positions1, flag = 'circle') {
|
||||
let cross = undefined
|
||||
function set3Array(positions) {
|
||||
let arr = []
|
||||
positions.forEach((item) => {
|
||||
arr.push([item.lng, item.lat])
|
||||
})
|
||||
arr.push(arr[0])
|
||||
return arr
|
||||
}
|
||||
|
||||
let getNode = (types) => {
|
||||
let treeObj = window.treeObj
|
||||
let res = []
|
||||
types.forEach((type) => {
|
||||
let nodes = treeObj.getNodesByParam('sourceType', type, null)
|
||||
// console.log("nodes",nodes)
|
||||
res = res.concat(nodes)
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
//绘制的区域
|
||||
// console.log("[set3Array(positions1)]", [set3Array(positions1)])
|
||||
// 获取物资处（特定的标注类型）
|
||||
let allNodes = getNode(['point', 'vr', 'picture', 'Feature'])
|
||||
console.log('allNodes', allNodes)
|
||||
let itemInArea = [] //区域内的类型符合的标注
|
||||
|
||||
for (let i = 0; i < allNodes.length; i++) {
|
||||
let item = allNodes[i]
|
||||
let getAllItemInArea = (lng, lat) => {
|
||||
if (flag == 'circle') {
|
||||
let { center, radius } = positions1
|
||||
let distance = new YJ.Tools().randomString(center, { lng, lat })
|
||||
distance < radius && itemInArea.push(item)
|
||||
} else {
|
||||
let polygon1 = turf.polygon([set3Array(positions1)])
|
||||
let pt = turf.point([lng, lat])
|
||||
turf.booleanPointInPolygon(pt, polygon1) && itemInArea.push(item)
|
||||
}
|
||||
}
|
||||
console.log(item, item.sourceType, 'ooooo')
|
||||
switch (item.sourceType) {
|
||||
case 'point':
|
||||
case 'vr':
|
||||
case 'picture':
|
||||
let params = JSON.parse(item.params)
|
||||
console.log('params', params)
|
||||
let lng = params.position.lng
|
||||
let lat = params.position.lat
|
||||
getAllItemInArea(lng, lat)
|
||||
break
|
||||
case 'Feature':
|
||||
if (item.detail.geometry.type == 'Point') {
|
||||
lng = item.detail.geometry.coordinates[0]
|
||||
lat = item.detail.geometry.coordinates[1]
|
||||
getAllItemInArea(lng, lat)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
return itemInArea
|
||||
}
|
||||
function renderCanvas(nodes) {
|
||||
console.log('nodes', nodes)
|
||||
|
||||
let x: any = []
|
||||
let y: any = []
|
||||
nodes.forEach((item) => {
|
||||
// shp物资统计
|
||||
if (item.sourceType == 'Feature') {
|
||||
let obj = JSON.parse(JSON.stringify(item.detail.properties))
|
||||
for (const key in obj) {
|
||||
let name = key
|
||||
if (shpTotalDict[key]) {
|
||||
name = shpTotalDict[key]
|
||||
// 把相同名称的物资数量相加，名称相同时，累加数据
|
||||
let index = x.findIndex((item) => item === name)
|
||||
if (index !== -1) {
|
||||
y[index] = y[index] + Number(obj[key])
|
||||
} else {
|
||||
x.push(name)
|
||||
y.push(Number(obj[key]))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let params = JSON.parse(item.params)
|
||||
if (params.attribute && params.attribute.goods) {
|
||||
let goods = params.attribute.goods.content
|
||||
console.log('goods', goods)
|
||||
if (goods.length) {
|
||||
// $root_home_index.goodSearchDialog = false;
|
||||
goods.forEach((good) => {
|
||||
// 把相同名称的物资数量相加，名称相同时，累加数据
|
||||
let index = x.findIndex((item) => item === good.name)
|
||||
if (index !== -1) {
|
||||
y[index] = y[index] + Number(good.cnt)
|
||||
} else {
|
||||
x.push(good.name)
|
||||
y.push(Number(good.cnt))
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
console.log('x,y')
|
||||
console.log(x)
|
||||
console.log(y)
|
||||
let notZeroX = []
|
||||
let notZeroY = []
|
||||
for (let i = 0; i < y.length; i++) {
|
||||
if (y[i] != 0) {
|
||||
notZeroX.push(x[i])
|
||||
notZeroY.push(y[i])
|
||||
}
|
||||
}
|
||||
console.log(notZeroX)
|
||||
console.log(notZeroY)
|
||||
x = notZeroX
|
||||
y = notZeroY
|
||||
if (!x.length) show.value = false
|
||||
if (show.value) {
|
||||
nextTick(() => {
|
||||
let option = {
|
||||
grid: {
|
||||
top: '20%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '8%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
formatter(params) {
|
||||
var data = ''
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].seriesName == '随访率') {
|
||||
data += params[i].seriesName + ': ' + params[i].value + '%'
|
||||
} else {
|
||||
data += params[i].seriesName + ': ' + params[i].value + '<br/>'
|
||||
}
|
||||
}
|
||||
return data
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['总量'],
|
||||
top: '5%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
// type: "category",
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
width: 40, //将内容的宽度固定
|
||||
overflow: 'truncate', //超出的部分截断
|
||||
truncate: '...', //截断的部分用...代替
|
||||
rotate: 30,
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#fff' //X轴文字颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '(数量)',
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#eeeeee'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
gridIndex: 0,
|
||||
min: 50,
|
||||
max: 100,
|
||||
splitNumber: 8,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
areaStyle: {
|
||||
color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '数量',
|
||||
type: 'bar',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
barWidth: 15,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fdcb6c'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
var dom = document.getElementById('goodSearchEchart')
|
||||
var myChart = (window as any).echarts.init(dom)
|
||||
option.xAxis.data = x
|
||||
option.series[0].data = y
|
||||
myChart.setOption(option)
|
||||
})
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '该区域没有物资',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const closeCallBack = (e) => {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -0,0 +1,328 @@
|
||||
<template>
|
||||
<Dialog
|
||||
v-if="show"
|
||||
ref="baseDialog"
|
||||
title="物质统计"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<div id="goodSearchEchart2" style="width: 100%; height: 100%"></div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button>绘制</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import { nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
const shpTotalDict: any = reactive({
|
||||
shlwz_jzzp: '救灾帐篷',
|
||||
mb: '棉被',
|
||||
mymdy: '棉衣、棉大衣',
|
||||
mjb: '毛巾被',
|
||||
mt: '毛毯',
|
||||
dgnsd: '睡袋',
|
||||
zdc: '折叠床',
|
||||
jycs: '简易厕所',
|
||||
xpct: '橡皮船（艇）',
|
||||
cfz: '冲锋舟',
|
||||
jsc: '救生船',
|
||||
jsy: '救生衣',
|
||||
jsq: '救生圈',
|
||||
bzd: '编织袋',
|
||||
md: '麻袋',
|
||||
csb: '抽水泵',
|
||||
fdj: '发电机',
|
||||
yjd: '应急灯',
|
||||
jzzp: '救灾帐篷',
|
||||
jzyb: '救灾衣被',
|
||||
jygj: '救援工具'
|
||||
})
|
||||
|
||||
var draw: any = reactive([])
|
||||
|
||||
var show: any = ref(false)
|
||||
eventBus.on('goodsSearchPolgonDialog', () => {
|
||||
draw = new YJ.Draw.DrawPolygon(window.earth)
|
||||
draw.start((err, params) => {
|
||||
if (!err && params.length > 2) {
|
||||
show.value = true
|
||||
let nodes = booleanOverlaps(params, 'polygon')
|
||||
renderCanvas(nodes)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
function booleanOverlaps(positions1, flag = 'circle') {
|
||||
let cross = undefined
|
||||
function set3Array(positions) {
|
||||
let arr = []
|
||||
positions.forEach((item) => {
|
||||
arr.push([item.lng, item.lat])
|
||||
})
|
||||
arr.push(arr[0])
|
||||
return arr
|
||||
}
|
||||
|
||||
let getNode = (types) => {
|
||||
let treeObj = window.treeObj
|
||||
let res = []
|
||||
types.forEach((type) => {
|
||||
let nodes = treeObj.getNodesByParam('sourceType', type, null)
|
||||
res = res.concat(nodes)
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
//绘制的区域
|
||||
// 获取物资处（特定的标注类型）
|
||||
let allNodes = getNode(['point', 'vr', 'picture', 'Feature'])
|
||||
let itemInArea = [] //区域内的类型符合的标注
|
||||
|
||||
for (let i = 0; i < allNodes.length; i++) {
|
||||
let item = allNodes[i]
|
||||
let getAllItemInArea = (lng, lat) => {
|
||||
if (flag == 'circle') {
|
||||
let { center, radius } = positions1
|
||||
let distance = new YJ.Tools().randomString(center, { lng, lat })
|
||||
distance < radius && itemInArea.push(item)
|
||||
} else {
|
||||
let polygon1 = turf.polygon([set3Array(positions1)])
|
||||
let pt = turf.point([lng, lat])
|
||||
turf.booleanPointInPolygon(pt, polygon1) && itemInArea.push(item)
|
||||
}
|
||||
}
|
||||
switch (item.sourceType) {
|
||||
case 'point':
|
||||
case 'vr':
|
||||
case 'picture':
|
||||
let params = JSON.parse(item.params)
|
||||
let lng = params.position.lng
|
||||
let lat = params.position.lat
|
||||
getAllItemInArea(lng, lat)
|
||||
break
|
||||
case 'Feature':
|
||||
if (item.detail.geometry.type == 'Point') {
|
||||
lng = item.detail.geometry.coordinates[0]
|
||||
lat = item.detail.geometry.coordinates[1]
|
||||
getAllItemInArea(lng, lat)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
return itemInArea
|
||||
}
|
||||
function renderCanvas(nodes) {
|
||||
let x: any = []
|
||||
let y: any = []
|
||||
nodes.forEach((item) => {
|
||||
// shp物资统计
|
||||
if (item.sourceType == 'Feature') {
|
||||
let obj = JSON.parse(JSON.stringify(item.detail.properties))
|
||||
for (const key in obj) {
|
||||
let name = key
|
||||
if (shpTotalDict[key]) {
|
||||
name = shpTotalDict[key]
|
||||
// 把相同名称的物资数量相加，名称相同时，累加数据
|
||||
let index = x.findIndex((item) => item === name)
|
||||
if (index !== -1) {
|
||||
y[index] = y[index] + Number(obj[key])
|
||||
} else {
|
||||
x.push(name)
|
||||
y.push(Number(obj[key]))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
let params = JSON.parse(item.params)
|
||||
if (params.attribute && params.attribute.goods) {
|
||||
let goods = params.attribute.goods.content
|
||||
if (goods.length) {
|
||||
// $root_home_index.goodSearchDialog = false;
|
||||
goods.forEach((good) => {
|
||||
// 把相同名称的物资数量相加，名称相同时，累加数据
|
||||
let index = x.findIndex((item) => item === good.name)
|
||||
if (index !== -1) {
|
||||
y[index] = y[index] + Number(good.cnt)
|
||||
} else {
|
||||
x.push(good.name)
|
||||
y.push(Number(good.cnt))
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
console.log('x,y')
|
||||
console.log(x)
|
||||
console.log(y)
|
||||
let notZeroX = []
|
||||
let notZeroY = []
|
||||
for (let i = 0; i < y.length; i++) {
|
||||
if (y[i] != 0) {
|
||||
notZeroX.push(x[i])
|
||||
notZeroY.push(y[i])
|
||||
}
|
||||
}
|
||||
console.log(notZeroX)
|
||||
console.log(notZeroY)
|
||||
x = notZeroX
|
||||
y = notZeroY
|
||||
if (!x.length) show.value = false
|
||||
if (show.value) {
|
||||
nextTick(() => {
|
||||
let option = {
|
||||
grid: {
|
||||
top: '20%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '8%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
formatter(params) {
|
||||
var data = ''
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].seriesName == '随访率') {
|
||||
data += params[i].seriesName + ': ' + params[i].value + '%'
|
||||
} else {
|
||||
data += params[i].seriesName + ': ' + params[i].value + '<br/>'
|
||||
}
|
||||
}
|
||||
return data
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['总量'],
|
||||
top: '5%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '5%',
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
// type: "category",
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
width: 40, //将内容的宽度固定
|
||||
overflow: 'truncate', //超出的部分截断
|
||||
truncate: '...', //截断的部分用...代替
|
||||
rotate: 30,
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#fff' //X轴文字颜色
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '(数量)',
|
||||
nameTextStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#eeeeee'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
gridIndex: 0,
|
||||
min: 50,
|
||||
max: 100,
|
||||
splitNumber: 8,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
areaStyle: {
|
||||
color: ['rgba(250,250,250,0.0)', 'rgba(250,250,250,0.05)']
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '数量',
|
||||
type: 'bar',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
},
|
||||
barWidth: 15,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fdcb6c'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
var dom = document.getElementById('goodSearchEchart2')
|
||||
var myChart = (window as any).echarts.init(dom)
|
||||
option.xAxis.data = x
|
||||
option.series[0].data = y
|
||||
myChart.setOption(option)
|
||||
})
|
||||
} else {
|
||||
ElMessage({
|
||||
message: '该区域没有物资',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const closeCallBack = (e) => {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
85
src/renderer/src/views/components/propertyBox/Graffiti.vue
Normal file
85
src/renderer/src/views/components/propertyBox/Graffiti.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="graffiti"
|
||||
title="涂鸦参数"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">涂鸦颜色</span>
|
||||
<div class="color"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">线条宽度</span>
|
||||
<div class="input-number input-number-unit-2" style="width: 80px">
|
||||
<input
|
||||
class="input"
|
||||
id="width"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="99"
|
||||
step="1"
|
||||
v-model="width"
|
||||
@input="widthInput"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">确定</button>
|
||||
<button @click="close">取消</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
var width: any = ref(1)
|
||||
var graffiti: any = reactive([])
|
||||
eventBus.on('graffitiDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
setTimeout(() => {
|
||||
graffiti = new YJ.Obj.Graffiti(window.earth, {
|
||||
width: width.value
|
||||
})
|
||||
}, 10)
|
||||
})
|
||||
|
||||
const closeCallBack = (e) => {}
|
||||
const widthInput = () => {
|
||||
let dom: any = document.getElementById('width')
|
||||
if (width.value < dom.min * 1) {
|
||||
width.value = dom.min * 1
|
||||
} else if (width.value > dom.max * 1) {
|
||||
width.value = dom.max * 1
|
||||
}
|
||||
graffiti.width = width.value
|
||||
}
|
||||
const close = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const draw = (e) => {
|
||||
eventBus.emit('graffitiObj', graffiti)
|
||||
graffiti.start()
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
363
src/renderer/src/views/components/propertyBox/Profile.vue
Normal file
363
src/renderer/src/views/components/propertyBox/Profile.vue
Normal file
@ -0,0 +1,363 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="profile"
|
||||
title="剖面分析"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="profile-echarts"></div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">
|
||||
<svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>重新绘制
|
||||
</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
//属性
|
||||
var profile: any = reactive([])
|
||||
var echartsObject: any = reactive({})
|
||||
|
||||
eventBus.on('profileDialog', () => {
|
||||
profile = new YJ.Analysis.Profile(window.earth)
|
||||
profile.onEnd = (point) => {
|
||||
baseDialog.value?.open()
|
||||
setTimeout(() => {
|
||||
initEcharts(point)
|
||||
})
|
||||
}
|
||||
})
|
||||
const closeCallBack = (e) => {
|
||||
echartsObject && echartsObject.clear()
|
||||
profile && profile.clean()
|
||||
profile = []
|
||||
echartsObject = []
|
||||
}
|
||||
function close() {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const draw = (e) => {
|
||||
// @ts-ignore (define in dts)
|
||||
initEcharts()
|
||||
profile.reDraw()
|
||||
}
|
||||
function initEcharts(points) {
|
||||
let datas = [],
|
||||
coords = []
|
||||
const pointsData = points
|
||||
|
||||
let option
|
||||
if (pointsData) {
|
||||
const maxDistance = pointsData[pointsData.length - 1].distance
|
||||
let xAixMax = Math.ceil(maxDistance)
|
||||
for (let index = 0; index < pointsData.length; index++) {
|
||||
const element = pointsData[index]
|
||||
if (element.position.height === void 0) {
|
||||
continue
|
||||
}
|
||||
const curData = [element.distance.toFixed(2), element.position.height.toFixed(2)]
|
||||
// @ts-ignore (define in dts)
|
||||
datas.push(curData)
|
||||
const curCoords = [element.position.lng, element.position.lat]
|
||||
// @ts-ignore (define in dts)
|
||||
coords.push(curCoords)
|
||||
}
|
||||
const ele = document.getElementsByClassName('profile-echarts')[0]
|
||||
echartsObject = (window as any).echarts.init(ele)
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
align: 'left'
|
||||
},
|
||||
formatter(params) {
|
||||
const xy: any = coords[params[0].dataIndex]
|
||||
const tipData = params[0]['data']
|
||||
profile.formatter(xy, tipData)
|
||||
return (
|
||||
'距离：' +
|
||||
tipData[0] +
|
||||
'm<br>' +
|
||||
'高度：' +
|
||||
tipData[1] +
|
||||
'm<br>' +
|
||||
'坐标：' +
|
||||
xy[0].toFixed(5) +
|
||||
'，' +
|
||||
xy[1].toFixed(5)
|
||||
)
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 40,
|
||||
bottom: 20,
|
||||
left: 55,
|
||||
right: 30
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
max: xAixMax,
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'ProfileLine',
|
||||
type: 'line',
|
||||
data: datas,
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#39FDA1'
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(85,254,139,1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: 'rgba(7,252,202,1)' // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(14,245,210,1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new (window as any).echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(102,153,255,1)'
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: 'rgba(102,153,255,0.08)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(9,173,208,0.15)'
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(14,245,210,1)', //阴影颜色
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
type: 'max',
|
||||
name: '最高点',
|
||||
label: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'min',
|
||||
name: '最低点',
|
||||
label: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
} else {
|
||||
const ele = document.getElementsByClassName('profile-echarts')[0]
|
||||
echartsObject = (window as any).echarts.init(ele)
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
textStyle: {
|
||||
align: 'left'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 40,
|
||||
bottom: 20,
|
||||
left: 55,
|
||||
right: 30
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
scale: true,
|
||||
axisLabel: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'ProfileLine',
|
||||
type: 'line',
|
||||
data: [],
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#39FDA1'
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 3,
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(85,254,139,1)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: 'rgba(7,252,202,1)' // 100% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(14,245,210,1)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
}
|
||||
}
|
||||
},
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new (window as any).echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(102,153,255,1)'
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: 'rgba(102,153,255,0.08)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(9,173,208,0.15)'
|
||||
}
|
||||
],
|
||||
false
|
||||
),
|
||||
shadowColor: 'rgba(14,245,210,1)', //阴影颜色
|
||||
shadowBlur: 20
|
||||
}
|
||||
},
|
||||
markPoint: {
|
||||
data: [
|
||||
{
|
||||
type: 'max',
|
||||
name: '最高点',
|
||||
label: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'min',
|
||||
name: '最低点',
|
||||
label: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
echartsObject.setOption(option)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
283
src/renderer/src/views/components/propertyBox/ProjConvert.vue
Normal file
283
src/renderer/src/views/components/propertyBox/ProjConvert.vue
Normal file
@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="proj-convert"
|
||||
title="度分秒格式转换"
|
||||
left="180px"
|
||||
top="100px"
|
||||
width="515px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content v-if="status1">
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col input-select-box">
|
||||
<span class="label" style="flex: 0 0 60px">输入格式</span>
|
||||
<div class="input-select"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item item" data-type="0">
|
||||
<span class="custom-divider"></span>
|
||||
<p style="font-size: 16px; padding-bottom: 6px; margin-top: 10px; margin-bottom: 5px">
|
||||
<span style="margin-right: 10px">度</span>
|
||||
<span style="font-size: 12px; margin-bottom: 5px; color: #f16c55">例如116.6°, 39.9°</span>
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: auto">经度</span>
|
||||
<input class="input lng" type="number" min="-180" max="180" value="0" title="" />
|
||||
</div>
|
||||
<div class="col" style="margin: 0">
|
||||
<span class="label">纬度</span>
|
||||
<input class="input lat" type="number" min="-90" max="90" value="0" title="" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 24px">
|
||||
<i
|
||||
class="icon-copy-box"
|
||||
title="复制"
|
||||
data-clipboard-action="copy"
|
||||
data-clipboard-target=".input"
|
||||
style="cursor: pointer"
|
||||
>
|
||||
<svg class="icon-copy" style="margin: 4px; margin-bottom: 0px">
|
||||
<use xlink:href="#yj-icon-copy"></use>
|
||||
</svg>
|
||||
</i>
|
||||
<button class="convert" style="margin-left: 10px">转 换</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item item" data-type="1">
|
||||
<span class="custom-divider"></span>
|
||||
<p style="font-size: 16px; padding-bottom: 6px; margin-top: 10px; margin-bottom: 5px">
|
||||
<span style="margin-right: 10px">度分</span>
|
||||
<span style="font-size: 12px; margin-bottom: 5px; color: #f16c55"
|
||||
>例如95°10.1702', 49°12.4015'</span
|
||||
>
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col" style="flex-direction: column">
|
||||
<div class="row" style="margin-bottom: 15px">
|
||||
<span class="label">经度</span>
|
||||
<input
|
||||
class="input lng-dm-d"
|
||||
style="flex: 1"
|
||||
type="number"
|
||||
min="-180"
|
||||
max="180"
|
||||
value="0"
|
||||
title=""
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
|
||||
<input
|
||||
class="input lng-dm-m"
|
||||
style="flex: 1"
|
||||
type="number"
|
||||
min="0"
|
||||
max="60"
|
||||
value="0"
|
||||
title=""
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
|
||||
<span class="top-line"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="label">纬度</span>
|
||||
<input
|
||||
class="input lat-dm-d"
|
||||
style="flex: 1"
|
||||
type="number"
|
||||
min="-90"
|
||||
max="90"
|
||||
value="0"
|
||||
title=""
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
|
||||
<input
|
||||
class="input lat-dm-m"
|
||||
style="flex: 1"
|
||||
type="number"
|
||||
min="0"
|
||||
max="60"
|
||||
value="0"
|
||||
title=""
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
|
||||
<span class="bottom-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 24px; margin: 0">
|
||||
<i
|
||||
class="icon-copy-box"
|
||||
title="复制"
|
||||
data-clipboard-action="copy"
|
||||
data-clipboard-target=".input"
|
||||
style="cursor: pointer; position: relative; left: -30px"
|
||||
>
|
||||
<svg class="icon-copy" style="margin: 4px; margin-bottom: 0px">
|
||||
<use xlink:href="#yj-icon-copy"></use>
|
||||
</svg>
|
||||
</i>
|
||||
<button class="convert" style="margin-left: 10px">转 换</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="div-item item" data-type="2">
|
||||
<span class="custom-divider"></span>
|
||||
<p style="font-size: 16px; padding-bottom: 6px; margin-top: 10px; margin-bottom: 5px">
|
||||
<span style="margin-right: 10px">度分秒</span>
|
||||
<span style="font-size: 12px; margin-bottom: 5px; color: #f16c55"
|
||||
>例如11°18'54.37", 39°13'46.57"</span
|
||||
>
|
||||
</p>
|
||||
<div class="row">
|
||||
<div class="col" style="flex-direction: column">
|
||||
<div class="row" style="margin-bottom: 15px">
|
||||
<span class="label">经度</span>
|
||||
<input
|
||||
class="input lng-dms-d"
|
||||
style="flex: 1"
|
||||
type="number"
|
||||
min="-180"
|
||||
max="180"
|
||||
value="0"
|
||||
title=""
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
|
||||
<input
|
||||
class="input lng-dms-m"
|
||||
style="flex: 1"
|
||||
type="number"
|
||||
min="0"
|
||||
max="60"
|
||||
value="0"
|
||||
title=""
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
|
||||
<input
|
||||
class="input lng-dms-s"
|
||||
style="flex: 1"
|
||||
type="number"
|
||||
min="0"
|
||||
max="60"
|
||||
value="0"
|
||||
title=""
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">秒</span>
|
||||
<span class="top-line"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="label">纬度</span>
|
||||
<input
|
||||
class="input lat-dms-d"
|
||||
style="flex: 1"
|
||||
type="number"
|
||||
min="-90"
|
||||
max="90"
|
||||
value="0"
|
||||
title=""
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
|
||||
<input
|
||||
class="input lat-dms-m"
|
||||
style="flex: 1"
|
||||
type="number"
|
||||
min="0"
|
||||
max="60"
|
||||
value="0"
|
||||
title=""
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
|
||||
<input
|
||||
class="input lat-dms-s"
|
||||
style="flex: 1"
|
||||
type="number"
|
||||
min="0"
|
||||
max="60"
|
||||
value="0"
|
||||
title=""
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">秒</span>
|
||||
<span class="bottom-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 24px; margin: 0">
|
||||
<i
|
||||
class="icon-copy-box"
|
||||
title="复制"
|
||||
data-clipboard-action="copy"
|
||||
data-clipboard-target=".input"
|
||||
style="cursor: pointer; position: relative; left: -30px"
|
||||
>
|
||||
<svg class="icon-copy" style="margin: 4px; margin-bottom: 0px">
|
||||
<use xlink:href="#yj-icon-copy"></use>
|
||||
</svg>
|
||||
</i>
|
||||
<button class="convert" style="margin-left: 10px">转 换</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider" style="order: 10; margin-top: 12px"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
import Clipboard from 'clipboard'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
var status1: any = ref(false)
|
||||
var tools: any = reactive([])
|
||||
eventBus.on('projConvertDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
if (status1.value) {
|
||||
reset()
|
||||
status1.value = false
|
||||
}
|
||||
status1.value = !status1.value
|
||||
setTimeout(() => {
|
||||
tools = new YJ.Tools(window.earth)
|
||||
tools.projConvert(status1.value, () => {
|
||||
status1.value = false
|
||||
})
|
||||
}, 100)
|
||||
})
|
||||
|
||||
const closeCallBack = (e) => {
|
||||
status1.value = false
|
||||
}
|
||||
const reset = () => {
|
||||
let contentElm = document
|
||||
.getElementsByClassName('proj-convert')[0]
|
||||
.getElementsByClassName('content')[0]
|
||||
contentElm.getElementsByClassName('lng-dms-d')[0].value = null
|
||||
contentElm.getElementsByClassName('lng-dms-m')[0].value = null
|
||||
contentElm.getElementsByClassName('lng-dms-s')[0].value = null
|
||||
contentElm.getElementsByClassName('lat-dms-d')[0].value = null
|
||||
contentElm.getElementsByClassName('lat-dms-m')[0].value = null
|
||||
contentElm.getElementsByClassName('lat-dms-s')[0].value = null
|
||||
contentElm.getElementsByClassName('lng')[0].value = null
|
||||
contentElm.getElementsByClassName('lat')[0].value = null
|
||||
}
|
||||
const close = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .content > div {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="projection-convert"
|
||||
title="投影转换"
|
||||
left="180px"
|
||||
top="100px"
|
||||
width="634px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content v-if="status1">
|
||||
<span class="custom-divider"></span>
|
||||
<div style="width: 585px; display: flex">
|
||||
<div class="row left" style="flex: 1; margin-bottom: 0">
|
||||
<div
|
||||
style="
|
||||
margin: 10px 0;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<span class="lable-left-line">源坐标</span>
|
||||
<button class="btn pick" style="margin-left: 15px">
|
||||
<svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>坐标拾取
|
||||
</button>
|
||||
<button
|
||||
class="btn sourceCopy"
|
||||
data-clipboard-action="copy"
|
||||
data-clipboard-target=".input"
|
||||
style="margin-left: 5px"
|
||||
>
|
||||
<svg class="icon-copy"><use xlink:href="#yj-icon-copy"></use></svg>复制
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex; margin-bottom: 12px; align-items: center">
|
||||
<span class="label" style="flex: 0 0 60px">椭圆基准</span>
|
||||
<div class="datalist_left"></div>
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom: 12px; align-items: center">
|
||||
<span class="label" style="flex: 0 0 60px">经度(x)</span>
|
||||
<input class="input left-x" type="number" title="" />
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom: 10px; align-items: center">
|
||||
<span class="label" style="flex: 0 0 60px">纬度(y)</span>
|
||||
<input class="input left-y" type="number" title="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin: 28px 15px 0 15px;
|
||||
"
|
||||
>
|
||||
<button class="btn convert">
|
||||
<svg-icon name="turn" :size="11" color="rgba(255, 255, 255, 1)"></svg-icon>
|
||||
转换
|
||||
</button>
|
||||
</div>
|
||||
<div class="row right" style="flex: 1; margin-bottom: 0">
|
||||
<div
|
||||
style="
|
||||
margin: 10px 0;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<span class="lable-left-line">目标坐标</span>
|
||||
<button
|
||||
class="btn copy"
|
||||
data-clipboard-action="copy"
|
||||
data-clipboard-target=".input"
|
||||
style="margin-left: 20px"
|
||||
>
|
||||
<svg class="icon-copy"><use xlink:href="#yj-icon-copy"></use></svg>复制
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex; margin-bottom: 12px; align-items: center">
|
||||
<span class="label" style="flex: 0 0 60px">椭圆基准</span>
|
||||
<div class="datalist_right"></div>
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom: 12px; align-items: center">
|
||||
<span class="label" style="flex: 0 0 60px">经度(x)</span>
|
||||
<input class="input right-x" readonly="readonly" />
|
||||
</div>
|
||||
<div style="display: flex; margin-bottom: 10px; align-items: center">
|
||||
<span class="label" style="flex: 0 0 60px">纬度(y)</span>
|
||||
<input class="input right-y" readonly="readonly" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
import Clipboard from 'clipboard'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
var status1: any = ref(false)
|
||||
var tools: any = reactive([])
|
||||
eventBus.on('ProjectionConvertDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
if (status1.value) {
|
||||
reset()
|
||||
status1.value = false
|
||||
tools && tools.projectionConvert(status1.value, () => {})
|
||||
}
|
||||
status1.value = !status1.value
|
||||
setTimeout(() => {
|
||||
tools = new YJ.Tools(window.earth)
|
||||
tools.projectionConvert(status1.value, () => {
|
||||
status1.value = false
|
||||
})
|
||||
}, 100)
|
||||
})
|
||||
|
||||
const closeCallBack = (e) => {
|
||||
status1.value = false
|
||||
tools && tools.projectionConvert(status1.value, () => {})
|
||||
}
|
||||
const reset = () => {
|
||||
let contentElm = document
|
||||
.getElementsByClassName('projection-convert')[0]
|
||||
.getElementsByClassName('content')[0]
|
||||
contentElm.getElementsByClassName('left-x')[0].value = null
|
||||
contentElm.getElementsByClassName('left-y')[0].value = null
|
||||
contentElm.getElementsByClassName('right-x')[0].value = null
|
||||
contentElm.getElementsByClassName('right-y')[0].value = null
|
||||
}
|
||||
const close = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .content > div {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
}
|
||||
::v-deep .content .cy_datalist input {
|
||||
background: rgba(var(--color-sdk-base-rgb), 0.2) !important;
|
||||
border: unset;
|
||||
}
|
||||
::v-deep .content input[type='number'] {
|
||||
font-size: 16px !important;
|
||||
// font-weight: 700 !important;
|
||||
color: var(--color-sdk-auxiliary-public) !important;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" title="路径规划" left="180px" top="100px" :closeCallback="closeCallBack">
|
||||
<template #content>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col start-col">
|
||||
<span class="label">起点</span>
|
||||
<input class="input" type="number" title="" min="-180" max="180" @model="startLng" />
|
||||
<input class="input" type="number" title="" min="-90" max="90" @model="startLat" />
|
||||
<button @click="pickStartPos" style="margin-left: 10px">拾取</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<span class="label">终点</span>
|
||||
<input class="input" type="number" title="" min="-180" max="180" @model="endLng" />
|
||||
<input class="input" type="number" title="" min="-90" max="90" @model="endLat" />
|
||||
<button class="end-pick-btn" @click="pickEndPos" style="margin-left: 10px">拾取</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">绘制</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
//属性
|
||||
var startLng: any = ref(null)
|
||||
var startLat: any = ref(null)
|
||||
var endLng: any = ref(null)
|
||||
var endLat: any = ref(null)
|
||||
|
||||
var routePlanning: any = reactive([])
|
||||
eventBus.on('routePlanningDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
routePlanning = new YJ.Obj.RoutePlanning(window.earth, { gps: true })
|
||||
})
|
||||
const closeCallBack = (e) => {}
|
||||
|
||||
function pickStartPos() {}
|
||||
function pickEndPos() {}
|
||||
|
||||
const draw = (e) => {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.YJ-custom-base-dialog > .content {
|
||||
width: 460px;
|
||||
}
|
||||
.YJ-custom-base-dialog > .content > div > .row .col {
|
||||
margin: 0 10px;
|
||||
}
|
||||
.YJ-custom-base-dialog > .content .row .label {
|
||||
flex: auto;
|
||||
}
|
||||
</style>
|
||||
252
src/renderer/src/views/components/propertyBox/ScreenShot.vue
Normal file
252
src/renderer/src/views/components/propertyBox/ScreenShot.vue
Normal file
@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="screenShotHD"
|
||||
title="高清出图"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">出图方式</span>
|
||||
<div class="btn-group">
|
||||
<button
|
||||
class="btn"
|
||||
:class="{ active: selectType == 'first' }"
|
||||
@click="clickChange('first')"
|
||||
>
|
||||
比例尺
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
:class="{ active: selectType == 'second' }"
|
||||
@click="clickChange('second')"
|
||||
>
|
||||
地图层级
|
||||
</button>
|
||||
<button
|
||||
class="btn"
|
||||
:class="{ active: selectType == 'third' }"
|
||||
@click="clickChange('third')"
|
||||
>
|
||||
倍数输出
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="div-item">
|
||||
<!-- 比例尺 -->
|
||||
<div class="row" v-if="selectType == 'first'" style="margin-bottom: 20px">
|
||||
<div class="col">
|
||||
<span class="label radioWords">比例尺</span>
|
||||
<el-select v-model="radio" class="radio">
|
||||
<el-option v-for="item in 20" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<button class="curLevel" @click="draw">获取当前比例尺</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 地图层级 -->
|
||||
<div class="row" v-else-if="selectType == 'second'" style="margin-bottom: 20px">
|
||||
<div class="col">
|
||||
<span class="label">地图层级</span>
|
||||
<el-select v-model="level" class="level">
|
||||
<el-option v-for="item in 20" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 倍数输出 -->
|
||||
<div v-else-if="selectType == 'third'">
|
||||
<div class="row text" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<span
|
||||
>当前窗口长宽：<span class="input-width">{{ canvasWidth }}</span
|
||||
>*<span class="input-height">{{ canvasHeight }}</span
|
||||
>像素</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row scale-box" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<span class="label">图片大小</span>
|
||||
<el-select v-model="scale" class="photo">
|
||||
<el-option v-for="item in 10" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<span>倍窗口</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row text" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<span
|
||||
>输出图片长宽：<span class="output-width">{{ canvasWidth * scale }}</span
|
||||
>*<span class="output-height">{{ canvasHeight * scale }}</span
|
||||
>像素</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start; margin-top: 10px">
|
||||
<div class="col">
|
||||
<span class="label">输出进度</span>
|
||||
<div class="range-box">
|
||||
<div class="range-bg">
|
||||
<div class="range-process-box">
|
||||
<div class="range-process"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="range-node-box">
|
||||
<span class="range-node-text">0%</span>
|
||||
<span class="range-node-text">100%</span>
|
||||
<div class="range-node-active"><span class="range-node-active-text">0%</span></div>
|
||||
</div>
|
||||
<input class="progress-input" type="range" max="100" min="0" step="0.01" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="align-items: flex-start">
|
||||
<div class="col">
|
||||
<el-checkbox v-model="modify" label="出图修饰" size="large" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">确定</button>
|
||||
<button @click="close">取消</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
var selectType: any = ref('first')
|
||||
var scale: any = ref(1)
|
||||
var radio: any = ref('1:500')
|
||||
var level: any = ref(1)
|
||||
var modify: any = ref(false)
|
||||
|
||||
var canvasWidth: any = ref(0)
|
||||
var canvasHeight: any = ref(0)
|
||||
|
||||
// onMounted(() => {
|
||||
// canvasWidth.value = window.earth.viewer.canvas.width
|
||||
// canvasHeight.value = window.earth.viewer.canvas.height
|
||||
// })
|
||||
|
||||
var visibility: any = reactive([])
|
||||
eventBus.on('screenShotDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
canvasWidth.value = window.earth.viewer.canvas.width
|
||||
canvasHeight.value = window.earth.viewer.canvas.height
|
||||
})
|
||||
|
||||
const closeCallBack = (e) => {}
|
||||
const close = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const draw = (e) => {}
|
||||
const clickChange = (type) => {
|
||||
switch (type) {
|
||||
case 'first': //比例尺
|
||||
selectType.value = 'first'
|
||||
break
|
||||
case 'second': //地图层级
|
||||
selectType.value = 'second'
|
||||
break
|
||||
case 'third': //倍数输出
|
||||
selectType.value = 'third'
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.btn-group {
|
||||
display: flex;
|
||||
background: rgba(var(--color-sdk-base-rgb), 0.2);
|
||||
}
|
||||
.btn {
|
||||
background: transparent !important;
|
||||
border: 1px solid transparent !important;
|
||||
}
|
||||
.btn:hover {
|
||||
border: 1px solid rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
.active {
|
||||
border: 1px solid rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
color: rgba(var(--color-sdk-base-rgb), 1) !important;
|
||||
}
|
||||
.curLevel {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.radioWords {
|
||||
width: 56px;
|
||||
}
|
||||
.photo {
|
||||
width: 175px;
|
||||
height: 32px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0px;
|
||||
line-height: 24px;
|
||||
color: rgba(204, 204, 204, 1);
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
// background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
// border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
border-radius: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.radio {
|
||||
width: 108px;
|
||||
}
|
||||
::v-deep .el-select__wrapper {
|
||||
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||
border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
::v-deep .el-select__selected-item {
|
||||
margin-left: 10px;
|
||||
color: #ffffff;
|
||||
}
|
||||
::v-deep .el-popper .is-pure {
|
||||
z-index: 1000000 !important;
|
||||
}
|
||||
::v-deep .el-popper.is-light,
|
||||
.el-popper.is-light > .el-popper__arrow:before {
|
||||
z-index: 1000000 !important;
|
||||
}
|
||||
.level {
|
||||
width: 150px;
|
||||
}
|
||||
.el-checkbox {
|
||||
margin-top: 10px;
|
||||
}
|
||||
::v-deep .el-checkbox.el-checkbox--large .el-checkbox__label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0px;
|
||||
line-height: 24px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep .range-node-box .range-node-text {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
</style>
|
||||
368
src/renderer/src/views/components/propertyBox/Submerge.vue
Normal file
368
src/renderer/src/views/components/propertyBox/Submerge.vue
Normal file
@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
title="淹没分析"
|
||||
class="submerge"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">最低水位</span>
|
||||
<div class="input-number input-number-unit-3">
|
||||
<input
|
||||
class="input"
|
||||
id="minWaterLevel"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="9999999"
|
||||
v-model="minWaterLevel"
|
||||
@input="minWaterLevelInput"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">最高水位</span>
|
||||
<div class="input-number input-number-unit-3">
|
||||
<input
|
||||
class="input"
|
||||
id="maxWaterLevel"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="9999999"
|
||||
v-model="maxWaterLevel"
|
||||
@input="maxWaterLevelInput"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">水面面积</span>
|
||||
<div class="input-number input-number-unit-3">
|
||||
<input
|
||||
class="input area"
|
||||
id="area"
|
||||
placeholder="请绘制分析范围"
|
||||
type="number"
|
||||
v-model="area"
|
||||
min="0"
|
||||
max="9999999"
|
||||
:readonly="readOnly"
|
||||
@input="areaInput"
|
||||
/>
|
||||
<span class="unit">㎡</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">水量</span>
|
||||
<div class="input-number input-number-unit-3">
|
||||
<input
|
||||
class="input"
|
||||
id="waterVolume"
|
||||
type="number"
|
||||
placeholder="请输入水体水量"
|
||||
title=""
|
||||
min="0"
|
||||
max="9999999"
|
||||
v-model="waterVolume"
|
||||
@input="waterVolumeInput"
|
||||
/>
|
||||
<span class="unit">m³</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row subtitle-box">
|
||||
<span class="subtitle">上升速度</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input
|
||||
type="range"
|
||||
max="50"
|
||||
min="0"
|
||||
step="0.01"
|
||||
v-model="risingSpeed"
|
||||
@change="risingSpeedInput"
|
||||
/>
|
||||
<span class="rangeWords">水量</span>
|
||||
<div
|
||||
class="input-number input-number-unit-3"
|
||||
style="flex: 0 0 110px; margin-left: 10px"
|
||||
>
|
||||
<input
|
||||
class="input"
|
||||
id="risingSpeed"
|
||||
type="number"
|
||||
title=""
|
||||
v-model="risingSpeed"
|
||||
max="50"
|
||||
min="0"
|
||||
@input="risingSpeedInput"
|
||||
/>
|
||||
<span class="unit">m/s</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col operate-btn-box">
|
||||
<button class="draw" @click="draw">
|
||||
<svg class="icon-draw"><use xlink:href="#yj-icon-draw"></use></svg>绘制范围
|
||||
</button>
|
||||
<button class="flyto" @click="flyTo">
|
||||
<svg class="icon-positions">
|
||||
<use xlink:href="#yj-icon-positions"></use></svg
|
||||
>定位
|
||||
</button>
|
||||
<button class="reset" @click="reset">
|
||||
<svg class="icon-reset"><use xlink:href="#yj-icon-reset"></use></svg>重置
|
||||
</button>
|
||||
<button class="analog" @click="analog">
|
||||
<svg class="icon-play"><use xlink:href="#yj-icon-play"></use></svg>开始模拟
|
||||
</button>
|
||||
<button class="pause" v-if="!isPausng" @click="pause" style="margin-right: 0px">
|
||||
<svg class="icon-pause"><use xlink:href="#yj-icon-pause"></use></svg>暂停
|
||||
</button>
|
||||
<button class="start" v-else-if="isPausng" @click="pause" style="margin-right: 0px">
|
||||
<svg class="icon-play"><use xlink:href="#yj-icon-play"></use></svg>播放
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th">序号</div>
|
||||
<div class="th">经度</div>
|
||||
<div class="th">纬度</div>
|
||||
<div class="th">高程</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div class="tr" v-for="(value, i) in positions" :key="i">
|
||||
<div class="td">{{ i + 1 }}</div>
|
||||
<div class="td">{{ Number(value.lng.toFixed(10)) }}</div>
|
||||
<div class="td">{{ Number(value.lat.toFixed(10)) }}</div>
|
||||
<div class="td">{{ Number(value.alt.toFixed(4)) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-empty" v-if="!positions.length">
|
||||
<div class="empty-img"></div>
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider" style="margin-top: 20px"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="close">取消</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
// 属性
|
||||
var minWaterLevel: any = ref(0)
|
||||
var maxWaterLevel: any = ref(0)
|
||||
var area: any = ref(0)
|
||||
var waterVolume: any = ref(0)
|
||||
var risingSpeed: any = ref(1)
|
||||
var waterLevel: any = ref(0)
|
||||
|
||||
var positions: any = reactive([])
|
||||
|
||||
var submerge: any = reactive([])
|
||||
|
||||
var isPausng = ref(false)
|
||||
var readOnly = ref(true)
|
||||
|
||||
eventBus.on('submergeDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
|
||||
submerge = new YJ.Analysis.Submerge(window.earth)
|
||||
submerge.onEnd = (areaV, posi) => {
|
||||
isPausng.value = false
|
||||
minWaterLevel.value = submerge.minWaterLevel
|
||||
maxWaterLevel.value = submerge.maxWaterLevel
|
||||
waterVolume.value = submerge.waterVolume
|
||||
risingSpeed.value = submerge.risingSpeed
|
||||
waterLevel.value = submerge.waterLevels
|
||||
area.value = areaV * 1
|
||||
positions = posi
|
||||
}
|
||||
})
|
||||
|
||||
const closeCallBack = (e) => {
|
||||
minWaterLevel.value = 0
|
||||
maxWaterLevel.value = 0
|
||||
area.value = 0
|
||||
waterVolume.value = 0
|
||||
risingSpeed.value = 1
|
||||
waterLevel.value = 0
|
||||
positions = []
|
||||
isPausng.value = false
|
||||
readOnly.value = true
|
||||
|
||||
submerge.destroy()
|
||||
}
|
||||
function close() {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
|
||||
//方法
|
||||
function draw() {
|
||||
submerge.draw()
|
||||
}
|
||||
function flyTo() {
|
||||
submerge.flyTo()
|
||||
}
|
||||
function reset() {
|
||||
isPausng.value = false
|
||||
submerge.restart()
|
||||
}
|
||||
function pause() {
|
||||
if (isPausng.value) {
|
||||
//暂停中
|
||||
submerge.start()
|
||||
} else {
|
||||
//播放中
|
||||
submerge.pause()
|
||||
}
|
||||
isPausng.value = !isPausng.value
|
||||
}
|
||||
function analog() {
|
||||
isPausng.value = false
|
||||
submerge.move()
|
||||
}
|
||||
|
||||
function minWaterLevelInput() {
|
||||
let dom: any = document.getElementById('minWaterLevel')
|
||||
if (minWaterLevel.value != '.') {
|
||||
if (minWaterLevel.value < dom.min * 1) {
|
||||
minWaterLevel.value = dom.min * 1
|
||||
} else if (minWaterLevel.value > dom.max * 1) {
|
||||
minWaterLevel.value = dom.max * 1
|
||||
}
|
||||
minWaterLevel.value = Math.floor(minWaterLevel.value * 10000) / 10000
|
||||
maxWaterLevel.value = minWaterLevel.value + waterLevel.value
|
||||
|
||||
submerge.minWaterLevel = minWaterLevel.value
|
||||
submerge.maxWaterLevel = maxWaterLevel.value
|
||||
submerge.waterLevels = waterLevel.value
|
||||
}
|
||||
}
|
||||
function maxWaterLevelInput() {
|
||||
let dom: any = document.getElementById('maxWaterLevel')
|
||||
if (minWaterLevel.value != '.') {
|
||||
if (maxWaterLevel.value < dom.min * 1) {
|
||||
maxWaterLevel.value = dom.min * 1
|
||||
} else if (maxWaterLevel.value > dom.max * 1) {
|
||||
maxWaterLevel.value = dom.max * 1
|
||||
}
|
||||
if (maxWaterLevel.value < minWaterLevel.value) {
|
||||
maxWaterLevel.value = minWaterLevel.value
|
||||
} else {
|
||||
maxWaterLevel.value = Math.floor(maxWaterLevel.value * 10000) / 10000
|
||||
}
|
||||
|
||||
waterLevel.value = maxWaterLevel.value - minWaterLevel.value
|
||||
waterVolume.value = Number((waterLevel.value * area.value).toFixed(4))
|
||||
|
||||
submerge.waterVolume = waterVolume.value
|
||||
submerge.waterLevels = waterLevel.value
|
||||
submerge.maxWaterLevel = maxWaterLevel.value
|
||||
}
|
||||
}
|
||||
function areaInput() {
|
||||
let dom: any = document.getElementById('area')
|
||||
if (minWaterLevel.value != '.') {
|
||||
if (area.value < dom.min * 1) {
|
||||
area.value = dom.min * 1
|
||||
} else if (area.value > dom.max * 1) {
|
||||
area.value = dom.max * 1
|
||||
}
|
||||
submerge.areas = area.value
|
||||
waterLevel.value = Number((waterVolume.value / area.value).toFixed(4))
|
||||
maxWaterLevel.value = minWaterLevel.value + waterLevel.value
|
||||
|
||||
submerge.waterLevels = waterLevel.value
|
||||
submerge.maxWaterLevel = maxWaterLevel.value
|
||||
}
|
||||
}
|
||||
function waterVolumeInput() {
|
||||
let dom: any = document.getElementById('waterVolume')
|
||||
if (waterVolume.value < dom.min * 1) {
|
||||
waterVolume.value = dom.min * 1
|
||||
} else if (waterVolume.value > dom.max * 1) {
|
||||
waterVolume.value = dom.max * 1
|
||||
}
|
||||
waterVolume.value = Math.floor(waterVolume.value * 10000) / 10000
|
||||
if (area.value) {
|
||||
waterLevel.value = Number((waterVolume.value / area.value).toFixed(4))
|
||||
maxWaterLevel.value = maxWaterLevel.value + waterLevel.value
|
||||
|
||||
submerge.waterLevels = waterLevel.value
|
||||
submerge.maxWaterLevel = maxWaterLevel.value
|
||||
}
|
||||
}
|
||||
function risingSpeedInput() {
|
||||
let dom: any = document.getElementById('risingSpeed')
|
||||
if (risingSpeed.value != '.') {
|
||||
if (risingSpeed.value < dom.min * 1) {
|
||||
risingSpeed.value = dom.min * 1
|
||||
} else if (risingSpeed.value > dom.max * 1) {
|
||||
risingSpeed.value = dom.max * 1
|
||||
}
|
||||
submerge.risingSpeed = risingSpeed.value
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.label {
|
||||
width: 75px;
|
||||
}
|
||||
input:read-only {
|
||||
background-color: rgba(204, 204, 204, 0.2) !important;
|
||||
}
|
||||
|
||||
// .mask {
|
||||
// position: absolute;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// bottom: 0;
|
||||
// background-color: rgba(204, 204, 204, 0.2); /* 半透明白色背景 */
|
||||
// z-index: 2; /* 确保蒙层位于输入框之上 */
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// align-items: center;
|
||||
// pointer-events: none; /* 允许蒙层下的内容被点击 */
|
||||
// border: 1px solid rgba(0, 255, 255, 0.5);
|
||||
// }
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" title="地形开挖" left="180px" top="100px" :closeCallback="closeCallBack">
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: 0 0 70px">挖掘高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
id="height"
|
||||
title=""
|
||||
min="0"
|
||||
max="5000000"
|
||||
v-model="height"
|
||||
@input="heightInput"
|
||||
@change="changeHeight"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">绘制开挖区域</span>
|
||||
<button class="start-excavation" @click="draw">
|
||||
<svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>绘制
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">清除开挖区域</span>
|
||||
<button class="clean-excavation" @click="clear">
|
||||
<svg class="icon-close"><use xlink:href="#yj-icon-close"></use></svg>清除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
var height: any = ref(10)
|
||||
|
||||
var excavation: any = reactive([])
|
||||
eventBus.on('terrainExcavationDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
|
||||
excavation = new (window as any).YJ.Analysis.TerrainExcavation(window.earth, { height: 10 })
|
||||
})
|
||||
|
||||
const changeHeight = () => {
|
||||
excavation.height = height.value
|
||||
}
|
||||
const heightInput = () => {
|
||||
let dom = document.getElementById('height')
|
||||
if (height.value < dom.min * 1) {
|
||||
height.value = dom.min * 1
|
||||
} else if (height.value > dom.max * 1) {
|
||||
height.value = dom.max * 1
|
||||
}
|
||||
}
|
||||
const closeCallBack = (e) => {
|
||||
height.value = 10
|
||||
}
|
||||
const close = (e) => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
const draw = (e) => {
|
||||
excavation.startCreate()
|
||||
}
|
||||
const clear = (e) => {
|
||||
excavation.clear()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
162
src/renderer/src/views/components/propertyBox/ViewShed.vue
Normal file
162
src/renderer/src/views/components/propertyBox/ViewShed.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
class="view-shed"
|
||||
title="可视域分析"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">位置拾取(起点、终点)</span>
|
||||
<button class="edit" @click="edit">
|
||||
<svg class="icon-edit"><use xlink:href="#yj-icon-edit"></use></svg>拾取
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="margin-bottom: 25px">
|
||||
<div class="col">
|
||||
<span class="label">视点高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
class="input"
|
||||
id="viewPointHeight"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="999999"
|
||||
step="0.1"
|
||||
v-model="viewPointHeight"
|
||||
@change="viewPointHeightInput"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row subtitle-box">
|
||||
<span class="subtitle">视域夹角</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="range-box">
|
||||
<div class="range-bg">
|
||||
<div class="range-process-box">
|
||||
<div class="range-process"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="range-node-box">
|
||||
<span class="range-node-text">0°</span>
|
||||
<span class="range-node-text">45°</span>
|
||||
<span class="range-node-text">90°</span>
|
||||
<span class="range-node-text">135°</span>
|
||||
<span class="range-node-text">180°</span>
|
||||
<div class="range-node-active"><span class="range-node-active-text">0°</span></div>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
max="180"
|
||||
min="0"
|
||||
step="1"
|
||||
name="horizontalViewAngle"
|
||||
v-model="horizontalViewAngle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">绘制</button>
|
||||
<button @click="close">关闭</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
const viewPointHeight: any = ref(1.8)
|
||||
var horizontalViewAngle: any = ref(90)
|
||||
|
||||
var viewShed: any = reactive([])
|
||||
var timeout: any = reactive([])
|
||||
|
||||
eventBus.on('viewShedDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
viewShed && viewShed.destroy && viewShed.destroy()
|
||||
viewShed = new (window as any).YJ.Analysis.ViewShed((window as any).earth)
|
||||
setTimeout(() => {
|
||||
let contentElm = document.getElementsByClassName('view-shed')[0]
|
||||
let e_horizontalViewAngle:any = contentElm.querySelector("input[name='horizontalViewAngle']")
|
||||
let rangeNodeActive:any = contentElm.getElementsByClassName('range-node-active')[0]
|
||||
let rangeNodeActiveText = rangeNodeActive.getElementsByClassName('range-node-active-text')[0]
|
||||
let rangeProcess:any = contentElm.getElementsByClassName('range-process')[0]
|
||||
let percentage = (horizontalViewAngle.value / 180) * 100
|
||||
rangeNodeActive.style.left = percentage + '%'
|
||||
rangeProcess.style.width = percentage + '%'
|
||||
rangeNodeActiveText.innerHTML = horizontalViewAngle.value + '°'
|
||||
e_horizontalViewAngle.removeEventListener('input', inputFun)
|
||||
e_horizontalViewAngle.removeEventListener('change', changeFun)
|
||||
e_horizontalViewAngle.addEventListener('input', inputFun)
|
||||
e_horizontalViewAngle.addEventListener('change', changeFun)
|
||||
}, 10)
|
||||
})
|
||||
function inputFun() {
|
||||
let contentElm = document.getElementsByClassName('view-shed')[0]
|
||||
let rangeNodeActive:any = contentElm.getElementsByClassName('range-node-active')[0]
|
||||
let rangeNodeActiveText:any = rangeNodeActive.getElementsByClassName('range-node-active-text')[0]
|
||||
let rangeProcess:any = contentElm.getElementsByClassName('range-process')[0]
|
||||
let percentage = (horizontalViewAngle.value / 180) * 100
|
||||
rangeNodeActive.style.left = percentage + '%'
|
||||
rangeProcess.style.width = percentage + '%'
|
||||
rangeNodeActiveText.innerHTML = horizontalViewAngle.value + '°'
|
||||
}
|
||||
function changeFun() {
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(() => {
|
||||
viewShed.horizontalViewAngles = horizontalViewAngle.value
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const closeCallBack = (e) => {
|
||||
viewShed.close()
|
||||
viewPointHeight.value = 1.8
|
||||
horizontalViewAngle.value = 90
|
||||
}
|
||||
function viewPointHeightInput(e) {
|
||||
let dom:any = document.getElementById('viewPointHeight')
|
||||
if (viewPointHeight.value != '.') {
|
||||
if (viewPointHeight.value < dom.min * 1) {
|
||||
viewPointHeight.value = dom.min * 1
|
||||
} else if (viewPointHeight.value > dom.max * 1) {
|
||||
viewPointHeight.value = dom.max * 1
|
||||
}
|
||||
viewShed.viewPointHeight = viewPointHeight.value
|
||||
}
|
||||
}
|
||||
function draw() {
|
||||
viewShed.draw()
|
||||
}
|
||||
function close() {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
function edit() {
|
||||
viewShed.nodeEdit()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
78
src/renderer/src/views/components/propertyBox/Visibility.vue
Normal file
78
src/renderer/src/views/components/propertyBox/Visibility.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
title="多点视线分析"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:closeCallback="closeCallBack"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">视点高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input
|
||||
id="viewPointHeight"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="999999"
|
||||
step="0.1"
|
||||
placeholder="请输入数值"
|
||||
v-model="viewPointHeight"
|
||||
@input="viewPointHeightInput"
|
||||
@change="clangeViewPointHeight"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="draw">绘制</button>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
const viewPointHeight: any = ref(1.8)
|
||||
var visibility: any = reactive([])
|
||||
eventBus.on('analysisDialog', () => {
|
||||
baseDialog.value?.open()
|
||||
})
|
||||
|
||||
const clangeViewPointHeight = () => {}
|
||||
const viewPointHeightInput = () => {
|
||||
let dom: any = document.getElementById('viewPointHeight')
|
||||
if (viewPointHeight.value < dom.min * 1) {
|
||||
viewPointHeight.value = dom.min * 1
|
||||
} else if (viewPointHeight.value > dom.max * 1) {
|
||||
viewPointHeight.value = dom.max * 1
|
||||
}
|
||||
}
|
||||
const closeCallBack = (e) => {
|
||||
viewPointHeight.value = 1.8;
|
||||
(window as any).YJ.Measure.SetMeasureStatus(false)
|
||||
// visibility && visibility.end()
|
||||
}
|
||||
const draw = (e) => {
|
||||
visibility && visibility.end && visibility.end()
|
||||
visibility = new YJ.Analysis.Visibility(window.earth, { viewPointHeight: viewPointHeight.value })
|
||||
// visibility.create(this)
|
||||
!(window as any).analysisArr && ((window as any).analysisArr = []);
|
||||
(window as any).analysisArr.push(visibility);
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" title="贴地文字" left="calc(50% - 160px)" top="calc(50% - 120px)">
|
||||
<template #content>
|
||||
<textarea style="height: 76px; width: 270px;" v-model="text"></textarea>
|
||||
<textarea style="height: 76px; width: 270px" v-model="text"></textarea>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="confirm">确定</button>
|
||||
@ -10,18 +10,21 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { inject } from "vue";
|
||||
import { ref } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import { TreeApi } from '@/api/tree'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
import { initMapData } from '../tree/initMapData'
|
||||
import { useTreeNode } from '../tree/hooks/treeNode'
|
||||
|
||||
const baseDialog:any = ref(null);
|
||||
const eventBus:any = inject("bus");
|
||||
const text = ref("")
|
||||
eventBus.on("openStandTextAdd", () => {
|
||||
const { cusAddNodes } = useTreeNode()
|
||||
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
const text = ref('')
|
||||
eventBus.on('openStandTextAdd', () => {
|
||||
baseDialog.value?.open()
|
||||
});
|
||||
})
|
||||
const open = () => {
|
||||
baseDialog.value?.open()
|
||||
}
|
||||
@ -31,26 +34,32 @@ const confirm = () => {
|
||||
text.value = ''
|
||||
let Draw = new YJ.Draw.DrawPolyline(window.earth, { number: 2 })
|
||||
Draw.start(async (a, positions) => {
|
||||
if(!positions || positions.length < 2) {
|
||||
if (!positions || positions.length < 2) {
|
||||
return
|
||||
}
|
||||
let id = new YJ.Tools().randomString()
|
||||
let options: any = await initMapData('groundText', {
|
||||
id: id,
|
||||
name: name,
|
||||
positions: positions,
|
||||
text: name,
|
||||
positions: positions
|
||||
})
|
||||
delete options.host
|
||||
delete options.positions
|
||||
console.log('options', options)
|
||||
let selectedNodes = window.treeObj.getSelectedNodes()
|
||||
let params = {
|
||||
"id": id,
|
||||
"sourceName": name,
|
||||
"sourceType": "groundText",
|
||||
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
|
||||
id: id,
|
||||
sourceName: name,
|
||||
sourceType: 'groundText',
|
||||
parentId:
|
||||
selectedNodes && selectedNodes[selectedNodes.length - 1]
|
||||
? selectedNodes[selectedNodes.length - 1].id
|
||||
: undefined,
|
||||
// "treeIndex": 0,
|
||||
"params": options
|
||||
params: options
|
||||
}
|
||||
TreeApi.addOtherSource(params)
|
||||
cusAddNodes(window.treeObj, params.parentId, [params])
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
@ -58,4 +67,4 @@ defineExpose({
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" title="立体文字" left="calc(50% - 160px)" top="calc(50% - 120px)">
|
||||
<template #content>
|
||||
<textarea style="height: 76px; width: 270px;" v-model="text"></textarea>
|
||||
<textarea style="height: 76px; width: 270px" v-model="text"></textarea>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button @click="confirm">确定</button>
|
||||
@ -10,18 +10,18 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { inject } from "vue";
|
||||
import { ref } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import { TreeApi } from '@/api/tree'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
import { initMapData } from '../tree/initMapData'
|
||||
|
||||
const baseDialog:any = ref(null);
|
||||
const eventBus:any = inject("bus");
|
||||
const text = ref("")
|
||||
eventBus.on("openStandTextAdd", () => {
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
const text = ref('')
|
||||
eventBus.on('openStandTextAdd', () => {
|
||||
baseDialog.value?.open()
|
||||
});
|
||||
})
|
||||
const open = () => {
|
||||
baseDialog.value?.open()
|
||||
}
|
||||
@ -38,19 +38,23 @@ const confirm = () => {
|
||||
let options: any = await initMapData('standText', {
|
||||
id: id,
|
||||
name: name,
|
||||
positions: positions,
|
||||
positions: positions
|
||||
})
|
||||
delete options.host
|
||||
let selectedNodes = window.treeObj.getSelectedNodes()
|
||||
let params = {
|
||||
"id": id,
|
||||
"sourceName": name,
|
||||
"sourceType": "standText",
|
||||
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined,
|
||||
// "treeIndex": 0,
|
||||
"params": options
|
||||
}
|
||||
TreeApi.addOtherSource(params)
|
||||
console.log('options', options)
|
||||
// let selectedNodes = window.treeObj.getSelectedNodes()
|
||||
// let params = {
|
||||
// id: id,
|
||||
// sourceName: name,
|
||||
// sourceType: 'standText',
|
||||
// parentId:
|
||||
// selectedNodes && selectedNodes[selectedNodes.length - 1]
|
||||
// ? selectedNodes[selectedNodes.length - 1].id
|
||||
// : undefined,
|
||||
// // "treeIndex": 0,
|
||||
// params: options
|
||||
// }
|
||||
// TreeApi.addOtherSource(params)
|
||||
})
|
||||
}
|
||||
defineExpose({
|
||||
@ -58,4 +62,4 @@ defineExpose({
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@ -2,9 +2,19 @@
|
||||
<div class="attribute">
|
||||
<div class="row">
|
||||
<div class="col attribute-select-box">
|
||||
<span class="label" style="line-height: 32px;">内容类型</span>
|
||||
<el-select style="width: 175px" v-model="attributeType" @change="attributeChange" placeholder="请选择">
|
||||
<el-option v-for="item in attributeSelect" :key="item.key" :label="item.name" :value="item.key">
|
||||
<span class="label" style="line-height: 32px">内容类型</span>
|
||||
<el-select
|
||||
style="width: 175px"
|
||||
v-model="attributeType"
|
||||
@change="attributeChange"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in attributeSelect"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.key"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
@ -20,8 +30,8 @@
|
||||
<div class="row attribute-content attribute-content-link" v-show="attributeType === 'link'">
|
||||
<div class="col">
|
||||
<span class="label">添加链接</span>
|
||||
<div style="flex: 1;position: relative;">
|
||||
<input class="input link_add" type="text" v-model="addlinkInput">
|
||||
<div style="flex: 1; position: relative">
|
||||
<input class="input link_add" type="text" v-model="addlinkInput" />
|
||||
<i class="link_add_btn" @click="_addLink"></i>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,7 +48,7 @@
|
||||
<div class="table-body" v-if="attribute.link.content && attribute.link.content.length > 0">
|
||||
<div class="tr" v-for="(item, index) in attribute.link.content">
|
||||
<div class="td" v-if="linkEditActive.index === index">
|
||||
<input class="input" type="text" v-model="linkEditActive.name">
|
||||
<input class="input" type="text" v-model="linkEditActive.name" />
|
||||
</div>
|
||||
<div class="td" v-else>{{ item.name }}</div>
|
||||
<div class="td" v-if="linkEditActive.index === index">
|
||||
@ -53,7 +63,6 @@
|
||||
<button @click="linkEdit(index, item)">编辑</button>
|
||||
<button @click="linkDelete(index)">删除</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-empty" v-else>
|
||||
@ -66,7 +75,7 @@
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">编辑内容</span>
|
||||
<input class="input" type="text" @model="cameraName" style="width: 100px;">
|
||||
<input class="input" type="text" @model="cameraName" style="width: 100px" />
|
||||
<button class="select btn" @click="cameraSelect">搜索</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -76,17 +85,17 @@
|
||||
<div class="tr">
|
||||
<div class="th">操作</div>
|
||||
<div class="th">设备名称</div>
|
||||
<div class="th" style="width: 80px; flex: 0 80px;min-width: 80px;">设备类型</div>
|
||||
<div class="th" style="width: 126px; flex: 0 126px;min-width: 126px;">设备IP</div>
|
||||
<div class="th" style="width: 80px; flex: 0 80px;min-width: 80px;">设备端口</div>
|
||||
<div class="th" style="width: 80px; flex: 0 80px;min-width: 80px;">用户名</div>
|
||||
<div class="th" style="width: 80px; flex: 0 80px; min-width: 80px">设备类型</div>
|
||||
<div class="th" style="width: 126px; flex: 0 126px; min-width: 126px">设备IP</div>
|
||||
<div class="th" style="width: 80px; flex: 0 80px; min-width: 80px">设备端口</div>
|
||||
<div class="th" style="width: 80px; flex: 0 80px; min-width: 80px">用户名</div>
|
||||
<div class="th">密码</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body" style="display:none;">
|
||||
<div class="table-body" style="display: none">
|
||||
<div class="tr">
|
||||
<div class="td">
|
||||
<input type="checkbox" value="2">
|
||||
<input type="checkbox" value="2" />
|
||||
<span>绑定</span>
|
||||
</div>
|
||||
<div class="td">设备名称</div>
|
||||
@ -119,19 +128,19 @@
|
||||
<div class="table isc-table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th" style="width: 74px; flex: 0 74px;min-width: 74px;">操作</div>
|
||||
<div class="th" style="width: 74px; flex: 0 74px; min-width: 74px">操作</div>
|
||||
<div class="th">设备名称</div>
|
||||
<div class="th" style="width: 180px; flex: 0 180px; min-width: 180px;">设备状态</div>
|
||||
<div class="th" style="width: 180px; flex: 0 180px; min-width: 180px">设备状态</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body" style="display:none;">
|
||||
<div class="table-body" style="display: none">
|
||||
<div class="tr">
|
||||
<div class="td">
|
||||
<input type="checkbox" value="2">
|
||||
<input type="checkbox" value="2" />
|
||||
<span>绑定</span>
|
||||
</div>
|
||||
<div class="td">设备名称</div>
|
||||
<div class="td" style="width: 180px; flex: 0 180px; min-width: 180px;">设备状态</div>
|
||||
<div class="td" style="width: 180px; flex: 0 180px; min-width: 180px">设备状态</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-empty">
|
||||
@ -147,8 +156,8 @@
|
||||
<div class="row attribute-content attribute-content-vr" v-show="attributeType === 'vr'">
|
||||
<div class="col">
|
||||
<span class="label">添加链接</span>
|
||||
<div style="flex: 1;position: relative;">
|
||||
<input class="input vr_add" type="text">
|
||||
<div style="flex: 1; position: relative">
|
||||
<input class="input vr_add" type="text" />
|
||||
<i class="vr_add_btn" @click="_addRr"></i>
|
||||
</div>
|
||||
</div>
|
||||
@ -162,8 +171,7 @@
|
||||
<div class="th">操作</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
</div>
|
||||
<div class="table-body"></div>
|
||||
<div class="table-empty">
|
||||
<div class="empty-img"></div>
|
||||
<p>暂无数据</p>
|
||||
@ -175,22 +183,26 @@
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">编辑内容</span>
|
||||
<input class="input goods-select-input" type="text" style="width: 180px;margin-right: 10px;">
|
||||
<input
|
||||
class="input goods-select-input"
|
||||
type="text"
|
||||
style="width: 180px; margin-right: 10px"
|
||||
/>
|
||||
<button class="select btn" @click="goodsFilter">搜索</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table goods-table">
|
||||
<div class="table-head">
|
||||
<div class="tr">
|
||||
<div class="th" style="width: 60px; flex: 0 60px;min-width: 60px;">序号</div>
|
||||
<div class="th" style="flex: 0 0 280px;">名称</div>
|
||||
<div class="th" style="width: 60px; flex: 0 60px; min-width: 60px">序号</div>
|
||||
<div class="th" style="flex: 0 0 280px">名称</div>
|
||||
<div class="th">数量</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body" style="display:none;">
|
||||
<div class="table-body" style="display: none">
|
||||
<div class="tr">
|
||||
<div class="td" style="width: 60px; flex: 0 60px;min-width: 60px;">序号</div>
|
||||
<div class="td" style="flex: 0 0 280px;">名称</div>
|
||||
<div class="td" style="width: 60px; flex: 0 60px; min-width: 60px">序号</div>
|
||||
<div class="td" style="flex: 0 0 280px">名称</div>
|
||||
<div class="td">数量</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -205,11 +217,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { inject } from "vue";
|
||||
import { ref } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
|
||||
const baseDialog:any = ref(null);
|
||||
const eventBus:any = inject("bus");
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
const attributeType = ref('richText')
|
||||
|
||||
const props = defineProps({
|
||||
@ -232,7 +244,7 @@ const attributeSelect = ref([
|
||||
name: '链接',
|
||||
value: '链接',
|
||||
key: 'link'
|
||||
},
|
||||
}
|
||||
// {
|
||||
// name: 'IP摄像头',
|
||||
// value: 'IP摄像头',
|
||||
@ -260,10 +272,9 @@ const attributeSelect = ref([
|
||||
// },
|
||||
])
|
||||
|
||||
|
||||
const cameraName = ref('')
|
||||
const addlinkInput = ref('')
|
||||
const linkEditActive:any = ref({})
|
||||
const linkEditActive: any = ref({})
|
||||
|
||||
const openRichTextEditor = () => {
|
||||
eventBus.emit('openRichText', props.entityOptions.name, richTextContent.value, (val) => {
|
||||
@ -278,16 +289,15 @@ const _addLink = () => {
|
||||
}
|
||||
attribute.value.link.content.push(link)
|
||||
addlinkInput.value = ''
|
||||
}
|
||||
else {
|
||||
document.getElementById('fileInputlink')?.click();
|
||||
} else {
|
||||
document.getElementById('fileInputlink')?.click()
|
||||
eventBus.emit('defineClickAddLinkCb', (list) => {
|
||||
list.forEach((item) => {
|
||||
attribute.value.link.content.push({
|
||||
name: "链接",
|
||||
url: item.previewUrl,
|
||||
});
|
||||
});
|
||||
name: '链接',
|
||||
url: item.previewUrl
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -309,12 +319,10 @@ const linkConfirmEdit = (index) => {
|
||||
const linkCancelEdit = () => {
|
||||
linkEditActive.value = {}
|
||||
}
|
||||
const cameraSelect = () => { }
|
||||
const _addRr = () => { }
|
||||
const goodsFilter = () => { }
|
||||
const attributeChange = () => { }
|
||||
|
||||
|
||||
const cameraSelect = () => {}
|
||||
const _addRr = () => {}
|
||||
const goodsFilter = () => {}
|
||||
const attributeChange = () => {}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@ -1,78 +1,132 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" title="点标注" left="180px" top="100px" :className="'billboard-object'"
|
||||
:closeCallback="closeCallback">
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
title="点标注"
|
||||
left="180px"
|
||||
top="100px"
|
||||
:className="'billboard-object'"
|
||||
:closeCallback="closeCallback"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="flex: unset;">名称</span>
|
||||
<input class="input" type="text" v-model="entityOptions.name" @change="changeName">
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label" style="flex: unset">名称</span>
|
||||
<input class="input" type="text" v-model="entityOptions.name" @change="changeName" />
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div style="width: 46%;">
|
||||
<div style="width: 46%">
|
||||
<div class="row">
|
||||
<p class="lable-left-line">WGS84坐标</p>
|
||||
</div>
|
||||
<div class="row" style="margin-bottom: 5px;">
|
||||
<div class="row" style="margin-bottom: 5px">
|
||||
<div class="col">
|
||||
<span class="label">经度</span>
|
||||
<input class="input" type="number" title="" min="-180" max="180" v-model="entityOptions.lng"
|
||||
@change="changLng">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="-180"
|
||||
max="180"
|
||||
v-model="entityOptions.lng"
|
||||
@change="changLng"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-bottom: 5px;">
|
||||
<div class="row" style="margin-bottom: 5px">
|
||||
<div class="col">
|
||||
<span class="label">纬度</span>
|
||||
<input class="input" type="number" title="" min="-90" max="90" v-model="entityOptions.lat"
|
||||
@change="changLat">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="-90"
|
||||
max="90"
|
||||
v-model="entityOptions.lat"
|
||||
@change="changLat"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">海拔高度</span>
|
||||
<div class="input-number input-number-unit-1 alt-box"
|
||||
:class="{ 'disabled': heightMode == 2 || heightMode === 3 }">
|
||||
<input class="input" type="number" title="" min="-9999999" max="999999999" v-model="entityOptions.alt"
|
||||
@change="changAlt">
|
||||
<div
|
||||
class="input-number input-number-unit-1 alt-box"
|
||||
:class="{ disabled: heightMode == 2 || heightMode === 3 }"
|
||||
>
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="-9999999"
|
||||
max="999999999"
|
||||
v-model="entityOptions.alt"
|
||||
@change="changAlt"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 50%;">
|
||||
<div style="width: 50%">
|
||||
<div class="row coordinate-select-box">
|
||||
<div class="lable-left-line">转换坐标选择
|
||||
<el-select class="input input-select coordinate-select" style="width: 155px;margin-left: 20px"
|
||||
v-model="coordinate" @change="coordinateChange" placeholder="请选择">
|
||||
<el-option v-for="item in epsg_map" :key="item.epsg" :label="item.name" :value="item.epsg">
|
||||
<div class="lable-left-line">
|
||||
转换坐标选择
|
||||
<el-select
|
||||
class="input input-select coordinate-select"
|
||||
style="width: 155px; margin-left: 20px"
|
||||
v-model="coordinate"
|
||||
@change="coordinateChange"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in epsg_map"
|
||||
:key="item.epsg"
|
||||
:label="item.name"
|
||||
:value="item.epsg"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-bottom: 5px;">
|
||||
<div class="row" style="margin-bottom: 5px">
|
||||
<div class="col">
|
||||
<span class="label">X轴:</span>
|
||||
<input style="border: none;background: none;" class="input convert-x" readonly v-model="x">
|
||||
<input
|
||||
style="border: none; background: none"
|
||||
class="input convert-x"
|
||||
readonly
|
||||
v-model="x"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin-bottom: 5px;">
|
||||
<div class="row" style="margin-bottom: 5px">
|
||||
<div class="col">
|
||||
<span class="label">Y轴:</span>
|
||||
<input style="border: none;background: none;" class="input convert-y" readonly v-model="y">
|
||||
<input
|
||||
style="border: none; background: none"
|
||||
class="input convert-y"
|
||||
readonly
|
||||
v-model="y"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">Z轴:</span>
|
||||
<input style="border: none;background: none;" class="input convert-z" readonly v-model="z">
|
||||
<input
|
||||
style="border: none; background: none"
|
||||
class="input convert-z"
|
||||
readonly
|
||||
v-model="z"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -81,14 +135,21 @@
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 120px;">
|
||||
<div class="col" style="flex: 0 0 120px">
|
||||
<span class="label">视野缩放</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.scaleByDistance">
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.scaleByDistance" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">最近距离</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="1" max="99999999" v-model="entityOptions.near">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="99999999"
|
||||
v-model="entityOptions.near"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
@ -96,7 +157,14 @@
|
||||
<div class="col">
|
||||
<span class="label">最远距离</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="1" max="99999999" v-model="entityOptions.far">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="99999999"
|
||||
v-model="entityOptions.far"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
@ -110,18 +178,35 @@
|
||||
<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">
|
||||
<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 height-box" v-show="heightMode == 0 || heightMode == 1">
|
||||
<span class="label" style="flex: 0 0 56px;">高度</span>
|
||||
<span class="label" style="flex: 0 0 56px">高度</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height"
|
||||
@change="changHeight">
|
||||
<input
|
||||
class="input height"
|
||||
type="number"
|
||||
title=""
|
||||
min="-9999999"
|
||||
max="999999999"
|
||||
v-model="height"
|
||||
@change="changHeight"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
@ -129,92 +214,134 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;"
|
||||
@click="formatChange(1)">
|
||||
<input type="checkbox" class="YJ-custom-checkbox" v-model="format1">
|
||||
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">小数格式</span>
|
||||
<div
|
||||
class="YJ-custom-checkbox-box"
|
||||
style="display: flex; align-items: center; cursor: pointer"
|
||||
@click="formatChange(1)"
|
||||
>
|
||||
<input type="checkbox" class="YJ-custom-checkbox" v-model="format1" />
|
||||
<span style="margin-left: 10px; margin-bottom: 1px; user-select: none"
|
||||
>小数格式</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;"
|
||||
@click="formatChange(2)">
|
||||
<input type="checkbox" class="YJ-custom-checkbox" v-model="format2">
|
||||
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">度分格式</span>
|
||||
<div
|
||||
class="YJ-custom-checkbox-box"
|
||||
style="display: flex; align-items: center; cursor: pointer"
|
||||
@click="formatChange(2)"
|
||||
>
|
||||
<input type="checkbox" class="YJ-custom-checkbox" v-model="format2" />
|
||||
<span style="margin-left: 10px; margin-bottom: 1px; user-select: none"
|
||||
>度分格式</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;"
|
||||
@click="formatChange(3)">
|
||||
<input type="checkbox" class="YJ-custom-checkbox" v-model="format3">
|
||||
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">度分秒格式</span>
|
||||
<div
|
||||
class="YJ-custom-checkbox-box"
|
||||
style="display: flex; align-items: center; cursor: pointer"
|
||||
@click="formatChange(3)"
|
||||
>
|
||||
<input type="checkbox" class="YJ-custom-checkbox" v-model="format3" />
|
||||
<span style="margin-left: 10px; margin-bottom: 1px; user-select: none"
|
||||
>度分秒格式</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div style="flex: 1;">
|
||||
<div style="flex: 1">
|
||||
<div class="proj-input-box" v-show="format1">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span style="flex: 0 0 40px;">经度</span>
|
||||
<input class="input lng" readonly :value="entityOptions.lng">
|
||||
</div>
|
||||
<div class="col">
|
||||
<span style="flex: 0 0 40px">经度</span>
|
||||
<input class="input lng" readonly :value="entityOptions.lng" />
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span style="flex: 0 0 40px;">纬度</span>
|
||||
<input class="input lat" readonly :value="entityOptions.lat">
|
||||
</div>
|
||||
<div class="col">
|
||||
<span style="flex: 0 0 40px">纬度</span>
|
||||
<input class="input lat" readonly :value="entityOptions.lat" />
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="proj-input-box" style="width: 56%;" v-show="format2">
|
||||
<div class="proj-input-box" style="width: 56%" v-show="format2">
|
||||
<div class="row">
|
||||
<div class="col" style="flex-direction: column;">
|
||||
<div class="row" style="margin-bottom: 15px;">
|
||||
<span style="flex: 0 0 40px;">经度</span>
|
||||
<input class="input lng-dm-d" style="flex: 1;" readonly :value="lngDmD">
|
||||
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
|
||||
<input class="input lng-dm-m" style="flex: 1;" readonly :value="lngDmM">
|
||||
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
|
||||
<div class="col" style="flex-direction: column">
|
||||
<div class="row" style="margin-bottom: 15px">
|
||||
<span style="flex: 0 0 40px">经度</span>
|
||||
<input class="input lng-dm-d" style="flex: 1" readonly :value="lngDmD" />
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
|
||||
<input class="input lng-dm-m" style="flex: 1" readonly :value="lngDmM" />
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
|
||||
<span class="top-line"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span style="flex: 0 0 40px;">纬度</span>
|
||||
<input class="input lat-dm-d" style="flex: 1;" readonly :value="latDmD">
|
||||
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
|
||||
<input class="input lat-dm-m" style="flex: 1;" readonly :value="latDmM">
|
||||
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
|
||||
<span style="flex: 0 0 40px">纬度</span>
|
||||
<input class="input lat-dm-d" style="flex: 1" readonly :value="latDmD" />
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
|
||||
<input class="input lat-dm-m" style="flex: 1" readonly :value="latDmM" />
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
|
||||
<span class="bottom-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="proj-input-box" style="width: 70%;" v-show="format3">
|
||||
<div class="proj-input-box" style="width: 70%" v-show="format3">
|
||||
<div class="row">
|
||||
<div class="col" style="flex-direction: column;">
|
||||
<div class="row" style="margin-bottom: 15px;">
|
||||
<span style="flex: 0 0 40px;">经度</span>
|
||||
<input class="input lng-dms-d" style="flex: 1;" readonly :value="lngDmsD">
|
||||
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
|
||||
<input class="input lng-dms-m" style="flex: 1;" readonly :value="lngDmsM">
|
||||
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
|
||||
<input class="input lng-dms-s" style="flex: 1;" readonly :value="lngDmsS">
|
||||
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">秒</span>
|
||||
<div class="col" style="flex-direction: column">
|
||||
<div class="row" style="margin-bottom: 15px">
|
||||
<span style="flex: 0 0 40px">经度</span>
|
||||
<input
|
||||
class="input lng-dms-d"
|
||||
style="flex: 1"
|
||||
readonly
|
||||
:value="lngDmsD"
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
|
||||
<input
|
||||
class="input lng-dms-m"
|
||||
style="flex: 1"
|
||||
readonly
|
||||
:value="lngDmsM"
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
|
||||
<input
|
||||
class="input lng-dms-s"
|
||||
style="flex: 1"
|
||||
readonly
|
||||
:value="lngDmsS"
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">秒</span>
|
||||
<span class="top-line"></span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span style="flex: 0 0 40px;">纬度</span>
|
||||
<input class="input lat-dms-d" style="flex: 1;" readonly :value="latDmsD">
|
||||
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">度</span>
|
||||
<input class="input lat-dms-m" style="flex: 1;" readonly :value="latDmsM">
|
||||
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">分</span>
|
||||
<input class="input lat-dms-s" style="flex: 1;" readonly :value="latDmsS">
|
||||
<span class="label" style="flex: 0 0 14px;margin: 0 10px;">秒</span>
|
||||
<span style="flex: 0 0 40px">纬度</span>
|
||||
<input
|
||||
class="input lat-dms-d"
|
||||
style="flex: 1"
|
||||
readonly
|
||||
:value="latDmsD"
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">度</span>
|
||||
<input
|
||||
class="input lat-dms-m"
|
||||
style="flex: 1"
|
||||
readonly
|
||||
:value="latDmsM"
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">分</span>
|
||||
<input
|
||||
class="input lat-dms-s"
|
||||
style="flex: 1"
|
||||
readonly
|
||||
:value="latDmsS"
|
||||
/>
|
||||
<span class="label" style="flex: 0 0 14px; margin: 0 10px">秒</span>
|
||||
<span class="bottom-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
@ -226,28 +353,38 @@
|
||||
<el-tab-pane label="标注风格" name="3">
|
||||
<div>
|
||||
<h4>图标设置</h4>
|
||||
<div class="row" style="margin-bottom: 10px;">
|
||||
<div class="col" style="flex: 0 0 80px;">
|
||||
<span class="label" style="flex: none;">显隐</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.billboardShow">
|
||||
<div class="row" style="margin-bottom: 10px">
|
||||
<div class="col" style="flex: 0 0 80px">
|
||||
<span class="label" style="flex: none">显隐</span>
|
||||
<input
|
||||
class="btn-switch"
|
||||
type="checkbox"
|
||||
v-model="entityOptions.billboardShow"
|
||||
/>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 90px;">
|
||||
<span class="label" style="flex: none;">图标</span>
|
||||
<div class="col" style="flex: 0 0 90px">
|
||||
<span class="label" style="flex: none">图标</span>
|
||||
<div class="image-box" @click="clickChangeImage">
|
||||
<img class="image" :src="entityOptions.billboardImage" alt="">
|
||||
<img class="image" :src="entityOptions.billboardImage" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 90px;">
|
||||
<span class="label" style="flex: none;">默认图标</span>
|
||||
<div class="col" style="flex: 0 0 90px">
|
||||
<span class="label" style="flex: none">默认图标</span>
|
||||
<div class="image-box" @click="clickChangeDefaultImage">
|
||||
<img class="image" :src="entityOptions.billboardDefaultImage" alt="">
|
||||
<img class="image" :src="entityOptions.billboardDefaultImage" alt="" />
|
||||
</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.1" max="99"
|
||||
v-model="entityOptions.billboardScale">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="0.1"
|
||||
max="99"
|
||||
v-model="entityOptions.billboardScale"
|
||||
/>
|
||||
<span class="unit">倍</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
@ -257,22 +394,38 @@
|
||||
<div>
|
||||
<h4>文字设置</h4>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 80px;">
|
||||
<span class="label" style="flex: none;">显隐</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.labelShow">
|
||||
<div class="col" style="flex: 0 0 80px">
|
||||
<span class="label" style="flex: none">显隐</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.labelShow" />
|
||||
</div>
|
||||
<div class="col font-select-box">
|
||||
<span class="label" style="flex: none;">字体选择</span>
|
||||
<el-select class="input input-select font-select" style="width: 100px;" v-model="entityOptions.labelFontFamily">
|
||||
<el-option v-for="item in fontList" :key="item.key" :label="item.name" :value="item.key">
|
||||
<span class="label" style="flex: none">字体选择</span>
|
||||
<el-select
|
||||
class="input input-select font-select"
|
||||
style="width: 100px"
|
||||
v-model="entityOptions.labelFontFamily"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in fontList"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.key"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">文字大小</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="1" max="99" v-model="entityOptions.labelFontSize"
|
||||
style="width: 70px;">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="99"
|
||||
v-model="entityOptions.labelFontSize"
|
||||
style="width: 70px"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
@ -289,11 +442,13 @@
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div style="position: absolute; left: 24px; display: flex;">
|
||||
<button @click="updateHeight"><svg class="icon-updateheigh">
|
||||
<use xlink:href="#yj-icon-updateheight"></use>
|
||||
</svg>更新高程</button>
|
||||
<button style="margin-left: 10px;" @click="translate">平移</button>
|
||||
<div style="position: absolute; left: 24px; display: flex">
|
||||
<button @click="updateHeight">
|
||||
<svg class="icon-updateheigh">
|
||||
<use xlink:href="#yj-icon-updateheight"></use></svg
|
||||
>更新高程
|
||||
</button>
|
||||
<button style="margin-left: 10px" @click="translate">平移</button>
|
||||
</div>
|
||||
<button @click="confirm">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
@ -302,8 +457,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { inject } from "vue";
|
||||
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'
|
||||
@ -312,15 +467,17 @@ import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
|
||||
|
||||
const { cusUpdateNode } = useTreeNode()
|
||||
|
||||
const baseDialog:any = ref(null);
|
||||
const eventBus:any = inject("bus");
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
const epsg_map = ref([{
|
||||
"name": "WGS 84 / UTM zone 3N",
|
||||
"epsg": "EPSG:32603",
|
||||
"def": "+proj=utm +zone=3 +datum=WGS84 +units=m +no_defs"
|
||||
}])
|
||||
let array:any[] = []
|
||||
const epsg_map = ref([
|
||||
{
|
||||
name: 'WGS 84 / UTM zone 3N',
|
||||
epsg: 'EPSG:32603',
|
||||
def: '+proj=utm +zone=3 +datum=WGS84 +units=m +no_defs'
|
||||
}
|
||||
])
|
||||
let array: any[] = []
|
||||
for (const [key, value] of window.earth.proj.epsg_map) {
|
||||
let item = structuredClone(value)
|
||||
item.name = item.name + `(${item.epsg}})`
|
||||
@ -367,10 +524,10 @@ const heightModeData = ref([
|
||||
}
|
||||
])
|
||||
const activeName = ref('1')
|
||||
const entityOptions:any = ref({});
|
||||
const x = ref();
|
||||
const y = ref();
|
||||
const z = ref();
|
||||
const entityOptions: any = ref({})
|
||||
const x = ref()
|
||||
const y = ref()
|
||||
const z = ref()
|
||||
const coordinate = ref('EPSG:4326')
|
||||
const heightMode = ref(0)
|
||||
const labelColorRef = ref(null)
|
||||
@ -397,7 +554,7 @@ const open = async (id) => {
|
||||
defaultColor: entityOptions.value.labelColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
sure: (color) => {
|
||||
entityOptions.value.labelColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
@ -410,10 +567,9 @@ const closeCallback = () => {
|
||||
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
||||
that.positionEditing = false
|
||||
that.reset()
|
||||
eventBus?.emit("destroyComponent")
|
||||
eventBus?.emit('destroyComponent')
|
||||
}
|
||||
|
||||
|
||||
const changeName = (e) => {
|
||||
entityOptions.value.labelText = e.target.value
|
||||
}
|
||||
@ -435,7 +591,6 @@ const coordinateChange = () => {
|
||||
z.value = position[0].z
|
||||
}
|
||||
|
||||
|
||||
const heightModeChange = (val) => {
|
||||
switch (val) {
|
||||
case 0:
|
||||
@ -445,15 +600,9 @@ const heightModeChange = (val) => {
|
||||
case 1:
|
||||
case '1':
|
||||
if (window.earth.viewer.scene.terrainProvider.availability) {
|
||||
window.Cesium.sampleTerrainMostDetailed(
|
||||
window.earth.viewer.scene.terrainProvider,
|
||||
[
|
||||
window.Cesium.Cartographic.fromDegrees(
|
||||
entityOptions.value.lng,
|
||||
entityOptions.value.lat
|
||||
)
|
||||
]
|
||||
).then(position => {
|
||||
window.Cesium.sampleTerrainMostDetailed(window.earth.viewer.scene.terrainProvider, [
|
||||
window.Cesium.Cartographic.fromDegrees(entityOptions.value.lng, entityOptions.value.lat)
|
||||
]).then((position) => {
|
||||
height.value = entityOptions.value.alt - Number(position[0].height.toFixed(2))
|
||||
})
|
||||
} else {
|
||||
@ -471,10 +620,12 @@ const heightModeChange = (val) => {
|
||||
objectsToExclude.push((value as any).entity)
|
||||
}
|
||||
}
|
||||
entityOptions.value.getClampToHeight(entityOptions.value.options.position, objectsToExclude).then(h => {
|
||||
height.value = Number(h.toFixed(2))
|
||||
entityOptions.value.alt = Number(h.toFixed(2))
|
||||
})
|
||||
entityOptions.value
|
||||
.getClampToHeight(entityOptions.value.options.position, objectsToExclude)
|
||||
.then((h) => {
|
||||
height.value = Number(h.toFixed(2))
|
||||
entityOptions.value.alt = Number(h.toFixed(2))
|
||||
})
|
||||
break
|
||||
}
|
||||
that.heightMode = val
|
||||
@ -496,24 +647,14 @@ const changAlt = () => {
|
||||
const changHeight = () => {
|
||||
switch (heightMode.value) {
|
||||
case 0:
|
||||
entityOptions.value.alt = Number(
|
||||
Number(height.value).toFixed(2)
|
||||
)
|
||||
entityOptions.value.alt = Number(Number(height.value).toFixed(2))
|
||||
break
|
||||
case 1:
|
||||
if (window.earth.viewer.scene.terrainProvider.availability) {
|
||||
window.Cesium.sampleTerrainMostDetailed(
|
||||
window.earth.viewer.scene.terrainProvider,
|
||||
[
|
||||
window.Cesium.Cartographic.fromDegrees(
|
||||
entityOptions.value.lng,
|
||||
entityOptions.value.lat
|
||||
)
|
||||
]
|
||||
).then(position => {
|
||||
entityOptions.value.alt =
|
||||
Number(height.value) +
|
||||
Number(position[0].height.toFixed(2))
|
||||
window.Cesium.sampleTerrainMostDetailed(window.earth.viewer.scene.terrainProvider, [
|
||||
window.Cesium.Cartographic.fromDegrees(entityOptions.value.lng, entityOptions.value.lat)
|
||||
]).then((position) => {
|
||||
entityOptions.value.alt = Number(height.value) + Number(position[0].height.toFixed(2))
|
||||
})
|
||||
} else {
|
||||
entityOptions.value.alt = Number(height.value)
|
||||
@ -524,7 +665,7 @@ const changHeight = () => {
|
||||
coordinateChange()
|
||||
}
|
||||
|
||||
const handleClick = () => { }
|
||||
const handleClick = () => {}
|
||||
|
||||
const formatChange = (val) => {
|
||||
switch (val) {
|
||||
@ -600,7 +741,6 @@ const translate = () => {
|
||||
that.openPositionEditing(() => {
|
||||
changAlt()
|
||||
})
|
||||
|
||||
}
|
||||
const confirm = () => {
|
||||
originalOptions = structuredClone(that.options)
|
||||
@ -608,33 +748,28 @@ const confirm = () => {
|
||||
let params = structuredClone(that.options)
|
||||
delete params.host
|
||||
let params2 = {
|
||||
"id": params.id,
|
||||
"sourceName": params.name,
|
||||
"params": params,
|
||||
"isShow": params.show ? 1 : 0,
|
||||
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)})
|
||||
cusUpdateNode({ id: params.id, sourceName: params.name, params: JSON.stringify(params) })
|
||||
}
|
||||
const close = () => {
|
||||
baseDialog.value?.close()
|
||||
}
|
||||
|
||||
const clickChangeImage = () => {
|
||||
eventBus?.emit("openImageSelect")
|
||||
eventBus?.emit('openImageSelect')
|
||||
}
|
||||
const clickChangeDefaultImage = () => {
|
||||
eventBus?.emit("openImageSelect")
|
||||
eventBus?.emit('openImageSelect')
|
||||
}
|
||||
const fontChange = (val) => {
|
||||
entityOptions.value.labelFontFamily = val
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
@ -646,4 +781,4 @@ defineExpose({
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,14 +1,21 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" title="曲线标注" left="180px" top="100px" className="polyline" :closeCallback="closeCallback">
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
title="曲线标注"
|
||||
left="180px"
|
||||
top="100px"
|
||||
className="polyline"
|
||||
:closeCallback="closeCallback"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<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">
|
||||
<input class="input" maxlength="40" type="text" v-model="entityOptions.name" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 56%;">
|
||||
<div class="col" style="flex: 0 0 56%">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
@ -17,7 +24,7 @@
|
||||
<el-option label="投影长度" value="1"></el-option>
|
||||
<el-option label="地表长度" value="2"></el-option>
|
||||
</el-select>
|
||||
<input v-model="length" class="input-text" readonly>
|
||||
<input v-model="length" class="input-text" readonly />
|
||||
<el-select v-model="lengthUnit">
|
||||
<el-option label="米" value="m"></el-option>
|
||||
<el-option label="千米" value="km"></el-option>
|
||||
@ -37,22 +44,48 @@
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<button
|
||||
class="confirm height-confirm"
|
||||
style="margin-left: 5px"
|
||||
@click="heightConfirm"
|
||||
:disabled="heightMode == 2"
|
||||
>
|
||||
应用
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -69,20 +102,40 @@
|
||||
<div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
|
||||
<div class="td">{{ i + 1 }}</div>
|
||||
<div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number"
|
||||
v-model="item.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>
|
||||
<input
|
||||
class="input"
|
||||
@blur="inputBlurCallBack($event, i, 'lng', 8)"
|
||||
type="number"
|
||||
v-model="item.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="item.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>
|
||||
<input
|
||||
class="input"
|
||||
@blur="inputBlurCallBack($event, i, 'lat', 8)"
|
||||
type="number"
|
||||
v-model="item.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="item.alt" min="-9999999" max="999999999"
|
||||
v-if="activeTd.index == i && activeTd.name == 'alt'">
|
||||
<span style="pointer-events: none;" v-else>{{ (item.alt).toFixed(2) }}</span>
|
||||
<input
|
||||
class="input"
|
||||
@blur="inputBlurCallBack($event, i, 'alt', 2)"
|
||||
type="number"
|
||||
v-model="item.alt"
|
||||
min="-9999999"
|
||||
max="999999999"
|
||||
v-if="activeTd.index == i && activeTd.name == 'alt'"
|
||||
/>
|
||||
<span style="pointer-events: none" v-else>{{ item.alt.toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -95,19 +148,35 @@
|
||||
<span class="label">线条颜色</span>
|
||||
<div class="color" ref="colorRef"></div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%;">
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">线条宽度</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px;">
|
||||
<input class="input" type="number" title="" min="1" max="999" v-model="entityOptions.lineWidth">
|
||||
<div class="input-number input-number-unit-1" style="width: 80px">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="999"
|
||||
v-model="entityOptions.lineWidth"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col input-select-line-type-box" style="flex: 0 0 37%;">
|
||||
<div class="col input-select-line-type-box" style="flex: 0 0 37%">
|
||||
<span class="label">线条形式</span>
|
||||
<el-select class="input input-select input-select-line-type" style="margin-left: 20px"
|
||||
v-model="entityOptions.lineType" @change="lineTypechange">
|
||||
<el-option v-for="item in lineTypeData" :key="item.key" :label="item.name" :value="item.key">
|
||||
<el-select
|
||||
class="input input-select input-select-line-type"
|
||||
style="margin-left: 20px"
|
||||
v-model="entityOptions.lineType"
|
||||
@change="lineTypechange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineTypeData"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.key"
|
||||
>
|
||||
<i class="yj-custom-icon" :class="item.icon"></i>
|
||||
{{ item.name }}
|
||||
</el-option>
|
||||
@ -117,18 +186,25 @@
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">线段缓冲</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.extend">
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.extend" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%;">
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">缓冲宽度</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px;">
|
||||
<input class="input" type="number" title="" min="0" data-min="0.01" max="999999"
|
||||
v-model="entityOptions.extendWidth">
|
||||
<div class="input-number input-number-unit-1" style="width: 80px">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
data-min="0.01"
|
||||
max="999999"
|
||||
v-model="entityOptions.extendWidth"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%;">
|
||||
<div class="col" style="flex: 0 0 37%">
|
||||
<span class="label">缓冲颜色</span>
|
||||
<div class="extendColor" ref="extendColorRef"></div>
|
||||
</div>
|
||||
@ -136,23 +212,43 @@
|
||||
<div class="row" v-show="entityOptions.lineType > 2 && entityOptions.lineType < 13">
|
||||
<div class="col">
|
||||
<span class="label">首尾反向</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.rotate">
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.rotate" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%;">
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">流动速率</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px;">
|
||||
<input class="input" type="number" title="" min="0" max="999999" step="1"
|
||||
v-model="entityOptions.speed">
|
||||
<div class="input-number input-number-unit-1" style="width: 80px">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="999999"
|
||||
step="1"
|
||||
v-model="entityOptions.speed"
|
||||
/>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%;">
|
||||
<span class="label lineSpace"
|
||||
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5">线条间距</span>
|
||||
<div class="input-number input-number-unit-1 lineSpace" style="width: 80px;"
|
||||
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5">
|
||||
<input class="input" type="number" title="" min="0" max="4.5" step="0.1"
|
||||
v-model="entityOptions.space">
|
||||
<div class="col" style="flex: 0 0 37%">
|
||||
<span
|
||||
class="label lineSpace"
|
||||
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"
|
||||
>线条间距</span
|
||||
>
|
||||
<div
|
||||
class="input-number input-number-unit-1 lineSpace"
|
||||
style="width: 80px"
|
||||
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"
|
||||
>
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="4.5"
|
||||
step="0.1"
|
||||
v-model="entityOptions.space"
|
||||
/>
|
||||
<span class="unit">倍</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
@ -161,7 +257,7 @@
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">首尾相连</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.noseToTail">
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.noseToTail" />
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
@ -173,11 +269,13 @@
|
||||
</div>
|
||||
</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">平移</button>
|
||||
<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">平移</button>
|
||||
</div>
|
||||
<button @click="confirm">确定</button>
|
||||
<button @click="close">关闭</button>
|
||||
@ -186,8 +284,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, getCurrentInstance } from 'vue';
|
||||
import { inject } from "vue";
|
||||
import { ref, getCurrentInstance } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import { TreeApi } from '@/api/tree'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
import { initMapData } from '../tree/initMapData'
|
||||
@ -198,8 +296,8 @@ import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
|
||||
|
||||
const { cusUpdateNode } = useTreeNode()
|
||||
|
||||
const baseDialog:any = ref(null);
|
||||
const eventBus:any = inject("bus");
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
const length = ref(0)
|
||||
const lengthUnit = ref('m')
|
||||
@ -307,7 +405,7 @@ const activeTd = ref({
|
||||
index: -1,
|
||||
name: ''
|
||||
})
|
||||
const entityOptions:any = ref({});
|
||||
const entityOptions: any = ref({})
|
||||
const linePositions = ref([])
|
||||
const colorRef = ref(null)
|
||||
const extendColorRef = ref(null)
|
||||
@ -316,7 +414,6 @@ const heightMode = ref(0)
|
||||
let originalOptions
|
||||
let that
|
||||
|
||||
|
||||
const open = async (id) => {
|
||||
that = window.earth.entityMap.get(id)
|
||||
originalOptions = structuredClone(that.options)
|
||||
@ -324,13 +421,12 @@ const open = async (id) => {
|
||||
heightMode.value = entityOptions.value.heightMode
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
linePositions.value = structuredClone(that.options.positions)
|
||||
that.lengthChangeCallBack = ()=>{
|
||||
that.lengthChangeCallBack = () => {
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
}
|
||||
else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
} else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
}
|
||||
heightModeChange(heightMode.value)
|
||||
baseDialog.value?.open()
|
||||
@ -343,7 +439,7 @@ const open = async (id) => {
|
||||
defaultColor: entityOptions.value.color,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
sure: (color) => {
|
||||
entityOptions.value.color = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
@ -357,7 +453,7 @@ const open = async (id) => {
|
||||
defaultColor: entityOptions.value.extendColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
sure: (color) => {
|
||||
entityOptions.value.extendColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
@ -371,11 +467,13 @@ const heightModeChange = (val) => {
|
||||
const heightConfirm = () => {
|
||||
that.positionEditing = false
|
||||
for (let i = 0; i < entityOptions.value.options.positions.length; i++) {
|
||||
entityOptions.value.options.positions[i].alt = Number((entityOptions.value.options.positions[i].alt + Number(height.value)).toFixed(2))
|
||||
entityOptions.value.options.positions[i].alt = Number(
|
||||
(entityOptions.value.options.positions[i].alt + Number(height.value)).toFixed(2)
|
||||
)
|
||||
}
|
||||
}
|
||||
const inputDblclick = async (event, i, anme) => {
|
||||
if(heightMode.value == 2) {
|
||||
if (heightMode.value == 2) {
|
||||
return
|
||||
}
|
||||
activeTd.value = {
|
||||
@ -397,8 +495,7 @@ const inputBlurCallBack = (event, i, name, digit = 2) => {
|
||||
}
|
||||
}
|
||||
|
||||
const lineTypechange = () => {
|
||||
}
|
||||
const lineTypechange = () => {}
|
||||
const nodeEdit = () => {
|
||||
entityOptions.value.positionEditing = false
|
||||
entityOptions.value.noseToTail = false
|
||||
@ -408,8 +505,7 @@ const nodeEdit = () => {
|
||||
entityOptions.value.options.positions = structuredClone(positions)
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = lenByMeter / 1000
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
length.value = lenByMeter
|
||||
}
|
||||
})
|
||||
@ -419,8 +515,7 @@ const translate = () => {
|
||||
entityOptions.value.options.positions = structuredClone(that.options.positions)
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
})
|
||||
@ -431,7 +526,7 @@ const closeCallback = () => {
|
||||
that.positionEditing = false
|
||||
entityOptions.value.closeNodeEdit()
|
||||
entityOptions.value.reset()
|
||||
eventBus.emit("destroyComponent")
|
||||
eventBus.emit('destroyComponent')
|
||||
}
|
||||
const confirm = () => {
|
||||
originalOptions = structuredClone(that.options)
|
||||
@ -439,13 +534,13 @@ const confirm = () => {
|
||||
let params = structuredClone(that.options)
|
||||
delete params.host
|
||||
let params2 = {
|
||||
"id": params.id,
|
||||
"sourceName": params.name,
|
||||
"params": params,
|
||||
"isShow": params.show ? 1 : 0,
|
||||
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)})
|
||||
cusUpdateNode({ id: params.id, sourceName: params.name, params: JSON.stringify(params) })
|
||||
}
|
||||
const close = () => {
|
||||
baseDialog.value?.close()
|
||||
@ -457,14 +552,13 @@ watch(
|
||||
if (entityOptions.value.lengthByMeter || entityOptions.value.lengthByMeter == 0) {
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
)
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
@ -494,4 +588,4 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -30,17 +30,17 @@ function getFontList() {
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
function getFontFamily(key:any) {
|
||||
function getFontFamily(key: any) {
|
||||
for (let i = 0; i < fontData.length; i++) {
|
||||
if (fontData[i].key == key) {
|
||||
return fontData[i].font;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
function getFontFamilyName(key:any) {
|
||||
function getFontFamilyName(key: any) {
|
||||
for (let i = 0; i < fontData.length; i++) {
|
||||
if (fontData[i].key == key) {
|
||||
return fontData[i].name;
|
||||
@ -48,4 +48,4 @@ function getFontFamilyName(key:any) {
|
||||
}
|
||||
}
|
||||
|
||||
export { getFontList, getFontFamily, getFontFamilyName }
|
||||
export { getFontList, getFontFamily, getFontFamilyName }
|
||||
|
||||
@ -102,6 +102,7 @@ let originalOptions: any
|
||||
let that: any
|
||||
const colorRef = ref(null)
|
||||
const open = async (id: any) => {
|
||||
console.log('id', id)
|
||||
that = window.earth.entityMap.get(id)
|
||||
originalOptions = structuredClone(that.options)
|
||||
entityOptions.value = that
|
||||
@ -131,12 +132,12 @@ const confirm = () => {
|
||||
delete params.name
|
||||
let params2 = {
|
||||
"id": params.id,
|
||||
"sourceName": params.name,
|
||||
"sourceName": params.text,
|
||||
"params": params,
|
||||
"isShow": params.show ? 1 : 0,
|
||||
}
|
||||
TreeApi.updateDirectoryInfo(params2)
|
||||
cusUpdateNode({ "id": params.id, "sourceName": params.name, "params": JSON.stringify(params) })
|
||||
cusUpdateNode({ "id": params.id, "sourceName": params.text, "params": JSON.stringify(params) })
|
||||
}
|
||||
const close = () => {
|
||||
baseDialog.value?.close()
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">新增{{ type }}标签风格设置</span>
|
||||
<button style="margin-right: 56px;">初始风格</button>
|
||||
<button style="margin-right: 56px">初始风格</button>
|
||||
<button>当前风格</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -11,20 +11,27 @@
|
||||
<div class="row"></div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label" style="margin-right: 42px;">标签设置</span>
|
||||
<span class="label" style="margin-right: 42px">标签设置</span>
|
||||
<span class="label">标签显示</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.labelShow">
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.labelShow" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 114px;">
|
||||
<div class="col" style="flex: 0 0 114px">
|
||||
<span class="label">视野缩放</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.labelScaleByDistance">
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.labelScaleByDistance" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">最近距离</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="1" max="99999999" v-model="entityOptions.labelNear">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="99999999"
|
||||
v-model="entityOptions.labelNear"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
@ -32,7 +39,14 @@
|
||||
<div class="col">
|
||||
<span class="label">最远距离</span>
|
||||
<div class="input-number input-number-unit-1">
|
||||
<input class="input" type="number" title="" min="1" max="99999999" v-model="entityOptions.labelFar">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="99999999"
|
||||
v-model="entityOptions.labelFar"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
@ -46,20 +60,27 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col" style="flex: 0 0 114px;">
|
||||
<div class="col" style="flex: 0 0 114px">
|
||||
<span class="label">字体颜色</span>
|
||||
<div class="labelColor" ref="labelColorRef"></div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<span class="label">字体大小</span>
|
||||
<div class="input-number input-number-unit-2">
|
||||
<input class="input" type="number" title="" min="1" max="99" v-model="entityOptions.labelFontSize">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="99"
|
||||
v-model="entityOptions.labelFontSize"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col font-select-box">
|
||||
<span class="label" style="flex: none;">字体选择</span>
|
||||
<span class="label" style="flex: none">字体选择</span>
|
||||
<el-select class="input input-select font-select" v-model="entityOptions.labelFontFamily">
|
||||
<el-option v-for="item in fontList" :key="item.key" :label="item.name" :value="item.key">
|
||||
</el-option>
|
||||
@ -76,8 +97,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { inject } from "vue";
|
||||
import { ref } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import { getFontList } from './fontSelect'
|
||||
|
||||
const props = defineProps({
|
||||
@ -106,7 +127,7 @@ onMounted(() => {
|
||||
defaultColor: entityOptions.value.labelColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
sure: (color) => {
|
||||
entityOptions.value.labelColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
@ -116,4 +137,4 @@ onMounted(() => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@ -340,4 +340,4 @@ defineExpose({
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@ -1,14 +1,21 @@
|
||||
<template>
|
||||
<Dialog ref="baseDialog" title="线标注" left="180px" top="100px" className="polyline" :closeCallback="closeCallback">
|
||||
<Dialog
|
||||
ref="baseDialog"
|
||||
title="线标注"
|
||||
left="180px"
|
||||
top="100px"
|
||||
className="polyline"
|
||||
:closeCallback="closeCallback"
|
||||
>
|
||||
<template #content>
|
||||
<span class="custom-divider"></span>
|
||||
<div class="div-item">
|
||||
<div class="row" style="align-items: flex-start;">
|
||||
<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">
|
||||
<input class="input" maxlength="40" type="text" v-model="entityOptions.name" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 56%;">
|
||||
<div class="col" style="flex: 0 0 56%">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col input-select-unit-box">
|
||||
@ -17,7 +24,7 @@
|
||||
<el-option label="投影长度" :value="1"></el-option>
|
||||
<el-option label="地表长度" :value="2"></el-option>
|
||||
</el-select>
|
||||
<input v-model="length" class="input-text" readonly>
|
||||
<input v-model="length" class="input-text" readonly />
|
||||
<el-select v-model="lengthUnit">
|
||||
<el-option label="米" value="m"></el-option>
|
||||
<el-option label="千米" value="km"></el-option>
|
||||
@ -37,22 +44,48 @@
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
<button
|
||||
class="confirm height-confirm"
|
||||
style="margin-left: 5px"
|
||||
@click="heightConfirm"
|
||||
:disabled="heightMode == 2"
|
||||
>
|
||||
应用
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -69,20 +102,40 @@
|
||||
<div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
|
||||
<div class="td">{{ i + 1 }}</div>
|
||||
<div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
|
||||
<input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number"
|
||||
v-model="item.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>
|
||||
<input
|
||||
class="input"
|
||||
@blur="inputBlurCallBack($event, i, 'lng', 8)"
|
||||
type="number"
|
||||
v-model="item.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="item.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>
|
||||
<input
|
||||
class="input"
|
||||
@blur="inputBlurCallBack($event, i, 'lat', 8)"
|
||||
type="number"
|
||||
v-model="item.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="item.alt" min="-9999999" max="999999999"
|
||||
v-if="activeTd.index == i && activeTd.name == 'alt'">
|
||||
<span style="pointer-events: none;" v-else>{{ (item.alt).toFixed(2) }}</span>
|
||||
<input
|
||||
class="input"
|
||||
@blur="inputBlurCallBack($event, i, 'alt', 2)"
|
||||
type="number"
|
||||
v-model="item.alt"
|
||||
min="-9999999"
|
||||
max="999999999"
|
||||
v-if="activeTd.index == i && activeTd.name == 'alt'"
|
||||
/>
|
||||
<span style="pointer-events: none" v-else>{{ item.alt.toFixed(2) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -95,19 +148,35 @@
|
||||
<span class="label">线条颜色</span>
|
||||
<div class="color" ref="colorRef"></div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%;">
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">线条宽度</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px;">
|
||||
<input class="input" type="number" title="" min="1" max="999" v-model="entityOptions.lineWidth">
|
||||
<div class="input-number input-number-unit-1" style="width: 80px">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="1"
|
||||
max="999"
|
||||
v-model="entityOptions.lineWidth"
|
||||
/>
|
||||
<span class="unit">px</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col input-select-line-type-box" style="flex: 0 0 37%;">
|
||||
<div class="col input-select-line-type-box" style="flex: 0 0 37%">
|
||||
<span class="label">线条形式</span>
|
||||
<el-select class="input input-select input-select-line-type" style="margin-left: 20px"
|
||||
v-model="entityOptions.lineType" @change="lineTypechange">
|
||||
<el-option v-for="item in lineTypeData" :key="item.key" :label="item.name" :value="item.key">
|
||||
<el-select
|
||||
class="input input-select input-select-line-type"
|
||||
style="margin-left: 20px"
|
||||
v-model="entityOptions.lineType"
|
||||
@change="lineTypechange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineTypeData"
|
||||
:key="item.key"
|
||||
:label="item.name"
|
||||
:value="item.key"
|
||||
>
|
||||
<i class="yj-custom-icon" :class="item.icon"></i>
|
||||
{{ item.name }}
|
||||
</el-option>
|
||||
@ -117,30 +186,36 @@
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">首尾相连</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.noseToTail">
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.noseToTail" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%;">
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">线段圆滑</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.smooth">
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%;">
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.smooth" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<span class="label">线段缓冲</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.extend">
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.extend" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%;">
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">缓冲宽度</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px;">
|
||||
<input class="input" type="number" title="" min="0" data-min="0.01" max="999999"
|
||||
v-model="entityOptions.extendWidth">
|
||||
<div class="input-number input-number-unit-1" style="width: 80px">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
data-min="0.01"
|
||||
max="999999"
|
||||
v-model="entityOptions.extendWidth"
|
||||
/>
|
||||
<span class="unit">m</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%;">
|
||||
<div class="col" style="flex: 0 0 37%">
|
||||
<span class="label">缓冲颜色</span>
|
||||
<div class="extendColor" ref="extendColorRef"></div>
|
||||
</div>
|
||||
@ -148,23 +223,43 @@
|
||||
<div class="row" v-show="entityOptions.lineType > 2 && entityOptions.lineType < 13">
|
||||
<div class="col">
|
||||
<span class="label">首尾反向</span>
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.rotate">
|
||||
<input class="btn-switch" type="checkbox" v-model="entityOptions.rotate" />
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 33%;">
|
||||
<div class="col" style="flex: 0 0 33%">
|
||||
<span class="label">流动速率</span>
|
||||
<div class="input-number input-number-unit-1" style="width: 80px;">
|
||||
<input class="input" type="number" title="" min="0" max="999999" step="1"
|
||||
v-model="entityOptions.speed">
|
||||
<div class="input-number input-number-unit-1" style="width: 80px">
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="999999"
|
||||
step="1"
|
||||
v-model="entityOptions.speed"
|
||||
/>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col" style="flex: 0 0 37%;">
|
||||
<span class="label lineSpace"
|
||||
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5">线条间距</span>
|
||||
<div class="input-number input-number-unit-1 lineSpace" style="width: 80px;"
|
||||
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5">
|
||||
<input class="input" type="number" title="" min="0" max="4.5" step="0.1"
|
||||
v-model="entityOptions.space">
|
||||
<div class="col" style="flex: 0 0 37%">
|
||||
<span
|
||||
class="label lineSpace"
|
||||
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"
|
||||
>线条间距</span
|
||||
>
|
||||
<div
|
||||
class="input-number input-number-unit-1 lineSpace"
|
||||
style="width: 80px"
|
||||
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"
|
||||
>
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
title=""
|
||||
min="0"
|
||||
max="4.5"
|
||||
step="0.1"
|
||||
v-model="entityOptions.space"
|
||||
/>
|
||||
<span class="unit">倍</span>
|
||||
<span class="arrow"></span>
|
||||
</div>
|
||||
@ -179,13 +274,17 @@
|
||||
</div>
|
||||
</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 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>
|
||||
@ -194,8 +293,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, getCurrentInstance } from 'vue';
|
||||
import { inject } from "vue";
|
||||
import { ref, getCurrentInstance } from 'vue'
|
||||
import { inject } from 'vue'
|
||||
import { TreeApi } from '@/api/tree'
|
||||
import Dialog from '@/components/dialog/baseDialog.vue'
|
||||
import attribute from './attribute.vue'
|
||||
@ -204,8 +303,8 @@ import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
|
||||
|
||||
const { cusUpdateNode } = useTreeNode()
|
||||
|
||||
const baseDialog: any = ref(null);
|
||||
const eventBus: any = inject("bus");
|
||||
const baseDialog: any = ref(null)
|
||||
const eventBus: any = inject('bus')
|
||||
|
||||
const length = ref(0)
|
||||
const lengthUnit = ref('m')
|
||||
@ -312,7 +411,7 @@ const activeTd = ref({
|
||||
index: -1,
|
||||
name: ''
|
||||
})
|
||||
const entityOptions: any = ref({});
|
||||
const entityOptions: any = ref({})
|
||||
const linePositions = ref([])
|
||||
const colorRef = ref(null)
|
||||
const extendColorRef = ref(null)
|
||||
@ -321,7 +420,6 @@ const heightMode = ref(0)
|
||||
let originalOptions: any
|
||||
let that: any
|
||||
|
||||
|
||||
const open = async (id: any) => {
|
||||
that = window.earth.entityMap.get(id)
|
||||
originalOptions = structuredClone(that.options)
|
||||
@ -332,8 +430,7 @@ const open = async (id: any) => {
|
||||
that.lengthChangeCallBack = () => {
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
}
|
||||
@ -348,7 +445,7 @@ const open = async (id: any) => {
|
||||
defaultColor: entityOptions.value.color,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
sure: (color) => {
|
||||
entityOptions.value.color = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
@ -362,7 +459,7 @@ const open = async (id: any) => {
|
||||
defaultColor: entityOptions.value.extendColor,
|
||||
disabled: false, //是否禁止打开颜色选择器
|
||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||
sure: color => {
|
||||
sure: (color) => {
|
||||
entityOptions.value.extendColor = color
|
||||
}, //点击确认按钮事件回调
|
||||
clear: () => {
|
||||
@ -376,12 +473,14 @@ const heightModeChange = (val) => {
|
||||
const heightConfirm = () => {
|
||||
that.positionEditing = false
|
||||
for (let i = 0; i < entityOptions.value.options.positions.length; i++) {
|
||||
entityOptions.value.options.positions[i].alt = Number((entityOptions.value.options.positions[i].alt + Number(height.value)).toFixed(2))
|
||||
entityOptions.value.options.positions[i].alt = Number(
|
||||
(entityOptions.value.options.positions[i].alt + Number(height.value)).toFixed(2)
|
||||
)
|
||||
}
|
||||
that.smooth = that.smooth
|
||||
}
|
||||
const inputDblclick = async (event, i, anme) => {
|
||||
if(heightMode.value == 2) {
|
||||
if (heightMode.value == 2) {
|
||||
return
|
||||
}
|
||||
activeTd.value = {
|
||||
@ -403,8 +502,7 @@ const inputBlurCallBack = (event, i, name, digit = 2) => {
|
||||
}
|
||||
}
|
||||
|
||||
const lineTypechange = () => {
|
||||
}
|
||||
const lineTypechange = () => {}
|
||||
const nodeEdit = () => {
|
||||
entityOptions.value.positionEditing = false
|
||||
entityOptions.value.noseToTail = false
|
||||
@ -414,8 +512,7 @@ const nodeEdit = () => {
|
||||
entityOptions.value.options.positions = structuredClone(positions)
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = lenByMeter / 1000
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
length.value = lenByMeter
|
||||
}
|
||||
})
|
||||
@ -425,8 +522,7 @@ const translate = () => {
|
||||
entityOptions.value.options.positions = structuredClone(that.options.positions)
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
})
|
||||
@ -437,7 +533,7 @@ const closeCallback = () => {
|
||||
that.positionEditing = false
|
||||
entityOptions.value.closeNodeEdit()
|
||||
entityOptions.value.reset()
|
||||
eventBus.emit("destroyComponent")
|
||||
eventBus.emit('destroyComponent')
|
||||
}
|
||||
const confirm = () => {
|
||||
originalOptions = structuredClone(that.options)
|
||||
@ -445,13 +541,13 @@ const confirm = () => {
|
||||
let params = structuredClone(that.options)
|
||||
delete params.host
|
||||
let params2 = {
|
||||
"id": params.id,
|
||||
"sourceName": params.name,
|
||||
"params": params,
|
||||
"isShow": params.show ? 1 : 0,
|
||||
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) })
|
||||
cusUpdateNode({ id: params.id, sourceName: params.name, params: JSON.stringify(params) })
|
||||
}
|
||||
const close = () => {
|
||||
baseDialog.value?.close()
|
||||
@ -463,14 +559,13 @@ watch(
|
||||
if (entityOptions.value.lengthByMeter || entityOptions.value.lengthByMeter == 0) {
|
||||
if (lengthUnit.value == 'km') {
|
||||
length.value = entityOptions.value.lengthByMeter / 1000
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
length.value = entityOptions.value.lengthByMeter
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
)
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
@ -500,4 +595,4 @@ defineExpose({
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -185,4 +185,4 @@ eventBus.on("openRichText", (t = '', content = '', confirmCallBack) => {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -61,6 +61,7 @@ let originalOptions: any
|
||||
let that: any
|
||||
const colorRef = ref(null)
|
||||
const open = async (id: any) => {
|
||||
id = (window as any).standTextid
|
||||
that = window.earth.entityMap.get(id)
|
||||
originalOptions = structuredClone(that.options)
|
||||
entityOptions.value = that
|
||||
|
||||
@ -11,25 +11,26 @@ export const useRightOperate = () => {
|
||||
$changeComponentPop('.adddirectoryBox', true)
|
||||
}
|
||||
//添加资源
|
||||
const addResource = () => {}
|
||||
const addResource = () => { }
|
||||
//导入全景
|
||||
const importPanorama = () => {}
|
||||
const importPanorama = () => { }
|
||||
//图片定位
|
||||
const pictureLocation = () => {}
|
||||
const pictureLocation = () => { }
|
||||
//属性
|
||||
const showAttr = () => {}
|
||||
const showAttr = () => { }
|
||||
//导入模型
|
||||
const importHeader = () => {}
|
||||
const importHeader = () => { }
|
||||
//导入模型
|
||||
const addXlsxs = () => {}
|
||||
const addXlsxs = () => { }
|
||||
//导入模型
|
||||
const addTrajectory = () => {}
|
||||
const addTrajectory = () => { }
|
||||
//编辑
|
||||
const editNode = (eventBus) => {
|
||||
let selectNodes = getSelectedNodes(window.treeObj);
|
||||
if(selectNodes && selectNodes[selectNodes.length-1]) {
|
||||
let params = JSON.parse(selectNodes[selectNodes.length-1].params)
|
||||
eventBus.emit("openDialog", selectNodes[selectNodes.length-1].sourceType, params.id);
|
||||
if (selectNodes && selectNodes[selectNodes.length - 1]) {
|
||||
console.log('------------------',selectNodes[selectNodes.length - 1].params)
|
||||
let params = JSON.parse(selectNodes[selectNodes.length - 1].params)
|
||||
eventBus.emit("openDialog", selectNodes[selectNodes.length - 1].sourceType, params.id);
|
||||
}
|
||||
}
|
||||
//删除
|
||||
@ -61,18 +62,25 @@ export const useRightOperate = () => {
|
||||
})
|
||||
}
|
||||
//添加BIM
|
||||
const addBIM = () => {}
|
||||
const addBIM = () => { }
|
||||
//重置透视
|
||||
const resetPerspective = () => {}
|
||||
const resetPerspective = () => { }
|
||||
|
||||
const pressModel = () => {}
|
||||
const pressModel = () => { }
|
||||
|
||||
//设置视图
|
||||
const setView = () => {
|
||||
let selectNodes = getSelectedNodes(window.treeObj);
|
||||
if(selectNodes && selectNodes[selectNodes.length-1]) {
|
||||
let node = selectNodes[selectNodes.length-1]
|
||||
if (selectNodes && selectNodes[selectNodes.length - 1]) {
|
||||
let node = selectNodes[selectNodes.length - 1]
|
||||
let params = JSON.parse(node.params)
|
||||
if(!params) {
|
||||
params = {
|
||||
name: node.sourceName,
|
||||
show: node.isShow,
|
||||
id: node.id,
|
||||
}
|
||||
}
|
||||
let entityObject = window.earth.entityMap.get(params.id)
|
||||
entityObject.setCustomView()
|
||||
params.customView = entityObject.customView
|
||||
@ -83,7 +91,7 @@ export const useRightOperate = () => {
|
||||
"parentId": node.parentId,
|
||||
"treeIndex": node.treeIndex,
|
||||
"params": params,
|
||||
"isShow": node.isShow ? 1 : 0,
|
||||
"isShow": node.isShow ? 1 : 0 ? 1 : 0,
|
||||
}
|
||||
TreeApi.updateDirectoryInfo(params2)
|
||||
}
|
||||
@ -91,8 +99,8 @@ export const useRightOperate = () => {
|
||||
//重置视图
|
||||
const resetView = () => {
|
||||
let selectNodes = getSelectedNodes(window.treeObj);
|
||||
if(selectNodes && selectNodes[selectNodes.length-1]) {
|
||||
let node = selectNodes[selectNodes.length-1]
|
||||
if (selectNodes && selectNodes[selectNodes.length - 1]) {
|
||||
let node = selectNodes[selectNodes.length - 1]
|
||||
let params = JSON.parse(node.params)
|
||||
let entityObject = window.earth.entityMap.get(params.id)
|
||||
entityObject.resetCustomView()
|
||||
@ -107,19 +115,19 @@ export const useRightOperate = () => {
|
||||
"isShow": node.isShow ? 1 : 0,
|
||||
}
|
||||
TreeApi.updateDirectoryInfo(params2)
|
||||
cusUpdateNode({"id": params2.id, "sourceName": params2.sourceName, "params": JSON.stringify(params)})
|
||||
cusUpdateNode({ "id": params2.id, "sourceName": params2.sourceName, "params": JSON.stringify(params) })
|
||||
}
|
||||
}
|
||||
//提升图层
|
||||
const layerRaise = () => {}
|
||||
const layerRaise = () => { }
|
||||
//降低图层
|
||||
const layerLower = () => {}
|
||||
const layerLower = () => { }
|
||||
//置顶图层
|
||||
const layerToTop = () => {}
|
||||
const layerToTop = () => { }
|
||||
//置底图层
|
||||
const layerToBottom = () => {}
|
||||
const layerToBottom = () => { }
|
||||
//切片
|
||||
const tilesetClipping = () => {}
|
||||
const tilesetClipping = () => { }
|
||||
const rightMenus: any = reactive({
|
||||
addDirectory: {
|
||||
key: 'addDirectory',
|
||||
|
||||
@ -416,9 +416,9 @@ export const useTree = () => {
|
||||
}
|
||||
return 0;
|
||||
})
|
||||
for (let i = res.data.length-1; i >= 0; i--) {
|
||||
for (let i = res.data.length - 1; i >= 0; i--) {
|
||||
if (!res.data[i].id) {
|
||||
res.data.splice(i,1);
|
||||
res.data.splice(i, 1);
|
||||
}
|
||||
}
|
||||
zNodes.value = res.data
|
||||
@ -435,8 +435,22 @@ export const useTree = () => {
|
||||
for (let i = 0; i < zNodes.value.length; i++) {
|
||||
if (zNodes.value[i].params) {
|
||||
let params = JSON.parse(zNodes.value[i].params)
|
||||
if (!params.id) {
|
||||
params.id = zNodes.value[i].id
|
||||
}
|
||||
initMapData(zNodes.value[i].sourceType, params)
|
||||
}
|
||||
else {
|
||||
//@ts-ignore
|
||||
if (zNodes.value[i].detail) {
|
||||
//@ts-ignore
|
||||
let detail = JSON.parse(zNodes.value[i].detail)
|
||||
if (!detail.id) {
|
||||
detail.id = zNodes.value[i].id
|
||||
}
|
||||
initMapData(zNodes.value[i].sourceType, detail)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
export const initMapData = async (type, data) => {
|
||||
let entityObject
|
||||
let options
|
||||
console.log('data', type, data)
|
||||
switch (type) {
|
||||
case 'groundText':
|
||||
entityObject = new YJ.Obj.GroundText(window.earth, data)
|
||||
@ -24,7 +25,7 @@ export const initMapData = async (type, data) => {
|
||||
case 'rendezvous':
|
||||
entityObject = new YJ.Obj.AssembleObject(window.earth, data)
|
||||
break
|
||||
case 'attackArrow':
|
||||
case 'attackArrow':
|
||||
entityObject = new YJ.Obj.AttackArrowObject(window.earth, data)
|
||||
break
|
||||
case 'pincerArrow':
|
||||
@ -39,6 +40,18 @@ export const initMapData = async (type, data) => {
|
||||
case 'model':
|
||||
entityObject = new YJ.Obj.ModelObject(window.earth, data)
|
||||
break
|
||||
case 'terrain':
|
||||
data.host = 'http://192.168.110.25:8848'
|
||||
entityObject = new YJ.Obj.Terrain(window.earth, data)
|
||||
break
|
||||
case 'layer':
|
||||
data.host = 'http://192.168.110.25:8848'
|
||||
entityObject = new YJ.Obj.Layer(window.earth, data)
|
||||
break
|
||||
case 'tileset':
|
||||
data.host = 'http://192.168.110.25:8848'
|
||||
entityObject = new YJ.Obj.Tileset(window.earth, data)
|
||||
break
|
||||
default:
|
||||
return
|
||||
break
|
||||
@ -46,4 +59,4 @@ export const initMapData = async (type, data) => {
|
||||
options = structuredClone(entityObject.options)
|
||||
delete options.host
|
||||
return options
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,12 +10,37 @@
|
||||
<firstMenu class="absolute zIndex9" ref="firstMenuRef"></firstMenu>
|
||||
<!--底部菜单-->
|
||||
<bottomMenu class="absolute zIndex9" ref="bottomMenuRef"></bottomMenu>
|
||||
<input type="file" id="fileInputlink" style="display: none;" multiple accept=".jpeg,.png,.jpg,.mp4,.pdf"
|
||||
@input="uploadFile">
|
||||
<input
|
||||
type="file"
|
||||
id="fileInputlink"
|
||||
style="display: none"
|
||||
multiple
|
||||
accept=".jpeg,.png,.jpg,.mp4,.pdf"
|
||||
@input="uploadFile"
|
||||
/>
|
||||
|
||||
<!-- 多点视线分析 -->
|
||||
<Visibility ref="visibility"></Visibility>
|
||||
<CircleViewShed ref="CircleViewShed"></CircleViewShed>
|
||||
<Submerge ref="Submerge"></Submerge>
|
||||
<Profile ref="Profile"></Profile>
|
||||
<ViewShed ref="ViewShed"></ViewShed>
|
||||
<CutFill ref="CutFill"></CutFill>
|
||||
<Contour ref="Contour"></Contour>
|
||||
<RoutePlanning ref="RoutePlanning"></RoutePlanning>
|
||||
<Graffiti ref="Graffiti"></Graffiti>
|
||||
<!-- <FlyRoam ref="FlyRoam"></FlyRoam> -->
|
||||
<CoorLocation ref="CoorLocation"></CoorLocation>
|
||||
<ScreenShot ref="ScreenShot"></ScreenShot>
|
||||
<TerrainExcavation ref="TerrainExcavation"></TerrainExcavation>
|
||||
<ProjConvert ref="ProjConvert"></ProjConvert>
|
||||
<ProjectionConvert ref="ProjectionConvert"></ProjectionConvert>
|
||||
<GoodsSearchCircle ref="GoodsSearchCircle"></GoodsSearchCircle>
|
||||
<GoodsSearchPolgon ref="GoodsSearchPolgon"></GoodsSearchPolgon>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { inject, shallowRef, ref } from "vue";
|
||||
import { inject, shallowRef, ref } from 'vue'
|
||||
import Headers from '../components/headers/index.vue'
|
||||
import Tree from '../components/tree/index.vue'
|
||||
import addStandText from '../components/propertyBox/addStandText.vue'
|
||||
@ -28,92 +53,113 @@ import attackArrow from '../components/propertyBox/attackArrow.vue'
|
||||
import richText from '../components/propertyBox/richText.vue'
|
||||
import groundText from '../components/propertyBox/groundText.vue'
|
||||
import standText from '../components/propertyBox/standText.vue'
|
||||
import circleObject from '../components/propertyBox/circleObject.vue'
|
||||
import addDirectory from '@/components/dialog/directory.vue'
|
||||
import firstMenu from '@/views/components/leftSide/leftSideFirst.vue'
|
||||
import bottomMenu from '@/views/components/bottomSide/bottomSide.vue'
|
||||
import Visibility from '../components/propertyBox/Visibility.vue'
|
||||
import CircleViewShed from '../components/propertyBox/CircleViewShed.vue'
|
||||
import Submerge from '../components/propertyBox/Submerge.vue'
|
||||
import Profile from '../components/propertyBox/Profile.vue'
|
||||
import ViewShed from '../components/propertyBox/ViewShed.vue'
|
||||
import CutFill from '../components/propertyBox/CutFill.vue'
|
||||
import Contour from '../components/propertyBox/Contour.vue'
|
||||
import RoutePlanning from '../components/propertyBox/RoutePlanning.vue'
|
||||
import Graffiti from '../components/propertyBox/Graffiti.vue'
|
||||
import FlyRoam from '../components/propertyBox/FlyRoam.vue'
|
||||
import CoorLocation from '../components/propertyBox/CoorLocation.vue'
|
||||
import ScreenShot from '../components/propertyBox/ScreenShot.vue'
|
||||
import TerrainExcavation from '../components/propertyBox/TerrainExcavation.vue'
|
||||
import ProjConvert from '../components/propertyBox/ProjConvert.vue'
|
||||
import ProjectionConvert from '../components/propertyBox/ProjectionConvert.vue'
|
||||
import GoodsSearchCircle from '../components/propertyBox/GoodsSearchCircle.vue'
|
||||
import GoodsSearchPolgon from '../components/propertyBox/GoodsSearchPolgon.vue'
|
||||
|
||||
import { GisApi } from '@/api/gisApi'
|
||||
|
||||
const firstMenuRef = ref(null)
|
||||
const bottomMenuRef = ref(null)
|
||||
const eventBus: any = inject("bus");
|
||||
const eventBus: any = inject('bus')
|
||||
let currentComponent = shallowRef()
|
||||
let dynamicComponentRef = ref()
|
||||
let addStandTextRef = ref()
|
||||
let tree = ref()
|
||||
eventBus.on("openDialog", async (sourceType: any, id: any) => {
|
||||
eventBus.on('openDialog', async (sourceType: any, id: any) => {
|
||||
switch (sourceType) {
|
||||
case 'addGroundText':
|
||||
currentComponent.value = addGroundText
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open()
|
||||
break;
|
||||
break
|
||||
case 'groundText':
|
||||
currentComponent.value = groundText
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open()
|
||||
break;
|
||||
dynamicComponentRef.value?.open(id)
|
||||
break
|
||||
case 'addStandText':
|
||||
currentComponent.value = addStandText
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open()
|
||||
break;
|
||||
break
|
||||
case 'standText':
|
||||
currentComponent.value = standText
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open()
|
||||
break;
|
||||
dynamicComponentRef.value?.open(id)
|
||||
break
|
||||
case 'point':
|
||||
currentComponent.value = billboardObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id)
|
||||
break;
|
||||
break
|
||||
case 'line':
|
||||
currentComponent.value = polylineObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id)
|
||||
break;
|
||||
break
|
||||
case 'curve':
|
||||
currentComponent.value = curvelineObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id)
|
||||
break;
|
||||
break;
|
||||
break
|
||||
break
|
||||
case 'panel':
|
||||
currentComponent.value = polygonObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id)
|
||||
break;
|
||||
break
|
||||
case 'circle':
|
||||
break;
|
||||
currentComponent.value = circleObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id, 'circle')
|
||||
break
|
||||
case 'rectangle':
|
||||
currentComponent.value = polygonObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id, 'rectangle')
|
||||
break;
|
||||
break
|
||||
case 'rendezvous':
|
||||
currentComponent.value = rendezvous
|
||||
currentComponent.value = polygonObject
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id, 'rendezvous')
|
||||
break;
|
||||
break
|
||||
case 'attackArrow':
|
||||
currentComponent.value = attackArrow
|
||||
currentComponent.value = attackArrow
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id, 'attackArrow')
|
||||
break;
|
||||
break
|
||||
case 'pincerArrow':
|
||||
currentComponent.value = attackArrow
|
||||
currentComponent.value = attackArrow
|
||||
await nextTick()
|
||||
dynamicComponentRef.value?.open(id, 'pincerArrow')
|
||||
break;
|
||||
break
|
||||
default:
|
||||
break;
|
||||
break
|
||||
}
|
||||
});
|
||||
eventBus.on("destroyComponent", () => {
|
||||
})
|
||||
eventBus.on('destroyComponent', () => {
|
||||
currentComponent.value = undefined
|
||||
})
|
||||
|
||||
|
||||
const createEarth = async () => {
|
||||
window.earth = await new YJ.YJEarth('earthContainer')
|
||||
tree.value.initTreeCallBack()
|
||||
@ -134,16 +180,15 @@ eventBus.on('defineClickAddLinkCb', (fun) => {
|
||||
clickAddLinkCb = fun
|
||||
})
|
||||
|
||||
|
||||
const uploadFile = (event) => {
|
||||
let files = event.target.files
|
||||
if (files.length > 0) {
|
||||
const formData = new FormData();
|
||||
const formData = new FormData()
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
const element = files[i];
|
||||
formData.append('files', element);
|
||||
const element = files[i]
|
||||
formData.append('files', element)
|
||||
}
|
||||
GisApi.linkFile(formData).then(res => {
|
||||
GisApi.linkFile(formData).then((res) => {
|
||||
if (res.code == 0 || res.code == 200) {
|
||||
ElMessage({
|
||||
message: '上传成功',
|
||||
|
||||
Reference in New Issue
Block a user