diff --git a/.gitignore b/.gitignore index ef4e647..dbbe811 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ .DS_Store node_modules dist/ +.trae/ # local env files .env.local diff --git a/README.md b/README.md index 4e927b1..e97f351 100644 --- a/README.md +++ b/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 -# install dependency +# 安装依赖 npm install -# develop +# 开发模式(默认端口 8080) npm run serve # 构建生产环境 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 -``` \ No newline at end of file + +``` +├── 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 自适应容器尺寸