sl-sfy-safety/src/views/emergency/overview/components/EmergencyOrganization.vue

<template>
  <div class="emergency-organization-container">
    <div class="container-title">
      <span class="line"></span>
      <span class="title">应急架构体系</span>
    </div>
    <div class="container-chart">
      <OrgChart :treeData="treeData" @node-click="handleNodeClick" @canvas-click="handleCanvasClick" />
    </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 scoped lang="scss">
  .container-title {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #000000;

    .line {
      width: 3px;
      height: 16px;
      background: #1777ff;
      margin-right: 10px;
    }

    .title {
      margin-right: 12px;
    }
  }

  .emergency-organization-container {
    padding: 10px 0;

    .container-chart {
      width: 100%;
      height: calc(100% - 34px);
      margin: 10px 0;
      padding: 10px;
    }
  }
</style>