|
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 } |
||||