图书馆数据大屏

图书馆客流量数据可视化大屏，展示当日/当月/当年进馆人次及累计客流量。支持多网点切换，标题与数据随 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 参数驱动，此字段保留）
}

项目结构

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

3.5 KiB Raw Blame History