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"
NEXT_PUBLIC_VERSION="0.15.0"
NEXT_PUBLIC_VERSION="0.15.2"
NEXT_PUBLIC_API_URL="https://rms.witel.ir"
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);
setDelayPerRequest(true);
setValueSend("phoneNumber", data.phoneNumber);
} catch (error) {}
} catch (error) { }
};
const sendData = useCallback(
@@ -158,7 +158,7 @@ const CompeleteRequest = ({ allData, handlePrev, mutate, setOpen }) => {
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography>
{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>
</Grid>
<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 }} />
<Typography>
{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>
</Grid>
</Grid>
<Grid container spacing={2} sx={{ alignItems: "start", my: 1 }}>
<Grid item xs={12} lg={6} sx={{ display: "flex", alignItems: "center" }}>
<Chip label="مدت زمان روشن بودن خودرو" />
<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" }}>
<Chip label="تعداد نقاط توقف" />
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography>{allData.stopPoints && allData.stopPoints.length}</Typography>
<Typography>{allData.stopPoints && allData.stopPoints.length} نقطه</Typography>
</Grid>
<Grid item xs={12} lg={6} sx={{ display: "flex", alignItems: "center" }}>
<Chip label="مسافت پیموده شده" />
@@ -200,7 +199,7 @@ const CompeleteRequest = ({ allData, handlePrev, mutate, setOpen }) => {
<Grid item xs={12} lg={6} sx={{ display: "flex", alignItems: "center" }}>
<Chip label="تعداد فعالیت های حین گشت" />
<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 container spacing={3} sx={{ alignItems: "start", my: 2 }}>
@@ -288,8 +287,8 @@ const CompeleteRequest = ({ allData, handlePrev, mutate, setOpen }) => {
{delayPerRequest
? formatCounter(counter)
: isSubmittingOtp
? "درحال دریافت کد ..."
: "دریافت کد"}
? "درحال دریافت کد ..."
: "دریافت کد"}
</Button>
</Box>
</StyledForm>

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

@@ -1,35 +1,32 @@
"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 {
Box,
Button,
Card,
CardActions,
CardContent,
Chip,
Divider,
Fade,
Slide,
Stack,
Typography,
Typography
} 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 PatrolMapFeatures from "./PatrolMapFeatures";
import dynamic from "next/dynamic";
import React, { useEffect } from "react";
import { useMap } from "react-leaflet";
import { formatSecondsToHHMMSS } from "@/core/utils/formatSecondsToHHMMSS";
import ShowPlak from "@/core/components/ShowPlak";
import PatrolMapFeatures from "./PatrolMapFeatures";
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
loading: () => <MapLoading />,
@@ -75,35 +72,6 @@ const PatrolDetailInfo = ({ patrolData }) => {
}}
>
<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" }}>
<Chip size="small" label="زمان شروع گشت" icon={<QueryBuilderIcon />} />
<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")}
</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", 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" }}>
<Chip size="small" label="مسافت پیموده شده" icon={<AddRoadIcon />} />
<Divider sx={{ flex: 1, mx: 2 }} />
@@ -138,7 +135,7 @@ const PatrolDetailInfo = ({ patrolData }) => {
<Chip size="small" label="تعداد توقف در مسیر" icon={<ShareLocationIcon />} />
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography sx={{ fontSize: "13px", fontWeight: 400 }}>
{patrolData?.stopPoints?.length} مورد
{patrolData?.stopPoints?.length} نقطه
</Typography>
</Box>
</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 { Marker, Popup } from "react-leaflet";
import AzmayeshIcon from "@/assets/images/examine_marker.png";
import { formatSecondsToHHMMSS } from "@/core/utils/formatSecondsToHHMMSS";
const PatrolMapFeatures = ({ stopPoint }) => {
const position = [stopPoint.latitude, stopPoint.longitude];
@@ -29,7 +30,7 @@ const PatrolMapFeatures = ({ stopPoint }) => {
position={position}
>
<Popup>
<Typography variant="button">مدت زمان توقف: {stopPoint.duration} ثانیه</Typography>
<Typography variant="button">مدت زمان توقف: {formatSecondsToHHMMSS(stopPoint.duration)}</Typography>
</Popup>
</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 { Marker, useMap } from "react-leaflet";
import AzmayeshActiveIcon from "@/assets/images/examine_marker_active.png";
import StopsInfo from "@/components/dashboard/roadPatrols/operator/RowActions/MachinePerformanceForm/StopsInfo";
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 MachinePerformanceContent = ({ machinesLists }) => {
const [selectedPoint, setSelectedPoint] = useState(null);
@@ -41,9 +44,8 @@ const MachinePerformanceContent = ({ machinesLists }) => {
return (
<>
<DialogContent>
<Stack direction={"row"} spacing={2} justifyContent={"space-between"}>
<Stack direction={"row"} spacing={4} justifyContent={"space-between"} alignItems={'center'}>
<StopsInfo
selectedPoint={selectedPoint}
staticData={{
cmmsMachineCode: machinesLists.cmms_machine_code,
fuelConsumption: machinesLists.fuelConsumption,
@@ -51,22 +53,94 @@ const MachinePerformanceContent = ({ machinesLists }) => {
accOnDuration: machinesLists.accOnDuration,
}}
/>
<Stack>
<Box sx={{ width: "400px", height: "400px" }}>
<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>
<Divider orientation="vertical" flexItem />
<Stack sx={{ flex: 1 }}>
<Stack spacing={1} sx={{ height: "300px", width: "100%" }}>
<Box
sx={{
p: 1,
border: "1px dashed",
borderColor: "divider",
borderRadius: 1,
height: "100%",
}}
>
<Box
sx={{
height: "100%",
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>
</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 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 (
<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" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<DirectionsCarIcon />}
icon={<QrCode2Icon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
کد خودرو
@@ -21,9 +25,42 @@ const StopsInfo = ({ selectedPoint, staticData }) => {
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{staticData.cmmsMachineCode || ""}
{staticData.cmmsMachineCode.machine_code || ""}
</Typography>
</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" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
@@ -43,7 +80,7 @@ const StopsInfo = ({ selectedPoint, staticData }) => {
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<DirectionsCarIcon />}
icon={<AddRoadIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
مسافت پیموده شده
@@ -72,56 +109,6 @@ const StopsInfo = ({ selectedPoint, staticData }) => {
{formatSecondsToHHMMSS(staticData?.accOnDuration)}
</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.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>
);
};

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

@@ -6,7 +6,7 @@ import { useState } from "react";
const MachinePerformanceForm = ({ row }) => {
const [openMachinesCodeDialog, setOpenMachinesCodeDialog] = useState(false);
const machineData = {
cmms_machine_code: row.original?.cmms_machines[0]?.machine_code,
cmms_machine_code: row.original?.cmms_machines[0],
resultCode: 0,
mileage: row.original?.distance,
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 { Marker, useMap } from "react-leaflet";
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 PinDropIcon from "@mui/icons-material/PinDrop";
import AccessAlarmsIcon from "@mui/icons-material/AccessAlarms";
import { formatSecondsToHHMMSS } from "@/core/utils/formatSecondsToHHMMSS";
const defaultIconSize = [35, 35];
const MachinePerformanceContent = ({ machinesLists }) => {
const [selectedPoint, setSelectedPoint] = useState(null);
@@ -41,9 +44,8 @@ const MachinePerformanceContent = ({ machinesLists }) => {
return (
<>
<DialogContent>
<Stack direction={"row"} spacing={2} justifyContent={"space-between"}>
<Stack direction={"row"} spacing={4} justifyContent={"space-between"} alignItems={'center'}>
<StopsInfo
selectedPoint={selectedPoint}
staticData={{
cmmsMachineCode: machinesLists.cmms_machine_code,
fuelConsumption: machinesLists.fuelConsumption,
@@ -51,26 +53,98 @@ const MachinePerformanceContent = ({ machinesLists }) => {
accOnDuration: machinesLists.accOnDuration,
}}
/>
<Stack>
<Box sx={{ width: "400px", height: "400px" }}>
<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>
<Divider orientation="vertical" flexItem />
<Stack sx={{ flex: 1 }}>
<Stack spacing={1} sx={{ height: "300px", width: "100%" }}>
<Box
sx={{
p: 1,
border: "1px dashed",
borderColor: "divider",
borderRadius: 1,
height: "100%",
}}
>
<Box
sx={{
height: "100%",
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>
</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 PinDropIcon from "@mui/icons-material/PinDrop";
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 ShowPlak from "@/core/components/ShowPlak";
const StopsInfo = ({ selectedPoint, staticData }) => {
return (
@@ -11,7 +15,7 @@ const StopsInfo = ({ selectedPoint, staticData }) => {
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<DirectionsCarIcon />}
icon={<QrCode2Icon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
کد خودرو
@@ -21,9 +25,42 @@ const StopsInfo = ({ selectedPoint, staticData }) => {
</Box>
<Divider sx={{ flex: 1, mx: 2 }} />
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.800" }}>
{staticData.cmmsMachineCode || ""}
{staticData.cmmsMachineCode.machine_code || ""}
</Typography>
</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" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
@@ -43,7 +80,7 @@ const StopsInfo = ({ selectedPoint, staticData }) => {
<Grid item xs={12} sm={12} sx={{ display: "flex", alignItems: "center" }}>
<Box sx={{ display: "flex", alignItems: "center" }}>
<Chip
icon={<DirectionsCarIcon />}
icon={<AddRoadIcon />}
label={
<Typography variant="body2" sx={{ fontWeight: 600, color: "grey.700" }}>
مسافت پیموده شده
@@ -125,4 +162,4 @@ const StopsInfo = ({ selectedPoint, staticData }) => {
</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 [openMachinesCodeDialog, setOpenMachinesCodeDialog] = useState(false);
const machineData = {
cmms_machine_code: row.original?.cmms_machines[0]?.machine_code,
cmms_machine_code: row.original?.cmms_machines[0],
resultCode: 0,
mileage: row.original?.distance,
accOnDuration: row.original?.vehicle_runtime,
@@ -48,4 +48,4 @@ const MachinePerformanceForm = ({ row }) => {
</>
);
};
export default MachinePerformanceForm;
export default MachinePerformanceForm;