消防管控地图标点

src/api/biMark/index.js

@@ -4,3 +4,27 @@ export const getCorpInfoListAll = declareRequest(
   "biFullLoading",
   "Post > @/basicInfo/corpInfo/corpListAll",
 );
+export const getFirePointDeviceList = declareRequest(
+  "biFullLoading",
+  "Post > @/fireCheck/firePoint/deviceList",
+);
+export const getSensorDeviceScreenList = declareRequest(
+  "biFullLoading",
+  "Post > @/iotalarm/sensorDevice/screenList",
+);
+export const getControlRoomScreenList = declareRequest(
+  "biFullLoading",
+  "Post > @/fireResource/controlRoom/screenList",
+);
+export const getRescueTeamScreenList = declareRequest(
+  "biFullLoading",
+  "Post > @/fireResource/rescueTeam/screenList",
+);
+export const getWaterSourceScreenList = declareRequest(
+  "biFullLoading",
+  "Post > @/fireResource/waterSource/screenList",
+);
+export const getPumpRoomScreenList = declareRequest(
+  "biFullLoading",
+  "Post > @/fireResource/pumpRoom/screenList",
+);

src/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList.js

@@ -131,36 +131,48 @@ export const branchOfficeUtilsList = [
         check: false,
         markIcon: pointIco4,
         type: "xfjyd01",
+        request: "getRescueTeamScreenList",
+        titleKey: "teamName",
       },
       {
         label: "消防控制室",
         check: false,
         type: "xfkzs01",
         markIcon: pointIco5,
+        request: "getControlRoomScreenList",
+        titleKey: "roomName",
       },
       {
         label: "消防泵房",
         check: false,
         type: "xfbf01",
         markIcon: pointIco6,
+        request: "getPumpRoomScreenList",
+        titleKey: "pumpRoomName",
       },
       {
         label: "消防水源",
         check: false,
         type: "xfsy01",
         markIcon: pointIco7,
+        request: "getWaterSourceScreenList",
+        titleKey: "waterSourceName",
       },
       {
         label: "消防点位",
         check: false,
         type: "point",
         markIcon: pointIco8,
+        request: "getFirePointDeviceList",
+        titleKey: "firePointName",
       },
       {
         label: "报警设备",
         check: false,
         type: "alarm",
         markIcon: pointIco32,
+        request: "getSensorDeviceScreenList",
+        titleKey: "sensorName",
       },
     ],
   },

src/pages/Container/Map/components/BottomUtils/index.js

@@ -1,3 +1,4 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
 import { produce } from "immer";
 import { AnimatePresence, motion } from "motion/react";
 import { useContext, useEffect, useState } from "react";
@@ -5,6 +6,7 @@ import bg7 from "~/assets/images/map_bi/bottom_utils/bg7.png";
 import bg8 from "~/assets/images/map_bi/bottom_utils/bg8.png";
 import titleImg from "~/assets/images/map_bi/bottom_utils/title.png";
 import titleOnImg from "~/assets/images/map_bi/bottom_utils/title_on.png";
+import { NS_BI_MARK } from "~/enumerate/namespace";
 import { branchOfficeUtilsList } from "~/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList";
 import { Context } from "~/pages/Container/Map/js/context";
 import { portUtilsList } from "./portUtilsList";
@@ -17,7 +19,7 @@ const bottomUtilsAnimation = {
   exit: { y: 100, opacity: 0, transition: { duration: 0.3, ease: "easeIn" } },
 };
 
