工作台

config/routes.js

@@ -30,6 +30,14 @@ export default [
     icon: 'DashboardOutlined',
     component: './dashboard',
   },
+
+  {
+    path: '/orgDashboard',
+    name: '工作台',//企业管理员工作台
+    access: 'org',
+    icon: 'DashboardOutlined',
+    component: './orgDashboard',
+  },
   {
     path: '/',
     name: '工作台',//暂定

src/components/echart/echart.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react'
 // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
 import * as echarts from 'echarts/core';
 // 引入柱状图图表，图表后缀都为 Chart
-import { BarChart } from 'echarts/charts';
+import { BarChart, LineChart } from 'echarts/charts';
 // 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
 import {
   TitleComponent,
@@ -11,6 +11,7 @@ import {
   DatasetComponent,
   TransformComponent,
   DataZoomComponent,
+  LegendComponent,
 } from 'echarts/components';
 // 标签自动布局，全局过渡动画等特性
 import { LabelLayout, UniversalTransition } from 'echarts/features';
@@ -21,11 +22,13 @@ import { CanvasRenderer } from 'echarts/renderers';
 echarts.use([
   TitleComponent,
   TooltipComponent,
+  LegendComponent,
   GridComponent,
   DatasetComponent,
   DataZoomComponent,
   TransformComponent,
   BarChart,
+  LineChart,//折线图
   LabelLayout,
   UniversalTransition,
   CanvasRenderer

src/pages/orgDashboard/components/BannerStatis.jsx

@@ -0,0 +1,111 @@
+import { useEffect, useState } from 'react';
+import { history } from 'umi';
+import { Card, Row, Col } from 'antd'
+import { AppstoreOutlined, MacCommandOutlined, TeamOutlined, UsergroupDeleteOutlined, UsergroupAddOutlined } from '@ant-design/icons'
+import { getOrgComm } from '@/services/statis';
+import StatisCard from './StatisCard';
+import StatisGroup from './StatisGroup';
+
+const colorList = [
+  { backColor: '#126BAE', frontColor: '#fff' },
+  { backColor: '#66A9C9', frontColor: '#fff' },
+  { backColor: '#08507b', frontColor: '#fff' },
+]
+
+export default (props) => {
+  const [cardData, setCardData] = useState({})
+
+  const toAbnormal = () => {
+    history.push('../resume-work/abnormal');
+  }
+
+  useEffect(() => {
+    getOrgComm().then((res) => {
+      setCardData(res || {});
+    })
+  }, [])
+
+  const abnormalNum = (cardData.todayReportNum || 0) - (cardData.todayNormalNum || 0)
+
+  return (
+    <Row justify='space-around' gutter={24} >
+      <Col span={8}>
+        <StatisGroup
+          title="企业"
+          data1={{ title: '历史提交总数', value: cardData.orgTotalNum || 0 }}
+          data2={{ title: ' ', value: -1 }}
+          {...colorList[0]}
+          icon={<AppstoreOutlined />}
+        />
+      </Col>
+      <Col span={8}>
+        <StatisGroup
+          title="上报人次"
+          data1={{ title: '今日提交', value: cardData.todayReportNum || 0 }}
+          data2={{ title: '昨日提交', value: cardData.yestodayReportNum || 0 }}
+          {...colorList[1]}
+          icon={<TeamOutlined />}
+        />
+      </Col>
+      <Col span={8}>
+        <StatisGroup
+          title="今日概况"
+          data1={{ title: '正常人次', value: cardData.todayNormalNum || 0 }}
+          data2={{ title: '异常人次', value: abnormalNum }}
+          {...colorList[2]}
+          icon={<UsergroupDeleteOutlined />}
+          onClick2={toAbnormal}
+        />
+      </Col>
+      {/* <Col span={4}>
+        <StatisCard
+          title="企业总数"
+          value={cardData?.orgTotalNum || 0}
+          icon={<AppstoreOutlined />}
+          {...colorList[0]}
+        />
+      </Col>
+      <Col span={4}>
+        <StatisCard
+          title="无数据企业"
+          value={`${cardData?.noDataOrgNum || 0} / ${cardData?.orgTotalNum || 0}`}
+          icon={<MacCommandOutlined />}
+          {...colorList[1]}
+        />
+      </Col>
+      <Col span={4}>
+        <StatisCard
+          title="今日提交总人数"
+          value={cardData?.todayReportNum || 0}
+          icon={<TeamOutlined />}
+          {...colorList[2]}
+        />
+      </Col>
+      <Col span={4}>
+        <StatisCard
+          title="昨日提交总人数"
+          value={cardData?.yestodayReportNum || 0}
+          icon={<TeamOutlined />}
+          {...colorList[3]}
+        />
+      </Col>
+      <Col span={4}>
+        <StatisCard
+          title="今日正常人数"
+          value={cardData?.todayNormalNum || 0}
+          icon={<UsergroupDeleteOutlined />}
+          {...colorList[4]}
+        />
+      </Col>
+      <Col span={4}>
+        <StatisCard
+          title="今日异常人数"
+          value={(cardData?.todayReportNum || 0) - (cardData?.todayNormalNum || 0)}
+          icon={<UsergroupAddOutlined />}
+          {...colorList[5]}
+          onClick={toAbnormal}
+        />
+      </Col> */}
+    </Row>
+  )
+}

src/pages/orgDashboard/components/OrgSummary.jsx

@@ -0,0 +1,130 @@
+import { useEffect, useState, useCallback } from 'react';
+import Echart from '@/components/echart/echart'
+import { Card } from 'antd'
+import { getAllOrgLine } from '@/services/statis'
+import { useModel } from 'umi'
+import moment from 'moment';
+
+const lineOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    },
+    // formatter: (params) => `截止：${params[0].data.name} <br />正常： ${params[0].data.value}`
+    // formatter: (params) => `人次: ${params[0].data.value || 0}`
+  },
+
+  grid: {
+    containLabel: true,
+    left: 0,
+    top: 8,
+    right: 60,
+    bottom: 0,
+  },
+  yAxis: {
+    type: 'value',
+  },
+
+  xAxis: {
+    type: 'category',
+
+  },
+
+
+  dataset: [
+    {
+      dimensions: ['name', 'value'],
+      source: [],
+    },
+    {
+      dimensions: ['name', 'value'],
+      source: [],
+    }
+  ],
+  series: [
+    {
+      name: '正常',
+      type: 'line',
+      datasetIndex: 0,
+      itemStyle: {
+        normal: {
+          color: "#08507b",
+          lineStyle: {
+            color: "#08507b"
+          }
+        }
+      }
+
+
+
+    },
+    {
+      name: '异常',
+      type: 'line',
+      datasetIndex: 1,
+      itemStyle: {
+        normal: {
+          color: "red",
+          lineStyle: {
+            color: "red"
+          }
+        }
+      }
+
+      // lineStyle: {
+      //   color: 'red',
+      // },
+    }
+  ]
+}
+
+
+export default (props) => {
+  const [loading, setLoading] = useState(false)
+  const [list, setList] = useState({})
+  const { initialState } = useModel('@@initialState');
+
+  const dataset = [
+    {
+      dimensions: ['name', 'value'],
+      source: list.normal || [],
+    },
+    {
+      dimensions: ['name', 'value'],
+      source: list.abnormal || [],
+    }
+  ]
+
+  const option = {
+    ...lineOption,
+    dataset,
+  }
+  console.log('dataset', dataset);
+
+
+  useEffect(() => {
+    // queryList()
+    setLoading(true)
+
+    getAllOrgLine({
+      days: 7,
+      startDate: moment().subtract(7, 'day').format('YYYY-MM-DD'),
+      orgId: initialState.currentUser.orgId,
+    }).then((res) => {
+      setLoading(false)
+      setList(res)
+
+    }).catch(err => {
+      setLoading(false)
+
+    })
+
+  }, [])
+
+  return (
+    <Card title='企业数据总览' loading={loading} bodyStyle={{ height: 600 }}>
+      <Echart option={option} />
+    </Card>
+  )
+}

src/pages/orgDashboard/components/ReportList.jsx

@@ -0,0 +1,124 @@
+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'
+import { useModel } from 'umi'
+
+const colorList = [
+  '#a8071a',
+  '#ad2102',
+  '#ad4e00',
+  '#ad6800',
+  '#ad8b00',
+  '#5b8c00',
+  '#237804',
+  '#006d75',
+  '#0050b3',
+  '#10239e',
+  '#391085',
+  '#9e1068',
+]
+
+const Avatar = (props) => {
+  const style = useMemo(() => {
+    let r = random(0, colorList.length)
+    if (r >= 12) r = 0;
+    const color = colorList[r];
+
+    return {
+      background: color,
+      color: '#fff',
+      width: '48px',
+      height: '48px',
+      fontSize: '1.8em',
+      lineHeight: '48px',
+      textAlign: 'center',
+    }
+  }, [])
+
+  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>
+  )
+}
+
+const showNum = 8;
+
+export default (props) => {
+  const [loading, setLoading] = useState(false)
+  const [list, setList] = useState([])
+  const [disabled, setDisabled] = useState(false)
+  const { initialState } = useModel('@@initialState');
+
+
+  const queryList = useCallback(() => {
+    setLoading(true)
+    getList(
+      {
+        pageSize: 50, // 过多会很卡
+        start: moment().format('YYYY-MM-DD'),
+        end: moment().format('YYYY-MM-DD'),
+        isAll: true,
+        orgId: initialState.currentUser.orgId,
+      }).then(res => {
+        setLoading(false)
+        setList((res.records || []).reverse())
+      }).catch(er => {
+        setLoading(false)
+      })
+  }, [])
+
+  useEffect(() => {
+    queryList()
+  }, [])
+
+  useEffect(() => {
+    setDisabled(!list || list.length <= showNum)
+  }, [list])
+
+  return (
+    <Card title="今日提交记录" loading={loading} bodyStyle={{ height: '600px' }}>
+      <List style={{ height: '100%', overflow: 'hidden' }} itemLayout="horizontal">
+        <Carousel
+          autoplay={!disabled}
+          infinite={!disabled}
+          rtl
+          slidesToShow={showNum}
+          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/orgDashboard/components/StatisCard.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Statistic, Card } from 'antd';
+
+const iconDivStyle = {
+  position: 'absolute',
+  top: 20,
+  right: 20,
+}
+
+const iconStyle = {
+  fontSize: '5em',
+  color: '#fff',
+  opacity: 0.3,
+}
+
+export default (props) => {
+  const { title, value, icon, backColor = '#fff', frontColor='#000', onClick } = props
+
+  const bodyStyle = {
+    background: backColor,
+    overflow: 'hidden',
+    position: 'relative',
+  }
+
+  return (
+    <Card bodyStyle={bodyStyle} onClick={onClick}>
+      <Statistic
+        title={title}
+        value={value}
+        valueStyle={{ color: frontColor }}
+      />
+      {
+        icon && (
+          <div style={iconDivStyle}>
+            {React.cloneElement(icon, { style: iconStyle })}
+          </div>
+        )
+      }
+    </Card>
+  )
+}

src/pages/orgDashboard/components/StatisGroup.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import { StatisticCard } from '@ant-design/pro-card';
+
+const { Divider } = StatisticCard;
+const iconDivStyle = {
+  position: 'absolute',
+  top: '4px',
+  right: '-30px',
+}
+
+const iconStyle = {
+  fontSize: '10em',
+  color: '#fff',
+  opacity: 0.45,
+}
+
+export default (props) => {
+  const { title, data1, data2, icon, onClick1, onClick2, backColor = '#fff', frontColor = '#000' } = props
+
+  const headStyle = {
+    background: backColor,
+    color: frontColor,
+  }
+
+  const bodyStyle = {
+    background: backColor,
+    color: frontColor,
+    position: 'relative',
+    overflow: 'hidden',
+  }
+
+  const groupBodyStyle = {
+    ...bodyStyle,
+    padding: 0,
+  }
+
+  const valueStyle = {
+    color: frontColor
+  }
+
+  const headTitleStyle = {
+    color: frontColor,
+    fontSize: '19px',
+    fontWeight: 700,
+    letterSpacing: '2px',
+  }
+
+  const titleStyle = {
+    color: frontColor,
+  }
+
+  return (
+    <StatisticCard.Group title={<div style={headTitleStyle}>{title}</div>} headStyle={headStyle} bodyStyle={groupBodyStyle}>
+      <StatisticCard
+        bodyStyle={bodyStyle}
+        statistic={{ ...data1, title: (<div style={titleStyle}>{data1.title}</div>), valueStyle }}
+        onClick={onClick1}
+      />
+      <Divider type="vertical" />
+      <StatisticCard
+        bodyStyle={bodyStyle}
+        statistic={
+          data2.value == -1 ?
+            { ...data2, value: ' ', title: (<div style={titleStyle}>{data2.title}</div>), valueStyle }
+            :
+            { ...data2, title: (<div style={titleStyle}>{data2.title}</div>), valueStyle }}
+        onClick={onClick2}
+      />
+      {
+        icon && (
+          <div style={iconDivStyle}>
+            {React.cloneElement(icon, { style: iconStyle })}
+          </div>
+        )
+      }
+    </StatisticCard.Group>
+  )
+}

src/pages/orgDashboard/index.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Space, Row, Col } from 'antd'
+import ReportList from './components/ReportList';
+import OrgSummary from './components/OrgSummary';
+import BannerStatis from './components/BannerStatis';
+
+export default (props) => {  
+  return (
+    <Space direction="vertical" size="large" style={{ width: '100%' }}>
+      <BannerStatis />
+
+      <Row gutter={24}>
+        <Col span={12}><OrgSummary /></Col>
+        <Col span={12}>
+          <ReportList />
+        </Col>
+      </Row>
+    </Space>
+  )
+}

src/services/statis.js

@@ -5,3 +5,10 @@ export const getcomm = (params) => request('/statis/comm', { params });
 
 // 获取企业信息汇总
 export const getAllOrgPersonNum = () => request('/statis/org/total');
+
+// org工作台--企业数据总览
+export const getAllOrgLine = (params) => request('/statis/org/daily', { params, method: 'GET' });
+
+
+// org工作台--企业工作台数据
+export const getOrgComm = (params) => request('/statis/org/comm', { params });