feat: 增加长水机场登录页

src/pages/user/login/index.js

@@ -8,6 +8,7 @@
  */
 import React, { useEffect } from 'react';
 import BaseLogin from './template/baseLogin';
+import ChangShuiJiChang from './template/changShuiJiChang';
 import NewYear from './template/newYear';
 import baseLoginNewYear from './template/baseLoginNewYear';
 import InfoLogin from './template/infoLogin';
@@ -60,6 +61,7 @@ const LoginTemplate = {
   '项目 - 威信.html': WeixinLogin,
   '全景图.html': PanoramaLogin,
   '项目 - 江西.html': JiangXi,
+  '项目 - 长水机场.html': ChangShuiJiChang,
   default: BaseLogin,
 };
 /* eslint-disable */

src/pages/user/login/template/changShuiJiChang.js

+import 'kit_utils/lib/format';
+
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+
+import { Modal } from 'antd';
+// eslint-disable-next-line import/no-unresolved
+import classNames from 'classnames';
+import { dom } from '@wisdom-utils/utils/lib/helpers';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
+import { connect } from 'react-redux';
+import { useHistory } from '@wisdom-utils/runtime';
+import { actionCreators } from '@/containers/App/store';
+import Cookies from 'js-cookie';
+import defaultSetting from '../../../../../config/defaultSetting';
+import LoginAction from '../login';
+import styles from '../style.less';
+import useRenderQcode from '../js/useRenderQcode';
+import Account from '../js/useAccount';
+import IotComponent from '../js/useIOTComponent';
+import { defaultApp } from '../../../../micro';
+import bgImg from '../../../../assets/images/login/背景.png';
+const Login = forwardRef((props, _ref) => {
+    const loginRef = useRef();
+    const timeRef = useRef();
+    const titleRef = useRef();
+    const sliVerify = useRef();
+    const loginFormRef = useRef();
+    const formRef = useRef(null);
+    const footerRef = useRef();
+    const [status, setStatus] = useState('normal');
+    const [autoLogin, setAutoLogin] = useState(false);
+    const [submitting, setSubmitting] = useState(false);
+    const [currentDate, setCurrentDate] = useState({});
+    const [type, setType] = useState('Account');
+    const [visible, setVisible] = useState(false);
+    const history = useHistory();
+    const [action, setAction] = useState(() => new LoginAction(Object.assign({}, props, { history }), setVisible, false));
+    const [showVideo, setShowVideo] = useState(false);
+    let { ddCode } = props.global;
+    const loginMode = Cookies.get('loginMode') || null;
+    if (loginMode && loginMode === 'iotWechat') ddCode = null;
+    // useEffect(() => {
+    //   action.globalConfig = props.global;
+    // }, [props.global]);
+
+    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]);
+
+    let loginTimeInterval = null;
+    let videoTimeout = null;
+    useEffect(() => {
+        if (loginTimeInterval)
+            clearInterval(loginTimeInterval), (loginTimeInterval = null);
+        loginTimeInterval = setInterval(() => {
+            const date = new Date();
+            const weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
+            const time = `${date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
+                }:${date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
+                }:${date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds()
+                }`;
+            setCurrentDate({
+                time,
+                dayofweek: weekday[date.getDay()],
+                date: date.pattern('yyyy/MM/dd'),
+            });
+        }, 1000);
+        return () => {
+            loginTimeInterval && clearInterval(loginTimeInterval);
+        };
+    }, []);
+
+    useEffect(() => {
+        dom.removeClass(loginRef.current, styles.caseHide);
+        dom.addClass(loginRef.current, styles.loginTimeShow);
+        videoTimeout = setTimeout(() => {
+            dom.removeClass(timeRef.current, styles.caseHide);
+            dom.addClass(timeRef.current, 'animate__fadeIn');
+            dom.removeClass(loginFormRef.current, styles.caseHide);
+            dom.addClass(loginFormRef.current, 'animate__fadeInUp');
+            dom.removeClass(footerRef.current, styles.caseHide);
+            dom.addClass(footerRef.current, 'animate__slideInUp');
+            dom.removeClass(titleRef.current, styles.caseHide);
+            dom.addClass(titleRef.current, 'animte__fadeInUp');
+        }, 500);
+    }, []);
+    useEffect(() => {
+        setSubmitting(false);
+    }, [visible]);
+    const renderAddons = useRenderQcode(props.global);
+    const renderPlatform = () => {
+        const template = props.global.loginTemplate;
+        const params = {
+            fromRef: formRef,
+            type,
+            setType,
+            status,
+            submitting,
+            autoLogin,
+            setAutoLogin,
+            action,
+            onSubmit: handleSubmit,
+            loginMode: props.loginMode,
+            updateLoginMode: props.updateLoginMode,
+        };
+        switch (template) {
+            case 'DarkCloud.html':
+            case 'Dark.html':
+                return <Account {...params} />;
+            case 'Dark - IOTMultiLogin.html':
+                return <IotComponent {...params} />;
+            default:
+                return <Account {...params} />;
+        }
+    };
+    /* eslint-disable */
+
+    return (
+        <HelmetProvider>
+            <Helmet>
+                <title>{props.global.title || defaultSetting.title}</title>
+                <meta name="description" content={props.global.title || defaultSetting.title} />
+            </Helmet>
+            <div className={styles.main} style={{ background: 'url(' + bgImg + ')' }}>
+                <div className={styles.inner}>
+                    <div
+                        className={classNames(styles.loginTime, styles.caseHide)}
+                        ref={loginRef}
+                    >
+                        <img
+                            role="logo"
+                            src={props.global && props.global.transformDevAssetsBaseURL && props.global.transformDevAssetsBaseURL(props.global.logo)}
+                        />
+                        <div
+                            className={classNames(
+                                styles.titleCase,
+                                styles.caseHide,
+                                'animated',
+                            )}
+                            ref={titleRef}
+                        >
+                            <span className={styles.title}>{props.global.title}</span>
+                            <span className={styles.subtitle}>
+                                {window.globalConfig && window.globalConfig.subtitle}
+                            </span>
+                        </div>
+                    </div>
+                    <span
+                        className={classNames(
+                            styles.divider,
+                            styles.caseHide,
+                            'animate__animated',
+                        )}
+                    />
+                    <div
+                        className={classNames(
+                            styles.timeCase,
+                            styles.caseHide,
+                            'animate__animated',
+                        )}
+                        ref={timeRef}
+                    >
+                        <span className={styles.time}>{currentDate.time}</span>
+                        <span className={styles.dayofweek}>{currentDate.dayofweek}</span>
+                        <span className={styles.date}>{currentDate.date}</span>
+                    </div>
+                    <div
+                        className={classNames(
+                            styles['login-block'],
+                            styles.caseHide,
+                            'animate__animated',
+                        )}
+                        ref={loginFormRef}
+                    >
+                        <div>
+                            <img src="https://panda-water.cn/web4/assets/images/login/dark/login.png" />
+                        </div>
+                        <div className={styles['login-form']}>{renderPlatform()}</div>
+                    </div>
+                </div>
+                <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,
+)((Login));