图书馆数据大屏

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

技术栈

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

快速开始

# 安装依赖
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 维护：

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

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

后端地址配置

后端接口地址在 public/static/config.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 自适应容器尺寸