场景库管理+单个场景列表优化

.env.dev

@@ -1,4 +1,4 @@
-# 用于标记打包的环境
+# 用于标记开发的环境
 NODE_ENV = DEV
 
 # 使用 process.env.VUE_APP_IS_DEV

src/store/index.js

@@ -7,8 +7,8 @@ export default new Vuex.Store({
   state: {
     // configTitleList: ['摄像头', '完美传感器', '激光雷达', '毫米波雷达', 'GPS'],
     configTitleList: ['摄像头', '完美传感器', '激光雷达', 'GPS'],
-    // fileHost: 'http://10.12.10.70:8001', // 开发环境需要连开发服务器地址，上线后会用相对地址拼接fileUrl
-    fileHost: 'http://47.94.105.148', // 开发环境需要连开发服务器地址，上线后会用相对地址拼接fileUrl
+    fileHost: 'http://10.12.10.70:8001', // 开发环境需要连开发服务器地址，上线后会用相对地址拼接fileUrl
+    // fileHost: 'http://47.94.105.148', // 开发环境需要连开发服务器地址，上线后会用相对地址拼接fileUrl
     fileUrl: '/simulation/resource/common/minio/preview',
     themeColor: '#3397FF',
     id: '',   //用户id

src/views/sceneLibrary/generalizationScenarioList.vue

@@ -15,7 +15,12 @@
             </template>
             <template slot="searchItem2">
                 <span class="label">功能模块</span>
-                <el-select v-model="searchParams.fileName" multiple>
+                <el-select
+                    v-model="searchParams.fileName"
+                    multiple
+                    size="small"
+                    clearable
+                >
                     <el-option
                         v-for="item in fileNameList"
                         :label="item.caption"
@@ -26,7 +31,12 @@
             </template>
             <template slot="searchItem3">
                 <span class="label">天气</span>
-                <el-select v-model="searchParams.scenarioWeather" multiple>
+                <el-select
+                    v-model="searchParams.scenarioWeather"
+                    multiple
+                    size="small"
+                    clearable
+                >
                     <el-option
                         v-for="item in scenarioWeatherList"
                         :label="item.caption"
@@ -77,13 +87,13 @@
             </template>
         </search-layout>
 
-        <div class="btnsPanel">
+        <!-- <div class="btnsPanel">
             <upload ref="upload" :limit="1" @didUpload="didUpload"></upload>
-        </div>
+        </div> -->
 
         <tableList
             ref="table"
-            style="margin: 0 30px"
+            style="margin: 30px"
             :columns="columns"
             :getDataWay="getDataWay"
             :pagination="pagination"

src/views/sceneLibrary/naturalDrivingScenarioList.vue

@@ -19,7 +19,8 @@
                     v-model="searchParams.road"
                     :options="roadList"
                     :props="props"
-                    clearable=""
+                    clearable
+                    size="small"
                 ></el-cascader>
             </template>
             <template slot="searchItem3">
@@ -28,7 +29,8 @@
                     v-model="searchParams.infrastructure"
                     :options="infrastructureList"
                     :props="props"
-                    clearable=""
+                    clearable
+                    size="small"
                 ></el-cascader>
             </template>
             <template slot="searchItem4">
@@ -37,7 +39,8 @@
                     v-model="searchParams.trafficCondition"
                     :options="trafficConditionList"
                     :props="props"
-                    clearable=""
+                    clearable
+                    size="small"
                 ></el-cascader>
             </template>
             <template slot="searchItem5">
@@ -46,7 +49,8 @@
                     v-model="searchParams.selfBehavior"
                     :options="selfBehaviorList"
                     :props="props"
-                    clearable=""
+                    clearable
+                    size="small"
                 ></el-cascader>
             </template>
             <template slot="searchItem6">
@@ -55,7 +59,8 @@
                     v-model="searchParams.targetBehavior"
                     :options="targetBehaviorList"
                     :props="props"
-                    clearable=""
+                    clearable
+                    size="small"
                 ></el-cascader>
             </template>
             <template slot="searchItem7">
@@ -64,7 +69,8 @@
                     v-model="searchParams.naturalEnvironment"
                     :options="naturalEnvironmentList"
                     :props="props"
-                    clearable=""
+                    clearable
+                    size="small"
                 ></el-cascader>
             </template>
             <template slot="searchItem8">
@@ -73,7 +79,8 @@
                     v-model="searchParams.temporaryOperation"
                     :options="temporaryOperationList"
                     :props="props"
-                    clearable=""
+                    clearable
+                    size="small"
                 ></el-cascader>
             </template>
             <template slot="searchItem27">
@@ -109,7 +116,7 @@
             </template>
         </search-layout>
 
-        <div class="btnsPanel">
+        <!-- <div class="btnsPanel">
             <el-button
                 type="primary"
                 plain
@@ -117,19 +124,19 @@
                 @click="openFileDia"
                 >上传文件</el-button
             >
-        </div>
+        </div> -->
 
-        <file-dialog
+        <!-- <file-dialog
             ref="fileDialog"
             type="1"
             :objectPath="objectPath"
             :api="$api.sceneLibrary.saveSceneNatural"
             @fileClose="fileClose"
-        ></file-dialog>
+        ></file-dialog> -->
 
         <tableList
             ref="table"
-            style="margin: 0 30px"
+            style="margin: 30px"
             :columns="columns"
             :getDataWay="getDataWay"
             :pagination="pagination"
@@ -148,12 +155,12 @@
                         title="查看"
                     >
                     </i>
-                    <i
+                    <!-- <i
                         @click="delRow(scope.row)"
                         class="el-icon-delete elIcon"
                         title="删除"
                     >
-                    </i>
+                    </i> -->
                 </template>
             </el-table-column>
         </tableList>

src/views/sceneLibrary/standardRegulationSimulationScenarioList.vue

@@ -15,7 +15,12 @@
             </template>
             <template slot="searchItem2">
                 <span class="label">法规类型</span>
-                <el-select v-model="searchParams.regulationType" multiple>
+                <el-select
+                    v-model="searchParams.regulationType"
+                    multiple
+                    clearable
+                    size="small"
+                >
                     <el-option
                         v-for="item in regulationTypeList"
                         :label="item.caption"
@@ -60,7 +65,7 @@
             </template>
         </search-layout>
 
-        <div class="btnsPanel">
+        <!-- <div class="btnsPanel">
             <el-button
                 type="primary"
                 plain
@@ -68,15 +73,15 @@
                 @click="openFileDia"
                 >上传文件</el-button
             >
-        </div>
+        </div> -->
 
-        <file-dialog
+        <!-- <file-dialog
             ref="fileDialog"
             type="2"
             :objectPath="objectPath"
             :api="$api.sceneLibrary.saveStandardsRegulations"
             @fileClose="fileClose"
-        ></file-dialog>
+        ></file-dialog> -->
 
         <tableList
             ref="table"
@@ -99,12 +104,12 @@
                         title="查看"
                     >
                     </i>
-                    <i
+                    <!-- <i
                         @click="delRow(scope.row)"
                         class="el-icon-delete elIcon"
                         title="删除"
                     >
-                    </i>
+                    </i> -->
                 </template>
             </el-table-column>
         </tableList>

src/views/sceneLibrary/trafficAccidentSimulationScenarioList.vue

@@ -15,7 +15,12 @@
             </template>
             <template slot="searchItem2">
                 <span class="label">自车驾驶行为</span>
-                <el-select v-model="searchParams.selfDriving" multiple>
+                <el-select
+                    v-model="searchParams.selfDriving"
+                    multiple
+                    size="small"
+                    clearable
+                >
                     <el-option
                         v-for="item in selfDrivingList"
                         :label="item.caption"
@@ -26,7 +31,12 @@
             </template>
             <template slot="searchItem3">
                 <span class="label">目标驾驶行为</span>
-                <el-select v-model="searchParams.targetDriving" multiple>
+                <el-select
+                    v-model="searchParams.targetDriving"
+                    multiple
+                    size="small"
+                    clearable
+                >
                     <el-option
                         v-for="item in targetDrivingList"
                         :label="item.caption"
@@ -37,7 +47,12 @@
             </template>
             <template slot="searchItem4">
                 <span class="label">自车反应行为</span>
-                <el-select v-model="searchParams.selfReaction" multiple>
+                <el-select
+                    v-model="searchParams.selfReaction"
+                    multiple
+                    size="small"
+                    clearable
+                >
                     <el-option
                         v-for="item in selfReactionList"
                         :label="item.caption"
@@ -48,7 +63,12 @@
             </template>
             <template slot="searchItem5">
                 <span class="label">冲突行为</span>
-                <el-select v-model="searchParams.conflictBehavior" multiple>
+                <el-select
+                    v-model="searchParams.conflictBehavior"
+                    multiple
+                    size="small"
+                    clearable
+                >
                     <el-option
                         v-for="item in conflictBehaviorList"
                         :label="item.caption"
@@ -59,7 +79,12 @@
             </template>
             <template slot="searchItem6">
                 <span class="label">冲突类型</span>
-                <el-select v-model="searchParams.conflictType" multiple>
+                <el-select
+                    v-model="searchParams.conflictType"
+                    multiple
+                    size="small"
+                    clearable
+                >
                     <el-option
                         v-for="item in conflictTypeList"
                         :label="item.caption"
@@ -98,7 +123,7 @@
             </template>
         </search-layout>
 
-        <div class="btnsPanel">
+        <!-- <div class="btnsPanel">
             <el-button
                 type="primary"
                 plain
@@ -106,19 +131,19 @@
                 @click="openFileDia"
                 >上传文件</el-button
             >
-        </div>
+        </div> -->
 
-        <file-dialog
+        <!-- <file-dialog
             ref="fileDialog"
             type="3"
             :objectPath="objectPath"
             :api="$api.sceneLibrary.saveSceneAccident"
             @fileClose="fileClose"
-        ></file-dialog>
+        ></file-dialog> -->
 
         <tableList
             ref="table"
-            style="border-top: none; margin: 30px"
+            style="margin: 30px"
             :columns="columns"
             :getDataWay="getDataWay"
             :pagination="pagination"
@@ -137,12 +162,12 @@
                         title="查看"
                     >
                     </i>
-                    <i
+                    <!-- <i
                         @click="delRow(scope.row)"
                         class="el-icon-delete elIcon"
                         title="删除"
                     >
-                    </i>
+                    </i> -->
                 </template>
             </el-table-column>
         </tableList>

src/views/systemManagement/sceneLibraryManagement/common/util.less

@@ -0,0 +1,119 @@
+.labelPanel {
+    :last-child {
+        margin-right: 0;
+    }
+}
+
+.labelBox {
+    display: inline-block;
+    line-height: 1;
+    font-weight: 500;
+    white-space: nowrap;
+    vertical-align: middle;
+    background: #fff;
+    border: 1px solid #dcdfe6;
+    -webkit-appearance: none;
+    text-align: center;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    outline: 0;
+    margin-bottom: 10px;
+    margin-right: 20px;
+    position: relative;
+    padding: 12px 20px;
+    font-size: 14px;
+}
+
+
+.el-checkbox-button {
+    margin-right: 20px;
+}
+
+.labelA {
+
+    /deep/ .el-checkbox-button__inner,
+    &.labelBox {
+        border: 1px solid @greenA;
+        color: @greenA;
+        border-radius: 4px;
+        background-color: @greenBgA;
+    }
+
+    &.is-checked {
+        /deep/ .el-checkbox-button__inner {
+            color: #FFFFFF;
+            background-color: @greenA;
+            border-color: @greenA;
+        }
+    }
+}
+
+.labelB {
+
+    /deep/ .el-checkbox-button__inner,
+    &.labelBox {
+        border: 1px solid @orangeA;
+        color: @orangeA;
+        border-radius: 4px;
+        background-color: @orangeBgA;
+    }
+
+    &.is-checked {
+        /deep/ .el-checkbox-button__inner {
+            color: #FFFFFF;
+            background-color: @orangeA;
+            border-color: @orangeA;
+        }
+    }
+}
+
+.labelC {
+
+    /deep/ .el-checkbox-button__inner,
+    &.labelBox {
+        border: 1px solid @lightBlueA;
+        color: @lightBlueA;
+        border-radius: 4px;
+        background-color: @lightBlueBgA;
+    }
+
+    &.is-checked {
+        /deep/ .el-checkbox-button__inner {
+            color: #FFFFFF;
+            background-color: @lightBlueA;
+            border-color: @lightBlueA;
+        }
+    }
+}
+
+.labelD {
+
+    /deep/ .el-checkbox-button__inner,
+    &.labelBox {
+        border: 1px solid @purpleA;
+        color: @purpleA;
+        border-radius: 4px;
+        background-color: @purpleBgA;
+    }
+
+    &.is-checked {
+        /deep/ .el-checkbox-button__inner {
+            color: #FFFFFF;
+            background-color: @purpleA;
+            border-color: @purpleA;
+        }
+    }
+}
+
+.videoBox {
+    width: 100%;
+    padding: 30 60px;
+
+    video {
+        width: 100%;
+    }
+}
+
+.btnsPanel {
+    margin: 45px 40px 15px;
+}

src/views/systemManagement/sceneLibraryManagement/generalizationScene.vue

@@ -1,73 +1,84 @@
 <template>
-    <div>
+    <div class="generalizationScenarioListPanel">
         <search-layout :needBox="true">
             <template slot="searchItem1">
-                <span class="label">场景名称</span>
+                <span class="label">场景类型编号</span>
                 <el-input
-                    v-model="searchParams.a1"
+                    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.a2">
-                    <!--<el-option
-                        v-for="item in list"
+                <span class="label">功能模块</span>
+                <el-select
+                    v-model="searchParams.fileName"
+                    multiple
+                    clearable
+                    size="small"
+                >
+                    <el-option
+                        v-for="item in fileNameList"
                         :label="item.caption"
                         :value="item.code"
                         :key="item.code"
-                    ></el-option>-->
+                    ></el-option>
                 </el-select>
             </template>
             <template slot="searchItem3">
-                <span class="label">道路类型</span>
-                <el-select v-model="searchParams.a3">
-                    <!--<el-option
-                        v-for="item in list"
+                <span class="label">天气</span>
+                <el-select
+                    v-model="searchParams.scenarioWeather"
+                    multiple
+                    clearable
+                    size="small"
+                >
+                    <el-option
+                        v-for="item in scenarioWeatherList"
                         :label="item.caption"
                         :value="item.code"
                         :key="item.code"
-                    ></el-option>-->
+                    ></el-option>
                 </el-select>
             </template>
             <template slot="searchItem4">
-                <span class="label">适用功能</span>
-                <el-select v-model="searchParams.a4">
-                    <!--<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.a5">
-                    <!--<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.a6">
-                    <!--<el-option
-                        v-for="item in list"
-                        :label="item.caption"
-                        :value="item.code"
-                        :key="item.code"
-                    ></el-option>-->
-                </el-select>
+                <span class="label">时间</span>
+                <el-time-picker
+                    v-model="searchParams.scenarioTime"
+                    value-format="HH:mm:ss"
+                    placeholder="时间"
+                >
+                </el-time-picker>
             </template>
-
+            <!-- <template slot="searchItem27">
+                <el-checkbox-group v-model="labels">
+                    <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="labelA"
+                        >匝道</el-checkbox-button
+                    >
+                    <el-checkbox-button label="6" :key="6" class="labelB"
+                        >隧道</el-checkbox-button
+                    >
+                    <el-checkbox-button label="7" :key="7" class="labelC"
+                        >掉头</el-checkbox-button
+                    >
+                </el-checkbox-group>
+            </template> -->
             <template slot="searchBtn1">
                 <el-button type="primary" @click="doSearch">查询</el-button>
             </template>
@@ -76,95 +87,119 @@
             </template>
         </search-layout>
 
-        <div class="myTabsBox myTabsBoxThreeTabs">
-            <el-button
-                v-bind:class="{ addBtn: true}"
-                icon="el-icon-circle-plus-outline"
-                @click="addOne"
-                type="primary"
-                >数据导入</el-button
-            >
-        </div>
+        <!-- <div class="btnsPanel">
+            <upload ref="upload" :limit="1" @didUpload="didUpload"></upload>
+        </div> -->
 
         <tableList
             ref="table"
-            style="margin: 0 30px"
+            style="margin: 30px"
             :columns="columns"
             :getDataWay="getDataWay"
             :pagination="pagination"
             index
         >
-            <el-table-column label="操作" slot="cgInfos" align="center">
-                <template v-slot="scope">
-                    <i
-                        @click="editRow(scope.row)"
-                        class="el-icon-edit-outline elIcon"
-                        title="编辑"
-                    ></i>
+            <el-table-column
+                label="操作"
+                slot="cgInfos"
+                align="center"
+                width="180"
+            >
+                <!-- <template v-slot="scope">
                     <i
-                        @click="delOne(scope.row)"
-                        class="el-icon-delete elIcon"
-                        title="删除"
-                    ></i>
-                </template>
+                        @click="viewRow(scope.row)"
+                        class="el-icon-view elIcon cursor"
+                        title="查看"
+                    >
+                    </i>
+                </template> -->
             </el-table-column>
         </tableList>
+
+        <el-dialog
+            :title="videoDiaTitle"
+            :visible.sync="dialogVisible"
+            width="690px"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :before-close="diaClose"
+        >
+            <div class="videoBox">
+                <video autoplay :src="videoSrc" controls></video>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
 <script>
 import searchLayout from "@/components/grid/searchLayout";
 import tableList from "@/components/grid/TableList";
+// import upload from "./components/upload";
+import { mapState } from "vuex";
 
-export default{
-    name:"generalizationScene",
-    components:{searchLayout, tableList},
-    data(){
+export default {
+    name: "generalizationScenarioList", // 泛化场景
+    components: { searchLayout, tableList },
+    data() {
         return {
             searchParams: {
                 //搜索参数
-                
+                sceneId: "", // 场景类型编号
+                fileName: [], // 功能模块
+                scenarioWeather: [], // 天气
+                scenarioTime: "", // 时间
+
+                // highSpeed: [], // 高速
+                // ramp: [], // 匝道
+                // tunnel: [], // 隧道
+                // cutIn: [], // 切入
+                // cutOut: [], // 切出
+                // laneChange: [], // 变道
+                // turnAround: [], // 掉头
             },
-            getDataWay:{
-                //dataType: "url",
-                dataType: "data",
-                type: "post",
-                // firstRequest: false,
-                // data: this.$api.algorithmsLibrary.selectSharedAlgorithmList,
-                data:[{a1:'1',a2:'2',a3:'3',a4:'4',a5:'5',a6:'6'}],
-                param: {},
+            labels: [],
+            fileNameList: [],
+            scenarioWeatherList: [],
+            props: {
+                multiple: true,
+                label: "dictName",
+                value: "dictCode",
             },
             columns: [
                 //表格列
                 {
-                    label: "场景名称",
-                    prop: "a1",
+                    label: "编号",
+                    prop: "sceneId",
                 },
                 {
-                    label: "场景分类",
-                    prop: "a2",
+                    label: "场景名称",
+                    prop: "scenarioName",
                 },
                 {
-                    label: "适用功能",
-                    prop: "a3",
+                    label: "功能模块",
+                    prop: "fileName",
                 },
                 {
                     label: "道路类型",
-                    prop: "a4",
+                    prop: "scenarioRoadType",
                 },
                 {
-                    label: "昼夜情况",
-                    prop: "a5",
+                    label: "时间",
+                    prop: "scenarioTime",
                 },
                 {
                     label: "天气",
-                    prop: "a6",
+                    prop: "scenarioWeather",
                 },
-                {
-                    label: "操作",
-                    prop: "cgInfos",
-                    template: true
-                }
+                // {
+                //     label: "标签",
+                //     prop: "label",
+                // },
+                // {
+                //     label: "操作",
+                //     prop: "cgInfos",
+                //     template: true,
+                // },
             ],
             pagination: {
                 //分页使用
@@ -174,14 +209,125 @@ export default{
                 pageSizes: [10, 30, 50, 100, 200],
                 layout: "sizes, total, prev, pager, next, jumper",
             },
-        }
+            getDataWay: {
+                //加载表格数据
+                dataType: "url",
+                type: "post",
+                // firstRequest: false,
+                data: this.$api.sceneLibrary.querySceneGeneralTemplateList,
+                param: {},
+            },
+            dialogVisible: false,
+            autoplay: false,
+            videoSrc: "",
+            videoDiaTitle: "",
+        };
     },
-    methods:{
+
+    computed: {
+        ...mapState(["fileHost", "fileUrl"]),
+    },
+
+    methods: {
         doSearch() {
-            this.$nextTick(() => {
-                this.refreshList(this.searchParams);
-            });
+            /* this.searchParams.highSpeed = this.labels.includes("1")
+                ? [["roadType", "高速"]]
+                : [];
+            this.searchParams.cutIn = this.labels.includes("2")
+                ? [
+                      [
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "机动车从左侧切入成功",
+                      ],
+                      [
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "机动车从右侧切入成功",
+                      ],
+                  ]
+                : [];
+            this.searchParams.cutOut = this.labels.includes("3")
+                ? [
+                      [
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "机动车向左侧切出成功",
+                      ],
+                      [
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "机动车向右侧切出成功",
+                      ],
+                  ]
+                : [];
+            this.searchParams.laneChange = this.labels.includes("4")
+                ? [
+                      [
+                          "selfBehavior",
+                          "selfBehavior",
+                          "selfBehavior",
+                          "向左变道成功",
+                      ],
+                      [
+                          "selfBehavior",
+                          "selfBehavior",
+                          "selfBehavior",
+                          "向右变道成功",
+                      ],
+                      [
+                          "selfBehavior",
+                          "selfBehavior",
+                          "selfBehavior",
+                          "向左连续变道",
+                      ],
+                      [
+                          "selfBehavior",
+                          "selfBehavior",
+                          "selfBehavior",
+                          "向右连续变道",
+                      ],
+                      [
+                          "selfBehavior",
+                          "selfBehavior",
+                          "selfBehavior",
+                          "向左变道超车",
+                      ],
+                      [
+                          "selfBehavior",
+                          "selfBehavior",
+                          "selfBehavior",
+                          "向右变道超车",
+                      ],
+                  ]
+                : [];
+            this.searchParams.ramp = this.labels.includes("5")
+                ? [["ramp", "是"]]
+                : [];
+            this.searchParams.tunnel = this.labels.includes("6")
+                ? [["tunnel", "是"]]
+                : [];
+            this.searchParams.turnAround = this.labels.includes("7")
+                ? [
+                      ["selfBehavior", "直路掉头"],
+                      ["selfBehavior", "selfBehavior", "路口掉头"],
+                  ]
+                : []; */
+            this.refreshList(this.searchParams);
         },
+        //刷新table
         refreshList(param) {
             param
                 ? this.$refs["table"].loadData(param)
@@ -189,30 +335,102 @@ export default{
         },
         doReset() {
             this.searchParams = {
-                
+                sceneId: "",
+                fileName: [],
+                scenarioWeather: [],
+                scenarioTime: "",
             };
+            this.labels = [];
             this.doSearch();
         },
-        addOne() {
-            
-        },
-        editRow(row) {
-            
+        viewRow(row) {
+            this.dialogVisible = true;
+            this.videoDiaTitle = row.naturalName;
+
+            let url = "";
+            if (process.env.VUE_APP_IS_DEV == "true") {
+                url = this.fileHost + this.fileUrl;
+            } else {
+                url = this.fileUrl;
+            }
+
+            let token = localStorage.getItem("Authorization").split(" ")[1];
+            this.videoSrc = `${url}?objectName=${row.videoAddress}&access_token=${token}`;
+            this.autoplay = true;
         },
-        delOne(row) {
+        delRow(row) {
             this.$confirm("确认是否删除？", "提示", {
                 confirmButtonText: "确定",
                 cancelButtonText: "取消",
                 type: "warning",
             }).then(() => {
-                
+                this.$axios({
+                    method: "post",
+                    url: this.$api.sceneLibrary.deleteSceneNatural,
+                    data: {
+                        naturalId: row.naturalId,
+                    },
+                }).then((res) => {
+                    if (res.code == 200) {
+                        this.$message.success("删除成功");
+                    } else {
+                        this.$message.error(res.message || "删除失败");
+                    }
+                    this.doSearch();
+                });
             });
         },
-    }
-}
+        diaClose(done) {
+            this.autoplay = false;
+            this.videoSrc = "";
+            done();
+        },
+        didUpload() {
+            this.doSearch();
+        },
+        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 || "获取功能模块列表失败");
+                }
+            });
+        },
+    },
+
+    async mounted() {
+        await this.$dicsListsInit({
+            scenarioWeatherList: "scenarioWeather",
+        });
+
+        this.getFileNameList();
+    },
+};
 </script>
-<style scope lang="less">
-.myTabsBox{
-    min-height:99px;
+
+<style lang='less' scoped>
+@import "./common/util.less";
+.generalizationScenarioListPanel {
+    .inputBox {
+        .label {
+            min-width: 90px;
+        }
+    }
+
+    .btnsPanel {
+        text-align: right;
+    }
 }
 </style>

src/views/systemManagement/sceneLibraryManagement/naturalDrivingScene.vue

@@ -1,73 +1,113 @@
 <template>
-    <div>
+    <div class="naturalDrivingScenarioListPanel">
         <search-layout :needBox="true">
             <template slot="searchItem1">
-                <span class="label">场景名称</span>
+                <span class="label">场景编号</span>
                 <el-input
-                    v-model="searchParams.a1"
+                    v-model="searchParams.naturalName"
                     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.a2">
-                    <!--<el-option
-                        v-for="item in list"
-                        :label="item.caption"
-                        :value="item.code"
-                        :key="item.code"
-                    ></el-option>-->
-                </el-select>
+                <span class="label">道路</span>
+                <el-cascader
+                    v-model="searchParams.road"
+                    :options="roadList"
+                    :props="props"
+                    clearable
+                    size="small"
+                ></el-cascader>
             </template>
             <template slot="searchItem3">
-                <span class="label">场景分类</span>
-                <el-select v-model="searchParams.a3">
-                    <!--<el-option
-                        v-for="item in list"
-                        :label="item.caption"
-                        :value="item.code"
-                        :key="item.code"
-                    ></el-option>-->
-                </el-select>
+                <span class="label">基础设施</span>
+                <el-cascader
+                    v-model="searchParams.infrastructure"
+                    :options="infrastructureList"
+                    :props="props"
+                    clearable
+                    size="small"
+                ></el-cascader>
             </template>
             <template slot="searchItem4">
-                <span class="label">地区</span>
-                <el-select v-model="searchParams.a4">
-                    <!--<el-option
-                        v-for="item in list"
-                        :label="item.caption"
-                        :value="item.code"
-                        :key="item.code"
-                    ></el-option>-->
-                </el-select>
+                <span class="label">交通情况</span>
+                <el-cascader
+                    v-model="searchParams.trafficCondition"
+                    :options="trafficConditionList"
+                    :props="props"
+                    clearable
+                    size="small"
+                ></el-cascader>
             </template>
             <template slot="searchItem5">
-                <span class="label">适用功能</span>
-                <el-select v-model="searchParams.a5">
-                    <!--<el-option
-                        v-for="item in list"
-                        :label="item.caption"
-                        :value="item.code"
-                        :key="item.code"
-                    ></el-option>-->
-                </el-select>
+                <span class="label">自车行为</span>
+                <el-cascader
+                    v-model="searchParams.selfBehavior"
+                    :options="selfBehaviorList"
+                    :props="props"
+                    clearable
+                    size="small"
+                ></el-cascader>
             </template>
             <template slot="searchItem6">
-                <span class="label">目标类型</span>
-                <el-select v-model="searchParams.a6">
-                    <!--<el-option
-                        v-for="item in list"
-                        :label="item.caption"
-                        :value="item.code"
-                        :key="item.code"
-                    ></el-option>-->
-                </el-select>
+                <span class="label">目标行为</span>
+                <el-cascader
+                    v-model="searchParams.targetBehavior"
+                    :options="targetBehaviorList"
+                    :props="props"
+                    clearable
+                    size="small"
+                ></el-cascader>
+            </template>
+            <template slot="searchItem7">
+                <span class="label">自然环境</span>
+                <el-cascader
+                    v-model="searchParams.naturalEnvironment"
+                    :options="naturalEnvironmentList"
+                    :props="props"
+                    clearable
+                    size="small"
+                ></el-cascader>
+            </template>
+            <template slot="searchItem8">
+                <span class="label">临时性操纵</span>
+                <el-cascader
+                    v-model="searchParams.temporaryOperation"
+                    :options="temporaryOperationList"
+                    :props="props"
+                    clearable
+                    size="small"
+                ></el-cascader>
+            </template>
+            <template slot="searchItem27">
+                <el-checkbox-group v-model="labels">
+                    <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="labelA"
+                        >匝道</el-checkbox-button
+                    >
+                    <el-checkbox-button label="6" :key="6" class="labelB"
+                        >隧道</el-checkbox-button
+                    >
+                    <el-checkbox-button label="7" :key="7" class="labelC"
+                        >掉头</el-checkbox-button
+                    >
+                </el-checkbox-group>
             </template>
-
             <template slot="searchBtn1">
                 <el-button type="primary" @click="doSearch">查询</el-button>
             </template>
@@ -76,95 +116,140 @@
             </template>
         </search-layout>
 
-        <div class="myTabsBox myTabsBoxThreeTabs">
+        <!-- <div class="btnsPanel">
             <el-button
-                v-bind:class="{ addBtn: true}"
-                icon="el-icon-circle-plus-outline"
-                @click="addOne"
                 type="primary"
-                >数据导入</el-button
+                plain
+                icon="el-icon-upload"
+                @click="openFileDia"
+                >上传文件</el-button
             >
-        </div>
+        </div> -->
+
+        <!-- <file-dialog
+            ref="fileDialog"
+            type="1"
+            :objectPath="objectPath"
+            :api="$api.sceneLibrary.saveSceneNatural"
+            @fileClose="fileClose"
+        ></file-dialog> -->
 
         <tableList
             ref="table"
-            style="margin: 0 30px"
+            style="margin: 30px"
             :columns="columns"
             :getDataWay="getDataWay"
             :pagination="pagination"
             index
         >
-            <el-table-column label="操作" slot="cgInfos" align="center">
+            <el-table-column
+                label="操作"
+                slot="cgInfos"
+                align="center"
+                width="180"
+            >
                 <template v-slot="scope">
                     <i
-                        @click="editRow(scope.row)"
-                        class="el-icon-edit-outline elIcon"
-                        title="编辑"
-                    ></i>
+                        @click="viewRow(scope.row)"
+                        class="el-icon-view elIcon cursor"
+                        title="查看"
+                    >
+                    </i>
                     <i
-                        @click="delOne(scope.row)"
+                        @click="delRow(scope.row)"
                         class="el-icon-delete elIcon"
                         title="删除"
-                    ></i>
+                    >
+                    </i>
                 </template>
             </el-table-column>
         </tableList>
+
+        <el-dialog
+            :title="videoDiaTitle"
+            :visible.sync="dialogVisible"
+            width="690px"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :before-close="diaClose"
+        >
+            <div class="videoBox">
+                <video autoplay :src="videoSrc" controls></video>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
 <script>
 import searchLayout from "@/components/grid/searchLayout";
 import tableList from "@/components/grid/TableList";
+// import fileDialog from "./components/fileDialog";
+import { mapState } from "vuex";
 
-export default{
-    name:"naturalDrivingScene",
-    components:{searchLayout, tableList},
-    data(){
+export default {
+    name: "naturalDrivingScenarioList", // 自然驾驶场景
+    components: { searchLayout, tableList },
+    data() {
         return {
             searchParams: {
                 //搜索参数
-                
+                naturalName: "", // 场景编号
+                road: [], // 道路
+                infrastructure: [], // 基础设施
+                trafficCondition: [], // 交通情况
+                selfBehavior: [], // 自车行为
+                targetBehavior: [], // 目标行为
+                naturalEnvironment: [], // 自然环境
+
+                highSpeed: [], // 高速
+                ramp: [], // 匝道
+                tunnel: [], // 隧道
+                cutIn: [], // 切入
+                cutOut: [], // 切出
+                laneChange: [], // 变道
+                turnAround: [], // 掉头
             },
-            getDataWay:{
-                //dataType: "url",
-                dataType: "data",
-                type: "post",
-                // firstRequest: false,
-                // data: this.$api.algorithmsLibrary.selectSharedAlgorithmList,
-                data:[{a1:'1',a2:'2',a3:'3',a4:'4',a5:'5',a6:'6'}],
-                param: {},
+            labels: [],
+            list: [],
+            roadList: [],
+            infrastructureList: [],
+            trafficConditionList: [],
+            selfBehaviorList: [],
+            targetBehaviorList: [],
+            naturalEnvironmentList: [],
+            temporaryOperationList: [],
+            props: {
+                multiple: true,
+                label: "dictName",
+                value: "dictCode",
             },
             columns: [
                 //表格列
                 {
-                    label: "场景名称",
-                    prop: "a1",
-                },
-                {
-                    label: "场景要素",
-                    prop: "a2",
+                    label: "场景编号",
+                    prop: "naturalName",
                 },
                 {
-                    label: "场景分类",
-                    prop: "a3",
+                    label: "天气",
+                    prop: "weather",
                 },
                 {
-                    label: "地区",
-                    prop: "a4",
+                    label: "自车行为",
+                    prop: "selfBehavior",
                 },
                 {
-                    label: "目标类型",
-                    prop: "a5",
+                    label: "目标行为",
+                    prop: "targetBehavior",
                 },
                 {
-                    label: "适用功能",
-                    prop: "a6",
+                    label: "标签",
+                    prop: "label",
                 },
                 {
                     label: "操作",
                     prop: "cgInfos",
-                    template: true
-                }
+                    template: true,
+                },
             ],
             pagination: {
                 //分页使用
@@ -174,14 +259,126 @@ export default{
                 pageSizes: [10, 30, 50, 100, 200],
                 layout: "sizes, total, prev, pager, next, jumper",
             },
-        }
+            getDataWay: {
+                //加载表格数据
+                dataType: "url",
+                type: "post",
+                // firstRequest: false,
+                data: this.$api.sceneLibrary.querySceneNaturalList,
+                param: {},
+            },
+            dialogVisible: false,
+            autoplay: false,
+            videoSrc: "",
+            objectPath: "",
+            videoDiaTitle: "",
+        };
+    },
+
+    computed: {
+        ...mapState(["fileHost", "fileUrl"]),
     },
-    methods:{
+
+    methods: {
         doSearch() {
-            this.$nextTick(() => {
-                this.refreshList(this.searchParams);
-            });
+            this.searchParams.highSpeed = this.labels.includes("1")
+                ? [["roadType", "高速"]]
+                : [];
+            this.searchParams.cutIn = this.labels.includes("2")
+                ? [
+                      [
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "机动车从左侧切入成功",
+                      ],
+                      [
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "机动车从右侧切入成功",
+                      ],
+                  ]
+                : [];
+            this.searchParams.cutOut = this.labels.includes("3")
+                ? [
+                      [
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "机动车向左侧切出成功",
+                      ],
+                      [
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "targetBehavior",
+                          "机动车向右侧切出成功",
+                      ],
+                  ]
+                : [];
+            this.searchParams.laneChange = this.labels.includes("4")
+                ? [
+                      [
+                          "selfBehavior",
+                          "selfBehavior",
+                          "selfBehavior",
+                          "向左变道成功",
+                      ],
+                      [
+                          "selfBehavior",
+                          "selfBehavior",
+                          "selfBehavior",
+                          "向右变道成功",
+                      ],
+                      [
+                          "selfBehavior",
+                          "selfBehavior",
+                          "selfBehavior",
+                          "向左连续变道",
+                      ],
+                      [
+                          "selfBehavior",
+                          "selfBehavior",
+                          "selfBehavior",
+                          "向右连续变道",
+                      ],
+                      [
+                          "selfBehavior",
+                          "selfBehavior",
+                          "selfBehavior",
+                          "向左变道超车",
+                      ],
+                      [
+                          "selfBehavior",
+                          "selfBehavior",
+                          "selfBehavior",
+                          "向右变道超车",
+                      ],
+                  ]
+                : [];
+            this.searchParams.ramp = this.labels.includes("5")
+                ? [["ramp", "是"]]
+                : [];
+            this.searchParams.tunnel = this.labels.includes("6")
+                ? [["tunnel", "是"]]
+                : [];
+            this.searchParams.turnAround = this.labels.includes("7")
+                ? [
+                      ["selfBehavior", "直路掉头"],
+                      ["selfBehavior", "selfBehavior", "路口掉头"],
+                  ]
+                : [];
+            this.refreshList(this.searchParams);
         },
+        //刷新table
         refreshList(param) {
             param
                 ? this.$refs["table"].loadData(param)
@@ -189,30 +386,102 @@ export default{
         },
         doReset() {
             this.searchParams = {
-                
+                naturalName: "",
+                road: [],
+                infrastructure: [],
+                trafficCondition: [],
+                selfBehavior: [],
+                targetBehavior: [],
+                naturalEnvironment: [],
+                temporaryOperation: [],
+                highSpeed: [],
+                ramp: [],
+                tunnel: [],
+                cutIn: [],
+                cutOut: [],
+                laneChange: [],
+                turnAround: [],
             };
+            this.labels = [];
             this.doSearch();
         },
-        addOne() {
-            
-        },
-        editRow(row) {
-            
+        viewRow(row) {
+            this.dialogVisible = true;
+            this.videoDiaTitle = row.naturalName;
+
+            let url = "";
+            if (process.env.VUE_APP_IS_DEV == "true") {
+                url = this.fileHost + this.fileUrl;
+            } else {
+                url = this.fileUrl;
+            }
+
+            let token = localStorage.getItem("Authorization").split(" ")[1];
+            this.videoSrc = `${url}?objectName=${row.videoAddress}&access_token=${token}`;
+            this.autoplay = true;
         },
-        delOne(row) {
+        delRow(row) {
             this.$confirm("确认是否删除？", "提示", {
                 confirmButtonText: "确定",
                 cancelButtonText: "取消",
                 type: "warning",
             }).then(() => {
-                
+                this.$axios({
+                    method: "post",
+                    url: this.$api.sceneLibrary.deleteSceneNatural,
+                    data: {
+                        naturalId: row.naturalId,
+                    },
+                }).then((res) => {
+                    if (res.code == 200) {
+                        this.$message.success("删除成功");
+                    } else {
+                        this.$message.error(res.message || "删除失败");
+                    }
+                    this.doSearch();
+                });
             });
         },
-    }
-}
+        diaClose(done) {
+            this.autoplay = false;
+            this.videoSrc = "";
+            done();
+        },
+        openFileDia() {
+            this.objectPath = Math.random().toString();
+            this.$refs.fileDialog.fileVisible = true;
+        },
+        fileClose() {
+            this.objectPath = "";
+            this.doSearch();
+        },
+    },
+
+    async mounted() {
+        await this.$dicsTreesInit({
+            roadList: "road",
+            infrastructureList: "infrastructure",
+            trafficConditionList: "trafficCondition",
+            selfBehaviorList: "selfBehavior",
+            targetBehaviorList: "targetBehavior",
+            naturalEnvironmentList: "naturalEnvironment",
+            temporaryOperationList: "temporaryOperation",
+        });
+    },
+};
 </script>
-<style scope lang="less">
-.myTabsBox{
-    min-height:99px;
+
+<style lang='less' scoped>
+@import "./common/util.less";
+.naturalDrivingScenarioListPanel {
+    .inputBox {
+        .label {
+            min-width: 75px;
+        }
+    }
+
+    .btnsPanel {
+        text-align: right;
+    }
 }
 </style>

src/views/systemManagement/sceneLibraryManagement/sceneLibraryManagement.vue

@@ -9,47 +9,46 @@
             @toolbarClick="toolsControl"
         >
         </toolbarTab>
-        <naturalDrivingScene
-            v-show="subPageActiveName == 1"
-        >
-        </naturalDrivingScene>
-        <standardRegulationSimulationScene
-            v-show="subPageActiveName == 2"
-        >
-        </standardRegulationSimulationScene>
-        <trafficAccidentSimulationScene
-            v-show="subPageActiveName == 3"
-        >
-        </trafficAccidentSimulationScene>
-        <generalizationScene
-            v-show="subPageActiveName == 4"
-        ></generalizationScene>
+        <traffic-accident-simulation-scene v-show="subPageActiveName === 1">
+        </traffic-accident-simulation-scene>
+        <natural-driving-scene v-show="subPageActiveName === 2">
+        </natural-driving-scene>
+        <standard-regulation-simulation-scene v-show="subPageActiveName === 3">
+        </standard-regulation-simulation-scene>
+        <generalization-scene
+            v-show="subPageActiveName === 4"
+        ></generalization-scene>
     </div>
 </template>
 
 <script>
 import toolbarTab from "@/components/toolbar/toolbarTab";
-import naturalDrivingScene from "./naturalDrivingScene"
-import standardRegulationSimulationScene from "./standardRegulationSimulationScene"
-import trafficAccidentSimulationScene from "./trafficAccidentSimulationScene"
-import generalizationScene from "./generalizationScene"
+import trafficAccidentSimulationScene from "./trafficAccidentSimulationScene";
+import naturalDrivingScene from "./naturalDrivingScene";
+import standardRegulationSimulationScene from "./standardRegulationSimulationScene";
+import generalizationScene from "./generalizationScene";
 
-export default{
+export default {
     name: "sceneLibraryManagement",
-    components: { toolbarTab, naturalDrivingScene, standardRegulationSimulationScene, trafficAccidentSimulationScene, generalizationScene},
+    components: {
+        toolbarTab,
+        naturalDrivingScene,
+        standardRegulationSimulationScene,
+        trafficAccidentSimulationScene,
+        generalizationScene,
+    },
     data() {
         return {
-            subPageActiveName:1,
-            
+            subPageActiveName: 1,
         };
     },
     computed: {
-        subPageList(){
+        subPageList() {
             return [
                 {
                     type: "primary",
                     plain: true,
-                    title: "自然驾驶场景",
+                    title: "交通事故仿真场景",
                     disabled: false,
                     api: "",
                     fromId: 1,
@@ -57,7 +56,7 @@ export default{
                 {
                     type: "primary",
                     plain: true,
-                    title: "标准法规仿真场景",
+                    title: "自然驾驶场景",
                     disabled: false,
                     api: "",
                     fromId: 2,
@@ -65,7 +64,7 @@ export default{
                 {
                     type: "primary",
                     plain: true,
-                    title: "交通事故仿真场景",
+                    title: "标准法规仿真场景",
                     disabled: false,
                     api: "",
                     fromId: 3,
@@ -78,15 +77,15 @@ export default{
                     api: "",
                     fromId: 4,
                 },
-            ]
-        }
+            ];
+        },
     },
     methods: {
-        toolsControl(item){
+        toolsControl(item) {
             this.subPageActiveName = item.fromId;
-        }
+        },
     },
-}
+};
 </script>
 
 <style scoped lang="less">
@@ -100,11 +99,11 @@ export default{
         top: 45px;
     }
 }
-.myTabsBox{
-    min-height:99px;
+.myTabsBox {
+    min-height: 99px;
 }
-/deep/ .el-tabs__nav .el-tabs__item{
-    width:auto;
-    padding:0 10px;
+/deep/ .el-tabs__nav .el-tabs__item {
+    width: auto;
+    padding: 0 10px;
 }
 </style>

src/views/systemManagement/sceneLibraryManagement/standardRegulationSimulationScene.vue

@@ -4,70 +4,59 @@
             <template slot="searchItem1">
                 <span class="label">场景名称</span>
                 <el-input
-                    v-model="searchParams.a1"
+                    v-model="searchParams.sceneName"
                     size="small"
+                    maxlength="60"
                     clearable
                     placeholder="请输入"
-                    maxlength="60"
+                    @keyup.enter.native="doSearch"
                 >
                 </el-input>
             </template>
             <template slot="searchItem2">
-                <span class="label">场景要素</span>
-                <el-select v-model="searchParams.a2">
-                    <!--<el-option
-                        v-for="item in list"
+                <span class="label">法规类型</span>
+                <el-select
+                    v-model="searchParams.regulationType"
+                    multiple
+                    clearable
+                    size="small"
+                >
+                    <el-option
+                        v-for="item in regulationTypeList"
                         :label="item.caption"
                         :value="item.code"
                         :key="item.code"
-                    ></el-option>-->
+                    ></el-option>
                 </el-select>
             </template>
             <template slot="searchItem3">
-                <span class="label">场景分类</span>
-                <el-select v-model="searchParams.a3">
-                    <!--<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.a4">
-                    <!--<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.a5">
-                    <!--<el-option
-                        v-for="item in list"
-                        :label="item.caption"
-                        :value="item.code"
-                        :key="item.code"
-                    ></el-option>-->
-                </el-select>
+                <span class="label">标准类型</span>
+                <el-input
+                    v-model="searchParams.standardType"
+                    size="small"
+                    maxlength="60"
+                    clearable
+                    placeholder="请输入"
+                    @keyup.enter.native="doSearch"
+                >
+                </el-input>
             </template>
-            <template slot="searchItem6">
-                <span class="label">目标类型</span>
-                <el-select v-model="searchParams.a6">
-                    <!--<el-option
-                        v-for="item in list"
-                        :label="item.caption"
-                        :value="item.code"
-                        :key="item.code"
-                    ></el-option>-->
-                </el-select>
+            <template slot="searchItem27">
+                <el-checkbox-group v-model="labels">
+                    <el-checkbox-button label="ISO" :key="1" class="labelA"
+                        >ISO</el-checkbox-button
+                    >
+                    <el-checkbox-button label="GB" :key="2" class="labelB"
+                        >GB</el-checkbox-button
+                    >
+                    <el-checkbox-button label="C-NCAP" :key="3" class="labelC"
+                        >C-NCAP</el-checkbox-button
+                    >
+                    <el-checkbox-button label="E-NCAP" :key="4" class="labelD"
+                        >E-NCAP</el-checkbox-button
+                    >
+                </el-checkbox-group>
             </template>
-
             <template slot="searchBtn1">
                 <el-button type="primary" @click="doSearch">查询</el-button>
             </template>
@@ -76,95 +65,114 @@
             </template>
         </search-layout>
 
-        <div class="myTabsBox myTabsBoxThreeTabs">
+        <!-- <div class="btnsPanel">
             <el-button
-                v-bind:class="{ addBtn: true}"
-                icon="el-icon-circle-plus-outline"
-                @click="addOne"
                 type="primary"
-                >数据导入</el-button
+                plain
+                icon="el-icon-upload"
+                @click="openFileDia"
+                >上传文件</el-button
             >
-        </div>
+        </div> -->
+
+        <!-- <file-dialog
+            ref="fileDialog"
+            type="2"
+            :objectPath="objectPath"
+            :api="$api.sceneLibrary.saveStandardsRegulations"
+            @fileClose="fileClose"
+        ></file-dialog> -->
 
         <tableList
             ref="table"
-            style="margin: 0 30px"
+            style="margin: 30px"
             :columns="columns"
             :getDataWay="getDataWay"
             :pagination="pagination"
             index
         >
-            <el-table-column label="操作" slot="cgInfos" align="center">
+            <el-table-column
+                label="操作"
+                slot="cgInfos"
+                align="center"
+                width="180"
+            >
                 <template v-slot="scope">
                     <i
-                        @click="editRow(scope.row)"
-                        class="el-icon-edit-outline elIcon"
-                        title="编辑"
-                    ></i>
+                        @click="viewRow(scope.row)"
+                        class="el-icon-view elIcon cursor"
+                        title="查看"
+                    >
+                    </i>
                     <i
-                        @click="delOne(scope.row)"
+                        @click="delRow(scope.row)"
                         class="el-icon-delete elIcon"
                         title="删除"
-                    ></i>
+                    >
+                    </i>
                 </template>
             </el-table-column>
         </tableList>
+
+        <el-dialog
+            :title="videoDiaTitle"
+            :visible.sync="dialogVisible"
+            width="690px"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :before-close="diaClose"
+        >
+            <div class="videoBox">
+                <video autoplay :src="videoSrc" controls></video>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
 <script>
 import searchLayout from "@/components/grid/searchLayout";
 import tableList from "@/components/grid/TableList";
+// import fileDialog from "./components/fileDialog";
+import { mapState } from "vuex";
 
-export default{
-    name:"standardRegulationSimulationScene",
-    components:{searchLayout, tableList},
-    data(){
+export default {
+    name: "standardRegulationSimulationScenarioList", // 标准法规仿真场景
+    components: { searchLayout, tableList },
+    data() {
         return {
             searchParams: {
                 //搜索参数
-                
-            },
-            getDataWay:{
-                //dataType: "url",
-                dataType: "data",
-                type: "post",
-                // firstRequest: false,
-                // data: this.$api.algorithmsLibrary.selectSharedAlgorithmList,
-                data:[{a1:'1',a2:'2',a3:'3',a4:'4',a5:'5',a6:'6'}],
-                param: {},
+                sceneName: "", //场景名称
+                regulationType: [], //法规类型
+                standardType: "", //标准类型
+                label: [],
             },
+            labels: [], // 标签
+            regulationTypeList: [],
             columns: [
                 //表格列
                 {
                     label: "场景名称",
-                    prop: "a1",
-                },
-                {
-                    label: "场景要素",
-                    prop: "a2",
-                },
-                {
-                    label: "场景分类",
-                    prop: "a3",
+                    prop: "sceneName",
                 },
                 {
-                    label: "地区",
-                    prop: "a4",
+                    label: "法规类型",
+                    prop: "regulationType",
                 },
                 {
-                    label: "目标类型",
-                    prop: "a5",
+                    label: "标准类型",
+                    prop: "standardType",
                 },
                 {
-                    label: "适用功能",
-                    prop: "a6",
+                    label: "标签",
+                    prop: "regulationType",
                 },
                 {
                     label: "操作",
                     prop: "cgInfos",
-                    template: true
-                }
+                    template: true,
+                    // videoAddress
+                },
             ],
             pagination: {
                 //分页使用
@@ -174,14 +182,32 @@ export default{
                 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,
+            autoplay: false,
+            videoSrc: "",
+            objectPath: "",
+            videoDiaTitle: "",
+        };
     },
-    methods:{
+
+    computed: {
+        ...mapState(["fileHost", "fileUrl"]),
+    },
+
+    methods: {
         doSearch() {
-            this.$nextTick(() => {
-                this.refreshList(this.searchParams);
-            });
+            this.searchParams.label = [...this.labels];
+            this.refreshList(this.searchParams);
         },
+        //刷新table
         refreshList(param) {
             param
                 ? this.$refs["table"].loadData(param)
@@ -189,30 +215,77 @@ export default{
         },
         doReset() {
             this.searchParams = {
-                
+                sceneName: "",
+                regulationType: [],
+                standardType: "",
+                label: [],
             };
+            this.labels = [];
             this.doSearch();
         },
-        addOne() {
-            
-        },
-        editRow(row) {
-            
+        viewRow(row) {
+            this.dialogVisible = true;
+            this.videoDiaTitle = row.sceneName;
+
+            let url = "";
+            if (process.env.VUE_APP_IS_DEV == "true") {
+                url = this.fileHost + this.fileUrl;
+            } else {
+                url = this.fileUrl;
+            }
+
+            let token = localStorage.getItem("Authorization").split(" ")[1];
+            this.videoSrc = `${url}?objectName=${row.videoAddress}&access_token=${token}`;
+            this.autoplay = true;
         },
-        delOne(row) {
+        delRow(row) {
             this.$confirm("确认是否删除？", "提示", {
                 confirmButtonText: "确定",
                 cancelButtonText: "取消",
                 type: "warning",
             }).then(() => {
-                
+                this.$axios({
+                    method: "post",
+                    url: this.$api.sceneLibrary.deleteStandardsRegulations,
+                    data: {
+                        regulationsId: row.regulationsId,
+                    },
+                }).then((res) => {
+                    if (res.code == 200) {
+                        this.$message.success("删除成功");
+                    } else {
+                        this.$message.error(res.message || "删除失败");
+                    }
+                    this.doSearch();
+                });
             });
         },
-    }
-}
+        diaClose(done) {
+            this.autoplay = false;
+            this.videoSrc = "";
+            done();
+        },
+        openFileDia() {
+            this.objectPath = Math.random().toString();
+            this.$refs.fileDialog.fileVisible = true;
+        },
+        fileClose() {
+            this.objectPath = "";
+            this.doSearch();
+        },
+    },
+
+    async mounted() {
+        await this.$dicsListsInit({
+            regulationTypeList: "regulationType",
+        });
+    },
+};
 </script>
-<style scope lang="less">
-.myTabsBox{
-    min-height:99px;
+
+<style lang='less' scoped>
+@import "./common/util.less";
+.btnsPanel {
+    text-align: right;
 }
 </style>

src/views/systemManagement/sceneLibraryManagement/trafficAccidentSimulationScene.vue

@@ -1,91 +1,120 @@
 <template>
-    <div>
+    <div class="trafficAccidentSimulationScenarioListPanel">
         <search-layout :needBox="true">
             <template slot="searchItem1">
-                <span class="label">场景来源</span>
+                <span class="label">场景名称</span>
                 <el-input
-                    v-model="searchParams.a1"
+                    v-model="searchParams.sceneName"
                     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.a2">
-                    <!--<el-option
-                        v-for="item in list"
+                <span class="label">自车驾驶行为</span>
+                <el-select
+                    v-model="searchParams.selfDriving"
+                    multiple
+                    clearable
+                    size="small"
+                >
+                    <el-option
+                        v-for="item in selfDrivingList"
                         :label="item.caption"
                         :value="item.code"
                         :key="item.code"
-                    ></el-option>-->
+                    ></el-option>
                 </el-select>
             </template>
             <template slot="searchItem3">
-                <span class="label">道路类型</span>
-                <el-select v-model="searchParams.a3">
-                    <!--<el-option
-                        v-for="item in list"
+                <span class="label">目标驾驶行为</span>
+                <el-select
+                    v-model="searchParams.targetDriving"
+                    multiple
+                    clearable
+                    size="small"
+                >
+                    <el-option
+                        v-for="item in targetDrivingList"
                         :label="item.caption"
                         :value="item.code"
                         :key="item.code"
-                    ></el-option>-->
+                    ></el-option>
                 </el-select>
             </template>
             <template slot="searchItem4">
-                <span class="label">地区</span>
-                <el-select v-model="searchParams.a4">
-                    <!--<el-option
-                        v-for="item in list"
+                <span class="label">自车反应行为</span>
+                <el-select
+                    v-model="searchParams.selfReaction"
+                    multiple
+                    clearable
+                    size="small"
+                >
+                    <el-option
+                        v-for="item in selfReactionList"
                         :label="item.caption"
                         :value="item.code"
                         :key="item.code"
-                    ></el-option>-->
+                    ></el-option>
                 </el-select>
             </template>
             <template slot="searchItem5">
-                <span class="label">适用功能</span>
-                <el-select v-model="searchParams.a5">
-                    <!--<el-option
-                        v-for="item in list"
+                <span class="label">冲突行为</span>
+                <el-select
+                    v-model="searchParams.conflictBehavior"
+                    multiple
+                    clearable
+                    size="small"
+                >
+                    <el-option
+                        v-for="item in conflictBehaviorList"
                         :label="item.caption"
                         :value="item.code"
                         :key="item.code"
-                    ></el-option>-->
+                    ></el-option>
                 </el-select>
             </template>
             <template slot="searchItem6">
-                <span class="label">目标类型</span>
-                <el-select v-model="searchParams.a6">
-                    <!--<el-option
-                        v-for="item in list"
+                <span class="label">冲突类型</span>
+                <el-select
+                    v-model="searchParams.conflictType"
+                    multiple
+                    clearable
+                    size="small"
+                >
+                    <el-option
+                        v-for="item in conflictTypeList"
                         :label="item.caption"
                         :value="item.code"
                         :key="item.code"
-                    ></el-option>-->
+                    ></el-option>
                 </el-select>
             </template>
-            <template slot="searchItem7">
-                <span class="label">是否存在盲区</span>
-                <el-radio v-model="searchParams.a7" label="1"
-                    >是</el-radio
-                >
-                <el-radio v-model="searchParams.a7" label="0"
-                    >否</el-radio
-                >
-            </template>
-            <template slot="searchItem8">
-                <span class="label">是否发生碰撞</span>
-                <el-radio v-model="searchParams.a8" label="1"
-                    >是</el-radio
-                >
-                <el-radio v-model="searchParams.a8" label="0"
-                    >否</el-radio
-                >
+            <template slot="searchItem27">
+                <el-checkbox-group v-model="labels">
+                    <el-checkbox-button label="追尾" :key="1" class="labelA"
+                        >追尾</el-checkbox-button
+                    >
+                    <el-checkbox-button label="切入" :key="2" class="labelB"
+                        >目标车切入</el-checkbox-button
+                    >
+                    <el-checkbox-button
+                        label="沿弯道行驶"
+                        :key="3"
+                        class="labelC"
+                        >目标车沿弯道行驶</el-checkbox-button
+                    >
+                    <el-checkbox-button
+                        label="机动车-机动车冲突"
+                        :key="4"
+                        class="labelD"
+                        >机动车-机动车冲突</el-checkbox-button
+                    >
+                </el-checkbox-group>
             </template>
-
             <template slot="searchBtn1">
                 <el-button type="primary" @click="doSearch">查询</el-button>
             </template>
@@ -94,95 +123,135 @@
             </template>
         </search-layout>
 
-        <div class="myTabsBox myTabsBoxThreeTabs">
+        <!-- <div class="btnsPanel">
             <el-button
-                v-bind:class="{ addBtn: true}"
-                icon="el-icon-circle-plus-outline"
-                @click="addOne"
                 type="primary"
-                >数据导入</el-button
+                plain
+                icon="el-icon-upload"
+                @click="openFileDia"
+                >上传文件</el-button
             >
-        </div>
+        </div> -->
+
+        <!-- <file-dialog
+            ref="fileDialog"
+            type="3"
+            :objectPath="objectPath"
+            :api="$api.sceneLibrary.saveSceneAccident"
+            @fileClose="fileClose"
+        ></file-dialog> -->
 
         <tableList
             ref="table"
-            style="margin: 0 30px"
+            style="margin: 30px"
             :columns="columns"
             :getDataWay="getDataWay"
             :pagination="pagination"
             index
         >
-            <el-table-column label="操作" slot="cgInfos" align="center">
+            <el-table-column
+                label="操作"
+                slot="cgInfos"
+                align="center"
+                width="180"
+            >
                 <template v-slot="scope">
                     <i
-                        @click="editRow(scope.row)"
-                        class="el-icon-edit-outline elIcon"
-                        title="编辑"
-                    ></i>
+                        @click="viewRow(scope.row)"
+                        class="el-icon-view elIcon cursor"
+                        title="查看"
+                    >
+                    </i>
                     <i
-                        @click="delOne(scope.row)"
+                        @click="delRow(scope.row)"
                         class="el-icon-delete elIcon"
                         title="删除"
-                    ></i>
+                    >
+                    </i>
                 </template>
             </el-table-column>
         </tableList>
+
+        <el-dialog
+            :title="videoDiaTitle"
+            :visible.sync="dialogVisible"
+            width="690px"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            :before-close="diaClose"
+        >
+            <div class="videoBox">
+                <video autoplay :src="videoSrc" controls></video>
+            </div>
+        </el-dialog>
     </div>
 </template>
 
 <script>
 import searchLayout from "@/components/grid/searchLayout";
 import tableList from "@/components/grid/TableList";
+// import fileDialog from "./components/fileDialog";
+import { mapState } from "vuex";
 
-export default{
-    name:"trafficAccidentSimulationScene",
-    components:{searchLayout, tableList},
-    data(){
+export default {
+    name: "trafficAccidentSimulationScenarioList", // 交通事故仿真场景
+    components: { searchLayout, tableList },
+    data() {
         return {
             searchParams: {
                 //搜索参数
-                
-            },
-            getDataWay:{
-                //dataType: "url",
-                dataType: "data",
-                type: "post",
-                // firstRequest: false,
-                // data: this.$api.algorithmsLibrary.selectSharedAlgorithmList,
-                data:[{a1:'1',a2:'2',a3:'3',a4:'4',a5:'5',a6:'6'}],
-                param: {},
+                sceneName: "", //场景名称
+                selfDriving: [], //自车驾驶行为
+                targetDriving: [], //目标驾驶行为
+                selfReaction: [], //自车反应行为
+                conflictBehavior: [], //冲突行为
+                conflictType: [], //冲突类型
+                rearEndCollision: "", // 追尾
+                cutIn: "", // 切入
+                driveCurve: "", // 沿弯道行驶
+                carConflict: "", // 机动车-机动车冲突
             },
+            labels: [],
+            selfDrivingList: [],
+            targetDrivingList: [],
+            selfReactionList: [],
+            conflictBehaviorList: [],
+            conflictTypeList: [],
             columns: [
                 //表格列
                 {
                     label: "场景名称",
-                    prop: "a1",
+                    prop: "sceneName",
+                },
+                {
+                    label: "自车驾驶行为",
+                    prop: "selfDriving",
                 },
                 {
-                    label: "场景来源",
-                    prop: "a2",
+                    label: "目标驾驶行为",
+                    prop: "targetDriving",
                 },
                 {
-                    label: "事故类型",
-                    prop: "a3",
+                    label: "自车反应行为",
+                    prop: "selfReaction",
                 },
                 {
-                    label: "道路类型",
-                    prop: "a4",
+                    label: "冲突行为",
+                    prop: "conflictBehavior",
                 },
                 {
-                    label: "时间",
-                    prop: "a5",
+                    label: "冲突类型",
+                    prop: "conflictType",
                 },
                 {
-                    label: "天气",
-                    prop: "a6",
+                    label: "标签",
+                    prop: "label",
                 },
                 {
                     label: "操作",
                     prop: "cgInfos",
-                    template: true
-                }
+                    template: true,
+                },
             ],
             pagination: {
                 //分页使用
@@ -192,14 +261,45 @@ export default{
                 pageSizes: [10, 30, 50, 100, 200],
                 layout: "sizes, total, prev, pager, next, jumper",
             },
-        }
+            getDataWay: {
+                //加载表格数据
+                dataType: "url",
+                type: "post",
+                // firstRequest: false,
+                data: this.$api.sceneLibrary.querySceneAccidentList,
+                param: {},
+            },
+            dialogVisible: false,
+            autoplay: false,
+            videoSrc: "",
+            objectPath: "",
+            videoDiaTitle: "",
+        };
     },
-    methods:{
+
+    computed: {
+        ...mapState(["fileHost", "fileUrl"]),
+    },
+
+    methods: {
         doSearch() {
-            this.$nextTick(() => {
-                this.refreshList(this.searchParams);
-            });
+            this.searchParams.rearEndCollision = this.labels.includes("追尾")
+                ? "追尾"
+                : "";
+            this.searchParams.cutIn = this.labels.includes("切入")
+                ? "切入"
+                : "";
+            this.searchParams.driveCurve = this.labels.includes("沿弯道行驶")
+                ? "沿弯道行驶"
+                : "";
+            this.searchParams.carConflict = this.labels.includes(
+                "机动车-机动车冲突"
+            )
+                ? "机动车-机动车"
+                : "";
+            this.refreshList(this.searchParams);
         },
+        //刷新table
         refreshList(param) {
             param
                 ? this.$refs["table"].loadData(param)
@@ -207,30 +307,99 @@ export default{
         },
         doReset() {
             this.searchParams = {
-                
+                sceneName: "",
+                selfDriving: [],
+                targetDriving: [],
+                selfReaction: [],
+                conflictBehavior: [],
+                conflictType: [],
+                rearEndCollision: "",
+                cutIn: "",
+                driveCurve: "",
+                carConflict: "",
             };
+            this.labels = [];
             this.doSearch();
         },
-        addOne() {
-            
-        },
-        editRow(row) {
-            
+        viewRow(row) {
+            this.dialogVisible = true;
+            this.videoDiaTitle = row.sceneName;
+
+            let url = "";
+            if (process.env.VUE_APP_IS_DEV == "true") {
+                url = this.fileHost + this.fileUrl;
+            } else {
+                url = this.fileUrl;
+            }
+
+            let token = localStorage.getItem("Authorization").split(" ")[1];
+            this.videoSrc = `${url}?objectName=${row.videoAddress}&access_token=${token}`;
+            this.autoplay = true;
         },
-        delOne(row) {
+        delRow(row) {
             this.$confirm("确认是否删除？", "提示", {
                 confirmButtonText: "确定",
                 cancelButtonText: "取消",
                 type: "warning",
             }).then(() => {
-                
+                this.$axios({
+                    method: "post",
+                    url: this.$api.sceneLibrary.deleteSceneAccident,
+                    data: {
+                        accidentId: row.accidentId,
+                    },
+                }).then((res) => {
+                    if (res.code == 200) {
+                        this.$message.success("删除成功");
+                    } else {
+                        this.$message.error(res.message || "删除失败");
+                    }
+                    this.doSearch();
+                });
             });
         },
-    }
-}
+        diaClose(done) {
+            this.autoplay = false;
+            this.videoSrc = "";
+            done();
+        },
+        openFileDia() {
+            this.objectPath = Math.random().toString();
+            this.$refs.fileDialog.fileVisible = true;
+        },
+        fileClose() {
+            this.objectPath = "";
+            this.doSearch();
+        },
+    },
+
+    async mounted() {
+        await this.$dicsListsInit({
+            selfDrivingList: "selfDriving",
+            targetDrivingList: "targetDriving",
+            selfReactionList: "selfReaction",
+            conflictBehaviorList: "conflictBehavior",
+            conflictTypeList: "conflictType",
+        });
+    },
+};
 </script>
-<style scope lang="less">
-.myTabsBox{
-    min-height:99px;
+
+<style lang='less' scoped>
+@import "./common/util.less";
+.trafficAccidentSimulationScenarioListPanel {
+    .inputBox {
+        .radioBox {
+            width: 340px;
+        }
+
+        .label {
+            min-width: 90px;
+        }
+    }
+
+    .btnsPanel {
+        text-align: right;
+    }
 }
 </style>