dtScreen/src/components/ui/SidebarMenu.vue

<template>
  <div class="sidebar-container">
    <MenuItem 
      v-for="item in menuData" 
      :key="item.id" 
      :node="item" 
      @node-click="handleLeafNodeClick"
    />
  </div>
</template>

<script>
// 引入刚刚写的递归组件
import MenuItem from './MenuItem.vue';

export default {
  name: 'SidebarMenu',
  components: {
    MenuItem
  },
  data() {
    return {
      // 模拟后端返回的树形结构数据
      menuData: [
        {
          id: 'root-1',
          label: '主控中心',
          icon: 'el-icon-monitor', // 这里可以替换为你项目用的图标类名，比如 iconfont
          children: [
            {
              id: 'team-1',
              label: '北京市交警总队',
              children: [
                {
                  id: 'dist-1',
                  label: '昌平区',
                  children: [
                    {
                      id: 'street-1',
                      label: '龙泽园街道',
                      children: [
                        { id: 'node-101', label: '文华路口', lng: 116.3, lat: 40.1 },
                        { id: 'node-102', label: '同城街路口', lng: 116.4, lat: 40.2 }
                      ]
                    }
                  ]
                },
                {
                  id: 'dist-2',
                  label: '丰台区',
                  children: [
                    {
                      id: 'street-2',
                      label: '龙泽园街道', // 图里似乎数据有重复，这里照猫画虎
                      children: [
                        { id: 'node-201', label: '文华路口' },
                        { id: 'node-202', label: '同城街路口' }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    };
  },
  methods: {
    // 捕获最底层路口的点击事件
    handleLeafNodeClick(nodeData) {
      console.log('用户点击了最底层路口:', nodeData);
      this.$emit('leaf-node-click', nodeData); // 将事件和数据传递给父组件
      // 在大屏项目中，通常下一步是：
      // 1. 触发全局状态管理 (Vuex/Pinia) 记录当前选中的路口 ID
      // 2. 命令地图组件平移/放大到该路口的经纬度 (nodeData.lng, nodeData.lat)
      // 3. 通知右侧图表组件重新拉取该路口的数据
    }
  }
};
</script>

<style scoped>
/* 整个侧边栏的深色背景 */
.sidebar-container {
  width: 100%;
  height: 100%;
  background-color: #112445; /* 匹配截图中的深海蓝色 */
  overflow-y: auto;
  overflow-x: hidden;
}

/* 自定义滚动条样式，适配暗黑风 */
.sidebar-container::-webkit-scrollbar {
  width: 6px;
}
.sidebar-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}
.sidebar-container::-webkit-scrollbar-track {
  background: transparent;
}
</style>