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

<template>
    <div class="handleConfigListPanel">
        <div v-bind:class="{ isActive: isActiveA }">
            <div class="titlePanel">
                <i
                    class="el-icon el-icon-caret-right"
                    @click="handleChange('isActiveA')"
                ></i>
                <span class="title" @click="handleChange('isActiveA')">{{
                    configTitleList[0]
                }}</span>
                <i
                    class="el-icon el-icon-circle-plus-outline"
                    @click="add('camera', 0)"
                    v-if="showBtns"
                ></i>
            </div>
            <ul class="listPanel">
                <li
                    class="content"
                    v-for="(item, index) in configList.camera"
                    :key="item.id"
                >
                    <div
                        class="nameBox"
                        v-bind:class="{
                            isCur:
                                curOne.name === 'camera' &&
                                curOne.index === index,
                        }"
                        @click="configHandle('camera', index)"
                    >
                        <i class="sensorIcon sensorIconA"></i>
                        <span class="name">{{ item.sensorName }}</span>
                    </div>
                    <i
                        class="el-icon el-icon-delete"
                        v-if="showBtns"
                        @click="delOne('camera', index)"
                    ></i>
                </li>
            </ul>
        </div>

        <div v-bind:class="{ isActive: isActiveB }">
            <div class="titlePanel">
                <i
                    class="el-icon el-icon-caret-right"
                    @click="handleChange('isActiveB')"
                ></i>
                <span class="title" @click="handleChange('isActiveB')">{{
                    configTitleList[1]
                }}</span>
                <i
                    class="el-icon el-icon-circle-plus-outline"
                    @click="add('ogt', 1)"
                    v-if="showBtns"
                ></i>
            </div>
            <ul class="listPanel">
                <li
                    class="content"
                    v-for="(item, index) in configList.ogt"
                    :key="item.id"
                >
                    <div
                        class="nameBox"
                        v-bind:class="{
                            isCur:
                                curOne.name === 'ogt' && curOne.index === index,
                        }"
                        @click="configHandle('ogt', index)"
                    >
                        <i class="sensorIcon sensorIconB"></i>
                        <span class="name">{{ item.sensorName }}</span>
                    </div>
                    <i
                        class="el-icon el-icon-delete"
                        v-if="showBtns"
                        @click="delOne('ogt', index)"
                    ></i>
                </li>
            </ul>
        </div>

        <div v-bind:class="{ isActive: isActiveC }">
            <div class="titlePanel">
                <i
                    class="el-icon el-icon-caret-right"
                    @click="handleChange('isActiveC')"
                ></i>
                <span class="title" @click="handleChange('isActiveC')">{{
                    configTitleList[2]
                }}</span>
                <i
                    class="el-icon el-icon-circle-plus-outline"
                    @click="add('lidar', 2)"
                    v-if="showBtns"
                ></i>
            </div>
            <ul class="listPanel">
                <li
                    class="content"
                    v-for="(item, index) in configList.lidar"
                    :key="item.id"
                >
                    <div
                        class="nameBox"
                        v-bind:class="{
                            isCur:
                                curOne.name === 'lidar' &&
                                curOne.index === index,
                        }"
                        @click="configHandle('lidar', index)"
                    >
                        <i class="sensorIcon sensorIconC"></i>
                        <span class="name">{{ item.sensorName }}</span>
                    </div>
                    <i
                        class="el-icon el-icon-delete"
                        v-if="showBtns"
                        @click="delOne('lidar', index)"
                    ></i>
                </li>
            </ul>
        </div>

        <div v-bind:class="{ isActive: isActiveE }">
            <div class="titlePanel">
                <i
                    class="el-icon el-icon-caret-right"
                    @click="handleChange('isActiveE')"
                ></i>
                <span class="title" @click="handleChange('isActiveE')">{{
                    configTitleList[3]
                }}</span>
                <i
                    class="el-icon el-icon-circle-plus-outline"
                    @click="add('gps', 3)"
                    v-if="showBtns"
                ></i>
            </div>
            <ul class="listPanel">
                <li
                    class="content"
                    v-for="(item, index) in configList.gps"
                    :key="item.id"
                >
                    <div
                        class="nameBox"
                        v-bind:class="{
                            isCur:
                                curOne.name === 'gps' && curOne.index === index,
                        }"
                        @click="configHandle('gps', index)"
                    >
                        <i class="sensorIcon sensorIconE"></i>
                        <span class="name">{{ item.sensorName }}</span>
                    </div>
                    <i
                        class="el-icon el-icon-delete"
                        v-if="showBtns"
                        @click="delOne('gps', index)"
                    ></i>
                </li>
            </ul>
        </div>

        <el-dialog
            v-show="showBtns"
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="690px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                label-width="108px"
            >
                <el-form-item label="传感器:" prop="sensorId">
                    <el-select v-model="form.sensorId" @change="sensorChange">
                        <el-option
                            v-for="item in sensorNameList"
                            :label="item.sensorName"
                            :value="item.id"
                            :key="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="传感器描述:" prop="sensorDescription">
                    <el-input
                        v-autoTrim="{
                            obj: form,
                            key: 'sensorDescription',
                        }"
                        v-model="form.sensorDescription"
                        type="textarea"
                        placeholder="请输入"
                        :autosize="{ minRows: 4, maxRows: 4 }"
                        maxlength="200"
                        disabled
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button type="primary" @click="diaConfirm">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from "vuex";

