feat: 能源-定额:登录页面

src/pages/user/login/index.js

 import React, { useEffect } from 'react';
 
+import { getParams } from '@wisdom-utils/utils/lib/helpers/params';
 import BaseLogin from './template/baseLogin';
 import NewYear from './template/newYear';
 import InfoLogin from './template/infoLogin';
 import Yulin from './template/yulin';
-import { getParams } from '@wisdom-utils/utils/lib/helpers/params';
 // import { useParams } from '@wisdom-utils/runtime';
+import EnergyQuota from './template/energy_quota/index';
 import { initGlobalConfig } from '../../../initConfig';
 const LoginTemplate = {
   '新春 - 智联.html': NewYear,
@@ -14,7 +15,8 @@ const LoginTemplate = {
   'DarkCloud.html': BaseLogin,
   '信息化.html': InfoLogin,
   '项目 - 榆林.html': Yulin,
-  'default': BaseLogin
+  '能源-定额平台.html': EnergyQuota,
+  default: BaseLogin,
 };
 /* eslint-disable */
 export default (props) => {

src/pages/user/login/template/energy_quota/FormLogin.js

+/* eslint-disable */
+import { Checkbox } from 'antd';
+import React from 'react';
+import { useIntl } from '@wisdom-utils/components';
+import LoginForm from '../../components/Login';
+import { Form } from 'antd';
+import LoginMessage from '../../js/loginMessage';
+import LoginContext from '../../components/Login/LoginContext';
+import styles from './index.less';
+const { UserName, Password, Submit } = LoginForm;
+const FormLogin = props => (
+  <div className={styles.form_login}>
+    <LoginContext.Provider>
+      <Form
+        form={props.form}
+        onFinish={values => {
+          if (props.onSubmit) {
+            props.onSubmit(values);
+          }
+        }}
+      >
+        {props.status === 'error' && props.type === 'account' && !props.submitting && (
+          <LoginMessage
+            content={useIntl().formatMessage({
+              id: 'pages.login.accountLogin.errorMessage',
+            })}
+          />
+        )}
+        <UserName
+          name="userName"
+          placeholder={useIntl().formatMessage({
+            id: 'pages.login.username.placeholder',
+          })}
+          rules={[
+            {
+              required: true,
+              message: useIntl().formatMessage({
+                id: 'pages.login.username.required',
+              }),
+            },
+          ]}
+        />
+        <Password
+          name="password"
+          placeholder={useIntl().formatMessage({
+            id: 'pages.login.password.placeholder',
+          })}
+          rules={[
+            {
+              required: true,
+              message: useIntl().formatMessage({
+                id: 'pages.login.password.required',
+              }),
+            },
+          ]}
+        />
+        <div className={styles.checkbox_wrap}>
+          <Checkbox checked={props.autoLogin} onChange={e => props.setAutoLogin(e.target.checked)}>
+            {'记住密码'}
+          </Checkbox>
+          <a href="#">忘记密码?</a>
+        </div>
+        <Submit loading={props.submitting}>{useIntl().formatMessage({ id: 'pages.login.submit' })}</Submit>
+      </Form>
+    </LoginContext.Provider>
+  </div>
+);
+
+export default FormLogin;

src/pages/user/login/template/energy_quota/index.js

+/* eslint-disable */
+/*
+ * @Author: hujinjie;
+ * @Date: 2022-4-14
+ * @Description: 华农登录页;
+ */
+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 { initMicroApps } from '@/micro';
+class HuaNongLogin extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      time: '16:00',
+      week: '星期一',
+      date: '2020-04-14',
+      title: '华中农业大学二级单位定额与建筑能耗管理系统',
+      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();
+  }
+  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);
+  };
+  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}`);
+        initMicroApps();
+      });
+    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);
+  }
+  componentDidMount() {
+    console.log(this.props);
+    console.log(this);
+    this.onActinoChange(this.state.action);
+    this.getCurrentTime(this.showTime);
+  }
+  componentWillUnmount() {
+    this.clearTime();
+  }
+  render() {
+    return (
+      <HelmetProvider>
+        <div className={styles.quota}>
+          <div className={styles.head}>
+              <div className={styles.title}>
+                <img 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} />
+              </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));

src/pages/user/login/template/energy_quota/index.less

+@import '~antd/es/style/themes/default.less';
+/* 0.5px */
+.borderSlender(@color) {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background-color: @color;
+  -webkit-transform: scaleY(0.5);
+  -moz-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+  content: '';
+}
+.quota {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: url('@/assets/images/login/能源-定额/背景.png') no-repeat;
+  background-size: cover;
+  .head {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 66px;
+    display: flex;
+    justify-content: space-between;
+    z-index: 10;
+    .title {
+      padding-left: 20px;
+      font-size: 24px;
+      font-weight: bold;
+      color: #FFFFFF;
+      text-shadow: 0px 0px 2px rgba(2, 49, 21, 0.51);
+      line-height: 66px;
+    }
+    .time_and_date {
+      padding-right: 50px;
+      display: flex;
+      align-items: center;
+      .time {
+        padding: 5px;
+        font-size: 34px;
+        font-weight: 400;
+        color: #FFFFFF;
+        text-shadow: 0px 0px 2px rgba(2, 49, 21, 0.8);
+      }
+      .date {
+        padding: 5px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #FFFFFF;
+        text-shadow: 0px 0px 2px rgba(2, 49, 21, 0.51);
+        display: flex;
+        flex-direction: column;
+        line-height: 1.1;
+      }
+    }
+  }
+  .head::after {
+    .borderSlender(@color: rgb(255, 255, 255, 0.32));
+  }
+  .wrap_content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    .from {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      width: 620px;
+      height: 429px;
+      margin: auto;
+      overflow: hidden;
+      // background: rgba(255, 255, 255, 0.8);
+      background: #FFFFFF;
+      border-radius: 15px;
+      .slogan {
+        height: 118px;
+        background: linear-gradient(0deg, #00712f 0%, #0dae50 100%);
+        .slogan_back{
+          width: 100%;
+          height: 100%;
+          background: url('@/assets/images/login/能源-定额/宣传语.png') no-repeat;
+        background-position: center;
+        }
+      }
+      .login {
+        // flex: 1;
+        height: calc(100% - 118px);
+        padding: 50px 60px;
+      }
+    }
+  }
+}
+
+.form_login {
+  width: 100%;
+  height: 100%;
+  .checkbox_wrap {
+    margin-bottom: @margin-md;
+    color: #376149;
+    a {
+      float: right;
+    }
+  }
+  :global {
+    .panda-console-base-input-affix-wrapper:focus, .panda-console-base-input-affix-wrapper-focused {
+      box-shadow: none;
+    }
+    .panda-console-base-input-affix-wrapper {
+      color: #037633;
+      background: none;
+    }
+    .panda-console-base-input {
+      background: none;
+    }
+    .panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper:focus, .panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper-focused {
+      box-shadow: none;
+    }
+    .panda-console-base-input-affix-wrapper:focus .panda-console-base-input-affix-wrapper-lg {
+      border-color: #00a854 !important;
+    }
+    .panda-console-base-input-affix-wrapper:not(.panda-console-base-input-affix-wrapper-disabled):hover {
+      z-index: 1;
+      border-color: #00a854;
+      border-right-width: 1px;
+    }
+    .panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper,
+    .panda-console-base-input-affix-wrapper-status-error:not(.panda-console-base-input-affix-wrapper-disabled):not(.panda-console-base-input-affix-wrapper-borderless).panda-console-base-input-affix-wrapper:hover {
+      border-color: #ff4d4f;
+    }
+    .panda-console-base-input-affix-wrapper-focused,
+    .panda-console-base-input-affix-wrapper:focus {
+      z-index: 0;
+    }
+    .panda-console-base-input-affix-wrapper-lg {
+      background-color: none;
+      border: none;
+      border-bottom-color: #376149;
+      border-bottom-width: 1px;
+      border-bottom-style: solid;
+    }
+    .panda-console-base-input-affix-wrapper > input.panda-console-base-input {
+      background-color: none;
+    }
+    .panda-console-base-form {
+      width: 100%;
+      height: 100%;
+    }
+    .panda-console-base-checkbox-wrapper {
+      color: #376149;
+    }
+    .panda-console-base-checkbox-wrapper:hover .panda-console-base-checkbox::after {
+      border-color: #00a854;
+    }
+    .panda-console-base-checkbox-wrapper:hover .panda-console-base-checkbox-inner,
+    .panda-console-base-checkbox:hover .panda-console-base-checkbox-inner,
+    .panda-console-base-checkbox-input:focus + .panda-console-base-checkbox-inner {
+      border-color: #037633;
+    }
+    .panda-console-base-checkbox-wrapper {
+      .panda-console-base-checkbox-checked .panda-console-base-checkbox-inner {
+        background-color: #037633;
+        border-color: #037633;
+      }
+      .panda-console-base-checkbox-inner {
+        border-color: #037633;
+        border-radius: 50%;
+      }
+    }
+    .panda-console-base-btn-lg {
+      width: 100%;
+    }
+    .panda-console-base-btn-primary {
+      background: #037633;
+      border-color: #037633;
+      border-radius: 23px;
+    }
+  }
+}