/* eslint-disable no-unused-expressions */
/* eslint-disable func-names */
/* eslint-disable object-shorthand */
import React, { useState, useEffect } from 'react';
import { USER_MODE } from '@/utils/constants';
import {
  Spin,
  notification,
  Tag,
  Divider,
  Tooltip,
  Table,
  Progress,
  Select,
  Dropdown,
  Menu,
  Empty,
  Tabs,
} from 'antd';
import dengPao from '@/assets/images/icons/dengpao.png';
import icon from '@/assets/images/icons/icon.png';
import people from '@/assets/images/icons/pepole.png';
import people1 from '@/assets/images/icons/项目成员.png';
import people2 from '@/assets/images/icons/角色分类.png';
import people3 from '@/assets/images/icons/站点.png';
import data from '@/assets/images/icons/数据量.png';
import table1 from '@/assets/images/icons/table1.png';
import table2 from '@/assets/images/icons/table2.png';
import table3 from '@/assets/images/icons/table3.png';
import table4 from '@/assets/images/icons/table4.png';
import flow from '@/assets/images/icons/flow.png';
import flow1 from '@/assets/images/icons/flow1.png';
import flow2 from '@/assets/images/icons/flow2.png';
import web from '@/assets/images/icons/电脑.png';
import mobile from '@/assets/images/icons/手机.png';
import bubble from '@/assets/images/icons/三角形.png';
import abnormalRed from '@/assets/images/icons/异常红色.png';
import abnormalGreen from '@/assets/images/icons/异常绿色.png';
import abnormalYellow from '@/assets/images/icons/异常黄色.png';
import pipe from '@/assets/images/icons/管网.png';
import update from '@/assets/images/icons/更新.png';
import map1 from '@/assets/images/icons/地图1.png';
import power from '@/assets/images/icons/权限2.png';
import map2 from '@/assets/images/icons/地图.png';
import { useHistory } from 'react-router-dom';
import moment from 'moment';
import {
  publishGetSolutionList,
  getDataBaseConfigNew,
  connectionTest,
  changeSolution,
} from '@/services/database/api';
import ReactEcharts from 'echarts-for-react';
import { GetBasicInfo, GetGateWay } from '@/services/hostmanager/hostmanager';
import { GetWebSiteConfig } from '@/services/gis/gis';
import { GetOMSDashboard, GetWayPages } from '@/services/homePage/api';
import {
  GetVectorService,
  GetMaplayerByTerminalType,
  getProductList,
} from '@/services/webConfig/api';
import classnames from 'classnames';
import styles from './index.less';
import { GetWayNumberofcalls } from '@/services/logCenter/api';
const { Option } = Select;
const { TabPane } = Tabs;

