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="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 { 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
            }
        }
    },
    methods: {
        onCancel() {
            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);
                    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;

        },
        init(pt, modelId) {
            if (pt) {
                this.form.x = pt[0]
                this.form.y = pt[1]
                this.form.z = pt[2]
            } else {
                this.form.x = 0
                this.form.y = 0
                this.form.z = 0
            }
            this.saveData.x = this.form.x;
            this.saveData.y = this.form.y;
            this.saveData.z = this.form.z;
            let modelInfo = this.me.models.find(m => m.modelId == modelId);
            this.form.rotateZ = modelInfo?.bimCfg?.rotateZ || 0;
            this.modelId = 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;
        },

        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;

    .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>