pref: 钦州集成登录取配置

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

 {
     "业务应用": [
         {
-            "name": "综合业务大屏",
-            "label": "",
-            "url": "",
-            "client": ""
+            "name": "综合业务大屏"
         },
         {
-            "name": "OA办公系统",
-            "label": "",
-            "url": "",
-            "client": ""
+            "name": "OA办公系统"
         },
         {
-            "name": "营业收费系统",
-            "label": "",
-            "url": "http://221.7.220.45:7700/jpcd-bcs-server/sysUser/ssoGCK",
-            "paramName": "ticket",
-            "client": ""
+            "name": "营业收费系统"
         }
     ],
     "综合监控管理平台": {
-        "name": "综合监控管理平台",
-        "label": "",
-        "url": "",
-        "client": ""
+        "name": "综合监控管理平台"
     },
     "应用系统": [
         {
-            "name": "管网GIS系统",
-            "label": "",
-            "url": "",
-            "client": ""
+            "name": "管网GIS系统"
         },
         {
-            "name": "水厂监控系统",
-            "label": "",
-            "url": "",
-            "client": ""
+            "name": "水厂监控系统"
         },
         {
-            "name": "污水厂监控系统",
-            "label": "",
-            "url": "",
-            "client": ""
+            "name": "污水厂监控系统"
         },
         {
-            "name": "管网采集系统",
-            "label": "",
-            "url": "",
-            "client": ""
+            "name": "管网采集系统"
         },
         {
-            "name": "二供监控系统",
-            "label": "",
-            "url": "",
-            "client": ""
+            "name": "二供监控系统"
         },
         {
-            "name": "污水站监控系统",
-            "label": "",
-            "url": "",
-            "client": ""
+            "name": "污水站监控系统"
         }
     ],
     "基础平台": [
         {
-            "name": "物联接入平台",
-            "label": "",
-            "url": "",
-            "client": ""
+            "name": "物联接入平台"
         },
         {
-            "name": "视频接入平台",
-            "label": "",
-            "url": "",
-            "client": ""
+            "name": "视频接入平台"
         },
         {
-            "name": "报警管理平台",
-            "label": "",
-            "url": "",
-            "client": ""
+            "name": "报警管理平台"
         },
         {
-            "name": "运维管理平台",
-            "label": "",
-            "url": "http://111.59.43.216:8100/civmanage/",
-            "client": ""
+            "name": "运维管理平台"
         }
-    ],
-    "标题": "钦州开投水务综合管理平台"
+    ]
 }
\ No newline at end of file

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

@@ -3,6 +3,8 @@ import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
 import { message, Button } from 'antd';
 import classNames from 'classnames';
 import { debounce } from 'lodash';
+import { getImageUrl } from '@/utils/utils';
+
 import React, { useRef, useEffect, useState, useMemo } from 'react';
 import backImg from '@/assets/images/demonstration/返回.png';
 import arrowLeftImg from '@/assets/images/demonstration/左箭头.png';
@@ -15,7 +17,7 @@ import axios from 'axios';
 import { useHistory, useAliveController } from '@wisdom-utils/runtime';
 import Cookies from 'js-cookie';
 import { store } from '@wisdom-utils/utils';
-import LoginAction from '@/pages/bootpage/demonstration/components/login';
+import LoginAction from '@/pages/user/login/login';
 import { defaultApp } from '@/micro';
 
 import useFullScreen from '../../demonstration/components/useFullScreen';
