simulation-front/src/views/sceneLibrary/components/realSceneList.vue

<template>
    <div>
        <div class="tabsBox">
            <div class="myTabsBox myTabsBoxThreeTabs">
                <el-tabs
                    v-model="activeName"
                    type="card"
                    @tab-click="pageControl"
                >
                    <el-tab-pane label="交通事故场景" name="1"></el-tab-pane>
                    <el-tab-pane label="自然驾驶场景" name="2"></el-tab-pane>
                    <el-tab-pane label="标准法规场景" name="3"></el-tab-pane>
                </el-tabs>
            </div>

            <div v-show="activeName === '1'">
                <search-layout>
                    <template slot="searchItem1">
                        <span class="label">场景名称</span>
                        <el-input
                            v-model="searchParamsA.sceneName"
                            size="small"
                            clearable
                            placeholder="请输入"
                            maxlength="60"
                        >
                        </el-input>
                    </template>
                    <template slot="searchItem2">
                        <span class="label">自车驾驶行为</span>
                        <el-select v-model="searchParamsA.selfDriving" multiple>
                            <el-option
                                v-for="item in selfDrivingList"
                                :label="item.caption"
                                :value="item.code"
                                :key="item.code"
                            ></el-option>
                        </el-select>
                    </template>
                    <template slot="searchItem3">
                        <span class="label">目标驾驶行为</span>
                        <el-select
                            v-model="searchParamsA.targetDriving"
                            multiple
                        >
                            <el-option
                                v-for="item in targetDrivingList"
                                :label="item.caption"
                                :value="item.code"
                                :key="item.code"
                            ></el-option>
                        </el-select>
                    </template>
                    <template slot="searchItem4">
                        <span class="label">自车反应行为</span>
                        <el-select
                            v-model="searchParamsA.selfReaction"
                            multiple
                        >
                            <el-option
                                v-for="item in selfReactionList"
                                :label="item.caption"
                                :value="item.code"
                                :key="item.code"
                            ></el-option>
                        </el-select>
                    </template>
                    <template slot="searchItem5">
                        <span class="label">冲突行为</span>
                        <el-select
                            v-model="searchParamsA.conflictBehavior"
                            multiple
                        >
                            <el-option
                                v-for="item in conflictBehaviorList"
                                :label="item.caption"
                                :value="item.code"
                                :key="item.code"
                            ></el-option>
                        </el-select>
                    </template>
                    <template slot="searchItem6">
                        <span class="label">冲突类型</span>
                        <el-select
                            v-model="searchParamsA.conflictType"
                            multiple
                        >
                            <el-option
                                v-for="item in conflictTypeList"
                                :label="item.caption"
                                :value="item.code"
                                :key="item.code"
                            ></el-option>
                        </el-select>
                    </template>
                    <template slot="searchBtn1">
                        <el-button type="primary" @click="doSearchA"
                            >查询</el-button
                        >
                    </template>
                    <template slot="searchBtn2">
                        <el-button type="primary" @click="doResetA"
                            >重置</el-button
                        >
                    </template>
                </search-layout>
                <div class="isSelected">
                    <el-checkbox v-model="selectedA" @change="selectedShowA"
                        >已选择</el-checkbox
                    >
                </div>
                <tableList
                    ref="tableA"
                    :columns="columnsA"
                    :getDataWay="getDataWayA"
                    :pagination="paginationA"
                    :checkedData="checkedArrA"
                    :needLoadedCallBack="true"
                    :loadedCallBack="loadedCallBackA"
                    :needSelectedCallBack="true"
                    :selectedCallBack="selectedCallBackA"
                    :selectedAllCallBack="selectedAllCallBackA"
                    index
                    selection
                >
                </tableList>
            </div>

            <div v-show="activeName === '2'">
                <search-layout>
                    <template slot="searchItem1">
                        <span class="label">场景编号</span>
                        <el-input
                            v-model="searchParamsB.naturalName"
                            size="small"
                            clearable
                            placeholder="请输入"
                            maxlength="60"
                        >
                        </el-input>
                    </template>
                    <template slot="searchItem2">
                        <span class="label">道路</span>
                        <el-cascader
                            v-model="searchParamsB.road"
                            :options="roadList"
                            :props="props"
                            clearable=""
                        ></el-cascader>
                    </template>
                    <template slot="searchItem3">
                        <span class="label">基础设施</span>
                        <el-cascader
                            v-model="searchParamsB.infrastructure"
                            :options="infrastructureList"
                            :props="props"
                            clearable=""
                        ></el-cascader>
                    </template>
                    <template slot="searchItem4">
                        <span class="label">交通情况</span>
                        <el-cascader
                            v-model="searchParamsB.trafficCondition"
                            :options="trafficConditionList"
                            :props="props"
                            clearable=""
                        ></el-cascader>
                    </template>
                    <template slot="searchItem5">
                        <span class="label">自车行为</span>
                        <el-cascader
                            v-model="searchParamsB.selfBehavior"
                            :options="selfBehaviorList"
                            :props="props"
                            clearable=""
                        ></el-cascader>
                    </template>
                    <template slot="searchItem6">
                        <span class="label">目标行为</span>
                        <el-cascader
                            v-model="searchParamsB.targetBehavior"
                            :options="targetBehaviorList"
                            :props="props"
                            clearable=""
                        ></el-cascader>
                    </template>
                    <template slot="searchItem7">
                        <span class="label">自然环境</span>
                        <el-cascader
                            v-model="searchParamsB.naturalEnvironment"
                            :options="naturalEnvironmentList"
                            :props="props"
                            clearable=""
                        ></el-cascader>
                    </template>
                    <template slot="searchItem8">
                        <span class="label">临时性操纵</span>
                        <el-cascader
                            v-model="searchParamsB.temporaryOperation"
                            :options="temporaryOperationList"
                            :props="props"
                            clearable=""
                        ></el-cascader>
                    </template>
                    <template slot="searchBtn1">
                        <el-button type="primary" @click="doSearchB"
                            >查询</el-button
                        >
                    </template>
                    <template slot="searchBtn2">
                        <el-button type="primary" @click="doResetB"
                            >重置</el-button
                        >
                    </template>
                </search-layout>
                <div class="isSelected">
                    <el-checkbox v-model="selectedB" @change="selectedShowB"
                        >已选择</el-checkbox
                    >
                </div>
                <tableList
                    ref="tableB"
                    :columns="columnsB"
                    :getDataWay="getDataWayB"
                    :pagination="paginationB"
                    :checkedData="checkedArrB"
                    :needLoadedCallBack="true"
                    :loadedCallBack="loadedCallBackB"
                    :needSelectedCallBack="true"
                    :selectedCallBack="selectedCallBackB"
                    :selectedAllCallBack="selectedAllCallBackB"
                    index
                    selection
                >
                </tableList>
            </div>

            <div v-show="activeName === '3'">
                <search-layout>
                    <template slot="searchItem1">
                        <span class="label">场景名称</span>
                        <el-input
                            v-model="searchParamsC.sceneName"
                            size="small"
                            maxlength="60"
                            clearable
                            placeholder="请输入"
                        >
                        </el-input>
                    </template>
                    <template slot="searchItem2">
                        <span class="label">法规类型</span>
                        <el-select
                            v-model="searchParamsC.regulationType"
                            multiple
                        >
                            <el-option
                                v-for="item in regulationTypeList"
                                :label="item.caption"
                                :value="item.code"
                                :key="item.code"
                            ></el-option>
                        </el-select>
                    </template>
                    <template slot="searchItem3">
                        <span class="label">标准类型</span>
                        <el-input
                            v-model="searchParamsC.standardType"
                            size="small"
                            maxlength="60"
                            clearable
                            placeholder="请输入"
                        >
                        </el-input>
                    </template>
                    <template slot="searchBtn1">
                        <el-button type="primary" @click="doSearchC"
                            >查询</el-button
                        >
                    </template>
                    <template slot="searchBtn2">
                        <el-button type="primary" @click="doResetC"
                            >重置</el-button
                        >
                    </template>
                </search-layout>
                <div class="isSelected">
                    <el-checkbox v-model="selectedC" @change="selectedShowC"
                        >已选择</el-checkbox
                    >
                </div>
                <tableList
                    ref="tableC"
                    :columns="columnsC"
                    :getDataWay="getDataWayC"
                    :pagination="paginationC"
                    :checkedData="checkedArrC"
                    :needLoadedCallBack="true"
                    :loadedCallBack="loadedCallBackC"
                    :needSelectedCallBack="true"
                    :selectedCallBack="selectedCallBackC"
                    :selectedAllCallBack="selectedAllCallBackC"
                    index
                    selection
                >
                </tableList>
            </div>
        </div>

        <div class="flexBox summaryBox">
            <div>
                场景总数:
                {{
                    checkedIdsA.length + checkedIdsB.length + checkedIdsC.length
                }}
            </div>
            <div>交通事故场景: {{ checkedIdsA.length }}</div>
            <div>自然驾驶场景: {{ checkedIdsB.length }}</div>
            <div>标准法规场景: {{ checkedIdsC.length }}</div>
        </div>
    </div>
