sl-sfy-safety/src/views/emergency/organization/PageOrganization.vue

<template>
  <div class="safety-platform-container">
    <div class="safety-platform-container__header">
      <div class="breadcrumb-title"> 应急架构体系 </div>
    </div>
    <div class="safety-platform-container__main">
      <OrgChart :treeData="treeData" @node-click="handleNodeClick" @canvas-click="handleCanvasClick" />
    </div>
    <div class="safety-platform-container__footer">
      <el-button> 编辑 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import OrgChart from '../components/OrgChart.vue';

  const treeData = {
    id: 'root',
    data: { name: '应急领导小组' },
    children: [
      {
        id: 'group1',
        data: { name: '应急指挥小组' },
      },
      {
        id: 'group2',
        data: { name: '应急响应小组' },
      },
      {
        id: 'group3',
        data: { name: '应急支援小组' },
      },
    ],
  };

  const handleNodeClick = (nodeData: any) => {
    console.log('节点被点击:', nodeData);
    // 在这里处理节点点击事件
  };

  const handleCanvasClick = () => {
    console.log('画布被点击');
    // 在这里处理画布点击事件
  };
</script>

<style lang="scss" scoped>
  @use '@/styles/page-details-layout.scss' as *;
</style>