@vtx/modals2 2.6.20 → 2.6.21

package/src/vtx-cp-modal/components/BaseInfo/index.less

@@ -1,135 +0,0 @@
-.flex-start {
-    display: flex;
-    justify-content: start;
-    align-items: start;
-}
-
-.left-width {
-    width: 370px;
-}
-
-.cp-baseContent {
-    padding: 6px 10px;
-    .base-top {
-        .flex-start();
-        &-base {
-            width: 390px;
-            height: 280px;
-            margin-bottom: 10px;
-            margin-right: 10px;
-            padding: 20px;
-            background-color: var(--bg-color2);
-        }
-        &-twork {
-            height: 280px;
-            width: calc(100% - 405px);
-            padding: 20px;
-            background-color: var(--bg-color2);
-            overflow-y: auto;
-            .twork {
-                &--item {
-                    .flex-start();
-                    color: var(--info-color);
-                    margin-bottom: 16px;
-                    img {
-                        width: 40px;
-                        height: 40px;
-                        margin-right: 14px;
-                    }
-                    &-progress {
-                        width: 163px;
-                        margin-right: 20px;
-                        font-size: 14px;
-                        line-height: 22px;
-                    }
-                    &-block {
-                        width: calc(100% - 270px);
-                        font-size: 12px;
-                        display: flex;
-                        justify-content: space-between;
-                        &-item {
-                            &-value {
-                                color: var(--info-active);
-                                line-height: 20px;
-                                span {
-                                    font-size: 20px;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .base-bottom {
-        .flex-start();
-        &-syrules {
-            height: 335px;
-            width: 390px;
-            padding: 20px;
-            background-color: var(--bg-color2);
-            overflow-y: auto;
-            margin-right: 10px;
-            .syrules-item {
-                width: 100%;
-                height: 29px;
-                .flex-start();
-                background: var(--block-bg-color);
-                color: var(--info-color);
-                margin-bottom: 24px;
-
-                &--name {
-                    width: 70px;
-                    height: 100%;
-                    font-size: 14px;
-                    font-family: PingFangSC-Medium, PingFang SC;
-                    font-weight: 500;
-                    text-align: center;
-                    line-height: 30px;
-                    background-repeat: no-repeat;
-                    background-size: 100% 100%;
-                    color: #fff;
-                    &.qt {
-                        background-image: url('../../imgs/qt.png');
-                    }
-                    &.cy {
-                        background-image: url('../../imgs/cy.png');
-                    }
-                    &.yh {
-                        background-image: url('../../imgs/yh.png');
-                    }
-                    &.khsw {
-                        background-image: url('../../imgs/khsw.png');
-                    }
-                }
-                &--content {
-                    width: 303px;
-                    padding: 4px 32px;
-                    display: flex;
-                    justify-content: space-between;
-
-                    div {
-                        &:nth-child(2) {
-                            width: 60px;
-                            text-align: center;
-                        }
-                        &:last-child {
-                            width: 80px;
-                            text-align: left;
-                            overflow: hidden;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
-                        }
-                    }
-                }
-            }
-        }
-        &-table {
-            width: calc(100% - 405px);
-            height: 335px;
-            background-color: var(--bg-color2);
-            padding: 10px;
-        }
-    }
-}

package/src/vtx-cp-modal/components/BaseInfo/index.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import moment from 'moment';
-import useSettings from '../../../vm-hooks/useSettings';
-import SubTitle from '../../../vm-sub-title';
-import Base from '../../../vm-info-collection';
-import Rules from './Rules';
-import TodayWork from './TodayWork';
-import CarWork from './CarWork';
-import { BaseService } from '../../api';
-import './index.less';
-
-interface BaseInfoProps {
-    id: string;
-    baseInfo: Array<any>;
-    rules: Array<any>;
-}
-
-const BaseInfo = (props: BaseInfoProps) => {
-    const { id, baseInfo, rules } = props;
-    const { theme } = useSettings();
-    const nowDate = moment().format('YYYY-MM-DD');
-
-    const { todayWorkRes, dataSource } = BaseService.useBaseInfo(id, nowDate, nowDate);
-
-    return (
-        <div className={`cp-baseContent ${theme}`}>
-            <div className="base-top">
-                <div className="base-top-base">
-                    <SubTitle title="基本信息" />
-                    <Base data={baseInfo} horizontal={true} gap={20} />
-                </div>
-                <div className="base-top-twork">
-                    <SubTitle title="今日作业" />
-                    <TodayWork data={todayWorkRes} />
-                </div>
-            </div>
-            <div className="base-bottom">
-                <div className="base-bottom-syrules">
-                    <SubTitle title="收运规则" />
-                    <Rules rules={rules} />
-                </div>
-                <div className="base-bottom-table">
-                    <CarWork dataSource={dataSource} />
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default BaseInfo;

package/src/vtx-cp-modal/components/ExeceptionInfo/ExeceptionRecord.tsx

@@ -1,193 +0,0 @@
-/**
- * 异常记录
- */
-import React, { useEffect } from 'react';
-import moment from 'moment';
-import sumBy from 'lodash/sumBy';
-import VMTable from '../../../vm-table';
-import { SubTabsLine } from '../../../vm-sub-tabs';
-import SubTitle from '../../../vm-sub-title';
-import { VMRangePicker } from '../../../vm-filter';
-import { ExeceptionService } from '../../api';
-import { useSetState } from 'ahooks';
-
-interface TypeProps {
-    id: string;
-}
-
-export default function ExeceptionRecord(props: TypeProps) {
-    const { id } = props;
-    const [state, setState] = useSetState({
-        abnormalType: 'all',
-        alarmTabs: [{ key: 'all', label: '全部' }],
-        startDate: moment()
-            .startOf('M')
-            .format('YYYY-MM-DD'),
-        endDate: moment().format('YYYY-MM-DD'),
-        pagination: {
-            current: 1,
-            pageSize: 10,
-            total: 0,
-        },
-        sort: '',
-    });
-    const { alarmTabs, pagination, abnormalType, startDate, endDate, sort } = state;
-
-    const { alarmTypes } = ExeceptionService.useAlarmTrend(id, startDate, endDate);
-    const { detail } = ExeceptionService.useAlarmRecord(
-        id,
-        abnormalType === 'all' ? '' : abnormalType,
-        `${startDate} 00:00:00`,
-        `${endDate} 23:59:59`,
-        pagination.current - 1,
-        sort,
-    );
-    // 格式化chartFontColor类型数据
-    const formatAlarmType = (dataList: Array<any>) => {
-        let list: Array<any> = [];
-        let totalCount = 0; // chartFontColor类型总数
-        totalCount = sumBy(dataList, function(o: any) {
-            return o.count;
-        });
-        dataList.forEach((ele: any) => {
-            const obj = {
-                key: ele.typeCode,
-                label: `${ele.typeName} (${ele.count})`,
-            };
-            list.push(obj);
-        });
-        return { list, totalCount };
-    };
-
-    useEffect(() => {
-        let arr = [{ key: '', label: '全部' }]; // chartFontColor明细标签
-        if (alarmTypes?.length > 0) {
-            const { list, totalCount } = formatAlarmType(alarmTypes);
-            arr[0].label = `全部 (${totalCount})`;
-            setState({
-                alarmTabs: arr.concat(list),
-            });
-        }
-    }, [alarmTypes]);
-
-    const getColor = (code: number) => {
-        let color = '';
-        switch (code) {
-            case 1:
-                color = '#1FEFA9';
-                break;
-            case 0:
-                color = '#FF6A65';
-                break;
-            default:
-                color = '#FFBD1E';
-                break;
-        }
-        return color;
-    };
-
-    const columns = [
-        {
-            title: '上报时间',
-            dataIndex: 'submitDate',
-            key: 'submitDate',
-            sorter: true,
-        },
-        {
-            title: '异常类型',
-            dataIndex: 'abnormalTypeStr',
-            key: 'abnormalTypeStr',
-        },
-        {
-            title: '上报车辆',
-            dataIndex: 'carCode',
-            key: 'carCode',
-        },
-        {
-            title: '处理状态',
-            dataIndex: 'dealStatusStr',
-            key: 'dealStatusStr',
-            render: (text: string, record: any) => {
-                return (
-                    <span style={{ color: getColor(record.dealStatus) }}>
-                        <div
-                            style={{
-                                display: 'inline-block',
-                                width: '8px',
-                                height: '8px',
-                                borderRadius: '50%',
-                                marginRight: '6px',
-                                background: getColor(record.dealStatus),
-                            }}
-                        ></div>
-                        {text}
-                    </span>
-                );
-            },
-        },
-    ];
-
-    const pageChange = (page: number) => {
-        setState({
-            pagination: {
-                ...pagination,
-                current: page,
-            },
-        });
-    };
-
-    const handleTableChange = (sorter: any) => {
-        setState({
-            sort: `submitDate,${sorter.order === 'ascend' ? 'ASC' : 'DESC'}`,
-        });
-    };
-
-    const tableProps = {
-        pagination: {
-            ...pagination,
-            total: detail.total,
-            defaultPageSize: 10,
-            onChange: pageChange,
-        },
-        handleTableChange,
-        height: 120,
-        dataSource: detail.dataSource,
-    };
-
-    const handleDateChange = (start: string, end: string) => {
-        setState({
-            startDate: start,
-            endDate: end,
-        });
-    };
-
-    return (
-        <div className="exeception-record">
-            <div className="exeception-record-head">
-                <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>
-            <SubTabsLine
-                items={alarmTabs}
-                activeKey={abnormalType}
-                onChange={key => {
-                    setState({
-                        abnormalType: key,
-                    });
-                }}
-            />
-            <div className="exeception-record-table">
-                <VMTable columns={columns} {...tableProps} />
-            </div>
-        </div>
-    );
-}

package/src/vtx-cp-modal/components/ExeceptionInfo/MonthTrend.tsx

@@ -1,101 +0,0 @@
-/**
- * 公厕-异常信息-异常信息汇总
- */
-import React from 'react';
-import moment from 'moment';
-import ReactEcharts from 'echarts-for-react';
-import SubTitle from '../../../vm-sub-title';
-import { ExeceptionService } from '../../api';
-import useSettings from '../../../vm-hooks/useSettings';
-
-const MonthTrend = ({ id }: { id: string }) => {
-    const { chartColor, chartFontColor,  } = useSettings();
-    const { alarmMonthTrend } = ExeceptionService.useAlarmMonthTrend(
-        id,
-        moment()
-            .subtract(6, 'M')
-            .format('YYYY-MM-DD'),
-        moment().format('YYYY-MM-DD'),
-    );
-    const { legends, names, values } = alarmMonthTrend;
-
-    const option = {
-        color: chartColor,
-        tooltip: {
-            trigger: 'axis',
-        },
-        legend: {
-            show: true,
-            itemWith: 6,
-            itemHeight: 6,
-            top: 20,
-            textStyle: {
-                color: chartFontColor,
-                fontSize: 12,
-            },
-            data: legends || [],
-        },
-        grid: {
-            top: 58,
-            left: 18,
-            bottom: 12,
-            right: 30,
-            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)',
-                    },
-                },
-            },
-        ],
-        series: [
-            {
-                name: '次数',
-                type: 'line',
-                data: values[0] || [],
-            },
-        ],
-    };
-    return (
-        <div className="exeception-trend">
-            <SubTitle title="月度趋势分析" />
-            <ReactEcharts
-                option={option}
-                notMerge
-                lazyUpdate
-                style={{ height: '300px', width: '100%' }}
-            />
-        </div>
-    );
-};
-
-export default MonthTrend;

package/src/vtx-cp-modal/components/ExeceptionInfo/Summary.tsx

@@ -1,162 +0,0 @@
-/**
- * 公厕-异常信息-异常信息汇总
- */
-import React, { useEffect } from 'react';
-import { useSetState } from 'ahooks';
-import moment from 'moment';
-import sumBy from 'lodash/sumBy';
-import ReactEcharts from 'echarts-for-react';
-import SubTitle from '../../../vm-sub-title';
-import NoData from '../../../vm-nodata';
-import { ExeceptionService } from '../../api';
-import useSettings from '../../../vm-hooks/useSettings';
-
-import alarm from '../../imgs/alarm.png';
-
-interface StateTypes {
-    totalCount: number;
-    alarmTabsValue: { name: string; value: number }[];
-}
-
-const Summary = ({ id }: { id: string }) => {
-    const { chartColor, chartFontColor, isDark } = useSettings();
-    const [state, setState] = useSetState<StateTypes>({
-        alarmTabsValue: [],
-        totalCount: 0,
-    });
-    const { alarmTabsValue, totalCount } = state;
-
-    const { alarmSummary } = ExeceptionService.useAlarmSummary(id, moment().format('YYYY-MM-DD'));
-
-    const { alarmTypes } = ExeceptionService.useAlarmTrend(
-        id,
-        moment()
-            .startOf('M')
-            .format('YYYY-MM-DD'),
-        moment().format('YYYY-MM-DD'),
-    );
-
-    useEffect(() => {
-        let list: StateTypes['alarmTabsValue'] = [];
-        let count = 0;
-        if (alarmTypes?.length > 0) {
-            count = sumBy(alarmTypes, function(o: any) {
-                return o.count;
-            });
-            alarmTypes.forEach((ele: any) => {
-                const obj = {
-                    key: ele.typeCode,
-                    name: ele.typeName,
-                    value: ele.count,
-                };
-                list.push(obj);
-            });
-            setState({
-                totalCount: count,
-                alarmTabsValue: list,
-            });
-        }
-    }, [alarmTypes]);
-
-    let option = {
-        color: chartColor,
-        backgroundColor: 'transparent',
-        tooltip: {
-            show: true,
-            trigger: 'item',
-        },
-
-        legend: {
-            orient: 'vertical',
-            left: '40%',
-            top: 'middle',
-            align: 'left',
-            itemGap: 8,
-            itemWidth: 10,
-            itemHeight: 10,
-            formatter: function(name: string) {
-                const value = alarmTabsValue.find((item: any) => item.name === name);
-                const rate = ((value?.value || 0) / totalCount) * 100;
-                if (value) {
-                    return `\t\t${name}\t\t${value.value}次\t\t${rate.toFixed(2)}%`;
-                } 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: alarmTabsValue,
-                labelLine: {
-                    show: false,
-                },
-            },
-        ],
-    };
-    return (
-        <div className="exeception-summary">
-            <SubTitle title="异常信息汇总" />
-            <div className="exeception-summary-time">
-                <img src={alarm} />
-                <div>
-                    <div className="exeception-summary-time-name">月度异常总次数</div>
-                    <div className="exeception-summary-time-value">
-                        <span>{alarmSummary?.thisMonthCount || 0}</span>次
-                        <div className="exeception-summary-time-value-compare">
-                            {`月同比 ${alarmSummary?.thisMonthOnLastMonthCount || 0}%`}
-                            {alarmSummary?.thisMonthOnLastMonthCount >= 100 ? (
-                                <div className="triangle-up"></div>
-                            ) : (
-                                <div className="triangle-down"></div>
-                            )}
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div className="exeception-summary-type-analysis">
-                <SubTitle title="类型分析" />
-                {alarmTabsValue?.length > 0 ? (
-                    <ReactEcharts
-                        option={option}
-                        notMerge
-                        lazyUpdate
-                        style={{ height: '180px', width: '100%' }}
-                    />
-                ) : (
-                    <NoData
-                        style={{
-                            height: '180px',
-                            marginLeft: '50%',
-                            transform: 'translateX(-50%)',
-                        }}
-                    />
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default Summary;