feat: 新源 集成登录

src/pages/bootpage/template/project/xinyuan/components/CityPage/index.js

+import classNames from 'classnames';
+import React, { useRef, useEffect, useState, useMemo } from 'react';
+import { imgMap } from '../imgImport';
+import styles from './index.less';
+
+const XinyuanCityPage = props => {
+  const ref = useRef(null);
+  const { integrationData, onLink, loginAction } = props;
+
+  const list1 = [
+    {
+      label: '取水监控',
+      img: imgMap['生产监控'],
+    },
+    {
+      label: '水厂监控',
+    },
+    {
+      label: '仪器校准',
+    },
+    {
+      label: '水厂维修',
+    },
+  ];
+  const list1Right = [
+    {
+      label: '水质管理',
+    },
+    {
+      label: '扫码巡检',
+    },
+    {
+      label: '设备维保',
+      img: imgMap['设备维修'],
+    },
+  ];
+  const list2 = [
+    {
+      label: '管网监控',
+    },
+    {
+      label: '管网GIS',
+    },
+    {
+      label: '管网采集',
+    },
+    {
+      label: '管网维修',
+    },
+    {
+      label: '管网巡检',
+    },
+  ];
+  const list3 = [
+    {
+      label: '营业收费',
+    },
+    {
+      label: '统一集抄',
+    },
+    {
+      label: '公众服务',
+    },
+    {
+      label: '报装管理',
+    },
+  ];
+  const list4 = [
+    {
+      label: '党员发展',
+    },
+    {
+      label: '党政要闻',
+    },
+    {
+      label: '知识库',
+    },
+    {
+      label: '培训考试',
+    },
+  ];
+  const list5 = [
+    {
+      label: '物联接入',
+    },
+    {
+      label: '平台接入',
+    },
+    {
+      label: '视频接入',
+    },
+    {
+      label: '门禁接入',
+    },
+  ];
+  useEffect(() => () => {}, []);
+
+  return (
+    <div className={classNames(styles.xinyuanCityPage, 'xinyuanCityPage')} ref={ref}>
+      <div className={styles.integration_content} style={{}}>
+        <div className={classNames(styles.integration_row1)}>
+          <div className={classNames(styles.integration_row1_col1)}>
+            <img src={imgMap['运营中心']} alt="运营中心" />
+          </div>
+          <div
+            className={classNames(
+              styles.integration_row1_col2,
+              integrationData['运营中心'] ? styles.integration_row_col_link : styles.integration_row_col_no,
+            )}
+            onClick={() => onLink(integrationData['运营中心'], loginAction)}
+          >
+            <img style={{ paddingTop: '1px' }} src={imgMap['运营总览']} alt="运营总览" />
+          </div>
+          <div
+            className={classNames(
+              styles.integration_row1_col2,
+              integrationData['运营中心'] ? styles.integration_row_col_link : styles.integration_row_col_no,
+            )}
+            onClick={() => onLink(integrationData['运营中心'], loginAction)}
+          >
+            <img src={imgMap['水厂总览']} alt="水厂总览" />
+          </div>
+          <div
+            className={classNames(
+              styles.integration_row1_col2,
+              integrationData['运营中心'] ? styles.integration_row_col_link : styles.integration_row_col_no,
+            )}
+            onClick={() => onLink(integrationData['运营中心'], loginAction)}
+          >
+            <img style={{ paddingTop: '4px' }} src={imgMap['生产运营分析']} alt="生产运营分析" />
+          </div>
+          <div
+            className={classNames(
+              styles.integration_row1_col2,
+              integrationData['运营中心'] ? styles.integration_row_col_link : styles.integration_row_col_no,
+            )}
+            onClick={() => onLink(integrationData['运营中心'], loginAction)}
+          >
+            <img style={{ paddingTop: '9px' }} src={imgMap['综合业务考核']} alt="综合业务考核" />
+          </div>
+        </div>
+        <div className={styles.integration_row2}>
+          <div className={classNames(styles.integration_col1)}>
+            <div className={styles.integration_col1_title}>生产管理</div>
+            <div className={styles.integration_col1_list}>
+              <div className={styles.integration_col1_list_left}>
+                {list1.map((item, index) => (
+                  <div
+                    className={classNames(
+                      styles.integration_col1_list_item,
+                      integrationData['生产管理'] ? styles.integration_row_col_link : styles.integration_row_col_no,
+                    )}
+                    key={item.label}
+                    onClick={() => onLink(integrationData['生产管理'], loginAction)}
+                  >
+                    <img src={item.img || imgMap[item.label]} alt={item.label} />
+                    <div className={styles.integration_col1_list_item_label}>{item.label}</div>
+                  </div>
+                ))}
+              </div>
+              <div className={styles.integration_col1_list_right}>
+                {list1Right.map((item, index) => (
+                  <div
+                    className={classNames(
+                      styles.integration_col1_list_item,
+                      integrationData['生产管理'] ? styles.integration_row_col_link : styles.integration_row_col_no,
+                    )}
+                    key={item.label}
+                    onClick={() => onLink(integrationData['生产管理'], loginAction)}
+                  >
+                    <img src={item.img || imgMap[item.label]} alt={item.label} />
+                    <div className={styles.integration_col1_list_item_label}>{item.label}</div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+          <div className={classNames(styles.integration_col2)}>
+            <div className={styles.integration_col2_title}>管网运维</div>
+            <div className={styles.integration_col2_list}>
+              {list2.map((item, index) => (
+                <div
+                  className={classNames(
+                    styles.integration_col2_list_item,
+                    integrationData['管网运维'] ? styles.integration_row_col_link : styles.integration_row_col_no,
+                  )}
+                  key={item.label}
+                  name={item.label}
+                  onClick={() => onLink(integrationData['管网运维'], loginAction)}
+                >
+                  <img src={imgMap[item.label]} alt={item.label} />
+                  <div className={styles.integration_col2_list_item_label}>{item.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div
+            className={classNames(
+              styles.integration_col_water,
+              integrationData['水表维护'] ? styles.integration_row_col_link : styles.integration_row_col_no,
+            )}
+            onClick={() => onLink(integrationData['水表维护'], loginAction)}
+          >
+            <div className={styles.integration_col_water_text}>水表维护</div>
+          </div>
+
+          <div className={classNames(styles.integration_col3)}>
+            <div className={styles.integration_col3_title}>业务中心</div>
+            <div className={styles.integration_col3_list}>
+              {list3.map((item, index) => (
+                <div
+                  className={classNames(
+                    styles.integration_col3_list_item,
+                    item.label !== '报装管理' && integrationData['业务中心']
+                      ? styles.integration_row_col_link
+                      : styles.integration_row_col_no,
+                  )}
+                  key={item.label}
+                  name={item.label}
+                  onClick={() => item.label !== '报装管理' && onLink(integrationData['业务中心'], loginAction)}
+                >
+                  <img src={imgMap[item.label]} alt={item.label} />
+                  <div className={styles.integration_col3_list_item_label}>{item.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className={classNames(styles.integration_col4)}>
+            <div className={styles.integration_col4_title}>党建管理</div>
+            <div className={styles.integration_col4_list}>
+              {list4.map((item, index) => (
+                <div
+                  className={classNames(
+                    styles.integration_col4_list_item,
+                    integrationData['党建管理'] ? styles.integration_row_col_link : styles.integration_row_col_no,
+                  )}
+                  key={item.label}
+                  name={item.label}
+                  onClick={() => onLink(integrationData['党建管理'], loginAction)}
+                >
+                  <img src={imgMap[item.label]} alt={item.label} />
+                  <div className={styles.integration_col4_list_item_label}>{item.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        {list5.map((item, index) => (
+          <div
+            className={classNames(
+              styles.integration_col5_list_item,
+              integrationData['支撑平台'] ? styles.integration_row_col_link : styles.integration_row_col_no,
+            )}
+            key={item.label}
+            name={item.label}
+            onClick={() => onLink(integrationData['支撑平台'], loginAction)}
+          >
+            <div className={styles.integration_col5_list_item_label}>{item.label}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default XinyuanCityPage;

src/pages/bootpage/template/project/xinyuan/components/CityPage/index.less

+@imgSrc: '@/assets/images/integration/xinyuan/';
+
+.xinyuanCityPage {
+  width: 100%;
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  background: url('@{imgSrc}/新源城区小.jpg') center/100% 100% no-repeat;
+
+
+
+  .integration_content {
+    position: absolute;
+    left: 197px;
+    top: 103px;
+    padding-top: 10px;
+    height: calc(100% - 113px);
+    overflow: hidden;
+  }
+
+  .integration_row_col_no {
+    // filter: grayscale(100%) brightness(90%);
+    cursor: not-allowed;
+  }
+
+  .integration_row_col_link {
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .integration_row_col_link:hover {
+    filter: brightness(120%);
+    transform: translateY(-5px);
+
+  }
+
+  .integration_row1 {
+    // background: url('@{imgSrc}/运营总览.jpg') center center no-repeat;
+    display: flex;
+
+    &_col1 {
+      width: 183px;
+      height: 180px;
+    }
+
+    &_col2 {
+      width: 309px;
+      // height: 180px;
+      margin-left: 12px;
+    }
+  }
+
+  .integration_row2 {
+    display: flex;
+  }
+
+  .integration_col1 {
+    &_title {
+      width: 529px;
+      height: 49px;
+      background: url('@{imgSrc}/生产管理title.png') center/100% 100% no-repeat;
+      text-align: center;
+      line-height: 68px;
+      font-weight: bold;
+      font-size: 18px;
+      color: #FFFFFF;
+
+    }
+
+    &_list {
+      display: flex;
+
+      &_left {
+        display: grid;
+        grid-template-columns: 149px 149px;
+        grid-template-rows: 109px 109px;
+
+        .integration_col1_list_item {
+          text-align: center;
+          background: url('@{imgSrc}/厂站管理bg.png') center/100% 100% no-repeat;
+
+          img {
+            width: 52px;
+            height: 52px;
+          }
+
+          &_label {
+            margin-top: 14px;
+            font-weight: bold;
+            font-size: 15px;
+            color: #FFFFFF;
+            line-height: 1;
+          }
+        }
+      }
+
+      &_right {
+        display: grid;
+        grid-template-columns: 240px;
+        grid-template-rows: 68px 68px 68px;
+        padding-top: 7px;
+
+        .integration_col1_list_item {
+          background: url('@{imgSrc}/水质管理bg.png') center/100% 100% no-repeat;
+          display: flex;
+          align-items: center;
+          padding-bottom: 10px;
+
+          img {
+            width: 52px;
+            height: 52px;
+            margin: 0 22px 0 40px;
+          }
+
+          &_label {
+            font-weight: bold;
+            font-size: 15px;
+            color: #FFFFFF;
+            line-height: 1;
+          }
+        }
+      }
+
+    }
+  }
+
+  .integration_col_water {
+    width: 85px;
+    height: 261px;
+    font-weight: bold;
+    font-size: 18px;
+    color: #FFFFFF;
+    background: url('@{imgSrc}/水表维护bg.png') center/100% 100% no-repeat;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &_text {
+      writing-mode: vertical-rl;
+      font-weight: bold;
+      font-size: 18px;
+      color: #FFFFFF;
+      background: linear-gradient(0deg, #C7ECFF 0%, #FFFFFF 100%);
+      -webkit-background-clip: text;
+      letter-spacing: 1px;
+    }
+  }
+
+  .integration_col2 {
+    margin-left: 5px;
+
+    &_title {
+      width: 297px;
+      height: 49px;
+      background: url('@{imgSrc}/管网运维title.png') center/100% 100% no-repeat;
+      text-align: center;
+      line-height: 68px;
+      font-weight: bold;
+      font-size: 18px;
+      color: #FFFFFF;
+
+    }
+
+    &_list {
+      display: grid;
+      grid-template-columns: 146px 146px;
+      grid-template-rows: 74px 74px;
+
+      &_item {
+        text-align: center;
+        background: url('@{imgSrc}/管网运维bg.png') center/100% 100% no-repeat;
+
+        img {
+          width: 52px;
+          height: 52px;
+        }
+
+        &_label {
+          margin-top: -10px;
+          font-weight: bold;
+          font-size: 15px;
+          color: #FFFFFF;
+          line-height: 1;
+        }
+      }
+
+      &_item[name='管网巡检'] {
+        width: 298px;
+        height: 64px;
+        background: url('@{imgSrc}/管网巡检bg.png') center/100% 100% no-repeat;
+        display: flex;
+        align-items: center;
+
+        img {
+          margin: -3px 43px 0 51px;
+        }
+
+        &_label {
+          margin-top: 0;
+
+        }
+      }
+    }
+  }
+
+  .integration_col3 {
+    margin-left: 10px;
+
+    &_title {
+      width: 297px;
+      height: 49px;
+      background: url('@{imgSrc}/管网运维title.png') center/100% 100% no-repeat;
+      text-align: center;
+      line-height: 68px;
+      font-weight: bold;
+      font-size: 18px;
+      color: #FFFFFF;
+
+    }
+
+    &_list {
+      display: grid;
+      grid-template-columns: 149px 149px;
+      grid-template-rows: 109px 109px;
+
+      &_item {
+        text-align: center;
+        background: url('@{imgSrc}/业务中心bg.png') center/100% 100% no-repeat;
+
+        img {
+          width: 52px;
+          height: 52px;
+        }
+
+        &_label {
+          margin-top: 14px;
+          font-weight: bold;
+          font-size: 15px;
+          color: #FFFFFF;
+          line-height: 1;
+        }
+      }
+
+      &_item[name='报装管理'] {
+        filter: grayscale(80%) brightness(90%);
+      }
+    }
+  }
+
+  .integration_col4 {
+    margin-left: 10px;
+
+    &_title {
+      width: 297px;
+      height: 49px;
+      background: url('@{imgSrc}/管网运维title.png') center/100% 100% no-repeat;
+      text-align: center;
+      line-height: 68px;
+      font-weight: bold;
+      font-size: 18px;
+      color: #FFFFFF;
+
+    }
+
+    &_list {
+      display: grid;
+      grid-template-columns: 149px 149px;
+      grid-template-rows: 109px 109px;
+
+      &_item {
+        text-align: center;
+        background: url('@{imgSrc}/党建管理bg.png') center/100% 100% no-repeat;
+
+        img {
+          width: 52px;
+          height: 52px;
+        }
+
+        &_label {
+          margin-top: 14px;
+          font-weight: bold;
+          font-size: 15px;
+          color: #FFFFFF;
+          line-height: 1;
+        }
+      }
+
+    }
+  }
+
+  .integration_col5_list_item {
+    position: absolute;
+
+    &_label {
+      font-weight: bold;
+      font-size: 18px;
+      color: #FFFFFF;
+    }
+  }
+
+  .integration_col5_list_item[name='物联接入'] {
+    width: 235px;
+    height: 120px;
+    background: url('@{imgSrc}/物联接入.png') center/100% 100% no-repeat;
+    left: 33px;
+    top: 514px;
+
+    .integration_col5_list_item_label {
+      padding: 28px 0 0 25px;
+      line-height: 1;
+    }
+  }
+
+  .integration_col5_list_item[name='平台接入'] {
+    width: 231px;
+    height: 123px;
+    background: url('@{imgSrc}/平台接入.png') center/100% 100% no-repeat;
+    left: 355px;
+    top: 572px;
+
+    .integration_col5_list_item_label {
+      padding: 28px 0 0 25px;
+      line-height: 1;
+    }
+  }
+
+  .integration_col5_list_item[name='视频接入'] {
+    width: 228px;
+    height: 122px;
+    background: url('@{imgSrc}/视频接入.png') center/100% 100% no-repeat;
+    left: 918px;
+    top: 572px;
+
+    .integration_col5_list_item_label {
+      padding: 28px 0 0 124px;
+      line-height: 1;
+    }
+  }
+
+  .integration_col5_list_item[name='门禁接入'] {
+    width: 236px;
+    height: 123px;
+    background: url('@{imgSrc}/门禁接入.png') center/100% 100% no-repeat;
+    left: 1234px;
+    top: 512px;
+
+    .integration_col5_list_item_label {
+      padding: 28px 0 0 133px;
+      line-height: 1;
+    }
+  }
+}
+
+.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;
+}
+
+
+& :global {
+  .xinyuanCityPage {
+    .anticon {
+      vertical-align: 0.125em;
+    }
+  }
+}
\ No newline at end of file

src/pages/bootpage/template/project/xinyuan/components/VillagePage/index.js

+import classNames from 'classnames';
+import React, { useRef, useEffect, useState, useMemo } from 'react';
+import { imgMap } from '../imgImport';
+import styles from './index.less';
+
+const XinyuanVillagePage = props => {
+  const ref = useRef(null);
+  const { integrationData, onLink, loginAction } = props;
+
+  const list1 = [
+    {
+      label: '生产监控',
+    },
+    {
+      label: '泵站监控',
+    },
+    {
+      label: '水池监控',
+    },
+    {
+      label: '水质管理',
+    },
+    {
+      label: '仪器校准',
+    },
+    {
+      label: '水厂维修',
+    },
+    {
+      label: '扫码巡检',
+    },
+    {
+      label: '设备维修',
+    },
+  ];
+  const list2 = [
+    {
+      label: '管网监控',
+    },
+    {
+      label: '管网GIS',
+    },
+    {
+      label: '管网采集',
+    },
+    {
+      label: '管网维修',
+    },
+    {
+      label: '管网巡检',
+    },
+  ];
+  const list3 = [
+    {
+      label: '营业收费',
+    },
+    {
+      label: '统一集抄',
+    },
+    {
+      label: '公众服务',
+    },
+    {
+      label: '报装管理',
+    },
+  ];
+  const list4 = [
+    {
+      label: '党员发展',
+    },
+    {
+      label: '党政要闻',
+    },
+    {
+      label: '知识库',
+    },
+    {
+      label: '培训考试',
+    },
+  ];
+  const list5 = [
+    {
+      label: '物联接入',
+    },
+    {
+      label: '平台接入',
+    },
+    {
+      label: '视频接入',
+    },
+    {
+      label: '门禁接入',
+    },
+  ];
+  useEffect(() => () => {}, []);
+
+  return (
+    <div className={classNames(styles.xinyuanVillagePage, 'xinyuanVillagePage')} ref={ref}>
+      <div className={styles.integration_content} style={{}}>
+        <div className={classNames(styles.integration_row1)}>
+          <div className={classNames(styles.integration_row1_col1)}>
+            <img src={imgMap['运营中心']} alt="运营中心" />
+          </div>
+          <div
+            className={classNames(
+              styles.integration_row1_col2,
+              integrationData['中西部乡镇运营中心'] ? styles.integration_row_col_link : styles.integration_row_col_no,
+            )}
+            onClick={() => onLink(integrationData['中西部乡镇运营中心'], loginAction)}
+          >
+            <img style={{ paddingTop: '1px' }} src={imgMap['运营总览']} alt="运营总览" />
+          </div>
+          <div
+            className={classNames(
+              styles.integration_row1_col2,
+              integrationData['中西部乡镇运营中心'] ? styles.integration_row_col_link : styles.integration_row_col_no,
+            )}
+            onClick={() => onLink(integrationData['中西部乡镇运营中心'], loginAction)}
+          >
+            <img src={imgMap['水厂总览']} alt="水厂总览" />
+          </div>
+          <div
+            className={classNames(
+              styles.integration_row1_col2,
+              integrationData['中西部乡镇运营中心'] ? styles.integration_row_col_link : styles.integration_row_col_no,
+            )}
+            onClick={() => onLink(integrationData['中西部乡镇运营中心'], loginAction)}
+          >
+            <img style={{ paddingTop: '4px' }} src={imgMap['生产运营分析']} alt="生产运营分析" />
+          </div>
+          <div
+            className={classNames(
+              styles.integration_row1_col2,
+              integrationData['中西部乡镇运营中心'] ? styles.integration_row_col_link : styles.integration_row_col_no,
+            )}
+            onClick={() => onLink(integrationData['中西部乡镇运营中心'], loginAction)}
+          >
+            <img style={{ paddingTop: '9px' }} src={imgMap['综合业务考核']} alt="综合业务考核" />
+          </div>
+        </div>
+        <div className={styles.integration_row2}>
+          <div className={classNames(styles.integration_col1)}>
+            <div className={styles.integration_col1_title}>厂站管理</div>
+            <div className={styles.integration_col1_list}>
+              {list1.map((item, index) => (
+                <div
+                  className={classNames(
+                    styles.integration_col1_list_item,
+                    integrationData['中西部乡镇厂站管理']
+                      ? styles.integration_row_col_link
+                      : styles.integration_row_col_no,
+                  )}
+                  key={item.label}
+                  onClick={() => onLink(integrationData['中西部乡镇厂站管理'], loginAction)}
+                >
+                  <img src={imgMap[item.label]} alt={item.label} />
+                  <div className={styles.integration_col1_list_item_label}>{item.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className={classNames(styles.integration_col2)}>
+            <div className={styles.integration_col2_title}>管网运维</div>
+            <div className={styles.integration_col2_list}>
+              {list2.map((item, index) => (
+                <div
+                  className={classNames(
+                    styles.integration_col2_list_item,
+                    integrationData['中西部乡镇管网运维']
+                      ? styles.integration_row_col_link
+                      : styles.integration_row_col_no,
+                  )}
+                  key={item.label}
+                  name={item.label}
+                  onClick={() => onLink(integrationData['中西部乡镇管网运维'], loginAction)}
+                >
+                  <img src={imgMap[item.label]} alt={item.label} />
+                  <div className={styles.integration_col2_list_item_label}>{item.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className={classNames(styles.integration_col3)}>
+            <div className={styles.integration_col3_title}>业务中心</div>
+            <div className={styles.integration_col3_list}>
+              {list3.map((item, index) => (
+                <div
+                  className={classNames(
+                    styles.integration_col3_list_item,
+                    item.label !== '报装管理' && integrationData['中西部乡镇业务中心']
+                      ? styles.integration_row_col_link
+                      : styles.integration_row_col_no,
+                  )}
+                  key={item.label}
+                  name={item.label}
+                  onClick={() =>
+                    item.label !== '报装管理' && onLink(integrationData['中西部乡镇业务中心'], loginAction)
+                  }
+                >
+                  <img src={imgMap[item.label]} alt={item.label} />
+                  <div className={styles.integration_col3_list_item_label}>{item.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className={classNames(styles.integration_col4)}>
+            <div className={styles.integration_col4_title}>党建管理</div>
+            <div className={styles.integration_col4_list}>
+              {list4.map((item, index) => (
+                <div
+                  className={classNames(
+                    styles.integration_col4_list_item,
+                    integrationData['中西部乡镇党建管理']
+                      ? styles.integration_row_col_link
+                      : styles.integration_row_col_no,
+                  )}
+                  key={item.label}
+                  name={item.label}
+                  onClick={() => onLink(integrationData['中西部乡镇党建管理'], loginAction)}
+                >
+                  <img src={imgMap[item.label]} alt={item.label} />
+                  <div className={styles.integration_col4_list_item_label}>{item.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        {list5.map((item, index) => (
+          <div
+            className={classNames(
+              styles.integration_col5_list_item,
+              integrationData['中西部乡镇支撑平台'] ? styles.integration_row_col_link : styles.integration_row_col_no,
+            )}
+            key={item.label}
+            name={item.label}
+            onClick={() => onLink(integrationData['中西部乡镇支撑平台'], loginAction)}
+          >
+            <div className={styles.integration_col5_list_item_label}>{item.label}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default XinyuanVillagePage;

src/pages/bootpage/template/project/xinyuan/components/VillagePage/index.less

+@imgSrc: '@/assets/images/integration/xinyuan/';
+
+.xinyuanVillagePage {
+  width: 100%;
+  position: relative;
+  height: 100%;
+  overflow: hidden;
+  background: url('@{imgSrc}/新源乡镇.jpg') center/100% 100% no-repeat;
+
+
+  .integration_content {
+    position: absolute;
+    left: 197px;
+    top: 103px;
+    padding-top: 10px;
+    height: calc(100% - 113px);
+    overflow: hidden;
+  }
+
+  .integration_row_col_no {
+    // filter: grayscale(100%) brightness(90%);
+    cursor: not-allowed;
+  }
+
+  .integration_row_col_link {
+    cursor: pointer;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .integration_row_col_link:hover {
+    filter: brightness(120%);
+    transform: translateY(-5px);
+
+  }
+
+  .integration_row1 {
+    // background: url('@{imgSrc}/运营总览.jpg') center center no-repeat;
+    display: flex;
+
+    &_col1 {
+      width: 183px;
+      height: 180px;
+    }
+
+    &_col2 {
+      width: 309px;
+      // height: 180px;
+      margin-left: 12px;
+    }
+  }
+
+  .integration_row2 {
+    display: flex;
+  }
+
+  .integration_col1 {
+    &_title {
+      width: 590px;
+      height: 49px;
+      background: url('@{imgSrc}/厂站管理title.png') center/100% 100% no-repeat;
+      text-align: center;
+      line-height: 68px;
+      font-weight: bold;
+      font-size: 18px;
+      color: #FFFFFF;
+
+    }
+
+    &_list {
+      display: grid;
+      grid-template-columns: 149px 149px 149px 149px;
+      grid-template-rows: 109px 109px;
+
+      &_item {
+        text-align: center;
+        background: url('@{imgSrc}/厂站管理bg.png') center/100% 100% no-repeat;
+
+        img {
+          width: 52px;
+          height: 52px;
+        }
+
+        &_label {
+          margin-top: 14px;
+          font-weight: bold;
+          font-size: 15px;
+          color: #FFFFFF;
+          line-height: 1;
+        }
+      }
+    }
+  }
+
+  .integration_col2 {
+    margin-left: 5px;
+
+    &_title {
+      width: 297px;
+      height: 49px;
+      background: url('@{imgSrc}/管网运维title.png') center/100% 100% no-repeat;
+      text-align: center;
+      line-height: 68px;
+      font-weight: bold;
+      font-size: 18px;
+      color: #FFFFFF;
+
+    }
+
+    &_list {
+      display: grid;
+      grid-template-columns: 146px 146px;
+      grid-template-rows: 74px 74px;
+
+      &_item {
+        text-align: center;
+        background: url('@{imgSrc}/管网运维bg.png') center/100% 100% no-repeat;
+
+        img {
+          width: 52px;
+          height: 52px;
+        }
+
+        &_label {
+          margin-top: -10px;
+          font-weight: bold;
+          font-size: 15px;
+          color: #FFFFFF;
+          line-height: 1;
+        }
+      }
+
+      &_item[name='管网巡检'] {
+        width: 298px;
+        height: 64px;
+        background: url('@{imgSrc}/管网巡检bg.png') center/100% 100% no-repeat;
+        display: flex;
+        align-items: center;
+
+        img {
+          margin: -3px 43px 0 51px;
+        }
+
+        &_label {
+          margin-top: 0;
+
+        }
+      }
+    }
+  }
+
+  .integration_col3 {
+    margin-left: 10px;
+
+    &_title {
+      width: 297px;
+      height: 49px;
+      background: url('@{imgSrc}/管网运维title.png') center/100% 100% no-repeat;
+      text-align: center;
+      line-height: 68px;
+      font-weight: bold;
+      font-size: 18px;
+      color: #FFFFFF;
+
+    }
+
+    &_list {
+      display: grid;
+      grid-template-columns: 149px 149px;
+      grid-template-rows: 109px 109px;
+
+      &_item {
+        text-align: center;
+        background: url('@{imgSrc}/业务中心bg.png') center/100% 100% no-repeat;
+
+        img {
+          width: 52px;
+          height: 52px;
+        }
+
+        &_label {
+          margin-top: 14px;
+          font-weight: bold;
+          font-size: 15px;
+          color: #FFFFFF;
+          line-height: 1;
+        }
+      }
+
+      &_item[name='报装管理'] {
+        filter: grayscale(80%) brightness(90%);
+      }
+    }
+  }
+
+  .integration_col4 {
+    margin-left: 10px;
+
+    &_title {
+      width: 297px;
+      height: 49px;
+      background: url('@{imgSrc}/管网运维title.png') center/100% 100% no-repeat;
+      text-align: center;
+      line-height: 68px;
+      font-weight: bold;
+      font-size: 18px;
+      color: #FFFFFF;
+
+    }
+
+    &_list {
+      display: grid;
+      grid-template-columns: 149px 149px;
+      grid-template-rows: 109px 109px;
+
+      &_item {
+        text-align: center;
+        background: url('@{imgSrc}/党建管理bg.png') center/100% 100% no-repeat;
+
+        img {
+          width: 52px;
+          height: 52px;
+        }
+
+        &_label {
+          margin-top: 14px;
+          font-weight: bold;
+          font-size: 15px;
+          color: #FFFFFF;
+          line-height: 1;
+        }
+      }
+
+    }
+  }
+
+  .integration_col5_list_item {
+    position: absolute;
+
+    &_label {
+      font-weight: bold;
+      font-size: 18px;
+      color: #FFFFFF;
+    }
+  }
+
+  .integration_col5_list_item[name='物联接入'] {
+    width: 235px;
+    height: 120px;
+    background: url('@{imgSrc}/物联接入.png') center/100% 100% no-repeat;
+    left: 33px;
+    top: 514px;
+
+    .integration_col5_list_item_label {
+      padding: 28px 0 0 25px;
+      line-height: 1;
+    }
+  }
+
+  .integration_col5_list_item[name='平台接入'] {
+    width: 231px;
+    height: 123px;
+    background: url('@{imgSrc}/平台接入.png') center/100% 100% no-repeat;
+    left: 355px;
+    top: 572px;
+
+    .integration_col5_list_item_label {
+      padding: 28px 0 0 25px;
+      line-height: 1;
+    }
+  }
+
+  .integration_col5_list_item[name='视频接入'] {
+    width: 228px;
+    height: 122px;
+    background: url('@{imgSrc}/视频接入.png') center/100% 100% no-repeat;
+    left: 918px;
+    top: 572px;
+
+    .integration_col5_list_item_label {
+      padding: 28px 0 0 124px;
+      line-height: 1;
+    }
+  }
+
+  .integration_col5_list_item[name='门禁接入'] {
+    width: 236px;
+    height: 123px;
+    background: url('@{imgSrc}/门禁接入.png') center/100% 100% no-repeat;
+    left: 1234px;
+    top: 512px;
+
+    .integration_col5_list_item_label {
+      padding: 28px 0 0 133px;
+      line-height: 1;
+    }
+  }
+}
+
+
+.hide {
+  visibility: hidden;
+}
+
+
+& :global {
+  .xinyuanVillagePage {
+    .anticon {
+      vertical-align: 0.125em;
+    }
+  }
+}
\ No newline at end of file

src/pages/bootpage/template/project/xinyuan/components/imgImport.js

@@ -13,6 +13,55 @@ import 乡镇供水tip from '@/assets/images/integration/xinyuan/乡镇供水tip
 import 城区供水tip from '@/assets/images/integration/xinyuan/城区供水tip.png';
 import 乡镇供水 from '@/assets/images/integration/xinyuan/乡镇供水.png';
 import 城区供水 from '@/assets/images/integration/xinyuan/城区供水.png';
+import 返回 from '@/assets/images/integration/xinyuan/返回.png';
+import 运营中心 from '@/assets/images/integration/xinyuan/运营中心.png';
+import 运营总览 from '@/assets/images/integration/xinyuan/运营总览.png';
+import 水厂总览 from '@/assets/images/integration/xinyuan/水厂总览.png';
+import 生产运营分析 from '@/assets/images/integration/xinyuan/生产运营分析.png';
+import 综合业务考核 from '@/assets/images/integration/xinyuan/综合业务考核.png';
+
+import 厂站管理title from '@/assets/images/integration/xinyuan/厂站管理title.png';
+import 厂站管理bg from '@/assets/images/integration/xinyuan/厂站管理bg.png';
+import 生产监控 from '@/assets/images/integration/xinyuan/生产监控.png';
+import 泵站监控 from '@/assets/images/integration/xinyuan/泵站监控.png';
+import 水池监控 from '@/assets/images/integration/xinyuan/水池监控.png';
+import 水质管理 from '@/assets/images/integration/xinyuan/水质管理.png';
+import 仪器校准 from '@/assets/images/integration/xinyuan/仪器校准.png';
+import 水厂维修 from '@/assets/images/integration/xinyuan/水厂维修.png';
+import 扫码巡检 from '@/assets/images/integration/xinyuan/扫码巡检.png';
+import 设备维修 from '@/assets/images/integration/xinyuan/设备维修.png';
+
+import 管网运维title from '@/assets/images/integration/xinyuan/管网运维title.png';
+import 管网运维bg from '@/assets/images/integration/xinyuan/管网运维bg.png';
+import 管网巡检bg from '@/assets/images/integration/xinyuan/管网巡检bg.png';
+import 管网监控 from '@/assets/images/integration/xinyuan/管网监控.png';
+import 管网GIS from '@/assets/images/integration/xinyuan/管网GIS.png';
+import 管网采集 from '@/assets/images/integration/xinyuan/管网采集.png';
+import 管网维修 from '@/assets/images/integration/xinyuan/管网维修.png';
+import 管网巡检 from '@/assets/images/integration/xinyuan/管网巡检.png';
+
+import 业务中心bg from '@/assets/images/integration/xinyuan/业务中心bg.png';
+import 营业收费 from '@/assets/images/integration/xinyuan/营业收费.png';
+import 统一集抄 from '@/assets/images/integration/xinyuan/统一集抄.png';
+import 公众服务 from '@/assets/images/integration/xinyuan/公众服务.png';
+import 报装管理 from '@/assets/images/integration/xinyuan/报装管理.png';
+
+import 党建管理bg from '@/assets/images/integration/xinyuan/党建管理bg.png';
+import 党员发展 from '@/assets/images/integration/xinyuan/党员发展.png';
+import 党政要闻 from '@/assets/images/integration/xinyuan/党政要闻.png';
+import 知识库 from '@/assets/images/integration/xinyuan/知识库.png';
+import 培训考试 from '@/assets/images/integration/xinyuan/培训考试.png';
+
+import 物联接入 from '@/assets/images/integration/xinyuan/物联接入.png';
+import 平台接入 from '@/assets/images/integration/xinyuan/平台接入.png';
+import 视频接入 from '@/assets/images/integration/xinyuan/视频接入.png';
+import 门禁接入 from '@/assets/images/integration/xinyuan/门禁接入.png';
+
+import bg2 from '@/assets/images/integration/xinyuan/新源城区小.jpg';
+import 生产管理title from '@/assets/images/integration/xinyuan/生产管理title.png';
+import 水表维护bg from '@/assets/images/integration/xinyuan/水表维护bg.png';
+import 水质管理bg from '@/assets/images/integration/xinyuan/水质管理bg.png';
+import 水厂监控 from '@/assets/images/integration/xinyuan/水厂监控.png';
 
 export const imgMap = {
   bg1,
@@ -23,4 +72,36 @@ export const imgMap = {
   城区供水tip,
   乡镇供水,
   城区供水,
+  返回,
+  运营中心,
+  运营总览,
+  水厂总览,
+  生产运营分析,
+  综合业务考核,
+  生产监控,
+  泵站监控,
+  水池监控,
+  水质管理,
+  仪器校准,
+  水厂维修,
+  扫码巡检,
+  设备维修,
+  管网监控,
+  管网GIS,
+  管网采集,
+  管网维修,
+  管网巡检,
+  营业收费,
+  统一集抄,
+  公众服务,
+  报装管理,
+  党员发展,
+  党政要闻,
+  知识库,
+  培训考试,
+  门禁接入,
+  视频接入,
+  平台接入,
+  物联接入,
+  水厂监控,
 };

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

@@ -5,91 +5,383 @@
  * @Date: 2024-12-27 14:22:22
  */
 import React, { useEffect, useMemo, useState, useRef } from 'react';
-import { Empty, Spin, notification } from 'antd';
+import { message } from 'antd';
 import { appService } from '@/api';
 import Cookies from 'js-cookie';
 import _ from 'lodash';
+import LoadPage from '@/components/LoadPage';
+import LoginAction from '@/pages/user/login/login';
+import { defaultApp } from '@/micro';
+import { getWebSiteConfig } from '@/api/service/base';
+import { store } from '@wisdom-utils/utils';
+import axios from 'axios';
+import { searchUrl } from '@/utils/utils';
 import { useHistory, useAliveController } from '@wisdom-utils/runtime';
 import { connect } from 'react-redux';
 import { actionCreators } from '@/containers/App/store';
-import { SERVICE_INTERFACE_SUCCESS_CODE } from '@/constants'; // 系统配置项名称
 import classNames from 'classnames';
+import arrowLeftImg from '@/assets/images/demonstration/左箭头.png';
+import backImg from '@/assets/images/demonstration/返回.png';
 import styles from './index.less';
+import VillagePage from './components/VillagePage';
+import CityPage from './components/CityPage';
 import { imgMap } from './components/imgImport';
 const IntegrationXinyuan = props => {
-  const [info, setInfo] = useState({
-    first: true,
-    loading: true,
-    error: false,
-  });
+  const clientRef = useRef(props.global.client);
+  const progressRef2 = useRef(0);
+  const timer2 = useRef(null);
+  const timer3 = useRef(null);
+  const integratedConfig = props.integratedConfig?.toObject
+    ? props.integratedConfig.toObject()
+    : props.integratedConfig || {};
+  const integrationClient = integratedConfig?.client || window?.globalConfig?.client || 'city'; // 集成登录client
+  const loadingTime = integratedConfig?.loadingTime || 5;
+  const [jumpLoading, setJumpLoading] = useState(false);
+  const [progressValue2, setProgressValue2] = useState(window.jumpLoadingProgress || 0);
+
+  const [integrationData, setIntegrationData] = useState({}); // 所有子站
+  const [loginAction, setAction] = useState(() => new LoginAction(props));
+
   const { clear } = useAliveController();
   const history = useHistory();
-  const [template, setTemplate] = useState(window?.globalConfig?.displayMode || 'default');
+  const [showPage, setShowPage] = useState('homePage');
+  const [pageAuth, setPageAuth] = useState([]);
+  const changePage = page => {
+    if (!pageAuth.includes(page)) return;
+    if (page === showPage) return;
+    setShowPage(page);
+  };
+  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 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 getData = async () => {
+    // '站点_新源县农村饮水安全工程服务站','villagePage'
+    // '站点_新源县源益水暖有限责任公司',  'cityPage'
+    // '站点_新源县中西部城乡供水工程','homePage'
+    let auth = [];
+    let page = 'homePage';
+    const roles = props.global.userInfo?.roles || [];
+    roles.forEach(r => {
+      switch (r.name) {
+        case '站点_新源县农村饮水安全工程服务站':
+          auth.push('villagePage');
+          break;
+        case '站点_新源县源益水暖有限责任公司':
+          auth.push('cityPage');
+          break;
+        case '站点_新源县中西部城乡供水工程':
+          auth.push('homePage');
+          break;
+        default:
+          break;
+      }
+    });
+    if (auth.includes('homePage') || (auth.includes('cityPage') && auth.includes('villagePage'))) {
+      auth = ['homePage', 'cityPage', 'villagePage'];
+      page = 'homePage';
+    } else if (auth.length === 1) {
+      if (auth.includes('cityPage')) {
+        page = 'cityPage';
+      } else {
+        page = 'villagePage';
+      }
+    }
+    setPageAuth(auth);
+    if (!auth.length) {
+      loginAction.getUserInfoAndConfig('', true);
+    } else {
+      setShowPage(page);
+    }
+    const token = props.global?.token || Cookies.get('token');
+    const client = integratedConfig?.client || sessionStorage.getItem('client') || props?.global?.client || '';
+    localStorage.setItem('integrationClient', client);
+    appService
+      .GetIntegrationConfig({
+        type: '集成登录',
+        userId: window.globalConfig.userInfo?.OID ?? null,
+        isEnable: true,
+        client,
+      })
+      .then(res1 => {
+        const list = res1.data || [];
+        list.length && localStorage.setItem('integrationData', JSON.stringify(list));
+        const obj = {};
+        list.forEach(i => {
+          obj[i.appKey] = i;
+        });
+        setIntegrationData(obj);
+      });
+  };
+  const toRevenue = async item => {
+    setJumpLoading(true);
+    jumpProgressStart();
+    startTiming(6);
+    try {
+      const res = await appService.getTicketByToken({ token: window.globalConfig?.token });
+      if (res.code === 0) {
+        // 营收是api-bcs，直饮水是api-ddw
+        // /api-ddw/sysUser/ssoGCK
+        const apiPath = `${item.url + (item.url.indexOf('?') > 0 ? '&' : '?') + item.paramValue}=${res.data}`;
+        if (item?.openOpt === '当前页打开') {
+          props.history.push('/thirdParty', { linkUrl: apiPath });
+        } else {
+          setJumpLoading(false);
+          jumpProgressEnd();
+          window.open(apiPath, '_blank');
+        }
+      } else {
+        res.msg && message.error(res.msg);
+        setJumpLoading(false);
+        jumpProgressEnd();
+      }
+    } catch (error) {
+      message.error('跳转错误，请联系管理员');
+      setJumpLoading(false);
+      jumpProgressEnd();
+    }
+  };
 
+  const toClient = async (item, loginA) => {
+    const token = props.global?.token || Cookies.get('token');
+    const cli = item.client;
+    const res = await getWebSiteConfig({
+      identity: token,
+      client: cli,
+    });
+    if (!res?.data?.[0]?.widgets?.length) {
+      message.error({
+        duration: 3,
+        content: '您没有该板块权限，请联系管理员',
+      });
+      return;
+    }
+    // 用全局存跳转信息，跳转过程页面会刷新
+    window.clientInfo = item;
+    if (window.qiankunIsCache) {
+      store.set('event:dropCache');
+    }
+
+    Cookies.set('client', cli, {
+      expires: 86400000 / (24 * 60 * 60 * 1000),
+      path: '/',
+    });
+    sessionStorage.setItem('client', cli);
+    const currentProduct = `__global__recent_productIndex__micro_${window.location.hostname}_${window.globalConfig
+      ?.client ?? 'city'}`;
+    sessionStorage.removeItem(currentProduct);
+    const currentProductNew = `__global__recent_productIndex__micro_${window.location.hostname}_${cli || 'city'}`;
+    sessionStorage.setItem(currentProductNew, 0);
+
+    clientRef.current = cli;
+    const config = props.global;
+    config.uiwidgets = [];
+    config.widgets = [];
+    config.allWidgets = [];
+    window.qiankunStarted = false;
+    if (cli) {
+      config.client = cli;
+    }
+    setJumpLoading(true);
+    jumpProgressStart();
+    startTiming(loadingTime);
+    window.jumpLoadingProgress = 99;
+    loginA && loginA.getUserInfoAndConfig('', true, item.type);
+  };
+  const onLink = (item, loginA) => {
+    const token = props.global?.token || Cookies.get('token');
+    if (!token) {
+      history.push(`/user/login?client=${integrationClient}`, { reload: true });
+      clear();
+      props.logout();
+      return;
+    }
+    const { url, client } = item;
+    if (window.clientInfo) {
+      window.clientInfo = null;
+    }
+    if (item.subType === '内链' && client) {
+      toClient(item, loginA);
+    } else {
+      if (!url) return;
+      if (url?.indexOf('{userId}') >= 0) {
+        item.url = url.replace('{userId}', window.globalConfig?.userInfo?.OID);
+      }
+      let link = item.url;
+      if (item.paramName) {
+        link = `${item.url + (item.url.indexOf('?') > 0 ? '&' : '?') + item.paramName}=${window.globalConfig?.token}`;
+      }
+      if (item.subType === '外链') {
+        if (item.paramValue === 'ticket') {
+          toRevenue(item); // 去营收
+          return;
+        }
+        if (item?.openOpt === '当前页打开') {
+          props.history.push('/thirdParty', { linkUrl: url });
+        } else {
+          window.open(url, '_blank');
+        }
+        return;
+      }
+      axios({
+        url: link,
+        method: 'get',
+        dataType: 'json',
+      }).then(res => {
+        if (res?.data?.code === 0) {
+          if (item?.openOpt === '当前页打开') {
+            props.history.push('/thirdParty', { linkUrl: res.data?.data });
+          } else {
+            window.open(res.data?.data, '_blank');
+          }
+        }
+      });
+    }
+  };
   useEffect(() => {
-    // const tk = Cookies.get('token') || props.global.token;
-    // const isLogin = tk !== null && tk !== 'undefined' && tk !== void 0;
-    // let client = sessionStorage.getItem('client') || props?.global?.client || null;
-    // client = client !== 'undefined' && !_.isNull(client) && !_.isUndefined(client) ? client : 'city';
-    // const generateType = props.global?.get?.('generateType') || null;
-    // if (!isLogin) {
-    //   history.push(`/user/login?client=${client}${generateType || ''}`, { reload: true });
-    //   clear();
-    //   props.logout();
-    // }
+    const tk = Cookies.get('token') || props.global.token;
+    const isLogin = tk !== null && tk !== 'undefined' && tk !== void 0;
+    let client = sessionStorage.getItem('client') || props?.global?.client || null;
+    client = client !== 'undefined' && !_.isNull(client) && !_.isUndefined(client) ? client : 'city';
+    const generateType = props.global?.get?.('generateType') || null;
+    if (!isLogin) {
+      history.push(`/user/login?client=${client}${generateType || ''}`, { reload: true });
+      clear();
+      props.logout();
+    }
   }, [props]);
+
   useEffect(() => {
-    // appService
-    //   .GetIntegratedloginSetting({
-    //     ignoreSite: true,
-    //   })
-    //   .then(res => {
-    //     const { code, data } = res;
-    //     if (code !== SERVICE_INTERFACE_SUCCESS_CODE) {
-    //       notification.error({ message: '提示', duration: 3, description: '系统引导页配置错误' });
-    //       setInfo({ first: false, loading: false, error: true });
-    //       return;
-    //     }
-    //     let displayMode = data?.displayMode || 'default';
-    //     if (displayMode === '卡片' || displayMode === '地图') {
-    //       displayMode = 'default';
-    //     }
-    //     props.updateIntegratedConfig(data || '');
-    //     setTemplate(displayMode);
-    //     setInfo({ first: false, loading: false, error: false });
-    //   })
-    //   .catch(err => {
-    //     setInfo({ first: false, loading: false, error: true });
-    //     props.updateIntegratedConfig('');
-    //   });
+    getData();
   }, []);
+  useEffect(() => {
+    const handleToggleIndustry = event => {
+      setJumpLoading(false);
+      jumpProgressEnd();
+      window.jumpLoadingProgress = 0;
+      let url = '';
+      if (window.clientInfo?.url && window.clientInfo.subType === '内链') {
+        url = searchUrl(window.clientInfo.url);
+        window.clientInfo = null;
+      }
+      props.history.push(`/?client=${clientRef.current || props.global.client}`);
+      props.updateCurrentIndex && props.updateCurrentIndex(0);
+      defaultApp(url);
+    };
+    const handleError = () => {
+      setJumpLoading(false);
+      jumpProgressEnd();
+    };
+
+    loginAction.events.on('toggleIndustry', handleToggleIndustry);
+    loginAction.events.on('loginError', handleError);
 
+    return () => {
+      loginAction && loginAction.events && loginAction.events.removeListener('toggleIndustry', handleToggleIndustry);
+      loginAction && loginAction.events && loginAction.events.removeListener('loginError', handleError);
+    };
+  }, [loginAction.events, props]);
   return (
     <div className={styles.integrationXinyuan}>
-      <div className={styles.home_page}>
-        <div className={classNames(styles.tip1, styles.xinyuan_btn)}>
-          <img src={imgMap['中西部乡镇供水工程']} alt="" />
-        </div>
-        <div className={classNames(styles.tip2, styles.xinyuan_btn)}>
-          <img src={imgMap['城区供水工程']} alt="" />
+      {jumpLoading ? (
+        <div className={styles.integrationJumpLoad} key="jumpLoading">
+          <div style={{ width: '285px' }}>
+            <LoadPage percent={progressValue2 / 100} text="页面加载中~" />
+          </div>
         </div>
-        <div className={classNames(styles.tip3)}>
-          <img src={imgMap['东部乡镇供水工程']} alt="" />
+      ) : null}
+
+      {showPage !== 'homePage' && pageAuth.includes('homePage') ? (
+        <div onClick={() => changePage('homePage')} className={classNames(styles.backBtn, styles.xinyuan_btn)}>
+          返回
         </div>
-        <div className={classNames(styles.tip4)}>
-          <div className={classNames(styles.tip_title)}>水利局-乡镇供水</div>
-          <img src={imgMap['乡镇供水']} alt="" />
-          <div className={classNames(styles.tip_content)}>
-            新源县水利局成立于1964年，至今已有58年历史。合同内增加两座水厂，一座日供水3.5万立方米(第十标段建设)，一座日供水5万立方米(援疆项目资金两座新水厂建设位置紧挨现有新源县老水厂，调度大楼在3.5w立方米水厂。
+      ) : null}
+
+      {showPage === 'homePage' ? (
+        <div className={classNames(styles.home_page, styles.scaleInCenter, 'animate__animated', 'duration-500ms')}>
+          <div
+            className={classNames(styles.tip1, pageAuth.includes('villagePage') ? styles.xinyuan_btn1 : null)}
+            onClick={() => changePage('villagePage')}
+          >
+            <img src={imgMap['中西部乡镇供水工程']} alt="" />
           </div>
-        </div>
-        <div className={classNames(styles.tip5)}>
-          <div className={classNames(styles.tip_title)}>源益水暖-城区供水</div>
-          <img src={imgMap['城区供水']} alt="" />
-          <div className={classNames(styles.tip_content)}>
-            新源县水利局成立于1964年，至今已有58年历史。合同内增加两座水厂，一座日供水3.5万立方米(第十标段建设)，一座日供水5万立方米(援疆项目资金两座新水厂建设位置紧挨现有新源县老水厂，调度大楼在3.5w立方米水厂。{' '}
+          <div
+            className={classNames(styles.tip2, pageAuth.includes('cityPage') ? styles.xinyuan_btn1 : null)}
+            onClick={() => changePage('cityPage')}
+          >
+            <img src={imgMap['城区供水工程']} alt="" />
+          </div>
+          <div className={classNames(styles.tip3)}>
+            <img src={imgMap['东部乡镇供水工程']} alt="" />
+          </div>
+          <div className={classNames(styles.tip4)}>
+            <div className={classNames(styles.tip_title)}>水利局-乡镇供水</div>
+            <img src={imgMap['乡镇供水']} alt="" />
+            <div className={classNames(styles.tip_content)}>
+              新源县水利局成立于1964年，至今已有58年历史。合同内增加两座水厂，一座日供水3.5万立方米(第十标段建设)，一座日供水5万立方米(援疆项目资金两座新水厂建设位置紧挨现有新源县老水厂，调度大楼在3.5w立方米水厂。
+            </div>
+          </div>
+          <div className={classNames(styles.tip5)}>
+            <div className={classNames(styles.tip_title)}>源益水暖-城区供水</div>
+            <img src={imgMap['城区供水']} alt="" />
+            <div className={classNames(styles.tip_content)}>
+              新源县水利局成立于1964年，至今已有58年历史。合同内增加两座水厂，一座日供水3.5万立方米(第十标段建设)，一座日供水5万立方米(援疆项目资金两座新水厂建设位置紧挨现有新源县老水厂，调度大楼在3.5w立方米水厂。{' '}
+            </div>
           </div>
         </div>
+      ) : null}
+      {showPage === 'villagePage' ? (
+        <div className={classNames(styles.page1, 'animate__fadeInLeft', 'animate__animated', 'duration-500ms')}>
+          <VillagePage {...props} integrationData={integrationData} onLink={onLink} loginAction={loginAction} />
+        </div>
+      ) : null}
+      {showPage === 'cityPage' ? (
+        <div className={classNames(styles.page1, 'animate__fadeInDown', 'animate__animated', 'duration-500ms')}>
+          <CityPage {...props} integrationData={integrationData} onLink={onLink} loginAction={loginAction} />
+        </div>
+      ) : null}
+      <div
+        className={classNames(styles.iframeBack, 'animate__animated', 'animate__fadeIn')}
+        onClick={() => props.logout()}
+      >
+        <div className={styles.iframeBackLeft}>
+          <img src={arrowLeftImg} alt="退出" />
+        </div>
+        <div className={styles.iframeBackIcon}>
+          <img src={backImg} alt="退出" />
+          退出
+        </div>
       </div>
     </div>
   );
@@ -97,11 +389,15 @@ const IntegrationXinyuan = props => {
 const mapStateToProps = state => ({
   global: state.getIn(['global', 'globalConfig']),
   instance: state.getIn(['global', 'instance']),
+  integratedConfig: state.getIn(['global', 'integratedConfig']),
 });
 const mapDispatchToProps = dispatch => ({
   logout() {
     dispatch(actionCreators.logout());
   },
+  updateConfig(config) {
+    dispatch(actionCreators.getConfig(config));
+  },
   updateIntegratedConfig(data) {
     dispatch(actionCreators.updateIntegratedConfig(data));
   },

src/pages/bootpage/template/project/xinyuan/index.less

@@ -5,7 +5,88 @@
     height: 100%;
     position: relative;
     overflow: hidden;
-    background: rgb(15, 61, 48);
+    background: rgb(15, 51, 93);
+
+    .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);
+    }
+
+    .iframeBackIcon {
+        position: absolute;
+        top: 0;
+        right: -45px;
+        display: flex;
+        height: 44px;
+        width: 44px;
+        background: rgba(28, 94, 180, 0.95);
+        border-radius: 7px 0px 0px 7px;
+        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;
+        }
+    }
+
+
+    .iframeBack:hover {
+        .iframeBackIcon {
+            right: 0;
+        }
+
+        .iframeBackLeft {
+            right: -15px;
+        }
+    }
+
+    .iframeBackLeft {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 14px;
+        height: 44px;
+        background: rgba(28, 94, 180, 0.95);
+        border-radius: 7px 0 0 7px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s;
+
+        img {
+            width: 6px;
+            height: 11px;
+        }
+    }
+
+    .iframeBack {
+        width: 44px;
+        height: 44px;
+        position: absolute;
+        top: 20px;
+        right: 0;
+        color: #FFF;
+        cursor: pointer;
+        user-select: none;
+        position: absolute;
+        z-index: 110;
+
+
+    }
 
     .home_page {
         position: absolute;
@@ -27,18 +108,24 @@
         opacity: 0.8;
     }
 
+    .xinyuan_btn1 {
+        cursor: pointer;
+        transition: all 0.3s ease-in-out;
+    }
+
+    .xinyuan_btn1:active {
+        opacity: 0.8;
+    }
+
+    .xinyuan_btn1:hover {
+        transform: translateY(-10px);
+    }
+
     .home_page {
         .tip1 {
             position: absolute;
             left: calc(50% - 724px);
             top: 63px;
-            transition: all 0.3s ease-in-out;
-
-
-        }
-
-        .tip1:hover {
-            transform: translateY(-10px);
         }
 
         .tip2 {
@@ -46,12 +133,6 @@
             left: calc(50% - 247px);
             top: 110px;
             transition: all 0.3s ease-in-out;
-
-
-        }
-
-        .tip2:hover {
-            transform: translateY(-10px);
         }
 
         .tip3 {
@@ -137,4 +218,60 @@
         }
     }
 
+    .page1 {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+    }
+
+    .backBtn {
+        z-index: 10;
+        position: absolute;
+        left: 25px;
+        top: 15px;
+        padding-left: 36px;
+        height: 28px;
+        background: url('@{imgSrc}/返回.png') left center no-repeat;
+        background-size: 28px 28px;
+        font-weight: bold;
+        font-size: 14px;
+        line-height: 28px;
+        color: #FFFFFF;
+    }
+}
+
+@-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;
 }
\ No newline at end of file