.

config/routes.js

     hideInMenu: true,
     component: '@/pages/certificateIssuance/issuance.jsx',
   },
-  
+  {
+    path: '/cardList',
+    name: '证件列表',
+    icon: 'IdcardOutlined',
+    component: '@/pages/cardList',
+  },
+  {
+    path: '/cardList/detail.jsx',
+    name: '证件详情',
+    hideInMenu: true,
+    component: '@/pages/cardList/detail.jsx',
+  },
   {
     path: '/userList',
     name: '犬主列表',

src/pages/cardList/detail.jsx

+import React, { useState, useEffect } from 'react';
+import { Card, Form, Button, Image } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { getCardDetail } from '@/services/card'
+import { history } from 'umi';
+
+const FormItem = Form.Item;
+const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
+const goBack = () => {
+  history.goBack();
+};
+export default (props) => {
+  const { location } = props;
+  const { id } = location.query;
+  const [card, setCard] = useState({});
+
+  useEffect(() => {
+    getCardDetail(id).then((res) => {
+      setCard(res)
+    }).catch((err) => {
+      console.log(err.message)
+    });
+  }, [id])
+  return (
+    <PageHeaderWrapper    >
+      <Card>
+        <Form {...formItemLayout}>
+          <FormItem label="证件号">
+            {card?.cardNo}
+          </FormItem>
+          <FormItem label="犬主">
+            {card?.personName}
+          </FormItem>
+          <FormItem label="电话">
+            {card?.phone}
+          </FormItem>
+          <FormItem label="犬名">
+            {card?.petName}
+          </FormItem>
+          <FormItem label="性别">
+            {
+              card?.petSex == 1 ? '雄' :
+                card?.petSex == 2 ? '雌' : '未说明性别'
+            }
+          </FormItem>
+          <FormItem label="犬种">
+            {card?.petType}
+          </FormItem>
+          <FormItem label="毛色">
+            {card?.petColor}
+          </FormItem>
+          <FormItem label="照片">
+            <Image src={card?.petImg1} width={100} />
+          </FormItem>
+          <FormItem label="养狗地址">
+            {card?.address}
+          </FormItem>
+          <FormItem label="狗证有效期">
+          {card?.startDate+'~'+card?.expireDate}
+          </FormItem>
+          <FormItem label=" " colon={false}>
+            <Button type="default" onClick={() => goBack()}>
+              返回
+            </Button>
+          </FormItem>
+        </Form>
+      </Card>
+    </PageHeaderWrapper>
+  );
+};

src/pages/cardList/index.jsx

+import React, { useRef } from 'react'
+import { Button } from 'antd';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import PageTable from '@/components/PageTable'
+import { getCardList } from '@/services/card'
+import { history } from 'umi';
+
+export default (props) => {
+  const actionRef = useRef();
+  const goDetail = (id) => {
+    history.push(`cardList/detail.jsx?id=${id}`);
+  }
+  const columns = [
+    {
+      title: '证件号',
+      dataIndex: 'cardNo',
+      key: 'cardNo',
+      search: true,
+    },
+    {
+      title: '犬主',
+      dataIndex: 'personName',
+      key: 'personName',
+      search: true,
+    },
+    {
+      title: '犬名',
+      dataIndex: 'petName',
+      key: 'petName',
+      search: true,
+    },
+    {
+      title: '有效期',
+      dataIndex: 'createDate',
+      key: 'createDate',
+      render: (t, record) => record.startDate + (record.expireDate!=null?'~' + record.expireDate:''),
+      search:false
+    },
+    {
+      title: '操作',
+      valueType: 'option',
+      width: 160,
+      render: (_, record) => [
+        <Button key={1} style={{ padding: 0 }} type="link"
+          onClick={() => goDetail(record.cardId)}
+        >
+          详情
+        </Button>
+      ],
+    },
+  ]
+
+  return (
+    <PageHeaderWrapper>
+      <PageTable
+        actionRef={actionRef}
+        columns={columns}
+        request={getCardList}
+        options={false}
+        rowKey="cardId"
+      />
+    </PageHeaderWrapper>
+  )
+}

src/pages/certificateIssuance/issuance.jsx

               </Button>
             }
           </FormItem>
