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() {