更新ui

front/src/pages/components/Left/index.module.scss

@@ -17,17 +17,19 @@
       padding: 20px;
       .topInfo {
         display: flex;
+        flex-wrap: wrap;
         width: 100%;
-        height: 20%;
-        gap: 16px;
-        .finding,
-        .found {
-          width: 50%;
-          height: 100%;
+        height: 230px;
+        gap: 8px;
+        margin-bottom: 20px;
+        .topInfoItem {
+          width: 48%;
+          height: 70px;
           display: flex;
           flex-direction: column;
           border-radius: 10px;
-          background: url('../../../assets/img/foundBg.png') no-repeat center;
+          background: url('../../../assets/img/found_bg.png') no-repeat center;
+          padding: 10px 0;
           .title {
             width: 100%;
             height: 65%;
@@ -38,28 +40,39 @@
             align-items: center;
             justify-content: center;
             & > img {
-              height: 70px;
+              height: 45px;
+              width: 45px;
               object-fit: none;
             }
           }
           .num {
             height: 0;
+            flex: 1;
             width: 100%;
             color: #fff;
             font-weight: 600;
-            font-size: 24px;
+            font-size: 20px;
             display: flex;
             align-items: center;
             justify-content: center;
           }
         }
+        .topInfoItem:nth-child(1) {
+          background: url('../../../assets/img/buried_bg.png') no-repeat center;
+          width: 100%;
+          padding-right: 25px;
+          .num {
+            padding-left: 25px;
+          }
+        }
       }
 
       .mainInfoBox {
         padding: 20px;
         border-radius: 10px;
         background: url('../../../assets/img/mainInfoBoxBg.png') no-repeat 100% 100%;
-        height: 80%;
+        height: 0;
+        flex: 1;
         width: 100%;
         .tab {
           display: flex;
@@ -116,7 +129,6 @@
               gap: 10px;
               .labelList {
                 display: flex;
-                gap: 10px;
                 height: 35px;
                 .label {
                   width: 95px;

front/src/pages/components/Left/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useMemo, useState } from 'react'
 import styles from './index.module.scss'
 import { useDispatch, useSelector } from 'react-redux'
-import { Clue_APIgetClueList } from '@/store/action/clue'
+import { Clue_APIgetClueList, getTopinfo } from '@/store/action/clue'
 import { RootState } from '@/store'
 import store from '@/store'
 import { ClueItem } from '@/types/api/clue'
@@ -15,6 +15,7 @@ type LeftProps = {
 }
 function Left(props: LeftProps) {
   const dispatch = useDispatch()
+  const [topInfo, setTopInfo] = useState<any>()
   const getListFu = useCallback(
     (pageNum: number, pageSize: number) => {
       dispatch(
@@ -27,11 +28,18 @@ function Left(props: LeftProps) {
     [dispatch]
   )
 
+  const getTopinfoFu = useCallback(async () => {
+    const res = await dispatch(getTopinfo() as any)
+    console.log('res', JSON.parse(res.rtf))
+    setTopInfo(JSON.parse(res.rtf))
+  }, [dispatch])
+
   const { list: listAll, total } = useSelector((state: RootState) => state.Clue.tableInfo)
 
   useEffect(() => {
     getListFu(1, 20)
-  }, [getListFu])
+    getTopinfoFu()
+  }, [getListFu, getTopinfoFu])
 
   const fingingList = useMemo(() => {
     return listAll.filter((item: ClueItem) => item.status === '跟进中')
@@ -64,19 +72,40 @@ function Left(props: LeftProps) {
     <div className={classNames(styles.Left, props.classN)}>
       <div className='infoContainer'>
         <div className='topInfo'>
-          <div className='finding'>
+          <div className='topInfoItem'>
+            <div className='title'>
+              <img src={require('@/assets/img/buried.png')} alt='' />
+              <div>安葬烈士</div>
+            </div>
+            <div className='num'>{topInfo?.[0].pcs}</div>
+          </div>
+          <div className='topInfoItem'>
+            <div className='title'>
+              <img src={require('@/assets/img/person.png')} alt='' />
+              <div>有名烈士</div>
+            </div>
+            <div className='num'>{topInfo?.[1].pcs}</div>
+          </div>
+          <div className='topInfoItem'>
+            <div className='title'>
+              <img src={require('@/assets/img/person.png')} alt='' />
+              <div>无名烈士</div>
+            </div>
+            <div className='num'>{topInfo?.[2].pcs}</div>
+          </div>
+          <div className='topInfoItem'>
             <div className='title'>
               <img src={require('@/assets/img/finding.png')} alt='' />
               <div>寻亲中</div>
             </div>
-            <div className='num'>{fingingList.length}</div>
+            <div className='num'>{topInfo?.[3].pcs}</div>
           </div>
-          <div className='found'>
+          <div className='topInfoItem'>
             <div className='title'>
               <img src={require('@/assets/img/found.png')} alt='' />
               <div>已找到</div>
             </div>
-            <div className='num'>{foundList.length}</div>
+            <div className='num'>{topInfo?.[4].pcs}</div>
           </div>
         </div>
         <div className='mainInfoBox'>

front/src/store/action/clue.ts

@@ -4,18 +4,18 @@
 
 import http from '@/utils/http'
 import { AppDispatch } from '@/store'
-import { ClueItem } from '@/types/api/clue';
+import { ClueItem } from '@/types/api/clue'
 
 /**
  * 获取线索记录列表
  */
 type Clue_APIgetClueListParams = {
-  martyrId?: number,
-	pageNum: number,
-	pageSize: number,
-	searchKey?: string,
-	status?: number,
-	type?: string
+  martyrId?: number
+  pageNum: number
+  pageSize: number
+  searchKey?: string
+  status?: number
+  type?: string
 }
 export const Clue_APIgetClueList = (data: Clue_APIgetClueListParams): any => {
   return async (dispatch: AppDispatch) => {
@@ -23,19 +23,28 @@ export const Clue_APIgetClueList = (data: Clue_APIgetClueListParams): any => {
     if (res.code === 0) {
       const obj = {
         list: res.data.records.map((item: ClueItem) => ({
-              ...item,
-              status: {
-                0: '待确定',
-                1: '跟进中',
-                2: '已找到',
-                3: '未找到',
-                4: '作废',
-              }[item.status] as string
-            })),
+          ...item,
+          status: {
+            0: '待确定',
+            1: '跟进中',
+            2: '已找到',
+            3: '未找到',
+            4: '作废'
+          }[item.status] as string
+        })),
         total: res.data.total
       }
 
       dispatch({ type: 'Clue_APIgetClueList', payload: obj })
     }
   }
-}
+}
+
+export const getTopinfo = () => {
+  return async (dispatch: AppDispatch) => {
+    const res = await http.get('/show/maintain/detail/10')
+    if (res.code === 0) {
+      return res.data
+    }
+  }
+}