feat: 新增德庆登录页

public/web5Config.json

@@ -41,6 +41,9 @@
     },
     {
       "title": "项目 - 太湖"
+    },
+    {
+      "title": "项目 - 德庆"
     }
   ]
-}
+}
\ No newline at end of file

src/pages/user/login/index.js

@@ -23,7 +23,7 @@ import DarkNoEffect from './template/noEffect/DarkNoEffect';
 import CloudLogin from './template/cloud';
 import CloudNewLogin from './template/cloudNew';
 import WaterLogin from './template/water';
-import WaterLogin2 from './template/water/water.js';
+import WaterLogin2 from './template/water/water';
 import JSZHLogin from './template/project/JSZH';
 import ChengmaiLogin from './template/project/chengmai';
 import HuhehaoteLogin from './template/project/huhehaote';
@@ -57,6 +57,7 @@ import DiantouLogin from './template/project/diantou';
 import ChangchunLogin from './template/project/changchun';
 import TiemenguanLogin from './template/project/tiemenguan';
 import TaihuLogin from './template/project/taihu';
+import DeqingLogin from './template/project/deqing';
 import { AppInitState } from '../../../render';
 const LoginTemplate = {
   '新春.html': baseLoginNewYear,
@@ -111,6 +112,7 @@ const LoginTemplate = {
   '项目 - 长春.html': ChangchunLogin,
   '项目 - 铁门关.html': TiemenguanLogin,
   '项目 - 太湖.html': TaihuLogin,
+  '项目 - 德庆.html': DeqingLogin,
   default: BaseLogin,
 };
 /* eslint-disable */

src/pages/user/login/template/project/deqing/index.js

+/*
+ * 功能名称: 德庆登录页
+ * 功能路径:
+ * 功能参数:
+ */
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { Modal } from 'antd';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
+import { connect } from 'react-redux';
+import { useHistory, withRouter } from '@wisdom-utils/runtime';
+import { actionCreators } from '@/containers/App/store';
+import classnames from 'classnames';
+import moment from 'moment';
+import QueueAnim from 'rc-queue-anim';
+import LoginAction from '../../../login';
+import styles from './index.less';
+import Account from '../../../js/useAccount';
+import { defaultApp } from '../../../../../../micro';
+
+const defaultConf = {
+  title: '德庆县农村供水智慧化管理平台',
+  subTitle: '汇一脉水 · 筑供水梦',
+};
+
+const Login = forwardRef((props, _ref) => {
+  const sliVerify = useRef();
+  const videoRef = useRef();
+  const loginFormRef = useRef();
+  const formRef = useRef(null);
+  const [show, setShow] = useState(false);
+  const [autoLogin, setAutoLogin] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [type, setType] = useState('Account');
+  const [visible, setVisible] = useState(false);
+  const [videoShow, setVideoShow] = useState(true);
+  const history = useHistory();
+  const [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), setVisible, false));
+  const [dateObj, setDateObj] = useState({});
+
+  const handleSubmit = values => {
+    /* eslint-disable */
+    action &&
+      (type === 'Account'
+        ? action.loginHandler(values.userName, values.password, null, autoLogin, sliVerify)
+        : type === 'Mobile'
+        ? action.phoneLoginFormHandler(values.mobile, values.captcha)
+        : null);
+
+    setSubmitting(true);
+    props.updateCurrentIndex && props.updateCurrentIndex(-1);
+  };
+
+  useEffect(() => {
+    action &&
+      action.events.on('loginSuccess', event => {
+        setSubmitting(false);
+        props.updateCurrentIndex && props.updateCurrentIndex(0);
+        props.history.push(`/?client=${props.global.client}`);
+        defaultApp();
+      });
+    action &&
+      action.events.on('loginError', event => {
+        setVisible(false);
+        setSubmitting(false);
+      });
+    action &&
+      action.events.on('loginVisible', status => {
+        setVisible(status);
+      });
+    return () => {
+      action && action.events && action.events.removeAllListeners('loginSuccess');
+      action && action.events && action.events.removeAllListeners('loginError');
+      action && action.events && action.events.removeAllListeners('loginVisible');
+    };
+  }, [props.loginMode]);
+
+  useEffect(() => {
+    setSubmitting(false);
+  }, [visible]);
+
+  const renderPlatform = () => {
+    const params = {
+      fromRef: formRef,
+      type,
+      setType,
+      status: 'normal',
+      submitting,
+      autoLogin,
+      setAutoLogin,
+      action,
+      onSubmit: handleSubmit,
+      loginMode: props.loginMode,
+      updateLoginMode: props.updateLoginMode,
+      welcome: null,
+    };
+    return <Account {...params} />;
+  };
+
+  const handleWeek = () => {
+    const weekOfDay = Number(moment().format('E'));
+
+    let weekDayName = '';
+    switch (weekOfDay) {
+      case 1:
+        weekDayName = '周一';
+        break;
+      case 2:
+        weekDayName = '周二';
+        break;
+      case 3:
+        weekDayName = '周三';
+        break;
+      case 4:
+        weekDayName = '周四';
+        break;
+      case 5:
+        weekDayName = '周五';
+        break;
+      case 6:
+        weekDayName = '周六';
+        break;
+      case 7:
+        weekDayName = '周日';
+        break;
+      default:
+        weekDayName = '';
+    }
+    return weekDayName;
+  };
+
+  const onShow = () => {
+    if (!show) {
+      setShow(true);
+    }
+  };
+  const onended = () => {
+    if (videoShow) {
+      setVideoShow(false);
+    }
+    if (!show) {
+      setShow(true);
+    }
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (videoRef && videoRef.current) {
+        videoRef.current.addEventListener('ended', () => {
+          onended();
+        });
+      }
+    });
+    return () => {
+      videoRef.current && videoRef.current.removeEventListener('ended', () => {});
+    };
+  }, [videoRef]);
+
+  useEffect(() => {
+    return () => {};
+  }, [show]);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setDateObj({
+        curTime: moment().format('HH:mm:ss'),
+        week: handleWeek(),
+        date: moment().format('YYYY/MM/DD'),
+      });
+    }, 1000);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <HelmetProvider>
+      <Helmet>
+        <title>{props.global.title || defaultConf.title}</title>
+        <meta name="description" content={props.global.title || defaultConf.title} />
+      </Helmet>
+
+      <div className={classnames(styles.deqinglogin)} onClick={onShow}>
+        {show ? (
+          <div className={classnames(styles['wrapper'])}>
+            <QueueAnim type="scale" duration={1000}>
+              <div key={'innerwrapper'} className={classnames(styles['inner-wrapper'])}>
+                <div className={styles['inner-center']}>
+                  <div className={styles['welcome-title']}>
+                    {props.global.subtitle || defaultConf.subTitle}
+                  </div>
+                  <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
+                    {renderPlatform()}
+                  </div>
+                </div>
+              </div>
+            </QueueAnim> 
+
+            <div key="loginheader" className={classnames(styles['login-header'])}>
+              <QueueAnim type="left">
+                <div key="logintitle" className={styles['left-title']}>
+                  <div>
+                    <img alt="logo" src={
+                        props.global &&
+                        props.global.transformDevAssetsBaseURL &&
+                        props.global.transformDevAssetsBaseURL(props.global.logo)
+                      } 
+                    />
+                  </div>
+                  <div className={styles['cn-title']}>{props.global.title || defaultConf.title}</div>
+                </div>
+              </QueueAnim>
+              <QueueAnim type="right">
+                <div key="logintime" className={styles['right-timebox']}>
+                  <div className={styles['curr-time']}>{dateObj.curTime}</div>
+                  <div className={styles['curr-week-date']}>
+                    <div className={styles['curr-week']}>{dateObj.week}</div>
+                    <div className={styles['curr-date']}>{dateObj.date}</div>
+                  </div>
+                </div>
+              </QueueAnim>
+            </div>
+          </div>
+        ) : null}
+        {videoShow ? (
+          <video
+            src={require('@/assets/videos/deqing.mp4')}
+            className={styles.videoLayer}
+            autoPlay="autoPlay"
+            muted
+            playsInline="playsinline"
+            ref={videoRef}
+          />
+        ) : null}
+
+        <Modal centered visible={visible} width={340} footer={null} closable={false} bodyStyle={{ padding: '15px' }}>
+          <div ref={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(Login));

