@ -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, i, 'lng', 8)" type = "number"
v-model = "entityOptions.center.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 = "entityOptions.center.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 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 ( 'aaa' )
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 >
