refactor(map): branchOffice IndexLeft DepartmentResponsibilityPanel 对接

src/api/biStatistics/index.js

@@ -136,3 +136,7 @@ export const getRiskPointHidden = declareRequest(
   "getRiskPointHiddenLoading",
   "Post > @/risk/listManager/riskPointHidden",
 );
+export const getDepartmentDuty = declareRequest(
+  "getDepartmentDutyLoading",
+  "Post > @/risk/listManager/departmentDuty",
+);

src/pages/Container/Map/components/Content/branchOffice/IndexLeft/DepartmentResponsibilityPanel/index.js

@@ -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: "隐崽整改率",
+          name: "隐患整改率",
-          data: data.map(item => item.hiddenRectificationRate),
+          data: data.map(item => Number(item.hiddenRectifyRate.replace("%", ""))),
-          type: "line",
-          smooth: true,
-          lineStyle: {
-            width: 2,
-          },
-          showSymbol: false,
-          symbol: "circle",
-          symbolSize: 6,
-        },
-        {
-          name: "检查任务完成率",
-          data: data.map(item => item.checkTaskCompletionRate),
           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">
-        <div
+        <Spin spinning={props.biStatistics.getDepartmentDutyLoading}>
-          ref={chartRef}
+          <div
-          className="branch-office-department-responsibility__chart"
+            ref={chartRef}
-        />
+            className="branch-office-department-responsibility__chart"
+          />
+        </Spin>
       </div>
     </Panel>
   );
 }
 
-export default DepartmentResponsibilityPanel;
+export default Connect([NS_BI_STATISTICS], true)(DepartmentResponsibilityPanel);

src/pages/Container/Map/components/Content/branchOffice/IndexLeft/RiskHazardPanel/index.js

@@ -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,44 +30,46 @@ function RiskHazardPanel(props) {
 
   return (
     <Panel title="风险点隐患" className="branch-office-index-left__risk-hazard">
-      <div className="branch-office-risk-hazard__content">
+      <Spin spinning={props.biStatistics.getRiskPointHiddenLoading}>
-        {data.map((item) => {
+        <div className="branch-office-risk-hazard__content">
-          const color = levelColor[item.level];
+          {data.map((item) => {
-          return (
+            const color = levelColor[item.level];
-            <div
+            return (
-              className="branch-office-risk-hazard__item"
-              key={item.levelName}
-            >
               <div
-                className="branch-office-risk-hazard__decoration"
+                className="branch-office-risk-hazard__item"
-                style={{ backgroundColor: color }}
+                key={item.levelName}
-              />
-              <div
-                className="branch-office-risk-hazard__title"
-                style={{ color, borderColor: color }}
               >
-                {item.levelName}
+                <div
-              </div>
+                  className="branch-office-risk-hazard__decoration"
-              <div className="branch-office-risk-hazard__info">
+                  style={{ backgroundColor: color }}
-                <div>
+                />
-                  风险点数：
+                <div
-                  {item.riskPointCount}
+                  className="branch-office-risk-hazard__title"
+                  style={{ color, borderColor: color }}
+                >
+                  {item.levelName}
                 </div>
-                <div className="branch-office-risk-hazard__details">
+                <div className="branch-office-risk-hazard__info">
                   <div>
-                    检查覆盖率：
+                    风险点数：
-                    {item.checkCoverRate}
+                    {item.riskPointCount}
                   </div>
-                  <div>
+                  <div className="branch-office-risk-hazard__details">
-                    未覆盖风险点数：
+                    <div>
-                    {item.uncoveredRiskPointCount}
+                      检查覆盖率：
+                      {item.checkCoverRate}
+                    </div>
+                    <div>
+                      未覆盖风险点数：
+                      {item.uncoveredRiskPointCount}
+                    </div>
                   </div>
                 </div>
               </div>
-            </div>
+            );
-          );
+          })}
-        })}
+        </div>
-      </div>
+      </Spin>
     </Panel>
   );
 }