@vtx/modals2 2.6.19

package/src/vtx-car-modal/components/OilConsumption/OilLIne.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import ReactEcharts from 'echarts-for-react';
+import NoData from '../../../vm-nodata';
+import useSettings from '../../../vm-hooks/useSettings';
+
+interface LineTypes {
+    legends: string[];
+    names: string[];
+    values: any[];
+}
+
+export default function OilLine({ legends, names, values }: LineTypes) {
+    const { chartColor, chartFontColor } = useSettings();
+    const lineOption = {
+        color: chartColor,
+        tooltip: {
+            trigger: 'axis',
+        },
+        legend: {
+            show: true,
+            itemWith: 6,
+            itemHeight: 6,
+            textStyle: {
+                color: chartFontColor,
+                fontSize: 12,
+            },
+            data: legends || [],
+        },
+        grid: {
+            top: 28,
+            left: 24,
+            bottom: 12,
+            right: 36,
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                color: chartFontColor,
+            },
+            data: names || [],
+        },
+        yAxis: [
+            {
+                name: '(L)',
+                type: 'value',
+                nameTextStyle: {
+                    color: chartFontColor,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLabel: {
+                    color: chartFontColor,
+                },
+                axisLine: {
+                    show: true,
+                },
+                splitLine: {
+                    lineStyle: {
+                        type: 'dashed',
+                        color: 'rgba(151,151,151,0.28)',
+                    },
+                },
+            },
+        ],
+        series: [
+            {
+                type: 'line',
+                name: '油量',
+                data: values?.length > 0 ? values[0] : [],
+            },
+        ],
+    };
+
+    return (
+        <div style={{ textAlign: 'center' }}>
+            {names?.length > 0 ? (
+                <ReactEcharts
+                    option={lineOption}
+                    notMerge
+                    lazyUpdate
+                    style={{ height: '180px', width: '100%' }}
+                />
+            ) : (
+                <NoData style={{ height: '180px', width: '60%', margin: '0 auto' }} />
+            )}
+        </div>
+    );
+}

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

