refactor(intelligent-agent): 重构智能体概览页面

-移除冗余代码,优化数据结构
- 新增应用类型枚举,统一应用类型数据
- 重构 Echarts 组件,提高图表绘制灵活性和可维护性- 优化智能体列表展示,增加应用类型图标和描述
- 调整页面样式,提升用户体验
This commit is contained in:
陈昱达
2025-05-08 13:09:13 +08:00
parent 0dea699f1f
commit b565c90150
9 changed files with 302 additions and 237 deletions

View File

@@ -16,19 +16,17 @@
class="flex align-items-c justify-content-b mt10"
style="flex-wrap: wrap"
>
<REcharts
:key="item.options.title.subtext"
v-for="item in list"
<line-echarts
:key="item.options.title.subtext + index"
v-for="(item, index) in list"
:options="item.options"
style="width: calc(50% - 10px);height: 300px"
></REcharts>
></line-echarts>
</div>
</div>
</template>
<script>
import REcharts from '@/views/intelligent-agent/children/Logs&overview/components/echarts.vue'
import * as echarts from 'echarts'
import LineEcharts from '@/views/intelligent-agent/children/Logs&overview/components/lineEcharts.vue'
import { dailyConversations } from './API'
export default {
@@ -40,37 +38,28 @@ export default {
{
options: {
title: {
seriesName: '全部会话数', // 系列名称
text: '全部会话数',
textStyle: {
fontSize: 13
},
subtext: '所有时间'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: '会话数',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
itemStyle: {
color: '#0694A2'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#0694A2'
},
color: [
{ offset: 0, color: '#0694A2' },
{
offset: 1,
color: '#F3F9FA'
}
])
]
}
}
]
@@ -80,36 +69,23 @@ export default {
options: {
title: {
text: '活跃用户数',
textStyle: {
fontSize: 13
},
subtext: '所有时间'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 430, 5556],
type: 'line',
name: '活跃用户',
data: [820, 932, 901, 934, 1290, 430, 9000],
itemStyle: {
color: '#FF8A4C'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#FF8A4C'
},
{
offset: 1,
color: '#FFF6F1'
}
])
color: [
{ offset: 0, color: '#FF8A4C' },
{ offset: 1, color: '#FFF6F1' }
]
}
}
]
@@ -119,36 +95,23 @@ export default {
options: {
title: {
text: '平均会话互动数',
textStyle: {
fontSize: 13
},
subtext: '所有时间'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: '平均会话互动数',
data: [20, 52, 1, 55, 666, 1330, 55],
type: 'line',
itemStyle: {
color: '#FF8A4C'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#FF8A4C'
},
{
offset: 1,
color: '#FFF6F1'
}
])
color: [
{ offset: 0, color: '#FF8A4C' },
{ offset: 1, color: '#FFF6F1' }
]
}
}
]
@@ -158,36 +121,23 @@ export default {
options: {
title: {
text: 'Token 输出速度',
textStyle: {
fontSize: 13
},
subtext: '所有时间'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Token 输出速度',
data: [300, 555, 444, 22, 11, 333, 1],
type: 'line',
itemStyle: {
color: '#FF8A4C'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#FF8A4C'
},
{
offset: 1,
color: '#FFF6F1'
}
])
color: [
{ offset: 0, color: '#FF8A4C' },
{ offset: 1, color: '#FFF6F1' }
]
}
}
]
@@ -197,36 +147,23 @@ export default {
options: {
title: {
text: '用户满意度',
textStyle: {
fontSize: 13
},
subtext: '所有时间'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: '用户满意度',
data: [200, 300, 400, 444, 500, 555, 521],
type: 'line',
itemStyle: {
color: '#1C64F1'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#1C64F1'
},
{
offset: 1,
color: '#E3ECFD'
}
])
color: [
{ offset: 0, color: '#1C64F1' },
{ offset: 1, color: '#E3ECFD' }
]
}
}
]
@@ -236,36 +173,24 @@ export default {
options: {
title: {
text: '费用消耗',
textStyle: {
fontSize: 13
},
subtext: '所有时间'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: '费用消耗',
data: [820, 932, 901, 934, 1290, 200, 500],
type: 'line',
itemStyle: {
color: '#FF8A4C'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#FF8A4C'
},
{
offset: 1,
color: '#FFF6F1'
}
])
color: [
{ offset: 0, color: '#FF8A4C' },
{ offset: 1, color: '#FFF6F1' }
]
}
}
]
@@ -315,7 +240,7 @@ export default {
props: {},
watch: {},
components: {
REcharts
LineEcharts
},
filters: {},
methods: {
@@ -324,6 +249,22 @@ export default {
this.list = this.list.map(item => {
return {
options: {
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(255,255,255,0.9)',
borderColor: '#ccc',
textStyle: {
color: '#333'
},
formatter: params => {
console.log(params)
return (
`${params[0].axisValue} ${params[0].marker}<br/>` +
params.map(p => `${p.seriesName}${p.value}`).join('<br/>')
)
}
},
...item.options,
title: {
...item.options.title,