From dbe45ed4898e1ff2e9630dd43d8397afd29e9522 Mon Sep 17 00:00:00 2001 From: yumoqing Date: Wed, 22 Jul 2026 17:18:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=206=E4=B8=AA=E7=9B=91=E6=8E=A7=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=9B=BE=E8=A1=A8=E5=8C=96(=E7=8E=AF=E5=BD=A2?= =?UTF-8?q?=E5=9B=BE+=E6=9F=B1=E7=8A=B6=E5=9B=BE+=E6=B0=94=E6=B3=A1?= =?UTF-8?q?=E5=9B=BE+=E7=BE=8E=E5=8C=96=E5=88=97=E8=A1=A8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- wwwroot/sect_currency.ui | 18 +++++++++--------- wwwroot/sect_model_perf.ui | 35 +++++++++++++++++++++++++---------- wwwroot/sect_provider_roi.ui | 19 +++++++++---------- wwwroot/sect_top_models.ui | 17 +++++++++-------- wwwroot/sect_top_providers.ui | 17 +++++++++-------- wwwroot/sect_top_users.ui | 17 +++++++++-------- 6 files changed, 70 insertions(+), 53 deletions(-) diff --git a/wwwroot/sect_currency.ui b/wwwroot/sect_currency.ui index 6f64177..9e17a99 100644 --- a/wwwroot/sect_currency.ui +++ b/wwwroot/sect_currency.ui @@ -1,10 +1,10 @@ {% set data = j2_currency_data(request) %} -{"widgettype":"VBox","options":{"width":"100%"},"subwidgets":[ -{% for r in data %} -{"widgettype":"HBox","options":{"cheight":3,"width":"100%"},"subwidgets":[ -{"widgettype":"Text","options":{"text":{{json.dumps(r.get('currency',''),ensure_ascii=False)}},"width":"20%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps((r.get('call_count',0)|string)+'次',ensure_ascii=False)}},"width":"25%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps(r.get('amount',0)|string,ensure_ascii=False)}},"width":"25%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps(r.get('amount_cny',0)|string,ensure_ascii=False)}},"width":"30%"}} -]}{% if not loop.last %},{% endif %}{% endfor %} -]} +{% set chart_data = [] %}{% for r in data %}{% set _ = chart_data.append({"name": r.get("currency",""), "value": r.get("call_count",0)}) %}{% endfor %} +{ + "widgettype": "WebWidget", + "options": { + "height": "200px", + "html": "
", + "script": "(function(){var c=echarts.init(document.getElementById('chart_currency'));c.setOption({tooltip:{trigger:'item'},series:[{type:'pie',radius:['45%','70%'],center:['50%','55%'],data:{{json.dumps(chart_data,ensure_ascii=False)}},label:{show:true,formatter:'{b} {c}次({d}%)'},emphasis:{itemStyle:{shadowBlur:10,shadowColor:'rgba(0,0,0,0.3)'}}}]});window.addEventListener('resize',function(){c.resize()});})();" + } +} diff --git a/wwwroot/sect_model_perf.ui b/wwwroot/sect_model_perf.ui index 2c26961..1b852d2 100644 --- a/wwwroot/sect_model_perf.ui +++ b/wwwroot/sect_model_perf.ui @@ -1,11 +1,26 @@ {% set data = j2_model_perf_data(request) %} -{"widgettype":"VBox","options":{"width":"100%"},"subwidgets":[ -{% for r in data %} -{"widgettype":"HBox","options":{"cheight":3,"width":"100%"},"subwidgets":[ -{"widgettype":"Text","options":{"text":{{json.dumps(r.get('model',''),ensure_ascii=False)}},"width":"35%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps((r.get('avg_ttft_ms','')|string)+'ms',ensure_ascii=False)}},"width":"15%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps((r.get('success_rate','')|string)+'%',ensure_ascii=False)}},"width":"15%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps(r.get('total_calls','')|string,ensure_ascii=False)}},"width":"15%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps(r.get('total_amount_cny','')|string,ensure_ascii=False)}},"width":"20%"}} -]}{% if not loop.last %},{% endif %}{% endfor %} -]} +{ + "widgettype": "VBox", + "options": {"width": "100%"}, + "subwidgets": [ + {"widgettype": "HBox","options":{"cheight":2,"width":"100%","bgcolor":"var(--sage-bg-secondary)","borderRadius":"4px 4px 0 0","padding":"4px 8px"},"subwidgets":[ + {"widgettype":"Text","options":{"text":"模型","width":"30%","fontSize":"11px","color":"var(--sage-text-secondary)"}}, + {"widgettype":"Text","options":{"text":"延迟","width":"15%","fontSize":"11px","color":"var(--sage-text-secondary)"}}, + {"widgettype":"Text","options":{"text":"成功率","width":"15%","fontSize":"11px","color":"var(--sage-text-secondary)"}}, + {"widgettype":"Text","options":{"text":"调用","width":"20%","fontSize":"11px","color":"var(--sage-text-secondary)"}}, + {"widgettype":"Text","options":{"text":"金额","width":"20%","fontSize":"11px","color":"var(--sage-text-secondary)"}} + ]} + {% for r in data %} + ,{"widgettype":"HBox","options":{"cheight":2,"width":"100%","borderBottom":"1px solid var(--sage-border-color)","padding":"2px 8px"},"subwidgets":[ + {"widgettype":"Text","options":{"text":{{json.dumps(r.get('model',''),ensure_ascii=False)}},"width":"30%","fontSize":"12px"}}, + {"widgettype":"Text","options":{"text":{{json.dumps((r.get('avg_ttft_ms','')|string)+'ms',ensure_ascii=False)}},"width":"15%","fontSize":"12px"}}, + {"widgettype":"HBox","options":{"width":"15%"},"subwidgets":[ + {"widgettype":"Text","options":{"text":{{json.dumps((r.get('success_rate','')|string)+'%',ensure_ascii=False)}},"fontSize":"11px","width":"auto"}}, + {"widgettype":"Filler"} + ]}, + {"widgettype":"Text","options":{"text":{{json.dumps(r.get('total_calls','')|string,ensure_ascii=False)}},"width":"20%","fontSize":"12px"}}, + {"widgettype":"Text","options":{"text":{{json.dumps('¥'+(r.get('total_amount_cny',0)|string),ensure_ascii=False)}},"width":"20%","fontSize":"12px"}} + ]} + {% endfor %} + ] +} diff --git a/wwwroot/sect_provider_roi.ui b/wwwroot/sect_provider_roi.ui index 4d3a5bd..d32ddae 100644 --- a/wwwroot/sect_provider_roi.ui +++ b/wwwroot/sect_provider_roi.ui @@ -1,11 +1,10 @@ {% set data = j2_provider_roi_data(request) %} -{"widgettype":"VBox","options":{"width":"100%"},"subwidgets":[ -{% for r in data %} -{"widgettype":"HBox","options":{"cheight":3,"width":"100%"},"subwidgets":[ -{"widgettype":"Text","options":{"text":{{json.dumps(r.get('model',''),ensure_ascii=False)}},"width":"35%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps((r.get('unit_price','')|string)+'/t',ensure_ascii=False)}},"width":"20%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps((r.get('avg_ttft_ms','')|string)+'ms',ensure_ascii=False)}},"width":"15%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps((r.get('total_calls',0)|string)+'次',ensure_ascii=False)}},"width":"15%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps(r.get('total_amount_cny',0)|string,ensure_ascii=False)}},"width":"15%"}} -]}{% if not loop.last %},{% endif %}{% endfor %} -]} +{% set bubble_data = [] %}{% for r in data %}{% set _ = bubble_data.append([r.get("unit_price",0)|float, r.get("avg_ttft_ms",0)|float, r.get("total_calls",0)|int, r.get("model","")]) %}{% endfor %} +{ + "widgettype": "WebWidget", + "options": { + "height": "240px", + "html": "
", + "script": "(function(){var c=echarts.init(document.getElementById('chart_provider_roi'));c.setOption({tooltip:{trigger:'item',formatter:function(p){return p.data[3]+'
单价:'+p.data[0]+'/t
延迟:'+p.data[1]+'ms
调用:'+p.data[2]+'次'}},xAxis:{type:'value',name:'单价(¥/t)',nameLocation:'center',nameGap:25},yAxis:{type:'value',name:'延迟(ms)',nameLocation:'center',nameGap:35},series:[{type:'scatter',symbolSize:function(d){return Math.max(8,Math.sqrt(d[2])*0.5)},data:{{json.dumps(bubble_data,ensure_ascii=False)}},label:{show:true,formatter:function(p){return p.data[3]},position:'top',fontSize:10}}]});window.addEventListener('resize',function(){c.resize()});})();" + } +} diff --git a/wwwroot/sect_top_models.ui b/wwwroot/sect_top_models.ui index 75b7859..d93c3bf 100644 --- a/wwwroot/sect_top_models.ui +++ b/wwwroot/sect_top_models.ui @@ -1,9 +1,10 @@ {% set data = j2_top_models_data(request) %} -{"widgettype":"VBox","options":{"width":"100%"},"subwidgets":[ -{% for r in data %} -{"widgettype":"HBox","options":{"cheight":3,"width":"100%"},"subwidgets":[ -{"widgettype":"Text","options":{"text":{{json.dumps(r.get('model_name',''),ensure_ascii=False)}},"width":"50%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps((r.get('cnt',0)|string)+'次',ensure_ascii=False)}},"width":"25%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps(r.get('total_amount',0)|string,ensure_ascii=False)}},"width":"25%"}} -]}{% if not loop.last %},{% endif %}{% endfor %} -]} +{% set names = [] %}{% set vals = [] %}{% for r in data %}{% set _ = names.append(r.get("model_name","")) %}{% set _ = vals.append(r.get("cnt",0)) %}{% endfor %} +{ + "widgettype": "WebWidget", + "options": { + "height": "200px", + "html": "
", + "script": "(function(){var c=echarts.init(document.getElementById('chart_top_models'));c.setOption({tooltip:{trigger:'axis'},grid:{left:10,right:20,top:5,bottom:5,containLabel:true},xAxis:{type:'value'},yAxis:{type:'category',data:{{json.dumps(names,ensure_ascii=False)}},inverse:true,axisLabel:{fontSize:11}},series:[{type:'bar',data:{{json.dumps(vals,ensure_ascii=False)}},barMaxWidth:20,label:{show:true,position:'right',fontSize:11}}]});window.addEventListener('resize',function(){c.resize()});})();" + } +} diff --git a/wwwroot/sect_top_providers.ui b/wwwroot/sect_top_providers.ui index 05612ae..a2e8b93 100644 --- a/wwwroot/sect_top_providers.ui +++ b/wwwroot/sect_top_providers.ui @@ -1,9 +1,10 @@ {% set data = j2_top_providers_data(request) %} -{"widgettype":"VBox","options":{"width":"100%"},"subwidgets":[ -{% for r in data %} -{"widgettype":"HBox","options":{"cheight":3,"width":"100%"},"subwidgets":[ -{"widgettype":"Text","options":{"text":{{json.dumps(r.get('provider_name',''),ensure_ascii=False)}},"width":"50%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps((r.get('cnt',0)|string)+'次',ensure_ascii=False)}},"width":"25%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps(r.get('total_amount',0)|string,ensure_ascii=False)}},"width":"25%"}} -]}{% if not loop.last %},{% endif %}{% endfor %} -]} +{% set names = [] %}{% set vals = [] %}{% for r in data %}{% set _ = names.append(r.get("provider_name","")) %}{% set _ = vals.append(r.get("total_amount",0)) %}{% endfor %} +{ + "widgettype": "WebWidget", + "options": { + "height": "200px", + "html": "
", + "script": "(function(){var c=echarts.init(document.getElementById('chart_top_providers'));c.setOption({tooltip:{trigger:'axis'},grid:{left:10,right:50,top:5,bottom:5,containLabel:true},xAxis:{type:'value'},yAxis:{type:'category',data:{{json.dumps(names,ensure_ascii=False)}},inverse:true,axisLabel:{fontSize:11}},series:[{type:'bar',data:{{json.dumps(vals,ensure_ascii=False)}},barMaxWidth:20,label:{show:true,position:'right',formatter:'¥{c}',fontSize:11}}]});window.addEventListener('resize',function(){c.resize()});})();" + } +} diff --git a/wwwroot/sect_top_users.ui b/wwwroot/sect_top_users.ui index 4532614..43f74fc 100644 --- a/wwwroot/sect_top_users.ui +++ b/wwwroot/sect_top_users.ui @@ -1,9 +1,10 @@ {% set data = j2_top_users_data(request) %} -{"widgettype":"VBox","options":{"width":"100%"},"subwidgets":[ -{% for r in data %} -{"widgettype":"HBox","options":{"cheight":3,"width":"100%"},"subwidgets":[ -{"widgettype":"Text","options":{"text":{{json.dumps(r.get('user_name',''),ensure_ascii=False)}},"width":"50%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps((r.get('cnt',0)|string)+'次',ensure_ascii=False)}},"width":"25%"}}, -{"widgettype":"Text","options":{"text":{{json.dumps(r.get('total_amount',0)|string,ensure_ascii=False)}},"width":"25%"}} -]}{% if not loop.last %},{% endif %}{% endfor %} -]} +{% set names = [] %}{% set vals = [] %}{% for r in data %}{% set _ = names.append(r.get("user_name","")) %}{% set _ = vals.append(r.get("total_amount",0)) %}{% endfor %} +{ + "widgettype": "WebWidget", + "options": { + "height": "200px", + "html": "
", + "script": "(function(){var c=echarts.init(document.getElementById('chart_top_users'));c.setOption({tooltip:{trigger:'axis'},grid:{left:10,right:50,top:5,bottom:5,containLabel:true},xAxis:{type:'value'},yAxis:{type:'category',data:{{json.dumps(names,ensure_ascii=False)}},inverse:true,axisLabel:{fontSize:11}},series:[{type:'bar',data:{{json.dumps(vals,ensure_ascii=False)}},barMaxWidth:20,label:{show:true,position:'right',formatter:'¥{c}',fontSize:11}}]});window.addEventListener('resize',function(){c.resize()});})();" + } +}