sl-sfy-safety/src/views/dashboard/home/Home.vue

<template>
  <div class="home-page">
    <div class="flex">
      <CameraInfo class="flex-1" :data="sceneData" :get-algoes="getAlgoList" />
      <AlgoData :data="violationData" :get-violations="getViolationCount" />
    </div>
  </div>
</template>

<script setup lang="ts">
  // import { ref } from "vue";
  import CameraInfo from './components/CameraInfo.vue';
  import AlgoData from './components/AlgoDataPanel.vue';
  import useHomeInfo from './hooks/useHomeInfo';

  const homeInfos = useHomeInfo();
  const { sceneData, violationData, getAlgoList, getViolationCount } = homeInfos;
</script>

<style scoped>
  .home-page {
    width: 100%;
    height: 100%;
    padding-bottom: 24px;
    background: #ffffff;
  }

  .mask-pos {
    margin-top: 16px;
  }
</style>