MissionBoard/web/client/src/sections/homePage/containers/index.js

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { Spin, Tabs, Table } from "antd";
import classnames from "classnames/bind";
import styles from "./index.less";
import { push } from "react-router-redux";
import moment from "moment";
import { getProject, getPeople, getWait } from "../actions/profile";
const CX = classnames.bind(styles);

const topImg = "/assets/images/top.png";
const pointImg = "/assets/images/point.png";

function Management(props) {
  const { dispatch, user } = props

  const [dataSource, setDataSource] = useState([])

  const [projectData, setProjectData] = useState([])
  const [peopleData, setPeopleData] = useState([])
  const [waitData, setWaitData] = useState([])

  useEffect(() => {
    dispatch(getProject()).then((res) => {
      setProjectData(res.payload.data.projects)
    })
    dispatch(getPeople()).then((res) => {
      setPeopleData(res.payload.data.projects)
    })
    dispatch(getWait()).then((res) => {
      setWaitData(res.payload.data.projects)
    })
  },[])
  const projectCol = [
    {
      title: '项目名称',
      dataIndex: 'name_project',
      key: 'name_project',
      align: 'center'
    },
    {
      title: '投入人力',
      dataIndex: 'part_people',
      key: 'part_people',
      align: 'center',
      render: (dom, record) => {
        return <div>{record.part_people.map((i, index) => record.part_people.length == 1 ? <span>{i.name_people}</span> : <span>{i.name_people}{index < record.part_people.length-1 ? '、':'' }</span>) }</div>
      },
    },
    {
      title: '构建时间',
      dataIndex: 'build_time',
      key: 'build_time',
      align: 'center',
      render: (dom, record) => {
        return moment(record.build_time).format('YYYY-MM-DD')
      },
    },
    {
      title: '发布时间',
      dataIndex: 'publish_time',
      key: 'publish_time',
      align: 'center',
      render: (dom, record) => {
        return moment(record.publish_time).format('YYYY-MM-DD')
      },
    },
    {
      title: '进度',
      dataIndex: 'progress',
      key: 'progress',
      align: 'center'
    },
  ];

  const peopleCol = [
    {
      title: "人员姓名",
      dataIndex: "name_people",
      key: "name_people",
      hideInSearch: true,
      render: (dom, record) => {
        return record.name_people;
      },
    },
    {
      title: "岗位",
      key: "post_people",
      dataIndex: "post_people",
      hideInSearch: true,
      render: (dom, record) => {
        return record.post_people
      },
    },
    {
      title: "周一",
      key: "md",
      dataIndex: "md",
      hideInSearch: true,
      render: (dom, record) => {
        return record.md
      },
    },
    {
      title: "周二",
      key: "td",
      dataIndex: "td",
      hideInSearch: true,
      render: (dom, record) => {
        return record.td
      },
    },{
      title: "周三",
      key: "wd",
      dataIndex: "wd",
      hideInSearch: true,
      render: (dom, record) => {
        return record.wd
      },
    },{
      title: "周四",
      key: "thd ",
      dataIndex: "thd ",
      hideInSearch: true,
      render: (dom, record) => {
        return record.thd 
      },
    },{
      title: "周五",
      key: "fd",
      dataIndex: "fd",
      hideInSearch: true,
      render: (dom, record) => {
        return record.fd
      },
    },{
      title: "周六",
      key: "sd",
      dataIndex: "sd",
      hideInSearch: true,
      render: (dom, record) => {
        return record.sd
      },
    },{
      title: "周日",
      key: "ssd",
      dataIndex: "ssd",
      hideInSearch: true,
      render: (dom, record) => {
        return record.ssd
      },
    },
  ];

  const waitCol = [
    {
      title: '项目',
      dataIndex: 'name_project',
      key: 'name_project',
      align: 'center'
    },
    {
      title: '需求来源',
      dataIndex: 'from_project',
      key: 'from_project',
      align: 'center'
    },
    {
      title: '对接人',
      dataIndex: 'contacts',
      key: 'contacts',
      align: 'center'
    },{
      title: '评估工时',
      dataIndex: 'consum_time',
      key: 'consum_time',
      align: 'center'
    },
    {
      title: '处理进度',
      dataIndex: 'progress',
      key: 'progress',
      align: 'center'
    },
    
  ];
  return (
    <>
      <div className={CX("index")}>
        <img className={CX("index-img")} src={topImg} />
        <div className={CX("index-main")}>
          <div className={CX("index-main-box")}>
            <img className={CX("index-main-box-point")} src={pointImg} />
            <div className={CX("index-main-box-title")}>本周在研项目</div>
            <div className={CX("index-main-box-en")}>/Research project this week</div>
            <Spin spinning={false}>
              <Table dataSource={projectData} columns={projectCol} size="middle" pagination={false} scroll={{x:500}}/>
            </Spin>
          </div>
          <div className={CX("index-main-box")}>
            <img className={CX("index-main-box-point")} src={pointImg} />
            <div className={CX("index-main-box-title")}>人员情况</div>
            <div className={CX("index-main-box-en")}>/Information on Personnel</div>
            <Table dataSource={peopleData} columns={peopleCol} size="middle" pagination={false} scroll={{x:500}}/>
          </div>
          <div className={CX("index-main-box")}>
            <img className={CX("index-main-box-point")} src={pointImg} />
            <div className={CX("index-main-box-title")}>待研发项目</div>
            <div className={CX("index-main-box-en")}>/Project to be developed</div>
            <Table dataSource={waitData} columns={waitCol} size="middle" pagination={false} scroll={{x:500}}/>
          </div>
        </div>
      </div>

      <a
        style={{
          fontSize: "16px",
          position: "absolute",
          color: "#000",
          right: "40px",
          top: "20px",
          zIndex: 10000,
        }}
        onClick={() => {
          if (
            user &&
            user.authorized &&
            JSON.parse(sessionStorage.getItem("user"))
          ) {
            dispatch(push("/article"));
          } else {
            dispatch(push("/login"));
          }
        }}
      >
        进入后台
      </a>
    </>
  );
}
function mapStateToProps(state) {
  const { auth, global } = state;
  return {
    // loding: party.isRequesting,
    // user: auth.user,
    // actions: global.actions,
  };
}
export default connect(mapStateToProps)(Management);