Merge branch master into devNew

internals/webpack/css.js

@@ -196,4 +196,4 @@ function css({
 module.exports = {
     createCSSRule,
     css
-}
\ No newline at end of file
+}

package.json

@@ -119,7 +119,7 @@
         "@wisdom-map/util":"1.2.9",
         "@wisdom-utils/components": "0.1.370",
         "@wisdom-utils/runtime": "0.0.51",
-        "@wisdom-utils/utils": "0.1.407",
+        "@wisdom-utils/utils": "0.1.408",
         "animate.css": "^4.1.1",
         "antd": "4.21.2",
         "bcryptjs": "2.4.3",

public/web5Config.json

@@ -6,6 +6,9 @@
     {
       "title": "Water"
     },
+    {
+      "title": "Water2"
+    },
     {
       "title": "信息化"
     },
@@ -26,6 +29,15 @@
     },
     {
       "title": "项目 - 封丘"
+    },
+    {
+      "title": "项目 - 店头"
+    },
+    {
+      "title": "项目 - 长春"
+    },
+    {
+      "title": "项目 - 铁门关"
     }
   ]
-}
\ No newline at end of file
+}

src/api/service/base.js

@@ -22,6 +22,7 @@ export const API = {
   CHANGE_PASSWORD: 'cityinterface/rest/services.svc/changepassword',
   CHANGE_PASSWORD_SAFE: '/PandaOMS/OMS/UserCenter/UpdateUserPassword',
   HD_AUTH_LOGIN: '/PandaCore/GCK/BussinessAuth/HDAuthLogin',
+  AUTH_HDU_SER: '/PandaWater/CityWater/SJZGX/AuthHDUSer',
   IOT_CHANGE_PASSWORD: 'CityInterface/rest/services/OMS.svc/U_UpdatePasswordQuickGCK',
   FILE_DOWNLOAD: '/cityinterface/rest/services/filedownload.svc/download',
   UPDATE_AVATAR: '/CityInterface/rest/services/OMs.svc/U_EditUser',
@@ -89,6 +90,11 @@ const services = {
     method: constants.REQUEST_METHOD_GET,
     type: constants.REQUEST_HTTP,
   },
+  AuthHDUSer: {
+    url: API.AUTH_HDU_SER,
+    method: constants.REQUEST_METHOD_GET,
+    type: constants.REQUEST_HTTP,
+  },
   authorizationToken: {
     url: API.AUTHORIZATION_TOKEN,
     method: constants.REQUEST_METHOD_GET,

src/index.ejs

@@ -9,7 +9,7 @@
     <!-- Allow installing the app to the homescreen -->
     <meta name="mobile-web-app-capable" content="yes" />
     <!-- <link rel="icon" href="/favicon.ico" /> -->
-<!--    <link type="text/css" rel="stylesheet" id="theme-style" href="https://panda-water.cn/civbase/theme/sunset.css">-->
+    <link type="text/css" rel="stylesheet" id="theme-style" href="/civbase/Assets/esri/css/main.css">
     <script src="/civbase/event.js"></script>
     <script crossorigin src="/civbase/isomorphic-fetch.js"></script>
     <script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>

src/pages/bootpage/template/constants.js

@@ -8,6 +8,7 @@ import Demonstration from './demonstration';
 import PandaBootPage from './panda';
 import IntegrationPage from './integration';
 import IntegrationPage2 from './integration2';
+import TaihuPage from './project/taihu';
 export const guidePage = [
   // type 为true 则需要 功能配置 isPanda 为true
   {
@@ -15,9 +16,13 @@ export const guidePage = [
     value: 'default',
   },
   {
-    label: '集成登录演示',  
+    label: '集成登录演示',
     value: 'integration2',
   },
+  {
+    label: '太湖集成登录',
+    value: 'taihuPage',
+  },
   {
     label: '演示环境(旧版)',
     type: true,
@@ -34,4 +39,5 @@ export const BootPageTemplate = {
   panda: PandaBootPage,
   integration2: IntegrationPage2,
   demonstration: Demonstration,
+  taihuPage: TaihuPage,
 };

src/pages/bootpage/template/integration2/data.json

 {
-    "业务中心": [
-        {
-            "name": "工作台",
-            "label": "",
-            "url": ""
-        },
-        {
-            "name": "应用中心",
-            "url": ""
-        },
-        {
-            "name": "指标中心",
-            "url": ""
-        },
-        {
-            "name": "报表中心",
-            "url": ""
-        }
-    ],
-    "运营中心": [
-        {
-            "name": "综合展示",
-            "label": "",
-            "url": ""
-        },
-        {
-            "name": "原水制水",
-            "url": ""
-        },
-        {
-            "name": "管网输配",
-            "url": ""
-        },
-        {
-            "name": "营销客服",
-            "url": ""
-        }
-    ],
-    "应用系统": [
-        {
-            "name": "生产管理",
-            "label": "",
-            "url": ""
-        },
-        {
-            "name": "供水管网探测",
-            "url": ""
-        },
-        {
-            "name": "管网运营",
-            "url": ""
-        },
-        {
-            "name": "管网调度",
-            "url": ""
-        },
-        {
-            "name": "漏损管控",
-            "url": ""
-        },
-        {
-            "name": "二次供水平台",
-            "url": ""
-        },
-        {
-            "name": "营收系统",
-            "url": ""
-        },
-        {
-            "name": "抄表系统",
-            "url": ""
-        },
-        {
-            "name": "报装系统",
-            "url": ""
-        },
-        {
-            "name": "网上营业厅",
-            "url": ""
-        }
-    ],
-    "支撑平台": [
-        {
-            "name": "公共平台",
-            "url": ""
-        },
-        {
-            "name": "报警平台",
-            "url": ""
-        },
-        {
-            "name": "组态平台",
-            "url": ""
-        },
-        {
-            "name": "GIS发布平台",
-            "url": ""
-        },
-        {
-            "name": "物理网设备管理",
-            "url": ""
-        },
-        {
-            "name": "行业大数据平台",
-            "url": ""
-        }
-    ]
-}
\ No newline at end of file
+  "业务中心": [
+    {
+      "name": "工作台",
+      "label": "",
+      "url": ""
+    },
+    {
+      "name": "应用中心",
+      "url": ""
+    },
+    {
+      "name": "指标中心",
+      "url": ""
+    },
+    {
+      "name": "报表中心",
+      "url": ""
+    }
+  ],
+  "运营中心": [
+    {
+      "name": "综合展示",
+      "label": "",
+      "url": ""
+    },
+    {
+      "name": "原水制水",
+      "url": ""
+    },
+    {
+      "name": "管网输配",
+      "url": ""
+    },
+    {
+      "name": "营销客服",
+      "url": ""
+    }
+  ],
+  "应用系统": [
+    {
+      "name": "生产管理",
+      "label": "",
+      "url": ""
+    },
+    {
+      "name": "供水管网探测",
+      "url": ""
+    },
+    {
+      "name": "管网运营",
+      "url": ""
+    },
+    {
+      "name": "管网调度",
+      "url": ""
+    },
+    {
+      "name": "漏损管控",
+      "url": ""
+    },
+    {
+      "name": "二次供水平台",
+      "url": ""
+    },
+    {
+      "name": "营收系统",
+      "url": ""
+    },
+    {
+      "name": "抄表系统",
+      "url": ""
+    },
+    {
+      "name": "报装系统",
+      "url": ""
+    },
+    {
+      "name": "网上营业厅",
+      "url": ""
+    }
+  ],
+  "支撑平台": [
+    {
+      "name": "公共平台",
+      "url": ""
+    },
+    {
+      "name": "报警平台",
+      "url": ""
+    },
+    {
+      "name": "组态平台",
+      "url": ""
+    },
+    {
+      "name": "GIS发布平台",
+      "url": ""
+    },
+    {
+      "name": "物理网设备管理",
+      "url": ""
+    },
+    {
+      "name": "行业大数据平台",
+      "url": ""
+    }
+  ],
+  "标题": "智慧水务综合监控平台"
+}

src/pages/bootpage/template/integration2/index.js

@@ -71,10 +71,8 @@ const Integration = props => {
       })
       .then(res => {
         if (res.code === 0 && res.data) {
-          const data = JSON.parse(res.data);
-          console.log('🚀 ~ data:', data);
-          setConfigData(data || defaultConfig);
-          // setListData(data?.list || []);
+          const data = JSON.parse(res.data) || defaultConfig;
+          setConfigData(data);
         }
       });
   };
@@ -216,7 +214,9 @@ const Integration = props => {
       >
         <div className={styles.integration_title}>
           <div className={styles.integration_title_left} />
-          <div className={styles.integration_title_text} />
+          <div className={styles.integration_title_text}>
+            <span>{configData?.['标题'] || '智慧水务综合监控平台'}</span>
+          </div>
           <div className={styles.integration_title_right} />
         </div>
         <div className={styles.integration_row} type="业务中心">

src/pages/bootpage/template/integration2/integration.less

-@imgSrc: '@/assets/images/integration/';
+@imgSrc: '@/assets/images/integration2/';
+
+
 
 .integration {
   width: 100%;
@@ -627,6 +629,7 @@
   //支撑平台end
   &_title {
     display: flex;
+    // align-items: center;
 
     &_left {
       width: 372px;
@@ -636,10 +639,21 @@
     }
 
     &_text {
-      width: 820px;
-      height: 97px;
-      background: url('@{imgSrc}/标题.png') center/100% 100% no-repeat;
-
+      flex: none;
+      color: #fff;
+
+      span {
+        line-height: 97px;
+        color: #fff;
+        font-size: 60px;
+        letter-spacing: 4px;
+        font-family: 'PangMenZhengDaoBiaoTiTi';
+        background: linear-gradient(0deg, #56A1EF 0%, #FFFFFF 59%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        position: relative;
+        top: -8px;
+      }
     }
 
     &_right {

src/pages/bootpage/template/project/taihu/data.json

+{
+  "综合管控": [
+    {
+      "name": "统一平台",
+      "english": "Unified Platform",
+      "label": "",
+      "url": ""
+    },
+    {
+      "name": "OA办公",
+      "url": "",
+      "english": "OA Office"
+    },
+    {
+      "name": "仓储系统",
+      "url": "",
+      "english": "Warehouse System"
+    },
+    {
+      "name": "可视化大屏幕",
+      "url": "",
+      "english": "Large visual screen"
+    }
+  ],
+  "智慧生产调度": [
+    {
+      "name": "生产调度",
+      "label": "",
+      "url": ""
+    },
+    {
+      "name": "科学调度",
+      "url": ""
+    },
+    {
+      "name": "二次供水",
+      "url": ""
+    },
+    {
+      "name": "应急指挥",
+      "url": ""
+    },
+    {
+      "name": "农饮水监测",
+      "url": ""
+    },
+    {
+      "name": "水力模型",
+      "url": ""
+    },
+    {
+      "name": "设备管理",
+      "url": ""
+    }
+  ],
+  "智慧管网管理": [
+    {
+      "name": "管网GIS",
+      "label": "",
+      "url": ""
+    },
+    {
+      "name": "GIS数据维护",
+      "url": ""
+    },
+    {
+      "name": "管网巡检",
+      "url": ""
+    }
+  ],
+  "智慧漏损控制": [
+    {
+      "name": "漏损控制",
+      "label": "",
+      "url": "",
+      "english": "Leakage control"
+    }
+  ],
+  "数据支撑": [
+    {
+      "name": "物联网平台",
+      "url": ""
+    },
+    {
+      "name": "数据统一管理",
+      "url": ""
+    },
+    {
+      "name": "GIS发布平台",
+      "url": ""
+    }
+  ],
+  "业务支撑": [
+    {
+      "name": "BMP流程引擎",
+      "url": ""
+    },
+    {
+      "name": "可视化工具",
+      "url": ""
+    },
+    {
+      "name": "低代码工具",
+      "url": ""
+    },
+    {
+      "name": "报表工具",
+      "url": ""
+    }
+  ],
+  "标题": "安徽太湖县智慧水务管控平台"
+}

src/pages/bootpage/template/project/taihu/index.js

+import { appService } from '@/api';
+import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import { message, Button } from 'antd';
+import classNames from 'classnames';
+import { debounce } from 'lodash';
+import React, { useRef, useEffect, useState, useMemo } from 'react';
+import backImg from '@/assets/images/demonstration/返回.png';
+import arrowLeftImg from '@/assets/images/demonstration/左箭头.png';
+import LoadPage from '@/components/LoadPage';
+import icon1 from '@/assets/images/integration/taihu/综合管控_arrow.png';
+import icon2 from '@/assets/images/integration/taihu/智慧应用_arrow.png';
+import icon3 from '@/assets/images/integration/taihu/支撑平台_arrow.png';
+
+import useFullScreen from '../../demonstration/components/useFullScreen';
+import defaultConfig from './data.json';
+import styles from './integration.less';
+import Iframe from '../../demonstration/components/Iframe';
+const boxWidth = 1920;
+const boxHeight = 1008;
+const Integration = props => {
+  const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(false);
+  const timer2 = useRef(null);
+  const timer3 = useRef(null);
+
+  const progressRef2 = useRef(0);
+  // 退出
+  const exit = () => {
+    if (isFullscreen) {
+      handleExitFullScreen && handleExitFullScreen();
+    } else {
+      handleFullScreen && handleFullScreen();
+    }
+  };
+  const [boxSize, setBoxSize] = useState({
+    scale: 1,
+    boxHeight: 1008,
+  });
+  const [linkUrl, setLinkUrl] = useState('');
+  const [jumpLoading, setJumpLoading] = useState(false);
+  const [progressValue2, setProgressValue2] = useState(0);
+  const [showBackBtn, setShowBackBtn] = useState(true); // 是否显示iframe 返回按钮，三维平台用
+
+  const configName = '集成配置文件';
+
+  const [configData, setConfigData] = useState(defaultConfig);
+
+  const jumpProgressStart = () => {
+    if (timer2.current) {
+      clearInterval(timer2.current);
+      timer2.current = null;
+    }
+    progressRef2.current = 0;
+    setProgressValue2(0);
+    timer2.current = setInterval(() => {
+      if (progressRef2.current < 97.5) {
+        progressRef2.current += 2.5;
+        setProgressValue2(progressRef2.current);
+      } else {
+        setProgressValue2(99);
+        timer2.current && clearInterval(timer2.current);
+        timer2.current = null;
+      }
+    }, 100);
+  };
+  const jumpProgressEnd = () => {
+    setProgressValue2(100);
+    timer2.current && clearInterval(timer2.current);
+    timer2.current = null;
+  };
+  const getData = async () => {
+    appService
+      .GetConfigJson({
+        config: configName,
+      })
+      .then(res => {
+        if (res.code === 0 && res.data) {
+          const data = JSON.parse(res.data) || defaultConfig;
+          setConfigData(data);
+        }
+      });
+  };
+  const onResize = () => {
+    if (ref?.current) {
+      const { clientWidth, clientHeight } = ref.current;
+      if (!boxWidth || !boxHeight) return;
+      const xScale = clientWidth / boxWidth;
+      const yScale = clientHeight / boxHeight;
+      const poor = clientHeight / clientWidth - boxHeight / boxWidth;
+      let n = Math.min(xScale, yScale);
+      let bHeight = boxHeight;
+      if (poor > 0.05) {
+        bHeight = boxHeight + 30;
+      }
+      // 高度为偶数
+      bHeight = parseInt(bHeight, 10);
+      if (bHeight % 2 !== 0) {
+        bHeight += 1;
+      }
+      n = Number(n.toFixed(4));
+      setBoxSize({
+        scale: n,
+        boxHeight: bHeight,
+      });
+    }
+  };
+  const handError = err => {
+    if (err) {
+      message.error(err);
+    }
+    setLinkUrl('');
+    setJumpLoading(false);
+    jumpProgressEnd();
+  };
+  const onMessageBack = data => {
+    if (!data?.type) return;
+    console.log('onMessageBack ~ data:', data);
+    switch (data?.type) {
+      // 页面加载完成
+      // 登录成功
+      case 'runAfterFirstMounted':
+      case 'loginSuccess':
+        jumpProgressEnd();
+        setTimeout(() => {
+          setJumpLoading(false);
+        }, 100);
+        break;
+      case 'loginError':
+        message.warning('登录失败，请联系管理人员');
+        handError();
+        break;
+      case '无法连接':
+        message.warning('该站点无法连接，请联系管理人员');
+        setTimeout(() => {
+          handError();
+        }, 100);
+        break;
+      case 'showBack':
+        setShowBackBtn(true);
+        break;
+      case 'hideBack':
+        setShowBackBtn(false);
+        break;
+      default:
+        break;
+    }
+  };
+  const iframeItem = useMemo(() => {
+    if (!linkUrl) return null;
+    return (
+      <>
+        <div className={classNames(!jumpLoading ? styles.scaleInCenter : styles.hide, 'animate__animated')}>
+          <Iframe linkUrl={linkUrl} onMessageBack={onMessageBack} />
+        </div>
+      </>
+    );
+  }, [linkUrl, jumpLoading]);
+  const startTiming = (time = 2) => {
+    if (timer3.current) {
+      clearInterval(timer3.current);
+      timer3.current = null;
+    }
+    timer3.current = setTimeout(() => {
+      setJumpLoading(false);
+      timer2.current && clearInterval(timer2.current);
+      timer2.current = null;
+    }, time * 1000);
+  };
+  const onLink = url => {
+    if (!url) return message.warning('未配置功能路径');
+    setJumpLoading(true);
+    jumpProgressStart();
+
+    setLinkUrl(url);
+    let time = 15;
+    if (!url.includes('user/noscret')) {
+      time = 4;
+    }
+    startTiming(time);
+  };
+  useEffect(() => {
+    getData();
+    window.addEventListener('resize', debounce(onResize, 300));
+    onResize();
+    return () => {
+      window.removeEventListener('resize', onResize);
+      timer2.current && clearInterval(timer2.current);
+      timer2.current = null;
+      timer3.current && clearInterval(timer3.current);
+      timer3.current = null;
+    };
+  }, []);
+
+  return (
+    <div className={classNames(styles.integration, 'integration')} ref={ref}>
+      {jumpLoading ? (
+        <div className={styles.integrationJumpLoad} key="jumpLoading">
+          <div style={{ width: '285px' }}>
+            <LoadPage percent={progressValue2 / 100} text="页面加载中~" />
+          </div>
+        </div>
+      ) : null}
+      {!linkUrl ? (
+        <div className={styles.integration_exit} onClick={exit}>
+          <Button type="text" style={{ color: '#fff', fontSize: '24px' }}>
+            {isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
+          </Button>
+        </div>
+      ) : null}
+
+      <div
+        className={styles.integration_content}
+        style={{
+          width: boxWidth,
+          height: boxSize.boxHeight,
+          transform: `scale(${boxSize.scale}) translate(-50%,-50%)`,
+        }}
+      >
+        <div className={styles.integration_title}>
+          <div className={styles.integration_title_left} />
+          <div className={styles.integration_title_text}>
+            <span>{configData?.['标题'] || '智慧水务综合监控平台'}</span>
+          </div>
+          <div className={styles.integration_title_right} />
+        </div>
+        <div className={styles.integration_row} type="综合管控">
+          <div className={styles.integration_row_title} type="综合管控">
+            综合管控
+            <img src={icon1} alt="" />
+          </div>
+          <div className={styles.integration_row_list}>
+            <div className={styles.integration_row_grid} type="综合管控">
+              {configData['综合管控'] &&
+                configData['综合管控'].map(item => (
+                  <div
+                    key={item.name}
+                    className={styles.integration_row_col}
+                    type="综合管控"
+                    onClick={() => onLink(item.url)}
+                  >
+                    <div
+                      className={classNames(
+                        styles.integration_row_col_hover,
+                        'animate__fadeIn animate__animated duration-100ms',
+                      )}
+                    />
+                    <div className={styles.integration_row_col_content} name={item.name}>
+                      <div className={styles.integration_row_col_text} type="综合管控">
+                        {item.label || item.name}
+                      </div>
+                      <div className={styles.integration_row_col_sub}>{item.english || ''}</div>
+                    </div>
+                  </div>
+                ))}
+            </div>
+          </div>
+        </div>
+        <div className={styles.integration_row} type="智慧应用">
+          <div className={styles.integration_row_title} type="智慧应用">
+            智慧应用
+            <img src={icon2} alt="" />
+          </div>
+          <div className={styles.integration_row_list} type="智慧生产调度">
+            <div className={styles.integration_row_list_title} type="智慧生产调度">
+              - 智慧生产调度 -
+            </div>
+            <div className={styles.integration_row_grid} type="智慧生产调度">
+              {configData['智慧生产调度'] &&
+                configData['智慧生产调度'].map(item => (
+                  <div
+                    key={item.name}
+                    className={styles.integration_row_col}
+                    type={item.name}
+                    onClick={() => onLink(item.url)}
+                  >
+                    <div
+                      className={classNames(
+                        styles.integration_row_col_hover,
+                        'animate__fadeIn animate__animated duration-100ms',
+                      )}
+                    />
+                    <div className={styles.integration_row_col_content} name={item.name}>
+                      <div className={styles.integration_row_col_text}>{item.label || item.name}</div>
+                    </div>
+                  </div>
+                ))}
+            </div>
+          </div>
+          <div className={styles.integration_row_list_right}>
+            <div className={styles.integration_row_list} type="智慧管网管理">
+              <div className={styles.integration_row_list_title} type="智慧管网管理">
+                - 智慧管网管理 -
+              </div>
+              <div className={styles.integration_row_grid} type="智慧管网管理">
+                {configData['智慧管网管理'] &&
+                  configData['智慧管网管理'].map(item => (
+                    <div
+                      key={item.name}
+                      className={styles.integration_row_col}
+                      type={item.name}
+                      onClick={() => onLink(item.url)}
+                    >
+                      <div
+                        className={classNames(
+                          styles.integration_row_col_hover,
+                          'animate__fadeIn animate__animated duration-100ms',
+                        )}
+                      />
+                      <div className={styles.integration_row_col_content} name={item.name}>
+                        <div className={styles.integration_row_col_text}>{item.label || item.name}</div>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+            <div className={styles.integration_row_list} type="智慧漏损控制">
+              <div className={styles.integration_row_list_title} type="智慧漏损控制">
+                - 智慧漏损控制 -
+              </div>
+              <div className={styles.integration_row_grid} type="智慧漏损控制">
+                {configData['智慧漏损控制'] &&
+                  configData['智慧漏损控制'].map(item => (
+                    <div
+                      key={item.name}
+                      className={styles.integration_row_col}
+                      type={item.name}
+                      onClick={() => onLink(item.url)}
+                    >
+                      <div
+                        className={classNames(
+                          styles.integration_row_col_hover,
+                          'animate__fadeIn animate__animated duration-100ms',
+                        )}
+                      />
+                      <div className={styles.integration_row_col_content} name={item.name}>
+                        <div className={styles.integration_row_col_text}>{item.label || item.name}</div>
+                        {item.english ? (
+                          <div className={styles.integration_row_col_sub}>
+                            &nbsp;&nbsp;&nbsp;/&nbsp;&nbsp;&nbsp; {item.english || ''}
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={styles.integration_row} type="支撑平台">
+          <div className={styles.integration_row_title} type="支撑平台">
+            支撑平台
+            <img src={icon3} alt="" />
+          </div>
+          <div className={styles.integration_row_right}>
+            <div className={styles.integration_row_list} type="数据支撑">
+              <div className={styles.integration_row_list_title} type="数据支撑">
+                - 数据支撑 -
+              </div>
+              <div className={styles.integration_row_grid} type="数据支撑">
+                {configData['数据支撑'] &&
+                  configData['数据支撑'].map(item => (
+                    <div
+                      key={item.name}
+                      className={styles.integration_row_col}
+                      type={item.name}
+                      onClick={() => onLink(item.url)}
+                    >
+                      <div
+                        className={classNames(
+                          styles.integration_row_col_hover,
+                          'animate__fadeIn animate__animated duration-100ms',
+                        )}
+                      />
+                      <div className={styles.integration_row_col_content} name={item.name}>
+                        <div className={styles.integration_row_col_text}>{item.label || item.name}</div>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+            <div className={styles.integration_row_list} type="业务支撑">
+              <div className={styles.integration_row_list_title} type="业务支撑">
+                - 业务支撑 -
+              </div>
+              <div className={styles.integration_row_grid} type="业务支撑">
+                {configData['业务支撑'] &&
+                  configData['业务支撑'].map(item => (
+                    <div
+                      key={item.name}
+                      className={styles.integration_row_col}
+                      type={item.name}
+                      onClick={() => onLink(item.url)}
+                    >
+                      <div
+                        className={classNames(
+                          styles.integration_row_col_hover,
+                          'animate__fadeIn animate__animated duration-100ms',
+                        )}
+                      />
+                      <div className={styles.integration_row_col_content} name={item.name}>
+                        <div className={styles.integration_row_col_text}>{item.label || item.name}</div>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {linkUrl && showBackBtn ? (
+        <div
+          className={classNames(styles.iframeExit, 'animate__animated', 'animate__fadeIn')}
+          onClick={() => setLinkUrl('')}
+        >
+          <div className={styles.iframeBackLeft}>
+            <img src={arrowLeftImg} alt="返回" />
+          </div>
+          <div className={styles.iframeExitIcon}>
+            <img src={backImg} alt="返回" />
+            返回
+          </div>
+        </div>
+      ) : null}
+      {iframeItem}
+    </div>
+  );
+};
+export default Integration;

src/pages/bootpage/template/project/taihu/integration.less

+@imgSrc2: '@/assets/images/integration2/';
+@imgSrc: '@/assets/images/integration/taihu/';
+
+
+
+.integration {
+  width: 100%;
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  background: url('@{imgSrc}/背景.jpg') center/100% 100% no-repeat;
+
+  .iframeExitIcon {
+    position: absolute;
+    top: 0;
+    left: -45px;
+    display: flex;
+    height: 44px;
+    width: 44px;
+    background: rgba(28, 94, 180, 0.95);
+    border-radius: 0 7px 7px 0;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 12px;
+    transition: all 0.2s;
+    padding: 3px 0;
+
+    img {
+      width: 17px;
+      height: 12px;
+    }
+  }
+
+
+  .iframeExit:hover {
+    .iframeExitIcon {
+      left: 0;
+    }
+
+    .iframeBackLeft {
+      left: -15px;
+    }
+  }
+
+
+  .iframeBackLeft {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 14px;
+    height: 44px;
+    background: rgba(28, 94, 180, 0.95);
+    border-radius: 0 7px 7px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
+
+    img {
+      width: 6px;
+      height: 11px;
+    }
+  }
+
+  .iframeExit {
+    width: 44px;
+    height: 44px;
+    position: absolute;
+    top: 4px;
+    left: 0;
+    color: #FFF;
+    cursor: pointer;
+    user-select: none;
+    position: absolute;
+    z-index: 110;
+
+
+  }
+
+  &_exit {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    z-index: 100;
+  }
+
+  .integration_content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transform-origin: left top;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    padding: 50px;
+  }
+
+  .integration_row {
+    display: flex;
+    width: 1500px;
+    overflow: hidden;
+
+    .integration_row_title {
+      flex: none;
+      margin-right: 25px;
+      position: relative;
+      writing-mode: vertical-rl;
+      font-weight: bold;
+      font-size: 22px;
+      color: #FFFFFF;
+      line-height: 33px;
+      text-shadow: 0px 0px 18px rgba(0, 144, 255, 0.5);
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      letter-spacing: 1px;
+
+      img {
+        width: 33px;
+        height: 42px;
+        position: absolute;
+        right: -20px;
+        top: 50%;
+        transform: translateY(-50%);
+      }
+    }
+
+    .integration_row_list {
+      flex: 1;
+      display: flex;
+      align-items: center;
+    }
+
+  }
+
+  .integration_row_col {
+    position: relative;
+    cursor: pointer;
+  }
+
+  .integration_row_col_text {
+    font-weight: bold;
+    font-size: 20px;
+    color: #FFFFFF;
+    transition: all 0.1s;
+    position: relative;
+    white-space: nowrap;
+
+  }
+
+  .integration_row_col:hover {
+    filter: brightness(120%);
+
+    .integration_row_col_hover {
+      display: block !important;
+    }
+
+    .integration_row_col_text {
+      color: #fff !important;
+    }
+
+    .integration_row_col_sub {
+      color: #fff !important;
+
+    }
+  }
+
+  .integration_row_title[type='综合管控'] {
+    width: 46px;
+    height: 144px;
+    background: url('@{imgSrc}/综合管控_left.png') center/100% 100% no-repeat;
+
+  }
+
+  .integration_row_title[type='智慧应用'] {
+    width: 46px;
+    height: 372px;
+    background: url('@{imgSrc}/智慧应用_left.png') center/100% 100% no-repeat;
+
+  }
+
+  .integration_row_title[type='支撑平台'] {
+    width: 46px;
+    height: 228px;
+    background: url('@{imgSrc}/支撑平台_left.png') center/100% 100% no-repeat;
+
+  }
+
+  // 综合管控start
+  .integration_row[type='综合管控'] {
+    height: 144px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+
+    .integration_row_list {
+      height: 124px;
+      padding: 7px;
+      background: linear-gradient(0deg, rgba(171, 136, 0, 0) 0%, rgba(177, 153, 58, 0.5) 100%);
+      border-radius: 20px;
+    }
+  }
+
+  .integration_row_grid[type='综合管控'] {
+    display: flex;
+    justify-content: space-around;
+    padding-left: 15px;
+  }
+
+  .integration_row_col[type='综合管控'] {
+    width: 350px;
+    height: 94px;
+
+
+    .integration_row_col_text {
+      font-weight: bold;
+      font-size: 20px;
+      color: #FFED9A;
+      text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
+    }
+
+    .integration_row_col_sub {
+      font-weight: 400;
+      font-size: 13px;
+      color: rgba(231, 215, 138, 0.6);
+    }
+
+    .integration_row_col_content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 25px 20px 45px 144px;
+
+    }
+
+    .integration_row_col_content[name='统一平台'] {
+      background: url('@{imgSrc}/统一平台.png') 45px 12px no-repeat,
+      url('@{imgSrc}/综合管控_bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+    .integration_row_col_content[name='OA办公'] {
+      background: url('@{imgSrc}/OA办公.png') 45px 12px no-repeat,
+      url('@{imgSrc}/综合管控_bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+    }
+
+    .integration_row_col_content[name='仓储系统'] {
+      background: url('@{imgSrc}/仓储系统.png') 45px 12px no-repeat,
+      url('@{imgSrc}/综合管控_bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+    .integration_row_col_content[name='可视化大屏幕'] {
+      background: url('@{imgSrc}/可视化大屏幕.png') 45px 12px no-repeat,
+      url('@{imgSrc}/综合管控_bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+    }
+  }
+
+  // 综合管控end
+
+  // 智慧生产调度
+  .integration_row[type='智慧应用'] {
+    height: 372px;
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 15px;
+
+    .integration_row_list_title {
+      font-weight: bold;
+      font-size: 18px;
+      color: #FFFFFF;
+      font-style: italic;
+      letter-spacing: 2px;
+    }
+
+    .integration_row_list_right {
+      flex: 1;
+      height: 100%;
+      overflow: hidden;
+
+    }
+
+  }
+
+  .integration_row_list[type='智慧生产调度'] {
+    margin-right: 20px;
+    width: 804px;
+    height: 362px;
+    overflow: hidden;
+    flex-direction: column;
+    background: linear-gradient(180deg, rgba(39, 112, 173, 0.5) 0%, rgba(39, 112, 173, 0) 100%);
+    border-radius: 20px;
+    flex: none;
+
+
+    .integration_row_list_title {
+      width: 804px;
+      height: 54px;
+      line-height: 54px;
+      text-align: center;
+      background: url('@{imgSrc}/智慧生产调度.png') center/100% 100% no-repeat;
+
+    }
+
+    .integration_row_col_text {
+      font-weight: bold;
+      font-size: 20px;
+      color: #AEEFFF;
+      text-align: center;
+      padding-top: 50px;
+      text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
+    }
+
+
+    .integration_row_col_content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+    }
+
+  }
+
+  .integration_row_grid[type='智慧生产调度'] {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+  }
+
+  .integration_row_col[type='生产调度'] {
+    width: 256px;
+    height: 152px;
+
+  }
+
+  .integration_row_col[type='科学调度'] {
+    width: 256px;
+    height: 152px;
+
+  }
+
+  .integration_row_col[type='二次供水'] {
+    width: 256px;
+    height: 152px;
+
+  }
+
+  .integration_row_col[type='应急指挥'] {
+    width: 192px;
+    height: 152px;
+
+  }
+
+  .integration_row_col[type='农饮水监测'] {
+    width: 192px;
+    height: 152px;
+
+  }
+
+  .integration_row_col[type='水力模型'] {
+    width: 192px;
+    height: 152px;
+
+  }
+
+  .integration_row_col[type='设备管理'] {
+    width: 192px;
+    height: 152px;
+
+  }
+
+  .integration_row_list[type='智慧生产调度'] {
+
+    .integration_row_col_content[name='生产调度'] {
+      background: url('@{imgSrc}/生产调度.png') center 18px no-repeat,
+      url('@{imgSrc}/生产调度_bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+    .integration_row_col_content[name='科学调度'] {
+      background: url('@{imgSrc}/科学调度.png') center 18px no-repeat,
+      url('@{imgSrc}/生产调度_bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+    .integration_row_col_content[name='二次供水'] {
+      background: url('@{imgSrc}/二次供水.png') center 18px no-repeat,
+      url('@{imgSrc}/生产调度_bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+    .integration_row_col_content[name='应急指挥'] {
+      background: url('@{imgSrc}/应急指挥.png') center 18px no-repeat,
+      url('@{imgSrc}/应急指挥bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+    .integration_row_col_content[name='农饮水监测'] {
+      background: url('@{imgSrc}/农饮水监测.png') center 18px no-repeat,
+      url('@{imgSrc}/应急指挥bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+    .integration_row_col_content[name='水力模型'] {
+      background: url('@{imgSrc}/水力模型.png') center 18px no-repeat,
+      url('@{imgSrc}/应急指挥bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+    .integration_row_col_content[name='设备管理'] {
+      background: url('@{imgSrc}/设备管理.png') center 18px no-repeat,
+      url('@{imgSrc}/应急指挥bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+  }
+
+  // 智慧生产调度end
+
+  // 智慧管网管理start
+  .integration_row_list[type='智慧管网管理'] {
+    width: 100%;
+    height: 210px;
+    overflow: hidden;
+    flex-direction: column;
+    background: linear-gradient(180deg, rgba(39, 112, 173, 0.5) 0%, rgba(39, 112, 173, 0) 100%);
+    border-radius: 20px;
+    flex: none;
+    margin-bottom: 10px;
+
+
+    .integration_row_list_title {
+      width: 100%;
+      height: 54px;
+      line-height: 54px;
+      text-align: center;
+      background: url('@{imgSrc}/智慧管网管理.png') center/100% 100% no-repeat;
+
+    }
+
+    .integration_row_col_text {
+      font-weight: bold;
+      font-size: 20px;
+      color: #AEEFFF;
+      text-align: center;
+      padding-top: 50px;
+      text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
+    }
+
+
+    .integration_row_col_content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+    }
+
+    .integration_row_col {
+      width: 192px;
+      height: 152px;
+
+    }
+
+    .integration_row_col_content[name='管网GIS'] {
+      background: url('@{imgSrc}/管网GIS.png') center 18px no-repeat,
+      url('@{imgSrc}/应急指挥bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+    .integration_row_col_content[name='GIS数据维护'] {
+      background: url('@{imgSrc}/GIS数据维护.png') center 18px no-repeat,
+      url('@{imgSrc}/应急指挥bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+    .integration_row_col_content[name='管网巡检'] {
+      background: url('@{imgSrc}/管网巡检.png') center 18px no-repeat,
+      url('@{imgSrc}/应急指挥bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+  }
+
+  .integration_row_grid[type='智慧管网管理'] {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+  }
+
+
+  //智慧管网管理end
+
+  // 智慧漏损控制start
+  .integration_row_list[type='智慧漏损控制'] {
+    width: 100%;
+    height: 136px;
+    overflow: hidden;
+    flex-direction: column;
+    background: linear-gradient(180deg, rgba(39, 112, 173, 0.5) 0%, rgba(39, 112, 173, 0) 100%);
+    border-radius: 20px;
+    flex: none;
+
+
+    .integration_row_list_title {
+      width: 100%;
+      height: 54px;
+      line-height: 54px;
+      text-align: center;
+      background: url('@{imgSrc}/智慧管网管理.png') center/100% 100% no-repeat;
+
+    }
+
+    .integration_row_col_text {
+      font-weight: bold;
+      font-size: 20px;
+      color: #AEEFFF;
+      text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
+    }
+
+
+    .integration_row_col_content {
+      width: 577px;
+      height: 77px;
+      display: flex;
+      padding-left: 178px;
+      padding-bottom: 15px;
+      align-items: center;
+
+    }
+
+    .integration_row_col_sub {
+      font-weight: 400;
+      font-size: 13px;
+      color: rgba(174, 239, 255, 0.6);
+      line-height: 48px;
+    }
+
+    .integration_row_col_content[name='漏损控制'] {
+      background: url('@{imgSrc}/漏损控制.png') 65px 5px no-repeat,
+      url('@{imgSrc}/智慧漏损控制_bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+    }
+
+  }
+
+  .integration_row_grid[type='漏损控制'] {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+  }
+
+  //智慧漏损控制end
+
+
+  // 数据支撑start
+  .integration_row[type='支撑平台'] {
+    height: 228px;
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 10px;
+    justify-content: space-between;
+    overflow: hidden;
+
+    .integration_row_right {
+      flex: 1;
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding-top: 10px;
+    }
+
+    .integration_row_list_title {
+      flex: none;
+      font-weight: bold;
+      font-size: 18px;
+      color: #FFFFFF;
+      font-style: italic;
+      letter-spacing: 2px;
+    }
+  }
+
+  .integration_row_list[type='数据支撑'] {
+    width: 600px;
+    height: 210px;
+    overflow: hidden;
+    flex-direction: column;
+    background: linear-gradient(180deg, rgba(39, 112, 173, 0.5) 0%, rgba(39, 112, 173, 0) 100%);
+    border-radius: 20px;
+    flex: none;
+
+
+    .integration_row_list_title {
+      width: 100%;
+      height: 54px;
+      line-height: 54px;
+      text-align: center;
+      background: url('@{imgSrc}/数据支撑.png') center/100% 100% no-repeat;
+
+    }
+
+    .integration_row_col_text {
+      font-weight: bold;
+      font-size: 20px;
+      color: #AEEFFF;
+      text-align: center;
+      padding-top: 50px;
+      text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
+    }
+
+
+    .integration_row_col_content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+    }
+
+    .integration_row_col {
+      width: 192px;
+      height: 152px;
+
+    }
+
+    .integration_row_col_content[name='物联网平台'] {
+      background: url('@{imgSrc}/物联网平台.png') center 18px no-repeat,
+      url('@{imgSrc}/支撑平台_bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+    .integration_row_col_content[name='数据统一管理'] {
+      background: url('@{imgSrc}/数据统一管理.png') center 18px no-repeat,
+      url('@{imgSrc}/支撑平台_bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+    .integration_row_col_content[name='GIS发布平台'] {
+      background: url('@{imgSrc}/GIS发布平台.png') center 18px no-repeat,
+      url('@{imgSrc}/支撑平台_bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+  }
+
+  .integration_row_grid[type='数据支撑'] {
+    display: flex;
+
+
+  }
+
+
+  //数据支撑end
+
+  // 业务支撑start
+  .integration_row_list[type='业务支撑'] {
+    width: 805px;
+    height: 210px;
+    overflow: hidden;
+    flex-direction: column;
+    background: linear-gradient(180deg, rgba(39, 112, 173, 0.5) 0%, rgba(39, 112, 173, 0) 100%);
+    border-radius: 20px;
+    flex: none;
+    margin-bottom: 10px;
+
+
+    .integration_row_list_title {
+      width: 100%;
+      height: 54px;
+      line-height: 54px;
+      text-align: center;
+      background: url('@{imgSrc}/业务支撑.png') center/100% 100% no-repeat;
+
+    }
+
+    .integration_row_col_text {
+      font-weight: bold;
+      font-size: 20px;
+      color: #AEEFFF;
+      text-align: center;
+      padding-top: 50px;
+      text-shadow: 2px 3px 4px rgba(0, 0, 0, 0.5);
+    }
+
+
+    .integration_row_col_content {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+    }
+
+    .integration_row_col {
+      width: 192px;
+      height: 152px;
+
+    }
+
+    .integration_row_col_content[name='BMP流程引擎'] {
+      background: url('@{imgSrc}/BMP流程引擎.png') center 18px no-repeat,
+      url('@{imgSrc}/支撑平台_bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+    .integration_row_col_content[name='可视化工具'] {
+      background: url('@{imgSrc}/可视化工具.png') center 18px no-repeat,
+      url('@{imgSrc}/支撑平台_bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+    .integration_row_col_content[name='低代码工具'] {
+      background: url('@{imgSrc}/低代码工具.png') center 18px no-repeat,
+      url('@{imgSrc}/支撑平台_bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+
+    .integration_row_col_content[name='报表工具'] {
+      background: url('@{imgSrc}/报表工具.png') center 18px no-repeat,
+      url('@{imgSrc}/支撑平台_bg.png') center center no-repeat;
+      background-size: 54px 54px, 100% 100%;
+
+    }
+  }
+
+  .integration_row_grid[type='业务支撑'] {
+    display: flex;
+
+  }
+
+  //业务支撑end
+  &_title {
+    display: flex;
+    // align-items: center;
+
+    &_left {
+      width: 372px;
+      height: 75px;
+      background: url('@{imgSrc2}/left.png') center/100% 100% no-repeat;
+
+    }
+
+    &_text {
+      flex: none;
+      color: #fff;
+
+      span {
+        line-height: 97px;
+        color: #fff;
+        font-size: 60px;
+        letter-spacing: 4px;
+        font-family: 'PangMenZhengDaoBiaoTiTi';
+        background: linear-gradient(0deg, #56A1EF 0%, #FFFFFF 59%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        position: relative;
+        top: -8px;
+      }
+    }
+
+    &_right {
+      width: 372px;
+      height: 75px;
+      background: url('@{imgSrc2}/right.png') center/100% 100% no-repeat;
+
+    }
+  }
+
+}
+
+.integrationJumpLoad {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  z-index: 1080;
+  padding-bottom: 50px;
+  background-color: rgba(0, 0, 0, 0.6);
+
+
+}
+
+.hide {
+  visibility: hidden;
+}
+
+
+
+@-webkit-keyframes scale-in-center {
+  0% {
+    -webkit-transform: scaleY(0);
+    transform: scaleY(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+
+@keyframes scale-in-center {
+  0% {
+    -webkit-transform: scaleY(0);
+    transform: scaleY(0);
+    opacity: 1;
+  }
+
+  100% {
+    -webkit-transform: scaleY(1);
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+
+.scaleInCenter {
+  visibility: visible;
+  -webkit-animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+  animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+& :global {
+  .integration {
+    .anticon {
+      vertical-align: 0.125em;
+    }
+  }
+}
\ No newline at end of file

src/pages/user/login/index.js

@@ -2,7 +2,7 @@
  * @Author: 634665781 634665781@qq.com
  * @Date: 2022-07-08 14:28:01
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-06-27 18:35:51
+ * @LastEditTime: 2024-07-20 20:07:23
  * @FilePath: \CivWeb\src\pages\user\login\index.js
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -23,6 +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 JSZHLogin from './template/project/JSZH';
 import ChengmaiLogin from './template/project/chengmai';
 import HuhehaoteLogin from './template/project/huhehaote';
@@ -52,6 +53,9 @@ import ChinaShuiwu from './template/project/chinaShuiwu';
 import current from './template/current/index';
 import Linyou from './template/project/linyou';
 import FengqiuLogin from './template/project/fengqiu';
+import DiantouLogin from './template/project/diantou';
+import ChangchunLogin from './template/project/changchun';
+import TiemenguanLogin from './template/project/tiemenguan';
 import { AppInitState } from '../../../render';
 const LoginTemplate = {
   '新春.html': baseLoginNewYear,
@@ -71,6 +75,7 @@ const LoginTemplate = {
   '广州登录页.html': EnergGzV2,
   'DarkNoEffect.html': DarkNoEffect,
   'Water.html': WaterLogin,
+  'Water2.html': WaterLogin2,
   '项目 - 江水置换.html': JSZHLogin,
   '节水主题二.html': EnergJS2,
   '项目 - 澄迈.html': ChengmaiLogin,
@@ -101,6 +106,9 @@ const LoginTemplate = {
   '项目 - 中国水务.html': ChinaShuiwu,
   '项目 - 麟游.html': Linyou,
   '项目 - 封丘.html': FengqiuLogin,
+  '项目 - 店头.html': DiantouLogin,
+  '项目 - 长春.html': ChangchunLogin,
+  '项目 - 铁门关.html': TiemenguanLogin,
   default: BaseLogin,
 };
 /* eslint-disable */

src/pages/user/login/login.js

@@ -40,8 +40,13 @@ class Login {
         return a.split('=')[0] == 'uniwater_utoken';
       });
     this.uniwater_utoken = paramsFind?.split('=')[1] ?? '';
-
-    if (this.uniwater_utoken) {
+    // 单页面免登重定向地址
+    const redirect =
+      params &&
+      params.find(function(a) {
+        return a.split('=')[0] === 'redirect';
+      });
+    if (this.uniwater_utoken && !redirect) {
       this.getTokenForThird();
     }
 
@@ -56,6 +61,13 @@ class Login {
     }
   }
 
+  // 第三方单页面免登
+  getTokenThirdLogin(tk) {
+    const self = this;
+    self.globalConfig.token = tk;
+    self.updateConfig && self.updateConfig(self.globalConfig);
+  }
+
   // 单点登录接口_xule_20231214
   getTokenForThird() {
     const self = this;

src/pages/user/login/noSecret.js

@@ -36,7 +36,13 @@ const Login = forwardRef((props, _ref) => {
   });
   // 需要在 GetGateWay 和 GetConfig 之后再执行登录。避免信息错落乱
   const hasLogin = useRef();
-  useEffect(() => {
+  const getAuthDataInfo = async () => {
+    const value = params.getParams('uniwater_utoken');
+    const hdtoken = value && value !== 'undefined' ? value : null;
+    const authRes = hdtoken ? await appService.AuthHDUSer({ token: hdtoken, ignoreSite: true }) : '';
+    return authRes?.data || '';
+  };
+  useEffect(async () => {
     action.globalConfig = props.global;
     // eslint-disable-next-line no-prototype-builtins
     if (
@@ -47,11 +53,12 @@ const Login = forwardRef((props, _ref) => {
     ) {
       hasLogin.current = true;
       window.hasLogin = true;
+      const authData = !token ? await getAuthDataInfo() : '';
       const isGZproject = window.globalConfig.subtitle === '广州节约用水管理系统';
       if (window.globalConfig && window.globalConfig.hasGateWay && !isGZproject) {
         appService
           .authorizationToken({
-            loginName: token,
+            loginName: token || authData,
             type: 'token',
             generateType: params.getParams('generateType') || '',
           })
@@ -78,6 +85,7 @@ const Login = forwardRef((props, _ref) => {
             action.transformLoginHander(res, false);
           });
       } else {
+        if (authData) action.getTokenThirdLogin(authData);
         action.init(site);
       }
     }

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

+/*
+ * 功能名称: 长春登录页
+ * 功能路径:
+ * 功能参数:
+ */
+
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import $ from 'jquery';
+
+import { Modal, Popover } from 'antd';
+import QRCode from 'qrcode.react';
+
+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 defaultSetting from '../../../../../../../config/defaultSetting';
+import LoginAction from '../../../login';
+import styles from './index.less';
+import Account from '../../../js/useAccount';
+import { defaultApp } from '../../../../../../micro';
+import logo from './images/logo.png';
+import qrcodePng from './images/扫码.png';
+import bg from './images/背景.jpg';
+const Cripples = require('@/assets/js/ripples/jquery.ripples');
+
+const PopOvercontent = () => {
+  const qrcodes = window.globalConfig && window.globalConfig.qrcode;
+  if (qrcodes) {
+    return <QRCode value={qrcodes} />;
+  }
+  return <span>手持APP下载未配置</span>;
+};
+
+const Login = forwardRef((props, _ref) => {
+  const sliVerify = useRef();
+  const loginFormRef = useRef();
+  const formRef = useRef(null);
+  const [status, setStatus] = useState('normal');
+  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 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);
+      });
+    action.events.on('loginHomePage', () => {
+      props.history.push(`/homePage`);
+    });
+    action.events.on('loginIndustry', () => {
+      props.history.push(`/industry`);
+    });
+    return () => {
+      action && action.events && action.events.removeAllListeners('loginSuccess');
+      action && action.events && action.events.removeAllListeners('loginError');
+      action && action.events && action.events.removeAllListeners('loginVisible');
+      action && action.events && action.events.removeAllListeners('loginHomePage');
+      action && action.events && action.events.removeAllListeners('loginIndustry');
+    };
+  }, [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} />;
+  };
+  /* eslint-disable */
+
+  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);
+    }
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      onShow();
+    }, 300);
+    setTimeout(() => {
+      $('.CarouselRipples').ripples({
+        resolution: 800,
+        dropRadius: 20, //px
+        perturbance: 2,
+      });
+    }, 1000);
+  }, []);
+  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 || defaultSetting.title}</title>
+        <meta name="description" content={props.global.title || defaultSetting.title} />
+      </Helmet>
+
+      <div
+        className={classnames(styles.fengqiuLogin, 'fengqiuLogin')}
+        onClick={onShow}
+        style={{ background: `url(${bg}) no-repeat center center`, backgroundSize: '100%' }}
+      >
+        {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']}>
+                    筑牢城市安全运行防线 <br />
+                    为城市发展保驾护航
+                  </div>
+                  <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
+                    {renderPlatform()}
+                  </div>
+                </div>
+                <Popover
+                  content={PopOvercontent}
+                  title="扫码下载APP"
+                  placement="right"
+                  overlayClassName={'popover-style'}
+                >
+                  <img src={qrcodePng} alt="APP" className={styles['qrcode-box']} />
+                </Popover>
+              </div>
+            </QueueAnim>
+
+            <div key="loginheader" className={classnames(styles['login-header'])}>
+              <QueueAnim type="left">
+                <div key="logintitle" className={styles['left-title']}>
+                  <div>
+                    <img
+                      role="logo"
+                      src={
+                        props.global &&
+                        props.global.transformDevAssetsBaseURL &&
+                        props.global.transformDevAssetsBaseURL(props.global.logo)
+                      }
+                      alt="logo"
+                    />
+                  </div>
+                  <div className={styles['cn-title']}>{props.global.title || defaultSetting.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}
+        <div className={classnames(styles.CarouselRipples, 'CarouselRipples')} data-ripple="ripple" />
+
+        <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/changchun/index.less

+.fengqiuLogin {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    min-height: 7.0rem;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .caseHide {
+        display: none !important;
+    }
+
+
+    .inner-bg {
+        width: 100%;
+        height: 100%;
+
+
+        &>div {
+            width: 80%;
+            margin: 0 10% 10%;
+        }
+    }
+
+    .inner-wrapper {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        top: 250px;
+        left: calc(50% - 268.5px);
+        z-index: 50;
+
+    }
+
+    .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-center {
+        position: relative;
+        width: 537px;
+        height: 390px;
+        border: 1px solid #FDFDFD;
+        box-shadow: 0px 6px 18px 0px rgba(25, 61, 79, 0.35);
+        border-radius: 15px;
+        z-index: 2;
+        backdrop-filter: blur(6px);
+
+    }
+
+    .welcome-title {
+        height: 155px;
+        border-radius: 8px 8px 0px 0px;
+        text-align: center;
+        line-height: 60px;
+        font-size: 40px;
+        font-weight: bold;
+        color: #008EFE;
+        padding-top: 15px;
+        text-shadow: #FFFFFF 1.5px 0 0, #FFFFFF 0 1.5px 0, #FFFFFF -1.5px 0 0, #FFFFFF 0 -1.5px 0;
+        font-family: '楷体';
+
+    }
+
+    .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 {
+        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;
+        // border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+
+        .left-title {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+
+            img {
+                // width: 55px;
+                height: 40px;
+            }
+
+            .cn-title {
+
+                font-size: 42px;
+                // font-family: 宋体;
+                font-weight: 400;
+                color: #333;
+                line-height: 55px;
+                text-shadow: 0px 1px 10px #A3AFC7;
+                line-height: 1;
+                margin-left: 10px;
+            }
+        }
+
+        .right-timebox {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 60px;
+
+            .curr-time {
+                width: 140px;
+                font-size: 34px;
+                font-family: Microsoft YaHei;
+                font-weight: 300;
+                color: #333;
+                text-align: right;
+            }
+
+            .curr-week-date {
+                margin-left: 10px;
+
+                .curr-week {
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #333;
+                }
+
+                .curr-date {
+                    font-size: 14px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #333;
+                }
+            }
+        }
+    }
+
+    .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: -23px;
+        width: 23px;
+        height: 23px;
+        background: #FFFFFF;
+        opacity: 0.8;
+        cursor: pointer;
+    }
+
+}
+
+
+& :global {
+    .fengqiuLogin {
+        .panda-console-base-btn {
+            border-radius: 20px;
+        }
+    }
+
+    .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;
+        }
+    }
+}
+
+.CarouselRipples {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+& :global {
+    .CarouselRipples:before {
+        content: '';
+        display: inline-block;
+        vertical-align: middle;
+        height: 100%;
+    }
+}
\ No newline at end of file

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

+import 'kit_utils/lib/format';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import { Modal } from 'antd';
+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 './index.less';
+import useRenderQcode from '../../../js/useRenderQcode';
+import Account from '../../../js/useAccount';
+import IotComponent from '../../../js/useIOTComponent';
+import { defaultApp } from '../../../../../../micro';
+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));
+    let { ddCode } = props.global;
+    const loginMode = Cookies.get('loginMode') || null;
+    if (loginMode && loginMode === 'iotWechat') ddCode = null;
+    const handleSubmit = values => {
+        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);
+            });
+        action.events.on('loginHomePage', () => {
+            props.history.push(`/homePage`);
+        })
+        action.events.on('loginIndustry', () => {
+            props.history.push(`/industry`);
+        });
+        return () => {
+            action && action.events && action.events.removeAllListeners('loginSuccess');
+            action && action.events && action.events.removeAllListeners('loginError');
+            action && action.events && action.events.removeAllListeners('loginVisible');
+            action && action.events && action.events.removeAllListeners('loginHomePage');
+            action && action.events && action.events.removeAllListeners('loginIndustry');
+        }
+    }, [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}>
+                <div className={styles.LYinner}>
+                    <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={require('@/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));

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

+@import '~antd/es/style/themes/variable.less';
+@userPageLogin-prefix-cls: ~'@{ant-prefix}-pro-pages-user-login';
+
+@keyframes loginTimeShow {
+    0% {
+        opacity: 1;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        zoom: 2;
+    }
+
+    50% {
+        opacity: 1;
+        top: 28px;
+        left: 45px;
+        transform: translate(0, 0);
+        zoom: 1;
+    }
+
+    60% {
+        opacity: 1;
+        left: 45px;
+        top: 28px;
+        transform: translate(0, 0);
+    }
+
+    70% {
+        opacity: 1;
+        left: 45px;
+        top: 28px;
+        transform: translate(0, 0);
+    }
+
+    75% {
+        opacity: 1;
+        left: 45px;
+        top: 28px;
+        transform: translate(0, 0);
+    }
+
+    100% {
+        opacity: 1;
+        left: 45px;
+        top: 28px;
+        transform: translate(0, 0);
+    }
+}
+
+.main {
+    // width: 368px;
+    margin: 0 auto;
+    height: 100%;
+    width: 100%;
+
+    @media screen and (max-width: @screen-sm) {
+        width: 95%;
+    }
+
+    .icon {
+        margin-left: 16px;
+        color: rgba(0, 0, 0, 0.2);
+        font-size: 24px;
+        vertical-align: middle;
+        cursor: pointer;
+        transition: color 0.3s;
+
+        &:hover {
+            color: @primary-color;
+        }
+    }
+
+    .other {
+        margin-top: 24px;
+        line-height: 22px;
+        text-align: left;
+
+        .register {
+            float: right;
+        }
+    }
+
+    .videLayer {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        object-fit: fill;
+    }
+
+    .LYinner {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-image: url(@/assets/images/login/店头/背景.jpg);
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+
+        &.newYearInner {
+            height: 100% !important;
+        }
+
+        .loginTime {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 1;
+            transform: translate(-50%, -50%);
+
+            &.newYearLoginTime {
+                position: absolute !important;
+                top: 28px !important;
+                left: 45px !important;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                z-index: 100;
+                transform: inherit !important;
+
+            }
+
+            img[role='logo'] {
+                height: 40px;
+                vertical-align: middle;
+            }
+
+            &.loginTimeShow {
+                animation-name: loginTimeShow;
+                animation-duration: 1s;
+                animation-iteration-count: 1;
+                animation-fill-mode: forwards;
+            }
+
+            .titleCase {
+                display: flex;
+                flex-direction: column;
+                margin: -5px 0 0 20px;
+
+                // max-width: 570px;
+                .title,
+                .subtitle {
+                    font-family: 'Microsoft YaHei';
+                    text-align: left;
+                    overflow-wrap: break-word;
+                    color: #ffffff;
+                }
+
+                .title {
+                    font-size: 28px;
+                }
+
+                .subtitle {
+                    font-size: 12px;
+                    line-height: 1;
+                }
+            }
+        }
+
+        .divider {
+            height: 1px;
+            background: rgba(255, 255, 255, 0.75);
+            opacity: 0.29;
+            width: 100%;
+            position: absolute;
+            top: 90px;
+            color: #e1e1e1;
+            padding: 0 0.7em;
+        }
+
+        .timeCase {
+
+            .time,
+            .dayofweek,
+            .date {
+                position: absolute;
+                font-family: 'MicrosoftYaHeiUI';
+                color: rgba(255, 255, 255, 1);
+            }
+
+            .time {
+                top: 26px;
+                right: 170px;
+                font-size: 40px;
+                margin-right: 10px;
+            }
+
+            .dayofweek {
+                top: 32px;
+                right: 125px;
+                font-size: 16px;
+            }
+
+            .date {
+                top: 57px;
+                right: 95px;
+                font-size: 14px;
+            }
+        }
+
+        .loginBlockWrapper {
+            width: 100%;
+            height: 100%;
+            background-image: url(https://panda-water.com/web4/assets/images/login/workflow/智联新春背景.png);
+            background-size: 100% 100%;
+            background-repeat: no-repeat;
+        }
+
+        .login-block {
+            width: 800px;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            margin-left: -400px;
+            margin-top: -150px;
+            display: flex;
+            background: #ffffff;
+
+            &.login-newYear-block {
+                width: 994px !important;
+                height: 424px !important;
+                margin-left: -497px !important;
+                margin-top: -212px !important;
+                background: url(https://panda-water.com/web4/assets/images/login/workflow/%E6%99%BA%E8%81%94%E6%96%B0%E6%98%A5%E8%83%8C%E6%99%AF%E6%A1%86.png) !important;
+                //width: 994px;
+                //height: 424px;
+                //position: absolute;
+                //left: 50%;
+                //top: 50%;
+                //margin-left: -497px;
+                //margin-top: -212px;
+                //display: flex;
+                background-size: 100% 100%;
+                background-repeat: no-repeat;
+
+                img {
+                    margin-top: 90px;
+                    margin-left: 168px;
+                }
+
+                .login-form {
+                    display: flex;
+                    align-items: center;
+                    margin-left: 32px;
+                    padding: 0;
+                    background: transparent;
+                    margin-top: -36px;
+                    // :global {
+                    //   .ant-btn-primary {
+                    //     background: #ff9600 !important;
+                    //     border-color:  #ff9600 !important;
+                    //   }
+                    // }
+                }
+            }
+
+            img {
+                margin-top: 50px;
+                margin-bottom: 50px;
+                margin-left: 30px;
+            }
+
+            .login-form {
+                padding: 50px 50px 50px;
+                background-color: #ffffff;
+            }
+        }
+    }
+
+    .caseHide {
+        display: none !important;
+    }
+
+    .footerCase {
+        width: 100%;
+        height: 16%;
+        background: #fff;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+
+        .quickMark {
+            position: absolute;
+            bottom: 48px;
+            text-align: center;
+            width: 100%;
+            font-size: 12px;
+            min-height: 71px;
+
+            &-single {
+                text-align: center;
+                width: 120px;
+                display: inline-block;
+
+                span {
+                    &.Android {
+                        display: block;
+                        background-image: url(https://panda-water.cn/web4/assets/images/login/dark/Android1.png);
+                        width: 26px;
+                        height: 32px;
+                        margin: auto;
+                        margin-bottom: 6px;
+                    }
+
+                    &.Wechat {
+                        display: block;
+                        background-image: url(https://panda-water.cn/web4/assets/images/login/dark/Wechat1.png);
+                        width: 34px;
+                        height: 32px;
+                        margin: auto;
+                        margin-bottom: 6px;
+                    }
+
+                    &.iphone {
+                        display: block;
+                        background-image: url(https://panda-water.cn/web4/assets/images/login/dark/iphone1.png);
+                        width: 28px;
+                        height: 32px;
+                        margin: auto;
+                        margin-bottom: 6px;
+                    }
+                }
+            }
+
+            .Android-single .Android-code,
+            .iphone-single .iphone-code {
+                margin: 0px 0px 10px 0px;
+                width: 150px;
+                height: 150px;
+                background: #fff;
+                padding: 5px;
+                display: none;
+                transform: translateX(-15px);
+            }
+
+            .icon-Container {
+                height: 50px;
+                cursor: pointer;
+            }
+        }
+
+        .copyright {
+            position: absolute;
+            z-index: 2;
+            text-align: center;
+            width: 100%;
+            bottom: 10px;
+            font-size: 13pz;
+            color: #000000;
+
+            .frontIcon {
+                margin-top: -5px;
+            }
+
+            a {
+                color: #000000;
+            }
+
+            .addons {
+                display: none;
+            }
+
+            .split {
+                border-left: 1px solid #000000;
+                margin: 0 8px;
+            }
+
+            .glyphicon-qrcode {
+                vertical-align: text-top;
+            }
+        }
+    }
+
+    :global {
+        .antd-pro-login-submit {
+            width: 100%;
+            margin-top: 24px;
+        }
+    }
+
+    .wechatQRcode {
+        width: 250px;
+        height: 220px;
+        margin: 0 15px;
+    }
+
+    .loginDisplay {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        font-size: 12px;
+
+        a {
+            &:hover {
+                color: @primary-color;
+                transition: all 0.3s ease-in-out;
+            }
+        }
+    }
+
+    .captcha {
+        color: @primary-6;
+        font-weight: 400;
+        cursor: pointer;
+        font-size: 12px;
+    }
+}
\ No newline at end of file

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

+/*
+ * 功能名称: 铁门关登录页
+ * 功能路径:
+ * 功能参数:
+ */
+
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import $ from 'jquery';
+
+import { Modal, Popover } from 'antd';
+import QRCode from 'qrcode.react';
+
+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 defaultSetting from '../../../../../../../config/defaultSetting';
+import LoginAction from '../../../login';
+import styles from './index.less';
+import Account from '../../../js/useAccount';
+import { defaultApp } from '../../../../../../micro';
+import logo from './images/logo.png';
+import qrcodePng from './images/扫码.png';
+import bg from './images/背景.jpg';
+const Cripples = require('@/assets/js/ripples/jquery.ripples');
+
+const PopOvercontent = () => {
+  const qrcodes = window.globalConfig && window.globalConfig.qrcode;
+  if (qrcodes) {
+    return <QRCode value={qrcodes} />;
+  }
+  return <span>手持APP下载未配置</span>;
+};
+
+const Login = forwardRef((props, _ref) => {
+  const sliVerify = useRef();
+  const loginFormRef = useRef();
+  const formRef = useRef(null);
+  const [status, setStatus] = useState('normal');
+  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 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);
+      });
+    action.events.on('loginHomePage', () => {
+      props.history.push(`/homePage`);
+    });
+    action.events.on('loginIndustry', () => {
+      props.history.push(`/industry`);
+    });
+    return () => {
+      action && action.events && action.events.removeAllListeners('loginSuccess');
+      action && action.events && action.events.removeAllListeners('loginError');
+      action && action.events && action.events.removeAllListeners('loginVisible');
+      action && action.events && action.events.removeAllListeners('loginHomePage');
+      action && action.events && action.events.removeAllListeners('loginIndustry');
+    };
+  }, [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} />;
+  };
+  /* eslint-disable */
+
+  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);
+    }
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      onShow();
+    }, 300);
+    setTimeout(() => {
+      $('.CarouselRipples').ripples({
+        resolution: 800,
+        dropRadius: 20, //px
+        perturbance: 2,
+      });
+    }, 1000);
+  }, []);
+  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 || defaultSetting.title}</title>
+        <meta name="description" content={props.global.title || defaultSetting.title} />
+      </Helmet>
+
+      <div
+        className={classnames(styles.fengqiuLogin, 'fengqiuLogin')}
+        onClick={onShow}
+        style={{ background: `url(${bg}) no-repeat center center`, backgroundSize: '100%' }}
+      >
+        {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']}>
+                    筑牢铁门关市供水安全防线 <br />
+                    赋能水务新质生产力
+                  </div>
+                  <div className={classnames(styles['inner-bg'], styles['login-part'])} ref={loginFormRef}>
+                    {renderPlatform()}
+                  </div>
+                </div>
+                <Popover
+                  content={PopOvercontent}
+                  title="扫码下载APP"
+                  placement="right"
+                  overlayClassName={'popover-style'}
+                >
+                  <img src={qrcodePng} alt="APP" className={styles['qrcode-box']} />
+                </Popover>
+              </div>
+            </QueueAnim>
+
+            <div key="loginheader" className={classnames(styles['login-header'])}>
+              <QueueAnim type="left">
+                <div key="logintitle" className={styles['left-title']}>
+                  <div>
+                    <img
+                      src={
+                        props.global &&
+                        props.global.transformDevAssetsBaseURL &&
+                        props.global.transformDevAssetsBaseURL(props.global.logo)
+                      }
+                      alt="logo"
+                    />
+                  </div>
+                  <div className={styles['cn-title']}>{props.global.title || defaultSetting.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}
+        <div className={classnames(styles.CarouselRipples, 'CarouselRipples')} data-ripple="ripple" />
+
+        <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/tiemenguan/index.less

+.fengqiuLogin {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    min-height: 7.0rem;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .caseHide {
+        display: none !important;
+    }
+
+
+    .inner-bg {
+        width: 100%;
+        height: 100%;
+
+
+        &>div {
+            width: 80%;
+            margin: 0 10% 10%;
+        }
+    }
+
+    .inner-wrapper {
+        position: absolute;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        top: 250px;
+        left: calc(50% - 268.5px);
+        z-index: 50;
+
+    }
+
+    .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-center {
+        position: relative;
+        width: 537px;
+        height: 390px;
+        border: 1px solid #FDFDFD;
+        box-shadow: 0px 6px 18px 0px rgba(25, 61, 79, 0.35);
+        border-radius: 15px;
+        z-index: 2;
+        backdrop-filter: blur(6px);
+
+    }
+
+    .welcome-title {
+        height: 155px;
+        border-radius: 8px 8px 0px 0px;
+        text-align: center;
+        line-height: 60px;
+        font-size: 40px;
+        font-weight: bold;
+        color: #008EFE;
+        padding-top: 15px;
+        text-shadow: #FFFFFF 1.5px 0 0, #FFFFFF 0 1.5px 0, #FFFFFF -1.5px 0 0, #FFFFFF 0 -1.5px 0;
+        font-family: '楷体';
+
+    }
+
+    .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 {
+        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;
+        // border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+
+        .left-title {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+
+            img {
+                // width: 55px;
+                height: 40px;
+            }
+
+            .cn-title {
+
+                font-size: 42px;
+                // font-family: 宋体;
+                font-weight: 400;
+                color: #333;
+                line-height: 55px;
+                text-shadow: 0px 1px 10px #A3AFC7;
+                line-height: 1;
+                margin-left: 10px;
+            }
+        }
+
+        .right-timebox {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 60px;
+
+            .curr-time {
+                width: 140px;
+                font-size: 34px;
+                font-family: Microsoft YaHei;
+                font-weight: 300;
+                color: #333;
+                text-align: right;
+            }
+
+            .curr-week-date {
+                margin-left: 10px;
+
+                .curr-week {
+                    font-size: 16px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #333;
+                }
+
+                .curr-date {
+                    font-size: 14px;
+                    font-family: Microsoft YaHei;
+                    font-weight: 400;
+                    color: #333;
+                }
+            }
+        }
+    }
+
+    .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: -23px;
+        width: 23px;
+        height: 23px;
+        background: #FFFFFF;
+        opacity: 0.8;
+        cursor: pointer;
+    }
+
+}
+
+
+& :global {
+    .fengqiuLogin {
+        .panda-console-base-btn {
+            border-radius: 20px;
+        }
+    }
+
+    .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;
+        }
+    }
+}
+
+.CarouselRipples {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+& :global {
+    .CarouselRipples:before {
+        content: '';
+        display: inline-block;
+        vertical-align: middle;
+        height: 100%;
+    }
+}
\ No newline at end of file

src/pages/user/login/template/water/index.less

@@ -26,10 +26,41 @@
     z-index: 2;
 
     .title-block {
+
+        img {
+            height: 64px;
+            filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
+        }
+
+        h1 {
+            display: inline;
+            margin: auto;
+            vertical-align: middle;
+            color: #fff;
+            margin-left: 10px;
+            font-size: 50px;
+            text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
+        }
+
+        h2 {
+            margin: 15px 0 0 0;
+            vertical-align: middle;
+            color: #fff;
+            text-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
+            text-align: center;
+        }
+    }
+
+    .title-block2 {
+        display: flex;
+        flex-flow: column;
+
         img {
             height: 64px;
             filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
+            object-fit: contain;
         }
+
         h1 {
             display: inline;
             margin: auto;
@@ -39,6 +70,7 @@
             font-size: 50px;
             text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
         }
+
         h2 {
             margin: 15px 0 0 0;
             vertical-align: middle;
@@ -47,16 +79,19 @@
             text-align: center;
         }
     }
+
     .login-block {
         width: 500px;
         margin: 60px 0 150px 0;
         position: relative;
+
         .login-form {
             background-color: rgba(255, 255, 255, 0.5);
             border-radius: 4px;
             box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2);
             padding: 50px;
-            & > div {
+
+            &>div {
                 width: 100%;
             }
 
@@ -64,16 +99,16 @@
                 width: 16px;
                 height: 16px;
             }
-            
+
             .form-group input {
                 font-size: 16px;
             }
-            
+
             .rememberpwd span {
                 position: relative;
                 top: -3px;
             }
-            
+
             button[type="submit"] {
                 width: 100%;
                 background-color: #35B2F1 !important;
@@ -82,20 +117,21 @@
                 outline: none !important;
                 border-color: transparent !important;
             }
-            
+
             .glyphicon {
                 color: #35B2F1;
             }
-            
+
             .input-group-addon {
                 background-color: #fff;
             }
-            
+
             .input-lg,
             .btn-lg {
                 height: 40px;
             }
         }
+
         .loginCcode {
             width: 34px;
             height: 34px;
@@ -106,19 +142,24 @@
             border-radius: 0 3px 3px 0;
             cursor: pointer;
             bottom: 3px;
+
             &:hover {
                 display: block;
                 background: transparent;
+
                 img {
                     display: none;
                 }
+
                 .codeBig {
                     display: block;
                 }
             }
+
             img {
                 width: 23px;
             }
+
             .codeBig {
                 width: 140px;
                 height: 140px;
@@ -128,6 +169,7 @@
                 background: rgba(255, 255, 255, 0.7);
                 padding: 6px;
                 display: none;
+
                 span {
                     font-size: 12px;
                     opacity: 0.75;
@@ -233,17 +275,21 @@
         font-size: 13px;
         color: #fff;
         display: none;
+
         a {
             color: #eee;
             text-decoration: underline;
         }
+
         .addons {
             display: none;
         }
+
         .split {
             border-left: 1px solid white;
             margin: 0 8px;
         }
+
         .glyphicon-qrcode {
             vertical-align: text-top;
         }

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

+import 'kit_utils/lib/format';
+
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+
+import { Modal } from 'antd';
+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, withRouter } from '@wisdom-utils/runtime';
+import { actionCreators } from '@/containers/App/store';
+import defaultSetting from '../../../../../../config/defaultSetting';
+import LoginAction from '../../login';
+import styles from './index.less';
+import useRenderQcode from '../../js/useRenderQcode';
+import Account from '../../js/useAccount';
+import IotComponent from '../../js/useIOTComponent';
+import { defaultApp } from '../../../../../micro';
+import QRCode from 'qrcode.react';
+
+const renderQRCode = props => {
+  const qrcodes = props?.qrcode?.split('|') ?? [];
+  if (qrcodes.length > 0 && qrcodes[0]) {
+    let value = qrcodes[0].replace(/{ip}/gi, props.ip || window.location.host).split('=')[1];
+    return <QRCode value={value} />;
+  }
+  return <span>手持APP下载未配置</span>;
+};
+
+const Login = forwardRef((props, _ref) => {
+  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 qrcodes = props.global?.qrcode?.split('|') ?? [];
+  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 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}`);
+        // 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);
+      });
+    action.events.on('loginHomePage', () => {
+      props.history.push(`/homePage`);
+    })
+    action.events.on('loginIndustry', () => {
+      props.history.push(`/industry`);
+    });
+    return () => {
+      action && action.events && action.events.removeAllListeners('loginSuccess');
+      action && action.events && action.events.removeAllListeners('loginError');
+      action && action.events && action.events.removeAllListeners('loginVisible');
+      action && action.events && action.events.removeAllListeners('loginHomePage');
+      action && action.events && action.events.removeAllListeners('loginIndustry');
+    };
+  }, [props.loginMode]);
+
+  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,
+    };
+    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}>
+        <video
+          class={styles.layer1}
+          src={
+            props.global &&
+            props.global.transformDevAssetsBaseURL &&
+            props.global.transformDevAssetsBaseURL('assets/videos/water.mp4')
+          }
+          muted={true}
+          poster={
+            props.global &&
+            props.global.transformDevAssetsBaseURL &&
+            props.global.transformDevAssetsBaseURL('/assets/videos/water.png')
+          }
+          autoPlay={true}
+          loop={true}
+        />
+        <div className={styles.layer2}>
+          <div class={styles['title-block2']}>
+            <img
+              role="logo"
+              src={
+                props.global &&
+                props.global.transformDevAssetsBaseURL &&
+                props.global.transformDevAssetsBaseURL(props.global.logo)
+              }
+            />
+            <h1>{props.global.title}</h1>
+            <h2>{window.globalConfig && window.globalConfig.subtitle}</h2>
+          </div>
+          <div className={classNames(styles['login-block'], styles.caseHide, 'animate__animated')} ref={loginFormRef}>
+            <div className={styles['login-form']}>{renderPlatform()}</div>
+            {
+              qrcodes.length > 0 && qrcodes[0]
+                ?
+                <div className={styles.loginCcode}>
+                  <img
+                    src={
+                      props.global &&
+                      props.global.transformDevAssetsBaseURL &&
+                      props.global.transformDevAssetsBaseURL('assets/images/login/石家庄/小程序@2x.png')
+                    }
+                    alt=""
+                  />
+                  <div className={styles.codeBig}>{renderQRCode(props.global)}</div>
+                </div>
+                : ''
+            }
+
+          </div>
+        </div>
+
+        <div className={classNames(styles.footerCase, 'animate__animated')} ref={footerRef}>
+          <div className={classNames(styles.quickMark)}>{renderAddons}</div>
+          <span className={classNames(styles.copyright)}>
+            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>
+            <span className="addons">
+              <span className="split" />
+              <a id="qrcode">
+                <span className="glyphicon glyphicon-qrcode" role="button" title="手持APP下载" />
+              </a>
+            </span>
+          </span>
+        </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(Login));

src/render.js

@@ -63,9 +63,15 @@ export const AppInitState = () => {
     const token = value && value !== 'undefined' ? value : null;
     return token;
   };
+  const getHDToken = () => {
+    const value = params.getParams('uniwater_utoken');
+    const hdtoken = value && value !== 'undefined' ? value : null;
+    return hdtoken;
+  };
 
   const client = getClient();
   const token = getUrlToken();
+  const HDtoken = getHDToken();
   if (sessionStorage.getItem('client') !== client) {
     sessionStorage.setItem('client', client);
   }
@@ -174,7 +180,7 @@ export const AppInitState = () => {
           }
           // eslint-disable-next-line no-new
           // 增加免登判定
-          if (!token && getToken()) {
+          if (!token && !HDtoken && getToken()) {
             // eslint-disable-next-line no-new
             const action = new Login(
               {