-          {
-            application?.makeStatus != 0 &&
-            <FormItem label="证件有效期">
-              {application?.makeDate}
-            </FormItem>
-          }
           {
             application.applyMethod == 2 && <>
               <FormItem label="快递公司">

src/pages/dashboard/components/OrgSummary.jsx

   tooltip: {
     trigger: 'axis',
     axisPointer: {
-      type: 'shadow'
+      type: 'cross'
     },
-    // formatter: (params) => `人次: ${params[0].data.value || 0}`
   },
 
   grid: {
 
   xAxis: {
     type: 'category',
-
   },
 
   dataset: [
   series: [
     {
       type: 'line',
+      name: '申请数',
       datasetIndex: 0,
       itemStyle: {
         normal: {
           }
         }
       }
-    },    
+    },
   ]
 }
 export default (props) => {
   const [loading, setLoading] = useState(false)
   const [list, setList] = useState([
     {
-      date:'2022-9-9',
-      value:20
+      date: '2022-9-9',
+      value: 20
     },
     {
-      date:'2022-9-10',
-      value:205
+      date: '2022-9-10',
+      value: 205
     },
     {
-      date:'2022-9-11',
-      value:200
+      date: '2022-9-11',
+      value: 200
     },
     {
-      date:'2022-9-12',
-      value:210
+      date: '2022-9-12',
+      value: 210
     },
     {
-      date:'2022-9-13',
-      value:10
+      date: '2022-9-13',
+      value: 10
     },
     {
-      date:'2022-9-14',
-      value:50
+      date: '2022-9-14',
+      value: 50
     },
     {
-      date:'2022-9-15',
-      value:80
+      date: '2022-9-15',
+      value: 80
     },
     {
-      date:'2022-9-16',
-      value:27
+      date: '2022-9-16',
+      value: 27
     },
     {
-      date:'2022-9-19',
-      value:99
+      date: '2022-9-19',
+      value: 99
     },
     {
-      date:'2022-9-20',
-      value:5
+      date: '2022-9-20',
+      value: 5
     },
   ])
 
       source: list
     }
   }
-  
+
   const queryList = useCallback(() => {
     // setLoading(true)
 
     //   setLoading(false)
     // })
   }, [])
-  
+
   useEffect(() => {
     queryList()
   }, [])
 
   return (
-    <Card title='近期提交趋势统计' loading={loading} bodyStyle={{height: 600}}>
+    <Card title='近期提交趋势统计' loading={loading} bodyStyle={{ height: 600 }}>
       <Echart option={option} />
     </Card>
   )

src/pages/dashboard/components/ReportList.jsx

 import moment from 'moment'
 import { Card, List, Badge, Space, Carousel } from 'antd'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-// import { getList } from '@/services/work'
