fe_service_ebtp_frontend/src/pages/PartyMemberTopic/PartyBranch/index.tsx

import React, { useEffect, useState } from 'react';
import '../Style/ld_style.less';
import { Input, List } from 'antd';
import { history } from 'umi'
import { getBranchList, getMemberAndBranch } from './service';

const { Search } = Input;

const data = [
  {
    title: '集团党支部',
    num: 987,
  },
  {
    title: '北京分公司党支部',
    num: 127,
  },
  {
    title: '山东分公司党支部',
    num: 110,
  },
  {
    title: '吉林分公司党支部',
    num: 121,
  },
  {
    title: '辽宁分公司党支部',
    num: 130,
  },
  {
    title: '陕西分公司党支部',
    num: 105,
  },
  {
    title: '山西分公司党支部',
    num: 104,
  },
  {
    title: '湖北分公司党支部',
    num: 113,
  },
  {
    title: '湖南分公司党支部',
    num: 111,
  },
  {
    title: '江苏分公司党支部',
    num: 987,
  },
  {
    title: '河南分公司党支部',
    num: 121,
  },
  {
    title: '河北分公司党支部',
    num: 100,
  },
  {
    title: '天津分公司党支部',
    num: 86,
  },
  {
    title: '上海分公司党支部',
    num: 98,
  },
  {
    title: '安徽分公司党支部',
    num: 105,
  },
  {
    title: '江西分公司党支部',
    num: 121,
  },
];



const PartyBranch: React.FC<{}> = () => {
  //member number and branch number
  const [memberNumber, setMemberNumber] = useState<any>({});
  //branch list
  const [branchData, setBranchData] = useState<any[]>([]);
  //get member and branch
  const getMemberNumber = () => {
    getMemberAndBranch().then(res => {
      if (res?.code == 200) {
        setMemberNumber(res?.data);
      }
    })
  }

  //get member and branch
  const getBranchData = () => {
    getBranchList().then(res => {
      if (res?.code == 200) {
        setBranchData(res?.data);
      }
    })
  }

  //onclick
  const clickCard = (data: any) => {
    sessionStorage.setItem("detailData", JSON.stringify(data));
    history.push("/partyMemberTopic/personInfor");
  }

  //to home
  const toHome = () => {
    history.push("/partyMemberTopic/home");
  }

  useEffect(() => {
    getMemberNumber();
    getBranchData();
  }, [])
  return (
    <div className="page-container">
      <div className="top-banner">
        <div className="back-home">
          <span onClick={() => toHome()}>返回首页</span>
        </div>
      </div>
      <div className="search">
        <span className="text"><span>党员名录</span>(当前共270条)</span>
        <div className="search-box">
          <Search
            placeholder="输入姓名/邮箱/电话"
            allowClear
            enterButton="搜索"
            style={{ width: 322 }}
          />
        </div>
      </div>
      <div className="static-box">
        <div className="person-num">党员数量<span>{memberNumber?.member}</span>人</div>
        <div className="party-num">党支部数量<span>{memberNumber?.branch}</span>个</div>
      </div>
      <div className="mess-box">
        <List
          grid={{ gutter: 16, column: 4 }}
          dataSource={branchData}
          renderItem={(item: any) => (
            <List.Item>
              <div className="wrapper" onClick={() => clickCard(item)}>
                <div className="pic-bg">{item.branchName}</div>
                <div className="mess">
                  <div className="mess-left">党员数量</div>
                  <div className="mess-right">
                    <span>{item.count}</span>人
                  </div>
                </div>
              </div>
            </List.Item>
          )}
        />
      </div>
    </div>
  )
}

export default PartyBranch;