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

<template>
    <div class="sensorModelPanel">
        <model-list
            ref="modelList"
            class="modelList"
            :getListApi="getListApi"
            :showName="showName"
            @showInfo="showInfo"
            @addOne="addOne"
            @delOne="delOne"
            :curOne="curOne"
        ></model-list>
        <div class="contentPanel">
            <toolbarTab
                :isConnect="true"
                position="top"
                :subPageActiveName="subPageActiveName"
                :toolbarItem="subPageList"
                @toolbarClick="toolsControl"
            >
            </toolbarTab>

            <div class="tabContent">
                <form-camera
                    v-show="subPageActiveName === 1"
                    ref="form1"
                    @getList="getList"
                    @changeShare="changeShare"
                    @showDone="showDone"
                    @clearForm="addOne"
                    @inputChange="inputChange"
                ></form-camera>
                <form-perfect-sensor
                    v-show="subPageActiveName === 2"
                    ref="form2"
                    @getList="getList"
                    @changeShare="changeShare"
                    @showDone="showDone"
                    @clearForm="addOne"
                    @inputChange="inputChangeA"
                ></form-perfect-sensor>
                <form-laser-radar
                    v-show="subPageActiveName === 3"
                    ref="form3"
                    @getList="getList"
                    @changeShare="changeShare"
                    @showDone="showDone"
                    @clearForm="addOne"
                    @inputChange="inputChange"
                ></form-laser-radar>
                <!-- <form-millimeter-wave-radar
                    v-show="subPageActiveName === 4"
                ></form-millimeter-wave-radar> -->
                <form-gps
                    v-show="subPageActiveName === 4"
                    ref="form4"
                    @getList="getList"
                    @changeShare="changeShare"
                    @clearForm="addOne"
                ></form-gps>
                <div class="model">
                    <!-- <img :src="imgSrc" width="100%" /> -->
                    <canvas-sensor
                        v-show="subPageActiveName != 2"
                        ref="canvasSensor"
                        :coordinate="coordinate"
                    ></canvas-sensor>
                    <canvas-sensorA
                        v-show="subPageActiveName === 2"
                        ref="canvasSensorA"
                        :coordinate="coordinateA"
                    ></canvas-sensorA>
                </div>
            </div>
            <div class="btns">
                <el-button
                    type="primary"
                    v-show="currentShare === '0' || currentShare === ''"
                    @click="save(false)"
                    >保存</el-button
                >
                <el-button
                    type="primary"
                    v-if="roleCode === '0' || roleCode === '1'"
                    v-show="currentShare === '0'"
                    @click="share"
                    >分享</el-button
                >
                <el-button
                    type="primary"
                    v-show="currentShare === '0' || currentShare === '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 toolbarTab from "@/components/toolbar/toolbarTab";
import { mapState } from "vuex";
import formCamera from "./components/formCamera.vue";
import formPerfectSensor from "./components/formPerfectSensor.vue";
import formLaserRadar from "./components/formLaserRadar.vue";
import formMillimeterWaveRadar from "./components/formMillimeterWaveRadar.vue";
import formGps from "./components/formGps.vue";
import canvasSensor from "./components/canvasSensorModel.vue";
import canvasSensorA from "./components/canvasSensorModelA.vue";

