sl-sfy-safety/src/views/production-safety/risk-identification-and-control/construction-safety-manage/monitor.vue

<template>
  <div class="nine-square-grid">
    <div class="leftSideBar">
      <CameraGroupListAndTree />
    </div>

    <div class="toolbarAndCamerasGrid">
      <VideosGridBase :cameraInPlay="cameraInPlay" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted } from 'vue';
  import CameraGroupListAndTree from './CameraGroupListAndTree/CameraGroupListAndTree.vue';
  import VideosGridBase from './VideosGridBase/VideosGridBase.vue';
  import { useCameraGroupList } from '@/store/modules/useCameraGroupList';
  import { storeToRefs } from 'pinia';
  import { useTargetTenantIdStore } from '@/store/modules/useTargetTenantIdStore';
  import { useCameraStatus } from './hooks/useCameraStatus';

  const { cameraInPlay } = storeToRefs(useCameraGroupList());

  const { clear } = useTargetTenantIdStore();
  useCameraStatus();

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

<style lang="scss" scoped>
  .nine-square-grid {
    height: 100%;
    padding: 14px 10px;
    display: flex;
    border-radius: 4px;
    background: #fff;

    .leftSideBar {
      height: 100%;
    }

    .toolbarAndCamerasGrid {
      width: 100%;
    }
  }
</style>