mh-sms-web/src/components/CustomPages/BI/BI011FormRunAnalysis.js

import React from "react";
import { connect } from "dva";
import { initFilter, extendRule, extendOrder } from "../../../utils/common";
import { ChartPieShow, ChartBarShow } from "../../../utils/commonEcharsShow";
import {
  Table,
  Button,
  Input,
  Row,
  Col,
  Modal,
  Icon,
  Progress,
  Divider,
} from "antd";
import echarts from "echarts";
import styles from "../HI/StepForm1.css";
import moment from "moment";
import { T } from "antd/lib/upload/utils";
import FormPage from "../../FormPage";
class BI011FormRunAnalysis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      loading: false,
      noticeTitle: "",
      tmpData: {},
      tableKey: "1",
      startTime: moment(new Date().setDate(1))
        .subtract(5, "months")
        .format("YYYY-MM-DD"),
      endTime: moment(new Date()).format("YYYY-MM-DD"),
      timeType: 5,
      totalCount: 0,
      finishCount: 0,
      overtimeCount: 0,
      unfinishCount: 0,
      dtotalCount: 0,
      dfinishCount: 0,
      dovertimeCount: 0,
      dunfinishCount: 0,
      inputText: this.props.login.user.NAME,
      drate: "0%",
      dnormalRate: "0%",
      weekColor: "black",
      monthColor: "orange",
      threeMonthColor: "black",
      sixMonthColor: "black",
      yearColor: "black",
      retData: [],
      groupData: [],
      detailData: [],
      newData: [],
      detailDataH: [],
      displayHr: "none",
      displaydetail: "none",
      columns: [
        {
          width: "30px",
          title: "月份",
          dataIndex: "MONTHStr",
          key: "MONTHStr",
          // render: (text, record) => (
          //   <span>
          //     <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
          //   </span>
          // ),
        },
        {
          width: "30px",
          title: "任务数",
          dataIndex: "TOTAL_QTY",
          key: "TOTAL_QTY",
        },
        {
          width: "30px",
          title: "完成率",
          dataIndex: "FINISH_RATE",
          key: "FINISH_RATE",
          render: (text, record) => (
            <Progress percent={record.FINISH_RATE.split("%")[0]} />
            // <span>
            //   <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
            // </span>
          ),
        },
        {
          width: "30px",
          title: "及时完成率",
          dataIndex: "NORMAL_FINISH_RATE",
          key: "NORMAL_FINISH_RATE",
          render: (text, record) => (
            <Progress
              percent={record.NORMAL_FINISH_RATE.split("%")[0]}
              strokeColor={{
                from: "rgba(82, 196, 26)",
                to: "rgba(82, 196, 26)",
              }}
            />
            // <span>
            //   <a onClick={() => this.showEditModal(record.DEPARTMENT_ID,record.DEPARTMENT_NAME)}>{record.DEPARTMENT_NAME}</a>
            // </span>
          ),
        },
      ],
      detailColumns: [
        // {
        //     width: "55px",
        //     title: '序号',
        //     dataIndex: 'NUM',
        //     key: 'NUM',
        //   },
        {
          width: "100px",
          title: "模块名称",
          dataIndex: "MOUDLE_NAME",
          key: "MOUDLE_NAME",
          // render: (text, record) => (
          //   <span>
          //     <a onClick={() => this.showFormModal(record.MOUDLE_NAME)}>{record.MOUDLE_NAME}</a>
          //   </span>
          // ),
        },
        {
          width: "60px",
          title: "总任务数",
          dataIndex: "TOTAL_QTY",
          key: "TOTAL_QTY",
        },
        {
          width: "60px",
          title: "正常已办",
          dataIndex: "FINISH_QTY",
          key: "FINISH_QTY",
        },
        {
          width: "60px",
          title: "超时已办",
          dataIndex: "OVER_FINISH_QTY",
          key: "OVER_FINISH_QTY",
        },
        {
          width: "50px",
          title: "未完成",
          dataIndex: "UNFINISH_QTY",
          key: "UNFINISH_QTY",
        },
        {
          width: "50px",
          title: "完成率",
          dataIndex: "FINISH_RATE",
          key: "FINISH_RATE",
        },
        {
          width: "70px",
          title: "及时完成率",
          dataIndex: "NORMAL_FINISH_RATE",
          key: "NORMAL_FINISH_RATE",
          render: (text, record) => (
            <span>
              {record.NORMAL_FINISH_RATE}
              {"%"}
            </span>
          ),
        },
      ],
    };
  }

  componentDidMount() {
    this.loadData();
  }
  showEditModal = (departmentId, departmentName) => {
    const newtmpData = {
      data: {
        id: departmentId,
        name: departmentName,
        onCancel: this.handleCancel,
        tableKey: this.state.tableKey,
        homeReload: true,
      },
      formCode: "BI007_RUNANALYSIS",
    };
    this.setState(
      {
        id: departmentId,
        name: departmentName,
        noticeTitle: departmentName + "安全生产标准化运行情况",
        tmpData: newtmpData,
        currActivatedMenu: "",
      },
      () =>
        this.setState({
          visible: true,
        })
    );
  };
  showFormModal = (mouldName) => {
    const newtmpData = {
      data: {
        name: mouldName,
        onCancel: this.handleCancel,
        tableKey: this.state.tableKey,
        homeReload: true,
      },
      formCode: "BI008_RUNANALYSIS",
    };
    this.setState(
      {
        name: mouldName,
        noticeTitle: mouldName + "安全生产标准化运行情况",
        tmpData: newtmpData,
        currActivatedMenu: "",
      },
      () =>
        this.setState({
          visible: true,
        })
    );
  };
  // showEditModal = (dataId, formCode, TaskID, title, taskCode) => {

  //   const newtmpData = {
  //     data: {
  //       id: dataId, TaskID: TaskID, onCancel: this.handleCancel, taskCode: taskCode, tableKey: this.state.tableKey,
  //       homeReload: true
  //     },
  //     formCode: formCode,
  //   }
  //   this.setState({
  //     noticeTitle: title,
  //     taskCode: taskCode,
  //     tmpData: newtmpData,
  //     currActivatedMenu: ''
  //   }, () => this.setState({
  //     visible: true
  //   }));
  // }

  //加载数据赋值
  loadData = () => {
    // this.ksRun();
    this.getMould(this.props.login.user.NAME);
    // this.getDepartment();
  };
  //矿山
  ksRun = (data) => {
    // let data = {
    //   "IsSuccessful": true, "Data": [{ "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-08-01 00:00:00", "MONTHStr": "2023年1月", "C_COUNT": 90, "D_COUNT":80},
    //   {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年2月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年3月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年4月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年5月",  "C_COUNT": 70, "D_COUNT": 60},
    //   {"DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-09-01 00:00:00", "MONTHStr": "2023年6月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-10-01 00:00:00", "MONTHStr": "2023年7月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年8月",  "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年9月","C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-11-01 00:00:00", "MONTHStr": "2023年10月", "C_COUNT": 70, "D_COUNT": 60},
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2021-12-01 00:00:00", "MONTHStr": "2023年11月",  "C_COUNT": 70, "D_COUNT": 60 },
    //   { "DEPARTMENT_ID": "e3061909-1a7e-b60c-bc71-1845b79c4a11", "MONTH": "2022-01-01 00:00:00", "MONTHStr": "2023年12月",  "C_COUNT": 70, "D_COUNT": 60 }], "TotalCount": 0, "ErrorMessage": null
    // }
    if (data) {
      let month = [];
      let company = [];
      let department = [];
      let color = [
        "#0090FF",
        "#36CE9E",
        "#FFC005",
        "#FF515A",
        "#8B5CFF",
        "#00CA69",
      ];
      const hexToRgba = (hex, opacity) => {
        let rgbaColor = "";
        let reg = /^#[\da-f]{6}$/i;
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
        }
        return rgbaColor;
      };
      data.forEach((item) => {
        month.push(item.MONTHStr);
        company.push(item.FINISH_RATE);
        department.push(item.NORMAL_FINISH_RATE);
      });
      let myChart = echarts.init(document.getElementById("ksRun"));
      myChart.setOption({
        color: color,
        title: {
          text: "任务及时完成率（近6个月）",
          left: "center",
          top: "2%",
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let temp = "";
            params.forEach((t) => {
              temp =
                temp + t.marker + t.seriesName + ":" + t.value + "%" + "<br />";
            });
            return temp;
          },
        },
        grid: {
          left: "10%",
          right: "5%",
        },
        legend: {
          left: "center",
          align: "left",
          bottom: "2%",
          textStyle: {
            color: "#000",
          },
          itemWidth: 10,
          itemHeight: 10,
        },
        xAxis: {
          type: "category",
          data: month,
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#333",
            },
          },
          axisLine: {
            lineStyle: {
              color: "#D9D9D9",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            textStyle: {
              color: "#666",
            },
          },
          nameTextStyle: {
            color: "#666",
            fontSize: 12,
            lineHeight: 40,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#E9E9E9",
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "完成率",
            type: "line",
            data: company,
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 8,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[0], 0.3),
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[0], 0.1),
                    },
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 10,
              },
            },
          },
          {
            name: "及时完成率",
            type: "line",
            data: department,
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[1],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[1], 0.5),
                shadowOffsetY: 8,
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[1], 0.3),
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[1], 0.1),
                    },
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[1], 0.1),
                shadowBlur: 10,
              },
            },
          },
        ],
      });
    }
  };
  getMould = (inputText) => {
    this.setState({ loading: true });
    var orgId = this.props.login ? this.props.login.OrgId : "";
    let json = initFilter(
      orgId,
      inputText,
      "",
      "",
      "",
      this.state.startTime,
      this.state.endTime
    );
    this.props.dispatch({
      type: "app/getDataByPost",
      payload: json,
      url: "BI/BIStatiscialAnalysisController/GetPersonAnalyze",
      onComplete: (ret) => {
        if (ret) {
          this.setState({
            retData: ret.groupData,
            totalCount: ret.TotalCount,
            finishCount: ret.doneCount,
            overtimeCount: ret.timeOverCount,
            unfinishCount: ret.unfinishCount,
            dovertimeCount: ret.timeOverWaitCount,
            loading: false,
          });
          this.ksRun(ret.groupDataLine);
        } else {
          this.setState({
            retData: [],
            totalCount: 0,
            finishCount: 0,
            overtimeCount: 0,
            unfinishCount: 0,
            dovertimeCount: 0,
            loading: false,
          });
        }
      },
    });
  };

  closeModal = () => {
    // 退出弹窗
    this.clearData();
  };
  clearData = () => {
    let newtmpData = { ...this.state.tmpData };
    newtmpData["data"].id = "";
    newtmpData["data"].homeReload = false;
    newtmpData.formCode = "";
    this.setState({
      visible: false,
      tmpData: newtmpData,
    });
  };
  handleCancel = () => {
    // 退出弹窗
    this.clearData();
  };
  handleSearch = (evt) => {
    const { value } = evt.target;
    this.setState({ inputText: value ? value : this.props.login.user.NAME });
  };
  render() {
    const {
      startTime,
      endTime,
      finishCount,
      overtimeCount,
      totalCount,
      unfinishCount,
      inputText,
      weekColor,
      monthColor,
      threeMonthColor,
      sixMonthColor,
      yearColor,
      dovertimeCount,
    } = this.state;
    let allFinishRate =
      totalCount === 0 || totalCount == undefined
        ? 0
        : (((finishCount + overtimeCount) / totalCount) * 100).toFixed(1);
    let finishRate =
      totalCount === 0 || totalCount == undefined
        ? 0
        : ((finishCount / totalCount) * 100).toFixed(1);
    return (
      <div>
        {/* className='route-home' ,boxShadow:'inset 0 0 10px #ccc' */}
        <div
          style={{
            backgroundColor: "white",
            width: "1200px",
            top: "0",
            bottom: "0",
            left: "0",
            right: "0",
            margin: "auto",
            borderStyle: "solid",
            borderColor: "#ccc",
            borderWidth: "1px",
          }}
        >
          <Modal
            visible={this.state.visible}
            title={this.state.noticeTitle}
            maskClosable={false}
            onCancel={this.handleCancel}
            footer={null}
            className="antd-modal-fullscreen"
            closeModal={this.closeModal}
            // forceRender={true}
          >
            <FormPage {...this.state.tmpData} />
          </Modal>
          <h1
            style={{
              textAlign: "center",
              verticalAlign: "Bottom",
              marginTop: "20px",
              marginBottom: "40px",
              fontWeight: "bold",
            }}
          >
            任务完成情况统计分析(个人)
          </h1>
          <Row
            style={{
              fontSize: "15px",
              marginTop: "10px",
              // marginLeft: "30px",
              margin: "0px 100px",
              height: "35px",
            }}
          >
            <span style={{ marginLeft: "10px", width: "100px" }}>
              <b>姓名：</b>
              {inputText}
            </span>
            <span style={{ marginLeft: "30px", width: "100px" }}>
              <b>统计区间：</b>
              {startTime} - {endTime}
            </span>
            <span style={{ float: "right", marginRight: "30px" }}>
              <Input
                onChange={this.handleSearch}
                style={{ width: "150px", marginRight: "10px" }}
                defaultValue={this.props.login.user.NAME}
              ></Input>
              <Button
                onClick={() => this.getMould(inputText)}
                style={{ width: "80px" }}
                type="primary"
              >
                查询
              </Button>
            </span>
          </Row>

          {/* <hr style={{ width: "98%" }}></hr> */}
          <br></br>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              marginTop: "10px",
              //   marginBottom: "20px",
            }}
          >
            <div className={styles.menuPie}>
              <li>
                总任务数
                <br />
                <div className={styles.dataStyle}>
                  {totalCount ? totalCount : 0}
                </div>
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                待办数
                <br />
                <div className={styles.dataStyle1}>
                  {unfinishCount ? unfinishCount : 0}
                </div>
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                超时待办数
                <br />
                <div className={styles.dataStyle3}>
                  {dovertimeCount ? dovertimeCount : 0}
                </div>
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                已办事项
                <br />
                <div className={styles.dataStyle2}>
                  {finishCount + overtimeCount
                    ? finishCount + overtimeCount
                    : 0}
                </div>
                {/* <a href="#" style={{ color: "red" }}> */}
                {/* </a> */}
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                完成率
                <br />
                <div className={styles.dataStyle3}>
                  {allFinishRate ? allFinishRate : 0}%
                </div>
                {/* <a href="#" style={{ color: "red" }}> */}
                {/* </a> */}
              </li>
              <Divider
                type="vertical"
                style={{ width: "1px", height: "70px", margin: "9px 0px" }}
              />
              <li>
                及时完成率
                <br />
                <div className={styles.dataStyle3}>
                  {finishRate ? finishRate : 0}%
                </div>
              </li>
            </div>
          </div>
          {/* <span style={{width:"800px",marginLeft:"30px",marginBottom:"20px"}}>
          <Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>总任务数<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'black'}}>{totalCount?totalCount:0}</span></Button>
          <Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>待办数<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'red'}}>{unfinishCount?unfinishCount:0}</span></Button>
          <Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>超时待办数<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'orange'}}>{dovertimeCount?dovertimeCount:0}</span></Button>
          <Button style={{width:"120px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>已办事项<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'green'}}>{(finishCount+overtimeCount)?(finishCount+overtimeCount):0}</span></Button>
          <Button style={{width:"130px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>完成率<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'orange'}}>{allFinishRate?allFinishRate:0}%</span></Button>
          <Button style={{width:"140px",height:"80px",borderRadius: '8px',border:'1px RGB(24, 149, 255) solid',marginRight:"10px"}}>及时完成率<br></br><span style={{fontWeight:"bold",fontSize:"30px",color:'orange'}}>{finishRate?finishRate:0}%</span></Button>
        </span> */}
          {/* <hr style={{border:'1px dashed #ccc',marginBottom:"20px",marginTop:"20px"}}></hr> */}
          <Row
            style={{
              marginTop: "20px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Col
              span={24}
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                width: "1100px",
              }}
            >
              {/* <h2 style={{textAlign:'center',fontWeight:'bold'}}>任务及时完成率（近12个月）</h2> */}
              <div
                id="ksRun"
                style={{
                  width: "100%",
                  height: "400px",
                  backgroundColor: "white",
                  borderStyle: "solid",
                  borderColor: "#ccc",
                  borderWidth: "1px",
                }}
              ></div>
              {/* <br></br> */}
              {/* <span style={{ width: "100%" }}>
                * 统计时间：{moment(new Date()).format("YYYY-MM-DD HH:mm:ss")}
                <br></br>
                <br></br>
              </span> */}
            </Col>
          </Row>
          <Row
            style={{
              marginTop: "20px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Col
              span={24}
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                width: "1100px",
              }}
            >
              {/* <h2 style={{textAlign:'left',fontWeight:'bold',marginLeft:"30px"}}><Icon type="appstore"/> 部门统计分析</h2> */}
              <Table
                style={{
                  width: "100%",
                  // marginLeft: "30px",
                  textAlign: "center",
                  marginBottom: "30px",
                }}
                // scroll={{ y: 400 }}
                dataSource={this.state.retData}
                columns={this.state.columns}
                pagination={false}
                loading={false}
                size="small"
                bordered
              />
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}
export default connect(({ login, app, loading }) => ({ login, app, loading }))(
  BI011FormRunAnalysis
);