模型库 模型属性
This commit is contained in:
@ -30,7 +30,13 @@
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<!-- 左侧Tab导航 -->
|
<!-- 左侧Tab导航 -->
|
||||||
<div class="treeCon">
|
<div class="treeCon">
|
||||||
<el-tree style="max-width: 600px" :data="typeTreeData" ref="treeRef" node-key="id">
|
<el-tree
|
||||||
|
style="max-width: 600px"
|
||||||
|
:data="typeTreeData"
|
||||||
|
ref="treeRef"
|
||||||
|
node-key="id"
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
>
|
||||||
<template #default="{ node, data }">
|
<template #default="{ node, data }">
|
||||||
<!-- <span> {{ node.label }}</span> -->
|
<!-- <span> {{ node.label }}</span> -->
|
||||||
|
|
||||||
@ -95,7 +101,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { Search } from '@element-plus/icons-vue'
|
import { Search } from '@element-plus/icons-vue'
|
||||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
|
||||||
import { ModelApi } from '@/api/model/index'
|
import { ModelApi } from '@/api/model/index'
|
||||||
import type { TabsPaneContext } from 'element-plus'
|
import type { TabsPaneContext } from 'element-plus'
|
||||||
import { useTreeNode } from '../tree/hooks/treeNode'
|
import { useTreeNode } from '../tree/hooks/treeNode'
|
||||||
@ -128,6 +134,16 @@ const galleryRef = ref<HTMLElement>()
|
|||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
let observer: IntersectionObserver | null = null
|
let observer: IntersectionObserver | null = null
|
||||||
|
|
||||||
|
const treeRef: any = ref('')
|
||||||
|
watch(modelName, (val) => {
|
||||||
|
treeRef.value!.filter(val)
|
||||||
|
})
|
||||||
|
|
||||||
|
const filterNode: any = (value, data) => {
|
||||||
|
if (!value) return true
|
||||||
|
return data.label.includes(value)
|
||||||
|
}
|
||||||
|
|
||||||
// 处理Tab点击
|
// 处理Tab点击
|
||||||
const handleTabClick = (tab: TabsPaneContext) => {
|
const handleTabClick = (tab: TabsPaneContext) => {
|
||||||
const section = document.querySelector(`.model-section[data-category="${tab.index}"]`)
|
const section = document.querySelector(`.model-section[data-category="${tab.index}"]`)
|
||||||
@ -208,7 +224,6 @@ interface TypeNode {
|
|||||||
|
|
||||||
const typeTreeData = ref<TypeNode[]>([])
|
const typeTreeData = ref<TypeNode[]>([])
|
||||||
const toggleExpand = (row: any) => {
|
const toggleExpand = (row: any) => {
|
||||||
console.log('opoop')
|
|
||||||
if (row.childNodes.length != 0) {
|
if (row.childNodes.length != 0) {
|
||||||
// row._expanded = !row._expanded
|
// row._expanded = !row._expanded
|
||||||
// 这里需要调用el-table的toggleRowExpansion方法
|
// 这里需要调用el-table的toggleRowExpansion方法
|
||||||
@ -232,7 +247,6 @@ let typeArr = {
|
|||||||
area: '面'
|
area: '面'
|
||||||
}
|
}
|
||||||
const modelClick = (index, row) => {
|
const modelClick = (index, row) => {
|
||||||
console.log(row, 'dddddd')
|
|
||||||
activeIndex.value = index
|
activeIndex.value = index
|
||||||
// let selectedNode = window.treeObj.getSelectedNodes()[0]
|
// let selectedNode = window.treeObj.getSelectedNodes()[0]
|
||||||
// if(!selectedNode){
|
// if(!selectedNode){
|
||||||
@ -256,8 +270,6 @@ const modelClick = (index, row) => {
|
|||||||
url: 'http://127.0.0.1:8848' + isSetting[row.data]
|
url: 'http://127.0.0.1:8848' + isSetting[row.data]
|
||||||
},
|
},
|
||||||
function (data) {
|
function (data) {
|
||||||
console.log('data,url,source_id', data, row)
|
|
||||||
|
|
||||||
// posiArr.forEach((item, index) => {
|
// posiArr.forEach((item, index) => {
|
||||||
// let model = new Model(that.sdk, {
|
// let model = new Model(that.sdk, {
|
||||||
// id: 'model' + index,
|
// id: 'model' + index,
|
||||||
@ -291,10 +303,10 @@ const renderModel = async (data, model) => {
|
|||||||
position,
|
position,
|
||||||
name: model.modelName + index,
|
name: model.modelName + index,
|
||||||
show: true,
|
show: true,
|
||||||
scale: 1,
|
scale: { x: 1, y: 1, z: 1 },
|
||||||
url: model.data,
|
url: model.data,
|
||||||
maximumScale: 1,
|
maximumScale: 1,
|
||||||
host: 'http://127.0.0.1:8848',
|
// host: 'http://127.0.0.1:8848',
|
||||||
rotate: {
|
rotate: {
|
||||||
x: 0,
|
x: 0,
|
||||||
y: 0,
|
y: 0,
|
||||||
@ -342,7 +354,6 @@ const getModelListByType = (id) => {
|
|||||||
let formData = new FormData()
|
let formData = new FormData()
|
||||||
formData.append('modelTypeId', id)
|
formData.append('modelTypeId', id)
|
||||||
ModelApi.showModelByType(formData).then((res) => {
|
ModelApi.showModelByType(formData).then((res) => {
|
||||||
console.log(res.data, 'cccc')
|
|
||||||
categories.value = res.data
|
categories.value = res.data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -390,7 +401,6 @@ eventBus.on('openModel', (data) => {
|
|||||||
eventBus.on('closeModelSet', (data) => {
|
eventBus.on('closeModelSet', (data) => {
|
||||||
isShowPup.value = data
|
isShowPup.value = data
|
||||||
if (data) {
|
if (data) {
|
||||||
console.log('设置后')
|
|
||||||
getSetting()
|
getSetting()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -401,7 +411,6 @@ const getSetting = () => {
|
|||||||
ModelApi.getModelSetting().then((res) => {
|
ModelApi.getModelSetting().then((res) => {
|
||||||
if (res.code == 0 || res.code == 200) {
|
if (res.code == 0 || res.code == 200) {
|
||||||
isSetting = res.data[res.data.length - 1]
|
isSetting = res.data[res.data.length - 1]
|
||||||
console.log(res, 'resres')
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,7 +16,7 @@
|
|||||||
<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">
|
<div class="col">
|
||||||
<span class="label">面颜色</span>
|
<span class="label">颜色</span>
|
||||||
<div class="color" ref="colorRef"></div>
|
<div class="color" ref="colorRef"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -26,21 +26,25 @@
|
|||||||
<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"
|
||||||
|
type="number"
|
||||||
|
title=""
|
||||||
|
min="-180"
|
||||||
|
max="180"
|
||||||
|
v-model="entityOptions.lng"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<span class="label">最大比例</span>
|
<span class="label">最大比例</span>
|
||||||
<div
|
<div class="input-number input-number-unit-1">
|
||||||
class="input-number input-number-unit-1 height-box"
|
|
||||||
:class="{ disabled: heightMode == 2 }"
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
class="input height"
|
class="input height"
|
||||||
type="number"
|
type="number"
|
||||||
title=""
|
title=""
|
||||||
min="-9999999"
|
min="0.1"
|
||||||
max="999999999"
|
max="99999"
|
||||||
v-model="height"
|
v-model="entityOptions.maximumScale"
|
||||||
/>
|
/>
|
||||||
<span class="unit">倍</span>
|
<span class="unit">倍</span>
|
||||||
<span class="arrow"></span>
|
<span class="arrow"></span>
|
||||||
@ -50,23 +54,27 @@
|
|||||||
<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"
|
||||||
|
type="number"
|
||||||
|
title=""
|
||||||
|
min="-90"
|
||||||
|
max="90"
|
||||||
|
v-model="entityOptions.lat"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<span class="label">最小像素</span>
|
<span class="label">最小像素</span>
|
||||||
<div
|
<div class="input-number input-number-unit-1">
|
||||||
class="input-number input-number-unit-1 height-box"
|
|
||||||
:class="{ disabled: heightMode == 2 }"
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
class="input height"
|
class="input"
|
||||||
type="number"
|
type="number"
|
||||||
title=""
|
title=""
|
||||||
min="-9999999"
|
min="1"
|
||||||
max="999999999"
|
max="99999"
|
||||||
v-model="height"
|
v-model="entityOptions.minimumPixelSize"
|
||||||
/>
|
/>
|
||||||
<span class="unit">倍</span>
|
<span class="unit">px</span>
|
||||||
<span class="arrow"></span>
|
<span class="arrow"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -74,17 +82,14 @@
|
|||||||
<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>
|
||||||
<div
|
<div class="input-number input-number-unit-1">
|
||||||
class="input-number input-number-unit-1 height-box"
|
|
||||||
:class="{ disabled: heightMode == 2 }"
|
|
||||||
>
|
|
||||||
<input
|
<input
|
||||||
class="input height"
|
class="input height"
|
||||||
type="number"
|
type="number"
|
||||||
title=""
|
title=""
|
||||||
min="-9999999"
|
min="-99999"
|
||||||
max="999999999"
|
max="9999999"
|
||||||
v-model="height"
|
v-model="entityOptions.alt"
|
||||||
/>
|
/>
|
||||||
<span class="unit">m</span>
|
<span class="unit">m</span>
|
||||||
<span class="arrow"></span>
|
<span class="arrow"></span>
|
||||||
@ -92,7 +97,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<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.scaleByDistance" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -114,9 +119,9 @@
|
|||||||
<input
|
<input
|
||||||
type="range"
|
type="range"
|
||||||
min="0"
|
min="0"
|
||||||
max="1"
|
max="360"
|
||||||
step="0.01"
|
step="0.01"
|
||||||
v-model="entityOptions.transparency"
|
v-model="entityOptions.rotateX"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="input-number input-number-unit-1"
|
class="input-number input-number-unit-1"
|
||||||
@ -128,7 +133,7 @@
|
|||||||
title=""
|
title=""
|
||||||
min="0"
|
min="0"
|
||||||
max="360"
|
max="360"
|
||||||
v-model="entityOptions.transparency"
|
v-model="entityOptions.rotateX"
|
||||||
/>
|
/>
|
||||||
<span class="unit">°</span>
|
<span class="unit">°</span>
|
||||||
<span class="arrow"></span>
|
<span class="arrow"></span>
|
||||||
@ -141,9 +146,9 @@
|
|||||||
<input
|
<input
|
||||||
type="range"
|
type="range"
|
||||||
min="0"
|
min="0"
|
||||||
max="1"
|
max="360"
|
||||||
step="0.01"
|
step="0.01"
|
||||||
v-model="entityOptions.transparency"
|
v-model="entityOptions.rotateY"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="input-number input-number-unit-1"
|
class="input-number input-number-unit-1"
|
||||||
@ -155,7 +160,7 @@
|
|||||||
title=""
|
title=""
|
||||||
min="0"
|
min="0"
|
||||||
max="360"
|
max="360"
|
||||||
v-model="entityOptions.transparency"
|
v-model="entityOptions.rotateY"
|
||||||
/>
|
/>
|
||||||
<span class="unit">°</span>
|
<span class="unit">°</span>
|
||||||
<span class="arrow"></span>
|
<span class="arrow"></span>
|
||||||
@ -168,9 +173,9 @@
|
|||||||
<input
|
<input
|
||||||
type="range"
|
type="range"
|
||||||
min="0"
|
min="0"
|
||||||
max="1"
|
max="360"
|
||||||
step="0.01"
|
step="0.01"
|
||||||
v-model="entityOptions.transparency"
|
v-model="entityOptions.rotateZ"
|
||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="input-number input-number-unit-1"
|
class="input-number input-number-unit-1"
|
||||||
@ -182,7 +187,7 @@
|
|||||||
title=""
|
title=""
|
||||||
min="0"
|
min="0"
|
||||||
max="360"
|
max="360"
|
||||||
v-model="entityOptions.transparency"
|
v-model="entityOptions.rotateZ"
|
||||||
/>
|
/>
|
||||||
<span class="unit">°</span>
|
<span class="unit">°</span>
|
||||||
<span class="arrow"></span>
|
<span class="arrow"></span>
|
||||||
@ -192,37 +197,238 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div width="46%">
|
<div class="col" style="flex: 0 0 50px">
|
||||||
<p class="lable-left-line">缩放</p>
|
<p class="lable-left-line">缩放</p>
|
||||||
<el-checkbox
|
</div>
|
||||||
v-model="entityOptions.transparency"
|
<div class="col">
|
||||||
label="是否等比例缩放"
|
<el-checkbox v-model="equalSwitch" label="是否等比例缩放" size="large" />
|
||||||
size="large"
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row" v-if="equalSwitch">
|
||||||
|
<div class="col">
|
||||||
|
<span class="label">等比例缩放</span>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="99999"
|
||||||
|
step="1"
|
||||||
|
@change="scaleChange"
|
||||||
|
v-model="entityOptions.scaleX"
|
||||||
/>
|
/>
|
||||||
|
<div
|
||||||
|
class="input-number input-number-unit-1"
|
||||||
|
style="width: auto; margin-left: 10px"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
style="width: 100px"
|
||||||
|
type="number"
|
||||||
|
title=""
|
||||||
|
min="0"
|
||||||
|
max="360"
|
||||||
|
@change="scaleChange"
|
||||||
|
v-model="entityOptions.scaleX"
|
||||||
|
/>
|
||||||
|
<span class="unit">倍</span>
|
||||||
|
<span class="arrow"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row" v-if="!equalSwitch">
|
||||||
|
<div class="col">
|
||||||
|
<span class="label">x 轴</span>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="99999"
|
||||||
|
step="0.01"
|
||||||
|
v-model="entityOptions.scaleX"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="input-number input-number-unit-1"
|
||||||
|
style="width: auto; margin-left: 10px"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
style="width: 100px"
|
||||||
|
type="number"
|
||||||
|
title=""
|
||||||
|
min="0"
|
||||||
|
max="360"
|
||||||
|
v-model="entityOptions.scaleX"
|
||||||
|
/>
|
||||||
|
<span class="unit">°</span>
|
||||||
|
<span class="arrow"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row" v-if="!equalSwitch">
|
||||||
|
<div class="col">
|
||||||
|
<span class="label">y 轴</span>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="99999"
|
||||||
|
step="0.01"
|
||||||
|
v-model="entityOptions.scaleY"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="input-number input-number-unit-1"
|
||||||
|
style="width: auto; margin-left: 10px"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
style="width: 100px"
|
||||||
|
type="number"
|
||||||
|
title=""
|
||||||
|
min="0"
|
||||||
|
max="360"
|
||||||
|
v-model="entityOptions.scaleY"
|
||||||
|
/>
|
||||||
|
<span class="unit">°</span>
|
||||||
|
<span class="arrow"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row" v-if="!equalSwitch">
|
||||||
|
<div class="col">
|
||||||
|
<span class="label">z 轴</span>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="0"
|
||||||
|
max="99999"
|
||||||
|
step="0.01"
|
||||||
|
v-model="entityOptions.scaleZ"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="input-number input-number-unit-1"
|
||||||
|
style="width: auto; margin-left: 10px"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
style="width: 100px"
|
||||||
|
type="number"
|
||||||
|
title=""
|
||||||
|
min="0"
|
||||||
|
max="360"
|
||||||
|
v-model="entityOptions.scaleZ"
|
||||||
|
/>
|
||||||
|
<span class="unit">°</span>
|
||||||
|
<span class="arrow"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="row">
|
||||||
|
<p class="lable-left-line">高度</p>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<span class="label">高度</span>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="-99999"
|
||||||
|
max="999999"
|
||||||
|
step="0.01"
|
||||||
|
v-model="entityOptions.alt"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="input-number input-number-unit-1"
|
||||||
|
style="width: auto; margin-left: 10px"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
style="width: 100px"
|
||||||
|
type="number"
|
||||||
|
title=""
|
||||||
|
min="0"
|
||||||
|
max="360"
|
||||||
|
v-model="entityOptions.alt"
|
||||||
|
/>
|
||||||
|
<span class="unit">m</span>
|
||||||
|
<span class="arrow"></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="标准风格" name="3">
|
<el-tab-pane label="标注风格" name="3">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<!-- <div class="col">
|
|
||||||
<span class="label">面颜色</span>
|
|
||||||
<div class="color" ref="colorRef"></div>
|
|
||||||
</div> -->
|
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<span class="label">描边颜色</span>
|
<span class="label">标注开关</span>
|
||||||
<div class="lineColor" ref="lineColorRef"></div>
|
<input class="btn-switch" type="checkbox" v-model="entityOptions.labelShow" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<span class="label">字体颜色</span>
|
||||||
|
<div class="labelColor" ref="labelColorRef"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col font-select-box">
|
||||||
|
<span class="label" style="flex: none">字体选择</span>
|
||||||
|
<el-select
|
||||||
|
class="input input-select font-select"
|
||||||
|
style="width: 100px"
|
||||||
|
v-model="entityOptions.labelFontFamily"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in fontList"
|
||||||
|
:key="item.key"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.key"
|
||||||
|
>
|
||||||
|
</el-option>
|
||||||
|
</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
|
<input
|
||||||
class="input"
|
class="input"
|
||||||
type="number"
|
type="number"
|
||||||
title=""
|
title=""
|
||||||
min="0"
|
min="1"
|
||||||
max="99"
|
max="99"
|
||||||
v-model="entityOptions.lineWidth"
|
v-model="entityOptions.labelFontSize"
|
||||||
|
/>
|
||||||
|
<span class="unit">px</span>
|
||||||
|
<span class="arrow"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="col">
|
||||||
|
<span class="label">视野缩放</span>
|
||||||
|
<input
|
||||||
|
class="btn-switch"
|
||||||
|
type="checkbox"
|
||||||
|
v-model="entityOptions.labelScaleByDistance"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<span class="label">最近距离</span>
|
||||||
|
<div class="input-number input-number-unit-2">
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
type="number"
|
||||||
|
title=""
|
||||||
|
min="1"
|
||||||
|
max="99999999"
|
||||||
|
v-model="entityOptions.labelNear"
|
||||||
|
/>
|
||||||
|
<span class="unit">px</span>
|
||||||
|
<span class="arrow"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<span class="label">最远距离</span>
|
||||||
|
<div class="input-number input-number-unit-2">
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
type="number"
|
||||||
|
title=""
|
||||||
|
min="1"
|
||||||
|
max="99999999"
|
||||||
|
v-model="entityOptions.labelFar"
|
||||||
/>
|
/>
|
||||||
<span class="unit">px</span>
|
<span class="unit">px</span>
|
||||||
<span class="arrow"></span>
|
<span class="arrow"></span>
|
||||||
@ -231,7 +437,53 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="标签风格" name="4">
|
<el-tab-pane label="标签风格" name="4">
|
||||||
<labelStyle :type="title" :entityOptions="entityOptions"></labelStyle>
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<span class="label">引线颜色</span>
|
||||||
|
<div class="labelLineColor" ref="labelLineColorRef"></div>
|
||||||
|
</div>
|
||||||
|
<div class="col">
|
||||||
|
<span class="label">背景颜色</span>
|
||||||
|
<div class="labelBackgroundColorStart" ref="labelBackgroundColorStartRef"></div>
|
||||||
|
<div
|
||||||
|
class="labelBackgroundColorEnd"
|
||||||
|
ref="labelBackgroundColorEndRef"
|
||||||
|
style="margin-left: 10px"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<span class="label">引线宽度</span>
|
||||||
|
<div class="input-number input-number-unit-2">
|
||||||
|
<input
|
||||||
|
class="input"
|
||||||
|
type="number"
|
||||||
|
title=""
|
||||||
|
min="1"
|
||||||
|
max="999"
|
||||||
|
v-model="entityOptions.labelLineWidth"
|
||||||
|
/>
|
||||||
|
<span class="unit">px</span>
|
||||||
|
<span class="arrow"></span>
|
||||||
|
</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="999"
|
||||||
|
v-model="entityOptions.labelPixelOffset"
|
||||||
|
/>
|
||||||
|
<span class="unit">px</span>
|
||||||
|
<span class="arrow"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
@ -240,16 +492,16 @@
|
|||||||
</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">
|
<button style="margin-left: 10px" v-if="!moveFlag" @click="translate">
|
||||||
<svg class="icon-edit">
|
|
||||||
<use xlink:href="#yj-icon-edit"></use></svg
|
|
||||||
>二次编辑
|
|
||||||
</button>
|
|
||||||
<button style="margin-left: 10px" @click="translate">
|
|
||||||
<svg class="icon-py">
|
<svg class="icon-py">
|
||||||
<use xlink:href="#yj-icon-py"></use></svg
|
<use xlink:href="#yj-icon-py"></use></svg
|
||||||
>平移
|
>平移
|
||||||
</button>
|
</button>
|
||||||
|
<button style="margin-left: 10px" v-if="moveFlag" @click="translate">
|
||||||
|
<svg class="icon-py">
|
||||||
|
<use xlink:href="#yj-icon-py"></use></svg
|
||||||
|
>结束平移
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button @click="remove">删除</button>
|
<button @click="remove">删除</button>
|
||||||
<button @click="confirm">确定</button>
|
<button @click="confirm">确定</button>
|
||||||
@ -266,39 +518,28 @@ import Dialog from '@/components/dialog/baseDialog.vue'
|
|||||||
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'
|
||||||
|
import { getFontList } from './fontSelect'
|
||||||
|
|
||||||
const { cusUpdateNode } = useTreeNode()
|
const { cusUpdateNode } = useTreeNode()
|
||||||
|
|
||||||
const title = ref('面')
|
const fontList = ref(getFontList())
|
||||||
|
|
||||||
|
const title = ref('模型')
|
||||||
const baseDialog: any = ref(null)
|
const baseDialog: any = ref(null)
|
||||||
const eventBus: any = inject('bus')
|
const eventBus: any = inject('bus')
|
||||||
const options = ref({})
|
const options = ref({})
|
||||||
|
const equalSwitch = ref(true) //是否等比例缩放
|
||||||
const colorRef = ref(null)
|
const colorRef = ref(null)
|
||||||
const lineColorRef = ref(null)
|
const labelColorRef = ref(null)
|
||||||
|
const labelLineColorRef = ref(null)
|
||||||
|
const labelBackgroundColorStartRef = ref(null)
|
||||||
|
const labelBackgroundColorEndRef = ref(null)
|
||||||
eventBus.on('openPolygonEdit', () => {
|
eventBus.on('openPolygonEdit', () => {
|
||||||
baseDialog.value?.open()
|
baseDialog.value?.open()
|
||||||
})
|
})
|
||||||
|
|
||||||
const area = ref(0)
|
const area = ref(0)
|
||||||
const areaUnit = ref('m2')
|
|
||||||
const height = ref(10)
|
const height = ref(10)
|
||||||
const heightModeData = ref([
|
|
||||||
{
|
|
||||||
name: '海拔高度',
|
|
||||||
value: '海拔高度',
|
|
||||||
key: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '相对地表',
|
|
||||||
value: '相对地表',
|
|
||||||
key: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '依附模型',
|
|
||||||
value: '依附模型',
|
|
||||||
key: 2
|
|
||||||
}
|
|
||||||
])
|
|
||||||
|
|
||||||
const activeName = ref('1')
|
const activeName = ref('1')
|
||||||
const activeTd = ref({
|
const activeTd = ref({
|
||||||
@ -311,36 +552,18 @@ const entityOptions: any = ref({})
|
|||||||
let originalOptions: any
|
let originalOptions: any
|
||||||
let that: any
|
let that: any
|
||||||
|
|
||||||
|
const scaleChange = () => {
|
||||||
|
entityOptions.value.scaleY = entityOptions.value.scaleX
|
||||||
|
entityOptions.value.scaleZ = entityOptions.value.scaleX
|
||||||
|
}
|
||||||
|
|
||||||
const open = async (id: any, type: 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)
|
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
|
||||||
area.value = entityOptions.value.areaByMeter
|
area.value = entityOptions.value.areaByMeter
|
||||||
positions.value = structuredClone(that.options.positions)
|
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)
|
heightModeChange(heightMode.value)
|
||||||
baseDialog.value?.open()
|
baseDialog.value?.open()
|
||||||
|
|
||||||
@ -360,17 +583,59 @@ const open = async (id: any, type: any) => {
|
|||||||
} //点击清空按钮事件回调
|
} //点击清空按钮事件回调
|
||||||
})
|
})
|
||||||
let linecolorPicker = new window.YJColorPicker({
|
let linecolorPicker = new window.YJColorPicker({
|
||||||
el: lineColorRef.value,
|
el: labelColorRef.value,
|
||||||
size: 'mini', //颜色box类型
|
size: 'mini', //颜色box类型
|
||||||
alpha: true, //是否开启透明度
|
alpha: true, //是否开启透明度
|
||||||
defaultColor: entityOptions.value.lineColor,
|
defaultColor: entityOptions.value.labelColor,
|
||||||
disabled: false, //是否禁止打开颜色选择器
|
disabled: false, //是否禁止打开颜色选择器
|
||||||
openPickerAni: 'opacity', //打开颜色选择器动画
|
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||||
sure: (color) => {
|
sure: (color) => {
|
||||||
entityOptions.value.lineColor = color
|
entityOptions.value.labelColor = color
|
||||||
}, //点击确认按钮事件回调
|
}, //点击确认按钮事件回调
|
||||||
clear: () => {
|
clear: () => {
|
||||||
entityOptions.value.lineColor = 'rgba(255,255,255,1)'
|
entityOptions.value.labelColor = 'rgba(255,255,255,1)'
|
||||||
|
} //点击清空按钮事件回调
|
||||||
|
})
|
||||||
|
let ylinecolorPicker = new window.YJColorPicker({
|
||||||
|
el: labelLineColorRef.value,
|
||||||
|
size: 'mini', //颜色box类型
|
||||||
|
alpha: true, //是否开启透明度
|
||||||
|
defaultColor: entityOptions.value.labelLineColor,
|
||||||
|
disabled: false, //是否禁止打开颜色选择器
|
||||||
|
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||||
|
sure: (color) => {
|
||||||
|
entityOptions.value.labelLineColor = color
|
||||||
|
}, //点击确认按钮事件回调
|
||||||
|
clear: () => {
|
||||||
|
entityOptions.value.labelLineColor = 'rgba(255,255,255,1)'
|
||||||
|
} //点击清空按钮事件回调
|
||||||
|
})
|
||||||
|
let bgcolorPicker1 = new window.YJColorPicker({
|
||||||
|
el: labelBackgroundColorStartRef.value,
|
||||||
|
size: 'mini', //颜色box类型
|
||||||
|
alpha: true, //是否开启透明度
|
||||||
|
defaultColor: entityOptions.value.labelBackgroundColorStart,
|
||||||
|
disabled: false, //是否禁止打开颜色选择器
|
||||||
|
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||||
|
sure: (color) => {
|
||||||
|
entityOptions.value.labelBackgroundColorStart = color
|
||||||
|
}, //点击确认按钮事件回调
|
||||||
|
clear: () => {
|
||||||
|
entityOptions.value.labelBackgroundColorStart = 'rgba(255,255,255,1)'
|
||||||
|
} //点击清空按钮事件回调
|
||||||
|
})
|
||||||
|
let bgcolorPicker2 = new window.YJColorPicker({
|
||||||
|
el: labelBackgroundColorEndRef.value,
|
||||||
|
size: 'mini', //颜色box类型
|
||||||
|
alpha: true, //是否开启透明度
|
||||||
|
defaultColor: entityOptions.value.labelBackgroundColorEnd,
|
||||||
|
disabled: false, //是否禁止打开颜色选择器
|
||||||
|
openPickerAni: 'opacity', //打开颜色选择器动画
|
||||||
|
sure: (color) => {
|
||||||
|
entityOptions.value.labelBackgroundColorEnd = color
|
||||||
|
}, //点击确认按钮事件回调
|
||||||
|
clear: () => {
|
||||||
|
entityOptions.value.labelBackgroundColorEnd = 'rgba(255,255,255,1)'
|
||||||
} //点击清空按钮事件回调
|
} //点击清空按钮事件回调
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -416,23 +681,32 @@ const inputBlurCallBack = (event, i, name, digit = 2) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var moveFlag: any = ref(false)
|
||||||
const translate = () => {
|
const translate = () => {
|
||||||
that.openPositionEditing(() => {
|
moveFlag.value = !moveFlag.value
|
||||||
entityOptions.value.options.positions = structuredClone(that.options.positions)
|
that.positionEditing = moveFlag.value
|
||||||
})
|
if (moveFlag.value) {
|
||||||
|
that.rotationEditingCallBack = (res) => {
|
||||||
|
entityOptions.value.options.positions = structuredClone(res)
|
||||||
|
that.options.positions = res
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// that.openPositionEditing(() => {
|
||||||
|
// entityOptions.value.options.positions = structuredClone(that.options.positions)
|
||||||
|
// })
|
||||||
}
|
}
|
||||||
|
|
||||||
const closeCallback = () => {
|
const closeCallback = () => {
|
||||||
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
||||||
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 nodeEdit = () => {
|
const nodeEdit = () => {
|
||||||
that.nodeEdit((e, positions, areaByMeter) => {
|
that.nodeEdit((e, positions, areaByMeter) => {
|
||||||
console.log('positions', positions)
|
|
||||||
entityOptions.value.options.positions = structuredClone(positions)
|
entityOptions.value.options.positions = structuredClone(positions)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -441,7 +715,12 @@ const confirm = () => {
|
|||||||
originalOptions = structuredClone(that.options)
|
originalOptions = structuredClone(that.options)
|
||||||
baseDialog.value?.close()
|
baseDialog.value?.close()
|
||||||
let params = structuredClone(that.options)
|
let params = structuredClone(that.options)
|
||||||
delete params.host
|
delete params.attributeType
|
||||||
|
delete params.attribute.ISC
|
||||||
|
delete params.attribute.camera
|
||||||
|
delete params.attribute.goods
|
||||||
|
delete params.attribute.vr
|
||||||
|
|
||||||
let params2 = {
|
let params2 = {
|
||||||
id: params.id,
|
id: params.id,
|
||||||
sourceName: params.name,
|
sourceName: params.name,
|
||||||
@ -460,15 +739,7 @@ const remove = () => {
|
|||||||
close()
|
close()
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
//-----------------方法-----------------------
|
||||||
() => areaUnit.value,
|
|
||||||
(val) => {
|
|
||||||
if ((entityOptions.value.areaByMeter || entityOptions.value.areaByMeter == 0) && that) {
|
|
||||||
that.areaChangeCallBack()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{ immediate: true }
|
|
||||||
)
|
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
open,
|
open,
|
||||||
@ -476,4 +747,22 @@ defineExpose({
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss"></style>
|
<style scoped lang="scss">
|
||||||
|
::v-deep .el-checkbox.el-checkbox--large .el-checkbox__label {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
::v-deep .el-select__wrapper {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5) !important;
|
||||||
|
box-shadow: 0 0 0 1px rgba(var(--color-sdk-base-rgb), 0.5) inset !important;
|
||||||
|
}
|
||||||
|
::v-deep .el-select {
|
||||||
|
--el-select-input-focus-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||||
|
--el-select-text-color: #fff;
|
||||||
|
--el-select-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||||
|
--el-select-hover-border-color: rgba(var(--color-sdk-base-rgb), 0.5) !important;
|
||||||
|
--el-select-multiple-input-color: #fff !important;
|
||||||
|
}
|
||||||
|
::v-deep .el-select__placeholder {
|
||||||
|
color: rgba(204, 204, 204, 1) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@ -88,12 +88,11 @@ const options = [
|
|||||||
label: '面'
|
label: '面'
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
eventBus.on('openModelSetting', (show,data) => {
|
eventBus.on('openModelSetting', (show, data) => {
|
||||||
baseDialog.value?.open()
|
baseDialog.value?.open()
|
||||||
show&& (type.value = show.key)
|
show && (type.value = show.key)
|
||||||
show&& (distance.value = show.value * 1)
|
show && (distance.value = show.value * 1)
|
||||||
typeChange()
|
typeChange()
|
||||||
console.log(show,'data')
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const typeChange = () => {
|
const typeChange = () => {
|
||||||
@ -137,7 +136,6 @@ const save = () => {
|
|||||||
baseDialog.value?.close()
|
baseDialog.value?.close()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -391,7 +391,7 @@ export const useTree = () => {
|
|||||||
let isShift = event.shiftKey
|
let isShift = event.shiftKey
|
||||||
let isCtrl = event.ctrlKey
|
let isCtrl = event.ctrlKey
|
||||||
if (!isCtrl || !isShift) {
|
if (!isCtrl || !isShift) {
|
||||||
let source_ids:any = [];
|
let source_ids: any = [];
|
||||||
// 判断是否是图层文件
|
// 判断是否是图层文件
|
||||||
if (treeNode.sourceType == "directory") {
|
if (treeNode.sourceType == "directory") {
|
||||||
// 获取treeNode下面的所有souer_id
|
// 获取treeNode下面的所有souer_id
|
||||||
|
|||||||
@ -232,7 +232,7 @@ eventBus.on('openDialog', async (sourceType: any, id: any) => {
|
|||||||
case 'model':
|
case 'model':
|
||||||
currentComponent.value = modelObject
|
currentComponent.value = modelObject
|
||||||
await nextTick()
|
await nextTick()
|
||||||
dynamicComponentRef.value?.open(id)
|
dynamicComponentRef.value?.open(id, 'model')
|
||||||
break
|
break
|
||||||
case 'pressModel':
|
case 'pressModel':
|
||||||
currentComponent.value = flat
|
currentComponent.value = flat
|
||||||
|
|||||||
Reference in New Issue
Block a user