-import { random } from '@/utils/number'
-
-const colorList = [
-  '#a8071a',
-  '#ad2102',
-  '#ad4e00',
-  '#ad6800',
-  '#ad8b00',
-  '#5b8c00',
-  '#237804',
-  '#006d75',
-  '#0050b3',
-  '#10239e',
-  '#391085',
-  '#9e1068',
-]
+import { useEffect, useMemo, useState } from 'react'
 
 const Avatar = (props) => {
   const style = useMemo(() => {
-    let r = random(0, colorList.length)
-    if (r >= 12) r = 0;
-    const color = colorList[r];
-
+    const color = props.item.status == 'first' ? '#C5E0A9' :
+    props.item.status == 'renewal' ? '#87C5ED' : '#E9CB99';
     return {
       background: color,
       color: '#fff',
 const Content = (props) => {
   const { item } = props;
 
-  const abnormal = item.antigenIsNormal === 0 || item.nucleicIsNormal === 0
-  const status = abnormal ? 'error' : 'success'
-
   return (
     <Space size="large">
-      <span><Badge status={status} /> { abnormal ? '异常' : '正常' }</span>
-      <span>{moment(item.createDate).format('HH:mm')}</span>
+      <span>{moment(item.createDate).format('YYYY-MM-DD HH:mm')}</span>
     </Space>
   )
 }
 
 export default (props) => {
   const [loading, setLoading] = useState(false)
-  const [list, setList] = useState([])
   const [disabled, setDisabled] = useState(false)
-
-  const queryList = useCallback(() => {
-    // setLoading(true)
-    // getList(
-    //   {
-    //     pageSize: 50, // 过多会很卡
-    //     start: moment().format('YYYY-MM-DD'),
-    //     end: moment().format('YYYY-MM-DD'),
-    //     isAll: true
-    //   }).then(res => {
-    //     setLoading(false)
-    //     setList((res.records || []).reverse())
-    //   }).catch(er => {
-    //     setLoading(false)
-    //   })
-  }, [])
-
-  useEffect(() => {
-    queryList()
-  }, [])
+  const [list, setList] = useState([
+    {
+      orgName: '办证',
+      status: 'first',
+      userName: '俏如来',
+      formId: 0,
+      createDate: '2021-5-6 11:22:50'
+    },
+    {
+      orgName: '续期',
+      status: 'renewal',
+      userName: '雪山银燕',
+      formId: 1,
+      createDate: '2021-5-9 11:22:50'
+    },
+    {
+      orgName: '补办',
+      status: 'reissue',
+      userName: '史艳文',
+      formId: 2,
+      createDate: '2021-5-5 11:22:50'
+    },
+    {
+      orgName: '办证',
+      status: 'first',
+      userName: '南宫恨',
+      formId: 3,
+      createDate: '2021-5-7 11:22:50'
+    },
+    {
+      orgName: '补办',
+      status: 'reissue',
+      userName: '神蛊温皇',
+      formId: 4,
+      createDate: '2021-5-15 11:22:50'
+    },
+    {
+      orgName: '办证',
+      status: 'first',
+      userName: '燕驼龙',
+      formId: 5,
+      createDate: '2021-5-6 11:22:50'
+    },
+    {
+      orgName: '办证',
+      status: 'first',
+      userName: '忆无心',
+      formId: 6,
+      createDate: '2021-5-6 11:22:50'
+    },
+    {
+      orgName: '补办',
+      status: 'reissue',
+      userName: '史艳文',
+      formId: 7,
+      createDate: '2021-5-6 11:22:50'
+    },
+    {
+      orgName: '续期',
+      status: 'renewal',
+      userName: '宫本武藏',
+      formId: 8,
+      createDate: '2021-5-6 11:22:50'
+    },
+    {
+      orgName: '办证',
+      status: 'first',
+      userName: '素还真',
+      formId: 9,
+      createDate: '2021-5-6 11:22:50'
+    },
+    {
+      orgName: '续期',
+      status: 'renewal',
+      userName: '元邪皇',
+      formId: 10,
+      createDate: '2021-5-6 11:22:50'
+    },
+  ])
 
   useEffect(() => {
     setDisabled(!list || list.length <= showNum)
               <div key={item.formId} style={{ display: 'flex' }}>
                 <List.Item>
                   <List.Item.Meta
-                    avatar={<Avatar>{item.orgName.substring(0,1)}</Avatar>}
+                    avatar={<Avatar item={item}>{item.orgName.substring(0, 1)}</Avatar>}
                     title={item.userName}
                     con
                     description={item.orgName}

src/pages/userList/index.jsx

 import { DatePicker, Button } from 'antd';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import PageTable from '@/components/PageTable'
-import { getList } from '@/services/work'
+import { getPersonList } from '@/services/person'
 
 const { RangePicker } = DatePicker;
 
 };
 
 export default (props) => {
-  const initDate = useRef(moment())
-  const actionRef = useRef();
-  const { initialState } = useModel('@@initialState');
-
-  const handleBeforSearch = (params) => {
-    const { createDate, ...others } = params;
 
-    let start, end, orgId;
-    if (!createDate || createDate.length < 1) {
-      // 默认时间是今天
-      start = moment().format('YYYY-MM-DD')
-      end = start
-    } else {
-      start = moment(createDate[0]).format('YYYY-MM-DD')
-      end = moment(createDate[1]).format('YYYY-MM-DD')
-    }
-    if (initialState.currentUser.orgId) {
-      orgId = initialState.currentUser.orgId
-      return { ...others, start, end, orgId };
-    }
-    return { ...others, start, end };
-  }
-  const columns = [
-    
+  const actionRef = useRef();
+  const columns = [    
     {
       title: '姓名',
-      dataIndex: 'userName',
-      key: 'userName',
+      dataIndex: 'nickName',
+      key: 'nickName',
       search: true,
     },
     {
       title: '手机号',
-      dataIndex: 'userName',
-      key: 'userName',
+      dataIndex: 'phone',
+      key: 'phone',
       search: true,
     },
     {
       dataIndex: 'createDate',
       key: 'createDate',
       render: (t) => formatterTime(t),
-      renderFormItem: (_, record) => <RangePicker defaultValue={[initDate.current, initDate.current]} placeholder={['开始日期', '结束日期']} format='YYYY-MM-DD' />
+      renderFormItem: (_, record) => <RangePicker placeholder={['开始日期', '结束日期']} format='YYYY-MM-DD' />
     },
   ]
 
       <PageTable
         actionRef={actionRef}
         columns={columns}
-        request={getList}
+        request={getPersonList}
         options={false}
-        search={{
-          defaultCollapsed: false
-        }}
-        form={{ ignoreRules: false }}
-        manualRequest={true}
-        revalidateOnFocus={false}
-        beforeSearchSubmit={handleBeforSearch}
-        rowKey="formId"
+        rowKey="personId"
       />
     </PageHeaderWrapper>
   )

src/services/card.js

+import request from '@/utils/request';
+
+/**
+ * 查询犬证列表
+ * @param {*} params
+ * @returns
+ */
+ export const getCardList = (params) => request('/card', { params });
+
+ /**
+ * 查询犬证详情
+ * @param {*} params
+ * @returns
+ */
+export const getCardDetail = (id) => request(`/card/${id}`);

src/services/person.js

+import request from '@/utils/request';
+
+/**
+ * 查询犬主列表
+ * @param {*} params
+ * @returns
+ */
+ export const getPersonList = (params) => request('/person', { params });