mirror of
http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git
synced 2025-12-24 10:12:58 +08:00
refactor(intelligent-agent): 重构智能体概览页面
-移除冗余代码,优化数据结构 - 新增应用类型枚举,统一应用类型数据 - 重构 Echarts 组件,提高图表绘制灵活性和可维护性- 优化智能体列表展示,增加应用类型图标和描述 - 调整页面样式,提升用户体验
This commit is contained in:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user