@@ -0,0 +1,37 @@
+.oil-consumption {
+    padding: 10px;
+
+    &-head {
+        display: flex;
+        justify-content: start;
+        &-filter {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        &-main {
+            margin-top: 24px;
+            display: flex;
+            flex-wrap: wrap;
+        }
+        &-summary {
+            padding: 20px;
+            width: 600px;
+            height: 234px;
+            margin-right: 10px;
+            background-color: var(--bg-color2);
+        }
+        &-oil {
+            padding: 20px;
+            width: 665px;
+            height: 234px;
+            background-color: var(--bg-color2);
+        }
+    }
+    &-main {
+        margin-top: 10px;
+        min-height: 400px;
+        padding: 16px;
+        background-color: var(--bg-color2);
+    }
+}

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

@@ -0,0 +1,100 @@
+/**
+ * 油耗信息
+ */
+import React from 'react';
+import { useSetState } from 'ahooks';
+import moment from 'moment';
+import SubTitle from '../../../vm-sub-title';
+import { VMRangePicker } from '../../../vm-filter';
+import ImageText from '../../../vm-image-text';
+import OilList from './List';
+import OilLine from './OilLIne';
+import { OilService } from '../../api';
+import useSettings from '../../../vm-hooks/useSettings';
+import './index.less';
+
+import ccts from '../../imgs/ccts.png';
+import zlc from '../../imgs/zlc.png';
+import zsh from '../../imgs/zsh.png';
+
+import cctsLight from '../../imgs/ccts_light.png';
+import zlcLight from '../../imgs/zlc_light.png';
+import zshLight from '../../imgs/zsh_light.png';
+
+interface OilConsumptionTypes {
+    id: string;
+}
+
+const OilConsumption: React.FC<OilConsumptionTypes> = props => {
+    const { isDark } = useSettings();
+    const { id } = props;
+    const nowDate = moment().format('YYYY-MM-DD');
+    const [state, setState] = useSetState({
+        startDate: moment()
+            .startOf('M')
+            .format('YYYY-MM-DD'),
+        endDate: nowDate,
+    });
+    const { startDate, endDate } = state;
+    const { summaryRes } = OilService.useSummary(id, startDate, endDate);
+    const { oilLineRes } = OilService.useOilLine(id, startDate, endDate);
+
+    const handleDateChange = (start: string, end: string) => {
+        setState({
+            startDate: start,
+            endDate: end,
+        });
+    };
+
+    return (
+        <div className="oil-consumption">
+            <div className="oil-consumption-head">
+                <div className="oil-consumption-head-summary">
+                    <div className="oil-consumption-head-filter">
+                        <SubTitle title="汇总统计" />
+                        <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 className="oil-consumption-head-main">
+                        <ImageText
+                            src={isDark ? ccts : cctsLight}
+                            name="出车天数"
+                            value={summaryRes?.daysOfCarOut || 0}
+                            unit="天"
+                            style={{ marginBottom: '24px' }}
+                        />
+                        <ImageText
+                            src={isDark ? zlc : zlcLight}
+                            name="总里程"
+                            value={summaryRes?.totalMileage || 0}
+                            unit="公里"
+                            style={{ marginBottom: '24px' }}
+                        />
+                        <ImageText
+                            src={isDark ? zsh : zshLight}
+                            name="总水耗"
+                            value={summaryRes?.totalOil || 0}
+                            unit="L"
+                        />
+                    </div>
+                </div>
+                <div className="oil-consumption-head-oil">
+                    <SubTitle title="油量分析" />
+                    <OilLine {...oilLineRes} />
+                </div>
+            </div>
+            <div className="oil-consumption-main">
+                <OilList id={id} startDate={startDate} endDate={endDate} />
+            </div>
+        </div>
+    );
+};
+export default OilConsumption;

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Calendar } from 'antd';
+import moment, { Moment } from 'moment';
+import { secondToFormatTime } from '../../../util';
+
+import mileImg from '../../imgs/calendar-mile.png';
+import hourImg from '../../imgs/calendar-hour.png';
+
+const Charts = ({ data }: { data: any }) => {
+    const getListData = (value: Moment) => {
+        let listData;
+        if (data?.length > 0) {
+            const list = data.map((ele: any) => {
+                return {
+                    reportDate: ele.reportDate ? moment(ele.reportDate).valueOf() : '',
+                    sumMileage: ele.sumMileage,
+                    driveDuration: secondToFormatTime(ele?.driveDuration / 1000 || 0),
+                };
+            });
+
+            const obj = list.find(
+                (ele: any) => ele.reportDate === moment(value.format('YYYY-MM-DD')).valueOf(),
+            );
+            if (obj?.sumMileage > 0) {
+                listData = { sumMileage: `${obj.sumMileage}km`, driveDuration: obj.driveDuration };
+            }
+        }
+
+        return listData || {};
+    };
+
+    const dateCellRender = (value: Moment) => {
+        const listData = getListData(value);
+        return (
+            <div
+                className="car-calendar"
+                style={{
+                    background: listData?.sumMileage
+                        ? 'linear-gradient(180deg, rgba(115, 255, 191, 0.8), rgba(0,0,0,0.1))'
+                        : 'transparent',
+                }}
+            >
+                {listData?.sumMileage && (
+                    <div className="car-calendar-item">
+                        <img src={mileImg} />
+                        <div>{listData?.sumMileage}</div>
+                    </div>
+                )}
+                {listData?.driveDuration && (
+                    <div className="car-calendar-item">
+                        <img src={hourImg} />
+                        <div>{listData?.driveDuration}</div>
+                    </div>
+                )}
+            </div>
+        );
+    };
+    return (
+        <div className="car-alarm-charts">
+            <Calendar
+                headerRender={() => {
+                    return null;
+                }}
+                dateCellRender={dateCellRender}
+                value={moment()}
+            />
+        </div>
+    );
+};
+
+export default Charts;

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

