feat(intelligent-agent): 重构日志与概览页面

- 新增 API 模块用于获取每日会话数据 - 实现多个图表组件以展示不同维度的数据- 优化概览页面布局和样式 - 调整 iframe 高度样式 - 新增 echarts 服务端代理配置
2025-12-08 18:36:51 +08:00 · 2025-05-06 14:23:31 +08:00
parent fe25b9ffb5
commit c479fc20e6
6 changed files with 392 additions and 37 deletions
--- a/src/views/agent/views/workflow/index.vue
+++ b/src/views/agent/views/workflow/index.vue
@@ -1,6 +1,5 @@
 <script>
 import { DIFY_URL } from '@/config/base-url'
-
 export default {
  name: 'workflow',
  props: {
@@ -121,7 +120,7 @@ export default {
      ref="agent"
      :src="agent.src"
      frameborder="0"
-      style="width: 100%; height: 85vh;"
+      style="width: 100%; height: 100%;"
    />
  </div>
 </template>
--- a/src/views/intelligent-agent/children/Logs&overview/components/API.js
+++ b/src/views/intelligent-agent/children/Logs&overview/components/API.js
@@ -0,0 +1,13 @@
+import request from '@/assets/js/utils/request'
+import getUrl from '@/assets/js/utils/get-url'
+
+export function dailyConversations(data) {
+  return request({
+    url: getUrl(
+      `http://192.168.3.229:5001/console/api/apps/${
+        data.id
+      }/statistics/daily-conversations`
+    ),
+    method: 'get'
+  })
+}
--- a/src/views/intelligent-agent/children/Logs&overview/components/echarts.vue
+++ b/src/views/intelligent-agent/children/Logs&overview/components/echarts.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div :id="echartsId" style="width: 100%;height: 100%"></div>
+  </div>
+</template>
+<script>
+import * as echarts from 'echarts'
+import uuid from 'uuid'
+
+export default {
+  name: 'overveiw',
+  data() {
+    return {
+      echartsId: 'main-' + uuid()
+    }
+  },
+  props: {
+    options: {
+      type: Object,
+      default: () => {
+        return {
+          xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+          },
+          yAxis: {
+            type: 'value'
+          },
+          series: [
+            {
+              data: [820, 932, 901, 934, 1290, 1330, 1320],
+              type: 'line',
+              areaStyle: {}
+            }
+          ]
+        }
+      },
+      required: true
+    }
+  },
+  watch: {},
+  components: {},
+  filters: {},
+  methods: {
+    drawEcharts() {
+      let myChart = echarts.init(document.getElementById(this.echartsId))
+      let option = {
+        ...this.options
+      }
+      myChart.setOption(this.options)
+    }
+  },
+  created() {},
+  mounted() {
+    this.drawEcharts()
+  },
+  computed: {}
+}
+</script>
+<style scoped lang="scss"></style>
--- a/src/views/intelligent-agent/children/Logs&overview/components/overveiw.vue
+++ b/src/views/intelligent-agent/children/Logs&overview/components/overveiw.vue
@@ -1,30 +1,47 @@
 <template>
  <div>
-    <div :id="echartsId" style="width: 100%;height: 100%"></div>
+    <el-select v-model="times" style="width: 200px" size="medium">
+      <el-option
+        v-for="item in options"
+        :value="item.value"
+        :label="item.label"
+      ></el-option>
+    </el-select>
+    <div
+      class="flex align-items-c justify-content-b mt10"
+      style="flex-wrap: wrap"
+    >
+      <REcharts
+        v-for="item in list"
+        :options="item.options"
+        style="width: 50%;height: 300px"
+      ></REcharts>
+    </div>
  </div>
 </template>
 <script>
+import REcharts from '@/views/intelligent-agent/children/Logs&overview/components/echarts.vue'
 import * as echarts from 'echarts'
-import uuid from 'uuid'
+
+import { dailyConversations } from './API'

 export default {
  name: 'overveiw',
  data() {
    return {
-      echartsId: 'main-' + uuid()
-    }
+      times: '',
+      list: [
+        {
+          options: {
+            title: {
+              text: '全部会话数',
+              textStyle: {
+                fontSize: 13
+              },
+              subtext: '(万)'
            },
-  props: {},
-  watch: {},
-  components: {},
-  filters: {},
-  methods: {
-    drawEcharts() {
-      let myChart = echarts.init(document.getElementById(this.echartsId))
-      let option = {
            xAxis: {
              type: 'category',
-          boundaryGap: false,
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
@@ -34,17 +51,278 @@ export default {
              {
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
-            areaStyle: {}
+                itemStyle: {
+                  color: '#0694A2'
+                },
+                areaStyle: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 2, [
+                    {
+                      offset: 0,
+                      color: '#F3F9FA'
+                    },
+                    {
+                      offset: 0.2,
+                      color: '#F3F9FA'
+                    }
+                  ])
+                }
              }
            ]
          }
-
-      myChart.setOption(option)
+        },
+        {
+          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',
+                itemStyle: {
+                  color: '#FF8A4C'
+                },
+                areaStyle: {
+                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                    {
+                      offset: 0,
+                      color: '#FF8A4C'
+                    },
+                    {
+                      offset: 1,
+                      color: '#FFF6F1'
+                    }
+                  ])
+                }
+              }
+            ]
+          }
+        },
+        {
+          options: {
+            title: {
+              text: '平均会话互动数',
+              textStyle: {
+                fontSize: 13
+              },
+              subtext: '(万)'
+            },
+            xAxis: {
+              type: 'category',
+              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: [
+              {
+                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'
+                    }
+                  ])
+                }
+              }
+            ]
+          }
+        },
+        {
+          options: {
+            title: {
+              text: 'Token 输出速度',
+              textStyle: {
+                fontSize: 13
+              },
+              subtext: '(万)'
+            },
+            xAxis: {
+              type: 'category',
+              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: [
+              {
+                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'
+                    }
+                  ])
+                }
+              }
+            ]
+          }
+        },
+        {
+          options: {
+            title: {
+              text: '用户满意度\n',
+              textStyle: {
+                fontSize: 13
+              },
+              subtext: '(万)'
+            },
+            xAxis: {
+              type: 'category',
+              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: [
+              {
+                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'
+                    }
+                  ])
+                }
+              }
+            ]
+          }
+        },
+        {
+          options: {
+            title: {
+              text: '费用消耗\n',
+              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, 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'
+                    }
+                  ])
+                }
+              }
+            ]
+          }
+        }
+      ],
+      options: [
+        {
+          label: '今天',
+          value: '1'
+        },
+        {
+          label: '过去7天',
+          value: '2'
+        },
+        {
+          label: '过去4周',
+          value: '3'
+        },
+        {
+          label: '过去3月',
+          value: '4'
+        },
+        {
+          label: '过去12月',
+          value: '5'
+        },
+        {
+          label: '本月至今',
+          value: '6'
+        },
+        {
+          label: '本季度至今',
+          value: '7'
+        },
+        {
+          label: '本年至今',
+          value: '8'
+        },
+        {
+          label: '所有时间',
+          value: '9'
+        }
+      ]
+    }
+  },
+  props: {},
+  watch: {},
+  components: {
+    REcharts
+  },
+  filters: {},
+  methods: {
+    async getEcharts() {
+      // let dailyConversationsApi = await dailyConversations({
+      //   id: '27f6f211-6c74-4de8-9424-c1ba28d365c2'
+      // })
+      // console.log(dailyConversationsApi)
    }
  },
  created() {},
  mounted() {
-    this.drawEcharts()
+    this.getEcharts()
  },
  computed: {}
 }
