simulation-front/src/views/modelLibrary/vehicleModelCanvas.vue

<template>
    <div class="vehicleModelPanel">
        <model-list
            ref="modelList"
            class="modelList"
            @showInfo="showInfo"
            @addOne="addOne"
            @delOne="delOne"
            :getListApi="getListApi"
            :showName="showName"
            :curOne="curOne"
        ></model-list>

        <div class="contentPanel">
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="160px"
            >
                <div class="inputBox flexBox">
                    <span class="label">车辆ID</span>
                    <div>{{ form.vehicleCode }}</div>
                </div>

                <div class="flexBox">
                    <el-form-item label="车辆名称:" prop="vehicleName">
                        <el-input
                            placeholder="请输入"
                            maxlength="60"
                            v-autoTrim="{ obj: form, key: 'vehicleName' }"
                            v-model="form.vehicleName"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="车辆描述:" prop="description">
                        <el-input
                            v-autoTrim="{ obj: form, key: 'description' }"
                            v-model="form.description"
                            placeholder="请输入"
                            maxlength="200"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="车辆模型:" prop="vehicleType">
                        <el-cascader
                            ref="cascader"
                            v-model="form.vehicleType"
                            :options="modelLabelList"
                            :props="props"
                            @change="modelLabelChange"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="车辆模型标识:" prop="modelLabel">
                        <el-input
                            placeholder="请输入"
                            v-autoTrim="{ obj: form, key: 'modelLabel' }"
                            v-model="form.modelLabel"
                            disabled
                        >
                        </el-input>
                    </el-form-item>
                </div>

                <div class="titlePanel">
                    <div class="titlePanelBor">控制参数</div>
                </div>
                <div class="flexBox">
                    <el-form-item label="最大速度(km/h):" prop="maxSpeed">
                        <el-input
                            placeholder="请输入"
                            maxlength="12"
                            v-autoTrim="{ obj: form, key: 'maxSpeed' }"
                            v-model="form.maxSpeed"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="发动机功率(kW):" prop="enginePower">
                        <el-input
                            placeholder="请输入"
                            maxlength="12"
                            v-autoTrim="{ obj: form, key: 'enginePower' }"
                            v-model="form.enginePower"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item
                        label="最大减速度(m/s²):"
                        prop="maxDeceleration"
                    >
                        <el-input
                            placeholder="请输入"
                            maxlength="12"
                            v-autoTrim="{ obj: form, key: 'maxDeceleration' }"
                            v-model="form.maxDeceleration"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item
                        label="最大转向角度(rad):"
                        prop="maxSteeringAngle"
                    >
                        <el-input
                            placeholder="请输入"
                            maxlength="12"
                            v-autoTrim="{ obj: form, key: 'maxSteeringAngle' }"
                            v-model="form.maxSteeringAngle"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="驱动方式:" prop="wheelDrive">
                        <el-select v-model="form.wheelDrive">
                            <el-option
                                v-for="item in wheelDriveList"
                                :label="item.caption"
                                :value="item.code"
                                :key="item.code"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <div class="titlePanel">
                    <div class="titlePanelBor">效率参数</div>
                </div>
                <div class="flexBox">
                    <el-form-item label="总效率:" prop="overallEfficiency">
                        <el-input
                            placeholder="请输入"
                            maxlength="9"
                            v-autoTrim="{ obj: form, key: 'overallEfficiency' }"
                            v-model="form.overallEfficiency"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item
                        label="前表面有效面积(㎡):"
                        prop="frontSurfaceEffective"
                    >
                        <el-input
                            placeholder="请输入"
                            maxlength="12"
                            v-autoTrim="{
                                obj: form,
                                key: 'frontSurfaceEffective',
                            }"
                            v-model="form.frontSurfaceEffective"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item
                        label="空气阻力系数:"
                        prop="airDragCoefficient"
                    >
                        <el-input
                            placeholder="请输入"
                            maxlength="9"
                            v-autoTrim="{
                                obj: form,
                                key: 'airDragCoefficient',
                            }"
                            v-model="form.airDragCoefficient"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item
                        label="滚动阻力系数:"
                        prop="rollingResistanceCoefficient"
                    >
                        <el-input
                            placeholder="请输入"
                            maxlength="9"
                            v-autoTrim="{
                                obj: form,
                                key: 'rollingResistanceCoefficient',
                            }"
                            v-model="form.rollingResistanceCoefficient"
                        >
                        </el-input>
                    </el-form-item>
                </div>

                <div class="titlePanel">
                    <div class="titlePanelBor">几何参数</div>
                </div>
                <div class="flexBox">
                    <el-form-item label="车轮直径(m):" prop="wheelDiameter">
                        <el-input
                            placeholder="请输入"
                            maxlength="12"
                            v-autoTrim="{ obj: form, key: 'wheelDiameter' }"
                            v-model="form.wheelDiameter"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="车前距(m):" prop="frontDistance">
                        <el-input
                            placeholder="请输入"
                            maxlength="12"
                            v-autoTrim="{ obj: form, key: 'frontDistance' }"
                            v-model="form.frontDistance"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="车后距(m):" prop="rearDistance">
                        <el-input
                            placeholder="请输入"
                            maxlength="12"
                            v-autoTrim="{ obj: form, key: 'rearDistance' }"
                            v-model="form.rearDistance"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="车左距(m):" prop="leftDistance">
                        <el-input
                            placeholder="请输入"
                            maxlength="12"
                            v-autoTrim="{ obj: form, key: 'leftDistance' }"
                            v-model="form.leftDistance"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="车右距(m):" prop="rightDistance">
                        <el-input
                            placeholder="请输入"
                            maxlength="12"
                            v-autoTrim="{ obj: form, key: 'rightDistance' }"
                            v-model="form.rightDistance"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="车高(m):" prop="heightDistance">
                        <el-input
                            placeholder="请输入"
                            maxlength="12"
                            v-autoTrim="{ obj: form, key: 'heightDistance' }"
                            v-model="form.heightDistance"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="轴距(m):" prop="wheelbase">
                        <el-input
                            placeholder="请输入"
                            maxlength="12"
                            v-autoTrim="{ obj: form, key: 'wheelbase' }"
                            v-model="form.wheelbase"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="质量(kg):" prop="mass">
                        <el-input
                            placeholder="请输入"
                            maxlength="12"
                            v-autoTrim="{ obj: form, key: 'mass' }"
                            v-model="form.mass"
                        >
                        </el-input>
                    </el-form-item>
                </div>

                <div class="titlePanel">
                    <div class="titlePanelBor">视图</div>
                </div>
                <div class="modelBox">
                    <img v-show="modelImgSrc" :src="modelImgSrc" width="100%" />
                </div>
            </el-form>

            <div class="btns">
                <!-- 新增和私有才能修改和保存 -->
                <!-- 私有才能分享 -->
                <!-- share有值 才能另存为 -->
                <el-button
                    type="primary"
                    v-show="form.share === '0' || form.share === ''"
                    @click="save(false)"
                    >保存</el-button
                >
                <el-button
                    type="primary"
                    v-if="roleCode === '0' || roleCode === '1'"
                    v-show="form.share === '0'"
                    @click="share"
                    >分享</el-button
                >
                <el-button
                    type="primary"
                    v-show="form.share === '0' || form.share === '1'"
                    @click="save(true)"
                    >另存为</el-button
                >
                <el-button type="primary" plain @click="cancel">取消</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import modelList from "./components/modelList.vue";