src/pages/user/login/template/project/deqing/index.less

+
+.deqinglogin {
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(#fff 5%, rgba(162, 215, 245, 1) 100%);
+    position: relative;
+    min-height: 7.0rem;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .videoLayer {
+        width: 100vw;
+        height: 100vh;
+        position: absolute;
+        top: 0;
+        left: 0;
+        object-fit: fill;
+    }    
+
+    .inner-bg {
+        width: 100%;
+        height: 100%;
+
+
+        &>div {
+            width: calc(100% - 100px);
+            margin: 20px 50px;
+        }
+    }
+
+    .inner-wrapper {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        top: 30%;
+        left: calc(50% - 240px);
+        z-index: 50;
+    }
+
+    .form-control:focus {
+        border-color: #66afe9;
+        outline: 0;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+
+    .inner-center {
+        position: relative;
+        width: 540px;
+        height: 380px;
+        background: rgba(255,255,255,0.3);
+        border: 1px solid #FFFFFF;
+        box-shadow: 0px 15px 15px 3px rgba(140,142,145,0.52);
+        border-radius: 15px;
+    }
+
+    .welcome-title {
+        height: 100px;
+        text-align: center;
+        line-height: 70px;
+        padding: 16px;
+        font-size: 39px;
+        font-weight: bolder;
+        color: #1685FF;
+        text-shadow: 0px 4px 5px #A3AFC7;
+        -webkit-text-stroke: 1px #FFFFFF;
+    }
+
+    .login-header {
+        box-sizing: border-box;
+        width: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 82px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 22px;
+        z-index: 50;
+
+        .left-title {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+
+            img {
+                width: 40px;
+            }
+
+            .cn-title {
+                font-size: 30px;
+                line-height: 1;
+                font-weight: 400;
+                color: #265499;
+                margin-left: 10px;
+            }
+        }
+
+        .right-timebox {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 60px;
+
+            .curr-time {
+                width: 140px;
+                font-size: 36px;
+                font-family: Microsoft YaHei;
+                font-weight: 300;
+                color: #265499;
+            }
+
+            .curr-week-date {
+                margin-left: 10px;
+
+                .curr-week {
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #265499;
+                }
+
+                .curr-date {
+                    font-size: 14px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #265499;
+                }
+            }
+        }
+    }
+}
+
+
+& :global {
+    .popover-style{
+        .@{ant-prefix}-popover-inner-content{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .@{ant-prefix}-popover-title{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}
+
+:global{
+    .popover-style{
+        .@{ant-prefix}-popover-inner-content{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .@{ant-prefix}-popover-title{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+}
\ No newline at end of file