feat:基准场景页面搭建

src/components/grid/TableList.vue

@@ -111,6 +111,7 @@
                                                  :sort-change="{'sortChange':column.sortable}"
                                                  :show-overflow-tooltip="column.showOverflowTooltip"
                                                  :formatter='column.formatter'
+                                                 :fixed='column.fixed'
                                 >
                                 </el-table-column>
                                 <slot :name="column.prop" v-if="!!column.template"></slot>
@@ -381,6 +382,7 @@
             if ((this.getDataWay.dataType).toLowerCase() == 'url') { // 根据url发送请求获取table数据
                 delete this.setPagination.total;
                 this.getDataWay.firstRequest===undefined  && this.loadData()//请求数据
+                console.log('当前模式')
             } else { // 通过list页面直接传table数据
                 if (this.getDataWay.data.length > 0 && this.pagination !== undefined) {
                     this.setPagination.total = this.getDataWay.data.length

src/views/sceneLibrary/benchmarkScenarioList.vue

@@ -0,0 +1,330 @@
+<template>
+  <div class="generalizationScenarioListPanel">
+    <search-layout :needBox="true">
+            <template slot="searchItem1">
+                <span class="label">场景编号</span>
+                <el-input v-model="searchParams.sceneId" size="small" clearable placeholder="请输入" maxlength="60"
+                    @keyup.enter.native="doSearch">
+                </el-input>
+            </template>
+            <template slot="searchItem2">
+                <span class="label">功能模块</span>
+                <el-select v-model="searchParams.fileName" multiple size="small" clearable>
+                    <el-option v-for="item in fileNameList" :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.scenarioRoadType" multiple size="small" clearable>
+                    <el-option v-for="item in scenarioRoadTypeList" :label="item.caption" :value="item.code"
+                        :key="item.code"></el-option>
+                </el-select>
+            </template>
+            <template slot="searchItem4">
+                <span class="label">场景简述</span>
+                <el-input v-model="searchParams.scenarioResume" size="small" clearable placeholder="请输入" maxlength="300"
+                    @keyup.enter.native="doSearch">
+                </el-input>
+            </template>
+            <!-- <template slot="searchItem3">
+                <span class="label">天气</span>
+                <el-select
+                    v-model="searchParams.scenarioWeather"
+                    multiple
+                    size="small"
+                    clearable
+                >
+                    <el-option
+                        v-for="item in scenarioWeatherList"
+                        :label="item.caption"
+                        :value="item.code"
+                        :key="item.code"
+                    ></el-option>
+                </el-select>
+            </template> -->
+            <!-- <template slot="searchItem4">
+                <span class="label">场景发生时刻</span>
+                <el-time-picker
+                    v-model="searchParams.scenarioTime"
+                    value-format="HH:mm:ss"
+                    placeholder="请选择"
+                >
+                </el-time-picker>
+            </template> -->
+            <template slot="searchBtn1">
+                <el-button type="primary" @click="doSearch">查询</el-button>
+            </template>
+            <template slot="searchBtn2">
+                <el-button type="primary" @click="doReset">重置</el-button>
+            </template>
+        </search-layout>
+        <tableList ref="table" style="margin: 40px 30px 30px" :columns="columns" :getDataWay="getDataWay"
+            :pagination="pagination" index indexFixed>
+            <el-table-column label="操作" slot="cgInfos" align="center" width="180" fixed='right'>
+                <template v-slot="scope">
+                    <span @click="viewRow(scope.row)" class="elIcon">
+                        查看模板
+                    </span>
+                </template>
+            </el-table-column>
+        </tableList>
+        <el-dialog v-if="generalizationVisible" :visible.sync="generalizationVisible" :title="generalizationDiaTitle"
+            width="90%" class="generalizationDia" :close-on-click-modal="false" :close-on-press-escape="false"
+            :before-close="generalizationCancel">
+            <div>
+                <generalization-detail ref="generalizationDetail" :disabled="true" :id="generalizationId"
+                    :genUrlType="1"></generalization-detail>
+            </div>
+        </el-dialog>
+  </div>
+</template>
+
+<script>
+import searchLayout from "@/components/grid/searchLayout";
+import tableList from "@/components/grid/TableList";
+import { mapState } from "vuex";
+export default {
+    name: "benchmarkScenarioList", // 基准场景库
+    components: { searchLayout, tableList },
+    data() {
+        return {
+            activeName: "2",
+            searchParams: {
+                //搜索参数
+                sceneId: "", // 场景编号
+                fileName: [], // 功能模块
+                scenarioRoadType: [], // 道路类型
+                scenarioResume: "", // 场景简述
+                share: "0",
+                // scenarioWeather: [], // 天气
+                // scenarioTime: "", // 场景发生时刻
+            },
+            fileNameList: [],
+            scenarioRoadTypeList: [],
+            // scenarioWeatherList: [],
+            props: {
+                multiple: true,
+                label: "dictName",
+                value: "dictCode",
+            },
+            columns: [
+                //表格列
+                {
+                    label: "场景名称",
+                    prop: "sceneName",
+                    fixed:'left'
+                },
+                {
+                    label: "主车动作",
+                    prop: "mainBehavior",
+                },
+                {
+                    label: "他车动作",
+                    prop: "otherBehavior",
+                },
+                {
+                    label: "天气",
+                    prop: "weather",
+                },
+                {
+                    label: "道路类型",
+                    prop: "roadType",
+                },
+                {
+                    label: "道路几何-平面",
+                    prop: "roadGeometryPlane",
+                },
+                {
+                    label: "道路几何-纵断面",
+                    prop: "roadGeometryVertical",
+                },
+                {
+                    label: "支持智驾功能",
+                    prop: "autoDriveFunction",
+                },
+                {
+                    label: "运行区域",
+                    prop: "operationArea",
+                },
+                {
+                    label: "复杂度",
+                    prop: "complexity",
+                },
+                {
+                    label: "复杂度等级",
+                    prop: "complexityLevel",
+                },
+                {
+                    label: "危险度",
+                    prop: "risk",
+                },
+                {
+                    label: "危险度等级",
+                    prop: "riskLevel",
+                },
+                {
+                    label: "便签",
+                    prop: "label",
+                },
+                {
+                    label: "场景描述",
+                    prop: "sceneDescription",
+                },
+                {
+                    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: "data",
+                type: "post",
+                // firstRequest: false,
+                data: [{
+        "currentPage": 1,
+        "pageSize": 10,
+        "referenceId": "d9b47f77cb8d4b13940dd74eef1c0d59",
+        "referenceName": "mountain_frontcar",
+        "mainBehavior": "汇入",
+        "otherBehavior": "直行",
+        "weather": "晴",
+        "sceneName":"20240126",
+        "roadGeometryPlane": "直道",
+        "roadGeometryVertical": "上坡",
+        "autoDriveFunction": "ACC",
+        "lable": "标签",
+        "referenceDescription": "场景描述",
+        "complexity": 1,
+        "risk": 1,
+        "complexityLevel": 11,
+        "riskLevel": 11,
+        "videoAddress": "基准场景库/20221125/1669366123893/Scenarios/mountain/simulation.mp4",
+        "osgbAddress": "基准场景库/20221125/1669366123893/OSGB/0518.osgb",
+        "xodrAddress": "基准场景库/20221125/1669366123893/XODR/0518.xodr",
+        "xoscAddress": "基准场景库/20221125/1669366123893/Scenarios/mountain/mountain_frontcar.xml",
+        "jsonAddress": "基准场景库/20221125/1669366123893/Scenarios/mountain/mountain_frontcar.json",
+        "videoPreview": null,
+        "label": null,
+        "maxTime": "20"
+      }],
+                param: {
+                    share: "0",
+                },
+            },
+            generalizationVisible: false, // 泛化dialog
+            generalizationId: "", // 泛化详情id
+            generalizationDiaTitle: "",
+        };
+    },
+
+    computed: {
+        ...mapState(["fileHost", "fileUrl"]),
+    },
+
+    methods: {
+        doSearch() {
+            this.searchParams.share = this.activeName === "1" ? "1" : "0";
+            this.refreshList(this.searchParams);
+        },
+        //刷新table
+        refreshList(param) {
+            param
+                ? this.$refs["table"].loadData(param)
+                : this.$refs["table"].loadData();
+        },
+        doReset() {
+            this.searchParams = {
+                sceneId: "",
+                fileName: [],
+                scenarioRoadType: [],
+                scenarioResume: "",
+                share: this.activeName === "1" ? "1" : "0",
+                // scenarioWeather: [],
+                // scenarioTime: "",
+            };
+            this.doSearch();
+        },
+        pageControl(data) {
+            this.activeName = data.name;
+            this.doSearch();
+        },
+        viewRow(row) {
+            this.generalizationId = row.id;
+            this.generalizationDiaTitle = "泛化模板- " + (row.sceneId || "");
+            this.generalizationVisible = true;
+        },
+        getFileNameList() {
+            this.$axios({
+                method: "post",
+                url: this.$api.sceneLibrary.queryType,
+                data: {},
+            }).then((res) => {
+                if (res.code == 200 && res.info) {
+                    let arr = [];
+                    res.info.forEach((item, i) => {
+                        arr[i] = {
+                            code: item,
+                            caption: item,
+                        };
+                    });
+                    this.fileNameList = arr;
+                } else {
+                    this.$message.error(res.message || "获取功能模块列表失败");
+                }
+            });
+        },
+        // 泛化-取消
+        generalizationCancel() {
+            this.generalizationVisible = false;
+        },
+    },
+
+    async mounted() {
+        await this.$dicsListsInit({
+            // scenarioWeatherList: "scenarioWeather",
+            scenarioRoadTypeList: "scenarioRoadType",
+        });
+
+        this.getFileNameList();
+    },
+};
+</script>
+
+<style lang='less' scoped>
+@import "./common/util.less";
+
+.generalizationScenarioListPanel {
+    .inputBox {
+        .label {
+            min-width: 90px;
+        }
+    }
+
+    .btnsPanel {
+        text-align: right;
+    }
+
+    .generalizationDia {
+        /deep/ .el-dialog__body {
+            position: relative;
+            padding: 20px 60px;
+
+            .changeBtn {
+                position: absolute;
+                top: 20px;
+                right: 60px;
+            }
+        }
+    }
+}
+</style>