大屏布局总结

大屏内容一般多且杂，根据设计图布局可分成左中右三栏或者左右两栏，Left, Center, Right 三个组件就是执行部门。

父组件 Index.vue   包含 左中右三栏。父组件作为“状态管理中心的“总指挥”

• 它不关心具体数据怎么画成图表或表格，那是“执行部门”的事。
• 核心任务是管理全局状态，也就是所有的筛选条件：年份、看板、法人、部门、甚至是从地图上点击的项目ID列表。
• 通过监听这些状态的变化，调度数据获取，并把最新的“作战指令”（即筛选条件）下发给所有“执行部门”。

Left, Center, Right 三个组件 

• 它们非常“听话”，只接收从“总指挥”那里通过 props 传来的筛选条件。
• 它们唯一的任务就是根据这些条件，去渲染自己负责的那一摊事（左边的列表、中间的图表、右边的饼图），不参与决策，只管执行

核心交互流程

1. 开机初始化：页面加载时，“总指挥”先检查你的“身份”（isCenterTernat），决定默认显示哪个看板，并加载好初始的法人列表和部门列表。
2. 下达指令（用户操作）：当你改变任何一个筛选条件时（比如切换年份、选择不同单位），这个“指令”就传给了“总指挥”。
3. 联动响应：“总指挥”的 watch（监听器）就像他的秘书，一旦接到指令，会立刻启动一套标准化的连锁反应：
   • 重置：先把所有相关的下级选项清空（比如切换单位，就先把之前选的“法人”和“部门”清空，避免数据错乱）。
   • 重新请求：根据新的指令，重新向后台请求最新的法人列表、部门列表。
   • 刷新数据：最终，把所有筛选条件组合起来，重新请求最新的项目ID列表。
4. 同步广播：“总指挥”把更新后的所有筛选条件，通过 props 一次性广播给所有“执行部门”。
5. 同步执行：三个子组件接收到新的“指令”后，立刻同步更新自己的界面，所有数据和图表保持完全一致。

这个逻辑的精髓在于状态的集中管理和清晰的向下传递，保证了整个系统无论怎么操作，数据源都是唯一的，展示也是同步的。

值得你学习借鉴的6大精髓

这份代码虽然长，但其设计思想非常规范，有很多值得你吸收并应用到其他项目中的最佳实践。

1. 【原则】父组件作为“状态管理中心”

这是整个架构的灵魂。将所有共享的、会影响全局的状态（筛选条件）都放在父组件中管理。这样做的好处是：

• 数据流向单一：所有子组件的数据来源只有一个，不会出现数据不一致的bug。
• 逻辑高度集中：所有关于“如何筛选”的逻辑都在父组件，便于维护和调试。查找问题只需去一个地方。

2. 【架构】清晰的“父-子”组件职责划分

父组件负责“决策”，子组件负责“展示”。这种划分让代码结构非常清晰。当你需要修改图表样式时，只需去 Center.vue；需要修改筛选逻辑时，只需去父组件。职责单一，互不干扰，这是大型项目能持续维护的关键。

3. 【技巧】熟练运用 watch 和 computed 实现响应式联动

这是代码中最具技术含量的部分，也是实现复杂交互的“万金油”。

• watch 用于处理“副作用”：当一个状态变化后，需要触发一系列动作时（如API请求、重置其他状态），watch 是最佳工具。代码中 watch(selectedBoard) 的级联刷新逻辑是教科书级别的用法。
• computed 用于“数据适配”：当需要根据现有状态计算出新的、适合传递给子组件的格式时，用 computed。例如 selectedOrgId1 将数组格式转为字符串，selectCorpLabel 将ID转为名称，这些小小的适配器让父子组件的接口变得更简洁、更健壮。

4. 【体验】基于角色的条件渲染 (v-if)

代码通过 v-if="isCenterTernat" 动态地显示不同的UI控件。这体现了以用户为中心的设计思维。根据用户权限和角色，提供最精简、最相关的操作界面，而不是把所有功能都堆出来，这是提升用户体验的重要细节。

5. 【实践】数据处理与转换的封装 (buildTree 函数)

后端返回的数据通常是扁平的列表，而前端UI组件（如树形选择器）需要嵌套的树形结构。buildTree 函数专门负责这个转换工作。

• 复用性：这个函数可以轻松复用到项目中任何需要构建树形结构的地方。
• 解耦：将数据转换逻辑从组件逻辑中抽离出来，让组件代码更纯粹，只关心展示。

6. 【细节】合理利用生命周期钩子

• onBeforeMount：用于在DOM渲染前，根据用户的身份信息初始化关键状态（如 selectedBoard），确保页面一显示就是正确的状态。
• onMounted：用于在DOM渲染后，发起首次数据请求。 这种按生命周期的顺序来安排初始化任务，是保证页面稳定、不出错的基础。