Commit 5573f7de authored by 周宏民's avatar 周宏民

feat: 建始集成登录

parent b7d7562d
Pipeline #94036 passed with stages
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
......@@ -16,6 +16,7 @@ import DanlingPage from './project/danling';
import MilePage from './project/mile';
import DongyingPage from './project/dongying';
import QinzhouPage from './project/qinzhou';
import JianshiPage from './project/jianshi';
import IntegrationNewPage from './integrationNew';
export const guidePage = [
// type 为true 则需要 功能配置 isPanda 为true
......@@ -69,6 +70,11 @@ export const guidePage = [
value: 'qinzhouPage',
previewSrc: require('@/assets/images/integration/previewImg/钦州.png'),
},
{
label: '建始集成登录',
value: 'jianshiPage',
previewSrc: require('@/assets/images/integration/previewImg/建始.png'),
},
{
label: '演示环境(旧版)',
type: true,
......@@ -93,4 +99,5 @@ export const BootPageTemplate = {
milePage: MilePage,
dongyingPage: DongyingPage,
qinzhouPage: QinzhouPage,
jianshiPage: JianshiPage,
};
import { appService } from '@/api';
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
import { message, Button } from 'antd';
import classNames from 'classnames';
import { debounce } from 'lodash';
import { getImageUrl, goToPath, searchUrl } 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';
import LoadPage from '@/components/LoadPage';
import { connect } from 'react-redux';
import { actionCreators } from '@/containers/App/store';
import { getUserInfo, getWebSiteConfig } from '@/api/service/base';
import { useHistory, useAliveController } from '@wisdom-utils/runtime';
import Cookies from 'js-cookie';
import { store } from '@wisdom-utils/utils';
import LoginAction from '@/pages/user/login/login';
import { defaultApp } from '@/micro';
import titleIcon from '@/assets/images/integration/jianshi/标题.png';
import useFullScreen from '../../demonstration/components/useFullScreen';
import styles from './index.less';
const boxWidth = 1920;
const boxHeight = 940;
const IntegrationJianshi = props => {
const integratedConfig = props.integratedConfig?.toObject
? props.integratedConfig.toObject()
: props.integratedConfig || {};
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();
const { clear } = useAliveController();
const timer2 = useRef(null);
const timer3 = useRef(null);
const progressRef2 = useRef(0);
// 退出
const exit = () => {
if (isFullscreen) {
handleExitFullScreen && handleExitFullScreen();
} else {
handleFullScreen && handleFullScreen();
}
};
const [boxSize, setBoxSize] = useState({
scale: 1,
boxHeight: 940,
});
const [linkUrl, setLinkUrl] = useState('');
const [jumpLoading, setJumpLoading] = useState(false);
const [progressValue2, setProgressValue2] = useState(0);
const [loginAction, setAction] = useState(() => new LoginAction(props));
const jumpProgressStart = () => {
if (timer2.current) {
clearInterval(timer2.current);
timer2.current = null;
}
progressRef2.current = 0;
setProgressValue2(0);
timer2.current = setInterval(() => {
if (progressRef2.current < 97.5) {
progressRef2.current += 2.5;
setProgressValue2(progressRef2.current);
} else {
setProgressValue2(99);
timer2.current && clearInterval(timer2.current);
timer2.current = null;
}
}, 100);
};
const jumpProgressEnd = () => {
setProgressValue2(100);
timer2.current && clearInterval(timer2.current);
timer2.current = null;
};
const getData = async () => {
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
.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 onResize = () => {
if (ref?.current) {
const { clientWidth, clientHeight } = ref.current;
if (!boxWidth || !boxHeight) return;
const xScale = clientWidth / boxWidth;
const yScale = clientHeight / boxHeight;
let n = Math.min(xScale, yScale);
let bHeight = boxHeight;
// 高度为偶数
bHeight = parseInt(bHeight, 10);
if (bHeight % 2 !== 0) {
bHeight += 1;
}
n = Number(n.toFixed(4));
setBoxSize({
scale: n,
boxHeight: bHeight,
});
}
};
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 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
// 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();
window.open(apiPath, '_blank');
}
} else {
res.msg && message.error(res.msg);
setJumpLoading(false);
jumpProgressEnd();
}
} catch (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;
}
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);
// 用全局存跳转信息,跳转过程页面会刷新
window.clientInfo = item;
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) => {
if (!item) return message.info('未配置权限,请联系管理人员');
if (window.clientInfo) {
window.clientInfo = null;
}
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 (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');
}
}
};
useEffect(() => {
getData();
window.addEventListener('resize', debounce(onResize, 300));
onResize();
return () => {
window.removeEventListener('resize', onResize);
timer2.current && clearInterval(timer2.current);
timer2.current = null;
timer3.current && clearInterval(timer3.current);
timer3.current = null;
};
}, []);
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={classNames(styles.integrationJianshi, 'integrationJianshi')} ref={ref}>
{jumpLoading ? (
<div className={styles.integrationJumpLoad} key="jumpLoading">
<div style={{ width: '285px' }}>
<LoadPage percent={progressValue2 / 100} text="页面加载中~" />
</div>
</div>
) : null}
{!linkUrl ? (
<div className={styles.integrationJianshi_exit} onClick={exit}>
<Button type="text" style={{ color: '#fff', fontSize: '24px' }}>
{isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
</Button>
</div>
) : null}
<div
className={styles.integration_content}
style={{
width: boxWidth,
height: boxSize.boxHeight,
transform: `scale(${boxSize.scale}) translate(-50%,-50%)`,
}}
>
<div className={styles.integrationJianshi_title}>
<img src={titleIcon} alt="建始县兴泉供水智慧平台" />
</div>
<div
className={classNames(
styles.integration_row1,
integrationData['水务大数据驾驶舱'] ? styles.integration_row_col_link : styles.integration_row_col_no,
)}
onClick={() => onLink(integrationData['水务大数据驾驶舱'], loginAction)}
/>
<div className={classNames(styles.integration_row2)}>
<div
className={classNames(
styles.integration_cell,
integrationData['仓储物资系统'] ? styles.integration_row_col_link : styles.integration_row_col_no,
)}
type="仓储物资系统"
onClick={() => onLink(integrationData['仓储物资系统'], loginAction)}
/>
<div
className={classNames(
styles.integration_cell,
integrationData['营业收费系统'] ? styles.integration_row_col_link : styles.integration_row_col_no,
)}
type="营业收费系统"
onClick={() => onLink(integrationData['营业收费系统'], loginAction)}
/>
<div
className={classNames(
styles.integration_cell,
integrationData['OA办公系统'] ? styles.integration_row_col_link : styles.integration_row_col_no,
)}
type="OA办公系统"
onClick={() => onLink(integrationData['OA办公系统'], loginAction)}
/>
<div
className={classNames(
styles.integration_cell,
integrationData['DMA控漏系统'] ? styles.integration_row_col_link : styles.integration_row_col_no,
)}
type="DMA控漏系统"
onClick={() => onLink(integrationData['DMA控漏系统'], loginAction)}
/>
</div>
<div className={classNames(styles.integration_row3)}>
<div className={styles.integration_box} type="管网GIS">
<div
className={classNames(
styles.integration_cell,
integrationData['管网采集'] ? styles.integration_row_col_link : styles.integration_row_col_no,
)}
type="管网采集"
onClick={() => onLink(integrationData['管网采集'], loginAction)}
/>
<div
className={classNames(
styles.integration_cell,
integrationData['GIS数据处理'] ? styles.integration_row_col_link : styles.integration_row_col_no,
)}
type="GIS数据处理"
onClick={() => onLink(integrationData['GIS数据处理'], loginAction)}
/>
<div
className={classNames(
styles.integration_cell,
integrationData['水力模型平台'] ? styles.integration_row_col_link : styles.integration_row_col_no,
)}
type="水力模型平台"
onClick={() => onLink(integrationData['水力模型平台'], loginAction)}
/>
</div>
<div
className={classNames(
styles.integration_cell,
integrationData['厂站网调度'] ? styles.integration_row_col_link : styles.integration_row_col_no,
)}
type="厂站网调度"
onClick={() => onLink(integrationData['厂站网调度'], loginAction)}
/>
<div
className={classNames(
styles.integration_cell,
integrationData['业务外勤'] ? styles.integration_row_col_link : styles.integration_row_col_no,
)}
type="业务外勤"
onClick={() => onLink(integrationData['业务外勤'], loginAction)}
/>
</div>
<div className={classNames(styles.integration_row4)}>
<div
className={classNames(
styles.integration_cell,
integrationData['统一接入平台'] ? styles.integration_row_col_link : styles.integration_row_col_no,
)}
type="统一接入平台"
onClick={() => onLink(integrationData['统一接入平台'], loginAction)}
/>
<div
className={classNames(
styles.integration_cell,
integrationData['大数据中心'] ? styles.integration_row_col_link : styles.integration_row_col_no,
)}
type="大数据中心"
onClick={() => onLink(integrationData['大数据中心'], loginAction)}
/>
<div
className={classNames(
styles.integration_cell,
integrationData['运维中心'] ? styles.integration_row_col_link : styles.integration_row_col_no,
)}
type="运维中心"
onClick={() => onLink(integrationData['运维中心'], loginAction)}
/>
<div
className={classNames(
styles.integration_cell,
integrationData['信管中心'] ? styles.integration_row_col_link : styles.integration_row_col_no,
)}
type="信管中心"
onClick={() => onLink(integrationData['信管中心'], loginAction)}
/>
</div>
</div>
<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>
);
};
const mapStateToProps = state => ({
global: state.getIn(['global', 'globalConfig']),
integratedConfig: state.getIn(['global', 'integratedConfig']),
});
const mapDispatchToProps = dispatch => ({
updateConfig(config) {
dispatch(actionCreators.getConfig(config));
},
createContext(data) {
dispatch(actionCreators.createContext(data));
},
updateCurrentIndex(index) {
dispatch(actionCreators.updateCurrentIndex(index));
},
logout() {
dispatch(actionCreators.logout());
},
});
export default connect(
mapStateToProps,
mapDispatchToProps,
)(IntegrationJianshi);
@imgSrc: '@/assets/images/integration/jianshi/';
.integrationJianshi {
width: 100%;
position: relative;
height: 100%;
overflow: hidden;
background: url('@/assets/images/integration/taihu2/背景2.jpg') center/100% 100% no-repeat;
.integrationJianshi_title {
display: flex;
align-items: flex-end;
justify-content: center;
margin-top: 44px;
margin-bottom: 0px;
width: 1324px;
height: 75px;
background: url('@{imgSrc}/标题bg.png') center center no-repeat;
background-size: 100% 100%;
}
.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: 50px;
right: 0;
color: #FFF;
cursor: pointer;
user-select: none;
position: absolute;
z-index: 110;
}
.integrationJianshi_exit {
position: absolute;
right: 10px;
top: 10px;
z-index: 100;
}
.integration_content {
display: flex;
flex-direction: column;
align-items: center;
transform-origin: left top;
position: absolute;
left: 50%;
top: 50%;
padding: 0px 20px 10px;
}
.integration_row_col_no {
// filter: grayscale(100%) brightness(90%);
cursor: not-allowed;
}
.integration_row_col_link {
cursor: pointer;
}
.integration_row_col_link:hover {
filter: brightness(120%);
}
.integration_row1 {
width: 1275px;
height: 208px;
background: url('@{imgSrc}/水务大数据.png') center/100% 100% no-repeat;
}
.integration_row2 {
display: flex;
position: relative;
height: 115px;
width: 1300px;
justify-content: space-between;
}
.integration_cell {
z-index: 20;
}
.integration_cell[type='仓储物资系统'] {
height: 149px;
width: 312px;
position: relative;
top: -46px;
background: url('@{imgSrc}/仓储物资系统.png') center/100% 100% no-repeat;
}
.integration_cell[type='营业收费系统'] {
height: 115px;
width: 312px;
position: relative;
background: url('@{imgSrc}/营业收费系统.png') center/100% 100% no-repeat;
}
.integration_cell[type='OA办公系统'] {
height: 115px;
width: 312px;
position: relative;
background: url('@{imgSrc}/OA办公系统.png') center/100% 100% no-repeat;
}
.integration_cell[type='DMA控漏系统'] {
height: 149px;
width: 312px;
position: relative;
top: -46px;
background: url('@{imgSrc}/DMA控漏系统.png') center/100% 100% no-repeat;
}
.integration_row3 {
display: flex;
position: relative;
height: 338px;
width: 1300px;
justify-content: space-between;
margin-top: 10px;
}
.integration_box[type='管网GIS'] {
height: 326px;
width: 388px;
position: relative;
top: -40px;
background: url('@{imgSrc}/管网GIS.png') center/100% 100% no-repeat;
}
.integration_cell[type='管网采集'] {
position: absolute;
height: 153px;
width: 168px;
position: relative;
background: url('@{imgSrc}/管网采集.png') center/100% 100% no-repeat;
left: 15px;
top: 55px;
}
.integration_cell[type='GIS数据处理'] {
position: absolute;
height: 149px;
width: 168px;
background: url('@{imgSrc}/GIS数据处理.png') center/100% 100% no-repeat;
left: 187px;
top: 76px;
}
.integration_cell[type='水力模型平台'] {
position: absolute;
height: 190px;
width: 341px;
background: url('@{imgSrc}/水力模型.png') center/100% 100% no-repeat;
left: 15px;
top: 188px;
}
.integration_cell[type='厂站网调度'] {
height: 338px;
width: 501px;
position: relative;
background: url('@{imgSrc}/厂站网.png') center/100% 100% no-repeat;
}
.integration_cell[type='业务外勤'] {
height: 378px;
width: 388px;
position: relative;
top: -40px;
background: url('@{imgSrc}/业务外勤.png') center/100% 100% no-repeat;
}
.integration_row4 {
position: absolute;
height: 374px;
width: 1447px;
background: url('@{imgSrc}/基础数据平台.png') center/100% 100% no-repeat;
bottom: 10px;
margin: 0 auto;
z-index: 10;
}
.integration_cell[type='统一接入平台'] {
height: 98px;
width: 193px;
position: absolute;
bottom: 79px;
left: 102px;
background: url('@{imgSrc}/统一接入平台.png') center/100% 100% no-repeat;
}
.integration_cell[type='大数据中心'] {
height: 63px;
width: 221px;
position: absolute;
bottom: 55px;
left: 353px;
background: url('@{imgSrc}/大数据中心.png') center/100% 100% no-repeat;
}
.integration_cell[type='运维中心'] {
height: 65px;
width: 210px;
position: absolute;
bottom: 55px;
right: 343px;
background: url('@{imgSrc}/运维中心.png') center/100% 100% no-repeat;
}
.integration_cell[type='信管中心'] {
height: 97px;
width: 174px;
position: absolute;
bottom: 86px;
right: 107px;
background: url('@{imgSrc}/信管中心.png') center/100% 100% no-repeat;
}
}
.integrationJumpLoad {
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
z-index: 1080;
padding-bottom: 50px;
background-color: rgba(0, 0, 0, 0.6);
}
.hide {
visibility: hidden;
}
@-webkit-keyframes scale-in-center {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
}
@keyframes scale-in-center {
0% {
-webkit-transform: scaleY(0);
transform: scaleY(0);
opacity: 1;
}
100% {
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
}
.scaleInCenter {
visibility: visible;
-webkit-animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: scale-in-center .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
& :global {
.integrationJianshi {
.anticon {
vertical-align: 0.125em;
}
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment