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

<template>
  <div class="accident-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="accidentRecords" style="width: 100%; height: 100%">
        <el-table-column prop="accidentLocation" label="事故地点" />
        <el-table-column prop="accidentTime" label="事故时间" width="200px" />
        <el-table-column prop="accidentDescription" label="事故描述" />
        <el-table-column prop="action" label="操作" width="140px" align="center" fixed="right">
          <template #default="scope">
            <el-button link type="primary" @click="handleViewDetail(scope.row.id)"> 查看详情 </el-button>
          </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 {
    QueryPageParams,
    QueryTrafficAccidentRecordOverviewPageRes,
    getTrafficAccidentRecordOverview,
  } from '@/api/traffic-overview';

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

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

  const handleViewDetail = (id: number) => {
    router.push({
      path: '/traffic/accident-item',
      query: { id: id },
    });
  };

  const getTrafficAccidentRecordOverviewData = () => {
    getTrafficAccidentRecordOverview(queryPageParams.value).then((res) => {
      accidentRecords.value = res.records;
    });
  };

  onMounted(() => {
    getTrafficAccidentRecordOverviewData();
  });
</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 {
      background-color: #1777ff;
      color: #fff;
      border-radius: 4px;
      padding: 2px 4px 2px 6px;
    }
  }

  .accident-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>