@vtx/modals2 2.6.20 → 2.6.21

package/src/vm-nodata/index.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default function NoData({ style = {} }: { style?: React.CSSProperties }) {
-    return <img style={style} alt="暂无数据" src={require('./imgs/default.png')} />;
-}

package/src/vm-repair-maintain/RmInfoSummary.tsx

@@ -1,71 +0,0 @@
-/**
- * 维保信息汇总
- */
-import React from 'react';
-import SubTitle from '../vm-sub-title';
-import useSettings from '../vm-hooks/useSettings';
-
-import count from './imgs/count.png';
-import amount from './imgs/amount.png';
-
-import countLight from './imgs/count_light.png';
-import amountLight from './imgs/amount_light.png';
-
-interface typeProps {
-    data: {
-        thisYearCount: number;
-        thisYearFee: number;
-        thisYearOnLastYearCount: number;
-        thisYearOnLastYearFee: number;
-    };
-}
-
-const RmInfoSummary = (props: typeProps) => {
-    const { data } = props;
-    const { theme } = useSettings();
-    return (
-        <div>
-            <SubTitle title="维保信息汇总" />
-            <div className="rm-summary">
-                <div className="rm-summary-item">
-                    <img src={theme === 'dark' ? count : countLight} />
-                    <div>
-                        <div className="rm-summary-item--name">年度维保总次数</div>
-                        <div className="rm-summary-item--value">
-                            <span>{data?.thisYearCount || 0}</span>
-                            {' 次'}
-                            <div className="rm-summary-item--value-compare">
-                                年同比 {data?.thisYearOnLastYearCount || 0}%
-                                {data?.thisYearOnLastYearCount >= 100 ? (
-                                    <div className="triangle-up"></div>
-                                ) : (
-                                    <div className="triangle-down"></div>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div className="rm-summary-item">
-                    <img src={theme === 'dark' ? amount : amountLight} />
-                    <div>
-                        <div className="rm-summary-item--name">年度维保总金额</div>
-                        <div className="rm-summary-item--value">
-                            <span>{data?.thisYearFee || 0}</span>
-                            {' 元'}
-                            <div className="rm-summary-item--value-compare">
-                                年同比 {data?.thisYearOnLastYearFee || 0}%
-                                {data?.thisYearOnLastYearFee >= 100 ? (
-                                    <div className="triangle-up"></div>
-                                ) : (
-                                    <div className="triangle-down"></div>
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default RmInfoSummary;

package/src/vm-repair-maintain/RmMonthTrend.tsx

@@ -1,126 +0,0 @@
-/**
- * 月度趋势分析
- */
-import React from 'react';
-import ReactEcharts from 'echarts-for-react';
-import SubTitle from '../vm-sub-title';
-import useSettings from '../vm-hooks/useSettings';
-
-interface TypeProps {
-    data: {
-        legends: Array<string>;
-        names: Array<string>;
-        values: Array<any>;
-    };
-}
-
-const RmMonthTrend = ({ data }: TypeProps) => {
-    const { legends, names, values } = data;
-    const { chartColor, chartFontColor } = useSettings();
-    const option = {
-        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: 24,
-            right: 24,
-            containLabel: true,
-        },
-        xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            axisTick: {
-                show: false,
-            },
-            axisLabel: {
-                color: chartFontColor,
-            },
-            data: names || [],
-        },
-        yAxis: [
-            {
-                name: '次数(次)',
-                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)',
-                    },
-                },
-            },
-            // {
-            //     name: '金额(元)',
-            //     type: 'value',
-            //     nameTextStyle: {
-            //         color,
-            //     },
-            //     axisTick: {
-            //         show: false,
-            //     },
-            //     axisLabel: {
-            //         color,
-            //     },
-            //     axisLine: {
-            //         show: true,
-            //     },
-            //     splitLine: {
-            //         show: false,
-            //     },
-            // },
-        ],
-        series: [
-            {
-                name: '维保次数',
-                type: 'line',
-                yAxisIndex: 0,
-                data: values[0] || [],
-            },
-            // {
-            //     name: '维保金额',
-            //     type: 'line',
-            //     yAxisIndex: 1,
-            //     data: [140, 150, 160, 170, 110, 50, 90],
-            // },
-        ],
-    };
-    return (
-        <div className="rm-month-trend">
-            <SubTitle title="月度趋势分析" />
-            <div className="rm-month-trend-chart">
-                <ReactEcharts
-                    option={option}
-                    notMerge
-                    lazyUpdate
-                    style={{ height: '100%', width: '100%' }}
-                />
-            </div>
-        </div>
-    );
-};
-
-export default RmMonthTrend;

package/src/vm-repair-maintain/RmRecord.tsx

@@ -1,152 +0,0 @@
-/**
- * 维保记录
- */
-import React from 'react';
-import moment from 'moment';
-import VMTable from '../vm-table';
-import { BaseService } from './api';
-import { useSetState } from 'ahooks';
-
-interface TypeProps {
-    id: string;
-}
-
-export default function RmRecord(props: TypeProps) {
-    const { id } = props;
-    const [state, setState] = useSetState({
-        pagination: {
-            current: 1,
-            pageSize: 10,
-            total: 0,
-        },
-        sorter: '',
-    });
-    const { pagination, sorter } = state;
-    const startDate = moment()
-        .startOf('y')
-        .format('YYYY-MM-DD HH:mm:ss');
-    const endDate = moment().format('YYYY-MM-DD HH:mm:ss');
-    const { rmRecord } = BaseService.useRmRecord(
-        id,
-        startDate,
-        endDate,
-        pagination.current - 1,
-        sorter,
-    );
-    const getColor = (code: string) => {
-        let color = '#B4B4B4';
-        switch (code) {
-            case 'AUDIT_PASSED':
-                color = '#1FEFA9';
-                break;
-            case 'AUDIT_FAILED':
-                color = '#FF6A65';
-                break;
-            case 'TO_BE_AUDITED':
-                color = '#FF6A65';
-                break;
-            case 'REVOKED':
-                color = '#FA69FF';
-                break;
-            case 'AUDITING':
-                color = '#FFBD1E';
-                break;
-            default:
-                break;
-        }
-        return color;
-    };
-    const columns = [
-        {
-            title: '工单编号',
-            dataIndex: 'workOrderNo',
-            key: 'workOrderNo',
-            width: 120,
-            ellipsis: true,
-        },
-        {
-            title: '维保类型',
-            dataIndex: 'maintainTypeName',
-            key: 'maintainTypeName',
-            width: 120,
-            ellipsis: true,
-        },
-        {
-            title: '申请金额',
-            dataIndex: 'fee',
-            key: 'fee',
-            render: (text: number) => {
-                return <span style={{ color: '#FF7272' }}>{text}</span>;
-            },
-        },
-        {
-            title: '申请人',
-            dataIndex: 'applyUserName',
-            key: 'applyUserName',
-        },
-        {
-            title: '申请时间',
-            dataIndex: 'applyTime',
-            key: 'applyTime',
-            width: 150,
-            sorter: true,
-        },
-        {
-            title: '维保状态',
-            dataIndex: 'auditStatusDesc',
-            key: 'auditStatusDesc',
-            render: (text: number, record: any) => {
-                return (
-                    <div style={{ color: getColor(record.auditStatus) }}>
-                        <div
-                            style={{
-                                display: 'inline-block',
-                                width: '8px',
-                                height: '8px',
-                                borderRadius: '50%',
-                                marginRight: '6px',
-                                background: getColor(record.auditStatus),
-                            }}
-                        ></div>
-                        {text}
-                    </div>
-                );
-            },
-        },
-        {
-            title: '维保时间',
-            dataIndex: 'lastAuditTime',
-            key: 'lastAuditTime',
-            width: 150,
-        },
-    ];
-
-    const handleTableChange = (sorter: any) => {
-        setState({
-            sorter: `${sorter.columnKey},${sorter.order === 'ascend' ? 'ASC' : 'DESC'}`,
-        });
-    };
-
-    const pageChange = (page: number) => {
-        setState({
-            pagination: {
-                ...pagination,
-                current: page,
-            },
-        });
-    };
-
-    const tableProps = {
-        pagination: {
-            ...pagination,
-            total: rmRecord.total,
-            defaultPageSize: 10,
-            onChange: pageChange,
-        },
-        handleTableChange: handleTableChange,
-        height: 240,
-        dataSource: rmRecord.rows,
-    };
-
-    return <VMTable columns={columns} {...tableProps} />;
-}

package/src/vm-repair-maintain/RmType.tsx

@@ -1,90 +0,0 @@
-/**
- * 维保类型分析
- */
-import React from 'react';
-import ReactEcharts from 'echarts-for-react';
-import SubTitle from '../vm-sub-title';
-import NoData from '../vm-nodata';
-import useSettings from '../vm-hooks/useSettings';
-
-const RmType = (props: any) => {
-    const { data } = props;
-    const { isDark, chartColor, chartFontColor } = useSettings();
-
-    let option = {
-        color: chartColor,
-        backgroundColor: 'transparent',
-        tooltip: {
-            show: true,
-            trigger: 'item',
-        },
-        legend: {
-            orient: 'vertical',
-            left: '42%',
-            top: 'middle',
-            align: 'left',
-            icon: 'circle',
-            itemGap: 8,
-            itemWidth: 10,
-            itemHeight: 10,
-            formatter: function(name: string) {
-                const value = data.find((item: any) => item.name === name);
-                if (value) {
-                    return `\t\t${name}\t\t${value.value}次\t\t`;
-                } else {
-                    return '';
-                }
-            },
-            textStyle: {
-                fontSize: 14,
-                color: chartFontColor,
-            },
-            pageIconColor: chartFontColor,
-            pageIconInactiveColor: chartFontColor,
-            pageTextStyle: {
-                color: chartFontColor,
-            },
-        },
-        series: [
-            {
-                type: 'pie',
-                radius: ['55%', '75%'],
-                center: ['20%', '50%'],
-                hoverAnimation: true,
-                z: 10,
-                itemStyle: {
-                    normal: {
-                        borderWidth: 2,
-                        borderColor: isDark ? '#003359' : '#ffffff',
-                    },
-                },
-                label: {
-                    show: false,
-                },
-                data: data,
-                labelLine: {
-                    show: false,
-                },
-            },
-        ],
-    };
-    return (
-        <div className="rm-type">
-            <SubTitle title="维保类型分析" />
-            <div className="rm-type-chart">
-                {data?.length > 0 ? (
-                    <ReactEcharts
-                        option={option}
-                        notMerge
-                        lazyUpdate
-                        style={{ height: '100%', width: '100%' }}
-                    />
-                ) : (
-                    <NoData style={{ height: '100%', width: '75%' }} />
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default RmType;

package/src/vm-repair-maintain/api.ts

@@ -1,82 +0,0 @@
-import { request } from '@vtx/utils';
-import { useRequest } from 'ahooks';
-const BaseService = {
-    useRepairMaintain: (id: string, dateValue: string, endDate: string) => {
-        // 汇总
-        const { data: rmSummaryRes } = useRequest(
-            () =>
-                request.get(
-                    '/cloud/jcss-reborn/maintainRecord/getMaintainRecordStatisticsByFacilityId',
-                    {
-                        data: { facilityId: id, dateValue },
-                    },
-                ),
-            { refreshDeps: [id, dateValue] },
-        );
-        const rmSummary = rmSummaryRes?.data || {};
-
-        //维保类型
-        const { data: rmTypeRes } = useRequest(
-            () =>
-                request.get('/cloud/jcss-reborn/maintainRecord/maintainRecordStatisticsByType', {
-                    data: { facilityId: id, dateValue },
-                }),
-            { refreshDeps: [id, dateValue] },
-        );
-        let rmType = [];
-        if (Array.isArray(rmTypeRes?.data)) {
-            rmType = rmTypeRes.data.map((ele: any) => {
-                return {
-                    name: ele.typeName,
-                    value: ele.count,
-                };
-            });
-        }
-
-        //月度趋势
-        const { data: rmMonthTrendRes } = useRequest(
-            () =>
-                request.get('/cloud/jcss-reborn/maintainRecord/maintainRecordStatisticsByMonth', {
-                    data: { facilityId: id, startDate: dateValue, endDate },
-                }),
-            { refreshDeps: [id, dateValue, endDate] },
-        );
-        const rmMonthTrend = rmMonthTrendRes?.data || { legends: [], names: [], values: [] };
-
-        return {
-            rmSummary,
-            rmType,
-            rmMonthTrend,
-        };
-    },
-
-    useRmRecord: (
-        id: string,
-        applyTimeBegin: string,
-        applyTimeEnd: string,
-        page: number,
-        sort: string,
-    ) => {
-        const { data: rmRecordRes } = useRequest(
-            () =>
-                request.get('/cloud/jcss-reborn/maintainRecord/maintainAllPage', {
-                    data: {
-                        facilityIds: id,
-                        applyTimeBegin,
-                        applyTimeEnd,
-                        page,
-                        size: 10,
-                        sort,
-                    },
-                }),
-            { refreshDeps: [id, applyTimeBegin, applyTimeEnd, page, sort] },
-        );
-        const rmRecord = rmRecordRes?.data || { total: 0, rows: [] };
-
-        return {
-            rmRecord,
-        };
-    },
-};
-
-export { BaseService };

package/src/vm-repair-maintain/index.tsx

@@ -1,40 +0,0 @@
-/**
- * 通用-维保信息
- */
-
-import React from 'react';
-import moment from 'moment';
-import RmInfoSummary from './RmInfoSummary';
-import RmType from './RmType';
-import RmMonthTrend from './RmMonthTrend';
-import RmRecord from './RmRecord';
-import { BaseService } from './api';
-import './style';
-
-interface TypeProps {
-    id: string;
-}
-
-const RepaireMaintain: React.FC<TypeProps> = props => {
-    const { id } = props;
-
-    const date = moment().format('YYYY-MM-DD');
-    const { rmSummary, rmType, rmMonthTrend } = BaseService.useRepairMaintain(id, date, date);
-
-    return (
-        <div className="repair-maintain">
-            <div className="rm-head">
-                <RmInfoSummary data={rmSummary} />
-                <div className="rm-head-bottom">
-                    <RmType data={rmType} />
-                    <RmMonthTrend data={rmMonthTrend} />
-                </div>
-            </div>
-            <div className="rm-record">
-                <RmRecord id={id} />
-            </div>
-        </div>
-    );
-};
-
-export default RepaireMaintain;

package/src/vm-repair-maintain/style/index.less

@@ -1,111 +0,0 @@
-.repair-maintain {
-    margin: 6px;
-    .rm-head {
-        padding: 14px 20px 0 20px;
-        background-color: var(--bg-color2);
-        margin-bottom: 6px;
-        &-bottom {
-            margin-top: 24px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-    }
-
-    .rm-summary {
-        display: flex;
-        justify-content: start;
-        align-items: center;
-
-        &-item {
-            margin-right: 76px;
-            display: flex;
-            justify-content: start;
-            align-items: center;
-
-            img {
-                width: 46px;
-                height: 46px;
-                margin-right: 19px;
-            }
-
-            &--name {
-                color: var(--label-color);
-            }
-            &--value {
-                color: var(--info-color);
-                font-size: 12px;
-                span {
-                    font-size: 22px;
-                }
-                &-compare {
-                    display: inline-block;
-                    margin-left: 36px;
-                }
-            }
-        }
-    }
-
-    .rm-type {
-        width: 50%;
-        &-chart {
-            height: 218px;
-            img {
-                padding-bottom: 24px;
-            }
-        }
-    }
-
-    .rm-month-trend {
-        width: 50%;
-        &-chart {
-            height: 218px;
-        }
-    }
-
-    .triangle-up {
-        width: 12px;
-        height: 8px;
-        position: relative;
-        overflow: hidden;
-        display: inline-block;
-        margin-left: 4px;
-        &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: #f65861;
-            transform-origin: left bottom;
-            transform: rotate(45deg);
-        }
-    }
-    .triangle-down {
-        width: 12px;
-        height: 8px;
-        position: relative;
-        overflow: hidden;
-        display: inline-block;
-        margin-left: 4px;
-        margin-bottom: -2px;
-        &::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: #41ffb4;
-            transform-origin: right top;
-            transform: rotate(45deg);
-        }
-    }
-
-    .rm-record {
-        padding: 14px 20px;
-        background-color: var(--bg-color2);
-        min-height: 200px;
-    }
-}

package/src/vm-repair-maintain/style/index.ts

@@ -1 +0,0 @@
-import './index.less';