2026-08-04.md 4.2 KB

2026-08-04

nine-safety-measures/index.vue — 卡片底部留白 / 饼图标签截断

最终方案:.grid-autoalign-items: start,让卡片按内容高度对齐,不再被同行高卡片拉伸。

走过的弯路(记下来避免再犯):

  1. 第一次把"九防高危占比"底部留白归因到 ECharts grid.bottom: 55 太大——错。
  2. 改成 bottom: 0 后没效果,才意识到留白在 ECharts 画布(卡片被 Grid align-items: stretch 强行拉高,而 .chart 写死 320px)。
  3. 第二次改成 .card { display:flex; flex-direction:column } + .chart { flex:1 0 320px },让图表撑满卡片——这解决了柱状图,但又引出饼图标签被裁成 "…" 的新问题。
  4. 根因:ECharts 饼图 radius: '70%' 是按容器短边算的。图表被拉高后短边变成卡片宽度,饼图直径超出卡片,左侧引导线/标签被裁断。
  5. 正确做法:别让图表撑满。给 .grid-autoalign-items: start,卡片高度=内容高度,既无内部留白,饼图也回到合理尺寸。

副带改动(清理):renderAssessCompletiongrid.bottom 从 55 → 30,配合 axisLabel.margin: 10,给旋转 35° 的 X 轴标签留呼吸空间。

教训:dashboard 类页面遇到"卡片底部空白",先检查外层 Grid/容器是否在拉伸子元素,别急着改图表内部的 ECharts 配置。

移除「半年度评估频次日历」图表(约 10:50)

用户要求删除该日历热力图及其相关方法/数据。已清理的内容:

  • index.vueCalendarComponent 的 import 与 echarts.use() 注册;calendarData ref;renderCalendar() 函数及其在 renderAllCharts 的调用;loadAllDatagetMonthlyAssessCalendar 请求、解构变量 calcalendarData.value = cal 赋值;模板中 半年度评估频次日历 卡片(含 span-full);CSS .chart-calendar.grid-auto .span-fullspan-full 仅此卡片使用)。
  • src/api/data-board/nine-safety.ts:删除 getMonthlyAssessCalendar 函数(已无其它引用)。

注意:.grid-auto 此前为 align-items: start(上一轮结论),移除全宽卡片后不影响布局。

补充(约 11:15):vue-tsc 类型检查报两处 TS6133 死代码,已清理——

  • index.vue 中未使用的 levelNames 常量(疑似日历遗留);
  • nine-safety.tsgetNineRiskCorrelation 中未使用的 elders 局部变量(generateEldersgetRiskRadar 仍使用,不受影响)。 重新检查 nine-safety 相关文件:NO_NINE_SAFETY_ERRORS,删除干净无编译错误。

排查 src/views/ykCenter/... vue-tsc 报错(约 11:55)

整体 vue-tsc 在 ykCenter 相关约 9 个文件报 ~70 条错误,分组根因:

  1. 遗留 mock 数据(最大块,~20 条):各视图 (await import('@/api/ykCenter')).mockData 直接拿被注释掉的假数据对象做本地增删改。mockData 原在 src/api/ykCenter/indexFetch.ts:286 整段被 // 注释(伪后端脚手架),真实 API 已接好。需用户决定:恢复导出 / 重构为真实 API / 暂不处理。
  2. 未注明泛型的 ref([])never[](delivery-staff、food-delivered-history,~6 条):给 ref 补 <T[]> 泛型即可,低风险。
  3. 局部 interface 字段缺失/错名(delivery-staff elderName/personalPhone、elderly-manage supportStatus/startDate/endDate/desc、finance-verify paymentType/confirmStatus/elderlyName、food-delivered-history ykElderName/mealStandard):扩宽 interface,但 elderlyName vs elderName 涉及接口字段名正确性,需谨慎。
  4. $modal 全局类型(delivery-staff:336):proxy?.$modal 报错,需在 ComponentCustomProperties 增补类型声明。
  5. TS6133 未使用变量(全 ykCenter ~20 条):安全可删,但需确认模板未引用。
  6. null 不能赋给 string(delivery-staff:355):ref 类型加 | null

注意:src/types/auto-components.d.ts 仅声明 GlobalComponents 且有 @ts-nocheck,未声明 $modal 等 ComponentCustomProperties。 → 已向用户给出分组诊断,并询问处理方式(先修安全项 / 全修含 mockData / 仅诊断)。