ccc

src/pages/Aanalyse/A1resStat/data.ts

@@ -1,81 +1,7 @@
 import * as echarts from 'echarts'
 
-// 生成模拟数据 - 中图分类统计
-const generateZhongTuData = () => {
-  const categories = [
-    'A 马克思主义、列宁主义、毛泽东思想、邓小平理论',
-    'B 哲学、宗教',
-    'C 社会科学总论',
-    'D 政治、法律',
-    'E 军事',
-    'F 经济',
-    'G 文化、科学、教育、体育',
-    'H 语言、文字',
-    'I 文学',
-    'J 艺术',
-    'K 历史、地理',
-    'N 自然科学总论',
-    'O 数理科学和化学',
-    'P 天文学、地球科学',
-    'Q 生物科学',
-    'R 医药、卫生',
-    'S 农业科学',
-    'T 工业技术',
-    'U 交通运输',
-    'V 航空、航天',
-    'X 环境科学、安全科学',
-    'Z 综合性图书'
-  ]
-
-  return categories.map(name => ({
-    name,
-    value: Math.floor(Math.random() * 500) + 50
-  }))
-}
-
-// 生成模拟数据 - 四部分类统计
-const generateSiBuData = () => {
-  const categories = [
-    '经部·易类',
-    '经部·书类',
-    '经部·诗类',
-    '经部·礼类',
-    '经部·春秋类',
-    '经部·孝经类',
-    '经部·五经总义类',
-    '经部·四书类',
-    '经部·小学类',
-    '史部·正史类',
-    '史部·编年类',
-    '史部·纪事本末类',
-    '史部·别史类',
-    '史部·杂史类',
-    '史部·诏令奏议类',
-    '史部·传记类',
-    '史部·史抄类',
-    '史部·载记类',
-    '史部·时令类',
-    '史部·地理类',
-    '史部·职官类',
-    '史部·政书类',
-    '史部·目录类',
-    '史部·史评类',
-    '子部·儒家类',
-    '子部·兵家类',
-    '子部·法家类',
-    '子部·农家类',
-    '子部·医家类',
-    '子部·天文算法类'
-  ]
-
-  return categories.map(name => ({
-    name,
-    value: Math.floor(Math.random() * 400) + 30
-  }))
-}
-
 // 生成柱状图
-export const initEchZhuFu = (data: any[], dom: any, type: 'zhongTu' | 'siBu' = 'zhongTu') => {
+export const initEchZhuFu = (data: any[], dom: any, title: string) => {
   if (!dom) return
 
   // 销毁已存在的实例
@@ -87,7 +13,7 @@ export const initEchZhuFu = (data: any[], dom: any, type: 'zhongTu' | 'siBu' = '
   const myChart = echarts.init(dom)
 
   // 根据类型获取数据
-  const chartData = type === 'zhongTu' ? generateZhongTuData() : generateSiBuData()
+  const chartData = data.map(v => ({ value: v.pcs || 0, name: v.name }))
   const total = chartData.reduce((sum, item) => sum + item.value, 0)
 
   const option = {
@@ -98,7 +24,7 @@ export const initEchZhuFu = (data: any[], dom: any, type: 'zhongTu' | 'siBu' = '
       },
       formatter: (params: any) => {
         const item = params[0]
-        const percent = ((item.value / total) * 100).toFixed(1)
+        const percent = total ? ((item.value / total) * 100).toFixed(1) : 0
         return `${item.name}<br/>数量: ${item.value}<br/>占比: ${percent}%`
       }
     },
@@ -151,36 +77,21 @@ export const initEchZhuFu = (data: any[], dom: any, type: 'zhongTu' | 'siBu' = '
     },
     series: [
       {
-        name: type === 'zhongTu' ? '中图分类' : '四部分类',
+        name: title,
         type: 'bar',
         barMaxWidth: 50,
         data: chartData.map(item => item.value),
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: type === 'zhongTu' ? '#83bff6' : '#92cc76' },
-            { offset: 0.5, color: type === 'zhongTu' ? '#188df0' : '#5cb85c' },
-            { offset: 1, color: type === 'zhongTu' ? '#188df0' : '#4cae4c' }
-          ])
-        },
+
         label: {
           show: true,
           position: 'top',
           formatter: (params: any) => {
-            const percent = ((params.value / total) * 100).toFixed(1)
+            const percent = total ? ((params.value / total) * 100).toFixed(1) : 0
             return `${params.value}\n${percent}%`
           },
           fontSize: 10,
           color: '#333',
           lineHeight: 14
-        },
-        emphasis: {
-          itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: type === 'zhongTu' ? '#2378f7' : '#5cb85c' },
-              { offset: 0.7, color: type === 'zhongTu' ? '#2378f7' : '#4cae4c' },
-              { offset: 1, color: type === 'zhongTu' ? '#83bff6' : '#92cc76' }
-            ])
-          }
         }
       }
     ]
