239 lines
7.6 KiB
Vue
239 lines
7.6 KiB
Vue
<template>
|
|
<Dialog ref="baseDialog" title="实体墙属性" left="180px" top="100px" className="wall-stereoscopic"
|
|
:closeCallback="closeCallback">
|
|
<template #content>
|
|
<span class="custom-divider"></span>
|
|
<div class="div-item">
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="label">名称</span>
|
|
<input class="input" maxlength="40" type="text" v-model="entityOptions.name">
|
|
</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>
|
|
<div class="input-number input-number-unit-1">
|
|
<input class="input" type="number" title="" data-min="0.01" min="0.01" max="999999"
|
|
v-model="entityOptions.width" @input="$handleInputLimit">
|
|
<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-1">
|
|
<input class="input" type="number" title="" min="0" max="999999999"
|
|
v-model="entityOptions.extrudedHeight" @input="$handleInputLimit">
|
|
<span class="unit">m</span>
|
|
<span class="arrow"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col material-box">
|
|
<span class="label">拐角类型</span>
|
|
<el-select class="input input-select input-select-line-type"
|
|
v-model="entityOptions.material">
|
|
<el-option v-for="item in material" :key="item.key" :label="item.name" :value="item.key">
|
|
<i class="yj-custom-icon" :class="item.icon"></i>
|
|
{{ item.name }}
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="col material-box">
|
|
<span class="label">墙体样式</span>
|
|
<el-select class="input input-select input-select-line-type"
|
|
v-model="entityOptions.material">
|
|
<template #label="{ label, value }">
|
|
<i class="yj-custom-icon" :class="material[value].icon"></i>
|
|
{{ label }}
|
|
</template>
|
|
<el-option v-for="item in material" :key="item.key" :label="item.name" :value="item.key">
|
|
<div style="display: flex; align-items: center;">
|
|
<i class="yj-custom-icon" :class="item.icon"></i>
|
|
{{ item.name }}
|
|
</div>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<span class="label">墙体闭合</span>
|
|
<input class="btn-switch" type="checkbox" v-model="entityOptions.noseToTail">
|
|
</div>
|
|
<div class="col">
|
|
</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">
|
|
<labelStyle :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>
|
|
</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 { ElMessage, ElMessageBox } from 'element-plus'
|
|
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, getSelectedNodes, cusRemoveNode } = useTreeNode()
|
|
|
|
const baseDialog: any = ref(null);
|
|
const eventBus: any = inject("bus");
|
|
const material = ref([
|
|
{
|
|
name: '纯色墙',
|
|
value: '纯色墙',
|
|
key: 0,
|
|
icon: 'icon-wall'
|
|
},
|
|
{
|
|
name: '红砖墙',
|
|
value: '红砖墙',
|
|
key: 1,
|
|
icon: 'icon-wall-brick1'
|
|
},
|
|
{
|
|
name: '黄砖墙',
|
|
value: '黄砖墙',
|
|
key: 2,
|
|
icon: 'icon-wall-brick2'
|
|
},
|
|
{
|
|
name: '灰瓷墙',
|
|
value: '灰瓷墙',
|
|
key: 3,
|
|
icon: 'icon-wall-brick3'
|
|
}
|
|
])
|
|
eventBus.on("openStandTextAdd", () => {
|
|
baseDialog.value?.open()
|
|
});
|
|
const activeName = ref('1')
|
|
const entityOptions: any = ref({});
|
|
let originalOptions: any
|
|
let that: any
|
|
const colorRef = ref(null)
|
|
const open = async (id: any) => {
|
|
that = window.earth.entityMap.get('aaa')
|
|
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
|
|
console.log('params', params)
|
|
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 = () => {
|
|
close()
|
|
ElMessageBox.confirm('此操作将永久删除节点及所有子节点, 是否继续?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
})
|
|
.then(async () => {
|
|
let node = window.treeObj.getNodeByParam('id', that.options.id, null)
|
|
let source_ids = cusRemoveNode(window.treeObj, [node])
|
|
const res = await TreeApi.removeDirectory({ ids: source_ids })
|
|
if (res.code == 0 || res.code == 200) {
|
|
ElMessage({
|
|
message: '删除成功',
|
|
type: 'success'
|
|
})
|
|
that.remove()
|
|
(window as any)._entityMap.delete(source_ids[0])
|
|
} else {
|
|
ElMessage({
|
|
message: res.msg || '删除失败',
|
|
type: 'error'
|
|
})
|
|
}
|
|
})
|
|
.catch(() => {
|
|
// 用户点击取消，不执行任何操作
|
|
})
|
|
}
|
|
const nodeEdit = () => {
|
|
that.nodeEdit()
|
|
}
|
|
|
|
const closeCallback = () => {
|
|
entityOptions.value.originalOptions = structuredClone(originalOptions)
|
|
that.positionEditing = false
|
|
that.reset()
|
|
eventBus?.emit("destroyComponent")
|
|
}
|
|
|
|
defineExpose({
|
|
open,
|
|
close
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss"></style> |