diff --git a/index.html b/index.html index 1e6c130..201425c 100644 --- a/index.html +++ b/index.html @@ -403,8 +403,10 @@
-
-

Moboost广告投放

+ + +
+

产品订单基础信息

@@ -418,15 +420,28 @@ - - -
日预算 状态 MMP代投渠道平台自投渠道数据来源
+ + +
+

渠道投放矩阵(渠道 × 产品)

+

+ Active 投放中  + Pause 投过已停  + 空白 = 未投放 +

+
+ + + +
+
+
@@ -513,9 +528,6 @@ // Table const tbody = document.querySelector('#orderTable tbody'); - const chipList = (arr) => (arr && arr.length) - ? arr.map(c => `${c}`).join('') - : '—'; tbody.innerHTML = orderData.map(o => { const statusClass = o.status === 'Active' ? 'status-active' : 'status-pause'; return ` @@ -529,12 +541,69 @@ ${o.budget} ${o.status} ${o.mmp} - ${chipList(o.agency_channels)} - ${chipList(o.self_channels)} - ${o.source} `; }).join(''); + + renderMatrix(); + } + + function renderMatrix() { + // 列 = 产品(按 pkg 区分,同名产品用地区区分显示);行 = 渠道 + // 每个订单条目是一列 + const cols = orderData.map(o => ({ + key: o.pkg, + label: o.product, + sub: o.geo, + status: o.status, + channels: new Set([...(o.agency_channels||[]), ...(o.self_channels||[])]) + })); + + // 收集所有渠道,分代投 / 自投两组 + const agencySet = new Set(); + const selfSet = new Set(); + orderData.forEach(o => { + (o.agency_channels||[]).forEach(c => agencySet.add(c)); + (o.self_channels||[]).forEach(c => selfSet.add(c)); + }); + const agencyChannels = [...agencySet]; + const selfChannels = [...selfSet]; + + // 表头 + const thead = document.querySelector('#matrixTable thead'); + thead.innerHTML = ` + + 渠道 \\ 产品 + ${cols.map(c => ` +
${c.label}
+
${c.sub}
+ `).join('')} + + `; + + // 单元格生成 + const cell = (col, channel) => { + if (!col.channels.has(channel)) return ''; + const cls = col.status === 'Active' ? 'status-active' : 'status-pause'; + return `${col.status}`; + }; + + const groupRows = (title, channels) => { + if (!channels.length) return ''; + let html = `${title}`; + html += channels.map(ch => ` + + ${ch} + ${cols.map(col => cell(col, ch)).join('')} + + `).join(''); + return html; + }; + + const tbody = document.querySelector('#matrixTable tbody'); + tbody.innerHTML = + groupRows('代投渠道', agencyChannels) + + groupRows('平台自投渠道', selfChannels); } function populateFilters() {