Skip to content

C
CivWeb
Commit 7e45f974 authored by 陶晶晶's avatar 陶晶晶
Browse files
Options

fix:爱众集成登录平台优化

parent ae48c568
Hide whitespace changes
Inline Side-by-side
Showing with 168 additions and 169 deletions
src/assets/images/integration/aizhong/AI算法模型.png 0 → 100644
View file @ 7e45f974
This diff was suppressed by a .gitattributes entry.
src/assets/images/integration/aizhong/web组态.png
View file @ 7e45f974
This diff was suppressed by a .gitattributes entry.
src/assets/images/integration/aizhong/二次供水管理系统1.png 0 → 100644
View file @ 7e45f974
This diff was suppressed by a .gitattributes entry.
src/assets/images/integration/aizhong/交付管理.png 0 → 100644
View file @ 7e45f974
This diff was suppressed by a .gitattributes entry.
src/assets/images/integration/aizhong/应用服务.png 0 → 100644
View file @ 7e45f974
This diff was suppressed by a .gitattributes entry.
src/assets/images/integration/aizhong/报表搭建.png
View file @ 7e45f974
This diff was suppressed by a .gitattributes entry.
src/assets/images/integration/aizhong/数据中心.png 0 → 100644
View file @ 7e45f974
This diff was suppressed by a .gitattributes entry.
src/assets/images/integration/aizhong/爱众背景.png
View file @ 7e45f974
This diff was suppressed by a .gitattributes entry.
src/assets/images/integration/aizhong/爱众背景1.png 0 → 100644
View file @ 7e45f974
This diff was suppressed by a .gitattributes entry.
src/assets/images/integration/aizhong/物联接入.png
View file @ 7e45f974
This diff was suppressed by a .gitattributes entry.
src/assets/images/integration/aizhong/物联接入1.png 0 → 100644
View file @ 7e45f974
This diff was suppressed by a .gitattributes entry.
src/assets/images/integration/aizhong/视频接入.png
View file @ 7e45f974
This diff was suppressed by a .gitattributes entry.
src/assets/images/integration/aizhong/运营管理.png
View file @ 7e45f974
This diff was suppressed by a .gitattributes entry.
src/assets/images/integration/aizhong/采集链路.png 0 → 100644
View file @ 7e45f974
This diff was suppressed by a .gitattributes entry.
src/pages/bootpage/template/project/aizhong/config.js
View file @ 7e45f974
......@@ -8,19 +8,32 @@ import Icon10 from "@/assets/images/integration/aizhong/视频接入.png";
import Icon11 from "@/assets/images/integration/aizhong/运营管理.png";
import Icon12 from "@/assets/images/integration/aizhong/web组态.png";
import Icon13 from "@/assets/images/integration/aizhong/报表搭建.png";
import Icon8 from "@/assets/images/integration/aizhong/AI算法模型.png";
import Icon4 from "@/assets/images/integration/aizhong/采集链路.png";
import Icon5 from "@/assets/images/integration/aizhong/数据中心.png";
import Icon6 from "@/assets/images/integration/aizhong/应用服务.png";
import Icon7 from "@/assets/images/integration/aizhong/交付管理.png";
export default {
modalConfig: [
{ name: '二次供水管理系统', bgImg: Icon1, style: { width: 498, height: 251 } },
{ name: '无人化泵站管理系统', bgImg: Icon2, style: { width: 606, height: 251 } },
{ name: '水厂生产运维系统', bgImg: Icon3, style: { width: 498, height: 251 } },
{ name: '二次供水管理系统', bgImg: Icon1, style: { width: 498, height: 251, backgroundImage: `url(${Icon1})` } },
{ name: '无人化泵站管理系统', bgImg: Icon2, style: { width: 606, height: 251, backgroundImage: `url(${Icon2})` } },
{ name: '水厂生产运维系统', bgImg: Icon3, style: { width: 498, height: 251, backgroundImage: `url(${Icon3})` } },
],
BIConfig: [
{ name: '物联接入', icon: Icon9 },
{ name: '视频接入', icon: Icon10 },
{ name: '运维管理', icon: Icon11 },
{ name: 'Web组态', icon: Icon12 },
{ name: '报表搭建', icon: Icon13 },
{ name: '', },
{ name: '物联接入', icon: Icon9, isUsed: true },
{ name: '视频接入', icon: Icon10, isUsed: true },
{ name: '运维管理', icon: Icon11, isUsed: true },
{ name: 'Web组态', icon: Icon12, isUsed: true },
{ name: '搭建平台', icon: Icon13, isUsed: true },
{ name: 'AI算法模型', icon: Icon8, isUsed: false },
],
BIConfig2: [
{ name: '采集链路', icon: Icon4, isUsed: false, style: { width: 242, height: 132, backgroundImage: `url(${Icon4})` } },
{ name: '数据中心', icon: Icon5, isUsed: false, style: { width: 242, height: 132, backgroundImage: `url(${Icon5})` } },
{ name: '', style: { width: 350, height: 132 } },
{ name: '应用服务', icon: Icon6, isUsed: false, style: { width: 242, height: 132, backgroundImage: `url(${Icon6})` } },
{ name: '交付管理', icon: Icon7, isUsed: false, style: { width: 242, height: 132, backgroundImage: `url(${Icon7})` } },
]
}
\ No newline at end of file
src/pages/bootpage/template/project/aizhong/index.js
View file @ 7e45f974
......@@ -29,9 +29,9 @@ import reback from "@/assets/images/integration/aizhong/返回.png";
import pageConfig from "./config";
import moment from 'moment';
const { modalConfig, BIConfig } = pageConfig
const { modalConfig, BIConfig, BIConfig2 } = pageConfig
const boxWidth = 1663;
const boxWidth = 1920;
const boxHeight = 930;
const IntegrationQinzhou = props => {
const integratedConfig = props.integratedConfig?.toObject
......@@ -52,6 +52,8 @@ const IntegrationQinzhou = props => {
const timer3 = useRef(null);
const backRef = useRef(null);
const timeRef = useRef(null);
const cardTipRef = useRef(null);
const cardTipRef2 = useRef(null);
const progressRef2 = useRef(0);
......@@ -129,6 +131,22 @@ const IntegrationQinzhou = props => {
scale: n,
boxHeight: bHeight,
});
const jpHeight = bHeight * n
const bl = (Math.abs(clientHeight - jpHeight)) / 2
if (backRef?.current && n) {
backRef.current.style.top = (bl <= 4) ? '10px' : `-${bl}px`
}
if (timeRef?.current && n) {
timeRef.current.style.top = (bl <= 4) ? '10px' : `-${bl}px`
}
if (cardTipRef?.current && n) {
cardTipRef.current.style.top = (bl <= 4) ? '-11px' : `${bl}px`
}
if (cardTipRef2?.current && n) {
cardTipRef2.current.style.top = (bl <= 4) ? '-11px' : `${bl}px`
}
}
};
......@@ -289,6 +307,7 @@ const IntegrationQinzhou = props => {
clearInterval(timer);
};
}, []);
useEffect(() => {
const handleToggleIndustry = event => {
setJumpLoading(false);
......@@ -341,11 +360,11 @@ const IntegrationQinzhou = props => {
}}
>
{/* 返回 */}
<div ref={backRef} className={styles.reback} style={{ left: '-103px' }} onClick={() => window.history.back()}>
<div ref={backRef} className={styles.reback} onClick={() => window.history.back()}>
<img src={reback} /> 返回上一级
</div>
{/* 当前时间 */}
<div ref={timeRef} style={{ right: '-103px' }} className={styles.integrationQinzhou_exit} >{currentTime}</div>
<div ref={timeRef} className={styles.integrationQinzhou_exit} >{currentTime}</div>
<div style={{ width: '100%', height: 327 }}></div>
<div className={styles.integration_row} type="业务应用">
......@@ -364,24 +383,45 @@ const IntegrationQinzhou = props => {
style={item.style || {}}
onClick={() => { item.name ? onLink(integrationData[item.name], loginAction) : null }}
>
{item.name ? <img src={item.bgImg} /> : null}
{/* {item.name ? <img src={item.bgImg} /> : null} */}
<div className={styles.integration_row_col_text}>{item.name} </div>
</div>
))}
</div>
</div>
</div>
<div className={styles.integrationTips}>
<div className={styles.integrationTips} ref={cardTipRef}>
{
BIConfig.map(item => {
return <div
title={`点击${item.name}跳转`}
className={classNames(styles.integration_card,
item.name ? integrationData[item.name] ? styles.integration_row_col_link : styles.integration_row_col_no : '',
item.isUsed ? item.name ? integrationData[item.name] ? styles.integration_row_col_link : styles.integration_row_col_no : '' : '',
)}
name={item.name}
onClick={() => { item.name ? onLink(integrationData[item.name], loginAction) : null }}
onClick={() => { (item.name && item.isUsed) ? onLink(integrationData[item.name], loginAction) : null }}
>
<img src={item.icon} />
<div className={styles.integration_card_text}>{item.name} </div>
</div>
})
}
</div>
<div className={styles.integrationTips2} ref={cardTipRef2} >
{
BIConfig2.map(item => {
return <div
title={`点击${item.name}跳转`}
className={classNames(styles.integration_card,
item.isUsed ? item.name ? integrationData[item.name] ? styles.integration_row_col_link : styles.integration_row_col_no : '' : '',
)}
style={{ ...item.style }}
name={item.name}
onClick={() => { (item.name && item.isUsed) ? onLink(integrationData[item.name], loginAction) : null }}
>
{/* <img src={item.icon} /> */}
<div className={styles.integration_card_text}>{item.name} </div>
</div>
})
}
......
src/pages/bootpage/template/project/aizhong/index.less
View file @ 7e45f974
......@@ -22,114 +22,6 @@
}
}
.DX1 {
width: 256px;
height: 256px;
background-size: cover;
mix-blend-mode: screen;
position: absolute;
left: calc(30vw + 40px);
bottom: 130px;
}
.DX2 {
width: 256px;
height: 256px;
background-size: cover;
mix-blend-mode: screen;
position: absolute;
left: calc(50vw + 70px);
bottom: 200px;
}
.DX3 {
width: 243px;
height: 449px;
background-size: cover;
mix-blend-mode: screen;
position: absolute;
right: 0px;
bottom: 0px;
}
.DX4 {
width: 243px;
height: 449px;
background-size: cover;
mix-blend-mode: screen;
position: absolute;
left: 0px;
bottom: 0px;
}
.iframeExitIcon {
position: absolute;
top: 0;
left: -45px;
display: flex;
height: 44px;
width: 44px;
background: rgba(28, 94, 180, 0.95);
border-radius: 0 7px 7px 0;
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;
}
}
.iframeExit:hover {
.iframeExitIcon {
left: 0;
}
.iframeBackLeft {
left: -15px;
}
}
.iframeBackLeft {
position: absolute;
top: 0;
left: 0;
width: 14px;
height: 44px;
background: rgba(28, 94, 180, 0.95);
border-radius: 0 7px 7px 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
img {
width: 6px;
height: 11px;
}
}
.iframeExit {
width: 44px;
height: 44px;
position: absolute;
top: 4px;
left: 0;
color: #FFF;
cursor: pointer;
user-select: none;
position: absolute;
z-index: 110;
}
.integrationQinzhou_exit {
position: absolute;
right: 10px;
......@@ -143,7 +35,6 @@
}
.integration_content {
width: 1663px;
display: flex;
flex-direction: column;
align-items: center;
......@@ -155,30 +46,11 @@
}
.integration_row {
width: 1663px;
display: flex;
width: 100%;
overflow: hidden;
margin-bottom: 14px;
padding: 0px 20px;
.integration_row_title {
flex: none;
margin-right: 8px;
position: relative;
writing-mode: vertical-rl;
font-weight: bold;
font-size: 18px;
color: #fff;
line-height: 33px;
text-shadow: 0 0 18px rgba(0, 144, 255, 0.5);
display: flex;
align-items: flex-start;
justify-content: center;
letter-spacing: 3px;
padding-right: 30px;
}
padding: 0px 100px;
.integration_row_list {
flex: 1;
......@@ -188,29 +60,15 @@
}
.showCenter {
position: absolute;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
// top: calc(50vh - 290px);
bottom: 185px;
img {
width: 344px;
height: 580px;
}
}
.integrationTips {
display: flex;
position: relative;
justify-content: space-around;
width: 1150px;
width: 100%;
top: -11px;
height: 360px;
height: 225px;
margin-right: 20px;
padding: 0px 370px;
.integration_card {
text-align: center;
......@@ -219,8 +77,23 @@
}
.integration_card_text {
position: absolute;
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 14px;
color: #FFFFFF;
top: 113px;
left: 17px;
}
.integration_card[name='物联接入'] {
top: 17px;
top: 14px;
}
.integration_card[name='AI算法模型'] {
top: 14px;
left: -7px;
}
.integration_card[name='视频接入'] {
......@@ -238,11 +111,75 @@
left: 34px;
}
.integration_card[name='报表搭建'] {
.integration_card[name='搭建平台'] {
top: 67px;
}
}
.integrationTips2 {
display: flex;
position: relative;
justify-content: space-around;
width: 100%;
top: -11px;
height: 205x;
margin-right: 20px;
.integration_card {
text-align: center;
position: relative;
width: 112px;
}
.integration_card_text {
position: absolute;
font-family: Microsoft YaHei;
font-weight: bold;
font-size: 18px;
color: #FFFFFF;
}
.integration_card[name='采集链路'] {
top: -56px;
.integration_card_text {
right: 40px;
top: 27px;
}
}
.integration_card[name='数据中心'] {
left: -62px;
top: 17px;
.integration_card_text {
right: 40px;
top: 27px;
}
}
.integration_card[name='应用服务'] {
right: -59px;
top: 17px;
.integration_card_text {
left: 36px;
top: 27px
}
}
.integration_card[name='交付管理'] {
top: -55px;
left: -7px;
.integration_card_text {
left: 36px;
top: 27px
}
}
}
.integration_row_col {
position: relative;
......@@ -250,12 +187,20 @@
}
.integration_row_col_text {
font-weight: bold;
width: 100%;
height: 55px;
position: absolute;
top: 0px;
display: flex;
align-items: center;
font-family: YouSheBiaoTiHei;
font-weight: 600;
font-size: 20px;
color: #FFFFFF;
transition: all 0.1s;
position: relative;
white-space: nowrap;
// line-height: 46px;
text-shadow: 0px 5px 20px #172DAA;
justify-content: center;
}
......
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