import { mapState } from "vuex";

export default {
    name: "vehicleModel", // 车辆模型
    components: { modelList },
    data() {
        // 校验非负且最多4位小数
        let validateNum = (rule, value, callback) => {
            !/^(0|[1-9][0-9]*)(\.\d{1,4})?$/.test(value) &&
                callback(new Error(rule.message));
            callback();
        };
        // 校验不大于1
        let validateNoMore1 = (rule, value, callback) => {
            if (value > 1) {
                callback(new Error(rule.message));
                return;
            }
            callback();
        };

        return {
            getListApi: this.$api.modelLibrary.getVehicleList, // 获取列表api
            showName: "vehicleName",
            typeList: [],
            // imgSrc: require("@/assets/common/image/car.png"),
            form: {
                vehicleCode: "", // 车辆ID
                vehicleName: "", // 车辆名称
                description: "", // 车辆描述
                // vehicleType: "", // 车辆类型
                // vehicleModel: "", // 车辆型号
                // vehicleColour: "", // 车辆颜色
                vehicleType: [], // 车辆模型
                modelLabel: "", // 车辆模型标识
                maxSpeed: "", // 最大速度
                enginePower: "", // 发动机功率
                maxDeceleration: "", // 最大减速度
                maxSteeringAngle: "", // 最大转角
                wheelDrive: "", // 驱动方式
                overallEfficiency: "", // 总效率
                frontSurfaceEffective: "", // 前表面有效面积
                airDragCoefficient: "", // 空气阻力系数
                rollingResistanceCoefficient: "", // 滚动阻力系数
                wheelDiameter: "", // 车轮直径
                frontDistance: "", // 车前距
                rearDistance: "", // 车后距
                leftDistance: "", // 车左距
                rightDistance: "", // 车右距
                heightDistance: "", // 车高
                wheelbase: "", // 轴距
                mass: "", // 质量
                share: "", // 分享
                // vehicleImage: "", // 对应的图片相对地址
                id: "",
                vehicleFrontView: "", // 对应的图片相对地址
                vehicleTopView: "", // 对应的图片相对地址
            },
            vehicleTypeList: [],
            vehicleModelList: [],
            vehicleColourList: [],
            wheelDriveList: [],
            rules: {
                vehicleName: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                description: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                // vehicleModel: [
                //     { required: true, message: "请输入", trigger: "blur" },
                // ],
                // vehicleColour: [
                //     { required: true, message: "请输入", trigger: "blur" },
                // ],
                modelLabel: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                maxSpeed: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                enginePower: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                maxDeceleration: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                maxSteeringAngle: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                overallEfficiency: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNoMore1,
                        message: "请输入不大于1的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                frontSurfaceEffective: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                airDragCoefficient: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNoMore1,
                        message: "请输入不大于1的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                rollingResistanceCoefficient: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNoMore1,
                        message: "请输入不大于1的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                wheelDiameter: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                frontDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                rearDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                leftDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                rightDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                heightDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                wheelbase: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                mass: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                wheelDrive: [
                    { required: true, message: "请选择", trigger: "change" },
                ],
                vehicleType: [
                    { required: true, message: "请选择", trigger: "change" },
                ],
            },
            props: {
                multiple: false,
                label: "name",
                value: "code",
            },
            modelLabelList: [],
            modelImgSrc: "",
            // 用于当前选中项的展示
            curOne: {
                share: "",
                id: "",
            },
        };
    },

    computed: {
        ...mapState(["fileHost", "fileUrl", "roleCode"]),
    },

    methods: {
        showInfo(id) {
            this.$axios({
                method: "post",
                url: this.$api.modelLibrary.getVehicleInfo,
                data: {
                    id,
                },
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.$refs.form.clearValidate();
                    this.form = res.info;
                    if (res.info.vehicleFrontView) {
                        this.modelImgSrc = this.getImgUrl(
                            res.info.vehicleFrontView
                        );
                    }

                    this.curOne = {
                        share: res.info.share,
                        id: res.info.id,
                    };
                } else {
                    this.$message.error(res.message || "获取失败");
                }
            });
        },
        save(isAdd) {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // 判断是否新增
                    if (isAdd || this.form.share === "") {
                        this.form.id = "";
                    }

                    this.$axios({
                        method: "post",
                        url: this.$api.modelLibrary.saveVehicle,
                        data: {
                            ...this.form,
                        },
                    }).then((res) => {
                        if (res.code == 200 && res.info) {
                            this.form.id = res.info.id;
                            this.form.share = res.info.share;
                            this.form.vehicleCode = res.info.vehicleCode;
                            this.$message.success("保存成功");
                            this.$refs.modelList.getList();

                            this.curOne = {
                                share: res.info.share,
                                id: res.info.id,
                            };
                        } else {
                            this.$message.error(res.message || "保存失败");
                        }
                    });
                }
            });
        },
        addOne() {
            this.$refs.form.resetFields();
            this.form.vehicleCode = "";
            this.form.vehicleFrontView = "";
            this.form.vehicleTopView = "";
            this.form.share = "";
            this.form.id = "";
            this.modelImgSrc = "";

            this.curOne = {
                share: "",
                id: "",
            };
        },
        delOne(id) {
            this.$axios({
                method: "post",
                url: this.$api.modelLibrary.delVehicleById,
                data: {
                    id,
                },
            }).then((res) => {
                if (res.code == 200) {
                    this.$message.success("删除成功");
                    this.$refs.modelList.getList();
                    if (this.form.id && id === this.form.id) {
                        this.addOne();
                    }

                    if (id === this.curOne.id) {
                        this.curOne = {
                            share: "",
                            id: "",
                        };
                    }
                } else {
                    this.$message.error(res.message || "删除失败");
                }
            });
        },
        share() {
            this.$axios({
                method: "post",
                url: this.$api.modelLibrary.shareVehicle,
                data: {
                    ...this.form,
                },
            }).then((res) => {
                if (res.code == 200) {
                    this.$message.success("分享成功");
                    this.$refs.modelList.getList();
                } else {
                    this.$message.error(res.message || "分享失败");
                }
            });
        },
        cancel() {
            if (this.form.id) {
                // 取消时有id则重新请求表单
                this.showInfo(this.form.id);
            } else {
                // 清空
                this.addOne();
            }
        },
        getImgUrl(addr) {
            let url = "";
            if (process.env.VUE_APP_IS_DEV == "true") {
                url = this.fileHost + this.fileUrl;
            } else {
                url = this.fileUrl;
            }

            let token = localStorage.getItem("Authorization").split(" ")[1];
            let src = `${url}?objectName=${addr}&access_token=${token}`;
            return src;
        },
        modelLabelChange() {
            Object.assign(
                this.form,
                this.$refs.cascader.getCheckedNodes(true)[0].data.vo
            );

            this.modelImgSrc = this.getImgUrl(this.form.vehicleFrontView);
        },
        async getModelLabelList() {
            await this.$axios({
                method: "post",
                url: this.$api.modelLibrary.getVehicleTempTree,
                data: {},
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.modelLabelList = res.info;
                } else {
                    this.$message.error(res.message || "获取车辆模型列表失败");
                }
            });
        },
    },

    async mounted() {
        await this.$dicsListsInit({
            vehicleTypeList: "vehicleType",
            wheelDriveList: "driveType",
        });

        this.getModelLabelList();
    },
};
</script>

<style lang='less' scoped>
.vehicleModelPanel {
    display: flex;
    flex: 1;
    padding: 15px 30px 30px;

    .modelList /deep/ .listPanel {
        min-height: 400px;
        height: calc(100vh - 120px);
    }

    .contentPanel {
        flex: 1;
        padding-left: 30px;
    }

    .inputBox.flexBox {
        margin-bottom: 22px;

        .label {
            width: 138px;
        }

        div {
            line-height: 32px;
        }
    }

    .titlePanel {
        padding: 22px 0;
    }

    .btns {
        padding-top: 30px;
        text-align: center;
    }

    .modelBox {
        width: 60%;
        min-width: 810px;
    }
}
</style>