/* eslint-disable prettier/prettier */ /* eslint-disable global-require */ import React, { useCallback, useEffect, useState, } from 'react'; import { Space, Spin, } from 'antd'; import classNames from 'classnames'; import { connect } from 'react-redux'; import { actionCreators } from '../../containers/App/store'; import SecurityLayout from '../../layouts/SecurityLayout'; import LoginAction from '../user/login/login'; import styles from './index.less'; class WaterBox extends React.Component { // eslint-disable-next-line no-useless-constructor constructor(props) { super(props); } renderList(data) { const { callback } = this.props; /* eslint-disable */ return ( data && data.length && data.map(item => ( <div className={classNames(styles.bootPageltbCase, styles.bootPageitem)} type={item} key={item} > <div className={styles.bootPageitemBall} onClick={event => callback(event, item)} > <img className={styles.bootPageitemb} src={require(`../../assets/transitionalpage/${item}球.png`)} /> <img className={styles.bootPageitemc} src={require(`../../assets/transitionalpage/旋转圆.png`)} /> </div> <div>{item}</div> </div> )) ); } render() { const data = ['供水', '农饮水', '排水', '节水']; return ( <div className={styles.bootPagelTop}> <div className={styles.bootPageltTitle}> <b>智慧水务</b> <span>SMART WATER</span> </div> <div className={styles.bootPageltBox}>{this.renderList(data)}</div> </div> ); } } class ProjectBox extends React.Component { constructor(props) { super(props); this.state = { 项目案例: false, 智慧能源: false, 智慧消防: false, }; } mouseOveHandle(type) { this.setState({ [type]: true, }); } mouseOutHandle(type) { this.setState({ [type]: false, }); } renderList(data) { const { callback } = this.props; return ( data && data.length && data.map(item => { return ( <div style={{ background: `url(${require('../../assets/transitionalpage/' + item + '项目案例.png')})`, }} key={item} > <div className={classNames(styles.bootPagelbBox, styles.bootPageitem)} type={item} onClick={event => callback(event, item)} style={{ background: `url(${require('../../assets/transitionalpage/' + item + '图.jpg')})`, }} onMouseEnter={e => this.mouseOveHandle(item)} onMouseLeave={e => this.mouseOutHandle(item)} > <img src={ this.state[item] ? require(`../../assets/transitionalpage/${item}图动.gif`) : require(`../../assets/transitionalpage/${item}图.jpg`) } /> <div>{item}</div> </div> </div> ); }) ); } render() { const data = ['项目案例', '智慧能源', '智慧消防']; return ( <div className={styles.bootPagelBottom}>{this.renderList(data)}</div> ); } } class RightBox extends React.Component { constructor(props) { super(props); this.state = { 智能大数据: false, 智能实验室: false, }; } mouseOveHandle(type) { this.setState({ [type]: true, }); } mouseOutHandle(type) { this.setState({ [type]: false, }); } renderList(data) { const { callback } = this.props; return ( data && data.length && data.map(item => { return ( <div className={styles.bootPagerBox} type={item} key={item} onClick={event => callback(event, item)} style={{ background: `url(${require('../../assets/transitionalpage/' + item + '图.jpg')})`, }} onMouseEnter={e => this.mouseOveHandle(item)} onMouseLeave={e => this.mouseOutHandle(item)} > <img src={ this.state[item] ? require(`../../assets/transitionalpage/${item}图动.gif`) : require(`../../assets/transitionalpage/${item}图.jpg`) } /> <div className={styles.bootPagebTitle}>{item}</div> </div> ); }) ); } render() { const data = ['智能大数据', '智能实验室']; return <div className={styles.bootPageRight}>{this.renderList(data)}</div>; } } const BootPage = props => { const [loadding, setLoadding] = useState(false); const [scale, setScale] = useState(1); const intl = useIntl(); const handlePage = useCallback((event, type) => { event.persist(); setLoadding(true); const config = props.global; const loginAction = new LoginAction(props); config.uiwidgets = []; config.widgets = []; config.allWidgets = []; props.instance && props.instance.updateConfig(config); // props.instance && props.instance.getUserInfoAndConfig('', true, type); loginAction.getUserInfoAndConfig('', true, type); // eslint-disable-next-line no-shadow loginAction.events.on('toggleIndustry', event => { setLoadding(false); props.history.push(`/?client=${props.global.client}`); window.share.event.emit('triggerMicro', props.global); props.updateCurrentIndex(0); // eslint-disable-next-line no-restricted-globals location.reload(); }); }, []); useEffect(() => { // eslint-disable-next-line no-use-before-define handleResize(); }, []); const handleResize = () => { const width = document.documentElement.clientWidth; const height = document.documentElement.clientHeight; // eslint-disable-next-line no-shadow const scale = width / 1920; setScale(scale); }; useEffect(() => { window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; }); return ( <SecurityLayout> <div className={styles.bootPage}> <div className={styles.bootPageMain}> <header className={styles.bootPageHead}> <img src={require(`../../assets/transitionalpage/熊猫图标.png`)} alt="" /> <div className={styles.bootPageTitle}> <span className={styles.bootPageZh}> {intl.formatMessage({id: 'pages.settings.bootpage.title'})} </span> </div> </header> <section className={styles.bootPageSection}> <div className={classNames( styles.bootPagesContent, 'animate__animated', )} style={{ transform: `scale(${scale})`, opacity: 1, }} > <div className={styles.bootPageLeft}> <WaterBox callback={handlePage} /> <ProjectBox callback={handlePage} /> </div> <RightBox callback={handlePage} /> </div> </section> <div className={styles.bootPagecopyright}> Copyright © <a target="_blank" href="https://panda-water.cn"> 熊猫智慧水务 </a> {new Date().getFullYear()} All Rights Reserved <a target="_blank" id="IndexCaseNumber" href=""> 沪ICP备11036640-1 </a> </div> <Space className={styles.abs}> <Spin spinning={loadding} size="large" /> </Space> </div> </div> </SecurityLayout> ); }; const mapStateToProps = state => ({ global: state.getIn(['global', 'globalConfig']), instance: state.getIn(['global', 'instance']), }); const mapDispatchToProps = dispatch => ({ updateConfig(config) { dispatch(actionCreators.getConfig(config)); }, createContext(data) { dispatch(actionCreators.createContext(data)); }, updateCurrentIndex(index) { dispatch(actionCreators.updateCurrentIndex(index)); }, }); export default connect( mapStateToProps, mapDispatchToProps, )(BootPage);