simulation-front/src/views/modelLibrary/components/formPerfectSensor.vue

<template>
    <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="160px">
            <div class="inputBox flexBox">
                <span class="label">传感器ID</span>
                <div>{{ form.sensorCode }}</div>
            </div>
            <el-form-item label="传感器名称:" prop="sensorName">
                <el-input
                    placeholder="请输入"
                    maxlength="60"
                    v-autoTrim="{ obj: form, key: 'sensorName' }"
                    v-model="form.sensorName"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="传感器描述:" prop="description">
                <el-input
                    v-autoTrim="{
                        obj: form,
                        key: 'description',
                    }"
                    v-model="form.description"
                    type="textarea"
                    placeholder="请输入传感器描述"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                    maxlength="200"
                ></el-input>
            </el-form-item>

            <div class="titlePanel">
                <div class="titlePanelBor">内参</div>
            </div>
            <el-form-item label="盲区距离(m):" prop="nearDistance">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'nearDistance' }"
                    v-model="form.nearDistance"
                    @change="inputChange"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="探测距离(m):" prop="farDistance">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'farDistance' }"
                    v-model="form.farDistance"
                    @change="inputChange"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="水平视场角左(deg):" prop="fovHLeft">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'fovHLeft' }"
                    v-model="form.fovHLeft"
                    @change="inputChange"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="水平视场角右(deg):" prop="fovHRight">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'fovHRight' }"
                    v-model="form.fovHRight"
                    @change="inputChange"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="垂直视场角顶(deg):" prop="fovVTop">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'fovVTop' }"
                    v-model="form.fovVTop"
                    @change="inputChange"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="垂直视场角底(deg):" prop="fovVBottom">
                <el-input
                    placeholder="请输入"
                    maxlength="12"
                    v-autoTrim="{ obj: form, key: 'fovVBottom' }"
                    v-model="form.fovVBottom"
                    @change="inputChange"
                >
                </el-input>
            </el-form-item>

            <div class="titlePanel">
                <div class="titlePanelBor">其他</div>
            </div>
            <el-form-item label="显示探测锥:" prop="rangeDisplay">
                <el-radio v-model="form.rangeDisplay" label="1">是</el-radio>
                <el-radio v-model="form.rangeDisplay" label="0">否</el-radio>
            </el-form-item>
            <el-form-item label="最大目标物数量(个):" prop="maxObjects">
                <el-input
                    placeholder="请输入"
                    maxlength="9"
                    v-autoTrim="{ obj: form, key: 'maxObjects' }"
                    v-model="form.maxObjects"
                >
                </el-input>
            </el-form-item>
            <el-form-item label="坐标系:" prop="coordinateSystem">
                <el-select v-model="form.coordinateSystem">
                    <el-option
                        v-for="item in coordinateSystemList"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="目标物筛选:" prop="targetFilter">
                <el-checkbox
                    :indeterminate="isIndeterminate"
                    v-model="checkAll"
                    @change="handleCheckAllChange"
                    >全选</el-checkbox
                >
                <el-checkbox-group
                    v-model="form.targetFilter"
                    @change="handleCheckedTargetChange"
                >
                    <el-checkbox
                        v-for="target in targetOptions"
                        :label="target.code"
                        :key="target.code"
                        >{{ target.caption }}</el-checkbox
                    >
                </el-checkbox-group>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
//import  from '';

