refactor(map): 将区域area改名为港区portArea以统一命名

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

@@ -46,21 +46,21 @@ function CenterUtils() {
   const { currentPort, currentBranchOffice, pureMap, mapMethods, actions } = useContext(Context);
 
   const list = [
-    { label: "秦皇岛西", area: "2" },
+    { label: "秦皇岛西", portArea: 3 },
-    { label: "秦皇岛港区", area: "" },
+    { label: "秦皇岛港区", portArea: 1 },
-    { label: "秦皇岛东", area: "1" },
+    { label: "秦皇岛东", portArea: 2 },
   ];
-  const [activeIndex, setActiveIndex] = useState(1);
+  const [activePortArea, setActivePortArea] = useState(1);
 
   const isVisible = currentPort === "00003" && !currentBranchOffice && !pureMap;
 
-  const onChangeArea = (index) => {
+  const onChangePortArea = (portArea) => {
-    if (index === activeIndex)
+    if (portArea === activePortArea)
       return;
-    setActiveIndex(index);
+    setActivePortArea(portArea);
-    actions.setArea(list[index].area);
+    actions.setPortArea(portArea);
     mapMethods.current.removeBranchOfficePoint();
-    mapMethods.current.addBranchOfficePoint(list[index].area);
+    mapMethods.current.addBranchOfficePoint(portArea);
     actions.resetBottomUtils();
   };
 
@@ -79,11 +79,11 @@ function CenterUtils() {
                   key={index}
                   className={`option option${index}`}
                   style={{
-                    backgroundImage: `url(${activeIndex === index
+                    backgroundImage: `url(${activePortArea === item.portArea
                       ? [tabLeftOnImg, tabMidOnImg, tabRightOnImg][index]
                       : [tabLeftImg, tabMidImg, tabRightImg][index]})`,
                   }}
-                  onClick={() => onChangeArea(index)}
+                  onClick={() => onChangePortArea(item.portArea)}
                 >
                   {item.label}
                 </div>
@@ -91,7 +91,7 @@ function CenterUtils() {
             </div>
             <div className="statistics">
               <AnimatePresence>
-                {(activeIndex === 0 || activeIndex === 1) && (
+                {[1, 3].includes(activePortArea) && (
                   <motion.div key="west" {...statisticAnimation}>
                     <div className="statistic">
                       <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>西港区</div>
@@ -104,7 +104,7 @@ function CenterUtils() {
                 )}
               </AnimatePresence>
               <AnimatePresence>
-                {(activeIndex === 2 || activeIndex === 1) && (
+                {[1, 2].includes(activePortArea) && (
                   <motion.div key="east" {...statisticAnimation}>
                     <div className="statistic">
                       <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>东港区</div>

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

@@ -20,7 +20,7 @@ import "./index.less";
 const block3OptionsNavList = ["分公司统计", "相关方单位统计"];
 
 function Index() {
-  const { currentPort, area, currentBranchOffice } = useContext(Context);
+  const { currentPort, portArea, currentBranchOffice } = useContext(Context);
 
   const [block1OptionsList, setBlock1OptionsList] = useState([
     { label: "分公司企业数", img: img3, count: 0 },

src/pages/Container/Map/components/Content/port/QiXiang/index.js

@@ -18,7 +18,7 @@ import "./index.less";
 
 const block3OptionsNavList = ["传感器数据列表", "报警信息列表"];
 const QiXiang = () => {
-  const { currentPort, area, currentBranchOffice } = useContext(Context);
+  const { currentPort, portArea, currentBranchOffice } = useContext(Context);
   const [block1OptionsList, setBlock1OptionsList] = useState([
     { title: "风速监测", img: qixiang_icon1, count: "-" },
     { title: "温度监测", img: qixiang_icon2, count: "-" },

src/pages/Container/Map/components/Content/port/WeiXian/index.js

@@ -16,7 +16,7 @@ import { initEcharts1 } from "./echarts";
 import "./index.less";
 
 const WeiXian = () => {
-  const { currentPort, area, currentBranchOffice } = useContext(Context);
+  const { currentPort, portArea, currentBranchOffice } = useContext(Context);
   const [block3List, setBlock3List] = useState([
     { WORK_TYPE: "动火作业", STATUS_NAME: "现场负责人", USER_NAME: "李长健" },
     { WORK_TYPE: "动火作业", STATUS_NAME: "延时监火", USER_NAME: "运行乙班" },

src/pages/Container/Map/components/Content/port/XiaoFang/index.js

@@ -8,7 +8,7 @@ import "./index.less";
 const { Option } = Select;
 
 const XiaoFang = () => {
-  const { currentPort, area, currentBranchOffice } = useContext(Context);
+  const { currentPort, portArea, currentBranchOffice } = useContext(Context);
   const [form] = Form.useForm();
   const [deviceTypeList, setDeviceTypeList] = useState([
     { name: "地下消防栓栓体", bianma: "dxxfsst" },

src/pages/Container/Map/components/Content/port/ZhongDian/index.js

@@ -10,7 +10,7 @@ import { Context } from "~/pages/Container/Map/js/context";
 import "./index.less";
 
 const ZhongDian = () => {
-  const { currentPort, area, currentBranchOffice } = useContext(Context);
+  const { currentPort, portArea, currentBranchOffice } = useContext(Context);
 
   const [block1OptionsList, setBlock1OptionsList] = useState([
     { lable: "视频总数", count: 0 },

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

@@ -16,7 +16,7 @@ const headerAnimation = {
 };
 
 function Header() {
-  const { currentPort, currentBranchOffice, mapMethods, area, headerTitle, actions } = useContext(Context);
+  const { currentPort, currentBranchOffice, mapMethods, portArea, headerTitle, actions } = useContext(Context);
 
   const isPortTitle = headerTitle === "秦港股份安全监管平台";
 
@@ -48,7 +48,7 @@ function Header() {
       mapMethods.current.removeFourColorDiagram();
       mapMethods.current.removeWall();
       // setTimeout(() => {
-      mapMethods.current.addBranchOfficePoint(area);
+      mapMethods.current.addBranchOfficePoint(portArea);
       // }, 2000);
     }
     else if (currentPort) {

src/pages/Container/Map/index.js

@@ -36,7 +36,7 @@ function Map(props) {
     selectBranchOffice: data => dispatch({ type: MAP_ACTION.SELECT_BRANCH_OFFICE, payload: data }),
     selectMark: data => dispatch({ type: MAP_ACTION.SELECT_MARK, payload: data }),
     resetMark: () => dispatch({ type: MAP_ACTION.RESET_MARK }),
-    setArea: area => dispatch({ type: MAP_ACTION.SET_AREA, payload: area }),
+    setPortArea: portArea => dispatch({ type: MAP_ACTION.SET_PORT_AREA, payload: portArea }),
     setBottomUtilsIndex: index => dispatch({ type: MAP_ACTION.SET_BOTTOM_UTILS_INDEX, payload: index }),
     resetBottomUtils: () => dispatch({ type: MAP_ACTION.RESET_BOTTOM_UTILS }),
     resetRightUtils: () => dispatch({ type: MAP_ACTION.RESET_RIGHT_UTILS }),

src/pages/Container/Map/js/context.js

@@ -7,7 +7,7 @@ export const initialMapState = {
   coverMaskVisible: false,
   currentPort: "",
   currentBranchOffice: "",
-  area: "",
+  portArea: "",
   bottomUtilsCurrentIndex: "",
   pureMap: false,
   headerTitle: "秦港股份安全监管平台",
@@ -22,7 +22,7 @@ export const MAP_ACTION = {
   SELECT_BRANCH_OFFICE: "selectBranchOffice",
   SELECT_MARK: "selectMark",
   RESET_MARK: "resetMark",
-  SET_AREA: "setArea",
+  SET_PORT_AREA: "setPortArea",
   SET_BOTTOM_UTILS_INDEX: "setBottomUtilsIndex",
   RESET_BOTTOM_UTILS: "resetBottomUtils",
   RESET_RIGHT_UTILS: "resetRightUtils",
@@ -66,8 +66,8 @@ export function mapReducer(state, action) {
         modalData: {},
       };
     }
-    case MAP_ACTION.SET_AREA:
+    case MAP_ACTION.SET_PORT_AREA:
-      return { ...state, area: action.payload };
+      return { ...state, portArea: action.payload };
     case MAP_ACTION.SET_BOTTOM_UTILS_INDEX:
       return { ...state, bottomUtilsCurrentIndex: action.payload };
     case MAP_ACTION.RESET_BOTTOM_UTILS:

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

@@ -467,7 +467,7 @@ export default function useMapMethods(viewerRef) {
   };
 
   // 添加分公司点
-  const addBranchOfficePoint = async (area = "", pointInfo = null) => {
+  const addBranchOfficePoint = async (portArea = "", pointInfo = null) => {
     mitt.emit(changeCoverMaskVisibleMittKey, true);
     let branchOfficePoint = [];
     if (!pointInfo) {