refactor(map): dataZoom 支持自定义大小、部分接口添加分页参数、branchOffice 首页对接接口

src/api/biStatistics/index.js

@@ -112,3 +112,7 @@ export const getSensorDeviceFireSituation = declareRequest(
   "getSensorDeviceFireSituationLoading",
   "Post > @/iotalarm/sensorDevice/fireSituation",
 );
+export const getFireBrigadeList = declareRequest(
+  "getFireBrigadeListLoading",
+  "Post > @/fireAlarm/fireBrigade/list",
+);

src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/RectificationPanel/index.js

@@ -15,7 +15,7 @@ function RectificationPanel(props) {
     const loadList = async () => {
       const { data = [] } = await props.getHiddenStatisticsByCorp({
         pageIndex: 1,
-        pageSize: 999,
+        pageSize: 9999,
       });
       setList(data);
     };

src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/WeatherPanel/index.js

@@ -24,7 +24,10 @@ function WeatherPanel(props) {
         alertTitle: result.alerts?.[0]?.title || "当前暂无气象预警",
       });
 
-      const { data = [] } = await props.getEventReportListUnfinished();
+      const { data = [] } = await props.getEventReportListUnfinished({
+        pageIndex: 1,
+        pageSize: 9999,
+      });
       setEmergencyList(data);
     };
     loadData();

src/pages/Container/Map/components/Content/IndexInfo/RightPanel/AlarmPanel/index.js

