chore(maps): update banzone display when alarm

.umirc.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from '@umijs/max';
 import proxy from './config/proxy';
-
 const { REACT_APP_ENV = 'dev' } = process.env as {
   REACT_APP_ENV: 'dev' | 'test' | 'prod';
 };
@@ -14,6 +13,7 @@ export default defineConfig({
   locale: {
     default: 'vi-VN',
   },
+  favicons: ['/logo.png'],
   layout: {
     title: '2025 Sản phẩm của Mobifone v1.0',
   },

public/avatar.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679201365371" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1897" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M509.31257004 540.79389452h4.91415801c44.99525866-0.76783723 81.39074114-16.58528313 108.26504222-46.83806846 59.12346278-66.6482671 49.29514673-180.9024399 48.2201749-191.80572705-3.83918618-81.85144307-42.53817965-121.01113989-74.48020676-139.28566479C572.42878628 149.19693275 544.63307997 141.82569571 513.61245812 141.21142578H511.00181181c-17.04598575 0-50.52368662 2.76421361-82.61928101 21.03873851-32.24916171 18.27452489-71.56242513 57.43422101-75.40161058 139.89993473-1.07497185 10.90328787-10.90328787 125.15746067 48.22017491 191.80572704 26.72073376 30.2527846 63.11621625 46.07023049 108.11147491 46.83806846z m-115.32914464-234.80461006c0-0.46070263 0.15356731-0.92140454 0.15356731-1.22853914 5.06772532-110.10785129 83.23355022-121.93254442 116.7112518-121.93254443H512.69105358c41.4632078 0.92140454 111.95066108 17.81382227 116.71125108 121.93254443 0 0.46070263 0 0.92140454 0.15356731 1.22853914 0.15356731 1.07497185 10.90328787 105.50082861-37.93115624 160.47797059-19.34949674 21.80657575-45.14882595 32.55629632-79.08722946 32.86343166h-1.53567446c-33.78483618-0.30713461-59.73773271-11.05685517-78.93366214-32.86343165-48.68087753-54.67000739-38.23829157-159.55656606-38.08472427-160.4779706z" p-id="1898"></path><path d="M827.3507296 730.29611058v-0.46070263c0-1.22853915-0.15356731-2.457079-0.15356731-3.83918618-0.92140454-30.40635263-2.91778164-101.50807511-69.56604874-124.23605539-0.46070263-0.15356731-1.07497185-0.30713461-1.53567375-0.46070264-69.25891341-17.66025497-126.84670245-57.5877883-127.46097237-58.04849021-9.3676134-6.60339979-22.26727838-4.29988808-28.87067744 5.06772532-6.60339979 9.3676134-4.29988808 22.26727838 5.0677253 28.87067743 2.6106463 1.84280907 63.73048619 44.38098873 140.20706862 64.03762079 35.78121256 12.74609694 39.77396603 50.98438852 40.84893787 85.99776458 0 1.38210717 0 2.6106463 0.15356802 3.83918545 0.15356731 13.82106951-0.76783723 35.16694264-3.22491624 47.45233838-24.87792469 14.12820412-122.39324633 62.96264895-270.73938991 62.96264823-147.73187366 0-245.86146522-48.98801213-270.89295721-63.11621625-2.457079-12.28539504-3.53205084-33.63126816-3.22491624-47.45233767 0-1.22853915 0.15356731-2.457079 0.15356802-3.83918545 1.07497185-35.01337533 5.06772532-73.25166689 40.84893786-85.99776457 76.47658314-19.65663206 137.596423-62.34837901 140.20706862-64.03762079 9.3676134-6.60339979 11.67112511-19.50306404 5.06772531-28.87067744-6.60339979-9.3676134-19.50306404-11.67112511-28.87067745-5.06772605-0.61426993 0.46070263-57.89492363 40.38823598-127.46097236 58.04849094-0.61426993 0.15356731-1.07497185 0.30713461-1.53567375 0.46070264-66.6482671 22.88154832-68.64464421 93.9832708-69.56604874 124.2360554 0 1.38210717 0 2.6106463-0.15356731 3.83918617v0.46070191c-0.15356731 7.98550697-0.30713461 48.98801213 7.83193893 69.56604875 1.53567446 3.99275348 4.29988808 7.37123702 7.98550697 9.67474873 4.60702342 3.07134893 115.02200931 73.4052342 299.76363465 73.40523419s295.15661197-70.48745329 299.76363538-73.40523419c3.53205084-2.3035117 6.44983249-5.68199525 7.98550624-9.67474873 7.67837163-20.4244693 7.52480433-61.42697448 7.37123703-69.41248072z" p-id="1899"></path></svg>

src/app.tsx

@@ -1,8 +1,9 @@
+import { LogoutOutlined } from '@ant-design/icons';
 import { history, RunTimeLayoutConfig } from '@umijs/max';
+import { Dropdown } from 'antd';
 import { handleRequestConfig } from '../config/Request';
 import logo from '../public/logo.png';
 import UnAccessPage from './components/403/403Page';
-import Footer from './components/Footer/Footer';
 import { ROUTE_LOGIN } from './constants';
 import { parseJwt } from './utils/jwtTokenUtils';
 import { getToken, removeToken } from './utils/localStorageUtils';
@@ -69,13 +70,40 @@ export const layout: RunTimeLayoutConfig = (initialState) => {
     },
     contentStyle: {
       padding: 0,
+      margin: 0,
+      paddingInline: 0,
+    },
+    avatarProps: {
+      size: 'small',
+      src: '/avatar.svg', // 👈 ở đây dùng icon thay vì src
+      render: (_, dom) => {
+        return (
+          <Dropdown
+            menu={{
+              items: [
+                {
+                  key: 'logout',
+                  icon: <LogoutOutlined />,
+                  label: 'Đăng xuất',
+                  onClick: () => {
+                    removeToken();
+                    history.push(ROUTE_LOGIN);
+                  },
+                },
+              ],
+            }}
+          >
+            {dom}
+          </Dropdown>
+        );
+      },
     },
     layout: 'mix',
     logout: () => {
       removeToken();
       history.push(ROUTE_LOGIN);
     },
-    footerRender: () => <Footer />,
+    // footerRender: () => <Footer />,
     onPageChange: () => {
       if (!initialState.initialState) {
         history.push(ROUTE_LOGIN);
@@ -103,6 +131,12 @@ export const layout: RunTimeLayoutConfig = (initialState) => {
       },
     ],
     unAccessible: <UnAccessPage />,
+    token: {
+      pageContainer: {
+        paddingInlinePageContainerContent: 0,
+        paddingBlockPageContainerContent: 0,
+      },
+    },
   };
 };
 

src/constants/index.ts

@@ -1,6 +1,10 @@
 export const DEFAULT_NAME = 'Umi Max';
 export const TOKEN = 'token';
 export const BASE_URL = 'https://sgw-device.gms.vn';
+export const MAP_TRACKPOINTS_ID = 'ship-trackpoints';
+export const MAP_POLYLINE_BAN = 'ban-polyline';
+export const MAP_POLYGON_BAN = 'ban-polygon';
+
 // Global Constants
 
 // Route Constants
@@ -22,3 +26,5 @@ export const API_GET_GPS = '/api/sgw/gps';
 export const API_GET_FISH = '/api/sgw/fishspecies';
 export const API_UPDATE_FISHING_LOGS = '/api/sgw/fishingLog';
 export const API_SOS = '/api/sgw/sos';
+export const API_PATH_SHIP_TRACK_POINTS = '/api/sgw/trackpoints';
+export const API_GET_ALL_BANZONES = '/api/sgw/banzones';

src/pages/Home/components/BaseMap.tsx

@@ -8,7 +8,7 @@ import {
 import { Feature, Map, View } from 'ol';
 import { Coordinate } from 'ol/coordinate';
 import { createEmpty, extend, Extent, isEmpty } from 'ol/extent';
-import { MultiPolygon, Point, Polygon } from 'ol/geom';
+import { LineString, MultiPolygon, Point, Polygon } from 'ol/geom';
 import BaseLayer from 'ol/layer/Base';
 import VectorLayer from 'ol/layer/Vector';
 import { fromLonLat } from 'ol/proj';
@@ -32,10 +32,18 @@ interface StyleConfig {
   textColor?: string; // màu chữ
   textStrokeColor?: string; // màu viền chữ
   textOffsetY?: number; // độ lệch theo trục Y
+  strokeColor?: string; // màu đường kẻ cho LineString
+  strokeWidth?: number; // độ dày đường kẻ cho LineString
+  fillColor?: string; // màu fill cho Polygon
+  borderColor?: string; // màu viền cho Polygon
+  borderWidth?: number; // độ dày viền cho Polygon
+  minScale?: number; // tỷ lệ nhỏ nhất
+  maxScale?: number; // tỷ lệ lớn nhất
 }
 
 // Interface for feature data
 interface FeatureData {
+  id?: string | number;
   bearing?: number;
   text?: string;
 }
@@ -319,7 +327,6 @@ class MapManager {
 
       // Lưu feature
       this.features.push(feature);
-      this.flyToFeature(feature);
       this.featureLayer?.getSource()?.addFeature(feature);
 
       console.log('Point added successfully:', { coord, data, styleConfig });
@@ -444,6 +451,90 @@ class MapManager {
     }
   }
 
+  // Hàm addLineString đã được sửa đổi
+  addLineString(
+    coords: Coordinate[],
+    data: FeatureData = {},
+    styleConfig: StyleConfig = {},
+  ): Feature | null {
+    try {
+      // Kiểm tra coords là mảng hợp lệ và có ít nhất 2 tọa độ
+      if (
+        !Array.isArray(coords) ||
+        coords.length < 2 ||
+        !coords.every(
+          (coord) =>
+            Array.isArray(coord) &&
+            coord.length === 2 &&
+            typeof coord[0] === 'number' &&
+            typeof coord[1] === 'number',
+        )
+      ) {
+        throw new Error(
+          `Invalid coordinates for LineString: ${JSON.stringify(coords)}`,
+        );
+      }
+
+      // Chuyển đổi tọa độ từ [lon, lat] sang hệ tọa độ của OpenLayers
+      const transformedCoords = coords.map((coord) => fromLonLat(coord));
+      const geometry = new LineString(transformedCoords);
+      const feature = new Feature({
+        geometry,
+        ...data,
+      });
+
+      // Tạo style cho LineString
+      const style = new Style({
+        text: new Text({
+          text: data.text || '',
+          font: styleConfig.font || '16px Arial', // Tăng kích thước font
+          fill: new Fill({ color: styleConfig.textColor || 'black' }), // Đổi màu thành đen để nổi bật
+          stroke: new Stroke({
+            color: styleConfig.textStrokeColor || 'white',
+            width: 2, // Tăng độ rộng viền
+          }),
+          placement: 'line',
+          textAlign: 'center',
+          textBaseline: 'middle', // Đổi thành 'middle' để căn giữa theo chiều dọc
+          offsetY: styleConfig.textOffsetY || -10, // Dịch text lên trên một chút
+        }),
+        stroke: new Stroke({
+          color: styleConfig.strokeColor || 'blue',
+          width: styleConfig.strokeWidth || 5,
+        }),
+      });
+
+      feature.setStyle(style);
+
+      // Thêm feature vào features và featureLayer
+      if (this.featureLayer && this.isInitialized) {
+        this.features.push(feature);
+        this.featureLayer.getSource()?.addFeature(feature);
+        console.log(
+          'LineString added successfully at',
+          new Date().toLocaleTimeString(),
+          ':',
+          { coords, data, styleConfig },
+        );
+        // Đảm bảo bản đồ được render lại
+        this.map?.render();
+        return feature;
+      } else {
+        throw new Error('featureLayer or map is not initialized');
+      }
+    } catch (error: any) {
+      this.errors.push(error.message);
+      this.onError(this.errors);
+      console.error(
+        'Error adding LineString at',
+        new Date().toLocaleTimeString(),
+        ':',
+        error.message,
+      );
+      return null;
+    }
+  }
+
   createPolygonStyle = (
     data: Record<string, any> = {},
     styleConfig: Record<string, any> = {},
@@ -635,7 +726,7 @@ class MapManager {
 
     view.fit(extent, {
       padding: [300, 300, 300, 300],
-      maxZoom: features.length === 1 ? 10 : 12,
+      maxZoom: features.length === 1 ? 8 : 10,
       duration,
     });
 

src/pages/Home/index.tsx

@@ -1,6 +1,21 @@
-import { ROUTE_TRIP } from '@/constants';
+import {
-import { queryAlarms } from '@/services/controller/DeviceController';
+  MAP_POLYGON_BAN,
+  MAP_POLYLINE_BAN,
+  MAP_TRACKPOINTS_ID,
+  ROUTE_TRIP,
+} from '@/constants';
+import {
+  queryAlarms,
+  queryEntities,
+  queryShipTrackPoints,
+} from '@/services/controller/DeviceController';
+import { queryBanzones } from '@/services/controller/MapController';
 import { getShipIcon } from '@/services/service/MapService';
+import {
+  convertWKTLineStringToLatLngArray,
+  convertWKTtoLatLngString,
+  getBanzoneNameByType,
+} from '@/utils/geomUtils';
 import {
   CommentOutlined,
   InfoCircleOutlined,
@@ -61,34 +76,47 @@ const HomePage: React.FC = () => {
 
   useEffect(() => {
     getGPSData();
+    const interval = setInterval(() => {
+      getGPSData();
+      getEntitiesData();
+      getShipTrackPoints();
+      getEntityData();
+    }, 5000);
     return () => {
-      mapManagerRef.current?.destroy();
+      clearInterval(interval);
       console.log('MapManager destroyed in HomePage cleanup');
     };
   }, []);
 
   useEffect(() => {
     const timer = setTimeout(() => {
+      // getGPSData();
       getEntitiesData();
-    }, 500); // delay 1s
+      getShipTrackPoints();
+      getEntityData();
+    }, 1000); // delay 1s
     return () => clearTimeout(timer);
   }, [gpsData]);
 
   const getEntitiesData = async () => {
     try {
       const alarm = await queryAlarms();
-      console.log('GPS Data:', gpsData);
+      // console.log('Fetched alarm data:', alarm);
+      // console.log('GPS Data:', gpsData);
 
-      if (mapManagerRef.current?.featureLayer) {
+      if (mapManagerRef.current?.featureLayer && gpsData) {
+        // Clear trước
         mapManagerRef.current.featureLayer.getSource()?.clear();
+
         try {
-          mapManagerRef.current.addPoint(
+          // Tạo feature mới
-            [gpsData!.lon, gpsData!.lat],
+          const feature = mapManagerRef.current.addPoint(
+            [gpsData.lon, gpsData.lat],
             {
-              bearing: gpsData!.h || 0,
+              bearing: gpsData.h || 0,
             },
             {
-              icon: getShipIcon(alarm.level || 1, gpsData?.fishing || false),
+              icon: getShipIcon(alarm.level || 0, gpsData?.fishing || false),
               scale: 0.1,
             },
           );
@@ -103,6 +131,96 @@ const HomePage: React.FC = () => {
       console.error('Error fetching entities:', error);
     }
   };
+  const getShipTrackPoints = async () => {
+    try {
+      const trackpoints = await queryShipTrackPoints();
+      // console.log('Fetched ship track points:', trackpoints.length);
+      if (trackpoints.length > 0) {
+        mapManagerRef.current?.addLineString(
+          trackpoints.map((point) => [point.lon, point.lat]),
+          {
+            id: MAP_TRACKPOINTS_ID,
+            // You can add more properties here if needed
+          },
+          {
+            strokeColor: 'blue',
+            strokeWidth: 3,
+          },
+        );
+      }
+    } catch (error) {
+      console.error('Error fetching ship track points:', error);
+    }
+  };
+
+  const getEntityData = async () => {
+    try {
+      const entities = await queryEntities();
+      console.log('Fetched entities:', entities.length);
+      if (entities.length > 0) {
+        entities.forEach(async (entity) => {
+          if (entity.id == '50:2') {
+            const banzones = await queryBanzones();
+            console.log('Fetched banzones:', banzones.length);
+            if (entity.valueString != '[]') {
+              const zones = JSON.parse(entity.valueString);
+              console.log('Parsed zones:', zones);
+              for (const zone of zones) {
+                const geom = banzones.find((b) => b.id === zone.zone_id);
+                if (geom) {
+                  if (geom.geom?.geom_type === 2) {
+                    // Polyline
+                    const coordinates = convertWKTLineStringToLatLngArray(
+                      geom?.geom?.geom_lines || '',
+                    );
+                    if (coordinates.length > 0) {
+                      mapManagerRef.current.addLineString(
+                        coordinates,
+                        {
+                          id: MAP_POLYLINE_BAN,
+                          text: `${geom.name} - ${zone.message}`,
+                        },
+                        {
+                          strokeColor: 'red',
+                          strokeWidth: 4,
+                        },
+                      );
+                    }
+                  } else if (geom.geom?.geom_type === 1) {
+                    const coordinates = convertWKTtoLatLngString(
+                      geom?.geom?.geom_poly || '',
+                    );
+                    if (coordinates.length > 0) {
+                      mapManagerRef.current.addPolygon(
+                        coordinates,
+                        {
+                          id: MAP_POLYGON_BAN,
+                          name: geom.name,
+                          type: getBanzoneNameByType(geom.type || 4),
+                          description: zone.message,
+                        },
+                        {
+                          strokeColor: 'yellow',
+                          strokeWidth: 2,
+                          fillColor: 'rgba(255, 255, 0, 0.3)', // Màu vàng với độ trong suốt
+                        },
+                      );
+                    }
+                  }
+                } else {
+                  console.log('No geometry found for zone:', zone.id);
+                }
+              }
+            } else {
+              console.log('Zone rỗng');
+            }
+          }
+        });
+      }
+    } catch (error) {
+      console.error('Error fetching entities:', error);
+    }
+  };
 
   return (
     <div>

src/pages/Trip/components/AlarmTable.tsx

@@ -86,7 +86,7 @@ export const AlarmTable: React.FC<AlarmTableProps> = ({
   return (
     <>
       <ProList<API.Alarm>
-        // bordered
+        bordered
         actionRef={actionRef}
         metas={columns}
         polling={DURATION_POLLING_PRESENTATIONS}

src/pages/Trip/components/CreateNewHaulOrTrip.tsx

@@ -6,7 +6,7 @@ import {
 } from '@/services/controller/TripController';
 import { PlusOutlined } from '@ant-design/icons';
 import { useModel } from '@umijs/max';
-import { Button, message, theme } from 'antd';
+import { Button, Grid, message, theme } from 'antd';
 import { useState } from 'react';
 import CreateOrUpdateFishingLog from './CreateOrUpdateFishingLog';
 
@@ -25,6 +25,8 @@ const CreateNewHaulOrTrip: React.FC<CreateNewHaulOrTripProps> = ({
   const checkHaulFinished = () => {
     return trips?.fishing_logs?.some((h) => h.status === 0);
   };
+  const { useBreakpoint } = Grid;
+  const screens = useBreakpoint();
 
   const createNewHaul = async () => {
     if (trips?.fishing_logs?.some((f) => f.status === 0)) {
@@ -76,7 +78,10 @@ const CreateNewHaulOrTrip: React.FC<CreateNewHaulOrTripProps> = ({
   }
 
   return (
-    <>
+    <div style={{
+      padding: screens.sm ? '0px': '10px',
+      marginRight: screens.sm ? '24px': '0px',
+    }}>
       {trips?.trip_status === 2 ? (
         <Button
           color="green"
@@ -126,7 +131,7 @@ const CreateNewHaulOrTrip: React.FC<CreateNewHaulOrTripProps> = ({
           }
         }}
       />
-    </>
+    </div>
   );
 };
 

src/pages/Trip/components/MainTripBody.tsx

@@ -1,7 +1,6 @@
 import { ProCard } from '@ant-design/pro-components';
 import { useModel } from '@umijs/max';
 import { Flex, Grid } from 'antd';
-import { useState } from 'react';
 import HaulTable from './HaulTable';
 import TripCostTable from './TripCost';
 import TripCrews from './TripCrews';
@@ -23,7 +22,6 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
   //   console.log('tripInfo:', tripInfo);
   const { useBreakpoint } = Grid;
   const screens = useBreakpoint();
-  const [isResponsive, setIsResponsive] = useState(false);
   const { data, getApi } = useModel('getTrip');
   const tripCosts = Array.isArray(tripInfo?.trip_cost)
     ? tripInfo.trip_cost
@@ -77,11 +75,14 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
           padding: 0,
           paddingInline: 0,
           gap: 10,
+          backgroundColor: 'transparent',
         }}
       >
         <ProCard
-          split={screens.lg ? 'vertical' : 'horizontal'}
+          gutter={16} // tạo khoảng cách thay vì split (không có border)
-          bodyStyle={{ padding: 0, gap: 5 }}
+          direction={screens.lg ? 'row' : 'column'} // responsive: ngang/dọc
+          bodyStyle={{ padding: 0, gap: 10 }}
+          style={{ color: 'transparent' }}
         >
           <ProCard
             colSpan={{ xs: 24, sm: 24, lg: 12, xl: 12 }}
@@ -92,7 +93,7 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
-              borderBottom: '1px solid #f0f0f0',
+              // borderBottom: '1px solid #f0f0f0',
             }}
             title="Chi phí chuyến đi"
             style={{ minHeight: 300 }}

src/pages/Trip/components/TripFishingGear.tsx

@@ -33,7 +33,7 @@ const TripFishingGearTable: React.FC<TripFishingGearTableProps> = ({
         showTotal: (total, range) => `${range[0]}-${range[1]} trên ${total}`,
       }}
       options={false}
-      // bordered
+      // bordered                               
       size="middle"
       scroll={{ x: '100%' }}
       style={{ flex: 1 }}

src/pages/Trip/index.tsx

@@ -12,7 +12,6 @@ import MainTripBody from './components/MainTripBody';
 import TripCancleOrFinishedButton from './components/TripCancelOrFinishButton';
 const DetailTrip = () => {
   const intl = useIntl();
-  const [responsive, setResponsive] = useState(false);
   const [showAlarmList, setShowAlarmList] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const [alarmList, setAlarmList] = useState<API.Alarm[]>([]);
@@ -49,10 +48,16 @@ const DetailTrip = () => {
     (
       <PageContainer
         header={{
-          title: data ? data.name : 'Chuyến đi',
+          title: (
+            <div style={{ marginLeft: screens.md ? '24px' : '10px' }}>
+              {data ? data.name : 'Chuyến đi'}
+            </div>
+          ),
           tags: <BadgeTripStatus status={data?.trip_status || 0} />,
         }}
+        content={null}
         loading={isLoading}
+        ghost
         extra={[
           <CreateNewHaulOrTrip
             trips={data || undefined}
@@ -99,8 +104,9 @@ const DetailTrip = () => {
                 defaultMessage: 'Cảnh báo',
               })}
               colSpan={{ xs: 24, md: 24, lg: 5 }}
-              bodyStyle={{ paddingInline: 0, paddingBlock: 8 }}
+              bodyStyle={{ paddingInline: 0, paddingBlock: 0 }}
               bordered
+              // style={{ borderBlockEnd: 'none'}}
             >
               {data ? (
                 <AlarmTable alarmList={alarmList} isLoading={isLoading} />

src/services/controller/DeviceController.ts

@@ -3,11 +3,12 @@ import {
   API_GET_GPS,
   API_PATH_ENTITIES,
   API_PATH_SHIP_INFO,
+  API_PATH_SHIP_TRACK_POINTS,
   API_SOS,
 } from '@/constants';
 import { request } from '@umijs/max';
 
-function transformEntityResponse(
+export function transformEntityResponse(
   raw: API.EntityResponse,
 ): API.TransformedEntity {
   return {
@@ -19,7 +20,7 @@ function transformEntityResponse(
   };
 }
 
-export async function getEntities(): Promise<API.TransformedEntity[]> {
+export async function queryEntities(): Promise<API.TransformedEntity[]> {
   const rawList = await request<API.EntityResponse[]>(API_PATH_ENTITIES);
   return rawList.map(transformEntityResponse);
 }
@@ -52,3 +53,7 @@ export async function sendSosMessage(message: string) {
     },
   });
 }
+
+export async function queryShipTrackPoints() {
+  return await request<API.ShipTrackPoint[]>(API_PATH_SHIP_TRACK_POINTS);
+}

src/services/controller/MapController.ts

@@ -1,4 +1,4 @@
-import { API_GET_ALL_LAYER, API_GET_LAYER_INFO } from '@/constants';
+import { API_GET_ALL_BANZONES, API_GET_ALL_LAYER, API_GET_LAYER_INFO } from '@/constants';
 import { request } from '@umijs/max';
 
 export async function getLayer(name: string) {
@@ -8,3 +8,7 @@ export async function getLayer(name: string) {
 export async function getAllLayer() {
   return request(API_GET_ALL_LAYER);
 }
+
+export async function queryBanzones() {
+  return request<API.Zone[]>(API_GET_ALL_BANZONES);
+}

src/services/controller/typings.d.ts

@@ -124,6 +124,14 @@ declare namespace API {
     fishing: boolean;
   }
 
+  interface ShipTrackPoint {
+    time: number;
+    lon: number;
+    lat: number;
+    s: number;
+    h: number;
+  }
+
   // Trips
   interface FishingGear {
     name: string;
@@ -328,4 +336,36 @@ declare namespace API {
     evtid?: string;
     content?: string;
   }
+
+  // Banzone
+  export interface Zone {
+    id?: string;
+    name?: string;
+    type?: number;
+    conditions?: Condition[];
+    enabled?: boolean;
+    updated_at?: Date;
+    geom?: Geom;
+  }
+
+  export interface Condition {
+    max?: number;
+    min?: number;
+    type?: Type;
+    to?: number;
+    from?: number;
+  }
+
+  export enum Type {
+    LengthLimit = 'length_limit',
+    MonthRange = 'month_range',
+  }
+
+  export interface Geom {
+    geom_type?: number;
+    geom_poly?: string;
+    geom_lines?: string;
+    geom_point?: string;
+    geom_radius?: number;
+  }
 }

src/utils/geomUtils.ts

@@ -0,0 +1,76 @@
+export const convertWKTPointToLatLng = (wktString: string) => {
+  if (
+    !wktString ||
+    typeof wktString !== 'string' ||
+    !wktString.startsWith('POINT')
+  ) {
+    return null;
+  }
+
+  const matched = wktString.match(/POINT\s*\(([-\d.]+)\s+([-\d.]+)\)/);
+  if (!matched) return null;
+
+  const lng = parseFloat(matched[1]);
+  const lat = parseFloat(matched[2]);
+
+  return [lng, lat]; // [longitude, latitude]
+};
+export const convertWKTLineStringToLatLngArray = (wktString: string) => {
+  if (
+    !wktString ||
+    typeof wktString !== 'string' ||
+    !wktString.startsWith('LINESTRING')
+  ) {
+    return [];
+  }
+
+  const matched = wktString.match(/LINESTRING\s*\((.*)\)/);
+  if (!matched) return [];
+
+  const coordinates = matched[1].split(',').map((coordStr) => {
+    const [x, y] = coordStr.trim().split(' ').map(Number);
+    return [x, y]; // [lng, lat]
+  });
+
+  return coordinates;
+};
+
+export const convertWKTtoLatLngString = (wktString: string) => {
+  if (
+    !wktString ||
+    typeof wktString !== 'string' ||
+    !wktString.startsWith('MULTIPOLYGON')
+  ) {
+    return [];
+  }
+
+  const matched = wktString.match(/MULTIPOLYGON\s*\(\(\((.*)\)\)\)/);
+  if (!matched) return [];
+
+  const polygons = matched[1]
+    .split(')),((') // chia các polygon
+    .map((polygonStr) =>
+      polygonStr
+        .trim()
+        .split(',')
+        .map((coordStr) => {
+          const [x, y] = coordStr.trim().split(' ').map(Number);
+          return [x, y];
+        }),
+    );
+
+  return polygons;
+};
+
+export const getBanzoneNameByType = (type: number) => {
+  switch (type) {
+    case 1:
+      return 'Cấm đánh bắt';
+    case 2:
+      return 'Cấm di chuyển';
+    case 3:
+      return 'Vùng an toàn';
+    default:
+      return 'Chưa có';
+  }
+};