feat: 登录页开发

src/pages/user/login/index.js

@@ -2,7 +2,7 @@
  * @Author: 634665781 634665781@qq.com
  * @Date: 2022-07-08 14:28:01
  * @LastEditors: 634665781 634665781@qq.com
- * @LastEditTime: 2022-07-08 16:02:01
+ * @LastEditTime: 2022-08-18 11:45:07
  * @FilePath: \CivWeb\src\pages\user\login\index.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -14,6 +14,7 @@ import Yulin from './template/yulin';
 // import { useParams } from '@wisdom-utils/runtime';
 import EnergyQuota from './template/energy_quota/index';
 import EnergGz from './template/energy_GZ/index';
+import EnergJS2 from './template/energy_JS2/index';
 import CloudLogin from './template/cloud';
 import WaterLogin from './template/water';
 import JSZHLogin from './template/project/JSZH';
@@ -30,6 +31,7 @@ const LoginTemplate = {
   '节水主题一.html':EnergGz,
   'Water.html': WaterLogin,
   '项目 - 江水置换.html': JSZHLogin,
+  '节水主题二.html':EnergJS2,
   '项目 - 澄迈.html': ChengmaiLogin,
   default: BaseLogin,
 };

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

@@ -23,7 +23,7 @@ class HuaNongLogin extends Component {
       time: '16:00',
       week: '星期一',
       date: '2020-04-14',
-      title: '华中农业大学二级单位定额与建筑能耗管理系统',
+      title: '节水主题2',
       type: 'Account',
       status: 'normal',
       submitting: false,

src/pages/user/login/template/energy_JS2/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_JS2/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';
+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);
+    //没取到0id 要给定时器
+    if( window.gzTime){
+      clearInterval( window.gzTime)
+    }
+
+
+  };
+  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() {
+    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}>
+          <div className={styles.head}>
+              <div className={styles.title}>
+                <img className={styles.logoimg} 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>
+           <img className={styles.from_img} src={require('@/assets/images/login/节水/建桥图片.jpg')} alt="" />
+            <div className={styles.from}>
+              <div className={styles.slogan}>
+                <div className={styles.slogan_back} />
+              </div>
+              <div className={styles.login}>{this.renderPlatform()}</div>
+            </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_JS2/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-image: url('@/assets/images/login/节水/背景.jpg');
+   background-position: center;
+  background-size: 100% 100%;
+  .head {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 82px;
+    display: flex;
+    justify-content: space-between;
+    z-index: 10;
+    border-bottom: 1px solid rgba(128,145,171,0.3);
+    .logoimg{
+      margin: 0px 20px;
+    }
+    .title {
+      padding-left: 20px;
+      font-size: 24px;
+    //  font-weight: bold;
+      color: #8091AB;
+     // text-shadow: 0px 0px 2px rgba(2, 49, 21, 0.51);
+      line-height: 66px;
+      padding-top: 11px;
+    }
+    .time_and_date {
+      padding-right: 50px;
+      display: flex;
+      align-items: center;
+      .time {
+        padding: 5px;
+        font-size: 34px;
+      //  font-weight: 400;
+        color: #8091AB;
+      //  text-shadow: 0px 0px 2px rgba(2, 49, 21, 0.8);
+      }
+      .date {
+        padding: 5px;
+        font-size: 16px;
+      //  font-weight: 500;
+        color: #8091AB;
+       // 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: -56px !important;
+      right: -643px;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      flex-direction: column;
+      width: 480px;
+      height: 462px;
+      margin: auto;
+      overflow: hidden;
+      padding: 20px 5px;
+      // background: rgba(255, 255, 255, 0.8);
+      background: #FFFFFF;
+    //  border-radius: 15px;
+      .slogan {
+        height: 118px;
+      //  background: linear-gradient(0deg,rgba(9,128,238,1) 0%,rgba(0,182,251,1) 100%);
+        .slogan_back{
+          width: 100%;
+          height: 100%;
+          background-image: url('@/assets/images/login/节水/宣传语.png') ;
+        background-position: center;
+        }
+      }
+      .login {
+        // flex: 1;
+        height: calc(100% - 118px);
+        padding: 50px 60px;
+      }
+    }
+    .from_img{
+      position: absolute;
+      /* width: 100%; */
+      width: 611px;
+      /* height: 100%; */
+      background-position: center;
+      /* position: absolute; */
+      top: -56px !important;
+      right: 290px;
+      bottom: 0;
+      left: -278px;
+      display: flex;
+      flex-direction: column;
+      width: 730px;
+      height: 462px;
+      margin: auto;
+      overflow: hidden;
+      background-size: 100% 100%;
+    }
+  }
+}
+
+.form_login {
+  width: 100%;
+  height: 100%;
+  .checkbox_wrap {
+    margin-bottom: @margin-md;
+    color: #0599F4;
+    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: #0599F4;
+      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: #0599F4 !important;
+    }
+    .panda-console-base-input-affix-wrapper:not(.panda-console-base-input-affix-wrapper-disabled):hover {
+      z-index: 1;
+      border-color: #0599F4;
+      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: #ccc;
+      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: #0599F4;
+    }
+    .panda-console-base-checkbox-wrapper:hover .panda-console-base-checkbox::after {
+      border-color: #0599F4;
+    }
+    .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: #0599F4;
+    }
+    .panda-console-base-checkbox-wrapper {
+      .panda-console-base-checkbox-checked .panda-console-base-checkbox-inner {
+        background-color: #0599F4;
+        border-color: #0599F4;
+      }
+      .panda-console-base-checkbox-inner {
+        border-color: #0599F4;
+        border-radius: 50%;
+      }
+    }
+    .panda-console-base-btn-lg {
+      width: 100%;
+    }
+    .panda-console-base-btn-primary {
+      background: #0599F4;
+      border-color: #0599F4;
+      border-radius: 23px;
+    }
+  }
+}