|
Before Width: | Height: | Size: 450 KiB After Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 353 KiB After Width: | Height: | Size: 80 KiB |
|
Before Width: | Height: | Size: 257 KiB After Width: | Height: | Size: 41 KiB |
|
Before Width: | Height: | Size: 192 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 253 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 188 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 251 KiB After Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 185 KiB After Width: | Height: | Size: 38 KiB |
@ -0,0 +1,112 @@ |
|||
'use strict' |
|||
import React, { Component } from 'react'; |
|||
import { Row, Col, Tag, Tooltip, Icon } from 'antd'; |
|||
import './style.less'; |
|||
export default class AutoRollComponent extends Component { |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
this.scrollElem = null; |
|||
this.stopscroll = false; |
|||
this.preTop = 0; |
|||
this.cloneEle = null; |
|||
this.currentTop = 0; |
|||
this.marqueesHeight = 0; |
|||
this.interval = null; |
|||
this.state = { |
|||
showContent: false, |
|||
dataObj: {} |
|||
} |
|||
} |
|||
|
|||
marque = (height) => { |
|||
try { |
|||
this.scrollElem = document.getElementById(this.props.divId); |
|||
this.marqueesHeight = height; |
|||
if (this.scrollElem) { |
|||
this.scrollElem.style.height = this.marqueesHeight; |
|||
this.scrollElem.style.overflow = 'hidden'; |
|||
} |
|||
|
|||
if (!this.props.closeroll) { |
|||
if (this.props.canScroll) { |
|||
this.cloneEle = document.getElementById(this.props.divId); |
|||
this.scrollElem.appendChild(this.cloneEle.cloneNode(true)); |
|||
this.repeat() |
|||
} |
|||
} |
|||
// let length = this.props.data.length;
|
|||
// if (length > 5) {
|
|||
// this.cloneEle = document.getElementById(this.props.divId);
|
|||
// this.scrollElem.appendChild(this.cloneEle.cloneNode(true));
|
|||
// this.repeat();
|
|||
// }
|
|||
} catch (e) { console.log(e) } |
|||
} |
|||
|
|||
|
|||
repeat = () => { |
|||
this.scrollElem.scrollTop = 0; |
|||
|
|||
this.interval = setInterval(() => { |
|||
if (this.stopscroll) return; |
|||
this.currentTop = this.currentTop + 1; |
|||
this.preTop = this.scrollElem.scrollTop; |
|||
this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1; |
|||
// console.log(`this.scrollElem.scrollTop:${this.scrollElem.scrollTop} === this.preTop:${this.preTop}`);
|
|||
if (this.preTop === this.scrollElem.scrollTop) { |
|||
this.scrollElem.scrollTop = this.marqueesHeight; |
|||
this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1; |
|||
} |
|||
}, 50); |
|||
} |
|||
|
|||
|
|||
componentWillUnmount() { |
|||
clearInterval(this.interval); |
|||
} |
|||
|
|||
componentDidMount() { |
|||
this.marque(10); |
|||
} |
|||
|
|||
onMouseOver = () => { |
|||
this.stopscroll = true; |
|||
} |
|||
|
|||
onMouseOut = () => { |
|||
this.stopscroll = false; |
|||
} |
|||
|
|||
handelShowContent = (q) => { |
|||
this.setState({ dataObj: q, showContent: true }) |
|||
} |
|||
|
|||
close = () => { |
|||
this.stopscroll = false; |
|||
this.setState({ showContent: false, begin: 0, end: 100, dataObj: {} }) |
|||
} |
|||
|
|||
|
|||
render() { |
|||
const { dataObj } = this.state; |
|||
const { changeStyleCol, heads, spans, data, showWord, divId, divHeight, content, color, type, titleLeft, canScroll } = this.props; |
|||
return ( |
|||
<div style={{ textAlign: 'left' }}> |
|||
{heads ? |
|||
<Row className={'bg-row'} style={{ lineHeight: '40px', height: 40, fontSize: 16, wordBreak: 'keep-all', whiteSpace: 'nowrap', textAlign: titleLeft ? 'left' : 'center', paddingLeft: titleLeft ? 5 : 0 }}> |
|||
{heads.map((c, index) => { |
|||
return <Col style={{ color: color ? color : '#fff', paddingLeft: titleLeft ? 10 : 'auto' }} span={spans[index]} key={index}>{c}</Col> |
|||
}) |
|||
} |
|||
</Row> |
|||
: ''} |
|||
<div id={divId} className={'hidden-scroll-bar-y'} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}> |
|||
<div> |
|||
{content ? content : ''} |
|||
</div> |
|||
</div> |
|||
</div > |
|||
) |
|||
} |
|||
} |
|||
@ -0,0 +1,76 @@ |
|||
.alarm-title-b{ |
|||
|
|||
font-size:15px; |
|||
font-family:PingFangSC-Regular,PingFang SC; |
|||
// font-weight:400; |
|||
color:rgba(255,255,255,1); |
|||
|
|||
// line-height:25px; |
|||
} |
|||
|
|||
.alarm-title-s{ |
|||
|
|||
font-size:14px; |
|||
font-family:PingFangSC-Regular,PingFang SC; |
|||
// font-weight:400; |
|||
color:rgba(175,196,215,1); |
|||
margin-right: 20px; |
|||
// line-height:22px; |
|||
} |
|||
|
|||
.list-first{ |
|||
width: 22px; |
|||
height: 22px; |
|||
background-size: cover; |
|||
display: inline-block; |
|||
} |
|||
.autovideo-modal .ant-modal, .autoimage-modal .ant-modal { |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
-webkit-transform: translateY(-50%); |
|||
} |
|||
.autovideo-modal .ant-modal, .autovideo-modal .ant-modal-body { |
|||
height: 450px; |
|||
} |
|||
.autovideo-modal .ant-modal-footer, .autoimage-modal .ant-modal-footer { |
|||
display: none; |
|||
} |
|||
.autovideo-modal .ant-modal-close, .autoimage-modal .ant-modal-close { |
|||
top: -10px; |
|||
right: -10px; |
|||
} |
|||
.autoimage-modal .ant-modal-body img { |
|||
width: 100%; |
|||
height: auto; |
|||
} |
|||
.punish-ybj { |
|||
background: url('/assets/images/ui/ybj.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
padding: 5px; |
|||
text-align: center; |
|||
} |
|||
.punish-dcl { |
|||
background: url('/assets/images/ui/dcl.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
padding: 5px; |
|||
text-align: center; |
|||
} |
|||
.bg-row { |
|||
background: url('/assets/images/ui/cjx.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.bg-qs { |
|||
margin-top: 15px; |
|||
background: url('/assets/images/ui/jxqs.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.margin-left-5 { |
|||
margin-left: 5px; |
|||
} |
|||
|
|||
.hidden-scroll-bar-y{ |
|||
overflow-y: scroll !important; |
|||
scrollbar-width: none !important; |
|||
} |
|||
|
|||
.hidden-scroll-bar-y::-webkit-scrollbar { width: 0 !important } |
|||