From 969d86f867c98e25597857b033cd0f861fc4b745 Mon Sep 17 00:00:00 2001
From: ouhaolan <ou@haolan.vip>
Date: Fri, 8 May 2026 08:28:20 +0800
Subject: [PATCH] =?UTF-8?q?1.=20=E6=96=B0=E5=A2=9E=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E5=93=81=E7=B1=BB=E7=A9=BF=E9=80=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../salesdaily/CategoryPenetrationBoard.vue   | 3016 +++++++++++++++++
 1 file changed, 3016 insertions(+)
 create mode 100644 src/views/ydoyun/report/salesdaily/CategoryPenetrationBoard.vue

diff --git a/src/views/ydoyun/report/salesdaily/CategoryPenetrationBoard.vue b/src/views/ydoyun/report/salesdaily/CategoryPenetrationBoard.vue
new file mode 100644
index 0000000..95cada0
--- /dev/null
+++ b/src/views/ydoyun/report/salesdaily/CategoryPenetrationBoard.vue
@@ -0,0 +1,3016 @@
+<template>
+  <div class="plct-page">
+    <div class="plct-toolbar card">
+      <el-form :model="queryForm" class="plct-query-form" inline @submit.prevent="handleQuery">
+        <el-form-item label="日期">
+          <el-date-picker
+            v-model="queryForm.rq"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="选择日期"
+            :disabled="loading"
+            :disabled-date="disabledDate"
+            class="plct-field-rq"
+          />
+        </el-form-item>
+        <el-form-item label="门店">
+          <el-select
+            v-model="queryForm.ckdm"
+            filterable
+            clearable
+            placeholder="选择门店"
+            :disabled="loading"
+            class="plct-field-ckdm"
+          >
+            <el-option
+              v-for="opt in storeSelectOptions"
+              :key="opt.value"
+              :label="opt.city ? `${opt.label}（${opt.city}）` : opt.label"
+              :value="opt.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="品牌">
+          <el-select
+            v-model="queryForm.pp"
+            filterable
+            clearable
+            placeholder="选择品牌"
+            :disabled="loading"
+            class="plct-field-pp"
+          >
+            <el-option
+              v-for="opt in brandOptions"
+              :key="opt.value"
+              :label="opt.label"
+              :value="opt.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item class="plct-query-actions">
+          <el-button type="primary" :loading="loading" @click="handleQuery">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="plct-main card" v-loading="loading" element-loading-text="数据加载中...">
+      <template v-if="detail">
+        <div class="plct-content-split">
+          <div class="plct-kpi-col">
+            <div class="plct-upper-pane plct-upper-pane--kpi">
+              <div class="plct-module-hd">当日指标</div>
+              <div class="plct-bullet-row">
+                <div class="plct-bullet">
+                  <div class="plct-bullet-head">
+                    <span class="plct-bullet-label">今日目标完成率</span>
+                    <span class="plct-bullet-value">{{
+                      formatPercent(detail?.RMBDB ?? detail?.rmbdb)
+                    }}</span>
+                  </div>
+                  <div class="plct-bullet-graph">
+                    <div
+                      class="plct-bullet-bar"
+                      :style="{ width: clampPercent(detail?.RMBDB ?? detail?.rmbdb) + '%' }"
+                    ></div>
+                  </div>
+                  <div class="plct-bullet-foot plct-bullet-foot--split">
+                    <span class="plct-bullet-sub"
+                      >目标:
+                      <span class="plct-bullet-sub-val">{{
+                        formatMoney(detail?.RMBE ?? detail?.rmbe)
+                      }}</span></span
+                    >
+                    <span class="plct-bullet-sep">|</span>
+                    <span class="plct-bullet-sub"
+                      >缺口:
+                      <span class="plct-bullet-sub-val">{{
+                        formatMoney(dailyTargetGap)
+                      }}</span></span
+                    >
+                  </div>
+                </div>
+
+                <div class="plct-bullet">
+                  <div class="plct-bullet-head">
+                    <span class="plct-bullet-label">本月累计完成率</span>
+                    <span class="plct-bullet-value plct-bullet-value--month">{{
+                      formatPercent(detail?.YMBDB ?? detail?.ymbdb)
+                    }}</span>
+                  </div>
+                  <div class="plct-bullet-graph">
+                    <div
+                      class="plct-bullet-bar plct-bullet-bar--month"
+                      :style="{ width: clampPercent(detail?.YMBDB ?? detail?.ymbdb) + '%' }"
+                    ></div>
+                    <div
+                      class="plct-progress-marker"
+                      :style="{ left: clampPercent(detail?.YSJJD ?? detail?.ysjjd) + '%' }"
+                    ></div>
+                  </div>
+                  <div class="plct-bullet-foot plct-bullet-foot--split">
+                    <span class="plct-bullet-sub"
+                      >时间进度:
+                      <span class="plct-bullet-sub-val">{{
+                        formatPercent(detail?.YSJJD ?? detail?.ysjjd)
+                      }}</span></span
+                    >
+                    <span class="plct-bullet-sep">|</span>
+                    <span :class="['plct-bullet-sub', 'plct-bullet-gap', monthLeadShort.cls]">{{
+                      monthLeadShort.text
+                    }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="plct-kpi-matrix">
+                <div class="plct-kpi-cell">
+                  <span class="plct-kpi-label">品类占比</span>
+                  <div class="plct-kpi-main">{{
+                    formatCategoryPpzb(detail?.PPZB ?? detail?.ppzb)
+                  }}</div>
+                </div>
+                <div class="plct-kpi-cell">
+                  <span class="plct-kpi-label">销售额</span>
+                  <div class="plct-kpi-main">{{ formatMoney(detail?.JE ?? detail?.je) }}</div>
+                  <div class="plct-kpi-sub">
+                    昨日 <span class="plct-kpi-sub-val">{{
+                      formatMoney(detailField(detail, 'je_z', 'JE_Z', 'JEZ'))
+                    }}</span>
+                  </div>
+                </div>
+                <div class="plct-kpi-cell">
+                  <span class="plct-kpi-label">销售量</span>
+                  <div class="plct-kpi-main">{{ formatNumber(detail?.SL ?? detail?.sl) }}</div>
+                  <div class="plct-kpi-sub">
+                    昨日 <span class="plct-kpi-sub-val">{{
+                      formatNumber(detailField(detail, 'zrsl', 'ZRSL'))
+                    }}</span>
+                  </div>
+                </div>
+                <div class="plct-kpi-cell">
+                  <span class="plct-kpi-label">毛利率</span>
+                  <div class="plct-kpi-main">{{ rawCellValue(detail?.MLL ?? detail?.mll) }}</div>
+                </div>
+                <div class="plct-kpi-cell">
+                  <span class="plct-kpi-label">平均折扣</span>
+                  <div class="plct-kpi-main plct-kpi-main--solo">{{ avgDiscountText }}</div>
+                </div>
+                <div class="plct-kpi-cell">
+                  <span class="plct-kpi-label">销售单价</span>
+                  <div class="plct-kpi-main plct-kpi-main--solo">{{
+                    formatMoney(detail?.JDJ ?? detail?.jdj)
+                  }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <aside class="plct-charts-col" aria-label="穿透明细图表">
+            <div class="plct-charts-shell plct-upper-pane">
+              <div class="plct-module-hd">结构占比</div>
+              <div class="plct-chart-grid">
+                <div class="plct-chart-cell">
+                  <div class="plct-chart-hd">{{ chartHd1 }}</div>
+                  <div class="plct-chart-bd">
+                    <Echart :options="chartPrimarySlotOptions" width="100%" height="100%" />
+                  </div>
+                </div>
+                <div class="plct-chart-cell">
+                  <div class="plct-chart-hd">{{ chartHd2 }}</div>
+                  <div class="plct-chart-bd">
+                    <Echart :options="chartSecondarySlotOptions" width="100%" height="100%" />
+                  </div>
+                </div>
+                <div class="plct-chart-cell plct-chart-cell--row2">
+                  <div class="plct-chart-hd">{{ chartHd3 }}</div>
+                  <div class="plct-chart-bd">
+                    <Echart :options="chartZkcTopOptions" width="100%" height="100%" />
+                  </div>
+                </div>
+                <div class="plct-chart-cell plct-chart-cell--row2">
+                  <div class="plct-chart-hd">{{ chartHd4 }}</div>
+                  <div class="plct-chart-bd">
+                    <template v-if="usePlct2MixedCharts">
+                      <div v-if="!plct2Rows.length" class="plct-chart-list-empty">暂无明细</div>
+                      <template v-else-if="plct2SeasonJjListRows.length">
+                        <div class="plct-jj-mini-wrap">
+                          <el-table
+                            class="plct-jj-mini-table"
+                            :data="plct2SeasonJjListRows"
+                            :border="false"
+                            :stripe="false"
+                            size="small"
+                            style="width: 100%"
+                            empty-text=""
+                          >
+                            <el-table-column
+                              prop="name"
+                              label="季节"
+                              min-width="68"
+                              show-overflow-tooltip
+                            />
+                            <el-table-column
+                              label="销量"
+                              align="right"
+                              width="64"
+                              label-class-name="plct-jj-hd-sl"
+                              class-name="plct-jj-col-sl"
+                            >
+                              <template #default="{ row }">{{ formatJjInt(row.sl) }}</template>
+                            </el-table-column>
+                            <el-table-column
+                              label="库存"
+                              align="right"
+                              width="64"
+                              label-class-name="plct-jj-hd-kc"
+                              class-name="plct-jj-col-kc"
+                            >
+                              <template #default="{ row }">{{ formatJjInt(row.kc) }}</template>
+                            </el-table-column>
+                          </el-table>
+                        </div>
+                      </template>
+                      <div v-else class="plct-chart-list-empty">暂无季节维度</div>
+                    </template>
+                    <Echart v-else :options="chartSizeKcOptions" width="100%" height="100%" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </aside>
+        </div>
+
+        <div class="plct-detail-module">
+          <div class="plct-module-hd">热销款 TOP 穿透明细</div>
+          <div class="plct-detail-module-bd">
+            <div v-if="plct3DisplayCols.length" class="plct-table-wrap">
+              <el-table
+                :data="plct3Rows"
+                stripe
+                border
+                size="small"
+                style="width: 100%"
+                max-height="560"
+              >
+                <el-table-column type="index" label="#" width="48" fixed />
+                <el-table-column
+                  v-for="col in plct3DisplayCols"
+                  :key="
+                    col.type === 'plain'
+                      ? col.key
+                      : col.type === 'sku'
+                        ? `sku-${col.spdmKey}-${col.spmcKey}`
+                        : 'plct3-size-sku'
+                  "
+                  :prop="col.type === 'plain' ? col.key : undefined"
+                  :label="col.type === 'sizeSku' ? '' : plct3DisplayColLabel(col)"
+                  :min-width="plct3DisplayColMinWidth(col)"
+                  :fixed="col.type === 'plain' && isPlct3PicCol(col.key) ? 'left' : undefined"
+                  :show-overflow-tooltip="col.type === 'plain'"
+                >
+                  <template v-if="col.type === 'sizeSku'" #header>
+                    <div class="plct3-size-col-hd">
+                      <div class="plct3-size-col-title">SKU明细（尺码）</div>
+                      <div class="plct3-size-col-legend">
+                        <span class="plct3-size-legend-i">
+                          <span class="plct3-size-dot plct3-size-dot--muted" aria-hidden="true"></span>
+                          尺码
+                        </span>
+                        <span class="plct3-size-legend-i">
+                          <span class="plct3-size-dot plct3-size-dot--kc" aria-hidden="true"></span>
+                          库存
+                        </span>
+                        <span class="plct3-size-legend-i">
+                          <span class="plct3-size-dot plct3-size-dot--ls" aria-hidden="true"></span>
+                          零售
+                        </span>
+                        <span class="plct3-size-legend-i">
+                          <span class="plct3-size-dot plct3-size-dot--zt" aria-hidden="true"></span>
+                          状态
+                        </span>
+                      </div>
+                    </div>
+                  </template>
+                  <template #default="{ row }">
+                    <template v-if="col.type === 'sku'">
+                      <div class="plct3-sku-merged">
+                        <div class="plct3-sku-code">{{ plct3FormatCell(row[col.spdmKey]) }}</div>
+                        <div class="plct3-sku-name">{{ plct3FormatCell(row[col.spmcKey]) }}</div>
+                      </div>
+                    </template>
+                    <template v-else-if="col.type === 'sizeSku'">
+                      <div
+                        v-if="plct3RowSizeTiles(row, col).length"
+                        class="plct3-size-chips"
+                      >
+                        <div
+                          v-for="t in plct3RowSizeTiles(row, col)"
+                          :key="t.label + (t.zt ? `-${t.zt}` : '')"
+                          class="plct3-size-chip"
+                        >
+                          <div class="plct3-size-chip-label-row">
+                            <span class="plct3-size-chip-label">{{ t.label }}</span>
+                            <span
+                              v-if="t.zt"
+                              class="plct3-size-zt"
+                              :class="plct3SizeZtClass(t.zt)"
+                              >{{ t.zt }}</span
+                            >
+                          </div>
+                          <div class="plct3-size-chip-vals">
+                            <template v-if="t.kc != null || t.ls != null">
+                              <span v-if="t.kc != null" class="plct3-size-kc">{{ t.kc }}</span>
+                              <span v-if="t.kc != null && t.ls != null" class="plct3-size-sep">|</span>
+                              <span v-if="t.ls != null" class="plct3-size-ls">{{ t.ls }}</span>
+                            </template>
+                            <span v-else class="plct3-size-dash">—</span>
+                          </div>
+                        </div>
+                      </div>
+                      <span v-else class="plct3-size-fallback">{{
+                        plct3SizeColRawFallback(row, col) || '—'
+                      }}</span>
+                    </template>
+                    <template v-else-if="isPlct3PicCol(col.key) && plct3CellPicUrl(row[col.key])">
+                      <el-image
+                        class="plct3-thumb"
+                        :src="plct3CellPicUrl(row[col.key])!"
+                        fit="cover"
+                        lazy
+                        referrerpolicy="no-referrer"
+                        preview-teleported
+                        :preview-src-list="[plct3CellPicUrl(row[col.key])!]"
+                      >
+                        <template #error>
+                          <span class="plct3-thumb-fail">—</span>
+                        </template>
+                      </el-image>
+                    </template>
+                    <span v-else>{{ plct3FormatCell(row[col.key]) }}</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+            <el-empty v-else description="暂无明细数据" class="plct-detail-empty" />
+          </div>
+        </div>
+      </template>
+      <div v-else-if="!queried && !loading" class="plct-empty-wrap">
+        <el-empty description="请先设置查询条件并点击查询" />
+      </div>
+      <div v-else-if="queried && !loading" class="plct-empty-wrap">
+        <el-empty description="暂无穿透数据" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import dayjs from 'dayjs'
+import type { EChartsOption } from 'echarts'
+import { useCssVar } from '@vueuse/core'
+import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { ReportApi, type ExecuteProcedureParams } from '@/api/ydoyun/report/reportpage'
+import { useAppStore } from '@/store/modules/app'
+import { useUserStore } from '@/store/modules/user'
+import Echart from '@/components/Echart/src/Echart.vue'
+import { ElMessage } from 'element-plus'
+
+defineOptions({ name: 'SalesDailyCategoryPenetration' })
+
+const REPORT_ID = 1
+const PROCEDURE_SECRET = '123'
+const PROC_QX_KEHU = 'YDY_AI_GET_QX_KEHU'
+const PROC_PLCT1 = 'YDY_AI_GET_PLCT1'
+const PROC_PLCT2 = 'YDY_AI_GET_PLCT2'
+const PROC_PLCT3 = 'YDY_AI_GET_PLCT3'
+
+/** PLCT3 下架字段：接口可能含 ysdm，不在表格展示（与图表区约定一致） */
+const PLCT3_HIDDEN_KEYS = /^(ysdm)$/i
+
+const route = useRoute()
+const userStore = useUserStore()
+const appStore = useAppStore()
+const username = computed(() => userStore.user.username || '')
+const isDark = computed(() => appStore.getIsDark)
+
+const elColorPrimary = useCssVar('--el-color-primary')
+const elTextRegular = useCssVar('--el-text-color-regular')
+const elTextSecondary = useCssVar('--el-text-color-secondary')
+const elBorderColor = useCssVar('--el-border-color')
+const elFillLight = useCssVar('--el-fill-color-light')
+const elBgColor = useCssVar('--el-bg-color')
+
+const loading = ref(false)
+/** 用户是否已触发过查询（区分「待查询」与「已查无数据」） */
+const queried = ref(false)
+const detail = ref<Record<string, any> | null>(null)
+/** YDY_AI_GET_PLCT2 明细行：图表区使用 */
+const plct2Rows = ref<Record<string, any>[]>([])
+/** YDY_AI_GET_PLCT3 明细行：底部表格（僅商品匯總行，已剔除混排在數組末尾的尺碼明細行） */
+const plct3Rows = ref<Record<string, any>[]>([])
+/** PLCT3 與匯總行混排在同一 data 中的尺碼明細（cm/kcsl/ls/spdm/ysdm） */
+const plct3SkuSizeLines = ref<Record<string, any>[]>([])
+
+/** 用户门店（与 sales daily 一致：YDY_AI_GET_QX_KEHU） */
+const userStoreRows = ref<Array<{ ckdm: string; ckmc: string; city: string }>>([])
+/** 品牌下拉（executeTable pinpai） */
+const brandOptions = ref<Array<{ label: string; value: string }>>([])
+
+const queryForm = reactive({
+  ckdm: '',
+  rq: dayjs().subtract(1, 'day').format('YYYY-MM-DD'),
+  pp: ''
+})
+
+const storeSelectOptions = computed(() =>
+  userStoreRows.value.map((r) => ({
+    value: r.ckdm,
+    label: r.ckmc || r.ckdm,
+    city: r.city?.trim() || ''
+  }))
+)
+
+watch(
+  storeSelectOptions,
+  (options) => {
+    if (!options.length) {
+      queryForm.ckdm = ''
+      return
+    }
+    const stillValid = options.some((o) => o.value === queryForm.ckdm)
+    if (!queryForm.ckdm || !stillValid) {
+      queryForm.ckdm = options[0].value
+    }
+  },
+  { immediate: true }
+)
+
+const disabledDate = (time: Date) => time.getTime() > Date.now()
+
+/** 路由 query（兼容 string | string[]） */
+function pickRouteQuery(raw: unknown): string {
+  if (raw == null) return ''
+  if (Array.isArray(raw)) return String(raw[0] ?? '').trim()
+  return String(raw).trim()
+}
+
+/** 將路由 pp / ppmc（可能是品牌代号或显示名「如女装」）映射为下拉 value（PPDM），供存储过程参数使用 */
+function resolveRoutePpToFormValue(ppParam: string, ppmcParam: string): string {
+  const bos = brandOptions.value
+  const pp = String(ppParam || '').trim()
+  const ppmc = String(ppmcParam || '').trim()
+  if (!bos.length) return pp
+
+  if (pp && bos.some((o) => o.value === pp)) return pp
+  if (pp) {
+    const byLabel = bos.find((o) => o.label === pp)
+    if (byLabel) return byLabel.value
+  }
+  if (ppmc) {
+    if (bos.some((o) => o.value === ppmc)) return ppmc
+    const byPpmcLabel = bos.find((o) => o.label === ppmc)
+    if (byPpmcLabel) return byPpmcLabel.value
+  }
+  return pp
+}
+
+function syncFormFromRoute() {
+  const rq = pickRouteQuery(route.query.rq)
+  const ckdm = pickRouteQuery(route.query.ckdm)
+  const ppFromQuery = pickRouteQuery(route.query.pp)
+  const ppmc = pickRouteQuery(route.query.ppmc)
+  if (rq) queryForm.rq = rq
+  if (ckdm) queryForm.ckdm = ckdm
+  if (ppFromQuery || ppmc) {
+    queryForm.pp = resolveRoutePpToFormValue(ppFromQuery, ppmc)
+  }
+}
+
+function normalizePercent(v: any): number {
+  const n = toFiniteNumber(v)
+  if (!Number.isFinite(n)) return NaN as unknown as number
+  return Math.abs(n) <= 1 ? n * 100 : n
+}
+
+function toFiniteNumber(v: any): number {
+  if (v == null || v === '') return NaN
+  if (typeof v === 'number') return Number.isFinite(v) ? v : NaN
+  const s = String(v).trim().replace(/,/g, '')
+  const n = parseFloat(s)
+  return Number.isFinite(n) ? n : NaN
+}
+
+/**
+ * PLCT3 同一 data 數組混排：末尾多行為尺碼明細（小寫 spdm、cm、kcsl、ls、ysdm），無 spmc/ysmc。
+ */
+function plct3IsSkuSizeLineRow(r: Record<string, any>): boolean {
+  if (!r || typeof r !== 'object') return false
+  if (r.SPMC ?? r.spmc ?? r.YSMC ?? r.ysmc) return false
+  const cm = r.cm ?? r.CM
+  const sp = r.spdm ?? r.SPDM
+  if (cm == null || String(cm).trim() === '' || !String(sp ?? '').trim()) return false
+  return r.kcsl != null || r.KCSL != null || r.ls != null || r.LS != null
+}
+
+function plct3IsProductSummaryRow(r: Record<string, any>): boolean {
+  if (!r || typeof r !== 'object') return false
+  return !plct3IsSkuSizeLineRow(r)
+}
+
+function clampPercent(v: any): number {
+  const n = normalizePercent(v)
+  if (!Number.isFinite(n)) return 0
+  return Math.min(100, Math.max(0, n))
+}
+
+function formatPercent(v: any): string {
+  const n = normalizePercent(v)
+  if (!Number.isFinite(n)) return '--'
+  return `${n.toFixed(1)}%`
+}
+
+function formatCategoryPpzb(v: any): string {
+  if (v == null || v === '') return '--'
+  const n = toFiniteNumber(v)
+  if (!Number.isFinite(n)) return '--'
+  const abs = Math.abs(n)
+  if (abs < 10) return `${n.toFixed(2)}%`
+  if (n % 1 === 0) return `${Math.round(n)}%`
+  return `${n.toFixed(1)}%`
+}
+
+function rawCellValue(v: any): string {
+  if (v == null || v === '') return '—'
+  return String(v)
+}
+
+function formatMoney(v: any): string {
+  const n = toFiniteNumber(v)
+  if (!Number.isFinite(n)) return '--'
+  return n.toLocaleString('zh-CN', { maximumFractionDigits: 2 })
+}
+
+function formatNumber(v: any): string {
+  const n = toFiniteNumber(v)
+  if (!Number.isFinite(n)) return '--'
+  return n.toLocaleString('zh-CN', { maximumFractionDigits: 0 })
+}
+
+/** 季节列表：整数件数 */
+function formatJjInt(v: number): string {
+  if (!Number.isFinite(v)) return '—'
+  return Math.round(v).toLocaleString('zh-CN', { maximumFractionDigits: 0 })
+}
+
+function toPercentPoints(v: any): number {
+  const n = toFiniteNumber(v)
+  if (!Number.isFinite(n)) return NaN
+  return Math.abs(n) <= 1 ? n * 100 : n
+}
+
+/** detail 单行字段解析（兼容列名大小写） */
+function detailField(d: Record<string, any> | null | undefined, ...aliases: string[]): any {
+  if (!d || typeof d !== 'object') return undefined
+  const canon = new Map<string, string>()
+  for (const k of Object.keys(d)) {
+    canon.set(k.toLowerCase(), k)
+  }
+  for (const a of aliases) {
+    const rk = canon.get(String(a).toLowerCase())
+    if (rk == null) continue
+    const v = (d as any)[rk]
+    if (v != null && v !== '') return v
+  }
+  return undefined
+}
+
+/** 当日目标缺口：优先接口字段，否则按目标 × (1 − 完成率) 估算 */
+const dailyTargetGap = computed(() => {
+  const d = detail.value
+  if (!d) return NaN
+  const keys = ['RKQK', 'RMQK', 'RMBQK', 'RMBQk', 'RMBQE', 'RMQUE', 'RQQUE', 'RQK', 'RMBKQ', 'Qk', 'qk']
+  for (const k of keys) {
+    const ex = detailField(d, k)
+    const g0 = toFiniteNumber(ex)
+    if (Number.isFinite(g0) && g0 >= 0) return g0
+  }
+  const target = toFiniteNumber(detailField(d, 'RMBE', 'rmbe'))
+  const pct = normalizePercent(detailField(d, 'RMBDB', 'rmbdb'))
+  if (!Number.isFinite(target) || !Number.isFinite(pct)) return NaN
+  const rate = Math.min(Math.max(pct / 100, 0), 1)
+  return Math.max(0, target * (1 - rate))
+})
+
+/** 月累计相对时间进度：领先 / 落后（短文案） */
+const monthLeadShort = computed(() => {
+  const d = detail.value
+  if (!d) return { text: '--', cls: '' }
+  const rate = toPercentPoints(d.YMBDB ?? d.ymbdb)
+  const time = toPercentPoints(d.YSJJD ?? d.ysjjd)
+  if (!Number.isFinite(rate) || !Number.isFinite(time)) return { text: '--', cls: '' }
+  const gap = rate - time
+  if (Math.abs(gap) < 0.05) return { text: '持平', cls: '' }
+  if (gap > 0) return { text: `领先 ${gap.toFixed(1)}%`, cls: 'plct-metric-up' }
+  return { text: `落后 ${Math.abs(gap).toFixed(1)}%`, cls: 'plct-metric-down' }
+})
+
+const avgDiscountText = computed(() => {
+  const d = detail.value
+  if (!d) return '--'
+  const raw = detailField(
+    d,
+    'ZK',
+    'zk',
+    'PJZK',
+    'PJZHE',
+    'AVZK',
+    'PJJZK',
+    'XSZK',
+    'xszk',
+    'JZHE',
+    'ZHE',
+    'PJZ',
+    'JZ'
+  )
+  if (raw == null || raw === '') return '--'
+  const s = String(raw).trim()
+  if (s.includes('折')) return s
+  const n = toFiniteNumber(raw)
+  if (!Number.isFinite(n)) return rawCellValue(raw)
+  let zheNum: number
+  if (n > 0 && n <= 1) zheNum = n * 10
+  else if (n > 1 && n <= 15) zheNum = n
+  else return rawCellValue(raw)
+  const txt = Number.isInteger(zheNum) ? `${zheNum}` : `${zheNum.toFixed(1)}`.replace(/\.0$/, '')
+  return `${txt}折`
+})
+
+function truncateLabel(s: string, max: number) {
+  const t = String(s || '').trim()
+  if (t.length <= max) return t
+  return `${t.slice(0, Math.max(0, max - 2))}…`
+}
+
+/** PLCT2 混合結果集：同日返回品类/大类/款式形态/季节等塊（與細明 SKU 列互斥為主） */
+function isPpJeRow(r: Record<string, any>): boolean {
+  const pp = String(r?.PP ?? r?.pp ?? '').trim()
+  if (!pp) return false
+  if (String(r?.DLDM ?? r?.dldm ?? '').trim()) return false
+  if (String(r?.SX4DM ?? r?.sx4dm ?? '').trim()) return false
+  if (String(r?.JJDM ?? r?.jjdm ?? '').trim()) return false
+  const je = toFiniteNumber(r?.je ?? r?.JE ?? r?.Je)
+  return Number.isFinite(je)
+}
+
+function isDaleiSlRow(r: Record<string, any>): boolean {
+  const dldm = String(r?.DLDM ?? r?.dldm ?? '').trim()
+  if (!dldm) return false
+  const sl = toFiniteNumber(r?.SL ?? r?.sl)
+  return Number.isFinite(sl)
+}
+
+/** 款式形态行：环比（百分点）；兼容存储过程小数或百分数 */
+function pickSx4RowHbPct(rec: Record<string, any>): number | null {
+  const raw = detailField(
+    rec,
+    'ZJEHB',
+    'JEHB',
+    'JE_HB',
+    'SX4HB',
+    'SX4HBZZ',
+    'JEHBZZ',
+    'ZJEHBZZ',
+    'ZJHB',
+    'JEZZHB',
+    'HBZZ'
+  )
+  if (raw == null || raw === '') return null
+  const pts = toPercentPoints(raw)
+  return Number.isFinite(pts) ? pts : null
+}
+
+function isSx4ZjeRow(r: Record<string, any>): boolean {
+  const dm = String(r?.SX4DM ?? r?.sx4dm ?? '').trim()
+  const mc = String(r?.SX4MC ?? r?.sx4mc ?? '').trim()
+  if (!dm && !mc) return false
+  const zje = toFiniteNumber(r?.ZJE ?? r?.zje)
+  if (Number.isFinite(zje)) return true
+  return pickSx4RowHbPct(r as Record<string, any>) != null
+}
+
+function isJjSeasonRow(r: Record<string, any>): boolean {
+  const jjdm = String(r?.JJDM ?? r?.jjdm ?? '').trim()
+  const jjmc = String(r?.JJMC ?? r?.jjmc ?? '').trim()
+  if (!jjdm && !jjmc) return false
+  const kc = toFiniteNumber(r?.kc ?? r?.KC ?? r?.Kc)
+  const sl = toFiniteNumber(r?.SL ?? r?.sl)
+  return Number.isFinite(kc) || Number.isFinite(sl)
+}
+
+/** 混合包季节维度（JJDM 排序，字段与原先季节柱状图一致） */
+function parsePlct2SeasonJjRows(rows: unknown[]): { name: string; sl: number; kc: number }[] {
+  return rows
+    .filter((r) => r && typeof r === 'object' && isJjSeasonRow(r as Record<string, any>))
+    .map((r) => {
+      const rec = r as Record<string, any>
+      const dm = Number(toFiniteNumber(rec.JJDM ?? rec.jjdm))
+      return {
+        order: Number.isFinite(dm) ? dm : 999,
+        name: String(rec.JJMC ?? rec.jjmc ?? '').trim() || '--',
+        sl: toFiniteNumber(rec.SL ?? rec.sl),
+        kc: toFiniteNumber(rec.kc ?? rec.KC ?? rec.Kc)
+      }
+    })
+    .sort((a, b) => a.order - b.order)
+    .map(({ name, sl, kc }) => ({
+      name,
+      sl: Number.isFinite(sl) ? Math.round(sl) : 0,
+      kc: Number.isFinite(kc) ? Math.round(kc) : 0
+    }))
+}
+
+/** 當前一條結果是否為穿透匯總包（右上角四圖用） */
+function plct2IsMixedDashboardBundle(rows: any[]): boolean {
+  return rows.some((r) => r && typeof r === 'object' && isPpJeRow(r as Record<string, any>))
+}
+
+/** 尺码串聚合：兼容「S:40|M:38」、「S：36，M:20」*/
+function mergeSizeFieldFromRows(rows: any[], fieldKeys: string[]): [string, number][] {
+  const keyLower = fieldKeys.map((k) => k.toLowerCase())
+  const total = new Map<string, number>()
+  for (const r of rows) {
+    if (!r || typeof r !== 'object') continue
+    let raw: unknown
+    for (const k of Object.keys(r)) {
+      if (keyLower.includes(k.toLowerCase())) {
+        raw = (r as any)[k]
+        break
+      }
+    }
+    const str = String(raw ?? '').trim()
+    if (!str) continue
+    const parts = str.split(/[|｜，,;；]+/).map((x) => x.trim()).filter(Boolean)
+    for (const p of parts) {
+      const m = p.match(/^([^:：/\s]{1,22})[:：]\s*([\d,.-]+)/)
+      if (!m) continue
+      const size = m[1].trim()
+      const v = parseFloat(String(m[2]).replace(/,/g, ''))
+      if (!size || !Number.isFinite(v)) continue
+      total.set(size, (total.get(size) ?? 0) + v)
+    }
+  }
+  return [...total.entries()].sort((a, b) => b[1] - a[1])
+}
+
+/** 單元格尺碼串 → 尺碼→數量（規則與 mergeSizeFieldFromRows 一致） */
+function parsePlct3SizeAmounts(raw: unknown): Map<string, number> {
+  const m = new Map<string, number>()
+  const str = String(raw ?? '').trim()
+  if (!str) return m
+  const parts = str.split(/[|｜，,;；]+/).map((x) => x.trim()).filter(Boolean)
+  for (const p of parts) {
+    const match = p.match(/^([^:：/\s]{1,22})[:：]\s*([\d,.-]+)/)
+    if (!match) continue
+    const size = match[1].trim()
+    const v = parseFloat(String(match[2]).replace(/,/g, ''))
+    if (!size || !Number.isFinite(v)) continue
+    m.set(size, v)
+  }
+  return m
+}
+
+type SpdmAggRow = { key: string; label: string; sl: number; zkc: number }
+
+function aggregatePlct2BySpdm(rows: any[]): SpdmAggRow[] {
+  const map = new Map<string, SpdmAggRow>()
+  for (const r of rows) {
+    const spdm = String(r?.SPDM ?? r?.spdm ?? '').trim()
+    if (!spdm) continue
+    const spmc = String(r?.SPMC ?? r?.spmc ?? '').trim()
+    const sl = toFiniteNumber(r?.SL ?? r?.sl)
+    const zkc = toFiniteNumber(r?.ZKC ?? r?.zkc)
+    const prev =
+      map.get(spdm) ??
+      ({
+        key: spdm,
+        label: truncateLabel(spmc ? `${spmc} (${spdm})` : spdm, 26),
+        sl: 0,
+        zkc: 0
+      } as SpdmAggRow)
+    prev.sl += Number.isFinite(sl) ? sl : 0
+    prev.zkc += Number.isFinite(zkc) ? zkc : 0
+    map.set(spdm, prev)
+  }
+  return [...map.values()]
+}
+
+function aggregateColorSales(rows: any[]): { name: string; value: number }[] {
+  const cmap = new Map<string, number>()
+  for (const r of rows) {
+    const name = String(r?.YSMC ?? r?.ysmc ?? '').trim() || '未分色'
+    const sl = toFiniteNumber(r?.SL ?? r?.sl)
+    const v = Number.isFinite(sl) ? sl : 0
+    cmap.set(name, (cmap.get(name) ?? 0) + v)
+  }
+  return [...cmap.entries()]
+    .map(([name, value]) => ({ name, value }))
+    .filter((x) => x.value > 0)
+    .sort((a, b) => b.value - a.value)
+}
+
+const chartAccentColors = computed(() => [
+  elColorPrimary.value || '#409eff',
+  '#67c23a',
+  '#e6a23c',
+  '#f56c6c',
+  '#909399',
+  '#926cdc',
+  '#36cfc9'
+])
+
+/** 是否为 PLCT2 多维汇总返回（右上角四图切换到品类/大类/款式/季节） */
+const usePlct2MixedCharts = computed(() => plct2IsMixedDashboardBundle(plct2Rows.value))
+
+/** 混合包「季节销量·库存」列表数据 */
+const plct2SeasonJjListRows = computed(() => {
+  if (!plct2IsMixedDashboardBundle(plct2Rows.value)) return []
+  return parsePlct2SeasonJjRows(plct2Rows.value)
+})
+
+const chartHd1 = computed(() =>
+  usePlct2MixedCharts.value ? '全店大类占比（%）' : '商品销量 TOP'
+)
+const chartHd2 = computed(() =>
+  usePlct2MixedCharts.value ? '小类销售额' : '颜色销量占比'
+)
+const chartHd3 = computed(() =>
+  usePlct2MixedCharts.value ? '款式形态金额占比' : '商品库存 TOP'
+)
+const chartHd4 = computed(() =>
+  usePlct2MixedCharts.value ? '季节销量·库存' : '尺码分布（KCCM / LSCM）'
+)
+
+/** 横向 TOP 条默认主题 */
+function horizontalBarChartBase(
+  labels: string[],
+  values: number[],
+  barColor: string,
+  suffix = '',
+  format: 'int' | 'money' = 'int'
+): EChartsOption {
+  void isDark.value
+  const textMuted = elTextSecondary.value || '#909399'
+  const textRegular = elTextRegular.value || '#606266'
+  const borderLine = elBorderColor.value || '#dcdfe6'
+  const split = elFillLight.value || '#ebeef5'
+  const fmt = (n: number) =>
+    format === 'money'
+      ? n.toLocaleString('zh-CN', { maximumFractionDigits: 2 })
+      : n.toLocaleString('zh-CN', { maximumFractionDigits: 0 })
+  return {
+    backgroundColor: 'transparent',
+    animationDuration: 300,
+    grid: { left: 1, right: 28, top: 2, bottom: 5, containLabel: true },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      backgroundColor: elBgColor.value,
+      borderColor: borderLine,
+      textStyle: { color: textRegular, fontSize: 14 },
+      formatter: (ps: unknown) => {
+        const arr = Array.isArray(ps) ? ps : []
+        const p0 = arr[0] as { name?: string; value?: number } | undefined
+        if (!p0) return ''
+        const nv = typeof p0.value === 'number' && Number.isFinite(p0.value) ? p0.value : NaN
+        const v = Number.isFinite(nv) ? fmt(nv) : String(p0.value ?? '')
+        return `<div>${p0.name ?? ''}<br/><b>${v}</b>${suffix}</div>`
+      }
+    },
+    xAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { type: 'dashed', color: split } },
+      axisLabel: { fontSize: 12, color: textMuted },
+      axisLine: { lineStyle: { color: borderLine } }
+    },
+    yAxis: {
+      type: 'category',
+      data: labels,
+      inverse: true,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: { fontSize: 12, color: textMuted, width: 100, overflow: 'truncate' }
+    },
+    series: [
+      {
+        type: 'bar',
+        barMaxWidth: 18,
+        data: values,
+        itemStyle: {
+          borderRadius: [0, 4, 4, 0],
+          color: barColor
+        },
+        label: {
+          show: true,
+          position: 'right',
+          fontSize: 12,
+          color: textRegular,
+          formatter: (params: unknown) => {
+            const v = (params as { value?: number }).value
+            return typeof v === 'number' && Number.isFinite(v) ? fmt(v) : String(v ?? '')
+          }
+        }
+      }
+    ]
+  }
+}
+
+/** 大类全店占比：横向类目 + 纵向柱高为占比（%，按大类销量折算） */
+function verticalBarSharePercentChart(
+  categories: string[],
+  percentValues: number[],
+  qtyValues: number[],
+  barColor: string,
+  qtyLegend: string
+): EChartsOption {
+  void isDark.value
+  const textMuted = elTextSecondary.value || '#909399'
+  const textRegular = elTextRegular.value || '#606266'
+  const borderLine = elBorderColor.value || '#dcdfe6'
+  const split = elFillLight.value || '#ebeef5'
+  const rot = categories.length > 5
+  /** containLabel：左側 Y 軸刻度預留寬度，避免字號放大後 % 標籤裁切 */
+  const gridMini = rot
+    ? { left: 6, right: 8, top: 10, bottom: 26, containLabel: true }
+    : { left: 6, right: 8, top: 10, bottom: 18, containLabel: true }
+  const pctPeak = Math.max(0, ...percentValues.map((v) => (Number.isFinite(v) ? Number(v) : 0)))
+  const yMax =
+    pctPeak <= 0 ? 100 : Math.min(100, Math.max(22, Math.ceil((pctPeak * 1.18) / 5) * 5))
+  return {
+    backgroundColor: 'transparent',
+    animationDuration: 300,
+    grid: gridMini,
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      backgroundColor: elBgColor.value,
+      borderColor: borderLine,
+      textStyle: { color: textRegular, fontSize: 14 },
+      formatter: (ps: unknown) => {
+        const raw = Array.isArray(ps) ? ps[0] : ps
+        const di = (raw as { dataIndex?: number }).dataIndex ?? 0
+        const name = categories[di] ?? ''
+        const pct = percentValues[di]
+        const qty = qtyValues[di]
+        const pctStr = Number.isFinite(pct) ? `${pct.toFixed(1)}%` : '--'
+        const qtyStr =
+          qty !== undefined && Number.isFinite(qty)
+            ? Number(qty).toLocaleString('zh-CN', { maximumFractionDigits: 0 })
+            : '--'
+        return `<div>${name}<br/>占比：<b>${pctStr}</b><br/>${qtyLegend}：<b>${qtyStr}</b> 件</div>`
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: categories,
+      axisTick: { show: false },
+      axisLine: { lineStyle: { color: borderLine } },
+      axisLabel: {
+        interval: 0,
+        rotate: rot ? 26 : 0,
+        fontSize: 11,
+        color: textMuted,
+        margin: 2
+      }
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: yMax,
+      splitLine: { lineStyle: { type: 'dashed', color: split } },
+      axisLabel: {
+        fontSize: 11,
+        color: textMuted,
+        formatter: '{value}%'
+      },
+      axisLine: { show: false }
+    },
+    series: [
+      {
+        type: 'bar',
+        data: percentValues,
+        barMaxWidth: 28,
+        itemStyle: { borderRadius: [4, 4, 0, 0], color: barColor },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 11,
+          color: textRegular,
+          distance: 1,
+          formatter: (params: unknown) => {
+            const v = (params as { value?: number }).value
+            return typeof v === 'number' && Number.isFinite(v) ? `${v.toFixed(1)}%` : ''
+          }
+        }
+      }
+    ]
+  }
+}
+
+/** 小类销售额：纵向柱（Y 轴为金额元） */
+function verticalBarMoneyChart(categories: string[], amounts: number[], barColor: string): EChartsOption {
+  void isDark.value
+  const textMuted = elTextSecondary.value || '#909399'
+  const textRegular = elTextRegular.value || '#606266'
+  const borderLine = elBorderColor.value || '#dcdfe6'
+  const split = elFillLight.value || '#ebeef5'
+  const rot = categories.length > 5
+  const fmtMoney = (n: number) =>
+    n.toLocaleString('zh-CN', { maximumFractionDigits: 2 })
+  /** containLabel：左側 Y 軸（元 / 萬）預留寬度，避免裁切 */
+  const gridMini = rot
+    ? { left: 6, right: 8, top: 10, bottom: 26, containLabel: true }
+    : { left: 6, right: 8, top: 10, bottom: 18, containLabel: true }
+  const amtPeak = Math.max(0, ...amounts.filter((x) => Number.isFinite(x)).map((x) => Number(x)))
+  const moneyYmax =
+    amtPeak <= 0
+      ? 1
+      : (() => {
+          const exp = 10 ** Math.floor(Math.log10(amtPeak))
+          return Math.ceil((amtPeak * 1.12) / exp) * exp
+        })()
+  return {
+    backgroundColor: 'transparent',
+    animationDuration: 300,
+    grid: gridMini,
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      backgroundColor: elBgColor.value,
+      borderColor: borderLine,
+      textStyle: { color: textRegular, fontSize: 14 },
+      formatter: (ps: unknown) => {
+        const raw = Array.isArray(ps) ? ps[0] : ps
+        const di = (raw as { dataIndex?: number }).dataIndex ?? 0
+        const name = categories[di] ?? ''
+        const amt = amounts[di]
+        const amtStr =
+          amt !== undefined && Number.isFinite(amt) ? fmtMoney(amt) : '--'
+        return `<div>${name}<br/>销售额：<b>${amtStr}</b> 元</div>`
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: categories,
+      axisTick: { show: false },
+      axisLine: { lineStyle: { color: borderLine } },
+      axisLabel: {
+        interval: 0,
+        rotate: rot ? 26 : 0,
+        fontSize: 11,
+        color: textMuted,
+        margin: 2
+      }
+    },
+    yAxis: {
+      type: 'value',
+      min: 0,
+      max: moneyYmax,
+      splitLine: { lineStyle: { type: 'dashed', color: split } },
+      axisLabel: {
+        fontSize: 11,
+        color: textMuted,
+        formatter: (val: string | number) => {
+          const n = typeof val === 'number' ? val : parseFloat(String(val))
+          if (!Number.isFinite(n)) return ''
+          if (n >= 10000) return `${(n / 10000).toFixed(n >= 100000 ? 0 : 1)}万`
+          return n.toLocaleString('zh-CN', { maximumFractionDigits: 0 })
+        }
+      },
+      axisLine: { show: false }
+    },
+    series: [
+      {
+        type: 'bar',
+        data: amounts,
+        barMaxWidth: 28,
+        itemStyle: { borderRadius: [4, 4, 0, 0], color: barColor },
+        label: {
+          show: true,
+          position: 'top',
+          fontSize: 11,
+          color: textRegular,
+          distance: 1,
+          formatter: (params: unknown) => {
+            const v = (params as { value?: number }).value
+            return typeof v === 'number' && Number.isFinite(v) ? fmtMoney(v) : ''
+          }
+        }
+      }
+    ]
+  }
+}
+/** 图表无数据占位 */
+function emptyMiniChartPlaceholder(text: string): EChartsOption {
+  void isDark.value
+  const muted = elTextSecondary.value || '#909399'
+  return {
+    backgroundColor: 'transparent',
+    graphic: [
+      {
+        type: 'text',
+        left: 'center',
+        top: 'center',
+        style: { text, fill: muted, fontSize: 15, fontWeight: 500 }
+      }
+    ]
+  }
+}
+
+/** 金额占比环形图（如款式形态 ZJE）；showOutsideLabels 为真时扇区外侧显示金额与占比 */
+function pieMoneyShareOptions(
+  slices: { name: string; value: number }[],
+  pals: string[],
+  emptyHint: string,
+  opts?: { showOutsideLabels?: boolean }
+): EChartsOption {
+  void isDark.value
+  if (!slices.length) return emptyMiniChartPlaceholder(emptyHint)
+  const textRegular = elTextRegular.value || '#606266'
+  const borderLine = elBorderColor.value || '#dcdfe6'
+  const showLabels = !!opts?.showOutsideLabels
+  const data = slices.map((s, i) => ({
+    name: truncateLabel(s.name, 14),
+    value: s.value,
+    itemStyle: { color: pals[i % pals.length]! }
+  }))
+  return {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: elBgColor.value,
+      borderColor: borderLine,
+      textStyle: { color: textRegular, fontSize: 14 },
+      formatter: (p: unknown) => {
+        const px = p as { name?: string; value?: number; percent?: number }
+        const v =
+          px.value !== undefined
+            ? Number(px.value).toLocaleString('zh-CN', { maximumFractionDigits: 2 })
+            : '--'
+        return `${px.name ?? ''}<br/><b>${v}</b> 元（${Math.round(px.percent ?? 0)}%）`
+      }
+    },
+    legend: {
+      type: 'scroll',
+      orient: 'horizontal',
+      bottom: 0,
+      left: 'center',
+      width: '98%',
+      itemGap: 4,
+      icon: 'circle',
+      itemWidth: 7,
+      itemHeight: 7,
+      padding: [0, 2, 0, 2],
+      textStyle: { fontSize: 10, color: elTextSecondary.value }
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['30%', '50%'],
+        center: ['50%', '44%'],
+        avoidLabelOverlap: true,
+        itemStyle: { borderRadius: 4 },
+        label: showLabels
+          ? {
+              show: true,
+              fontSize: 12,
+              color: textRegular,
+              formatter: (x: unknown) => {
+                const xx = x as { name?: string; value?: number; percent?: number }
+                const pv = xx.percent != null ? Math.round(xx.percent) : 0
+                const val =
+                  xx.value !== undefined
+                    ? Number(xx.value).toLocaleString('zh-CN', { maximumFractionDigits: 1 })
+                    : ''
+                return `${xx.name ?? ''}\n${val}元\n${pv}%`
+              }
+            }
+          : {
+              show: false
+            },
+        labelLine: showLabels ? { show: true, length: 6, length2: 4 } : { show: false },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 11,
+            formatter: '{b}\n{d}%'
+          }
+        },
+        data
+      }
+    ]
+  }
+}
+
+type Sx4MoneyHbRow = { name: string; value: number; hbPct: number | null }
+
+/** 金额环形 + 款式形态环比柱；有环比列时柱顶显示数值，无环比时仅环形并外显标签 */
+function pieMoneyShareWithHbBarOptions(rows: Sx4MoneyHbRow[], pals: string[], emptyHint: string): EChartsOption {
+  void isDark.value
+  const pieSlices = rows.filter((r) => r.value > 0)
+  const hbItems = rows
+    .filter((r) => r.hbPct != null && Number.isFinite(r.hbPct as number))
+    .map((r) => ({
+      name: truncateLabel(r.name, 10),
+      fullName: truncateLabel(r.name, 14),
+      hb: r.hbPct as number
+    }))
+    .sort((a, b) => Math.abs(b.hb) - Math.abs(a.hb))
+    .slice(0, 12)
+
+  const showHb = hbItems.length > 0
+  if (!pieSlices.length && !showHb) return emptyMiniChartPlaceholder(emptyHint)
+  if (!showHb) {
+    return pieMoneyShareOptions(
+      pieSlices.map((s) => ({ name: s.name, value: s.value })),
+      pals,
+      emptyHint,
+      { showOutsideLabels: true }
+    )
+  }
+
+  const textRegular = elTextRegular.value || '#606266'
+  const borderLine = elBorderColor.value || '#dcdfe6'
+  const split = elFillLight.value || '#ebeef5'
+  const muted = elTextSecondary.value || '#909399'
+  const up = pals[1] ?? '#67c23a'
+  const down = pals[3] ?? '#f56c6c'
+
+  const pieData = pieSlices.map((s, i) => ({
+    name: truncateLabel(s.name, 14),
+    value: s.value,
+    itemStyle: { color: pals[i % pals.length]! }
+  }))
+
+  const fmtHb = (v: number) => {
+    if (!Number.isFinite(v)) return ''
+    const sign = v > 0 ? '+' : ''
+    return `${sign}${v.toFixed(1)}%`
+  }
+
+  const hbLabels = hbItems.map((x) => x.name)
+  const rotX = hbLabels.length > 6
+  const hbVals = hbItems.map((x) => x.hb)
+  const hbRawMin = hbVals.length ? Math.min(...hbVals) : 0
+  const hbRawMax = hbVals.length ? Math.max(...hbVals) : 0
+  const hbSpan = Math.max(Math.abs(hbRawMax - hbRawMin), 4)
+  const hbPad = Math.max(0.8, hbSpan * 0.12)
+  const hbYMin = Math.min(0, Math.floor((hbRawMin - hbPad) / 2) * 2)
+  const hbYMaxAxis = Math.max(5, Math.ceil((hbRawMax + hbPad) / 2) * 2)
+
+  const series: NonNullable<EChartsOption['series']> = []
+
+  if (pieData.length) {
+    series.push({
+      type: 'pie',
+      /** 縮 legend 邊距、放大環形（外層格線不變） */
+      radius: ['34%', '58%'],
+      center: ['50%', '33%'],
+      avoidLabelOverlap: true,
+      itemStyle: { borderRadius: 4 },
+      label: {
+        show: true,
+        position: 'inside',
+        fontSize: 11,
+        color: '#fff',
+        textBorderColor: 'rgba(0,0,0,0.35)',
+        textBorderWidth: 1,
+        formatter: (x: unknown) => {
+          const xx = x as { percent?: number }
+          const pv = xx.percent != null ? Math.round(xx.percent) : 0
+          return pv > 5 ? `${pv}%` : ''
+        }
+      },
+      labelLine: { show: false },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 12,
+          formatter: '{b}\n{d}%'
+        }
+      },
+      data: pieData
+    })
+  }
+
+  series.push({
+    type: 'bar',
+    name: '环比',
+    data: hbItems.map((x) => ({
+      value: x.hb,
+      itemStyle: { color: x.hb >= 0 ? up : down, borderRadius: [3, 3, 0, 0] }
+    })),
+    barMaxWidth: 18,
+    label: {
+      show: true,
+      position: 'top',
+      distance: 1,
+      fontSize: 12,
+      color: textRegular,
+      formatter: (p: unknown) => {
+        const v = (p as { value?: number }).value
+        return typeof v === 'number' && Number.isFinite(v) ? fmtHb(v) : ''
+      }
+    }
+  })
+
+  return {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: elBgColor.value,
+      borderColor: borderLine,
+      textStyle: { color: textRegular, fontSize: 13 },
+      formatter: (p: unknown) => {
+        const px = p as {
+          seriesType?: string
+          name?: string
+          value?: number
+          percent?: number
+          dataIndex?: number
+        }
+        if (px.seriesType === 'pie') {
+          const v =
+            px.value !== undefined
+              ? Number(px.value).toLocaleString('zh-CN', { maximumFractionDigits: 2 })
+              : '--'
+          return `${px.name ?? ''}<br/><b>${v}</b> 元（${Math.round(px.percent ?? 0)}%）`
+        }
+        if (px.seriesType === 'bar') {
+          const di = px.dataIndex ?? 0
+          const nm = hbItems[di]?.fullName ?? px.name ?? ''
+          const v = Number(px.value)
+          return `${nm}<br/>环比：<b>${fmtHb(v)}</b>`
+        }
+        return ''
+      }
+    },
+    ...(pieData.length
+      ? {
+          legend: {
+            type: 'scroll' as const,
+            orient: 'horizontal' as const,
+            bottom: 0,
+            top: 'auto' as const,
+            left: 'center',
+            width: '98%',
+            itemGap: 3,
+            icon: 'circle',
+            itemWidth: 5,
+            itemHeight: 5,
+            padding: [0, 0, 0, 0],
+            textStyle: { fontSize: 10, color: muted },
+            data: pieData.map((d) => d.name)
+          }
+        }
+      : {}),
+    grid: {
+      left: rotX ? '6%' : 20,
+      right: 3,
+      top: 48,
+      bottom: pieData.length ? 26 : 10,
+      containLabel: false
+    },
+    xAxis: {
+      type: 'category',
+      data: hbLabels,
+      axisTick: { show: false },
+      axisLine: { lineStyle: { color: borderLine } },
+      axisLabel: {
+        interval: 0,
+        rotate: rotX ? 28 : 0,
+        fontSize: 12,
+        color: muted,
+        margin: 2
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: '环比',
+      nameTextStyle: { fontSize: 11, color: muted },
+      min: hbYMin,
+      max: hbYMaxAxis,
+      splitLine: { lineStyle: { type: 'dashed', color: split } },
+      axisLabel: {
+        fontSize: 12,
+        color: muted,
+        formatter: (val: number) => `${val}%`
+      },
+      axisLine: { show: false }
+    },
+    series
+  }
+}
+
+/** 第一格：混合包=全店大类占比（%）竖柱；明细=商品销量横向 TOP */
+const chartPrimarySlotOptions = computed<EChartsOption>(() => {
+  const rows = plct2Rows.value
+  if (!rows.length) return emptyMiniChartPlaceholder('暂无明细')
+
+  if (plct2IsMixedDashboardBundle(rows)) {
+    const dr = rows.filter(
+      (r) => r && typeof r === 'object' && isDaleiSlRow(r as Record<string, any>)
+    )
+    const merged = new Map<string, number>()
+    for (const r of dr) {
+      const rec = r as Record<string, any>
+      const name =
+        String(rec.DLMC ?? rec.dlmc ?? rec.DLDM ?? rec.dldm ?? '').trim() || '--'
+      const sl = toFiniteNumber(rec.SL ?? rec.sl)
+      if (!Number.isFinite(sl)) continue
+      merged.set(name, (merged.get(name) ?? 0) + sl)
+    }
+    const sorted = [...merged.entries()].sort((a, b) => b[1] - a[1]).slice(0, 16)
+    if (!sorted.length) return emptyMiniChartPlaceholder('暂无大类占比')
+    const total = sorted.reduce((acc, [, v]) => acc + v, 0)
+    if (!(total > 0)) return emptyMiniChartPlaceholder('暂无大类占比')
+    const labels = sorted.map(([k]) => truncateLabel(k, 12))
+    const slArr = sorted.map(([, v]) => Math.round(v))
+    const pctArr = slArr.map((sl) => (sl / total) * 100)
+    return verticalBarSharePercentChart(
+      labels,
+      pctArr,
+      slArr,
+      chartAccentColors.value[1]!,
+      '销量'
+    )
+  }
+
+  let items = [...aggregatePlct2BySpdm(rows)].sort((a, b) => b.sl - a.sl).slice(0, 12)
+  items = items.sort((a, b) => a.sl - b.sl)
+  const labels = items.map((x) => x.label)
+  const values = items.map((x) => x.sl)
+  if (!values.some((x) => x > 0)) return emptyMiniChartPlaceholder('暂无销量')
+
+  return horizontalBarChartBase(labels, values, chartAccentColors.value[0]!, ' 件')
+})
+
+/** 第二格：混合包=小类销售额（竖柱）；明细=颜色销量占比 */
+const chartSecondarySlotOptions = computed<EChartsOption>(() => {
+  void isDark.value
+  const rows = plct2Rows.value
+  if (!rows.length) return emptyMiniChartPlaceholder('暂无明细')
+
+  if (plct2IsMixedDashboardBundle(rows)) {
+    const ppRows = rows.filter(
+      (r) => r && typeof r === 'object' && isPpJeRow(r as Record<string, any>)
+    )
+    const merged = new Map<string, number>()
+    for (const r of ppRows) {
+      const rec = r as Record<string, any>
+      const name = String(rec.PP ?? rec.pp ?? '').trim()
+      if (!name) continue
+      const je = toFiniteNumber(rec.je ?? rec.JE)
+      if (!Number.isFinite(je)) continue
+      merged.set(name, (merged.get(name) ?? 0) + je)
+    }
+    const sorted = [...merged.entries()].sort((a, b) => b[1] - a[1]).slice(0, 16)
+    const labels = sorted.map(([k]) => truncateLabel(k, 12))
+    const values = sorted.map(([, v]) => v)
+    if (!values.some((x) => x > 0)) return emptyMiniChartPlaceholder('暂无品类金额')
+    return verticalBarMoneyChart(labels, values, chartAccentColors.value[0]!)
+  }
+
+  const slices = aggregateColorSales(rows)
+  if (!slices.length) return emptyMiniChartPlaceholder('暂无颜色维度')
+
+  const textRegular = elTextRegular.value || '#606266'
+  const borderLine = elBorderColor.value || '#dcdfe6'
+  const pals = chartAccentColors.value
+  const data = slices.map((s, i) => ({
+    name: truncateLabel(s.name, 14),
+    value: s.value,
+    itemStyle: { color: pals[i % pals.length] }
+  }))
+  return {
+    backgroundColor: 'transparent',
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: elBgColor.value,
+      borderColor: borderLine,
+      textStyle: { color: textRegular, fontSize: 14 },
+      formatter: (p: unknown) => {
+        const px = p as { name?: string; value?: number; percent?: number }
+        const v =
+          px.value !== undefined ? Number(px.value).toLocaleString('zh-CN', { maximumFractionDigits: 0 }) : '--'
+        return `${px.name}<br/><b>${v}</b> 件（${Math.round(px.percent ?? 0)}%）`
+      }
+    },
+    legend: {
+      type: 'scroll',
+      orient: 'horizontal',
+      bottom: 0,
+      left: 'center',
+      width: '98%',
+      itemGap: 4,
+      icon: 'circle',
+      itemWidth: 7,
+      itemHeight: 7,
+      padding: [0, 2, 0, 2],
+      textStyle: { fontSize: 10, color: elTextSecondary.value }
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['30%', '50%'],
+        center: ['50%', '44%'],
+        avoidLabelOverlap: true,
+        itemStyle: { borderRadius: 4 },
+        label: {
+          show: false
+        },
+        labelLine: { show: false },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 11,
+            formatter: '{b}\n{d}%'
+          }
+        },
+        data
+      }
+    ]
+  }
+})
+
+/** ③ / 款式形态金额占比（混合包）或 商品库存 TOP */
+const chartZkcTopOptions = computed<EChartsOption>(() => {
+  const rows = plct2Rows.value
+  if (!rows.length) return emptyMiniChartPlaceholder('暂无明细')
+
+  if (plct2IsMixedDashboardBundle(rows)) {
+    const sr = rows.filter(
+      (r) => r && typeof r === 'object' && isSx4ZjeRow(r as Record<string, any>)
+    )
+    const merged = new Map<string, { zje: number; hbPts: number[] }>()
+    for (const r of sr) {
+      const rec = r as Record<string, any>
+      const name =
+        String(rec.SX4MC ?? rec.sx4mc ?? rec.SX4DM ?? rec.sx4dm ?? '').trim() || '--'
+      const zje = toFiniteNumber(rec.ZJE ?? rec.zje)
+      const hb = pickSx4RowHbPct(rec)
+      const prev = merged.get(name) ?? { zje: 0, hbPts: [] as number[] }
+      if (Number.isFinite(zje)) prev.zje += zje
+      if (hb != null) prev.hbPts.push(hb)
+      merged.set(name, prev)
+    }
+    const rowsMixed: Sx4MoneyHbRow[] = [...merged.entries()].map(([name, agg]) => ({
+      name,
+      value: agg.zje,
+      hbPct:
+        agg.hbPts.length > 0
+          ? agg.hbPts.reduce((a, b) => a + b, 0) / agg.hbPts.length
+          : null
+    }))
+    return pieMoneyShareWithHbBarOptions(rowsMixed, chartAccentColors.value, '暂无款式形态金额')
+  }
+
+  let items = [...aggregatePlct2BySpdm(rows)].sort((a, b) => b.zkc - a.zkc).slice(0, 12)
+  items = items.sort((a, b) => a.zkc - b.zkc)
+  const labels = items.map((x) => x.label)
+  const values = items.map((x) => Math.round(x.zkc))
+  if (!values.some((x) => x > 0)) return emptyMiniChartPlaceholder('暂无库存')
+
+  return horizontalBarChartBase(labels, values, chartAccentColors.value[3]!, ' 件')
+})
+
+/** ④ / 季节销量·库存（混合包）或 尺码库存分布 */
+const chartSizeKcOptions = computed<EChartsOption>(() => {
+  void isDark.value
+  const rows = plct2Rows.value
+  if (!rows.length) return emptyMiniChartPlaceholder('暂无明细')
+
+  if (plct2IsMixedDashboardBundle(rows)) {
+    /** 混合包第四格改用表格列表，占位避免误用 */
+    return emptyMiniChartPlaceholder('')
+  }
+
+  const pairsKc = mergeSizeFieldFromRows(rows, ['kccm', 'KCCM'])
+  const pairs = pairsKc.length
+    ? pairsKc.slice(0, 14)
+    : mergeSizeFieldFromRows(rows, ['lscm', 'LSCM']).slice(0, 14)
+  if (!pairs.length) return emptyMiniChartPlaceholder('暂无尺码明细')
+  const primary = chartAccentColors.value[1]!
+  const textMuted = elTextSecondary.value || '#909399'
+  const textRegular = elTextRegular.value || '#606266'
+  const borderLine = elBorderColor.value || '#dcdfe6'
+  const split = elFillLight.value || '#ebeef5'
+  const labels = pairs.map(([k]) => k)
+  const values = pairs.map(([, v]) => Math.round(v))
+  const rotateX = labels.length > 10
+  return {
+    backgroundColor: 'transparent',
+    grid: {
+      left: rotateX ? '5%' : 18,
+      right: 6,
+      top: 6,
+      bottom: rotateX ? 30 : 16,
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: { type: 'shadow' },
+      backgroundColor: elBgColor.value,
+      borderColor: borderLine,
+      textStyle: { color: textRegular, fontSize: 14 }
+    },
+    xAxis: {
+      type: 'category',
+      data: labels,
+      axisLabel: {
+        rotate: labels.length > 10 ? -28 : 0,
+        interval: 0,
+        fontSize: 12,
+        color: textMuted
+      },
+      axisTick: { show: false },
+      axisLine: { lineStyle: { color: borderLine } }
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { lineStyle: { type: 'dashed', color: split } },
+      axisLabel: { fontSize: 12, color: textMuted }
+    },
+    series: [
+      {
+        type: 'bar',
+        barMaxWidth: 22,
+        data: values,
+        itemStyle: { borderRadius: [4, 4, 0, 0], color: primary }
+      }
+    ]
+  }
+})
+
+/** PLCT3 表格列顺序：优先常用业务字段；零售相关列先于库存列（含 ls/kcsl、lscm/kccm、中文列名） */
+const PLCT3_PRIO = [
+  'pic',
+  'spdm',
+  'spmc',
+  'ysmc',
+  'ssrq',
+  'sl',
+  'zkc',
+  'ls',
+  'kcsl',
+  '零售',
+  '库存',
+  'lscm',
+  'kccm',
+  'sku明细',
+  '尺码',
+  'cm',
+  'chima',
+  'ggdm',
+  'zzt'
+]
+
+const plct3DynamicKeys = computed(() => {
+  const rows = plct3Rows.value
+  if (!rows.length) return [] as string[]
+  /** 合併所有行的欄位：避免僅用首行導致後續行才有的 kccm/lscm（尺碼串）不顯示 */
+  const keySet = new Set<string>()
+  for (const row of rows) {
+    if (!row || typeof row !== 'object') continue
+    for (const k of Object.keys(row)) {
+      const t = String(k).trim()
+      if (!t || PLCT3_HIDDEN_KEYS.test(t)) continue
+      keySet.add(k)
+    }
+  }
+  return Array.from(keySet)
+})
+
+function orderPlct3Cols(keys: string[]): string[] {
+  const byLower = new Map(keys.map((k) => [k.toLowerCase(), k]))
+  const out: string[] = []
+  const used = new Set<string>()
+  for (const p of PLCT3_PRIO) {
+    const k = byLower.get(p)
+    if (k && !used.has(k)) {
+      out.push(k)
+      used.add(k)
+    }
+  }
+  const rest = keys.filter((k) => !used.has(k)).sort((a, b) => a.localeCompare(b, 'zh-CN'))
+  out.push(...rest)
+  return out
+}
+
+const plct3Columns = computed(() => orderPlct3Cols(plct3DynamicKeys.value))
+
+type Plct3TableColPlain = { type: 'plain'; key: string }
+type Plct3TableColSku = { type: 'sku'; spdmKey: string; spmcKey: string }
+/** 合併 KCCM（庫存）+ LSCM（零售）字串為「SKU明细（尺码）」一欄 */
+type Plct3TableColSizeSku = { type: 'sizeSku'; kccmKey?: string; lscmKey?: string }
+type Plct3TableCol = Plct3TableColPlain | Plct3TableColSku | Plct3TableColSizeSku
+
+type Plct3SizeTile = { label: string; kc: number | null; ls: number | null; zt?: string }
+
+/** 尺碼狀態 zt 樣式（斷/缺、補貨等） */
+function plct3SizeZtClass(zt: string): string {
+  const s = String(zt).trim()
+  if (!s) return ''
+  if (/断|缺|紧|空|無|无/.test(s)) return 'plct3-size-zt--danger'
+  if (/补|到|齐|足|有/.test(s)) return 'plct3-size-zt--ok'
+  if (/滞|慢|預|预/.test(s)) return 'plct3-size-zt--warn'
+  return 'plct3-size-zt--muted'
+}
+
+/** 尺碼明細行按 商品代碼 + 顏色代碼(ysdm) 歸并，供匯總表列渲染 */
+const plct3SizeTilesBySpYsdm = computed(() => {
+  const buckets = new Map<string, Plct3SizeTile[]>()
+  for (const r of plct3SkuSizeLines.value) {
+    const sp = String(r.spdm ?? r.SPDM ?? '').trim()
+    const ysdm = String(r.ysdm ?? r.YSDM ?? '').trim()
+    const label = String(r.cm ?? r.CM ?? '').trim()
+    if (!sp || !label) continue
+    const kcN = toFiniteNumber(r.kcsl ?? r.KCSL)
+    const lsN = toFiniteNumber(r.ls ?? r.LS)
+    const kc = Number.isFinite(kcN) ? Math.round(kcN) : null
+    const ls = Number.isFinite(lsN) ? Math.round(lsN) : null
+    const ztRaw = String(r.zt ?? r.ZT ?? '').trim()
+    const key = `${sp}\0${ysdm}`
+    const arr = buckets.get(key) ?? []
+    arr.push({ label, kc, ls, zt: ztRaw || undefined })
+    buckets.set(key, arr)
+  }
+  const out = new Map<string, Plct3SizeTile[]>()
+  for (const [key, tiles] of buckets) {
+    const merged = new Map<
+      string,
+      { kc: number; ls: number; hasKc: boolean; hasLs: boolean; zts: Set<string> }
+    >()
+    for (const t of tiles) {
+      const prev = merged.get(t.label) ?? {
+        kc: 0,
+        ls: 0,
+        hasKc: false,
+        hasLs: false,
+        zts: new Set<string>()
+      }
+      if (t.kc != null) {
+        prev.kc += t.kc
+        prev.hasKc = true
+      }
+      if (t.ls != null) {
+        prev.ls += t.ls
+        prev.hasLs = true
+      }
+      if (t.zt) prev.zts.add(t.zt)
+      merged.set(t.label, prev)
+    }
+    const list: Plct3SizeTile[] = [...merged.entries()].map(([label, v]) => ({
+      label,
+      kc: v.hasKc ? v.kc : null,
+      ls: v.hasLs ? v.ls : null,
+      zt: v.zts.size ? [...v.zts].join('、') : undefined
+    }))
+    list.sort((a, b) => a.label.localeCompare(b.label, 'zh-CN', { numeric: true }))
+    out.set(key, list)
+  }
+  return out
+})
+
+function plct3RowSizeTiles(row: Record<string, any>, col: Plct3TableColSizeSku): Plct3SizeTile[] {
+  const kcMap = col.kccmKey ? parsePlct3SizeAmounts(row[col.kccmKey]) : new Map<string, number>()
+  const lsMap = col.lscmKey ? parsePlct3SizeAmounts(row[col.lscmKey]) : new Map<string, number>()
+  if (kcMap.size > 0 || lsMap.size > 0) {
+    const labels = new Set<string>([...kcMap.keys(), ...lsMap.keys()])
+    return [...labels]
+      .map((label) => ({
+        label,
+        kc: kcMap.has(label) ? Math.round(kcMap.get(label)!) : null,
+        ls: lsMap.has(label) ? Math.round(lsMap.get(label)!) : null
+      }))
+      .sort((a, b) => a.label.localeCompare(b.label, 'zh-CN', { numeric: true }))
+  }
+  const sp = String(row.SPDM ?? row.spdm ?? '').trim()
+  const ysdm = String(row.ysdm ?? row.YSDM ?? '').trim()
+  const fromDetail = plct3SizeTilesBySpYsdm.value.get(`${sp}\0${ysdm}`)
+  return fromDetail?.length ? fromDetail : []
+}
+
+function plct3SizeColRawFallback(row: Record<string, any>, col: Plct3TableColSizeSku): string {
+  const parts: string[] = []
+  if (col.kccmKey) {
+    const s = String(row[col.kccmKey] ?? '').trim()
+    if (s) parts.push(s)
+  }
+  if (col.lscmKey) {
+    const s = String(row[col.lscmKey] ?? '').trim()
+    if (s) parts.push(s)
+  }
+  return parts.join(' ')
+}
+
+/** 同时将商品代码、商品名称并入一列展示（任缺一则仍保留原独立列） */
+const plct3DisplayCols = computed<Plct3TableCol[]>(() => {
+  const ordered = plct3Columns.value
+  const byLo = new Map(ordered.map((k) => [k.toLowerCase(), k]))
+  const spdmKey = byLo.get('spdm')
+  const spmcKey = byLo.get('spmc')
+  const kccmKey = byLo.get('kccm')
+  const lscmKey = byLo.get('lscm')
+  const hasSizeSku = !!(kccmKey || lscmKey) || plct3SkuSizeLines.value.length > 0
+  const merge = !!(spdmKey && spmcKey)
+  const out: Plct3TableCol[] = []
+  let sizeInserted = false
+  const insertSizeCol = () => {
+    if (sizeInserted || !hasSizeSku) return
+    out.push({ type: 'sizeSku', kccmKey, lscmKey })
+    sizeInserted = true
+  }
+  for (const col of ordered) {
+    const lo = col.toLowerCase()
+    if (hasSizeSku && (lo === 'lscm' || lo === 'kccm')) continue
+    if (merge && lo === 'spmc') continue
+    if (merge && lo === 'spdm') {
+      out.push({ type: 'sku', spdmKey: spdmKey!, spmcKey: spmcKey! })
+      insertSizeCol()
+      continue
+    }
+    out.push({ type: 'plain', key: col })
+    if (!merge && lo === 'ysmc') insertSizeCol()
+  }
+  insertSizeCol()
+  return out
+})
+
+function plct3DisplayColLabel(col: Plct3TableCol): string {
+  if (col.type === 'sku') return '商品代码 / 名称'
+  if (col.type === 'sizeSku') return 'SKU明细（尺码）'
+  return plct3ColumnLabel(col.key)
+}
+
+function plct3DisplayColMinWidth(col: Plct3TableCol): number {
+  if (col.type === 'sku') return 168
+  if (col.type === 'sizeSku') return 212
+  return plct3ColMinWidth(col.key)
+}
+
+const PLCT3_LABEL_MAP: Record<string, string> = {
+  pic: '图片',
+  spdm: '商品代码',
+  spmc: '商品名称',
+  ysmc: '颜色',
+  ssrq: '上市日期',
+  sl: '销量',
+  zkc: '总库存',
+  ls: '零售',
+  kcsl: '库存',
+  lscm: '零售尺码',
+  kccm: '库存尺码',
+  cm: '尺码',
+  chima: '尺码',
+  ggdm: '规格',
+  zzt: '周转天',
+  je: '价格',
+  /** 與報表「SKU明细(尺码)」口徑一致的中文/別名列名 */
+  SKU明细: 'SKU明细(尺码)',
+  sku明细: 'SKU明细(尺码)',
+  尺码: '尺码',
+  尺码明细: '尺码明细',
+  /** 兼容接口/别名列名直出中文表头 */
+  零售: '零售',
+  零售业: '零售',
+  零售業: '零售',
+  库存: '库存'
+}
+
+function plct3ColumnLabel(col: string): string {
+  const raw = String(col).trim()
+  const k = raw.toLowerCase()
+  return PLCT3_LABEL_MAP[raw] ?? PLCT3_LABEL_MAP[k] ?? col
+}
+
+function plct3ColMinWidth(col: string): number {
+  const k = col.toLowerCase()
+  if (k === 'pic') return 72
+  if (k === 'lscm' || k === 'kccm' || k === 'ls' || k === 'kcsl' || k === 'cm' || k === 'chima')
+    return 168
+  if (k === 'spmc') return 120
+  return 92
+}
+
+function isPlct3PicCol(col: string): boolean {
+  const k = String(col || '').trim().toLowerCase()
+  return k === 'pic' || k.includes('image') || k.includes('图片')
+}
+
+function normalizePlct3PicUrl(url: string): string {
+  const u = String(url || '').trim()
+  if (!u) return ''
+  if (u.startsWith('//')) return `https:${u}`
+  return u
+}
+
+function plct3CellPicUrl(raw: unknown): string | '' {
+  const u = normalizePlct3PicUrl(String(raw ?? '').trim())
+  return u || ''
+}
+
+function plct3FormatCell(v: unknown): string {
+  if (v == null || v === '') return '—'
+  if (typeof v === 'number' && Number.isFinite(v)) return String(v)
+  const s = String(v).trim()
+  return s || '—'
+}
+
+function extractProcedureData(res: any): any {
+  return res?.data !== undefined ? res.data : res
+}
+
+function extractProcedureList(res: any): any[] {
+  const raw = extractProcedureData(res)
+  if (Array.isArray(raw)) return raw
+  if (Array.isArray(raw?.list)) return raw.list
+  if (Array.isArray(raw?.data)) return raw.data
+  return []
+}
+
+async function loadUserStores() {
+  try {
+    const res = await ReportApi.executeProcedureWithData({
+      reportId: REPORT_ID,
+      name: PROC_QX_KEHU,
+      p: PROCEDURE_SECRET,
+      username: username.value
+    } satisfies ExecuteProcedureParams)
+    const list = extractProcedureList(res)
+    const rows = list
+      .map((row: any) => ({
+        ckdm: String(row.CKDM ?? row.ckdm ?? '').trim(),
+        ckmc: String(row.CKMC ?? row.ckmc ?? '').trim(),
+        city: String(row.CITY ?? row.city ?? '').trim()
+      }))
+      .filter((r) => r.ckdm)
+    userStoreRows.value = rows
+  } catch (e) {
+    console.warn('加载用户门店失败:', e)
+    userStoreRows.value = []
+  }
+}
+
+async function loadBrandOptions() {
+  try {
+    const res = await ReportApi.executeTable({ reportId: REPORT_ID, tableName: 'pinpai' })
+    const list = extractProcedureList(res)
+    const options = list
+      .map((row: any) => ({
+        label: String(row.PPMC ?? row.ppmc ?? row.PP ?? row.pp ?? '').trim(),
+        value: String(row.PPDM ?? row.ppdm ?? row.PP ?? row.pp ?? '').trim()
+      }))
+      .filter((opt) => opt.label && opt.value)
+    brandOptions.value = options
+  } catch (e) {
+    console.warn('加载品牌选项失败:', e)
+    brandOptions.value = []
+  }
+}
+
+function ensureSelectionsAfterSync() {
+  const sos = storeSelectOptions.value
+  if (sos.length) {
+    if (!queryForm.ckdm || !sos.some((o) => o.value === queryForm.ckdm)) {
+      queryForm.ckdm = sos[0].value
+    }
+  }
+  const bos = brandOptions.value
+  if (bos.length && queryForm.pp && !bos.some((o) => o.value === queryForm.pp)) {
+    queryForm.pp = ''
+  }
+}
+
+async function handleQuery() {
+  const rq = String(queryForm.rq || '').trim()
+  const ckdm = String(queryForm.ckdm || '').trim()
+  const pp = String(queryForm.pp || '').trim()
+  if (!rq || !ckdm || !pp) {
+    ElMessage.warning('请选择日期、门店与品牌')
+    return
+  }
+  await loadDetail()
+}
+
+async function loadDetail() {
+  const rq = String(queryForm.rq || '').trim()
+  const ckdm = String(queryForm.ckdm || '').trim()
+  const pp = String(queryForm.pp || '').trim()
+  detail.value = null
+  plct2Rows.value = []
+  plct3Rows.value = []
+  plct3SkuSizeLines.value = []
+  if (!rq || !ckdm || !pp) {
+    return
+  }
+  loading.value = true
+  queried.value = true
+  const execPayload = {
+    reportId: REPORT_ID,
+    rq,
+    ckdm,
+    pp,
+    p: PROCEDURE_SECRET,
+    username: username.value
+  }
+  try {
+    const [r1, r2, r3] = await Promise.allSettled([
+      ReportApi.executeProcedureWithData({
+        ...execPayload,
+        name: PROC_PLCT1
+      } satisfies ExecuteProcedureParams),
+      ReportApi.executeProcedureWithData({
+        ...execPayload,
+        name: PROC_PLCT2
+      } satisfies ExecuteProcedureParams),
+      ReportApi.executeProcedureWithData({
+        ...execPayload,
+        name: PROC_PLCT3
+      } satisfies ExecuteProcedureParams)
+    ])
+
+    if (r1.status === 'fulfilled') {
+      const list = extractProcedureList(r1.value).filter((row) => row && typeof row === 'object')
+      detail.value = (list[0] as Record<string, any>) ?? null
+      if (!detail.value) ElMessage.info('暂无汇总数据')
+    } else {
+      console.error(r1.reason)
+      detail.value = null
+      ElMessage.error('汇总穿透查询失败')
+    }
+
+    if (r2.status === 'fulfilled') {
+      plct2Rows.value = extractProcedureList(r2.value).filter(
+        (row) => row && typeof row === 'object'
+      )
+    } else {
+      console.warn('YDY_AI_GET_PLCT2 明细失败:', r2.reason)
+      plct2Rows.value = []
+      if (r1.status === 'fulfilled' && detail.value) {
+        ElMessage.warning('图表明细加载失败，请稍后重试')
+      }
+    }
+
+    if (r3.status === 'fulfilled') {
+      const rawPlct3 = extractProcedureList(r3.value).filter((row) => row && typeof row === 'object')
+      plct3SkuSizeLines.value = rawPlct3.filter((row) => plct3IsSkuSizeLineRow(row as Record<string, any>))
+      plct3Rows.value = rawPlct3.filter((row) => plct3IsProductSummaryRow(row as Record<string, any>))
+    } else {
+      console.warn('YDY_AI_GET_PLCT3 底部明细失败:', r3.reason)
+      plct3Rows.value = []
+      plct3SkuSizeLines.value = []
+      if (r1.status === 'fulfilled' && detail.value) {
+        ElMessage.warning('底部明细加载失败，请稍后重试')
+      }
+    }
+  } catch (e) {
+    console.error('品类穿透查询失败:', e)
+    ElMessage.error('查询失败，请稍后重试')
+    detail.value = null
+    plct2Rows.value = []
+    plct3Rows.value = []
+    plct3SkuSizeLines.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 初次 / 路由同步後：路由帶齊 rq+ckdm+品牌（pp 或 ppmc）且表單已解析則自動查詢 */
+async function bootstrapPenetrationFromRoute() {
+  await Promise.all([loadUserStores(), loadBrandOptions()])
+  syncFormFromRoute()
+  ensureSelectionsAfterSync()
+
+  const rqQ = pickRouteQuery(route.query.rq)
+  const ckdmQ = pickRouteQuery(route.query.ckdm)
+  const ppQ = pickRouteQuery(route.query.pp)
+  const ppmcQ = pickRouteQuery(route.query.ppmc)
+  if (!rqQ || !ckdmQ || !(ppQ || ppmcQ)) return
+
+  const rqOk = String(queryForm.rq || '').trim() === rqQ
+  const ckOk = String(queryForm.ckdm || '').trim() === ckdmQ
+  const ppResolved = String(queryForm.pp || '').trim()
+  if (rqOk && ckOk && ppResolved) {
+    await handleQuery()
+  }
+}
+
+/**
+ * 與 SalesDailyAiReport 一致：從 keep-alive 再次進入時有完整條件則重拉穿透數據。
+ * 首次掛載已由 onMounted 走 bootstrap，此處跳過一次避免雙次請求。
+ */
+let skipPlctActivateRefetchOnce = true
+
+onMounted(async () => {
+  await bootstrapPenetrationFromRoute()
+})
+
+onActivated(() => {
+  if (skipPlctActivateRefetchOnce) {
+    skipPlctActivateRefetchOnce = false
+    return
+  }
+  syncFormFromRoute()
+  ensureSelectionsAfterSync()
+  const rq = String(queryForm.rq || '').trim()
+  const ckdm = String(queryForm.ckdm || '').trim()
+  const pp = String(queryForm.pp || '').trim()
+  if (rq && ckdm && pp) {
+    void handleQuery()
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.plct-page {
+  /* 與 SalesDailyAiReport（.sxrb-page）一致的間距與圓角變量 */
+  --plct-gap: 6px;
+  /** 各模組（工具欄 / 上方面板 / 底部明細）之間距，過寬時可再調此值 */
+  --plct-section-gap: 12px;
+  --plct-card-pad: 10px 12px;
+  --plct-radius: 6px;
+  /**
+   * 結構占比四宮格：首行 / 次行列高下限見 .plct-chart-grid，並隨左欄當日指標等高拉長。
+   */
+
+  margin: 0 -20px -20px -20px;
+  padding: 6px 10px;
+  min-height: calc(100vh - 84px);
+  box-sizing: border-box;
+  background: var(--el-bg-color-page);
+  color: var(--el-text-color-primary);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+    sans-serif;
+  display: flex;
+  flex-direction: column;
+}
+
+.plct-toolbar.card {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 8px 12px;
+  margin-bottom: var(--plct-section-gap);
+  padding: var(--plct-card-pad);
+  background: var(--el-bg-color);
+  border-radius: var(--plct-radius);
+  border: 1px solid var(--el-border-color-light);
+  box-shadow: var(--el-box-shadow-light);
+  flex-shrink: 0;
+}
+
+.plct-query-form {
+  flex: 1 1 280px;
+  min-width: 0;
+
+  :deep(.el-form-item) {
+    margin-bottom: 0;
+    margin-right: 14px;
+  }
+
+  :deep(.el-form-item__label) {
+    color: var(--el-text-color-secondary);
+    font-size: 13px;
+    padding-right: 4px;
+    margin-right: 0;
+  }
+
+  :deep(.el-form-item__content) {
+    margin-left: 0 !important;
+  }
+}
+
+.plct-field-rq {
+  width: 168px;
+}
+
+.plct-field-ckdm {
+  width: 220px;
+}
+
+.plct-field-pp {
+  width: 200px;
+}
+
+.plct-query-actions {
+  margin-right: 0 !important;
+}
+
+.plct-main.card {
+  position: relative;
+  background: transparent;
+  border-radius: 0;
+  border: none;
+  padding: 0;
+  box-shadow: none;
+  min-height: 200px;
+}
+
+.plct-page > .plct-main.card {
+  flex: 1;
+  min-height: 0;
+}
+
+/** 有数据时：主卡片占满视口剩余高度，避免底部表格把整个 flex 链条压矮导致四宫格 ECharts 被挤扁 */
+.plct-main.card:has(> .plct-content-split) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--plct-section-gap);
+  flex: 1;
+  min-height: 0;
+}
+
+.plct-main.card > .plct-content-split {
+  flex-shrink: 0;
+}
+
+.plct-main.card > .plct-detail-module {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.plct-content-split {
+  display: flex;
+  flex-direction: row;
+  /** 與左欄「當日指標」外框等高 */
+  align-items: stretch;
+  gap: var(--plct-section-gap);
+}
+
+.plct-kpi-col,
+.plct-charts-col {
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.plct-charts-col {
+  overflow: hidden;
+}
+
+.plct-kpi-col > .plct-upper-pane {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.plct-charts-col > .plct-charts-shell {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+}
+
+/** 區塊標題：對齊 SalesDailyAiReport 的 .card-title */
+.plct-module-hd {
+  flex-shrink: 0;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.35;
+  margin: 0 0 10px;
+  padding: 0 0 8px 12px;
+  border-left: 3px solid var(--el-color-primary);
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  color: var(--el-text-color-primary);
+}
+
+.plct-detail-module > .plct-module-hd {
+  margin: 0;
+  padding: 8px 12px;
+  border-left: 3px solid var(--el-color-primary);
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.plct-upper-pane--kpi > .plct-module-hd {
+  margin-bottom: 8px;
+}
+
+.plct-charts-shell.plct-upper-pane > .plct-module-hd {
+  margin-bottom: 8px;
+}
+
+.plct-upper-pane {
+  box-sizing: border-box;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--plct-radius);
+  background: var(--el-fill-color-blank);
+  padding: var(--plct-card-pad);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.plct-charts-shell.plct-upper-pane {
+  overflow: hidden;
+  padding: var(--plct-card-pad);
+}
+
+/**
+ * 與左欄「當日指標」塊同高：欄內撐滿，避免僅依四宮格固定像素導致右側較矮。
+ */
+.plct-charts-col > .plct-charts-shell.plct-upper-pane {
+  flex: 1 1 auto;
+  min-height: 0;
+  align-self: stretch;
+  height: auto;
+}
+
+.plct-kpi-col .plct-upper-pane--kpi {
+  min-height: 400px;
+}
+
+.plct-charts-shell {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.plct-chart-grid {
+  --plct-chart-row-gap: 2px;
+  /** 列高下限；超過左欄高度時由 1fr 均分剩餘給上下兩行 */
+  --plct-chart-row-top-h: 165px;
+  --plct-chart-row-bottom-h: 165px;
+
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows:
+    minmax(var(--plct-chart-row-top-h), 1fr) minmax(var(--plct-chart-row-bottom-h), 1fr);
+  gap: var(--plct-chart-row-gap);
+  box-sizing: border-box;
+  align-content: stretch;
+}
+
+.plct-chart-cell {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--plct-radius);
+  background: var(--el-fill-color-blank);
+  overflow: hidden;
+}
+
+.plct-chart-cell--row2 .plct-chart-bd > .plct-jj-mini-wrap {
+  flex: 1 1 0;
+  min-height: 0;
+  height: 100% !important;
+  max-height: 100%;
+  overflow: auto !important;
+}
+
+.plct-chart-hd {
+  flex-shrink: 0;
+  padding: 4px 8px;
+  line-height: 1.35;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.plct-chart-bd {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 0 1px;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  /**
+   * 用 flex:1 1 0 + 子項 height:100% 撐滿格內繪圖區（避免絕對定位與 ECharts 初始化時序問題）。
+   * 季節表用 .plct-jj-mini-wrap：依內容高度，不拉滿避免 tbody 被無效撐開出大空隙。
+   */
+  > * {
+    flex: 1 1 0;
+    min-height: 0;
+    width: 100% !important;
+    height: 100% !important;
+    max-height: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  > .plct-jj-mini-wrap,
+  > .plct-chart-list-empty {
+    flex: 0 1 auto;
+    height: auto !important;
+    max-height: 100%;
+    overflow: auto !important;
+  }
+
+  > .plct-chart-list-empty {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.plct-jj-mini-wrap {
+  min-height: 0;
+  margin: 0;
+}
+
+.plct-chart-list-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 6px 4px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+:deep(.plct-jj-mini-table.el-table) {
+  --el-table-bg-color: transparent;
+  font-size: 11px;
+  height: auto !important;
+
+  .el-table__inner-wrapper {
+    height: auto !important;
+  }
+
+  /** 无底框线与左右分割，仅行间下划线 */
+  &::before,
+  &::after {
+    display: none;
+  }
+
+  .el-table__inner-wrapper::before {
+    display: none;
+  }
+
+  .el-table__header-wrapper th.el-table__cell {
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    border-right: none !important;
+  }
+
+  .el-table__header th.el-table__cell {
+    font-size: 11px;
+    padding: 2px 3px !important;
+    font-weight: 600;
+    background: transparent !important;
+  }
+
+  .el-table__body td.el-table__cell {
+    padding: 2px 3px !important;
+    border-right: none !important;
+    border-bottom: 1px solid var(--el-border-color-lighter);
+    background: transparent !important;
+  }
+
+  .el-table__body tr:last-child td.el-table__cell {
+    border-bottom: none !important;
+  }
+
+  /** 斑马纹与其它 hover 不改变底边结构 */
+  .el-table__body tr:hover > td.el-table__cell {
+    background: var(--el-fill-color-light) !important;
+  }
+
+  .el-table__header th .cell.plct-jj-hd-sl,
+  .el-table__body td.plct-jj-col-sl .cell {
+    color: var(--el-color-primary);
+    font-weight: 600;
+  }
+
+  .el-table__header th .cell.plct-jj-hd-kc,
+  .el-table__body td.plct-jj-col-kc .cell {
+    color: var(--el-color-success);
+    font-weight: 600;
+  }
+}
+
+@media (max-width: 1180px) {
+  .plct-content-split {
+    flex-direction: column;
+  }
+
+  .plct-charts-col {
+    height: auto;
+    min-height: 0;
+  }
+
+  .plct-kpi-col .plct-upper-pane--kpi {
+    min-height: 340px;
+  }
+
+  .plct-chart-grid {
+    --plct-chart-row-top-h: 148px;
+    --plct-chart-row-bottom-h: 148px;
+  }
+}
+
+@media (max-width: 640px) {
+  .plct-chart-grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: repeat(4, minmax(190px, auto));
+    height: auto;
+    max-height: none;
+    min-height: 0;
+    flex: 0 1 auto;
+  }
+}
+
+.plct-bullet-row {
+  flex-shrink: 0;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px 14px;
+  margin-bottom: 8px;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.plct-bullet {
+  padding: 0;
+  border-radius: 0;
+  border: none;
+  background: transparent;
+}
+
+.plct-bullet-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.plct-bullet-label {
+  font-size: 13px;
+  color: var(--el-text-color-primary);
+}
+
+.plct-bullet-value {
+  color: var(--el-color-primary);
+  font-size: 16px;
+  font-weight: 600;
+  font-family: Arial, Helvetica, sans-serif;
+  font-variant-numeric: tabular-nums;
+
+  &.plct-bullet-value--month {
+    color: var(--el-color-primary);
+    opacity: 0.9;
+  }
+}
+
+.plct-bullet-graph {
+  position: relative;
+  height: 16px;
+  background: var(--el-fill-color-light);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  overflow: visible;
+}
+
+.plct-bullet-bar {
+  height: 16px;
+  background: var(--el-color-primary);
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 2;
+  transition: width 0.6s ease;
+  border-radius: 8px;
+}
+
+.plct-bullet-bar--month {
+  opacity: 0.85;
+}
+
+.plct-progress-marker {
+  position: absolute;
+  width: 2px;
+  height: 24px;
+  background: var(--el-text-color-regular);
+  z-index: 5;
+  top: -4px;
+  border-radius: 1px;
+  transform: none;
+  pointer-events: none;
+}
+
+.plct-bullet-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+  padding-top: 6px;
+  border-top: 1px dashed var(--el-border-color-lighter);
+  min-width: 0;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+
+  .plct-bullet-sub {
+    font-weight: 500;
+  }
+
+  &.plct-bullet-foot--split {
+    align-items: center;
+    gap: 6px 12px;
+    flex-wrap: wrap;
+  }
+
+  &.plct-bullet-foot--tight {
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+}
+
+.plct-bullet-sep {
+  color: var(--el-border-color);
+  opacity: 0.75;
+  user-select: none;
+}
+
+.plct-bullet-sub-val {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-regular);
+  font-family: Arial, Helvetica, sans-serif;
+  font-variant-numeric: tabular-nums;
+}
+
+.plct-bullet-gap {
+  font-weight: 600;
+}
+
+.plct-metric-up {
+  color: var(--el-color-danger);
+}
+
+.plct-metric-down {
+  color: var(--el-color-primary);
+}
+
+.plct-kpi-matrix {
+  flex: 1 1 auto;
+  min-height: 0;
+  align-content: start;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+  margin-top: 2px;
+
+  @media (max-width: 720px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.plct-kpi-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 115px;
+  padding: 8px 10px;
+  border-radius: 4px;
+  border: 1px solid var(--el-border-color-lighter);
+  background: var(--el-fill-color-lighter);
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.plct-kpi-label {
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  font-weight: 500;
+  display: block;
+  margin-bottom: 0;
+}
+
+.plct-kpi-main {
+  font-size: 18px;
+  font-weight: bold;
+  color: var(--el-text-color-primary);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.25;
+}
+
+.plct-kpi-sub {
+  margin-top: 2px;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  line-height: 1.35;
+  font-variant-numeric: tabular-nums;
+}
+
+.plct-kpi-sub-val {
+  font-weight: 600;
+  color: var(--el-text-color-regular);
+}
+
+.plct-kpi-main--solo {
+  flex: 1;
+  display: flex;
+  align-items: center;
+}
+
+.plct-empty-wrap {
+  padding: 32px 0;
+}
+
+.plct-detail-module {
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--plct-radius);
+  background: var(--el-fill-color-blank);
+  overflow: hidden;
+}
+
+.plct-detail-module-bd {
+  padding: var(--plct-card-pad);
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.plct-table-wrap {
+  /** 與 SalesDailyAiReport 品类全维度 .table-scroll 一致 */
+  width: 100%;
+  flex: none;
+  overflow-x: auto;
+  overflow-y: visible;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 4px;
+  background: var(--el-bg-color);
+  -webkit-overflow-scrolling: touch;
+
+  :deep(.el-table) {
+    --el-table-font-size: 13px;
+    --el-table-border-color: var(--el-border-color-lighter);
+    --el-table-header-bg-color: var(--el-fill-color-light);
+    font-size: 13px;
+    border-radius: 0;
+  }
+
+  /** 與 .sxrb-table th 一致：浅底、细格线、居中、字重 */
+  :deep(.el-table__header-wrapper th.el-table__cell),
+  :deep(.el-table__fixed-header-wrapper th.el-table__cell) {
+    background-color: var(--el-fill-color-light) !important;
+    padding: 4px 6px !important;
+    font-size: 13px;
+    font-weight: 600;
+    text-align: center !important;
+    color: var(--el-text-color-primary);
+    border-color: var(--el-border-color-lighter) !important;
+    vertical-align: middle;
+  }
+
+  :deep(.el-table__header th.el-table__cell .cell) {
+    justify-content: center;
+    text-align: center;
+    line-height: 1.4;
+    padding: 0 2px;
+  }
+
+  :deep(.el-table td.el-table__cell) {
+    font-size: 13px;
+    padding: 5px !important;
+    text-align: center;
+    border-color: var(--el-border-color-lighter) !important;
+    background: var(--el-bg-color);
+  }
+
+  :deep(.el-table td.el-table__cell .cell) {
+    line-height: 1.4;
+    justify-content: center;
+  }
+
+  :deep(.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
+    background: var(--el-fill-color-lighter);
+  }
+}
+
+.plct-detail-empty {
+  padding: 24px 0;
+}
+
+.plct3-sku-merged {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 2px 0;
+  line-height: 1.35;
+  white-space: normal;
+  word-break: break-word;
+}
+
+.plct3-sku-code {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: var(--el-text-color-secondary);
+}
+
+.plct3-sku-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.plct3-thumb {
+  width: 46px;
+  height: 46px;
+  border-radius: 4px;
+  border: 1px solid var(--el-border-color-lighter);
+  overflow: hidden;
+  display: block;
+
+  :deep(.el-image__inner) {
+    object-fit: cover;
+  }
+}
+
+.plct3-thumb-fail {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 46px;
+  height: 46px;
+  font-size: 12px;
+  color: var(--el-text-color-placeholder);
+}
+
+.plct3-size-col-hd {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  line-height: 1.25;
+  padding: 2px 0;
+}
+
+.plct3-size-col-title {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--el-text-color-primary);
+}
+
+.plct3-size-col-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+}
+
+.plct3-size-legend-i {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.plct3-size-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.plct3-size-dot--muted {
+  background: var(--el-text-color-placeholder);
+}
+
+.plct3-size-dot--kc {
+  background: var(--el-color-success);
+}
+
+.plct3-size-dot--ls {
+  background: var(--el-color-primary);
+}
+
+.plct3-size-dot--zt {
+  background: var(--el-color-warning);
+}
+
+.plct3-size-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+  padding: 2px 0;
+}
+
+.plct3-size-chip {
+  min-width: 56px;
+  max-width: 120px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  background: var(--el-fill-color-lighter);
+  border: 1px solid var(--el-border-color-lighter);
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.plct3-size-chip-label-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 4px 6px;
+  margin-bottom: 4px;
+}
+
+.plct3-size-chip-label {
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  word-break: break-word;
+}
+
+.plct3-size-zt {
+  flex-shrink: 0;
+  max-width: 100%;
+  padding: 0 5px;
+  border-radius: 3px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.plct3-size-zt--danger {
+  color: var(--el-color-danger);
+  background: color-mix(in srgb, var(--el-color-danger) 16%, transparent);
+}
+
+.plct3-size-zt--ok {
+  color: var(--el-color-success);
+  background: color-mix(in srgb, var(--el-color-success) 16%, transparent);
+}
+
+.plct3-size-zt--warn {
+  color: var(--el-color-warning);
+  background: color-mix(in srgb, var(--el-color-warning) 18%, transparent);
+}
+
+.plct3-size-zt--muted {
+  color: var(--el-text-color-secondary);
+  background: var(--el-fill-color);
+  border: 1px solid var(--el-border-color-lighter);
+}
+
+.plct3-size-chip-vals {
+  font-size: 13px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.3;
+}
+
+.plct3-size-kc {
+  color: var(--el-color-success);
+}
+
+.plct3-size-ls {
+  color: var(--el-color-primary);
+}
+
+.plct3-size-sep {
+  margin: 0 4px;
+  color: var(--el-text-color-placeholder);
+  font-weight: 400;
+}
+
+.plct3-size-dash,
+.plct3-size-fallback {
+  font-size: 12px;
+  color: var(--el-text-color-regular);
+}
+
+.plct3-size-fallback {
+  display: block;
+  white-space: normal;
+  word-break: break-all;
+  text-align: center;
+}
+</style>