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

<template>
  <div class="trafficAccidentSimulationScenarioListPanel">
    <search-layout :needBox="true">
      <template slot="searchItem1">
        <span class="label">场景名称</span>
        <el-input
          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.selfDriving"
          multiple
          size="small"
          clearable
        >
          <el-option
            v-for="item in selfDrivingList"
            :label="item.caption"
            :value="item.code"
            :key="item.code"
          ></el-option>
        </el-select>
      </template>
      <template slot="searchItem3">
        <span class="label">目标驾驶行为</span>
        <el-select
          v-model="searchParams.targetDriving"
          multiple
          size="small"
          clearable
        >
          <el-option
            v-for="item in targetDrivingList"
            :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.selfReaction"
          multiple
          size="small"
          clearable
        >
          <el-option
            v-for="item in selfReactionList"
            :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.conflictBehavior"
          multiple
          size="small"
          clearable
        >
          <el-option
            v-for="item in conflictBehaviorList"
            :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.conflictType"
          multiple
          size="small"
          clearable
        >
          <el-option
            v-for="item in conflictTypeList"
            :label="item.caption"
            :value="item.code"
            :key="item.code"
          ></el-option>
        </el-select>
      </template>
      <!-- 复杂度 -->
      <template slot="searchItem6">
        <span class="label">复杂度</span>
        <el-input
        v-model="searchParams.minComplexity"
          size="small"
          clearable
          placeholder="请输入"
          maxlength="60"
          @keyup.enter.native="doSearch"
          style="width: 100px"
        >
        </el-input>
        <span class="dateSeparator">至</span>
        <el-input
          v-model="searchParams.maxComplexity"
          size="small"
          clearable
          placeholder="请输入"
          maxlength="60"
          @keyup.enter.native="doSearch"
          style="width: 100px"
        >
        </el-input>
      </template>
      <!-- 危险度 -->
      <template slot="searchItem7">
        <span class="label">危险度</span>
        <el-input
          v-model="searchParams.minRisk"
          size="small"
          clearable
          placeholder="请输入"
          maxlength="60"
          @keyup.enter.native="doSearch"
          style="width: 100px"
        >
        </el-input>
        <span class="dateSeparator">至</span>
        <el-input
          v-model="searchParams.maxRisk"
          size="small"
          clearable
          placeholder="请输入"
          maxlength="60"
          @keyup.enter.native="doSearch"
          style="width: 100px"
        >
        </el-input>
      </template>
      <template slot="searchItem7">
        <span class="label">复杂度等级</span>
        <el-select
          v-model="searchParams.complexityLevel"
          size="small"
          clearable
        >
          <el-option
          v-for="item in ['S', 'AA', 'A', 'B', 'C']"
            :label="item"
            :value="item"
            :key="item"
          ></el-option>
        </el-select>
      </template>
      <template slot="searchItem8">
        <span class="label">危险度等级</span>
        <el-select
          v-model="searchParams.riskLevel"
          size="small"
          clearable
        >
          <el-option
          v-for="item in ['S', 'AA', 'A', 'B', 'C']"
            :label="item"
            :value="item"
            :key="item"
          ></el-option>
        </el-select>
      </template>
      <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> -->
        <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>
        </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>

    <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>
          <i @click="jumpScene(scope.row)" class="el-icon-document elIcon"></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'

