index.js

/* eslint-disable */
/*
 * @Author: chengkaiwen;
 * @Date: 2022-7-8
 * @Description: 广州登录页;
 */
import { appService } from '@/api';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from '@wisdom-utils/runtime';
import { Modal } from 'antd';
import { HelmetProvider, Helmet } from 'react-helmet-async';
import FormLogin from './FormLogin';
import { actionCreators } from '@/containers/App/store';
import LoginAction from '../../login';
import styles from './index.less';
import { defaultApp } from '@/micro';
import { log } from 'kit_utils';
let big = '广州大.png'
let bigNew = ''
let hasOnline = true
let slogan = ''
class HuaNongLogin extends Component {
  constructor(props) {
    super(props);
    console.log(props);
    this.state = {
      time: '16:00',
      week: '星期一',
      date: '2020-04-14',
      title: '节水主题2',
      type: 'Account',
      status: 'normal',
      submitting: false,
      autoLogin: false,
      visible: false,
      action: new LoginAction(Object.assign({}, props, { history: props.history }), this.setVisible, true),
    };
    this.fromRef = React.createRef();
    this.sliVerify = React.createRef();
    props.loginParams.map(v => {
      let item = v.split('=')
      if (item.length > 0) {
        if (item[0] == 'big') {
          big = item[1]
        }
        if (item[0] == 'bigNew') {
          bigNew = item[1]
        }
        if (item[0] == 'slogan') {
          slogan = item[1]
        }
        if (item[0] == 'hasOnline') {
          hasOnline = item[1] == "true"
        }
      }
    })
  }
  handleSubmit = values => {
    const { action, type, autoLogin } = this.state;
    action &&
      (type === 'Account'
        ? action.loginHandler(values.userName, values.password, null, autoLogin, this.sliVerify)
        : type === 'Mobile'
          ? action.phoneLoginFormHandler(values.mobile, values.captcha)
          : null);

    this.setSubmitting(true);
    this.props.updateCurrentIndex(-1);
    //没取到0id 要给定时器
    if (window.gzTime) {
      clearInterval(window.gzTime)
    }
    if (hasOnline) {

      setTimeout(() => {
        appService
          .getInOnLine({
            UserID: globalConfig.userInfo.oid || globalConfig.userInfo.OID,
            SatrtDate: this.getNowDate(),
            Port: location.port,
            Oid: this._createGuid(),
          })
      }, 10000)
      window.gzTime = setInterval(() => {
        appService
          .getInOnLine({
            UserID: globalConfig.userInfo.oid || globalConfig.userInfo.OID,
            SatrtDate: this.getNowDate(),
            Port: location.port,
            Oid: this._createGuid(),
          })
      }, 180000)
    }


  };
  onActinoChange = action => {
    action &&
      action.events.on('loginSuccess', event => {
        this.setSubmitting(false);
        this.props.updateCurrentIndex && this.props.updateCurrentIndex(0);
        this.props.history.push(`/?client=${this.props.global.client}`);
        defaultApp();
      });
    action &&
      action.events.on('loginError', event => {
        this.setVisible(false);
        this.setSubmitting(false);
      });
    action &&
      action.events.on('loginVisible', status => {
        this.setVisible(status);
      });
  };
  setSubmitting = submitting => {
    this.setState({ submitting });
  };
  setVisible = visible => {
    this.setState({
      visible,
    });
  };
  setType = type => {
    this.setState({
      type,
    });
  };
  setAutoLogin = autoLogin => {
    this.setState({
      autoLogin,
    });
  };
  renderPlatform() {
    const params = {
      fromRef: this.formRef,
      type: this.state.type,
      setType: this.setType,
      status: this.state.status,
      submitting: this.state.submitting,
      autoLogin: this.state.autoLogin,
      setAutoLogin: this.setAutoLogin,
      action: this.state.action,
      onSubmit: this.handleSubmit,
      loginMode: this.props.loginMode,
      updateLoginMode: this.props.updateLoginMode,
    };
    return <FormLogin {...params} />;
  }
  getCurrentTime(callback) {
    const date = new Date();
    const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    let minutes = date.getMinutes();
    if (minutes < 10) {
      minutes = '0' + minutes;
    }
    let second = date.getSeconds();
    const time = `${date.getHours()}:${minutes}`;
    const weekDay = week[date.getDay()];
    const dateStr = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    const dateObj = {
      time,
      week: weekDay,
      date: dateStr,
      second,
    };
    callback && callback(dateObj);
  }
  showTime = (date) => {
    this.clearTime();
    this.setState({
      ...date,
    });
    const interval = 60 - date.second;
    this.timeTimer = setInterval(() => {
      this.getCurrentTime(this.showTime);
    }, interval * 1000);
  }
  // 清除时间定时器
  clearTime() {
    this.timeTimer && clearInterval(this.timeTimer);
  }
  getNowDate() {
    var date = new Date();
    var sign2 = ":";
    var year = date.getFullYear() // 年
    var month = date.getMonth() + 1; // 月
    var day = date.getDate(); // 日
    var hour = date.getHours(); // 时
    var minutes = date.getMinutes(); // 分
    var seconds = date.getSeconds() //秒
    var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
    var week = weekArr[date.getDay()];
    // 给一位数的数据前面加 “0”
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (day >= 0 && day <= 9) {
      day = "0" + day;
    }
    if (hour >= 0 && hour <= 9) {
      hour = "0" + hour;
    }
    if (minutes >= 0 && minutes <= 9) {
      minutes = "0" + minutes;
    }
    if (seconds >= 0 && seconds <= 9) {
      seconds = "0" + seconds;
    }
    return year + "-" + month + "-" + day + " " + hour + sign2 + minutes + sign2 + seconds;
  }
  _createGuid() {
    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx"
      .replace(/[xy]/g, function (c) {
        let r = (Math.random() * 16) | 0,
          v = c == "x" ? r : (r & 0x3) | 0x8;
        return v.toString(16);
      })
      .toUpperCase();
  }
  componentDidMount() {
    console.log(this.props, this.props.global.logo, this.props.global.transformDevAssetsBaseURL('assets/images/广州/背景.png'));
    console.log(this);
    this.onActinoChange(this.state.action);
    this.getCurrentTime(this.showTime);
    /* request(urlUtils.getUrl(
       "/PandaEnergy/GZshuiwuju"
     ) + '/GuangZhou/InOnLine', {
       query: {
           UserID: _config.userInfo.OID,
           SatrtDate: SatrtDate,
           Port: location.port,
           Oid,
       }
   })  */



  }
  componentWillUnmount() {
    this.clearTime();
  }
  render() {

    return (
      <HelmetProvider>
        <div className={styles.quota} style={{ 'background': `url(${bigNew ? this.props.global.transformDevAssetsBaseURL(bigNew) : require("@/assets/images/login/节水/" + big)}) no-repeat` }}>
          <div className={styles.head}>
            <div className={styles.title}>
              <img className={styles.imgs} src={this.props.global && this.props.global.transformDevAssetsBaseURL && this.props.global.transformDevAssetsBaseURL(this.props.global.logo)} alt="" />
              {/* <img src={require('@/assets/images/login/能源-定额/华农logo.png')} alt="" /> */}
              <span>{this.props.global.title || this.state.title}</span>
            </div>
            <div className={styles.time_and_date}>
              <div className={styles.time}>{this.state.time}</div>
              <div className={styles.date}>
                <span>{this.state.week}</span>
                <span>{this.state.date}</span>
              </div>
            </div>
          </div>
          <div className={styles.wrap_content}>
            <div className={styles.from}>
              <div className={styles.slogan}>
                <div className={styles.slogan_back} style={{ background: `url( ${!slogan ? require("@/assets/images/login/节水/建桥宣传语.png") : this.props.global.transformDevAssetsBaseURL(slogan)}) center no-repeat` }} />
              </div>
              <div className={styles.login}>{this.renderPlatform()}</div>
            </div>
          </div>
          <Modal
            centered
            visible={this.state.visible}
            width={340}
            footer={null}
            closable={false}
            bodyStyle={{ padding: '15px' }}
          >
            <div ref={this.sliVerify} />
          </Modal>
        </div>
      </HelmetProvider>
    );
  }
}

const mapStateToProps = state => ({
  global: state.getIn(['global', 'globalConfig']),
  loginMode: state.getIn(['global', 'loginMode']),
});

const mapDispatchToProps = dispatch => ({
  updateConfig(config) {
    dispatch(actionCreators.getConfig(config));
  },
  createContext(data) {
    dispatch(actionCreators.createContext(data));
  },
  updateLoginMode(mode) {
    dispatch(actionCreators.changeLoginMode(mode));
  },
  updateCurrentIndex(index) {
    dispatch(actionCreators.updateCurrentIndex(index));
  },
});
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(withRouter(HuaNongLogin));