You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
3.8 KiB
94 lines
3.8 KiB
import React from 'react'
|
|
import './style.less'
|
|
import AutoRollComponent from './AutoRollComponent'
|
|
export default function Rightcenter({data,sundata}) {
|
|
// 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 = Math.max(...data.map(item=>item.total))
|
|
// console.log(data.map(item=>item.total),'好朋友吗')
|
|
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 = {},cebg } = 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={{
|
|
position:'relative',
|
|
width: percent, height: 5,
|
|
background: cebg || "linear-gradient(270deg, #1C60FE 0%, rgba(28, 96, 254, 0) 100%)"
|
|
}} >{cebg?<span style={{position:'absolute',right:'0',top:'0',backgroundColor:"#FFF",height:"5px",width:"5px",borderRadius:"2.5px"}}/>:""}</div>
|
|
|
|
<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 new_TOTALS?.map(({ name, value, percent }, index) => {
|
|
return <Cell key={index} rank={index} name={name} value={value} percent={percent} cebg={index===0?'linear-gradient(63deg, rgba(16, 39, 75, 1) 0%, rgba(7, 185, 254, 1) 100%)':undefined}/>
|
|
})
|
|
|
|
}
|
|
const RNAKS = [FIRST, SECOND, THIRD]
|
|
|
|
return (
|
|
<div className='build-right-center'>
|
|
<div className='build-right-center-top'>
|
|
<img src="/assets/images/quanju/gonglugongcheng.png"></img>
|
|
<div>在建公路工程数量/个</div>
|
|
<h2>{sundata}</h2>
|
|
</div>
|
|
<AutoRollComponent content={renderContent()}
|
|
containerStyle={{ position: "relative", height: "65%", }}
|
|
divHeight={"100%"} divId={"chart-overview-deviceList"} />
|
|
</div>
|
|
)
|
|
}
|
|
|