feat: add pages/transitionalpagee

config/proxy.js

@@ -5,10 +5,10 @@ module.exports = {
       // target: 'https://panda-water.cn',
       // target: 'http://192.168.19.102:8055',
 
-      target: 'https://panda-water.com',
+      // target: 'https://panda-water.com',
       // target: 'http://192.168.10.150:8050',
       // target: 'http://192.168.19.103:8112',
-      // target: 'http://192.168.12.8:8098',
+      target: 'http://192.168.12.8:8098',
       // target: 'http://192.168.10.20:8888',
       changeOrigin: true,
       headers: {

src/components/NoticeIcon/NoticeList.js

@@ -23,7 +23,7 @@ class NoticeList extends React.Component {
     super(props);
     this.emptyText = props.emptyText;
     this.confirmRead = props.confirmRead;
-    this.handlerSysDetail = props.handlerSysDetail
+    this.handlerSysDetail = props.handlerSysDetail;
     this.loadMore = props.loadMore;
     this.hasMore = props.hasMore;
     this.container = React.createRef();

src/components/NoticeIcon/Templates/Notice/index.js

@@ -17,7 +17,6 @@ export class NoticeContent {
 }
 
 const Notice = ({ message, confirmRead, config, handlerSysDetail }) => {
-
   // eslint-disable-next-line no-debugger
   const noticeContent =
     config.mqtt_mess.MessageLevel === '2.0' && isJSON(message.infoContent)
@@ -25,7 +24,7 @@ const Notice = ({ message, confirmRead, config, handlerSysDetail }) => {
       : message.infoContent;
   const goPath = item => {
     // eslint-disable-next-line no-debugger
-    debugger
+    debugger;
     // eslint-disable-next-line no-debugger
     confirmRead(false, [message.id]);
     handlerSysDetail && handlerSysDetail(message);

src/components/Notifier/index.js

@@ -16,7 +16,8 @@ import {
   NEW_MESSAGE,
   PASSWORD,
   PLATFORM_LEVEL,
-  REQUEST_SERVICE, SYS_LEVEL,
+  REQUEST_SERVICE,
+  SYS_LEVEL,
   USERNAME,
   VIDEO_LEVEL,
 } from './constants';

src/layouts/Site.js

@@ -365,7 +365,6 @@ class Site {
   }
 
   beforeChangeCheck(token, site) {
-
     // eslint-disable-next-line no-undef
     services
       .getUserInfo({

src/pages/transitionalpage/index.js

+/* eslint-disable prettier/prettier */
+/* eslint-disable global-require */
+import React, { useCallback, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { connect } from 'react-redux';
+import { Space, Spin } from 'antd';
+import styles from './index.less';
+import SecurityLayout from '../../layouts/SecurityLayout';
+import LoginAction from '../user/login/login';
+import { actionCreators } from '../../containers/App/store';
+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={{
+              backgroundImage: `url(${require('../../assets/transitionalpage/' +
+                item +
+                '.png')})`,
+            }}
+          >
+            <div
+              className={classNames(styles.bootPagelbBox, styles.bootPageitem)}
+              type={item}
+              key={item}
+              onClick={event => callback(event, item)}
+              onMouseEnter={e => {
+                this.mouseOveHandle(item);
+              }}
+              onMouseLeave={e => {
+                this.mouseOutHandle(item);
+              }}
+              style={{
+                backgroundImage: `url(${require('../../assets/transitionalpage/' +
+                  (!this.state[item] ? item + '图.jpg' : item + '图动.gif'))})`,
+              }}
+            >
+              <div>{item}</div>
+              {/* <div className={styles.bootPageitemImgB}>
+            </div> */}
+            </div>
+          </div>
+        );
+      })
+    );
+  }
+  render() {
+    const data = ['项目案例', '智慧能源', '智慧消防'];
+    return (
+      <div className={styles.bootPagelBottom}>{this.renderList(data)}</div>
+    );
+  }
+}
+class RightBox extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  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)}
+          >
+            <div className={styles.bootPagebTitle}>{item}</div>
+            <div className={styles.bootPagebContent}>
+              <img
+                src={require(`../../assets/transitionalpage/${item}图.png`)}
+              />
+            </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 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}>
+                熊猫智慧城市监控管理解决方案
+              </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);

src/pages/transitionalpage/index.less

