客流量大屏改造方案

Context（背景与目标）

现有项目 hs-flow‑screen 是一个深色科技风的"借阅/通知大屏"（三栏布局：总借阅、借阅排行、进馆、阅读之星、通知、新书推荐）。用户希望仿照目标页面 http://libraryu.seaeverit.com:15000/main?token=... 做一个客流量大屏，目标页面布局为：顶部 Header → "客流量展示"标签 → 三列卡片（当日进馆折线图 / 当月进馆折线图 / 当年进馆数字翻牌）→ 全宽"累计客流量汇总"翻牌器。

经确认的改造口径：

保留深色科技风视觉（深蓝背景 #010326、白色文字、蓝色发光 #1AC9FF、common-title/module-content 蓝色样式），不改成目标页的白底橙色，只仿照布局结构。
保留现有 Header 组件（动画线条 + 天气 iframe + 渐变标题），标题用"黄石图书馆"。
删除不再使用的旧组件目录。
数据先用 mock，预留接口对接位置。

关键约束（基于源码确认）

适配：rem 方案（src/common/flexible.js，1920 设计稿，1rem≈80px，范围 1366–2560），所有尺寸用 rem。
echarts 4：this.$echarts 全局已注册（main.js），用 this.$echarts.init(this.$refs.chart) + ref，不要用 getElementById（旧 components/echart/* 用 id 会有冲突）。
resizeMixins.js（src/utils/resizeMixins.js）提供自动 resize（要求组件 data.chart 字段），但其 removeEventListener('reisze'…) 拼写错误且不 dispose → 新组件须在 beforeDestroy 手动 this.chart.dispose(); this.chart=null。
数字翻牌：vue-count-to 的 CountTo，用法 <count-to :start-val="0" :end-val="num" :duration="3200" />。
滚动：vue-seamless-scroll 已 Vue.use，组件名 <seamless>。
.common-title / .module-content 是 .screen-main 的后代选择器 → 新布局根容器必须仍是 .screen-main（叠加 .traffic-main）。
Header 标题 prop：headerTitle，getCurrentTime() 返回"YYYY年MM月DD日 HH:mm:ss"。
端口 8080，npm run serve 自动开浏览器。

新文件结构

src/views/
├── index.vue                       # 改写：Header + <TrafficFlow/>，删除旧的高度计算逻辑
├── header/index.vue                # 保留不动
└── trafficFlow/
    ├── index.vue                   # 新建：.screen-main.traffic-main 布局容器
    └── components/
        ├── DayInFlowChart.vue      # 当日进馆折线图（按小时）
        ├── MonthInFlowChart.vue    # 当月进馆折线图（按日）
        ├── YearInFlowCard.vue      # 当年进馆数字翻牌（单个大数字）
        └── TotalFlowSummary.vue    # 累计客流量汇总（8 位翻牌卡片，横向可滚动）

实施步骤

1. 新建 trafficFlow 4 个子组件 + index.vue（先建骨架，不破坏现有）

DayInFlowChart.vue / MonthInFlowChart.vue：<div class="chart-box" ref="chart"/>，mixins:[resize]，data.chart=null + mock 数据，mounted → initChart() → setOption()，beforeDestroy dispose。setOption 用蓝色系（线 #1AC9FF、轴 #2C75E0、分割线 rgba(44,117,224,0.3) 虚线、白色文字、areaStyle 用 this.$echarts.graphic.LinearGradient 蓝色渐变、smooth:true）。
YearInFlowCard.vue：<count-to :end-val="yearNum"/>，mock yearNum:1286500。
TotalFlowSummary.vue：totalNum:98765432 → computed.digitList 用 padStart(8,'0').split('') 固定 8 位，每位一个 <count-to>，外裹 <seamless :data :class-option> 横向滚动（direction:2）。预留 fetchData() 注释。
trafficFlow/index.vue：模板见下方。

2. 在 `src/assets/styles/index.scss` 末尾追加客流量布局样式（不动现有任何规则）

新增 // ===== 客流量大屏布局 ===== 段，关键规则：

.traffic-main { flex-direction:column; justify-content:flex-start; gap:0.125rem; }（叠加在 .screen-main 上）
.traffic-section-title（顶部"客流量展示"标签，用 title-big.png）
.traffic-row { display:flex; }、.traffic-row-3 { flex:1; gap:0.25rem; min-height:0; }（min-height:0 防 echarts 高度坍缩）
.traffic-card { flex:1; display:flex; flex-direction:column; min-width:0; .module-content{flex:1; overflow:hidden; padding:0.125rem 0.2rem;} }
.traffic-summary { height:1.6rem; }
.chart-box { width:100%; height:100%; }
.year-num（当年大数字，#1AC9FF + text-shadow）、.summary-digits/.digit-card（每位翻牌，num-img.png 背景）

3. 改写 `src/views/index.vue` 为极简入口

<template>
  <div id="screen-container">
    <Header :header-title="headerTitle" />
    <TrafficFlow />
  </div>
</template>
<script>
import Header from '@/views/header/index.vue'
import TrafficFlow from '@/views/trafficFlow/index.vue'
export default {
  name: 'Home',
  components: { Header, TrafficFlow },
  data() { return { headerTitle: '黄石图书馆' } }
}
</script>
<style lang="scss">@import "~@/assets/styles/index.scss";</style>

（删除原 calcXxxHeight/$refs/resize 监听等所有逻辑）

trafficFlow/index.vue 模板骨架：

<template>
  <div class="screen-main traffic-main">
    <div class="common-title traffic-section-title">客流量展示</div>
    <div class="traffic-row traffic-row-3">
      <div class="traffic-card"><div class="common-title">当日进馆</div><div class="module-content"><DayInFlowChart/></div></div>
      <div class="traffic-card"><div class="common-title">当月进馆</div><div class="module-content"><MonthInFlowChart/></div></div>
      <div class="traffic-card"><div class="common-title">当年进馆</div><div class="module-content year-content"><YearInFlowCard/></div></div>
    </div>
    <div class="traffic-row traffic-summary"><TotalFlowSummary/></div>
  </div>
</template>

4. 启动验证一轮（`npm run serve`）

确认：Header + "客流量展示" + 三卡片（两折线图初始化、一翻牌）+ 汇总翻牌滚动；控制台无 echarts 报错。

5. 删除旧组件目录

src/views/accessToLibrary/、totalLending/、lengingRanking/、newBookRecommend/、notice/、readStar/、todayBorrowed/

6. 可选清理

删 src/components/echart/（删旧组件后无引用）、src/common/scrollMixins.js（全项目无引用）。
清 index.scss 中三栏 .screen-left/.screen-right/.screen-middle 及旧组件死 CSS（留着不影响，但建议删三栏那三条以免误导）。

接口对接预留（mock 阶段不做）

src/api/library.js 的 FetchInitIntoNum 已存在，保留不删。后续在 4 个组件的 fetchData()（已注释）中对接，字段参考 historyPeopleNum（累计）、dayPeopleNum/monthPeopleNum（当日/当月总数）；按小时/按日粒度折线数据需后端补接口。

验证

npm run serve → http://localhost:8080：
- Header 显示"黄石图书馆" + 天气 + 每秒跳的时间
- 顶部"客流量展示"标签
- 第一行三列：左/中蓝色平滑折线图（带渐变面积）、右"当年进馆"0→1286500 翻牌动画
- 第二行"累计客流量汇总"8 位翻牌（num-img.png 蓝牌背景）横向滚动
F12 控制台无 echarts init/id 重复/resize 报错
拖拽窗口：折线图随 resizeMixins 自动 resize，rem 尺寸随 flexible 重算
改 mock 数字热更新不残留旧 echarts 实例（dispose 生效）
npm run build 无打包错误

风险规避

echarts 容器高度坍缩：.traffic-row-3 { min-height:0 } + .traffic-card .module-content { flex:1 } 必须同时有；必要时给 .chart-box 兜底 min-height:2rem。
seamless 横向滚动可能因 8 位内容不够触发：调小 limitMoveNum:1，或不要滚动直接静态居中（"可滚动"非硬需求）。
顺序：先建新→改入口→验证→再删旧，避免白屏。

7.8 KiB Raw Blame History