249 lines
8.4 KiB
Vue
249 lines
8.4 KiB
Vue
<template>
|
|
<div class="move-model">
|
|
<el-form ref="form" :model="form" label-width="40px">
|
|
<div class="move-button">
|
|
<el-button type="primary" @click="doModelMove">
|
|
<svg-icon icon-class="position" /> 在地图上移动模型
|
|
</el-button>
|
|
|
|
</div>
|
|
<div class="nav-title">位置
|
|
|
|
</div>
|
|
<el-form-item label="经度">
|
|
<el-input v-model="form.x"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="纬度">
|
|
<el-input v-model="form.y"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="高度">
|
|
<el-input v-model="form.z"></el-input>
|
|
</el-form-item>
|
|
<div class="button-group">
|
|
<el-button type="primary" @click="updatePosition">更新位置</el-button>
|
|
|
|
</div>
|
|
<template v-if="isClient">
|
|
<template v-if="clientEditMode">
|
|
<el-button type="primary" @click="doSaveEditData">保存</el-button>
|
|
<el-button @click="doCancelEditMode">取消编辑旋转模式</el-button>
|
|
</template>
|
|
<el-button v-else type="primary" @click="updateRotate">更新旋转角度</el-button>
|
|
</template>
|
|
<template v-else>
|
|
<div class="nav-title">旋转</div>
|
|
<el-form-item label="绕X轴">
|
|
<el-slider v-model="form.rotateX" :min="-180" :max="180"></el-slider>
|
|
<el-input-number v-model="form.rotateX" placeholder="请输入旋转角度" :min="-180"
|
|
:max="180"></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="绕Y轴">
|
|
<el-slider v-model="form.rotateY" :min="-180" :max="180"></el-slider>
|
|
<el-input-number v-model="form.rotateY" placeholder="请输入旋转角度" :min="-180"
|
|
:max="180"></el-input-number>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="绕Z轴">
|
|
<el-slider v-model="form.rotateZ" :min="-180" :max="180"></el-slider>
|
|
<el-input-number v-model="form.rotateZ" placeholder="请输入旋转角度" :min="-180"
|
|
:max="180"></el-input-number>
|
|
</el-form-item>
|
|
<div class="button-group">
|
|
<el-button type="primary" @click="updateRotate">更新旋转角度</el-button>
|
|
</div>
|
|
</template>
|
|
<div class="footer-btn">
|
|
<el-button @click="resetRotate">清除模型偏移和旋转</el-button>
|
|
<el-button type="primary" @click="onSubmit">保存</el-button>
|
|
<el-button @click="onCancel">取消</el-button>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ElMessage, ElTooltip } from 'element-plus';
|
|
import { updateBimModel } from "@/api/bim/bimModel"
|
|
import SAPITools from './sapiTools.js'
|
|
import APITools from './apiTools.js'
|
|
export default {
|
|
props: {
|
|
me: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
isClient: false,
|
|
modelId: null,
|
|
movePoint: null,
|
|
form: {
|
|
x: 0,
|
|
y: 0,
|
|
z: 0,
|
|
rotateX: 0,
|
|
rotateY: 0,
|
|
rotateZ: 0,
|
|
|
|
},
|
|
saveData: {
|
|
type: '',
|
|
x: 0,
|
|
y: 0,
|
|
z: 0,
|
|
rotateX: 0,
|
|
rotateY: 0,
|
|
rotateZ: 0,
|
|
|
|
},
|
|
movePoint: null,
|
|
clientEditMode: false,
|
|
}
|
|
},
|
|
methods: {
|
|
doSaveEditData() {
|
|
this.clientEditMode = false;
|
|
api.Edit.setEditMode("")
|
|
api.Edit.save(d => {
|
|
let m = d.model.find(it => it.id == this.modelId);
|
|
this.saveData.direction = {
|
|
flyto: true,
|
|
matrix: m.matrix,
|
|
rotate: m.rotate,
|
|
transform: m.transform
|
|
}
|
|
});
|
|
},
|
|
doCancelEditMode() {
|
|
this.clientEditMode = false;
|
|
api.Edit.setEditMode("")
|
|
},
|
|
doModelMove() {
|
|
ElMessage.info("左键单击选择移动位置，右键单击结束操作！");
|
|
if (this.me.bimCfg.clientApi) {
|
|
APITools.moveToPosition(this);
|
|
} else {
|
|
APITools.moveToPosition(this);
|
|
}
|
|
},
|
|
onCancel() {
|
|
this.resetPosition();
|
|
this.me.showMove = false;
|
|
this.me.activeMenu = -1;
|
|
},
|
|
onSubmit() {
|
|
this.$modal.confirm("确定保存吗？").then(() => {
|
|
let model = this.me.models.find(model => model.modelId == this.modelId);
|
|
if (model) {
|
|
this.saveData.hideParts = model.bimCfg?.hideParts || [];
|
|
this.saveData.direction = this.saveData.direction || model.bimCfg?.direction;
|
|
model.bimConfig = JSON.stringify(this.saveData);
|
|
model.bimCfg = this.saveData;
|
|
updateBimModel(model).then(res => {
|
|
this.$message.success("保存成功");
|
|
this.me.showMove = false;
|
|
this.me.activeMenu = -1;
|
|
});
|
|
}
|
|
});
|
|
},
|
|
initData(modelId) {
|
|
this.modelId = modelId;
|
|
this.saveData.type = this.me.bimCfg.clientApi ? 'api' : 'sapi'
|
|
this.isClient = this.me.bimCfg.clientApi
|
|
let modelInfo = this.me.models.find(m => m.modelId == modelId);
|
|
if (modelInfo) {
|
|
let cfg = modelInfo.bimCfg;
|
|
this.form.x = cfg?.x || 0;
|
|
this.form.y = cfg?.y || 0;
|
|
this.form.z = cfg?.z || 0;
|
|
this.form.rotateZ = cfg?.rotateZ || 0;
|
|
|
|
|
|
} else {
|
|
this.$message.error("模型信息不存在");
|
|
}
|
|
this.saveData.x = this.form.x;
|
|
this.saveData.y = this.form.y;
|
|
this.saveData.z = this.form.z;
|
|
this.saveData.rotateZ = this.form.rotateZ;
|
|
|
|
},
|
|
resetPosition() {
|
|
let modelInfo = this.me.models.find(model => model.modelId == this.modelId);
|
|
if (modelInfo) {
|
|
let cfg = modelInfo.bimCfg;
|
|
let x = cfg?.x || 0;
|
|
let y = cfg?.y || 0;
|
|
let z = cfg?.z || 0;
|
|
let rotateZ = cfg?.rotateZ || 0;
|
|
if (x * 1 + y * 1 + z * 1 != 0) {
|
|
api.Model.moveToPosition([x, y, z], 0, this.modelId)
|
|
}
|
|
if (rotateZ * 1 != 0) {
|
|
api.Model.rotate(0, 0, rotateZ, this.modelId)
|
|
}
|
|
}
|
|
},
|
|
updatePosition() {
|
|
api.Model.moveToPosition([this.form.x, this.form.y, this.form.z], 0, this.modelId)
|
|
this.saveData.x = this.form.x;
|
|
this.saveData.y = this.form.y;
|
|
this.saveData.z = this.form.z;
|
|
if (this.saveData.rotateZ != 0) {
|
|
api.Model.rotate(0, 0, this.saveData.rotateZ, this.modelId)
|
|
}
|
|
},
|
|
|
|
updateRotate() {
|
|
if (this.isClient) {
|
|
api.Edit.setEditMode("Rotate")
|
|
this.clientEditMode = true;
|
|
} else {
|
|
api.Model.rotateForEdit(this.form.rotateX, this.form.rotateY, this.form.rotateZ, this.modelId)
|
|
}
|
|
this.saveData.rotateZ = this.form.rotateZ;
|
|
},
|
|
resetRotate() {
|
|
api.Model.clearRotation(this.modelId)
|
|
this.saveData = {
|
|
x: 0,
|
|
y: 0,
|
|
z: 0,
|
|
rotateZ: 0
|
|
}
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.move-model {
|
|
padding: 0px 10px 20px;
|
|
|
|
.move-button {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 45px;
|
|
}
|
|
|
|
.nav-title {
|
|
background: linear-gradient(45deg, #00000033, transparent);
|
|
line-height: 40px;
|
|
padding-left: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.button-group {
|
|
margin-bottom: 10px;
|
|
text-align: right;
|
|
}
|
|
|
|
.footer-btn {
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style> |