Skip to content

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

feat: 演示功能入口修改

parent b3f4f592
Hide whitespace changes
Inline Side-by-side
Showing with 342 additions and 195 deletions
src/pages/bootpage/demonstration/components/Bottom/index.js
View file @ 4241b2af
...@@ -3,14 +3,14 @@ ...@@ -3,14 +3,14 @@
* @Author: hongmye * @Author: hongmye
* @Date: 2023-12-26 18:34:42 * @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 React, { useMemo, useEffect, useState } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import zhCN from 'antd/es/locale/zh_CN';
import DataCarousel from '../DataCarousel'; import DataCarousel from '../DataCarousel';
import styles from './index.less'; import styles from './index.less';
const BottomItem = props => { 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 [list, setList] = useState([]);
const [infoData, setInfoData] = useState({}); const [infoData, setInfoData] = useState({});
const renderNum = (num, type) => { const renderNum = (num, type) => {
...@@ -23,37 +23,51 @@ const BottomItem = props => { ...@@ -23,37 +23,51 @@ const BottomItem = props => {
</div> </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) => { const renderCol = (row, rindex) => {
if (!Array.isArray(row)) return null; if (!Array.isArray(row)) return null;
return ( return (
<div className={styles.list_item_col}> <div className={styles.list_item_col}>
{row.map((col, cIndex) => ( {row.map((col, cIndex) => (
<div <Tooltip title={col['项目环境'] && isJump ? '点击体验' : ''} color="#1685FF">
key={`${rindex}-${cIndex}`} <div
type={col['项目环境'] ? 'jump' : 'none'} key={`${rindex}-${cIndex}`}
onClick={() => handToPage(col['项目环境'])} type={col['项目环境'] && isJump ? 'jump' : 'none'}
className={styles.list_item} onClick={() => toPage(col['项目环境'])}
> alt="点击体验"
<div className={styles.list_item_img_wrap}> className={styles.list_item}
<div className={classNames(styles.list_item_img, 'list_item_img')}> >
<Image <div className={styles.list_item_img_wrap}>
src={`${onLineUrl}CityInterface/rest/services/filedownload.svc/download/${col['项目图片']}`} <div className={classNames(styles.list_item_img, 'list_item_img')}>
style={{ height: '100px', width: '100%', overflow: 'hidden' }} <Image
preview={false} src={`${onLineUrl}CityInterface/rest/services/filedownload.svc/download/${col['项目图片']}`}
/> style={{ height: '100px', width: '100%', overflow: 'hidden' }}
</div> preview={false}
{col['重要程度'] === '样板' ? <div className={styles.list_item_img_tip} /> : null} />
</div> </div>
<div className={styles.list_item_info_wrap}>
<div className={styles.list_item_info_tip} type={col['所属行业']}> {col['重要程度'] === '样板' ? <div className={styles.list_item_img_tip} /> : null}
{col['所属行业']}
</div> </div>
<div className={styles.list_item_info_name}> <div className={styles.list_item_info_wrap}>
<Tooltip title={col['客户名称']}>{col['客户名称']}</Tooltip> <div className={styles.list_item_info_tip} type={col['所属行业']}>
{col['所属行业']}
</div>
<div className={styles.list_item_info_name}>
<Tooltip title={col['客户名称']} color="#1685FF">
{col['客户名称']}
</Tooltip>
</div>
<div className={styles.list_item_info_address}>{col['城市']}</div>
</div> </div>
<div className={styles.list_item_info_address}>{col['城市']}</div>
</div> </div>
</div> </Tooltip>
))} ))}
</div> </div>
); );
...@@ -155,12 +169,13 @@ const BottomItem = props => { ...@@ -155,12 +169,13 @@ const BottomItem = props => {
renderItem={renderCol} renderItem={renderCol}
config={{ config={{
direction: 'horizontal', direction: 'horizontal',
width: 212, width: 1520,
loop: true, loop: false,
slidesPerView: 7,
}} }}
/> />
</div> </div>
<div className={styles.right} onClick={e => handlePage(e, '项目案例')}> <div className={styles.right} onClick={e => toMore(e)}>
查看全部 查看全部
</div> </div>
</div> </div>
......
src/pages/bootpage/demonstration/components/Left/index.js
View file @ 4241b2af
...@@ -5,12 +5,13 @@ ...@@ -5,12 +5,13 @@
*/ */
import React, { useMemo, useEffect, useState, memo } from 'react'; import React, { useMemo, useEffect, useState, memo } from 'react';
import { Tooltip } from 'antd';
import { schemeData } from '../configData'; import { schemeData } from '../configData';
import styles from './index.less'; import styles from './index.less';
let timer; let timer;
const LeftItem = props => { const LeftItem = props => {
const { selectKey, onChangeScheme, handlePage } = props; const { selectKey, onChangeScheme, handlePage, industries } = props;
const onMouseEnter = (item, index) => { const onMouseEnter = (item, index) => {
if (timer) { if (timer) {
...@@ -32,18 +33,20 @@ const LeftItem = props => { ...@@ -32,18 +33,20 @@ const LeftItem = props => {
</div> </div>
<div className={styles.l_list}> <div className={styles.l_list}>
{schemeData.map((item, index) => ( {schemeData.map((item, index) => (
<div <Tooltip title={industries.includes(item.type) ? '点击体验' : ''} color="#1685FF">
className={styles.l_list_item} <div
key={item.title} className={styles.l_list_item}
type={item.title} key={item.title}
selectType={selectKey === item.title ? 'select' : ''} type={item.title}
onClick={event => handlePage(event, item.type, item)} selectType={selectKey === item.title ? 'select' : ''}
onMouseEnter={() => onMouseEnter(item, index)} onClick={event => handlePage(event, item.type, item)}
onMouseLeave={() => onMouseLeave(item, index)} onMouseEnter={() => onMouseEnter(item, index)}
> onMouseLeave={() => onMouseLeave(item, index)}
<div className={styles.l_list_item_title}>- {item.title} -</div> >
<div className={styles.l_list_item_tip} /> <div className={styles.l_list_item_title}>- {item.title} -</div>
</div> <div className={styles.l_list_item_tip} />
</div>
</Tooltip>
))} ))}
</div> </div>
</div> </div>
......
src/pages/bootpage/demonstration/components/Right/index.js
View file @ 4241b2af
...@@ -9,20 +9,34 @@ import classNames from 'classnames'; ...@@ -9,20 +9,34 @@ import classNames from 'classnames';
import DataCarousel from '../DataCarousel'; import DataCarousel from '../DataCarousel';
import styles from './index.less'; import styles from './index.less';
const RightItem = props => { 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 renderRow = (row, index) => {
const rIndex = `r_${index % 7}`; const rIndex = `r_${index % 7}`;
return ( return (
<div <Tooltip
className={styles.r_list_item} placement="left"
key={row['产品名称']} title={row['产品地址'] || row.site ? '点击体验' : ''}
rIndex={rIndex} mouseEnterDelay={0.5}
type={row['产品地址'] ? 'jump' : 'none'} color="#1685FF"
onClick={() => handToPage(row['产品地址'])}
> >
<div className={styles.r_list_item_title}>{row['产品名称']}</div> <div
<div className={styles.r_list_item_tip} /> className={styles.r_list_item}
</div> key={row['产品名称']}
rIndex={rIndex}
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 => { ...@@ -36,11 +50,12 @@ const RightItem = props => {
<DataCarousel <DataCarousel
gap={1} gap={1}
autoplay={5000} autoplay={5000}
itemHeight={50} itemHeight={350}
list={listData} list={listData}
renderItem={renderRow} renderItem={renderRow}
config={{ config={{
loop: true, loop: false,
slidesPerView: 7,
}} }}
/> />
</div> </div>
......
src/pages/bootpage/demonstration/components/Right/index.less
View file @ 4241b2af
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
overflow: hidden; overflow: hidden;
.r_list_item[type='jump']:hover { .r_list_item[type='jump']:hover {
bottom: -8px; // bottom: -8px;
filter: brightness(160%) filter: brightness(160%)
} }
......
src/pages/bootpage/demonstration/components/configData.js
View file @ 4241b2af
...@@ -38,43 +38,7 @@ const schemeData = [ ...@@ -38,43 +38,7 @@ const schemeData = [
type: '能源', 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 = [ const platformData = [
{ {
title: '水务统一接入平台', title: '水务统一接入平台',
...@@ -126,4 +90,4 @@ const platformData = [ ...@@ -126,4 +90,4 @@ const platformData = [
blank: true, 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 react-hooks/exhaustive-deps */
/* eslint-disable global-require */ /* eslint-disable global-require */
/* /*
...@@ -7,9 +9,11 @@ ...@@ -7,9 +9,11 @@
*/ */
import { FullscreenExitOutlined, FullscreenOutlined, RightOutlined } from '@ant-design/icons'; import { FullscreenExitOutlined, FullscreenOutlined, RightOutlined } from '@ant-design/icons';
import exitImg from '@/assets/demonstration/退出.png'; 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 React, { useMemo, useState, useEffect, useRef } from 'react';
import { cloneDeep, debounce } from 'lodash'; import { cloneDeep, debounce } from 'lodash';
import Cookies from 'js-cookie';
import { encode } from 'js-base64';
import { appService } from '@/api'; import { appService } from '@/api';
import { actionCreators } from '@/containers/App/store'; import { actionCreators } from '@/containers/App/store';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
...@@ -30,8 +34,8 @@ const Demonstration = props => { ...@@ -30,8 +34,8 @@ const Demonstration = props => {
const onLineUrl = window.globalConfig?.mainserver || 'https://panda-water.cn/'; const onLineUrl = window.globalConfig?.mainserver || 'https://panda-water.cn/';
const showFullScreen = true; const showFullScreen = true;
const videoRef = useRef(null); const videoRef = useRef(null);
const [loginAction, setAction] = useState(() => new LoginAction(props));
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [jumpLoading, setJumpLoading] = useState(false);
const [selectKey, setSelectKey] = useState('供水产品'); const [selectKey, setSelectKey] = useState('供水产品');
const [boxSize, setBoxSize] = useState({ const [boxSize, setBoxSize] = useState({
scale: 1, scale: 1,
...@@ -57,6 +61,9 @@ const Demonstration = props => { ...@@ -57,6 +61,9 @@ const Demonstration = props => {
videoRef.current.onSlideToLoop(index); videoRef.current.onSlideToLoop(index);
} }
}; };
const failCallback = err => {
setJumpLoading(false);
};
// 方案跳转 // 方案跳转
const handlePage = (event, type, row) => { const handlePage = (event, type, row) => {
const config = props.global; const config = props.global;
...@@ -65,15 +72,100 @@ const Demonstration = props => { ...@@ -65,15 +72,100 @@ const Demonstration = props => {
message.error(`该用户未配置${row.title}`); message.error(`该用户未配置${row.title}`);
return; return;
} }
setJumpLoading(true);
config.uiwidgets = []; config.uiwidgets = [];
config.widgets = []; config.widgets = [];
config.allWidgets = []; config.allWidgets = [];
props.instance && props.instance.updateConfig(config); 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) => { const handToPage = (url, type) => {
if (!url) return; if (!url) return message.warning('该环境未配置，请联系管理员');
window.open(url, '_blank'); window.open(url, '_blank');
}; };
...@@ -81,10 +173,8 @@ const Demonstration = props => { ...@@ -81,10 +173,8 @@ const Demonstration = props => {
let list = [...platformData]; let list = [...platformData];
list = list.map(l => { list = list.map(l => {
const item = configData.find(c => c['名称'] === l.title); const item = configData.find(c => c['名称'] === l.title);
l.url = item?.['数值']; return { ...l, ...item };
return l;
}); });
return list.map(col => { return list.map(col => {
if (col.isCenter) { if (col.isCenter) {
return ( return (
...@@ -94,17 +184,19 @@ const Demonstration = props => { ...@@ -94,17 +184,19 @@ const Demonstration = props => {
); );
} }
return ( return (
<div <Tooltip title={col.site ? '点击体验' : ''} color="#1685FF">
onClick={() => handToPage(col.url)} <div
className={styles.center_col} onClick={() => handToProduct(col)}
style={{ flex: col.flex }} className={styles.center_col}
type={col.title} style={{ flex: col.flex }}
isJump={col.url ? 'yes' : 'no'} type={col.title}
> isJump={col.site ? 'yes' : 'no'}
<img src={require(`@/assets/demonstration/${col.icon}`)} alt="" /> >
{col.title} <img src={require(`@/assets/demonstration/${col.icon}`)} alt="" />
<RightOutlined /> {col.title}
</div> <RightOutlined />
</div>
</Tooltip>
); );
}); });
}, [configData]); }, [configData]);
...@@ -167,12 +259,30 @@ const Demonstration = props => { ...@@ -167,12 +259,30 @@ const Demonstration = props => {
let data1 = dataStr1 ? JSON.parse(dataStr1) : []; let data1 = dataStr1 ? JSON.parse(dataStr1) : [];
data1 = data1.filter(d => projectType.includes(d['所属行业'])); data1 = data1.filter(d => projectType.includes(d['所属行业']));
const dataStr2 = result[1]?.data?.jsonData || ''; 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 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); setProjectData(data1);
setConfigData(data2); setConfigData(data2);
setProductData(data3); setProductData(data3);
setLoading(false); setLoading(false);
}); });
}; };
...@@ -186,6 +296,11 @@ const Demonstration = props => { ...@@ -186,6 +296,11 @@ const Demonstration = props => {
}, []); }, []);
return ( return (
<div className={classNames(styles.demonstration)} ref={ref}> <div className={classNames(styles.demonstration)} ref={ref}>
{jumpLoading ? (
<div className={styles.demonstrationLoad}>
<Spin />
</div>
) : null}
{showFullScreen ? ( {showFullScreen ? (
<div className={styles.CV_exit} onClick={exit}> <div className={styles.CV_exit} onClick={exit}>
<Button type="text" style={{ color: '#fff', fontSize: '24px' }}> <Button type="text" style={{ color: '#fff', fontSize: '24px' }}>
...@@ -228,13 +343,14 @@ const Demonstration = props => { ...@@ -228,13 +343,14 @@ const Demonstration = props => {
selectKey={selectKey} selectKey={selectKey}
onChangeScheme={onChangeScheme} onChangeScheme={onChangeScheme}
handlePage={handlePage} handlePage={handlePage}
industries={props.global?.userInfo?.Industries || []}
/> />
</div> </div>
<div className={styles.row_c}> <div className={styles.row_c}>
<VideoItem ref={videoRef} selectKey={selectKey} setSelectKey={setSelectKey} /> <VideoItem ref={videoRef} selectKey={selectKey} setSelectKey={setSelectKey} />
</div> </div>
<div className={styles.row_r}> <div className={styles.row_r}>
<RightItem listData={productData} handToPage={handToPage} /> <RightItem listData={productData} handToPage={handToPage} handToProduct={handToProduct} />
</div> </div>
</div> </div>
<div className={classNames(styles.center_wrap, 'animate__fadeIn', 'animate__animated', 'duration-500ms')}> <div className={classNames(styles.center_wrap, 'animate__fadeIn', 'animate__animated', 'duration-500ms')}>
...@@ -248,6 +364,7 @@ const Demonstration = props => { ...@@ -248,6 +364,7 @@ const Demonstration = props => {
onLineUrl={onLineUrl} onLineUrl={onLineUrl}
handToPage={handToPage} handToPage={handToPage}
handlePage={handlePage} handlePage={handlePage}
industries={props.global?.userInfo?.Industries || []}
/> />
</div> </div>
</> </>
......
src/pages/bootpage/demonstration/index.less
View file @ 4241b2af
...@@ -15,6 +15,20 @@ ...@@ -15,6 +15,20 @@
align-items: center; align-items: center;
justify-content: 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 { .demonstrationWrap {
height: 100%; height: 100%;
width: 100%; width: 100%;
......
src/pages/bootpage/panda/index.js
View file @ 4241b2af
/* eslint-disable global-require */ /* eslint-disable global-require */
// 云平台引导页 // 云平台引导页
import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react'; 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 { Space, Spin, Progress } from 'antd';
import classNames from 'classnames'; import classNames from 'classnames';
...@@ -15,7 +17,7 @@ import { defaultApp } from '@/micro'; ...@@ -15,7 +17,7 @@ import { defaultApp } from '@/micro';
import usingIcon from '@/assets/bootPage/using-icon.png'; import usingIcon from '@/assets/bootPage/using-icon.png';
import { appService } from '@/api'; import { appService } from '@/api';
import styles from './index.less'; import styles from './index.less';
import Demonstration from '../demonstration';
const industries = [ const industries = [
{ name: '供水', type: '供水', subTitle: 'WATER SUPPLY', color: 'rgb(16,104,239)' }, { name: '供水', type: '供水', subTitle: 'WATER SUPPLY', color: 'rgb(16,104,239)' },
{ name: '农饮水', type: '农饮水', subTitle: 'RURAL POTABLE WATER', color: 'rgb(4,142,101)' }, { name: '农饮水', type: '农饮水', subTitle: 'RURAL POTABLE WATER', color: 'rgb(4,142,101)' },
...@@ -43,6 +45,7 @@ const BootPage = props => { ...@@ -43,6 +45,7 @@ const BootPage = props => {
const [scale, setScale] = useState(1); const [scale, setScale] = useState(1);
const [loginAction, setAction] = useState(() => new LoginAction(props)); const [loginAction, setAction] = useState(() => new LoginAction(props));
const [num] = useState(Industries.filter(item => !!industries.find(d => d.type === item)).length); const [num] = useState(Industries.filter(item => !!industries.find(d => d.type === item)).length);
const [pattern, setPattern] = useState(true); // 是否进入演示模式
// const history = useHistory(); // const history = useHistory();
useDocumentTitle( useDocumentTitle(
{ title: defaultSetting.title, id: '', pageName: '行业切换' }, { title: defaultSetting.title, id: '', pageName: '行业切换' },
...@@ -173,90 +176,106 @@ const BootPage = props => { ...@@ -173,90 +176,106 @@ const BootPage = props => {
}, [props.global.token]); }, [props.global.token]);
return ( return (
<div className={styles.bootPage}> <>
<div className={styles.bootPageMain}> {pattern ? (
<header className={styles.bootPageHead}> <Demonstration setPattern={setPattern} />
{/* eslint-disable-next-line jsx-a11y/alt-text */} ) : (
<img src="https://panda-water.cn/web4/assets/images/bootPage/熊猫图标.png" /> <div className={styles.bootPage}>
<div className={styles.bootPageTitle}> <div className={styles.b_top_l}>
<span className={styles.bootPageZh}>熊猫智慧水务一体化解决方案</span> <div className={styles.b_top_l_btn} onClick={() => setPattern(true)}>
<span className={styles.bootPageEn}>Panda Smart Water Integration Platform & Solution</span> <img src={enterImg} alt="" /> 进入演示模式 <RightOutlined />
</div>
</div> </div>
</header> <div className={styles.bootPageMain}>
<section <header className={styles.bootPageHead}>
className={classNames(styles.bootPageSection, 'animate__fadeInDown', 'animate__animated', 'duration-500ms')} {/* eslint-disable-next-line jsx-a11y/alt-text */}
// style={{ <img src="https://panda-water.cn/web4/assets/images/bootPage/熊猫图标.png" />
// width: `${scale < 1 ? 1280 : Math.ceil(1280 * scale)}px`, <div className={styles.bootPageTitle}>
// }} <span className={styles.bootPageZh}>熊猫智慧水务一体化解决方案</span>
> <span className={styles.bootPageEn}>Panda Smart Water Integration Platform & Solution</span>
<ul </div>
className={classNames(styles.bootPageUl, 'animate__animated')} </header>
style={{ <section
transform: `scale(${scale})`, className={classNames(
left: '300px', styles.bootPageSection,
bottom: '105px', 'animate__fadeInDown',
opacity: 1, 'animate__animated',
width: num === 5 ? 960 : num === 9 || num === 10 ? 1600 : 1280, 'duration-500ms',
}} )}
> // style={{
{industries.map( // width: `${scale < 1 ? 1280 : Math.ceil(1280 * scale)}px`,
item => // }}
props.global && >
Industries.indexOf(item.type) > -1 && ( <ul
<li className={classNames(styles.bootPageUl, 'animate__animated')}
className={styles.bootPageLi} style={{
key={item.type} transform: `scale(${scale})`,
onClick={event => handlePage(event, item.type, loginAction)} left: '300px',
> bottom: '105px',
<div className={styles.bootPageList}> opacity: 1,
<div className={styles.listMain}> width: num === 5 ? 960 : num === 9 || num === 10 ? 1600 : 1280,
<img src={require(`@/assets/bootPage/${item.type}.png`)} alt="" /> }}
<span className={styles.bootPageName}>{item.name}</span> >
<span className={styles.bootPageNameEng}>{item.subTitle}</span> {industries.map(
</div> item =>
</div> props.global &&
{currentType === item.type && ( Industries.indexOf(item.type) > -1 && (
<div className={styles.bootProgress}> <li
<div className={styles.inner} style={{ bottom: percentBottom }}> className={styles.bootPageLi}
<svg key={item.type}
className={styles.wave} onClick={event => handlePage(event, item.type, loginAction)}
xmlns="http://www.w3.org/2000/svg" >
xmlnsXlink="http://www.w3.org/1999/xlink" <div className={styles.bootPageList}>
viewBox="0 24 150 68" <div className={styles.listMain}>
preserveAspectRatio="none" <img src={require(`@/assets/bootPage/${item.type}.png`)} alt="" />
> <span className={styles.bootPageName}>{item.name}</span>
<defs> <span className={styles.bootPageNameEng}>{item.subTitle}</span>
<path </div>
id="gentle-wave"
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
/>
</defs>
<g className={styles.parallax}>
<use xlinkHref="#gentle-wave" x="50" y="0" fill={item.color} opacity="0.1" />
<use xlinkHref="#gentle-wave" x="50" y="-1" fill={item.color} opacity="0.2" />
</g>
</svg>
</div> </div>
</div> {currentType === item.type && (
)} <div className={styles.bootProgress}>
</li> <div className={styles.inner} style={{ bottom: percentBottom }}>
), <svg
)} className={styles.wave}
</ul> xmlns="http://www.w3.org/2000/svg"
</section> xmlnsXlink="http://www.w3.org/1999/xlink"
{/* <Space className={styles.abs}> */} viewBox="0 24 150 68"
{/* <Spin spinning={loadding} size="large" /> */} preserveAspectRatio="none"
{/* </Space> */} >
</div> <defs>
{hasRole ? ( <path
<div className={styles.cloudMonitorBtns}> id="gentle-wave"
<div className="cloud-using-anaylysis-btn" onClick={toOMSUsingAnalysis}> d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
<img src={usingIcon} alt="" title="点击查看平台使用监控" /> />
<span>平台使用分析</span> </defs>
<g className={styles.parallax}>
<use xlinkHref="#gentle-wave" x="50" y="0" fill={item.color} opacity="0.1" />
<use xlinkHref="#gentle-wave" x="50" y="-1" fill={item.color} opacity="0.2" />
</g>
</svg>
</div>
</div>
)}
</li>
),
)}
</ul>
</section>
{/* <Space className={styles.abs}> */}
{/* <Spin spinning={loadding} size="large" /> */}
{/* </Space> */}
</div> </div>
{hasRole ? (
<div className={styles.cloudMonitorBtns}>
<div className="cloud-using-anaylysis-btn" onClick={toOMSUsingAnalysis}>
<img src={usingIcon} alt="" title="点击查看平台使用监控" />
<span>平台使用分析</span>
</div>
</div>
) : null}
</div> </div>
) : null} )}
</div> </>
); );
}; };
const mapStateToProps = state => ({ 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