export default {
    name: "handleConfigList",
    components: {},
    data() {
        return {
            isActiveA: false,
            isActiveB: false,
            isActiveC: false,
            isActiveD: false,
            isActiveE: false,
            currentType: "", // 当前操作传感器的类型
            dialogTitle: "",
            sensorNameList: [], // 选择添加传感器的列表
            // titleTexts: ['摄像头','完美传感器','激光雷达','毫米波雷达','GPS'],
            dialogVisible: false,
            form: {
                sensorName: "",
                sensorDescription: "",
                sensorId: "",
                sensorType: ""
            },
            rules: {
                sensorId: [
                    { required: true, message: "请选择", trigger: "change" },
                ],
                sensorDescription: [
                    { required: true, message: "请输入", trigger: "blur" },
                ],
            },
        };
    },
    props: {
        titleCode: {
            default: 0,
            type: Number,
        },
        // 是否展示右侧编辑按钮
        showBtns: {
            default: true,
            type: Boolean,
        },
        configList: {
            default: {},
            type: Object,
        },
        curOne: {
            default: {
                name: "",
                index: -1,
            },
            type: Object,
        },
    },

    computed: {
        ...mapState(["configTitleList"]),
    },

    methods: {
        handleChange(name) {
            if (this[name]) {
                this[name] = false;
            } else {
                this[name] = true;
            }
        },
        /**
         * type传感器类型
         * index传感器索引
         */
        add(type, index) {
            let apis = [
                this.$api.modelLibrary.getMyCameraList,
                this.$api.modelLibrary.getMyOgtList,
                this.$api.modelLibrary.getMyLidarList,
                this.$api.modelLibrary.getMyGpsList,
            ];
            this.currentType = type;
            this.dialogTitle = "添加" + this.configTitleList[index];
            this.sensorNameList = [];

            this.$axios({
                method: "post",
                url: apis[index],
                data: {},
            }).then((res) => {
                if (res.code == 200 && res.info) {
                    this.sensorNameList = res.info;
                    this.dialogVisible = true;
                    this.$nextTick(()=>{
                        this.$refs.form.resetFields();
                        this.form.sensorName = "";
                        this.form.sensorType = type;
                    });
                } else {
                    this.$message.error(res.message || "获取信息失败");
                }
            });
        },
        sensorChange(id) {
            let val = this.sensorNameList.find((i) => i.id == id);
            this.form.sensorName = val.sensorName;
            this.form.sensorDescription = val.description;
        },
        delOne(type, index) {
            this.$confirm("确认是否删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$emit("delOne", type, index);
            });
        },
        diaConfirm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    let info = this.form;
                    let type = this.currentType;
                    this.$emit("addOne", info, type);
                    this.dialogVisible = false;
                }
            });
        },
        handleClose(done) {
            done();
        },
        configHandle(type, index) {
            let curOne = {
                name: type,
                index,
            };
            this.$emit("curItem", curOne);
        },
    },

    mounted() {
        this.isActive = this.isActiveA;
    },
};
</script>

<style lang='less' scoped>
.handleConfigListPanel {
    width: 200px;
}

.titlePanel {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    cursor: pointer;

    .title {
        flex: 1;
        padding-left: 10px;
        font-weight: bold;
    }

    .el-icon-caret-right {
        transform: rotate(0);
        transition: all 0.3s;
    }
}

.el-icon {
    color: @themeColor;
    font-size: 18px;
}

.listPanel {
    height: 0;
    overflow: hidden;
    transition: all 0.3s;

    .content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: 24px;
        margin-bottom: 15px;
        transition: all 0.3s;

        &:last-child {
            margin-bottom: 45px;
        }

        .nameBox {
            display: flex;
            align-items: center;
            padding: 3px 6px;
            margin-right: 6px;
            cursor: pointer;

            &.isCur {
                background: rgba(81, 149, 247, 0.15);
                border-radius: 17.5px;
                color: @themeColor;
            }
        }

        .el-icon-delete {
            cursor: pointer;
        }

        .name {
            flex: 1;
            margin-left: 5px;
            margin-right: 5px;
            word-break: break-all;
        }

        .sensorIconA {
            background: url("../../../assets/common/image/sensor/01.png") center
                no-repeat;
        }
        .sensorIconB {
            background: url("../../../assets/common/image/sensor/02.png") center
                no-repeat;
        }
        .sensorIconC {
            background: url("../../../assets/common/image/sensor/03.png") center
                no-repeat;
        }
        .sensorIconD {
            background: url("../../../assets/common/image/sensor/04.png") center
                no-repeat;
        }
        .sensorIconE {
            background: url("../../../assets/common/image/sensor/05.png") center
                no-repeat;
        }

        .sensorIcon {
            display: inline-block;
            width: 18px;
            height: 18px;

            background-size: contain;
        }
    }
}

.isActive {
    .el-icon-caret-right {
        transform: rotate(90deg);
        transition: all 0.3s;
    }

    .listPanel {
        height: auto;
        transition: all 0.3s;
    }
}

/deep/ .el-dialog__footer {
    padding: 10px 20px 20px;
    text-align: right;
}

/deep/ .el-dialog__header {
    background-color: #ffffff;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
    color: #909399;
}
</style>