ruichang-screen/src/page/HomePage/Right/RightUp/index.tsx
2025-07-18 17:43:23 +08:00

73 lines
2.2 KiB
TypeScript

import TitleBox from "../../Component/TitleBox";
import chartA from "./../../../../assets/image/chartA.png";
import chartB from "./../../../../assets/image/chartB.png";
import { useAppSelector } from "../../../../store/hooks";
import { selectYield } from "../../../../store/HomePageSlice";
function RightUp() {
const data = useAppSelector(selectYield);
// console.log("888888888前中后段良率", data);
let before = data?.before || 100;
let middle = data?.middle || 100;
let after = data?.after || 100;
return (
<div className="right_right_up">
<TitleBox title="right_right_up" />
<div className="chart1">
<img
src={chartA}
alt=""
width={"121px"}
height={30 + before + "px"}
style={{ position: "relative", top: "4px" }}
/>
<img src={chartB} alt="" width={"121px"} height={"130px"} />
<span
className="num_percentage"
style={{ top: -61 + before * 0.2 + "px" }}
>
{before}
<span className="small">%</span>
</span>
<span className="title"></span>
</div>
<div className="chart2">
<img
src={chartA}
alt=""
width={"121px"}
height={30 + middle + "px"}
style={{ position: "relative", top: "4px" }}
/>
<img src={chartB} alt="" width={"121px"} height={"130px"} />
<span
className="num_percentage"
style={{ top: -61 + middle * 0.2 + "px" }}
>
{middle}
<span className="small">%</span>
</span>
<span className="title"></span>
</div>
<div className="chart3">
<img
src={chartA}
alt=""
width={"121px"}
height={30 + after + "px"}
style={{ position: "relative", top: "4px" }}
/>
<img src={chartB} alt="" width={"121px"} height={"130px"} />
<span
className="num_percentage"
style={{ top: -61 + after * 0.2 + "px" }}
>
{after}
<span className="small">%</span>
</span>
<span className="title"></span>
</div>
</div>
);
}
export default RightUp;