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

<template>
    <div>
        <search-layout :needBox="true">
            <template slot="searchItem1">
                <span class="label">场景名称</span>
                <el-input
                    v-model="searchParams.id"
                    size="small"
                    clearable
                    placeholder="请输入"
                >
                </el-input>
            </template>
            <template slot="searchItem2">
                <span class="label">自车驾驶行为</span>
                <el-select v-model="searchParams.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="searchParams.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="searchParams.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="searchParams.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="searchParams.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="searchItem7">
                <el-checkbox-group v-model="searchParams.c">
                    <el-checkbox-button :label="1" :key="1" class="labelA"
                        >绿灯</el-checkbox-button
                    >
                    <el-checkbox-button :label="2" :key="2" class="labelB"
                        >桥梁</el-checkbox-button
                    >
                    <el-checkbox-button :label="3" :key="3" class="labelC"
                        >晴天</el-checkbox-button
                    >
                    <el-checkbox-button :label="4" :key="4" class="labelD"
                        >直道</el-checkbox-button
                    >
                    <el-checkbox-button :label="5" :key="5" class="labelC"
                        >晴天</el-checkbox-button
                    >
                    <el-checkbox-button :label="6" :key="6" class="labelD"
                        >直道</el-checkbox-button
                    >
                </el-checkbox-group>
            </template>
            <!-- <template slot="searchItem7">
                <div class="radioBox">
                    <span class="label">是否存在盲区</span>
                    <el-radio v-model="searchParams.x" label="1">是</el-radio>
                    <el-radio v-model="searchParams.x" label="2">否</el-radio>
                </div>
            </template>
            <template slot="searchItem8">
                <div class="radioBox">
                    <span class="label">是否发生碰撞</span>
                    <el-radio v-model="searchParams.x" label="1">是</el-radio>
                    <el-radio v-model="searchParams.x" label="2">否</el-radio>
                </div>
            </template> -->
            <template slot="searchBtn1">
                <el-button type="primary">查询</el-button>
            </template>
            <template slot="searchBtn2">
                <el-button type="primary">重置</el-button>
            </template>
        </search-layout>

        <tableList
            ref="table"
            style="border-top: none; margin: 30px"
            :columns="columns"
            :getDataWay="getDataWay"
            :pagination="pagination"
            index
        >
            <el-table-column label="标签" slot="asd" align="center">
                <template>
                    <div class="labelPanel">
                        <span class="labelBox labelA">绿灯</span>
                        <span class="labelBox labelB">桥梁</span>
                        <span class="labelBox labelC">晴天</span>
                        <span class="labelBox labelD">直道</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                slot="cgInfos"
                align="center"
                width="180"
            >
                <template v-slot="scope">
                    <i
                        @click="viewRow(scope.row)"
                        class="el-icon-view elIcon cursor"
                    >
                    </i>
                </template>
            </el-table-column>
        </tableList>

        <el-dialog
            title="CAMERAO"
            :visible.sync="dialogVisible"
            width="690px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <div>123</div>
        </el-dialog>
    </div>
</template>

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

export default {
    name: "trafficAccidentSimulationScenarioList", // 交通事故仿真场景
    components: { searchLayout, tableList },
    data() {
        return {
            searchParams: {
                //搜索参数
                id: "", //ID
                clientOrgName: "", //车辆名称
                clientOrgName1: "", //配置名称
                clientOrgName2: "", //配置描述
                status: "",
                x: "1",
                c: [],
            },
            list: [],
            columns: [
                //表格列
                {
                    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,
                },
            ],
            pagination: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWay: {
                //加载表格数据
                dataType: "url",
                type: "post",
                // firstRequest: false,
                data: this.$api.sceneLibrary.queryStandardsRegulationsList,
                param: {},
            },
            dialogVisible: false,
        };
    },
    methods: {
        viewRow(row) {
            this.dialogVisible = true;
        },
    },

    // mounted: {},
};
</script>

<style lang='less' scoped>
@import "./common/util.less";
.inputBox {
    .radioBox {
        width: 340px;
    }

    .label {
        min-width: 90px;
    }
}
</style>