import React, { useState, useEffect, useRef, Component,useMemo } from 'react'
import { connect } from 'dva'
import storage from '../utils/storage'
import { initFilter, addRuleAndGroups, guid, extendInclude, extendRule, extend } from "../utils/common"
import './home.less'
// 组件库
import { Table, Card,Modal,List,Avatar, Row,Collapse, Col, Icon, Button, Input, DatePicker, Form, Select, notification, Divider,Tabs,Tag, message   } from 'antd';

import { Chart, Geom, Axis, Tooltip, Legend } from "bizcharts";

import FormPage from '../components/FormPage'
import backlog from '../assets/home/backlog.png';
import userPicture from '../assets/home/it.jpg';
import backlog_i from '../assets/home/backlog_icon.png';
import styles from './dashboard.css';
// import Slider from "react-slick";
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import moment from 'moment';
import flow from '../assets/home/flow.png';
import flow_i from '../assets/home/flow_icon.png';
import finished from '../assets/home/finished.png';
import finished_i from '../assets/home/finished_icon.png';
import remind from '../assets/home/remind.png';
import remind_i from '../assets/home/remind_icon.png';
import noticeImg from '../assets/home/noticeImg.jpg';
import scoreImg from '../assets/home/score.jpg';
import echarts from 'echarts';
import config from '../config'
import { routerRedux } from 'dva/router'
const { TabPane } = Tabs;
const { Panel } = Collapse;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker
const FormItem = Form.Item
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
// window.location.href="http://47.122.43.22:9100"
const openNotification = placement => {
  notification.info({
    duration: null,
    top: 43,
    message: `签名照上传提示：`,
    description:
      '您还没上传自己的签名照片，请在我的资料中尽快上传您的签名照！',
    placement,
  });
};
const openNotificationMobile = placement => {
  notification.info({
    duration: 20,
    message: `友情提示：`,
    description:
      '您当前用的是手机在访问，为有更好体验，建议使用电脑访问！',
    placement,
  });
};
class HomeMobileNew extends React.Component {
  constructor(props) {
    super(props);
    // props.matchLogin=true;
    this.state = {
      visible: false,
      btnDisplay:'block',
      btnViewDisplay:'none',
      btnTodayDisplay:'none',
      noticeTitle: '',
      tmpData: {},
      tableKey: "1",
      pagination: {},
      retData: [],
      chartData: [],
      favorMenus:[],
      tableData: [{//工作台四个展示模块
        key: '1',
        bgImg: backlog,
        title: '待办事项',
        total: '0',
        iconImg: backlog_i,
        iconDisplay: 'block',
      }, 
      {
        key: '2',
        bgImg: flow,
        title: '已办事项',
        total: '0',
        iconImg: flow_i,
        iconDisplay: 'none',
      },
      // {
      //   key: '4',
      //   bgImg: remind,
      //   title: '待办超时',
      //   total: '0',
      //   iconImg: remind_i,
      //   iconDisplay: 'none',
      // },
       {
        key: '3',
        bgImg: finished,
        title: '今日提醒',
        total: '0',
        iconImg: finished_i,
        iconDisplay: 'none',
      }
        ,
      ],
      querySearch: {},//搜索集合
      isModalVisible: false,
      isModalVisible6: false,
      qty:5,
      departmentName: "",
      searchVisible: false, //弹窗显示
      searchTodayVisible: false, //弹窗显示
    };
    this.activeMenu = null;
  };

