Highways4Good/web/client/src/sections/middleground/containers/data.js

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { Space, Row, Col, DatePicker, Spin } from "antd";
import { getFundamental, getsortord } from "../actions/data";
import { DateModal } from "../components";
import moment from "moment";
import "../style.less";
const { RangePicker } = DatePicker;
const UserManage = (props) => {
  const { dispatch, loading, datas, Patientias } = props;
  const dateFormat = "YYYY/MM/DD";
  const [data, setData] = useState();
  const [Patientia, setPatientia] = useState();
  useEffect(() => {
    // 获取数据
    dispatch(getFundamental()).then((res) => {
      setData(res);
    });
  }, [true]);
  useEffect(() => {
    // 根据接口获取规定时间内获取到的数据
    var customField = [
      moment().add(-6, "day").format("YYYY-MM-DD"),
      moment(new Date(), dateFormat).format("YYYY-MM-DD"),
    ];
    dispatch(getsortord(customField[0], customField[1])).then((res) => {
      setPatientia(res.payload.data);
    });
  }, [true]);
  // useEffect(() => {
  /* Patientia ? setPatientia(Patientia */ /* .sort(sortByKey("count")) */ /* ) : null */
  // }, [Patientia])
  // 根据数组里面对象的key值进行排序
  // const sortByKey = (key) => {
  //     return function (a, b) {
  //         var value1 = a[key];
  //         var value2 = b[key];
  //         return value2 - value1;
  //     }
  // }
  const disabledDate = (current) => {
    return (
      (current && current < moment("2022/03/01").subtract("day")) ||
      current > moment(new Date()).subtract("days")
    );
  };
  const getTime = (date) => {
    // 根据时间框时间获取数据进行展示
    if (date) {
      var ao = [];
      ao.push(date[0].format("YYYY/MM/DD"));
      ao.push(date[1].format("YYYY/MM/DD"));
    }
    dispatch(getsortord(ao[0], ao[1])).then((res) => {
      setPatientia(res.payload.data /* .sort(sortByKey("count")) */);
    });
  };

  return (
    <div style={{ overflow: "hiddle" }}>
      {/* 此处进行了loding的效果 */}
      <Spin spinning={loading} tip="稍等片刻~">
        {/* 页面上部分代码 */}
        <div className="shuju-top">
          <Row className="wrap" type="flex" justify="center" align="middle">
            <Col span={6} align="center">
              <span>今日新增填报</span>
              <p> {datas.data ? datas.data.added : null}</p>
            </Col>
            <Col span={6} align="center">
              <span>今日已审填报</span>
              <p>
                {datas.data ? datas.data.checked : null}
                <span>/{datas.data ? datas.data.unChecked : null}</span>
              </p>
            </Col>
            <Col span={6} align="center">
              <span>隐患场所总数</span>
              <p>{datas.data ? datas.data.danger_place : null}</p>
            </Col>
            <Col span={6} align="center">
              <span>历史填报</span>
              <p>{datas.data ? datas.data.history : null}</p>
            </Col>
          </Row>
        </div>
        {/* 页面下部分代码 */}
        <div className="shuju-floer">
          {/* echarts柱状图 */}
          <div className="shuju-floer-left">{datas ? <DateModal /> : null}</div>
          {/* 根据时间进行的排序 */}
          <div className="shuju-floer-reght">
            <p>各区县合用场所填报数量</p>
            <Space direction="vertical" size={12}>
              <RangePicker
                disabledDate={disabledDate}
                onChange={getTime}
                defaultValue={[
                  moment().add(-6, "day"),
                  moment(new Date(), dateFormat)
                ]}
                width={"100%"}
                allowClear={false}
              />
            </Space>
            <div className="dataDisplay">
              {Patientias
                ? Patientias.map((item, index) => {
                  return (
                    <li
                      key={index}
                      className="traverse"
                      style={{ marginTop: index == 0 ? "30px" : "0" }}
                    >
                      {index >= 3 ? (
                        <div className="topThree">{index + 1}</div>
                      ) : (
                        <div className="untopThree">{index + 1}</div>
                      )}
                      <span className="siteName">{item.name}</span>
                      <span className="sitePeople">{item.count}</span>
                    </li>
                  );
                })
                : null}
            </div>
          </div>
        </div>
      </Spin>
    </div>
  );
};
function mapStateToProps(state) {
  // console.log(state);
  const { auth, depMessage, depUser, global, datas, Patientia } = state;
  // 在reducer中进行数据处理
  const sortByKey = (key) => {
    return function (a, b) {
      var value1 = a[key];
      var value2 = b[key];
      return value2 - value1;
    };
  };
  return {
    user: auth.user,
    clientHeight: global.clientHeight,
    loading: datas.isRequesting && Patientia.isRequesting,
    depMessage: depMessage.data || [],
    depUser: depUser.data || [],
    datas: datas || [],
    Patientias: Patientia.data
      ? Patientia.data.sort(sortByKey("count"))
      : null || [],
  };
}

export default connect(mapStateToProps)(UserManage);