@@ -13,7 +13,10 @@ function AlarmPanel(props) {
   const [list, setList] = useState([]);
   useEffect(() => {
     const loadList = async () => {
-      const { data = [] } = await props.getAlarmRecordScreenIotDeviceAlarmPage();
+      const { data = [] } = await props.getAlarmRecordScreenIotDeviceAlarmPage({
+        pageIndex: 1,
+        pageSize: 9999,
+      });
       setList(data);
     };
 

src/pages/Container/Map/components/Content/IndexInfo/RightPanel/PartnerPanel/index.js

@@ -13,7 +13,10 @@ function PartnerPanel(props) {
   const [list, setList] = useState([]);
   useEffect(() => {
     const loadList = async () => {
-      const { data = [] } = await props.getXgfStatisticsListCorpStatistics();
+      const { data = [] } = await props.getXgfStatisticsListCorpStatistics({
+        pageIndex: 1,
+        pageSize: 9999,
+      });
       setList(data);
     };
 

src/pages/Container/Map/components/Content/branchOffice/FengBi/echarts.js

@@ -26,6 +26,15 @@ export const initEcharts1 = (mainRef, chartInstance, data) => {
       itemHeight: 10,
     },
     dataZoom: [
+      {
+        type: "inside",
+        xAxisIndex: 0,
+        start: 0,
+        end: 50,
+        zoomOnMouseWheel: "shift",
+        moveOnMouseWheel: true,
+        moveOnMouseMove: true,
+      },
       {
         type: "slider",
         height: 6,

src/pages/Container/Map/components/Content/branchOffice/IndexLeft/echarts.js

@@ -24,6 +24,15 @@ export const initEcharts1 = (mainRef, chartInstance, data) => {
       containLabel: true,
     },
     dataZoom: [
+      {
+        type: "inside",
+        xAxisIndex: 0,
+        start: 0,
+        end: 50,
+        zoomOnMouseWheel: "shift",
+        moveOnMouseWheel: true,
+        moveOnMouseMove: true,
+      },
       {
         type: "slider",
         height: 6,

src/pages/Container/Map/components/Content/branchOffice/IndexRight/echarts.js

@@ -36,6 +36,15 @@ export const initEcharts1 = (mainRef, chartInstance, data) => {
       },
     },
     dataZoom: [
+      {
+        type: "inside",
+        xAxisIndex: 0,
+        start: 0,
+        end: 50,
+        zoomOnMouseWheel: "shift",
+        moveOnMouseWheel: true,
+        moveOnMouseMove: true,
+      },
       {
         type: "slider",
         height: 6,

src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js

@@ -1,43 +1,27 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
 import { useMount } from "ahooks";
-import { useRef, useState } from "react";
+import { Spin } from "antd";
+import { useContext, useEffect, useRef, useState } from "react";
 import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
 import bg4 from "~/assets/images/map_bi/content/bg4.png";
 import bg5 from "~/assets/images/map_bi/content/bg5.png";
+import { NS_BI_STATISTICS } from "~/enumerate/namespace";
 import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
+import { Context } from "~/pages/Container/Map/js/context";
 import { initEcharts1 } from "./echarts";
 import "./index.less";
 
-function IndexRight() {
+function IndexRight(props) {
+  const { portArea, currentBranchOffice } = useContext(Context);
+
   const [block1List, setBlock1List] = useState([
     { title: "口门进出统计", label1: "人数", label2: "车数", count1: 123, count2: 123, bgImg: bg4 },
     { title: "进入申请待审批", label1: "人数", label2: "车数", count1: 123, count2: 123, bgImg: bg4 },
     { title: "封闭区域人员情况", label1: "区域数", label2: "人数", count1: 123, count2: 123, bgImg: bg5 },
     { title: "封闭区域作业情况", label1: "区域数", label2: "作业数", count1: 123, count2: 123, bgImg: bg5 },
   ]);
-  const [block3List, setBlock3List] = useState([
+  const [block3List, setBlock3List] = useState([]);
-    { name: "A区", requiredDevices: "入侵检测", anchoredDevices: "2024-01-01 10:00:00", status: "1" },
+  const [block4List, setBlock4List] = useState([]);
-    { name: "B区", requiredDevices: "烟雾报警", anchoredDevices: "2024-01-01 10:05:00", status: "2" },
-    { name: "C区", requiredDevices: "温度异常", anchoredDevices: "2024-01-01 10:10:00", status: "1" },
-    { name: "D区", requiredDevices: "门禁异常", anchoredDevices: "2024-01-01 10:15:00", status: "2" },
-    { name: "E区", requiredDevices: "视频遮挡", anchoredDevices: "2024-01-01 10:20:00", status: "1" },
-    { name: "F区", requiredDevices: "入侵检测", anchoredDevices: "2024-01-01 10:25:00", status: "2" },
-    { name: "G区", requiredDevices: "紧急按钮", anchoredDevices: "2024-01-01 10:30:00", status: "1" },
-    { name: "H区", requiredDevices: "烟雾报警", anchoredDevices: "2024-01-01 10:35:00", status: "2" },
-    { name: "I区", requiredDevices: "温度异常", anchoredDevices: "2024-01-01 10:40:00", status: "1" },
-    { name: "J区", requiredDevices: "门禁异常", anchoredDevices: "2024-01-01 10:45:00", status: "2" },
-  ]);
-  const [block4List, setBlock4List] = useState([
-    { department: "技术部", threeOrMoreWork: 12, dangerousWork: 8, newWork: 5 },
-    { department: "生产部", threeOrMoreWork: 15, dangerousWork: 10, newWork: 3 },
-    { department: "安全部", threeOrMoreWork: 5, dangerousWork: 12, newWork: 2 },
-    { department: "质检部", threeOrMoreWork: 8, dangerousWork: 6, newWork: 4 },
-    { department: "设备部", threeOrMoreWork: 10, dangerousWork: 15, newWork: 7 },
-    { department: "维修部", threeOrMoreWork: 18, dangerousWork: 9, newWork: 6 },
-    { department: "仓储部", threeOrMoreWork: 7, dangerousWork: 5, newWork: 3 },
-    { department: "物流部", threeOrMoreWork: 9, dangerousWork: 4, newWork: 2 },
-    { department: "人事部", threeOrMoreWork: 3, dangerousWork: 2, newWork: 1 },
-    { department: "财务部", threeOrMoreWork: 2, dangerousWork: 1, newWork: 0 },
-  ]);
 
   const chartInstance = useRef(null);
   const main1Ref = useRef(null);
@@ -64,6 +48,57 @@ function IndexRight() {
     };
   });
 
+  const getAlarmRecordScreenIotDeviceAlarmPage = async () => {
+    const { data } = await props.getAlarmRecordScreenIotDeviceAlarmPage({
+      portArea,
+      corpinfoId: currentBranchOffice,
+      pageIndex: 1,
+      pageSize: 9999,
+    });
+    setBlock3List(data);
+  };
+
+  const getBlock4List = async () => {
+    const [{ data: eightWorkData = [] }, { data: keyProjectData = [] }]
+      = await Promise.all([
+        props.getEightWorkInfoScreenDepartmentStatistics({
+          portArea,
+          corpinfoId: currentBranchOffice,
+        }),
+        props.getKeyProjectLargeScreenDepartmentStatistics({
+          portArea,
+          corpinfoId: currentBranchOffice,
+        }),
+      ]);
+    const departmentMap = new Map(
+      keyProjectData.map(item => [
+        item.departmentId,
+        {
+          departmentName: item.departmentName,
+          fourNewHomeworkCount: item.fourNewHomeworkCount,
+          eightWorkCount: 0,
+          morePeopleCount: item.morePeopleCount,
+        },
+      ]),
+    );
+    eightWorkData.forEach((item) => {
+      const department = departmentMap.get(item.departmentId) || {
+        departmentName: item.departmentName,
+        fourNewHomeworkCount: 0,
+        eightWorkCount: 0,
+        morePeopleCount: 0,
+      };
+      department.eightWorkCount = item.workCount || 0;
+      departmentMap.set(item.departmentId, department);
+    });
+    setBlock4List([...departmentMap.values()]);
+  };
+
+  useEffect(() => {
+    getAlarmRecordScreenIotDeviceAlarmPage();
+    getBlock4List();
+  }, []);
+
   return (
     <div className="branch_office_index_right">
       <div className="block1">
@@ -109,19 +144,18 @@ function IndexRight() {
               <div className="td">处置状态</div>
             </div>
             <div className="scroll">
+              <Spin spinning={props.biStatistics.getAlarmRecordScreenIotDeviceAlarmPageLoading}>
                 <SeamlessScroll list={block3List} step={0.5}>
                   {block3List.map((item, index) => (
                     <div key={index} className="tr">
-                    <div className="td">{item.name}</div>
+                      <div className="td">{item.fireRegionName}</div>
-                    <div className="td">{item.requiredDevices}</div>
+                      <div className="td">{item.alarmTypeName}</div>
-                    <div className="td">{item.anchoredDevices}</div>
+                      <div className="td">{item.alarmTime}</div>
-                    <div className="td" style={{ color: item.status === "1" ? "#f18308" : "#60b321" }}>
+                      <div className="td">{{ 10: "报警中", 20: "未处置", 30: "已消警" }[item.status]}</div>
-                      {item.status === "1" && "待处置"}
-                      {item.status === "2" && "已处置"}
-                    </div>
                     </div>
                   ))}
                 </SeamlessScroll>
+              </Spin>
             </div>
           </div>
         </div>
@@ -137,16 +171,18 @@ function IndexRight() {
               <div className="td">四新作业数</div>
             </div>
             <div className="scroll">
+              <Spin spinning={props.biStatistics.getKeyProjectLargeScreenDepartmentStatisticsLoading || props.biStatistics.getEightWorkInfoScreenDepartmentStatisticsLoading}>
                 <SeamlessScroll list={block4List} step={0.5}>
                   {block4List.map((item, index) => (
                     <div key={index} className="tr">
-                    <div className="td">{item.department}</div>
+                      <div className="td">{item.departmentName}</div>
-                    <div className="td">{item.threeOrMoreWork}</div>
+                      <div className="td">{item.morePeopleCount}</div>
-                    <div className="td">{item.dangerousWork}</div>
+                      <div className="td">{item.eightWorkCount}</div>
-                    <div className="td">{item.newWork}</div>
+                      <div className="td">{item.fourNewHomeworkCount}</div>
                     </div>
                   ))}
                 </SeamlessScroll>
+              </Spin>
             </div>
           </div>
         </div>
@@ -155,4 +191,4 @@ function IndexRight() {
   );
 }
 
-export default IndexRight;
+export default Connect([NS_BI_STATISTICS], true)(IndexRight);

src/pages/Container/Map/components/Content/branchOffice/MenJin/echarts.js

@@ -26,6 +26,15 @@ export const initEcharts1 = (mainRef, chartInstance, data) => {
       itemHeight: 10,
     },
     dataZoom: [
+      {
+        type: "inside",
+        xAxisIndex: 0,
+        start: 0,
+        end: 50,
+        zoomOnMouseWheel: "shift",
+        moveOnMouseWheel: true,
+        moveOnMouseMove: true,
+      },
       {
         type: "slider",
         height: 6,

src/pages/Container/Map/components/Content/branchOffice/RenYuan/echarts.js

@@ -57,6 +57,15 @@ export const initEcharts2 = (mainRef, chartInstance, data) => {
       itemHeight: 10,
     },
     dataZoom: [
+      {
+        type: "inside",
+        xAxisIndex: 0,
+        start: 0,
+        end: 50,
+        zoomOnMouseWheel: "shift",
+        moveOnMouseWheel: true,
+        moveOnMouseMove: true,
+      },
       {
         type: "slider",
         height: 6,

src/pages/Container/Map/components/Content/branchOffice/XiaoFang/FireAlarmRecordPanel/index.js

@@ -19,6 +19,8 @@ function FireAlarmRecordPanel(props) {
       const { data = [] } = await props.getAlarmRecordScreenIotDeviceAlarmPage({
         portArea,
         corpinfoId: currentBranchOffice,
+        pageIndex: 1,
+        pageSize: 9999,
       });
       setRecords(data);
     };

src/pages/Container/Map/components/Content/branchOffice/XiaoFang/FireDeviceStatusPanel/index.js

@@ -21,7 +21,6 @@ function FireDeviceStatusPanel(props) {
         portArea,
         corpinfoId: currentBranchOffice,
       });
-      // 接口以 totalCount 返回总量，statusList 中 bianma 用于匹配状态颜色。
       setStatistics({
         totalCount: data.totalCount || 0,
         statusList: data.statusList || [],
@@ -48,7 +47,7 @@ function FireDeviceStatusPanel(props) {
               </div>
             </div>
             <div className="branch-office-fire-device-status__list">
-              {statistics.statusList.map((item) => (
+              {statistics.statusList.map(item => (
                 <div
                   className={`branch-office-fire-device-status__item branch-office-fire-device-status__item--${item.bianma.toLocaleLowerCase()}`}
                   key={item.bianma}

src/pages/Container/Map/components/Content/branchOffice/XiaoFang/FirePumpRoomPanel/index.js

@@ -75,7 +75,7 @@ function FirePumpRoomPanel() {
     <Panel
       title="消防泵房状态"
       className="branch-office-fire__pump-room"
-      extra={
+      extra={(
         <div className="branch-office-fire-pump-room__tabs">
           {tabs.map((item, index) => (
             <div
@@ -87,7 +87,7 @@ function FirePumpRoomPanel() {
             </div>
           ))}
         </div>
-      }
+      )}
     >
       <div className="branch-office-fire-pump-room__content">
         <div className="branch-office-fire-pump-room__table">

src/pages/Container/Map/components/Content/branchOffice/XiaoFang/VolunteerFireTeamPanel/index.js

@@ -1,72 +1,30 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Spin } from "antd";
+import { useContext, useEffect, useState } from "react";
 import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
+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 = [
-  {
-    teamName: "第一志愿消防队",
-    age: 43,
-    leader: "张队长",
-    phone: "13800138001",
-  },
-  {
-    teamName: "第二志愿消防队",
-    age: 55,
-    leader: "李队长",
-    phone: "13800138002",
-  },
-  {
-    teamName: "第三志愿消防队",
-    age: 23,
-    leader: "王队长",
-    phone: "13800138003",
-  },
-  {
-    teamName: "第四志愿消防队",
-    age: 54,
-    leader: "赵队长",
-    phone: "13800138004",
-  },
-  {
-    teamName: "第五志愿消防队",
-    age: 65,
-    leader: "刘队长",
-    phone: "13800138005",
-  },
-  {
-    teamName: "第六志愿消防队",
-    age: 34,
-    leader: "陈队长",
-    phone: "13800138006",
-  },
-  {
-    teamName: "第七志愿消防队",
-    age: 24,
-    leader: "杨队长",
-    phone: "13800138007",
-  },
-  {
-    teamName: "第八志愿消防队",
-    age: 52,
-    leader: "黄队长",
-    phone: "13800138008",
-  },
-  {
-    teamName: "第九志愿消防队",
-    age: 23,
-    leader: "周队长",
-    phone: "13800138009",
-  },
-  {
-    teamName: "第十志愿消防队",
-    age: 35,
-    leader: "吴队长",
-    phone: "13800138010",
-  },
-];
-
 /** 负责展示企业志愿消防队伍本地信息。 */
-function VolunteerFireTeamPanel() {
+function VolunteerFireTeamPanel(props) {
+  const { portArea, currentBranchOffice } = useContext(Context);
+  const [records, setRecords] = useState([]);
+
+  useEffect(() => {
+    const loadRecords = async () => {
+      const { data = [] } = await props.getFireBrigadeList({
+        portArea,
+        corpId: currentBranchOffice,
+        pageIndex: 1,
+        pageSize: 9999,
+      });
+      setRecords(data);
+    };
+    loadRecords();
+  }, []);
+
   return (
     <Panel
       title="企业志愿消防队伍"
@@ -76,24 +34,24 @@ function VolunteerFireTeamPanel() {
         <div className="branch-office-volunteer-fire-team__table">
           <div className="branch-office-volunteer-fire-team__row">
             <div>姓名</div>
-            <div>年龄</div>
             <div>所属部门</div>
             <div>手机号</div>
           </div>
           <div className="branch-office-volunteer-fire-team__body">
+            <Spin spinning={props.biStatistics.getFireBrigadeListLoading}>
               <SeamlessScroll list={records} step={0.5}>
                 {records.map((item, index) => (
                   <div
                     className="branch-office-volunteer-fire-team__row"
                     key={index}
                   >
-                  <div>{item.leader}</div>
+                    <div>{item.name}</div>
-                  <div>{item.age}</div>
+                    <div>{item.org}</div>
-                  <div>{item.teamName}</div>
+                    <div>{item.dutyPhone}</div>
-                  <div>{item.phone}</div>
                   </div>
                 ))}
               </SeamlessScroll>
+            </Spin>
           </div>
         </div>
       </div>
@@ -101,4 +59,4 @@ function VolunteerFireTeamPanel() {
   );
 }
 
-export default VolunteerFireTeamPanel;
+export default Connect([NS_BI_STATISTICS], true)(VolunteerFireTeamPanel);

src/pages/Container/Map/components/Content/branchOffice/XiaoFang/VolunteerFireTeamPanel/index.less

@@ -17,7 +17,7 @@
 
 .branch-office-volunteer-fire-team__row {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
   margin-top: 5px;
   background-color: rgba(17, 51, 112, 0.8);
 }

src/pages/Container/Map/components/Content/branchOffice/ZhongDian/ContractProjectPanel/index.js

@@ -162,6 +162,8 @@ function ContractProjectPanel(props) {
       const { data = [] } = await props.getProjectContractProjectStatistics({
         portArea,
         corpinfoId: currentBranchOffice,
+        pageIndex: 1,
+        pageSize: 9999,
       });
       initEcharts(chartRef, chartInstance, data);
     };

src/pages/Container/Map/components/Content/branchOffice/ZhongDian/MobileMonitoringPanel/index.js

@@ -26,6 +26,8 @@ function MobileMonitoringPanel(props) {
       const { data = [] } = await props.getFixedCameraVideoInfoPage({
         portArea,
         corpinfoId: currentBranchOffice,
+        pageIndex: 1,
+        pageSize: 9999,
       });
       if (data.length) {
         loadPlayUrl(data[Math.floor(randoms(0, data.length - 1))].cameraNumber);
@@ -41,14 +43,16 @@ function MobileMonitoringPanel(props) {
     >
       <Spin
         spinning={
-          props.biStatistics.getFixedCameraVideoInfoPageLoading ||
+          props.biStatistics.getFixedCameraVideoInfoPageLoading
-          props.biStatistics.getFixedCameraPlayUrlLoading
+          || props.biStatistics.getFixedCameraPlayUrlLoading
         }
       >
         <div className="branch-office-mobile-monitoring__content">
-          {playUrl ? (
+          {playUrl
+            ? (
                 <AliPlayer source={playUrl} height="150px" isLive />
-          ) : (
+              )
+            : (
                 <div className="index-info-video-patrol__empty">暂无视频</div>
               )}
         </div>

src/pages/Container/Map/components/Content/port/FengBi/EntryExitTrendPanel/index.js

@@ -42,6 +42,15 @@ function EntryExitTrendPanel() {
         itemHeight: 10,
       },
       dataZoom: [
+        {
+          type: "inside",
+          xAxisIndex: 0,
+          start: 0,
+          end: 50,
+          zoomOnMouseWheel: "shift",
+          moveOnMouseWheel: true,
+          moveOnMouseMove: true,
+        },
         {
           type: "slider",
           height: 6,

src/pages/Container/Map/components/Content/port/Index/PersonnelStatsPanel/index.js

@@ -23,6 +23,8 @@ function PersonnelStatsPanel(props) {
     const { data = [] } = await props.getCorpInfoCorpUserStatisticPage({
       portArea,
       enterpriseType,
+      pageIndex: 1,
+      pageSize: 9999,
     });
     setStatistics(data);
     setIsVisible(true);

src/pages/Container/Map/components/Content/port/MenJin/EntryExitTrendPanel/index.js

@@ -81,6 +81,15 @@ function EntryExitTrendPanel() {
         containLabel: true,
       },
       dataZoom: [
+        {
+          type: "inside",
+          xAxisIndex: 0,
+          start: 0,
+          end: 50,
+          zoomOnMouseWheel: "shift",
+          moveOnMouseWheel: true,
+          moveOnMouseMove: true,
+        },
         {
           type: "slider",
           height: 6,

src/pages/Container/White/BranchOffice/components/CenterPanel/echarts.js

@@ -444,6 +444,15 @@ export const initEcharts2 = (mainRef, chartInstance, data) => {
       },
     },
     dataZoom: [
+      {
+        type: "inside",
+        xAxisIndex: 0,
+        start: 0,
+        end: 50,
+        zoomOnMouseWheel: "shift",
+        moveOnMouseWheel: true,
+        moveOnMouseMove: true,
+      },
       {
         type: "slider",
         height: 6,
@@ -837,6 +846,15 @@ export const initEcharts5 = (mainRef, chartInstance, data) => {
       containLabel: true,
     },
     dataZoom: [
+      {
+        type: "inside",
+        xAxisIndex: 0,
+        start: 0,
+        end: 50,
+        zoomOnMouseWheel: "shift",
+        moveOnMouseWheel: true,
+        moveOnMouseMove: true,
+      },
       {
         type: "slider",
         height: 6,