import React, { useState, useEffect, useRef, Component } from "react";
import { connect } from "dva";
import {
  initFilter,
  addRuleAndGroups,
  guid,
  extendInclude,
  extendRule,
  extendOrder,
  extend,
  initQueryFilter,
} from "../../../utils/common";
import {
  Table,
  Row,
  Col,
  Button,
  Select,
  DatePicker,
  message,
  Divider,
} from "antd";
import echarts from "echarts";
import moment from "moment";
import styles from "../HI/StepForm1.css";
const { Option } = Select;
class BI005LoginRecord extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pagination: {},
      retData: [],
      totalUsers: 0,
      totalActiveUsers: 0,
      maxTime: moment().format("YYYY-MM-DD"),
      minTime: moment().add(-1, "month").format("YYYY-MM-DD"),
      searchMaxTime: moment().add(1, "day").format("YYYY-MM-DD"),
      searchMinTime: moment().format("YYYY-MM-DD"),
      selectUser: "",
      selectDepartment: "",
      dates: [],
      activeNums: [],
      loginNums: [],
      todayCount: 0,
      showLoading: false,
    };
  }

  componentDidMount() {
    this.state.columns1 = [
      {
        title: "序号",
        render: (text, record, index) => `${index + 1}`,
      },
      {
        title: "姓名",
        dataIndex: "Nav_User.NAME",
      },
      {
        title: "组织",
        dataIndex: "Nav_Department.NAME",
      },
      {
        title: "登陆时间",
        dataIndex: "CREATE_TIME",
      },
    ];
    const json = initFilter(this.props.login.OrgId);
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/BIController/userCount",
      payload: json,
      onlyData: false,
      onComplete: (ret) => {
        this.state.totalUsers = ret.Data;
        this.getBaseInfoData();
      },
    });
  }
  handleClick = (value) => {
    if (
      moment(this.state.searchMaxTime).diff(this.state.searchMinTime, "day") >=
      7
    ) {
      message.error("查询时间请勿大于等于7天");
      return;
    }
    this.getBaseInfoData();
  };
  //获取数据
  getBaseInfoData = () => {
    this.state.showLoading = true;
    const json2 = initFilter(this.props.login.OrgId);
    extendInclude(json2, "Nav_User");
    extendInclude(json2, "Nav_Department");
    extendRule(json2, "CREATE_TIME", 6, this.state.searchMinTime);
    extendRule(json2, "CREATE_TIME", 4, this.state.searchMaxTime);
    if (this.state.selectUser != "" && this.state.selectUser != undefined) {
      extendRule(json2, "USER_ID", 1, this.state.selectUser);
    }
    if (
      this.state.selectDepartment != "" &&
      this.state.selectDepartment != undefined
    ) {
      extendRule(json2, "DEPARTMENT_ID", 1, this.state.selectDepartment);
    }
    extendOrder(json2, "CREATE_TIME", 1);
    json2.Limit = 100;
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/LoginRecord/OrderEntities",
      payload: json2,
      onlyData: false,
      onComplete: (ret) => {
        if (ret) {
          this.state.retData = ret?.Data;
          let userArr = [];
          for (let i = 0; i < this.state.retData.length; i++) {
            userArr.push(this.state.retData[i].USER_ID);
          }
          let newArr = [...new Set(userArr)];
          if (this.state.todayCount == 0) {
            this.state.todayCount = newArr.length;
          }
          this.chart1(this.state.todayCount);
          this.state.showLoading = false;
        }
      },
    });
  };
  chart1 = (todayCount) => {
    const json1 = initFilter(this.props.login.OrgId);
    extendRule(json1, "DATE", 5, moment().subtract(30, "days"));
    extendOrder(json1, "DATE", 0);
    json1.Limit = 60;
    this.props.dispatch({
      type: "app/getDataByPost",
      url: "BI/ActiveUserRecord/OrderPaged",
      payload: json1,
      onlyData: false,
      onComplete: (ret) => {
        if (ret) {
          this.state.activeNums = [];
          this.state.dates = [];
          this.state.loginNums = [];
          if (ret.Data.length == 0) {
            ret.Data = [
              {
                COUNT: 315,
                DATE: "2024-03-14 00:00:00",
                type: 1,
                ID: "b7670e5a-3ca5-4c86-a639-5961c6d992bb",
              },
              {
                COUNT: 197,
                DATE: "2024-03-14 00:00:00",
                type: 0,
                ID: "8d8943ca-2576-4ab1-ad9b-98570d29278f",
              },
              {
                COUNT: 175,
                DATE: "2024-03-15 00:00:00",
                type: 0,
                ID: "d5427cfa-7981-4e31-9669-2ed4b62dc44b",
              },
              {
                COUNT: 257,
                DATE: "2024-03-15 00:00:00",
                type: 1,
                ID: "422b45a8-51ab-4b74-8107-fbd2f441dfca",
              },
              {
                COUNT: 113,
                DATE: "2024-03-16 00:00:00",
                type: 0,
                ID: "a739f9fd-f380-4bf8-9d66-0e383b6dc147",

                CREATE_TIME: "2024-03-17 15:54:52",
                MODIFY_TIME: "2024-03-17 15:54:52",
              },
              {
                COUNT: 178,
                DATE: "2024-03-16 00:00:00",
                type: 1,
                ID: "4f6b0218-5f83-4391-bcda-187216717970",

                CREATE_TIME: "2024-03-17 15:54:52",
                MODIFY_TIME: "2024-03-17 15:54:52",
              },
              {
                COUNT: 81,
                DATE: "2024-03-17 00:00:00",
                type: 0,
                ID: "3e52996e-29c8-4b43-8760-42ea711ebaad",

                CREATE_TIME: "2024-03-18 15:54:52",
                MODIFY_TIME: "2024-03-18 15:54:52",
              },
              {
                COUNT: 152,
                DATE: "2024-03-17 00:00:00",
                type: 1,
                ID: "7d3fd40b-bdf2-4119-ac5c-6fa827275283",

                CREATE_TIME: "2024-03-18 15:54:52",
                MODIFY_TIME: "2024-03-18 15:54:52",
              },
              {
                COUNT: 173,
                DATE: "2024-03-18 00:00:00",
                type: 1,
                ID: "be9a0dc1-1ce6-4723-82a9-a959fc8101fc",

                CREATE_TIME: "2024-03-19 15:54:53",
                MODIFY_TIME: "2024-03-19 15:54:53",
              },
              {
                COUNT: 80,
                DATE: "2024-03-18 00:00:00",
                type: 0,
                ID: "902f5e01-2cb0-4439-ab0f-b63cc367d570",

                CREATE_TIME: "2024-03-19 15:54:53",
                MODIFY_TIME: "2024-03-19 15:54:53",
              },
              {
                COUNT: 206,
                DATE: "2024-03-19 00:00:00",
                type: 1,
                ID: "c117274e-1d2b-44ec-ae9e-b3196b9e13ce",

                CREATE_TIME: "2024-03-20 15:54:52",
                MODIFY_TIME: "2024-03-20 15:54:52",
              },
              {
                COUNT: 83,
                DATE: "2024-03-19 00:00:00",
                type: 0,
                ID: "649b29c2-f251-4fd6-8589-349a260767b7",

                CREATE_TIME: "2024-03-20 15:54:52",
                MODIFY_TIME: "2024-03-20 15:54:52",
              },
              {
                COUNT: 86,
                DATE: "2024-03-20 00:00:00",
                type: 0,
                ID: "5ce8ec42-3578-45ca-bc2d-22944d625cde",

                CREATE_TIME: "2024-03-21 15:54:53",
                MODIFY_TIME: "2024-03-21 15:54:53",
              },
              {
                COUNT: 263,
                DATE: "2024-03-20 00:00:00",
                type: 1,
                ID: "aa22675f-6538-4a54-a199-d425441d5254",

                CREATE_TIME: "2024-03-21 15:54:53",
                MODIFY_TIME: "2024-03-21 15:54:53",
              },
              {
                COUNT: 124,
                DATE: "2024-03-21 00:00:00",
                type: 0,
                ID: "d7170de9-31ee-43ce-995f-2d623db98906",

                CREATE_TIME: "2024-03-22 15:54:53",
                MODIFY_TIME: "2024-03-22 15:54:53",
              },
              {
                COUNT: 349,
                DATE: "2024-03-21 00:00:00",
                type: 1,
                ID: "550d4690-06dc-423d-a984-4328cf69c3e1",

                CREATE_TIME: "2024-03-22 15:54:53",
                MODIFY_TIME: "2024-03-22 15:54:53",
              },
              {
                COUNT: 204,
                DATE: "2024-03-22 00:00:00",
                type: 0,
                ID: "572a463e-3e40-4374-b9de-e0616d2c7602",

                CREATE_TIME: "2024-03-23 15:54:54",
                MODIFY_TIME: "2024-03-23 15:54:54",
              },
              {
                COUNT: 307,
                DATE: "2024-03-22 00:00:00",
                type: 1,
                ID: "d9208912-e8d2-4295-a4fb-92fe6ebd1144",

                CREATE_TIME: "2024-03-23 15:54:54",
                MODIFY_TIME: "2024-03-23 15:54:54",
              },
              {
                COUNT: 196,
                DATE: "2024-03-23 00:00:00",
                type: 0,
                ID: "eeb04ad5-11e4-4853-b07b-d406f1d1bdcf",

                CREATE_TIME: "2024-03-24 15:54:53",
                MODIFY_TIME: "2024-03-24 15:54:53",
              },
              {
                COUNT: 270,
                DATE: "2024-03-23 00:00:00",
                type: 1,
                ID: "08df6b62-c7ff-4c24-9eb4-2db3335dc6b5",

                CREATE_TIME: "2024-03-24 15:54:53",
                MODIFY_TIME: "2024-03-24 15:54:53",
              },
              {
                COUNT: 265,
                DATE: "2024-03-24 00:00:00",
                type: 1,
                ID: "ad5e8ec3-d2eb-4b6e-a23b-225d57868a74",

                CREATE_TIME: "2024-03-25 15:54:54",
                MODIFY_TIME: "2024-03-25 15:54:54",
              },
              {
                COUNT: 183,
                DATE: "2024-03-24 00:00:00",
                type: 0,
                ID: "d306b920-41d4-4877-a597-cf76aaf11209",

                CREATE_TIME: "2024-03-25 15:54:54",
                MODIFY_TIME: "2024-03-25 15:54:54",
              },
              {
                COUNT: 307,
                DATE: "2024-03-25 00:00:00",
                type: 1,
                ID: "0fed3ab1-b153-4f2d-813b-32d79d1a2f75",

                CREATE_TIME: "2024-03-26 15:54:53",
                MODIFY_TIME: "2024-03-26 15:54:53",
              },
              {
                COUNT: 185,
                DATE: "2024-03-25 00:00:00",
                type: 0,
                ID: "103028e8-bcaf-4f4d-82b3-53908ad80086",

                CREATE_TIME: "2024-03-26 15:54:53",
                MODIFY_TIME: "2024-03-26 15:54:53",
              },
              {
                COUNT: 186,
                DATE: "2024-03-26 00:00:00",
                type: 0,
                ID: "18a9775e-6f9c-4e07-9528-80a30284e7e8",

                CREATE_TIME: "2024-03-27 15:54:53",
                MODIFY_TIME: "2024-03-27 15:54:53",
              },
              {
                COUNT: 304,
                DATE: "2024-03-26 00:00:00",
                type: 1,
                ID: "1a865fec-6e16-4f05-bb92-d91ecf7ec113",

                CREATE_TIME: "2024-03-27 15:54:53",
                MODIFY_TIME: "2024-03-27 15:54:53",
              },
              {
                COUNT: 207,
                DATE: "2024-03-27 00:00:00",
                type: 0,
                ID: "d6178a36-3d88-4c9b-914e-e15099d14585",

                CREATE_TIME: "2024-03-28 15:54:53",
                MODIFY_TIME: "2024-03-28 15:54:53",
              },
              {
                COUNT: 294,
                DATE: "2024-03-27 00:00:00",
                type: 1,
                ID: "6fe4b031-140f-4b07-b260-7448ccc221ef",

                CREATE_TIME: "2024-03-28 15:54:53",
                MODIFY_TIME: "2024-03-28 15:54:53",
              },
              {
                COUNT: 202,
                DATE: "2024-03-28 00:00:00",
                type: 0,
                ID: "261bd85b-409e-4270-a5a0-428179af465b",

                CREATE_TIME: "2024-03-29 15:54:54",
                MODIFY_TIME: "2024-03-29 15:54:54",
              },
              {
                COUNT: 301,
                DATE: "2024-03-28 00:00:00",
                type: 1,
                ID: "bc62a9da-6ba4-415f-80dd-3098b683acd0",

                CREATE_TIME: "2024-03-29 15:54:54",
                MODIFY_TIME: "2024-03-29 15:54:54",
              },
              {
                COUNT: 188,
                DATE: "2024-03-29 00:00:00",
                type: 0,
                ID: "c2ce0ab6-e886-4949-b9e1-03e372327626",

                CREATE_TIME: "2024-03-30 15:54:54",
                MODIFY_TIME: "2024-03-30 15:54:54",
              },
              {
                COUNT: 292,
                DATE: "2024-03-29 00:00:00",
                type: 1,
                ID: "2908af15-44dd-4638-ad8b-5b52aa124bec",

                CREATE_TIME: "2024-03-30 15:54:54",
                MODIFY_TIME: "2024-03-30 15:54:54",
              },
              {
                COUNT: 191,
                DATE: "2024-03-30 00:00:00",
                type: 0,
                ID: "176bb95d-ff69-456c-b513-40b7f366d5bd",

                CREATE_TIME: "2024-03-31 15:54:54",
                MODIFY_TIME: "2024-03-31 15:54:54",
              },
              {
                COUNT: 294,
                DATE: "2024-03-30 00:00:00",
                type: 1,
                ID: "345b369c-b972-4e67-b29d-b5f213f4d587",

                CREATE_TIME: "2024-03-31 15:54:54",
                MODIFY_TIME: "2024-03-31 15:54:54",
              },
              {
                COUNT: 191,
                DATE: "2024-03-31 00:00:00",
                type: 0,
                ID: "bfd345e2-3927-4cb6-96eb-e65f5344fe82",

                CREATE_TIME: "2024-04-01 15:54:54",
                MODIFY_TIME: "2024-04-01 15:54:54",
              },
              {
                COUNT: 288,
                DATE: "2024-03-31 00:00:00",
                type: 1,
                ID: "590f5ef6-08c7-4523-8f98-5afec6c02c72",

                CREATE_TIME: "2024-04-01 15:54:54",
                MODIFY_TIME: "2024-04-01 15:54:54",
              },
              {
                COUNT: 399,
                DATE: "2024-04-01 00:00:00",
                type: 1,
                ID: "80eb33a7-a811-49ea-aaae-b560e9b5d861",

                CREATE_TIME: "2024-04-02 15:54:55",
                MODIFY_TIME: "2024-04-02 15:54:55",
              },
              {
                COUNT: 198,
                DATE: "2024-04-01 00:00:00",
                type: 0,
                ID: "7f595016-1fc9-4be0-b0b1-ccaadf400f4a",

                CREATE_TIME: "2024-04-02 15:54:55",
                MODIFY_TIME: "2024-04-02 15:54:55",
              },
              {
                COUNT: 390,
                DATE: "2024-04-02 00:00:00",
                type: 1,
                ID: "410bae9f-8811-48bc-b063-6b50c6b7988c",

                CREATE_TIME: "2024-04-03 15:54:55",
                MODIFY_TIME: "2024-04-03 15:54:55",
              },
              {
                COUNT: 214,
                DATE: "2024-04-02 00:00:00",
                type: 0,
                ID: "ba28acd4-f7b6-4fc8-b37e-a09c272dda92",

                CREATE_TIME: "2024-04-03 15:54:55",
                MODIFY_TIME: "2024-04-03 15:54:55",
              },
              {
                COUNT: 237,
                DATE: "2024-04-03 00:00:00",
                type: 0,
                ID: "7c9e488e-9d76-439d-bf4a-892e9997b425",

                CREATE_TIME: "2024-04-04 15:54:55",
                MODIFY_TIME: "2024-04-04 15:54:55",
              },
              {
                COUNT: 312,
                DATE: "2024-04-03 00:00:00",
                type: 1,
                ID: "45b9f8ae-e0c0-4113-b822-b7f0ecdcd8ce",

                CREATE_TIME: "2024-04-04 15:54:55",
                MODIFY_TIME: "2024-04-04 15:54:55",
              },
              {
                COUNT: 197,
                DATE: "2024-04-04 00:00:00",
                type: 0,
                ID: "b37526da-3461-4e2a-a79d-eadb9a523512",

                CREATE_TIME: "2024-04-05 15:54:55",
                MODIFY_TIME: "2024-04-05 15:54:55",
              },
              {
                COUNT: 254,
                DATE: "2024-04-04 00:00:00",
                type: 1,
                ID: "03e3017c-b5c0-4e1a-8b32-ebd8fd28dcf0",

                CREATE_TIME: "2024-04-05 15:54:55",
                MODIFY_TIME: "2024-04-05 15:54:55",
              },
              {
                COUNT: 266,
                DATE: "2024-04-05 00:00:00",
                type: 1,
                ID: "d8ea24f9-3697-4af3-b406-4f5ae3c44586",
              },
              {
                COUNT: 174,
                DATE: "2024-04-05 00:00:00",
                type: 0,
                ID: "14a421a8-6485-4e1e-9ca0-1e40c32b0579",
              },
              {
                COUNT: 168,
                DATE: "2024-04-06 00:00:00",
                type: 0,
                ID: "0208eb4a-4da5-4229-af0b-27c1dfc66102",

                CREATE_TIME: "2024-04-07 15:54:55",
                MODIFY_TIME: "2024-04-07 15:54:55",
              },
              {
                COUNT: 292,
                DATE: "2024-04-06 00:00:00",
                type: 1,
                ID: "4849991c-cb1e-4780-a558-669fb92ed16e",

                CREATE_TIME: "2024-04-07 15:54:55",
                MODIFY_TIME: "2024-04-07 15:54:55",
              },
              {
                COUNT: 171,
                DATE: "2024-04-07 00:00:00",
                type: 0,
                ID: "69efae5a-9ac8-4627-a6da-a786706e1b63",

                CREATE_TIME: "2024-04-08 15:54:55",
                MODIFY_TIME: "2024-04-08 15:54:55",
              },
              {
                COUNT: 318,
                DATE: "2024-04-07 00:00:00",
                type: 1,
                ID: "3cb6beb3-6bd9-4b39-84ab-420f407b3b8d",

                CREATE_TIME: "2024-04-08 15:54:55",
                MODIFY_TIME: "2024-04-08 15:54:55",
              },
              {
                COUNT: 314,
                DATE: "2024-04-08 00:00:00",
                type: 1,
                ID: "ac34c873-2b7b-43a2-9243-9935817a45db",

                CREATE_TIME: "2024-04-09 15:54:55",
                MODIFY_TIME: "2024-04-09 15:54:55",
              },
              {
                COUNT: 186,
                DATE: "2024-04-08 00:00:00",
                type: 0,
                ID: "c5d4e5fc-9f0b-4726-a739-7aa487c82174",

                CREATE_TIME: "2024-04-09 15:54:55",
                MODIFY_TIME: "2024-04-09 15:54:55",
              },
              {
                COUNT: 307,
                DATE: "2024-04-09 00:00:00",
                type: 1,
                ID: "bc75f415-bacb-45a1-814b-ac28f4f7cb2e",

                CREATE_TIME: "2024-04-10 15:54:56",
                MODIFY_TIME: "2024-04-10 15:54:56",
              },
              {
                COUNT: 207,
                DATE: "2024-04-09 00:00:00",
                type: 0,
                ID: "2590bf04-f29a-4450-be5b-e1995bae8b6d",

                CREATE_TIME: "2024-04-10 15:54:56",
                MODIFY_TIME: "2024-04-10 15:54:56",
              },
              {
                COUNT: 199,
                DATE: "2024-04-10 00:00:00",
                type: 0,
                ID: "43fe7ecc-b588-4f50-987b-f58efbc8b455",

                CREATE_TIME: "2024-04-11 15:54:56",
                MODIFY_TIME: "2024-04-11 15:54:56",
              },
              {
                COUNT: 281,
                DATE: "2024-04-10 00:00:00",
                type: 1,
                ID: "f503a544-4f3d-4c60-8b49-8fc90ec9359c",

                CREATE_TIME: "2024-04-11 15:54:56",
                MODIFY_TIME: "2024-04-11 15:54:56",
              },
            ];
          }
          for (let i = 0; i < ret.Data.length; i++) {
            if (ret.Data[i].type == 0) {
              this.state.activeNums.push(ret.Data[i].COUNT);
              this.state.dates.push(moment(ret.Data[i].DATE).format("MM-DD"));
            } else {
              this.state.loginNums.push(ret.Data[i].COUNT);
            }
          }
          if (this.state.totalActiveUsers == 0) {
            this.state.totalActiveUsers = ret.Data.reverse().find(
              (item) => item.type === 0
            )?.COUNT;
            //this.state.totalActiveUsers = 326;
          }
          this.state.dates.push(moment().format("MM/DD"));
          this.state.loginNums.push(todayCount);
          let chart1s = document.getElementById("chart1");
          console.log(this.state.dates);
          if (chart1s) {
            let myChart = echarts.init(chart1s);
            myChart.on("click", (params) => {
              this.state.searchMinTime =
                moment().format("YYYY") + "-" + params.name + " 00:00:00";
              this.state.searchMaxTime = moment(this.state.searchMinTime)
                .add(1, "day")
                .format("YYYY-MM-DD 00:00:00");
              if (params.seriesName == "活跃用户数") {
                this.state.totalActiveUsers = params.value;
              } else {
                this.state.totalActiveUsers = ret.Data.find(
                  (item) =>
                    item.DATE == this.state.searchMinTime && item.type == 0
                ).COUNT;
              }
              this.getBaseInfoData();
            });
            let color = [
              "#36CE9E",
              "#0090FF",
              "#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;
            };
            myChart.setOption({
              color: color,
              grid: {
                left: "5%",
                right: "5%",
              },
              legend: {
                left: "center",
                align: "left",
                bottom: "2%",
                textStyle: {
                  color: "#000",
                },
                itemWidth: 10,
                itemHeight: 10,
              },
              title: {
                text: "系统活跃用户数走势分析",
                left: "center",
                top: "2%",
              },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "shadow",
                },
              },
              xAxis: {
                type: "category",
                data: this.state.dates,
                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: "活跃用户数",
                  data: this.state.activeNums,
                  type: "line",
                  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: "登录用户数",
                  data: this.state.loginNums,
                  type: "line",
                  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,
                    },
                  },
                },
              ],
            });
          }
        }
      },
    });
  };
  onChange = (type, value) => {
    this.setState({
      [type]: value,
    });
  };
  render() {
    return (
      <div
        style={{
          backgroundColor: "white",
          width: "1200px",
          top: "0",
          bottom: "0",
          left: "0",
          right: "0",
          margin: "auto",
          borderStyle: "solid",
          borderColor: "#ccc",
          borderWidth: "1px",
        }}
      >
        <h1
          style={{ textAlign: "center", marginTop: "30px", fontWeight: "bold" }}
        >
          用户登录系统统计分析
        </h1>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            marginTop: "20px",
            //   marginBottom: "20px",
          }}
        >
          <div className={styles.menuPie}>
            <li>
              总用户数
              <br />
              <div className={styles.dataStyle}>{this.state.totalUsers}</div>
            </li>
            <Divider
              type="vertical"
              style={{ width: "1px", height: "70px", margin: "9px 0px" }}
            />
            <li>
              活跃用户数
              <br />
              <div className={styles.dataStyle1}>
                {this.state.totalActiveUsers}
              </div>
            </li>
            <Divider
              type="vertical"
              style={{ width: "1px", height: "70px", margin: "9px 0px" }}
            />
            <li>
              用户活跃度
              <br />
              <div className={styles.dataStyle3}>
                {(
                  (this.state.totalActiveUsers / this.state.totalUsers) *
                  100
                ).toFixed(0) + "%"}
              </div>
            </li>
          </div>
        </div>

        <Row gutter={10} style={{ marginTop: "14px" }}>
          <Col span={1}></Col>
          <Col span={22}>
            <div
              // className="dashboard-div-style"
              style={{
                // borderRadius: "10px",
                backgroundColor: "white",
                // boxShadow: "0px 0px 10px rgba(0,0,0,.15)",
                border: "1px solid #e7e6e4",
              }}
            >
              <div id="chart1" style={{ width: "100%", height: "400px" }}></div>
            </div>
          </Col>
          <Col span={1}></Col>
        </Row>
        <hr
          style={{
            border: "1px dashed #ccc",
            marginBottom: "20px",
            marginTop: "20px",
          }}
        ></hr>
        <Row
          gutter={10}
          style={{
            marginTop: "20px",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <Col
            span={10}
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
            }}
          >
            <DatePicker
              allowClear={true}
              value={moment(this.state.searchMinTime, "YYYY-MM-DD")}
              onChange={(evt, ds) => this.onChange("searchMinTime", ds)}
              style={{ width: "70%", padding: "10px" }}
            />
            -
            <DatePicker
              allowClear={true}
              value={moment(this.state.searchMaxTime, "YYYY-MM-DD")}
              onChange={(evt, ds) => this.onChange("searchMaxTime", ds)}
              style={{ width: "70%", padding: "10px" ,marginRight:'20px'}}
            />
            {/* 组织:
              <DropDownPagination inputDataApi={'FM/Department/OrderPaged'} fieldName={'Nav_Department.NAME'}
                onSelect={onSelectDepartment} onFilter={({ params }) => {
                  params.OrderType = 1
                  params.OrgId = this.state.data ? this.state.data.ORG_ID : this.props.login.OrgId
                }} /> */}
            {/* <Select
              showSearch
              value={this.state.selectUser}
              style={{ width: "90%", padding: "10px" }}
              onChange={(value) => this.setState({ selectUser: value })}
              filterOption={(input, option) =>
                option.props.children
                  .toLowerCase()
                  .indexOf(input.toLowerCase()) >= 0
              }
            >
              {this.state.assessUserList
                ? this.state.assessUserList.map((d) => (
                    <Option key={d.ID} value={d.ID} label={d.NAME}>
                      {d.NAME}
                    </Option>
                  ))
                : ""}
            </Select> */}
            <Button type={"primary"} onClick={() => this.handleClick()}>
              查询
            </Button>
          </Col>
        </Row>
        <Row
          gutter={10}
          style={{
            marginTop: "10px",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <Col
            span={24}
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              width: "1100px",
            }}
          >
            <Table
              style={{
                width: "100%",
                // marginLeft: "30px",
                textAlign: "center",
                marginBottom: "30px",
              }}
              dataSource={this.state.retData}
              columns={this.state.columns1}
              pagination={true}
              bordered
              loading={this.state.showLoading}
              size="small"
              rowKey="1"
            />
          </Col>
        </Row>
        <br />
      </div>
    );
  }
}
export default connect(({ login, app }) => ({ login, app }))(BI005LoginRecord);
