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,
  DatePicker,
  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 = {
      selectStartTime: moment(this.getStartDate(), "YYYY-MM-DD"),
      selectEndTime: moment(this.getEndDate(), "YYYY-MM-DD"),
      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: [],
      detailData: [],
      displayHr: "none",
      displaydetail: "none",
      columns: [
        {
          width: "150px",
          title: "月份",
          dataIndex: "MONTHStr",
          key: "MONTHStr",
        },
        {
          width: "100px",
          title: "任务数",
          dataIndex: "TOTAL_QTY",
          key: "TOTAL_QTY",
        },
        {
          width: "150px",
          title: "完成率",
          dataIndex: "FINISH_RATE",
          key: "FINISH_RATE",
          render: (text, record) => (
            <Progress percent={record.FINISH_RATE.split("%")[0]} />
          ),
        },
        {
          width: "150px",
          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)",
              }}
            />
          ),
        },
      ],
      detailColumns: [
        {
          width: "80px",
          title: "序号",
          render: (text, record, index) => `${index + 1}`,
        },
        {
          width: "200px",
          title: "登录时间",
          dataIndex: "CREATE_TIME",
          key: "CREATE_TIME",
        },
        {
          width: "150px",
          title: "登录设备",
          dataIndex: "FROM",
          key: "FROM",
        },
        {
          // width: "60px",
          title: "设备版本",
          dataIndex: "VERSION",
          key: "VERSION",
          render: (text, record) => (
            <div>{text && text.length > 30 ? text.substring(0, 30) : text}</div>
          ),
        },
      ],
    };
  }
  getStartDate = () => {
    let date = new Date();
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let d = date.getDate();
    //  当前日期
    let nowDate =
      y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
    let pastDate = moment(nowDate).add(-180, "d").format("YYYY-MM-DD");
    return pastDate;
  };

  getEndDate = () => {
    let date = new Date();
    let y = date.getFullYear();
    let m = date.getMonth() + 1;
    let d = date.getDate();
    //  当前日期
    let nowDate =
      y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
    let pastDate = moment(nowDate).format("YYYY-MM-DD");
    return pastDate;
  };
  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,
        })
    );
  };

  //加载数据赋值
  loadData = () => {
    this.getMould(this.props.login.user.NAME);
  };
  //矿山
  // ksRun = (data) => {
  //   if (data) {
  //     let month = [];
  //     let company = [];
  //     let department = [];
  //     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({
  //       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;
  //         }
  //       },
  //       legend: {
  //         // data: ['部门'],
  //         data: ['完成率', '及时完成率'],
  //         bottom: '5px'
  //       },
  //       grid: {
  //         left: '3%',
  //         right: '4%',
  //         top: '12%',
  //         containLabel: true
  //       },
  //       toolbox: {
  //         feature: {
  //           // saveAsImage: {}
  //         }
  //       },
  //       xAxis: {
  //         type: 'category',
  //         boundaryGap: false,
  //         data: month,
  //         axisLine: {
  //           show: false,
  //           // lineStyle: {
  //           //   color: 'rgba(192, 192, 102)'
  //           // }
  //         },
  //         axisTick: {
  //           show: false
  //         },
  //         axisLabel: {
  //           color: '#000',
  //           rotate: 40,
  //           formatter: function (value) { // 自定义文字超出部分 ...
  //             if (value.length > 10) {
  //               return `${value.slice(0, 10)}...`;
  //             }
  //             return value;
  //           }
  //         }
  //       },
  //       yAxis: {
  //       axisLabel: {
  //           formatter: function (val) {
  //             return (val)+ '%';
  //           }
  //         },
  //       },
  //       series: [
  //         {
  //           name: '完成率',
  //           type: 'line',
  //           color: '#4b9bf3',
  //           data: company,
  //           smooth: true
  //         },
  //         {
  //           name: '及时完成率',
  //           type: 'line',
  //           color: '#FCD149',
  //           data: department,
  //           smooth: true
  //         },
  //       ]
  //     })
  //   }
  // }
  //矿山
  ksRun = (data) => {
    if (data) {
      let month = [];
      let company = [];
      let department = [];
      let totalCount = [];
      data.forEach((item) => {
        month.push(item.MONTHStr);
        company.push(item.FINISH_RATE);
        department.push(item.NORMAL_FINISH_RATE);
        totalCount.push(item.TOTAL_QTY);
      });
      let myChart = echarts.init(document.getElementById("ksRun"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          transitionDuration: 0,
          formatter: function (params) {
            return (
              params[0].marker +
              params[0].seriesName +
              " : " +
              params[0].value +
              "</br>" +
              params[1].marker +
              params[1].seriesName +
              " : " +
              params[1].value +
              "%" +
              "</br>" +
              params[2].marker +
              params[2].seriesName +
              " : " +
              params[2].value +
              "%"
            );
          },
        },
        title: {
          text: "任务完成情况分析",
          left: "center",
          top: "5%",
        },
        legend: {
          data: ["完成数", "完成率", "及时完成率"],
          left: "center",
          align: "left",
          top: "15%",
          textStyle: {
            color: "#000",
          },
          itemWidth: 10,
          itemHeight: 10,
          // itemGap: 35,
        },
        grid: {
          left: "3%",
          right: "4%",
          top: "27%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: month,
          axisLabel: {
            showMaxLabel: true,
          },
        },
        yAxis: [
          {
            type: "value",
            position: "left",
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#f2f2f2"],
                // opacity:0.2
                // zlevel: -1,
              },
            },
            axisLine: {
              lineStyle: {
                color: "#0c3b71",
              },
            },
            axisLabel: {
              color: "rgb(170,170,170)",
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            position: "right",
            splitLine: {
              show: false,
              lineStyle: {
                color: ["#f2f2f2"],
              },
            },
            axisLine: {
              lineStyle: {
                color: "#f2f2f2",
              },
            },
            axisLabel: {
              color: "rgb(170,170,170)",
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: "完成数",
            type: "bar",
            color: "#72b85b",
            data: totalCount,
            barWidth: "20%",
            barGap: "10%",
            stack: null,
          },
          {
            name: "完成率",
            type: "line",
            color: "#4b9bf3",
            data: company,
            yAxisIndex: 1,
            smooth: true,
            // zlevel:100,
          },
          {
            name: "及时完成率",
            type: "line",
            color: "#FCD149",
            data: department,
            yAxisIndex: 1,
            smooth: true,
            // zlevel:100,
          },
        ],
      });
    }
  };
  //走势图
  chartLogin = (data) => {
    let month = [];
    let company = [];
    data.forEach((item) => {
      month.push(item.CREATE_TIME.slice(0, 10));
      company.push(item.QTY);
    });
    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;
    };
    let myChart = echarts.init(document.getElementById("chartLogin"));
    myChart.setOption({
      color: color,
      title: {
        text: "近1个月登录次数走势图",
        left: "center",
        top: "5%",
      },
      dataZoom: [
        {
          show: true,
          realtime: true,
          start: 0,
          end: 50,
          height: 20,
          showDetail: false,
          bottom: 0,
          fillerColor: hexToRgba(color[0], 0.3),
          handleColor: hexToRgba(color[0], 1),
        },
        {
          type: "inside",
          realtime: true,
          start: 0,
          end: 50,
        },
      ],
      tooltip: {
        trigger: "axis",
        // formatter: function (params) {
        //   let temp=''
        //   params.forEach(t=>{
        //       temp=temp+t.seriesName +":"+t.value+"%"+'<br />';

        //   })
        //   return temp;
        // }
      },
      legend: {
        data: ["登录次数"],
        top: "15%",
      },
      grid: {
        left: "3%",
        right: "4%",
        top: "25%",
        bottom: "8%",
        containLabel: true,
      },
      toolbox: {
        feature: {
          // saveAsImage: {}
        },
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: month,
        axisLabel: {
          textStyle: {
            color: "#333",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#D9D9D9",
          },
        },
      },
      yAxis: {
        axisLabel: {
          textStyle: {
            color: "#666",
          },
          formatter: function (val) {
            return val;
          },
        },
        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,
          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,
            },
          },
        },
      ],
    });
  };
  //（饼图）
  chartGroupLogin = (data) => {
    let riskLevel = [];
    let showData = [];
    let color = [
      "#72b85b",
      "#4b9bf3",
      "#FFC000",
      "#FFFF00",
      "#00B0F0",
      "#00B0C0",
    ];
    data.forEach((item) => {
      riskLevel.push(item.FROM);
      showData.push({ value: item.QTY, name: item.FROM });
    });
    let riskLevels = document.getElementById("mainJobPie2");
    if (riskLevels) {
      let myChart = echarts.init(riskLevels);
      myChart.setOption({
        tooltip: {
          trigger: "item",
          //formatter: '{a} <br/>{b} : {c} ({d}%)'
          // formatter: '{b} : {c} ({d}%)'
          formatter: "{b} : {c}",
        },
        title: {
          text: "APP、H5、PC近1个月登录情况",
          left: "center",
          top: "5%",
          textStyle: {
            fontSize: 14,
          },
        },
        legend: {
          bottom: 10,
          left: "center",
          orient: "horizontal",
          // type:'scroll',
          data: riskLevel,
        },
        series: [
          {
            name: "APP、H5、PC近1个月登录情况",
            type: "pie",
            radius: ["45%", "60%"],
            center: ["50%", "45%"],
            label: {
              formatter: "{b}:{c}",
            },
            data: showData,
            color: color,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                //shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
            },
          },
        ],
      });
    }
  };
  getMould = (inputText) => {
    this.setState({ loading: true });
    var orgId = this.props.login ? this.props.login.OrgId : "";
    let startTime = this.state.selectStartTime.format("YYYY-MM-DD");
    let endTime = this.state.selectEndTime.format("YYYY-MM-DD");
    let json = initFilter(orgId, inputText, "", "", "", startTime, 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,
          });
        }
      },
    });
    this.getLogin(inputText);
  };
  getLogin = (inputText) => {
    this.setState({ loading: true });
    var orgId = this.props.login ? this.props.login.OrgId : "";
    let json = initFilter(orgId, inputText);
    this.props.dispatch({
      type: "app/getDataByPost",
      payload: json,
      url: "BI/BIStatiscialAnalysisController/GetLoginInfos",
      onComplete: (ret) => {
        if (ret) {
          this.setState({
            detailData: ret.retDetailData,
            loading: false,
          });
          this.chartLogin(ret.retChartData);
          this.chartGroupLogin(ret.groupData);
        }
      },
    });
  };
  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 });
  };
  startChange = (value) => {
    this.setState({
      selectStartTime: value,
      startTime: value.format("YYYY-MM-DD"),
    });
  };
  endChange = (value) => {
    this.setState({
      selectEndTime: value,
      endTime: value.format("YYYY-MM-DD"),
    });
  };
  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: "20px",
              fontWeight: "bold",
            }}
          >
            任务完成情况统计分析(个人)
          </h1>
          <Row
            style={{
              fontSize: "15px",
              marginTop: "10px",
              // marginLeft: "30px",
              margin: "0px 100px",
              height: "35px",
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <span
              style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
              }}
            >
              <b>姓名：</b>
              <Input
                onChange={this.handleSearch}
                style={{ width: "150px" }}
                defaultValue={this.props.login.user.NAME}
              ></Input>
            </span>
            <span
              style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
              }}
            >
              <b>开始时间：</b>
              <DatePicker
                style={{ width: "150px" }}
                value={this.state.selectStartTime}
                format="YYYY-MM-DD"
                onChange={this.startChange}
              />
            </span>
            <span
              style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
              }}
            >
              <b>结束时间：</b>
              <DatePicker
                style={{ width: "150px" }}
                value={this.state.selectEndTime}
                format="YYYY-MM-DD"
                onChange={this.endChange}
              />
            </span>
            <span style={{ width: "100px" }}>
              <Button
                onClick={() => this.getMould(inputText)}
                style={{ width: "80px" }}
                type="primary"
              >
                查询
              </Button>
            </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>
          {/* <hr style={{border:'1px dashed #ccc',marginBottom:"20px",marginTop:"20px"}}></hr> */}
          <Row
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              marginTop: "20px",
            }}
          >
            <Col
              span={24}
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                width: "1100px",
                flexDirection: "column",
              }}
            >
              {/* <h2 style={{textAlign:'center',fontWeight:'bold'}}>任务及时完成率（近12个月）</h2> */}
              <div
                id="ksRun"
                style={{
                  width: "100%",
                  height: "350px",
                  marginLeft: "20px",
                  marginRight: "30px",
                  backgroundColor: "white",
                  borderStyle: "solid",
                  borderColor: "#ccc",
                  borderWidth: "1px",
                }}
              ></div>
              <br></br>
              <span style={{ textAlign: "center", width: "100%" }}>
                * 统计时间：{moment(new Date()).format("YYYY-MM-DD HH:mm:ss")}
                <br></br>
                <br></br>
              </span>
            </Col>
          </Row>
          <Row
            style={{
              marginTop: "10px",
              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%",
                  textAlign: "center",
                  marginBottom: "30px",
                }}
                // scroll={{ y: 400 }}
                dataSource={this.state.retData}
                columns={this.state.columns}
                pagination={false}
                loading={false}
                size="small"
                bordered
              />
            </Col>
          </Row>
          <hr style={{ width: "98%" }}></hr>
          <Row
            style={{
              marginTop: "20px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Col
              span={24}
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                width: "1100px",
              }}
            >
              <Col
                span={6}
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  flexDirection: "column",
                }}
              >
                {/* <h2
                style={{
                  textAlign: "left",
                  fontWeight: "bold",
                  marginLeft: "30px",
                }}
              >
                <Icon type="appstore" /> APP、H5、PC近1个月登录次数
              </h2> */}
                <div
                  id="mainJobPie2"
                  style={{
                    width: "100%",
                    height: "350px",
                    backgroundColor: "white",
                    borderStyle: "solid",
                    borderColor: "#ccc",
                    borderWidth: "1px",
                  }}
                ></div>
              </Col>
              <Col span={1}></Col>
              <Col
                span={17}
                style={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  // width: "1100px",
                }}
              >
                <div
                  id="chartLogin"
                  style={{
                    width: "100%",
                    height: "350px",
                    backgroundColor: "white",
                    borderStyle: "solid",
                    borderColor: "#ccc",
                    borderWidth: "1px",
                  }}
                ></div>
              </Col>
            </Col>
            {/* <h2
              style={{
                textAlign: "left",
                fontWeight: "bold",
                marginLeft: "30px",
              }}
            >
              <Icon type="appstore" /> 近1个月登录次数走势图
            </h2> */}
          </Row>
          <Row
            style={{
              marginTop: "20px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <Col
              span={24}
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                flexDirection: "column",
                width: "1100px",
              }}
            >
              <h2
                style={{
                  textAlign: "left",
                  fontWeight: "bold",
                }}
              >
                <Icon type="appstore" /> 近30次登录记录
              </h2>
              <Table
                style={{
                  width: "100%",
                  textAlign: "center",
                  marginBottom: "30px",
                }}
                // scroll={{ y: 400 }}
                dataSource={this.state.detailData}
                columns={this.state.detailColumns}
                pagination={false}
                loading={false}
                size="small"
                bordered
              />
            </Col>
          </Row>
        </div>
      </div>
    );
  }
}
export default connect(({ login, app, loading }) => ({ login, app, loading }))(
  BI011FormRunAnalysis
);