72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
import { Modal } from "antd";
|
|
import { Store } from "antd/es/form/interface";
|
|
import * as echarts from "echarts";
|
|
import { inject, observer } from "mobx-react";
|
|
import { useEffect, useState } from "react";
|
|
import KanBan from "./kanban";
|
|
const Wz = (props: Store) => {
|
|
const { homeStore } = props;
|
|
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
|
|
|
const initChart = (data) => {
|
|
var myChart = echarts.init(document.getElementById("wz"));
|
|
var option = {
|
|
legend: {
|
|
top: "5%",
|
|
right: "right",
|
|
textStyle: {
|
|
color: "#fff",
|
|
},
|
|
formatter: function (name) {
|
|
let v;
|
|
data.forEach((item) => {
|
|
if (item.name === name) {
|
|
v = item.value;
|
|
}
|
|
});
|
|
return name + "-" + v;
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
center: ["35%", "40%"],
|
|
name: "Access From",
|
|
type: "pie",
|
|
radius: ["40%", "60%"],
|
|
label: {
|
|
backgroundColor: "#F6F8FC",
|
|
borderColor: "#8C8D8E",
|
|
borderWidth: 0,
|
|
show: true,
|
|
borderRadius: 4,
|
|
},
|
|
data,
|
|
},
|
|
],
|
|
};
|
|
option && myChart.setOption(option);
|
|
};
|
|
useEffect(() => {
|
|
homeStore.getMm().then((res) => {
|
|
initChart(res.data?.record);
|
|
});
|
|
}, [homeStore]);
|
|
return <>
|
|
<div onClick={() => {setIsModalOpen(true)}} style={{ width: "100%", height: "100%" }} id="wz"></div>;
|
|
<Modal
|
|
title="物资看板"
|
|
className="owner_model"
|
|
width={"80%"}
|
|
open={isModalOpen}
|
|
afterClose={() => {}}
|
|
onOk={() => {}}
|
|
footer={null}
|
|
onCancel={() => {
|
|
setIsModalOpen(false);
|
|
}}
|
|
>
|
|
<KanBan />
|
|
</Modal>
|
|
</>
|
|
};
|
|
export default inject("homeStore")(observer(Wz)); |