@vtx/modals2 2.6.19 → 2.6.21

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

@@ -1,94 +0,0 @@
-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

@@ -1,37 +0,0 @@
-.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

@@ -1,100 +0,0 @@
-/**
- * 油耗信息
- */
-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

@@ -1,71 +0,0 @@
-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

@@ -1,67 +0,0 @@
-/**
- * 统计信息-列表
- */
-
-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

@@ -1,72 +0,0 @@
-.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

@@ -1,116 +0,0 @@
-/**
- * 车辆-统计信息
- */
-
-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

@@ -1,22 +0,0 @@
-.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);
-    }
-}