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

<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>
    <tableList
      ref="table"
      style="margin: 40px 30px 30px"
      :columns="columns1"
      :getDataWay="getDataWay1"
      :pagination="pagination1"
      index
      indexFixed
    >
    </tableList>
    <!-- 危险度详情 -->
    <p
      style="
        font-size: 18px;
        font-weight: bold;
        border-bottom: 1px solid #ccc;
        padding-bottom: 15px;
      "
    >
      危险度详情
    </p>
    <tableList
      ref="table"
      style="margin: 40px 30px 30px"
      :columns="columns2"
      :getDataWay="getDataWay2"
      :pagination="pagination2"
      index
      indexFixed
    >
    </tableList>
    <!-- 分页 -->
    <div
      style="width: 100%; display: flex; justify-content: end; margin: 30px 0"
    >
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="dangerCurPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="dangerPageSize"
        :total="dangerData.length"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import tableList from '@/components/grid/TableList'
export default {
  components: { tableList },
  data() {
    return {
      sceneId: '',
      columns1: [
        {
          label: '评分规则',
          prop: 'ruleName',
        },
        {
          label: '复杂度',
          prop: 'complexity',
        },
        {
          label: '复杂度等级',
          prop: 'complexityLevel',
        },
      ],
      columns2: [
        {
          label: '评分规则',
          prop: 'ruleName',
        },
        {
          label: '评价算法',
          prop: 'algorithmName',
        },
        {
          label: '评价车型',
          prop: 'vehicleName',
        },
        {
          label: '危险度',
          prop: 'risk',
        },
        {
          label: '危险度等级',
          prop: 'riskLevel',
        },
      ],
      getDataWay1: {
        //加载表格数据
        dataType: 'url',
        type: 'post',
        data: this.$api.sceneLibrary.queryComplexityDetail,
        param: {
          sceneId: this.$store.state.sceneId,
        },
      },
      getDataWay2: {
        //加载表格数据
        dataType: 'url',
        type: 'post',
        data: this.$api.sceneLibrary.queryRiskDetail,
        param: {
          sceneId: this.$store.state.sceneId,
        },
      },
      pagination1: {
        //分页使用
        currentPage: 1,
        pageSize: 10,
        position: 'right',
        pageSizes: [10, 30, 50, 100, 200],
        layout: 'sizes, total, prev, pager, next, jumper',
      },
      pagination2: {
        //分页使用
        currentPage: 1,
        pageSize: 10,
        position: 'right',
        pageSizes: [10, 30, 50, 100, 200],
        layout: 'sizes, total, prev, pager, next, jumper',
      },
      complexData: [
        {
          sceneId: '',
          sceneType: '',
          ruleId: '',
          ruleName: '评分规则1',
          taskId: '',
          complexity: 1,
          complexityLevel: 11,
        },
        {
          sceneId: '',
          sceneType: '',
          ruleId: '',
          ruleName: '评分规则2',
          taskId: '',
          complexity: 2,
          complexityLevel: 21,
        },
      ],
      dangerData: [
        {
          sceneId: '',
          sceneType: '',
          ruleId: '',
          ruleName: '评分规则3',
          taskId: '',
          risk: 1,
          riskLevel: 61,
          algorithmId: 11,
          algorithmName: 11,
          vehicleId: 11,
          vehicleName: 51,
        },
      ],
      complexCurPage: 1, // 复杂度页码
      complexPageSize: 5, // 复杂度页条数
      dangerCurPage: 1, // 复杂度页码
      dangerPageSize: 5, // 复杂度页条数
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
  },
  mounted() {},
}
</script>