tuanta/FE-DEVICE-SGW
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

style(trips): fix responsive layout

Browse Source
This commit is contained in:
Tran Anh Tuan
2025-09-29 12:04:55 +07:00
parent 2707b92f7e
commit 904028649c
7 changed files with 36 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.husky/pre-commit
View File

@@ -1 +1 @@
npx --no-install lint-staged --quiet
npx --no-install --quiet

2
config/proxy.ts
View File

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

8
pnpm-lock.yaml generated
View File

@@ -7725,7 +7725,7 @@ snapshots:
'@loadable/component@5.15.2(react@18.3.1)':
dependencies:
'@babel/runtime': 7.23.6
'@babel/runtime': 7.28.4
hoist-non-react-statics: 3.3.2
react: 18.3.1
react-is: 16.13.1
@@ -8467,7 +8467,7 @@ snapshots:
'@umijs/history@5.3.1':
dependencies:
'@babel/runtime': 7.23.6
'@babel/runtime': 7.28.4
query-string: 6.14.1
'@umijs/lint@4.5.0(eslint@8.35.0)(stylelint@14.8.2)(typescript@5.9.2)':
@@ -10898,7 +10898,7 @@ snapshots:
history@5.3.0:
dependencies:
'@babel/runtime': 7.23.6
'@babel/runtime': 7.28.4
hmac-drbg@1.0.1:
dependencies:
@@ -13161,7 +13161,7 @@ snapshots:
react-helmet-async@1.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
dependencies:
'@babel/runtime': 7.23.6
'@babel/runtime': 7.28.4
invariant: 2.2.4
prop-types: 15.8.1
react: 18.3.1

23
src/pages/Trip/components/MainTripBody.tsx
View File