export default {
    name: "formPerfectSensor", // form-完美传感器
    components: {},
    data() {
        // 校验非负且最多4位小数
        let validateNum = (rule, value, callback) => {
            !/^(0|[1-9][0-9]*)(\.\d{1,4})?$/.test(value) &&
                callback(new Error(rule.message));
            callback();
        };
        // 校验不大于1000
        let validateNoMore1000 = (rule, value, callback) => {
            if (value > 1000) {
                callback(new Error(rule.message));
                return;
            }
            callback();
        };
        // 校验不大于90
        let validateNoMore90 = (rule, value, callback) => {
            if (value > 90) {
                callback(new Error(rule.message));
                return;
            }
            callback();
        };
        // 校验不小于1且不大于20的正整数
        let validateNumA = (rule, value, callback) => {
            if (value < 1 || value > 20) {
                callback(new Error(rule.message));
                return;
            }

            !/^[1-9]+[0]*$/.test(value) && callback(new Error(rule.message));
            callback();
        };

        return {
            coordinateSystemList: [],
            checkAll: false,
            isIndeterminate: false,
            targetOptions: [],
            form: {
                id: "", // id
                sensorCode: "", // 传感器编码
                sensorName: "", // 传感器名称
                description: "", // 传感器描述
                nearDistance: "", // 盲区距离
                farDistance: "", // 探测距离
                fovHLeft: "", // 水平现场角左
                fovHRight: "", // 水平现场角右
                fovVTop: "", // 垂直现场角顶
                fovVBottom: "", // 垂直现场角底
                rangeDisplay: "1", // 显示探测锥
                maxObjects: "", // 最大目标物个数
                coordinateSystem: "", // 坐标系
                targetFilter: [], // 目标物筛选
                share: "", // 是否分享
            },
            rules: {
                sensorName: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                description: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
                nearDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                ],
                farDistance: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNoMore1000,
                        message: "请输入不大于1000的非负数",
                        trigger: ["blur"],
                    },
                ],
                fovHLeft: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNoMore90,
                        message: "请输入不大于90的非负数",
                        trigger: ["blur"],
                    },
                ],
                fovHRight: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNoMore90,
                        message: "请输入不大于90的非负数",
                        trigger: ["blur"],
                    },
                ],
                fovVTop: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNoMore90,
                        message: "请输入不大于90的非负数",
                        trigger: ["blur"],
                    },
                ],
                fovVBottom: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNum,
                        message: "请输入最多带有4位小数的非负数",
                        trigger: ["blur"],
                    },
                    {
                        validator: validateNoMore90,
                        message: "请输入不大于90的非负数",
                        trigger: ["blur"],
                    },
                ],
                rangeDisplay: [
                    { required: true, message: "请选择", trigger: "change" },
                ],
                maxObjects: [
                    { required: true, message: "请输入", trigger: "blur" },
                    {
                        validator: validateNumA,
                        message: "请输入不小于1且不大于20的正整数",
                        trigger: ["blur"],
                    },
                ],
                coordinateSystem: [
                    { required: true, message: "请选择", trigger: "change" },
                ],
                targetFilter: [
                    { required: true, message: "请选择", trigger: "change" },
                ],
            },
        };
    },

    computed: {},

    methods: {
        showInfo(id) {
            this.$axios({
                method: "post",
                url: this.$api.modelLibrary.getOgtInfo,
                data: {
                    id,
                },
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.$refs.form.clearValidate();
                    this.form = res.info;
                    this.form.targetFilter = res.info.targetFilter.split(",");
                    // 传回当前展示form的share，从而改变按钮的展示
                    this.$emit("changeShare", this.form);
                    // 数据加载完毕，可展示canvas
                    this.$emit("showDone");
                } else {
                    this.$message.error(res.message || "获取失败");
                }
            });
        },
        save(isAdd = false) {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // 判断是否新增
                    if (isAdd) {
                        this.form.id = "";
                    }

                    let data = {
                        ...this.form,
                        targetFilter: this.form.targetFilter.join(","),
                    };

                    this.$axios({
                        method: "post",
                        url: this.$api.modelLibrary.saveOgt,
                        data,
                    }).then((res) => {
                        if (res.code == 200 && res.info) {
                            this.form.id = res.info.id;
                            this.form.share = res.info.share;
                            this.$message.success("保存成功");
                            this.$emit("changeShare", this.form);
                            this.$emit("getList");
                        } else {
                            this.$message.error(res.message || "保存失败");
                        }
                    });
                }
            });
        },
        share() {
            let data = {
                ...this.form,
                targetFilter: this.form.targetFilter.join(","),
            };

            this.$axios({
                method: "post",
                url: this.$api.modelLibrary.shareOgt,
                data,
            }).then((res) => {
                if (res.code == 200) {
                    this.$message.success("分享成功");
                    this.$emit("getList");
                } else {
                    this.$message.error(res.message || "分享失败");
                }
            });
        },
        cancel() {
            if (this.form.id) {
                // 取消时有id则重新请求表单
                this.showInfo(this.form.id);
            } else {
                // 清空
                this.$emit("clearForm");
            }
        },
        handleCheckAllChange(val) {
            this.form.targetFilter = val
                ? this.targetOptions.map((i) => i.code)
                : [];
            this.isIndeterminate = false;
        },
        handleCheckedTargetChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.form.targetFilter.length;
            this.isIndeterminate =
                checkedCount > 0 && checkedCount < this.targetOptions.length;
        },
        inputChange() {
            if (
                this.form.farDistance === "" ||
                this.form.nearDistance === "" ||
                this.form.fovHLeft === "" ||
                this.form.fovHRight === "" ||
                this.form.fovVTop === "" ||
                this.form.fovVBottom === ""
            )
                return;
            this.$emit("inputChange", {
                n: +this.form.nearDistance,
                f: +this.form.farDistance,
                hl: +this.form.fovHLeft,
                hr: +this.form.fovHRight,
                vt: +this.form.fovVTop,
                vb: +this.form.fovVBottom,
            });
        },
    },

    async mounted() {
        await this.$dicsListsInit({
            coordinateSystemList: "coordinate",
            targetOptions: "targetFilter",
        });
    },
};
</script>

<style lang='less' scoped>
@import "../common/util.less";
</style>