--- a/src/views/intelligent-agent/children/Logs&overview/index.vue
+++ b/src/views/intelligent-agent/children/Logs&overview/index.vue
@@ -15,23 +15,19 @@
    </div>
    <div class="tabs-body">
      <logs v-if="chooseTab === 'logs'"></logs>
-      <div class="flex align-items-c justify-content-b" style="flex-wrap: wrap">
-        <overview
-          v-if="chooseTab === 'overview'"
-          v-for="item in 8"
-          style="width: 50%;height: 300px"
-        ></overview>
-      </div>
+      <overview v-if="chooseTab === 'overview'"></overview>
    </div>
  </div>
 </template>
 <script>
 import logs from '@/views/intelligent-agent/children/Logs&overview/components/logs.vue'
 import overview from '@/views/intelligent-agent/children/Logs&overview/components/overveiw.vue'
+import * as echarts from 'echarts'
 export default {
  name: 'index',
  data() {
    return {
+      times: '',
      tabs: [
        {
          title: '日志',
@@ -45,7 +41,8 @@ export default {
          name: 'overview'
        }
      ],
-      chooseTab: 'logs'
+
+      chooseTab: 'overview'
    }
  },
  props: {},
@@ -92,6 +89,6 @@ export default {
  }
 }
 .tabs-body {
-  padding: 8px 0;
+  padding: 15px 0;
 }
 </style>
--- a/vue.config.js
+++ b/vue.config.js
@@ -67,6 +67,13 @@ module.exports = {
        pathRewrite: {
          '^/jifen': ''
        }
+      },
+      '/echarts': {
+        target: 'http://192.168.3.229:5001/console/',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/echarts': ''
+        }
      }
    }
  },