297 lines
11 KiB
JavaScript
297 lines
11 KiB
JavaScript
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||
import { useEventListener, useMount } from "ahooks";
|
||
import { useEffect, useRef, useState } from "react";
|
||
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
||
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
|
||
import Title from "~/pages/Container/White/BranchOffice/components/Title";
|
||
import { getAlertColor, getWeatherIcon } from "~/utils";
|
||
import { initEcharts1, initEcharts2, initEcharts3, initEcharts4, initEcharts5 } from "./echarts";
|
||
import "./index.less";
|
||
|
||
const block3_2TabsList = ["年度", "季度"];
|
||
function CenterPanel(props) {
|
||
const [weatherData, setWeatherData] = useState({});
|
||
const [alert, setAlert] = useState([]);
|
||
const [block1_2List, setBlock1_2List] = useState([
|
||
{ department: "技术部", requiredDevices: 150, anchoredDevices: 142 },
|
||
{ department: "销售部", requiredDevices: 80, anchoredDevices: 76 },
|
||
{ department: "市场部", requiredDevices: 60, anchoredDevices: 58 },
|
||
{ department: "运营部", requiredDevices: 120, anchoredDevices: 115 },
|
||
{ department: "客服部", requiredDevices: 90, anchoredDevices: 88 },
|
||
{ department: "财务部", requiredDevices: 30, anchoredDevices: 29 },
|
||
{ department: "人事部", requiredDevices: 25, anchoredDevices: 24 },
|
||
{ department: "研发部", requiredDevices: 200, anchoredDevices: 195 },
|
||
{ department: "质量部", requiredDevices: 45, anchoredDevices: 42 },
|
||
{ department: "采购部", requiredDevices: 35, anchoredDevices: 33 },
|
||
]);
|
||
const [block1_3List, setBlock1_3List] = useState([
|
||
{ title: "股份", count1: 100, count2: 80 },
|
||
{ title: "领域", count1: 50, count2: 40 },
|
||
{ title: "自查", count1: 50, count2: 40 },
|
||
{ title: "专项", count1: 50, count2: 40 },
|
||
]);
|
||
const [block3_2Index, setBlock3_2Index] = useState(0);
|
||
|
||
const chart1Instance = useRef(null);
|
||
const main1Ref = useRef(null);
|
||
const chart2Instance = useRef(null);
|
||
const main2Ref = useRef(null);
|
||
const chart3Instance = useRef(null);
|
||
const main3Ref = useRef(null);
|
||
const chart4Instance = useRef(null);
|
||
const main4Ref = useRef(null);
|
||
const chart5Instance = useRef(null);
|
||
const main5Ref = useRef(null);
|
||
|
||
const getWeatherData = async () => {
|
||
const { result = {} } = await props.getWeather();
|
||
setWeatherData(result.now);
|
||
setAlert(Array.isArray(result.alerts) ? result.alerts : []);
|
||
};
|
||
|
||
useEffect(() => {
|
||
getWeatherData();
|
||
}, []);
|
||
|
||
const initEcharts = () => {
|
||
setTimeout(() => {
|
||
initEcharts1(main1Ref, chart1Instance, {
|
||
majorRiskCount: 1,
|
||
greaterRiskCount: 2,
|
||
generalRiskCount: 3,
|
||
lowRiskCount: 4,
|
||
});
|
||
initEcharts2(main2Ref, chart2Instance, [
|
||
{ name: "技术部1", unitCount: 95, personnelCount: 92 },
|
||
{ name: "技术部2", unitCount: 95, personnelCount: 92 },
|
||
{ name: "技术部3", unitCount: 95, personnelCount: 92 },
|
||
{ name: "技术部4", unitCount: 95, personnelCount: 92 },
|
||
{ name: "技术部5", unitCount: 95, personnelCount: 92 },
|
||
{ name: "技术部6", unitCount: 95, personnelCount: 92 },
|
||
{ name: "技术部7", unitCount: 95, personnelCount: 92 },
|
||
{ name: "技术部8", unitCount: 95, personnelCount: 92 },
|
||
{ name: "技术部9", unitCount: 95, personnelCount: 92 },
|
||
{ name: "技术部0", unitCount: 95, personnelCount: 92 },
|
||
]);
|
||
initEcharts3(main3Ref, chart3Instance, [
|
||
{ name: "火灾隐患", value: "15" },
|
||
{ name: "电气隐患", value: "22" },
|
||
{ name: "机械伤害隐患", value: "18" },
|
||
{ name: "高空坠落隐患", value: "12" },
|
||
{ name: "化学品泄漏隐患", value: "8" },
|
||
{ name: "粉尘爆炸隐患", value: "5" },
|
||
]);
|
||
initEcharts4(main4Ref, chart4Instance, [
|
||
{ value: 44, name: "风险点检查覆盖率" },
|
||
{ value: 43, name: "自查清单检查率" },
|
||
{ value: 41, name: "安全环保检查完成率" },
|
||
{ value: 40, name: "隐患整改完成率" },
|
||
]);
|
||
initEcharts5(main5Ref, chart5Instance, [
|
||
{ department: "安全部", yearOnYear: 15, monthOnMonth: 8 },
|
||
{ department: "生产部", yearOnYear: -12, monthOnMonth: 6 },
|
||
{ department: "设备部", yearOnYear: 10, monthOnMonth: 5 },
|
||
{ department: "技术部", yearOnYear: 8, monthOnMonth: 3 },
|
||
{ department: "质检部", yearOnYear: 6, monthOnMonth: 4 },
|
||
{ department: "物流部", yearOnYear: 5, monthOnMonth: 2 },
|
||
{ department: "财务部", yearOnYear: 4, monthOnMonth: 1 },
|
||
{ department: "人力资源部", yearOnYear: 3, monthOnMonth: 1 },
|
||
{ department: "生产计划部", yearOnYear: 2, monthOnMonth: 1 },
|
||
{ department: "质量部", yearOnYear: 1, monthOnMonth: 1 },
|
||
{ department: "设备管理部", yearOnYear: 1, monthOnMonth: 1 },
|
||
{ department: "设备管理部", yearOnYear: 1, monthOnMonth: 1 },
|
||
]);
|
||
}, 0);
|
||
};
|
||
|
||
useEventListener("resize", () => {
|
||
setTimeout(() => {
|
||
if (chart1Instance.current) {
|
||
chart1Instance.current.dispose();
|
||
}
|
||
if (chart2Instance.current) {
|
||
chart2Instance.current.dispose();
|
||
}
|
||
if (chart3Instance.current) {
|
||
chart3Instance.current.dispose();
|
||
}
|
||
if (chart4Instance.current) {
|
||
chart4Instance.current.dispose();
|
||
}
|
||
if (chart5Instance.current) {
|
||
chart5Instance.current.dispose();
|
||
}
|
||
initEcharts();
|
||
}, 0);
|
||
});
|
||
|
||
useMount(() => {
|
||
initEcharts();
|
||
|
||
return () => {
|
||
if (chart1Instance.current) {
|
||
chart1Instance.current.dispose();
|
||
chart1Instance.current = null;
|
||
}
|
||
if (chart2Instance.current) {
|
||
chart2Instance.current.dispose();
|
||
chart2Instance.current = null;
|
||
}
|
||
if (chart3Instance.current) {
|
||
chart3Instance.current.dispose();
|
||
chart3Instance.current = null;
|
||
}
|
||
if (chart4Instance.current) {
|
||
chart4Instance.current.dispose();
|
||
chart4Instance.current = null;
|
||
}
|
||
if (chart5Instance.current) {
|
||
chart5Instance.current.dispose();
|
||
chart5Instance.current = null;
|
||
}
|
||
};
|
||
});
|
||
|
||
const block3_2OptionsClick = (index) => {
|
||
if (index === block3_2Index)
|
||
return;
|
||
setBlock3_2Index(index);
|
||
};
|
||
|
||
return (
|
||
<div className="white_branch_office_center_container">
|
||
<div className="block1">
|
||
<Title title="企业安全状态信息" />
|
||
<div className="container">
|
||
<div>
|
||
<div className="block1_1">
|
||
<div ref={main1Ref} style={{ width: "100%", height: "200px" }} />
|
||
</div>
|
||
<div className="block1_2">
|
||
<div className="alert">
|
||
<div className="scroll">
|
||
<SeamlessScroll list={alert} step={0.5} limitScrollNum={2} singleHeight={22}>
|
||
{
|
||
alert.map((item, index) => (
|
||
<div className="item" key={index}>
|
||
<div className="title" style={{ color: getAlertColor(item.level) === "#fff" ? "#2E75C6" : getAlertColor(item.level) }}>{item.title}</div>
|
||
</div>
|
||
))
|
||
}
|
||
</SeamlessScroll>
|
||
</div>
|
||
</div>
|
||
<div className="weather">
|
||
<div className="icon">
|
||
<div className="img">
|
||
<img src={getWeatherIcon(weatherData.text)} alt="" />
|
||
</div>
|
||
<div className="text">{weatherData.text || "暂无"}</div>
|
||
</div>
|
||
<div className="items">
|
||
<div className="item">
|
||
<div className="info">
|
||
<div className="label">温度：</div>
|
||
<div className="value">{weatherData?.temp ? `${weatherData?.temp}℃` : "--"}</div>
|
||
</div>
|
||
</div>
|
||
<div className="item">
|
||
<div className="info">
|
||
<div className="label">风速：</div>
|
||
<div className="value">{weatherData.wind_class || "--"}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="table">
|
||
<div className="tr">
|
||
<div className="td">部门名称</div>
|
||
<div className="td">需锚定设备数</div>
|
||
<div className="td">已锚定设备数</div>
|
||
</div>
|
||
<div className="scroll">
|
||
<SeamlessScroll list={block1_2List} step={0.5}>
|
||
{block1_2List.map((item, index) => (
|
||
<div key={index} className="tr">
|
||
<div className="td">{item.department}</div>
|
||
<div className="td">{item.requiredDevices}</div>
|
||
<div className="td">{item.anchoredDevices}</div>
|
||
</div>
|
||
))}
|
||
</SeamlessScroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="block1_3">
|
||
<div className="items">
|
||
{
|
||
block1_3List.map((item, index) => (
|
||
<div key={index} className="item">
|
||
<div className="title">{item.title}</div>
|
||
<div className="info">
|
||
<div>
|
||
<div className="label">发现数</div>
|
||
<div className="value" style={{ color: "#2D8EF3" }}>{item.count1}</div>
|
||
</div>
|
||
<div>
|
||
<div className="label">整改数</div>
|
||
<div className="value" style={{ color: "#F78F00" }}>{item.count1}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="block2">
|
||
<div className="block2_1">
|
||
<Title title="发现整改验收情况" />
|
||
<div className="container">
|
||
<div ref={main2Ref} style={{ width: "100%", height: "225px" }} />
|
||
</div>
|
||
</div>
|
||
<div className="block2_2">
|
||
<Title title="隐患类型统计" />
|
||
<div className="container">
|
||
<div ref={main3Ref} style={{ width: "100%", height: "225px" }} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="block3">
|
||
<div className="block3_1">
|
||
<Title title="隐患排查治理信息" />
|
||
<div className="container">
|
||
<div ref={main4Ref} style={{ width: "100%", height: "225px" }} />
|
||
</div>
|
||
</div>
|
||
<div className="block3_2">
|
||
<Title
|
||
title="隐患治理的环比与同比情况"
|
||
extra={(
|
||
<div className="tabs">
|
||
{block3_2TabsList.map((item, index) => (
|
||
<div
|
||
key={index}
|
||
className={`tab ${index === block3_2Index ? "active" : ""}`}
|
||
onClick={() => block3_2OptionsClick(index)}
|
||
>
|
||
{item}
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
/>
|
||
<div className="container">
|
||
<div ref={main5Ref} style={{ width: "100%", height: "225px" }} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default Connect([NS_BI_STATISTICS], true)(CenterPanel);
|