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' // 后端服务地址
}
```

## 项目结构

```
├── 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
```