-// 分公司子项按顺序进入、反向退出，保留原来的波浪式效果。
+// 分公司子项按顺序进入、反向退出，波浪式效果。
 const branchOfficeContainerAnimation = {
   hidden: {
     y: 200,
@@ -36,14 +38,16 @@ const branchOfficeItemAnimation = {
   visible: { y: 0, opacity: 1, transition: { duration: 0.3, ease: "easeOut" } },
 };
 
-function BottomUtils() {
+function BottomUtils(props) {
   const {
+    mapMethods,
     currentPort,
     pureMap,
     currentBranchOffice,
     bottomUtilsCurrentIndex,
     bottomUtilsResetVersion,
     actions,
+    portArea,
   } = useContext(Context);
 
   const bottomUtilsMode = !pureMap && currentPort && !currentBranchOffice
@@ -91,7 +95,6 @@ function BottomUtils() {
     setListMode(bottomUtilsMode);
   }, [bottomUtilsMode]);
 
-  // reducer 递增版本号时重置本组件维护的子项勾选状态，不再依赖全局事件订阅。
   useEffect(() => {
     resetAllCheck();
   }, [bottomUtilsResetVersion]);
@@ -100,10 +103,24 @@ function BottomUtils() {
     actions.setBottomUtilsIndex(bottomUtilsCurrentIndex === index ? -1 : index);
   };
 
-  const optionsItemsClick = (index, index1, item, item1) => {
+  const optionsItemsClick = async (index, index1, item, item1) => {
-    // 子选项点击处理
+    const check = !list[index].list[index1].check;
+    if (check) {
+      if (item1.request) {
+        const { data } = await props[item1.request]({ portArea, corpinfoId: currentBranchOffice });
+        mapMethods.current.addMarkPoint(data, {
+          markType: item1.type,
+          markIcon: item1.markIcon,
+          subLabel: item1.label,
+          titleKey: item1.titleKey,
+        });
+      }
+    }
+    else {
+      mapMethods.current.removeMarkPoint(item1.type);
+    }
     setList(produce((draft) => {
-      draft[index].list[index1].check = !draft[index].list[index1].check;
+      draft[index].list[index1].check = check;
     }));
   };
 
@@ -177,7 +194,13 @@ function BottomUtils() {
               <div className="label">{item.label}</div>
               <AnimatePresence>
                 {(isCurrentActive && item.list?.length > 0) && (
-                  <motion.div className="items" initial="hidden" animate="visible" exit="hidden" variants={branchOfficeContainerAnimation}>
+                  <motion.div
+                    className="items"
+                    initial="hidden"
+                    animate="visible"
+                    exit="hidden"
+                    variants={branchOfficeContainerAnimation}
+                  >
                     {item.list?.map((item1, index1) => {
                       return (
                         <motion.div
@@ -221,4 +244,4 @@ function BottomUtils() {
   );
 }
 
-export default BottomUtils;
+export default Connect([NS_BI_MARK], true)(BottomUtils);

src/pages/Container/Map/components/BottomUtils/portUtilsList.js

@@ -153,6 +153,8 @@ export const portUtilsList = [
         checkImg: ico4On,
         markIcon: pointIco4,
         type: "xfjyd01",
+        request: "getRescueTeamScreenList",
+        titleKey: "teamName",
       },
       {
         label: "消防控制室",
@@ -161,6 +163,8 @@ export const portUtilsList = [
         img: ico5,
         checkImg: ico5On,
         markIcon: pointIco5,
+        request: "getControlRoomScreenList",
+        titleKey: "roomName",
       },
       {
         label: "消防泵房",
@@ -169,6 +173,8 @@ export const portUtilsList = [
         img: ico6,
         checkImg: ico6On,
         markIcon: pointIco6,
+        request: "getPumpRoomScreenList",
+        titleKey: "pumpRoomName",
       },
       {
         label: "消防水源",
@@ -177,6 +183,8 @@ export const portUtilsList = [
         img: ico7,
         checkImg: ico7On,
         markIcon: pointIco7,
+        request: "getWaterSourceScreenList",
+        titleKey: "waterSourceName",
       },
       {
         label: "消防点位",
@@ -185,6 +193,8 @@ export const portUtilsList = [
         img: ico8,
         checkImg: ico8On,
         markIcon: pointIco8,
+        request: "getFirePointDeviceList",
+        titleKey: "firePointName",
       },
       {
         label: "报警设备",
@@ -193,6 +203,8 @@ export const portUtilsList = [
         img: ico28,
         checkImg: ico28On,
         markIcon: pointIco32,
+        request: "getSensorDeviceScreenList",
+        titleKey: "sensorName",
       },
     ],
   },

src/pages/Container/Map/components/Header/index.js

@@ -8,7 +8,7 @@ import topImg2 from "~/assets/images/map_bi/top2.png";
 import { Context } from "~/pages/Container/Map/js/context";
 import "./index.less";
 
-// 标题切换时先让旧标题离开，再让新标题进入，保留原来的上下滑动和淡入淡出效果。
+// 标题切换时先让旧标题离开，再让新标题进入，上下滑动和淡入淡出效果。
 const headerAnimation = {
   initial: { y: -100, opacity: 0 },
   animate: { y: 0, opacity: 1, transition: { duration: 0.5, ease: "easeOut" } },

src/pages/Container/Map/components/RightUtils/index.js

@@ -77,7 +77,7 @@ function RightUtils(props) {
     if (list[index].check !== undefined) {
       check = !list[index].check;
       setList(produce((draft) => {
-        draft[index].check = !draft[index].check;
+        draft[index].check = check;
       }));
     }
 

src/pages/Container/Map/js/mapMethods.js

@@ -143,12 +143,12 @@ export default function useMapMethods(viewerRef, request) {
       const entityCollection = createEntityCollection("branchOfficeEntityCollection");
       entityCollection.entities.add(
         new Cesium.Entity({
-          id: item.corpinfoId,
+          id: item.id,
           name: item.corpName,
           position: getPosition(item.longitude, item.latitude),
           billboard: await getBillboard({ image: branchOfficeEntityBillboardImage, name: item.corpName }),
           monitorItems: {
-            data: { ...item, id: item.corpinfoId, markType: "分公司" },
+            data: { ...item, id: item.id, markType: "分公司" },
           },
         }),
       );
@@ -343,27 +343,30 @@ export default function useMapMethods(viewerRef, request) {
   /**
    * desc: 添加点位
    * @param {Array} pointList
-   * @param options {Object: {markIcon, type, subLabel}} 配置项
+   * @param options {Object: {markIcon, type, subLabel, titleKey}} 配置项
    * @param options.markIcon {String} 扎点图标
    * @param options.markType {String} 扎点类型
    * @param options.subLabel {String} 二级标题（用于弹窗标题）
+   * @param options.titleKey {String} 标题键（用于从item中获取标题）
    */
   const addMarkPoint = async (pointList, options) => {
     if (!options.markType)
       throw new Error("请传入markType（扎点类型）");
     if (!options.markIcon)
       throw new Error("请传入markIcon（扎点图标）");
+    if (!options.titleKey)
+      throw new Error("请传入titleKey（标题键）");
     mitt.emit(changeCoverMaskVisibleMittKey, true);
-    await chunkedLoad(pointList, 10, async (item) => {
+    await chunkedLoad(filterNull(pointList), 10, async (item) => {
       const entityCollection = createEntityCollection(
         `markEntityCollection_${options.markType}`,
       );
-      const name = item.MAP_POINT_NAME || item.AREA_NAME || "";
+      const name = item[options.titleKey] || "";
       entityCollection.entities.add(
         new Cesium.Entity({
           id: createId(),
           name,
-          position: getPosition(item.LONGITUDE, item.LATITUDE),
+          position: getPosition(item.longitude, item.latitude),
           billboard: await getBillboard({ image: options.markIcon, name }),
           monitorItems: {
             data: { ...item, markType: `标记点_${options.markType}`, title: options.subLabel },

src/pages/Container/Map/js/pointClickEvent.js

@@ -39,7 +39,7 @@ export default function usePointClickEvent(viewerRef, mapMethods) {
       mapMethods.removeFourColorDiagram();
       mapMethods.removeWall();
       mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 2000 });
-      mapMethods.addBranchOfficePoint("", {
+      mapMethods.addBranchOfficePoint(undefined, {
         corpName: data.name,
         corpinfoId: data.corpinfoId,
         longitude: data.position.x,
@@ -74,7 +74,7 @@ export default function usePointClickEvent(viewerRef, mapMethods) {
     closePopup();
     mapMethods.removeBranchOfficePoint();
     mapMethods.removeMarkPoint();
-    mapMethods.addBranchOfficePoint("", data);
+    mapMethods.addBranchOfficePoint(undefined, data);
     mapMethods.removeFourColorDiagram();
     mapMethods.removeWall();
     mapMethods.flyTo({ longitude: data.longitude, latitude: data.latitude, height: 2000 });