management/src/pages/Dashboard/index.tsx

import Header from '@/components/Header'
import React, { useState, useEffect } from 'react'
import styles from './index.module.scss'
import SvgIcon from '@/components/SvgIcon'
import './index.scss'
import { Link } from 'react-router-dom'
import { ZhButton } from '@/components/Button'
import { dayjsFormat } from '@/utils/util'
import { userStore } from '@/store/mobx'
import { Tooltip } from 'antd'
import { observer } from 'mobx-react'
import { apiGetDashboard } from './api'
import consts from '@/utils/consts'
import { DashboardState } from '@/types/dashboard'


const Index = () => {
  const messageType = {
    1: {
      title: '安全巡检',
      class: 'badge-success',
      path: '/console/safe/content/detail/info'
    },
    2: {
      title: '质量巡检',
      class: 'badge-info',
      path: '/console/quality/content/detail/info'
    }
  }
  useEffect(() => {
    initData()
  }, [])
  useEffect(() => {
    if (!userStore.projectInfo.id) {
      userStore.getProjectInfo()
    }
  }, [ userStore.projectInfo.id ])
  const [ state, setState ] = useState<DashboardState>({ approverData: [], messageData: [], versionData: { id: '', name: '', createTime: '', content: '' } })
  const initData = async () => {
    const { code = -1, data } = await apiGetDashboard()
    if (code === consts.RET_CODE.SUCCESS) {
      setState(data)
    }
  }
  return (
    <div className="wrap-contaniner hide-menu dashborad-content">
      <Header title="待办事项" />
      <div className={styles.content}>
        <span>系统消息</span>
        <h5 className={styles.title}>{userStore.projectName}</h5>
        {/* <div className={styles.downtime}>
          <SvgIcon type="xxh-wrench" style={{ fontSize: '1.5rem' }}></SvgIcon>
          <p className={styles.downtimeText}>系统将于 2019年3月10日 14:09 开始停机维护，持续30分钟。造成不便敬请谅解。</p>
        </div> */}
        <div className="pi-justify-between">
          <div className={[ styles.card, styles.cardFixedHeight, 'pi-flex-quintuple' ].join(' ')}>
            <div className={styles.cardHeader}>
              <span>需要你处理</span>
            </div>
            <div className={styles.cardBody}>
              {
                state.approverData.length ? (
                  <ul>
                    {
                      state.approverData.map(item => {
                        return (
                          <li className="pi-flex-column" key={item.id}>
                            <div className="pi-justify-between">
                              <div>
                                <span className={[ 'pi-pd-lr-15', 'pi-height-18', messageType[item.dataType]?.class ].join(' ')}>{messageType[item.dataType]?.title}</span>
                                <span className="pi-pd-lr-15">
                                  <span>{item.bidsectionName}</span>
                                  <Link to={{ pathname: messageType[item.dataType]?.path, state: { id: item.dataId, name: item.bidsectionName } }}>{item.inspection}</Link>
                                </span>
                              </div>
                              <ZhButton size="small"><Link to={{ pathname: messageType[item.dataType]?.path, state: { id: item.dataId, name: item.bidsectionName } }}>审批</Link></ZhButton>
                            </div>
                            <div className="pi-justify-between mt-1 ">
                              <span>{item.name}-{item.position}</span>
                              <span>{dayjsFormat(item.updateTime, 'MM-DD HH:mm')}</span>
                            </div>
                          </li>
                        )
                      })
                    }
                  </ul>
                ) : <p className="pi-text-center pi-muted">暂时没有需要你处理的事项</p>
              }
            </div>
          </div>
          <div className={[ styles.card, styles.cardFixedHeight, 'pi-flex-quintuple', 'pi-mg-lr-30' ].join(' ')}>
            <div className={styles.cardHeader}>
              <span>需要你关注</span>
            </div>
            <div className={styles.cardBody}>
              {state.messageData.length ? (
                <ul>
                  {
                    state.messageData.map(item => (
                      <li className="pi-flex-column" key={item.id}>
                        <div className="pi-justify-start">
                          <span className={[ 'pi-pd-lr-15', 'pi-height-18', messageType[item.dataType]?.class ].join(' ')}>{messageType[item.dataType]?.title}</span>
                          <span className="pi-pd-lr-15">
                          <span>{item.bidsectionName}</span>
                            {
                              item.content.split('|').map((content, idx) => {
                                if (idx === 0) {
                                  return <span key={idx}>{content} </span>
                                } else if (idx === 1) {
                                  return <Link key={idx} to={{ pathname: messageType[item.dataType]?.path, state: { id: item.dataId, name: item.bidsectionName } }} className="pi-mg-lr-5">
                                    {content}
                                  </Link>
                                } else {
                                  return <span key={idx}>{content}</span>
                                }
                              })
                            }
                          </span>
                        </div>
                        <div className="pi-justify-between mt-1">
                          <span>{item.title}</span>
                          <span>{dayjsFormat(item.createTime, 'MM-DD HH:mm')}</span>
                        </div>
                      </li>
                    ))
                  }
                </ul>
              ) : <p className="pi-text-center pi-muted">暂时没有需要你处理的事项</p>}

            </div>
          </div>
          <div className="pi-flex-twice pi-flex-column">
            <div className={styles.card} style={{ height: 'auto' }}>
              <div className={styles.cardBody} >
                <div className={styles.cardTitle}>
                  <h5>纵横技术支持</h5>
                  <h6 className="pi-muted">{userStore.projectInfo.staffName}</h6>
                </div>
              </div>
              <ul className="list-group">
                <Tooltip title="腾讯QQ" placement="left">
                  <li className="list-group-item">
                    <SvgIcon type="xxh-qq1" style={{ fontSize: 14 }} />
                    <span className="pi-mg-left-5">{userStore.projectInfo.staffQq}</span>
                  </li>
                </Tooltip>
                <Tooltip title="手机号码" placement="left">
                  <li className="list-group-item">
                    <SvgIcon type="xxh-mobile-alt" style={{ fontSize: 14 }} />
                    <span className="pi-mg-left-5">{userStore.projectInfo.staffPhone}</span>
                  </li>
                </Tooltip>
                <Tooltip title="固定电话" placement="left">
                  <li className="list-group-item">
                    <SvgIcon type="xxh-phone-volume1" style={{ fontSize: 14 }} />
                    <span className="pi-mg-left-5">{userStore.projectInfo.staffTelephone}</span>
                  </li>
                </Tooltip>
              </ul>
            </div>
            <div className={[ styles.card, 'mt-2' ].join(' ')}>
              <div className={styles.cardBody}>
                <span className="pi-link-blue">当前版本: {state.versionData?.name}</span>
              </div>
            </div>
            <div />
          </div>
        </div>
      </div>
    </div>
  )
}

export default observer(Index)