+@import '~antd/es/style/themes/default.less';
+.bootPage {
+  background: url(../../assets/transitionalpage/背景.png) no-repeat top center;
+  background-size: cover;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+  .bootPageMain {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    .bootPageHead {
+      height: 150px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      flex: none;
+      padding-top: 50px;
+      .bootPageTitle {
+        display: flex;
+        flex-direction: column;
+        margin-left: 20px;
+      }
+      .bootPageZh {
+        font-weight: 500;
+        font-size: 34px;
+        letter-spacing: 5px;
+      }
+    }
+    .bootPageSection {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+      height: calc(100% - 250px);
+      margin: 20px 0;
+      overflow: auto;
+      .bootPagesContent {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        list-style: none;
+        justify-content: center;
+        align-items: center;
+        transition: all 0.5s ease-out;
+        .bootPageLeft {
+          margin-right: 10px;
+          .bootPagelTop {
+            width: 968px;
+            height: 374px;
+            background: url(../../assets/transitionalpage/智慧水务.png)
+              no-repeat;
+            background-size: 100% 100%;
+            margin-bottom: 10px;
+            display: flex;
+            flex-direction: column;
+            .bootPageltTitle {
+              padding: 30px;
+              display: flex;
+              align-items: flex-end;
+              b {
+                font-size: 24px;
+                color: #ffffff;
+                padding-right: 16px;
+              }
+              span {
+                font-weight: normal;
+                color: #a5d3f6;
+                font-size: 20px;
+              }
+            }
+            .bootPageltBox {
+              flex: 1;
+              overflow: hidden;
+              display: flex;
+              justify-content: space-around;
+              .bootPageitem {
+                flex: 1;
+                overflow: hidden;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                font-size: 24px;
+                color: #ffffff;
+                font-weight: normal;
+                .bootPageitemBall {
+                  position: relative;
+                  cursor: pointer;
+                  .bootPageitemb {
+                    width: 160px;
+                    height: 143px;
+                    position: absolute;
+                    left: -4px;
+                    top: 3px;
+                    z-index: 1;
+                  }
+                  .bootPageitemc {
+                    width: 154px;
+                    height: 154px;
+                  }
+                }
+                .bootPageitemBall:hover .bootPageitemc {
+                  animation: _rotate 1.8s infinite linear;
+                }
+              }
+            }
+          }
+          .bootPagelBottom {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .bootPagelbBox {
+              color: #ffffff;
+              font-size: 24px;
+              font-weight: normal;
+              display: flex;
+              align-items: center;
+              padding: 6px;
+              width: 316px;
+              height: 181px;
+              div {
+                width: 50%;
+                text-align: left;
+                flex: 1;
+                padding-left: 13px;
+              }
+              .bootPageitemImgB {
+                width: 190px;
+                position: relative;
+                height: 163px;
+                flex: none;
+                img {
+                  width: 190px;
+                  height: 163px;
+                  flex: none;
+                  position: absolute;
+                  left: 17px;
+                  top: 19px;
+                }
+              }
+            }
+            .bootPageitem {
+              cursor: pointer;
+            }
+            .bootPagelbBox[type='项目案例'] {
+              background: url(../../assets/transitionalpage/项目案例.png)
+                no-repeat;
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+            }
+            .bootPagelbBox[type='智慧能源'] {
+              background: url(../../assets/transitionalpage/智慧能源.png)
+                no-repeat;
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+            }
+            .bootPagelbBox[type='智慧消防'] {
+              background: url(../../assets/transitionalpage/智慧消防.png)
+                no-repeat;
+              background-size: 100% 100%;
+              background-repeat: no-repeat;
+            }
+          }
+        }
+        .bootPageRight {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          height: 566px;
+          .bootPagerBox {
+            color: #ffffff;
+            font-size: 24px;
+            font-weight: normal;
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            padding: 6px;
+            flex-direction: column;
+            width: 323px;
+            height: 278px;
+            .bootPagebTitle {
+              padding: 20px 15px;
+            }
+            .bootPagebContent {
+              width: 100%;
+              text-align: right;
+              img {
+                width: 189px;
+                height: 192px;
+              }
+            }
+          }
+          .bootPagerBox[type='智能大数据'] {
+            background: url(../../assets/transitionalpage/智能大数据.png)
+              no-repeat;
+            background-size: 100% 100%;
+          }
+          .bootPagerBox[type='智能实验室'] {
+            background: url(../../assets/transitionalpage/智能实验室.png)
+              no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
+    .bootPagecopyright {
+      color: #ffffff;
+      width: 100%;
+      text-align: center;
+      font-size: 14px;
+      flex: none;
+      height: 100px;
+      a {
+        color: #ffffff;
+        text-decoration: none;
+      }
+      a:hover {
+        color: #ffffff;
+        text-decoration: none;
+      }
+    }
+  }
+  .abs {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  @keyframes _rotate {
+    form {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+@media screen and (max-width: 1440px) {
+  .bootPage {
+    .bootPageHead {
+      .bootPageZh {
+        font-size: 26px;
+      }
+      .bootPageEn {
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 1440px) and (max-width: 1600px) {
+  .bootPage {
+    .bootPageHead {
+      .bootPageZh {
+        font-size: 30px;
+      }
+      .bootPageEn {
+        font-size: 14px;
+      }
+    }
+  }
+}

src/routes/config.js

 import BasicLayout from '../layouts/BasicLayout';
 import UserLayout from '../layouts/UserLayout';
 import BootPage from '../pages/bootpage';
+// import BootPage from '../pages/transitionalpage';
 import NotFound from '../pages/exception/404';
 import ServiceFail from '../pages/exception/500';
 import Login from '../pages/user/login';

src/utils/utils.js

@@ -64,7 +64,7 @@ export function findPathByLeafId(leafId, nodes, path, key) {
   for (let i = 0; i < nodes.length; i++) {
     if (nodes[i] && nodes[i][key] && leafId === nodes[i][key]) {
       tmpPath = nodes[i];
-      cache[leafId] = tmpPath
+      cache[leafId] = tmpPath;
       return tmpPath;
     }
     if (nodes[i] && nodes[i].routes) {
@@ -77,7 +77,7 @@ export function findPathByLeafId(leafId, nodes, path, key) {
         location,
       );
       if (findResult) {
-        cache[leafId] = findResult
+        cache[leafId] = findResult;
         return findResult;
       }
     }