dengyinhuan
2 years ago
4 changed files with 256 additions and 10 deletions
@ -0,0 +1,139 @@ |
|||
|
|||
import React, { Component } from 'react'; |
|||
import { Row, Col } from 'antd'; |
|||
|
|||
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 = { |
|||
enabledScroll: false |
|||
} |
|||
} |
|||
|
|||
get enabledScroll() { |
|||
let scrollElem = document.getElementById(this.props.divId); |
|||
let fatherElem = scrollElem?.parentNode || null; |
|||
if (scrollElem && fatherElem) { |
|||
return scrollElem.scrollHeight > fatherElem.scrollHeight |
|||
} |
|||
|
|||
return false; |
|||
} |
|||
|
|||
|
|||
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'; |
|||
} |
|||
this.repeat(); |
|||
} catch (e) { console.log(e) } |
|||
} |
|||
|
|||
|
|||
repeat = () => { |
|||
this.scrollElem.scrollTop = 0; |
|||
let offset = 1.5 |
|||
|
|||
this.interval = setInterval(() => { |
|||
if (this.stopscroll) return; |
|||
this.currentTop = this.currentTop + offset; |
|||
this.preTop = this.scrollElem.scrollTop; |
|||
this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset; |
|||
// 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 + offset; |
|||
} |
|||
}, 40); |
|||
} |
|||
|
|||
|
|||
componentWillUnmount() { |
|||
clearInterval(this.interval); |
|||
} |
|||
|
|||
componentWillReceiveProps(nextProps) { |
|||
requestAnimationFrame(() => { |
|||
if (this.enabledScroll) { |
|||
if (!this.state.enabledScroll) { |
|||
this.setState({ enabledScroll: true }, () => { |
|||
this.marque(10) |
|||
}) |
|||
} |
|||
|
|||
} |
|||
}) |
|||
} |
|||
|
|||
componentDidMount() { |
|||
if (this.enabledScroll) { |
|||
this.setState({ enabledScroll: true }, () => { |
|||
this.marque(10) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
onMouseOver = () => { |
|||
this.stopscroll = true; |
|||
} |
|||
|
|||
onMouseOut = () => { |
|||
this.stopscroll = false; |
|||
} |
|||
|
|||
|
|||
render() { |
|||
|
|||
const { changeStyleCol, heads, spans, data, divId, divHeight, content, containerStyle = {} } = this.props; |
|||
|
|||
return ( |
|||
<div style={{ ...containerStyle, textAlign: 'left' }}> |
|||
{ |
|||
heads ? |
|||
<Row style={{ lineHeight: '40px', height: 40 }}> |
|||
{heads.map((c, index) => { |
|||
return <Col span={spans[index]} key={index}>{c}</Col> |
|||
}) |
|||
} |
|||
</Row> : '' |
|||
} |
|||
|
|||
<div id={divId} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}> |
|||
<div> |
|||
{content ? content : ''} |
|||
{this.state.enabledScroll && content ? content : ''} |
|||
{ |
|||
data ? |
|||
data.map((q, idx) => { |
|||
return ( |
|||
<div key={idx}> |
|||
<Row gutter={16} style={{ borderBottom: '0px solid grey' }}> |
|||
{heads.map((c, index) => { |
|||
return <Col span={spans[index]} key={index} style={{ paddingTop: 8, textAlign: 'left', wordBreak: 'break-word', color: `${c === changeStyleCol ? q.changeColor : ''}` }}> |
|||
{index == 1 ? q.data[index] == -1 ? "-" : q.data[index] : index == 2 ? q.data[1] == -1 ? '-' : q.data[index] : q.data[index]}</Col> |
|||
}) |
|||
} |
|||
</Row> |
|||
</div> |
|||
) |
|||
}) : '' |
|||
} |
|||
<div style={{ margin: 16 }}></div> |
|||
</div> |
|||
</div> |
|||
</div > |
|||
) |
|||
} |
|||
} |
|||
@ -1,7 +1,91 @@ |
|||
import React from 'react' |
|||
import './style.less' |
|||
import AutoRollComponent from './AutoRollComponent' |
|||
export default function Rightcenter() { |
|||
const data =[ {name: '莲塘镇', total: 12739}, |
|||
{name: '向塘镇', total: 2445}, |
|||
{name: '蒋巷镇', total: 2035}, |
|||
{name: '幽兰镇', total: 1999}, |
|||
{name: '塘南镇', total: 1915}, |
|||
{name: '武阳镇', total: 1842}, |
|||
{name: '冈上镇', total: 1446}, |
|||
{name: '广福镇', total: 1063}, |
|||
{name: '三江镇', total: 851}, |
|||
{name: '泾口乡', total: 657}, |
|||
{name: '南新镇', total: 640}, |
|||
{name: '八一乡', total: 569}, |
|||
{name: '黄马乡', total: 541}, |
|||
{name: '塔城乡', total: 534}, |
|||
{name: '富山乡', total: 515}, |
|||
{name: '东新乡', total: 513}, |
|||
{name: '银三角', total: 513}, |
|||
{name: '八月湖街道', total: 513},] |
|||
const province = undefined |
|||
const FIRST = "linear-gradient(360deg, rgba(43, 180, 211, 0.1) 0%, rgba(43, 180, 211, 0.4) 100%)" |
|||
const SECOND = "linear-gradient(360deg, rgba(255, 209, 86, 0.1) 0%, rgba(255, 209, 86, 0.4) 100%)" |
|||
const THIRD = "linear-gradient(360deg, rgba(148, 148, 255, 0.1) 0%, rgba(148, 148, 255, 0.4) 100%)" |
|||
const OTHER = "linear-gradient(360deg, rgba(28, 96, 253, 0) 0%, rgba(28, 96, 253, 0.2) 100%)" |
|||
let TOTALS = data?.map(({ name, total }, index) => { |
|||
let max = province ? data.length * 30 + 100 : data.length * 500 + 100 |
|||
return { |
|||
name, |
|||
value: total, |
|||
percent: (total * 100 / max).toFixed(2) + "%" |
|||
} |
|||
}) |
|||
let new_TOTALS = TOTALS && TOTALS.length > 10 ? TOTALS.slice(0, 10) : TOTALS |
|||
function Cell(props) { |
|||
const { name, rank, value, percent, style = {} } = props |
|||
let bg = RNAKS[rank] || OTHER |
|||
console.log(percent,'百分比') |
|||
return <div style={{ |
|||
width: "100%", height: 34, display: "flex", justifyContent: 'center', |
|||
alignItems: "center", marginTop: 7, marginBottom: 7, |
|||
padding: "0 2%", |
|||
...style |
|||
}}> |
|||
<div style={{ |
|||
height: 20, color: "white",whiteSpace:'nowrap', |
|||
fontSize: 10, fontWeight: "bold", display: 'flex', |
|||
alignItems: "center", justifyContent: "center" |
|||
}} > |
|||
{name} |
|||
</div> |
|||
<div style={{ width: "92%", marginLeft: 10 }}> |
|||
{/* <div style={{ width: "100%", height: 18, fontSize: 12, fontWeight: 400, color: "white" }}>{name}</div> */} |
|||
|
|||
<div style={{ display: 'flex', justifyContent: "space-between", alignItems: "center", height: 13 }}> |
|||
<div style={{display:'flex', width:"85%"}}> |
|||
<div style={{ |
|||
width: percent, height: 5, |
|||
background: "linear-gradient(270deg, #1C60FE 0%, rgba(28, 96, 254, 0) 100%)" |
|||
}} /> |
|||
<div style={{width:`calc(100% - ${percent})`,background:'rgba(255,255,255,0.0800)'}}/> |
|||
</div> |
|||
<div style={{ marginLeft: 10, fontSize: 12,color:"#FFFFFF" }}>{value}</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
} |
|||
const renderContent = () => { |
|||
return <div > |
|||
{new_TOTALS?.map(({ name, value, percent }, index) => { |
|||
return <Cell key={index} rank={index} name={name} value={value} percent={percent} /> |
|||
})} |
|||
</div> |
|||
} |
|||
const RNAKS = [FIRST, SECOND, THIRD] |
|||
|
|||
return ( |
|||
<div className='build-right-center'>Rightcenter</div> |
|||
<div className='build-right-center'> |
|||
<div className='build-right-center-top'> |
|||
<img src="/assets/images/quanju/gonglugongcheng.png"></img> |
|||
<div>在线公路工程数量</div> |
|||
<h2>1234,123</h2> |
|||
</div> |
|||
<AutoRollComponent content={renderContent()} |
|||
containerStyle={{ position: "relative", height: 190, }} |
|||
divHeight={"100%"} divId={"chart-overview-deviceList"} /> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
Loading…
Reference in new issue