知识总览

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

@@ -31,6 +31,7 @@ import { useAppContext } from '@/context/app-context'
 import { useExternalApiPanel } from '@/context/external-api-panel-context'
 import { SimpleSelect } from '@/app/components/base/select'
 import { fetchTypes } from '@/service/common'
+import Statistic from '@/app/(commonLayout)/datasets/Statistic'
 
 const Container = () => {
   const { t } = useTranslation()
@@ -44,6 +45,7 @@ const Container = () => {
     return [
       { value: 'dataset', text: t('dataset.datasets') },
       ...(currentWorkspace.role === 'dataset_operator' ? [] : [{ value: 'api', text: t('dataset.datasetsApi') }]),
+      { value: 'statistic', text: '知识总览' },
     ]
   }, [currentWorkspace.role, t])
 
@@ -156,6 +158,7 @@ const Container = () => {
         </>
       )}
       {activeTab === 'api' && data && <Doc apiBaseUrl={data.api_base_url || ''} />}
+      {activeTab === 'statistic' && data && <Statistic/>}
 
       {showExternalApiPanel && <ExternalAPIPanel onClose={() => setShowExternalApiPanel(false)} />}
     </div>

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

@@ -0,0 +1,194 @@
+'use client'
+
+import { useState } from 'react'
+import cn from '@/utils/classnames'
+import ReactECharts from 'echarts-for-react'
+import * as echarts from 'echarts'
+
+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: 10 },
+    { name: '标签2', value: 10 },
+    { name: '标签3', value: 10 },
+    { name: '标签4', value: 10 },
+    { name: '标签5', value: 10 },
+    { name: '标签6', value: 10 },
+    { name: '标签7', value: 10 },
+    { name: '标签8', value: 10 },
+    { name: '标签9', value: 10 },
+    { name: '标签10', value: 10 },
+    { name: '标签11', value: 10 },
+    { name: '标签12', value: 10 },
+    { name: '标签13', value: 10 },
+    { name: '标签14', value: 10 },
+    { name: '标签15', value: 10 },
+  ])
+  const typeOptions = {
+    grid: {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+    },
+    tooltip: {
+      trigger: 'item',
+    },
+    legend: {
+      orient: 'horizontal',
+      top: 0,
+      itemWidth: 8,
+      itemHeight: 8,
+    },
+    series: [
+      {
+        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' },
+        ],
+        label: {
+          formatter: '{b} {d}%',
+        },
+        emphasis: {
+          disabled: true,
+        },
+      },
+    ],
+  }
+  const updateOptions = {
+    grid: {
+      top: 40,
+      bottom: 20,
+      left: 40,
+      right: 0,
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      axisLine: { show: false },
+      axisTick: { show: false },
+      splitLine: { show: false },
+      axisLabel: {
+        fontSize: 10,
+        interval: 0,
+        color: 'rgba(87, 98, 117, 1)',
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      splitNumber: 3,
+      splitLine: {
+        lineStyle: {
+          type: 'dashed',
+          color: 'rgba(239, 241, 248, 1)',
+        },
+      },
+      axisLabel: {
+        fontSize: 10,
+      },
+    },
+    series: [
+      {
+        type: 'bar',
+        data: [120, 200, 150, 80, 70, 110, 130],
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#2078FC' },
+            { offset: 1, color: '#5DC9F9' },
+          ]),
+        },
+      },
+    ],
+  }
+  const tagColors = ['#7185fb', '#4bc97d', '#2079fe', '#dba53c', '#4ec5f9']
+  const tagOptions = {
+    tooltip: {
+      trigger: 'item',
+    },
+    series: [
+      {
+        type: 'graph',
+        layout: 'force',
+        data: tagData.map((v, i) => {
+          v.itemStyle = {
+            color: tagColors[i % tagColors.length],
+          }
+          return v
+        }),
+        links: [],
+        roam: true,
+        force: {
+          repulsion: 100,
+        },
+        symbolSize: 60,
+        label: {
+          show: true,
+        },
+        emphasis: {
+          disabled: true,
+        },
+      },
+    ],
+  }
+  return (
+    <div className="w-full px-12">
+      <div className={cn('w-full gap-6', cardClass)}>
+        <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-[#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-[#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-[#111111]">标签总量</div>
+          </div>
+        </div>
+      </div>
+      <div className='mt-6 flex w-full gap-8'>
+        <div className={cn(cardClass, 'h-[360px] flex-1 flex-col overflow-hidden')}>
+          <div className="text-2xl font-bold text-[#333333]">知识库类别统计</div>
+          <div className="relative mt-3 flex flex-1 items-center justify-center">
+            <img src="/imgs/statistic-icon-4.png" className="absolute"/>
+            <ReactECharts option={typeOptions} className="flex-1" />
+          </div>
+        </div>
+        <div className={cn(cardClass, 'h-[360px] flex-1 flex-col overflow-hidden')}>
+          <div className="text-2xl font-bold text-[#333333]">知识库更新情况统计</div>
+          <ReactECharts option={updateOptions} className="flex-1" />
+        </div>
+        <div className={cn(cardClass, 'h-[360px] flex-1 flex-col overflow-hidden bg-[url("/imgs/statistic-icon-5.png")] bg-[length:100%_100%] bg-no-repeat')}>
+          <div className="text-2xl font-bold text-[#333333]">标签云图</div>
+          <ReactECharts option={tagOptions} className="flex-1" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Statistic