知识总览

web/app/(commonLayout)/datasets/Statistic.tsx

@@ -1,34 +1,37 @@
 'use client'
 
-import { useState } from 'react'
 import cn from '@/utils/classnames'
 import ReactECharts from 'echarts-for-react'
 import * as echarts from 'echarts'
+import useSWR from 'swr'
+import { fetchStatistic } from '@/service/common'
+import { useAppContext } from '@/context/app-context'
 
 const cardClass = 'bg-[#FCFCFC] border rounded-[10px] border-[#E6E7EB] p-6 flex'
 const Statistic = () => {
-  const [knowledges, setKnowledges] = useState(0)
-  const [depts, setDepts] = useState(0)
-  const [tags, setTags] = useState(0)
-  const [typeData, setTypeData] = useState([])
-  const [updateData, setUpdateData] = useState([])
-  const [tagData, setTagData] = useState([
-    { name: '标签1', value: 100 },
-    { name: '标签2', value: 90 },
-    { name: '标签3', value: 80 },
-    { name: '标签4', value: 70 },
-    { name: '标签5', value: 60 },
-    { name: '标签6', value: 50 },
-    { name: '标签7', value: 40 },
-    { name: '标签8', value: 30 },
-    { name: '标签9', value: 20 },
-    { name: '标签10', value: 10 },
-    { name: '标签11', value: 9 },
-    { name: '标签12', value: 8 },
-    { name: '标签13', value: 7 },
-    { name: '标签14', value: 6 },
-    { name: '标签15', value: 5 },
-  ])
+  const { currentWorkspace, isCurrentWorkspaceOwner } = useAppContext()
+  const { data: data1 }: any = useSWR(
+    {
+      url: '/datasets/count',
+      params: {
+        tenant_id: currentWorkspace.id,
+      },
+    },
+    fetchStatistic,
+  )
+  const datasetsCount = data1?.data?.datasets_count || 0
+  const deptsCount = data1?.data?.depts_count || 0
+  const tagsCount = data1?.data?.tags_count || 0
+  const { data: data2 }: any = useSWR(
+    {
+      url: '/datasets/type-stats',
+      params: {
+        tenant_id: currentWorkspace.id,
+      },
+    },
+    fetchStatistic,
+  )
+  const typeData = data2?.data || []
   const typeOptions = {
     grid: {
       top: 0,
@@ -49,13 +52,11 @@ const Statistic = () => {
       {
         type: 'pie',
         radius: ['26%', '50%'],
-        data: [
-          { value: 1048, name: 'Search Engine' },
-          { value: 735, name: 'Direct' },
-          { value: 580, name: 'Email' },
-          { value: 484, name: 'Union Ads' },
-          { value: 300, name: 'Video Ads' },
-        ],
+        data: typeData.map((v: any) => {
+          v.value = v.value || 100
+          v.name = v.type
+          return v
+        }),
         label: {
           formatter: '{b} {d}%',
         },
@@ -65,6 +66,16 @@ const Statistic = () => {
       },
     ],
   }
+  const { data: data3 }: any = useSWR(
+    {
+      url: '/datasets/update-stats',
+      params: {
+        tenant_id: currentWorkspace.id,
+      },
+    },
+    fetchStatistic,
+  )
+  const updateData = data3?.data || []
   const updateOptions = {
     grid: {
       top: 40,
@@ -77,7 +88,7 @@ const Statistic = () => {
     },
     xAxis: {
       type: 'category',
-      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      data: updateData.map((v: any) => v.period),
       axisLine: { show: false },
       axisTick: { show: false },
       splitLine: { show: false },
@@ -105,7 +116,7 @@ const Statistic = () => {
     series: [
       {
         type: 'bar',
-        data: [120, 200, 150, 80, 70, 110, 130],
+        data: updateData.map((v: any) => v.count),
         itemStyle: {
           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: '#2078FC' },
@@ -115,6 +126,16 @@ const Statistic = () => {
       },
     ],
   }
+  const { data: data4 }: any = useSWR(
+    {
+      url: '/tags',
+      params: {
+        type: 'knowledge',
+      },
+    },
+    fetchStatistic,
+  )
+  const tagData = data4 || []
   const tagColors = ['#7185fb', '#4bc97d', '#2079fe', '#dba53c', '#4ec5f9']
   const tagOptions = {
     tooltip: {
@@ -124,7 +145,7 @@ const Statistic = () => {
       {
         type: 'graph',
         layout: 'force',
-        data: tagData.sort((a, b) => b.value - a.value).map((v, i) => {
+        data: tagData.map((v: any) => ({ name: v.name, value: Number(v.binding_count) })).sort((a: any, b: any) => b.value - a.value).map((v: any, i: number) => {
           if (i < Math.floor(tagData.length / 4)) {
             v.symbolSize = 100
             v.label = {
@@ -177,21 +198,21 @@ const Statistic = () => {
         <div className="flex h-[120px] grow items-center bg-[url('/imgs/statistic-bg.png')] bg-[length:100%_100%] bg-no-repeat pl-6">
           <img src="/imgs/statistic-icon-1.png" className="mr-6 h-16 w-16"/>
           <div>
-            <div className="text-[36px] text-[#111111]">{knowledges}</div>
+            <div className="text-[36px] text-[#111111]">{datasetsCount}</div>
             <div className="text-[#111111]">知识库总量</div>
           </div>
         </div>
         <div className="flex h-[120px] grow items-center bg-[url('/imgs/statistic-bg.png')] bg-[length:100%_100%] bg-no-repeat pl-6">
           <img src="/imgs/statistic-icon-2.png" className="mr-6 h-16 w-16"/>
           <div>
-            <div className="text-[36px] text-[#111111]">{depts}</div>
+            <div className="text-[36px] text-[#111111]">{deptsCount}</div>
             <div className="text-[#111111]">部门总量</div>
           </div>
         </div>
         <div className="flex h-[120px] grow items-center bg-[url('/imgs/statistic-bg.png')] bg-[length:100%_100%] bg-no-repeat pl-6">
           <img src="/imgs/statistic-icon-3.png" className="mr-6 h-16 w-16"/>
           <div>
-            <div className="text-[36px] text-[#111111]">{tags}</div>
+            <div className="text-[36px] text-[#111111]">{tagsCount}</div>
             <div className="text-[#111111]">标签总量</div>
           </div>
         </div>

web/service/common.ts

@@ -507,6 +507,11 @@ export const fetchLog = ({ url, params }: any) => {
   })
 }
 
+export const fetchStatistic = ({ url, params }: any) => {
+  console.log('查询知识总览', url, params)
+  return get(url, { params })
+}
+
 export const fetchCorpus = ({ url, params }: any) => {
   console.log('查询训练语料列表', url, params)
   // return get(url, { params })