YZProjectCloud/yanzhu-ui-vue3/src/views/bim/bimSetting/MoveModel.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>
            <div class="nav-title">旋转</div>
            <el-form-item label="绕X轴">
                <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>
            <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"
export default {
    props: {
        me: {
            type: Object,
            default: () => ({}),
        },

    },
    data() {
        return {
            modelId: null,
            movePoint: null,
            form: {
                x: 0,
                y: 0,
                z: 0,
                rotateZ: 0

            },
            saveData: {
                x: 0,
                y: 0,
                z: 0,
                rotateZ: 0
            },
            movePoint: null
        }
    },
    methods: {
        doModelMove() {
            ElMessage.info("左键单击选择移动位置，右键单击结束操作！");
            let that = this;
            api.Public.event("LEFT_CLICK", ((n) => {
                api.Public.pickupCoordinate(true, ((n) => {
                    api.Public.convertWorldToCartographicLocation(n, m => {
                        api.Model.moveToPosition(m, 0, this.modelId)
                        if (this.saveData.rotateZ != 0) {
                            api.Model.rotate(0, 0, this.saveData.rotateZ, this.modelId)
                        }
                        that.movePoint = m;
                    });
                }
                ))
            }
            )),
                api.Public.event("RIGHT_CLICK", ((n) => {
                    api.Public.clearHandler(),
                        api.Public.pickupCoordinate(false);
                    ElMessage.info("已结束模型移动！"),
                        that.activeMenu = -1;
                    let pt = that.movePoint;
                    this.form.x = pt[0]
                    this.form.y = pt[1]
                    this.form.z = pt[2]
                    this.saveData.x = this.form.x;
                    this.saveData.y = this.form.y;
                    this.saveData.z = this.form.z;
                }));
        },
        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) {
                    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;
            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() {
            api.Model.rotate(0, 0, 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>