<template>
  <div class="safe">
    <LeftSafe @handleChange="handleChange" />
    <CenterSafe ref="centerDom" />
    <RightSafe />
  </div>
</template>

<script setup lang="ts">
import LeftSafe from "./left/leftSafe.vue";
import CenterSafe from "./center/centerSafe.vue";
import RightSafe from "./right/rightSafe.vue";
import { ref } from "vue";

// 通过ref获取组件内的数据
const centerDom = ref();

const handleChange = () => {
  centerDom.value.currentIndex = 0;
  centerDom.value.currentValue = "监控点位";
  centerDom.value.pointCount = 33;
  centerDom.value.init();
};
</script>

<style lang="scss" scoped>
.safe {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  color: #fff;
}
</style>
