Compare commits

..

15 Commits

66 changed files with 6986 additions and 4486 deletions

86
package-lock.json generated
View File

@ -13,9 +13,11 @@
"@electron-toolkit/utils": "^4.0.0", "@electron-toolkit/utils": "^4.0.0",
"@ztree/ztree_v3": "^3.5.48", "@ztree/ztree_v3": "^3.5.48",
"axios": "^1.11.0", "axios": "^1.11.0",
"clipboard": "^2.0.11",
"dayjs": "^1.11.18",
"echarts": "^6.0.0",
"electron-updater": "^6.3.9", "electron-updater": "^6.3.9",
"element-plus": "^2.10.4", "element-plus": "^2.10.4",
"js-md5": "^0.8.3",
"mitt": "^3.0.1", "mitt": "^3.0.1",
"pinia": "^3.0.3", "pinia": "^3.0.3",
"pinia-plugin-persistedstate": "^4.4.1", "pinia-plugin-persistedstate": "^4.4.1",
@ -30,7 +32,7 @@
"@electron-toolkit/eslint-config-ts": "^3.0.0", "@electron-toolkit/eslint-config-ts": "^3.0.0",
"@electron-toolkit/tsconfig": "^1.0.1", "@electron-toolkit/tsconfig": "^1.0.1",
"@types/jquery": "^3.5.32", "@types/jquery": "^3.5.32",
"@types/node": "^22.16.5", "@types/node": "^22.18.1",
"@types/plist": "^3.0.5", "@types/plist": "^3.0.5",
"@types/verror": "^1.10.11", "@types/verror": "^1.10.11",
"@types/vue-i18n": "^6.1.3", "@types/vue-i18n": "^6.1.3",
@ -2649,9 +2651,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "22.16.5", "version": "22.18.1",
"resolved": "https://registry.npmmirror.com/@types/node/-/node-22.16.5.tgz", "resolved": "https://registry.npmmirror.com/@types/node/-/node-22.18.1.tgz",
"integrity": "sha512-bJFoMATwIGaxxx8VJPeM8TonI8t579oRvgAuT8zFugJsJZgzqv0Fu8Mhp68iecjzG7cnN3mO2dJQ5uUM2EFrgQ==", "integrity": "sha512-rzSDyhn4cYznVG+PCzGe1lwuMYJrcBS1fc3JqSa2PvtABwWo+dZ1ij5OVok3tqfpEBCBoaR4d7upFJk73HRJDw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"undici-types": "~6.21.0" "undici-types": "~6.21.0"
@ -4647,6 +4649,17 @@
"url": "https://github.com/sponsors/sindresorhus" "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": { "node_modules/cliui": {
"version": "8.0.1", "version": "8.0.1",
"resolved": "https://registry.npmmirror.com/cliui/-/cliui-8.0.1.tgz", "resolved": "https://registry.npmmirror.com/cliui/-/cliui-8.0.1.tgz",
@ -5196,9 +5209,9 @@
} }
}, },
"node_modules/dayjs": { "node_modules/dayjs": {
"version": "1.11.13", "version": "1.11.18",
"resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.13.tgz", "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.18.tgz",
"integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==", "integrity": "sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/de-indent": { "node_modules/de-indent": {
@ -5361,6 +5374,12 @@
"node": ">=0.4.0" "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": { "node_modules/delegates": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmmirror.com/delegates/-/delegates-1.0.0.tgz", "resolved": "https://registry.npmmirror.com/delegates/-/delegates-1.0.0.tgz",
@ -5610,6 +5629,16 @@
"dev": true, "dev": true,
"license": "MIT" "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": { "node_modules/ejs": {
"version": "3.1.10", "version": "3.1.10",
"resolved": "https://registry.npmmirror.com/ejs/-/ejs-3.1.10.tgz", "resolved": "https://registry.npmmirror.com/ejs/-/ejs-3.1.10.tgz",
@ -7248,6 +7277,15 @@
"url": "https://github.com/sponsors/ljharb" "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": { "node_modules/gopd": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz", "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
@ -8453,11 +8491,6 @@
"dev": true, "dev": true,
"license": "BSD-3-Clause" "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": { "node_modules/js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz",
@ -10986,6 +11019,12 @@
"dev": true, "dev": true,
"license": "MIT" "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": { "node_modules/semver": {
"version": "6.3.1", "version": "6.3.1",
"resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz", "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
@ -12243,6 +12282,12 @@
"node": ">= 10.0.0" "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": { "node_modules/tiny-typed-emitter": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmmirror.com/tiny-typed-emitter/-/tiny-typed-emitter-2.1.0.tgz", "resolved": "https://registry.npmmirror.com/tiny-typed-emitter/-/tiny-typed-emitter-2.1.0.tgz",
@ -12461,6 +12506,12 @@
"typescript": ">=4.8.4" "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": { "node_modules/type-check": {
"version": "0.4.0", "version": "0.4.0",
"resolved": "https://registry.npmmirror.com/type-check/-/type-check-0.4.0.tgz", "resolved": "https://registry.npmmirror.com/type-check/-/type-check-0.4.0.tgz",
@ -13886,6 +13937,15 @@
"engines": { "engines": {
"node": ">= 10" "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"
}
} }
} }
} }

View File

@ -25,6 +25,9 @@
"@electron-toolkit/utils": "^4.0.0", "@electron-toolkit/utils": "^4.0.0",
"@ztree/ztree_v3": "^3.5.48", "@ztree/ztree_v3": "^3.5.48",
"axios": "^1.11.0", "axios": "^1.11.0",
"clipboard": "^2.0.11",
"dayjs": "^1.11.18",
"echarts": "^6.0.0",
"electron-updater": "^6.3.9", "electron-updater": "^6.3.9",
"element-plus": "^2.10.4", "element-plus": "^2.10.4",
"mitt": "^3.0.1", "mitt": "^3.0.1",
@ -41,7 +44,7 @@
"@electron-toolkit/eslint-config-ts": "^3.0.0", "@electron-toolkit/eslint-config-ts": "^3.0.0",
"@electron-toolkit/tsconfig": "^1.0.1", "@electron-toolkit/tsconfig": "^1.0.1",
"@types/jquery": "^3.5.32", "@types/jquery": "^3.5.32",
"@types/node": "^22.16.5", "@types/node": "^22.18.1",
"@types/plist": "^3.0.5", "@types/plist": "^3.0.5",
"@types/verror": "^1.10.11", "@types/verror": "^1.10.11",
"@types/vue-i18n": "^6.1.3", "@types/vue-i18n": "^6.1.3",

View File

@ -4,6 +4,8 @@ import { electronApp, optimizer, is } from '@electron-toolkit/utils'
import icon from '../../resources/earth.png?asset' import icon from '../../resources/earth.png?asset'
import fs from 'fs' import fs from 'fs'
const { exec } = require('child_process');
// 开发环境路径处理 - 确保添加正确的file协议 // 开发环境路径处理 - 确保添加正确的file协议
const devSplashPath = path.resolve( const devSplashPath = path.resolve(
app.getAppPath(), app.getAppPath(),

View File

@ -4,5 +4,7 @@ declare global {
interface Window { interface Window {
electron: ElectronAPI electron: ElectronAPI
api: unknown api: unknown
Cesium: any
YJColorPicker: any
} }
} }

View File

@ -18,4 +18,8 @@ if (process.contextIsolated) {
window.electron = electronAPI window.electron = electronAPI
// @ts-ignore (define in dts) // @ts-ignore (define in dts)
window.electronAPI = api window.electronAPI = api
// @ts-ignore (define in dts)
window.Cesium = Cesium
// @ts-ignore (define in dts)
window.YJColorPicker = YJColorPicker
} }

View File

@ -9,24 +9,22 @@ export {}
declare module 'vue' { declare module 'vue' {
export interface GlobalComponents { export interface GlobalComponents {
BaseDialog: typeof import('./src/components/dialog/baseDialog.vue')['default'] BaseDialog: typeof import('./src/components/dialog/baseDialog.vue')['default']
Dialog: typeof import('./src/components/dialog/index.vue')['default']
Directory: typeof import('./src/components/dialog/directory.vue')['default'] Directory: typeof import('./src/components/dialog/directory.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElDialog: typeof import('element-plus/es')['ElDialog'] ElDialog: typeof import('element-plus/es')['ElDialog']
ElForm: typeof import('element-plus/es')['ElForm'] ElForm: typeof import('element-plus/es')['ElForm']
ElFormItem: typeof import('element-plus/es')['ElFormItem'] ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput'] ElInput: typeof import('element-plus/es')['ElInput']
ElOption: typeof import('element-plus/es')['ElOption'] ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination'] ElPagination: typeof import('element-plus/es')['ElPagination']
ElSelect: typeof import('element-plus/es')['ElSelect'] ElSelect: typeof import('element-plus/es')['ElSelect']
ElSlider: typeof import('element-plus/es')['ElSlider']
ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable'] ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs'] ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
ElUpload: typeof import('element-plus/es')['ElUpload'] ElUpload: typeof import('element-plus/es')['ElUpload']
Index_b: typeof import('./src/components/SvgIcon/index_b.vue')['default'] Index_b: typeof import('./src/components/SvgIcon/index_b.vue')['default']
Pagination: typeof import('./src/components/Pagination/index.vue')['default'] Pagination: typeof import('./src/components/Pagination/index.vue')['default']

File diff suppressed because one or more lines are too long

View File

@ -881,51 +881,51 @@
} }
/* 飞行漫游 */ /* 飞行漫游 */
.YJ-custom-base-dialog>.content .fly-roam { .fly-roam>.content .fly-roam {
width: 474px; width: 474px;
} }
.YJ-custom-base-dialog>.content .fly-roam .total-time { .fly-roam>.content .total-time {
margin-right: 5px; margin-right: 5px;
} }
.YJ-custom-base-dialog>.content .fly-roam .table { .fly-roam>.content .table {
font-size: 12px; font-size: 12px;
} }
.YJ-custom-base-dialog>.content .fly-roam .table .table-body { .fly-roam>.content .table .table-body {
height: 220px; height: 220px;
} }
.YJ-custom-base-dialog>.content .fly-roam .table .tr .th:first-child, .fly-roam>.content .table .tr .th:first-child,
.YJ-custom-base-dialog>.content .fly-roam .table .tr .td:first-child { .fly-roam>.content .table .tr .td:first-child {
flex: 0 0 95px; flex: 0 0 95px;
width: 95px; width: 95px;
} }
.YJ-custom-base-dialog>.content .fly-roam .table .tr .th:nth-child(2), .fly-roam>.content .table .tr .th:nth-child(2),
.YJ-custom-base-dialog>.content .fly-roam .table .tr .td:nth-child(2) { .fly-roam>.content .table .tr .td:nth-child(2) {
flex: 0 0 240px; flex: 0 0 240px;
width: 240px; width: 240px;
} }
.YJ-custom-base-dialog>.content .fly-roam .table .tr .th:last-child, .fly-roam>.content .table .tr .th:last-child,
.YJ-custom-base-dialog>.content .fly-roam .table .tr .td:last-child { .fly-roam>.content .table .tr .td:last-child {
flex: 0 0 140px; flex: 0 0 140px;
width: 140px; width: 140px;
} }
.YJ-custom-base-dialog>.content .fly-roam .table .table-body .tr.active { .fly-roam>.content .table .table-body .tr.active {
background: rgba(var(--color-sdk-base-rgb), 0.15); background: rgba(var(--color-sdk-base-rgb), 0.15);
} }
.YJ-custom-base-dialog>.content .fly-roam .table .table-body .tr:last-child { .fly-roam>.content .table .table-body .tr:last-child {
border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5); border: 1px solid rgba(var(--color-sdk-base-rgb), 0.5);
border-left: none; border-left: none;
border-right: none; border-right: none;
} }
.YJ-custom-base-dialog>.content .fly-roam .table .table-body .tr:last-child .input { .fly-roam>.content .table .table-body .tr:last-child .input {
color: #808080; color: #808080;
cursor: no-drop; cursor: no-drop;
} }
@ -938,26 +938,26 @@
border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important; border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
} */ } */
.YJ-custom-base-dialog>.content .fly-roam .table .action { .fly-roam>.content .table .action {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
} }
.YJ-custom-base-dialog>.content .fly-roam .table i { .fly-roam>.content .table i {
font-size: 18px; font-size: 18px;
color: #409eff; color: #409eff;
cursor: pointer; cursor: pointer;
} }
.YJ-custom-base-dialog>.content .fly-roam .table i:hover { .fly-roam>.content .table i:hover {
color: #6bb4ff; color: #6bb4ff;
} }
.YJ-custom-base-dialog>.content .fly-roam .table i:active { .fly-roam>.content .table i:active {
color: #409eff; color: #409eff;
} }
.YJ-custom-base-dialog>.content .fly-roam button { .fly-roam>.content button {
padding: 6px 14px; padding: 6px 14px;
} }
@ -2212,33 +2212,16 @@
.YJ-custom-base-dialog.cut-fill>.content>div .div-item:last-child .row .unit { .YJ-custom-base-dialog.cut-fill>.content>div .div-item:last-child .row .unit {
margin-left: 5px; margin-left: 5px;
} }
.YJ-custom-base-dialog.cut-fill>.content>div .el-slider__button { .YJ-custom-base-dialog.cut-fill>.content .firstTip {
width: 16px;
height: 16px;
border: 2px solid rgba(var(--color-sdk-base-rgb), 1);
}
.YJ-custom-base-dialog.cut-fill>.content>div .el-slider__bar {
background-color: rgba(var(--color-sdk-base-rgb), 1);
}
.YJ-custom-base-dialog.cut-fill>.content>div .firstTip {
font-size: 14px;
font-weight: 700;
letter-spacing: 0px;
line-height: 0px;
color: rgba(255, 255, 255, 1);
position: absolute; position: absolute;
top: 157px;
left: 340px; left: 340px;
top: 145px
} }
.YJ-custom-base-dialog.cut-fill>.content>div .endTip {
font-size: 14px; .YJ-custom-base-dialog.cut-fill>.content .endTip {
font-weight: 700;
letter-spacing: 0px;
line-height: 0px;
color: rgba(255, 255, 255, 1);
position: absolute; position: absolute;
top: 157px; top: 145px;
left: 515px; left: 515px
} }
/* 淹没分析 */ /* 淹没分析 */
@ -2293,6 +2276,17 @@
flex: 0 0 60px; flex: 0 0 60px;
justify-content: center; justify-content: center;
} }
.YJ-custom-base-dialog.submerge>.content .rangeWords {
font-size: 14px;
font-weight: 500;
letter-spacing: 0px;
line-height: 24px;
color: rgba(230, 247, 255, 1);
text-align: right;
vertical-align: top;
width: 42px;
margin-left: 10px
}
/* 地形分析 */ /* 地形分析 */
.YJ-custom-base-dialog.terrain-excavation>.content { .YJ-custom-base-dialog.terrain-excavation>.content {
@ -2443,40 +2437,43 @@
.YJ-custom-base-dialog.circle-view-shed>.content { .YJ-custom-base-dialog.circle-view-shed>.content {
width: 290px; width: 290px;
} }
.YJ-custom-base-dialog.circle-view-shed>.content>div .el-slider__button { .YJ-custom-base-dialog.circle-view-shed>.content .firstTip {
font-size: 14px;
font-weight: 700;
letter-spacing: 0px;
line-height: 0px;
color: rgba(255, 255, 255, 1);
text-align: left;
vertical-align: top;
position: absolute;
left: 88px;
top: 145px
}
.YJ-custom-base-dialog.circle-view-shed>.content .endTip {
font-size: 14px;
font-weight: 700;
letter-spacing: 0px;
line-height: 0px;
color: rgba(255, 255, 255, 1);
text-align: left;
vertical-align: top;
position: absolute;
left: 240px;
top: 145px;
}
.el-popper.is-dark {
z-index: 1000000 !important
}
.el-slider__button {
width: 16px; width: 16px;
height: 16px; height: 16px;
border: 2px solid rgba(var(--color-sdk-base-rgb), 1);
} }
.YJ-custom-base-dialog.circle-view-shed>.content>div .el-slider__bar { .el-slider {
background-color: rgba(var(--color-sdk-base-rgb), 1); --el-slider-main-bg-color: rgba(var(--color-sdk-base-rgb), 1)
}
.YJ-custom-base-dialog.circle-view-shed>.content>div .firstTip {
font-size: 14px;
font-weight: 700;
letter-spacing: 0px;
line-height: 0px;
color: rgba(255, 255, 255, 1);
position: absolute;
top: 150px;
left: 88px;
}
.YJ-custom-base-dialog.circle-view-shed>.content>div .endTip {
font-size: 14px;
font-weight: 700;
letter-spacing: 0px;
line-height: 0px;
color: rgba(255, 255, 255, 1);
position: absolute;
top: 150px;
left: 240px;
}
.el-popper.is-dark {
z-index: 100000000 !important;
/* 确保这个值足够高 */
} }
/* 地形可视域分析 */ /* 地形可视域分析 */

View File

@ -65,7 +65,7 @@ export default {
junbiao3d: '三维军标' junbiao3d: '三维军标'
}, },
effect: { effect: {
trajectoryMotion:"轨迹运动", trajectoryMotion: "轨迹运动",
electronicFence: "电子围墙", electronicFence: "电子围墙",
// nightVision: '实体墙', // nightVision: '实体墙',
radarLightWave: "扩散光波", radarLightWave: "扩散光波",
@ -81,7 +81,7 @@ export default {
nightVision: '夜视', nightVision: '夜视',
// nightVision: '飞线', // nightVision: '飞线',
}, },
analysis:{ analysis: {
inundationAnalysis: "淹没分析", inundationAnalysis: "淹没分析",
profileAnalysis: "剖面分析", profileAnalysis: "剖面分析",
sightAnalysis: "视线分析", sightAnalysis: "视线分析",
@ -93,7 +93,7 @@ export default {
contour: "等高线", contour: "等高线",
clear: "清除", clear: "清除",
}, },
measure:{ measure: {
projectionArea: "投影面积", projectionArea: "投影面积",
projectionDistanceMeasure: '投影距离', projectionDistanceMeasure: '投影距离',
areaMeasure: "贴地面积", areaMeasure: "贴地面积",
@ -105,11 +105,11 @@ export default {
lopeDistanceMeasures: '坡度', lopeDistanceMeasures: '坡度',
coorMeasure: "坐标", coorMeasure: "坐标",
clear: "清除测量", clear: "清除测量",
}, },
tool:{ tool: {
routePlan: "路径规划", routePlan: "路径规划",
//清除轨迹 clearRoute: '清除轨迹',
graffiti: "涂鸦", graffiti: "涂鸦",
// stopGraffiti: "结束涂鸦", // stopGraffiti: "结束涂鸦",
clearGraffiti: "清除涂鸦", clearGraffiti: "清除涂鸦",
@ -117,17 +117,20 @@ export default {
coorLocation: "坐标定位", coorLocation: "坐标定位",
mouseLocation: "鼠标定位", mouseLocation: "鼠标定位",
annotationAggregation: "标注点聚合", annotationAggregation: "标注点聚合",
// 卷帘对比 annotation: '卷帘对比',
// 屏幕截图 screenShot: '屏幕截图',
// 高清出图 highQuality: '高清出图',
// 视频录制 videoRecord: '视频录制',
pressModel: "模型压平", pressModel: "模型压平",
terrainDig: "地形开挖", terrainDig: "地形开挖",
tilesetClipping: "剖切", tilesetClipping: "剖切",
clearTilesetClipping: "清除剖切", clearTilesetClipping: "清除剖切",
projConvert: '度分秒', projConvert: '度分秒',
projectionConvert: '投影转换', projectionConvert: '投影转换',
gdbImport: "gdb导入" gdbImport: "gdb导入",
circleStatistics: "圆形统计",
polygonStatistics: "多边形统计",
}, },
bottomMenu: { bottomMenu: {
groundText: '贴地文字', groundText: '贴地文字',

View File

@ -12,13 +12,18 @@ export const TreeApi = {
return await request.post({ return await request.post({
url: `/source/addOtherSource`, url: `/source/addOtherSource`,
data data
}).then((res) => {
ElMessage({
message: '添加成功',
type: 'success'
})
}) })
}, },
//新增节点 //新增目录
addDirectory: async (data: any) => { addDirectory: async (data: any) => {
return await request.post({ return await request.post({
url: `/source/addOtherSource`, url: `/source/addDirectory`,
data data
}).then((res) => { }).then((res) => {
ElMessage({ ElMessage({

View File

@ -49,7 +49,7 @@ body {
background: var(--color-background); background: var(--color-background);
line-height: 1.6; line-height: 1.6;
font-family: font-family:
Inter, SourceHanSans,
-apple-system, -apple-system,
BlinkMacSystemFont, BlinkMacSystemFont,
'Segoe UI', 'Segoe UI',

Binary file not shown.

After

Width:  |  Height:  |  Size: 417 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 948 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 784 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 818 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 549 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 547 B

View File

@ -32,10 +32,15 @@
@font-face { @font-face {
font-family: 'sy-boldface'; font-family: 'sy-boldface';
src: url('../fonts/sy-boldface.otf') format('opentype'); src: url('../iconfont/sy-boldface.otf') format('opentype');
} }
@font-face { @font-face {
font-family: 'Ali-mother-counts-bold'; 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');
} }

View File

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

View File

@ -67,7 +67,8 @@ const submitForm = async (formEl: FormInstance | undefined) => {
const add = throttle(async () => { const add = throttle(async () => {
let parentId = getKeyOfSelectedNode(window.treeObj, 'id') let parentId = getKeyOfSelectedNode(window.treeObj, 'id')
let fnone = getSelectedNode(window.treeObj) let fnone = getSelectedNode(window.treeObj)
const res = await TreeApi.addDirectory({ const res: any = await TreeApi.addDirectory({
id: new YJ.Tools().randomString(),
sourceName: form.sourceName, sourceName: form.sourceName,
parentId parentId
}) })

View 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

View 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

View 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

View File

@ -25,7 +25,7 @@ import '../public/tree/jquery.ztree.exhide.js'
import '../public/tree/fuzzysearch.js' import '../public/tree/fuzzysearch.js'
import '../public/tree/newFuzzySearch' import '../public/tree/newFuzzySearch'
import Pagination from './components/Pagination/index.vue' import Pagination from './components/Pagination/index.vue'
process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true"; // process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";
const i18n = createI18n({ const i18n = createI18n({
legacy: false, legacy: false,
locale: 'zh-CN', locale: 'zh-CN',

View 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);
}
}
});
}

View File

@ -1,3 +1,4 @@
const { ipcRenderer } = require('electron')
export const $changeComponentShow = (selector: any, state: any, styleStr: any = false) => { export const $changeComponentShow = (selector: any, state: any, styleStr: any = false) => {
$(selector).css({ visibility: state ? 'visible' : 'hidden' }) $(selector).css({ visibility: state ? 'visible' : 'hidden' })
if (styleStr) { 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] }) 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);
};

View File

@ -15,11 +15,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { inject } from "vue"; import { inject } from 'vue'
import { TreeApi } from '@/api/tree' import { TreeApi } from '@/api/tree'
import { initMapData } from '../tree/initMapData' import { initMapData } from '../tree/initMapData'
import { useTreeNode } from '../tree/hooks/treeNode'
const { cusAddNodes } = useTreeNode()
const { t } = useI18n() const { t } = useI18n()
const eventBus = inject("bus"); const eventBus: any = inject('bus')
const i8n = ref({ const i8n = ref({
DrawRect: 'rect', DrawRect: 'rect',
@ -42,7 +44,7 @@ const bottomMenuList = ref([
sourceType: 'groundText', sourceType: 'groundText',
className: 'public', className: 'public',
fun: () => { fun: () => {
eventBus.emit("openDialog", 'groundText'); eventBus.emit('openDialog', 'addGroundText')
} }
}, },
{ {
@ -51,7 +53,8 @@ const bottomMenuList = ref([
sourceType: 'standText', sourceType: 'standText',
className: 'public', className: 'public',
fun: () => { fun: () => {
eventBus.emit("openDialog", 'standText'); eventBus.emit('openDialog', 'addStandText')
// eventBus.emit("openDialog", 'standText');
} }
}, },
{ {
@ -70,19 +73,24 @@ const bottomMenuList = ref([
let options: any = await initMapData('point', { let options: any = await initMapData('point', {
id: id, id: id,
name: name, name: name,
position: position, position: position
}) })
let selectedNodes = window.treeObj.getSelectedNodes() let selectedNodes = window.treeObj.getSelectedNodes()
delete options.host delete options.host
let params = { let params = {
"id": id, id: id,
"sourceName": name, sourceName: name,
"sourceType": "point", sourceType: 'point',
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined, // isShow: 1,
parentId:
selectedNodes && selectedNodes[selectedNodes.length - 1]
? selectedNodes[selectedNodes.length - 1].id
: undefined,
// "treeIndex": 0, // "treeIndex": 0,
"params": options params: options
} }
TreeApi.addDirectory(params) TreeApi.addOtherSource(params)
cusAddNodes(window.treeObj, params.parentId, [params])
}) })
} }
}, },
@ -104,18 +112,23 @@ const bottomMenuList = ref([
let options: any = await initMapData('line', { let options: any = await initMapData('line', {
id: id, id: id,
name: name, name: name,
positions: positions, positions: positions
}) })
let selectedNodes = window.treeObj.getSelectedNodes() let selectedNodes = window.treeObj.getSelectedNodes()
let params = { let params = {
"id": id, id: id,
"sourceName": name, sourceName: name,
"sourceType": "line", sourceType: 'line',
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined, // isShow: 1,
parentId:
selectedNodes && selectedNodes[selectedNodes.length - 1]
? selectedNodes[selectedNodes.length - 1].id
: undefined,
// "treeIndex": 0, // "treeIndex": 0,
"params": options params: options
} }
TreeApi.addDirectory(params) TreeApi.addOtherSource(params)
cusAddNodes(window.treeObj, params.parentId, [params])
}) })
} }
}, },
@ -135,19 +148,23 @@ const bottomMenuList = ref([
let options: any = await initMapData('curve', { let options: any = await initMapData('curve', {
id: id, id: id,
name: name, name: name,
positions: positions, positions: positions
}) })
let selectedNodes = window.treeObj.getSelectedNodes() let selectedNodes = window.treeObj.getSelectedNodes()
let params = { let params = {
"id": id, id: id,
"sourceName": name, sourceName: name,
"sourceType": "curve", sourceType: 'curve',
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined, // isShow: 1,
parentId:
selectedNodes && selectedNodes[selectedNodes.length - 1]
? selectedNodes[selectedNodes.length - 1].id
: undefined,
// "treeIndex": 0, // "treeIndex": 0,
"params": options params: options
} }
TreeApi.addDirectory(params) TreeApi.addOtherSource(params)
cusAddNodes(window.treeObj, params.parentId, [params])
}) })
} }
}, },
@ -158,7 +175,7 @@ const bottomMenuList = ref([
className: 'public', className: 'public',
fun: () => { fun: () => {
let Draw = new YJ.Draw.DrawPolygon(window.earth) let Draw = new YJ.Draw.DrawPolygon(window.earth)
Draw.start((a, positions) => { Draw.start(async (a, positions) => {
if (!positions || positions.length < 3) { if (!positions || positions.length < 3) {
ElMessage({ ElMessage({
message: '至少需要绘制三个坐标!', message: '至少需要绘制三个坐标!',
@ -166,11 +183,31 @@ const bottomMenuList = ref([
}) })
return return
} }
let PolygonObject = new YJ.Obj.PolygonObject(window.earth, { id: new YJ.Tools().randomString(), positions: positions }) let id = new YJ.Tools().randomString()
PolygonObject.onClick = (a, b, c) => { // let id = 'aaa'
console.log(a, b, c) let name = '面标注'
let options: any = await initMapData('panel', {
id: id,
name: name,
positions: positions
})
let selectedNodes = window.treeObj.getSelectedNodes()
let params = {
id: id,
sourceName: name,
sourceType: 'panel',
// isShow: 1,
parentId:
selectedNodes && selectedNodes[selectedNodes.length - 1]
? selectedNodes[selectedNodes.length - 1].id
: undefined,
// "treeIndex": 0,
params: options
} }
eventBus.emit("openDialog", 'panel', PolygonObject.options.id); console.log(params)
TreeApi.addOtherSource(params)
cusAddNodes(window.treeObj, params.parentId, [params])
}) })
} }
}, },
@ -178,32 +215,220 @@ const bottomMenuList = ref([
sourceName: '圆标注', sourceName: '圆标注',
key: 'DrawCircle', key: 'DrawCircle',
sourceType: 'circle', sourceType: 'circle',
className: 'public' 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: '矩形', sourceName: '矩形',
key: 'DrawRect', key: 'DrawRect',
sourceType: 'rectangle', sourceType: 'rectangle',
className: 'public' className: 'public',
fun: () => {
let Draw = new YJ.Draw.DrawRect(window.earth)
Draw.start(async (a, positions) => {
if (!positions || positions.length < 3) {
ElMessage({
message: '至少需要绘制三个坐标!',
type: 'warning'
})
return
}
let id = new YJ.Tools().randomString()
// let id = 'aaa'
let name = '矩形'
let options: any = await initMapData('panel', {
id: id,
name: name,
positions: positions
})
let selectedNodes = window.treeObj.getSelectedNodes()
let params = {
id: id,
sourceName: name,
sourceType: 'rectangle',
// isShow: 1,
parentId:
selectedNodes && selectedNodes[selectedNodes.length - 1]
? selectedNodes[selectedNodes.length - 1].id
: undefined,
// "treeIndex": 0,
params: options
}
console.log(params)
// eventBus.emit("openDialog", 'panel');
TreeApi.addOtherSource(params)
cusAddNodes(window.treeObj, params.parentId, [params])
})
}
}, },
{ {
sourceName: '集结地', sourceName: '集结地',
key: 'DrawAssemble', key: 'DrawAssemble',
sourceType: 'rendezvous', sourceType: 'rendezvous',
className: 'public' className: 'public',
fun: () => {
let Draw = new YJ.Draw.DrawAssemble(window.earth)
Draw.start(async (a, positions) => {
if (!positions || positions.length < 3) {
ElMessage({
message: '至少需要绘制三个坐标!',
type: 'warning'
})
return
}
let id = new YJ.Tools().randomString()
// let id = 'aaa'
let name = '集结地'
let options: any = await initMapData('rendezvous', {
id: id,
name: name,
positions: positions
})
delete options.label.ground
delete options.label.position
let selectedNodes = window.treeObj.getSelectedNodes()
let params = {
id: id,
sourceName: name,
sourceType: 'rendezvous',
// isShow: 1,
parentId:
selectedNodes && selectedNodes[selectedNodes.length - 1]
? selectedNodes[selectedNodes.length - 1].id
: undefined,
// "treeIndex": 0,
params: options
}
console.log(params)
// eventBus.emit("openDialog", 'panel');
TreeApi.addOtherSource(params)
cusAddNodes(window.treeObj, params.parentId, [params])
})
}
}, },
{ {
sourceName: '箭头', sourceName: '箭头',
key: 'DrawAttackArrow', key: 'DrawAttackArrow',
sourceType: 'attackArrow', sourceType: 'attackArrow',
className: 'public' className: 'public',
fun: () => {
let Draw = new YJ.Draw.DrawAttackArrow(window.earth)
Draw.start(async (a, positions) => {
if (!positions || positions.length < 3) {
ElMessage({
message: '至少需要绘制三个坐标!',
type: 'warning'
})
return
}
let id = new YJ.Tools().randomString()
// let id = 'aaa'
let name = '箭头'
let options: any = await initMapData('attackArrow', {
id: id,
name: name,
positions: positions
})
delete options.label.ground
delete options.label.position
let selectedNodes = window.treeObj.getSelectedNodes()
let params = {
id: id,
sourceName: name,
sourceType: 'attackArrow',
// isShow: 1,
parentId:
selectedNodes && selectedNodes[selectedNodes.length - 1]
? selectedNodes[selectedNodes.length - 1].id
: undefined,
// "treeIndex": 0,
params: options
}
console.log(params)
// eventBus.emit("openDialog", 'panel');
TreeApi.addOtherSource(params)
cusAddNodes(window.treeObj, params.parentId, [params])
})
}
}, },
{ {
sourceName: '钳形箭头', sourceName: '钳形箭头',
key: 'DrawPincerArrow', key: 'DrawPincerArrow',
sourceType: 'pincerArrow', sourceType: 'pincerArrow',
className: 'public' className: 'public',
fun: () => {
let Draw = new YJ.Draw.DrawPincerArrow(window.earth)
Draw.start(async (a, positions) => {
if (!positions || positions.length < 5) {
ElMessage({
message: '至少需要绘制五个坐标!',
type: 'warning'
})
return
}
let id = new YJ.Tools().randomString()
// let id = 'aaa'
let name = '双箭头'
let options: any = await initMapData('pincerArrow', {
id: id,
name: name,
positions: positions
})
delete options.label.ground
delete options.label.position
let selectedNodes = window.treeObj.getSelectedNodes()
let params = {
id: id,
sourceName: name,
sourceType: 'pincerArrow',
// isShow: 1,
parentId:
selectedNodes && selectedNodes[selectedNodes.length - 1]
? selectedNodes[selectedNodes.length - 1].id
: undefined,
// "treeIndex": 0,
params: options
}
// eventBus.emit("openDialog", 'panel');
TreeApi.addOtherSource(params)
cusAddNodes(window.treeObj, params.parentId, [params])
})
}
} }
// { // {
// sourceName: "锁定", // sourceName: "锁定",

View File

@ -2,19 +2,30 @@
<div class="leftBox"> <div class="leftBox">
<div class="left animate__animated"> <div class="left animate__animated">
<div class="menus"> <div class="menus">
<div class="menus_itemBox" v-for="(item, index) in menuList" :title="t(`firstMenu.${item.name}`)"> <div
<div class="item_icon" @click="(e) => { handleClick(item, e) }"> 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 :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> <svg-icon :name="item.svg" :size="16" color="rgba(0, 255, 255, 1)"></svg-icon>
<div class="item_text"> <div class="item_text">
{{ t(`firstMenu.${item.name}`) }} {{ t(`firstMenu.${item.name}`) }}
</div> </div>
</div> </div>
</div> </div>
<leftSideSecond class="absolute zIndex99 leftSideSecond" ref="leftSideSecondRef"></leftSideSecond> <leftSideSecond
class="absolute zIndex99 leftSideSecond"
ref="leftSideSecondRef"
></leftSideSecond>
</div> </div>
</div> </div>
<div class="left_bottom" @click="fold"></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' import leftSideSecond from '@/views/components/leftSide/leftSideSecond.vue'
const { t } = useI18n() const { t } = useI18n()
const menuList = ref([ const eventBus: any = inject('bus')
const menuList: any = ref([
// 方案推演 // 方案推演
{ {
name: 'situation', name: 'situation',
@ -52,20 +64,20 @@ const menuList = ref([
// fun: this.showSecondMenu, // fun: this.showSecondMenu,
key: 'effect', key: 'effect',
children: [ children: [
"trajectoryMotion", 'trajectoryMotion',
"electronicFence", 'electronicFence',
// "nightVision", // "nightVision",
"radarLightWave", 'radarLightWave',
"diffusedLightWave", 'diffusedLightWave',
"scanStereoscopic", 'scanStereoscopic',
"multilateralBody", 'multilateralBody',
"waterSurface", 'waterSurface',
"fountain", 'fountain',
"waterL", 'waterL',
"fire", 'fire',
"explosion", 'explosion',
"smoke", 'smoke',
"nightVision", 'nightVision'
// "nightVision", // "nightVision",
] ]
}, },
@ -76,16 +88,16 @@ const menuList = ref([
// fun: this.showSecondMenu, // fun: this.showSecondMenu,
key: 'analysis', key: 'analysis',
children: [ children: [
"inundationAnalysis", 'inundationAnalysis',
"profileAnalysis", 'profileAnalysis',
"sightAnalysis", 'sightAnalysis',
"kenAnalysis", 'kenAnalysis',
"circleKen", 'circleKen',
"slopeDirection", 'slopeDirection',
"cutFill", 'cutFill',
"contour", 'contour',
"globalContour", 'globalContour',
"clear", 'clear'
] ]
}, },
// 测量 // 测量
@ -95,17 +107,17 @@ const menuList = ref([
// fun: this.showSecondMenu, // fun: this.showSecondMenu,
key: 'measure', key: 'measure',
children: [ children: [
"projectionArea", 'projectionArea',
"projectionDistanceMeasure", 'projectionDistanceMeasure',
"areaMeasure", 'areaMeasure',
"distanceMeasure", 'distanceMeasure',
"heightMeasure", 'heightMeasure',
"triangleMeasure", 'triangleMeasure',
"MeasureAzimuth", 'MeasureAzimuth',
"MeasureAngle", 'MeasureAngle',
"lopeDistanceMeasures", 'lopeDistanceMeasures',
"coorMeasure", 'coorMeasure',
"clear", 'clear'
] ]
}, },
@ -116,26 +128,28 @@ const menuList = ref([
// fun: this.showSecondMenu, // fun: this.showSecondMenu,
key: 'tool', key: 'tool',
children: [ children: [
"routePlan", 'routePlan',
//清除轨迹 'clearRoute',
"graffiti", 'graffiti',
// stopGraffiti: "结束涂鸦", // stopGraffiti: "结束涂鸦",
"clearGraffiti", 'clearGraffiti',
"path", 'path',
"coorLocation", 'coorLocation',
"mouseLocation", 'mouseLocation',
"annotationAggregation", 'annotationAggregation',
// 卷帘对比 'annotation',
// 屏幕截图 'screenShot',
// 高清出图 'highQuality',
// 视频录制 'videoRecord',
"pressModel", 'pressModel',
"terrainDig", 'terrainDig',
"tilesetClipping", 'tilesetClipping',
"clearTilesetClipping", 'clearTilesetClipping',
"projConvert", 'projConvert',
"projectionConvert", 'projectionConvert',
"gdbImport", 'gdbImport',
'circleStatistics',
'polygonStatistics'
] ]
}, },
{ {
@ -170,12 +184,12 @@ onMounted(() => {
}) })
const leftSideSecondRef = ref() const leftSideSecondRef = ref()
const handleClick = (item: any, e) => { const handleClick = (item: any, e) => {
console.log("点击了", item, e); console.log('点击了', item, e)
$(".leftSideSecond")[0].style.left = "100%"; $('.leftSideSecond')[0].style.left = '100%'
$(".leftSideSecond")[0].style.top = e.layerY - 120 + "px" $('.leftSideSecond')[0].style.top = e.layerY - 120 + 'px'
$(".leftSideSecond")[0].style.display = "none" $('.leftSideSecond')[0].style.display = 'none'
if (item.children.length) { if (item.children.length) {
$(".leftSideSecond")[0].style.display = "block" $('.leftSideSecond')[0].style.display = 'block'
leftSideSecondRef.value.initList(item) leftSideSecondRef.value.initList(item)
} }
} }
@ -228,6 +242,24 @@ const fold = () => {
(itemCount - 1) * itemDelay + itemDuration (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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@ -321,10 +353,6 @@ const fold = () => {
padding-left: 0.5rem; padding-left: 0.5rem;
} }
} }
} }
} }

View File

@ -1,162 +1,471 @@
<template> <template>
<div class="leftSideSecond"> <div class="leftSideSecond">
<div class="leftSideSecondBox"> <div class="leftSideSecondBox">
<template v-if="obj">
<template v-if="obj"> <div class="menuItem" v-for="value in obj.children" @click="handleClick(value)">
<div class="menuItem" v-for="value in obj.children" @click="handleClick(value)"> <img
<img :src="'src/assets/images/second/' + `${value}` + '.png'" alt=""> :src="'src/assets/images/second/' + `${value}` + '.png'"
<span>{{ t(`${obj.key}.${value}`) }}</span> style="color: rgb(255, 0, 0)"
</div> alt=""
</template> />
<span :style="{ color: !clickChange[value] ? 'var(--color-text)' : 'rgb(255,0,0)' }">{{
t(`${obj.key}.${value}`)
}}</span>
</div> </div>
</template>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { ref, reactive, getCurrentInstance } from "vue" import { ref, reactive, getCurrentInstance } from 'vue'
import { useTreeNode } from '../tree/hooks/treeNode' import { useTreeNode } from '../tree/hooks/treeNode'
import { TreeApi } from '@/api/tree' import { TreeApi } from '@/api/tree'
import { renderMethods } from '../tree/hooks/renderTreeNode' 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 { proxy } = getCurrentInstance()
const { t } = useI18n() const { t } = useI18n()
const { findParentId, findTreeIndex } = useTreeNode() const { findParentId, findTreeIndex, cusAddNodes } = useTreeNode()
const obj = ref(null) const obj = ref(null)
const isclick = ref(false)
const eventBus = inject('bus')
const initList = (value) => { 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 = { const methodMap = {
// 电子围墙 // 轨迹运动
electronicFence: () => { trajectoryMotion: () => {
let draw = new YJ.Draw.DrawPolyline(window.earth); // let draw = new YJ.Draw.DrawPolyline(window.earth)
draw.start((err, positions) => { // draw.start((err, positions) => {
if (positions.length > 1) { // if (positions.length > 1) {}
let alt = positions[0].alt; // })
positions.forEach((item) => { },
if (item.alt < alt) alt = item.alt; // 电子围墙
}); electronicFence: () => {
let id = proxy.$md5(new Date().getTime() + "围墙"); let draw = new YJ.Draw.DrawPolyline(window.earth)
let params = { draw.start((err, positions) => {
sourceName: "电子围墙", if (positions.length > 1) {
id, let alt = positions[0].alt
sourceType: "wallStereoscopic", positions.forEach((item) => {
parentId: findParentId(window.treeObj), if (item.alt < alt) alt = item.alt
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])
}
}) })
// 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
}, YJ.Global.switchCluster(window.earth, clickChange.annotationAggregation)
// 扩散光波 },
radarLightWave: () => { //卷帘对比
let draw = new YJ.Draw.DrawCircle(window.earth); annotation() {
draw.start((err, params) => { clickChange.annotation = !clickChange.annotation
console.log(params); if (clickChange.annotation) {
if (params) { 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(); if (window.splitScreen || window.multiViewportMode) {
}, let res = ''
//投影距离测量 let res2 = ''
projectionDistanceMeasure: () => { let sdk
new YJ.Measure.MeasureProjectionDistance(window.earth).start(); if (window.splitScreen) {
}, sdk = YJ.Global.splitScreen.getSdk()
areaMeasure: () => { } else {
new YJ.Measure.MeasureTdArea(window.earth).start(); sdk = YJ.Global.multiViewportMode.getSdk()
}, }
//距离测量 await new YJ.Global.ScreenShot(sdk.sdkD, (data) => {
distanceMeasure: () => { res = data
new YJ.Measure.MeasureDistance(window.earth).start(); })
}, await new YJ.Global.ScreenShot(sdk.sdkP, (data) => {
//高度测量 res2 = data
heightMeasure: () => { })
new YJ.Measure.MeasureHeight(window.earth).start(); if (window.multiViewportMode) {
}, processBase64Images(res, res2, (mergedBase64) => {
//三角测量 downloadScreen(mergedBase64)
triangleMeasure: () => { // window.multiViewportMode = false;
new YJ.Measure.MeasureTriangle(window.earth).start(); })
}, } else {
// 方位角 let doms = document.querySelectorAll('.cesium-widget')
MeasureAzimuth() { let leftWidth = doms[0].offsetWidth
new YJ.Measure.MeasureAzimuth(window.earth).start(); let rightWidth = doms[1].offsetWidth
}, combineBase64Images(res2, leftWidth, res, rightWidth)
//夹角测量 .then((result) => {
MeasureAngle() { downloadScreen(result)
new YJ.Measure.MeasureAngle(window.earth).start(); // window.splitScreen = false;
}, })
// 坡度测量 .catch((err) => console.error('拼接失败:', err))
lopeDistanceMeasures() { }
new YJ.Measure.MeasureSlopeDistance(window.earth).start(); } else {
}, let res = ''
//坐标测量 await new YJ.Global.ScreenShot(window.earth, (data) => {
coorMeasure() { res = data
new YJ.Measure.MeasureLocation(window.earth).start(); })
}, downloadScreen(res)
//清除测量 }
clear() { },
YJ.Measure.Clear(); //高清出图
}, 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') => { const handleClick = (value = 'projectionDistanceMeasure') => {
methodMap[value]() console.log('点击了', value)
methodMap[value]()
} }
defineExpose({ defineExpose({
initList initList
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.leftSideSecond { .leftSideSecond {
display: none; display: none;
height: 365px; height: 365px;
width: 275px; width: 275px;
background: url("@/assets/images/secondBj.png") no-repeat; background: url('@/assets/images/secondBj.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
padding: 13px 4px 13px 11px; padding: 13px 4px 13px 11px;
.leftSideSecondBox { .leftSideSecondBox {
border: 1px solid red; border: 1px solid red;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
max-height: 100%; max-height: 100%;
overflow-y: auto; overflow-y: auto;
.menuItem { .menuItem {
width: 25%; width: 25%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin: 5px 0; margin: 5px 0;
img { img {
width: 20px; width: 20px;
height: 20px height: 20px;
} }
span { span {
font-size: 12px; font-size: 12px;
} }
}
} }
}
} }
</style> </style>

View 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>

View 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>

View 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>

View 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>

View 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"></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"></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"></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"></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"></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"></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>

View 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> -->

View File

@ -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>

View File

@ -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>

View 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>

View 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>

View 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>

View File

@ -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>

View File

@ -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>

View 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>

View 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"></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>

View File

@ -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>

View 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>

View 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>

View File

@ -1,7 +1,7 @@
<template> <template>
<Dialog ref="baseDialog" title="贴地文字" left="180px" top="100px"> <Dialog ref="baseDialog" title="贴地文字" left="calc(50% - 160px)" top="calc(50% - 120px)">
<template #content> <template #content>
<textarea style="height: 76px; width: 270px;" v-model="text"></textarea> <textarea style="height: 76px; width: 270px" v-model="text"></textarea>
</template> </template>
<template #footer> <template #footer>
<button @click="confirm">确定</button> <button @click="confirm">确定</button>
@ -10,18 +10,21 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue'
import { inject } from "vue"; import { inject } from 'vue'
import { TreeApi } from '@/api/tree' import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue' import Dialog from '@/components/dialog/baseDialog.vue'
import { initMapData } from '../tree/initMapData' import { initMapData } from '../tree/initMapData'
import { useTreeNode } from '../tree/hooks/treeNode'
const baseDialog = ref(null); const { cusAddNodes } = useTreeNode()
const eventBus = inject("bus");
const text = ref("") const baseDialog: any = ref(null)
eventBus.on("openStandTextAdd", () => { const eventBus: any = inject('bus')
const text = ref('')
eventBus.on('openStandTextAdd', () => {
baseDialog.value?.open() baseDialog.value?.open()
}); })
const open = () => { const open = () => {
baseDialog.value?.open() baseDialog.value?.open()
} }
@ -31,25 +34,32 @@ const confirm = () => {
text.value = '' text.value = ''
let Draw = new YJ.Draw.DrawPolyline(window.earth, { number: 2 }) let Draw = new YJ.Draw.DrawPolyline(window.earth, { number: 2 })
Draw.start(async (a, positions) => { Draw.start(async (a, positions) => {
if(!positions || positions.length < 2) { if (!positions || positions.length < 2) {
return return
} }
let id = new YJ.Tools().randomString() let id = new YJ.Tools().randomString()
let options: any = await initMapData('groundText', { let options: any = await initMapData('groundText', {
id: id, id: id,
name: name, text: name,
positions: positions, positions: positions
}) })
delete options.host
delete options.positions
console.log('options', options)
let selectedNodes = window.treeObj.getSelectedNodes() let selectedNodes = window.treeObj.getSelectedNodes()
let params = { let params = {
"id": id, id: id,
"sourceName": name, sourceName: name,
"sourceType": "groundText", sourceType: 'groundText',
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined, parentId:
selectedNodes && selectedNodes[selectedNodes.length - 1]
? selectedNodes[selectedNodes.length - 1].id
: undefined,
// "treeIndex": 0, // "treeIndex": 0,
"params": options params: options
} }
TreeApi.addDirectory(params) TreeApi.addOtherSource(params)
cusAddNodes(window.treeObj, params.parentId, [params])
}) })
} }
defineExpose({ defineExpose({
@ -57,4 +67,4 @@ defineExpose({
}) })
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>

View File

@ -1,7 +1,7 @@
<template> <template>
<Dialog ref="baseDialog" title="立体文字" left="180px" top="100px"> <Dialog ref="baseDialog" title="立体文字" left="calc(50% - 160px)" top="calc(50% - 120px)">
<template #content> <template #content>
<textarea style="height: 76px; width: 270px;" v-model="text"></textarea> <textarea style="height: 76px; width: 270px" v-model="text"></textarea>
</template> </template>
<template #footer> <template #footer>
<button @click="confirm">确定</button> <button @click="confirm">确定</button>
@ -10,18 +10,18 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue'
import { inject } from "vue"; import { inject } from 'vue'
import { TreeApi } from '@/api/tree' import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue' import Dialog from '@/components/dialog/baseDialog.vue'
import { initMapData } from '../tree/initMapData' import { initMapData } from '../tree/initMapData'
const baseDialog = ref(null); const baseDialog: any = ref(null)
const eventBus = inject("bus"); const eventBus: any = inject('bus')
const text = ref("") const text = ref('')
eventBus.on("openStandTextAdd", () => { eventBus.on('openStandTextAdd', () => {
baseDialog.value?.open() baseDialog.value?.open()
}); })
const open = () => { const open = () => {
baseDialog.value?.open() baseDialog.value?.open()
} }
@ -38,18 +38,23 @@ const confirm = () => {
let options: any = await initMapData('standText', { let options: any = await initMapData('standText', {
id: id, id: id,
name: name, name: name,
positions: positions, positions: positions
}) })
let selectedNodes = window.treeObj.getSelectedNodes() delete options.host
let params = { console.log('options', options)
"id": id, // let selectedNodes = window.treeObj.getSelectedNodes()
"sourceName": name, // let params = {
"sourceType": "standText", // id: id,
"parentId": (selectedNodes && selectedNodes[selectedNodes.length - 1]) ? selectedNodes[selectedNodes.length - 1].id : undefined, // sourceName: name,
// "treeIndex": 0, // sourceType: 'standText',
"params": options // parentId:
} // selectedNodes && selectedNodes[selectedNodes.length - 1]
TreeApi.addDirectory(params) // ? selectedNodes[selectedNodes.length - 1].id
// : undefined,
// // "treeIndex": 0,
// params: options
// }
// TreeApi.addOtherSource(params)
}) })
} }
defineExpose({ defineExpose({
@ -57,4 +62,4 @@ defineExpose({
}) })
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>

View File

@ -0,0 +1,368 @@
<template>
<Dialog ref="baseDialog" :title="title + '属性'" left="180px" top="100px" className="attackArrow"
: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 class="row">
<div class="col">
<span class="label">动画时长</span>
<div class="input-number input-number-unit-3">
<input class="input blur" type="number" title="" min="500" max="9999999" v-model="entityOptions.spreadTime">
<span class="unit">ms</span>
<span class="arrow"></span>
</div>
</div>
<div class="col" style="flex: 0 0 60%;">
<div class="row">
<div class="col">
<span class="label">动画</span>
<input class="btn-switch" type="checkbox" v-model="entityOptions.spreadState">
</div>
<div class="col">
<span class="label">动画重复</span>
<input class="btn-switch" type="checkbox" v-model="entityOptions.loop">
</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" 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>
</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>
</div>
<div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
<input class="input" @blur="inputBlurCallBack($event, i, 'alt', 2)" type="number"
v-model="entityOptions.height" min="-9999999" max="999999999"
v-if="activeTd.index == i && activeTd.name == 'alt'">
<span style="pointer-events: none;" v-else>{{ (entityOptions.height).toFixed(2) }}</span>
</div>
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="面风格" name="3">
<div class="row">
<div class="col">
<span class="label">面颜色</span>
<div class="color" ref="colorRef"></div>
</div>
<div class="col">
<span class="label">描边颜色</span>
<div class="lineColor" ref="lineColorRef"></div>
</div>
<div class="col">
<span class="label">描边宽度</span>
<div class="input-number input-number-unit-2">
<input class="input" type="number" title="" min="0" max="99" v-model="entityOptions.lineWidth">
<span class="unit">px</span>
<span class="arrow"></span>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="标签风格" name="4">
<labelStyle :type="title" :entityOptions="entityOptions"></labelStyle>
</el-tab-pane>
</el-tabs>
</div>
</div>
<span class="custom-divider"></span>
</template>
<template #footer>
<div style="position: absolute; left: 24px; display: flex;">
<button @click="nodeEdit"><svg class="icon-edit">
<use xlink:href="#yj-icon-edit"></use>
</svg>二次编辑</button>
<button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
<use xlink:href="#yj-icon-py"></use>
</svg>平移</button>
</div>
<button @click="confirm">确定</button>
<button @click="close">关闭</button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { inject } from "vue";
import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue'
import attribute from './attribute.vue'
import labelStyle from './labelStyle.vue'
import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
const { cusUpdateNode } = useTreeNode()
const title = ref('箭头')
const baseDialog: any = ref(null);
const eventBus: any = inject("bus");
const options = ref({});
const colorRef = ref(null)
const lineColorRef = ref(null)
eventBus.on("openPolygonEdit", () => {
baseDialog.value?.open()
});
const area = ref(0)
const areaUnit = ref('m2')
const height = ref(10)
const heightModeData = ref([
{
name: '海拔高度',
value: '海拔高度',
key: 0
},
{
name: '相对地表',
value: '相对地表',
key: 1
},
{
name: '依附模型',
value: '依附模型',
key: 2
}
])
const activeName = ref('1')
const activeTd = ref({
index: -1,
name: ''
})
const positions = ref([])
const heightMode = ref(0)
const entityOptions: any = ref({});
let originalOptions: any
let that: any
const open = async (id: any, type: any) => {
if(type && type === 'pincerArrow') {
title.value = '双箭头'
}
that = window.earth.entityMap.get(id)
originalOptions = structuredClone(that.options)
entityOptions.value = that
heightMode.value = entityOptions.value.heightMode
area.value = entityOptions.value.areaByMeter
positions.value = structuredClone(that.options.positions)
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
}
}
let spreadState = entityOptions.value.spreadState
heightModeChange(heightMode.value)
setTimeout(() => {
entityOptions.value.spreadState = spreadState
}, 50);
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 = () => {
entityOptions.value.spreadState = false
that.openPositionEditing(() => {
entityOptions.value.options.positions = structuredClone(that.options.positions)
})
}
const closeCallback = () => {
entityOptions.value.originalOptions = structuredClone(originalOptions)
that.positionEditing = false
entityOptions.value.closeNodeEdit()
entityOptions.value.reset()
eventBus.emit("destroyComponent")
}
const nodeEdit = () => {
entityOptions.value.spreadState = false
that.nodeEdit((e, positions, areaByMeter) => {
entityOptions.value.options.positions = structuredClone(positions)
})
}
const confirm = () => {
originalOptions = structuredClone(that.options)
let params = structuredClone(that.options)
baseDialog.value?.close()
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>

View File

@ -2,9 +2,19 @@
<div class="attribute"> <div class="attribute">
<div class="row"> <div class="row">
<div class="col attribute-select-box"> <div class="col attribute-select-box">
<span class="label" style="line-height: 32px;">内容类型</span> <span class="label" style="line-height: 32px">内容类型</span>
<el-select style="width: 175px" v-model="attributeType" @change="attributeChange" placeholder="请选择"> <el-select
<el-option v-for="item in attributeSelect" :key="item.key" :label="item.name" :value="item.key"> 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-option>
</el-select> </el-select>
</div> </div>
@ -20,8 +30,8 @@
<div class="row attribute-content attribute-content-link" v-show="attributeType === 'link'"> <div class="row attribute-content attribute-content-link" v-show="attributeType === 'link'">
<div class="col"> <div class="col">
<span class="label">添加链接</span> <span class="label">添加链接</span>
<div style="flex: 1;position: relative;"> <div style="flex: 1; position: relative">
<input class="input link_add" type="text" v-model="addlinkInput"> <input class="input link_add" type="text" v-model="addlinkInput" />
<i class="link_add_btn" @click="_addLink"></i> <i class="link_add_btn" @click="_addLink"></i>
</div> </div>
</div> </div>
@ -38,7 +48,7 @@
<div class="table-body" v-if="attribute.link.content && attribute.link.content.length > 0"> <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="tr" v-for="(item, index) in attribute.link.content">
<div class="td" v-if="linkEditActive.index === index"> <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>
<div class="td" v-else>{{ item.name }}</div> <div class="td" v-else>{{ item.name }}</div>
<div class="td" v-if="linkEditActive.index === index"> <div class="td" v-if="linkEditActive.index === index">
@ -53,7 +63,6 @@
<button @click="linkEdit(index, item)">编辑</button> <button @click="linkEdit(index, item)">编辑</button>
<button @click="linkDelete(index)">删除</button> <button @click="linkDelete(index)">删除</button>
</div> </div>
</div> </div>
</div> </div>
<div class="table-empty" v-else> <div class="table-empty" v-else>
@ -66,7 +75,7 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<span class="label">编辑内容</span> <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> <button class="select btn" @click="cameraSelect">搜索</button>
</div> </div>
</div> </div>
@ -76,17 +85,17 @@
<div class="tr"> <div class="tr">
<div class="th">操作</div> <div class="th">操作</div>
<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: 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: 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: 80px; flex: 0 80px; min-width: 80px">用户名</div>
<div class="th">密码</div> <div class="th">密码</div>
</div> </div>
</div> </div>
<div class="table-body" style="display:none;"> <div class="table-body" style="display: none">
<div class="tr"> <div class="tr">
<div class="td"> <div class="td">
<input type="checkbox" value="2"> <input type="checkbox" value="2" />
<span>绑定</span> <span>绑定</span>
</div> </div>
<div class="td">设备名称</div> <div class="td">设备名称</div>
@ -119,19 +128,19 @@
<div class="table isc-table"> <div class="table isc-table">
<div class="table-head"> <div class="table-head">
<div class="tr"> <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">设备名称</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> </div>
<div class="table-body" style="display:none;"> <div class="table-body" style="display: none">
<div class="tr"> <div class="tr">
<div class="td"> <div class="td">
<input type="checkbox" value="2"> <input type="checkbox" value="2" />
<span>绑定</span> <span>绑定</span>
</div> </div>
<div class="td">设备名称</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> </div>
<div class="table-empty"> <div class="table-empty">
@ -147,8 +156,8 @@
<div class="row attribute-content attribute-content-vr" v-show="attributeType === 'vr'"> <div class="row attribute-content attribute-content-vr" v-show="attributeType === 'vr'">
<div class="col"> <div class="col">
<span class="label">添加链接</span> <span class="label">添加链接</span>
<div style="flex: 1;position: relative;"> <div style="flex: 1; position: relative">
<input class="input vr_add" type="text"> <input class="input vr_add" type="text" />
<i class="vr_add_btn" @click="_addRr"></i> <i class="vr_add_btn" @click="_addRr"></i>
</div> </div>
</div> </div>
@ -162,8 +171,7 @@
<div class="th">操作</div> <div class="th">操作</div>
</div> </div>
</div> </div>
<div class="table-body"> <div class="table-body"></div>
</div>
<div class="table-empty"> <div class="table-empty">
<div class="empty-img"></div> <div class="empty-img"></div>
<p>暂无数据</p> <p>暂无数据</p>
@ -175,22 +183,26 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<span class="label">编辑内容</span> <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> <button class="select btn" @click="goodsFilter">搜索</button>
</div> </div>
</div> </div>
<div class="table goods-table"> <div class="table goods-table">
<div class="table-head"> <div class="table-head">
<div class="tr"> <div class="tr">
<div class="th" style="width: 60px; flex: 0 60px;min-width: 60px;">序号</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" style="flex: 0 0 280px">名称</div>
<div class="th">数量</div> <div class="th">数量</div>
</div> </div>
</div> </div>
<div class="table-body" style="display:none;"> <div class="table-body" style="display: none">
<div class="tr"> <div class="tr">
<div class="td" style="width: 60px; flex: 0 60px;min-width: 60px;">序号</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" style="flex: 0 0 280px">名称</div>
<div class="td">数量</div> <div class="td">数量</div>
</div> </div>
</div> </div>
@ -205,11 +217,11 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue'
import { inject } from "vue"; import { inject } from 'vue'
const baseDialog = ref(null); const baseDialog: any = ref(null)
const eventBus = inject("bus"); const eventBus: any = inject('bus')
const attributeType = ref('richText') const attributeType = ref('richText')
const props = defineProps({ const props = defineProps({
@ -232,7 +244,7 @@ const attributeSelect = ref([
name: '链接', name: '链接',
value: '链接', value: '链接',
key: 'link' key: 'link'
}, }
// { // {
// name: 'IP摄像头', // name: 'IP摄像头',
// value: 'IP摄像头', // value: 'IP摄像头',
@ -260,10 +272,9 @@ const attributeSelect = ref([
// }, // },
]) ])
const cameraName = ref('') const cameraName = ref('')
const addlinkInput = ref('') const addlinkInput = ref('')
const linkEditActive = ref({}) const linkEditActive: any = ref({})
const openRichTextEditor = () => { const openRichTextEditor = () => {
eventBus.emit('openRichText', props.entityOptions.name, richTextContent.value, (val) => { eventBus.emit('openRichText', props.entityOptions.name, richTextContent.value, (val) => {
@ -278,16 +289,15 @@ const _addLink = () => {
} }
attribute.value.link.content.push(link) attribute.value.link.content.push(link)
addlinkInput.value = '' addlinkInput.value = ''
} } else {
else { document.getElementById('fileInputlink')?.click()
document.getElementById('fileInputlink')?.click();
eventBus.emit('defineClickAddLinkCb', (list) => { eventBus.emit('defineClickAddLinkCb', (list) => {
list.forEach((item) => { list.forEach((item) => {
attribute.value.link.content.push({ attribute.value.link.content.push({
name: "链接", name: '链接',
url: item.previewUrl, url: item.previewUrl
}); })
}); })
}) })
} }
} }
@ -309,12 +319,10 @@ const linkConfirmEdit = (index) => {
const linkCancelEdit = () => { const linkCancelEdit = () => {
linkEditActive.value = {} linkEditActive.value = {}
} }
const cameraSelect = () => { } const cameraSelect = () => {}
const _addRr = () => { } const _addRr = () => {}
const goodsFilter = () => { } const goodsFilter = () => {}
const attributeChange = () => { } const attributeChange = () => {}
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>

View File

@ -1,78 +1,132 @@
<template> <template>
<Dialog ref="baseDialog" title="点标注" left="180px" top="100px" :className="'billboard-object'" <Dialog
:closeCallback="closeCallback"> ref="baseDialog"
title="点标注"
left="180px"
top="100px"
:className="'billboard-object'"
:closeCallback="closeCallback"
>
<template #content> <template #content>
<span class="custom-divider"></span> <span class="custom-divider"></span>
<div class="div-item"> <div class="div-item">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<span class="label" style="flex: unset;">名称</span> <span class="label" style="flex: unset">名称</span>
<input class="input" type="text" v-model="entityOptions.name" @change="changeName"> <input class="input" type="text" v-model="entityOptions.name" @change="changeName" />
</div>
<div class="col">
</div> </div>
<div class="col"></div>
</div> </div>
</div> </div>
<span class="custom-divider"></span> <span class="custom-divider"></span>
<div class="div-item"> <div class="div-item">
<div class="row"> <div class="row">
<div style="width: 46%;"> <div style="width: 46%">
<div class="row"> <div class="row">
<p class="lable-left-line">WGS84坐标</p> <p class="lable-left-line">WGS84坐标</p>
</div> </div>
<div class="row" style="margin-bottom: 5px;"> <div class="row" style="margin-bottom: 5px">
<div class="col"> <div class="col">
<span class="label">经度</span> <span class="label">经度</span>
<input class="input" type="number" title="" min="-180" max="180" v-model="entityOptions.lng" <input
@change="changLng"> class="input"
type="number"
title=""
min="-180"
max="180"
v-model="entityOptions.lng"
@change="changLng"
/>
</div> </div>
</div> </div>
<div class="row" style="margin-bottom: 5px;"> <div class="row" style="margin-bottom: 5px">
<div class="col"> <div class="col">
<span class="label">纬度</span> <span class="label">纬度</span>
<input class="input" type="number" title="" min="-90" max="90" v-model="entityOptions.lat" <input
@change="changLat"> class="input"
type="number"
title=""
min="-90"
max="90"
v-model="entityOptions.lat"
@change="changLat"
/>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<span class="label">海拔高度</span> <span class="label">海拔高度</span>
<div class="input-number input-number-unit-1 alt-box" <div
:class="{ 'disabled': heightMode == 2 || heightMode === 3 }"> class="input-number input-number-unit-1 alt-box"
<input class="input" type="number" title="" min="-9999999" max="999999999" v-model="entityOptions.alt" :class="{ disabled: heightMode == 2 || heightMode === 3 }"
@change="changAlt"> >
<input
class="input"
type="number"
title=""
min="-9999999"
max="999999999"
v-model="entityOptions.alt"
@change="changAlt"
/>
<span class="unit">m</span> <span class="unit">m</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div style="width: 50%;"> <div style="width: 50%">
<div class="row coordinate-select-box"> <div class="row coordinate-select-box">
<div class="lable-left-line">转换坐标选择 <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-select
<el-option v-for="item in epsg_map" :key="item.epsg" :label="item.name" :value="item.epsg"> 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-option>
</el-select> </el-select>
</div> </div>
</div> </div>
<div class="row" style="margin-bottom: 5px;"> <div class="row" style="margin-bottom: 5px">
<div class="col"> <div class="col">
<span class="label">X轴:</span> <span class="label">X轴:</span>
<input style="border: none;background: none;" class="input convert-x" readonly="readonly" v-model="x"> <input
style="border: none; background: none"
class="input convert-x"
readonly
v-model="x"
/>
</div> </div>
</div> </div>
<div class="row" style="margin-bottom: 5px;"> <div class="row" style="margin-bottom: 5px">
<div class="col"> <div class="col">
<span class="label">Y轴:</span> <span class="label">Y轴:</span>
<input style="border: none;background: none;" class="input convert-y" readonly="readonly" v-model="y"> <input
style="border: none; background: none"
class="input convert-y"
readonly
v-model="y"
/>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<span class="label">Z轴:</span> <span class="label">Z轴:</span>
<input style="border: none;background: none;" class="input convert-z" readonly="readonly" v-model="z"> <input
style="border: none; background: none"
class="input convert-z"
readonly
v-model="z"
/>
</div> </div>
</div> </div>
</div> </div>
@ -81,14 +135,21 @@
<span class="custom-divider"></span> <span class="custom-divider"></span>
<div class="div-item"> <div class="div-item">
<div class="row"> <div class="row">
<div class="col" style="flex: 0 0 120px;"> <div class="col" style="flex: 0 0 120px">
<span class="label">视野缩放</span> <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>
<div class="col"> <div class="col">
<span class="label">最近距离</span> <span class="label">最近距离</span>
<div class="input-number input-number-unit-1"> <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="unit">m</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
@ -96,7 +157,14 @@
<div class="col"> <div class="col">
<span class="label">最远距离</span> <span class="label">最远距离</span>
<div class="input-number input-number-unit-1"> <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="unit">m</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
@ -110,18 +178,35 @@
<el-tab-pane label="空间信息" name="2"> <el-tab-pane label="空间信息" name="2">
<div class="row"> <div class="row">
<div class="col height-mode-box"> <div class="col height-mode-box">
<span class="label" style="flex: 0 0 56px;">高度模式</span> <span class="label" style="flex: 0 0 56px">高度模式</span>
<el-select class="input input-select height-mode-scelect" style="width: 155px;margin-left: 20px" <el-select
v-model="heightMode" @change="heightModeChange" placeholder="请选择"> class="input input-select height-mode-scelect"
<el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key"> 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-option>
</el-select> </el-select>
</div> </div>
<div class="col height-box" v-show="heightMode == 0 || heightMode == 1"> <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"> <div class="input-number input-number-unit-1">
<input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height" <input
@change="changHeight"> class="input height"
type="number"
title=""
min="-9999999"
max="999999999"
v-model="height"
@change="changHeight"
/>
<span class="unit">m</span> <span class="unit">m</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
@ -129,92 +214,134 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;" <div
@click="formatChange(1)"> class="YJ-custom-checkbox-box"
<input type="checkbox" class="YJ-custom-checkbox" v-model="format1"> style="display: flex; align-items: center; cursor: pointer"
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">小数格式</span> @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> </div>
<div class="col"> <div class="col">
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;" <div
@click="formatChange(2)"> class="YJ-custom-checkbox-box"
<input type="checkbox" class="YJ-custom-checkbox" v-model="format2"> style="display: flex; align-items: center; cursor: pointer"
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">度分格式</span> @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> </div>
<div class="col"> <div class="col">
<div class="YJ-custom-checkbox-box" style="display: flex;align-items: center;cursor: pointer;" <div
@click="formatChange(3)"> class="YJ-custom-checkbox-box"
<input type="checkbox" class="YJ-custom-checkbox" v-model="format3"> style="display: flex; align-items: center; cursor: pointer"
<span style="margin-left: 10px; margin-bottom: 1px;user-select: none;">度分秒格式</span> @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> </div>
<div class="col"> <div class="col"></div>
</div>
</div> </div>
<div class="row"> <div class="row">
<div style="flex: 1;"> <div style="flex: 1">
<div class="proj-input-box" v-show="format1"> <div class="proj-input-box" v-show="format1">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<span style="flex: 0 0 40px;">经度</span> <span style="flex: 0 0 40px">经度</span>
<input class="input lng" readonly="readonly" :value="entityOptions.lng"> <input class="input lng" readonly :value="entityOptions.lng" />
</div>
<div class="col">
</div> </div>
<div class="col"></div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<span style="flex: 0 0 40px;">纬度</span> <span style="flex: 0 0 40px">纬度</span>
<input class="input lat" readonly="readonly" :value="entityOptions.lat"> <input class="input lat" readonly :value="entityOptions.lat" />
</div>
<div class="col">
</div> </div>
<div class="col"></div>
</div> </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="row">
<div class="col" style="flex-direction: column;"> <div class="col" style="flex-direction: column">
<div class="row" style="margin-bottom: 15px;"> <div class="row" style="margin-bottom: 15px">
<span style="flex: 0 0 40px;">经度</span> <span style="flex: 0 0 40px">经度</span>
<input class="input lng-dm-d" style="flex: 1;" readonly="readonly" :value="lngDmD"> <input class="input lng-dm-d" style="flex: 1" readonly :value="lngDmD" />
<span class="label" style="flex: 0 0 14px;margin: 0 10px;"></span> <span class="label" style="flex: 0 0 14px; margin: 0 10px"></span>
<input class="input lng-dm-m" style="flex: 1;" readonly="readonly" :value="lngDmM"> <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="label" style="flex: 0 0 14px; margin: 0 10px"></span>
<span class="top-line"></span> <span class="top-line"></span>
</div> </div>
<div class="row"> <div class="row">
<span style="flex: 0 0 40px;">纬度</span> <span style="flex: 0 0 40px">纬度</span>
<input class="input lat-dm-d" style="flex: 1;" readonly="readonly" :value="latDmD"> <input class="input lat-dm-d" style="flex: 1" readonly :value="latDmD" />
<span class="label" style="flex: 0 0 14px;margin: 0 10px;"></span> <span class="label" style="flex: 0 0 14px; margin: 0 10px"></span>
<input class="input lat-dm-m" style="flex: 1;" readonly="readonly" :value="latDmM"> <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="label" style="flex: 0 0 14px; margin: 0 10px"></span>
<span class="bottom-line"></span> <span class="bottom-line"></span>
</div> </div>
</div> </div>
</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="row">
<div class="col" style="flex-direction: column;"> <div class="col" style="flex-direction: column">
<div class="row" style="margin-bottom: 15px;"> <div class="row" style="margin-bottom: 15px">
<span style="flex: 0 0 40px;">经度</span> <span style="flex: 0 0 40px">经度</span>
<input class="input lng-dms-d" style="flex: 1;" readonly="readonly" :value="lngDmsD"> <input
<span class="label" style="flex: 0 0 14px;margin: 0 10px;"></span> class="input lng-dms-d"
<input class="input lng-dms-m" style="flex: 1;" readonly="readonly" :value="lngDmsM"> style="flex: 1"
<span class="label" style="flex: 0 0 14px;margin: 0 10px;"></span> readonly
<input class="input lng-dms-s" style="flex: 1;" readonly="readonly" :value="lngDmsS"> :value="lngDmsD"
<span class="label" style="flex: 0 0 14px;margin: 0 10px;"></span> />
<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> <span class="top-line"></span>
</div> </div>
<div class="row"> <div class="row">
<span style="flex: 0 0 40px;">纬度</span> <span style="flex: 0 0 40px">纬度</span>
<input class="input lat-dms-d" style="flex: 1;" readonly="readonly" :value="latDmsD"> <input
<span class="label" style="flex: 0 0 14px;margin: 0 10px;"></span> class="input lat-dms-d"
<input class="input lat-dms-m" style="flex: 1;" readonly="readonly" :value="latDmsM"> style="flex: 1"
<span class="label" style="flex: 0 0 14px;margin: 0 10px;"></span> readonly
<input class="input lat-dms-s" style="flex: 1;" readonly="readonly" :value="latDmsS"> :value="latDmsD"
<span class="label" style="flex: 0 0 14px;margin: 0 10px;"></span> />
<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> <span class="bottom-line"></span>
</div> </div>
</div> </div>
@ -226,28 +353,38 @@
<el-tab-pane label="标注风格" name="3"> <el-tab-pane label="标注风格" name="3">
<div> <div>
<h4>图标设置</h4> <h4>图标设置</h4>
<div class="row" style="margin-bottom: 10px;"> <div class="row" style="margin-bottom: 10px">
<div class="col" style="flex: 0 0 80px;"> <div class="col" style="flex: 0 0 80px">
<span class="label" style="flex: none;">显隐</span> <span class="label" style="flex: none">显隐</span>
<input class="btn-switch" type="checkbox" v-model="entityOptions.billboardShow"> <input
class="btn-switch"
type="checkbox"
v-model="entityOptions.billboardShow"
/>
</div> </div>
<div class="col" style="flex: 0 0 90px;"> <div class="col" style="flex: 0 0 90px">
<span class="label" style="flex: none;">图标</span> <span class="label" style="flex: none">图标</span>
<div class="image-box" @click="clickChangeImage"> <div class="image-box" @click="clickChangeImage">
<img class="image" :src="entityOptions.billboardImage" alt=""> <img class="image" :src="entityOptions.billboardImage" alt="" />
</div> </div>
</div> </div>
<div class="col" style="flex: 0 0 90px;"> <div class="col" style="flex: 0 0 90px">
<span class="label" style="flex: none;">默认图标</span> <span class="label" style="flex: none">默认图标</span>
<div class="image-box" @click="clickChangeDefaultImage"> <div class="image-box" @click="clickChangeDefaultImage">
<img class="image" :src="entityOptions.billboardDefaultImage" alt=""> <img class="image" :src="entityOptions.billboardDefaultImage" alt="" />
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<span class="label">图标倍数</span> <span class="label">图标倍数</span>
<div class="input-number input-number-unit-2"> <div class="input-number input-number-unit-2">
<input class="input" type="number" title="" min="0.1" max="99" <input
v-model="entityOptions.billboardScale"> class="input"
type="number"
title=""
min="0.1"
max="99"
v-model="entityOptions.billboardScale"
/>
<span class="unit"></span> <span class="unit"></span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
@ -257,22 +394,38 @@
<div> <div>
<h4>文字设置</h4> <h4>文字设置</h4>
<div class="row"> <div class="row">
<div class="col" style="flex: 0 0 80px;"> <div class="col" style="flex: 0 0 80px">
<span class="label" style="flex: none;">显隐</span> <span class="label" style="flex: none">显隐</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="col font-select-box"> <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" style="width: 100px;" v-model="entityOptions.labelFontFamily"> <el-select
<el-option v-for="item in fontList" :key="item.key" :label="item.name" :value="item.key"> 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-option>
</el-select> </el-select>
</div> </div>
<div class="col"> <div class="col">
<span class="label">文字大小</span> <span class="label">文字大小</span>
<div class="input-number input-number-unit-2"> <div class="input-number input-number-unit-2">
<input class="input" type="number" title="" min="1" max="99" v-model="entityOptions.labelFontSize" <input
style="width: 70px;"> class="input"
type="number"
title=""
min="1"
max="99"
v-model="entityOptions.labelFontSize"
style="width: 70px"
/>
<span class="unit">px</span> <span class="unit">px</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
@ -289,11 +442,13 @@
</div> </div>
</template> </template>
<template #footer> <template #footer>
<div style="position: absolute; left: 24px; display: flex;"> <div style="position: absolute; left: 24px; display: flex">
<button @click="updateHeight"><svg class="icon-updateheigh"> <button @click="updateHeight">
<use xlink:href="#yj-icon-updateheight"></use> <svg class="icon-updateheigh">
</svg>更新高程</button> <use xlink:href="#yj-icon-updateheight"></use></svg
<button style="margin-left: 10px;" @click="translate">平移</button> >更新高程
</button>
<button style="margin-left: 10px" @click="translate">平移</button>
</div> </div>
<button @click="confirm">确定</button> <button @click="confirm">确定</button>
<button @click="close">关闭</button> <button @click="close">关闭</button>
@ -302,8 +457,8 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue'
import { inject } from "vue"; import { inject } from 'vue'
import { TreeApi } from '@/api/tree' import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue' import Dialog from '@/components/dialog/baseDialog.vue'
import attribute from './attribute.vue' import attribute from './attribute.vue'
@ -312,15 +467,17 @@ import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
const { cusUpdateNode } = useTreeNode() const { cusUpdateNode } = useTreeNode()
const baseDialog = ref(null); const baseDialog: any = ref(null)
const eventBus = inject("bus"); const eventBus: any = inject('bus')
const epsg_map = ref([{ const epsg_map = ref([
"name": "WGS 84 / UTM zone 3N", {
"epsg": "EPSG:32603", name: 'WGS 84 / UTM zone 3N',
"def": "+proj=utm +zone=3 +datum=WGS84 +units=m +no_defs" epsg: 'EPSG:32603',
}]) def: '+proj=utm +zone=3 +datum=WGS84 +units=m +no_defs'
let array = [] }
])
let array: any[] = []
for (const [key, value] of window.earth.proj.epsg_map) { for (const [key, value] of window.earth.proj.epsg_map) {
let item = structuredClone(value) let item = structuredClone(value)
item.name = item.name + `(${item.epsg}})` item.name = item.name + `(${item.epsg}})`
@ -367,10 +524,10 @@ const heightModeData = ref([
} }
]) ])
const activeName = ref('1') const activeName = ref('1')
const entityOptions = ref({}); const entityOptions: any = ref({})
const x = ref(); const x = ref()
const y = ref(); const y = ref()
const z = ref(); const z = ref()
const coordinate = ref('EPSG:4326') const coordinate = ref('EPSG:4326')
const heightMode = ref(0) const heightMode = ref(0)
const labelColorRef = ref(null) const labelColorRef = ref(null)
@ -390,14 +547,14 @@ const open = async (id) => {
baseDialog.value?.open() baseDialog.value?.open()
await nextTick() await nextTick()
let labelColorPicker = new YJColorPicker({ let labelColorPicker = new window.YJColorPicker({
el: labelColorRef.value, el: labelColorRef.value,
size: 'mini', //颜色box类型 size: 'mini', //颜色box类型
alpha: true, //是否开启透明度 alpha: true, //是否开启透明度
defaultColor: entityOptions.value.labelColor, defaultColor: entityOptions.value.labelColor,
disabled: false, //是否禁止打开颜色选择器 disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画 openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => { sure: (color) => {
entityOptions.value.labelColor = color entityOptions.value.labelColor = color
}, //点击确认按钮事件回调 }, //点击确认按钮事件回调
clear: () => { clear: () => {
@ -410,10 +567,9 @@ const closeCallback = () => {
entityOptions.value.originalOptions = structuredClone(originalOptions) entityOptions.value.originalOptions = structuredClone(originalOptions)
that.positionEditing = false that.positionEditing = false
that.reset() that.reset()
eventBus.emit("destroyComponent") eventBus?.emit('destroyComponent')
} }
const changeName = (e) => { const changeName = (e) => {
entityOptions.value.labelText = e.target.value entityOptions.value.labelText = e.target.value
} }
@ -435,7 +591,6 @@ const coordinateChange = () => {
z.value = position[0].z z.value = position[0].z
} }
const heightModeChange = (val) => { const heightModeChange = (val) => {
switch (val) { switch (val) {
case 0: case 0:
@ -445,15 +600,9 @@ const heightModeChange = (val) => {
case 1: case 1:
case '1': case '1':
if (window.earth.viewer.scene.terrainProvider.availability) { if (window.earth.viewer.scene.terrainProvider.availability) {
Cesium.sampleTerrainMostDetailed( window.Cesium.sampleTerrainMostDetailed(window.earth.viewer.scene.terrainProvider, [
window.earth.viewer.scene.terrainProvider, window.Cesium.Cartographic.fromDegrees(entityOptions.value.lng, entityOptions.value.lat)
[ ]).then((position) => {
Cesium.Cartographic.fromDegrees(
entityOptions.value.lng,
entityOptions.value.lat
)
]
).then(position => {
height.value = entityOptions.value.alt - Number(position[0].height.toFixed(2)) height.value = entityOptions.value.alt - Number(position[0].height.toFixed(2))
}) })
} else { } else {
@ -465,16 +614,18 @@ const heightModeChange = (val) => {
break break
case 3: case 3:
case '3': case '3':
let objectsToExclude = [] let objectsToExclude: any[] = []
for (let [key, value] of window.earth.entityMap) { for (let [key, value] of window.earth.entityMap) {
if (value.type === 'RadarScanStereoscopic' && value.entity) { if (value.type === 'RadarScanStereoscopic' && value.entity) {
objectsToExclude.push(value.entity) objectsToExclude.push((value as any).entity)
} }
} }
entityOptions.value.getClampToHeight(entityOptions.value.options.position, objectsToExclude).then(h => { entityOptions.value
height.value = Number(h.toFixed(2)) .getClampToHeight(entityOptions.value.options.position, objectsToExclude)
entityOptions.value.alt = Number(h.toFixed(2)) .then((h) => {
}) height.value = Number(h.toFixed(2))
entityOptions.value.alt = Number(h.toFixed(2))
})
break break
} }
that.heightMode = val that.heightMode = val
@ -496,24 +647,14 @@ const changAlt = () => {
const changHeight = () => { const changHeight = () => {
switch (heightMode.value) { switch (heightMode.value) {
case 0: case 0:
entityOptions.value.alt = Number( entityOptions.value.alt = Number(Number(height.value).toFixed(2))
Number(height.value).toFixed(2)
)
break break
case 1: case 1:
if (window.earth.viewer.scene.terrainProvider.availability) { if (window.earth.viewer.scene.terrainProvider.availability) {
Cesium.sampleTerrainMostDetailed( window.Cesium.sampleTerrainMostDetailed(window.earth.viewer.scene.terrainProvider, [
window.earth.viewer.scene.terrainProvider, window.Cesium.Cartographic.fromDegrees(entityOptions.value.lng, entityOptions.value.lat)
[ ]).then((position) => {
Cesium.Cartographic.fromDegrees( entityOptions.value.alt = Number(height.value) + Number(position[0].height.toFixed(2))
entityOptions.value.lng,
entityOptions.value.lat
)
]
).then(position => {
entityOptions.value.alt =
Number(height.value) +
Number(position[0].height.toFixed(2))
}) })
} else { } else {
entityOptions.value.alt = Number(height.value) entityOptions.value.alt = Number(height.value)
@ -524,7 +665,7 @@ const changHeight = () => {
coordinateChange() coordinateChange()
} }
const handleClick = () => { } const handleClick = () => {}
const formatChange = (val) => { const formatChange = (val) => {
switch (val) { switch (val) {
@ -600,7 +741,6 @@ const translate = () => {
that.openPositionEditing(() => { that.openPositionEditing(() => {
changAlt() changAlt()
}) })
} }
const confirm = () => { const confirm = () => {
originalOptions = structuredClone(that.options) originalOptions = structuredClone(that.options)
@ -608,33 +748,28 @@ const confirm = () => {
let params = structuredClone(that.options) let params = structuredClone(that.options)
delete params.host delete params.host
let params2 = { let params2 = {
"id": params.id, id: params.id,
"sourceName": params.name, sourceName: params.name,
"params": params, params: params,
"isShow": params.show ? 1 : 0, isShow: params.show ? 1 : 0
} }
TreeApi.updateDirectoryInfo(params2) 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 = () => { const close = () => {
baseDialog.value?.close() baseDialog.value?.close()
} }
const clickChangeImage = () => { const clickChangeImage = () => {
eventBus.emit("openImageSelect") eventBus?.emit('openImageSelect')
} }
const clickChangeDefaultImage = () => { const clickChangeDefaultImage = () => {
eventBus.emit("openImageSelect") eventBus?.emit('openImageSelect')
} }
const fontChange = (val) => { const fontChange = (val) => {
entityOptions.value.labelFontFamily = val entityOptions.value.labelFontFamily = val
} }
defineExpose({ defineExpose({
open open
}) })
@ -646,4 +781,4 @@ defineExpose({
pointer-events: none; pointer-events: none;
} }
} }
</style> </style>

View File

@ -1,14 +1,21 @@
<template> <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> <template #content>
<span class="custom-divider"></span> <span class="custom-divider"></span>
<div class="div-item"> <div class="div-item">
<div class="row" style="align-items: flex-start;"> <div class="row" style="align-items: flex-start">
<div class="col"> <div class="col">
<span class="label">名称</span> <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>
<div class="col" style="flex: 0 0 56%;"> <div class="col" style="flex: 0 0 56%">
<div> <div>
<div class="row"> <div class="row">
<div class="col input-select-unit-box"> <div class="col input-select-unit-box">
@ -17,7 +24,7 @@
<el-option label="投影长度" value="1"></el-option> <el-option label="投影长度" value="1"></el-option>
<el-option label="地表长度" value="2"></el-option> <el-option label="地表长度" value="2"></el-option>
</el-select> </el-select>
<input v-model="length" class="input-text" readonly="readonly"> <input v-model="length" class="input-text" readonly />
<el-select v-model="lengthUnit"> <el-select v-model="lengthUnit">
<el-option label="米" value="m"></el-option> <el-option label="米" value="m"></el-option>
<el-option label="千米" value="km"></el-option> <el-option label="千米" value="km"></el-option>
@ -37,22 +44,48 @@
<el-tab-pane label="空间信息" name="2"> <el-tab-pane label="空间信息" name="2">
<div class="row"> <div class="row">
<div class="col height-mode-box"> <div class="col height-mode-box">
<span class="label" style="flex: 0 0 56px;">高度模式</span> <span class="label" style="flex: 0 0 56px">高度模式</span>
<el-select class="input input-select height-mode-scelect" style="width: 155px;margin-left: 20px" <el-select
v-model="heightMode" @change="heightModeChange" placeholder="请选择"> class="input input-select height-mode-scelect"
<el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key"> 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-option>
</el-select> </el-select>
</div> </div>
<div class="col"> <div class="col">
<span class="label">Z值统一增加</span> <span class="label">Z值统一增加</span>
<div class="input-number input-number-unit-1 height-box" :class="{ 'disabled': heightMode == 2 }"> <div
<input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height"> 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="unit">m</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
<button class="confirm height-confirm" style="margin-left: 5px;" @click="heightConfirm" <button
:disabled="heightMode == 2">应用</button> class="confirm height-confirm"
style="margin-left: 5px"
@click="heightConfirm"
:disabled="heightMode == 2"
>
应用
</button>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -69,20 +102,40 @@
<div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i"> <div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
<div class="td">{{ i + 1 }}</div> <div class="td">{{ i + 1 }}</div>
<div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')"> <div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
<input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number" <input
v-model="item.lng" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lng'"> class="input"
<span style="pointer-events: none;" v-else>{{ (item.lng).toFixed(8) }}</span> @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>
<div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')"> <div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
<input class="input" @blur="inputBlurCallBack($event, i, 'lat', 8)" type="number" <input
v-model="item.lat" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lat'"> class="input"
<span style="pointer-events: none;" v-else>{{ (item.lat).toFixed(8) }}</span> @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>
<div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')"> <div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
<input class="input" @blur="inputBlurCallBack($event, i, 'alt', 2)" type="number" <input
v-model="item.alt" min="-9999999" max="999999999" class="input"
v-if="activeTd.index == i && activeTd.name == 'alt'"> @blur="inputBlurCallBack($event, i, 'alt', 2)"
<span style="pointer-events: none;" v-else>{{ (item.alt).toFixed(2) }}</span> 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> </div>
</div> </div>
@ -95,19 +148,35 @@
<span class="label">线条颜色</span> <span class="label">线条颜色</span>
<div class="color" ref="colorRef"></div> <div class="color" ref="colorRef"></div>
</div> </div>
<div class="col" style="flex: 0 0 33%;"> <div class="col" style="flex: 0 0 33%">
<span class="label">线条宽度</span> <span class="label">线条宽度</span>
<div class="input-number input-number-unit-1" style="width: 80px;"> <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"> <input
class="input"
type="number"
title=""
min="1"
max="999"
v-model="entityOptions.lineWidth"
/>
<span class="unit">px</span> <span class="unit">px</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</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> <span class="label">线条形式</span>
<el-select class="input input-select input-select-line-type" style="margin-left: 20px" <el-select
v-model="entityOptions.lineType" @change="lineTypechange"> class="input input-select input-select-line-type"
<el-option v-for="item in lineTypeData" :key="item.key" :label="item.name" :value="item.key"> 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> <i class="yj-custom-icon" :class="item.icon"></i>
{{ item.name }} {{ item.name }}
</el-option> </el-option>
@ -117,18 +186,25 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<span class="label">线段缓冲</span> <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>
<div class="col" style="flex: 0 0 33%;"> <div class="col" style="flex: 0 0 33%">
<span class="label">缓冲宽度</span> <span class="label">缓冲宽度</span>
<div class="input-number input-number-unit-1" style="width: 80px;"> <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" <input
v-model="entityOptions.extendWidth"> class="input"
type="number"
title=""
min="0"
data-min="0.01"
max="999999"
v-model="entityOptions.extendWidth"
/>
<span class="unit">m</span> <span class="unit">m</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</div> </div>
<div class="col" style="flex: 0 0 37%;"> <div class="col" style="flex: 0 0 37%">
<span class="label">缓冲颜色</span> <span class="label">缓冲颜色</span>
<div class="extendColor" ref="extendColorRef"></div> <div class="extendColor" ref="extendColorRef"></div>
</div> </div>
@ -136,23 +212,43 @@
<div class="row" v-show="entityOptions.lineType > 2 && entityOptions.lineType < 13"> <div class="row" v-show="entityOptions.lineType > 2 && entityOptions.lineType < 13">
<div class="col"> <div class="col">
<span class="label">首尾反向</span> <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>
<div class="col" style="flex: 0 0 33%;"> <div class="col" style="flex: 0 0 33%">
<span class="label">流动速率</span> <span class="label">流动速率</span>
<div class="input-number input-number-unit-1" style="width: 80px;"> <div class="input-number input-number-unit-1" style="width: 80px">
<input class="input" type="number" title="" min="0" max="999999" step="1" <input
v-model="entityOptions.speed"> class="input"
type="number"
title=""
min="0"
max="999999"
step="1"
v-model="entityOptions.speed"
/>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</div> </div>
<div class="col" style="flex: 0 0 37%;"> <div class="col" style="flex: 0 0 37%">
<span class="label lineSpace" <span
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5">线条间距</span> class="label lineSpace"
<div class="input-number input-number-unit-1 lineSpace" style="width: 80px;" v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"> >线条间距</span
<input class="input" type="number" title="" min="0" max="4.5" step="0.1" >
v-model="entityOptions.space"> <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="unit"></span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
@ -161,7 +257,7 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<span class="label">首尾相连</span> <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>
</div> </div>
</el-tab-pane> </el-tab-pane>
@ -173,11 +269,13 @@
</div> </div>
</template> </template>
<template #footer> <template #footer>
<div style="position: absolute; left: 24px; display: flex;"> <div style="position: absolute; left: 24px; display: flex">
<button @click="nodeEdit"><svg class="icon-edit"> <button @click="nodeEdit">
<use xlink:href="#yj-icon-edit"></use> <svg class="icon-edit">
</svg>二次编辑</button> <use xlink:href="#yj-icon-edit"></use></svg
<button style="margin-left: 10px;" @click="translate">平移</button> >二次编辑
</button>
<button style="margin-left: 10px" @click="translate">平移</button>
</div> </div>
<button @click="confirm">确定</button> <button @click="confirm">确定</button>
<button @click="close">关闭</button> <button @click="close">关闭</button>
@ -186,8 +284,8 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'; import { ref, getCurrentInstance } from 'vue'
import { inject } from "vue"; import { inject } from 'vue'
import { TreeApi } from '@/api/tree' import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue' import Dialog from '@/components/dialog/baseDialog.vue'
import { initMapData } from '../tree/initMapData' import { initMapData } from '../tree/initMapData'
@ -198,8 +296,8 @@ import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
const { cusUpdateNode } = useTreeNode() const { cusUpdateNode } = useTreeNode()
const baseDialog = ref(null); const baseDialog: any = ref(null)
const eventBus = inject("bus"); const eventBus: any = inject('bus')
const length = ref(0) const length = ref(0)
const lengthUnit = ref('m') const lengthUnit = ref('m')
@ -307,7 +405,7 @@ const activeTd = ref({
index: -1, index: -1,
name: '' name: ''
}) })
const entityOptions = ref({}); const entityOptions: any = ref({})
const linePositions = ref([]) const linePositions = ref([])
const colorRef = ref(null) const colorRef = ref(null)
const extendColorRef = ref(null) const extendColorRef = ref(null)
@ -316,7 +414,6 @@ const heightMode = ref(0)
let originalOptions let originalOptions
let that let that
const open = async (id) => { const open = async (id) => {
that = window.earth.entityMap.get(id) that = window.earth.entityMap.get(id)
originalOptions = structuredClone(that.options) originalOptions = structuredClone(that.options)
@ -324,40 +421,39 @@ const open = async (id) => {
heightMode.value = entityOptions.value.heightMode heightMode.value = entityOptions.value.heightMode
length.value = entityOptions.value.lengthByMeter length.value = entityOptions.value.lengthByMeter
linePositions.value = structuredClone(that.options.positions) linePositions.value = structuredClone(that.options.positions)
that.lengthChangeCallBack = ()=>{ that.lengthChangeCallBack = () => {
if (lengthUnit.value == 'km') { if (lengthUnit.value == 'km') {
length.value = entityOptions.value.lengthByMeter / 1000 length.value = entityOptions.value.lengthByMeter / 1000
} } else {
else { length.value = entityOptions.value.lengthByMeter
length.value = entityOptions.value.lengthByMeter }
}
} }
heightModeChange(heightMode.value) heightModeChange(heightMode.value)
baseDialog.value?.open() baseDialog.value?.open()
await nextTick() await nextTick()
let colorPicker = new YJColorPicker({ let colorPicker = new (window as any).YJColorPicker({
el: colorRef.value, el: colorRef.value,
size: 'mini', //颜色box类型 size: 'mini', //颜色box类型
alpha: true, //是否开启透明度 alpha: true, //是否开启透明度
defaultColor: entityOptions.value.color, defaultColor: entityOptions.value.color,
disabled: false, //是否禁止打开颜色选择器 disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画 openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => { sure: (color) => {
entityOptions.value.color = color entityOptions.value.color = color
}, //点击确认按钮事件回调 }, //点击确认按钮事件回调
clear: () => { clear: () => {
entityOptions.value.color = 'rgba(255,255,255,1)' entityOptions.value.color = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调 } //点击清空按钮事件回调
}) })
let extendColorPicker = new YJColorPicker({ let extendColorPicker = new (window as any).YJColorPicker({
el: extendColorRef.value, el: extendColorRef.value,
size: 'mini', //颜色box类型 size: 'mini', //颜色box类型
alpha: true, //是否开启透明度 alpha: true, //是否开启透明度
defaultColor: entityOptions.value.extendColor, defaultColor: entityOptions.value.extendColor,
disabled: false, //是否禁止打开颜色选择器 disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画 openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => { sure: (color) => {
entityOptions.value.extendColor = color entityOptions.value.extendColor = color
}, //点击确认按钮事件回调 }, //点击确认按钮事件回调
clear: () => { clear: () => {
@ -371,10 +467,15 @@ const heightModeChange = (val) => {
const heightConfirm = () => { const heightConfirm = () => {
that.positionEditing = false that.positionEditing = false
for (let i = 0; i < entityOptions.value.options.positions.length; i++) { 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) => { const inputDblclick = async (event, i, anme) => {
if (heightMode.value == 2) {
return
}
activeTd.value = { activeTd.value = {
index: i, index: i,
name: anme name: anme
@ -394,8 +495,7 @@ const inputBlurCallBack = (event, i, name, digit = 2) => {
} }
} }
const lineTypechange = () => { const lineTypechange = () => {}
}
const nodeEdit = () => { const nodeEdit = () => {
entityOptions.value.positionEditing = false entityOptions.value.positionEditing = false
entityOptions.value.noseToTail = false entityOptions.value.noseToTail = false
@ -405,8 +505,7 @@ const nodeEdit = () => {
entityOptions.value.options.positions = structuredClone(positions) entityOptions.value.options.positions = structuredClone(positions)
if (lengthUnit.value == 'km') { if (lengthUnit.value == 'km') {
length.value = lenByMeter / 1000 length.value = lenByMeter / 1000
} } else {
else {
length.value = lenByMeter length.value = lenByMeter
} }
}) })
@ -416,8 +515,7 @@ const translate = () => {
entityOptions.value.options.positions = structuredClone(that.options.positions) entityOptions.value.options.positions = structuredClone(that.options.positions)
if (lengthUnit.value == 'km') { if (lengthUnit.value == 'km') {
length.value = entityOptions.value.lengthByMeter / 1000 length.value = entityOptions.value.lengthByMeter / 1000
} } else {
else {
length.value = entityOptions.value.lengthByMeter length.value = entityOptions.value.lengthByMeter
} }
}) })
@ -428,7 +526,7 @@ const closeCallback = () => {
that.positionEditing = false that.positionEditing = false
entityOptions.value.closeNodeEdit() entityOptions.value.closeNodeEdit()
entityOptions.value.reset() entityOptions.value.reset()
eventBus.emit("destroyComponent") eventBus.emit('destroyComponent')
} }
const confirm = () => { const confirm = () => {
originalOptions = structuredClone(that.options) originalOptions = structuredClone(that.options)
@ -436,13 +534,13 @@ const confirm = () => {
let params = structuredClone(that.options) let params = structuredClone(that.options)
delete params.host delete params.host
let params2 = { let params2 = {
"id": params.id, id: params.id,
"sourceName": params.name, sourceName: params.name,
"params": params, params: params,
"isShow": params.show ? 1 : 0, isShow: params.show ? 1 : 0
} }
TreeApi.updateDirectoryInfo(params2) 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 = () => { const close = () => {
baseDialog.value?.close() baseDialog.value?.close()
@ -454,14 +552,13 @@ watch(
if (entityOptions.value.lengthByMeter || entityOptions.value.lengthByMeter == 0) { if (entityOptions.value.lengthByMeter || entityOptions.value.lengthByMeter == 0) {
if (lengthUnit.value == 'km') { if (lengthUnit.value == 'km') {
length.value = entityOptions.value.lengthByMeter / 1000 length.value = entityOptions.value.lengthByMeter / 1000
} } else {
else {
length.value = entityOptions.value.lengthByMeter length.value = entityOptions.value.lengthByMeter
} }
} }
}, },
{ immediate: true } { immediate: true }
); )
defineExpose({ defineExpose({
open open
}) })
@ -491,4 +588,4 @@ defineExpose({
} }
} }
} }
</style> </style>

View File

@ -29,15 +29,18 @@ function getFontList() {
return fontData return fontData
} }
function getFontFamily(key) { // @ts-ignore
function getFontFamily(key: any) {
for (let i = 0; i < fontData.length; i++) { for (let i = 0; i < fontData.length; i++) {
if (fontData[i].key == key) { if (fontData[i].key == key) {
return fontData[i].font; return fontData[i].font;
} }
} }
} }
function getFontFamilyName(key) { // @ts-ignore
function getFontFamilyName(key: any) {
for (let i = 0; i < fontData.length; i++) { for (let i = 0; i < fontData.length; i++) {
if (fontData[i].key == key) { if (fontData[i].key == key) {
return fontData[i].name; return fontData[i].name;
@ -45,4 +48,4 @@ function getFontFamilyName(key) {
} }
} }
export { getFontList, getFontFamily, getFontFamilyName } export { getFontList, getFontFamily, getFontFamilyName }

View File

@ -0,0 +1,165 @@
<template>
<Dialog ref="baseDialog" title="贴地文字属性" left="180px" top="100px" className="ground-text"
:closeCallback="closeCallback">
<template #content>
<span class="custom-divider"></span>
<div class="div-item">
<div class="row">
<div class="col">
<span class="label">名称</span>
<textarea v-model="entityOptions.text"></textarea>
</div>
<div class="col">
<span class="label">颜色</span>
<div class="color" ref="colorRef" </div>
</div>
</div>
</div>
<span class="custom-divider"></span>
<div class="div-item">
<div class="row">
<div class="col">
<span class="label">经度</span>
<input class="input" type="number" title="" min="-180" max="180"
v-model="entityOptions.lng">
</div>
<div class="col">
<span class="label">纬度</span>
<input class="input" type="number" title="" min="-90" max="90" v-model="entityOptions.lat">
</div>
</div>
</div>
<span class="custom-divider"></span>
<div class="div-item">
<div class="row">
<div class="col">
<span class="label">旋转角度</span>
<input type="range" max="360" min="0" step="1" v-model="entityOptions.angle">
<div class="input-number input-number-unit"
style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
<input class="input" type="number" title="" min="0" max="360" step="1"
v-model="entityOptions.angle">
<span class="unit">°</span>
<span class="arrow"></span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<span class="label">调整大小</span>
<input type="range" max="100000" min="0" step="0.01" v-model="entityOptions.scale">
<div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
<input class="input" type="number" title="" min="0" max="100000" step="0.01"
v-model="entityOptions.scale">
<span class="arrow"></span>
</div>
</div>
</div>
<div class="row">
<div class="col">
<span class="label">滚动速度</span>
<input type="range" max="100" min="0" step="1" v-model="entityOptions.speed">
<div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
<input class="input" type="number" title="" min="0" max="100" step="1"
v-model="entityOptions.speed">
<span class="arrow"></span>
</div>
</div>
</div>
</div>
<span class="custom-divider"></span>
</template>
<template #footer>
<div style="position: absolute; left: 24px; display: flex;">
<button style="margin-left: 10px;" @click="translate"><svg class="icon-py">
<use xlink:href="#yj-icon-py"></use>
</svg>平移</button>
</div>
<button @click="remove">删除</button>
<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 { initMapData } from '../tree/initMapData'
import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
const { cusUpdateNode } = useTreeNode()
const baseDialog: any = ref(null);
const eventBus: any = inject("bus");
const text = ref("")
eventBus.on("openStandTextAdd", () => {
baseDialog.value?.open()
});
const entityOptions: any = ref({});
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
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)'
} //点击清空按钮事件回调
})
}
const confirm = () => {
originalOptions = structuredClone(that.options)
baseDialog.value?.close()
let params = structuredClone(that.options)
// 删除不必要的属性
delete params.host
delete params.name
let params2 = {
"id": params.id,
"sourceName": params.text,
"params": params,
"isShow": params.show ? 1 : 0,
}
TreeApi.updateDirectoryInfo(params2)
cusUpdateNode({ "id": params.id, "sourceName": params.text, "params": JSON.stringify(params) })
}
const close = () => {
baseDialog.value?.close()
}
const remove = () => {
entityOptions.value.remove()
close()
}
const translate = () => {
entityOptions.value.positionEditing = true
}
const closeCallback = () => {
entityOptions.value.originalOptions = structuredClone(originalOptions)
that.positionEditing = false
that.reset()
eventBus?.emit("destroyComponent")
}
defineExpose({
open
})
</script>
<style scoped lang="scss"></style>

View File

@ -3,7 +3,7 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<span class="label">新增{{ type }}标签风格设置</span> <span class="label">新增{{ type }}标签风格设置</span>
<button style="margin-right: 56px;">初始风格</button> <button style="margin-right: 56px">初始风格</button>
<button>当前风格</button> <button>当前风格</button>
</div> </div>
</div> </div>
@ -11,20 +11,27 @@
<div class="row"></div> <div class="row"></div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<span class="label" style="margin-right: 42px;">标签设置</span> <span class="label" style="margin-right: 42px">标签设置</span>
<span class="label">标签显示</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> </div>
<div class="row"> <div class="row">
<div class="col" style="flex: 0 0 114px;"> <div class="col" style="flex: 0 0 114px">
<span class="label">视野缩放</span> <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>
<div class="col"> <div class="col">
<span class="label">最近距离</span> <span class="label">最近距离</span>
<div class="input-number input-number-unit-1"> <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="unit">m</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
@ -32,7 +39,14 @@
<div class="col"> <div class="col">
<span class="label">最远距离</span> <span class="label">最远距离</span>
<div class="input-number input-number-unit-1"> <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="unit">m</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
@ -46,20 +60,27 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col" style="flex: 0 0 114px;"> <div class="col" style="flex: 0 0 114px">
<span class="label">字体颜色</span> <span class="label">字体颜色</span>
<div class="labelColor" ref="labelColorRef"></div> <div class="labelColor" ref="labelColorRef"></div>
</div> </div>
<div class="col"> <div class="col">
<span class="label">字体大小</span> <span class="label">字体大小</span>
<div class="input-number input-number-unit-2"> <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="unit">px</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</div> </div>
<div class="col font-select-box"> <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-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 v-for="item in fontList" :key="item.key" :label="item.name" :value="item.key">
</el-option> </el-option>
@ -76,8 +97,8 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue'
import { inject } from "vue"; import { inject } from 'vue'
import { getFontList } from './fontSelect' import { getFontList } from './fontSelect'
const props = defineProps({ const props = defineProps({
@ -99,14 +120,14 @@ const fontChange = (val) => {
} }
onMounted(() => { onMounted(() => {
let labelColorPicker = new YJColorPicker({ let labelColorPicker = new (window as any).YJColorPicker({
el: labelColorRef.value, el: labelColorRef.value,
size: 'mini', //颜色box类型 size: 'mini', //颜色box类型
alpha: true, //是否开启透明度 alpha: true, //是否开启透明度
defaultColor: entityOptions.value.labelColor, defaultColor: entityOptions.value.labelColor,
disabled: false, //是否禁止打开颜色选择器 disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画 openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => { sure: (color) => {
entityOptions.value.labelColor = color entityOptions.value.labelColor = color
}, //点击确认按钮事件回调 }, //点击确认按钮事件回调
clear: () => { clear: () => {
@ -116,4 +137,4 @@ onMounted(() => {
}) })
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>

View File

@ -1,20 +1,24 @@
<template> <template>
<Dialog ref="baseDialog" title="属性" left="180px" top="100px" :closeCallback="closeCallback"> <Dialog ref="baseDialog" :title="title+'属性'" left="180px" top="100px" className="polygon" :closeCallback="closeCallback">
<template #content> <template #content>
<span class="custom-divider"></span> <span class="custom-divider"></span>
<div class="div-item"> <div class="div-item">
<div class="row" style="align-items: flex-start;"> <div class="row" style="align-items: flex-start;">
<div class="col"> <div class="col">
<span class="label">名称</span> <span class="label">名称</span>
<input class="input" maxlength="40" type="text" v-model="options.name"> <input class="input" maxlength="40" type="text" v-model="entityOptions.name">
</div> </div>
<div class="col" style="flex: 0 0 60%;"> <div class="col" style="flex: 0 0 60%;">
<div class="row"> <div class="row">
<div class="col input-select-unit-box"> <div class="col input-select-unit-box">
<span class="label" style="margin-right: 0px;">投影面积:</span> <span class="label" style="margin-right: 0px;">投影面积:</span>
<input class="input input-text" readonly="readonly" type="text"> <input class="input input-text" readonly type="text" v-model="area">
<div class="input-select-unit"></div> <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>
@ -22,24 +26,29 @@
</div> </div>
<div class="div-item"> <div class="div-item">
<div class="row"> <div class="row">
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tabs v-model="activeName">
<el-tab-pane label="属性信息" name="1"> <el-tab-pane label="属性信息" name="1">
<attribute></attribute> <attribute :entityOptions="entityOptions"></attribute>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="空间信息" name="2"> <el-tab-pane label="空间信息" name="2">
<div class="row"> <div class="row">
<div class="col height-mode-box"> <div class="col height-mode-box">
<span class="label" style="flex: 0 0 56px;">高度模式</span> <span class="label" style="flex: 0 0 56px;">高度模式</span>
<div class="height-mode"></div> <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>
<div class="col"> <div class="col">
<span class="label">Z值统一增加</span> <span class="label">Z值统一增加</span>
<div class="input-number input-number-unit-1 height-box"> <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"> <input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height">
<span class="unit">m</span> <span class="unit">m</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
<button class="confirm height-confirm" style="margin-left: 5px;">确认</button> <button class="confirm height-confirm" style="margin-left: 5px;" @click="heightConfirm"
:disabled="heightMode == 2">应用</button>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -53,6 +62,25 @@
</div> </div>
</div> </div>
<div class="table-body"> <div class="table-body">
<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>
</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>
</div>
<div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
<input class="input" @blur="inputBlurCallBack($event, i, 'alt', 2)" type="number"
v-model="entityOptions.height" min="-9999999" max="999999999"
v-if="activeTd.index == i && activeTd.name == 'alt'">
<span style="pointer-events: none;" v-else>{{ (entityOptions.height).toFixed(2) }}</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -70,21 +98,32 @@
<div class="col"> <div class="col">
<span class="label">描边宽度</span> <span class="label">描边宽度</span>
<div class="input-number input-number-unit-2"> <div class="input-number input-number-unit-2">
<input class="input" type="number" title="" min="0" max="99" @model="lineWidth"> <input class="input" type="number" title="" min="0" max="99" v-model="entityOptions.lineWidth">
<span class="unit">px</span> <span class="unit">px</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</div> </div>
</div> </div>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="标签风格" name="5">角色管理</el-tab-pane> <el-tab-pane label="标签风格" name="4">
<labelStyle :type="title" :entityOptions="entityOptions"></labelStyle>
</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</div> </div>
<span class="custom-divider"></span> <span class="custom-divider"></span>
</template> </template>
<template #footer> <template #footer>
<button>确定</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>
</template> </template>
</Dialog> </Dialog>
</template> </template>
@ -92,12 +131,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { inject } from "vue"; import { inject } from "vue";
import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue' import Dialog from '@/components/dialog/baseDialog.vue'
import attribute from './attribute.vue' import attribute from './attribute.vue'
import labelStyle from './labelStyle.vue'
import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
const activeName = ref('1') const { cusUpdateNode } = useTreeNode()
const baseDialog = ref(null);
const eventBus = inject("bus"); const title = ref('面')
const baseDialog: any = ref(null);
const eventBus: any = inject("bus");
const options = ref({}); const options = ref({});
const colorRef = ref(null) const colorRef = ref(null)
const lineColorRef = ref(null) const lineColorRef = ref(null)
@ -105,110 +149,195 @@ eventBus.on("openPolygonEdit", () => {
baseDialog.value?.open() baseDialog.value?.open()
}); });
const lineWidth = ref('') 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 open = async (id) => { const activeName = ref('1')
let that = window.earth.entityMap.get(id) const activeTd = ref({
options.value = structuredClone(that.options) index: -1,
name: ''
})
const positions = ref([])
const heightMode = ref(0)
const entityOptions: any = ref({});
let originalOptions: any
let that: any
const open = async (id: any, type: any) => {
if(type && type === 'rectangle') {
title.value = '矩形'
}
else if(type && type === 'rendezvous') {
title.value = '集结地'
}
that = window.earth.entityMap.get(id)
originalOptions = structuredClone(that.options)
entityOptions.value = that
heightMode.value = entityOptions.value.heightMode
area.value = entityOptions.value.areaByMeter
positions.value = structuredClone(that.options.positions)
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() baseDialog.value?.open()
await nextTick() await nextTick()
let colorPicker = new YJColorPicker({ let colorPicker = new window.YJColorPicker({
el: colorRef.value, el: colorRef.value,
size: 'mini', //颜色box类型 size: 'mini', //颜色box类型
alpha: true, //是否开启透明度 alpha: true, //是否开启透明度
defaultColor: options.value.color, defaultColor: entityOptions.value.color,
disabled: false, //是否禁止打开颜色选择器 disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画 openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => { sure: color => {
options.value.color = color entityOptions.value.color = color
}, //点击确认按钮事件回调 }, //点击确认按钮事件回调
clear: () => { clear: () => {
options.value.color = 'rgba(255,255,255,1)' entityOptions.value.color = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调 } //点击清空按钮事件回调
}) })
let linecolorPicker = new YJColorPicker({ let linecolorPicker = new window.YJColorPicker({
el: lineColorRef.value, el: lineColorRef.value,
size: 'mini', //颜色box类型 size: 'mini', //颜色box类型
alpha: true, //是否开启透明度 alpha: true, //是否开启透明度
defaultColor: options.value.lineColor, defaultColor: entityOptions.value.lineColor,
disabled: false, //是否禁止打开颜色选择器 disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画 openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => { sure: color => {
options.value.lineColor = color entityOptions.value.lineColor = color
}, //点击确认按钮事件回调 }, //点击确认按钮事件回调
clear: () => { clear: () => {
options.value.lineColor = 'rgba(255,255,255,1)' entityOptions.value.lineColor = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调 } //点击清空按钮事件回调
}) })
let labelColorPicker = new YJColorPicker({
el: contentElm.getElementsByClassName('labelColor')[0],
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度
defaultColor: this.labelColor,
disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => {
this.labelColor = color
}, //点击确认按钮事件回调
clear: () => {
this.labelColor = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调
})
let lineColorPicker = new YJColorPicker({
el: contentElm.getElementsByClassName('labelLineColor')[0],
size: 'mini', //颜色box类型
alpha: true, //是否开启透明度
defaultColor: this.labelLineColor,
disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => {
this.labelLineColor = color
}, //点击确认按钮事件回调
clear: () => {
this.labelLineColor = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调
})
let labelBackgroundColorStartPicker = new YJColorPicker({
el: contentElm.getElementsByClassName('labelBackgroundColorStart')[0],
size: 'mini',
alpha: true,
defaultColor: this.labelBackgroundColorStart,
disabled: false,
openPickerAni: 'opacity',
sure: color => {
this.labelBackgroundColorStart = color
},
clear: () => {
this.labelBackgroundColorStart = 'rgba(255,255,255,1)'
}
})
let labelBackgroundColorEndPicker = new YJColorPicker({
el: contentElm.getElementsByClassName('labelBackgroundColorEnd')[0],
size: 'mini',
alpha: true,
defaultColor: this.labelBackgroundColorEnd,
disabled: false,
openPickerAni: 'opacity',
sure: color => {
this.labelBackgroundColorEnd = color
},
clear: () => {
this.labelBackgroundColorEnd = 'rgba(255,255,255,1)'
}
})
} }
const handleClick = () => { } 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.positions = structuredClone(that.options.positions)
})
}
const closeCallback = () => { const closeCallback = () => {
console.log('closeCallback'); entityOptions.value.originalOptions = structuredClone(originalOptions)
that.positionEditing = false
entityOptions.value.closeNodeEdit()
entityOptions.value.reset()
eventBus.emit("destroyComponent")
} }
const nodeEdit = () => {
that.nodeEdit((e, positions, areaByMeter) => {
console.log('positions', positions)
entityOptions.value.options.positions = structuredClone(positions)
})
}
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({ defineExpose({
open open
}) })
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>

View File

@ -1,14 +1,21 @@
<template> <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> <template #content>
<span class="custom-divider"></span> <span class="custom-divider"></span>
<div class="div-item"> <div class="div-item">
<div class="row" style="align-items: flex-start;"> <div class="row" style="align-items: flex-start">
<div class="col"> <div class="col">
<span class="label">名称</span> <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>
<div class="col" style="flex: 0 0 56%;"> <div class="col" style="flex: 0 0 56%">
<div> <div>
<div class="row"> <div class="row">
<div class="col input-select-unit-box"> <div class="col input-select-unit-box">
@ -17,7 +24,7 @@
<el-option label="投影长度" :value="1"></el-option> <el-option label="投影长度" :value="1"></el-option>
<el-option label="地表长度" :value="2"></el-option> <el-option label="地表长度" :value="2"></el-option>
</el-select> </el-select>
<input v-model="length" class="input-text" readonly="readonly"> <input v-model="length" class="input-text" readonly />
<el-select v-model="lengthUnit"> <el-select v-model="lengthUnit">
<el-option label="米" value="m"></el-option> <el-option label="米" value="m"></el-option>
<el-option label="千米" value="km"></el-option> <el-option label="千米" value="km"></el-option>
@ -37,22 +44,48 @@
<el-tab-pane label="空间信息" name="2"> <el-tab-pane label="空间信息" name="2">
<div class="row"> <div class="row">
<div class="col height-mode-box"> <div class="col height-mode-box">
<span class="label" style="flex: 0 0 56px;">高度模式</span> <span class="label" style="flex: 0 0 56px">高度模式</span>
<el-select class="input input-select height-mode-scelect" style="width: 155px;margin-left: 20px" <el-select
v-model="heightMode" @change="heightModeChange" placeholder="请选择"> class="input input-select height-mode-scelect"
<el-option v-for="item in heightModeData" :key="item.key" :label="item.name" :value="item.key"> 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-option>
</el-select> </el-select>
</div> </div>
<div class="col"> <div class="col">
<span class="label">Z值统一增加</span> <span class="label">Z值统一增加</span>
<div class="input-number input-number-unit-1 height-box" :class="{ 'disabled': heightMode == 2 }"> <div
<input class="input height" type="number" title="" min="-9999999" max="999999999" v-model="height"> 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="unit">m</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
<button class="confirm height-confirm" style="margin-left: 5px;" @click="heightConfirm" <button
:disabled="heightMode == 2">应用</button> class="confirm height-confirm"
style="margin-left: 5px"
@click="heightConfirm"
:disabled="heightMode == 2"
>
应用
</button>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@ -69,20 +102,40 @@
<div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i"> <div class="tr" v-for="(item, i) in entityOptions.options.positions" :key="i">
<div class="td">{{ i + 1 }}</div> <div class="td">{{ i + 1 }}</div>
<div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')"> <div class="td lng align-center" @dblclick="inputDblclick($event, i, 'lng')">
<input class="input" @blur="inputBlurCallBack($event, i, 'lng', 8)" type="number" <input
v-model="item.lng" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lng'"> class="input"
<span style="pointer-events: none;" v-else>{{ (item.lng).toFixed(8) }}</span> @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>
<div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')"> <div class="td lat align-center" @dblclick="inputDblclick($event, i, 'lat')">
<input class="input" @blur="inputBlurCallBack($event, i, 'lat', 8)" type="number" <input
v-model="item.lat" min="-180" max="180" v-if="activeTd.index == i && activeTd.name == 'lat'"> class="input"
<span style="pointer-events: none;" v-else>{{ (item.lat).toFixed(8) }}</span> @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>
<div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')"> <div class="td alt align-center" @dblclick="inputDblclick($event, i, 'alt')">
<input class="input" @blur="inputBlurCallBack($event, i, 'alt', 2)" type="number" <input
v-model="item.alt" min="-9999999" max="999999999" class="input"
v-if="activeTd.index == i && activeTd.name == 'alt'"> @blur="inputBlurCallBack($event, i, 'alt', 2)"
<span style="pointer-events: none;" v-else>{{ (item.alt).toFixed(2) }}</span> 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> </div>
</div> </div>
@ -95,19 +148,35 @@
<span class="label">线条颜色</span> <span class="label">线条颜色</span>
<div class="color" ref="colorRef"></div> <div class="color" ref="colorRef"></div>
</div> </div>
<div class="col" style="flex: 0 0 33%;"> <div class="col" style="flex: 0 0 33%">
<span class="label">线条宽度</span> <span class="label">线条宽度</span>
<div class="input-number input-number-unit-1" style="width: 80px;"> <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"> <input
class="input"
type="number"
title=""
min="1"
max="999"
v-model="entityOptions.lineWidth"
/>
<span class="unit">px</span> <span class="unit">px</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</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> <span class="label">线条形式</span>
<el-select class="input input-select input-select-line-type" style="margin-left: 20px" <el-select
v-model="entityOptions.lineType" @change="lineTypechange"> class="input input-select input-select-line-type"
<el-option v-for="item in lineTypeData" :key="item.key" :label="item.name" :value="item.key"> 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> <i class="yj-custom-icon" :class="item.icon"></i>
{{ item.name }} {{ item.name }}
</el-option> </el-option>
@ -117,30 +186,36 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<span class="label">首尾相连</span> <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>
<div class="col" style="flex: 0 0 33%;"> <div class="col" style="flex: 0 0 33%">
<span class="label">线段圆滑</span> <span class="label">线段圆滑</span>
<input class="btn-switch" type="checkbox" v-model="entityOptions.smooth"> <input class="btn-switch" type="checkbox" v-model="entityOptions.smooth" />
</div>
<div class="col" style="flex: 0 0 37%;">
</div> </div>
<div class="col" style="flex: 0 0 37%"></div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<span class="label">线段缓冲</span> <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>
<div class="col" style="flex: 0 0 33%;"> <div class="col" style="flex: 0 0 33%">
<span class="label">缓冲宽度</span> <span class="label">缓冲宽度</span>
<div class="input-number input-number-unit-1" style="width: 80px;"> <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" <input
v-model="entityOptions.extendWidth"> class="input"
type="number"
title=""
min="0"
data-min="0.01"
max="999999"
v-model="entityOptions.extendWidth"
/>
<span class="unit">m</span> <span class="unit">m</span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</div> </div>
<div class="col" style="flex: 0 0 37%;"> <div class="col" style="flex: 0 0 37%">
<span class="label">缓冲颜色</span> <span class="label">缓冲颜色</span>
<div class="extendColor" ref="extendColorRef"></div> <div class="extendColor" ref="extendColorRef"></div>
</div> </div>
@ -148,23 +223,43 @@
<div class="row" v-show="entityOptions.lineType > 2 && entityOptions.lineType < 13"> <div class="row" v-show="entityOptions.lineType > 2 && entityOptions.lineType < 13">
<div class="col"> <div class="col">
<span class="label">首尾反向</span> <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>
<div class="col" style="flex: 0 0 33%;"> <div class="col" style="flex: 0 0 33%">
<span class="label">流动速率</span> <span class="label">流动速率</span>
<div class="input-number input-number-unit-1" style="width: 80px;"> <div class="input-number input-number-unit-1" style="width: 80px">
<input class="input" type="number" title="" min="0" max="999999" step="1" <input
v-model="entityOptions.speed"> class="input"
type="number"
title=""
min="0"
max="999999"
step="1"
v-model="entityOptions.speed"
/>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
</div> </div>
<div class="col" style="flex: 0 0 37%;"> <div class="col" style="flex: 0 0 37%">
<span class="label lineSpace" <span
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5">线条间距</span> class="label lineSpace"
<div class="input-number input-number-unit-1 lineSpace" style="width: 80px;" v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"
v-show="entityOptions.lineType > 2 && entityOptions.lineType >= 5"> >线条间距</span
<input class="input" type="number" title="" min="0" max="4.5" step="0.1" >
v-model="entityOptions.space"> <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="unit"></span>
<span class="arrow"></span> <span class="arrow"></span>
</div> </div>
@ -179,11 +274,17 @@
</div> </div>
</template> </template>
<template #footer> <template #footer>
<div style="position: absolute; left: 24px; display: flex;"> <div style="position: absolute; left: 24px; display: flex">
<button @click="nodeEdit"><svg class="icon-edit"> <button @click="nodeEdit">
<use xlink:href="#yj-icon-edit"></use> <svg class="icon-edit">
</svg>二次编辑</button> <use xlink:href="#yj-icon-edit"></use></svg
<button style="margin-left: 10px;" @click="translate">平移</button> >二次编辑
</button>
<button style="margin-left: 10px" @click="translate">
<svg class="icon-py">
<use xlink:href="#yj-icon-py"></use></svg
>平移
</button>
</div> </div>
<button @click="confirm">确定</button> <button @click="confirm">确定</button>
<button @click="close">关闭</button> <button @click="close">关闭</button>
@ -192,24 +293,21 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'; import { ref, getCurrentInstance } from 'vue'
import { inject } from "vue"; import { inject } from 'vue'
import { TreeApi } from '@/api/tree' import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue' import Dialog from '@/components/dialog/baseDialog.vue'
import { initMapData } from '../tree/initMapData'
import { getFontList } from './fontSelect'
import attribute from './attribute.vue' import attribute from './attribute.vue'
import labelStyle from './labelStyle.vue' import labelStyle from './labelStyle.vue'
import { useTreeNode } from '@/views/components/tree/hooks/treeNode' import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
const { cusUpdateNode } = useTreeNode() const { cusUpdateNode } = useTreeNode()
const baseDialog = ref(null); const baseDialog: any = ref(null)
const eventBus = inject("bus"); const eventBus: any = inject('bus')
const length = ref(0) const length = ref(0)
const lengthUnit = ref('m') const lengthUnit = ref('m')
const fontList = ref(getFontList())
const height = ref(10) const height = ref(10)
const heightModeData = ref([ const heightModeData = ref([
{ {
@ -313,57 +411,55 @@ const activeTd = ref({
index: -1, index: -1,
name: '' name: ''
}) })
const entityOptions = ref({}); const entityOptions: any = ref({})
const linePositions = ref([]) const linePositions = ref([])
const colorRef = ref(null) const colorRef = ref(null)
const extendColorRef = ref(null) const extendColorRef = ref(null)
const heightMode = ref(0) const heightMode = ref(0)
let originalOptions let originalOptions: any
let that let that: any
const open = async (id: any) => {
const open = async (id) => {
that = window.earth.entityMap.get(id) that = window.earth.entityMap.get(id)
originalOptions = structuredClone(that.options) originalOptions = structuredClone(that.options)
entityOptions.value = that entityOptions.value = that
heightMode.value = entityOptions.value.heightMode heightMode.value = entityOptions.value.heightMode
length.value = entityOptions.value.lengthByMeter length.value = entityOptions.value.lengthByMeter
linePositions.value = structuredClone(that.options.positions) linePositions.value = structuredClone(that.options.positions)
that.lengthChangeCallBack = ()=>{ that.lengthChangeCallBack = () => {
if (lengthUnit.value == 'km') { if (lengthUnit.value == 'km') {
length.value = entityOptions.value.lengthByMeter / 1000 length.value = entityOptions.value.lengthByMeter / 1000
} } else {
else { length.value = entityOptions.value.lengthByMeter
length.value = entityOptions.value.lengthByMeter }
}
} }
heightModeChange(heightMode.value) heightModeChange(heightMode.value)
baseDialog.value?.open() baseDialog.value?.open()
await nextTick() await nextTick()
let colorPicker = new YJColorPicker({ let colorPicker = new (window as any).YJColorPicker({
el: colorRef.value, el: colorRef.value,
size: 'mini', //颜色box类型 size: 'mini', //颜色box类型
alpha: true, //是否开启透明度 alpha: true, //是否开启透明度
defaultColor: entityOptions.value.color, defaultColor: entityOptions.value.color,
disabled: false, //是否禁止打开颜色选择器 disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画 openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => { sure: (color) => {
entityOptions.value.color = color entityOptions.value.color = color
}, //点击确认按钮事件回调 }, //点击确认按钮事件回调
clear: () => { clear: () => {
entityOptions.value.color = 'rgba(255,255,255,1)' entityOptions.value.color = 'rgba(255,255,255,1)'
} //点击清空按钮事件回调 } //点击清空按钮事件回调
}) })
let extendColorPicker = new YJColorPicker({ let extendColorPicker = new (window as any).YJColorPicker({
el: extendColorRef.value, el: extendColorRef.value,
size: 'mini', //颜色box类型 size: 'mini', //颜色box类型
alpha: true, //是否开启透明度 alpha: true, //是否开启透明度
defaultColor: entityOptions.value.extendColor, defaultColor: entityOptions.value.extendColor,
disabled: false, //是否禁止打开颜色选择器 disabled: false, //是否禁止打开颜色选择器
openPickerAni: 'opacity', //打开颜色选择器动画 openPickerAni: 'opacity', //打开颜色选择器动画
sure: color => { sure: (color) => {
entityOptions.value.extendColor = color entityOptions.value.extendColor = color
}, //点击确认按钮事件回调 }, //点击确认按钮事件回调
clear: () => { clear: () => {
@ -377,11 +473,16 @@ const heightModeChange = (val) => {
const heightConfirm = () => { const heightConfirm = () => {
that.positionEditing = false that.positionEditing = false
for (let i = 0; i < entityOptions.value.options.positions.length; i++) { 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 that.smooth = that.smooth
} }
const inputDblclick = async (event, i, anme) => { const inputDblclick = async (event, i, anme) => {
if (heightMode.value == 2) {
return
}
activeTd.value = { activeTd.value = {
index: i, index: i,
name: anme name: anme
@ -401,8 +502,7 @@ const inputBlurCallBack = (event, i, name, digit = 2) => {
} }
} }
const lineTypechange = () => { const lineTypechange = () => {}
}
const nodeEdit = () => { const nodeEdit = () => {
entityOptions.value.positionEditing = false entityOptions.value.positionEditing = false
entityOptions.value.noseToTail = false entityOptions.value.noseToTail = false
@ -412,8 +512,7 @@ const nodeEdit = () => {
entityOptions.value.options.positions = structuredClone(positions) entityOptions.value.options.positions = structuredClone(positions)
if (lengthUnit.value == 'km') { if (lengthUnit.value == 'km') {
length.value = lenByMeter / 1000 length.value = lenByMeter / 1000
} } else {
else {
length.value = lenByMeter length.value = lenByMeter
} }
}) })
@ -423,8 +522,7 @@ const translate = () => {
entityOptions.value.options.positions = structuredClone(that.options.positions) entityOptions.value.options.positions = structuredClone(that.options.positions)
if (lengthUnit.value == 'km') { if (lengthUnit.value == 'km') {
length.value = entityOptions.value.lengthByMeter / 1000 length.value = entityOptions.value.lengthByMeter / 1000
} } else {
else {
length.value = entityOptions.value.lengthByMeter length.value = entityOptions.value.lengthByMeter
} }
}) })
@ -435,7 +533,7 @@ const closeCallback = () => {
that.positionEditing = false that.positionEditing = false
entityOptions.value.closeNodeEdit() entityOptions.value.closeNodeEdit()
entityOptions.value.reset() entityOptions.value.reset()
eventBus.emit("destroyComponent") eventBus.emit('destroyComponent')
} }
const confirm = () => { const confirm = () => {
originalOptions = structuredClone(that.options) originalOptions = structuredClone(that.options)
@ -443,13 +541,13 @@ const confirm = () => {
let params = structuredClone(that.options) let params = structuredClone(that.options)
delete params.host delete params.host
let params2 = { let params2 = {
"id": params.id, id: params.id,
"sourceName": params.name, sourceName: params.name,
"params": params, params: params,
"isShow": params.show ? 1 : 0, isShow: params.show ? 1 : 0
} }
TreeApi.updateDirectoryInfo(params2) 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 = () => { const close = () => {
baseDialog.value?.close() baseDialog.value?.close()
@ -461,14 +559,13 @@ watch(
if (entityOptions.value.lengthByMeter || entityOptions.value.lengthByMeter == 0) { if (entityOptions.value.lengthByMeter || entityOptions.value.lengthByMeter == 0) {
if (lengthUnit.value == 'km') { if (lengthUnit.value == 'km') {
length.value = entityOptions.value.lengthByMeter / 1000 length.value = entityOptions.value.lengthByMeter / 1000
} } else {
else {
length.value = entityOptions.value.lengthByMeter length.value = entityOptions.value.lengthByMeter
} }
} }
}, },
{ immediate: true } { immediate: true }
); )
defineExpose({ defineExpose({
open open
}) })
@ -498,4 +595,4 @@ defineExpose({
} }
} }
} }
</style> </style>

View File

@ -10,7 +10,7 @@
<div ref="editorContainer" id="editor-container"></div> <div ref="editorContainer" id="editor-container"></div>
<div class="richText-footer"> <div class="richText-footer">
<button class="primary" @click="confirm">确认</button> <button class="primary" @click="confirm">确认</button>
<button class="cancel">取消</button> <button class="cancel" @click="close">取消</button>
</div> </div>
</div> </div>
</div> </div>
@ -26,8 +26,8 @@ const props = defineProps({
const host = window.location.host const host = window.location.host
const visible = ref(false) const visible = ref(false)
const baseDialog = ref(null); const baseDialog:any = ref(null);
const eventBus = inject("bus"); const eventBus:any = inject("bus");
const toolbarContainer = ref() const toolbarContainer = ref()
const editorContainer = ref() const editorContainer = ref()
@ -50,7 +50,7 @@ const open = (t = '', content = '') => {
title.value = t title.value = t
visible.value = true visible.value = true
nextTick(() => { nextTick(() => {
const { createEditor, createToolbar } = window.wangEditor const { createEditor, createToolbar } = (window as any).wangEditor
const editorConfig = { const editorConfig = {
placeholder: '请输入正文...', placeholder: '请输入正文...',
MENU_CONF: { MENU_CONF: {
@ -185,4 +185,4 @@ eventBus.on("openRichText", (t = '', content = '', confirmCallBack) => {
color: #000; color: #000;
} }
} }
</style> </style>

View File

@ -1,10 +1,44 @@
<template> <template>
<Dialog ref="baseDialog" title="贴地文字" left="180px" top="100px"> <Dialog ref="baseDialog" title="立体t文字属性" left="180px" top="100px" className="ground-text"
:closeCallback="closeCallback">
<template #content> <template #content>
<textarea style="height: 76px; width: 270px;"></textarea> <span class="custom-divider"></span>
<div class="div-item">
<div class="row">
<div class="col">
<span class="label">名称</span>
<textarea v-model="entityOptions.text"></textarea>
</div>
<div class="col">
<span class="label">颜色</span>
<div class="color" ref="colorRef" </div>
</div>
</div>
</div>
<span class="custom-divider"></span>
<div class="div-item">
<div class="row">
<div class="col">
<span class="label">滚动速度</span>
<input type="range" max="100" min="0" step="1" v-model="entityOptions.speed">
<div class="input-number" style="width: 100px;flex: 0 0 100px;margin-left: 10px;">
<input class="input" type="number" title="" min="0" max="100" step="1" v-model="entityOptions.speed">
<span class="arrow"></span>
</div>
</div>
</div>
</div>
<span class="custom-divider"></span>
</template> </template>
<template #footer> <template #footer>
<button>确定</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>
</div>
<button @click="remove">删除</button>
<button @click="confirm">确定</button>
<button @click="close">关闭</button>
</template> </template>
</Dialog> </Dialog>
</template> </template>
@ -12,13 +46,79 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { inject } from "vue"; import { inject } from "vue";
import { TreeApi } from '@/api/tree'
import Dialog from '@/components/dialog/baseDialog.vue' import Dialog from '@/components/dialog/baseDialog.vue'
import { useTreeNode } from '@/views/components/tree/hooks/treeNode'
const { cusUpdateNode } = useTreeNode()
const baseDialog = ref(null); const baseDialog: any = ref(null);
const eventBus = inject("bus"); const eventBus: any = inject("bus");
eventBus.on("openDialog", () => { eventBus.on("openStandTextAdd", () => {
baseDialog.value?.open() baseDialog.value?.open()
}); });
const entityOptions: any = ref({});
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
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)'
} //点击清空按钮事件回调
})
}
const confirm = () => {
originalOptions = structuredClone(that.options)
baseDialog.value?.close()
let params = structuredClone(that.options)
// 删除不必要的属性
delete params.host
delete params.name
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()
}
const remove = () => {
that.remove()
close()
}
const nodeEdit = () => {
that.nodeEdit()
}
const closeCallback = () => {
entityOptions.value.originalOptions = structuredClone(originalOptions)
that.positionEditing = false
that.reset()
eventBus?.emit("destroyComponent")
}
defineExpose({
open
})
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>

View File

@ -11,26 +11,26 @@ export const useRightOperate = () => {
$changeComponentPop('.adddirectoryBox', true) $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) => { const editNode = (eventBus) => {
let selectNodes = getSelectedNodes(window.treeObj); let selectNodes = getSelectedNodes(window.treeObj);
if(selectNodes && selectNodes[selectNodes.length-1]) { if (selectNodes && selectNodes[selectNodes.length - 1]) {
let params = JSON.parse(selectNodes[selectNodes.length-1].params) console.log('------------------',selectNodes[selectNodes.length - 1].params)
console.log('params', params) let params = JSON.parse(selectNodes[selectNodes.length - 1].params)
eventBus.emit("openDialog", selectNodes[selectNodes.length-1].sourceType, params.id); eventBus.emit("openDialog", selectNodes[selectNodes.length - 1].sourceType, params.id);
} }
} }
//删除 //删除
@ -62,18 +62,25 @@ export const useRightOperate = () => {
}) })
} }
//添加BIM //添加BIM
const addBIM = () => {} const addBIM = () => { }
//重置透视 //重置透视
const resetPerspective = () => {} const resetPerspective = () => { }
const pressModel = () => {} const pressModel = () => { }
//设置视图 //设置视图
const setView = () => { const setView = () => {
let selectNodes = getSelectedNodes(window.treeObj); let selectNodes = getSelectedNodes(window.treeObj);
if(selectNodes && selectNodes[selectNodes.length-1]) { if (selectNodes && selectNodes[selectNodes.length - 1]) {
let node = selectNodes[selectNodes.length-1] let node = selectNodes[selectNodes.length - 1]
let params = JSON.parse(node.params) 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) let entityObject = window.earth.entityMap.get(params.id)
entityObject.setCustomView() entityObject.setCustomView()
params.customView = entityObject.customView params.customView = entityObject.customView
@ -84,7 +91,7 @@ export const useRightOperate = () => {
"parentId": node.parentId, "parentId": node.parentId,
"treeIndex": node.treeIndex, "treeIndex": node.treeIndex,
"params": params, "params": params,
"isShow": node.isShow ? 1 : 0, "isShow": node.isShow ? 1 : 0 ? 1 : 0,
} }
TreeApi.updateDirectoryInfo(params2) TreeApi.updateDirectoryInfo(params2)
} }
@ -92,8 +99,8 @@ export const useRightOperate = () => {
//重置视图 //重置视图
const resetView = () => { const resetView = () => {
let selectNodes = getSelectedNodes(window.treeObj); let selectNodes = getSelectedNodes(window.treeObj);
if(selectNodes && selectNodes[selectNodes.length-1]) { if (selectNodes && selectNodes[selectNodes.length - 1]) {
let node = selectNodes[selectNodes.length-1] let node = selectNodes[selectNodes.length - 1]
let params = JSON.parse(node.params) let params = JSON.parse(node.params)
let entityObject = window.earth.entityMap.get(params.id) let entityObject = window.earth.entityMap.get(params.id)
entityObject.resetCustomView() entityObject.resetCustomView()
@ -108,19 +115,19 @@ export const useRightOperate = () => {
"isShow": node.isShow ? 1 : 0, "isShow": node.isShow ? 1 : 0,
} }
TreeApi.updateDirectoryInfo(params2) 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({ const rightMenus: any = reactive({
addDirectory: { addDirectory: {
key: 'addDirectory', key: 'addDirectory',

View File

@ -384,13 +384,9 @@ export const useTree = () => {
id: 1, id: 1,
parentId: 0, parentId: 0,
sourceName: '111', sourceName: '111',
isShow: true isShow: true,
}, sourceType: '',
{ params: ''
id: 2,
parentId: 0,
sourceName: '222',
isShow: true
} }
]) ])
@ -407,13 +403,27 @@ export const useTree = () => {
const initTree = async (selector: string = '#treeDemo') => { const initTree = async (selector: string = '#treeDemo') => {
let res = await TreeApi.getTreeList() let res = await TreeApi.getTreeList()
console.log('res', res) console.log('res', res)
if ([0,200].includes(res.code)) { if ([0, 200].includes(res.code)) {
res.data.sort((a: any, b: any) => { res.data.sort((a: any, b: any) => {
if(a.treeIndex&&b.treeIndex) if (a.treeIndex && b.treeIndex) {
return a.treeIndex - b.treeIndex return a.treeIndex - b.treeIndex
}
if (a.treeIndex) {
return -1;
}
if (b.treeIndex) {
return 1;
}
return 0;
}) })
for (let i = res.data.length - 1; i >= 0; i--) {
if (!res.data[i].id) {
res.data.splice(i, 1);
}
}
zNodes.value = res.data zNodes.value = res.data
treeObj.value = $.fn.zTree.init($(selector), setting, zNodes.value) treeObj.value = $.fn.zTree.init($(selector), setting, zNodes.value)
console.log(res.data)
window.treeObj = treeObj.value window.treeObj = treeObj.value
window.AllNodes = treeObj.value.getNodes() window.AllNodes = treeObj.value.getNodes()
initTreeCallBack() initTreeCallBack()
@ -425,8 +435,22 @@ export const useTree = () => {
for (let i = 0; i < zNodes.value.length; i++) { for (let i = 0; i < zNodes.value.length; i++) {
if (zNodes.value[i].params) { if (zNodes.value[i].params) {
let params = JSON.parse(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) 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)
}
}
} }
} }
} }

View File

@ -1,7 +1,14 @@
export const initMapData = async (type, data) => { export const initMapData = async (type, data) => {
let entityObject let entityObject
let options let options
console.log('data', type, data)
switch (type) { switch (type) {
case 'groundText':
entityObject = new YJ.Obj.GroundText(window.earth, data)
break
case 'standText':
entityObject = new YJ.Obj.StandText(window.earth, data)
break
case 'point': case 'point':
entityObject = new YJ.Obj.BillboardObject(window.earth, data) entityObject = new YJ.Obj.BillboardObject(window.earth, data)
break break
@ -11,27 +18,40 @@ export const initMapData = async (type, data) => {
case 'curve': case 'curve':
entityObject = await new YJ.Obj.CurvelineObject(window.earth, data) entityObject = await new YJ.Obj.CurvelineObject(window.earth, data)
break break
case 'polygon': case 'panel':
case 'rectangle':
entityObject = new YJ.Obj.PolygonObject(window.earth, data) entityObject = new YJ.Obj.PolygonObject(window.earth, data)
break break
case 'groundText': case 'rendezvous':
entityObject = new YJ.Obj.GroundText(window.earth, data) entityObject = new YJ.Obj.AssembleObject(window.earth, data)
break break
case 'standText': case 'attackArrow':
entityObject = new YJ.Obj.StandText(window.earth, data) entityObject = new YJ.Obj.AttackArrowObject(window.earth, data)
break
case 'pincerArrow':
entityObject = new YJ.Obj.PincerArrowObject(window.earth, data)
break break
case 'circle': case 'circle':
entityObject = new YJ.Obj.CircleObject(window.earth, data) entityObject = new YJ.Obj.CircleObject(window.earth, data)
break break
case 'rectangle':
entityObject = new YJ.Obj.RectangleObject(window.earth, data)
break
case 'ellipse': case 'ellipse':
entityObject = new YJ.Obj.EllipseObject(window.earth, data) entityObject = new YJ.Obj.EllipseObject(window.earth, data)
break break
case 'model': case 'model':
entityObject = new YJ.Obj.ModelObject(window.earth, data) entityObject = new YJ.Obj.ModelObject(window.earth, data)
break 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: default:
return return
break break
@ -39,4 +59,4 @@ export const initMapData = async (type, data) => {
options = structuredClone(entityObject.options) options = structuredClone(entityObject.options)
delete options.host delete options.host
return options return options
} }

View File

@ -10,12 +10,37 @@
<firstMenu class="absolute zIndex9" ref="firstMenuRef"></firstMenu> <firstMenu class="absolute zIndex9" ref="firstMenuRef"></firstMenu>
<!--底部菜单--> <!--底部菜单-->
<bottomMenu class="absolute zIndex9" ref="bottomMenuRef"></bottomMenu> <bottomMenu class="absolute zIndex9" ref="bottomMenuRef"></bottomMenu>
<input type="file" id="fileInputlink" style="display: none;" multiple accept=".jpeg,.png,.jpg,.mp4,.pdf" <input
@input="uploadFile"> 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> </template>
<script setup lang="ts"> <script setup lang="ts">
import { inject, shallowRef, ref } from "vue"; import { inject, shallowRef, ref } from 'vue'
import Headers from '../components/headers/index.vue' import Headers from '../components/headers/index.vue'
import Tree from '../components/tree/index.vue' import Tree from '../components/tree/index.vue'
import addStandText from '../components/propertyBox/addStandText.vue' import addStandText from '../components/propertyBox/addStandText.vue'
@ -24,71 +49,117 @@ import billboardObject from '../components/propertyBox/billboardObject.vue'
import polygonObject from '../components/propertyBox/polygonObject.vue' import polygonObject from '../components/propertyBox/polygonObject.vue'
import polylineObject from '../components/propertyBox/polylineObject.vue' import polylineObject from '../components/propertyBox/polylineObject.vue'
import curvelineObject from '../components/propertyBox/curvelineObject.vue' import curvelineObject from '../components/propertyBox/curvelineObject.vue'
import attackArrow from '../components/propertyBox/attackArrow.vue'
import richText from '../components/propertyBox/richText.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 addDirectory from '@/components/dialog/directory.vue'
import firstMenu from '@/views/components/leftSide/leftSideFirst.vue' import firstMenu from '@/views/components/leftSide/leftSideFirst.vue'
import bottomMenu from '@/views/components/bottomSide/bottomSide.vue' import bottomMenu from '@/views/components/bottomSide/bottomSide.vue'
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' import { GisApi } from '@/api/gisApi'
const firstMenuRef = ref(null) const firstMenuRef = ref(null)
const bottomMenuRef = ref(null) const bottomMenuRef = ref(null)
const eventBus = inject("bus"); const eventBus: any = inject('bus')
let currentComponent = shallowRef() let currentComponent = shallowRef()
let dynamicComponentRef = ref() let dynamicComponentRef = ref()
let addStandTextRef = ref() let addStandTextRef = ref()
let tree = ref() let tree = ref()
eventBus.on("openDialog", async (sourceType: any, id: any) => { eventBus.on('openDialog', async (sourceType: any, id: any) => {
switch (sourceType) { switch (sourceType) {
case 'groundText': case 'addGroundText':
currentComponent.value = addGroundText currentComponent.value = addGroundText
await nextTick() await nextTick()
dynamicComponentRef.value?.open() dynamicComponentRef.value?.open()
break; break
case 'standText': case 'groundText':
currentComponent.value = groundText
await nextTick()
dynamicComponentRef.value?.open(id)
break
case 'addStandText':
currentComponent.value = addStandText currentComponent.value = addStandText
await nextTick() await nextTick()
dynamicComponentRef.value?.open() dynamicComponentRef.value?.open()
break; break
case 'standText':
currentComponent.value = standText
await nextTick()
dynamicComponentRef.value?.open(id)
break
case 'point': case 'point':
currentComponent.value = billboardObject currentComponent.value = billboardObject
await nextTick() await nextTick()
dynamicComponentRef.value?.open(id) dynamicComponentRef.value?.open(id)
break; break
case 'line': case 'line':
currentComponent.value = polylineObject currentComponent.value = polylineObject
await nextTick() await nextTick()
dynamicComponentRef.value?.open(id) dynamicComponentRef.value?.open(id)
break; break
case 'curve': case 'curve':
currentComponent.value = curvelineObject currentComponent.value = curvelineObject
await nextTick() await nextTick()
dynamicComponentRef.value?.open(id) dynamicComponentRef.value?.open(id)
break; break
break; break
case 'panel': case 'panel':
currentComponent.value = polygonObject currentComponent.value = polygonObject
await nextTick() await nextTick()
dynamicComponentRef.value?.open(id) dynamicComponentRef.value?.open(id)
break; break
case 'circle': case 'circle':
break; currentComponent.value = circleObject
await nextTick()
dynamicComponentRef.value?.open(id, 'circle')
break
case 'rectangle': case 'rectangle':
break; currentComponent.value = polygonObject
await nextTick()
dynamicComponentRef.value?.open(id, 'rectangle')
break
case 'rendezvous': case 'rendezvous':
break; currentComponent.value = polygonObject
await nextTick()
dynamicComponentRef.value?.open(id, 'rendezvous')
break
case 'attackArrow': case 'attackArrow':
break; currentComponent.value = attackArrow
await nextTick()
dynamicComponentRef.value?.open(id, 'attackArrow')
break
case 'pincerArrow': case 'pincerArrow':
break; currentComponent.value = attackArrow
await nextTick()
dynamicComponentRef.value?.open(id, 'pincerArrow')
break
default: default:
break; break
} }
}); })
eventBus.on("destroyComponent",()=>{ eventBus.on('destroyComponent', () => {
currentComponent.value = undefined currentComponent.value = undefined
}) })
const createEarth = async () => { const createEarth = async () => {
window.earth = await new YJ.YJEarth('earthContainer') window.earth = await new YJ.YJEarth('earthContainer')
tree.value.initTreeCallBack() tree.value.initTreeCallBack()
@ -109,16 +180,15 @@ eventBus.on('defineClickAddLinkCb', (fun) => {
clickAddLinkCb = fun clickAddLinkCb = fun
}) })
const uploadFile = (event) => { const uploadFile = (event) => {
let files = event.target.files let files = event.target.files
if (files.length > 0) { if (files.length > 0) {
const formData = new FormData(); const formData = new FormData()
for (let i = 0; i < files.length; i++) { for (let i = 0; i < files.length; i++) {
const element = files[i]; const element = files[i]
formData.append('files', element); formData.append('files', element)
} }
GisApi.linkFile(formData).then(res => { GisApi.linkFile(formData).then((res) => {
if (res.code == 0 || res.code == 200) { if (res.code == 0 || res.code == 200) {
ElMessage({ ElMessage({
message: '上传成功', message: '上传成功',