feat: 分析页增加数据总览和热门模块列表，调整分析页布局

continew-org · Oct 19, 2024 · 8a3f456 · 8a3f456
1 parent 1cb0172
commit 8a3f456
Show file tree

Hide file tree

Showing 17 changed files with 863 additions and 175 deletions.
diff --git a/src/apis/common/home.ts → src/apis/common/dashboard.ts b/src/apis/common/home.ts → src/apis/common/dashboard.ts
@@ -5,16 +5,26 @@ export type * from './type'
 
 const BASE_URL = '/dashboard'
 
-/** @desc 查询访问趋势 */
-export function listDashboardAccessTrend(days: number) {
-  return http.get<T.DashboardAccessTrendResp[]>(`${BASE_URL}/access/trend/${days}`)
-}
-
 /** @desc 查询公告列表 */
 export function listDashboardNotice() {
   return http.get<T.DashboardNoticeResp[]>(`${BASE_URL}/notice`)
 }
 
+/** @desc 查询 PV 总览 */
+export function getDashboardOverviewPv() {
+  return http.get<T.DashboardOverviewCommonResp>(`${BASE_URL}/analysis/overview/pv`)
+}
+
+/** @desc 查询 IP 总览 */
+export function getDashboardOverviewIp() {
+  return http.get<T.DashboardOverviewCommonResp>(`${BASE_URL}/analysis/overview/ip`)
+}
+
+/** @desc 查询访问趋势 */
+export function getDashboardAccessTrend(days: number) {
+  return http.get<T.DashboardAccessTrendResp[]>(`${BASE_URL}/access/trend/${days}`)
+}
+
 /** @desc 查询访问时段分析 */
 export function getAnalysisTimeslot() {
   return http.get<T.DashboardChartCommonResp[]>(`${BASE_URL}/analysis/timeslot`)

diff --git a/src/apis/common/index.ts b/src/apis/common/index.ts
@@ -1,3 +1,3 @@
 export * from './common'
 export * from './captcha'
-export * from './home'
+export * from './dashboard'
diff --git a/src/apis/common/type.ts b/src/apis/common/type.ts
@@ -5,26 +5,34 @@ export interface ImageCaptchaResp {
   expireTime: number
 }
 
+/** 仪表盘公告类型 */
+export interface DashboardNoticeResp {
+  id: number
+  title: string
+  type: number
+}
+
 /** 仪表盘访问趋势类型 */
 export interface DashboardAccessTrendResp {
   date: string
   pvCount: number
   ipCount: number
 }
 
-/** 仪表盘图表类型 */
+/** 仪表盘通用总览类型 */
+export interface DashboardOverviewCommonResp {
+  total: number
+  today: number
+  growth: number
+  dataList: DashboardChartCommonResp[]
+}
+
+/** 仪表盘通用图表类型 */
 export interface DashboardChartCommonResp {
   name: string
   value: number
 }
 
-/** 仪表盘公告类型 */
-export interface DashboardNoticeResp {
-  id: number
-  title: string
-  type: number
-}
-
 /* 行为验证码类型 */
 export interface BehaviorCaptchaResp {
   originalImageBase64: string

diff --git a/src/hooks/modules/useChart.ts b/src/hooks/modules/useChart.ts
@@ -18,9 +18,9 @@ export function useChart(sourceOption: optionsFn) {
   // echarts support https://echarts.apache.org/zh/theme-builder.html
   // 这里不使用
   // TODO 图表主题
-  const option = computed<EChartsOption>(() => {
+  const chartOption = computed<EChartsOption>(() => {
     return sourceOption(isDark.value)
   })
 
-  return { option }
+  return { chartOption }
 }
diff --git a/src/views/dashboard/analysis/components/AccessTimeslot.vue b/src/views/dashboard/analysis/components/AccessTimeslot.vue
@@ -1,13 +1,13 @@
 <template>
   <a-spin :loading="loading" style="width: 100%">
-    <a-card title="访问时段分析" class="general-card" :header-style="{ paddingBottom: '16px' }">
-      <Chart style="width: 100%; height: 370px" :option="option" />
+    <a-card class="general-card" title="访问时段分析">
+      <Chart :option="chartOption" style="width: 100%; height: 370px" />
     </a-card>
   </a-spin>
 </template>
 
 <script lang="ts" setup>
-import { graphic } from 'echarts'
+import { type EChartsOption, graphic } from 'echarts'
 import { useChart } from '@/hooks'
 import { type DashboardChartCommonResp, getAnalysisTimeslot as getData } from '@/apis/common'
 
@@ -29,8 +29,8 @@ const tooltipItemsHtmlString = (items) => {
 }
 
 const xAxis = ref<string[]>([])
-const dataList = ref<number[]>([])
-const { option } = useChart((isDark) => {
+const chartData = ref<number[]>([])
+const { chartOption } = useChart((isDark: EChartsOption) => {
   return {
     grid: {
       left: '40',
@@ -121,12 +121,14 @@ const { option } = useChart((isDark) => {
     },
     series: [
       {
-        name: '浏览量(PV)',
-        data: dataList.value,
+        name: '访问次数',
+        data: chartData.value,
         type: 'line',
         smooth: true,
         showSymbol: false,
-        color: '#246EFF',
+        color: isDark ? '#3D72F6' : '#246EFF',
+        symbol: 'circle',
+        symbolSize: 10,
         emphasis: {
           focus: 'series',
           itemStyle: {
@@ -185,7 +187,7 @@ const getChartData = async () => {
     const { data } = await getData()
     data.forEach((item: DashboardChartCommonResp) => {
       xAxis.value.push(item.name)
-      dataList.value.push(item.value)
+      chartData.value.push(item.value)
     })
   } finally {
     loading.value = false

diff --git a/src/views/dashboard/analysis/components/AccessTrend.vue b/src/views/dashboard/analysis/components/AccessTrend.vue
@@ -1,20 +1,20 @@
 <template>
   <a-spin :loading="loading" style="width: 100%">
-    <a-card title="访问趋势" class="general-card">
+    <a-card class="general-card" title="访问趋势">
       <template #extra>
         <a-radio-group v-model:model-value="dateRange" type="button" size="small" @change="onChange as any">
           <a-radio :value="7">近7天</a-radio>
           <a-radio :value="30">近30天</a-radio>
         </a-radio-group>
       </template>
-      <Chart :option="option" :style="{ height: '326px' }" />
+      <Chart :option="chartOption" style="height: 460px" />
     </a-card>
   </a-spin>
 </template>
 
 <script lang="ts" setup>
-import { graphic } from 'echarts'
-import { type DashboardAccessTrendResp, listDashboardAccessTrend } from '@/apis'
+import { type EChartsOption, graphic } from 'echarts'
+import { type DashboardAccessTrendResp, getDashboardAccessTrend as getData } from '@/apis'
 import { useChart } from '@/hooks'
 
 // 提示框
@@ -34,14 +34,14 @@ const tooltipItemsHtmlString = (items) => {
     .join('')
 }
 
-const xData = ref<string[]>([])
-const pvStatisticsData = ref<number[]>([])
-const ipStatisticsData = ref<number[]>([])
-const { option } = useChart((isDark) => {
+const xAxis = ref<string[]>([])
+const pvChartData = ref<number[]>([])
+const ipChartData = ref<number[]>([])
+const { chartOption } = useChart((isDark: EChartsOption) => {
   return {
     grid: {
       left: '38',
-      right: '0',
+      right: '5',
       top: '10',
       bottom: '50'
     },
@@ -55,13 +55,13 @@ const { option } = useChart((isDark) => {
     xAxis: {
       type: 'category',
       offset: 2,
-      data: xData.value,
+      data: xAxis.value,
       boundaryGap: false,
       axisLabel: {
         color: '#4E5969',
         formatter(value: number, idx: number) {
           if (idx === 0) return ''
-          if (idx === xData.value.length - 1) return ''
+          if (idx === xAxis.value.length - 1) return ''
           return `${value}`
         }
       },
@@ -75,7 +75,7 @@ const { option } = useChart((isDark) => {
         show: true,
         interval: (idx: number) => {
           if (idx === 0) return false
-          return idx !== xData.value.length - 1
+          return idx !== xAxis.value.length - 1
         },
         lineStyle: {
           color: isDark ? '#3F3F3F' : '#E5E8EF'
@@ -124,8 +124,8 @@ const { option } = useChart((isDark) => {
     },
     series: [
       {
-        name: '浏览量(PV)',
-        data: pvStatisticsData.value,
+        name: '访问次数',
+        data: pvChartData.value,
         type: 'line',
         smooth: true,
         showSymbol: false,
@@ -154,8 +154,8 @@ const { option } = useChart((isDark) => {
         }
       },
       {
-        name: 'IP数',
-        data: ipStatisticsData.value,
+        name: '独立IP',
+        data: ipChartData.value,
         type: 'line',
         smooth: true,
         showSymbol: false,
@@ -193,14 +193,14 @@ const dateRange = ref(30)
 const getChartData = async (days: number) => {
   try {
     loading.value = true
-    xData.value = []
-    pvStatisticsData.value = []
-    ipStatisticsData.value = []
-    const { data: chartData } = await listDashboardAccessTrend(days)
-    chartData.forEach((el: DashboardAccessTrendResp) => {
-      xData.value.unshift(el.date)
-      pvStatisticsData.value.unshift(el.pvCount)
-      ipStatisticsData.value.unshift(el.ipCount)
+    xAxis.value = []
+    pvChartData.value = []
+    ipChartData.value = []
+    const { data: chartData } = await getData(days)
+    chartData.forEach((item: DashboardAccessTrendResp) => {
+      xAxis.value.push(item.date)
+      pvChartData.value.push(item.pvCount)
+      ipChartData.value.push(item.ipCount)
     })
   } finally {
     loading.value = false

diff --git a/...board/analysis/components/BrowserItem.vue → ...dashboard/analysis/components/Browser.vue b/...board/analysis/components/BrowserItem.vue → ...dashboard/analysis/components/Browser.vue
@@ -1,23 +1,23 @@
 <template>
   <a-spin :loading="loading" style="width: 100%">
-    <a-card class="general-card" title="浏览器分析" :header-style="{ paddingBottom: '12px' }">
+    <a-card class="general-card" title="浏览器">
       <div class="chart">
-        <Chart v-if="!loading" style="height: 210px" :option="option" />
+        <Chart v-if="!loading" :option="chartOption" style="height: 190px" />
       </div>
     </a-card>
   </a-spin>
 </template>
 
 <script lang="ts" setup>
+import type { EChartsOption } from 'echarts'
 import { useChart } from '@/hooks'
 import { type DashboardChartCommonResp, getAnalysisBrowser as getData } from '@/apis/common'
 
 const xAxis = ref<string[]>([])
-const dataList = ref([])
-const { option } = useChart((isDark) => {
+const chartData = ref([])
+const { chartOption } = useChart((isDark: EChartsOption) => {
   return {
     legend: {
-      bottom: 'center',
       data: xAxis.value,
       bottom: 0,
       icon: 'circle',
@@ -36,8 +36,8 @@ const { option } = useChart((isDark) => {
     series: [
       {
         type: 'pie',
-        radius: ['50%', '70%'],
-        center: ['50%', '45%'],
+        radius: ['35%', '60%'],
+        center: ['50%', '42%'],
         label: {
           formatter: '{d}% ',
           color: isDark ? 'rgba(255, 255, 255, 0.7)' : '#4E5969'
@@ -46,22 +46,22 @@ const { option } = useChart((isDark) => {
           borderColor: isDark ? '#000' : '#fff',
           borderWidth: 1
         },
-        data: dataList.value
+        data: chartData.value
       }
     ]
   }
 })
 
 const loading = ref(false)
-const colors = ['#249EFF', '#846BCE', '#21CCFF', '#0E42D2', '#86DF6C']
+const colors = ['#246EFF', '#00B2FF', '#81E2FF', '#846BCE', '#86DF6C']
 // 查询图表数据
 const getChartData = async () => {
   try {
     loading.value = true
     const { data } = await getData()
-    data.forEach((item: DashboardChartCommonResp, index) => {
+    data.forEach((item: DashboardChartCommonResp, index: number) => {
       xAxis.value.push(item.name)
-      dataList.value.push({
+      chartData.value.push({
         ...item,
         itemStyle: {
           color: data.length > 1 && index === data.length - 1 ? colors[colors.length - 1] : colors[index]

diff --git a/src/views/dashboard/analysis/components/DataOverview.vue b/src/views/dashboard/analysis/components/DataOverview.vue
@@ -0,0 +1,30 @@
+<template>
+  <a-card class="general-card" title="数据总览">
+    <a-grid :cols="24" :col-gap="12" :row-gap="12">
+      <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 6, xxl: 6 }">
+        <Pv />
+      </a-grid-item>
+      <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 6, xxl: 6 }">
+        <Ip />
+      </a-grid-item>
+      <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 6, xxl: 6 }">
+        <Demo1 />
+      </a-grid-item>
+      <a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 24, xl: 6, xxl: 6 }">
+        <Demo2 />
+      </a-grid-item>
+    </a-grid>
+    <template #extra>
+      <slot name="extra"></slot>
+    </template>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+import Pv from './flow/Pv.vue'
+import Ip from './flow/Ip.vue'
+import Demo1 from './flow/Demo1.vue'
+import Demo2 from './flow/Demo2.vue'
+</script>
+
+<style scoped lang="less"></style>