113 lines
2.7 KiB
TypeScript
113 lines
2.7 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Modal } from "antd";
|
|
import "./left.less";
|
|
|
|
import * as echarts from "echarts";
|
|
import Orgin from "./orgin";
|
|
import Pover from "./pover";
|
|
const HomeLeft = () => {
|
|
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
|
const initChart = () => {
|
|
var myChart = echarts.init(document.getElementById("xunlian"));
|
|
var option = {
|
|
xAxis: {
|
|
type: "category",
|
|
data: ["应急抢险", "消防灭火", "水上救援", "民兵训练", "维稳处突"],
|
|
axisLabel: {
|
|
show: true,
|
|
interval: 0,
|
|
rotate: 30,
|
|
},
|
|
},
|
|
grid: {
|
|
top: "10%",
|
|
bottom: "45%",
|
|
right: "5%",
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
splitLine: {
|
|
show: false, // 去除网格线
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
data: [10, 15, 27, 10, 18],
|
|
type: "line",
|
|
smooth: true,
|
|
areaStyle: {
|
|
opacity: 0.1,
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
{
|
|
offset: 0,
|
|
color: "rgb(128, 255, 165)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgb(1, 191, 236)",
|
|
},
|
|
]),
|
|
},
|
|
},
|
|
],
|
|
};
|
|
option && myChart.setOption(option);
|
|
};
|
|
|
|
useEffect(() => {
|
|
initChart();
|
|
}, []);
|
|
|
|
// const openDispatch = () => {
|
|
// 位置移动
|
|
// MapUtl.makerList[0].setPosition([103.55, 30.342]);
|
|
// var m = MapUtl.amap;
|
|
// var newIcon = new m.Icon({
|
|
// image: "//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png", //Icon 的图像
|
|
// size: new m.Size(25, 34), // 图标大小
|
|
// anchor: new m.Pixel(12, 32), // 图标锚点
|
|
// });
|
|
// MapUtl.makerList[0].setIcon(newIcon);
|
|
// };
|
|
|
|
return (
|
|
<div className="left_container">
|
|
<div className="org">
|
|
<div className="org_head">
|
|
<p>组织架构</p>
|
|
</div>
|
|
<Orgin />
|
|
</div>
|
|
<div className="org">
|
|
<div className="org_head">
|
|
<p>武装力量</p>
|
|
</div>
|
|
<Pover />
|
|
</div>
|
|
<div className="org">
|
|
<div className="org_head">
|
|
<p>年度训练</p>
|
|
</div>
|
|
<div style={{ width: "100%", height: "100%" }} id="xunlian"></div>
|
|
</div>
|
|
<Modal
|
|
title="组织架构"
|
|
className="owner_model"
|
|
width={"80%"}
|
|
open={isModalOpen}
|
|
afterClose={() => {}}
|
|
okText="确定"
|
|
cancelText="取消"
|
|
onOk={() => {}}
|
|
onCancel={() => {
|
|
setIsModalOpen(false);
|
|
}}
|
|
>
|
|
<p>cascsa</p>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HomeLeft;
|