监测明细表表头下增加Total汇总行(随筛选联动)

index.html

@@ -34,6 +34,8 @@
   .pos{color:#059669;} .neg{color:#dc2626;}
   .empty{padding:30px;text-align:center;color:var(--sub);}
   .sum-metric{color:var(--accent);font-weight:600;}
+  .total-row td{position:sticky;top:33px;background:#eef2f7;font-weight:700;color:var(--head);border-top:2px solid #cbd5e1;z-index:1;}
+  .total-row td.txt{text-align:left;}
 </style>
 </head>
 <body>
@@ -88,6 +90,16 @@
             <th>GP</th>
             <th>ecpc</th>
           </tr>
+          <tr id="totalRow" class="total-row">
+            <td colspan="7" class="txt">Total</td>
+            <td id="tClicks"></td>
+            <td id="tConv"></td>
+            <td id="tCvr"></td>
+            <td id="tRev"></td>
+            <td id="tCost"></td>
+            <td id="tGp"></td>
+            <td id="tEcpc"></td>
+          </tr>
         </thead>
         <tbody></tbody>
       </table>
@@ -176,6 +188,23 @@ function renderDetail(){
     }).join('');
   }
   document.getElementById('detailNote').textContent='显示 '+rows.length+' / '+ALL.length+' 行';
+  renderTotal(rows);
+}
+
+function renderTotal(rows){
+  var c=0,cv=0,rev=0,cost=0;
+  rows.forEach(function(d){ c+=(+d.clicks||0); cv+=(+d.conversion||0); rev+=(+d.revenue||0); cost+=(+d.cost||0); });
+  var cvr = c? cv/c : 0;
+  var gp  = rev? 1-cost/rev : 0;
+  var ecpc= c? rev/c : 0;
+  document.getElementById('tClicks').textContent=num(c);
+  document.getElementById('tConv').textContent=num(cv);
+  document.getElementById('tCvr').textContent=pct(cvr);
+  document.getElementById('tRev').textContent=money(rev);
+  document.getElementById('tCost').textContent=money(cost);
+  var tGp=document.getElementById('tGp');
+  tGp.textContent=pct(gp); tGp.className=(gp>=0)?'pos':'neg';
+  document.getElementById('tEcpc').textContent=dec(ecpc,4);
 }
 
 document.getElementById('applyBtn').onclick=renderDetail;