  componentDidMount() {
    // if (window.navigator.userAgent.indexOf("Windows") < 1) {
    //   openNotificationMobile('bottomRight');
    // }
    this.getBaseInfoData(1, "1", 5);
    this.getMenuData();
    this.getTeam();
    //this.setMessageData();
    // this.targetCheck();//个人指标考核(统计图)
    //this.defectTreatment();//隐患整改(统计图)
    //this.jobType();//岗位风险类别(统计图)
    //this.mainJobPie();//主要工作分布(饼图)
    //this.delayJobBar();// 超期事务(柱状图图) 
    //定时器功能，暂时不开启
    //this.timerID = setInterval(() => this.reloadData(), 50000);
    //this.showModalSign();   //验证是否有上传签名
    this.riskLevel();//岗位风险等级(饼图)
  };
  getTeam = () => {
    var userId = storage('lacal').getItem('userid')?.val;   //登录后有存储登录信息
    var orgId = storage('lacal').getItem('webOrgId')?.val;  //登录后有存储登录信息   
    let json = initFilter(orgId)
    extendRule(json, 'ID', 1, userId)
    extendInclude(json, "Nav_Department")
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url: 'FM/User/Get',
      onComplete: (ret) => {
        if (ret && ret.Nav_Department) {
          this.setState({
            departmentName: ret.Nav_Department.NAME
          });
          this.targetCheck();//班组作业情况(统计图)
        }
      }
    });
  };
  getMenuData = () => {
    let favorMenus = storage('lacal').getItem('favorMenus')?.val; 
    let storageDatas = favorMenus ?? [];
    if(storageDatas.length > 0)
    {
      this.setState({
        favorMenus: storageDatas,//data.Data,
      })
      storage('lacal').setItem('favorMenus', storageDatas)
    }
    else
    {
      let roles = this.props.login.roles;
      let menus =[];
      roles?.map(t=>{
        t.Nav_MenuPermissions?.map(t1=>{
          menus.push(t1.MENU_ID);
        })
      })
      let userName=this.props.login.user?.NAME;
      let json = initFilter(this.props.login.OrgId,"", "NUM", "asc");
      extendRule(json, 'IS_MOBILE_MENU', 1, true)
      this.props.dispatch({
        type: 'app/getDataByPost',
        url: "PF/Menu/OrderPaged",
        payload: json,
        onlyData: false,
        onComplete: (data) => {
          let datas=[];
          // if(userName && userName.indexOf("管理员") !== -1)
          // {
          //   datas=data.Data;
          // }
          // else
          // {
          //   data.Data.map(t=>{
          //       if(menus.includes(t.ID))
          //       {
          //         datas.push(t)
          //       }
          //   })
          // }
          datas=data.Data;
          this.setState({
            favorMenus: datas,//data.Data,
          })
          storage('lacal').setItem('favorMenus', datas)
        }
      })
    }
  }
  handleActiveMenu = (menu) => {
    this.activeMenu=menu
    this.props.history.push({ pathname: `/main/${menu.ID}` })
  }
  handleMore = () => {
    let qtyTemp =this.state.qty + 5 ;
    this.getBaseInfoData(1, this.state.tableKey, qtyTemp);
    this.setState({
      qty:qtyTemp
    })
  }
  handleViewMore = () => {
    this.getBaseInfoData(1,"2", 10000000);
    this.setState({
      searchVisible: true,
      searchTodayVisible: false, //弹窗显示
      querySearch: {}
    })
  }
  handleTodayMore = () => {
    this.getBaseInfoData(1,"3", 10000000);
    this.setState({
      searchVisible: false,
      searchTodayVisible: true, //弹窗显示
      querySearch: {}
    })
  }
  //班组作业完成情况统计图
  targetCheck = () => {
    const { departmentName } = this.state;
    const userInfo = storage('lacal').getItem('webUserInfo').val;
    let json = initFilter(this.props.login.OrgId, "", "WAITTING_COUNT", "desc");
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: "FM/DepartmentCompletion/OrderEntities",
      payload: json,
      onlyData: false,
      onComplete: (data) => {
        if (data && data.IsSuccessful) {
          // let enumsTemp = this.enums;
          // let formTypeEnums = enumsTemp ?enumsTemp.find(item => item.EnumName === "BIFormType"):[];
          let formName = [];
          let wattingQty = [];
          let finishQty = [];
          let totalQty = [];
          let WattingRate = [];
          let finishRate = [];
          let result = data.Data.filter(t => t.TEAM_NAME == departmentName);
          if(result)
          {
            result.forEach(item => {
              // let enums = formTypeEnums && formTypeEnums.options?formTypeEnums.options.find(t => t.value === item.FORM_TYPE):[];
              // formName.push(enums?enums.label:item.FORM_TYPE);
                formName.push(item.FORM_NAME);
                wattingQty.push(item.WAITTING_COUNT);
                finishQty.push(item.FINISH_COUNT);
                totalQty.push(item.TOTAL_COUNT);
                let finishRateTemp = (item.FINISH_COUNT / item.TOTAL_COUNT * 100).toFixed(2);
                let WattingRateTemp = (item.WAITTING_COUNT / item.TOTAL_COUNT * 100).toFixed(2);
                finishRate.push(finishRateTemp);
                WattingRate.push(WattingRateTemp);
            })
            
            var teamPre=result.filter(t => t.FORM_NAME == "班前会议");
            if(teamPre.length === 0)
            {
              formName.push("班前会议");
              finishRate.push(0);
              WattingRate.push(100);
            }
            var teamCur=result.filter(t => t.FORM_NAME == "岗位当班");
            if(teamCur.length === 0)
            {
              formName.push("岗位当班");
              finishRate.push(0);
              WattingRate.push(100);
            }
            var teamAft=result.filter(t => t.FORM_NAME == "岗位交接班");
            if(teamAft.length === 0)
            {
              formName.push("岗位交接班");
              finishRate.push(0);
              WattingRate.push(100);
            }
          }
          let myChart = echarts.init(document.getElementById('targetCheck'));
          myChart.setOption({
            tooltip: {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              },
              // formatter:function (params) {

              //   console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可

              //   let firstParams = params[0];
              //   let sndParams = params[1];
              //   let endParams = params[2];
              //   return firstParams.seriesName +'  ' + firstParams.value +'<br>' +sndParams.seriesName +'  ' + sndParams.value +'<br>' + endParams.seriesName +'  ' + endParams.value;
              // }        
            },
            grid: {
              left: '3%',
              right: '4%',
              top: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#172749'
                }
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {

                show: true,

                interval: 0,

                formatter: '{value} %',  // 给每个数值添加%
                // fontSize: '22'
              },
            },
            legend: {
              data: ['完成率', '未完成'],
              bottom: '35px'
            },
            yAxis: {
              type: 'category',
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: '#172749'
                }
              },        
              data: formName,
            },
            series: [
              // {
              //   name: '总数',
              //   type: 'bar',
              //   stack: '',
              //   label: {
              //     show: true,
              //     position: 'right',
              //     color: '#000',
              //   },
              //   data: totalQty,
              //   barGap: '-100%',   
              //   z:-1,
              //   itemStyle: {
              //     normal: {
              //         color: 'rgba(128, 128, 128, 0.3)'   
              //     }
              // },
              // },
              // {
              //   name: '已办',
              //   type: 'bar',
              //   stack: '',
              //   label: {
              //     show: true,
              //     position: 'right',
              //     color: '#000',
              //   },
              //   data: finishQty,
              //   barGap: '-100%',   
              //   z:-1,
              //   itemStyle: {
              //     normal: {
              //       color: '#5B9BD5',  
              //     }
              // },
              // },
              // {
              //   name: '待办',
              //   type: 'bar',
              //   stack: '',
              //   label: {
              //     show: true,
              //     position: 'right',
              //     color: '#000',
              //   },
              //   data: wattingQty,
              //   barGap: '-100%',   
              //   z:-1,
              //   itemStyle: {
              //     normal: {
              //       color: 'rgba(192, 192, 192)',  
              //     }
              // },
              // },
              {
                name: '完成率',
                type: 'bar',
                stack: '总量',
                // color: '#ED7D31',//#ED7D31、008000、ED7D31
                data: finishRate.map(item=>{
                  return {
                    value:item,
                    label: {
                      show: item> 0 ? true:false,
                      position: 'inside',
                      color: '#fff',
                      formatter: '{c}%',
                      fontSize: '16'
                    },
                     // 每一个条目的样式配置
                  itemStyle: {
                  // barBorderRadius: [0, 34, 34, 0], // 圆角
                  // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    { offset: 0, color: "rgba(187,162,227,0.6)" },
                    { offset: 1, color: "rgba(102,140,218,0.6)" },
                    ]),
                  },
                  }
                }),//finishRate
                show: false,
                  // 每一个条目的样式配置
                  itemStyle: {
                    // barBorderRadius: [0, 34, 34, 0], // 圆角
                    // 渐变色  1、指明颜色渐变的方向  2、指明不同百分比之下颜色的值
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: "rgba(187,162,227,0.6)" },
                      { offset: 1, color: "rgba(102,140,218,0.6)" },
                      ]),
                    },
              },
              {
                name: '未完成',
                type: 'bar',
                stack: '总量',
                // label: {
                //   show: true,
                //   position: 'inside',
                //   color: '#000',
                //   formatter:'{c}%',
                //   fontSize: '16'
                // },
                color: 'rgba(192, 192, 192)',//#5B9BD5、808080
                data: WattingRate
              },

            ],
          });
        }
      }
    });
    //   let data = { "IsSuccessful": true, "Data": 
    //   [{ "FORM_NAME": "班前会议作业情况", "WATTING_COUNT": 0, "FINISH_COUNT": 20, "TOTAL_COUNT": 20}, 
    //   { "FORM_NAME": "岗位当班作业情况", "WATTING_COUNT": 3, "FINISH_COUNT": 10, "TOTAL_COUNT": 0}, 
    //   {"FORM_NAME": "岗位交接班作业情况", "WATTING_COUNT": 5, "FINISH_COUNT": 8, "TOTAL_COUNT": 0},
    //   {"FORM_NAME": "岗位交接2班作业情况", "WATTING_COUNT": 5, "FINISH_COUNT": 10, "TOTAL_COUNT": 0}
    // ], "TotalCount": 0, "ErrorMessage": null }
  }
 //风险等级占比
 riskLevel = () => {
  const userInfo = storage('lacal').getItem('webUserInfo').val;
  let json = initFilter(this.props.login.OrgId);
  this.props.dispatch({
    type: 'app/getDataByPost',
    url: "FM/RiskLevelProportion/OrderPaged",
    payload: json,
    onlyData: false,
    onComplete: (data) => {
      if (data && data.IsSuccessful) {
        let riskLevel = []
        let showData = []
        let color = []
        data.Data.forEach(item => {
          riskLevel.push(item.RISK_LEVEL)
          color.push(item.COLOR)
          showData.push({ value: item.COUNT, name: item.RISK_LEVEL })
        })
        let myChart = echarts.init(document.getElementById('riskLevel'));
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            //formatter: '{a} <br/>{b} : {c} ({d}%)'
            formatter: '{b} : {c} ({d}%)'
          },
          legend: {
            bottom: '30px',
            data: riskLevel
          },
          series: [
            {
              name: '主要工作分布',
              type: 'pie',
              radius: '55%',
              center: ['50%', '42%'],
              label: {
                formatter: '{b}:({d}%)',
              },
              data: showData,
              color: color,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
      }
    }
  });
}
  //获取数据
  getBaseInfoData = (pagination, key, limit) => {
    const current = pagination ? pagination.current : 1
    const json = initFilter(this.props.login.OrgId, "", "CODE", 1, current)
     // extendRule(json, 'SOURCE_FORMCODE', 9, "FO003")
     const querySearch = this.state.querySearch;
     for (var item in querySearch) {
      if (item == 'searchName') {
        extendRule(json, 'NOTICE_TITLE', 9, querySearch[item])
      }
      // if (item == 'searchCode') {
      //   extendRule(json, 'CODE', 9, querySearch[item])
      // }
      if (item == 'startTime1') {
        extendRule(json, 'TASK_STARTDT', 6, querySearch[item])
      }
      if (item == 'startTime2') {
        extendRule(json, 'TASK_STARTDT', 4, querySearch[item])
      }
      if (item == 'searchStatus') {
        extendRule(json, 'NOTICE_STATUS', 1, querySearch[item])
      }
      // if (item == 'endTime1') {
      //   extendRule(json, 'TASK_ENDDT', 6, querySearch[item])
      // }
      // if (item == 'endTime2') {
      //   extendRule(json, 'TASK_ENDDT', 4, querySearch[item])
      // }
    }
    json.Limit = limit;
    json.Parameter1 = key;//1待办事项2已办事项3今日新增4待办超时
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'FM/FMNotificationTask/HomeOrderPaged',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful && re.Data.newData) {
          this.state.tableData[0].total = re.Data.todoCount;
          this.state.tableData[1].total = re.Data.doneCount;
          // this.state.tableData[2].total = re.Data.timeOverCount;
          this.state.tableData[2].total = re.Data.todayNewCount;
          // if (limit != null || limit != undefined) 
          // {
            this.setState({
              retData: re.Data.newData,
            })
        }
      }
    })
  };

  clearData = () => {
    let newtmpData = { ...this.state.tmpData }
    newtmpData["data"].id = '';
    newtmpData["data"].homeReload = true;
    this.setState({
      visible: false,
      tmpData: [],
      qty:5,
      searchVisible: false,
      searchTodayVisible: false, //弹窗显示
    })
  }

  handleCancel = () => { // 退出弹窗
    this.getBaseInfoData(1, this.state.tableKey, 5);
    this.clearData();
  }
  closeModal = () => { // 退出弹窗
    this.clearData();
  }
  closeqModal = () => { // 退出弹窗
    this.getBaseInfoData(1, "2", 5);
    this.setState({
      searchVisible: false,
      searchTodayVisible: false, //弹窗显示
    })
  }
  showEditModal = (dataId, formCode, TaskID, title, taskCode,tableKey,taskStartdt,taskStatus) => {
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'BI/BIController/getVersion',
      onComplete: (ret) => {
        if (ret > config.version) {
          window.localStorage.clear()
          message.success('清除成功，即将重新加载页面', 2, () => {
            setTimeout(() => window.location.reload(true), 500)
          })
        }
      }
    })
    const newtmpData = {
      data: { id: dataId, TaskID: TaskID, onCancel: this.handleCancel, taskCode: taskCode, tableKey: tableKey,noticeTitle:title,taskStartdt:taskStartdt,taskStatus:taskStatus,homeReload: true },
      formCode: tableKey==="3"?"PF135":formCode,
    }
    this.setState({
      noticeTitle: tableKey==="3"?"今日提醒":title,
      taskCode: taskCode,
      tmpData: newtmpData
    }, () => this.setState({
      visible: true
    }));
  }
  setMessageData = (dataSource) => {
    const data = dataSource ? dataSource : this.props.taskData;
  }
  //点击切换四个统计模块更改列表数据
  totalModuleClick = (item) => {
    const { tableData } = this.state;
    tableData.map((_item, i) => {
      if (_item.key == item.key) {
        _item.iconDisplay = 'block';
        this.setState({
          tableKey: item.key,
          qty:5,
        })
        if(item.key==="2")
        {
          this.setState({
            btnDisplay: 'none',
            btnViewDisplay:'block',
            btnTodayDisplay:'none',
          })
        }
        else if(item.key==="3")
        {
          this.setState({
            btnDisplay: 'none',
            btnViewDisplay:'none',
            btnTodayDisplay:'block',
          })
        }
        else
        {
          this.setState({
            btnDisplay: 'block',
            btnViewDisplay:'none',
            btnTodayDisplay:'none',
          })
        }
        this.getBaseInfoData(1, item.key, 5);
      } else {
        _item.iconDisplay = 'none';
      }
    });
  };

  ShowState(obj) {
    if(this.state.tableKey!=="2")
    {
      if(this.state.tableKey==="3")
      {
        if (obj.NOTICE_STATUS !==0) {
          return (<Tag  color="#2db7f5" style={{float:"center",padding:'0 10px' }}>已办</Tag >);
        } else {
          return (<Tag  color="#f50" style={{float:"center",padding:'0 10px' }}>未读</Tag >);
        }
      }
      else
      {
        // let timeNow=Date.parse(new Date());
        // let timeEnd= Date.parse(obj.TASK_ENDDT)
        // let thisResult = ( timeEnd-timeNow );
        // if (thisResult > 0) {
        //   return (<Tag  color="#2db7f5" style={{float:"center",padding:'0 10px' }}>正常</Tag >);
        // } else {
        //   return (<Tag  color="#f50" style={{float:"center",padding:'0 10px' }}>超期</Tag >);
        // }
        if (obj.OVER_TIME === "超期") {
          return (<Tag  color="#f50" style={{float:"center",padding:'0 10px' }}>超期</Tag >);
        } else{
          return (<Tag  color="#2db7f5" style={{float:"center",padding:'0 10px' }}>正常</Tag >);
        }
      }
    }
  }
  showDescriptionModal = (value) => {
    if(value === "1") 
    {
     this.setState({
       isModalVisible: true
     });
    }
    else if(value === "6")
     {
       this.setState({
         isModalVisible6: true,
       });
     }
   };
  closeDescriptionModal = () => {
    this.setState({
      isModalVisible6: false,
      isModalVisible: false
    });
  };
  // input输入
  vauleChange = (e) => {
    const { querySearch } = this.state
    if (e.target.value) {
      switch (e.target.name) {
        case 'searchName':
          querySearch[e.target.name] = e.target.value
          this.setState({ querySearch })
          break
      }
    } else {
      this.setState({ querySearch: {} })
    }
  }
  selectChange = (value) => {
    const { querySearch } = this.state
    querySearch.searchStatus=value;
    this.setState({
      querySearch
    }, () => {
    })
  }
  startChange = (dates, dateStr) => {
    const { querySearch } = this.state
    if (dates === null) {
      // querySearch['startTime1'] = ''
      // querySearch['startTime2'] = ''
      this.setState({
        querySearch: {}
      })
      return;
    }
    querySearch.startTime1 = dates.format("YYYY-MM-DD 00:00:00")
    // querySearch.startTime2 = this.state.visibleStartTime[1].format("YYYY-MM-DD HH:mm:ss")
    this.setState({
      querySearch
      // visibleStartTime: dates
    }, () => {
    })
  }
  endChange = (dates, dateStr) => {
    const { querySearch } = this.state
    querySearch.startTime2 = dates.format("YYYY-MM-DD 23:59:59")
    // querySearch.startTime2 = this.state.visibleStartTime[1].format("YYYY-MM-DD HH:mm:ss")
    this.setState({
      querySearch
      // visibleStartTime: dates
    }, () => {
    })
  }
  // 搜索
  handleSearch = () => {
    this.getBaseInfoData(1, "2", 10000000);
  }
  handleTodaySearch = () => {
    this.getBaseInfoData(1, "3", 10000000);
  }
  render() {
    const { tableData,favorMenus } = this.state;
    const onChange = (key) => {
      console.log(key);
    };
    return (
      <>
      {/* className='route-home' */}
      <div style={{ backgroundColor: '#fff', padding: '0 10px', position: 'relative',  overflow: 'hidden'}}>
        <div style={{ display: 'inline-block' }}>
          <Modal
            visible={this.state.visible}
            title={this.state.noticeTitle + "(" + this.state.taskCode + ")"}
            maskClosable={false}
            onCancel={this.handleCancel}
            footer={null}
            style={{
              maxWidth: "100vw",
              top: -10,
              paddingBottom: 0,
              position: 'fixed'
            }}
            bodyStyle={{
              maxHeight:"100vh",
              height: "calc(100vh - 55px )", //-53
              overflowY: "auto",
              padding:"10px 12px 10px 10px"
            }}
            width="100vw"
            closeModal={this.closeModal}
          // forceRender={true}
          >
            <FormPage {...this.state.tmpData} />
          </Modal>
          <Modal
            visible={this.state.searchVisible}
            title={"已办事项"}
            maskClosable={false}
            onCancel={this.closeqModal}
            footer={false}
            style={{
              maxWidth: "100vw",
              top: -10,
              paddingBottom: 0
            }}
            bodyStyle={{
              maxHeight:"100vh",
              height: "calc(100vh - 55px )", //-53
              overflowY: "auto"
            }}
            width="100vw"
            closeModal={this.closeqModal}
            // className='antd-modal-fullscreen'
          >
           <Collapse onChange={onChange}>
      <Panel header="按条件搜索" key="1">
      <Form>
                <Row>
                  <Col>
                    <Form.Item
                      label={'名称'}
                      {...formItemLayout}
                    >
                      <Input
                        value={this.state.querySearch.searchName}
                        placeholder={'请输入任务名称'}
                        name="searchName"
                        onChange={this.vauleChange} />
                    </Form.Item>
                  </Col>
                  <Col>
                    <Form.Item
                      label={'开始时间'}
                      {...formItemLayout}
                    >
                      <DatePicker
                        // value={this.state.visibleStartTime}
                        // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD")]}
                        onChange={this.startChange}
                         />
                    </Form.Item>
                  </Col>
                  <Col>
                    <Form.Item
                      label={'结束时间'}
                      {...formItemLayout}
                    >
                      <DatePicker
                        // value={this.state.visibleStartTime}
                        // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD")]}
                        onChange={this.endChange}
                         />
                    </Form.Item>
                  </Col>
                  <Col>
                    <Button type={'primary'} icon={'search'} onClick={() => this.handleSearch()}>搜索</Button>
                  </Col>
                </Row>
              </Form>
      </Panel>
    </Collapse>
    <br></br>
    <Row justify='center' style={{marginTop: "14px", minHeight: '120px',height: 'calc((100% - 250px) / 2)' }}>
 
 {/* <Tabs defaultActiveKey={this.state.type}  style={{backgroundColor:'#fff'}} onChange={this.onTabChange}>
   <TabPane tab="待办事项" key="1"> */}
   <List 
             pagination={{
              onChange: page => {
                console.log(page);
              },
              pageSize: 10,
            }}
    itemLayout="horizontal"
    dataSource={this.state.retData}
    renderItem={record => (
      <List.Item
      extra={
         this.ShowState(record,"2")
      }
      >
        <List.Item.Meta
          avatar={<Avatar style={{backgroundColor:'RGB(24, 149, 255)'}}><Icon type ={ (record.ICON == '' || record.ICON == undefined) ? 'file-text' : record.ICON} className='backlog-icon-style2'></Icon></Avatar>}
          title={<span> <a onClick={() => this.showEditModal(record.SOURCE_DATA_ID, record.SOURCE_FORMCODE, record.ID, record.NOTICE_TITLE, record.CODE,this.state.tableKey)}>{record.NOTICE_TITLE}</a></span>}
          description={<span> {"开始时间:"+record.TASK_STARTDT.substring(0,16)}<br/>{"结束时间:"+record.TASK_ENDDT.substring(0,16)}</span>}
        />
      </List.Item>
    )}
  />
   {/* </TabPane> */}
 {/* </Tabs> */}
 </Row>
              {/* <Table
                dataSource={this.state.retDataAll}
                columns={this.state.searchColumns}
                pagination={this.state.pagination}
                onChange={(num) => this.getBaseInfoData(num, this.state.currentpageIndex, null)}
                loading={this.state.showLoading}
                size="small"
              /> */}
          </Modal>
          <Modal
            visible={this.state.searchTodayVisible}
            title={"今日提醒"}
            maskClosable={false}
            onCancel={this.closeqModal}
            footer={false}
            style={{
              maxWidth: "100vw",
              top: -10,
              paddingBottom: 0
            }}
            bodyStyle={{
              maxHeight:"100vh",
              height: "calc(100vh - 55px )", //-53
              overflowY: "auto"
            }}
            width="100vw"
            closeModal={this.closeqModal}
            // className='antd-modal-fullscreen'
          >
           <Collapse onChange={onChange}>
      <Panel header="按条件搜索" key="1">
      <Form>
                <Row>
                  <Col>
                    <Form.Item
                      label={'提醒内容'}
                      {...formItemLayout}
                    >
                      <Input
                        value={this.state.querySearch.searchName}
                        placeholder={'请输入提醒内容'}
                        name="searchName"
                        onChange={this.vauleChange} />
                    </Form.Item>
                  </Col>
                  <Col>
                    <Form.Item
                      label={'开始时间'}
                      {...formItemLayout}
                    >
                      <DatePicker
                        // value={this.state.visibleStartTime}
                        // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD")]}
                        onChange={this.startChange}
                         />
                    </Form.Item>
                  </Col>
                  <Col>
                    <Form.Item
                      label={'结束时间'}
                      {...formItemLayout}
                    >
                      <DatePicker
                        // value={this.state.visibleStartTime}
                        // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD")]}
                        onChange={this.endChange}
                         />
                    </Form.Item>
                  </Col>
                  <Col>
                    <Form.Item
                      label={'状态'}
                      {...formItemLayout}
                    >
                      <Select width={100}
                        value={this.state.querySearch.searchStatus}
                        // defaultValue={[moment(moment(this.state.querySearch.startTime1), "YYYY-MM-DD"), moment(moment(this.state.querySearch.startTime2), "YYYY-MM-DD")]}
                        onChange={this.selectChange} >
                             <Option value="0">未读</Option>
                              <Option value="1">已办</Option>
                        </Select>
                    </Form.Item>
                  </Col>
                  <Col>
                    <Button type={'primary'} icon={'search'} onClick={() => this.handleTodaySearch()}>搜索</Button>
                  </Col>
                </Row>
              </Form>
      </Panel>
    </Collapse>
    <br></br>
    <Row justify='center' style={{marginTop: "14px", minHeight: '120px',height: 'calc((100% - 250px) / 2)' }}>
 
 {/* <Tabs defaultActiveKey={this.state.type}  style={{backgroundColor:'#fff'}} onChange={this.onTabChange}>
   <TabPane tab="待办事项" key="1"> */}
   <List 
             pagination={{
              onChange: page => {
                console.log(page);
              },
              pageSize: 10,
            }}
    itemLayout="horizontal"
    dataSource={this.state.retData}
    renderItem={record => (
      <List.Item
      extra={
         this.ShowState(record,"2")
      }
      >
        <List.Item.Meta
          avatar={<Avatar style={{backgroundColor:'RGB(24, 149, 255)'}}><Icon type ={ (record.ICON == '' || record.ICON == undefined) ? 'file-text' : record.ICON} className='backlog-icon-style2'></Icon></Avatar>}
          title={<span> <a onClick={() => this.showEditModal(record.SOURCE_DATA_ID, record.SOURCE_FORMCODE, record.ID, record.NOTICE_TITLE, record.CODE,this.state.tableKey,record.TASK_STARTDT,record.NOTICE_STATUS)}>{record.NOTICE_TITLE}</a></span>}
          description={<span> {"开始时间:"+record.TASK_STARTDT.substring(0,16)}<br/>{"结束时间:"+record.TASK_ENDDT.substring(0,16)}</span>}
        />
      </List.Item>
    )}
  />
   {/* </TabPane> */}
 {/* </Tabs> */}
 </Row>
              {/* <Table
                dataSource={this.state.retDataAll}
                columns={this.state.searchColumns}
                pagination={this.state.pagination}
                onChange={(num) => this.getBaseInfoData(num, this.state.currentpageIndex, null)}
                loading={this.state.showLoading}
                size="small"
              /> */}
          </Modal>
          <Modal title="详细说明" visible={this.state.isModalVisible}
              closeModal={this.closeDescriptionModal}
              onCancel={this.closeDescriptionModal}
              onOk={this.closeDescriptionModal}
              footer={null}
              style={{ width: '100%', height: '100%', top: "300px" }}
            >
              <p>计算规则：完成率 = 已办数 / 总数 * 100%</p>
          </Modal>
          <Modal title="详细说明" visible={this.state.isModalVisible6}
              closeModal={this.closeDescriptionModal}
              onCancel={this.closeDescriptionModal}
              onOk={this.closeDescriptionModal}
              footer={null}
              style={{ width: '100%', height: '100%', top: "300px" }}
            >
              <p>计算规则：占比率 = 当前风险等级数量 / 风险等级总数 * 100%</p>
            </Modal>
        </div>
          {/* 五个图标模块 */}
                <Row type="flex" justify="space-between" style={{ marginTop:'80px',marginRight:"12px"}}>
               
                  {
                    tableData.map((item) => {
                      return (
                         <Col span={7}>
                         <div onClick={() => this.totalModuleClick(item)}
                           style={{ background: `url(${item.bgImg}) 0 0 no-repeat`, width:'110px',height: '56px', backgroundSize: '100% 100%', borderRadius: '6px', cursor: 'pointer' }}
                         >
                           <div className='backlog-title-style2'>{item.title}</div>
                           <div className={item.total>9999?'backlog-style3':'backlog-style2'} >{item.total}</div>
                           <img src={item.iconImg} className='backlog-icon-style' style={{ display: item.iconDisplay }}/>
                         </div>
                       </Col>
                      )
                    })
                  }
                </Row>
          {/* 通知 */}

        <Row style={{ marginTop: "14px", height: 'calc((100% - 250px) / 2)', minHeight: '120px' }}>
          {/* 列表 */}
          {/* <Col style={{ height: '100%', whiteSpace: 'pre-wrap' }}> */}
            <div  >
            <List
            //  pagination={{
            //   onChange: page => {
            //     console.log(page);
            //   },
            //   pageSize: 10,
            // }}
    itemLayout="horizontal"
    dataSource={this.state.retData}
    renderItem={record => (
      <List.Item
      extra={
         this.ShowState(record)
      }
      >
        <List.Item.Meta
          avatar={<Avatar style={{backgroundColor:'RGB(24, 149, 255)',marginTop:'5px',marginLeft:'5px'}}><Icon type ={ (record.ICON == '' || record.ICON == undefined) ? 'file-text' : record.ICON} className='backlog-icon-style2'></Icon></Avatar>}
          title={
          <span>
            {/* <Icon type ={ (record.ICON == '' || record.ICON == undefined) ? 'file-text' : record.ICON}></Icon> */}
             <a onClick={() => this.showEditModal(record.SOURCE_DATA_ID, record.SOURCE_FORMCODE, record.ID, record.NOTICE_TITLE, record.CODE,this.state.tableKey,record.TASK_STARTDT,record.NOTICE_STATUS)}>{record.NOTICE_TITLE}</a></span>}
          description={<span> {"开始时间:"+record.TASK_STARTDT.substring(0,16)}<br/>{"结束时间:"+record.TASK_ENDDT.substring(0,16)}</span>}
          // {"开始时间:"+record.TASK_STARTDT.substring(0,16)+"结束时间:"+record.TASK_ENDDT.substring(0,16)}
        />
      </List.Item>
    )}
  />
            </div>
          {/* </Col> */}
        </Row>
        <Button type="primary" block onClick={()=>this.handleMore()} style={{ display: this.state.btnDisplay }}>
      加载更多...
    </Button>
    <Button type="primary" block onClick={()=>this.handleViewMore()} style={{ display: this.state.btnViewDisplay }}>
      查看更多...
    </Button>
    <Button type="primary" block onClick={()=>this.handleTodayMore()} style={{ display: this.state.btnTodayDisplay }}>
      查看更多...
    </Button>
        <Row style={{ marginTop: "10px"}}>
        <Card title="快捷菜单" style={{ borderRadius: '10px'}}>
        {
          favorMenus?favorMenus.map((menu, index) => {
            const active = menu.ID === this.activeMenu?.ID
            const iconClass = `sider__menu-icon2 ${active ? 'active' : ''}`
            var icon = (menu.ICON == '' || menu.ICON == undefined) ? 'file-text' : menu.ICON
            return (
                <Card.Grid onClick={()=>this.handleActiveMenu(menu)} style={{width:'33.33%',textAlign:'center',color:'RGB(24, 149, 255)'}}>
                   <Icon type={icon} className={iconClass} onClick={()=>this.handleActiveMenu(menu)}/>
                  {/* <img style={{ boxShadow: '0px 0px 10px rgba(0,0,0,.15)',width:'60px',height:'60px'}} src={userPicture} onClick={()=>this.handleActiveMenu(menu)}></img> */}
                  <br></br><a onClick={()=>this.handleActiveMenu(menu)}>{menu.NAME}</a></Card.Grid>
                // <Card.Grid style={{width:'50%',textAlign:'center'}}><Button type="link" onClick={()=>this.showEditModal(menu.MENU_FORM_ID,menu.Nav_MenuForm.CODE)}>{menu.NAME}</Button></Card.Grid>
            )
          }):null
        }
        </Card>
        </Row>
        <Row style={{ marginTop: "10px"}}>
          <div  className="dashboard-div-style" style={{ boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
          <div className="statistical-title-style2"><div className="badge-style"></div>{this.state.departmentName}作业完成情况
                  <span style={{ fontSize: '12px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                      <a onClick={()=>this.showDescriptionModal("1")}>详细说明</a>
                    </span>
                  </div>
                  <div id="targetCheck" style={{ width: '100%', height: '180px' }}></div>
          </div>
        </Row>
        <Row style={{ marginTop: "10px"}}>
          <div  className="dashboard-div-style" style={{ boxShadow: '0px 0px 10px rgba(0,0,0,.15)' }}>
          <div className="statistical-title-style2"><div className="badge-style"></div>风险等级占比
                  <span style={{ fontSize: '12px', float: 'right', marginRight: "16px", marginTop: "4px" }}>
                      <a onClick={()=>this.showDescriptionModal("6")}>详细说明</a>
                    </span>
                  </div>
                  <div id="riskLevel" style={{ width: '100%', height: '260px' }}></div>
          </div>
        </Row>
      </div>
      </>
    )
  }
}
export default connect(({ login }) => ({ login }))(HomeMobileNew)