Browse Source

修改readme

master
xuhuajiao 2 weeks ago
parent
commit
5e32edd66b
  1. 1
      .gitignore
  2. 154
      README.md

1
.gitignore

@ -1,6 +1,7 @@
.DS_Store .DS_Store
node_modules node_modules
dist/ dist/
.trae/
# local env files # local env files
.env.local .env.local

154
README.md

@ -1,40 +1,138 @@
人流数据大屏
# 图书馆数据大屏
图书馆客流量数据可视化大屏,展示当日/当月/当年进馆人次及累计客流量。支持多网点切换,标题与数据随 URL 参数动态变化。
## 技术栈
- Vue 2.6 + Vue Router (hash 模式)
- ECharts 4.6(折线图)
- Axios(接口请求)
- SCSS(样式)
- vue-count-to(数字翻牌)
- Vue CLI 4(构建)
## 快速开始
```bash ```bash
# install dependency
# 安装依赖
npm install npm install
# develop
# 开发模式(默认端口 8080)
npm run serve npm run serve
# 构建生产环境 # 构建生产环境
npm run build npm run build
```
## 使用说明
### 网点切换
通过 URL query 参数 `doorCodes` 指定网点编号,大屏标题与数据会自动匹配:
``` ```
```bash
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` | 累计客流量 |
## 项目结构 ## 项目结构
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局组件
│ │ ├── echart # echart
│ ├── router # 路由
│ ├── views # views 所有页面
│ │ ├── accessToLibrary # 总进馆人数
│ │ ├── header # 头部
│ │ ├── lengingRanking # 借阅排行榜
│ │ ├── newBookRecommend # 新书推荐
│ │ ├── notice # 通知公告
│ │ ├── readStar # 阅读之星
│ │ ├── todayBorrowed # 今日图书借还 -- 24小时图书馆
│ │ ├── totalLending # 总借阅量 -- 总馆
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等 注意:Vue.prototype.libcode使用
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── .babelrc # babel-loader 配置
├── .travis.yml # 自动化CI配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json
```
├── 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 自适应容器尺寸
Loading…
Cancel
Save