72 lines
2.4 KiB
JavaScript
72 lines
2.4 KiB
JavaScript
|
import { useState } from "react";
|
||
|
|
import CountUp from "react-countup";
|
||
|
|
import icon1 from "~/assets/images/map_bi/content/icon1.png";
|
||
|
|
import icon2 from "~/assets/images/map_bi/content/icon2.png";
|
||
|
|
import icon3 from "~/assets/images/map_bi/content/icon3.png";
|
||
|
|
import icon4 from "~/assets/images/map_bi/content/icon4.png";
|
||
|
|
import icon5 from "~/assets/images/map_bi/content/icon5.png";
|
||
|
|
import icon6 from "~/assets/images/map_bi/content/icon6.png";
|
||
|
|
import img1 from "~/assets/images/map_bi/content/img1.png";
|
||
|
|
import img2 from "~/assets/images/map_bi/content/img2.png";
|
||
|
|
import Title from "~/pages/Container/Map/components/Content/port/Title";
|
||
|
|
import "./index.less";
|
||
|
|
|
||
|
|
function IndexInfo() {
|
||
|
|
const [block1OptionsList] = useState([
|
||
|
|
{ img: icon1, label: "股份公司部门数量", value: 0 },
|
||
|
|
{ img: icon2, label: "分子公司数", value: 0 },
|
||
|
|
{ img: icon3, label: "相关方单位数", value: 0 },
|
||
|
|
]);
|
||
|
|
|
||
|
|
const [block2OptionsList] = useState([
|
||
|
|
{ img: icon4, title: "监管端人员数", value: 0 },
|
||
|
|
{ img: icon5, title: "分子公司人数", value: 0 },
|
||
|
|
{ img: icon6, title: "相关方人员数", value: 0 },
|
||
|
|
]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="index_info_container">
|
||
|
|
<div className="block1">
|
||
|
|
<Title title="企业统计" />
|
||
|
|
<div className="options">
|
||
|
|
{block1OptionsList.map((item, index) => (
|
||
|
|
<div key={index} className="option">
|
||
|
|
<img src={item.img} className="img_top" alt="" />
|
||
|
|
<img
|
||
|
|
className="img_bottom"
|
||
|
|
src={img1}
|
||
|
|
alt=""
|
||
|
|
/>
|
||
|
|
<div className="label">{item.label}</div>
|
||
|
|
<div className="value">
|
||
|
|
<CountUp end={+item.value} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="block2">
|
||
|
|
<Title title="客户数据" />
|
||
|
|
<div className="options">
|
||
|
|
{block2OptionsList.map((item, index) => (
|
||
|
|
<div key={index} className="option">
|
||
|
|
<div className="img" style={{ backgroundImage: `url(${img2})` }}>
|
||
|
|
<img src={item.img} alt="" />
|
||
|
|
</div>
|
||
|
|
<div className="info">
|
||
|
|
<div className="label">{item.title}</div>
|
||
|
|
<div className="value">
|
||
|
|
<CountUp end={+item.value} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default IndexInfo;
|