# community-ev-access-intelligence-screen

**Repository Path**: git_mystore/community-ev-access-intelligence-screen

## Basic Information

- **Project Name**: community-ev-access-intelligence-screen
- **Description**: 居民充电桩报装接入能力评估与改造方案智能辅助生成平台
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-29
- **Last Updated**: 2026-09-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 居民充电桩报装接入能力评估与改造方案智能辅助生成平台

适用于央国企科技项目汇报的 16:9 单屏前端大屏。项目采用 React + TypeScript + Vite，图表使用 ECharts，地面与地下车库地图使用可交互 SVG 数据层绘制，不包含三维引擎、后端、数据库或真实业务接口。

> 页面中的小区、容量、设备、候选点、路径和工程估算均为 **示范数据**，仅用于产品演示。

## 启动

```bash
npm install
npm run dev
```

默认由 Vite 启动本地开发服务。生产构建与检查：

```bash
npm run typecheck
npm run build
npm run test:sites
```

## 演示操作

- 在中央顶部即时切换“地面总览”和“地下车库 B1”。
- 点击地面报装车位，四维接入约束依次完成判断。
- 在 B1 点击“生成路径”，观看候选点点亮、扫描计算和 A/B/C 路径比选；生成结果同步带回地面总览。
- 地面与 B1 均显示 A/B/C 三种路径方案；点击右侧方案 A/B/C，可同步切换地图高亮和改造建议指标。
- 拖动青色路径上的方形“参考点”，线路和工程指标会平滑重算；重新评估结果只联动数据面板，不在地图内叠加提示。
- 为保证领导汇报时地图、热区和工具位置稳定，中央底图固定；搜索、缩放、平移、重置和图层按钮保持可见但禁用。
- 底部可手动逐步演示；每次点击自动播放都会重置到 01，并以 7 秒/步依次运行到 09 后自动停止。
- “导出方案”会下载当前示范方案的 JSON 摘要。

## 目录结构

```text
src/
  components/
    Header.tsx           顶部企业级标题与运行状态
    LeftPanel.tsx        小区、容量、对象识别、四维约束
    MapWorkbench.tsx     场景切换、搜索、地图工具和图层控制
    GroundMap.tsx        地面二维 GIS 总览
    GarageMap.tsx        B1 工程图、路径与拖动参考点
    RightPanel.tsx       接入结论、候选点、路径和改造建议
    ProcessBar.tsx       九步流程、播放控制和导出
    EChart.tsx           ECharts 生命周期与响应式封装
  mock/
    system.ts            小区、容量、约束、候选点和流程示范数据
    ground.ts            地面对象与空间示范数据
    garage.ts            B1 车位、障碍、桥架和路径示范数据
  App.tsx                全局 mock 状态与演示脚本
  styles.css             1920×1080 视觉系统与等比缩放
design-reference/        选定的地面与 B1 视觉目标
artifacts/qa/            本地视觉验收截图（由 .gitignore 排除）
```

## 响应式策略

页面以 1920×1080 作为设计坐标，通过视口宽高计算统一缩放比例，不触发布局重排，因此在 1280×720 下仍保持相同的信息结构、地图比例和交互热区，且不会出现页面滚动条。

## 技术说明

- 只使用前端 mock 状态，不发送网络业务请求。
- ECharts 实例通过 `ResizeObserver` 自适应，并在组件卸载时释放。
- SVG 地图对象、图层、候选点、路线和拖动参考点均为独立可交互数据元素。
- 地面与 B1 使用独立高清地图资产，地图内工程标注统一为简体中文；候选点动画只改变透明度，不会覆盖 SVG 定位坐标。
- 方案路径切换与参考点反馈使用 `@gsap/react` 的 `useGSAP` 进行作用域动画和自动清理，只突出当前选中的一条方案路径。
- 遵循 `prefers-reduced-motion`，在系统要求减少动态效果时关闭持续动画。