simulation-front/src/views/sceneLibrary/scenePacketList.vue

<template>
    <div class="scenePacketListPanel">
        <div class="viewBox">
            <el-button icon="el-icon-view" @click="view" type="primary"
                >模板预览</el-button
            >
        </div>

        <tableList
            ref="table"
            :columns="columns"
            :getDataWay="getDataWay"
            :pagination="pagination"
        >
            <el-table-column label="操作" slot="cgInfos" align="center">
                <template v-slot="scope">
                    <i
                        @click="addIndicators(scope.row)"
                        class="el-icon-plus elIcon"
                    ></i>
                    <i
                        @click="addIndicators(scope.row)"
                        class="el-icon-edit-outline elIcon"
                    ></i>
                    <i
                        @click="addMarkDia(scope.row)"
                        class="el-icon-delete elIcon"
                    ></i>
                    <i
                        @click="addScenario(scope.row)"
                        class="el-icon-document-add elIcon"
                    ></i>
                </template>
            </el-table-column>
        </tableList>

        <el-dialog
            :title="diaTitle"
            :visible.sync="indicatorsVisible"
            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="name">
                    <el-input
                        placeholder="请输入"
                        maxlength="30"
                        v-autoTrim="{ obj: form, key: 'name' }"
                        v-model="form.name"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="权重:" prop="x">
                    <el-input
                        placeholder="请输入"
                        maxlength="30"
                        v-autoTrim="{ obj: form, key: 'x' }"
                        v-model="form.x"
                    >
                    </el-input>
                </el-form-item>
                <el-form-item label="评分规则:" prop="x">
                    <el-select v-model="form.y">
                        <el-option
                            v-for="item in list"
                            :label="item.caption"
                            :value="item.code"
                            :key="item.code"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注:" prop="des">
                    <el-input
                        v-autoTrim="{
                            obj: form,
                            key: 'des',
                        }"
                        v-model="form.des"
                        type="textarea"
                        placeholder="请输入"
                        :autosize="{ minRows: 4, maxRows: 4 }"
                        maxlength="200"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button type="primary" @click="indicatorsConfirm"
                    >确 定</el-button
                >
                <el-button @click="indicatorsVisible = false">取 消</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="场景分类"
            :visible.sync="scenarioVisible"
            width="690px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-form
                ref="formA"
                :model="formA"
                :rules="rulesA"
                label-width="108px"
            >
                <el-form-item label="场景分类:" prop="x">
                    <el-select v-model="formA.y">
                        <el-option
                            v-for="item in listA"
                            :label="item.caption"
                            :value="item.code"
                            :key="item.code"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="tips">
                解释：基于不同环境要素，在前述主题场景及两条路径的框架下进行场景的精确细分。细分维度包括天气、季节、温度、路况、车况等多种元素，所采纳元素的广度和深度既与需求有关，也与汽车智能化程度（感知能力）相关
            </div>
            <span slot="footer">
                <el-button type="primary" @click="scenarioConfirm"
                    >确 定</el-button
                >
                <el-button @click="scenarioVisible = false">取 消</el-button>
            </span>
        </el-dialog>

        <el-dialog
            title="真实场景"
            :visible.sync="scenarioListsVisible"
            width="90%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <div class="tabsBox">
                <toolbarTab
                    :isConnect="true"
                    position="top"
                    :subPageActiveName="subPageActiveName"
                    :toolbarItem="pageBtnList"
                    @toolbarClick="pageControl"
                    class="toolbarTab"
                >
                </toolbarTab>

                <div v-show="activitedPageNum === 1">
                    <search-layout>
                        <template slot="searchItem1">
                            <span class="label">场景名称</span>
                            <el-input
                                v-model="searchParamsA.id"
                                size="small"
                                clearable
                                placeholder="请输入"
                            >
                            </el-input>
                        </template>
                        <template slot="searchItem2">
                            <span class="label">自车驾驶行为</span>
                            <el-select v-model="searchParamsA.status" multiple>
                                <el-option
                                    v-for="item in list"
                                    :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.status" multiple>
                                <el-option
                                    v-for="item in list"
                                    :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.status" multiple>
                                <el-option
                                    v-for="item in list"
                                    :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.status" multiple>
                                <el-option
                                    v-for="item in list"
                                    :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.status" multiple>
                                <el-option
                                    v-for="item in list"
                                    :label="item.caption"
                                    :value="item.code"
                                    :key="item.code"
                                ></el-option>
                            </el-select>
                        </template>
                        <template slot="searchBtn1">
                            <el-button type="primary">查询</el-button>
                        </template>
                        <template slot="searchBtn2">
                            <el-button type="primary">重置</el-button>
                        </template>
                    </search-layout>
                    <div class="isSelected">
                        <el-checkbox v-model="selectedA">已选择</el-checkbox>
                    </div>
                    <tableList
                        ref="tableA"
                        :columns="columnsA"
                        :getDataWay="getDataWayA"
                        :pagination="paginationA"
                        index
                        selection
                    >
                    </tableList>
                </div>

                <div v-show="activitedPageNum === 2">
                    <search-layout>
                        <template slot="searchItem1">
                            <span class="label">道路</span>
                            <el-select v-model="searchParamsB.status">
                                <el-option
                                    v-for="item in list"
                                    :label="item.caption"
                                    :value="item.code"
                                    :key="item.code"
                                ></el-option>
                            </el-select>
                        </template>
                        <template slot="searchItem2">
                            <span class="label">基础设施</span>
                            <el-select v-model="searchParamsB.status">
                                <el-option
                                    v-for="item in list"
                                    :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="searchParamsB.status">
                                <el-option
                                    v-for="item in list"
                                    :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="searchParamsB.status">
                                <el-option
                                    v-for="item in list"
                                    :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="searchParamsB.status">
                                <el-option
                                    v-for="item in list"
                                    :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="searchParamsB.status">
                                <el-option
                                    v-for="item in list"
                                    :label="item.caption"
                                    :value="item.code"
                                    :key="item.code"
                                ></el-option>
                            </el-select>
                        </template>
                        <template slot="searchBtn1">
                            <el-button type="primary">查询</el-button>
                        </template>
                        <template slot="searchBtn2">
                            <el-button type="primary">重置</el-button>
                        </template>
                    </search-layout>
                    <div class="isSelected">
                        <el-checkbox v-model="selectedB">已选择</el-checkbox>
                    </div>
                    <tableList
                        ref="tableB"
                        :columns="columnsB"
                        :getDataWay="getDataWayB"
                        :pagination="paginationB"
                        index
                        selection
                    >
                    </tableList>
                </div>

                <div v-show="activitedPageNum === 3">
                    <search-layout>
                        <template slot="searchItem1">
                            <span class="label">场景名称</span>
                            <el-input
                                v-model="searchParamsC.id"
                                size="small"
                                clearable
                                placeholder="请输入"
                            >
                            </el-input>
                        </template>
                        <template slot="searchItem2">
                            <span class="label">法规类型</span>
                            <el-select v-model="searchParamsC.status" multiple>
                                <el-option
                                    v-for="item in list"
                                    :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.id"
                                size="small"
                                clearable
                                placeholder="请输入"
                            >
                            </el-input>
                        </template>
                        <template slot="searchBtn1">
                            <el-button type="primary">查询</el-button>
                        </template>
                        <template slot="searchBtn2">
                            <el-button type="primary">重置</el-button>
                        </template>
                    </search-layout>
                    <div class="isSelected">
                        <el-checkbox v-model="selectedC">已选择</el-checkbox>
                    </div>
                    <tableList
                        ref="tableC"
                        :columns="columnsC"
                        :getDataWay="getDataWayC"
                        :pagination="paginationC"
                        index
                        selection
                    >
                    </tableList>
                </div>
            </div>

            <div class="flexBox summaryBox">
                <div>场景总数: {{ sceneTotal }}</div>
                <div>交通事故场景: {{ sceneA }}</div>
                <div>自然驾驶场景: {{ sceneB }}</div>
                <div>标准法规场景: {{ sceneC }}</div>
            </div>

            <span slot="footer">
                <el-button type="primary" @click="scenarioListsConfirm"
                    >确 定</el-button
                >
                <el-button @click="scenarioListsVisible = false"
                    >取 消</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

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

