@vtx/modals2 2.6.19

package/src/vtx-car-modal/components/AlarmInfo/List.tsx

@@ -0,0 +1,155 @@
+/**
+ * 报警信息-列表
+ */
+
+import React, { useEffect } from 'react';
+import { useSetState } from 'ahooks';
+import VMTable from '../../../vm-table';
+import { SubTabsLine } from '../../../vm-sub-tabs';
+import { AlarmService } from '../../api';
+interface ListProps {
+    id: string;
+    carCode: string;
+    startDate: string;
+    endDate: string;
+}
+
+interface alarmType {
+    alarmType: string;
+    alarmTypeName: string;
+    totalCount: number;
+}
+
+interface AlarmTabs {
+    key: string;
+    label: string;
+}
+
+interface PaginationType {
+    current: number;
+    pageSize: number;
+    total: number;
+}
+interface StateType {
+    alarmStrategyName: string;
+    alarmTabs: Array<AlarmTabs>;
+    pagination: PaginationType;
+}
+
+const List = (props: ListProps) => {
+    const { id, carCode, startDate, endDate } = props;
+    const [state, setState] = useSetState<StateType>({
+        alarmStrategyName: 'all',
+        alarmTabs: [],
+        pagination: {
+            current: 1,
+            pageSize: 10,
+            total: 0,
+        },
+    });
+    const { alarmTabs, alarmStrategyName, pagination } = state;
+    const { alarmTypes } = AlarmService.useAlarmType(id, startDate, endDate);
+    const { alarmRecord } = AlarmService.useAlarmList(
+        carCode,
+        alarmStrategyName === 'all' ? '' : alarmStrategyName,
+        startDate,
+        endDate,
+        pagination.current,
+    );
+
+    useEffect(() => {
+        if (Array.isArray(alarmTypes?.summary) && alarmTypes.summary.length > 0) {
+            let alarmTabs: AlarmTabs[] = [
+                { key: 'all', label: `全部(${alarmTypes?.totalCount || 0})` },
+            ];
+            alarmTypes?.summary.forEach((ele: alarmType) => {
+                alarmTabs.push({
+                    key: ele.alarmType,
+                    label: `${ele.alarmTypeName}(${ele.totalCount})`,
+                });
+            });
+            setState({
+                alarmTabs: alarmTabs,
+            });
+        }
+    }, [alarmTypes]);
+
+    const columns = [
+        {
+            title: '报警类型',
+            dataIndex: 'type',
+            key: 'type',
+        },
+        {
+            title: '报警等级',
+            dataIndex: 'productName',
+            key: 'productName',
+        },
+        {
+            title: '报警开始时间',
+            dataIndex: 'sourceUnit',
+            key: 'sourceUnit',
+        },
+        {
+            title: '报警结束时间',
+            dataIndex: 'area',
+            key: 'area',
+        },
+        {
+            title: '报警时长',
+            dataIndex: 'grossWeight',
+            key: 'grossWeight',
+        },
+        {
+            title: '当前速度(km/h)',
+            dataIndex: 'tareWeight',
+            key: 'tareWeight',
+        },
+        {
+            title: '报警地址',
+            dataIndex: 'netWeight',
+            key: 'netWeight',
+        },
+    ];
+
+    const pageChange = (page: number) => {
+        setState({
+            pagination: {
+                ...pagination,
+                current: page,
+            },
+        });
+    };
+
+    const tableProps = {
+        pagination: {
+            ...pagination,
+            total: alarmRecord?.total || 0,
+            defaultPageSize: 10,
+            onChange: pageChange,
+        },
+        height: 440,
+        dataSource: alarmRecord?.rows || [],
+    };
+
+    return (
+        <div className="car-main-list">
+            {alarmTabs?.length > 0 && (
+                <SubTabsLine
+                    items={alarmTabs}
+                    activeKey={alarmStrategyName}
+                    onChange={key => {
+                        setState({
+                            alarmStrategyName: key,
+                        });
+                    }}
+                />
+            )}
+            <div>
+                <VMTable columns={columns} rowKey="id" {...tableProps} />
+            </div>
+        </div>
+    );
+};
+
+export default List;

