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"
      ></el-option>
    </el-select>
    <div
      class="flex align-items-c justify-content-b mt10"
      style="flex-wrap: wrap"
    >
      <REcharts
        :key="item.options.title.subtext"
        v-for="item in list"
        :options="item.options"
        style="width: calc(50% - 10px);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 { dailyConversations } from './API'

export default {
  name: 'overveiw',
  data() {
    return {
      times: '9',
      list: [
        {
          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, 1330, 1320],
                type: 'line',
                itemStyle: {
                  color: '#0694A2'
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 2, [
                    {
                      offset: 0,
                      color: '#F3F9FA'
                    },
                    {
                      offset: 0.2,
                      color: '#F3F9FA'
                    }
                  ])
                }
              }
            ]
          }
        },
        {
          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: '用户满意度',
              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: '费用消耗',
              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: {
    changeTime(value) {
      let label = this.findLabel(value)
      this.list = this.list.map(item => {
        return {
          options: {
            ...item.options,
            title: {
              ...item.options.title,
              subtext: label
            }
          }
        }
      })

      console.log(this.list)
    },
    // 查找label
    findLabel(value) {
      return this.options.find(item =>
        item.value === value ? value : this.value
      ).label
    },
    async getEcharts() {
      // let dailyConversationsApi = await dailyConversations({
      //   id: '27f6f211-6c74-4de8-9424-c1ba28d365c2'
      // })
      // console.log(dailyConversationsApi)
    }
  },
  created() {},
  mounted() {
    this.getEcharts()
  },
  computed: {}
}
</script>
<style scoped lang="scss"></style>