sl-sfy-safety/src/views/security-confidentiality/overview/components/OuterPerson.vue

<template>
  <div class="outer-person-container">
    <div class="container-title">
      <span class="line"></span>
      <span class="title">今日访客</span>
    </div>
    <OuterPersonChart
      v-if="pieData.length > 0"
      class="chart-container"
      id="OuterPersonChart"
      :data="pieData"
    ></OuterPersonChart>
    <OuterPersonChartLegend v-if="pieData.length > 0" class="chart-legend" :data="pieData"></OuterPersonChartLegend>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import OuterPersonChart from '../charts/OuterPersonChart.vue';
  import OuterPersonChartLegend from '../charts/OuterPersonChartLegend.vue';
  import { getPersonOverviewChartData } from '../hooks';
  import type { PieChartData } from '../types';

  const pieData = ref<PieChartData[]>([]);

  onMounted(async () => {
    pieData.value = await getPersonOverviewChartData();
  });
</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;
    }
  }

  .outer-person-container {
    width: 100%;
    height: 100%;
    padding-top: 14px;
    position: relative;
  }

  .chart-container {
    width: 100%;
    height: calc(100% - 24px);
  }

  .chart-legend {
    position: absolute;
    top: 120px;
    left: 55%;
  }
</style>