hldy_yunwei_vue/src/views/iot/tplink/plan/index.vue

47 lines
1.2 KiB
Vue
Raw Normal View History

2025-07-03 17:40:00 +08:00
<template>
<a-row class="p-2" type="flex" :gutter="10">
<a-col :xl="4" :lg="24" :md="24" style="margin-bottom: 10px">
<PlanLeftTree ref="leftTree" @select="onTreeSelect" @rootTreeData="onRootTreeData" />
</a-col>
<a-col :xl="20" :lg="24" :md="24" style="margin-bottom: 10px">
<div v-show="planData != null">
<PlanList :data="planData" />
</div>
<div v-show="planData == null" style="padding-top: 40px">
<a-empty description="请选择区域" />
</div>
</a-col>
</a-row>
</template>
<script lang="ts" name="iot-nuIotCameraInfo" setup>
import { ref } from 'vue';
import { useDesign } from '/@/hooks/web/useDesign';
import PlanLeftTree from './components/PlanLeftTree.vue'
import PlanList from './components/PlanList.vue';
// 给子组件定义一个ref变量
const leftTree = ref();
// 当前选中的区域信息
const planData = ref({});
const rootTreeData = ref<any[]>([]);
// 左侧树选择后触发
function onTreeSelect(data) {
planData.value = data;
}
// 左侧树rootTreeData触发
function onRootTreeData(data) {
rootTreeData.value = data;
}
</script>
<style lang="less" scoped>
.p-2{
height: calc(100vh - 120px);
}
</style>