simulation-front/src/views/multimodeSimulation/evaluationResults.vue

<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;
      "
    >
      {{ describe }}
    </p>
    <tableList
      ref="table"
      style="margin: 30px 30px"
      :columns="columns"
      :getDataWay="getDataWay"
      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%"
        autoplay
        :src="videoList[viewKey]"
      >
      </video>
    </div>
  </div>
</template>

<script>
import tableList from '@/components/grid/TableList'

export default {
  name: 'evaluationResults', // 多仿真模式 评价结果
  components: { tableList },
  data() {
    return {
      viewKey: 0,
      viewOptions: [
        {
          value: 0,
          label: '总视角',
        },
        // {
        //   value: 1,
        //   label: '多仿真视角',
        // },
      ],
      playUrl:'', // 当前播放地址
      videoList: [], // 视频地址列表
      describe: '', // 评价描述
      columns: [
        {
          label: '事故类型',
          prop: 'type',
        },
        {
          label: '状态',
          prop: 'status',
        },
      ],
      getDataWay: {
        //加载表格数据
        dataType: 'data',
        type: 'post',
        // firstRequest: false,
        data: [],
        param: {},
      },
    }
  },
  methods: {
    // 获取评价信息
    getMulationSceneResult(id) {
      this.$axios({
        method: 'post',
        url: this.$api.multimode.viewMulationSceneResult,
        data: {
          sceneId: id,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.describe = res.info.phrases
          this.getDataWay.data = [
            {
              type: '碰撞',
              status: res.info.collisionDetail[0].abnormalTimeDescription,
            },
            {
              type: '异常停车',
              status: res.info.abnormalParkingDetail[0].abnormalTimeDescription,
            },
            {
              type: '冲出车道',
              status: res.info.outOfPavementDetail[0].abnormalTimeDescription,
            },
          ]
          this.playUrl = res.info.projectResultOverallUrl
          if(res.info.projectResultSimulationUrl){
            this.viewOptions = [...this.viewOptions, {value: 1,label: '多仿真视角',}]
          }
          this.videoList = [
            res.info.projectResultOverallUrl,
            res.info.projectResultSimulationUrl,
          ]
        } else {
          this.$message.error(res.message || '查询信息失败')
        }
      })
    },
  },
  mounted() {
    this.$route.query.id && this.getMulationSceneResult(this.$route.query.id)
  },
}
</script>