chore(maps): display position in DMS

config/proxy.ts

@@ -1,7 +1,7 @@
 const proxy: Record<string, any> = {
   dev: {
     '/api': {
-      target: 'http://192.168.30.102:81',
+      target: 'http://192.168.30.85:9001',
       changeOrigin: true,
     },
   },

src/constants/index.ts

@@ -14,12 +14,12 @@ export const ROUTE_TRIP = '/trip';
 
 // API Path Constants
 export const API_PATH_LOGIN = '/api/agent/login';
-export const API_PATH_ENTITIES = '/api/agent/entities';
+export const API_PATH_ENTITIES = '/api/io/entities';
 export const API_PATH_SHIP_INFO = '/api/sgw/shipinfo';
 export const API_GET_ALL_LAYER = '/api/sgw/geojsonlist';
 export const API_GET_LAYER_INFO = '/api/sgw/geojson';
 export const API_GET_TRIP = '/api/sgw/trip';
-export const API_GET_ALARMS = '/api/agent/alarms';
+export const API_GET_ALARMS = '/api/io/alarms';
 export const API_UPDATE_TRIP_STATUS = '/api/sgw/tripState';
 export const API_HAUL_HANDLE = '/api/sgw/fishingLog';
 export const API_GET_GPS = '/api/sgw/gps';

src/pages/Home/components/BaseMap.tsx

@@ -114,7 +114,7 @@ class MapManager {
           const data = await getLayer(layerMeta); // lấy GeoJSON từ server
           let style = {};
           if (layerMeta === 'base-countries') {
-            style = createLabelAndFillStyle('#F3F2EC', '#E5BEB5');
+            style = createLabelAndFillStyle('#fafaf8', '#E5BEB5');
           } else {
             style = createLabelAndFillStyle('#77BEF0', '#000000');
           }

src/pages/Home/components/GpsInfo.tsx

@@ -1,3 +1,4 @@
+import { convertToDMS } from '@/services/service/MapService';
 import { ProDescriptions } from '@ant-design/pro-components';
 import { GpsData } from '..';
 const GpsInfo = ({ gpsData }: { gpsData: GpsData | null }) => {
@@ -18,19 +19,20 @@ const GpsInfo = ({ gpsData }: { gpsData: GpsData | null }) => {
           title: 'Kinh độ',
           dataIndex: 'lat',
           render: (_, record) =>
-            record?.lat != null ? `${Number(record.lat).toFixed(5)}°` : '--',
+            record?.lat != null ? `${convertToDMS(record.lat, true)}°` : '--',
         },
         {
           title: 'Vĩ độ',
           dataIndex: 'lon',
           render: (_, record) =>
-            record?.lon != null ? `${Number(record.lon).toFixed(5)}°` : '--',
+            record?.lon != null ? `${convertToDMS(record.lon, false)}°` : '--',
         },
         {
           title: 'Tốc độ',
           dataIndex: 's',
           valueType: 'digit',
-          render: (_, record) => `${record.s} km/h`,
+          render: (_, record) =>
+            record?.s != null ? `${record.s} km/h` : '-- km/h',
           span: 1,
         },
         {

src/pages/Home/index.tsx

@@ -239,7 +239,7 @@ const HomePage: React.FC = () => {
       />
       <Popover
         styles={{
-          root: { width: '85%', maxWidth: 500, paddingLeft: 15 },
+          root: { width: '85%', maxWidth: 600, paddingLeft: 15 },
         }}
         placement="left"
         title="Trạng thái hiện tại"

src/services/service/MapService.ts

@@ -15,8 +15,8 @@ export const BASEMAP_ATTRIBUTIONS = '© OpenStreetMap contributors, © CartoDB';
 
 export const INITIAL_VIEW_CONFIG = {
   // Dịch tâm bản đồ ra phía biển và zoom ra xa hơn để thấy bao quát
-  center: [109.5, 16.0],
-  zoom: 5.5,
+  center: [116.152685, 15.70581],
+  zoom: 6.5,
   minZoom: 5,
   maxZoom: 12,
   minScale: 0.1,
@@ -62,3 +62,14 @@ export const getShipIcon = (type: number, isFishing: boolean) => {
     return shipUndefineIcon;
   }
 };
+
+export const convertToDMS = (value: number, isLat: boolean): string => {
+  const deg = Math.floor(Math.abs(value));
+  const minFloat = (Math.abs(value) - deg) * 60;
+  const min = Math.floor(minFloat);
+  const sec = (minFloat - min) * 60;
+
+  const direction = value >= 0 ? (isLat ? 'N' : 'E') : isLat ? 'S' : 'W';
+
+  return `${deg}°${min}'${sec.toFixed(2)}"${direction}`;
+};