hs_flow_screen/README.md

# 图书馆数据大屏

图书馆客流量数据可视化大屏，展示当日/当月/当年进馆人次及累计客流量。支持多网点切换，标题与数据随 URL 参数动态变化。

## 技术栈

- Vue 2.6 + Vue Router (hash 模式)
- ECharts 4.6（折线图）
- Axios（接口请求）
- SCSS（样式）
- vue-count-to（数字翻牌）
- Vue CLI 4（构建）

## 快速开始

```bash
# 安装依赖
npm install

# 开发模式（默认端口 8080）
npm run serve

# 构建生产环境
npm run build
```

## 使用说明

### 网点切换

通过 URL query 参数 `doorCodes` 指定网点编号，大屏标题与数据会自动匹配：

```
http://localhost:8080/#/?doorCodes=HWXD
http://localhost:8080/#/?doorCodes=D3、D4
```

- 标题：根据 `doorCodes` 从 `public/static/branches.json` 查找对应网点名称展示，同时更新浏览器标签页标题
- 数据：`doorCodes` 作为参数传入接口 `FetchInitIntoNumHS`，获取对应网点的客流数据

### 网点配置

网点编号与名称映射在 [public/static/branches.json](public/static/branches.json) 维护：

```json
{
  "branches": [
    { "code": "HWXD", "name": "宏伟星都城市书房" },
    { "code": "QSH", "name": "青山湖城市书房" }
  ]
}
```

新增/修改网点只需编辑此文件，部署后刷新即可生效，无需重新打包。

### 后端地址配置

后端接口地址在 [public/static/config.js](public/static/config.js) 配置：

```js
window.g = {
  AXIOS_TIMEOUT: 10000,
  ApiUrl: 'http://192.168.99.63:8080', // 后端服务地址
  headerCode: 'HWXD'                   // 默认网点编号（已改为 URL 参数驱动，此字段保留）
}
```

- 开发环境：走 `vue.config.js` 的 devServer 代理（避免跨域）
- 生产环境：axios baseURL 读取 `window.g.ApiUrl`，改 config.js 即可切换后端，无需重新打包

## 接口

| 接口 | 方法 | 说明 |
| --- | --- | --- |
| `/dxhtsg/initIntoNumHS` | GET | 客流量数据（参数 `doorCodes`） |

返回字段：

| 字段 | 说明 |
| --- | --- |
| `todayTotal` | 当日进馆人次 |
| `monthData` | 当月每日数据（`day` + `count`） |
| `yearData` | 当年每月数据（`month` + `count`） |
| `historyTotal` | 累计客流量 |

## 项目结构

```
├── public
│   └── static
│       ├── config.js              # 后端地址、超时等运行时配置
│       └── branches.json          # 网点编号与名称映射
├── src
│   ├── api
│   │   └── library.js             # 客流量接口
│   ├── assets
│   │   ├── images                 # 图片资源
│   │   └── styles
│   │       └── index.scss         # 全局样式 + 大屏布局
│   ├── router
│   │   └── index.js               # 路由（hash 模式）
│   ├── utils
│   │   ├── index.js               # 工具函数（时间格式化、防抖）
│   │   └── request.js             # axios 封装（baseURL 走 window.g.ApiUrl）
│   ├── views
│   │   ├── header                 # 头部（标题随 doorCodes 动态变化）
│   │   ├── trafficFlow            # 客流量大屏
│   │   │   ├── index.vue          # 主页面（统一请求接口，props 下发子组件）
│   │   │   └── components
│   │   │       ├── DayInFlowCard.vue      # 当日进馆（数字卡片）
│   │   │       ├── MonthInFlowChart.vue   # 当月进馆（折线图 + tooltip 轮播）
│   │   │       ├── YearInFlowChart.vue    # 当年进馆（折线图 + tooltip 轮播）
│   │   │       └── TotalFlowSummary.vue   # 累计客流量汇总（翻牌 + 柱状示意 + 书本插画）
│   │   └── index.vue              # 入口页面（Header + TrafficFlow）
│   ├── App.vue
│   └── main.js
├── vue.config.js                  # Vue CLI 配置（devServer 代理、标题等）
└── package.json
```

## 大屏布局

```
┌──────────────────────────────────────────────────┐
│                    Header（网点名）                │
├──────────────┬──────────────┬───────────────────┤
│  当日进馆     │  当月进馆     │   本年进馆         │
│  （hero 卡片  │  （黄色折线图 │   （绿色折线图     │
│   + 数字脉冲）│   + tooltip） │    + tooltip）    │
├──────────────┴──────────────┴───────────────────┤
│        累计客流量汇总（8 位翻牌 + 柱状示意 + 插画）  │
└──────────────────────────────────────────────────┘
```

- 三个卡片顶部一行，汇总底部全宽
- 数据每 15 �自动刷新
- 折线图 markPoint 常显最新点数值，tooltip 每 2.5 秒轮播
- echarts 用 ResizeObserver 自适应容器尺寸