export default {
    name: "sensorModel", // 传感器配置
    components: {
        modelList,
        toolbarTab,
        formCamera,
        formPerfectSensor,
        formLaserRadar,
        formMillimeterWaveRadar,
        formGps,
        canvasSensor,
        canvasSensorA,
    },
    data() {
        return {
            getListApi: this.$api.modelLibrary.getCameraList,
            showName: "sensorName",
            subPageActiveName: 1,
            fromId: 1,
            imgSrc: require("@/assets/common/image/others/carTopView.png"),
            currentShare: "",
            coordinate: { r: 0, h: 0, n: 0 }, // 存放传递给canvas的值
            coordinateA: { r: 0, n: 0, hl: 0, hr: 0 }, // 存放传递给完美传感器canvas的值
            // 用于当前选中项的展示
            curOne: {
                share: "",
                id: "",
            },
        };
    },

    computed: {
        ...mapState(["configTitleList", "roleCode"]),
        subPageList() {
            return [
                {
                    type: "primary",
                    plain: true,
                    title: this.configTitleList[0],
                    disabled: false,
                    api: this.$api.modelLibrary.getCameraList,
                    fromId: 1,
                },
                {
                    type: "primary",
                    plain: true,
                    title: this.configTitleList[1],
                    disabled: false,
                    api: this.$api.modelLibrary.getOgtList,
                    fromId: 2,
                },
                {
                    type: "primary",
                    plain: true,
                    title: this.configTitleList[2],
                    disabled: false,
                    api: this.$api.modelLibrary.getLidarList,
                    fromId: 3,
                },
                {
                    type: "primary",
                    plain: true,
                    title: this.configTitleList[3],
                    disabled: false,
                    api: this.$api.modelLibrary.getGpsList,
                    fromId: 4,
                },
                // {
                //     type: "primary",
                //     plain: true,
                //     title: this.configTitleList[4],
                //     disabled: false,
                //     fromId: 5,
                // },
            ];
        },
    },

    methods: {
        toolsControl(item) {
            this.addOne();
            this.getListApi = item.api;
            this.subPageActiveName = item.fromId;

            this.$nextTick(() => {
                this.getList();
            });

            this.$refs.canvasSensor.clear();
            this.$refs.canvasSensorA.clear();

            this.curOne = {
                share: "",
                id: "",
            };
        },
        showInfo(id) {
            this.$refs[`form${this.subPageActiveName}`].showInfo(id);
        },
        getList() {
            this.$refs.modelList.getList();
        },
        save(isAdd) {
            this.$refs[`form${this.subPageActiveName}`].save(isAdd);
        },
        share() {
            this.$refs[`form${this.subPageActiveName}`].share();
        },
        cancel() {
            this.$refs[`form${this.subPageActiveName}`].cancel();
            this.$refs.canvasSensor.clear();
            this.$refs.canvasSensorA.clear();
        },
        changeShare(form) {
            // 根据form传回的share进行按钮展示
            this.currentShare = form.share;

            // 确定当前展示哪条数据
            this.curOne = {
                share: form.share,
                id: form.id,
            };
        },
        showDone() {
            this.$refs[`form${this.subPageActiveName}`].inputChange();
        },
        addOne() {
            this.$refs[
                `form${this.subPageActiveName}`
            ].$refs.form.resetFields();

            this.$refs[`form${this.subPageActiveName}`].form.sensorCode = "";
            this.$refs[`form${this.subPageActiveName}`].form.share = "";
            this.$refs[`form${this.subPageActiveName}`].form.id = "";

            this.currentShare = "";
            this.$refs.canvasSensor.clear();
            this.$refs.canvasSensorA.clear();

            this.curOne = {
                share: "",
                id: "",
            };
        },
        delOne(id) {
            const delApis = [
                this.$api.modelLibrary.delCameraById,
                this.$api.modelLibrary.delOgtById,
                this.$api.modelLibrary.delLidarById,
                this.$api.modelLibrary.delGpsById,
            ];
            this.$axios({
                method: "post",
                url: delApis[this.subPageActiveName - 1],
                data: {
                    id,
                },
            }).then((res) => {
                if (res.code == 200) {
                    this.$message.success("删除成功");
                    this.$refs.modelList.getList();
                    if (
                        this.$refs[`form${this.subPageActiveName}`].form.id &&
                        id ===
                            this.$refs[`form${this.subPageActiveName}`].form.id
                    ) {
                        this.addOne();
                    }

                    if (id === this.curOne.id) {
                        this.curOne = {
                            share: "",
                            id: "",
                        };
                    }
                } else {
                    this.$message.error(res.message || "删除失败");
                }
            });
        },
        inputChange(data) {
            this.coordinate = data;
        },
        inputChangeA(data) {
            this.coordinateA = data;
        },
    },

    // mounted() {},
};
</script>

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

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

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

    .tabContent {
        display: flex;
        padding-top: 15px;

        .model {
            flex: 1;
            min-width: 300px;
            // padding-left: 40px;
            padding-left: 6%;
            padding-right: 3%;
        }
    }

    .btns {
        padding-top: 30px;
        padding-left: 390px;
    }

    /deep/ .el-tabs__item {
        width: 150px;
    }
}
</style>