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.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,31 +108,31 @@
         opacity: 0.8;
     }
 
-    .home_page {
-        .tip1 {
-            position: absolute;
-            left: calc(50% - 724px);
-            top: 63px;
+    .xinyuan_btn1 {
+        cursor: pointer;
         transition: all 0.3s ease-in-out;
+    }
 
-
+    .xinyuan_btn1:active {
+        opacity: 0.8;
     }
 
-        .tip1:hover {
+    .xinyuan_btn1:hover {
         transform: translateY(-10px);
     }
 
+    .home_page {
+        .tip1 {
+            position: absolute;
+            left: calc(50% - 724px);
+            top: 63px;
+        }
+
         .tip2 {
             position: absolute;
             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