Browse Source

(*)水利建设数据图表增加百分比展示

master
peng.peng 1 year ago
parent
commit
8a01559e22
  1. 3
      super-screen/client/src/sections/water-prevention/components/charts/ring.js
  2. 4
      super-screen/client/src/sections/water-prevention/components/left-bottom.js
  3. 10
      super-screen/client/src/sections/water-prevention/containers/gis.js

3
super-screen/client/src/sections/water-prevention/components/charts/ring.js

@ -93,13 +93,14 @@ function RingChart(props) {
const { height, width } = props; const { height, width } = props;
const options = getOption(); const options = getOption();
const percent_colors = ['#24DDFA', '#267FD3', '#F8C86B',] const percent_colors = ['#24DDFA', '#267FD3', '#F8C86B',]
const total = data?.reduce((p, c) => p + c.value, 0)
const renderList = () => data.map((s, index) => ( const renderList = () => data.map((s, index) => (
<div key={s.name || index} className="type-leagle-item flex-row flex-item-center"> <div key={s.name || index} className="type-leagle-item flex-row flex-item-center">
<div className="flex-row flex-item-center"> <div className="flex-row flex-item-center">
<div className="type-leagle-dot" style={{ background: percent_colors[index] }} /> <div className="type-leagle-dot" style={{ background: percent_colors[index] }} />
<div className="type-leagle-label">{s.name}</div> <div className="type-leagle-label">{s.name}</div>
</div> </div>
<div className="type-leagle-value">{s.value} <span style={{ fontSize: 14, color: percent_colors[index] }}>14%</span></div> <div className="type-leagle-value">{s.value} <span style={{ fontSize: 14, color: percent_colors[index] }}>{Math.round(s.value / total * 100)}%</span></div>
</div> </div>
)); ));

4
super-screen/client/src/sections/water-prevention/components/left-bottom.js

@ -33,9 +33,9 @@ function LeftBottom(props) {
]; ];
const data = [ const data = [
{ name: '泵站站点', value: SHUI_ZHAN.length }, { name: '泵站站点', value: 12 },
{ name: '雨量站点', value: 1 }, { name: '雨量站点', value: 1 },
{ name: '水位站点', value: waterLevelLength } { name: '水位站点', value: 23 }
] ]
return <Box title={"建设数据"} > return <Box title={"建设数据"} >

10
super-screen/client/src/sections/water-prevention/containers/gis.js

@ -135,10 +135,12 @@ function Map(props) {
setTimeout(() => { setTimeout(() => {
if (document.getElementById(`contentid${x.name}`)) { if (document.getElementById(`contentid${x.name}`)) {
render(<div> render(<div>
<div className='gis_exit' onClick={() => { <div className='gis_exit'
map.setCenter([115.922069, 28.554867]) style={{ right: 6, top: 67 }}
map.clearInfoWindow(); onClick={() => {
}} /> map.setCenter([115.922069, 28.554867])
map.clearInfoWindow();
}} />
<div className='gis_item'> <div className='gis_item'>
<span className='gis_title'>泵站名称</span> <span className='gis_title'>泵站名称</span>
<span className='gis_text'>{x.name}</span> <span className='gis_text'>{x.name}</span>

Loading…
Cancel
Save