refactor(map): branchOffice IndexLeft DepartmentResponsibilityPanel 对接
LiuJiaNan
parent
f4427ab0e3
commit
fdeeb1e9a2
|
|
@ -136,3 +136,7 @@ export const getRiskPointHidden = declareRequest(
|
|||
"getRiskPointHiddenLoading",
|
||||
"Post > @/risk/listManager/riskPointHidden",
|
||||
);
|
||||
export const getDepartmentDuty = declareRequest(
|
||||
"getDepartmentDutyLoading",
|
||||
"Post > @/risk/listManager/departmentDuty",
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,84 +1,17 @@
|
|||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||
import { useMount } from "ahooks";
|
||||
import { Spin } from "antd";
|
||||
import * as echarts from "echarts";
|
||||
import { useRef } from "react";
|
||||
import { useContext, useRef } from "react";
|
||||
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
|
||||
import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
|
||||
import { Context } from "~/pages/Container/Map/js/context";
|
||||
import "./index.less";
|
||||
|
||||
const records = [
|
||||
{
|
||||
departmentName: "技术部",
|
||||
riskCoverageRate: 95,
|
||||
hiddenInvestigationRate: 92,
|
||||
hiddenRectificationRate: 90,
|
||||
checkTaskCompletionRate: 94,
|
||||
},
|
||||
{
|
||||
departmentName: "销售部",
|
||||
riskCoverageRate: 88,
|
||||
hiddenInvestigationRate: 85,
|
||||
hiddenRectificationRate: 87,
|
||||
checkTaskCompletionRate: 89,
|
||||
},
|
||||
{
|
||||
departmentName: "市场部",
|
||||
riskCoverageRate: 92,
|
||||
hiddenInvestigationRate: 90,
|
||||
hiddenRectificationRate: 88,
|
||||
checkTaskCompletionRate: 91,
|
||||
},
|
||||
{
|
||||
departmentName: "运营部",
|
||||
riskCoverageRate: 96,
|
||||
hiddenInvestigationRate: 94,
|
||||
hiddenRectificationRate: 95,
|
||||
checkTaskCompletionRate: 93,
|
||||
},
|
||||
{
|
||||
departmentName: "客服部",
|
||||
riskCoverageRate: 85,
|
||||
hiddenInvestigationRate: 83,
|
||||
hiddenRectificationRate: 86,
|
||||
checkTaskCompletionRate: 84,
|
||||
},
|
||||
{
|
||||
departmentName: "财务部",
|
||||
riskCoverageRate: 98,
|
||||
hiddenInvestigationRate: 96,
|
||||
hiddenRectificationRate: 97,
|
||||
checkTaskCompletionRate: 97,
|
||||
},
|
||||
{
|
||||
departmentName: "人事部",
|
||||
riskCoverageRate: 87,
|
||||
hiddenInvestigationRate: 84,
|
||||
hiddenRectificationRate: 85,
|
||||
checkTaskCompletionRate: 86,
|
||||
},
|
||||
{
|
||||
departmentName: "研发部",
|
||||
riskCoverageRate: 94,
|
||||
hiddenInvestigationRate: 91,
|
||||
hiddenRectificationRate: 93,
|
||||
checkTaskCompletionRate: 92,
|
||||
},
|
||||
{
|
||||
departmentName: "质量部",
|
||||
riskCoverageRate: 90,
|
||||
hiddenInvestigationRate: 88,
|
||||
hiddenRectificationRate: 89,
|
||||
checkTaskCompletionRate: 88,
|
||||
},
|
||||
{
|
||||
departmentName: "采购部",
|
||||
riskCoverageRate: 86,
|
||||
hiddenInvestigationRate: 84,
|
||||
hiddenRectificationRate: 83,
|
||||
checkTaskCompletionRate: 85,
|
||||
},
|
||||
];
|
||||
|
||||
/** 负责展示部门职责落实趋势，并管理图表实例生命周期。 */
|
||||
function DepartmentResponsibilityPanel() {
|
||||
function DepartmentResponsibilityPanel(props) {
|
||||
const { portArea, currentBranchOffice } = useContext(Context);
|
||||
|
||||
const chartInstance = useRef(null);
|
||||
const chartRef = useRef(null);
|
||||
|
||||
|
|
@ -168,7 +101,7 @@ function DepartmentResponsibilityPanel() {
|
|||
{
|
||||
name: "风险点检查覆盖率",
|
||||
type: "line",
|
||||
data: data.map(item => item.riskCoverageRate),
|
||||
data: data.map(item => Number(item.riskPointCheckCoverRate.replace("%", ""))),
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
|
|
@ -179,7 +112,7 @@ function DepartmentResponsibilityPanel() {
|
|||
},
|
||||
{
|
||||
name: "隐患清单排查率",
|
||||
data: data.map(item => item.hiddenInvestigationRate),
|
||||
data: data.map(item => Number(item.hiddenListCheckRate.replace("%", ""))),
|
||||
type: "line",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
|
|
@ -190,20 +123,8 @@ function DepartmentResponsibilityPanel() {
|
|||
symbolSize: 6,
|
||||
},
|
||||
{
|
||||
name: "隐崽整改率",
|
||||
data: data.map(item => item.hiddenRectificationRate),
|
||||
type: "line",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
},
|
||||
showSymbol: false,
|
||||
symbol: "circle",
|
||||
symbolSize: 6,
|
||||
},
|
||||
{
|
||||
name: "检查任务完成率",
|
||||
data: data.map(item => item.checkTaskCompletionRate),
|
||||
name: "隐患整改率",
|
||||
data: data.map(item => Number(item.hiddenRectifyRate.replace("%", ""))),
|
||||
type: "line",
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
|
|
@ -220,8 +141,12 @@ function DepartmentResponsibilityPanel() {
|
|||
};
|
||||
|
||||
useMount(() => {
|
||||
initEcharts(chartRef, chartInstance, records);
|
||||
const loadData = async () => {
|
||||
const { data } = await props.getDepartmentDuty({ portArea, corpinfoId: currentBranchOffice });
|
||||
initEcharts(chartRef, chartInstance, data);
|
||||
};
|
||||
|
||||
loadData();
|
||||
return () => {
|
||||
if (chartInstance.current) {
|
||||
chartInstance.current.dispose();
|
||||
|
|
@ -236,13 +161,15 @@ function DepartmentResponsibilityPanel() {
|
|||
className="branch-office-index-left__responsibility"
|
||||
>
|
||||
<div className="branch-office-department-responsibility__content">
|
||||
<Spin spinning={props.biStatistics.getDepartmentDutyLoading}>
|
||||
<div
|
||||
ref={chartRef}
|
||||
className="branch-office-department-responsibility__chart"
|
||||
/>
|
||||
</Spin>
|
||||
</div>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
export default DepartmentResponsibilityPanel;
|
||||
export default Connect([NS_BI_STATISTICS], true)(DepartmentResponsibilityPanel);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||
import { Spin } from "antd";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
|
||||
import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
|
||||
|
|
@ -29,6 +30,7 @@ function RiskHazardPanel(props) {
|
|||
|
||||
return (
|
||||
<Panel title="风险点隐患" className="branch-office-index-left__risk-hazard">
|
||||
<Spin spinning={props.biStatistics.getRiskPointHiddenLoading}>
|
||||
<div className="branch-office-risk-hazard__content">
|
||||
{data.map((item) => {
|
||||
const color = levelColor[item.level];
|
||||
|
|
@ -67,6 +69,7 @@ function RiskHazardPanel(props) {
|
|||
);
|
||||
})}
|
||||
</div>
|
||||
</Spin>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue