feat:仿真模式页面ui开发

src/router/index.js

@@ -6,118 +6,148 @@ import algorithmsLibrary from "./algorithmsLibrary"; // 算法库
 import sceneLibrary from "./sceneLibrary"; // 场景库
 import systemManagement from "./systemManagement"; // 账户管理
 import workManagement from "./workManagement"; // 工作管理
+import multimodeSimulation from './multimodeSimulation'; // 多模式仿真
 import personalInformation from "./personalInformation"
 
 Vue.use(VueRouter);
 
 const routes = [{
-    path: "/login",
-    name: "login",
-    component: () => import("../views/login.vue")
+  path: "/login",
+  name: "login",
+  component: () => import("../views/login.vue")
+},
+{
+  path: "/",
+  name: "index",
+  meta: {
+    tabname: "首页"
   },
-  {
-    path: "/",
-    name: "index",
-    meta: {
-      tabname: "首页"
+  component: () => import('../views/index'),
+  redirect: '/mainPage',
+  children: [
+    {
+      path: "/mainPage",
+      name: "mainPage",
+      meta: {
+        // tabname: "首页"
+        login: true
+      },
+      component: () => import("@/views/mainPage.vue")
     },
-    component: () => import('../views/index'),
-    redirect: '/mainPage',
-    children: [
-      {
-        path: "/mainPage",
-        name: "mainPage",
-        meta: {
-          // tabname: "首页"
-          login: true
-        },
-        component: () => import("@/views/mainPage.vue")
+    {
+      path: "/modelLibrary",
+      name: "modelLibrary",
+      meta: {
+        tabname: "模型库",
+        login: true
       },
-      {
-        path: "/modelLibrary",
-        name: "modelLibrary",
-        meta: {
-          tabname: "模型库",
-          login: true
-        },
-        component: () => import("@/views/modelLibrary/index"),
-        redirect: '/index',
-        children: modelLibrary,
+      component: () => import("@/views/modelLibrary/index"),
+      redirect: '/index',
+      children: modelLibrary,
+    },
+    {
+      path: "/algorithmsLibrary",
+      name: "algorithmsLibrary",
+      meta: {
+        tabname: "算法库",
+        login: true
       },
-      {
-        path: "/algorithmsLibrary",
-        name: "algorithmsLibrary",
-        meta: {
-          tabname: "算法库",
-          login: true
-        },
-        component: () => import("@/views/algorithmsLibrary/index"),
-        redirect: '/index',
-        children: algorithmsLibrary,
+      component: () => import("@/views/algorithmsLibrary/index"),
+      redirect: '/index',
+      children: algorithmsLibrary,
+    },
+    {
+      path: "/sceneLibrary",
+      name: "sceneLibrary",
+      meta: {
+        tabname: "场景库",
+        login: true
       },
-      {
-        path: "/sceneLibrary",
-        name: "sceneLibrary",
-        meta: {
-          tabname: "场景库",
-          login: true
-        },
-        component: () => import("@/views/sceneLibrary/index"),
-        redirect: '/index',
-        children: sceneLibrary,
+      component: () => import("@/views/sceneLibrary/index"),
+      redirect: '/index',
+      children: sceneLibrary,
+    },
+    {
+      path: "/workManagement",
+      name: "workManagement",
+      meta: {
+        tabname: "工作管理",
+        login: true
       },
-      {
-        path: "/workManagement",
-        name: "workManagement",
-        meta: {
-          tabname: "工作管理",
-          login: true
-        },
-        component: () => import("@/views/workManagement/index"),
-        redirect: '/index',
-        children: workManagement,
+      component: () => import("@/views/workManagement/index"),
+      redirect: '/index',
+      children: workManagement,
+    },
+    {
+      path: "/systemManagement",
+      name: "systemManagement",
+      meta: {
+        tabname: "系统管理",
+        login: true
       },
-      {
-        path: "/systemManagement",
-        name: "systemManagement",
-        meta: {
-          tabname: "系统管理",
-          login: true
-        },
-        component: () => import("@/views/systemManagement/index"),
-        redirect: '/index',
-        children: systemManagement,
-      }, 
-      {
-        path: "/personalInformation",
-        name: "personalInformation",
-        meta: {
-          tabname: "个人信息",
-          login: true
-        },
-        component: () => import("@/views/personalInformation/personalInformation"),
-        // redirect: '/index',
-        // children: personalInformation,
-      }, 
-    ]
-    // .concat([{
-    //   path: "*",
-    //   name: "*",
-    //   component: () => import("../views/mainPage.vue")
-    // }, ]),
-  },
-  {
-    path: "*",
-    name: "*",
-    component: () => import("@/views/mainPage.vue")
-  }
+      component: () => import("@/views/systemManagement/index"),
+      redirect: '/index',
+      children: systemManagement,
+    },
+    {
+      path: "/personalInformation",
+      name: "personalInformation",
+      meta: {
+        tabname: "个人信息",
+        login: true
+      },
+      component: () => import("@/views/personalInformation/personalInformation"),
+      // redirect: '/index',
+      // children: personalInformation,
+    },
+    {
+      path: "/test",
+      name: "multimodeSimulation",
+      meta: {
+        tabname: "多模式仿真",
+        login: true
+      },
+      component: () => import("@/views/multimodeSimulation"),
+    },
+    {
+      path: "test2",
+      name: "simulationEdit",
+      meta: {
+        tabname: "多模式仿真详情",
+        menuKind: "simulationEdit",
+        login: true
+      },
+      component: () => import("@/views/multimodeSimulation/simulationEdit.vue")
+    },
+    {
+      path: "test3",
+      name: "evaluationResults",
+      meta: {
+        tabname: "多模式仿真评价结果",
+        menuKind: "evaluationResults",
+        login: true
+      },
+      component: () => import("@/views/multimodeSimulation/evaluationResults.vue")
+    }
+  ]
+  // .concat([{
+  //   path: "*",
+  //   name: "*",
+  //   component: () => import("../views/mainPage.vue")
+  // }, ]),
+},
+{
+  path: "*",
+  name: "*",
+  component: () => import("@/views/mainPage.vue")
+}
 ];
 
 const router = new VueRouter({
   mode: "history",
   base: process.env.BASE_URL,
   routes,
-  scrollBehavior(to, from, savedPosition) {
+  scrollBehavior (to, from, savedPosition) {
     return {
       x: 0,
       y: 0

src/router/multimodeSimulation.js

@@ -0,0 +1,23 @@
+// 多模式仿真模块路由
+export default [{
+  path: "/test",
+  name: "multimodeSimulation",
+  meta: {
+      tabname: "多模式仿真",
+      menuKind: "multimodeSimulation",
+      login: true
+  },
+  component: () => import("@/views/multimodeSimulation/simulationEdit.vue"),
+  children: [{
+      path: "/test2",
+      name: "simulationEdit",
+      meta: {
+          tabname: "多模式仿真详情",
+          menuKind: "simulationEdit",
+          login: true
+      },
+      component: () => import("@/views/multimodeSimulation/simulationEdit.vue")
+  },
+  ]
+},
+]

src/views/multimodeSimulation/evaluationResults.vue

@@ -0,0 +1,168 @@
+<template>
+  <div
+    style="
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      padding: 20px 50px;
+    "
+  >
+    <h2
+      style="
+        width: 100%;
+        text-align: center;
+        font-size: 28px;
+        font-weight: bold;
+      "
+    >
+      评价结果
+    </h2>
+    <p
+      style="
+        font-size: 18px;
+        font-weight: bold;
+        border-bottom: 1px solid #ccc;
+        padding-bottom: 15px;
+      "
+    >
+      仿真评价
+    </p>
+    <p
+      style="
+        width: 100%;
+        text-align: center;
+        font-size: 18px;
+        color: #000;
+        margin-top: 30px;
+      "
+    >
+      在本次场景中，共发生X次碰撞/未发生碰撞，X次异常停车/未发生异常停车，冲出车道X次。
+    </p>
+    <tableList
+      ref="table"
+      style="margin: 30px 30px"
+      :columns="columns"
+      :getDataWay="getDataWay"
+      :pagination="pagination"
+      index
+    >
+      <el-table-column label="操作" slot="cgInfos" align="center" width="180">
+        <template v-slot="scope">
+          <span v-if="!isEdit" @click="" class="elIcon"> 评价结果 </span>
+          <span v-if="isEdit" @click="" class="elIcon"> 编辑 </span>
+          <span v-if="isEdit" @click="" class="elIcon"> 删除 </span>
+        </template>
+      </el-table-column>
+    </tableList>
+    <p
+      style="
+        font-size: 18px;
+        font-weight: bold;
+        border-bottom: 1px solid #ccc;
+        padding-bottom: 15px;
+      "
+    >
+      仿真回放
+    </p>
+    <div
+      style="
+        margin: 20px 0;
+        width: 100%;
+        display: flex;
+        justify-content: end;
+        align-items: center;
+      "
+    >
+      <span>回放视角：</span>
+      <el-select v-model="viewKey">
+        <el-option
+          v-for="item in viewOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        >
+        </el-option>
+      </el-select>
+    </div>
+    <div style="width: 100%; height: 500px; border: 2px dashed #ccc;padding: 10px;" >
+      <video
+        ref="videoPlayer"
+        controls
+        style="width: 100%; height: 100%;"
+        :controls="true"
+      >
+        <source src="https://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" />
+        您的浏览器不支持视频标签。
+      </video>
+    </div>
+  </div>
+</template>
+
+<script>
+import tableList from '@/components/grid/TableList'
+
+export default {
+  name: 'evaluationResults', // 多仿真模式 评价结果
+  components: { tableList },
+  data() {
+    return {
+      viewKey: '1',
+      viewOptions: [
+        {
+          value: '1',
+          label: '总视角',
+        },
+        {
+          value: '2',
+          label: '车辆A',
+        },
+        {
+          value: '3',
+          label: '车辆B',
+        },
+      ],
+      columns: [
+        {
+          label: '事故类型',
+          prop: 'type',
+        },
+        {
+          label: '发生时间',
+          prop: 'time',
+        },
+      ],
+      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: [
+          {
+            type: '碰撞',
+            time: '2024-01-30 16:15:43',
+          },
+          {
+            type: '异常停车',
+            time: '2024-01-20 07:15:43',
+          },
+          {
+            type: '冲出车道',
+            time: '2024-01-05 11:15:43',
+          },
+        ],
+        param: {
+          share: '0',
+        },
+      },
+    }
+  },
+}
+</script>

src/views/multimodeSimulation/index.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="multimodeSimulation">
+    <search-layout :needBox="true">
+      <template slot="searchItem1">
+        <span class="label">项目ID</span>
+        <el-input
+          v-model="searchParams.projectId"
+          size="small"
+          clearable
+          placeholder="请输入"
+          maxlength="60"
+          @keyup.enter.native="doSearch"
+        >
+        </el-input>
+      </template>
+      <template slot="searchItem1">
+        <span class="label">项目名称</span>
+        <el-input
+          v-model="searchParams.projectName"
+          size="small"
+          clearable
+          placeholder="请输入"
+          maxlength="60"
+          @keyup.enter.native="doSearch"
+        >
+        </el-input>
+      </template>
+      <template slot="searchItem1">
+        <span class="label">项目进度</span>
+        <el-select
+          v-model="searchParams.projectStatus"
+          size="small"
+          clearable
+          placeholder="请输入"
+          maxlength="60"
+          @keyup.enter.native="doSearch"
+        >
+          <el-optopn></el-optopn>
+        </el-select>
+      </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>
+    <div></div>
+    <div style="display: flex; justify-content: end; margin: 20px 50px">
+      <el-button
+        class="addBtn"
+        icon="el-icon-circle-plus-outline"
+        @click="addConfig"
+        type="primary"
+        >新增</el-button
+      >
+    </div>
+    <tableList
+      ref="table"
+      style="margin: 0 30px 30px"
+      :columns="simulationColumns"
+      :getDataWay="getDataWay"
+      :pagination="pagination"
+      index
+    >
+      <el-table-column label="操作" slot="cgInfos" align="center" width="180">
+        <template v-slot="scope">
+          <!-- <span v-if="scope.row.projectStatus==1" @click="" class="elIcon"> 查看 </span> -->
+          <span
+            v-if="scope.row.projectStatus == '1'"
+            @click="jumpDetailPage('preview')"
+            class="elIcon"
+          >
+            查看
+          </span>
+          <span v-else @click="jumpDetailPage('edit')" class="elIcon">
+            编辑
+          </span>
+          <span @click="" class="elIcon"> 删除 </span>
+        </template>
+      </el-table-column>
+    </tableList>
+  </div>
+</template>
+<script>
+import searchLayout from '@/components/grid/searchLayout'
+import tableList from '@/components/grid/TableList'
+import { mapState } from 'vuex'
+export default {
+  name: 'multimodeSimulation', // 多模式仿真
+  components: { searchLayout, tableList },
+  data() {
+    return {
+      searchParams: {
+        projectId: '', // 项目id
+        projectName: '', // 项目名称
+        projectStatus: '', // 项目进度
+      },
+      // 多模式仿真表头
+      simulationColumns: [
+        {
+          label: '项目ID',
+          prop: 'id',
+        },
+        {
+          label: '项目名称',
+          prop: 'projectName',
+        },
+        {
+          label: '场景数量',
+          prop: 'sceneNums',
+        },
+        {
+          label: '创建时间',
+          prop: 'createTime',
+        },
+        {
+          label: '进度',
+          prop: 'projectStatusValue',
+        },
+        {
+          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: [
+          {
+            id: 'd1245825a1aa5a6',
+            projectKey: '20240130-1',
+            projectName: '1007',
+            projectStatus: 0,
+            projectStatusValue: '未开始',
+            createTime: '2024-01-30 16:15:43',
+            sceneNums: 1,
+          },
+          {
+            id: 'd4582d2a6',
+            projectKey: '20240130-1',
+            projectName: '1007',
+            projectStatus: 1,
+            projectStatusValue: '已结束',
+            createTime: '2024-01-30 16:15:43',
+            sceneNums: 1,
+          },
+        ],
+        param: {
+          share: '0',
+        },
+      },
+    }
+  },
+  methods: {
+    doSearch() {},
+    doReset() {},
+    addConfig() {
+      this.$router.push({
+        path: '/test2',
+        query: {mode:'edit'},
+      })
+    },
+    jumpDetailPage(mode) {
+      this.$router.push({
+        path: '/test2',
+        query: {mode},
+      })
+    },
+  },
+}
+</script>
+<style lang='less' scoped>
+// @import './common/util.less';
+.naturalDrivingScenarioListPanel {
+  .inputBox {
+    .label {
+      min-width: 75px;
+    }
+  }
+
+  .btnsPanel {
+    text-align: right;
+  }
+}
+</style>

src/views/multimodeSimulation/simulationEdit.vue

@@ -0,0 +1,189 @@
+<template>
+  <div
+    style="
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      padding: 20px 50px;
+    "
+  >
+    <p
+      style="
+        font-size: 18px;
+        font-weight: bold;
+        border-bottom: 1px solid #ccc;
+        padding-bottom: 15px;
+      "
+    >
+      基础信息
+    </p>
+    <search-layout :needBox="true">
+      <template slot="searchItem1">
+        <span class="label">项目名称</span>
+        <el-input
+          v-model="baseInfo.projectName"
+          size="small"
+          clearable
+          placeholder="请输入"
+          maxlength="60"
+          :disabled="!isEdit"
+        >
+        </el-input>
+      </template>
+      <template slot="searchItem3">
+        <span class="label">最大仿真时间(s)</span>
+        <el-input
+          v-model="baseInfo.projectMaxSeconds"
+          size="small"
+          clearable
+          placeholder="请输入"
+          maxlength="60"
+          :disabled="!isEdit"
+        >
+        </el-input>
+        <span style="color: red" class="label">（最小是5,最大4500）</span>
+      </template>
+      <template slot="searchItem8">
+        <span class="label">项目描述</span>
+        <el-input
+          v-model="baseInfo.projectDescription"
+          size="small"
+          clearable
+          placeholder="请输入"
+          maxlength="60"
+          :disabled="!isEdit"
+        >
+        </el-input>
+      </template>
+    </search-layout>
+    <p
+      style="
+        font-size: 18px;
+        font-weight: bold;
+        border-bottom: 1px solid #ccc;
+        padding-bottom: 15px;
+        margin-top: 30px;
+      "
+    >
+      场景详情
+    </p>
+    <div style="display: flex; justify-content: end; margin: 20px 50px">
+      <el-button
+        v-if="isEdit"
+        class="addBtn"
+        icon="el-icon-circle-plus-outline"
+        @click="addConfig"
+        type="primary"
+        >添加</el-button
+      >
+      <el-button
+        v-if="isEdit"
+        class="addBtn"
+        icon="el-icon-circle-plus-outline"
+        @click="copyConfig"
+        type="primary"
+        >复制配置</el-button
+      >
+    </div>
+    <tableList
+      ref="table"
+      style="margin: 0 30px 30px"
+      :columns="columns"
+      :getDataWay="getDataWay"
+      :pagination="pagination"
+      index
+    >
+      <el-table-column label="操作" slot="cgInfos" align="center" width="180">
+        <template v-slot="scope">
+          <span v-if="!isEdit" @click="" class="elIcon"> 评价结果 </span>
+          <span v-if="isEdit" @click="" class="elIcon"> 编辑 </span>
+          <span v-if="isEdit" @click="" class="elIcon"> 删除 </span>
+        </template>
+      </el-table-column>
+    </tableList>
+  </div>
+</template>
+
+<script>
+import searchLayout from '@/components/grid/searchLayout'
+import tableList from '@/components/grid/TableList'
+export default {
+  name: 'simulationEdit',
+  components: { searchLayout, tableList },
+
+  data() {
+    return {
+      isEdit: true, // 模式， 默认编辑模式 false 预览
+      baseInfo: {
+        projectName: '', // 项目名称
+        projectMaxSeconds: 0, // 最大仿真时间
+        projectDescription: '', // 项目描述
+      },
+      columns: [
+        {
+          label: '地图文件',
+          prop: 'id',
+        },
+        {
+          label: '车辆数量',
+          prop: 'projectName',
+        },
+        {
+          label: '创建时间',
+          prop: 'sceneNums',
+        },
+        {
+          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: [
+          {
+            id: 'd1245825a1aa5a6',
+            projectKey: '20240130-1',
+            projectName: '1007',
+            projectStatus: 0,
+            projectStatusValue: '未开始',
+            createTime: '2024-01-30 16:15:43',
+            sceneNums: 1,
+          },
+          {
+            id: 'd4582d2a6',
+            projectKey: '20240130-1',
+            projectName: '1007',
+            projectStatus: 1,
+            projectStatusValue: '已结束',
+            createTime: '2024-01-30 16:15:43',
+            sceneNums: 1,
+          },
+        ],
+        param: {
+          share: '0',
+        },
+      },
+    }
+  },
+  mounted() {
+    console.log('加桌', this.$route.query.mode)
+    this.isEdit = this.$route.query.mode == 'edit' ? true : false
+  },
+  methods: {
+    copyConfig() {},
+    addConfig() {},
+  },
+}
+</script>

src/views/sceneLibrary/naturalDrivingScenarioList.vue

@@ -1,90 +1,90 @@
 <template>
-    <div class="naturalDrivingScenarioListPanel">
-        <search-layout :needBox="true">
-            <template slot="searchItem1">
-                <span class="label">场景名称</span>
-                <el-input
-                    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-cascader
-                    v-model="searchParams.selfBehavior"
-                    :options="selfBehaviorList"
-                    :props="props"
-                    clearable
-                    size="small"
-                ></el-cascader>
-            </template>
-            <template slot="searchItem3">
-                <span class="label">目标行为</span>
-                <el-cascader
-                    v-model="searchParams.targetBehavior"
-                    :options="targetBehaviorList"
-                    :props="props"
-                    clearable
-                    size="small"
-                ></el-cascader>
-            </template>
-            <template slot="searchItem4">
-                <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-cascader
-                    v-model="searchParams.road"
-                    :options="roadList"
-                    :props="props"
-                    clearable
-                    size="small"
-                ></el-cascader>
-            </template>
-            <template slot="searchItem6">
-                <span class="label">基础设施</span>
-                <el-cascader
-                    v-model="searchParams.infrastructure"
-                    :options="infrastructureList"
-                    :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="searchItem7">
-                <span class="label">临时性操纵</span>
-                <el-cascader
-                    v-model="searchParams.temporaryOperation"
-                    :options="temporaryOperationList"
-                    :props="props"
-                    clearable
-                    size="small"
-                ></el-cascader>
-            </template>
-             <!-- 复杂度 -->
-      <template slot="searchItem8">
+  <div class="naturalDrivingScenarioListPanel">
+    <search-layout :needBox="true">
+      <template slot="searchItem1">
+        <span class="label">场景名称</span>
+        <el-input
+          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-cascader
+          v-model="searchParams.selfBehavior"
+          :options="selfBehaviorList"
+          :props="props"
+          clearable
+          size="small"
+        ></el-cascader>
+      </template>
+      <template slot="searchItem3">
+        <span class="label">目标行为</span>
+        <el-cascader
+          v-model="searchParams.targetBehavior"
+          :options="targetBehaviorList"
+          :props="props"
+          clearable
+          size="small"
+        ></el-cascader>
+      </template>
+      <template slot="searchItem4">
+        <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-cascader
+          v-model="searchParams.road"
+          :options="roadList"
+          :props="props"
+          clearable
+          size="small"
+        ></el-cascader>
+      </template>
+      <template slot="searchItem6">
+        <span class="label">基础设施</span>
+        <el-cascader
+          v-model="searchParams.infrastructure"
+          :options="infrastructureList"
+          :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="searchItem7">
+        <span class="label">临时性操纵</span>
+        <el-cascader
+          v-model="searchParams.temporaryOperation"
+          :options="temporaryOperationList"
+          :props="props"
+          clearable
+          size="small"
+        ></el-cascader>
+      </template>
+      <!-- 复杂度 -->
+      <template slot="searchItem5">
         <span class="label">复杂度</span>
         <el-input
           v-model="searchParams.a"
@@ -109,7 +109,7 @@
         </el-input>
       </template>
       <!-- 危险度 -->
-      <template slot="searchItem8">
+      <template slot="searchItem6">
         <span class="label">危险度</span>
         <el-input
           v-model="searchParams.a"
@@ -133,7 +133,7 @@
         >
         </el-input>
       </template>
-      <template slot="searchItem8">
+      <template slot="searchItem7">
         <span class="label">复杂度等级</span>
         <el-select
           v-model="searchParams.scenarioRoadType"
@@ -149,7 +149,7 @@
           ></el-option>
         </el-select>
       </template>
-      <template slot="searchItem8">
+      <template slot="searchItem6">
         <span class="label">危险度等级</span>
         <el-select
           v-model="searchParams.scenarioRoadType"
@@ -165,8 +165,8 @@
           ></el-option>
         </el-select>
       </template>
-            <template slot="searchItem27">
-                <!-- <el-checkbox-group v-model="labels">
+      <template slot="searchItem27">
+        <!-- <el-checkbox-group v-model="labels">
                     <el-checkbox-button
                         label="1"
                         :key="1"
@@ -193,144 +193,139 @@
                         >掉头</el-checkbox-button
                     >
                 </el-checkbox-group> -->
-                <div class="labelsBox">
-                    <b class="labelA" @click="conditions(1)">高速</b>
-                    <b class="labelB" @click="conditions(2)">切入</b>
-                    <b class="labelC" @click="conditions(3)">切出</b>
-                    <b class="labelD" @click="conditions(4)">变道</b>
-                    <b class="labelA" @click="conditions(5)">匝道</b>
-                    <b class="labelB" @click="conditions(6)">隧道</b>
-                    <b class="labelC" @click="conditions(7)">掉头</b>
-                </div>
-            </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>
-
-        <div class="myTabsBox">
-            <el-tabs v-model="activeName" type="card" @tab-click="pageControl">
-                <el-tab-pane label="公有" name="1"></el-tab-pane>
-                <el-tab-pane label="私有" name="2"></el-tab-pane>
-            </el-tabs>
+        <div class="labelsBox">
+          <b class="labelA" @click="conditions(1)">高速</b>
+          <b class="labelB" @click="conditions(2)">切入</b>
+          <b class="labelC" @click="conditions(3)">切出</b>
+          <b class="labelD" @click="conditions(4)">变道</b>
+          <b class="labelA" @click="conditions(5)">匝道</b>
+          <b class="labelB" @click="conditions(6)">隧道</b>
+          <b class="labelC" @click="conditions(7)">掉头</b>
         </div>
+      </template>
 
-        <tableList
-            ref="table"
-            style="margin: 0 30px 30px"
-            :columns="columns"
-            :getDataWay="getDataWay"
-            :pagination="pagination"
-            index
-        >
-            <el-table-column
-                label="操作"
-                slot="cgInfos"
-                align="center"
-                width="180"
-            >
-                <template v-slot="scope">
-                    <i
-                        @click="viewRow(scope.row)"
-                        class="el-icon-view elIcon cursor"
-                        title="查看"
-                    >
-                    </i>
-                </template>
-            </el-table-column>
-        </tableList>
+      <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>
 
-        <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 class="myTabsBox">
+      <el-tabs v-model="activeName" type="card" @tab-click="pageControl">
+        <el-tab-pane label="公有" name="1"></el-tab-pane>
+        <el-tab-pane label="私有" name="2"></el-tab-pane>
+      </el-tabs>
     </div>
+
+    <tableList
+      ref="table"
+      style="margin: 0 30px 30px"
+      :columns="columns"
+      :getDataWay="getDataWay"
+      :pagination="pagination"
+      index
+    >
+      <el-table-column label="操作" slot="cgInfos" align="center" width="180">
+        <template v-slot="scope">
+          <i
+            @click="viewRow(scope.row)"
+            class="el-icon-view elIcon cursor"
+            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 { mapState } from "vuex";
+import searchLayout from '@/components/grid/searchLayout'
+import tableList from '@/components/grid/TableList'
+import { mapState } from 'vuex'
 
 export default {
-    name: "naturalDrivingScenarioList", // 自然驾驶场景
-    components: { searchLayout, tableList },
-    data() {
-        return {
-            activeName: "2",
-            searchParams: {
-                //搜索参数
-                naturalName: "", // 场景名称
-                road: [], // 道路
-                infrastructure: [], // 基础设施
-                trafficCondition: [], // 交通情况
-                selfBehavior: [], // 自车行为
-                targetBehavior: [], // 目标行为
-                naturalEnvironment: [], // 自然环境
+  name: 'naturalDrivingScenarioList', // 自然驾驶场景
+  components: { searchLayout, tableList },
+  data() {
+    return {
+      activeName: '2',
+      searchParams: {
+        //搜索参数
+        naturalName: '', // 场景名称
+        road: [], // 道路
+        infrastructure: [], // 基础设施
+        trafficCondition: [], // 交通情况
+        selfBehavior: [], // 自车行为
+        targetBehavior: [], // 目标行为
+        naturalEnvironment: [], // 自然环境
 
-                highSpeed: [], // 高速
-                ramp: [], // 匝道
-                tunnel: [], // 隧道
-                cutIn: [], // 切入
-                cutOut: [], // 切出
-                laneChange: [], // 变道
-                turnAround: [], // 掉头
+        highSpeed: [], // 高速
+        ramp: [], // 匝道
+        tunnel: [], // 隧道
+        cutIn: [], // 切入
+        cutOut: [], // 切出
+        laneChange: [], // 变道
+        turnAround: [], // 掉头
 
-                share: "0", // 0 私有 1 公有
-            },
-            labels: [],
-            list: [],
-            roadList: [],
-            infrastructureList: [],
-            trafficConditionList: [],
-            selfBehaviorList: [],
-            targetBehaviorList: [],
-            naturalEnvironmentList: [],
-            temporaryOperationList: [],
-            props: {
-                multiple: true,
-                label: "dictName",
-                value: "dictCode",
-            },
-            columns: [
-                //表格列
-                {
-                    label: "场景名称",
-                    prop: "naturalName",
-                },
-                {
-                    label: "自车行为",
-                    prop: "selfBehavior",
-                },
-                {
-                    label: "目标行为",
-                    prop: "targetBehavior",
-                },
-                {
-                    label: "天气",
-                    prop: "weather",
-                },
-                {
-                    label: "道路类型",
-                    prop: "roadType",
-                },
-                {
-                    label: "标签",
-                    prop: "label",
-                },
-                {
+        share: '0', // 0 私有 1 公有
+      },
+      labels: [],
+      list: [],
+      roadList: [],
+      infrastructureList: [],
+      trafficConditionList: [],
+      selfBehaviorList: [],
+      targetBehaviorList: [],
+      naturalEnvironmentList: [],
+      temporaryOperationList: [],
+      props: {
+        multiple: true,
+        label: 'dictName',
+        value: 'dictCode',
+      },
+      columns: [
+        //表格列
+        {
+          label: '场景名称',
+          prop: 'naturalName',
+        },
+        {
+          label: '自车行为',
+          prop: 'selfBehavior',
+        },
+        {
+          label: '目标行为',
+          prop: 'targetBehavior',
+        },
+        {
+          label: '天气',
+          prop: 'weather',
+        },
+        {
+          label: '道路类型',
+          prop: 'roadType',
+        },
+        {
+          label: '标签',
+          prop: 'label',
+        },
+        {
           label: '复杂度',
           prop: 'complexity',
         },
@@ -342,50 +337,50 @@ export default {
           label: '危险度',
           prop: 'risk',
         },
-        
+
         {
           label: '危险度等级',
           prop: 'riskLevel',
         },
-                {
-                    label: "操作",
-                    prop: "cgInfos",
-                    template: true,
-                },
-            ],
-            pagination: {
-                //分页使用
-                currentPage: 1,
-                pageSize: 10,
-                position: "right",
-                pageSizes: [10, 30, 50, 100, 200],
-                layout: "sizes, total, prev, pager, next, jumper",
-            },
-            getDataWay: {
-                //加载表格数据
-                dataType: "url",
-                type: "post",
-                // firstRequest: false,
-                data: this.$api.sceneLibrary.querySceneNaturalList,
-                param: {
-                    share: "0",
-                },
-            },
-            dialogVisible: false,
-            autoplay: false,
-            videoSrc: "",
-            objectPath: "",
-            videoDiaTitle: "",
-        };
-    },
+        {
+          label: '操作',
+          prop: 'cgInfos',
+          template: true,
+        },
+      ],
+      pagination: {
+        //分页使用
+        currentPage: 1,
+        pageSize: 10,
+        position: 'right',
+        pageSizes: [10, 30, 50, 100, 200],
+        layout: 'sizes, total, prev, pager, next, jumper',
+      },
+      getDataWay: {
+        //加载表格数据
+        dataType: 'url',
+        type: 'post',
+        // firstRequest: false,
+        data: this.$api.sceneLibrary.querySceneNaturalList,
+        param: {
+          share: '0',
+        },
+      },
+      dialogVisible: false,
+      autoplay: false,
+      videoSrc: '',
+      objectPath: '',
+      videoDiaTitle: '',
+    }
+  },
 
-    computed: {
-        ...mapState(["fileHost", "fileUrl"]),
-    },
+  computed: {
+    ...mapState(['fileHost', 'fileUrl']),
+  },
 
-    methods: {
-        doSearch() {
-            /* this.searchParams.highSpeed = this.labels.includes("1")
+  methods: {
+    doSearch() {
+      /* this.searchParams.highSpeed = this.labels.includes("1")
                 ? [["roadType", "高速"]]
                 : [];
             this.searchParams.cutIn = this.labels.includes("2")
@@ -481,237 +476,201 @@ export default {
                   ]
                 : []; */
 
-            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 = {
-                naturalName: "",
-                road: [],
-                infrastructure: [],
-                trafficCondition: [],
-                selfBehavior: [],
-                targetBehavior: [],
-                naturalEnvironment: [],
-                temporaryOperation: [],
-                highSpeed: [],
-                ramp: [],
-                tunnel: [],
-                cutIn: [],
-                cutOut: [],
-                laneChange: [],
-                turnAround: [],
-                share: this.activeName === "1" ? "1" : "0",
-            };
-            // this.labels = [];
-            this.doSearch();
-        },
-        pageControl(data) {
-            this.activeName = data.name;
-            this.doSearch();
-        },
-        conditions(v) {
-            switch (v) {
-                case 1:
-                    this.searchParams.road = [
-                        ...this.searchParams.road,
-                        ["roadType", "高速"],
-                    ];
-                    break;
-                case 2:
-                    this.searchParams.targetBehavior = [
-                        ...this.searchParams.targetBehavior,
-                        [
-                            "targetBehavior",
-                            "targetBehavior",
-                            "targetBehavior",
-                            "targetBehavior",
-                            "targetBehavior",
-                            "机动车从左侧切入成功",
-                        ],
-                        [
-                            "targetBehavior",
-                            "targetBehavior",
-                            "targetBehavior",
-                            "targetBehavior",
-                            "targetBehavior",
-                            "机动车从右侧切入成功",
-                        ],
-                    ];
-                    break;
-                case 3:
-                    this.searchParams.targetBehavior = [
-                        ...this.searchParams.targetBehavior,
-                        [
-                            "targetBehavior",
-                            "targetBehavior",
-                            "targetBehavior",
-                            "targetBehavior",
-                            "targetBehavior",
-                            "机动车向左侧切出成功",
-                        ],
-                        [
-                            "targetBehavior",
-                            "targetBehavior",
-                            "targetBehavior",
-                            "targetBehavior",
-                            "targetBehavior",
-                            "机动车向右侧切出成功",
-                        ],
-                    ];
-                    break;
-                case 4:
-                    this.searchParams.selfBehavior = [
-                        ...this.searchParams.selfBehavior,
-                        [
-                            "selfBehavior",
-                            "selfBehavior",
-                            "selfBehavior",
-                            "向左变道成功",
-                        ],
-                        [
-                            "selfBehavior",
-                            "selfBehavior",
-                            "selfBehavior",
-                            "向右变道成功",
-                        ],
-                        [
-                            "selfBehavior",
-                            "selfBehavior",
-                            "selfBehavior",
-                            "向左连续变道",
-                        ],
-                        [
-                            "selfBehavior",
-                            "selfBehavior",
-                            "selfBehavior",
-                            "向右连续变道",
-                        ],
-                        [
-                            "selfBehavior",
-                            "selfBehavior",
-                            "selfBehavior",
-                            "向左变道超车",
-                        ],
-                        [
-                            "selfBehavior",
-                            "selfBehavior",
-                            "selfBehavior",
-                            "向右变道超车",
-                        ],
-                    ];
-                    break;
-                case 5:
-                    this.searchParams.road = [
-                        ...this.searchParams.road,
-                        ["ramp", "是"],
-                    ];
-                    break;
-                case 6:
-                    this.searchParams.road = [
-                        ...this.searchParams.road,
-                        ["tunnel", "是"],
-                    ];
-                    break;
-                case 7:
-                    this.searchParams.selfBehavior = [
-                        ...this.searchParams.selfBehavior,
-                        ["selfBehavior", "直路掉头"],
-                        ["selfBehavior", "selfBehavior", "路口掉头"],
-                    ];
-                    break;
-                default:
-                    break;
-            }
-        },
-        viewRow(row) {
-            if (!row.videoAddress) {
-                this.$message.warning("本场景无仿真视频");
-                return;
-            }
-            
-            this.dialogVisible = true;
-            this.videoDiaTitle = row.naturalName;
+      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 = {
+        naturalName: '',
+        road: [],
+        infrastructure: [],
+        trafficCondition: [],
+        selfBehavior: [],
+        targetBehavior: [],
+        naturalEnvironment: [],
+        temporaryOperation: [],
+        highSpeed: [],
+        ramp: [],
+        tunnel: [],
+        cutIn: [],
+        cutOut: [],
+        laneChange: [],
+        turnAround: [],
+        share: this.activeName === '1' ? '1' : '0',
+      }
+      // this.labels = [];
+      this.doSearch()
+    },
+    pageControl(data) {
+      this.activeName = data.name
+      this.doSearch()
+    },
+    conditions(v) {
+      switch (v) {
+        case 1:
+          this.searchParams.road = [
+            ...this.searchParams.road,
+            ['roadType', '高速'],
+          ]
+          break
+        case 2:
+          this.searchParams.targetBehavior = [
+            ...this.searchParams.targetBehavior,
+            [
+              'targetBehavior',
+              'targetBehavior',
+              'targetBehavior',
+              'targetBehavior',
+              'targetBehavior',
+              '机动车从左侧切入成功',
+            ],
+            [
+              'targetBehavior',
+              'targetBehavior',
+              'targetBehavior',
+              'targetBehavior',
+              'targetBehavior',
+              '机动车从右侧切入成功',
+            ],
+          ]
+          break
+        case 3:
+          this.searchParams.targetBehavior = [
+            ...this.searchParams.targetBehavior,
+            [
+              'targetBehavior',
+              'targetBehavior',
+              'targetBehavior',
+              'targetBehavior',
+              'targetBehavior',
+              '机动车向左侧切出成功',
+            ],
+            [
+              'targetBehavior',
+              'targetBehavior',
+              'targetBehavior',
+              'targetBehavior',
+              'targetBehavior',
+              '机动车向右侧切出成功',
+            ],
+          ]
+          break
+        case 4:
+          this.searchParams.selfBehavior = [
+            ...this.searchParams.selfBehavior,
+            ['selfBehavior', 'selfBehavior', 'selfBehavior', '向左变道成功'],
+            ['selfBehavior', 'selfBehavior', 'selfBehavior', '向右变道成功'],
+            ['selfBehavior', 'selfBehavior', 'selfBehavior', '向左连续变道'],
+            ['selfBehavior', 'selfBehavior', 'selfBehavior', '向右连续变道'],
+            ['selfBehavior', 'selfBehavior', 'selfBehavior', '向左变道超车'],
+            ['selfBehavior', 'selfBehavior', 'selfBehavior', '向右变道超车'],
+          ]
+          break
+        case 5:
+          this.searchParams.road = [...this.searchParams.road, ['ramp', '是']]
+          break
+        case 6:
+          this.searchParams.road = [...this.searchParams.road, ['tunnel', '是']]
+          break
+        case 7:
+          this.searchParams.selfBehavior = [
+            ...this.searchParams.selfBehavior,
+            ['selfBehavior', '直路掉头'],
+            ['selfBehavior', 'selfBehavior', '路口掉头'],
+          ]
+          break
+        default:
+          break
+      }
+    },
+    viewRow(row) {
+      if (!row.videoAddress) {
+        this.$message.warning('本场景无仿真视频')
+        return
+      }
 
-            let url = "";
-            if (process.env.VUE_APP_IS_DEV == "true") {
-                url = this.fileHost + this.fileUrl;
-            } else {
-                url = this.fileUrl;
-            }
+      this.dialogVisible = true
+      this.videoDiaTitle = row.naturalName
 
-            let token = localStorage.getItem("Authorization").split(" ")[1];
-            this.videoSrc = `${url}?objectName=${row.videoAddress}&access_token=${token}`;
-            this.autoplay = true;
-        },
-        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();
-        },
-    },
+      let url = ''
+      if (process.env.VUE_APP_IS_DEV == 'true') {
+        url = this.fileHost + this.fileUrl
+      } else {
+        url = this.fileUrl
+      }
 
-    async mounted() {
-        await this.$dicsTreesInit({
-            roadList: "road",
-            infrastructureList: "infrastructure",
-            trafficConditionList: "trafficCondition",
-            selfBehaviorList: "selfBehavior",
-            targetBehaviorList: "targetBehavior",
-            naturalEnvironmentList: "naturalEnvironment",
-            temporaryOperationList: "temporaryOperation",
-        });
+      let token = localStorage.getItem('Authorization').split(' ')[1]
+      this.videoSrc = `${url}?objectName=${row.videoAddress}&access_token=${token}`
+      this.autoplay = true
+    },
+    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 lang='less' scoped>
-@import "./common/util.less";
+@import './common/util.less';
 .naturalDrivingScenarioListPanel {
-    .inputBox {
-        .label {
-            min-width: 75px;
-        }
+  .inputBox {
+    .label {
+      min-width: 75px;
     }
+  }
 
-    .btnsPanel {
-        text-align: right;
-    }
+  .btnsPanel {
+    text-align: right;
+  }
 }
 </style>

src/views/sceneLibrary/trafficAccidentSimulationScenarioList.vue

@@ -119,7 +119,7 @@
         </el-input>
       </template>
       <!-- 危险度 -->
-      <template slot="searchItem6">
+      <template slot="searchItem7">
         <span class="label">危险度</span>
         <el-input
           v-model="searchParams.a"
@@ -143,7 +143,7 @@
         >
         </el-input>
       </template>
-      <template slot="searchItem8">
+      <template slot="searchItem7">
         <span class="label">复杂度等级</span>
         <el-select
           v-model="searchParams.scenarioRoadType"