@@ -0,0 +1,67 @@
+/**
+ * 统计信息-列表
+ */
+
+import React from 'react';
+import VMTable from '../../../vm-table';
+
+const List = ({ data }: { data: any }) => {
+    const records = {
+        total: data?.length || 0,
+        rows: data,
+    };
+    const columns = [
+        {
+            title: '作业日期',
+            dataIndex: 'reportDate',
+            key: 'reportDate',
+        },
+        {
+            title: '首次点火时间',
+            dataIndex: 'firstFireTime',
+            key: 'firstFireTime',
+            render: (text: string) => <span>{text || '-'}</span>,
+        },
+        {
+            title: '最后点火时间',
+            dataIndex: 'lastFireTime',
+            key: 'lastFireTime',
+            render: (text: string) => <span>{text || '-'}</span>,
+        },
+        {
+            title: '点火时长',
+            dataIndex: 'fireDurationStr',
+            key: 'fireDurationStr',
+            render: (text: string) => <span>{text || '-'}</span>,
+        },
+        {
+            title: '出车时间',
+            dataIndex: 'firstRunTime',
+            key: 'firstRunTime',
+            render: (text: string) => <span>{text || '-'}</span>,
+        },
+        {
+            title: '收车时间',
+            dataIndex: 'lastRunTime',
+            key: 'lastRunTime',
+            render: (text: string) => <span>{text || '-'}</span>,
+        },
+    ];
+
+    const tableProps = {
+        pagination: {
+            total: records.total,
+            defaultPageSize: 10,
+        },
+        height: 440,
+        dataSource: records.rows,
+    };
+
+    return (
+        <div className="car-static-list">
+            <VMTable columns={columns} rowKey="id" {...tableProps} />
+        </div>
+    );
+};
+
+export default List;

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

@@ -0,0 +1,72 @@
+.car-static {
+    padding: 10px;
+
+    .car-main {
+        padding: 11px 16px;
+        background-color: var(--bg-color2);
+
+        .car-head {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+    }
+    &-charts {
+        margin: 24px auto;
+        text-align: center;
+    }
+    &-list {
+        min-height: 466px;
+    }
+}
+.car-calendar {
+    display: flex;
+    flex-direction: column;
+    color: var(--title-color);
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    padding-top: 34px;
+
+    &-item {
+        display: flex;
+        justify-content: start;
+        align-items: center;
+
+        img {
+            width: 26px;
+            height: 26px;
+            margin: 0 6px 0 18px;
+        }
+    }
+}
+.ant-picker-calendar,
+.ant-picker-calendar-full {
+    background-color: var(--bg-color2) !important;
+    .ant-picker-panel {
+        background: var(--calendar-bg) !important;
+    }
+    .ant-picker-body {
+        border: 1px solid var(--calendar-border);
+        padding: 0 !important;
+    }
+    .ant-picker-content thead {
+        background: var(--calendar-thead-bg);
+    }
+    .ant-picker-content th {
+        color: var(--info-color);
+    }
+    .ant-picker-panel .ant-picker-calendar-date {
+        color: var(--info-color);
+        border-top: 2px solid var(--calendar-border) !important;
+        margin: 0 1px !important;
+    }
+    .ant-picker-panel .ant-picker-cell:hover .ant-picker-calendar-date {
+        background: linear-gradient(0deg, rgba(77, 255, 186, 0.3), transparent) !important;
+    }
+    .ant-picker-calendar-date-today {
+        background: #73ffbf !important;
+    }
+}

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

@@ -0,0 +1,116 @@
+/**
+ * 车辆-统计信息
+ */
+
+import React from 'react';
+import { useSetState } from 'ahooks';
+import moment, { Moment } from 'moment';
+import { VMDatePicker } 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 StaticInfoTypes {
+    id: string;
+}
+
+const StaticInfo: React.FC<StaticInfoTypes> = props => {
+    const { id } = props;
+    const { isDark } = useSettings();
+
+    const [state, setState] = useSetState({
+        date: moment(),
+        tabKey: '1',
+    });
+    const { date, tabKey } = state;
+    const { dailyCarRunRes } = BaseService.useDailyCarRun(
+        id,
+        date.startOf('M').format('YYYY-MM-DD'),
+        date.endOf('M').format('YYYY-MM-DD'),
+    );
+
+    const handleDateChange = (date: Moment) => {
+        setState({
+            date: date,
+        });
+    };
+
+    return (
+        <div className="car-static">
+            <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">
+                        <VMDatePicker
+                            picker="month"
+                            value={date}
+                            onChange={(date: Moment) => {
+                                handleDateChange(date);
+                            }}
+                        />
+                    </div>
+                </div>
+                {tabKey === '1' && <Charts data={dailyCarRunRes} />}
+                {tabKey === '2' && <List data={dailyCarRunRes} />}
+            </div>
+        </div>
+    );
+};
+
+export default StaticInfo;

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

@@ -0,0 +1,22 @@
+.water-consumption {
+    padding: 10px;
+
+    &-head {
+        padding: 20px;
+        background-color: var(--bg-color2);
+        &-filter {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        &-main {
+            display: flex;
+        }
+    }
+    &-main {
+        margin-top: 10px;
+        padding: 16px;
+        min-height: 420px;
+        background-color: var(--bg-color2);
+    }
+}