Skip to content

W
wisdom-components
Commit 16c6a2ff authored by 陈龙's avatar 陈龙
Browse files
Options

feat: 报警滚动条增加prefix参数

parent f38802ff
Hide whitespace changes
Inline Side-by-side
Showing with 172 additions and 160 deletions
packages/base-components/AlarmScrollAssembly/src/demos/index.js
View file @ 16c6a2ff
...@@ -5,5 +5,5 @@ window.globalConfig = { ...@@ -5,5 +5,5 @@ window.globalConfig = {
userInfo: { OID: 1 }, userInfo: { OID: 1 },
}; };
export default () => { export default () => {
return <AlarmScrollAssembly deviceType={'二供泵房,二供机组'} />; // 最小宽度930px return <AlarmScrollAssembly deviceType={'二供泵房,二供机组'} prefix={'报警信息：'} />; // 最小宽度930px
}; };
packages/base-components/AlarmScrollAssembly/src/index.js
View file @ 16c6a2ff
...@@ -95,13 +95,14 @@ const AlarmScrollAssembly = (props) => { ...@@ -95,13 +95,14 @@ const AlarmScrollAssembly = (props) => {
getData(); getData();
}, []); }, []);
return ( return (
<> <div className={styles.alarmScrollAssemblyWrapper}>
{realTimeDataList && realTimeDataList.length ? <> {realTimeDataList && realTimeDataList.length ? <div className={styles.content} style={{display: 'flex'}}>
{ {
props.prefix ? <span>{props.prefix}</span> : '' props.prefix ?
<span style={{...props.style, flex: 'none', marginRight: 10}}>{props.prefix}</span> : ''
} }
<div <div
className={classnames(styles.alarScrollAssembly, (realTimeDataList?.length > 1000 ? styles.moreThan1000 : styles.lessThan1000))} className={classnames(styles.alarmScrollAssembly, (realTimeDataList?.length > 1000 ? styles.moreThan1000 : styles.lessThan1000))}
id={'alarmListDiv'}> id={'alarmListDiv'}>
<Swiper <Swiper
slidesPerView={1} slidesPerView={1}
...@@ -152,8 +153,8 @@ const AlarmScrollAssembly = (props) => { ...@@ -152,8 +153,8 @@ const AlarmScrollAssembly = (props) => {
</Modal> </Modal>
)} )}
</div> </div>
</> : ''} </div> : ''}
</> </div>
); );
}; };
AlarmScrollAssembly.defaultProps = { AlarmScrollAssembly.defaultProps = {
......
packages/base-components/AlarmScrollAssembly/src/index.less
View file @ 16c6a2ff
.alarScrollAssembly { .alarmScrollAssemblyWrapper {
&.moreThan1000 { width: 100%;
:global {
.swiper-container {
width: 950px;
height: 42px;
.swiper-button-prev {
right: 150px;
left: auto !important;
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 12px;
}
.swiper-pagination-fraction {
top: 15px;
right: 24px;
left: auto;
width: 130px;
line-height: 12px;
}
.swiper-wrapper { .content {
width: calc(100% - 140px); display: flex;
} align-items: center;
.swiper-slide { .alarmScrollAssembly {
height: 32px; &.moreThan1000 {
line-height: 32px; :global {
text-align: center; .swiper-container {
width: 950px;
height: 42px;
.swiper-button-prev {
right: 150px;
left: auto !important;
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 12px;
}
.swiper-pagination-fraction {
top: 15px;
right: 24px;
left: auto;
width: 130px;
line-height: 12px;
}
.swiper-wrapper {
width: calc(100% - 140px);
}
.swiper-slide {
height: 32px;
line-height: 32px;
text-align: center;
}
}
} }
} }
}
}
&.lessThan1000 {
:global {
.swiper-container {
width: 950px;
height: 42px;
.swiper-button-prev {
right: 150px;
left: auto !important;
}
.swiper-button-next:after, &.lessThan1000 {
.swiper-button-prev:after { :global {
font-size: 12px; .swiper-container {
} width: 950px;
height: 42px;
.swiper-pagination-fraction {
top: 15px; .swiper-button-prev {
right: 24px; right: 150px;
left: auto; left: auto !important;
width: 130px; }
line-height: 12px;
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 12px;
}
.swiper-pagination-fraction {
top: 15px;
right: 24px;
left: auto;
width: 130px;
line-height: 12px;
}
.swiper-wrapper {
width: calc(100% - 140px);
}
.swiper-slide {
height: 32px;
line-height: 32px;
text-align: center;
}
}
} }
}
.swiper-wrapper { display: flex;
width: calc(100% - 140px); flex-direction: column;
} gap: 8px;
//width: 100%;
min-width: 930px;
height: 42px;
//overflow-y: scroll;
.warningWrapper {
display: flex;
align-items: center;
max-width: 760px;
padding: 4px 12px;
background: #ffeeee;
border: 1px solid #ffceca;
border-radius: 3px;
}
.swiper-slide { .normalWrapper {
height: 32px; display: flex;
line-height: 32px; align-items: center;
text-align: center; max-width: 760px;
} padding: 4px 12px;
background: #fffbeb;
border: 1px solid #ffd9a7;
border-radius: 3px;
} }
}
}
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
min-width: 930px;
height: 42px;
overflow-y: scroll;
.warningWrapper { .warningTag {
display: flex; color: #ffffff;
align-items: center; background: linear-gradient(180deg, #f98b5e 0%, #f44545 100%);
max-width: 760px; border: none !important;
padding: 4px 12px; }
background: #ffeeee;
border: 1px solid #ffceca;
border-radius: 3px;
}
.normalWrapper { .normalTag {
display: flex; color: #ffffff;
align-items: center; background: linear-gradient(180deg, #ffbf11 0%, #ff9c00 100%);
max-width: 760px; border: none !important;
padding: 4px 12px; }
background: #fffbeb;
border: 1px solid #ffd9a7;
border-radius: 3px;
}
.warningTag { .fontSize13 {
color: #ffffff; font-size: 13px;
background: linear-gradient(180deg, #f98b5e 0%, #f44545 100%); }
border: none !important;
}
.normalTag { .time {
color: #ffffff; display: inline-block;
background: linear-gradient(180deg, #ffbf11 0%, #ff9c00 100%); width: 120px;
border: none !important; color: #333333;
} }
.fontSize13 { .location {
font-size: 13px; display: inline-block;
} //flex: 230;
//width: 230px;
//min-width: 100px;
flex: 1;
align-items: center;
margin-left: 14px;
overflow: hidden;
color: #333333;
white-space: nowrap;
text-overflow: ellipsis;
}
.time { .periodWrapper {
display: inline-block; display: flex;
width: 120px; align-items: center;
color: #333333; justify-content: right;
} max-width: 190px;
.period {
display: inline-block;
width: 120px;
margin-left: 10px;
color: #333333;
}
}
.location { .normalContent {
display: inline-block; display: inline-block;
//flex: 230; flex: 2;
//width: 230px; margin-left: 14px;
//min-width: 100px; overflow: hidden;
flex: 1; //width: 290px;
align-items: center; color: #fe7200;
margin-left: 14px; white-space: nowrap;
overflow: hidden; text-overflow: ellipsis;
color: #333333; }
white-space: nowrap;
text-overflow: ellipsis;
}
.periodWrapper { .warningContent {
display: flex; display: inline-block;
align-items: center; flex: 2;
justify-content: right; margin-left: 14px;
max-width: 190px; overflow: hidden;
//width: 290px;
.period { color: #ff2929;
display: inline-block; white-space: nowrap;
width: 120px; text-overflow: ellipsis;
margin-left: 10px; }
color: #333333;
} }
} }
.normalContent {
display: inline-block;
flex: 2;
margin-left: 14px;
overflow: hidden;
//width: 290px;
color: #fe7200;
white-space: nowrap;
text-overflow: ellipsis;
}
.warningContent {
display: inline-block;
flex: 2;
margin-left: 14px;
overflow: hidden;
//width: 290px;
color: #ff2929;
white-space: nowrap;
text-overflow: ellipsis;
}
} }
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