@@ -1,6 +1,7 @@
import { ProCard } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Flex } from 'antd';
import { Flex, Grid } from 'antd';
import { useState } from 'react';
import HaulTable from './HaulTable';
import TripCostTable from './TripCost';
import TripCrews from './TripCrews';
@@ -20,6 +21,9 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
// console.log('MainTripBody received:');
// console.log("trip_id:", trip_id);
// 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
@@ -75,9 +79,12 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
gap: 10,
}}
>
<ProCard bodyStyle={{ padding: 0, gap: 5 }}>
<ProCard
split={screens.lg ? 'vertical' : 'horizontal'}
bodyStyle={{ padding: 0, gap: 5 }}
>
<ProCard
colSpan={{ xs: 2, sm: 4, md: 6, lg: 8, xl: 12 }}
colSpan={{ xs: 24, sm: 24, lg: 12, xl: 12 }}
layout="center"
bordered
headStyle={{
@@ -93,7 +100,7 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
<TripCostTable tripCosts={tripCosts} />
</ProCard>
<ProCard
colSpan={{ xs: 2, sm: 4, md: 6, lg: 8, xl: 12 }}
colSpan={{ xs: 24, sm: 24, lg: 12, xl: 12 }}
layout="center"
bordered
headStyle={{
@@ -110,9 +117,9 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
</ProCard>
</ProCard>
<ProCard
style={{ paddingInlineEnd: 0 }}
style={{ paddingInlineEnd: 0, paddingBottom: 10 }}
ghost={true}
colSpan={{ xs: 4, sm: 8, md: 12, lg: 16, xl: 24 }}
colSpan={{ xs: 24, sm: 24 }}
layout="center"
bordered
headStyle={{
@@ -126,9 +133,9 @@ const MainTripBody: React.FC<MainTripBodyProps> = ({
<TripCrews crew={tripInfo?.crews} />
</ProCard>
<ProCard
style={{ paddingInlineEnd: 0 }}
style={{ paddingInlineEnd: 0, paddingBottom: 10 }}
ghost={true}
colSpan={{ xs: 4, sm: 8, md: 12, lg: 16, xl: 24 }}
colSpan={{ xs: 24, sm: 24 }}
layout="center"
bordered
headStyle={{

9
src/pages/Trip/components/TripCost.tsx
View File

@@ -1,5 +1,5 @@
import { ProColumns, ProTable } from '@ant-design/pro-components';
import { Typography } from 'antd';
import { Grid, Typography } from 'antd';
interface TripCostTableProps {
tripCosts: API.TripCost[];
@@ -51,6 +51,8 @@ const TripCostTable: React.FC<TripCostTableProps> = ({ tripCosts }) => {
),
},
];
const { useBreakpoint } = Grid;
const screens = useBreakpoint();
return (
<ProTable<API.TripCost>
columns={trip_cost_columns}
@@ -62,9 +64,10 @@ const TripCostTable: React.FC<TripCostTableProps> = ({ tripCosts }) => {
showTotal: (total, range) => `${range[0]}-${range[1]} trên ${total}`,
}}
options={false}
bordered
// bordered
size="middle"
scroll={{ x: 600 }}
scroll={{ x: '100%' }}
style={{ flex: 1, width: '100%' }}
summary={() => (
<ProTable.Summary.Row>
<ProTable.Summary.Cell index={0} colSpan={4} align="right">

4
src/pages/Trip/components/TripFishingGear.tsx
View File

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

23
src/pages/Trip/index.tsx
View File

@@ -2,7 +2,7 @@ import { STATUS } from '@/constants/enums';
import { queryAlarms } from '@/services/controller/DeviceController';
import { PageContainer, ProCard } from '@ant-design/pro-components';
import { useIntl, useModel } from '@umijs/max';
import { Flex, message, theme } from 'antd';
import { Flex, Grid, message, theme } from 'antd';
import { useEffect, useState } from 'react';
import { AlarmTable } from './components/AlarmTable';
import BadgeTripStatus from './components/BadgeTripStatus';
@@ -13,13 +13,13 @@ import TripCancleOrFinishedButton from './components/TripCancelOrFinishButton';
const DetailTrip = () => {
const intl = useIntl();
const [responsive, setResponsive] = useState(false);
const [messageApi, contextHolder] = message.useMessage();
// const [tripInfo, setTripInfo] = useState<API.Trip | null>(null);
const [showAlarmList, setShowAlarmList] = useState(true);
const [isLoading, setIsLoading] = useState(false);
const [alarmList, setAlarmList] = useState<API.Alarm[]>([]);
const { token } = theme.useToken();
const { data, getApi } = useModel('getTrip');
const { useBreakpoint } = Grid;
const screens = useBreakpoint();
const queryDataSource = async (): Promise<API.AlarmResponse> => {
try {
setIsLoading(true);
@@ -37,14 +37,6 @@ const DetailTrip = () => {
return { alarms: [], level: 0 };
}
};
// const fetchTrip = async () => {
// try {
// const resp = await getTrip();
// setTripInfo(resp);
// } catch (error) {
// console.error('Error when get Trip: ', error);
// }
// };
useEffect(() => {
// fetchTrip();
@@ -94,10 +86,9 @@ const DetailTrip = () => {
/>,
]}
>
{contextHolder}
<ProCard
// bordered={false}
split={responsive ? 'horizontal' : 'vertical'}
split={screens.lg ? 'vertical' : 'horizontal'}
// style={{ backgroundColor: 'transparent' }}
>
{/* Bên trái */}
@@ -107,7 +98,7 @@ const DetailTrip = () => {
id: 'pages.gmsv5.alarm.list',
defaultMessage: 'Cảnh báo',
})}
colSpan={{ xs: 24, sm: 24, lg: 5 }}
colSpan={{ xs: 24, md: 24, lg: 5 }}
bodyStyle={{ paddingInline: 0, paddingBlock: 8 }}
bordered
>
@@ -124,8 +115,8 @@ const DetailTrip = () => {
<ProCard
colSpan={
showAlarmList
? { xs: 24, sm: 24, lg: 19 }
: { xs: 24, sm: 24, lg: 24 }
? { xs: 24, md: 24, lg: 19 }
: { xs: 24, md: 24, lg: 24 }
}
// bodyStyle={{ padding: 0 }}
// style={{ backgroundColor: 'transparent' }}