@vtx/modals2 2.6.19

package/src/vtx-car-modal/components/WorkInfo/WorkLjsy.tsx

@@ -0,0 +1,250 @@
+import React from 'react';
+import { useSetState } from 'ahooks';
+import moment from 'moment';
+import useSettings from '../../../vm-hooks/useSettings';
+import { VMRangePicker } from '../../../vm-filter';
+import VMTable from '../../../vm-table';
+import ImageText from '../../../vm-image-text';
+import SubTitle from '../../../vm-sub-title';
+import Wcl from './Wcl';
+import { BaseService, WorkServicve } from '../../api';
+
+import ljsjdw from '../../imgs/ljsjdw.png';
+import pjwcl from '../../imgs/pjwcl.png';
+import ljsjts from '../../imgs/ljsjts.png';
+import ljsjzl from '../../imgs/ljsjzl.png';
+
+import ljsjdwLight from '../../imgs/ljsjdw_light.png';
+import pjwclLight from '../../imgs/pjwcl_light.png';
+import ljsjtsLight from '../../imgs/ljsjts_light.png';
+import ljsjzlLight from '../../imgs/ljsjzl_light.png';
+
+export default function WorkLjsy({ id }: { id: string }) {
+    const { isDark } = useSettings();
+    const getSrc = (code: string) => {
+        let obj: { [key: string]: string } = {};
+        if (isDark) {
+            obj = {
+                ljsjdw: ljsjdw,
+                pjwcl: pjwcl,
+                ljsjts: ljsjts,
+                ljsjzl: ljsjzl,
+            };
+        } else {
+            obj = {
+                ljsjdw: ljsjdwLight,
+                pjwcl: pjwclLight,
+                ljsjts: ljsjtsLight,
+                ljsjzl: ljsjzlLight,
+            };
+        }
+        return obj[code];
+    };
+    const [state, setState] = useSetState({
+        startDate: moment()
+            .startOf('M')
+            .format('YYYY-MM-DD'),
+        endDate: moment().format('YYYY-MM-DD'),
+        pagination: {
+            current: 1,
+            pageSize: 10,
+            total: 0,
+        },
+        sort: '',
+    });
+    const { startDate, endDate, pagination, sort } = state;
+
+    const { summaryLjsy } = WorkServicve.useWorkSummaryLjsy(id, startDate, endDate);
+
+    const { workAnaLjsyRes } = BaseService.useWorkAnaLjsy(
+        id,
+        startDate,
+        endDate,
+        summaryLjsy?.avgCompletionRate >= 0,
+    );
+    const { names, values } = workAnaLjsyRes;
+
+    const handleDateChange = (start: string, end: string) => {
+        setState({
+            startDate: start,
+            endDate: end,
+        });
+    };
+
+    const { recordLjsyRes } = WorkServicve.useRecordLjsy(
+        id,
+        `${startDate} 00:00:00`,
+        `${endDate} 23:59:59`,
+        pagination.current - 1,
+        sort,
+    );
+
+    const columns = [
+        {
+            title: '收集点名称',
+            dataIndex: 'collectPointName',
+            key: 'collectPointName',
+            width: 160,
+            ellipsis: true,
+        },
+
+        {
+            title: '收集时间',
+            dataIndex: 'actualCollectTime',
+            key: 'actualCollectTime',
+            sorter: true,
+        },
+        // {
+        //     title: '实收次数/应收次数',
+        //     dataIndex: 'collectNums',
+        //     key: 'collectNums',
+        // },
+        {
+            title: '收集桶数',
+            dataIndex: 'bucketNum',
+            key: 'bucketNum',
+            render: (text: number) => {
+                return text ? text : 0;
+            },
+        },
+        {
+            title: '收集重量(kg)',
+            dataIndex: 'weight',
+            key: 'weight',
+            render: (text: number) => {
+                return text ? text : 0;
+            },
+        },
+        {
+            title: '是否超时',
+            dataIndex: 'beenOverTime',
+            key: 'beenOverTime',
+            render: (text: boolean) => {
+                return (
+                    <span style={{ color: text ? '#FFEF41' : '#35EAFF' }}>
+                        {text ? '是' : '否'}
+                    </span>
+                );
+            },
+        },
+        {
+            title: '是否任务内',
+            dataIndex: 'beenTask',
+            key: 'beenTask',
+            render: (text: boolean) => {
+                return text ? '是' : '否';
+            },
+        },
+    ];
+
+    const pageChange = (page: number) => {
+        setState({
+            pagination: {
+                ...pagination,
+                current: page,
+            },
+        });
+    };
+
+    const handleTableChange = (sorter: any) => {
+        setState({
+            sort: `collectDay,${sorter.order === 'ascend' ? 'ASC' : 'DESC'}`,
+        });
+    };
+
+    const tableProps = {
+        pagination: {
+            ...pagination,
+            total: recordLjsyRes?.total || 0,
+            defaultPageSize: 10,
+            onChange: pageChange,
+        },
+        handleTableChange,
+        height: summaryLjsy?.avgCompletionRate >= 0 ? 240 : 360,
+        dataSource: recordLjsyRes?.rows,
+    };
+    return (
+        <div>
+            <div className="car-work-head">
+                {!summaryLjsy?.avgCompletionRate && summaryLjsy?.avgCompletionRate !== 0 ? (
+                    <SubTitle title="汇总信息" />
+                ) : (
+                    <div></div>
+                )}
+                <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="car-work-content">
+                {summaryLjsy?.avgCompletionRate >= 0 ? (
+                    <div className="car-work-summary">
+                        <div className="car-work-summary-left">
+                            <SubTitle title="汇总信息" />
+                            <div className="car-work-summary-relation-item">
+                                <ImageText
+                                    src={getSrc('ljsjdw')}
+                                    name="累计收集点位"
+                                    value={summaryLjsy?.collectPointNum || 0}
+                                    unit="个"
+                                />
+                                <ImageText
+                                    src={getSrc('pjwcl')}
+                                    name="平均完成率"
+                                    value={summaryLjsy.avgCompletionRate}
+                                    unit="%"
+                                />
+                                <ImageText
+                                    src={getSrc('ljsjts')}
+                                    name="累计收集桶数"
+                                    value={summaryLjsy?.bucketNum || 0}
+                                    unit="个"
+                                />
+                                <ImageText
+                                    src={getSrc('ljsjzl')}
+                                    name="累计收集重量"
+                                    value={summaryLjsy?.weight || 0}
+                                    unit="kg"
+                                />
+                            </div>
+                        </div>
+                        <div className="car-work-summary-relation-chart">
+                            <SubTitle title="完成率分析" />
+                            <Wcl names={names} values={values?.length > 2 ? values[2] : []} />
+                        </div>
+                    </div>
+                ) : (
+                    <div className="car-work-summary-norelation">
+                        <ImageText
+                            src={getSrc('ljsjdw')}
+                            name="累计收集点位"
+                            value={summaryLjsy?.collectPointNum || 0}
+                            unit="个"
+                        />
+                        <ImageText
+                            src={getSrc('ljsjts')}
+                            name="累计收集桶数"
+                            value={summaryLjsy?.bucketNum || 0}
+                            unit="个"
+                        />
+                        <ImageText
+                            src={getSrc('ljsjzl')}
+                            name="累计收集重量"
+                            value={summaryLjsy?.weight || 0}
+                            unit="kg"
+                        />
+                    </div>
+                )}
+            </div>
+            <div className="car-work-table">
+                <VMTable columns={columns} {...tableProps} />
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,62 @@
+.car-work {
+    padding: 10px;
+    &-head {
+        padding: 10px 20px;
+        background-color: var(--bg-color2);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    &-content {
+        background-color: var(--bg-color2);
+    }
+    &-summary {
+        padding: 0 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        &-left {
+           width: 45%;
+        }
+    }
+    &-summary-nopb {
+        padding: 10px 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    &-summary-pb {
+        padding: 0 20px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        &-item {
+            width: 50%;
+            height: 200px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+    }
+    &-summary-norelation {
+        padding: 24px 0;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+    }
+    &-summary-relation-item {
+        height: 200px;
+        display: flex;
+        flex-wrap: wrap;
+    }
+    &-summary-relation-chart {
+        width: 55%;
+    }
+    &-table {
+        min-height: 400px;
+        margin-top: 10px;
+        padding: 10px 20px;
+        background-color: var(--bg-color2);
+    }
+}

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

@@ -0,0 +1,23 @@
+/**
+ * 作业信息-机械化-垃圾收运
+ */
+import React from 'react';
+import WorkJxh from './WorkJxh';
+import WorkLjsy from './WorkLjsy';
+import './index.less';
+
+interface WorkInfoPropTypes {
+    actionType: 'ACTION_JXH' | 'ACTION_LJSY';
+    id: string;
+}
+
+const WorkInfo: React.FC<WorkInfoPropTypes> = props => {
+    const { id, actionType } = props;
+    const doms = {
+        ACTION_JXH: <WorkJxh id={id} />,
+        ACTION_LJSY: <WorkLjsy id={id} />,
+    };
+    return <div className="car-work">{doms[actionType]}</div>;
+};
+
+export default WorkInfo;

package/src/vtx-car-modal/components/index.ts

@@ -0,0 +1,17 @@
+import BaseInfo from './BaseInfo';
+import CarAlarmInfo from './AlarmInfo';
+import StaticInfo from './StaticInfo';
+import WaterConsumption from './WaterConsumption';
+import OilConsumption from './OilConsumption';
+import Maintenance from './Maintenance';
+import WorkInfo from './WorkInfo';
+
+export {
+    BaseInfo,
+    CarAlarmInfo,
+    StaticInfo,
+    WaterConsumption,
+    OilConsumption,
+    Maintenance,
+    WorkInfo,
+};

package/src/vtx-car-modal/demo/demo1.tsx

@@ -0,0 +1,32 @@
+import { Button } from 'antd';
+import React, { useState } from 'react';
+import { VtxCarModal } from '@vtx/modals';
+
+export default function Demo() {
+    const [visible, setVisible] = useState(false);
+    return (
+        <div style={{ height: '150px' }}>
+            <Button
+                type="primary"
+                onClick={() => {
+                    setVisible(true);
+                }}
+            >
+                暗色
+            </Button>
+            {visible && (
+                <VtxCarModal
+                    visible={visible}
+                    theme="dark"
+                    title="WE217机械化车"
+                    id="493e961206b84d5886bf0d8f83c29195"
+                    // title="收运车"
+                    // id="7c5c774630f749c2bc2da19c71e76b12"
+                    onCancel={() => {
+                        setVisible(false);
+                    }}
+                />
+            )}
+        </div>
+    );
+}

package/src/vtx-car-modal/demo/demo2.tsx

@@ -0,0 +1,32 @@
+import { Button } from 'antd';
+import React, { useState } from 'react';
+import { VtxCarModal } from '@vtx/modals';
+
+export default function Demo() {
+    const [visible, setVisible] = useState(false);
+    return (
+        <div style={{ height: '150px' }}>
+            <Button
+                type="primary"
+                onClick={() => {
+                    setVisible(true);
+                }}
+            >
+                浅色
+            </Button>
+            {visible && (
+                <VtxCarModal
+                    visible={visible}
+                    theme="dark"
+                    // title="解化车"
+                    // id="d440b2ebb04d4bbaa44aa1bb6433d3f4"
+                    title="收运车E6A621"
+                    id="99b30ff049504ea2971c6a70e4760ac3"
+                    onCancel={() => {
+                        setVisible(false);
+                    }}
+                />
+            )}
+        </div>
+    );
+}

package/src/vtx-car-modal/index.md

@@ -0,0 +1,20 @@
+---
+nav:
+    title: 弹窗
+    path: /modal
+group:
+    title: 弹窗
+    path: /modal
+    order: 2
+---
+
+# 车辆弹窗
+
+Demo:
+
+<code src="./demo/demo1.tsx"></code>
+
+浅色：
+<code src="./demo/demo2.tsx"></code>
+
+[更多技巧](https://d.umijs.org/guide/demo-principle)