</template>

<script>
import searchLayout from "@/components/grid/searchLayout";
import toolbarTab from "@/components/toolbar/toolbarTab";
import tableList from "@/components/grid/TableList";

export default {
    name: "realSceneList", // 真实场景列表-三大列表集合
    components: { searchLayout, toolbarTab, tableList },
    data() {
        return {
            list: [],
            activeName: "1",
            searchParamsA: {
                //搜索参数
                sceneName: "", //场景名称
                selfDriving: [], //自车驾驶行为
                targetDriving: [], //目标驾驶行为
                selfReaction: [], //自车反应行为
                conflictBehavior: [], //冲突行为
                conflictType: [], //冲突类型
            },
            selfDrivingList: [],
            targetDrivingList: [],
            selfReactionList: [],
            conflictBehaviorList: [],
            conflictTypeList: [],
            columnsA: [
                //表格列
                {
                    label: "场景名称",
                    prop: "sceneName",
                },
                {
                    label: "自车驾驶行为",
                    prop: "selfDriving",
                },
                {
                    label: "目标驾驶行为",
                    prop: "targetDriving",
                },
                {
                    label: "自车反应行为",
                    prop: "selfReaction",
                },
                {
                    label: "冲突行为",
                    prop: "conflictBehavior",
                },
                {
                    label: "冲突类型",
                    prop: "conflictType",
                },
            ],
            paginationA: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWayA: {
                //加载表格数据
                dataType: "url",
                type: "post",
                // firstRequest: false,
                data: this.$api.sceneLibrary.querySceneAccidentList,
                param: {},
            },
            selectedA: false, // 是否选中展示已选择项
            searchParamsB: {
                //搜索参数
                naturalName: "", // 场景编号
                road: [], // 道路
                infrastructure: [], // 基础设施
                trafficCondition: [], // 交通情况
                selfBehavior: [], // 自车行为
                targetBehavior: [], // 目标行为
                naturalEnvironment: [], // 自然环境
            },
            roadList: [],
            infrastructureList: [],
            trafficConditionList: [],
            selfBehaviorList: [],
            targetBehaviorList: [],
            naturalEnvironmentList: [],
            temporaryOperationList: [],
            props: {
                multiple: true,
                label: "dictName",
                value: "dictCode",
            },
            columnsB: [
                //表格列
                {
                    label: "场景编号",
                    prop: "naturalName",
                },
                {
                    label: "天气",
                    prop: "weather",
                },
                {
                    label: "自车行为",
                    prop: "selfBehavior",
                },
                {
                    label: "目标行为",
                    prop: "targetBehavior",
                },
            ],
            paginationB: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWayB: {
                //加载表格数据
                dataType: "url",
                type: "post",
                // firstRequest: false,
                data: this.$api.sceneLibrary.querySceneNaturalList,
                param: {},
            },
            selectedB: false,
            searchParamsC: {
                //搜索参数
                sceneName: "", //场景名称
                regulationType: [], //法规类型
                standardType: "", //标准类型
            },
            regulationTypeList: [],
            columnsC: [
                //表格列
                {
                    label: "场景名称",
                    prop: "sceneName",
                },
                {
                    label: "法规类型",
                    prop: "regulationType",
                },
                {
                    label: "标准类型",
                    prop: "standardType",
                },
            ],
            paginationC: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWayC: {
                //加载表格数据
                dataType: "url",
                type: "post",
                // firstRequest: false,
                data: this.$api.sceneLibrary.queryStandardsRegulationsList,
                param: {},
            },
            selectedC: false,
            checkedArrA: [], // 交通事故列表已选
            checkedArrB: [], // 自然驾驶列表已选
            checkedArrC: [], // 标准法规列表已选

            checkedIdsA: [], // 当前交通事故列表已选
            checkedIdsB: [], // 当前自然驾驶列表已选
            checkedIdsC: [], // 当前标准法规列表已选
        };
    },

    computed: {},

    methods: {
        pageControl(data) {
            this.activeName = data.name;
            if (this.activeName === "1") {
                this.doSearchA();
            } else if (this.activeName === "2") {
                this.doSearchB();
            } else {
                this.doSearchC();
            }
        },
        doSearchA() {
            let data = { ...this.searchParamsA };
            if (this.selectedA) {
                data.ids = this.checkedIdsA;
            } else {
                data.ids = null;
            }

            this.refreshListA(data);
        },
        //刷新table
        refreshListA(param) {
            param
                ? this.$refs["tableA"].loadData(param)
                : this.$refs["tableA"].loadData();
        },
        doResetA() {
            this.searchParamsA = {
                sceneName: "",
                selfDriving: [],
                targetDriving: [],
                selfReaction: [],
                conflictBehavior: [],
                conflictType: [],
            };
            this.doSearchA();
        },
        // 数据加载后的回调
        loadedCallBackA() {
            this.checkedArrA = [];
            this.$refs.tableA.tableData.forEach((i) => {
                if (this.checkedIdsA.includes(i.accidentId)) {
                    // 显示已选中的项
                    this.$refs.tableA.$refs.ListTable.toggleRowSelection(
                        i,
                        true
                    );
                    this.checkedArrA.push(i);
                }
            });
        },
        // 用户勾选完执行函数后的回调
        selectedCallBackA(row, type) {
            if (type === 1) {
                if (!this.checkedIdsA.includes(row.accidentId)) {
                    this.checkedIdsA.push(row.accidentId);
                }
            } else {
                let index = this.checkedIdsA.indexOf(row.accidentId);
                if (index > -1) {
                    this.checkedIdsA.splice(index, 1);
                }
            }
        },
        // 用户勾选全选执行函数后的回调
        selectedAllCallBackA(selection, type) {
            if (type === 1) {
                selection.forEach((i) => {
                    if (!this.checkedIdsA.includes(i.accidentId)) {
                        this.checkedIdsA.push(i.accidentId);
                    }
                });
            } else {
                this.$refs.tableA.tableData.forEach((i) => {
                    let index = this.checkedIdsA.indexOf(i.accidentId);
                    if (index > -1) {
                        this.checkedIdsA.splice(index, 1);
                    }
                });
            }
        },
        doSearchB() {
            let data = { ...this.searchParamsB };
            if (this.selectedB) {
                data.ids = this.checkedIdsB;
            } else {
                data.ids = null;
            }

            this.refreshListB(data);
        },
        //刷新table
        refreshListB(param) {
            param
                ? this.$refs["tableB"].loadData(param)
                : this.$refs["tableB"].loadData();
        },
        doResetB() {
            this.searchParamsB = {
                naturalName: "",
                road: [],
                infrastructure: [],
                trafficCondition: [],
                selfBehavior: [],
                targetBehavior: [],
                naturalEnvironment: [],
                temporaryOperation: [],
            };
            this.doSearchB();
        },
        loadedCallBackB() {
            this.checkedArrB = [];
            this.$refs.tableB.tableData.forEach((i) => {
                if (this.checkedIdsB.includes(i.naturalId)) {
                    this.$refs.tableB.$refs.ListTable.toggleRowSelection(
                        i,
                        true
                    );
                    this.checkedArrB.push(i);
                }
            });
        },
        selectedCallBackB(row, type) {
            if (type === 1) {
                this.checkedIdsB.push(row.naturalId);
            } else {
                let index = this.checkedIdsB.indexOf(row.naturalId);
                if (index > -1) {
                    this.checkedIdsB.splice(index, 1);
                }
            }
        },
        selectedAllCallBackB(selection, type) {
            if (type === 1) {
                selection.forEach((i) => {
                    if (!this.checkedIdsB.includes(i.naturalId)) {
                        this.checkedIdsB.push(i.naturalId);
                    }
                });
            } else {
                this.$refs.tableB.tableData.forEach((i) => {
                    let index = this.checkedIdsB.indexOf(i.naturalId);
                    if (index > -1) {
                        this.checkedIdsB.splice(index, 1);
                    }
                });
            }
        },
        doSearchC() {
            let data = { ...this.searchParamsC };
            if (this.selectedC) {
                data.ids = this.checkedIdsC;
            } else {
                data.ids = null;
            }

            this.refreshListC(data);
        },
        //刷新table
        refreshListC(param) {
            param
                ? this.$refs["tableC"].loadData(param)
                : this.$refs["tableC"].loadData();
        },
        doResetC() {
            this.searchParamsC = {
                sceneName: "",
                regulationType: [],
                standardType: "",
            };
            this.doSearchC();
        },
        loadedCallBackC() {
            this.checkedArrC = [];
            this.$refs.tableC.tableData.forEach((i) => {
                if (this.checkedIdsC.includes(i.regulationsId)) {
                    this.$refs.tableC.$refs.ListTable.toggleRowSelection(
                        i,
                        true
                    );
                    this.checkedArrC.push(i);
                }
            });
        },
        selectedCallBackC(row, type) {
            if (type === 1) {
                this.checkedIdsC.push(row.regulationsId);
            } else {
                let index = this.checkedIdsC.indexOf(row.regulationsId);
                if (index > -1) {
                    this.checkedIdsC.splice(index, 1);
                }
            }
        },
        selectedAllCallBackC(selection, type) {
            if (type === 1) {
                selection.forEach((i) => {
                    if (!this.checkedIdsC.includes(i.regulationsId)) {
                        this.checkedIdsC.push(i.regulationsId);
                    }
                });
            } else {
                this.$refs.tableC.tableData.forEach((i) => {
                    let index = this.checkedIdsC.indexOf(i.regulationsId);
                    if (index > -1) {
                        this.checkedIdsC.splice(index, 1);
                    }
                });
            }
        },
        selectedShowA() {
            this.doSearchA();
        },
        selectedShowB() {
            this.doSearchB();
        },
        selectedShowC() {
            this.doSearchC();
        },
    },

    async mounted() {
        await this.$dicsListsInit({
            selfDrivingList: "selfDriving",
            targetDrivingList: "targetDriving",
            selfReactionList: "selfReaction",
            conflictBehaviorList: "conflictBehavior",
            conflictTypeList: "conflictType",
            regulationTypeList: "regulationType",
        });

        await this.$dicsTreesInit({
            roadList: "road",
            infrastructureList: "infrastructure",
            trafficConditionList: "trafficCondition",
            selfBehaviorList: "selfBehavior",
            targetBehaviorList: "targetBehavior",
            naturalEnvironmentList: "naturalEnvironment",
            temporaryOperationList: "temporaryOperation",
        });
    },
};
</script>

<style lang='less' scoped>
.tabsBox {
    .el-input,
    .el-select {
        width: 230px;
    }

    .label {
        min-width: 90px;
    }

    .isSelected {
        padding: 10px 0 10px 10px;
    }
}

.summaryBox {
    padding: 20px 20px 0;
    margin-top: 20px;
    border-top: 1px dotted @themeColor;
    color: @themeColor;
    font-size: 18px;
    font-weight: bold;

    > div {
        margin-right: 30px;
    }
}

.myTabsBox {
    /deep/ .el-tabs__nav-scroll {
        &:after {
            width: 100%;
        }
    }

    &.myTabsBoxThreeTabs {
        /deep/ .el-tabs {
            width: auto;
            margin: 0;
        }

        /deep/ .el-tabs__item {
            width: 120px;
        }
    }

    /deep/
        .el-tabs--top.el-tabs--card
        > .el-tabs__header
        .el-tabs__item:nth-child(2) {
        border-left-color: @gray;

        &.is-active {
            border-left-color: @themeColor;
        }
    }
}
</style>