pengyuthon/gzth
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ai报表

Browse Source
This commit is contained in:
李鹏宇
2026-06-10 17:51:57 +08:00
parent b0fde094bd
commit 1aad8249ee
1 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
yuthon_ai_agent/static/src/html/report_template.html
+22 -9
View File
@@ -213,11 +213,12 @@ tr.ch.h{display:none}
</div>
<div class="tb-r" id="tbRight" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
<div id="chartCtrls" style="display:none;gap:6px;align-items:center;flex-wrap:wrap">
<select id="qcDimSel" onchange="updateQuickChart()" title="分组字段" style="padding:4px 8px;background:var(--bg2);border:1px solid var(--bd);border-radius:6px;color:var(--fg);font-size:0.75rem;cursor:pointer;font-family:inherit;outline:none">
<option value="">分组字段</option>
<span style="font-size:0.7rem;color:var(--fg4);white-space:nowrap">📊 图表</span>
<select id="qcDimSel" onchange="updateQuickChart()" title="按此字段分组" style="padding:4px 8px;background:var(--bg2);border:1px solid var(--bd);border-radius:6px;color:var(--fg);font-size:0.75rem;cursor:pointer;font-family:inherit;outline:none">
<option value="">维度</option>
</select>
<select id="qcValSel" onchange="updateQuickChart()" title="数值字段" style="padding:4px 8px;background:var(--bg2);border:1px solid var(--bd);border-radius:6px;color:var(--fg);font-size:0.75rem;cursor:pointer;font-family:inherit;outline:none">
<option value="">数值字段</option>
<select id="qcValSel" onchange="updateQuickChart()" title="统计此字段的值" style="padding:4px 8px;background:var(--bg2);border:1px solid var(--bd);border-radius:6px;color:var(--fg);font-size:0.75rem;cursor:pointer;font-family:inherit;outline:none">
<option value="">指标</option>
<option value="__count__">计数</option>
</select>
<div class="chart-type-btns" style="display:flex;gap:3px">
@@ -225,7 +226,7 @@ tr.ch.h{display:none}
<button class="btn chart-type-btn" onclick="setChartType('pie')" id="btnPie" title="饼图">🥧</button>
<button class="btn chart-type-btn" onclick="setChartType('doughnut')" id="btnDoughnut" title="环形图">🍩</button>
<button class="btn chart-type-btn" onclick="setChartType('line')" id="btnLine" title="折线图">📈</button>
<button class="btn chart-type-btn" onclick="setChartType('polarArea')" id="btnPolar" title="玫瑰图">🌹</button>
<button class="btn chart-type-btn" id="btnList" title="关闭图表" onclick="toggleChartView()" style="font-size:0.7rem">📋</button>
</div>
</div>
<button class="btn-excel" onclick="expXls()">⬇ 导出 Excel</button>
@@ -297,6 +298,16 @@ let grpExp={};
let fzCount=0;
let dark=true;
let qcState={dim:'',val:'',type:'bar'};
let chartVisible=true;
function toggleChartView(){
chartVisible=!chartVisible;
const area=$('chartsArea');
const btn=$('btnList');
if(area)area.style.display=chartVisible?'':'none';
if(btn)btn.classList.toggle('act',!chartVisible);
if(chartVisible)renderCharts();
}
function init(){
$('rptTitle').textContent = REPORT_CONFIG.title || '报表';
@@ -345,25 +356,27 @@ function initChartCtrls(){
const dimSel=$('qcDimSel');
const valSel=$('qcValSel');
if(dimSel){
dimSel.innerHTML='<option value="">分组字段</option>'+COLS.map(c=>`<option value="${c.k}">${c.l}</option>`).join('');
dimSel.innerHTML='<option value="">维度</option>'+COLS.map(c=>`<option value="${c.k}">${c.l}</option>`).join('');
dimSel.value=qcState.dim;
}
if(valSel){
valSel.innerHTML='<option value="">数值字段</option><option value="__count__">计数</option>'+numCols.map(c=>`<option value="${c.k}">${c.l}</option>`).join('');
valSel.innerHTML='<option value="">指标</option><option value="__count__">计数</option>'+numCols.map(c=>`<option value="${c.k}">${c.l}</option>`).join('');
valSel.value=qcState.val;
}
updateChartTypeBtns();
}
function updateChartTypeBtns(){
['bar','pie','doughnut','line','polarArea'].forEach(t=>{
const btn=$(`btn${t==='bar'?'Bar':t==='pie'?'Pie':t==='doughnut'?'Doughnut':t==='line'?'Line':'Polar'}`);
['bar','pie','doughnut','line'].forEach(t=>{
const btn=$(`btn${t==='bar'?'Bar':t==='pie'?'Pie':t==='doughnut'?'Doughnut':'Line'}`);
if(btn)btn.classList.toggle('act',qcState.type===t);
});
['btnList'].forEach(id=>{const b=$(id);if(b)b.classList.remove('act')});
}
function setChartType(type){
qcState.type=type;
if(!chartVisible){chartVisible=true;$('chartsArea').style.display='';$('btnList').classList.remove('act')}
updateChartTypeBtns();
renderCharts();
}