137 lines
4.3 KiB
TypeScript
137 lines
4.3 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import * as echarts from "echarts";
|
|
import "./pv.less";
|
|
import { SnippetsTwoTone } from "@ant-design/icons";
|
|
import { inject, observer } from "mobx-react";
|
|
import { Store } from "antd/es/form/interface";
|
|
import PvTable from "./pvTable";
|
|
import PoverDetail from "../poverDetail";
|
|
const PoverPage = (props: Store) => {
|
|
const { usrStore } = props;
|
|
const [poverData, setPover] = useState<any>();
|
|
const initChart = (id: string, count: number, total: number) => {
|
|
var myChart = echarts.init(document.getElementById(id));
|
|
var option = {
|
|
title: {
|
|
text: "10%",
|
|
left: "center",
|
|
top: "center",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: "18px",
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: ["70%", "100%"],
|
|
center: ["50%", "50%"],
|
|
color: "#000",
|
|
data: [
|
|
{
|
|
value: count,
|
|
itemStyle: { color: "#254e99", borderRadius: 100 },
|
|
emphasis: { scale: false },
|
|
},
|
|
{
|
|
value: total,
|
|
itemStyle: { color: "#f5f5f5" },
|
|
emphasis: { scale: false },
|
|
},
|
|
],
|
|
label: {
|
|
show: false,
|
|
},
|
|
animationDelay: function (idx) {
|
|
return Math.random() * 200;
|
|
},
|
|
},
|
|
],
|
|
};
|
|
option && myChart.setOption(option);
|
|
};
|
|
useEffect(() => {
|
|
usrStore.getPover().then((e) => {
|
|
initChart("pover_jg",e.data.o_type_nums,e.data.total);
|
|
initChart("pover_jgs",e.data.o_type_num,e.data.total);
|
|
initChart("pover1",e.data.a_member,e.data.total);
|
|
initChart("pover2",e.data.p_team,e.data.total);
|
|
setPover(e.data);
|
|
});
|
|
}, [usrStore]);
|
|
|
|
return (
|
|
<div style={{ width: "100%", height: "100%" }}>
|
|
<div className="nav-header">
|
|
<div style={{ textAlign: "center" }}>
|
|
<div style={{ width: "150px", height: "100px" }} id="pover_jgs"></div>
|
|
<span style={{ color: "#fff" }}>机关单位</span>
|
|
</div>
|
|
<div className="pv-head-item">
|
|
<SnippetsTwoTone style={{ fontSize: 30 }} />
|
|
<div>
|
|
<div>{poverData?.militia_meber}人</div>
|
|
<span>基干民兵</span>
|
|
</div>
|
|
</div>
|
|
<div className="pv-head-item">
|
|
<SnippetsTwoTone style={{ fontSize: 30 }} />
|
|
<div>
|
|
<div>{poverData?.easy_meber}人</div>
|
|
<span>普通民兵</span>
|
|
</div>
|
|
</div>
|
|
<div className="pv-head-item">
|
|
<SnippetsTwoTone style={{ fontSize: 30 }} />
|
|
<div>
|
|
<div>{poverData?.vet_meber}人</div>
|
|
<span>退役军人</span>
|
|
</div>
|
|
</div>
|
|
<div className="pv-head-item">
|
|
<SnippetsTwoTone style={{ fontSize: 30 }} />
|
|
<div>
|
|
<div>{poverData?.c_member}人</div>
|
|
<span>社干力量</span>
|
|
</div>
|
|
</div>
|
|
<div className="pv-head-item">
|
|
<SnippetsTwoTone style={{ fontSize: 30 }} />
|
|
<div>
|
|
<div>{poverData?.o_member}人</div>
|
|
<span>三方力量</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="nav-content" >
|
|
<div className="content-left" onClick={(e)=>{
|
|
usrStore.setPoverDe(false)
|
|
}}>
|
|
<div style={{ textAlign: "center" }}>
|
|
<div style={{ width: "100%", height: "100%" }} id="pover_jg"></div>
|
|
<span style={{ color: "#fff" }}>企事业单位</span>
|
|
</div>
|
|
<p></p>
|
|
<div style={{ textAlign: "center" }}>
|
|
<div style={{ width: "100%", height: "100%" }} id="pover1"></div>
|
|
<span style={{ color: "#fff" }}>积极力量</span>
|
|
</div>
|
|
<p></p>
|
|
<div style={{ textAlign: "center" }}>
|
|
<div style={{ width: "100%", height: "100%" }} id="pover2"></div>
|
|
<span style={{ color: "#fff" }}>专业队伍</span>
|
|
</div>
|
|
</div>
|
|
<div className="content-right">
|
|
<p style={{ margin: 0, fontSize: "20px", marginBottom: "10px" }}>
|
|
双流区黄水镇人民武装部基干民兵力量
|
|
</p>
|
|
{usrStore.poverDetail? <PoverDetail />: <PvTable />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default inject("usrStore")(observer(PoverPage));
|