RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'release/v0.15.2'

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2025-01-27 09:16:49 +03:30
parent 9c61c737de 1e376556bf
commit 36522d8cc3
10 changed files with 336 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.local.example
View File

@@ -1,4 +1,4 @@
HOST="rms.witel.ir" HOST="rms.witel.ir"
NEXT_PUBLIC_VERSION="0.15.0" NEXT_PUBLIC_VERSION="0.15.2"
NEXT_PUBLIC_API_URL="https://rms.witel.ir" NEXT_PUBLIC_API_URL="https://rms.witel.ir"
NEXT_PUBLIC_MAPTILE_ENDPOINT="https://rmsmap.rmto.ir/141map" NEXT_PUBLIC_MAPTILE_ENDPOINT="https://rmsmap.rmto.ir/141map"

17
src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/CompeleteRequest.jsx
View File

@@ -92,7 +92,7 @@ const CompeleteRequest = ({ allData, handlePrev, mutate, setOpen }) => {
setOtpSended(true); setOtpSended(true);
setDelayPerRequest(true); setDelayPerRequest(true);
setValueSend("phoneNumber", data.phoneNumber); setValueSend("phoneNumber", data.phoneNumber);
} catch (error) {} } catch (error) { }
}; };
const sendData = useCallback( const sendData = useCallback(
@@ -158,7 +158,7 @@ const CompeleteRequest = ({ allData, handlePrev, mutate, setOpen }) => {
<Divider sx={{ flex: 1, mx: 2 }} /> <Divider sx={{ flex: 1, mx: 2 }} />
<Typography> <Typography>
{allData.start_time !== "" && {allData.start_time !== "" &&
moment(allData.start_time).locale("fa").format("YYYY/MM/DD | HH:mm")} moment(allData.start_time).locale("fa").format("HH:mm | YYYY/MM/DD")}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} lg={6} sx={{ display: "flex", alignItems: "center" }}> <Grid item xs={12} lg={6} sx={{ display: "flex", alignItems: "center" }}>
@@ -166,11 +166,10 @@ const CompeleteRequest = ({ allData, handlePrev, mutate, setOpen }) => {
<Divider sx={{ flex: 1, mx: 2 }} /> <Divider sx={{ flex: 1, mx: 2 }} />
<Typography> <Typography>
{allData.start_time !== "" && {allData.start_time !== "" &&
moment(allData.start_time).locale("fa").format("YYYY/MM/DD | HH:mm")} moment(allData.start_time).locale("fa").format("HH:mm | YYYY/MM/DD")}
</Typography> </Typography>
</Grid> </Grid>
</Grid>
<Grid container spacing={2} sx={{ alignItems: "start", my: 1 }}>
<Grid item xs={12} lg={6} sx={{ display: "flex", alignItems: "center" }}> <Grid item xs={12} lg={6} sx={{ display: "flex", alignItems: "center" }}>
<Chip label="مدت زمان روشن بودن خودرو" /> <Chip label="مدت زمان روشن بودن خودرو" />
<Divider sx={{ flex: 1, mx: 2 }} /> <Divider sx={{ flex: 1, mx: 2 }} />
@@ -188,7 +187,7 @@ const CompeleteRequest = ({ allData, handlePrev, mutate, setOpen }) => {
<Grid item xs={12} lg={6} sx={{ display: "flex", alignItems: "center" }}> <Grid item xs={12} lg={6} sx={{ display: "flex", alignItems: "center" }}>
<Chip label="تعداد نقاط توقف" /> <Chip label="تعداد نقاط توقف" />
<Divider sx={{ flex: 1, mx: 2 }} /> <Divider sx={{ flex: 1, mx: 2 }} />
<Typography>{allData.stopPoints && allData.stopPoints.length}</Typography> <Typography>{allData.stopPoints && allData.stopPoints.length} نقطه</Typography>
</Grid> </Grid>
<Grid item xs={12} lg={6} sx={{ display: "flex", alignItems: "center" }}> <Grid item xs={12} lg={6} sx={{ display: "flex", alignItems: "center" }}>
<Chip label="مسافت پیموده شده" /> <Chip label="مسافت پیموده شده" />
@@ -200,7 +199,7 @@ const CompeleteRequest = ({ allData, handlePrev, mutate, setOpen }) => {
<Grid item xs={12} lg={6} sx={{ display: "flex", alignItems: "center" }}> <Grid item xs={12} lg={6} sx={{ display: "flex", alignItems: "center" }}>
<Chip label="تعداد فعالیت های حین گشت" /> <Chip label="تعداد فعالیت های حین گشت" />
<Divider sx={{ flex: 1, mx: 2 }} /> <Divider sx={{ flex: 1, mx: 2 }} />
<Typography>{allData.observed_items && allData.observed_items.length}</Typography> <Typography>{allData.observed_items && allData.observed_items.length} مورد</Typography>
</Grid> </Grid>
</Grid> </Grid>
<Grid container spacing={3} sx={{ alignItems: "start", my: 2 }}> <Grid container spacing={3} sx={{ alignItems: "start", my: 2 }}>
@@ -288,8 +287,8 @@ const CompeleteRequest = ({ allData, handlePrev, mutate, setOpen }) => {
{delayPerRequest {delayPerRequest
? formatCounter(counter) ? formatCounter(counter)
: isSubmittingOtp : isSubmittingOtp
? "درحال دریافت کد ..." ? "درحال دریافت کد ..."
: "دریافت کد"} : "دریافت کد"}
</Button> </Button>
</Box> </Box>
</StyledForm> </StyledForm>

95
src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolDetailInfo.jsx
View File

@@ -1,35 +1,32 @@
"use client"; "use client";
import MapLoading from "@/core/components/MapLayer/Loading";
import ShowPlak from "@/core/components/ShowPlak";
import { formatSecondsToHHMMSS } from "@/core/utils/formatSecondsToHHMMSS";
import AddRoadIcon from "@mui/icons-material/AddRoad";
import BadgeIcon from '@mui/icons-material/Badge';
import DirectionsCarFilledIcon from "@mui/icons-material/DirectionsCarFilled";
import ElectricCarIcon from "@mui/icons-material/ElectricCar";
import LocalGasStationIcon from "@mui/icons-material/LocalGasStation";
import QrCode2Icon from "@mui/icons-material/QrCode2";
import QueryBuilderIcon from "@mui/icons-material/QueryBuilder";
import ShareLocationIcon from "@mui/icons-material/ShareLocation";
import WatchLaterIcon from "@mui/icons-material/WatchLater";
import { import {
Box, Box,
Button,
Card, Card,
CardActions,
CardContent, CardContent,
Chip, Chip,
Divider, Divider,
Fade, Fade,
Slide,
Stack, Stack,
Typography, Typography
} from "@mui/material"; } from "@mui/material";
import React, { useEffect } from "react";
import dynamic from "next/dynamic";
import MapLoading from "@/core/components/MapLayer/Loading";
import LocalGasStationIcon from "@mui/icons-material/LocalGasStation";
import DirectionsCarFilledIcon from "@mui/icons-material/DirectionsCarFilled";
import WatchLaterIcon from "@mui/icons-material/WatchLater";
import QueryBuilderIcon from "@mui/icons-material/QueryBuilder";
import AddRoadIcon from "@mui/icons-material/AddRoad";
import ShareLocationIcon from "@mui/icons-material/ShareLocation";
import ElectricCarIcon from "@mui/icons-material/ElectricCar";
import KeyboardDoubleArrowLeftIcon from "@mui/icons-material/KeyboardDoubleArrowLeft";
import QrCode2Icon from "@mui/icons-material/QrCode2";
import moment from "jalali-moment"; import moment from "jalali-moment";
import PatrolMapFeatures from "./PatrolMapFeatures"; import dynamic from "next/dynamic";
import React, { useEffect } from "react";
import { useMap } from "react-leaflet"; import { useMap } from "react-leaflet";
import { formatSecondsToHHMMSS } from "@/core/utils/formatSecondsToHHMMSS"; import PatrolMapFeatures from "./PatrolMapFeatures";
import ShowPlak from "@/core/components/ShowPlak";
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), { const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
loading: () => <MapLoading />, loading: () => <MapLoading />,
@@ -75,35 +72,6 @@ const PatrolDetailInfo = ({ patrolData }) => {
}} }}
> >
<Stack sx={{ minWidth: { xs: "100%", md: "350px" }, gap: 2 }}> <Stack sx={{ minWidth: { xs: "100%", md: "350px" }, gap: 2 }}>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<Chip size="small" label="مدت زمان روشن بودن خودرو" icon={<ElectricCarIcon />} />
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography sx={{ fontSize: "13px", fontWeight: 400 }}>
{formatSecondsToHHMMSS(patrolData?.accOnDuration)}
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<Chip size="small" label="نام خودرو" icon={<DirectionsCarFilledIcon />} />
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography sx={{ fontSize: "13px", fontWeight: 400 }}>
{patrolData?.roadPatrolMachinesId?.car_name}
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<Chip size="small" label="کد خودرو" icon={<QrCode2Icon />} />
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography sx={{ fontSize: "13px", fontWeight: 400 }}>
{patrolData?.roadPatrolMachinesId?.machine_code}
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip size="small" label="پلاک خودرو" icon={<DirectionsCarFilledIcon />} />
<Divider sx={{ flex: 1, mx: 2 }} />
<Box sx={{ fontSize: 11 }}>
{patrolData?.roadPatrolMachinesId?.plak_number &&
ShowPlak({ plak_number: patrolData?.roadPatrolMachinesId?.plak_number })}
</Box>
</Box>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}> <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<Chip size="small" label="زمان شروع گشت" icon={<QueryBuilderIcon />} /> <Chip size="small" label="زمان شروع گشت" icon={<QueryBuilderIcon />} />
<Divider sx={{ flex: 1, mx: 2 }} /> <Divider sx={{ flex: 1, mx: 2 }} />
@@ -120,6 +88,35 @@ const PatrolDetailInfo = ({ patrolData }) => {
moment(patrolData?.end_time).locale("fa").format("HH:mm | YYYY/MM/DD")} moment(patrolData?.end_time).locale("fa").format("HH:mm | YYYY/MM/DD")}
</Typography> </Typography>
</Box> </Box>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<Chip size="small" label="کد خودرو" icon={<QrCode2Icon />} />
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography sx={{ fontSize: "13px", fontWeight: 400 }}>
{patrolData?.roadPatrolMachinesId?.machine_code}
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<Chip size="small" label="نام خودرو" icon={<DirectionsCarFilledIcon />} />
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography sx={{ fontSize: "13px", fontWeight: 400 }}>
{patrolData?.roadPatrolMachinesId?.car_name}
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip size="small" label="پلاک خودرو" icon={<BadgeIcon />} />
<Divider sx={{ flex: 1, mx: 2 }} />
<Box sx={{ fontSize: 11 }}>
{patrolData?.roadPatrolMachinesId?.plak_number &&
ShowPlak({ plak_number: patrolData?.roadPatrolMachinesId?.plak_number })}
</Box>
</Box>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<Chip size="small" label="مدت زمان روشن بودن خودرو" icon={<ElectricCarIcon />} />
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography sx={{ fontSize: "13px", fontWeight: 400 }}>
{formatSecondsToHHMMSS(patrolData?.accOnDuration)}
</Typography>
</Box>
<Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}> <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<Chip size="small" label="مسافت پیموده شده" icon={<AddRoadIcon />} /> <Chip size="small" label="مسافت پیموده شده" icon={<AddRoadIcon />} />
<Divider sx={{ flex: 1, mx: 2 }} /> <Divider sx={{ flex: 1, mx: 2 }} />
@@ -138,7 +135,7 @@ const PatrolDetailInfo = ({ patrolData }) => {
<Chip size="small" label="تعداد توقف در مسیر" icon={<ShareLocationIcon />} /> <Chip size="small" label="تعداد توقف در مسیر" icon={<ShareLocationIcon />} />
<Divider sx={{ flex: 1, mx: 2 }} /> <Divider sx={{ flex: 1, mx: 2 }} />
<Typography sx={{ fontSize: "13px", fontWeight: 400 }}> <Typography sx={{ fontSize: "13px", fontWeight: 400 }}>
{patrolData?.stopPoints?.length} مورد {patrolData?.stopPoints?.length} نقطه
</Typography> </Typography>
</Box> </Box>
</Stack> </Stack>

3
src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolMapFeatures.jsx
View File

@@ -4,6 +4,7 @@ import { Typography } from "@mui/material";
import React, { useRef } from "react"; import React, { useRef } from "react";
import { Marker, Popup } from "react-leaflet"; import { Marker, Popup } from "react-leaflet";
import AzmayeshIcon from "@/assets/images/examine_marker.png"; import AzmayeshIcon from "@/assets/images/examine_marker.png";
import { formatSecondsToHHMMSS } from "@/core/utils/formatSecondsToHHMMSS";
const PatrolMapFeatures = ({ stopPoint }) => { const PatrolMapFeatures = ({ stopPoint }) => {
const position = [stopPoint.latitude, stopPoint.longitude]; const position = [stopPoint.latitude, stopPoint.longitude];
@@ -29,7 +30,7 @@ const PatrolMapFeatures = ({ stopPoint }) => {
position={position} position={position}
> >
<Popup> <Popup>
<Typography variant="button">مدت زمان توقف: {stopPoint.duration} ثانیه</Typography> <Typography variant="button">مدت زمان توقف: {formatSecondsToHHMMSS(stopPoint.duration)}</Typography>
</Popup> </Popup>
</Marker> </Marker>
); );

112
src/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/MachinePerformanceContent.jsx
View File

@@ -1,9 +1,12 @@
import { Box, DialogContent, Stack } from "@mui/material"; import { Box, Chip, DialogContent, Divider, Grid, Stack, Typography } from "@mui/material";
import React, { useEffect, useState, useRef } from "react"; import React, { useEffect, useState, useRef } from "react";
import { Marker, useMap } from "react-leaflet"; import { Marker, useMap } from "react-leaflet";
import AzmayeshActiveIcon from "@/assets/images/examine_marker_active.png"; import AzmayeshActiveIcon from "@/assets/images/examine_marker_active.png";
import StopsInfo from "@/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/StopsInfo"; import StopsInfo from "@/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/StopsInfo";
import MapLayer from "@/core/components/MapLayer"; import MapLayer from "@/core/components/MapLayer";
import PinDropIcon from "@mui/icons-material/PinDrop";
import AccessAlarmsIcon from "@mui/icons-material/AccessAlarms";
import { formatSecondsToHHMMSS } from "@/core/utils/formatSecondsToHHMMSS";
const defaultIconSize = [35, 35]; const defaultIconSize = [35, 35];
const MachinePerformanceContent = ({ machinesLists }) => { const MachinePerformanceContent = ({ machinesLists }) => {
const [selectedPoint, setSelectedPoint] = useState(null); const [selectedPoint, setSelectedPoint] = useState(null);
@@ -41,9 +44,8 @@ const MachinePerformanceContent = ({ machinesLists }) => {
return ( return (
<> <>
<DialogContent> <DialogContent>
<Stack direction={"row"} spacing={2} justifyContent={"space-between"}> <Stack direction={"row"} spacing={4} justifyContent={"space-between"} alignItems={'center'}>
<StopsInfo <StopsInfo
selectedPoint={selectedPoint}
staticData={{ staticData={{
cmmsMachineCode: machinesLists.cmms_machine_code, cmmsMachineCode: machinesLists.cmms_machine_code,
fuelConsumption: machinesLists.fuelConsumption, fuelConsumption: machinesLists.fuelConsumption,
@@ -51,22 +53,94 @@ const MachinePerformanceContent = ({ machinesLists }) => {
accOnDuration: machinesLists.accOnDuration, accOnDuration: machinesLists.accOnDuration,
}} }}
/> />
<Stack> <Divider orientation="vertical" flexItem />
<Box sx={{ width: "400px", height: "400px" }}> <Stack sx={{ flex: 1 }}>
<MapLayer> <Stack spacing={1} sx={{ height: "300px", width: "100%" }}>
<MapWithBounds /> <Box
{machinesLists.stopPoints.map((point, index) => ( sx={{
<Marker p: 1,
key={index} border: "1px dashed",
position={[point.latitude, point.longitude]} borderColor: "divider",
icon={createCustomIcon(defaultIconSize, AzmayeshActiveIcon.src)} borderRadius: 1,
eventHandlers={{ height: "100%",
click: () => handleMarkerClick(point), }}
}} >
></Marker> <Box
))} sx={{
</MapLayer> height: "100%",
</Box> display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<MapLayer>
<MapWithBounds />
{machinesLists.stopPoints.map((point, index) => (
<Marker
key={index}
position={[point.latitude, point.longitude]}
icon={createCustomIcon(defaultIconSize, AzmayeshActiveIcon.src)}
eventHandlers={{
click: () => handleMarkerClick(point),
}}
></Marker>
))}
</MapLayer>
</Box>
</Box>
</Stack>
<Grid container spacing={1} direction="row" sx={{ flex: 1, justifyContent: "space-between", alignItems: "center", mt: 2 }}>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<PinDropIcon />}
label={
<Typography variant="body2" sx={{ color: "grey.700" }}>
طول جغرافیایی
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{selectedPoint ? selectedPoint.longitude : "نقطه مورد نظر را انتخاب کنید"}
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<PinDropIcon />}
label={
<Typography variant="body2" sx={{ color: "grey.700" }}>
عرض جغرافیایی
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{selectedPoint ? selectedPoint.latitude : "نقطه مورد نظر را انتخاب کنید"}
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<AccessAlarmsIcon />}
label={
<Typography variant="body2" sx={{ color: "grey.700" }}>
مدت زمان توقف
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{selectedPoint
? `${formatSecondsToHHMMSS(selectedPoint.duration)}`
: "نقطه مورد نظر را انتخاب کنید"}
</Typography>
</Grid>
</Grid>
</Stack> </Stack>
</Stack> </Stack>
</DialogContent> </DialogContent>

105
src/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/StopsInfo.jsx
View File

@@ -1,17 +1,21 @@
import { Box, Chip, Divider, Grid, Typography } from "@mui/material"; import { Box, Chip, Divider, Grid, Typography } from "@mui/material";
import AccessAlarmsIcon from "@mui/icons-material/AccessAlarms"; import AccessAlarmsIcon from "@mui/icons-material/AccessAlarms";
import PinDropIcon from "@mui/icons-material/PinDrop";
import LocalGasStationIcon from "@mui/icons-material/LocalGasStation";
import DirectionsCarIcon from "@mui/icons-material/DirectionsCar";
import { formatSecondsToHHMMSS } from "@/core/utils/formatSecondsToHHMMSS";
const StopsInfo = ({ selectedPoint, staticData }) => { import LocalGasStationIcon from "@mui/icons-material/LocalGasStation";
import QrCode2Icon from "@mui/icons-material/QrCode2";
import AddRoadIcon from "@mui/icons-material/AddRoad";
import DirectionsCarFilledIcon from "@mui/icons-material/DirectionsCarFilled";
import BadgeIcon from '@mui/icons-material/Badge';
import { formatSecondsToHHMMSS } from "@/core/utils/formatSecondsToHHMMSS";
import ShowPlak from "@/core/components/ShowPlak";
const StopsInfo = ({ staticData }) => {
return ( return (
<Grid container spacing={3} direction="row" sx={{ justifyContent: "space-between", alignItems: "center" }}> <Grid container spacing={3} direction="row" sx={{ flex: 1, justifyContent: "space-between", alignItems: "center" }}>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}> <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
<Chip <Chip
icon={<DirectionsCarIcon />} icon={<QrCode2Icon />}
label={ label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}> <Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
کد خودرو کد خودرو
@@ -21,9 +25,42 @@ const StopsInfo = ({ selectedPoint, staticData }) => {
</Box> </Box>
<Divider sx={{ flex: 1, mx: 2 }} /> <Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}> <Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{staticData.cmmsMachineCode || ""} {staticData.cmmsMachineCode.machine_code || ""}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<DirectionsCarFilledIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
نام خودرو
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{staticData.cmmsMachineCode.car_name || ""}
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<BadgeIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
پلاک خودرو
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Box sx={{ fontSize: 11 }}>
{staticData.cmmsMachineCode.plak_number &&
ShowPlak({ plak_number: staticData.cmmsMachineCode.plak_number })}
</Box>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}> <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
<Chip <Chip
@@ -43,7 +80,7 @@ const StopsInfo = ({ selectedPoint, staticData }) => {
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}> <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
<Chip <Chip
icon={<DirectionsCarIcon />} icon={<AddRoadIcon />}
label={ label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}> <Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
مسافت پیموده شده مسافت پیموده شده
@@ -72,56 +109,6 @@ const StopsInfo = ({ selectedPoint, staticData }) => {
{formatSecondsToHHMMSS(staticData?.accOnDuration)} {formatSecondsToHHMMSS(staticData?.accOnDuration)}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<PinDropIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
طول جغرافیایی
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{selectedPoint ? selectedPoint.longitude : "نقطه مورد نظر را انتخاب کنید"}
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<PinDropIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
عرض جغرافیایی
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{selectedPoint ? selectedPoint.latitude : "نقطه مورد نظر را انتخاب کنید"}
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<AccessAlarmsIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
مدت زمان توقف
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{selectedPoint
? `${formatSecondsToHHMMSS(selectedPoint.duration)} ثانیه`
: "نقطه مورد نظر را انتخاب کنید"}
</Typography>
</Grid>
</Grid> </Grid>
); );
}; };

2
src/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/index.jsx
View File

@@ -6,7 +6,7 @@ import { useState } from "react";
const MachinePerformanceForm = ({ row }) => { const MachinePerformanceForm = ({ row }) => {
const [openMachinesCodeDialog, setOpenMachinesCodeDialog] = useState(false); const [openMachinesCodeDialog, setOpenMachinesCodeDialog] = useState(false);
const machineData = { const machineData = {
cmms_machine_code: row.original?.cmms_machines[0]?.machine_code, cmms_machine_code: row.original?.cmms_machines[0],
resultCode: 0, resultCode: 0,
mileage: row.original?.distance, mileage: row.original?.distance,
accOnDuration: row.original?.vehicle_runtime, accOnDuration: row.original?.vehicle_runtime,

116
src/components/dashboard/roadPatrols/supervisor/RowActions/MachinePerformanceForm/MachinePerformanceContent.jsx
View File

@@ -1,9 +1,12 @@
import { Box, DialogContent, Stack } from "@mui/material"; import { Box, Chip, DialogContent, Divider, Grid, Stack, Typography } from "@mui/material";
import React, { useEffect, useState, useRef } from "react"; import React, { useEffect, useState, useRef } from "react";
import { Marker, useMap } from "react-leaflet"; import { Marker, useMap } from "react-leaflet";
import AzmayeshActiveIcon from "@/assets/images/examine_marker_active.png"; import AzmayeshActiveIcon from "@/assets/images/examine_marker_active.png";
import StopsInfo from "./StopsInfo"; import StopsInfo from "@/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/StopsInfo";
import MapLayer from "@/core/components/MapLayer"; import MapLayer from "@/core/components/MapLayer";
import PinDropIcon from "@mui/icons-material/PinDrop";
import AccessAlarmsIcon from "@mui/icons-material/AccessAlarms";
import { formatSecondsToHHMMSS } from "@/core/utils/formatSecondsToHHMMSS";
const defaultIconSize = [35, 35]; const defaultIconSize = [35, 35];
const MachinePerformanceContent = ({ machinesLists }) => { const MachinePerformanceContent = ({ machinesLists }) => {
const [selectedPoint, setSelectedPoint] = useState(null); const [selectedPoint, setSelectedPoint] = useState(null);
@@ -41,9 +44,8 @@ const MachinePerformanceContent = ({ machinesLists }) => {
return ( return (
<> <>
<DialogContent> <DialogContent>
<Stack direction={"row"} spacing={2} justifyContent={"space-between"}> <Stack direction={"row"} spacing={4} justifyContent={"space-between"} alignItems={'center'}>
<StopsInfo <StopsInfo
selectedPoint={selectedPoint}
staticData={{ staticData={{
cmmsMachineCode: machinesLists.cmms_machine_code, cmmsMachineCode: machinesLists.cmms_machine_code,
fuelConsumption: machinesLists.fuelConsumption, fuelConsumption: machinesLists.fuelConsumption,
@@ -51,26 +53,98 @@ const MachinePerformanceContent = ({ machinesLists }) => {
accOnDuration: machinesLists.accOnDuration, accOnDuration: machinesLists.accOnDuration,
}} }}
/> />
<Stack> <Divider orientation="vertical" flexItem />
<Box sx={{ width: "400px", height: "400px" }}> <Stack sx={{ flex: 1 }}>
<MapLayer> <Stack spacing={1} sx={{ height: "300px", width: "100%" }}>
<MapWithBounds /> <Box
{machinesLists.stopPoints.map((point, index) => ( sx={{
<Marker p: 1,
key={index} border: "1px dashed",
position={[point.latitude, point.longitude]} borderColor: "divider",
icon={createCustomIcon(defaultIconSize, AzmayeshActiveIcon.src)} borderRadius: 1,
eventHandlers={{ height: "100%",
click: () => handleMarkerClick(point), }}
}} >
></Marker> <Box
))} sx={{
</MapLayer> height: "100%",
</Box> display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<MapLayer>
<MapWithBounds />
{machinesLists.stopPoints.map((point, index) => (
<Marker
key={index}
position={[point.latitude, point.longitude]}
icon={createCustomIcon(defaultIconSize, AzmayeshActiveIcon.src)}
eventHandlers={{
click: () => handleMarkerClick(point),
}}
></Marker>
))}
</MapLayer>
</Box>
</Box>
</Stack>
<Grid container spacing={1} direction="row" sx={{ flex: 1, justifyContent: "space-between", alignItems: "center", mt: 2 }}>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<PinDropIcon />}
label={
<Typography variant="body2" sx={{ color: "grey.700" }}>
طول جغرافیایی
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{selectedPoint ? selectedPoint.longitude : "نقطه مورد نظر را انتخاب کنید"}
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<PinDropIcon />}
label={
<Typography variant="body2" sx={{ color: "grey.700" }}>
عرض جغرافیایی
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{selectedPoint ? selectedPoint.latitude : "نقطه مورد نظر را انتخاب کنید"}
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<AccessAlarmsIcon />}
label={
<Typography variant="body2" sx={{ color: "grey.700" }}>
مدت زمان توقف
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{selectedPoint
? `${formatSecondsToHHMMSS(selectedPoint.duration)}`
: "نقطه مورد نظر را انتخاب کنید"}
</Typography>
</Grid>
</Grid>
</Stack> </Stack>
</Stack> </Stack>
</DialogContent> </DialogContent>
</> </>
); );
}; };
export default MachinePerformanceContent; export default MachinePerformanceContent;

47
src/components/dashboard/roadPatrols/supervisor/RowActions/MachinePerformanceForm/StopsInfo.jsx
View File

@@ -2,8 +2,12 @@ import { Box, Chip, Divider, Grid, Typography } from "@mui/material";
import AccessAlarmsIcon from "@mui/icons-material/AccessAlarms"; import AccessAlarmsIcon from "@mui/icons-material/AccessAlarms";
import PinDropIcon from "@mui/icons-material/PinDrop"; import PinDropIcon from "@mui/icons-material/PinDrop";
import LocalGasStationIcon from "@mui/icons-material/LocalGasStation"; import LocalGasStationIcon from "@mui/icons-material/LocalGasStation";
import DirectionsCarIcon from "@mui/icons-material/DirectionsCar"; import QrCode2Icon from "@mui/icons-material/QrCode2";
import AddRoadIcon from "@mui/icons-material/AddRoad";
import DirectionsCarFilledIcon from "@mui/icons-material/DirectionsCarFilled";
import BadgeIcon from '@mui/icons-material/Badge';
import { formatSecondsToHHMMSS } from "@/core/utils/formatSecondsToHHMMSS"; import { formatSecondsToHHMMSS } from "@/core/utils/formatSecondsToHHMMSS";
import ShowPlak from "@/core/components/ShowPlak";
const StopsInfo = ({ selectedPoint, staticData }) => { const StopsInfo = ({ selectedPoint, staticData }) => {
return ( return (
@@ -11,7 +15,7 @@ const StopsInfo = ({ selectedPoint, staticData }) => {
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}> <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
<Chip <Chip
icon={<DirectionsCarIcon />} icon={<QrCode2Icon />}
label={ label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}> <Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
کد خودرو کد خودرو
@@ -21,9 +25,42 @@ const StopsInfo = ({ selectedPoint, staticData }) => {
</Box> </Box>
<Divider sx={{ flex: 1, mx: 2 }} /> <Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}> <Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{staticData.cmmsMachineCode || ""} {staticData.cmmsMachineCode.machine_code || ""}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<DirectionsCarFilledIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
نام خودرو
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{staticData.cmmsMachineCode.car_name || ""}
</Typography>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<BadgeIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
پلاک خودرو
</Typography>
}
/>
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Box sx={{ fontSize: 11 }}>
{staticData.cmmsMachineCode.plak_number &&
ShowPlak({ plak_number: staticData.cmmsMachineCode.plak_number })}
</Box>
</Grid>
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}> <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
<Chip <Chip
@@ -43,7 +80,7 @@ const StopsInfo = ({ selectedPoint, staticData }) => {
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}> <Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ display: "flex", alignItems: "center" }}>
<Chip <Chip
icon={<DirectionsCarIcon />} icon={<AddRoadIcon />}
label={ label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}> <Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
مسافت پیموده شده مسافت پیموده شده
@@ -125,4 +162,4 @@ const StopsInfo = ({ selectedPoint, staticData }) => {
</Grid> </Grid>
); );
}; };
export default StopsInfo; export default StopsInfo;

4
src/components/dashboard/roadPatrols/supervisor/RowActions/MachinePerformanceForm/index.jsx
View File

@@ -6,7 +6,7 @@ import { useState } from "react";
const MachinePerformanceForm = ({ row }) => { const MachinePerformanceForm = ({ row }) => {
const [openMachinesCodeDialog, setOpenMachinesCodeDialog] = useState(false); const [openMachinesCodeDialog, setOpenMachinesCodeDialog] = useState(false);
const machineData = { const machineData = {
cmms_machine_code: row.original?.cmms_machines[0]?.machine_code, cmms_machine_code: row.original?.cmms_machines[0],
resultCode: 0, resultCode: 0,
mileage: row.original?.distance, mileage: row.original?.distance,
accOnDuration: row.original?.vehicle_runtime, accOnDuration: row.original?.vehicle_runtime,
@@ -48,4 +48,4 @@ const MachinePerformanceForm = ({ row }) => {
</> </>
); );
}; };
export default MachinePerformanceForm; export default MachinePerformanceForm;