export default {
    name: "scenePacketList", // 场景数据包
    components: { searchLayout, tableList, toolbarTab },
    data() {
        return {
            searchParams: {
                //搜索参数
                id: "", //ID
                clientOrgName: "", //车辆名称
                clientOrgName1: "", //配置名称
                clientOrgName2: "", //配置描述
            },
            activitedPageNum: 1,
            subPageActiveName: 1,
            pageBtnList: [
                {
                    type: "primary",
                    title: "交通事故场景",
                    key: "all",
                    fromId: 1,
                    method: "showAll",
                    plain: true,
                    disabled: false,
                },
                {
                    type: "primary",
                    title: "自然驾驶场景",
                    key: "notRead",
                    fromId: 2,
                    method: "showNotRead",
                    plain: true,
                    disabled: false,
                },
                {
                    type: "primary",
                    title: "标准法规场景",
                    key: "notRead1",
                    fromId: 3,
                    method: "showNotRead1",
                    plain: true,
                    disabled: false,
                },
            ],
            columns: [
                {
                    label: "操作",
                    prop: "cgInfos",
                    template: true,
                },
                {
                    label: "指标名称",
                    prop: "id",
                },
                {
                    label: "权重",
                    prop: "ktName",
                },
                {
                    label: "场景数量",
                    prop: "jbSource",
                },
                {
                    label: "规则名称",
                    prop: "startDateStr",
                },
                {
                    label: "备注",
                    prop: "startDateStr",
                },
            ],
            pagination: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWay: {
                //加载表格数据
                dataType: "data",
                type: "post",
                firstRequest: false,
                data: [
                    {
                        id: 1,
                        ktName: "kjdhfkjsdhfkjsjhdfksdjhfkhwoieyrhfisdhfksjhdf",
                        jbSource: "收到就好付款时间的回复可见收到货覅无痕",
                    },
                    { id: 2 },
                    { id: 3 },
                    { id: 4 },
                    { id: 5 },
                    { id: 6 },
                ],
                param: {},
            },
            diaTitle: "",
            indicatorsVisible: false, // 编辑指标
            scenarioVisible: false, // 选择场景
            scenarioListsVisible: false, // 真实场景列表
            form: {
                name: "",
                des: "",
                x: "",
                y: "",
            },
            rules: {
                name: [{ required: true, message: "请输入", trigger: "blur" }],
                x: [{ required: true, message: "请输入", trigger: "blur" }],
                y: [{ required: true, message: "请选择", trigger: "change" }],
            },
            list: [],
            formA: {
                x: "",
            },
            rulesA: {
                x: [{ required: true, message: "请选择", trigger: "change" }],
            },
            listA: [],
            searchParamsA: {
                //搜索参数
                id: "", //ID
                clientOrgName: "", //车辆名称
                clientOrgName1: "", //配置名称
                clientOrgName2: "", //配置描述
                status: "",
                x: "1",
                c: [],
            },
            columnsA: [
                //表格列
                {
                    label: "场景名称",
                    prop: "id",
                },
                {
                    label: "自车驾驶行为",
                    prop: "aid1",
                },
                {
                    label: "目标驾驶行为",
                    prop: "ktName",
                },
                {
                    label: "自车反应行为",
                    prop: "jbSource",
                },
                {
                    label: "冲突行为",
                    prop: "jbSource",
                },
                {
                    label: "冲突类型",
                    prop: "jbSource",
                },
                {
                    label: "标签",
                    prop: "asd",
                    template: true,
                },
                {
                    label: "操作",
                    prop: "cgInfos",
                    template: true,
                },
            ],
            paginationA: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWayA: {
                //加载表格数据
                dataType: "data",
                type: "post",
                firstRequest: false,
                data: [
                    {
                        id: 1,
                        ktName: "kjdhfkjsdhfkjsjhdfksdjhfkhwoieyrhfisdhfksjhdf",
                        jbSource: "收到就好付款时间的回复可见收到货覅无痕",
                    },
                    { id: 2 },
                    { id: 3 },
                    { id: 4 },
                    { id: 51 },
                    { id: 6 },
                ],
                // data: this.$api.scientificStatistics.typeProjectStatistics,
                param: {},
            },
            selectedA: false,
            searchParamsB: {
                //搜索参数
                id: "", //ID
                clientOrgName: "", //车辆名称
                clientOrgName1: "", //配置名称
                clientOrgName2: "", //配置描述
                status: "",
                c: [],
            },
            columnsB: [
                //表格列
                {
                    label: "场景名称",
                    prop: "aid1",
                },
                {
                    label: "天气",
                    prop: "ktName",
                },
                {
                    label: "自车行为",
                    prop: "jbSource",
                },
                {
                    label: "目标行为",
                    prop: "jbSource",
                },
                {
                    label: "标签",
                    prop: "asd",
                    template: true,
                },
                {
                    label: "操作",
                    prop: "cgInfos",
                    template: true,
                },
            ],
            paginationB: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWayB: {
                //加载表格数据
                dataType: "data",
                type: "post",
                firstRequest: false,
                data: [
                    {
                        id: 1,
                        ktName: "kjdhfkjsdhfkjsjhdfksdjhfkhwoieyrhfisdhfksjhdf",
                        jbSource: "收到就好付款时间的回复可见收到货覅无痕",
                    },
                    { id: 2 },
                    { id: 3 },
                    { id: 4 },
                    { id: 51 },
                    { id: 6 },
                ],
                param: {},
            },
            selectedB: false,
            searchParamsC: {
                //搜索参数
                id: "", //ID
                clientOrgName: "", //车辆名称
                clientOrgName1: "", //配置名称
                clientOrgName2: "", //配置描述
                status: "",
                c: [],
            },
            columnsC: [
                //表格列
                {
                    label: "场景名称",
                    prop: "id",
                },
                {
                    label: "法规类型",
                    prop: "aid1",
                },
                {
                    label: "标准类型",
                    prop: "ktName",
                },
                {
                    label: "标签",
                    prop: "asd",
                    template: true,
                },
                {
                    label: "操作",
                    prop: "cgInfos",
                    template: true,
                },
            ],
            paginationC: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWayC: {
                //加载表格数据
                dataType: "data",
                type: "post",
                firstRequest: false,
                data: [
                    {
                        id: 1,
                        ktName: "kjdhfkjsdhfkjsjhdfksdjhfkhwoieyrhfisdhfksjhdf",
                        jbSource: "收到就好付款时间的回复可见收到货覅无痕",
                    },
                    { id: 2 },
                    { id: 3 },
                    { id: 4 },
                    { id: 51 },
                    { id: 6 },
                ],
                // data: this.$api.scientificStatistics.typeProjectStatistics,
                param: {},
            },
            selectedC: false,
            sceneTotal: 0,
            sceneA: 0,
            sceneB: 0,
            sceneC: 0,
        };
    },

    computed: {},

    methods: {
        view() {},
        addIndicators(row) {
            this.diaTitle = "添加指标";
            this.indicatorsVisible = true;
        },
        addScenario(row) {
            this.scenarioVisible = true;
        },
        indicatorsConfirm() {
            this.indicatorsVisible = false;
        },
        scenarioConfirm() {
            this.scenarioVisible = false;
            this.scenarioListsVisible = true;
        },
        scenarioListsConfirm() {
            this.scenarioListsVisible = false;
        },
        pageControl(data) {
            this.activitedPageNum = data.fromId;
        },
    },

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

<style lang='less' scoped>
.scenePacketListPanel {
    padding: 30px;

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

    .tips {
        padding: 10px 0 10px 18px;
        font-size: 12px;
        color: @gray;
    }

    .tabsBox {
        .el-input,
        .el-select {
            width: 230px;
        }

        .label {
            min-width: 90px;
        }

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

    .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;
        }
    }
}
</style>