@@ -207,44 +118,8 @@ export const initEchZhuFu = (data: any[], dom: any, type: 'zhongTu' | 'siBu' = '
   return myChart
 }
 
-// 生成模拟数据 - 资源库资源数统计
-const generateLibraryData = () => {
-  const categories = [
-    '古籍文献库',
-    '地方志库',
-    '家谱族谱库',
-    '舆图档案库',
-    '碑帖拓片库',
-    '契约文书库'
-  ]
-
-  return categories.map(name => ({
-    name,
-    value: Math.floor(Math.random() * 300) + 50
-  }))
-}
-
-// 生成模拟数据 - 标签统计
-const generateTagData = () => {
-  const categories = [
-    '民国文献',
-    '善本古籍',
-    '地方文献',
-    '史料档案',
-    '名人手稿',
-    '图片影像',
-    '金石拓片',
-    '舆地图谱'
-  ]
-
-  return categories.map(name => ({
-    name,
-    value: Math.floor(Math.random() * 200) + 30
-  }))
-}
-
 // 生成饼图
-export const initEchBingFu = (data: any[], dom: any, type: 'library' | 'tag' = 'library') => {
+export const initEchBingFu = (data: any[], dom: any) => {
   if (!dom) return
 
   // 销毁已存在的实例
@@ -256,22 +131,11 @@ export const initEchBingFu = (data: any[], dom: any, type: 'library' | 'tag' = '
   const myChart = echarts.init(dom)
 
   // 根据类型获取数据
-  const chartData = type === 'library' ? generateLibraryData() : generateTagData()
+  const chartData = data.map(v => ({ value: v.pcs, name: v.name }))
   const total = chartData.reduce((sum, item) => sum + item.value, 0)
 
   // 定义颜色方案
-  const libraryColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272']
-  const tagColors = [
-    '#fc8452',
-    '#9a60b4',
-    '#ea7ccc',
-    '#5470c6',
-    '#91cc75',
-    '#fac858',
-    '#ee6666',
-    '#73c0de'
-  ]
-  const colors = type === 'library' ? libraryColors : tagColors
+  const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272']
 
   const option = {
     tooltip: {
@@ -312,7 +176,6 @@ export const initEchBingFu = (data: any[], dom: any, type: 'library' | 'tag' = '
     },
     series: [
       {
-        name: type === 'library' ? '资源库资源数' : '标签统计',
         type: 'pie',
         radius: ['40%', '65%'],
         center: ['35%', '50%'],

src/pages/Aanalyse/A1resStat/index.module.scss

@@ -31,7 +31,7 @@
 
       .A1row2 {
         padding-right: 20px;
-        width: auto;
+        width: 330px;
         .A1titSon {
           margin-top: 10px;
           display: flex;
@@ -41,8 +41,6 @@
             color: var(--txtColor);
           }
           & > p {
-            margin-left: 15px;
-            margin-right: 20px;
             font-weight: 700;
             font-size: 22px;
           }
@@ -52,7 +50,7 @@
       .A1row3 {
         margin-right: 0;
         padding-right: 20px;
-        width: auto;
+        width: 330px;
         .A1row3Son {
           display: flex;
           align-items: center;
@@ -75,16 +73,25 @@
     .A1tll2 {
       margin-top: 15px;
       height: calc(100% - 110px);
-      overflow: auto;
       padding: 10px;
-      .A1tu {
-        margin-bottom: 15px;
-        .A1tit {
-          margin-bottom: 10px;
-        }
-        .echZhu {
-          height: 450px;
-          width: 100%;
+      .A1tit {
+        display: flex;
+        align-items: center;
+      }
+
+      .A1tuBox {
+        margin-top: 15px;
+        height: calc(100% - 50px);
+        overflow: auto;
+        .A1tu {
+          margin-bottom: 15px;
+          .A1tit {
+            margin-bottom: 10px;
+          }
+          .echZhu {
+            height: 450px;
+            width: 100%;
+          }
         }
       }
     }
@@ -103,6 +110,23 @@
           height: 340px;
         }
       }
+
+      .A1trrMain2 {
+        height: 384px;
+        .Z0null {
+          font-size: 20px;
+        }
+        .A1tit {
+          display: flex;
+          align-items: center;
+        }
+        .A1tuBox {
+          margin-top: 15px;
+          width: 100%;
+          height: calc(100% - 40px);
+          overflow: auto;
+        }
+      }
     }
   }
 }

src/pages/Aanalyse/A1resStat/index.tsx

@@ -1,15 +1,36 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import { Button, Select } from 'antd'
 import dayjs from 'dayjs'
 import { initEchBingFu, initEchZhuFu } from './data'
-import { useSelector } from 'react-redux'
-import { RootState } from '@/store'
+
+import {
+  A1_APIgetAllNum,
+  A1_APIgetDefCount,
+  A1_APIgetDict,
+  A1_APIgetYearNum
+} from '@/store/action/Aanalyse/A1resStat'
+import { antdSelectType } from '@/utils/dataChange'
+import { getKuListByOpenFu } from '@/pages/Zother/data'
+import { ziyuanAcGet } from '@/utils/storage'
 function A1resStat() {
+  // 1--------------------------------获取资源总数
+  const [allNum, setAllNum] = useState<any>({})
+  const APIgetAllNumFu = useCallback(async () => {
+    const res = await A1_APIgetAllNum()
+    if (res.code === 0) {
+      setAllNum(res.data)
+    }
+  }, [])
+
+  useEffect(() => {
+    APIgetAllNumFu()
+  }, [APIgetAllNumFu])
+
+  // 2--------------------------------年度
   // 获取现在的年份 到 2026的数组
   const timeArr = useMemo(() => {
-    // 待完善 去掉+1
-    const nowTime = dayjs().year() + 1
+    const nowTime = dayjs().year()
     const num = nowTime - 2026
     const arr: any[] = []
     for (let index = 0; index <= num; index++) {
@@ -19,30 +40,110 @@ function A1resStat() {
   }, [])
 
   const [time, setTime] = useState<number>(2026)
+  const [yearNum, setYearNum] = useState(0)
+
+  const getYearFu = useCallback(async () => {
+    const res = await A1_APIgetYearNum(time)
+    if (res.code === 0) {
+      setYearNum(res.data.total || 0)
+    }
+  }, [time])
 
-  // 柱状图和饼图
   useEffect(() => {
-    const data: any[] = []
-    initEchZhuFu(data, document.querySelector('#echZhu1'), 'zhongTu')
-    initEchZhuFu(data, document.querySelector('#echZhu2'), 'siBu')
+    getYearFu()
+  }, [getYearFu])
+
+  // ------------------表单资源选择模块
+
+  const [kuList, setKuList] = useState<antdSelectType[]>([])
+  const [loding, setLoding] = useState(false)
 
-    initEchBingFu(data, document.querySelector('#echBing1'), 'library')
+  useEffect(() => {
+    getKuListByOpenFu(data => {
+      setLoding(true)
+      if (data && data.length) {
+        setKuList(data)
+        const ziyuanAcTxt = ziyuanAcGet()
+        let objRes = data.find(v => v.value === ziyuanAcTxt)
+
+        const resFid = objRes ? ziyuanAcTxt : data[0].value
+        setKuId1(resFid)
+        setKuId2(resFid)
+      }
+    })
   }, [])
 
-  // 关联字典数组
-  // const dictArrTemp = useSelector((state: RootState) => state.Z2dict.dictAll)
-  // 关联标签
-  const biaoQianTemp = useSelector((state: RootState) => state.B3resTag.dictAll)
+  // 2--------------------------------字典-柱状图
+  const [kuId1, setKuId1] = useState('')
+  const [zhuData, setZhuData] = useState<{ list: any[]; loding: boolean }>({
+    list: [],
+    loding: false
+  })
 
-  const [tagAc, setTagAc] = useState('')
+  useEffect(() => {
+    if (zhuData.list && zhuData.list.length) {
+      zhuData.list.forEach((v, i) => {
+        initEchZhuFu(v.children, document.querySelector(`#echZhu${i + 1}`), v.name)
+      })
+    }
+  }, [zhuData])
+
+  const getZhuDataFu = useCallback(async () => {
+    if (kuId1) {
+      const res = await A1_APIgetDict(kuId1)
+      if (res.code === 0) {
+        setZhuData({ list: res.data || [], loding: true })
+      }
+    }
+  }, [kuId1])
 
   useEffect(() => {
-    if (biaoQianTemp && biaoQianTemp.length) setTagAc(biaoQianTemp[0].id)
-  }, [biaoQianTemp])
+    getZhuDataFu()
+  }, [getZhuDataFu])
+
+  // 3--------------------------------资源库资源数统计-饼图
+  const defCount = useRef<any[]>([])
+
+  const getDefCount = useCallback(async () => {
+    const res = await A1_APIgetDefCount()
+    if (res.code === 0) {
+      const data = res.data || []
+      initEchBingFu(data, document.querySelector('#echBing1'))
+      defCount.current = data
+    }
+  }, [])
+
+  useEffect(() => {
+    getDefCount()
+  }, [getDefCount])
+
+  // 4--------------------------------标签---饼图
+  const [kuId2, setKuId2] = useState('')
+  const [bingData, setBingData] = useState<{ list: any[]; loding: boolean }>({
+    list: [],
+    loding: false
+  })
+
+  useEffect(() => {
+    if (bingData.list && bingData.list.length) {
+      bingData.list.forEach((v, i) => {
+        initEchBingFu(v.children, document.querySelector(`#echTag${i + 1}`))
+      })
+    }
+  }, [bingData])
+
+  const getBingDataFu = useCallback(async () => {
+    if (kuId2) {
+      const res = await A1_APIgetDict(kuId2)
+      if (res.code === 0) {
+        setBingData({ list: res.data || [], loding: true })
+      }
+    }
+  }, [kuId2])
 
   useEffect(() => {
-    initEchBingFu([], document.querySelector('#echBing2'), 'tag')
-  }, [tagAc])
+    getBingDataFu()
+  }, [getBingDataFu])
 
   return (
     <div className={styles.A1resStat}>
@@ -52,21 +153,21 @@ function A1resStat() {
         <div className='A1tll1'>
           <div className='A1box A1row1'>
             <div className='A1tit'>总资源数</div>
-            <p>3741</p>
+            <p>{allNum.total || 0}</p>
           </div>
 
           <div className='A1box A1row1'>
             <div className='A1tit'>已发布资源数</div>
-            <p>3741</p>
+            <p>{allNum.pcsPublish || 0}</p>
           </div>
 
           <div className='A1box A1row1 A1row2'>
             <div className='A1tit'>各级别资源统计</div>
             <div className='A1titSon'>
-              <span>公开级</span>
-              <p>3741</p>
-              <span>内部级</span>
-              <p>6666</p>
+              <span>公开级</span>&nbsp;
+              <p>{allNum.pcsLevelPermOpen || 0}</p>&emsp;
+              <span>内部级</span>&nbsp;
+              <p>{allNum.pcsLevelPermIn || 0}</p>
             </div>
           </div>
 
@@ -78,21 +179,52 @@ function A1resStat() {
               </div>
             </div>
             <div className='A1row3Son'>
-              <p>123</p>
+              <p>{yearNum}</p>
               <div className='A1tit'>（件/套）</div>
             </div>
           </div>
         </div>
 
         <div className='A1tll2 A1box'>
-          <div className='A1tu'>
-            <div className='A1tit'>中图分类统计</div>
-            <div className='echZhu' id='echZhu1'></div>
-          </div>
-          <div className='A1tu'>
-            <div className='A1tit'>四部分类统计</div>
-            <div className='echZhu' id='echZhu2'></div>
+          <div className='A1tit'>
+            字典统计&emsp;
+            {kuId1 ? (
+              <div className='Z0ku'>
+                资源库：
+                <Select
+                  style={{ maxWidth: 200, minWidth: 120 }}
+                  value={kuId1}
+                  onChange={e => {
+                    setKuId1(e)
+                  }}
+                  options={kuList}
+                />
+              </div>
+            ) : null}
           </div>
+
+          {kuId1 ? (
+            <>
+              {zhuData.list.length ? (
+                <div className='A1tuBox'>
+                  {zhuData.list.map((v, i) => (
+                    <div className='A1tu' key={v.id}>
+                      <div className='A1tit'>{v.name}</div>
+                      <div className='echZhu' id={`echZhu${i + 1}`}></div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div hidden={!zhuData.loding} className='Z0null'>
+                  暂无数据
+                </div>
+              )}
+            </>
+          ) : (
+            <div hidden={!loding} className='Z0null'>
+              请先在 系统管理-资源库管理 添加数据
+            </div>
+          )}
         </div>
       </div>
       <div className='A1trr'>
@@ -104,17 +236,46 @@ function A1resStat() {
           <div id='echBing1' className='echBing'></div>
         </div>
 
-        <div className='A1trrMain A1box'>
+        <div className='A1trrMain A1box A1trrMain2'>
           <div className='A1tit'>
             标签统计&emsp;
-            <Select
-              style={{ width: 100 }}
-              value={tagAc}
-              onChange={e => setTagAc(e)}
-              options={biaoQianTemp.map(v => ({ value: v.id, label: v.name }))}
-            />
+            {kuId2 ? (
+              <div className='Z0ku'>
+                资源库：
+                <Select
+                  style={{ maxWidth: 200, minWidth: 120 }}
+                  value={kuId2}
+                  onChange={e => {
+                    setKuId2(e)
+                  }}
+                  options={kuList}
+                />
+              </div>
+            ) : null}
           </div>
-          <div id='echBing2' className='echBing'></div>
+
+          {kuId2 ? (
+            <>
+              {bingData.list.length ? (
+                <div className='A1tuBox'>
+                  {bingData.list.map((v, i) => (
+                    <div className='A1tu' key={v.id}>
+                      <div className='A1tit'>{v.name}</div>
+                      <div className='echBing' id={`echTag${i + 1}`}></div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div hidden={!bingData.loding} className='Z0null'>
+                  暂无数据
+                </div>
+              )}
+            </>
+          ) : (
+            <div hidden={!loding} className='Z0null'>
+              请先在 系统管理-资源库管理 添加数据
+            </div>
+          )}
         </div>
       </div>
     </div>

src/store/action/Aanalyse/A1resStat.ts

@@ -0,0 +1,21 @@
+import http from '@/utils/http'
+
+// 资源统计--资源总数
+export const A1_APIgetAllNum = () => {
+  return http.get('cms/count/total')
+}
+
+// 资源统计--年度新增资源数量
+export const A1_APIgetYearNum = (num: number) => {
+  return http.get(`cms/count/addByYear/${num}`)
+}
+
+// 资源统计--字典柱状图
+export const A1_APIgetDict = (formDefId: string) => {
+  return http.get(`cms/count/chartDict/${formDefId}`)
+}
+
+// 资源统计--资源库资源数统计
+export const A1_APIgetDefCount = () => {
+  return http.get('cms/count/defCount')
+}