@@ -25,9 +27,16 @@ import Iframe from '../../demonstration/components/Iframe';
 const boxWidth = 1920;
 const boxHeight = 930;
 const IntegrationQinzhou = props => {
+  const { integratedConfig } = props;
+
   const [ref, isFullscreen, handleFullScreen, handleExitFullScreen] = useFullScreen(false);
+  const clientRef = useRef(props.global.client);
+  const integrationClient = integratedConfig?.client || window?.globalConfig?.client || 'city'; // 集成登录client
+  const [integrationData, setIntegrationData] = useState({}); // 所有子站
+
+  const loadingTime = integratedConfig?.loadingTime || 5;
+
   const history = useHistory();
-  let integrationClient = window?.globalConfig?.client || 'city'; // 集成登录client
   const { clear } = useAliveController();
 
   const timer2 = useRef(null);
@@ -50,7 +59,6 @@ const IntegrationQinzhou = props => {
   const [jumpLoading, setJumpLoading] = useState(false);
   const [progressValue2, setProgressValue2] = useState(0);
   const [showBackBtn, setShowBackBtn] = useState(true); // 是否显示iframe 返回按钮，三维平台用
-  const [mClient, setMClient] = useState('');
   const [loginAction, setAction] = useState(() => new LoginAction(props));
 
   const configName = '集成配置文件';
@@ -81,26 +89,34 @@ const IntegrationQinzhou = props => {
     timer2.current = null;
   };
   const getData = async () => {
+    const token = props.global?.token || Cookies.get('token');
+    const client = integratedConfig?.client || sessionStorage.getItem('client') || props?.global?.client || '';
+    localStorage.setItem('integrationClient', client);
+    // appService
+    //   .GetConfigJson({
+    //     config: configName,
+    //   })
+    //   .then(res => {
+    //     if (res.code === 0 && res.data) {
+    //       const data = JSON.parse(res.data) || defaultConfig;
+    //       setConfigData(data);
+    //     }
+    //   });
     appService
-      .GetConfigJson({
-        config: configName,
-      })
-      .then(res => {
-        if (res.code === 0 && res.data) {
-          const data = JSON.parse(res.data) || defaultConfig;
-          setConfigData(data);
-        }
-      });
-    appService
-      .GetIntegratedloginSetting({
-        ignoreSite: true,
+      .GetIntegrationConfig({
+        type: '集成登录',
+        userId: window.globalConfig.userInfo?.OID ?? null,
+        isEnable: true,
+        client,
       })
-      .then(res => {
-        const { code, data } = res;
-        if (data.client) {
-          integrationClient = data.client;
-          localStorage.setItem('integrationClient', data.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 onResize = () => {
@@ -127,57 +143,7 @@ const IntegrationQinzhou = props => {
       });
     }
   };
-  const handError = err => {
-    if (err) {
-      message.error(err);
-    }
-    setLinkUrl('');
-    setJumpLoading(false);
-    jumpProgressEnd();
-  };
-  const onMessageBack = data => {
-    if (!data?.type) return;
-    console.log('onMessageBack ~ data:', data);
-    switch (data?.type) {
-      // 页面加载完成
-      // 登录成功
-      case 'runAfterFirstMounted':
-      case 'loginSuccess':
-        jumpProgressEnd();
-        setTimeout(() => {
-          setJumpLoading(false);
-        }, 100);
-        break;
-      case 'loginError':
-        message.warning('登录失败，请联系管理人员');
-        handError();
-        break;
-      case '无法连接':
-        message.warning('该站点无法连接，请联系管理人员');
-        setTimeout(() => {
-          handError();
-        }, 100);
-        break;
-      case 'showBack':
-        setShowBackBtn(true);
-        break;
-      case 'hideBack':
-        setShowBackBtn(false);
-        break;
-      default:
-        break;
-    }
-  };
-  const iframeItem = useMemo(() => {
-    if (!linkUrl) return null;
-    return (
-      <>
-        <div className={classNames(!jumpLoading ? styles.scaleInCenter : styles.hide, 'animate__animated')}>
-          <Iframe linkUrl={linkUrl} onMessageBack={onMessageBack} />
-        </div>
-      </>
-    );
-  }, [linkUrl, jumpLoading]);
+
   const startTiming = (time = 2) => {
     if (timer3.current) {
       clearInterval(timer3.current);
@@ -197,18 +163,15 @@ const IntegrationQinzhou = props => {
       const res = await appService.getTicketByToken({ token: window.globalConfig?.token });
       if (res.code === 0) {
         // 营收是api-bcs，直饮水是api-ddw
-        const apiPath = `${item.url}?sysFlag=0&${item.paramName}=${res.data}`;
-        setLinkUrl(apiPath);
-        const res2 = await axios({
-          url: apiPath,
-          method: 'get',
-          dataType: 'json',
-        });
-        if (res2?.data?.resultcode !== 'no') {
-          setLinkUrl('');
+        // /api-ddw/sysUser/ssoGCK
+        // res.data = 'e44a2883a2ac4c4b8c8f1186cf27ca1dcc406c1dda1247cabe04bff3c06d28e7'; // 测试token
+        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();
-          message.warning('没权限，请联系管理员');
+          window.open(apiPath, '_blank');
         }
       } else {
         res.msg && message.error(res.msg);
@@ -220,97 +183,80 @@ const IntegrationQinzhou = props => {
       jumpProgressEnd();
     }
   };
-  const onLink = (item, loginA) => {
-    const { url, client } = item;
-    if (!url && !client) return message.warning('未配置功能路径');
-    if (url) {
-      if (item.paramName) {
-        toRevenue(item);
-        return;
-      }
-      setJumpLoading(true);
-      jumpProgressStart();
-      setLinkUrl(url);
-      let time = 15;
-      if (!url.includes('user/noscret')) {
-        time = 4;
-      }
-      startTiming(time);
-    }
-    if (client) {
-      if (window.qiankunIsCache) {
-        store.set('event:dropCache');
-      }
-      Cookies.set('client', client, {
-        expires: 86400000 / (24 * 60 * 60 * 1000),
-        path: '/',
+  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: '您没有该板块权限，请联系管理员',
       });
-      sessionStorage.setItem('client', client);
-      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}_${client || 'city'}`;
-      sessionStorage.setItem(currentProductNew, 0);
-      setMClient(client);
-      const config = props.global;
-      window.qiankunStarted = false;
-      if (client) {
-        config.client = client;
-      }
+      return;
+    }
+    if (window.qiankunIsCache) {
+      store.set('event:dropCache');
+    }
 
-      const token = props.global?.token || Cookies.get('token');
+    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);
 
-      if (!token) {
-        history.push(`/user/login?client=${integrationClient}`, { reload: true });
-        clear();
-        props.logout();
-      } else {
-        setJumpLoading(true);
-        jumpProgressStart();
-        startTiming(15);
-        window.jumpLoadingProgress = 99;
-        getWebSiteConfig({
-          identity: token,
-          client,
-        })
-          .then(res => {
-            const data = res.data?.[0] || {};
-            config.uiwidgets = data.uiwidgets || [];
-            config.widgets = data.widgets || [];
-            config.allWidgets = data.widgets || [];
-            const homeType = config.productType || 'civweb4';
-            let homepage = params.getParams('homepage') ? params.getParams('homepage') : '';
+    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);
+  };
+  const onLink = (item, loginA) => {
+    if (!item) return;
+    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 (!homepage) {
-              homepage =
-                homeType && data.homepage ? `${homeType}/${params.getParams('homepage') || data.homepage}` : '';
-            }
-            config.homepage = homepage;
-            config.hideFeedback =
-              data.afterSales && typeof data.afterSales === 'string'
-                ? data.afterSales.split(',').includes(`${props.global?.userInfo?.OID}`)
-                : false;
-            config.IsOpenTransitionPage = data.IsOpenTransitionPage || false;
-            config.openAnnouncement = data.openAnnouncement;
-            config.announcementContent = data.announcementContent;
-            if (!config.widgets.length) {
-              message.error({
-                duration: 3,
-                content: '您没有该板块权限',
-              });
-              setJumpLoading(false);
-              jumpProgressEnd();
-              window.jumpLoadingProgress = 0;
-              return;
-            }
-            loginAction.updateConfig && loginAction.updateConfig(config);
-            loginAction && loginAction.getIndustry(true, token);
-          })
-          .catch(err => {
-            setJumpLoading(false);
-            jumpProgressEnd();
-            window.jumpLoadingProgress = 0;
-          });
+    if (item.subType === '内链' && client) {
+      toClient(item, loginA);
+    } else {
+      if (!url) return;
+      if (item.subType === '外链') {
+        if (item.paramValue === 'ticket') {
+          toRevenue(item); // 去营收
+          return;
+        }
+      }
+      const link = `${item.url + (item.url.indexOf('?') > 0 ? '&' : '?') + item.paramName}=${
+        window.globalConfig?.token
+      }`;
+      if (item?.openOpt === '当前页打开') {
+        props.history.push('/thirdParty', { linkUrl: link });
+      } else {
+        setJumpLoading(false);
+        jumpProgressEnd();
+        window.open(link, '_blank');
       }
     }
   };
@@ -334,8 +280,7 @@ const IntegrationQinzhou = props => {
       jumpProgressEnd();
       window.jumpLoadingProgress = 0;
       props.updateCurrentIndex && props.updateCurrentIndex(0);
-
-      props.history.push(`/?client=${mClient || props.global.client}`);
+      props.history.push(`/?client=${clientRef.current || props.global.client}`);
 
       defaultApp();
     };
@@ -351,7 +296,7 @@ const IntegrationQinzhou = props => {
       loginAction && loginAction.events && loginAction.events.removeListener('loginSuccess', handleToggleIndustry);
       loginAction && loginAction.events && loginAction.events.removeListener('loginError', handleError);
     };
-  }, [loginAction.events, props, mClient]);
+  }, [loginAction.events, props]);
   return (
     <div className={classNames(styles.integrationQinzhou, 'integrationQinzhou')} ref={ref}>
       {jumpLoading ? (
@@ -380,7 +325,7 @@ const IntegrationQinzhou = props => {
         <div className={styles.integrationQinzhou_title}>
           <div className={styles.integrationQinzhou_title_left} />
           <div className={styles.integrationQinzhou_title_text}>
-            <span>{configData?.['标题'] || '智慧水务综合监控平台'}</span>
+            <span>{integratedConfig?.title || props.global.title || '智慧水务综合监控平台'}</span>
           </div>
           <div className={styles.integrationQinzhou_title_right} />
         </div>
@@ -397,16 +342,24 @@ const IntegrationQinzhou = props => {
                     key={item.name}
                     className={classNames(
                       styles.integration_row_col,
-                      item.url || item.client ? styles.integration_row_col_link : styles.integration_row_col_no,
+                      integrationData[item.name] ? styles.integration_row_col_link : styles.integration_row_col_no,
                     )}
                     type="业务应用"
-                    onClick={() => onLink(item)}
+                    onClick={() => onLink(integrationData[item.name], loginAction)}
                   >
                     <div className={styles.integration_row_col_content} name={item.name}>
+                      <div
+                        className={styles.integration_row_col_img}
+                        style={{
+                          background: integrationData[item.name]?.icon
+                            ? `url(${getImageUrl(integrationData[item.name].icon)}) center/100% 100% no-repeat`
+                            : '',
+                        }}
+                      />
                       <div className={styles.integration_row_col_text} type="业务应用">
-                        {item.label || item.name}
+                        {integrationData[item.name]?.name || item.name}
                       </div>
-                      <div className={styles.integration_row_col_sub}>{item.english || ''}</div>
+                      <div className={styles.integration_row_col_sub}>{integrationData[item.name]?.subTitle || ''}</div>
                     </div>
                   </div>
                 ))}
@@ -422,16 +375,22 @@ const IntegrationQinzhou = props => {
               <div
                 className={classNames(
                   styles.integration_row_col,
-                  configData['综合监控管理平台'].url || configData['综合监控管理平台'].client
-                    ? styles.integration_row_col_link
-                    : styles.integration_row_col_no,
+                  integrationData['综合监控管理平台'] ? styles.integration_row_col_link : styles.integration_row_col_no,
                 )}
                 type="综合监控管理平台"
-                onClick={() => onLink(configData['综合监控管理平台'])}
+                onClick={() => onLink(integrationData['综合监控管理平台'], loginAction)}
               >
                 <div className={styles.integration_row_col_content} name="综合监控管理平台">
+                  <div
+                    className={styles.integration_row_col_img}
+                    style={{
+                      background: integrationData['综合监控管理平台']?.icon
+                        ? `url(${getImageUrl(integrationData['综合监控管理平台'].icon)}) center/100% 100% no-repeat`
+                        : '',
+                    }}
+                  />
                   <div className={styles.integration_row_col_text} type="业务应用">
-                    {configData['综合监控管理平台'].label || configData['综合监控管理平台'].name}
+                    {integrationData['综合监控管理平台']?.name || configData['综合监控管理平台'].name}
                   </div>
                 </div>
               </div>
@@ -444,10 +403,10 @@ const IntegrationQinzhou = props => {
                     key={item.name}
                     className={classNames(
                       styles.integration_row_col,
-                      item.url || item.client ? styles.integration_row_col_link : styles.integration_row_col_no,
+                      integrationData[item.name] ? styles.integration_row_col_link : styles.integration_row_col_no,
                     )}
                     type="应用系统"
-                    onClick={() => onLink(item)}
+                    onClick={() => onLink(integrationData[item.name], loginAction)}
                   >
                     <div
                       className={classNames(
@@ -456,7 +415,17 @@ const IntegrationQinzhou = props => {
                       )}
                     />
                     <div className={styles.integration_row_col_content} name={item.name}>
-                      <div className={styles.integration_row_col_text}>{item.label || item.name}</div>
+                      <div
+                        className={styles.integration_row_col_img}
+                        style={{
+                          background: integrationData[item.name]?.icon
+                            ? `url(${getImageUrl(integrationData[item.name].icon)}) center/100% 100% no-repeat`
+                            : '',
+                        }}
+                      />
+                      <div className={styles.integration_row_col_text}>
+                        {integrationData[item.name]?.name || item.name}
+                      </div>
                     </div>
                   </div>
                 ))}
@@ -475,10 +444,10 @@ const IntegrationQinzhou = props => {
                     key={item.name}
                     className={classNames(
                       styles.integration_row_col,
-                      item.url || item.client ? styles.integration_row_col_link : styles.integration_row_col_no,
+                      integrationData[item.name] ? styles.integration_row_col_link : styles.integration_row_col_no,
                     )}
                     type={item.name}
-                    onClick={() => onLink(item)}
+                    onClick={() => onLink(integrationData[item.name], loginAction)}
                   >
                     <div
                       className={classNames(
@@ -487,8 +456,22 @@ const IntegrationQinzhou = props => {
                       )}
                     />
                     <div className={styles.integration_row_col_content} name={item.name}>
-                      <div className={styles.integration_row_col_text}>{item.label || item.name}</div>
-                      <div className={styles.integration_row_col_sub}>{item.english || ''}</div>
+                      <div
+                        className={styles.integration_row_col_img}
+                        style={{
+                          background: integrationData[item.name]?.icon
+                            ? `url(${getImageUrl(integrationData[item.name].icon)}) center/100% 100% no-repeat`
+                            : '',
+                        }}
+                      />
+                      <div>
+                        <div className={styles.integration_row_col_text}>
+                          {integrationData[item.name]?.name || item.name}
+                        </div>
+                        <div className={styles.integration_row_col_sub}>
+                          {integrationData[item.name]?.subTitle || ''}
+                        </div>
+                      </div>
                     </div>
                   </div>
                 ))}
@@ -510,7 +493,6 @@ const IntegrationQinzhou = props => {
           </div>
         </div>
       ) : null}
-      {iframeItem}
     </div>
   );
 };

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

@@ -142,7 +142,7 @@
   }
 
   .integration_row_col_no {
-    filter: grayscale(80%) brightness(105%);
+    filter: grayscale(100%) brightness(90%);
     cursor: not-allowed;
   }
 
@@ -234,31 +234,52 @@
       width: 100%;
       height: 100%;
       display: flex;
-      flex-direction: column;
-      justify-content: center;
-      padding-left: 181px;
+      // justify-content: center;
+      align-items: center;
+      padding-left: 62px;
       line-height: 1;
 
     }
 
     .integration_row_col_content[name='综合业务大屏'] {
-      background: url('@{imgSrc}/综合业务大屏.png') 59px 33px no-repeat,
-      url('@{imgSrc}/业务应用bg.png') center center no-repeat;
-      background-size: 48px 48px, 100% 100%;
+      background: url('@{imgSrc}/业务应用bg.png') center center no-repeat;
+      background-size: 100% 100%;
+
+      .integration_row_col_img {
+        width: 48px;
+        height: 48px;
+        background: url('@{imgSrc}/综合业务大屏.png') center center no-repeat;
+        background-size: 100% 100%;
+        margin-right: 65px;
+      }
 
     }
 
     .integration_row_col_content[name='OA办公系统'] {
-      background: url('@{imgSrc}/OA办公系统.png') 62px 31px no-repeat,
-      url('@{imgSrc}/业务应用bg.png') center center no-repeat;
-      background-size: 48px 48px, 100% 100%;
+      background: url('@{imgSrc}/业务应用bg.png') center center no-repeat;
+      background-size: 100% 100%;
+
+      .integration_row_col_img {
+        width: 48px;
+        height: 48px;
+        background: url('@{imgSrc}/OA办公系统.png') center center no-repeat;
+        background-size: 100% 100%;
+        margin-right: 65px;
+      }
 
     }
 
     .integration_row_col_content[name='营业收费系统'] {
-      background: url('@{imgSrc}/营业收费系统.png') 64px 30px no-repeat,
-      url('@{imgSrc}/业务应用bg.png') center center no-repeat;
-      background-size: 48px 48px, 100% 100%;
+      background: url('@{imgSrc}/业务应用bg.png') center center no-repeat;
+      background-size: 100% 100%;
+
+      .integration_row_col_img {
+        width: 48px;
+        height: 48px;
+        background: url('@{imgSrc}/营业收费系统.png') center center no-repeat;
+        background-size: 100% 100%;
+        margin-right: 65px;
+      }
 
     }
 
@@ -309,7 +330,9 @@
     margin-bottom: 12px;
 
     .integration_row_col_content {
-      line-height: 93px;
+      display: flex;
+      align-items: center;
+      padding-left: 63px;
     }
 
   }
@@ -320,50 +343,102 @@
     margin-bottom: 12px;
 
     .integration_row_col_content[name='综合监控管理平台'] {
-      background: url('@{imgSrc}/综合监控管理平台.png') 488px 24px no-repeat,
-      url('@{imgSrc}/综合监控管理平台bg.png') center center no-repeat;
-      background-size: 48px 48px, 100% 100%;
-      padding-left: 590px;
+      background: url('@{imgSrc}/综合监控管理平台bg.png') center center no-repeat;
+      background-size: 100% 100%;
+      padding-left: 488px;
       line-height: 93px;
+      display: flex;
+      align-items: center;
+      padding-bottom: 5px;
+
+      .integration_row_col_img {
+        width: 48px;
+        height: 48px;
+        background: url('@{imgSrc}/综合监控管理平台.png') center center no-repeat;
+        background-size: 100% 100%;
+        margin-right: 65px;
+      }
     }
 
   }
 
   .integration_row_list[type='应用系统'] {
     .integration_row_col_content[name='管网GIS系统'] {
-      background: url('@{imgSrc}/管网GIS系统.png') 62px 22px no-repeat,
-      url('@{imgSrc}/管网GIS系统bg.png') center center no-repeat;
-      background-size: 48px 48px, 100% 100%;
+      background: url('@{imgSrc}/管网GIS系统bg.png') center center no-repeat;
+      background-size: 100% 100%;
+
+      .integration_row_col_img {
+        width: 48px;
+        height: 48px;
+        background: url('@{imgSrc}/管网GIS系统.png') center center no-repeat;
+        background-size: 100% 100%;
+        margin-right: 65px;
+      }
     }
 
     .integration_row_col_content[name='水厂监控系统'] {
-      background: url('@{imgSrc}/水厂监控系统.png') 62px 22px no-repeat,
-      url('@{imgSrc}/管网GIS系统bg.png') center center no-repeat;
-      background-size: 48px 48px, 100% 100%;
+      background: url('@{imgSrc}/管网GIS系统bg.png') center center no-repeat;
+      background-size: 100% 100%;
+
+      .integration_row_col_img {
+        width: 48px;
+        height: 48px;
+        background: url('@{imgSrc}/水厂监控系统.png') center center no-repeat;
+        background-size: 100% 100%;
+        margin-right: 65px;
+      }
     }
 
     .integration_row_col_content[name='污水厂监控系统'] {
-      background: url('@{imgSrc}/污水厂监控系统.png') 63px 22px no-repeat,
-      url('@{imgSrc}/管网GIS系统bg.png') center center no-repeat;
-      background-size: 48px 48px, 100% 100%;
+      background: url('@{imgSrc}/管网GIS系统bg.png') center center no-repeat;
+      background-size: 100% 100%;
+
+      .integration_row_col_img {
+        width: 48px;
+        height: 48px;
+        background: url('@{imgSrc}/污水厂监控系统.png') center center no-repeat;
+        background-size: 100% 100%;
+        margin-right: 65px;
+      }
     }
 
     .integration_row_col_content[name='管网采集系统'] {
-      background: url('@{imgSrc}/管网采集系统.png') 63px 22px no-repeat,
-      url('@{imgSrc}/管网GIS系统bg.png') center center no-repeat;
-      background-size: 48px 48px, 100% 100%;
+      background: url('@{imgSrc}/管网GIS系统bg.png') center center no-repeat;
+      background-size: 100% 100%;
+
+      .integration_row_col_img {
+        width: 48px;
+        height: 48px;
+        background: url('@{imgSrc}/管网采集系统.png') center center no-repeat;
+        background-size: 100% 100%;
+        margin-right: 65px;
+      }
     }
 
     .integration_row_col_content[name='二供监控系统'] {
-      background: url('@{imgSrc}/二供监控系统.png') 63px 22px no-repeat,
-      url('@{imgSrc}/管网GIS系统bg.png') center center no-repeat;
-      background-size: 48px 48px, 100% 100%;
+      background: url('@{imgSrc}/管网GIS系统bg.png') center center no-repeat;
+      background-size: 100% 100%;
+
+      .integration_row_col_img {
+        width: 48px;
+        height: 48px;
+        background: url('@{imgSrc}/二供监控系统.png') center center no-repeat;
+        background-size: 100% 100%;
+        margin-right: 65px;
+      }
     }
 
     .integration_row_col_content[name='污水站监控系统'] {
-      background: url('@{imgSrc}/污水站监控系统.png') 63px 22px no-repeat,
-      url('@{imgSrc}/管网GIS系统bg.png') center center no-repeat;
-      background-size: 48px 48px, 100% 100%;
+      background: url('@{imgSrc}/管网GIS系统bg.png') center center no-repeat;
+      background-size: 100% 100%;
+
+      .integration_row_col_img {
+        width: 48px;
+        height: 48px;
+        background: url('@{imgSrc}/污水站监控系统.png') center center no-repeat;
+        background-size: 100% 100%;
+        margin-right: 65px;
+      }
     }
 
   }
@@ -406,9 +481,8 @@
       width: 100%;
       height: 100%;
       display: flex;
-      flex-direction: column;
-      justify-content: center;
-      padding-left: 136px;
+      align-items: center;
+      padding-left: 33px;
 
     }
 
@@ -419,27 +493,55 @@
     }
 
     .integration_row_col_content[name='物联接入平台'] {
-      background: url('@{imgSrc}/物联接入平台.png') 33px 28px no-repeat,
-      url('@{imgSrc}/基础平台bg.png') center center no-repeat;
-      background-size: 48px 48px, 100% 100%;
+      background: url('@{imgSrc}/基础平台bg.png') center center no-repeat;
+      background-size: 100% 100%;
+
+      .integration_row_col_img {
+        width: 48px;
+        height: 48px;
+        background: url('@{imgSrc}/物联接入平台.png') center center no-repeat;
+        background-size: 100% 100%;
+        margin-right: 60px;
+      }
     }
 
     .integration_row_col_content[name='视频接入平台'] {
-      background: url('@{imgSrc}/视频接入平台.png') 31px 29px no-repeat,
-      url('@{imgSrc}/基础平台bg.png') center center no-repeat;
-      background-size: 48px 48px, 100% 100%;
+      background: url('@{imgSrc}/基础平台bg.png') center center no-repeat;
+      background-size: 100% 100%;
+
+      .integration_row_col_img {
+        width: 48px;
+        height: 48px;
+        background: url('@{imgSrc}/视频接入平台.png') center center no-repeat;
+        background-size: 100% 100%;
+        margin-right: 60px;
+      }
     }
 
     .integration_row_col_content[name='报警管理平台'] {
-      background: url('@{imgSrc}/报警管理平台.png') 33px 29px no-repeat,
-      url('@{imgSrc}/基础平台bg.png') center center no-repeat;
-      background-size: 48px 48px, 100% 100%;
+      background: url('@{imgSrc}/基础平台bg.png') center center no-repeat;
+      background-size: 100% 100%;
+
+      .integration_row_col_img {
+        width: 48px;
+        height: 48px;
+        background: url('@{imgSrc}/报警管理平台.png') center center no-repeat;
+        background-size: 100% 100%;
+        margin-right: 60px;
+      }
     }
 
     .integration_row_col_content[name='运维管理平台'] {
-      background: url('@{imgSrc}/运维管理平台.png') 33px 30px no-repeat,
-      url('@{imgSrc}/基础平台bg.png') center center no-repeat;
-      background-size: 48px 48px, 100% 100%;
+      background: url('@{imgSrc}/基础平台bg.png') center center no-repeat;
+      background-size: 100% 100%;
+
+      .integration_row_col_img {
+        width: 48px;
+        height: 48px;
+        background: url('@{imgSrc}/运维管理平台.png') center center no-repeat;
+        background-size: 100% 100%;
+        margin-right: 60px;
+      }
     }
 
   }