{{ group.code }}
{{ row.dataFamily === 'INVENTORY' ? '产品库存' : '出库销量' }}{{ row.lastPublishedAt ? beijingTime(row.lastPublishedAt) : '暂无发布结果' }}{{ row.lastPublishedAt ? '已有结果' : '尚未发布' }}{{ row.lastPublishedAt ? label(row.dataFreshness) : '—' }}
数据提示 · {{ notices.length }}
{{ notice }}
@@ -97,6 +96,10 @@ defineExpose({ selectedDate, mode })
今天
+
+
数据提示 · {{ notices.length }}
{{ notice }}
只标记已确认的推进状态{{ index + 1 }}{{ node.name }}{{ nodeState(node.phases) === 'done' ? '已确认完成' : nodeState(node.phases) === 'active' ? '正在处理' : current || !overview ? '等待状态确认' : '待机' }}
采集进度与报表发布分别确认
-
+
- {{ counts ? `${counts.percent.toFixed(1)}%` : '—' }}{{ stale ? '上次阶段记录' : '当前阶段' }}
+
@@ -34,10 +39,8 @@ const scope = computed(() => props.progress?.progressScope === 'ACCOUNT_SHARED'
diff --git a/src/modules/self-operated/components/DashboardChartHeading.vue b/src/modules/self-operated/components/DashboardChartHeading.vue
new file mode 100644
index 00000000..5fcf23a8
--- /dev/null
+++ b/src/modules/self-operated/components/DashboardChartHeading.vue
@@ -0,0 +1,16 @@
+
+
+
diff --git a/src/modules/self-operated/dashboardChartOptions.test.ts b/src/modules/self-operated/dashboardChartOptions.test.ts
new file mode 100644
index 00000000..9997392d
--- /dev/null
+++ b/src/modules/self-operated/dashboardChartOptions.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import type { GaugeSeriesOption, BarSeriesOption } from 'echarts'
+import { barChartOption, progressGaugeOption } from './dashboardChartOptions'
+
+describe('self-operated ECharts configurations', () => {
+ it('wraps a concise tooltip and escapes source text rather than inserting markup', () => {
+ const option = barChartOption([{ key: 'sku', label: '
', secondary: 'A&B', value: 12, detail: 'very long detail belongs in the dialog' }], '件', '热销', true)
+ const tooltip = option.tooltip as { formatter: (value: { dataIndex: number }) => string; extraCssText: string }
+ const content = tooltip.formatter({ dataIndex: 0 })
+ expect(content).toContain('<img src=x>')
+ expect(content).toContain('A&B')
+ expect(content).not.toContain('very long detail')
+ expect(tooltip.extraCssText).toContain('white-space: normal')
+ })
+ it('renders unknown progress as an empty track without a zero progress value', () => {
+ const unknown = (progressGaugeOption(null).series as GaugeSeriesOption[])[0]!
+ expect(unknown.progress?.show).toBe(false)
+ expect(unknown.data).toEqual([])
+ const known = (progressGaugeOption(12.1).series as GaugeSeriesOption[])[0]!
+ expect(known.progress?.show).toBe(true)
+ expect(known.data).toEqual([{ value: 12.1 }])
+ })
+ it('keeps the seven bucket order, zero, null and common numeric scale', () => {
+ const rows = Array.from({ length: 7 }, (_, index) => ({ key: `bucket-${index}`, label: `分组${index}`, value: index === 6 ? null : index, detail: '' }))
+ const option = barChartOption(rows, 'SKU', '库存分布')
+ expect(option.yAxis).toMatchObject({ inverse: true, data: rows.map(row => row.key) })
+ expect(option.xAxis).toMatchObject({ type: 'value', min: 0 })
+ expect((option.series as BarSeriesOption[])[0]?.data?.[0]).toMatchObject({ value: 0 })
+ expect((option.series as BarSeriesOption[])[0]?.data?.[6]).toMatchObject({ value: null })
+ })
+})
diff --git a/src/modules/self-operated/dashboardChartOptions.ts b/src/modules/self-operated/dashboardChartOptions.ts
new file mode 100644
index 00000000..11cfd228
--- /dev/null
+++ b/src/modules/self-operated/dashboardChartOptions.ts
@@ -0,0 +1,33 @@
+import type { EChartsOption } from 'echarts'
+import type { Quantity } from './types'
+import { quantityText } from './state'
+
+export interface BarRow { key: string; label: string; secondary?: string; value: Quantity; detail: string }
+const escapeHtml = (value: string) => value.replace(/[&<>"']/g, char => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[char]!))
+const palette = ['#5575ed', '#3da9ba', '#e8a54b', '#b083dc', '#df8397', '#8a9ab4', '#a2adbf']
+export function barChartOption(rows: BarRow[], unit: string, title: string, ranked = false): EChartsOption {
+ return {
+ animation: false,
+ grid: { left: 12, right: 48, top: 12, bottom: 24, containLabel: true },
+ xAxis: { type: 'value', min: 0, name: unit, splitNumber: 3, minInterval: 1, axisLabel: { color: '#697586' }, splitLine: { lineStyle: { type: 'dashed', color: '#e5eaf3' } } },
+ yAxis: { type: 'category', inverse: true, data: rows.map(row => row.key), triggerEvent: true,
+ axisTick: { show: false }, axisLine: { show: false },
+ axisLabel: { width: ranked ? 116 : 130, overflow: 'truncate', color: '#344054', rich: { rank: { color: '#5575ed', fontWeight: 'bold', width: 24, align: 'left' } }, formatter: key => { const index = rows.findIndex(row => row.key === key); const row = rows[index]; return row ? `${ranked ? `{rank|${index + 1}} ` : ''}${row.label}` : key } } },
+ tooltip: { trigger: 'item', renderMode: 'html', confine: true, extraCssText: 'max-width: min(300px, 80vw); white-space: normal; overflow-wrap: anywhere;', formatter: params => {
+ const item = Array.isArray(params) ? params[0] : params
+ const row = item ? rows[item.dataIndex] : undefined
+ return row ? `${escapeHtml(row.label)}
${row.secondary ? `${escapeHtml(row.secondary)}
` : ''}${escapeHtml(quantityText(row.value))} ${escapeHtml(unit)}` : '' + } }, + aria: { enabled: true, description: `${title}，横轴为${unit}。未知不作为零值；详细数据和键盘操作在下方完整明细弹框。` }, + series: [{ type: 'bar', barMaxWidth: ranked ? 14 : 18, data: rows.map((row, index) => ({ value: row.value == null ? null : Number(row.value), itemStyle: { color: palette[ranked ? 0 : index % palette.length], borderRadius: [0, 4, 4, 0] } })), + label: { show: true, position: 'right', formatter: params => quantityText(rows[params.dataIndex]?.value) } }], + } +} +export function progressGaugeOption(percent: number | null): EChartsOption { + return { animation: false, series: [{ type: 'gauge', startAngle: 90, endAngle: -270, radius: '86%', min: 0, max: 100, + pointer: { show: false }, progress: { show: percent != null, roundCap: true, width: 10 }, + axisLine: { lineStyle: { width: 10, color: [[1, '#e8eaf5']] } }, itemStyle: { color: '#6879ee' }, + axisTick: { show: false }, splitLine: { show: false }, axisLabel: { show: false }, title: { show: false }, detail: { show: false }, + silent: true, data: percent == null ? [] : [{ value: percent }], + }] } +} diff --git a/src/modules/self-operated/operation-matrix.md b/src/modules/self-operated/operation-matrix.md index 0e8421cc..f488b7fa 100644 --- a/src/modules/self-operated/operation-matrix.md +++ b/src/modules/self-operated/operation-matrix.md @@ -4,11 +4,15 @@ | 页面 | 操作 | 依据与承载结论 | 布局与验证 | | --- | --- | --- | --- | +| 自营业务全部图表 | 统一ECharts | 2026-10-13 用户要求全面替换手写图表：经营总览日趋势、库存七桶与三个榜单、SKU日趋势、采集进度环统一通过AnalyticsChart使用ECharts Canvas；移除SVG路径生成与CSS条形绘图，保留真实数量、未知／零区分及原有下钻边界 | 日期点／分类轴／柱体点击及展开表格键盘操作同资格；未知进度仅空环；坐标、tooltip、缩放及尺寸由组件配置；待人工1920×1080、100%截图确认 | +| 库存／销量 | SKU每日出库趋势连线与坐标 | 2026-10-13 用户反馈线未连接、坐标不显示，并明确要求图表组件：保留居中弹框，改用ECharts＋vue-echarts（Canvas），配置日期轴、数量轴、网格、提示框、图例说明和范围缩放；相邻有效日连接，涉及未完整日用虚线，未知或缺失日期断线 | 库存／销量／总览的SKU弹框共用组件；总览主图的连线修复同步回归；不把未知补零；待人工1920×1080、100%截图确认 | +| /self-operated/collection | 看板配色 | 2026-10-13 用户追加当前页面与原型首页截图：采用蓝紫主色、浅色圆形装饰数量卡、绿／橙数量强调；流程与仓库结果增加色彩层次，保持原有左右布局及真实状态文字 | 仅本看板作用域内应用；颜色不代替状态或代表未知完成度；待人工1920×1080、100%截图确认 | +| /self-operated/collection | 等待提示与刷新稳定性 | 2026-10-13 用户两张运行看板截图：移除环图上方临时插入的等待说明，原因合并到下方估算说明区；未知总量以“—”及目录总页数未返回说明展示；刷新保留已读数据，同任务优先使用账号活动摘要 | 数量说明预留一行，避免已知／未知切换挤动数字；阶段或尝试变化不沿用旧百分比；待人工1920×1080、100%截图确认 | | /self-operated/collection | 单账号运行首屏 | 2026-10-13 最新实际页面及原型截图：首屏改为账号活动优先，环形进度、总量／完成／剩余及阶段预计时间；移除原筛选、配置、历史、详情和恢复表单，只读账号概览；待机保留阶段、最近发布及各仓结果 | 按用户原型排版，使用现有 Admin 白色卡片、主题强调色及统一按钮，无详情弹框；本行覆盖下方旧采集页面承载记录；后续流程不冒充调度顺序，有界待处理摘要不冒充完整队列；待人工1920×1080、100%截图确认 | | 销量／库存 | 默认仓库与重置 | 2026-10-13 用户确认进入页面即按仓库显示：无传入仓库时自动选中接口返回的首个可用仓库并查询；链接带入仓库优先；重置保留当前仓库并重新查询 | 保留切仓与迟到响应隔离；没有可用仓库不发无仓库查询；自动回归覆盖两页首次进入、链接进入、缓存页返回及重置 | | /self-operated/sales | 自定义销量日期 | 2026-10-13 用户截图 `codex-clipboard-fac03bb1-6703-467d-b357-5731ea8cfb32.png`：两个单日框分散换行，未完整选择时残留逆序错误和旧结果。原筛选区改为公共QueryToolbar单一日期范围控件，明确开始／结束日期，支持同日；不新增浮层或改变统计口径 | 日期范围整体换行，校验完整范围后查询；草稿修改不改变已查询列表的分页／趋势条件，提交失败不冒充新范围结果；补充自动回归，待人工1920×1080、100%截图确认 | | /self-operated/overview | 查询、刷新与六项指标 | `docs/自营业务/经营总览图表设计.md`“菜单与页面布局”“指标带”；单仓＋趋势日期QueryToolbar、紧凑指标带，整体固定版本 | 不新增货主控件；未知／过期独立提示；待人工1920×1080截图确认 | -| /self-operated/overview | 日趋势、七桶与三个Top10 | 同设计“五张图表”；SVG折线与横条、趋势约2/3宽、分布约1/3宽，三榜并排 | 热销随时间筛选按已采集量排名并提示覆盖不足；可聚焦提示、缺日断线、部分日文字、真实数值比例；待人工截图确认 | +| /self-operated/overview | 日趋势、七桶与三个Top10 | 同设计“五张图表”；ECharts折线与横条、趋势约2/3宽、分布约1/3宽，三榜并排 | 热销随时间筛选按已采集量排名并提示覆盖不足；可聚焦提示、缺日断线、部分日文字、真实数值比例；待人工截图确认 | | /self-operated/overview | SKU趋势 | 同设计“图表交互与视觉依据”；1120px居中AppDialog，热销沿所选时段、其它榜沿固定30日，精确货主SKU | 关闭取消请求，不改现有详情承载；待人工截图确认 | | 总览→销量／库存 | 日期／榜单／分桶下钻与返回 | 同设计“精确下钻合同”；目标页验证完整版本、精确筛选及互斥，显示可清除来源摘要，固定本地返回 | 库存时效到期阻止严格下钻；返回恢复趋势范围、版本、滚动；待人工截图确认 | | /self-operated/sales | 仓库、SKU、日期／榜单查询及分页 | 当前截图：货主控件分散筛选；本轮冻结为单一紧凑筛选区，仓库明确提示必须选择，SKU为主 | 复用 AdminPage、QueryToolbar、DataTable、高密度样式；日期／榜单切换和分页保持版本；待人工截图确认 | @@ -58,7 +62,26 @@ | --- | --- | --- | --- | | /self-operated/collection | 查询与完整任务号定位 | 原 QueryToolbar 增加采集内容与完整任务号；按仓库直接读取受权限约束的任务详情，同步 `warehouseCode,taskNo`，不靠翻历史列表定位 | 不跨权限搜索；不存在、权限拒绝、首次读取失败沿服务端错误呈现；待人工1920×1080、100%截图确认 | | /self-operated/collection | 当前关注与活动切换 | 筛选区下先展示关注任务及完整编号；默认只选服务端 `activeTasks`，手动选择和历史任务持续保留，提供返回当前活动；账号其他活动单列，不借作本任务来源 | 已确认 `progressSourceTaskNo` 才消费对应共享上游；来源数量不跨仓累加；待人工截图确认 | -| /self-operated/collection | 环图、阶段和结果 | 当前阶段SVG环图与总量／完成／剩余共用区域；未知、零量、异常或变化分母撤去比例。出库五阶段、库存四阶段各自展示，阶段完成只依据同身份结束证据；本次发布与当前可用报表独立 | 不用步骤序号或数量100%推定发布，不把来源单数当SKU销量；待人工截图确认 | +| /self-operated/collection | 环图、阶段和结果 | 当前阶段ECharts环图与总量／完成／剩余共用区域；未知、零量、异常或变化分母撤去比例。出库五阶段、库存四阶段各自展示，阶段完成只依据同身份结束证据；本次发布与当前可用报表独立 | 不用步骤序号或数量100%推定发布，不把来源单数当SKU销量；待人工截图确认 | | /self-operated/collection | 阶段速度与预计时间 | 仅显示服务端当前阶段估算，向上取整为分钟；同时展示读取、推进、心跳时钟，阶段耗时不使用尝试总耗时替代 | ETA过期、读取失败、隐藏、计数不一致撤销估算；不可估算原因明确说明；不推算全任务ETA；待人工截图确认 | | /self-operated/collection | 历史与详情 | 历史压缩为操作、任务／范围、数据时间段、阶段进度、最近进展、执行／发布六列，默认10行。沿用1200px居中AppDialog及全屏，标题只出现一次完整任务号 | 无本仓尝试只显示摘要；执行记录和诊断默认折叠，尝试分页按需请求，轮询不重置分页；待人工截图确认 | | /self-operated/collection | 刷新与恢复 | 一个运行轮询器，活动／等待10秒、闲置60秒，隐藏和离页停止，恢复立即读；旧响应取消与身份校验。配置仍为独立只读弹框；恢复表单仅独立sync权限且allowedActions允许、无阻断时出现 | 状态更新失败保留观测数量、不判采集失败；恢复沿原RETRY及幂等确认，仅提示已排队；自动测试与人工视觉分别记录 | + +## Top10 展示与完整明细（2026-10-13 用户截图） + +用户最新截图要求图表底部操作移至卡片右上角并使用 link 按钮。出库趋势、库存分布和三榜统一标题栏；明细、分组说明、待评估原因及查看全部均使用文字链接，移除底部操作区及重复辅助说明。弹框宽度、根部挂载、刷新关闭与原下钻权限保持，长标题下操作区允许自然换行且右对齐；待人工1920×1080、100%截图确认。 + +| 页面／操作 | 截图与当前实现 | 本轮结论 | 验证 | +| --- | --- | --- | --- | +| 经营总览／两个库存榜单空榜原因 | 用户截图显示符合条件0、待评估2711／2741；用户要求修改后自行截图 | 在两个库存榜单内提供“采集覆盖与待评估原因”，沿用1040px居中ChartDetailsDialog；显示当前查询的仓库、覆盖区间、库存时间／状态及全仓库存分布原因计数，明确非两榜各自排除明细、只含首个命中原因；保持计算与下钻条件 | 不新增请求，不混入轮询版本；保留未知和历史提示，刷新关闭旧弹框；待人工1920×1080、100%截图确认 | + +| 页面／操作 | 截图与当前实现 | 本轮结论 | 验证 | +| --- | --- | --- | --- | +| 经营总览／排行榜 | 用户截图中长悬浮说明越界，标签拥挤；现为 ECharts 横条 | 保留 ECharts，压缩悬浮摘要、限制宽度并换行；名次独立强调、保留统一数值轴 | 待人工1920×1080、100%截图确认 | +| 经营总览／查看完整名称、数值与明细 | 当前为卡片内 details 展开；用户要求弹框 | 使用1040px居中 AppDialog，完整名称、数值、说明换行展示；下钻先关闭弹框，刷新数据关闭旧明细 | 自动交互回归；待人工截图确认 | +| 查看Top100／查看全部 | 当前跳转对应列表 | 保留原列表入口与筛选上下文，完整明细弹框仅展示当前图中的数据 | 原下钻合同不变 | + +| 经营总览／每日数值、库存分组原因、SKU趋势覆盖证据 | 用户要求移除图表后方的内嵌展开 | 改为根部挂载的居中 AppDialog：数值／证据1040px，分组说明760px；保留未知、覆盖原因和原日期下钻资格 | 定向测试通过；待人工截图确认 | +| 图表完整明细遮罩与定位 | 用户截图显示被卡片裁剪 | 所有新增图表弹框 append-to-body；不受卡片 transform 和滚动区域限制 | 待人工1920×1080、100%截图确认 | + +| 热销Top10／完整明细字段去重 | 用户截图中SKU、货主、出库量重复 | 热销专用1280px弹框表格，身份与各指标独立列，统计区间与覆盖提醒移至表头上方；其他榜单字段保留 | 同SKU不同货主、零／未知值、下钻回归；待人工截图确认 | diff --git a/src/modules/self-operated/pages/CollectionView.layout.test.ts b/src/modules/self-operated/pages/CollectionView.layout.test.ts index 85cb9e53..6409117b 100644 --- a/src/modules/self-operated/pages/CollectionView.layout.test.ts +++ b/src/modules/self-operated/pages/CollectionView.layout.test.ts @@ -1,5 +1,6 @@ +vi.mock('vue-echarts', () => ({ default: { name: 'VChart', props: ['option'], template: '' } })) import { mount } from '@vue/test-utils' -import { describe, expect, it } from 'vitest' +import { describe, expect, it, vi } from 'vitest' import CollectionAccountMonitor from '../components/CollectionAccountMonitor.vue' import type { Overview, WarehouseOverview } from '../types' diff --git a/src/modules/self-operated/pages/CollectionView.test.ts b/src/modules/self-operated/pages/CollectionView.test.ts index 815e2cb4..83319c6f 100644 --- a/src/modules/self-operated/pages/CollectionView.test.ts +++ b/src/modules/self-operated/pages/CollectionView.test.ts @@ -1,3 +1,4 @@ +vi.mock('vue-echarts', () => ({ default: { name: 'VChart', props: ['option'], template: '' } })) import { defineComponent, h, reactive } from 'vue' import { flushPromises, mount } from '@vue/test-utils' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' @@ -16,6 +17,16 @@ function page() { const w = mount(CollectionView, { global: { stubs: { AdminPage beforeEach(() => { vi.clearAllMocks(); mocks.allowed = true; mocks.route = reactive({ query: { warehouseCode: 'US01', taskNo: 'OLD-HISTORY' } }); mocks.overview.mockResolvedValue(overview) }) afterEach(() => { wrappers.splice(0).forEach(w => w.unmount()); vi.useRealTimers(); Object.defineProperty(document, 'hidden', { configurable: true, value: false }) }) describe('account-only collection page', () => { + it('keeps the last successful progress visible while a manual refresh is pending', async () => { + const w = page(); await flushPromises() + let finish!: (value: Overview) => void + mocks.overview.mockImplementationOnce(() => new Promise(resolve => { finish = resolve })) + await w.findAll('button').find(b => b.text().includes('刷新状态'))!.trigger('click') + expect(w.text()).toContain('12.1%') + expect(w.text()).toContain('2448') + finish(overview); await flushPromises() + expect(w.text()).toContain('12.1%') + }) it('ignores old warehouse/history links and only reads the account overview', async () => { const w = page(); await flushPromises() expect(mocks.overview.mock.calls[0]?.slice(0, 2)).toEqual(['lingxing-primary', undefined]) diff --git a/src/modules/self-operated/pages/OverviewView.test.ts b/src/modules/self-operated/pages/OverviewView.test.ts index 4a9eeaca..fe284706 100644 --- a/src/modules/self-operated/pages/OverviewView.test.ts +++ b/src/modules/self-operated/pages/OverviewView.test.ts @@ -1,3 +1,4 @@ +vi.mock('vue-echarts', () => ({ default: { name: 'VChart', props: ['option'], template: '' } })) import { defineComponent, h } from 'vue' import { flushPromises, mount } from '@vue/test-utils' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' @@ -14,7 +15,7 @@ vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ const passthrough = defineComponent({ setup(_, { slots }) { return () => h('div', slots.default?.()) } }) const query = defineComponent({ props: ['modelValue', 'fields'], emits: ['update:modelValue', 'search'], setup(_, { emit }) { return () => h('button', { onClick: () => emit('search') }, '查询') } }) const button = defineComponent({ props: ['disabled'], emits: ['click'], setup(props, { slots, emit }) { return () => h('button', { disabled: props.disabled, onClick: () => emit('click') }, slots.default?.()) } }) -const dialog = defineComponent({ props: ['modelValue', 'width'], emits: ['update:modelValue'], setup(props, { slots }) { return () => props.modelValue ? h('section', [h('button', { onClick: () => undefined }, '趋势弹框'), slots.default?.()]) : null } }) +const dialog = defineComponent({ props: ['modelValue', 'width', 'title', 'appendToBody'], emits: ['update:modelValue'], setup(props, { slots }) { return () => props.modelValue ? h('section', [h('button', { onClick: () => undefined }, '趋势弹框'), slots.default?.()]) : null } }) const error = defineComponent({ props: ['message'], setup(props) { return () => h('p', props.message) } }) const popover = defineComponent({ props: ['trigger', 'placement', 'title', 'width'], setup(_, { slots }) { return () => h('div', slots.reference?.()) } }) const options = { global: { directives: { loading: () => undefined }, stubs: { AdminPage: passthrough, QueryToolbar: query, AppDialog: dialog, LoadErrorState: error, ApiErrorMeta: true, SkuTrend: true, 'el-button': button, 'el-popover': popover, 'el-table-column': true, 'el-table': true, 'el-option': true, 'el-select': true } } } @@ -31,6 +32,19 @@ beforeEach(() => { }) afterEach(() => { wrappers.splice(0).forEach(wrapper => wrapper.unmount()); vi.useRealTimers(); vi.restoreAllMocks() }) describe('warehouse operating dashboard', () => { + it('offers coverage evidence for both inventory rankings even when they are empty', async () => { + const data = structuredClone(dashboardFixture) + data.longCoverageSkus = { ...data.longCoverageSkus, items: [], eligibleCount: '0', unassessableCount: '2711', dataStatus: 'PARTIAL' } + data.noOutboundSkus = { ...data.noOutboundSkus, items: [], eligibleCount: '0', unassessableCount: '2741', dataStatus: 'PARTIAL' } + mocks.dashboard.mockResolvedValue(data) + const wrapper = page(); await choose(wrapper, { warehouseCode: 'WH-A' }) + expect(wrapper.findAll('.dashboard-chart-actions button').filter(node => node.text() === '待评估原因')).toHaveLength(2) + await findButton(wrapper, '待评估原因').trigger('click'); await flushPromises() + expect(wrapper.text()).toContain('全仓库存分布的待核验原因') + expect(wrapper.text()).toContain('待评估 2711 SKU') + expect(wrapper.text()).toContain('待评估 2741 SKU') + expect(mocks.dashboard).toHaveBeenCalledOnce() + }) it('uses one date range field, blocks incomplete ranges and clears obsolete validation errors', async () => { const wrapper = page(); await choose(wrapper, { warehouseCode: 'WH-A', rangePreset: 'CUSTOM' }) const toolbar = wrapper.findComponent(query) @@ -201,8 +215,9 @@ describe('warehouse operating dashboard', () => { const wrapper = page(); await choose(wrapper, { warehouseCode: 'WH-A' }) wrapper.findAllComponents(DashboardBars)[1]!.vm.$emit('select', '1'); await flushPromises() expect(mocks.daily.mock.calls[0]?.[0]).toMatchObject({ customerCode: 'OWNER-B', sku: 'SKU-X', rangePreset: 'CUSTOM', startDate: '2026-09-13', endDate: '2026-10-12', salesRunId: '11' }) - expect(wrapper.findComponent(dialog).props('width')).toBe('1120px') - wrapper.findComponent(dialog).vm.$emit('update:modelValue', false); await flushPromises() + expect(wrapper.findAllComponents(dialog).find(item => item.props('title') === 'SKU每日出库趋势')!.props('width')).toBe('1120px') + for (const modal of wrapper.findAllComponents(dialog)) expect(modal.props('appendToBody')).not.toBeUndefined() + wrapper.findAllComponents(dialog).find(item => item.props('title') === 'SKU每日出库趋势')!.vm.$emit('update:modelValue', false); await flushPromises() finish({ context: dashboardFixture.context, summary: { ...dashboardFixture.salesTrend.summary, sku: 'LATE-SKU' }, points: [] }); await flushPromises() expect(mocks.daily.mock.calls[0]?.[1].aborted).toBe(true) expect(wrapper.text()).not.toContain('LATE-SKU') @@ -234,10 +249,11 @@ describe('warehouse operating dashboard', () => { wrapper.findAllComponents(DashboardBars)[0]!.vm.$emit('select', 'DAYS_GT_90'); await flushPromises() expect(mocks.push.mock.calls.at(-1)?.[0]).toMatchObject({ path: '/self-operated/inventory', query: { coverageBucket: 'DAYS_GT_90', bucketRuleVersion: 'COVERAGE_DISTRIBUTION_V1', from: 'overview' } }) const chart = wrapper.findComponent(DashboardTrend) - await chart.findAll('g')[1]!.trigger('keydown', { key: 'Enter' }) + await chart.find('.chart-disclosure button').trigger('click') + await chart.findAll('tbody button')[1]!.trigger('click') expect(mocks.push).toHaveBeenCalledTimes(1) expect(chart.text()).toContain('销量未覆盖') - await chart.findAll('g')[0]!.trigger('keydown', { key: 'Enter' }) + await chart.findAll('tbody button')[0]!.trigger('click') expect(mocks.push.mock.calls.at(-1)?.[0].query).toMatchObject({ analysis: 'SKU', rangePreset: 'CUSTOM', startDate: '2026-10-10', endDate: '2026-10-10' }) await findButton(wrapper, '查看Top100').trigger('click') expect(mocks.push.mock.calls.at(-1)?.[0].query).toMatchObject({ analysis: 'HOT', rangePreset: 'CUSTOM', startDate: '2026-09-13', endDate: '2026-10-12' }) diff --git a/src/modules/self-operated/pages/OverviewView.vue b/src/modules/self-operated/pages/OverviewView.vue index 02a022ac..d107c069 100644 --- a/src/modules/self-operated/pages/OverviewView.vue +++ b/src/modules/self-operated/pages/OverviewView.vue @@ -15,6 +15,9 @@ import { analyticsApi } from '../api/analytics' import type { Dashboard, DashboardItem, DashboardRanking, DailyResponse, DashboardQuery, Overview, QueryContext, RangePreset } from '../types' import { beijingTime, contextParams, label, quantityText, reasonsText, RequestFence, RuntimePoller, sameContext, validateCustomRange } from '../state' import { buckets, expired, inventoryExpired, parseContext, parseOverviewReturn, previousDate, rangeOptions, type OverviewReturn } from '../dashboardNavigation' +import HotSkuDetails from '../components/HotSkuDetails.vue' +import InventoryRankingDiagnostics from '../components/InventoryRankingDiagnostics.vue' +import ChartDetailsDialog from '../components/ChartDetailsDialog.vue' import DashboardBars, { type BarRow } from '../components/DashboardBars.vue' import DashboardTrend from '../components/DashboardTrend.vue' import SkuTrend from '../components/SkuTrend.vue' @@ -197,14 +200,42 @@ onUnmounted(() => { dataFence.cancel(); trendFence.cancel(); poller.stop(); clea
{{ phaseText(progress?.phase) }} · {{ scope }} · 第 {{ progress.scanRound }} 轮
-- 总量
- {{ progress?.totalKnown ? quantityText(progress.total) : '待确认' }} {{ unitText(progress?.unit) }}
- 已完成
- {{ quantityText(progress?.completed) }} {{ unitText(progress?.unit) }}
- 剩余
- {{ counts ? counts.remaining : '—' }} {{ unitText(progress?.unit) }}
- 总量
- {{ progress?.totalKnown ? quantityText(progress.total) : compact ? '—' : '待确认' }} {{ compact && (!progress?.unit || progress.unit === 'NONE') ? '' : unitText(progress?.unit) }}
- 已完成
- {{ quantityText(progress?.completed) }} {{ compact && (!progress?.unit || progress.unit === 'NONE') ? '' : unitText(progress?.unit) }}
- 剩余
- {{ counts ? counts.remaining : '—' }} {{ compact && (!progress?.unit || progress.unit === 'NONE') ? '' : unitText(progress?.unit) }}
总量发生变化，正在复核；暂不展示比例。
-{{ progress?.totalKnown && Number(progress.total) === 0 ? '本阶段数量为零；是否完成以阶段及发布证据为准。' : '总量或计数依据待确认，不估算完成比例。' }}
+{{ readingDirectory ? '目录总页数尚未返回，已读取数量见“已完成”。' : progress?.totalKnown && Number(progress.total) === 0 ? '本阶段数量为零；是否完成以阶段及发布证据为准。' : '总量或计数依据待确认，不估算完成比例。' }}
+来源账号的阶段数量，不能当作本仓出库量或整个同步完成率。
当前切片：{{ beijingTime(progress?.sliceFrom) }} 至 {{ beijingTime(progress?.sliceUntil) }}（结束边界不含）
+
+
+
diff --git a/src/modules/self-operated/components/DashboardCharts.test.ts b/src/modules/self-operated/components/DashboardCharts.test.ts
index 865f2a33..06d82946 100644
--- a/src/modules/self-operated/components/DashboardCharts.test.ts
+++ b/src/modules/self-operated/components/DashboardCharts.test.ts
@@ -1,5 +1,7 @@
+vi.mock('@/shared/components/AppDialog.vue', () => ({ default: { props: ['modelValue', 'title', 'appendToBody'], template: '{{ title }}
+{{ title }}
-
+
+
+
+.dashboard-trend { width: 100%; height: 340px; }
+.trend-legend { color: var(--el-text-color-secondary); font-size: var(--admin-font-caption); }
+td button { font: inherit; color: var(--el-color-primary); background: transparent; border: 0; cursor: pointer; padding: var(--admin-space-2); }
+td button:disabled { color: var(--el-text-color-secondary); cursor: default; }
+
\ No newline at end of file
diff --git a/src/modules/self-operated/components/HotSkuDetails.test.ts b/src/modules/self-operated/components/HotSkuDetails.test.ts
new file mode 100644
index 00000000..b50d198a
--- /dev/null
+++ b/src/modules/self-operated/components/HotSkuDetails.test.ts
@@ -0,0 +1,19 @@
+import { mount } from '@vue/test-utils'
+import { expect, it } from 'vitest'
+import HotSkuDetails from './HotSkuDetails.vue'
+import type { DashboardRanking, DashboardItem } from '../types'
+it('shows each SKU identity and ranked quantity once, preserves unknown and owner-specific drilldown', async () => {
+ const item: DashboardItem = { sku: 'SKU-X', customerCode: 'OWNER-A', productName: 'SKU-X 商品', value: 164, physicalQuantity: 891, availableQuantity: 0, averageDailyOutboundQuantity: null, inventoryCoverageDays: null, unit: 'PCS', windowOutboundQuantity: 164, skuOutboundOrderCount: 1, frozenQuantity: 0, defectivePhysicalQuantity: 0 }
+ const ranking: DashboardRanking = { windowStartDate: '2026-10-01', windowEndDateExclusive: '2026-10-14', calculationWindowDays: 13, eligibleCount: 2, unassessableCount: 0, dataStatus: 'PARTIAL', reasonCodes: [], items: [item, { ...item, customerCode: 'OWNER-B', productName: 'SKU-X' }] }
+ const wrapper = mount(HotSkuDetails, { props: { ranking } })
+ const cells = wrapper.findAll('tbody tr')[0]!.findAll('td').map(cell => cell.text())
+ expect(cells).toEqual(['1', 'SKU-X', '商品', 'OWNER-A', '164', '891', '0', '—', '—'])
+ expect(wrapper.findAll('tbody tr')[1]!.findAll('td')[2]!.text()).toBe('—')
+ expect(wrapper.text()).toContain('时段已采集出库量')
+ await wrapper.findAll('button')[1]!.trigger('click')
+ expect(wrapper.emitted('select')).toEqual([[1]])
+ await wrapper.setProps({ disabled: true })
+ await wrapper.findAll('button')[0]!.trigger('click')
+ expect(wrapper.emitted('select')).toHaveLength(1)
+ wrapper.unmount()
+})
diff --git a/src/modules/self-operated/components/HotSkuDetails.vue b/src/modules/self-operated/components/HotSkuDetails.vue
new file mode 100644
index 00000000..b92f4b9b
--- /dev/null
+++ b/src/modules/self-operated/components/HotSkuDetails.vue
@@ -0,0 +1,30 @@
+
+
+ 完整日未完整日× 未知 · 缺失日期断线今日为已采集累计
-
- {{ text(focused) }}
-所选日期暂无可靠出库资料，未知不按零显示。
-查看每日数值与覆盖原因
| 日期 | 正式量 | 已采集量 | 状态 | 原因 |
|---|---|---|---|---|
| {{ point.businessDate }} | {{ quantityText(point.outboundQuantity) }} | {{ quantityText(point.observedQuantity) }} | {{ label(point.dataStatus) }} | {{ reasonsText(point.reasonCodes) }} |
| 日期（点击查看） | 正式量 | 已采集量 | 状态 | 原因 |
|---|---|---|---|---|
| {{ quantityText(point.outboundQuantity) }} | {{ quantityText(point.observedQuantity) }} | {{ label(point.dataStatus) }} | {{ reasonsText(point.reasonCodes) }} |
实线／实心点：完整日 · 虚线／空心点：未完整日 · 未知及缺失日期断线；今日为已采集累计
+所选日期暂无可靠出库资料，未知不按零显示。
+
+
+
+
+
diff --git a/src/modules/self-operated/components/InventoryRankingDiagnostics.test.ts b/src/modules/self-operated/components/InventoryRankingDiagnostics.test.ts
new file mode 100644
index 00000000..601aaff0
--- /dev/null
+++ b/src/modules/self-operated/components/InventoryRankingDiagnostics.test.ts
@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import InventoryRankingDiagnostics from './InventoryRankingDiagnostics.vue'
+import { dashboardFixture } from '../pages/dashboard.fixture'
+
+describe('inventory ranking evidence', () => {
+ it('shows fixed-query coverage and keeps distribution counts distinct from ranking counts', () => {
+ const data = structuredClone(dashboardFixture)
+ Object.assign(data.context, { completeDayFrom: '2026-10-01', completeDayUntil: '2026-10-13', salesCoveredFrom: '2026-09-30T16:00:00Z', salesCoveredUntil: '2026-10-12T16:00:00Z', inventoryStatus: 'VALID' })
+ data.longCoverageSkus.unassessableCount = '2711'
+ data.noOutboundSkus.unassessableCount = '2741'
+ data.coverageDistribution.unknownReasons = { SALES_WINDOW_UNAVAILABLE: '2700', OBSERVATION_INSUFFICIENT: '11', PHYSICAL_INVENTORY_UNKNOWN: '0' }
+ const wrapper = mount(InventoryRankingDiagnostics, { props: { data, warehouse: '测试仓', historical: false } })
+ expect(wrapper.text()).toContain('2026-10-01 至 2026-10-13（截止日不含）')
+ expect(wrapper.text()).toContain('2026/10/01 00:00:00')
+ expect(wrapper.text()).toContain('待评估 2711 SKU')
+ expect(wrapper.text()).toContain('待评估 2741 SKU')
+ expect(wrapper.text()).toContain('不是两个榜单各自的排除明细')
+ expect(wrapper.text()).toContain('每个SKU仅列首个命中的原因')
+ expect(wrapper.text()).toContain('仅补齐窗口内销量不一定满足此条件')
+ expect(wrapper.text()).not.toContain('实物库存待核验')
+ })
+ it('preserves unknown counts and marks stale evidence without claiming complete data', () => {
+ const data = structuredClone(dashboardFixture)
+ data.longCoverageSkus.unassessableCount = null
+ data.coverageDistribution.unknownReasons = { OBSERVATION_INSUFFICIENT: null }
+ const wrapper = mount(InventoryRankingDiagnostics, { props: { data, warehouse: '测试仓', historical: true } })
+ expect(wrapper.text()).toContain('待评估 — SKU')
+ expect(wrapper.text()).toContain('尚无可确认的完整日覆盖范围')
+ expect(wrapper.text()).toContain('当前为历史查询结果')
+ expect(wrapper.findAll('table')[1]!.text()).toContain('观察期不足—')
+ })
+ it('does not interpret absent cause counts as proof that data is complete', () => {
+ const data = structuredClone(dashboardFixture)
+ data.coverageDistribution.unknownReasons = {}
+ const wrapper = mount(InventoryRankingDiagnostics, { props: { data, warehouse: '测试仓', historical: false } })
+ expect(wrapper.text()).toContain('不能据此认定资料全部齐备')
+ })
+})
diff --git a/src/modules/self-operated/components/InventoryRankingDiagnostics.vue b/src/modules/self-operated/components/InventoryRankingDiagnostics.vue
new file mode 100644
index 00000000..288f34fc
--- /dev/null
+++ b/src/modules/self-operated/components/InventoryRankingDiagnostics.vue
@@ -0,0 +1,49 @@
+
+
+ {{ ranking.windowStartDate }} 至 {{ ranking.windowEndDateExclusive }}（截止日不含） · {{ label(ranking.dataStatus) }} · {{ reasonsText(ranking.reasonCodes) }}
+按所选时段{{ ranking.dataStatus === 'COMPLETE' ? '出库量' : '已采集出库量' }}排名；点击 SKU 查看每日趋势。数据尚未采齐，排名可能变化；未采集日期不计为零出库。“—”表示暂无可靠数据。
+| 排名 | SKU | 商品名称 | 货主 | {{ ranking.dataStatus === 'COMPLETE' ? '时段出库量' : '时段已采集出库量' }}（件） | 实物库存（件） | 可售库存（件） | 窗口日均（件） | 预计可售（天） |
|---|---|---|---|---|---|---|---|---|
| {{ index + 1 }} | {{ productName(item.sku, item.productName) }} | {{ item.customerCode }} | {{ quantityText(item.value) }} | {{ quantityText(item.physicalQuantity) }} | {{ quantityText(item.availableQuantity) }} | {{ quantityText(item.averageDailyOutboundQuantity) }} | {{ quantityText(item.inventoryCoverageDays) }} |
+
+
+
+
+
+
+
+
diff --git a/src/modules/self-operated/components/SkuTrend.test.ts b/src/modules/self-operated/components/SkuTrend.test.ts
new file mode 100644
index 00000000..92eafc20
--- /dev/null
+++ b/src/modules/self-operated/components/SkuTrend.test.ts
@@ -0,0 +1,39 @@
+vi.mock('@/shared/components/AppDialog.vue', () => ({ default: { props: ['modelValue'], template: '{{ warehouse || '—' }} · 查询时间 {{ beijingTime(data.context.queryAsOf) }}（北京时间）
+当前为历史查询结果，请整体刷新后再核对最新采集覆盖。
+| 榜单要求的销量区间 | {{ data.longCoverageSkus.windowStartDate }} 至 {{ data.longCoverageSkus.windowEndDateExclusive }}（截止日不含） | |
|---|---|---|
| 已发布销量覆盖 | {{ beijingTime(data.context.salesCoveredFrom) }} 至 {{ beijingTime(data.context.salesCoveredUntil) }}（截止时刻不含） | |
| 完整日覆盖 | {{ data.context.completeDayFrom }} 至 {{ data.context.completeDayUntil }}（截止日不含） | 尚无可确认的完整日覆盖范围 |
| 销量状态 | {{ label(data.context.salesStatus) }}；近30日日均：{{ label(data.kpis.averageDailyOutboundQuantity30d.dataStatus) }} · {{ reasonsText(data.kpis.averageDailyOutboundQuantity30d.reasonCodes) }} | |
| 库存采集时间 | {{ beijingTime(data.context.inventoryObservedFrom) }} 至 {{ beijingTime(data.context.inventoryObservedUntil) }} | |
| 库存状态／有效期 | {{ label(data.context.inventoryStatus) }}；有效至 {{ beijingTime(data.context.inventoryFreshUntil) }} | |
| 本次查询提示 | {{ reasonsText(data.context.reasonCodes) }} | |
| 预计消化时间最长 | 符合条件 {{ quantityText(data.longCoverageSkus.eligibleCount) }} SKU；待评估 {{ quantityText(data.longCoverageSkus.unassessableCount) }} SKU | |
| 近30日无出库库存 | 符合条件 {{ quantityText(data.noOutboundSkus.eligibleCount) }} SKU；待评估 {{ quantityText(data.noOutboundSkus.unassessableCount) }} SKU |
全仓库存分布的待核验原因
+以下为全仓库存分布的原因计数，不是两个榜单各自的排除明细。每个SKU仅列首个命中的原因，补齐后仍可能有其他条件待满足。
+| 原因 | SKU数 | 需要核对的数据 |
|---|---|---|
| {{ reasonsText([reason]) }} | {{ quantityText(count) }} | {{ explanations[reason] || '接口未提供更细说明，请核对库存分析中的SKU资料。' }} |
本次查询未列出非零的具体原因计数，不能据此认定资料全部齐备。
+消化榜还要求正可售库存且日均出库大于零；无出库榜要求正实物库存且完整窗口出库为零。两榜均需满足本仓观察资格；未知销量不能按零处理。
+{{ data.summary.sku }} · 每日出库趋势
所属货主：{{ data.summary.customerCode || '—' }} · {{ data.summary.productName || '—' }}
{{ data.summary.dataStatus === 'COMPLETE' ? '完整出库量' : '已采集出库量' }}：{{ quantityText(shownQuantity(data.summary)) }} {{ data.summary.quantityUnit === 'PCS' ? '件' : '单位未知' }}；{{ label(data.summary.dataStatus) }}。今日为已采集累计。
-所选范围尚无可靠数据，未知日期不作为零销量。
- -
-
-
+
每日数量、完整性及覆盖证据
+所选范围尚无可靠数据，未知日期不作为零销量。
+实线／实心点：完整日 · 虚线／空心点：未完整日 · 空缺：未知，缺失日期断线
+| 北京时间日期 | 完整出库量 | 已采集量 | 状态 | 覆盖截止 | 缺口原因 |
|---|---|---|---|---|---|
| {{ point.businessDate }} | {{ quantityText(point.outboundQuantity) }} | {{ quantityText(point.observedQuantity) }} | {{ label(point.dataStatus) }} | {{ point.coveredUntil ?? '—' }} | {{ reasonsText(point.reasonCodes) }} |
${row.secondary ? `${escapeHtml(row.secondary)}
` : ''}${escapeHtml(quantityText(row.value))} ${escapeHtml(unit)}` : '' + } }, + aria: { enabled: true, description: `${title}，横轴为${unit}。未知不作为零值；详细数据和键盘操作在下方完整明细弹框。` }, + series: [{ type: 'bar', barMaxWidth: ranked ? 14 : 18, data: rows.map((row, index) => ({ value: row.value == null ? null : Number(row.value), itemStyle: { color: palette[ranked ? 0 : index % palette.length], borderRadius: [0, 4, 4, 0] } })), + label: { show: true, position: 'right', formatter: params => quantityText(rows[params.dataIndex]?.value) } }], + } +} +export function progressGaugeOption(percent: number | null): EChartsOption { + return { animation: false, series: [{ type: 'gauge', startAngle: 90, endAngle: -270, radius: '86%', min: 0, max: 100, + pointer: { show: false }, progress: { show: percent != null, roundCap: true, width: 10 }, + axisLine: { lineStyle: { width: 10, color: [[1, '#e8eaf5']] } }, itemStyle: { color: '#6879ee' }, + axisTick: { show: false }, splitLine: { show: false }, axisLabel: { show: false }, title: { show: false }, detail: { show: false }, + silent: true, data: percent == null ? [] : [{ value: percent }], + }] } +} diff --git a/src/modules/self-operated/operation-matrix.md b/src/modules/self-operated/operation-matrix.md index 0e8421cc..f488b7fa 100644 --- a/src/modules/self-operated/operation-matrix.md +++ b/src/modules/self-operated/operation-matrix.md @@ -4,11 +4,15 @@ | 页面 | 操作 | 依据与承载结论 | 布局与验证 | | --- | --- | --- | --- | +| 自营业务全部图表 | 统一ECharts | 2026-10-13 用户要求全面替换手写图表：经营总览日趋势、库存七桶与三个榜单、SKU日趋势、采集进度环统一通过AnalyticsChart使用ECharts Canvas；移除SVG路径生成与CSS条形绘图，保留真实数量、未知／零区分及原有下钻边界 | 日期点／分类轴／柱体点击及展开表格键盘操作同资格；未知进度仅空环；坐标、tooltip、缩放及尺寸由组件配置；待人工1920×1080、100%截图确认 | +| 库存／销量 | SKU每日出库趋势连线与坐标 | 2026-10-13 用户反馈线未连接、坐标不显示，并明确要求图表组件：保留居中弹框，改用ECharts＋vue-echarts（Canvas），配置日期轴、数量轴、网格、提示框、图例说明和范围缩放；相邻有效日连接，涉及未完整日用虚线，未知或缺失日期断线 | 库存／销量／总览的SKU弹框共用组件；总览主图的连线修复同步回归；不把未知补零；待人工1920×1080、100%截图确认 | +| /self-operated/collection | 看板配色 | 2026-10-13 用户追加当前页面与原型首页截图：采用蓝紫主色、浅色圆形装饰数量卡、绿／橙数量强调；流程与仓库结果增加色彩层次，保持原有左右布局及真实状态文字 | 仅本看板作用域内应用；颜色不代替状态或代表未知完成度；待人工1920×1080、100%截图确认 | +| /self-operated/collection | 等待提示与刷新稳定性 | 2026-10-13 用户两张运行看板截图：移除环图上方临时插入的等待说明，原因合并到下方估算说明区；未知总量以“—”及目录总页数未返回说明展示；刷新保留已读数据，同任务优先使用账号活动摘要 | 数量说明预留一行，避免已知／未知切换挤动数字；阶段或尝试变化不沿用旧百分比；待人工1920×1080、100%截图确认 | | /self-operated/collection | 单账号运行首屏 | 2026-10-13 最新实际页面及原型截图：首屏改为账号活动优先，环形进度、总量／完成／剩余及阶段预计时间；移除原筛选、配置、历史、详情和恢复表单，只读账号概览；待机保留阶段、最近发布及各仓结果 | 按用户原型排版，使用现有 Admin 白色卡片、主题强调色及统一按钮，无详情弹框；本行覆盖下方旧采集页面承载记录；后续流程不冒充调度顺序，有界待处理摘要不冒充完整队列；待人工1920×1080、100%截图确认 | | 销量／库存 | 默认仓库与重置 | 2026-10-13 用户确认进入页面即按仓库显示：无传入仓库时自动选中接口返回的首个可用仓库并查询；链接带入仓库优先；重置保留当前仓库并重新查询 | 保留切仓与迟到响应隔离；没有可用仓库不发无仓库查询；自动回归覆盖两页首次进入、链接进入、缓存页返回及重置 | | /self-operated/sales | 自定义销量日期 | 2026-10-13 用户截图 `codex-clipboard-fac03bb1-6703-467d-b357-5731ea8cfb32.png`：两个单日框分散换行，未完整选择时残留逆序错误和旧结果。原筛选区改为公共QueryToolbar单一日期范围控件，明确开始／结束日期，支持同日；不新增浮层或改变统计口径 | 日期范围整体换行，校验完整范围后查询；草稿修改不改变已查询列表的分页／趋势条件，提交失败不冒充新范围结果；补充自动回归，待人工1920×1080、100%截图确认 | | /self-operated/overview | 查询、刷新与六项指标 | `docs/自营业务/经营总览图表设计.md`“菜单与页面布局”“指标带”；单仓＋趋势日期QueryToolbar、紧凑指标带，整体固定版本 | 不新增货主控件；未知／过期独立提示；待人工1920×1080截图确认 | -| /self-operated/overview | 日趋势、七桶与三个Top10 | 同设计“五张图表”；SVG折线与横条、趋势约2/3宽、分布约1/3宽，三榜并排 | 热销随时间筛选按已采集量排名并提示覆盖不足；可聚焦提示、缺日断线、部分日文字、真实数值比例；待人工截图确认 | +| /self-operated/overview | 日趋势、七桶与三个Top10 | 同设计“五张图表”；ECharts折线与横条、趋势约2/3宽、分布约1/3宽，三榜并排 | 热销随时间筛选按已采集量排名并提示覆盖不足；可聚焦提示、缺日断线、部分日文字、真实数值比例；待人工截图确认 | | /self-operated/overview | SKU趋势 | 同设计“图表交互与视觉依据”；1120px居中AppDialog，热销沿所选时段、其它榜沿固定30日，精确货主SKU | 关闭取消请求，不改现有详情承载；待人工截图确认 | | 总览→销量／库存 | 日期／榜单／分桶下钻与返回 | 同设计“精确下钻合同”；目标页验证完整版本、精确筛选及互斥，显示可清除来源摘要，固定本地返回 | 库存时效到期阻止严格下钻；返回恢复趋势范围、版本、滚动；待人工截图确认 | | /self-operated/sales | 仓库、SKU、日期／榜单查询及分页 | 当前截图：货主控件分散筛选；本轮冻结为单一紧凑筛选区，仓库明确提示必须选择，SKU为主 | 复用 AdminPage、QueryToolbar、DataTable、高密度样式；日期／榜单切换和分页保持版本；待人工截图确认 | @@ -58,7 +62,26 @@ | --- | --- | --- | --- | | /self-operated/collection | 查询与完整任务号定位 | 原 QueryToolbar 增加采集内容与完整任务号；按仓库直接读取受权限约束的任务详情，同步 `warehouseCode,taskNo`，不靠翻历史列表定位 | 不跨权限搜索；不存在、权限拒绝、首次读取失败沿服务端错误呈现；待人工1920×1080、100%截图确认 | | /self-operated/collection | 当前关注与活动切换 | 筛选区下先展示关注任务及完整编号；默认只选服务端 `activeTasks`，手动选择和历史任务持续保留，提供返回当前活动；账号其他活动单列，不借作本任务来源 | 已确认 `progressSourceTaskNo` 才消费对应共享上游；来源数量不跨仓累加；待人工截图确认 | -| /self-operated/collection | 环图、阶段和结果 | 当前阶段SVG环图与总量／完成／剩余共用区域；未知、零量、异常或变化分母撤去比例。出库五阶段、库存四阶段各自展示，阶段完成只依据同身份结束证据；本次发布与当前可用报表独立 | 不用步骤序号或数量100%推定发布，不把来源单数当SKU销量；待人工截图确认 | +| /self-operated/collection | 环图、阶段和结果 | 当前阶段ECharts环图与总量／完成／剩余共用区域；未知、零量、异常或变化分母撤去比例。出库五阶段、库存四阶段各自展示，阶段完成只依据同身份结束证据；本次发布与当前可用报表独立 | 不用步骤序号或数量100%推定发布，不把来源单数当SKU销量；待人工截图确认 | | /self-operated/collection | 阶段速度与预计时间 | 仅显示服务端当前阶段估算，向上取整为分钟；同时展示读取、推进、心跳时钟，阶段耗时不使用尝试总耗时替代 | ETA过期、读取失败、隐藏、计数不一致撤销估算；不可估算原因明确说明；不推算全任务ETA；待人工截图确认 | | /self-operated/collection | 历史与详情 | 历史压缩为操作、任务／范围、数据时间段、阶段进度、最近进展、执行／发布六列，默认10行。沿用1200px居中AppDialog及全屏，标题只出现一次完整任务号 | 无本仓尝试只显示摘要；执行记录和诊断默认折叠，尝试分页按需请求，轮询不重置分页；待人工截图确认 | | /self-operated/collection | 刷新与恢复 | 一个运行轮询器，活动／等待10秒、闲置60秒，隐藏和离页停止，恢复立即读；旧响应取消与身份校验。配置仍为独立只读弹框；恢复表单仅独立sync权限且allowedActions允许、无阻断时出现 | 状态更新失败保留观测数量、不判采集失败；恢复沿原RETRY及幂等确认，仅提示已排队；自动测试与人工视觉分别记录 | + +## Top10 展示与完整明细（2026-10-13 用户截图） + +用户最新截图要求图表底部操作移至卡片右上角并使用 link 按钮。出库趋势、库存分布和三榜统一标题栏；明细、分组说明、待评估原因及查看全部均使用文字链接，移除底部操作区及重复辅助说明。弹框宽度、根部挂载、刷新关闭与原下钻权限保持，长标题下操作区允许自然换行且右对齐；待人工1920×1080、100%截图确认。 + +| 页面／操作 | 截图与当前实现 | 本轮结论 | 验证 | +| --- | --- | --- | --- | +| 经营总览／两个库存榜单空榜原因 | 用户截图显示符合条件0、待评估2711／2741；用户要求修改后自行截图 | 在两个库存榜单内提供“采集覆盖与待评估原因”，沿用1040px居中ChartDetailsDialog；显示当前查询的仓库、覆盖区间、库存时间／状态及全仓库存分布原因计数，明确非两榜各自排除明细、只含首个命中原因；保持计算与下钻条件 | 不新增请求，不混入轮询版本；保留未知和历史提示，刷新关闭旧弹框；待人工1920×1080、100%截图确认 | + +| 页面／操作 | 截图与当前实现 | 本轮结论 | 验证 | +| --- | --- | --- | --- | +| 经营总览／排行榜 | 用户截图中长悬浮说明越界，标签拥挤；现为 ECharts 横条 | 保留 ECharts，压缩悬浮摘要、限制宽度并换行；名次独立强调、保留统一数值轴 | 待人工1920×1080、100%截图确认 | +| 经营总览／查看完整名称、数值与明细 | 当前为卡片内 details 展开；用户要求弹框 | 使用1040px居中 AppDialog，完整名称、数值、说明换行展示；下钻先关闭弹框，刷新数据关闭旧明细 | 自动交互回归；待人工截图确认 | +| 查看Top100／查看全部 | 当前跳转对应列表 | 保留原列表入口与筛选上下文，完整明细弹框仅展示当前图中的数据 | 原下钻合同不变 | + +| 经营总览／每日数值、库存分组原因、SKU趋势覆盖证据 | 用户要求移除图表后方的内嵌展开 | 改为根部挂载的居中 AppDialog：数值／证据1040px，分组说明760px；保留未知、覆盖原因和原日期下钻资格 | 定向测试通过；待人工截图确认 | +| 图表完整明细遮罩与定位 | 用户截图显示被卡片裁剪 | 所有新增图表弹框 append-to-body；不受卡片 transform 和滚动区域限制 | 待人工1920×1080、100%截图确认 | + +| 热销Top10／完整明细字段去重 | 用户截图中SKU、货主、出库量重复 | 热销专用1280px弹框表格，身份与各指标独立列，统计区间与覆盖提醒移至表头上方；其他榜单字段保留 | 同SKU不同货主、零／未知值、下钻回归；待人工截图确认 | diff --git a/src/modules/self-operated/pages/CollectionView.layout.test.ts b/src/modules/self-operated/pages/CollectionView.layout.test.ts index 85cb9e53..6409117b 100644 --- a/src/modules/self-operated/pages/CollectionView.layout.test.ts +++ b/src/modules/self-operated/pages/CollectionView.layout.test.ts @@ -1,5 +1,6 @@ +vi.mock('vue-echarts', () => ({ default: { name: 'VChart', props: ['option'], template: '' } })) import { mount } from '@vue/test-utils' -import { describe, expect, it } from 'vitest' +import { describe, expect, it, vi } from 'vitest' import CollectionAccountMonitor from '../components/CollectionAccountMonitor.vue' import type { Overview, WarehouseOverview } from '../types' diff --git a/src/modules/self-operated/pages/CollectionView.test.ts b/src/modules/self-operated/pages/CollectionView.test.ts index 815e2cb4..83319c6f 100644 --- a/src/modules/self-operated/pages/CollectionView.test.ts +++ b/src/modules/self-operated/pages/CollectionView.test.ts @@ -1,3 +1,4 @@ +vi.mock('vue-echarts', () => ({ default: { name: 'VChart', props: ['option'], template: '' } })) import { defineComponent, h, reactive } from 'vue' import { flushPromises, mount } from '@vue/test-utils' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' @@ -16,6 +17,16 @@ function page() { const w = mount(CollectionView, { global: { stubs: { AdminPage beforeEach(() => { vi.clearAllMocks(); mocks.allowed = true; mocks.route = reactive({ query: { warehouseCode: 'US01', taskNo: 'OLD-HISTORY' } }); mocks.overview.mockResolvedValue(overview) }) afterEach(() => { wrappers.splice(0).forEach(w => w.unmount()); vi.useRealTimers(); Object.defineProperty(document, 'hidden', { configurable: true, value: false }) }) describe('account-only collection page', () => { + it('keeps the last successful progress visible while a manual refresh is pending', async () => { + const w = page(); await flushPromises() + let finish!: (value: Overview) => void + mocks.overview.mockImplementationOnce(() => new Promise(resolve => { finish = resolve })) + await w.findAll('button').find(b => b.text().includes('刷新状态'))!.trigger('click') + expect(w.text()).toContain('12.1%') + expect(w.text()).toContain('2448') + finish(overview); await flushPromises() + expect(w.text()).toContain('12.1%') + }) it('ignores old warehouse/history links and only reads the account overview', async () => { const w = page(); await flushPromises() expect(mocks.overview.mock.calls[0]?.slice(0, 2)).toEqual(['lingxing-primary', undefined]) diff --git a/src/modules/self-operated/pages/OverviewView.test.ts b/src/modules/self-operated/pages/OverviewView.test.ts index 4a9eeaca..fe284706 100644 --- a/src/modules/self-operated/pages/OverviewView.test.ts +++ b/src/modules/self-operated/pages/OverviewView.test.ts @@ -1,3 +1,4 @@ +vi.mock('vue-echarts', () => ({ default: { name: 'VChart', props: ['option'], template: '' } })) import { defineComponent, h } from 'vue' import { flushPromises, mount } from '@vue/test-utils' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' @@ -14,7 +15,7 @@ vi.mock('@/core/access/accessPreview', () => ({ useAccessPreviewStore: () => ({ const passthrough = defineComponent({ setup(_, { slots }) { return () => h('div', slots.default?.()) } }) const query = defineComponent({ props: ['modelValue', 'fields'], emits: ['update:modelValue', 'search'], setup(_, { emit }) { return () => h('button', { onClick: () => emit('search') }, '查询') } }) const button = defineComponent({ props: ['disabled'], emits: ['click'], setup(props, { slots, emit }) { return () => h('button', { disabled: props.disabled, onClick: () => emit('click') }, slots.default?.()) } }) -const dialog = defineComponent({ props: ['modelValue', 'width'], emits: ['update:modelValue'], setup(props, { slots }) { return () => props.modelValue ? h('section', [h('button', { onClick: () => undefined }, '趋势弹框'), slots.default?.()]) : null } }) +const dialog = defineComponent({ props: ['modelValue', 'width', 'title', 'appendToBody'], emits: ['update:modelValue'], setup(props, { slots }) { return () => props.modelValue ? h('section', [h('button', { onClick: () => undefined }, '趋势弹框'), slots.default?.()]) : null } }) const error = defineComponent({ props: ['message'], setup(props) { return () => h('p', props.message) } }) const popover = defineComponent({ props: ['trigger', 'placement', 'title', 'width'], setup(_, { slots }) { return () => h('div', slots.reference?.()) } }) const options = { global: { directives: { loading: () => undefined }, stubs: { AdminPage: passthrough, QueryToolbar: query, AppDialog: dialog, LoadErrorState: error, ApiErrorMeta: true, SkuTrend: true, 'el-button': button, 'el-popover': popover, 'el-table-column': true, 'el-table': true, 'el-option': true, 'el-select': true } } } @@ -31,6 +32,19 @@ beforeEach(() => { }) afterEach(() => { wrappers.splice(0).forEach(wrapper => wrapper.unmount()); vi.useRealTimers(); vi.restoreAllMocks() }) describe('warehouse operating dashboard', () => { + it('offers coverage evidence for both inventory rankings even when they are empty', async () => { + const data = structuredClone(dashboardFixture) + data.longCoverageSkus = { ...data.longCoverageSkus, items: [], eligibleCount: '0', unassessableCount: '2711', dataStatus: 'PARTIAL' } + data.noOutboundSkus = { ...data.noOutboundSkus, items: [], eligibleCount: '0', unassessableCount: '2741', dataStatus: 'PARTIAL' } + mocks.dashboard.mockResolvedValue(data) + const wrapper = page(); await choose(wrapper, { warehouseCode: 'WH-A' }) + expect(wrapper.findAll('.dashboard-chart-actions button').filter(node => node.text() === '待评估原因')).toHaveLength(2) + await findButton(wrapper, '待评估原因').trigger('click'); await flushPromises() + expect(wrapper.text()).toContain('全仓库存分布的待核验原因') + expect(wrapper.text()).toContain('待评估 2711 SKU') + expect(wrapper.text()).toContain('待评估 2741 SKU') + expect(mocks.dashboard).toHaveBeenCalledOnce() + }) it('uses one date range field, blocks incomplete ranges and clears obsolete validation errors', async () => { const wrapper = page(); await choose(wrapper, { warehouseCode: 'WH-A', rangePreset: 'CUSTOM' }) const toolbar = wrapper.findComponent(query) @@ -201,8 +215,9 @@ describe('warehouse operating dashboard', () => { const wrapper = page(); await choose(wrapper, { warehouseCode: 'WH-A' }) wrapper.findAllComponents(DashboardBars)[1]!.vm.$emit('select', '1'); await flushPromises() expect(mocks.daily.mock.calls[0]?.[0]).toMatchObject({ customerCode: 'OWNER-B', sku: 'SKU-X', rangePreset: 'CUSTOM', startDate: '2026-09-13', endDate: '2026-10-12', salesRunId: '11' }) - expect(wrapper.findComponent(dialog).props('width')).toBe('1120px') - wrapper.findComponent(dialog).vm.$emit('update:modelValue', false); await flushPromises() + expect(wrapper.findAllComponents(dialog).find(item => item.props('title') === 'SKU每日出库趋势')!.props('width')).toBe('1120px') + for (const modal of wrapper.findAllComponents(dialog)) expect(modal.props('appendToBody')).not.toBeUndefined() + wrapper.findAllComponents(dialog).find(item => item.props('title') === 'SKU每日出库趋势')!.vm.$emit('update:modelValue', false); await flushPromises() finish({ context: dashboardFixture.context, summary: { ...dashboardFixture.salesTrend.summary, sku: 'LATE-SKU' }, points: [] }); await flushPromises() expect(mocks.daily.mock.calls[0]?.[1].aborted).toBe(true) expect(wrapper.text()).not.toContain('LATE-SKU') @@ -234,10 +249,11 @@ describe('warehouse operating dashboard', () => { wrapper.findAllComponents(DashboardBars)[0]!.vm.$emit('select', 'DAYS_GT_90'); await flushPromises() expect(mocks.push.mock.calls.at(-1)?.[0]).toMatchObject({ path: '/self-operated/inventory', query: { coverageBucket: 'DAYS_GT_90', bucketRuleVersion: 'COVERAGE_DISTRIBUTION_V1', from: 'overview' } }) const chart = wrapper.findComponent(DashboardTrend) - await chart.findAll('g')[1]!.trigger('keydown', { key: 'Enter' }) + await chart.find('.chart-disclosure button').trigger('click') + await chart.findAll('tbody button')[1]!.trigger('click') expect(mocks.push).toHaveBeenCalledTimes(1) expect(chart.text()).toContain('销量未覆盖') - await chart.findAll('g')[0]!.trigger('keydown', { key: 'Enter' }) + await chart.findAll('tbody button')[0]!.trigger('click') expect(mocks.push.mock.calls.at(-1)?.[0].query).toMatchObject({ analysis: 'SKU', rangePreset: 'CUSTOM', startDate: '2026-10-10', endDate: '2026-10-10' }) await findButton(wrapper, '查看Top100').trigger('click') expect(mocks.push.mock.calls.at(-1)?.[0].query).toMatchObject({ analysis: 'HOT', rangePreset: 'CUSTOM', startDate: '2026-09-13', endDate: '2026-10-12' }) diff --git a/src/modules/self-operated/pages/OverviewView.vue b/src/modules/self-operated/pages/OverviewView.vue index 02a022ac..d107c069 100644 --- a/src/modules/self-operated/pages/OverviewView.vue +++ b/src/modules/self-operated/pages/OverviewView.vue @@ -15,6 +15,9 @@ import { analyticsApi } from '../api/analytics' import type { Dashboard, DashboardItem, DashboardRanking, DailyResponse, DashboardQuery, Overview, QueryContext, RangePreset } from '../types' import { beijingTime, contextParams, label, quantityText, reasonsText, RequestFence, RuntimePoller, sameContext, validateCustomRange } from '../state' import { buckets, expired, inventoryExpired, parseContext, parseOverviewReturn, previousDate, rangeOptions, type OverviewReturn } from '../dashboardNavigation' +import HotSkuDetails from '../components/HotSkuDetails.vue' +import InventoryRankingDiagnostics from '../components/InventoryRankingDiagnostics.vue' +import ChartDetailsDialog from '../components/ChartDetailsDialog.vue' import DashboardBars, { type BarRow } from '../components/DashboardBars.vue' import DashboardTrend from '../components/DashboardTrend.vue' import SkuTrend from '../components/SkuTrend.vue' @@ -197,14 +200,42 @@ onUnmounted(() => { dataFence.cancel(); trendFence.cancel(); poller.stop(); clea
{{ metric.key === 'intervalOutboundQuantity' && data.kpis[metric.key].dataStatus !== 'COMPLETE' ? '区间已采集出库量' : metric.label }}
{{ quantityText(metric.key === 'intervalOutboundQuantity' && data.kpis[metric.key].dataStatus !== 'COMPLETE' ? data.kpis[metric.key].observedQuantity : data.kpis[metric.key].value) }} {{ metric.key === 'averageDailyOutboundQuantity30d' ? '件／日' : data.kpis[metric.key].unit === 'SKU' ? 'SKU' : '件' }}
{{ contextExpired || metric.inventory && stockExpired ? '历史／待刷新 · ' : '' }}{{ label(data.kpis[metric.key].dataStatus) }}
已知小计 {{ quantityText(data.kpis[metric.key].knownSubtotal) }}
另 {{ quantityText(data.kpis[metric.key].unknownSkuCount) }} SKU 待核验
{{ reasonsText(data.kpis[metric.key].reasonCodes) }}
-
+
+
+
+
+
+
+
+
出库趋势
{{ data.context.rangeStartDate }} 至 {{ data.context.rangeEndDateExclusive }}（截止日不含）
库存消化天数分布
有实物库存或库存待核验 SKU；{{ data.context.fixedWindowStartDate }} 至 {{ data.context.fixedWindowEndDateExclusive }}（截止日不含）。
候选 {{ quantityText(data.coverageDistribution.candidateSkuCount) }}；已排除确定零实物 {{ quantityText(data.coverageDistribution.excludedZeroPhysicalSkuCount) }} SKU。{{ label(data.coverageDistribution.dataStatus) }} · {{ reasonsText(data.coverageDistribution.reasonCodes) }}
无可用库存分布资料；销售候选不作为库存总量。
分组说明与待核验原因
30／60／90 仅为图形分组，不是经营评级；无可售库存不代表周转良好。零出库不计无限天数。
{{ reasonsText([String(reason)]) }}：{{ quantityText(count) }} SKU
{{ data.context.rangeStartDate }} 至 {{ data.context.rangeEndDateExclusive }}（截止日不含）
+30／60／90 仅为图形分组，不是经营评级；无可售库存不代表周转良好。零出库不计无限天数。
{{ reasonsText([String(reason)]) }}：{{ quantityText(count) }} SKU
有实物库存或库存待核验 SKU；{{ data.context.fixedWindowStartDate }} 至 {{ data.context.fixedWindowEndDateExclusive }}（截止日不含）。
候选 {{ quantityText(data.coverageDistribution.candidateSkuCount) }}；已排除确定零实物 {{ quantityText(data.coverageDistribution.excludedZeroPhysicalSkuCount) }} SKU。{{ label(data.coverageDistribution.dataStatus) }} · {{ reasonsText(data.coverageDistribution.reasonCodes) }}
+无可用库存分布资料；销售候选不作为库存总量。
+
- {{ ranking.all }}
+
+
+
+
+ {{ ranking.all }}
+
+
+
+
{{ ranking.label }}
{{ data[ranking.key].windowStartDate }} 至 {{ data[ranking.key].windowEndDateExclusive }}（截止日不含）；符合条件 {{ quantityText(data[ranking.key].eligibleCount) }} SKU，待评估 {{ quantityText(data[ranking.key].unassessableCount) }}。
{{ contextExpired || ranking.key !== 'hotSkus' && stockExpired ? '历史／待刷新 · ' : '' }}{{ label(data[ranking.key].dataStatus) }} · {{ reasonsText(data[ranking.key].reasonCodes) }}
按所选时段已采集量排名，数据尚未采齐，排名可能随采集变化；未采集日期不计为零出库。
本榜仍需完整近30日销量与库存观察资料；资料不足的 SKU 暂不评估，未采集日期不计为零出库。
{{ data[ranking.key].windowStartDate }} 至 {{ data[ranking.key].windowEndDateExclusive }}（截止日不含）；符合条件 {{ quantityText(data[ranking.key].eligibleCount) }} SKU，待评估 {{ quantityText(data[ranking.key].unassessableCount) }}。
+{{ contextExpired || ranking.key !== 'hotSkus' && stockExpired ? '历史／待刷新 · ' : '' }}{{ label(data[ranking.key].dataStatus) }} · {{ reasonsText(data[ranking.key].reasonCodes) }}
+按所选时段已采集量排名，数据尚未采齐，排名可能随采集变化；未采集日期不计为零出库。
+本榜仍需完整近30日销量与库存观察资料；资料不足的 SKU 暂不评估，未采集日期不计为零出库。
+ +{{ trendError }}
{{ trendError }}