@vtx/modals2 2.6.19

package/src/vm-nodata/index.tsx

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

@@ -0,0 +1,71 @@
+/**
+ * 维保信息汇总
+ */
+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

@@ -0,0 +1,126 @@
+/**
+ * 月度趋势分析
+ */
+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

@@ -0,0 +1,152 @@
+/**
+ * 维保记录
+ */
+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

@@ -0,0 +1,90 @@
+/**
+ * 维保类型分析
+ */
+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

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

@@ -0,0 +1,40 @@
+/**
+ * 通用-维保信息
+ */
+
+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

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

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