sl-sfy-safety/src/views/traffic/overview/components/ViolationRecords.vue

<template>
  <div class="violation-records-container">
    <div class="container-title">
      <span class="line"></span>
      <span class="title">本月车辆违规记录</span>
      <span class="more" @click="handleClickMore"
        >查看全部<el-icon><ArrowRight /></el-icon
      ></span>
    </div>
    <div class="table-container">
      <el-table :data="violationRecords" style="width: 100%; height: 100%">
        <el-table-column prop="carNumber" label="车牌号" />
        <el-table-column prop="violateBy" label="车主">
          <template #default="scope">
            {{ scope.row.violateName || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="deptName" label="所属部门">
          <template #default="scope">
            {{ scope.row.deptName || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="violateType" label="违规类型">
          <template #default="scope">
            {{ getVehicleViolationTypeMap(scope.row.violateType) }}
          </template>
        </el-table-column>
        <el-table-column prop="violateLocation" label="违规地点">
          <template #default="scope">
            {{ scope.row.violateLocation || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="captureTime" label="违规时间" />
        <el-table-column prop="capturePhotos" label="抓拍照片" align="center">
          <template #default="scope">
            <ImageViewer :file-list="scope.row.capturePhotos" />
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import router from '@/router';
  import { ElIcon } from 'element-plus';
  import { ArrowRight } from '@element-plus/icons-vue';
  import { getVehicleViolationTypeMap } from '@/views/traffic/overview/constant';
  import ImageViewer from '@/views/traffic/violation/act/components/ImageViewer.vue';
  import {
    QueryPageParams,
    QueryTrafficViolationOverviewPageRes,
    getTrafficViolationOverview,
  } from '@/api/traffic-overview';

  const queryPageParams = ref<QueryPageParams>({
    pageNumber: 1,
    pageSize: 20,
  });
  const violationRecords = ref<QueryTrafficViolationOverviewPageRes[]>([]);

  const handleClickMore = () => {
    router.push({
      path: '/traffic/violation/notice',
    });
  };

  const getTrafficViolationOverviewData = () => {
    getTrafficViolationOverview(queryPageParams.value).then((res) => {
      violationRecords.value = res.records;
    });
  };

  onMounted(() => {
    getTrafficViolationOverviewData();
  });
</script>

<style scoped lang="scss">
  .container-title {
    height: 24px;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #000000;

    .line {
      width: 3px;
      height: 16px;
      background: #1777ff;
      margin-right: 10px;
    }

    .title {
      margin-right: 12px;
    }

    .more {
      margin-left: auto;
      margin-right: 17px;
      font-weight: 400;
      font-size: 16px;
      color: #1777ff;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .more:hover {
      color: #94c1ff;
    }
  }

  .violation-records-container {
    width: 100%;
    height: 100%;
    padding: 14px 0;

    .table-container {
      width: 100%;
      height: calc(100% - 24px - 18px);
      margin-top: 18px;
      padding: 0 16px;
      overflow: auto;
    }
  }
</style>