You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
195 lines
13 KiB
195 lines
13 KiB
# Screen2.0 大屏界面统一标准
|
|
|
|
适用范围：红原县数字畜牧业监管平台 Screen2.0 的首页、林草湿一张图、生态保护、牦牛管理、牦牛全产业链、牧场管理、草畜平衡、智慧管理等 1920x1080 大屏界面。
|
|
|
|
代码落点：
|
|
|
|
- CSS token：`src/assets/style/screen2-tokens.css`
|
|
- JS 标准配置：`src/utils/screen2Standard.js`
|
|
- ECharts 公共主题与标准图表构造：`src/utils/chartTheme.js`
|
|
- 业务卡片通用渲染器：`src/views/forestGrassWet/components/BusinessPanelRenderer.vue`
|
|
- 后续界面如果需要计算卡片高度、跨卡片高度、图表字号和配色，优先引用上述标准，不再各页面手写一套。
|
|
|
|
## 1. 基础画布
|
|
|
|
- 设计分辨率固定按 `1920 x 1080`。
|
|
- 页面必须保持一屏完整呈现，不允许出现浏览器滚动条。
|
|
- 中央区域优先承载地图、三维地图或核心业务空间信息。
|
|
- 左右两侧为信息卡片区，不抢占中央地图主体。
|
|
|
|
## 2. 页面布局
|
|
|
|
- 首页和各业务主界面统一采用：左侧 4 个卡片，右侧 4 个卡片。
|
|
- 左右卡片宽度统一为 `398px`。
|
|
- 左右卡片间距统一为 `12px`。
|
|
- 侧边卡片区域上边距固定 `128px`，底部保留固定 `8px`。
|
|
- 卡片标题区高度为 `36px`，内容必须从标题下方开始。
|
|
- 不允许出现 3 个卡片强行占满一侧的情况，除非是独立专题页并经过确认。
|
|
- 允许业务列表占据两个卡片高度，但该侧仍按 4 格高度计算：例如“列表 2 格 + 图表 1 格 + 图表 1 格”，不能因为有一个双高列表就让下半区留空。
|
|
- 不允许卡片里再套一层大卡片；列表、图表、指标块可以作为内容组件存在。
|
|
- 卡片内容必须填满有效区域，避免右侧或底部大面积空白。
|
|
|
|
## 3. 字体规范
|
|
|
|
代码变量见 `src/assets/style/screen2-tokens.css`。
|
|
|
|
- UI 正文字体：`"Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", Arial, sans-serif`
|
|
- 大标题字体：`"Alimama ShuHeiTi", "阿里妈妈数黑体 Bold", "Alibaba PuHuiTi", sans-serif`
|
|
- 数字字体：`"D-DIN", "D-DIN-Bold", Arial, sans-serif`
|
|
- 禁止单独使用不稳定字体名：`PingFangSc`、`AlibabaPuHuiTi`。
|
|
- 图表、表格、卡片、菜单不得使用浏览器默认字体。
|
|
|
|
## 4. 字号规范
|
|
|
|
| 场景 | 固定字号 | 字重 | 说明 |
|
|
| --- | --- | --- | --- |
|
|
| 顶部大标题 | 48px | 900 | 只用于平台主标题 |
|
|
| 顶部菜单 | 14px | 600 | 文字必须清晰可读 |
|
|
| 卡片标题 | 16px | 600 | 统一渐变白青色 |
|
|
| 顶部指标名称 | 14px | 600 | 不要弱化到发灰 |
|
|
| 顶部指标数值 | 31px | 700 | 使用 D-DIN |
|
|
| 顶部指标单位 | 11px | 600 | 跟随数值右侧 |
|
|
| 图表单位 | 10px | 500 | 不低于 10px |
|
|
| 图表坐标轴 | 10px | 500 | 不低于 10px |
|
|
| 图表数值标签 | 11px | 700 | 必须可读，不遮挡 |
|
|
| 图表 tooltip | 12px | 600 | 背景深色、边框清晰 |
|
|
| 表格正文 | 11px | 500 | 行距要稳定，报表类不宜过大 |
|
|
| 表格重点数值 | 12px | 700 | 使用 D-DIN，避免挤占列宽 |
|
|
| 弹窗标题 | 20px | 700 | 只用于地图详情、业务详情 |
|
|
| 弹窗正文 | 14px | 500 | 行距稳定，不能发灰 |
|
|
|
|
## 5. 颜色规范
|
|
|
|
代码变量见 `src/assets/style/screen2-tokens.css`。
|
|
|
|
- 主文字：`#ffffff`
|
|
- 强文字：`#ffffff`
|
|
- 次级文字：`rgba(246, 253, 255, 0.92)`
|
|
- 弱提示文字：`rgba(242, 253, 255, 0.9)`
|
|
- 辅助弱文字：`rgba(229, 248, 255, 0.74)`，只用于空状态、禁用态等弱提示，不用于图表轴、单位、数值标签
|
|
- 主强调青：`#30dcff`
|
|
- 青绿强调：`#19ffc6`
|
|
- 水域强调：`#31dcff`
|
|
- 草地/生态图表默认折算到青绿：`#24f6c4`
|
|
- 不把黄色、橙色、紫色、强绿色作为默认图表色；只有明确告警且经过确认时才能局部使用
|
|
- 卡片边框：`rgba(62, 226, 255, 0.5)`
|
|
- 卡片背景：`rgba(10, 52, 72, 0.7)`
|
|
- 卡片标题背景：`rgba(40, 124, 158, 0.62)`
|
|
- 图表网格线：`rgba(218, 250, 255, 0.28)`
|
|
- Tooltip 背景：`rgba(3, 13, 18, 0.92)`
|
|
|
|
使用要求：
|
|
|
|
- 重要标题和数值不能使用低对比灰色。
|
|
- 坐标轴文字可以弱化，但不得低于 `rgba(242,253,255,0.9)` 的可读性；首页、林草湿、牧场、牦牛等主界面图表轴和单位不使用 0.48/0.58 透明度。
|
|
- 单位文字放在图表左上或右上，不要重复贴在每个柱子上。
|
|
- 林草湿、生态、牦牛、产业链、牧场等页面的图表默认参照首页：青蓝、青绿、浅青、深蓝青同色系变化，不允许一张图里黄、绿、橙、紫混排；图表文字要像首页/林草湿一样清晰，不能整体发灰。
|
|
- 卡片背景保持透明科技蓝，不再额外叠加大面积黑色遮罩。
|
|
- 例外：地图上的“牦牛识别/牦牛分布”框线按业务识别习惯保留黄色体系，推荐 `#FFCB45` / `#FFF4B8`，但只用于识别框、选中框或少量点位，不扩散到常规图表和顶部指标。
|
|
|
|
## 6. 卡片规范
|
|
|
|
- 统一使用 `mCard` 作为基础容器。
|
|
- 页面固定按 `1920x1080` 设计。
|
|
- 左右侧卡片宽度固定 `398px`。
|
|
- 左右侧卡片间距固定 `12px`。
|
|
- 侧边卡片顶部固定 `128px`，底部预留 `8px`。
|
|
- 常规一侧 4 卡时，单卡高度按公式计算：`(视口高度 - 128 - 8 - 12 * 3) / 4`，1920x1080 下为 `227px`。
|
|
- 一侧只有 3 张卡片但仍要遵循四格节奏时，必须使用 `1 + 1 + 2` 的高度组合；最后一张双格卡使用公共公式 `getScreen2SpanHeight(sideCardHeight, 2)`，1920x1080 下为 `466px`。不要手写 `+24px`、`*2-gap` 等临时高度。
|
|
- 标题左边距 `22px`，标题高度 `36px`。
|
|
- 左侧卡片透视统一为 `500px`，右侧卡片透视统一为 `800px`，左右倾斜角度分别为 `rotateY(6deg)` / `rotateY(-6deg)`。
|
|
- 卡片内容区从标题下方 `36px` 开始，底部到卡片底边 `0`，不再使用额外 `40px/10px` 偏移造成标题和图表位置不一致。
|
|
- 标题颜色使用白青渐变：`#dbf9ff -> #a9f0ff`。
|
|
- 卡片内边距要根据图表类型单独设置，但不得压住标题。
|
|
- 卡片内图表建议高度占内容区 `72%` 以上，避免视觉发空。
|
|
- 有单位时只显示一次，默认放图表区域左上或右上。
|
|
|
|
## 7. 图标规范
|
|
|
|
所有界面的图标参照首页顶部指标图标风格处理。
|
|
|
|
- 所有顶部 KPI 指标参照首页显示：青蓝图标底座、白色标题、D-DIN 数字、右侧单位；多指标场景也不得退化成纯文字列表。
|
|
- 当前阶段顶部 KPI 图标先保留；除非后续单独确认，不做“去图标化”处理。
|
|
- 主色固定使用青蓝：`#30dcff`，辅助色只允许少量青绿：`#19ffc6`。
|
|
- 不允许同一组图标混用高饱和黄、橙、红、紫、绿，避免看起来花。
|
|
- 图标线条以细线和面形结合为主，默认描边约 `1.5px`，不要做粗描边。
|
|
- 图标外发光必须克制，透明度不超过 `0.28`，不允许多层强 `drop-shadow`。
|
|
- 顶部指标优先使用 `src/assets/images/top-stat-icons/` 下的统一图标资产。
|
|
- 业务卡片里的自绘小图标也要统一为青蓝体系，不按不同业务随意变色。
|
|
- 定位、告警、选中态可以提高亮度或加白色点，但不改成大面积红色、橙色。
|
|
- 图标大小默认 `42px`，顶部指标图标可按首页布局放大，但颜色和发光保持同一体系。
|
|
|
|
## 8. 图表规范
|
|
|
|
同一个界面不能出现两个完全一样的图表样式。至少在以下一个维度上拉开差异：图形类型、柱体宽度、柱帽样式、是否叠加折线、方向、布局结构。同一页不要靠黄、橙、紫、强绿等多色混排来制造差异，差异必须保持在首页青蓝/青绿/浅青同色系内。
|
|
|
|
推荐组合：
|
|
|
|
- 面积分布：竖向柱状。
|
|
- 水域/湿地分布：水柱、圆帽柱状或横向满宽排名。
|
|
- 林地/森林乡镇分布：参照首页牦牛存栏分布，使用精细竖柱 + 浅青细折线；林地质量、类型、权属再使用热力、结构条、环图等，不与面积分布重复。
|
|
- 牲畜分布、存栏分布、趋势性排序：柱状 + 细折线。
|
|
- 趋势变化：面积折线。
|
|
- 结构占比：环图、3D 环图、环图 + 明细列表。
|
|
- 排名明细：横向条形或排行列表，但不能右侧留空。
|
|
- 状态类指标：仪表盘、环形进度、状态列表。
|
|
|
|
林草湿资源概览固定示例：
|
|
|
|
- 草地分布：普通竖向柱状，强调草地面积基础口径。
|
|
- 湿地分布：水柱/圆帽柱状，强调湿地资源属性。
|
|
- 林地分布：精细竖柱 + 浅青细折线，参考首页牦牛存栏分布；柱顶显示数值，单位右上角统一显示。
|
|
- 林地质量：保留业务含义，可用热力/等级结构，不改成普通柱状。
|
|
- 林草湿面积构成：保留结构/占比型图表，不与面积分布图重复。
|
|
|
|
图表参数底线：
|
|
|
|
- 图表文字不低于 `10px`。
|
|
- 图表文字层级固定：单位 `rgba(246,253,255,0.9)`，轴文字 `rgba(240,252,255,0.86)`，柱顶/关键数值 `#ffffff`，不得用低透明灰白冒充弱化。
|
|
- 新增或重构 ECharts 图表优先使用 `src/utils/chartTheme.js` 里的 `withChartDefaults`、`chartTooltip`、`categoryAxis`、`valueAxis`、`createSystemBarOption` 等公共能力；不得在页面内重新定义低透明轴色、强发光 tooltip 或花色 palette。
|
|
- `BusinessPanelRenderer.vue` 是林草湿、生态保护、牧场管理、牦牛全产业链等业务卡片的默认渲染入口；新增业务卡片优先通过它的 `bar`、`column`、`donut`、`structure`、`projectTable` 等类型扩展，不要在页面里复制一套相似 DOM 图表样式。
|
|
- `BusinessPanelRenderer.vue` 默认不尊重业务行里的自定义花色；只有地图图例、风险告警或明确需要保留原始分类色时，才允许设置 `preserveColors`。
|
|
- 图表 tooltip 字号 `12px`，背景深色，边框青色或白色细线。
|
|
- 柱状图参照首页精细柱体：10 个乡镇场景常规竖柱优先 `6px`，水柱可 `10px`，横向排行条优先 `8px`，顶部白青高光，底部青蓝弱透明渐隐，不能做粗块状或多色强发光。
|
|
- 竖向柱状图必须在柱顶显示数值标签，样式参照首页：白色、D-DIN 或统一数字字体、`11px` 左右；单位只在图表角落显示一次，不在每个柱顶重复。
|
|
- 同页如有多个柱状图，基础面积类使用纯细柱；趋势/存栏/数量变化类可叠加 `1.3-1.6px` 浅青细折线，不能两张图都套同一种折线。
|
|
- 除首页外，业务页图表不做强外发光；柱体、点位、折线只保留低强度高光，避免模糊和花。
|
|
- 非乡镇类柱图，例如年龄段、年份、类型分组，优先横排完整显示名称；乡镇类可按首页竖排，但不得截断到无法识别。
|
|
- 环图中心只显示关键百分比或数值，名称放到右侧/下方列表，避免文字挤在圆心里。
|
|
- 热力格、结构条、进度条不得使用大面积发光背景；只保留 1px 细边框和低透明度高光。
|
|
- 横向条形图必须在卡片内完整显示名称、数值和单位；行数较多时自动压缩行高或改分页，不允许底部裁切。
|
|
- 字体、轴线、网格、数值标签必须走首页同一套样式；不得出现同页面字体粗细、颜色深浅不一致。
|
|
- 10 个乡镇必须全部显示，名称不能被遮挡。
|
|
- 数据标签不能互相重叠；显示不下时优先减少装饰，不压缩文字。
|
|
- 无正值业务数据的图表不得保留空坐标轴、空网格或空图例；统一显示克制的空状态文案，例如“暂无业务统计数据”。
|
|
|
|
## 9. 数据呈现规范
|
|
|
|
- 首页和业务页展示的是“最终展示口径”，不要把数据库原始口径直接暴露到界面。
|
|
- 指标卡、图表、智慧管理提示词里的同一指标必须保持一致。
|
|
- 有合计关系的数据必须做合计校验，例如草地退化分类合计必须等于草地面积口径。
|
|
- 不允许出现无业务意义的图斑数量堆叠，必须转成业务维度：面积、乡镇、状态、类型、年份、项目、户数、头数等。
|
|
|
|
## 10. 地图与图层规范
|
|
|
|
- 地图是主视觉，不允许被两侧卡片过度遮挡。
|
|
- 默认视角要稳定，进入页面后能直接看到主体区域。
|
|
- 图层控制样式统一，采用树形层级，不同界面只换业务名称和图层项。
|
|
- 图层弹窗必须出现在点击位置上方或附近，不能偏离选中位置。
|
|
- 图标不能漂浮在空中，必须贴合地图点位或三维地表。
|
|
- 识别框、选中框、项目图斑优先以前端矢量或 WFS 透明填充叠加；常规项目描边使用青白细线。“牦牛识别/牦牛分布”作为业务例外使用黄色细线，不使用大面积黄色/橙色 WMS 样式覆盖地图。
|
|
|
|
## 11. 验收清单
|
|
|
|
每个界面调整完成后必须检查：
|
|
|
|
- 1920x1080 截图无滚动条。
|
|
- 左右是否各 4 个卡片。
|
|
- 卡片宽度、标题位置、倾斜方向是否一致。
|
|
- 字体是否使用统一字体栈。
|
|
- 图表单位、坐标轴、标签是否不低于 10px。
|
|
- 同一页是否存在完全重复图表样式。
|
|
- 图标是否统一为首页青蓝风格，是否存在高饱和花色或过强发光。
|
|
- 是否存在大面积空白、文字遮挡、tooltip 无意义。
|
|
- 控制台无报错。
|
|
- 页面截图保存到 `tmp/` 或 `/tmp/` 作为验收依据。
|
|
|