export default {
  name: 'trafficAccidentSimulationScenarioList', // 交通事故场景
  components: { searchLayout, tableList },
  data() {
    return {
      activeName: '2',
      searchParams: {
        //搜索参数
        sceneName: '', //场景名称
        selfDriving: [], //自车驾驶行为
        targetDriving: [], //目标驾驶行为
        selfReaction: [], //自车反应行为
        conflictBehavior: [], //冲突行为
        conflictType: [], //冲突类型
        rearEndCollision: '', // 追尾
        cutIn: '', // 切入
        driveCurve: '', // 沿弯道行驶
        carConflict: '', // 机动车-机动车冲突
        share: '0',
        minComplexity: '',
        maxComplexity: '',
        minRisk: '',
        maxRisk: '',
        complexityLevel: '',
        riskLevel: '',
      },
      labels: [],
      selfDrivingList: [],
      targetDrivingList: [],
      selfReactionList: [],
      conflictBehaviorList: [],
      conflictTypeList: [],
      columns: [
        //表格列
        {
          label: '场景名称',
          prop: 'sceneName',
        },
        {
          label: '自车驾驶行为',
          prop: 'selfDriving',
        },
        {
          label: '目标驾驶行为',
          prop: 'targetDriving',
        },
        {
          label: '自车反应行为',
          prop: 'selfReaction',
        },
        {
          label: '冲突行为',
          prop: 'conflictBehavior',
        },
        {
          label: '冲突类型',
          prop: 'conflictType',
        },
        {
          label: '标签',
          prop: 'label',
        },
        {
          label: '复杂度',
          prop: 'complexity',
        },
        {
          label: '复杂度等级',
          prop: 'complexityLevel',
        },
        {
          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.querySceneAccidentList,
        param: {
          share: '0',
        },
      },
      dialogVisible: false,
      autoplay: false,
      videoSrc: '',
      objectPath: '',
      videoDiaTitle: '',
    }
  },

  computed: {
    ...mapState(['fileHost', 'fileUrl']),
  },

  methods: {
    doSearch() {
      /* 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.searchParams.share = this.activeName === '1' ? '1' : '0'
      this.refreshList(this.searchParams)
    },
    //刷新table
    refreshList(param) {
      param
        ? this.$refs['table'].loadData(param)
        : this.$refs['table'].loadData()
    },
    jumpScene(row) {
      this.$store.commit('getSceneId', row.accidentId)
      this.$router.push({
        path: '/sceneEvaluation',
        query:{id:row.accidentId}
      })
    },
    doReset() {
      this.searchParams = {
        sceneName: '',
        selfDriving: [],
        targetDriving: [],
        selfReaction: [],
        conflictBehavior: [],
        conflictType: [],
        rearEndCollision: '',
        cutIn: '',
        driveCurve: '',
        carConflict: '',
        share: this.activeName === '1' ? '1' : '0',
        minComplexity: '',
        maxComplexity: '',
        minRisk: '',
        maxRisk: '',
        complexityLevel: '',
        riskLevel: '',
      }
      // this.labels = [];
      this.doSearch()
    },
    pageControl(data) {
      this.activeName = data.name
      this.doSearch()
    },
    conditions(v) {
      switch (v) {
        case 1:
          if (!this.searchParams.conflictBehavior.includes('追尾')) {
            this.searchParams.conflictBehavior = [
              ...this.searchParams.conflictBehavior,
              '追尾',
            ]
          }
          break
        case 2:
          if (!this.searchParams.targetDriving.includes('切入')) {
            this.searchParams.targetDriving = [
              ...this.searchParams.targetDriving,
              '切入',
            ]
          }
          break
        case 3:
          if (!this.searchParams.targetDriving.includes('沿弯道行驶')) {
            this.searchParams.targetDriving = [
              ...this.searchParams.targetDriving,
              '沿弯道行驶',
            ]
          }
          break
        case 4:
          if (!this.searchParams.conflictType.includes('机动车-机动车')) {
            this.searchParams.conflictType = [
              ...this.searchParams.conflictType,
              '机动车-机动车',
            ]
          }
          break
        default:
          break
      }
    },
    viewRow(row) {
      if (!row.videoAddress) {
        this.$message.warning('本场景无仿真视频')
        return
      }

      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
    },
    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 lang='less' scoped>
@import './common/util.less';
.trafficAccidentSimulationScenarioListPanel {
  .inputBox {
    .radioBox {
      width: 340px;
    }

    .label {
      min-width: 90px;
    }
  }

  .btnsPanel {
    text-align: right;
  }
}
</style>