const HomePage = () => {
  const [currentData, setCurrentData] = useState(''); // 解决方案的值
  const [currentList, setCurrentList] = useState([]);
  const [currentSiteInfo, setCurrentSiteInfo] = useState('-'); // 当前站点编号
  const [dataBase, setDataBase] = useState([]); // 下拉数组
  const [getWayConfig, setGetWayConfig] = useState(); // 网关状态
  const [loading, setLoading] = useState(false);
  const [website, setWebsite] = useState([]);
  const [keepTableList, setKeepTableList] = useState([]);
  const [keepTableList1, setKeepTableList1] = useState([]);
  const [keepTableList2, setKeepTableList2] = useState([]);
  const [tip, setTip] = useState([]);
  const [dashboardData, setDashboardData] = useState({});
  const [pipeArr, setPipeArr] = useState();
  const [scheme, setScheme] = useState();
  const history = useHistory();
  const [state, setState] = useState('');
  const [product, setProduct] = useState([]);
  const [limitsWeb, setLimitsWeb] = useState(0);
  const [limitsPhone, setLimitsPhone] = useState(0);
  const [mapConfig, setMapConfig] = useState();
  const [flag, setFlag] = useState(0);
  const [show, setShow] = useState();
  const [tableData1, setTableData1] = useState([]);
  const [loadingCenter, setLoadingCenter] = useState(false);
  const [loadingApi, setLoadingApi] = useState(false);
  const [loadingDatabase, setLoadingDatabase] = useState(false);
  const [loadingProduct, setLoadingProduct] = useState(false);
  const [allTime, setAllTime] = useState([
    moment().startOf('month'),
    moment(new Date(), 'YYYY-MM-DD HH:mm:ss'),
  ]);
  const [activeKey, setActiveKey] = useState('1');
  const [title, setTitle] = useState('最近10条异常API');

  useEffect(() => {
    setLoading(true);
    let user = sessionStorage.getItem('userType');
    if (user === USER_MODE.SUPER) {
      setShow(true);
    } else {
      setShow(false);
    }
    getDataBaseConfig();
    getOMSDashboard();
    newGetSolution();
    getSiteCode();
    getGateWay();
    pipeNetwork();
    getMapScheme();
    getLogMessage();
    onGetProduct();
    getLimits();
    getMapLayer();
    getApiCount();
  }, [flag]);

  const getApiCount = () => {
    GetWayNumberofcalls({
      pageIndex: 1,
      pageSize: 10,
      dateFrom: allTime[0].format('YYYY-MM-DD HH:mm:ss'),
      dateTo: allTime[1].format('YYYY-MM-DD HH:mm:ss'),
    }).then(resData => {
      if (resData.code === 0) {
        setTableData1(resData.data.listdata);
      } else {
        setTableData1([]);
        notification.error({
          message: '提示',
          duration: 3,
          description: resData.msg,
        });
      }
    });
  };

  const getLimits = () => {
    GetMaplayerByTerminalType({ terminalType: 'web', isBaseMap: false }).then(res => {
      if (res.code === '0') {
        let length = res.data.optionalLayer.layers.length;
        setLimitsWeb(length);
      } else {
        setLimitsWeb(0);
      }
    });
    GetMaplayerByTerminalType({ terminalType: 'phone', isBaseMap: false }).then(res => {
      if (res.code === '0') {
        let length = res.data.optionalLayer.layers.length;
        setLimitsPhone(length);
      } else {
        setLimitsPhone(0);
      }
    });
  };
  // 获取产品列表
  const onGetProduct = () => {
    setLoadingProduct(true);
    getProductList().then(res => {
      setLoadingProduct(false);
      if (res.code === 0) {
        let arr = [];
        res.data.AllProducts.forEach(i => {
          if (i.IsUsed) {
            arr.push(i.ProductName);
          }
        });
        setProduct(arr);
      } else {
        setProduct([]);
      }
    });
  };

  const getMapLayer = () => {
    GetWebSiteConfig({ client: 'sandbox' }).then(res => {
      if (res.code === '0') {
        let item = res.data.find(i => i.layerType === 'PipenetLayer');
        if (res.data.length > 0 && item) {
          setMapConfig(true);
        } else {
          setMapConfig(false);
        }
      }
    });
  };

  const getOMSDashboard = () => {
    setLoadingCenter(true);
    GetOMSDashboard()
      .then(res => {
        setLoadingCenter(false);
        if (res.code === 0) {
          let arr = [];
          res.data.Web?.forEach(i => {
            arr.push({ type: 'Web', value: i });
          });
          res.data.Mobile?.forEach(i => {
            arr.push({ type: 'Mobile', value: i });
          });
          setWebsite(arr);
          let newTipList = [];
          res.data.用户登录统计?.forEach((i, j) => {
            let obj = {
              xAxis: j,
              yAxis: i.登录次数,
              symbol:
                'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAdCAYAAADGgB7AAAAAAXNSR0IArs4c6QAAAe5JREFUWEftls9L22AYx5/nzY9WTWt/iKYwxjL0JJt2Nw8iHQMPUrzun9hfMOgm7C8ZOzrYZRdtKjvNmx4mCImt2sRCxTZV19/NK2/HxtYhJulGPSS3kO/zPJ/3k4cQBADIFvNPEe00IPLsfrQXmhdW4z2qpvZMAP5rYiIkckhGywQAtXYTqq3GR1QN/fVDKfJudjI+cigG0KM2fDk77qBqHr1RpOhbJRy9F2AMImfmwQdz8zp8Y25s+Tvm1pZvzDfmxYDbGv875htza8Bt3t8xT8ay5lFGkSIbj8Mxt/X/JU8phZ3SsY3bp9q6JAY+sV9rguhomEAIhITAnVmbUrDazTtzvwdqrSYUrqy9Psl2UX+FAGuAyDnpQgCT87Hp+PTYxK1xdvKDahnK9esDilhy0pdlkEIZRCHjTNFA1x2jsAhIc09iM9F4cPyvmRQADqvnUKpf5UiHrKUUxZ02Buj0JIO5rKEt8chtLcRlKRIY++OxVruA02trt8dLL1Zl+buXGZ7B2DDV0J9zyH1OTiWCYfHHzuUvK2xH9rkOSaUUxfIC1X+lXgt/1qlmPi0i2VycSoiVZh30y8phl6crq/JseZjeQ4Ox4VlTfykg/6Fr94oE7OXUgzljGKh/YuyXuRMtzQeEbyvyo8KwUKz+BiST/d01eWojAAAAAElFTkSuQmCC',
            };
            newTipList.push(obj);
          });
          setTip(newTipList);
          let echartsData = res.data.用户登录统计;
          echartsData?.map(i => {
            if (i.月份 !== 1 && i.月份 !== 12) {
              let str = i.日期.split('-')[1];
              i.日期 = `${str}月`;
            }
          });
          res.data.用户登录统计 = echartsData;
          setDashboardData(res.data);
        }
      })
      .catch(err => {
        setLoadingCenter(false);
        message.error(err);
      });
  };

  // 获取当前解决方案
  const newGetSolution = () => {
    publishGetSolutionList({
      _version: 9999,
      _dc: new Date().getTime(),
    })
      .then(res => {
        if (res.code === 0) {
          const { currentSolution, solutions } = res.data;
          setCurrentData(currentSolution);
          setCurrentList(solutions);
        } else {
          setCurrentData('');
          setCurrentList([]);
        }
      })
      .finally(() => {});
  };

  // 获取数据库连接配置信息
  const getDataBaseConfig = () => {
    setLoadingDatabase(true);
    getDataBaseConfigNew().then(resnew => {
      let res = resnew.data;
      setDataBase(res);
      onCheck(res);
    });
  };

  // 测试连接
  const onCheck = val => {
    let str = val ? val : dataBase;
    if (!val) {
      setLoadingDatabase(true);
    }

    connectionTest({
      ip: str.ip,
      dbName: str.dbName,
      userName: str.userName,
      password: str.password,
    })
      .then(res => {
        setLoadingDatabase(false);
        if (res.code === 0) {
          setState(res.data);
          if (!val) {
            notification.success({
              message: '提示',
              duration: 3,
              description: '连接成功',
            });
          }
        } else {
          setState(false);
          notification.error({
            message: '提示',
            duration: 15,
            description: res.msg,
          });
        }
      })
      .catch(err => {});
  };

  // 获取站点编号
  const getSiteCode = () => {
    GetBasicInfo().then(res => {
      if (res.code === 0) {
        setCurrentSiteInfo(res.data);
      } else {
        setCurrentSiteInfo('-');
      }
    });
  };

  // 获取网关状态
  const getGateWay = () => {
    GetGateWay().then(res => {
      if (res.code === 0) {
        setGetWayConfig(res.data);
      } else {
        setGetWayConfig();
      }
    });
  };

  const getMapScheme = () => {
    GetMaplayerByTerminalType({ terminalType: 'scheme', isBaseMap: false }).then(res => {
      if (res.code === '0') {
        setScheme(res.data.length);
      } else {
        setScheme('-');
      }
    });
  };
  // 获取管网数量
  const pipeNetwork = () => {
    GetVectorService().then(res => {
      if (res.code === 0) {
        let num = res.data.VectorList.length;
        setPipeArr(num);
      } else {
        setPipeArr('-');
      }
    });
  };

  // 获取日志表格数据
  const getLogMessage = () => {
    setLoadingApi(true);
    GetWayPages({
      pageIndex: 1,
      pageSize: 10,
      dateFrom: allTime[0].format('YYYY-MM-DD HH:mm:ss'),
      dateTo: allTime[1].format('YYYY-MM-DD HH:mm:ss'),
      info: '',
      isSuccess: false,
    }).then(res => {
      setLoadingApi(false);
      if (res.code === 0) {
        setKeepTableList(res.data.listData.list);
        setKeepTableList1(res.data.consumData);
        setKeepTableList2(res.data.countData.listdata);
      } else {
        setKeepTableList([]);
        setKeepTableList1([]);
        setKeepTableList2([]);
        notification.error({
          message: '提示',
          duration: 3,
          description: res.msg,
        });
      }
    });
  };

  // 切换解决方案
  const changeProject = () => {
    history.push(`/solution`);
  };

  // 跳转数据中心
  const toDataCenter = () => {
    history.push(`/dbm/dbInit`);
  };

  // 跳转机构管理
  const toUserCenter = () => {
    history.push(`/authority/user`);
  };

  // 跳转表/字段
  const toTableCenter = () => {
    history.push(`/biz/account/table`);
  };

  // 跳转表/字段
  const toFlowCenter = () => {
    history.push(`/biz/workflow/center`);
  };

  // 跳转宿主管理
  const toHostCenter = () => {
    history.push(`/platform/host`);
  };

  // 跳转GIS平台
  const toGISCenter = () => {
    history.push(`/platform/gis/map`);
  };

  // 跳转日志中心
  const toLogCenter = () => {
    history.push(`/system/logCenter`);
  };

  // 登录日志
  const loginLog = () => {
    history.push(`/system/loginLog`);
  };

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      top: '20',
      left: '0%',
      right: '0%',
      bottom: '10',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: dashboardData.用户登录统计?.map(i => i.日期),
        axisTick: {
          alignWithLabel: true,
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: '#DBE9FB',
          },
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          color: '#666666',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#DBE9FB',
          },
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          formatter: '{value} ',
          color: '#999999',
        },
        axisLine: {
          show: true,
          lineStyle: {
            type: 'solid',
            color: '#DBE9FB',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
          },
        },
      },
    ],
    series: [
      {
        name: '登录次数',
        type: 'bar',
        barWidth: '20%',
        data: dashboardData.用户登录统计?.map(i => i.登录次数),
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#46C705', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#7BE645', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        markPoint: {
          data: tip,
          symbolSize: [34, 28],
          symbolOffset: [0, '-70%'],
          label: {
            show: true,
            formatter: function(param) {
              return param.data.yAxis;
            },
            textStyle: {
              fontWeight: 400,
              fontSize: 12,
              color: 'black',
            },
          },
        },
      },
    ],
  };

  const columns = [
    {
      title: '事态',
      dataIndex: 'errorMsg',
      key: 'errorMsg',
      width: 100,
      align: 'center',
      render: record => {
        if (record) {
          return (
            <Progress className={styles.processRed} percent={100} steps={5} showInfo={false} />
          );
        }
        return (
          <Progress className={styles.processGreen} percent={100} steps={5} showInfo={false} />
        );
      },
    },
    {
      title: '接口名称',
      dataIndex: 'path',
      key: 'path',
      width: 300,
      fixed: 'left',
      onCell: () => ({
        style: {
          maxWidth: 400,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    {
      title: '调用时间',
      dataIndex: 'requestDate',
      key: 'requestDate',
      width: 140,
      align: 'center',
    },
    {
      title: '调用结果',
      dataIndex: 'errorMsg',
      key: 'errorMsg',
      width: 100,
      align: 'center',
      render: record => {
        if (record) {
          return (
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div
                style={{
                  width: '6px',
                  height: '6px',
                  background: '#FF2929',
                  borderRadius: '50%',
                  marginRight: '3px',
                }}
              />
              <Tooltip title={record}>
                <span style={{ color: 'red', fontWeight: 'bold' }}>失败</span>
              </Tooltip>
            </div>
          );
        }

        return (
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div
              style={{
                width: '6px',
                height: '6px',
                background: '#46C705',
                borderRadius: '50%',
                marginRight: '3px',
              }}
            />
            <span style={{ color: '#6ecd3d', fontWeight: 'bold' }}>成功</span>
          </div>
        );
      },
    },
    // {
    //   title: '返回信息',
    //   dataIndex: 'message',
    //   key: 'message',
    //   onCell: () => ({
    //     style: {
    //       maxWidth: 400,
    //       overflow: 'hidden',
    //       whiteSpace: 'nowrap',
    //       textOverflow: 'ellipsis',
    //       cursor: 'pointer',
    //     },
    //   }),
    //   render: record => (
    //     <Tooltip placement="topLeft" title={record}>
    //       {record}
    //     </Tooltip>
    //   ),
    // },
    {
      title: '请求方法',
      dataIndex: 'method',
      key: 'method',
      width: 80,
      align: 'center',
      render: record => {
        if (record === 'GET') {
          return (
            <Tag color="orange" style={{ width: '44.44px' }}>
              GET
            </Tag>
          );
        }
        return <Tag color="green">POST</Tag>;
      },
    },
    {
      title: '耗时/ms',
      dataIndex: 'consumerTime',
      key: 'consumerTime',
      align: 'center',
      width: 80,
    },
    {
      title: '返回体大小/byte',
      dataIndex: 'responseSize',
      key: 'responseSize',
      width: 130,
      align: 'center',
    },
    {
      title: '返回状态码',
      dataIndex: 'result',
      key: 'result',
      width: 100,
      align: 'center',
    },
  ];

  const columns1 = [
    {
      title: '耗时排名',
      width: 60,
      align: 'center',
      render: (text, record, index) => {
        if (index === 0) {
          return (
            <div className={styles.sort} type={index + 1}>
              {index + 1}
            </div>
          );
        } else if (index === 1) {
          return (
            <div className={styles.sort} type={index + 1}>
              {index + 1}
            </div>
          );
        } else if (index === 2) {
          return (
            <div className={styles.sort} type={index + 1}>
              {index + 1}
            </div>
          );
        } else {
          return <span>{index + 1}</span>;
        }
      },
    },
    {
      title: '接口名称',
      dataIndex: 'path',
      key: 'path',
      width: 300,
      fixed: 'left',
      onCell: () => ({
        style: {
          maxWidth: 400,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    {
      title: '调用时间',
      dataIndex: 'requestDate',
      key: 'requestDate',
      width: 140,
      align: 'center',
    },
    {
      title: '请求方法',
      dataIndex: 'method',
      key: 'method',
      width: 80,
      align: 'center',
      render: record => {
        if (record === 'GET') {
          return (
            <Tag color="orange" style={{ width: '44.44px' }}>
              GET
            </Tag>
          );
        }
        return <Tag color="green">POST</Tag>;
      },
    },
    {
      title: '耗时/ms',
      dataIndex: 'consumerTime',
      key: 'consumerTime',
      align: 'center',
      width: 80,
    },
    {
      title: '返回体大小/byte',
      dataIndex: 'responseSize',
      key: 'responseSize',
      width: 130,
      align: 'center',
    },
    {
      title: '返回状态码',
      dataIndex: 'result',
      key: 'result',
      width: 100,
      align: 'center',
    },
  ];

  const columns2 = [
    {
      title: '调用频次排名',
      width: 80,
      align: 'center',
      render: (text, record, index) => {
        if (index === 0) {
          return (
            <div className={styles.sort} type={index + 1}>
              {index + 1}
            </div>
          );
        } else if (index === 1) {
          return (
            <div className={styles.sort} type={index + 1}>
              {index + 1}
            </div>
          );
        } else if (index === 2) {
          return (
            <div className={styles.sort} type={index + 1}>
              {index + 1}
            </div>
          );
        } else {
          return <span>{index + 1}</span>;
        }
      },
    },
    {
      title: '接口名称',
      dataIndex: 'path',
      key: 'path',
      width: 300,
      fixed: 'left',
      onCell: () => ({
        style: {
          maxWidth: 400,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          cursor: 'pointer',
        },
      }),
      render: record => (
        <Tooltip placement="topLeft" title={record}>
          {record}
        </Tooltip>
      ),
    },
    {
      title: '调用次数',
      dataIndex: 'count',
      key: 'count',
      width: 100,
      align: 'center',
    },
  ];

  const onChange = e => {
    setActiveKey(e);
    if (e === '1') {
      setTitle('最近10条异常API');
    } else if (e === '2') {
      setTitle('耗时排名前10的API');
    } else if (e === '3') {
      setTitle('调用频次前10的API');
    }
  };

  return (
    <div className={styles.homePage}>
      <div className={styles.header}>
        <img className={styles.headerImg} src={dengPao} style={{ height: '16px' }} alt="" />
        <span className={styles.headerText}>[解决方案] 您当前使用的解决方案是</span>
        <span className={styles.headerTextBold}>{currentData}</span>
        {show && (
          <span
            className={styles.headerChangeBtn}
            onClick={() => changeProject()}
            style={{ cursor: 'pointer' }}
          >
            去切换 >>
          </span>
        )}
      </div>
      <div className={styles.contentTop}>
        <div className={styles.dataCenter}>
          <Spin tip="Loading..." spinning={loadingDatabase}>
            <div className={styles.content}>
              <div className={styles.dataCenterLabel}>
                <div>服务器IP</div>
                <div>连接数据库</div>
                <div>连接状态</div>
              </div>
              <div className={styles.dataCenterValue}>
                <div>{dataBase?.ip || '-'}</div>
                <div>{dataBase?.dbName || '-'}</div>
                <div className={styles.fontText}>
                  <span
                    className={classnames({
                      [styles.iconBlue]: state,
                      [styles.iconGrey]: !state,
                    })}
                  />
                  {state ? '已接通' : '未接通'}
                  {show && (
                    <Tag
                      color="blue"
                      style={{ marginLeft: '15px', cursor: 'pointer' }}
                      onClick={() => onCheck()}
                    >
                      测试链接
                    </Tag>
                  )}
                </div>
              </div>
            </div>
            {show && (
              <div className={styles.dataCenterFooter}>
                <span onClick={() => toDataCenter()} style={{ cursor: 'pointer' }}>
                  数据中心 <img src={icon} alt="" />
                </span>
              </div>
            )}
          </Spin>
        </div>
        <div className={styles.userCenter}>
          <Spin tip="Loading..." spinning={loadingCenter}>
            <div className={styles.top}>
              <img src={people} alt="" style={{ marginRight: '5px' }} /> 用户总数
              <span className={styles.fontColor}>{dashboardData.用户总数}</span> 个
            </div>
            <Divider style={{ color: '#E3E7EC' }} />
            <div className={styles.center}>
              <div className={styles.item}>
                <img src={people1} alt="" /> 机构数量
                <div>
                  <span className={styles.font}>{dashboardData.机构总数}</span>个
                </div>
              </div>
              <div className={styles.item}>
                <img src={people2} alt="" /> 角色数量
                <div>
                  <span className={styles.font}>{dashboardData.角色总数}</span>个
                </div>
              </div>
              <div className={styles.item}>
                <img src={people3} alt="" /> 站点数量
                <div>
                  <span className={styles.font}>{dashboardData.站点总数}</span>个
                </div>
              </div>
            </div>
            <div className={styles.bottom}>
              <span onClick={() => toUserCenter()} style={{ cursor: 'pointer' }}>
                用户中心 <img src={icon} alt="" />
              </span>
            </div>
          </Spin>
        </div>
        <div className={styles.tableCenter}>
          <Spin tip="Loading..." spinning={loadingCenter}>
            <div className={styles.top}>
              <img src={data} alt="" style={{ marginRight: '5px' }} /> 表单总数
              <span className={styles.fontColor}>{dashboardData.表单总数}</span> 个
            </div>
            <Divider style={{ color: '#E3E7EC' }} />
            <div className={styles.center}>
              <div className={styles.item}>
                <img src={table1} alt="" /> 业务表
                <div>
                  <span className={styles.font}>{dashboardData.业务表}</span>个
                </div>
              </div>
              <div className={styles.item}>
                <img src={table2} alt="" /> 反馈表
                <div>
                  <span className={styles.font}>{dashboardData.反馈表}</span>个
                </div>
              </div>
              <div className={styles.item}>
                <img src={table3} alt="" /> 台账表
                <div>
                  <span className={styles.font}>{dashboardData.台账表}</span>个
                </div>
              </div>
              <div className={styles.item}>
                <img src={table4} alt="" /> 其他表
                <div>
                  <span className={styles.font}>{dashboardData.其他表}</span>个
                </div>
              </div>
            </div>
            <div className={styles.bottom}>
              <span onClick={() => toTableCenter()} style={{ cursor: 'pointer' }}>
                表单中心 <img src={icon} alt="" />
              </span>
            </div>
          </Spin>
        </div>
        <div className={styles.flowCenter}>
          <Spin tip="Loading..." spinning={loadingCenter}>
            <div className={styles.top}>
              <img src={flow} alt="" style={{ marginRight: '5px' }} /> 流程总数
              <span className={styles.fontColor}>{dashboardData.流程数}</span> 个
            </div>
            <Divider style={{ color: '#E3E7EC' }} />
            <div className={styles.center}>
              <div className={styles.item}>
                <img src={flow1} alt="" /> 事件类型
                <div>
                  <span className={styles.font}>{dashboardData.事件类型}</span>个
                </div>
              </div>
              <div className={styles.item}>
                <img src={flow2} alt="" /> 流程分组
                <div>
                  <span className={styles.font}>{dashboardData.流程分组}</span>个
                </div>
              </div>
            </div>
            <div className={styles.bottom}>
              <span onClick={() => toFlowCenter()} style={{ cursor: 'pointer' }}>
                流程中心 <img src={icon} alt="" />
              </span>
            </div>
          </Spin>
        </div>
        <div className={styles.hostCenter}>
          <Spin tip="Loading..." spinning={loadingProduct}>
            <div className={styles.content}>
              <div className={styles.dataCenterLabel}>
                <div>站点编号</div>
                <div>产品授权</div>
                <div>网关状态</div>
              </div>
              <div className={styles.dataCenterValue}>
                <div>{currentSiteInfo}</div>
                <div>
                  <Tooltip title={product.toString()}>
                    <Tag color="purple">{product.length}个</Tag>
                  </Tooltip>
                </div>
                <div className={styles.fontText}>
                  <span
                    className={classnames({
                      [styles.iconGreen]: getWayConfig,
                      [styles.iconGrey]: !getWayConfig,
                    })}
                  />
                  {getWayConfig ? '开启' : '关闭'}
                </div>
              </div>
            </div>
            <div className={styles.dataCenterFooter}>
              <span onClick={() => toHostCenter()} style={{ cursor: 'pointer' }}>
                宿主管理 <img src={icon} alt="" />
              </span>
            </div>
          </Spin>
        </div>
      </div>
      <div className={styles.contentCenter}>
        <div className={styles.application}>
          <Spin tip="Loading..." spinning={loadingCenter}>
            <div className={styles.head}>
              <div className={styles.icon} />
              <span>当前应用</span>
            </div>
            <div className={styles.content}>
              {website?.map(i => {
                if (i.type === 'Web') {
                  return (
                    <div className={styles.contentItem}>
                      <div className={styles.contentLeft}>
                        <img src={web} alt="" />
                        <span className={styles.blueIcon}>{i.type}</span>
                      </div>
                      <div className={styles.contentText}>
                        <Tooltip title={i.value}>{i.value}</Tooltip>
                      </div>
                    </div>
                  );
                }
                return (
                  <div className={styles.contentItem}>
                    <div className={styles.contentLeftGreen}>
                      <img src={mobile} alt="" />
                      <span className={styles.greenIcon}>{i.type}</span>
                    </div>
                    <div className={styles.contentText}>
                      <Tooltip title={i.value}>{i.value}</Tooltip>
                    </div>
                  </div>
                );
              })}
              {website.length === 0 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
            </div>
          </Spin>
        </div>
        <div className={styles.userLogin}>
          <Spin tip="Loading..." spinning={loadingCenter}>
            <div className={styles.head}>
              <div className={styles.headLeft}>
                <div className={styles.icon} />
                <span>用户登录频次统计</span>
              </div>
              <div className={styles.headRight} onClick={() => loginLog()}>
                查看详情 >>
              </div>
            </div>
            <div className={styles.content}>
              {!dashboardData.用户登录统计 && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
              <ReactEcharts style={{ width: '100%', height: '100%' }} option={option} />
            </div>
          </Spin>
        </div>
        <div className={styles.abnormal}>
          <Spin tip="Loading..." spinning={loadingCenter}>
            <div className={styles.head}>
              <div className={styles.icon} />
              <span>消息提醒</span>
            </div>
            <div className={styles.content}>
              {dashboardData.异常登录 > 0 && (
                <div className={styles.contentItem}>
                  <div className={styles.contentItemTop}>
                    <div className={styles.topLeft}>
                      <img src={abnormalRed} className={styles.icon} alt="" />
                      <div>
                        <div className={styles.abnormalFont}>异常登录</div>
                        <span className={styles.abnormalFontText}>查询到有异常的用户登录</span>
                      </div>
                    </div>
                    <div className={styles.textStyle}>
                      <span className={styles.text}>{dashboardData.异常登录}</span>次
                    </div>
                  </div>
                </div>
              )}
              {dashboardData.消息数量 > 0 && (
                <div className={styles.contentItem}>
                  <div className={styles.contentItemTop}>
                    <div className={styles.topLeft}>
                      <img src={abnormalGreen} className={styles.icon} alt="" />
                      <div>
                        <div className={styles.abnormalFont}>消息推送已提醒</div>
                        <span className={styles.abnormalFontText}>消息平台消息推送已发出</span>
                      </div>
                    </div>
                    <div className={styles.textStyle}>
                      <span className={styles.text}>{dashboardData.消息数量}</span>个
                    </div>
                  </div>
                </div>
              )}
              {state === false && (
                <div className={styles.contentItem}>
                  <div className={styles.contentItemTop}>
                    <div className={styles.topLeft}>
                      <img src={abnormalYellow} className={styles.icon} alt="" />
                      <div>
                        <div className={styles.abnormalFont}>断开连接</div>
                        <span className={styles.abnormalFontText}>数据库链接断开</span>
                      </div>
                    </div>
                  </div>
                </div>
              )}
              {!dashboardData.异常登录 && state === '' && (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
              )}
              {dashboardData.异常登录 === 0 && dashboardData.消息数量 === 0 && state && (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
              )}
            </div>
          </Spin>
        </div>
      </div>
      <div className={styles.contentBottom}>
        <div className={styles.callLog}>
          <Spin tip="Loading..." spinning={loadingApi}>
            <div className={styles.title}>
              <div className={styles.titleLeft}>
                <div className={styles.icon} />
                <span className={styles.text}>API调用日志（{title}）</span>
              </div>
              <div className={styles.linkIcon}>
                <span onClick={() => toLogCenter()} style={{ cursor: 'pointer' }}>
                  日志中心 <img src={icon} alt="" />
                </span>
              </div>
            </div>
            <div className={styles.table}>
              <Tabs
                activeKey={activeKey}
                onChange={onChange}
                tabPosition="left"
                style={{ height: '100%' }}
              >
                <TabPane tab="异常API" key="1">
                  <Table
                    size="small"
                    bordered
                    columns={columns}
                    dataSource={keepTableList}
                    scroll={{ y: 'calc(100% - 53px)' }}
                    pagination={false}
                  />
                </TabPane>
                <TabPane tab="耗时API" key="2">
                  <Table
                    size="small"
                    bordered
                    columns={columns1}
                    dataSource={keepTableList1}
                    scroll={{ y: 'calc(100% - 53px)' }}
                    pagination={false}
                  />
                </TabPane>
                <TabPane tab="调用频次" key="3">
                  <Table
                    size="small"
                    bordered
                    columns={columns2}
                    dataSource={tableData1}
                    scroll={{ y: 'calc(100% - 53px)' }}
                    pagination={false}
                  />
                </TabPane>
              </Tabs>
            </div>
          </Spin>
        </div>
        <div className={styles.gisMessage}>
          <Spin tip="Loading..." spinning={loadingCenter}>
            <div className={styles.head}>
              <div className={styles.icon} />
              <span>GIS信息</span>
            </div>
            <div className={styles.content}>
              <div className={styles.item}>
                <div className={styles.dataCenterLabel}>
                  <div>
                    <img src={pipe} alt="" style={{ marginRight: '7px', marginTop: '-5px' }} />
                    管网服务
                  </div>
                  <div>
                    <img src={update} alt="" style={{ marginRight: '7px', marginTop: '-5px' }} />
                    元数据更新时间
                  </div>
                  <div>
                    <img src={map1} alt="" style={{ marginRight: '7px', marginTop: '-5px' }} />
                    地图方案
                  </div>
                  <div>
                    <img src={power} alt="" style={{ marginRight: '7px', marginTop: '-5px' }} />
                    已配置权限
                  </div>
                  <div>
                    <img src={map2} alt="" style={{ marginRight: '7px', marginTop: '-5px' }} />
                    默认范围
                  </div>
                </div>
                <div className={styles.dataCenterValue}>
                  <div>
                    <span className={styles.boldText}>{pipeArr}</span>
                    <span className={styles.smallText}>个</span>
                  </div>
                  <div>{dashboardData.元数据更新事件 || '-'}</div>
                  <div>
                    <span className={styles.boldText}>{scheme}</span>
                    <span className={styles.smallText}>个</span>
                  </div>
                  <div>
                    {limitsWeb > 0 ? (
                      <Tag color="blue" style={{ marginRight: 0, marginLeft: '8px' }}>
                        web
                      </Tag>
                    ) : (
                      '-'
                    )}
                    {limitsPhone > 0 ? (
                      <Tag color="cyan" style={{ marginRight: 0, marginLeft: '8px' }}>
                        mobile
                      </Tag>
                    ) : (
                      '-'
                    )}
                  </div>
                  <div className={styles.fontText}>
                    <span
                      className={classnames({
                        [styles.iconBlue]: mapConfig,
                        [styles.iconGrey]: !mapConfig,
                      })}
                    />
                    {mapConfig ? <span className={styles.textBlue}>已配置</span> : '未配置'}
                  </div>
                </div>
              </div>

              <div className={styles.dataCenterFooter}>
                <span onClick={() => toGISCenter()} style={{ cursor: 'pointer' }}>
                  GIS平台 <img src={icon} alt="" />
                </span>
              </div>
            </div>
          </Spin>
        </div>
      </div>
    </div>
  );
};

export default HomePage;
