Skip to content

C
CivWeb
Commit 4241b2af authored by 周宏民's avatar 周宏民
Browse files
Options

feat: 演示功能入口修改

parent b3f4f592
Show whitespace changes
Inline Side-by-side
Showing with 215 additions and 68 deletions
src/pages/bootpage/demonstration/components/Bottom/index.js
View file @ 4241b2af
......@@ -3,14 +3,14 @@
* @Author: hongmye
* @Date: 2023-12-26 18:34:42
*/
import { ConfigProvider, Image, Tooltip } from 'antd';
import { Image, Tooltip, message } from 'antd';
import React, { useMemo, useEffect, useState } from 'react';
import classNames from 'classnames';
import zhCN from 'antd/es/locale/zh_CN';
import DataCarousel from '../DataCarousel';
import styles from './index.less';
const BottomItem = props => {
const { listData = [], configData = [], onLineUrl, handToPage, handlePage } = props;
const { listData = [], configData = [], onLineUrl, handToPage, handlePage, industries = [] } = props;
const isJump = industries.includes('项目案例');
const [list, setList] = useState([]);
const [infoData, setInfoData] = useState({});
const renderNum = (num, type) => {
......@@ -23,15 +23,25 @@ const BottomItem = props => {
</div>
));
};
const toPage = (e, url) => {
if (!isJump) return message.warning('该用户没有权限！');
handToPage(url);
};
const toMore = (e, url) => {
if (!isJump) return message.warning('该用户没有权限！');
handlePage(e, '项目案例');
};
const renderCol = (row, rindex) => {
if (!Array.isArray(row)) return null;
return (
<div className={styles.list_item_col}>
{row.map((col, cIndex) => (
<Tooltip title={col['项目环境'] && isJump ? '点击体验' : ''} color="#1685FF">
<div
key={`${rindex}-${cIndex}`}
type={col['项目环境'] ? 'jump' : 'none'}
onClick={() => handToPage(col['项目环境'])}
type={col['项目环境'] && isJump ? 'jump' : 'none'}
onClick={() => toPage(col['项目环境'])}
alt="点击体验"
className={styles.list_item}
>
<div className={styles.list_item_img_wrap}>
......@@ -42,6 +52,7 @@ const BottomItem = props => {
preview={false}
/>
</div>
{col['重要程度'] === '样板' ? <div className={styles.list_item_img_tip} /> : null}
</div>
<div className={styles.list_item_info_wrap}>
......@@ -49,11 +60,14 @@ const BottomItem = props => {
{col['所属行业']}
</div>
<div className={styles.list_item_info_name}>
<Tooltip title={col['客户名称']}>{col['客户名称']}</Tooltip>
<Tooltip title={col['客户名称']} color="#1685FF">
{col['客户名称']}
</Tooltip>
</div>
<div className={styles.list_item_info_address}>{col['城市']}</div>
</div>
</div>
</Tooltip>
))}
</div>
);
......@@ -155,12 +169,13 @@ const BottomItem = props => {
renderItem={renderCol}
config={{
direction: 'horizontal',
width: 212,
loop: true,
width: 1520,
loop: false,
slidesPerView: 7,
}}
/>
</div>
<div className={styles.right} onClick={e => handlePage(e, '项目案例')}>
<div className={styles.right} onClick={e => toMore(e)}>
查看全部
</div>
</div>
......
src/pages/bootpage/demonstration/components/Left/index.js
View file @ 4241b2af
......@@ -5,12 +5,13 @@
*/
import React, { useMemo, useEffect, useState, memo } from 'react';
import { Tooltip } from 'antd';
import { schemeData } from '../configData';
import styles from './index.less';
let timer;
const LeftItem = props => {
const { selectKey, onChangeScheme, handlePage } = props;
const { selectKey, onChangeScheme, handlePage, industries } = props;
const onMouseEnter = (item, index) => {
if (timer) {
......@@ -32,6 +33,7 @@ const LeftItem = props => {
</div>
<div className={styles.l_list}>
{schemeData.map((item, index) => (
<Tooltip title={industries.includes(item.type) ? '点击体验' : ''} color="#1685FF">
<div
className={styles.l_list_item}
key={item.title}
......@@ -44,6 +46,7 @@ const LeftItem = props => {
<div className={styles.l_list_item_title}>- {item.title} -</div>
<div className={styles.l_list_item_tip} />
</div>
</Tooltip>
))}
</div>
</div>
......
src/pages/bootpage/demonstration/components/Right/index.js
View file @ 4241b2af
......@@ -9,20 +9,34 @@ import classNames from 'classnames';
import DataCarousel from '../DataCarousel';
import styles from './index.less';
const RightItem = props => {
const { listData, handToPage } = props;
const { listData, handToPage, handToProduct } = props;
const toPage = row => {
if (row.site) {
handToProduct(row);
} else if (row['产品地址']) {
handToPage(row['产品地址']);
}
};
const renderRow = (row, index) => {
const rIndex = `r_${index % 7}`;
return (
<Tooltip
placement="left"
title={row['产品地址'] || row.site ? '点击体验' : ''}
mouseEnterDelay={0.5}
color="#1685FF"
>
<div
className={styles.r_list_item}
key={row['产品名称']}
rIndex={rIndex}
type={row['产品地址'] ? 'jump' : 'none'}
onClick={() => handToPage(row['产品地址'])}
type={row['产品地址'] || row.site ? 'jump' : 'none'}
onClick={() => toPage(row)}
>
<div className={styles.r_list_item_title}>{row['产品名称']}</div>
<div className={styles.r_list_item_tip} />
</div>
</Tooltip>
);
};
......@@ -36,11 +50,12 @@ const RightItem = props => {
<DataCarousel
gap={1}
autoplay={5000}
itemHeight={50}
itemHeight={350}
list={listData}
renderItem={renderRow}
config={{
loop: true,
loop: false,
slidesPerView: 7,
}}
/>
</div>
......
src/pages/bootpage/demonstration/components/Right/index.less
View file @ 4241b2af
......@@ -36,7 +36,7 @@
overflow: hidden;
.r_list_item[type='jump']:hover {
bottom: -8px;
// bottom: -8px;
filter: brightness(160%)
}
......
src/pages/bootpage/demonstration/components/configData.js
View file @ 4241b2af
......@@ -38,43 +38,7 @@ const schemeData = [
type: '能源',
},
];
const productData = [
{
title: '智慧生产调度管控平台',
url: '',
blank: true,
},
{
title: '智慧水厂数字孪生平台',
url: '',
blank: true,
},
{
title: '智慧设备资产管理平台',
url: '',
blank: true,
},
{
title: '智慧工程物资管理平台',
url: '',
blank: true,
},
{
title: '智慧应急调度指挥中心',
url: '',
blank: true,
},
{
title: '智慧水厂养殖监控平台',
url: '',
blank: true,
},
{
title: '智慧水务大数据可视化平台',
url: '',
blank: true,
},
];
const platformData = [
{
title: '水务统一接入平台',
......@@ -126,4 +90,4 @@ const platformData = [
blank: true,
},
];
export { schemeData, productData, platformData };
export { schemeData, platformData };
src/pages/bootpage/demonstration/index.js
View file @ 4241b2af
/* eslint-disable indent */
/* eslint-disable no-undef */
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable global-require */
/*
......@@ -7,9 +9,11 @@
*/
import { FullscreenExitOutlined, FullscreenOutlined, RightOutlined } from '@ant-design/icons';
import exitImg from '@/assets/demonstration/退出.png';
import { Button, message } from 'antd';
import { Button, Spin, message, Tooltip } from 'antd';
import React, { useMemo, useState, useEffect, useRef } from 'react';
import { cloneDeep, debounce } from 'lodash';
import Cookies from 'js-cookie';
import { encode } from 'js-base64';
import { appService } from '@/api';
import { actionCreators } from '@/containers/App/store';
import { connect } from 'react-redux';
......@@ -30,8 +34,8 @@ const Demonstration = props => {
const onLineUrl = window.globalConfig?.mainserver || 'https://panda-water.cn/';
const showFullScreen = true;
const videoRef = useRef(null);
const [loginAction, setAction] = useState(() => new LoginAction(props));
const [loading, setLoading] = useState(true);
const [jumpLoading, setJumpLoading] = useState(false);
const [selectKey, setSelectKey] = useState('供水产品');
const [boxSize, setBoxSize] = useState({
scale: 1,
......@@ -57,6 +61,9 @@ const Demonstration = props => {
videoRef.current.onSlideToLoop(index);
}
};
const failCallback = err => {
setJumpLoading(false);
};
// 方案跳转
const handlePage = (event, type, row) => {
const config = props.global;
......@@ -65,15 +72,100 @@ const Demonstration = props => {
message.error(`该用户未配置${row.title}`);
return;
}
setJumpLoading(true);
config.uiwidgets = [];
config.widgets = [];
config.allWidgets = [];
props.instance && props.instance.updateConfig(config);
loginAction && loginAction.getUserInfoAndConfig('', true, type);
const loginAction = new LoginAction({ ...props, global: config });
loginAction && loginAction.getUserInfoAndConfig(failCallback, true, type);
};
const updateConfig = (config, data) => {
props.updateConfig && props.updateConfig(config);
const loginAction = new LoginAction({ ...props, global: config });
loginAction && loginAction.getUserInfoAndConfig(failCallback, true, data.industry);
};
// 新产品跳转
const handToProduct = data => {
if (!data.site) return message.warning('该用户没有权限！');
setJumpLoading(true);
const userParam = {
token: props.global.token,
subOID: 'subOID',
site: data.site,
ignoreSite: true,
};
const gateWayParam = {
_site: data.site,
};
Promise.all([appService.getUserInfo(userParam), appService.getWateWayConfig(gateWayParam)])
.then(results => {
const res = results[0];
const gatewayRes = results[1];
if (res.code !== 0) {
setJumpLoading(false);
message.error('获取用户信息失败');
}
// 重置一些环境配置
const config = { ...props.global };
config.uiwidgets = [];
config.widgets = [];
config.allWidgets = [];
config.userInfo = window?.globalConfig?.transformUserInfo?.(res.data) ?? res.data;
// 默认有个上次记住的登入企业，存在印象。这里把cookie和localStorage中的都重新设置一下
const date = new Date();
date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
const encodeSite = encode(encodeURIComponent(data.site));
localStorage.setItem('loginSite', JSON.stringify({ [config.token]: data.site }));
Cookies.set('site', encodeSite, {
expires: date,
path: '/',
});
props.updateConfig && props.updateConfig(config);
// 重置网关配置
const hasGateWay =
!gatewayRes || !gatewayRes.data
? false
: _.isString(gatewayRes.data)
? JSON.parse(gatewayRes.data)
: typeof gatewayRes.data === 'boolean'
? gatewayRes.data
: false;
config.hasGateWay = hasGateWay;
config.apiGatewayDomain = `${window.location.origin}${hasGateWay ? '/PandaCore/GateWay' : ''}`;
if (hasGateWay) {
appService
.authorizationToken({
loginName: config.userInfo?.loginName || '',
type: 'WorkNo',
})
.then(tokenRes => {
if (res.code === 0) {
config.access_token = tokenRes.data?.access_token ?? '';
localStorage.setItem('access_token', config.access_token);
}
updateConfig(config, data);
})
.catch(err => {
updateConfig(config, data);
});
} else {
config.access_token = null;
localStorage.setItem('access_token', config.access_token);
updateConfig(config, data);
}
})
.catch(err => {
setJumpLoading(true);
message.error('获取用户信息失败');
});
};
const handToPage = (url, type) => {
if (!url) return;
if (!url) return message.warning('该环境未配置，请联系管理员');
window.open(url, '_blank');
};
......@@ -81,10 +173,8 @@ const Demonstration = props => {
let list = [...platformData];
list = list.map(l => {
const item = configData.find(c => c['名称'] === l.title);
l.url = item?.['数值'];
return l;
return { ...l, ...item };
});
return list.map(col => {
if (col.isCenter) {
return (
......@@ -94,17 +184,19 @@ const Demonstration = props => {
);
}
return (
<Tooltip title={col.site ? '点击体验' : ''} color="#1685FF">
<div
onClick={() => handToPage(col.url)}
onClick={() => handToProduct(col)}
className={styles.center_col}
style={{ flex: col.flex }}
type={col.title}
isJump={col.url ? 'yes' : 'no'}
isJump={col.site ? 'yes' : 'no'}
>
<img src={require(`@/assets/demonstration/${col.icon}`)} alt="" />
{col.title}
<RightOutlined />
</div>
</Tooltip>
);
});
}, [configData]);
......@@ -167,12 +259,30 @@ const Demonstration = props => {
let data1 = dataStr1 ? JSON.parse(dataStr1) : [];
data1 = data1.filter(d => projectType.includes(d['所属行业']));
const dataStr2 = result[1]?.data?.jsonData || '';
const data2 = dataStr2 ? JSON.parse(dataStr2) : [];
let data2 = dataStr2 ? JSON.parse(dataStr2) : [];
const dataStr3 = result[2]?.data?.jsonData || '';
const data3 = dataStr3 ? JSON.parse(dataStr3) : [];
let data3 = dataStr3 ? JSON.parse(dataStr3) : [];
const groups = props.global?.userInfo?.Groups || [];
data3 = data3.map(d => {
const item = groups.find(g => g.site === d.site);
if (item) {
return { ...d, ...item };
}
delete d.site;
return d;
});
data2 = data2.map(d => {
const item = groups.find(g => g.site === d['数值']);
if (item) {
return { ...d, ...item };
}
return d;
});
setProjectData(data1);
setConfigData(data2);
setProductData(data3);
setLoading(false);
});
};
......@@ -186,6 +296,11 @@ const Demonstration = props => {
}, []);
return (
<div className={classNames(styles.demonstration)} ref={ref}>
{jumpLoading ? (
<div className={styles.demonstrationLoad}>
<Spin />
</div>
) : null}
{showFullScreen ? (
<div className={styles.CV_exit} onClick={exit}>
<Button type="text" style={{ color: '#fff', fontSize: '24px' }}>
......@@ -228,13 +343,14 @@ const Demonstration = props => {
selectKey={selectKey}
onChangeScheme={onChangeScheme}
handlePage={handlePage}
industries={props.global?.userInfo?.Industries || []}
/>
</div>
<div className={styles.row_c}>
<VideoItem ref={videoRef} selectKey={selectKey} setSelectKey={setSelectKey} />
</div>
<div className={styles.row_r}>
<RightItem listData={productData} handToPage={handToPage} />
<RightItem listData={productData} handToPage={handToPage} handToProduct={handToProduct} />
</div>
</div>
<div className={classNames(styles.center_wrap, 'animate__fadeIn', 'animate__animated', 'duration-500ms')}>
......@@ -248,6 +364,7 @@ const Demonstration = props => {
onLineUrl={onLineUrl}
handToPage={handToPage}
handlePage={handlePage}
industries={props.global?.userInfo?.Industries || []}
/>
</div>
</>
......
src/pages/bootpage/demonstration/index.less
View file @ 4241b2af
......@@ -15,6 +15,20 @@
align-items: center;
justify-content: center;
.demonstrationLoad {
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
z-index: 110;
background-color: rgba(255, 255, 255, 0.8);
}
.demonstrationWrap {
height: 100%;
width: 100%;
......
src/pages/bootpage/panda/index.js
View file @ 4241b2af
/* eslint-disable global-require */
// 云平台引导页
import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
import enterImg from '@/assets/demonstration/进入.png';
import { RightOutlined } from '@ant-design/icons';
import { Space, Spin, Progress } from 'antd';
import classNames from 'classnames';
......@@ -15,7 +17,7 @@ import { defaultApp } from '@/micro';
import usingIcon from '@/assets/bootPage/using-icon.png';
import { appService } from '@/api';
import styles from './index.less';
import Demonstration from '../demonstration';
const industries = [
{ name: '供水', type: '供水', subTitle: 'WATER SUPPLY', color: 'rgb(16,104,239)' },
{ name: '农饮水', type: '农饮水', subTitle: 'RURAL POTABLE WATER', color: 'rgb(4,142,101)' },
......@@ -43,6 +45,7 @@ const BootPage = props => {
const [scale, setScale] = useState(1);
const [loginAction, setAction] = useState(() => new LoginAction(props));
const [num] = useState(Industries.filter(item => !!industries.find(d => d.type === item)).length);
const [pattern, setPattern] = useState(true); // 是否进入演示模式
// const history = useHistory();
useDocumentTitle(
{ title: defaultSetting.title, id: '', pageName: '行业切换' },
......@@ -173,7 +176,16 @@ const BootPage = props => {
}, [props.global.token]);
return (
<>
{pattern ? (
<Demonstration setPattern={setPattern} />
) : (
<div className={styles.bootPage}>
<div className={styles.b_top_l}>
<div className={styles.b_top_l_btn} onClick={() => setPattern(true)}>
<img src={enterImg} alt="" /> 进入演示模式 <RightOutlined />
</div>
</div>
<div className={styles.bootPageMain}>
<header className={styles.bootPageHead}>
{/* eslint-disable-next-line jsx-a11y/alt-text */}
......@@ -184,7 +196,12 @@ const BootPage = props => {
</div>
</header>
<section
className={classNames(styles.bootPageSection, 'animate__fadeInDown', 'animate__animated', 'duration-500ms')}
className={classNames(
styles.bootPageSection,
'animate__fadeInDown',
'animate__animated',
'duration-500ms',
)}
// style={{
// width: `${scale < 1 ? 1280 : Math.ceil(1280 * scale)}px`,
// }}
......@@ -257,6 +274,8 @@ const BootPage = props => {
</div>
) : null}
</div>
)}
</>
);
};
const mapStateToProps = state => ({
......
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