sl-sfy-safety/src/views/emergency/emergency-procedure/PageProcedureReport.vue

<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <BreadcrumbBack />
      <span class="breadcrumb-title">{{ name }}</span>
    </header>
    <main class="safety-platform-container__main">
      <div class="report-container">
        <div class="report-title">{{ procedureReport?.eventName }}应急处置</div>
        <div class="duration-time">
          <div class="container-title">
            <span class="line"></span>
            <span>应急处置时间</span>
          </div>
          <TimeLine
            :startTime="procedureReport?.startTime"
            :completeTime="procedureReport?.completeTime"
            :duration="procedureReport?.duration"
          />
        </div>
        <div class="suggestion-info">
          <div class="container-title">
            <span class="line"></span>
            <span>事件总结与改进建议</span>
          </div>
          <div class="suggestion-content" v-if="procedureReport?.suggestion">{{ procedureReport?.suggestion }}</div>
          <div class="suggestion-content" v-else>暂无内容</div>
        </div>
        <div class="loss-charts">
          <div class="container-title">
            <span class="line"></span>
            <span>损失评估</span>
          </div>
          <div class="loss-num">
            <span class="loss-num-title">共计受损物品</span>
            <span class="loss-num-value">{{ procedureReport?.lossRecordCount || 0 }}</span>
          </div>
          <div v-if="!procedureReport?.lossRecordCount" class="no-loss-record">
            <img src="@/assets/images/empty@1X.png" alt="" />
            <span>本次事件没有损失</span>
          </div>
          <div class="charts-container" v-else>
            <ChartOfSafetyLevel class="chart" :data="procedureReport?.safetyLevelDistributionList || []" />
            <ChartOfDisasterLocation class="chart" :data="procedureReport?.disasterLocationDistributionList || []" />
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import TimeLine from './components/TimeLine.vue';
  import ChartOfSafetyLevel from './components/ChartOfSafetyLevel.vue';
  import ChartOfDisasterLocation from './components/ChartOfDisasterLocation.vue';
  import { QueryEmergencyHandleReportRes, getEmergencyProcedureReport } from '@/api/emergency-procedure';

  const route = useRoute();
  const id = Number(route.params.id);

  const name = ref('应急处置报表');

  const procedureReport = ref<QueryEmergencyHandleReportRes>();

  onMounted(async () => {
    procedureReport.value = await getEmergencyProcedureReport(id);
  });
</script>

<style lang="scss" scoped>
  @use '@/styles/page-details-layout.scss' as *;

  .safety-platform-container__header {
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }

  .safety-platform-container__main {
    padding: 20px 0;
    display: flex;
    justify-content: center;
  }

  .report-container {
    width: 1000px;
  }

  .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: 13px;
    }
  }

  .report-title {
    font-weight: 500;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }

  .duration-time,
  .suggestion-info,
  .loss-charts {
    margin-bottom: 20px;
  }

  .suggestion-content {
    margin: 10px 16px;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    white-space: pre-line;
  }

  .loss-num {
    width: 352px;
    height: 42px;
    background: #e7f1ff;
    border-radius: 2px;
    margin: 10px 16px;
    font-weight: 400;
    font-size: 14px;
    color: #000000;
    display: flex;
    align-items: center;
    padding: 0 16px;

    .loss-num-title {
      margin-right: 8px;
    }

    .loss-num-value {
      color: #1777ff;
    }
  }

  .no-loss-record {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #bfbfbf;
  }

  .charts-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 40px 20px;

    .chart {
      width: 50%;
      height: 400px;
      min-width: 300px;
      min-height: 300px;
    }
  }
</style>