ebiz-ai-knowledge-manage/src/views/intelligent-agent/children/Logs&overview/components/overview.vue

<template>
  <div class="p10">
    <el-select
      v-model="times"
      style="width: 200px"
      size="medium"
      @change="changeTime"
    >
      <el-option
        v-for="item in options"
        :value="item.value"
        :label="item.label"
        :key="item.value"
      ></el-option>
    </el-select>
    <div
      class="flex align-items-c justify-content-b mt10"
      style="flex-wrap: wrap"
    >
      <line-echarts
        v-for="(item, index) in list"
        :options="item.options"
        :key="item.options.title.subtext + index"
        style="width: calc(50% - 10px);height: 300px"
      ></line-echarts>
    </div>
  </div>
</template>
<script>
import LineEcharts from '@/views/intelligent-agent/children/Logs&overview/components/lineEcharts.vue'
import { echartsAllData } from './API'
import '@/assets/js/business-common'
import { timeOptions } from '@/assets/js/utils/utilOptions'
export default {
  name: 'overveiw',
  data() {
    return {
      times: '9',
      list: [],
      options: timeOptions
    }
  },
  props: {},
  watch: {},
  components: {
    LineEcharts
  },
  filters: {},
  methods: {
    /**
     * 根据 value 返回对应的时间范围
     * @param {string} value - 选项值，如 '2', '3', ..., '8'
     * @returns {{startDate: string, endDate: string}}
     */
    getDateRangeByValue(value) {
      const today = new Date()

      // 辅助函数：格式化日期为 yyyy-MM-dd
      function formatDate(date) {
        const y = date.getFullYear()
        const m = String(date.getMonth() + 1).padStart(2, '0')
        const d = String(date.getDate()).padStart(2, '0')
        return `${y}-${m}-${d}`
      }

      let startDate = ''
      let endDate = ''

      switch (value) {
        case '1': // 今天
          endDate = startDate = formatDate(today)
          break
        case '2': // 过去7天
          startDate = formatDate(
            new Date(today.getTime() - 6 * 24 * 60 * 60 * 1000)
          )
          endDate = formatDate(today)
          break
        case '3': // 过去4周（28天）
          startDate = formatDate(
            new Date(today.getTime() - 27 * 24 * 60 * 60 * 1000)
          )
          endDate = formatDate(today)
          break
        case '4': // 过去3个月（约90天）
          startDate = formatDate(
            new Date(today.getTime() - 89 * 24 * 60 * 60 * 1000)
          )
          endDate = formatDate(today)
          break
        case '5': // 过去12个月（约365天）
          startDate = formatDate(
            new Date(today.getTime() - 364 * 24 * 60 * 60 * 1000)
          )
          endDate = formatDate(today)
          break
        case '6': // 本月至今
          startDate = formatDate(
            new Date(today.getFullYear(), today.getMonth(), 1)
          )
          endDate = formatDate(today)
          break
        case '7': // 本季度至今
          const quarterStartMonth = Math.floor(today.getMonth() / 3) * 3
          startDate = formatDate(
            new Date(today.getFullYear(), quarterStartMonth, 1)
          )
          endDate = formatDate(today)
          break
        case '8': // 本年至今
          startDate = formatDate(new Date(today.getFullYear(), 0, 1))
          endDate = formatDate(today)
          break
        default:
          startDate = endDate = formatDate(today)
          break
      }

      return { startDate, endDate }
    },

    changeTime(value) {
      this.getEcharts()
    },
    // 查找label
    findLabel(value) {
      return this.options.find(item =>
        item.value === value ? value : this.value
      ).label
    },
    async getEcharts() {
      let list = [
        {
          code: 'conversationCount',
          options: {
            title: {
              seriesName: '全部会话数', // 系列名称
              text: '全部会话数',
              subtext: '所有时间'
            },
            xAxis: {
              data: []
            },
            series: [
              {
                name: '会话数',
                data: [],
                itemStyle: {
                  color: '#0694A2'
                },
                areaStyle: {
                  color: [
                    { offset: 0, color: '#0694A2' },
                    {
                      offset: 1,
                      color: '#F3F9FA'
                    }
                  ]
                }
              }
            ]
          }
        },
        {
          code: 'terminalCount',
          options: {
            title: {
              text: '活跃用户数',
              subtext: '所有时间'
            },
            xAxis: {
              data: []
            },
            series: [
              {
                name: '活跃用户',
                data: [],
                itemStyle: {
                  color: '#FF8A4C'
                },
                areaStyle: {
                  color: [
                    { offset: 0, color: '#FF8A4C' },
                    { offset: 1, color: '#FFF6F1' }
                  ]
                }
              }
            ]
          }
        },
        {
          code: 'interactions',
          options: {
            title: {
              text: '平均会话互动数',
              subtext: '所有时间'
            },
            xAxis: {
              data: []
            },
            series: [
              {
                name: '平均会话互动数',
                data: [],
                itemStyle: {
                  color: '#FF8A4C'
                },
                areaStyle: {
                  color: [
                    { offset: 0, color: '#FF8A4C' },
                    { offset: 1, color: '#FFF6F1' }
                  ]
                }
              }
            ]
          }
        },
        {
          code: 'tps',
          options: {
            title: {
              text: 'Token 输出速度',
              subtext: '所有时间'
            },
            xAxis: {
              data: []
            },
            series: [
              {
                name: 'Token 输出速度',
                data: [],
                itemStyle: {
                  color: '#FF8A4C'
                },
                areaStyle: {
                  color: [
                    { offset: 0, color: '#FF8A4C' },
                    { offset: 1, color: '#FFF6F1' }
                  ]
                }
              }
            ]
          }
        },
        {
          code: 'interactions',
          options: {
            title: {
              text: '平均每个会话交互次数',
              subtext: '所有时间'
            },
            xAxis: {
              data: []
            },
            series: [
              {
                name: '平均每个会话交互次数',
                data: [],
                itemStyle: {
                  color: '#1C64F1'
                },
                areaStyle: {
                  color: [
                    { offset: 0, color: '#1C64F1' },
                    { offset: 1, color: '#E3ECFD' }
                  ]
                }
              }
            ]
          }
        }
      ]

      let query = {
        appId: this.$route.query.appId
      }

      if (this.times !== '9') {
        let times = this.getDateRangeByValue(this.times)
        query.startDate = times.startDate
        query.endDate = times.endDate
      }

      let { content } = await echartsAllData(query)
      let x = []
      let obj = {}
      content.content.map(item => {
        x.push(item.date)
        for (let itemKey in item) {
          obj[itemKey] = obj[itemKey] ? obj[itemKey] : []
          obj[itemKey].push(item[itemKey])
        }
      })
      let label = this.findLabel(this.times)
      list.map(item => {
        item.options.xAxis.data = x
        for (let keys in obj) {
          if (keys === item.code) {
            item.options.series[0].data = obj[keys]
          }
        }
        item.options.title = {
          ...item.options.title,
          subtext: label
        }
      })

      this.list = JSON.parse(JSON.stringify(list))
    }
  },
  created() {},
  mounted() {
    this.getEcharts()
  },
  computed: {}
}
</script>
<style scoped lang="scss"></style>