package/src/vtx-car-modal/components/AlarmInfo/index.less

@@ -0,0 +1,22 @@
+.car-alarm {
+    padding: 10px;
+
+    .car-main {
+        padding: 11px 16px;
+        background-color: var(--bg-color2);
+        min-height: 500px;
+
+        .car-head{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        &-list {
+            min-height: 550px;
+        }
+    }
+    &-charts {
+        margin: 24px auto;
+        text-align: center;
+    }
+}

package/src/vtx-car-modal/components/AlarmInfo/index.tsx

@@ -0,0 +1,132 @@
+/**
+ * 车辆-报警信息
+ */
+
+import React from 'react';
+import { useSetState } from 'ahooks';
+import moment from 'moment';
+import { VMRangePicker } from '../../../vm-filter';
+import SubTabs, { SubTabPane } from '../../../vm-sub-tabs';
+import Charts from './Charts';
+import List from './List';
+import useSettings from '../../../vm-hooks/useSettings';
+import { BaseService } from '../../api';
+import './index.less';
+
+import chart from '../../../vm-appraisal-info/imgs/chart.png';
+import chartActive from '../../../vm-appraisal-info/imgs/chart_active.png';
+import chartActiveLight from '../../../vm-appraisal-info/imgs/chart_active_light.png';
+import list from '../../../vm-appraisal-info/imgs/list.png';
+import listActive from '../../../vm-appraisal-info/imgs/list_active.png';
+import listActiveLight from '../../../vm-appraisal-info/imgs/list_active_light.png';
+
+interface CarAlarmTypes {
+    id: string;
+    carCode: string;
+}
+
+const CarAlarmInfo: React.FC<CarAlarmTypes> = props => {
+    const { id, carCode } = props;
+    const { isDark } = useSettings();
+    const [state, setState] = useSetState({
+        startDate: moment()
+            .startOf('M')
+            .format('YYYY-MM-DD'),
+        endDate: moment().format('YYYY-MM-DD'),
+        tabKey: '1',
+    });
+    const { startDate, endDate, tabKey } = state;
+
+    const { todayRunRes } = BaseService.useTodayRun(id, startDate, endDate);
+
+    const handleDateChange = (start: string, end: string) => {
+        setState({
+            startDate: start,
+            endDate: end,
+        });
+    };
+
+    return (
+        <div className="car-alarm">
+            <div className="car-main">
+                <div className="car-head">
+                    <SubTabs
+                        onChange={(key: string) => {
+                            setState({
+                                tabKey: key,
+                            });
+                        }}
+                        activeKey={tabKey}
+                    >
+                        {[
+                            {
+                                name: (
+                                    <div>
+                                        <img
+                                            src={
+                                                tabKey === '1'
+                                                    ? isDark
+                                                        ? listActive
+                                                        : listActiveLight
+                                                    : list
+                                            }
+                                        />
+                                        图表
+                                    </div>
+                                ),
+                                key: '1',
+                            },
+                            {
+                                name: (
+                                    <div>
+                                        <img
+                                            src={
+                                                tabKey === '2'
+                                                    ? isDark
+                                                        ? chartActive
+                                                        : chartActiveLight
+                                                    : chart
+                                            }
+                                        />
+                                        列表
+                                    </div>
+                                ),
+                                key: '2',
+                            },
+                        ].map((ele: any) => (
+                            <SubTabPane subKey={ele.key} key={ele.key} tab={ele.name} />
+                        ))}
+                    </SubTabs>
+                    <div className="car-head-date">
+                        <VMRangePicker
+                            value={[moment(startDate), moment(endDate)]}
+                            onChange={(dates: any) =>
+                                dates &&
+                                handleDateChange(
+                                    moment(dates[0]).format('YYYY-MM-DD'),
+                                    moment(dates[1]).format('YYYY-MM-DD'),
+                                )
+                            }
+                        />
+                    </div>
+                </div>
+                {tabKey === '1' && (
+                    <Charts
+                        pieData={todayRunRes?.alarmGroupByType?.items || []}
+                        lineData={todayRunRes?.alarmGroupByDayChart || {}}
+                    />
+                )}
+                {tabKey === '2' && (
+                    <List
+                        id={id}
+                        carCode={carCode}
+                        startDate={`${startDate} 00:00:00`}
+                        endDate={`${endDate} 23:59:59`}
+                    />
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default CarAlarmInfo;

package/src/vtx-car-modal/components/BaseInfo/Charts.tsx

@@ -0,0 +1,84 @@
+/**
+ * 左侧统计图片
+ */
+
+import React from 'react';
+import moment from 'moment';
+import useSettings from '../../../vm-hooks/useSettings';
+import { BaseService } from '../../api';
+
+import dqsd from '../../imgs/dqsd.png';
+import syyl from '../../imgs/syyl.png';
+import jrxs from '../../imgs/jrxs.png';
+
+import dqsdLight from '../../imgs/dqsd_light.png';
+import syylLight from '../../imgs/syyl_light.png';
+import jrxsLight from '../../imgs/jrxs_light.png';
+
+interface ChartsProps {
+    id: string;
+    mileage: number;
+    gpsSpeed: number;
+}
+
+export default function Charts({ id, mileage, gpsSpeed }: ChartsProps) {
+    const { isDark } = useSettings();
+    const { dailySummaryJxh } = BaseService.useDailySummaryJxh(id, moment().format('YYYY-MM-DD'));
+    return (
+        <>
+            <div className="car-base-left--charts">
+                <div className="car-base-left--charts-item">
+                    <div className="car-base-left--charts-item-chart">
+                        <img src={isDark ? dqsd : dqsdLight} />
+                    </div>
+                    <div>
+                        <div className="car-base-left--charts-item-name">当前速度</div>
+                        <div className="car-base-left--charts-item-value">
+                            <span>{gpsSpeed}</span>km/h
+                        </div>
+                    </div>
+                </div>
+                <div className="car-base-left--charts-item">
+                    <div className="car-base-left--charts-item-chart">
+                        <img src={isDark ? syyl : syylLight} />
+                    </div>
+                    <div>
+                        <div className="car-base-left--charts-item-name">剩余油量</div>
+                        <div className="car-base-left--charts-item-value">
+                            <span>30</span>L
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="car-base-left-jrxs">
+                <div>
+                    <img src={isDark ? jrxs : jrxsLight} />
+                </div>
+                <div className="car-base-left-jrxs-right">
+                    <div>
+                        <div className="jrxs-name">今日行驶</div>
+                        <div className="jrxs-value">
+                            <span>{mileage}</span>km
+                        </div>
+                    </div>
+                    {dailySummaryJxh?.planMileage && (
+                        <>
+                            <div>
+                                <div className="jrxs-name">今日作业</div>
+                                <div className="jrxs-value">
+                                    <span>{dailySummaryJxh?.workMileage?.toFixed(2) || 0}</span>km
+                                </div>
+                            </div>
+                            <div>
+                                <div className="jrxs-name">今日排班</div>
+                                <div className="jrxs-value">
+                                    <span>{dailySummaryJxh?.planMileage || 0}</span>km
+                                </div>
+                            </div>
+                        </>
+                    )}
+                </div>
+            </div>
+        </>
+    );
+}

package/src/vtx-car-modal/components/BaseInfo/TodayRun.tsx

@@ -0,0 +1,84 @@
+/**
+ * 今日运行-通用
+ */
+import React from 'react';
+import moment from 'moment';
+import VMTable from '../../../vm-table';
+import useSettings from '../../../vm-hooks/useSettings';
+import { BaseService } from '../../api';
+
+import outTime from '../../imgs/outTime.png';
+import runTime from '../../imgs/runTime.png';
+
+import outTimeLight from '../../imgs/outTime_light.png';
+import runTimeLight from '../../imgs/runTime_light.png';
+
+export default function TodayRun(props: { id: string; data: Array<any> }) {
+    const { isDark } = useSettings();
+    const { id, data } = props;
+    const { dailyCarRunRes } = BaseService.useDailyCarRun(
+        id,
+        moment().format('YYYY-MM-DD'),
+        moment().format('YYYY-MM-DD'),
+    );
+    const columns = [
+        {
+            title: '报警类型',
+            dataIndex: 'alarmTypeName',
+            key: 'alarmTypeName',
+            width: 100,
+            ellipsis: true,
+        },
+        {
+            title: '报警时间',
+            dataIndex: 'day',
+            key: 'day',
+            width: 100,
+            render: (_text: any, record: any) => {
+                return `${moment(record.detail.alarmBeginTime).format('HH:mm:ss')}-${moment(
+                    record.detail.alarmEndTime,
+                ).format('HH:mm:ss')}`;
+            },
+        },
+        {
+            title: '报警内容',
+            dataIndex: 'alarmTypeName',
+            key: 'alarmTypeName',
+            ellipsis: true,
+            render: (_text: any, record: any) => {
+                return record.detail.alarmTypeName;
+            },
+        },
+    ];
+    const tableProps = {
+        height: 220,
+        paganitation: false,
+        dataSource: data,
+    };
+
+    return (
+        <div className="today-run">
+            <div className="today-run-head">
+                <div className="today-run-head-item">
+                    <img src={isDark ? outTime : outTimeLight} />
+                    <div>
+                        <div className="today-run-head-item--name">出车时间</div>
+                        <div className="today-run-head-item--value">
+                            {dailyCarRunRes?.length > 0 ? dailyCarRunRes[0]?.firstRunTime || 0 : 0}
+                        </div>
+                    </div>
+                </div>
+                <div className="today-run-head-item">
+                    <img src={isDark ? runTime : runTimeLight} />
+                    <div>
+                        <div className="today-run-head-item--name">运行时长</div>
+                        <div className="today-run-head-item--value">
+                            {dailyCarRunRes?.length > 0 ? dailyCarRunRes[0]?.driveDurationStr : 0}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <VMTable columns={columns} isIndex={false} rowKey="index" {...tableProps} />
+        </div>
+    );
+}

package/src/vtx-car-modal/components/BaseInfo/TodayWorkJXH.tsx

@@ -0,0 +1,54 @@
+/**
+ * 今日运行
+ */
+import React from 'react';
+import moment from 'moment';
+import Progress from 'antd/es/progress';
+import useSettings from '../../../vm-hooks/useSettings';
+import NoData from '../../../vm-nodata';
+import { BaseService } from '../../api';
+
+export default function TodayWorkJXH(props: any) {
+    const { isDark } = useSettings();
+    const { id } = props;
+    const { todayRunJxhRes } = BaseService.useTodayWorkJxh(id, moment().format('YYYY-MM-DD'));
+
+    return (
+        <div className="today-run-jxh">
+            {todayRunJxhRes?.length > 0 ? (
+                todayRunJxhRes.map((ele: any, index: number) => (
+                    <div className="today-run-jxh-item" key={index}>
+                        <div className="today-run-jxh--name">{ele.roadName}</div>
+                        <div className="today-run-jxh--progress">
+                            <Progress
+                                strokeLinecap="butt"
+                                percent={ele?.completePercent || 0}
+                                // strokeColor={{
+                                //     '0%': '#46E8C5',
+                                //     '100%': '#55A591',
+                                // }}
+                                // trailColor="#444B59"
+                                strokeColor={
+                                    isDark
+                                        ? {
+                                              '0%': '#46E8C5',
+                                              '100%': '#55A591',
+                                          }
+                                        : '#1890ff'
+                                }
+                                trailColor={isDark ? '#444B59' : '#D1D5D9'}
+                                strokeWidth={6}
+                                showInfo={false}
+                            />
+                        </div>
+                        <div className="today-run-jxh--value">{`${ele?.completePercent || 0}%(${
+                            ele?.workMileage
+                        }km/${ele?.totalMileage}km)`}</div>
+                    </div>
+                ))
+            ) : (
+                <NoData />
+            )}
+        </div>
+    );
+}

package/src/vtx-car-modal/components/BaseInfo/TodayWorkLJSY.tsx

@@ -0,0 +1,112 @@
+/**
+ * 今日作业-垃圾收运
+ */
+import React from 'react';
+import moment from 'moment';
+import VMTable from '../../../vm-table';
+import ImageText from '../../../vm-image-text';
+import useSettings from '../../../vm-hooks/useSettings';
+import { BaseService } from '../../api';
+
+import ysdw from '../../imgs/ysdw.png';
+import ywcdw from '../../imgs/ywcdw.png';
+import wcl from '../../imgs/wcl.png';
+
+import ysdwLight from '../../imgs/ysdw_light.png';
+import ywcdwLight from '../../imgs/ywcdw_light.png';
+import wclLight from '../../imgs/wcl_light.png';
+
+export default function TodayWorkLJSY({ id }: { id: string }) {
+    const { isDark } = useSettings();
+    const { todayRunLjsyRes } = BaseService.useTodayWorkLjsy(id, moment().format('YYYY-MM-DD'));
+
+    const getSrc = (code: string) => {
+        let obj: { [key: string]: string } = {};
+        if (isDark) {
+            obj = {
+                ysdw: ysdw,
+                ywcdw: ywcdw,
+                wcl: wcl,
+            };
+        } else {
+            obj = {
+                ysdw: ysdwLight,
+                ywcdw: ywcdwLight,
+                wcl: wclLight,
+            };
+        }
+        return obj[code];
+    };
+
+    const data = [
+        {
+            src: getSrc('ysdw'),
+            name: '应收点位',
+            value: todayRunLjsyRes?.planCollectPointNum || 0,
+            unit: '个',
+        },
+        {
+            src: getSrc('ywcdw'),
+            name: '已收点位',
+            value: todayRunLjsyRes?.collectPointNum || 0,
+            unit: '个',
+        },
+        {
+            src: getSrc('wcl'),
+            name: '完成率',
+            value: todayRunLjsyRes?.completeRate || 0,
+            unit: '%',
+        },
+    ];
+
+    const columns = [
+        {
+            title: '收集点',
+            dataIndex: 'collectPointName',
+            key: 'collectPointName',
+            width: 150,
+            ellipsis: true,
+        },
+        {
+            title: '收集次数',
+            dataIndex: 'collectNum',
+            key: 'collectNum',
+            width: 80,
+        },
+        {
+            title: '收集桶数',
+            dataIndex: 'bucketNum',
+            key: 'bucketNum',
+            width: 80,
+        },
+        {
+            title: '收集重量',
+            dataIndex: 'weight',
+            key: 'weight',
+            width: 80,
+        },
+    ];
+    const tableProps = {
+        height: todayRunLjsyRes?.planCollectPointNum > 0 ? 180 : 246,
+        paganitation: false,
+        dataSource: todayRunLjsyRes?.details || [],
+    };
+
+    return (
+        <>
+            {/* 关联收集点 */}
+            {todayRunLjsyRes?.planCollectPointNum > 0 && (
+                <div className="ljsy-summary">
+                    {data?.map((ele, index: number) => (
+                        <ImageText
+                            key={index}
+                            {...ele}
+                            style={{ margin: '0 0 12px 0', width: '33.3333%' }}
+                        />
+                    ))}
+                </div>
+            )}
+            <VMTable columns={columns} isIndex={false} rowKey="index" {...tableProps} />
+        </>
+    );
+}