feat: 新增铁山首页

config/config.js

@@ -53,6 +53,23 @@ module.exports = {
   cssLoader: {
     modules: {
       getLocalIdent: (context, _, localName) => {
+
+        if (/@wisdom-cesium/.test(context.resourcePath)) {
+    
+          const matchRule = slash(context.resourcePath).match(/@wisdom-cesium\/(krpano)(.*).less$/)
+          if (matchRule && matchRule[2]) {
+            if (/rc-slider/.test(matchRule[0])) {
+              return localName
+            }
+            const className = matchRule[2].
+              split('/')
+              .map(a => a.replace(/([A-Z])/g, '-$1'))
+              .map(a => a.toLowerCase()).join('-')
+            return `panda-krpano-${className}-${localName}`.replace(/--/g, '-')
+          }
+          return localName
+        }
+
         if (
           context.resourcePath.includes('node_modules') ||
           context.resourcePath.includes('ant.design.pro.less') ||

package.json

@@ -107,6 +107,7 @@
         "@babel/runtime": "^7.10.5",
         "@esri/calcite-colors": "6.0.3",
         "@wisdom-cesium/cesium": "^1.1.5",
+        "@wisdom-cesium/krpano": "^1.0.28-2",
         "@wisdom-components/basictable": "^1.5.16",
         "@wisdom-components/empty": "^1.4.1",
         "@wisdom-map/amap": "1.1.0-beta.42",

src/pages/user/login/components/Krpano/index.js

+import {Preview} from '@wisdom-cesium/krpano'
+
+const Krpano = props => {
+
+    const {projectName} = props
+    
+    return (<div
+        style={{
+            position : "relative",
+            width : "100%",
+            height : "100%"
+        }}
+    >
+        <Preview projectName = {projectName}/>
+    </div>)
+}
+
+export default Krpano
\ No newline at end of file

src/pages/user/login/index.js

@@ -23,6 +23,7 @@ import HuhehaoteLogin from './template/project/huhehaote';
 import XinganLogin from './template/project/xingan';
 import ErlianhaoteLogin from './template/project/erlianhaote';
 import YixianLogin from './template/project/yixian';
+import PanoramaLogin from './template/panorama';
 import { AppInitState } from '../../../render';
 const LoginTemplate = {
   '新春 - 智联.html': NewYear,
@@ -42,6 +43,7 @@ const LoginTemplate = {
   '项目 - 新干.html': XinganLogin,
   '项目 - 二连浩特.html': ErlianhaoteLogin,
   '项目 - 易县.html': YixianLogin,
+  '全景图.html' : PanoramaLogin,   
   default: BaseLogin,
 };
 /* eslint-disable */

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

+import BaseLogin from "../baseLogin"
+import TieShanLogin from "../project/tieshan"
+import { useState , useEffect } from "react"
+
+const LoginTemplate = {
+    "铁山" : TieShanLogin,
+    default : BaseLogin
+}
+
+const Panorama = props => {
+    const {loginParams , ...reset} = props
+
+    const [params, setParams] = useState({})
+
+    useEffect(() => {
+        
+        if(!loginParams) {
+            setParams({})
+        } else {
+            const params = {}
+            loginParams.map(data => {
+                const [key , value] = data.split("=")
+                params[key] = value
+            })
+            setParams(params)
+        }
+        
+    }, [loginParams]);
+
+   const LoginCompontnt =  params['projectName'] && LoginTemplate[params['项目']] ? LoginTemplate[params['项目']] : 
+   params['projectName'] ? LoginTemplate["default"] : LoginTemplate['default']
+
+   return (<LoginCompontnt {...reset} loginParams = {params}/>)
+}
+
+export default Panorama
\ No newline at end of file

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

+import styles from './index.less'
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import LoginAction from '../../../login';
+import Account from '../../../js/useAccount';
+import moment from 'moment';
+import classnames from 'classnames';
+import { Modal, Popover } 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 defaultSetting from '../../../../../../../config/defaultSetting';
+import { defaultApp } from '../../../../../../micro';
+import logo from './images/logo.png'
+import titleImage1 from './images/涓涓清泉.png'
+import titleImage2 from './images/润泽万家.png'
+import Krpano from '../../../components/Krpano';
+
+const TieShanLogin = forwardRef((props, _ref) => {
+    const sliVerify = useRef();
+    const loginFormRef = useRef();
+    const formRef = useRef(null);
+    const [status, setStatus] = useState('normal');
+    const [autoLogin, setAutoLogin] = useState(false);
+    const [submitting, setSubmitting] = useState(false);
+    const [type, setType] = useState('Account');
+    const [visible, setVisible] = useState(false);
+    const history = useHistory();
+    const [dateObj, setDateObj] = useState({});
+    const {projectName} = props.loginParams
+    const [action, setAction] = useState(
+        () =>
+            new LoginAction(Object.assign({}, props, { history }), setVisible, false),
+    );
+
+    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(() => {
+        // if (props.loginMode === LOGIN_WAY.WeChart) {
+        action &&
+            action.events.on('loginSuccess', event => {
+                setSubmitting(false);
+                props.updateCurrentIndex && props.updateCurrentIndex(0);
+                props.history.push(`/?client=${props.global.client}`);
+                // window.share.event.emit('triggerMicro', props.global);
+                // initMicroApps();
+
+                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 template = props.global.loginTemplate;
+        const params = {
+            fromRef: formRef,
+            type,
+            setType,
+            status,
+            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 0:
+                weekDayName = '周日'
+                break
+            default:
+                weekDayName = ''
+        }
+        return weekDayName
+    }
+
+    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 || defaultSetting.title}</title>
+                <meta name="description" content={props.global.title || defaultSetting.title} />
+            </Helmet>
+            <div className={styles.tieshanLogin}>
+                <div className={styles['inner-wrapper']}>
+                    {/* <div className={styles['left-imgbox']}></div> */}
+                    <div className={styles['inner-center']}>
+                        <div className={styles['welcome-title']}>
+                            {/* <img src={loginTitlePng} alt="login-title" /> */}
+                            <div className={styles['welcome-slogan']}>
+                                <img src={titleImage1} />
+                            </div>
+                            <span className={styles['welcome-split']}></span>
+                            <div className={styles['welcome-slogan']}>
+                                <img src={titleImage2} />
+                            </div>
+                        </div>
+                        <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
+                            {renderPlatform()}
+                        </div>
+                    </div>
+                </div>
+                <div className={styles['login-header']}>
+                    <div className={styles['left-title']}>
+                        <div>
+                            <img src={logo} />
+                        </div>
+                        <div className={styles['cn-title']}>铁山原水供水调度管理平台</div>
+                    </div>
+                    <div 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>
+                </div>
+                <div className={styles['krpano']}>
+                    <Krpano projectName = {projectName}/>
+                </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,
+)(withRouter(TieShanLogin));
\ No newline at end of file

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

+.tieshanLogin{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    min-height: 7.0rem;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .inner-bg {
+        width: 100%;
+        height: 100%;
+    
+    
+        &>div {
+            width: 70%;
+            margin: 0 auto;
+        }
+    }
+
+    .inner-bg .title {
+        font-size: 27px;
+        font-weight: bold;
+        color: rgba(255, 255, 255, 1);
+        letter-spacing: 2px;
+    }
+
+    .form-control:focus {
+        border-color: #66afe9;
+        outline: 0;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+
+    .inner-wrapper {
+        // width: 800px;
+        // height: 400px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 10px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 100;
+        background-color: rgba(255, 255, 255, .4);
+        // bottom: 20%;
+        //   top: 46%;
+        //   right: 0;
+        //   transform: translateY(-50%);
+    }
+
+
+    .inner-center {
+        position: relative;
+        width: 482px;
+        height: 316px;
+        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{
+        width: 100%;
+        height: 68px;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: nowrap;
+        background: linear-gradient(#0061E4 , #00CEFA);
+        margin-bottom: 24px;
+        border-top-left-radius: 15px;
+        border-top-right-radius: 15px;
+        .welcome-split{
+            height: 30px;
+            width: 1px;
+            background-color: #eee;
+            margin: 0 20px;
+        }
+        .welcome-slogan{
+            vertical-align: middle;
+            margin-top: 3px;
+        }
+
+        // line-height: 68px;
+        // font-size: 24px;
+        // font-family: PingFang SC;
+        // font-weight: bold;
+        // color: #000000;
+        // opacity: 0.85;
+        // text-align: center;
+
+    }
+    
+    .formgroup2 {
+        display: flex;
+        align-items: center;
+        display: flex;
+        margin: 0px 5.5%;
+        margin-bottom: 10%;
+        align-items: center;
+        margin-bottom: 40px;
+    }
+
+    .APPcodeBox {
+        width: 100%;
+        display: flex;
+        flex-flow: column;
+        align-items: center;
+        cursor: pointer;
+        position: relative;
+    }
+    
+    .APPCtext {
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #000000;
+        line-height: 30px;
+        opacity: 0.75;
+    }
+
+
+    .login-header{
+        width: 100%;
+        position: absolute;
+        top: 0;
+        padding: 0 38px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        z-index: 100;
+        background: url('./images/header.png');
+        .left-title{
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            .cn-title{
+                font-size: 26px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #FFFFFF;
+                margin-left: 10px;
+            }
+            .en-title{
+                font-size: 12px;
+                font-family: Microsoft YaHei;
+                font-weight: 400;
+                color: #FFFFFF;
+                opacity: 0.65;
+            }
+        }
+        .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: #FFFFFF;
+            }
+            .curr-week-date{
+                margin-left: 10px;
+                .curr-week{
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #FFFFFF;
+                }
+                .curr-date{
+                    font-size: 14px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #FFFFFF;
+                }
+            }
+        }
+    }
+
+    .copyright{
+        position: absolute;
+        bottom: 7%;
+        width: 100%;
+        margin: 0 auto;
+        font-size: 12px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #F1F6FD;
+        text-align: center;
+    }
+    .qrcode-box{
+        position: absolute;
+        bottom: 0;
+        right: -35px;
+        width: 35px;
+        height: 35px;
+        background: #FFFFFF;
+        opacity: 0.8;
+        cursor: pointer;
+    }
+
+    .krpano{
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+    }
+}
\ No newline at end of file