feats

src/pages/dashboard/components/BannerStatis.jsx

@@ -7,12 +7,9 @@ import StatisCard from './StatisCard';
 import StatisGroup from './StatisGroup';
 
 const colorList = [
-  { backColor: '#69c0ff', frontColor: '#000' },
-  { backColor: '#95de64', frontColor: '#000' },
-  { backColor: '#5cdbd3', frontColor: '#000' },
-  { backColor: '#85a5ff', frontColor: '#000' },
-  { backColor: '#b37feb', frontColor: '#000' },
-  { backColor: '#ffd666', frontColor: '#000' },
+  { backColor: '#126BAE', frontColor: '#fff' },
+  { backColor: '#66A9C9', frontColor: '#fff' },
+  { backColor: '#08507b', frontColor: '#fff' },
 ]
 
 export default (props) => {

src/pages/dashboard/components/OrgSummary.jsx

@@ -4,6 +4,7 @@ import { Card } from 'antd'
 import { getList } from '@/services/org'
 
 const barOption = {
+  color: ['#08507b'],
   tooltip: {
     trigger: 'axis',
     axisPointer: {
@@ -12,13 +13,17 @@ const barOption = {
     formatter: (params) => `人次: ${params[0].data.totalReportNum || 0}`
   },
   grid: {
-    containLabel: true
+    containLabel: true,
+    left: 0,
+    top: 0,
+    right: 60,
+    bottom: 0,
   }, 
   yAxis: {
     type: 'category',
     axisLabel: {
-      rotate: 45,
-      formatter: (value) => value.length > 5 ? value.substring(0, 5) + '...' : value,
+      // rotate: 45,
+      formatter: (value) => value.length > 10 ? value.substring(0, 10) + '...' : value,
       color: (value, index) => 'black'
     },
   },
@@ -30,7 +35,13 @@ const barOption = {
       type: 'slider',
       yAxisIndex: [0],
       start: 100,
-      end: 80
+      end: 80,
+      // width: 10,
+      // fillerColor: '#08507b',
+      selectedDataBackground: {
+        areaStyle: { color: '#08507b', },
+        lineStyle: { color: '#08507b', width: 1 },
+      }
     },
     {
       type: 'inside',

src/pages/dashboard/components/ReportList.jsx

@@ -1,5 +1,5 @@
 import moment from 'moment'
-import { Card, List } from 'antd'
+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'
@@ -39,6 +39,21 @@ const Avatar = (props) => {
   return <div style={style}>{props.children}</div>
 }
 
+
+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>
+    </Space>
+  )
+}
+
 export default (props) => {
   const [loading, setLoading] = useState(false)
   const [list, setList] = useState([])
@@ -47,13 +62,13 @@ export default (props) => {
     setLoading(true)
     getList(
       {
-        pageSize: 500,
+        pageSize: 50, // 过多会很卡
         start: moment().format('YYYY-MM-DD'),
         end: moment().format('YYYY-MM-DD'),
         isAll: true
       }).then(res => {
         setLoading(false)
-        setList(res.records)
+        setList((res.records || []).reverse())
       }).catch(er => {
         setLoading(false)
       })
@@ -65,21 +80,34 @@ export default (props) => {
 
   return (
     <Card title="今日提交记录" loading={loading} bodyStyle={{ height: 600 }}>
-      <List
-        itemLayout="horizontal"
-        dataSource={list}
-        renderItem={item => (
-          <List.Item>
-            <List.Item.Meta
-              avatar={<Avatar>{item.orgName.substring(0,1)}</Avatar>}
-              title={item.userName}
-              con
-              description={item.orgName}
-            />
-            <div>{moment(item.createDate).format('HH:mm')}</div>
-          </List.Item>
-        )}
-      />
+      <List style={{ height: '100%', overflow: 'hidden' }} itemLayout="horizontal">
+        <Carousel
+          autoplay
+          infinite
+          rtl
+          slidesToShow={8}
+          slidesToScroll={1}
+          dot={false}
+          dotPosition="right"
+          style={{ height: '100%' }}
+        >
+          {
+            list.map(item => (
+              <div key={item.formId} style={{ display: 'flex' }}>
+                <List.Item>
+                  <List.Item.Meta
+                    avatar={<Avatar>{item.orgName.substring(0,1)}</Avatar>}
+                    title={item.userName}
+                    con
+                    description={item.orgName}
+                  />
+                  <Content item={item} />
+                </List.Item>
+              </div>
+            ))
+          }
+        </Carousel>
+      </List>
     </Card>
   )
 }

src/pages/dashboard/components/StatisGroup.jsx

@@ -4,14 +4,14 @@ import { StatisticCard } from '@ant-design/pro-card';
 const { Divider } = StatisticCard;
 const iconDivStyle = {
   position: 'absolute',
-  top: '-20px',
-  right: '20px',
+  top: '4px',
+  right: '-30px',
 }
 
 const iconStyle = {
-  fontSize: '5em',
+  fontSize: '10em',
   color: '#fff',
-  opacity: 0.3,
+  opacity: 0.45,
 }
 
 export default (props) => {
@@ -24,7 +24,9 @@ export default (props) => {
 
   const bodyStyle = {
     background: backColor,
+    color: frontColor,
     position: 'relative',
+    overflow: 'hidden',
   }
 
   const groupBodyStyle = {
@@ -36,16 +38,27 @@ export default (props) => {
     color: frontColor
   }
 
+  const headTitleStyle = {
+    color: frontColor,
+    fontSize: '19px',
+    fontWeight: 700,
+    letterSpacing: '2px',
+  }
+
+  const titleStyle = {
+    color: frontColor,
+  }
+
   return (
-    <StatisticCard.Group title={title} headStyle={headStyle} bodyStyle={groupBodyStyle}>
+    <StatisticCard.Group title={<div style={headTitleStyle}>{title}</div>} headStyle={headStyle} bodyStyle={groupBodyStyle}>
       <StatisticCard
         bodyStyle={bodyStyle}
-        statistic={{ ...data1, valueStyle }}
+        statistic={{ ...data1, title: (<div style={titleStyle}>{data1.title}</div>), valueStyle }}
       />
       <Divider type="vertical" />
       <StatisticCard
         bodyStyle={bodyStyle}
-        statistic={{ ...data2, valueStyle }}
+        statistic={{ ...data2, title: (<div style={titleStyle}>{data2.title}</div>), valueStyle }}
       />
       {
         icon && (

src/pages/dashboard/index.jsx

@@ -10,8 +10,8 @@ export default (props) => {
       <BannerStatis />
 
       <Row gutter={24}>
-        <Col span={16}><OrgSummary /></Col>
-        <Col span={8}>
+        <Col span={12}><OrgSummary /></Col>
+        <Col span={12}>
           <ReportList />
         </Col>
       </Row>