@vtx/modals2 2.6.19 → 2.6.21

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

@@ -1,162 +0,0 @@
-/**
- * 公厕-报警信息-报警信息汇总
- */
-import React, { useEffect } from 'react';
-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 { AlarmService } from '../../api';
-import useSettings from '../../../vm-hooks/useSettings';
-
-import alarm from '../../imgs/alarm.png';
-import { useSetState } from 'ahooks';
-
-interface StateTypes {
-    totalCount: number;
-    alarmTabsValue: Array<{ 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 } = AlarmService.useAlarmSummary(id, moment().format('YYYY-MM-DD'));
-
-    const { alarmTypes } = AlarmService.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="alarm-summary">
-            <SubTitle title="报警信息汇总" />
-            <div className="alarm-summary-time">
-                <img src={alarm} />
-                <div>
-                    <div className="alarm-summary-time-name">月度报警总次数</div>
-                    <div className="alarm-summary-time-value">
-                        <span>{alarmSummary?.thisMonthCount || 0}</span>次
-                        <div className="alarm-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="alarm-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;

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

@@ -1,115 +0,0 @@
-.cp-alarm {
-    margin: 6px;
-    width: 100%;
-
-    &-head {
-        width: 100%;
-        display: flex;
-        justify-content: start;
-        align-items: start;
-    }
-
-    .alarm-summary {
-        padding: 14px 20px;
-        background-color: var(--bg-color2);
-        width: 500px;
-        margin-right: 6px;
-
-        &-time {
-            margin: 24px;
-            display: flex;
-            justify-content: start;
-            align-items: center;
-            img {
-                width: 46px;
-                height: 46px;
-                margin-right: 19px;
-            }
-            &-name {
-                font-size: 12px;
-                color: var(--title-color);
-            }
-            &-value {
-                color: var(--title-color);
-                font-size: 12px;
-                span {
-                    font-size: 20px;
-                    line-height: 25px;
-                }
-                &-compare {
-                    display: inline-block;
-                    margin-left: 36px;
-                }
-            }
-        }
-        .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);
-            }
-        }
-    }
-
-    .alarm-trend {
-        width: calc(100% - 518px);
-        height: 358px;
-        padding: 14px 20px;
-        background-color: var(--bg-color2);
-    }
-
-    .alarm-record {
-        padding: 14px 20px;
-        margin: 6px 12px 0 0;
-        background-color: var(--bg-color2);
-
-        &-head {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        &-table {
-            margin-top: 14px;
-            height: 200px;
-        }
-
-        .alarmLevel {
-            img {
-                margin-top: -2px;
-            }
-        }
-    }
-}

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

@@ -1,27 +0,0 @@
-/**
- * 收集点-报警信息
- */
-import React from 'react';
-import Summary from './Summary';
-import MonthTrend from './MonthTrend';
-import AlarmRecord from './AlarmRecord';
-import './index.less';
-
-interface AlarmInfoProps {
-    id: string;
-}
-
-const AlarmInfo: React.FC<AlarmInfoProps> = props => {
-    const { id } = props;
-    return (
-        <div className="cp-alarm">
-            <div className="cp-alarm-head">
-                <Summary id={id} />
-                <MonthTrend id={id} />
-            </div>
-            <AlarmRecord id={id} />
-        </div>
-    );
-};
-
-export default AlarmInfo;

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

@@ -1,82 +0,0 @@
-/**
- * 收集点-总览信息-车辆作业信息
- */
-import React from 'react';
-import VMTable from '../../../vm-table';
-import track from '../../imgs/track.png';
-
-export default function CarWork(props: any) {
-    const { dataSource } = props;
-
-    const columns = [
-        {
-            title: '车牌号',
-            dataIndex: 'carCode',
-            key: 'carCode',
-            ellipsis: true,
-        },
-        {
-            title: '垃圾类型',
-            dataIndex: 'productTypeName',
-            key: 'productTypeName',
-            width: 80,
-            ellipsis: true,
-        },
-        {
-            title: '收集频次',
-            dataIndex: 'collectNum',
-            key: 'collectNum',
-            width: 80,
-            ellipsis: true,
-        },
-        {
-            title: '桶数(桶)',
-            dataIndex: 'bucketNum',
-            key: 'bucketNum',
-            width: 70,
-            ellipsis: true,
-        },
-        {
-            title: '收集重量(kg)',
-            dataIndex: 'weight',
-            key: 'weight',
-            width: 100,
-            ellipsis: true,
-        },
-        {
-            title: '轨迹',
-            dataIndex: 'carId',
-            key: 'carId',
-            width: 50,
-            render: (text: string) => {
-                return (
-                    <a
-                        onClick={() => {
-                            window.open(
-                                `${location.protocol}//${
-                                    location.host
-                                }/carHistory/#/index?carId=${text}&${location.href.split('?')[1]}`,
-                            );
-                        }}
-                    >
-                        <img src={track} />
-                    </a>
-                );
-            },
-        },
-    ];
-
-    const tableProps = {
-        height: 240,
-        pagination: {
-            current: 1,
-            pageSize: 10,
-        },
-        dataSource:
-            dataSource?.length > 0
-                ? dataSource.map((ele: any, index: number) => ({ ...ele, index }))
-                : [],
-    };
-
-    return <VMTable columns={columns} rowKey="index" {...tableProps} />;
-}

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

@@ -1,56 +0,0 @@
-/**
- * 收集点-总览信息-收运规则
- */
-import React from 'react';
-import NoData from '../../../vm-nodata';
-
-export default function Rules(props: any) {
-    const { rules } = props;
-    const getImgCode = (name: string) => {
-        let code = 'qt';
-        switch (name) {
-            case '其他垃圾':
-                code = 'qt';
-                break;
-            case '厨余垃圾':
-                code = 'cy';
-                break;
-            case '有害垃圾':
-                code = 'yh';
-                break;
-            case '可回收物':
-                code = 'khsw';
-                break;
-            default:
-                code = 'qt';
-                break;
-        }
-        return code;
-    };
-    return (
-        <>
-            {Array.isArray(rules) ? (
-                rules.map((ele, index) => {
-                    return (
-                        <div className="syrules-item" key={index}>
-                            <div
-                                className={`syrules-item--name ${getImgCode(
-                                    ele?.productTypeName || '',
-                                )}`}
-                            >
-                                {ele?.productTypeName || '--'}
-                            </div>
-                            <div className="syrules-item--content">
-                                <div>{ele?.timeOrPeriod || '--'}</div>
-                                <div>{ele?.bucketNum || 0}个桶</div>
-                                <div>{ele?.carCodes || '--'}</div>
-                            </div>
-                        </div>
-                    );
-                })
-            ) : (
-                <NoData />
-            )}
-        </>
-    );
-}

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

@@ -1,135 +0,0 @@
-/**
- * 收集点-总览信息-收运规则
- */
-import Progress from 'antd/es/progress';
-import React from 'react';
-import NoData from '../../../vm-nodata';
-import useSettings from '../../../vm-hooks/useSettings';
-
-import './index.less';
-
-import allRate from '../../imgs/all_rate.png';
-import cyRate from '../../imgs/cy_rate.png';
-import qtRate from '../../imgs/qt_rate.png';
-import yhRate from '../../imgs/yh_rate.png';
-
-import allRateLight from '../../imgs/all_rate_light.png';
-import cyRateLight from '../../imgs/cy_rate_light.png';
-import qtRateLight from '../../imgs/qt_rate_light.png';
-import yhRateLight from '../../imgs/yh_rate_light.png';
-
-export default function TodayWork(props: any) {
-    const { data } = props;
-    const { theme } = useSettings();
-    const blockItem = (title: string, value: number, unit: string) => (
-        <div className="twork--item-block-item">
-            <div>{title}</div>
-            <div className="twork--item-block-item-value">
-                <span>{value || 0}</span>
-                {unit}
-            </div>
-        </div>
-    );
-
-    const img: any = {
-        dark: {
-            全部: allRate,
-            其他垃圾: qtRate,
-            厨余垃圾: cyRate,
-            有害垃圾: yhRate,
-        },
-        light: {
-            全部: allRateLight,
-            其他垃圾: qtRateLight,
-            厨余垃圾: cyRateLight,
-            有害垃圾: yhRateLight,
-        },
-    };
-
-    const getValue = (name: string) => {
-        let strokeColor = {
-            '0%': '#BFFFE8',
-            '100%': '#37D3B0',
-        };
-        let src = img[theme][name] || img[theme]['其他垃圾'];
-        switch (name) {
-            case '全部':
-                strokeColor = {
-                    '0%': '#BFFFE8',
-                    '100%': '#37D3B0',
-                };
-                src = allRate;
-                break;
-            case '其他垃圾':
-                strokeColor = {
-                    '0%': '#EC982B',
-                    '100%': '#FFE49A',
-                };
-                src = qtRate;
-                break;
-            case '厨余垃圾':
-                strokeColor = {
-                    '0%': '#62C1FD',
-                    '100%': '#3E9DF9',
-                };
-                src = cyRate;
-                break;
-            case '有害垃圾':
-                strokeColor = {
-                    '0%': '#FFA793',
-                    '100%': '#FF6770',
-                };
-                src = yhRate;
-                break;
-            default:
-                strokeColor = {
-                    '0%': '#EC982B',
-                    '100%': '#FFE49A',
-                };
-                src = qtRate;
-                break;
-        }
-        return { strokeColor, src };
-    };
-
-    return (
-        <div className="twork">
-            {Array.isArray(data) ? (
-                data.map((item, index) => {
-                    const { strokeColor, src } = getValue(item?.productTypeName);
-                    return (
-                        <div className="twork--item" key={index}>
-                            <div>
-                                <img src={src} />
-                            </div>
-                            <div className="twork--item-progress">
-                                <div>
-                                    {item?.productTypeName}完成率：
-                                    {item.rate || 0}%
-                                </div>
-                                <div className="twork--item-progress-bg">
-                                    <Progress
-                                        strokeLinecap="butt"
-                                        percent={item.rate}
-                                        strokeColor={strokeColor}
-                                        trailColor="#444B59"
-                                        strokeWidth={6}
-                                        showInfo={false}
-                                    />
-                                </div>
-                            </div>
-                            <div className="twork--item-block">
-                                {blockItem('应收次数', item?.planNum, '次')}
-                                {blockItem('实收次数', item?.collectNum, '次')}
-                                {blockItem('收集桶数', item?.bucketNum, '桶')}
-                                {blockItem('收集重量', item?.weight, 'kg')}
-                            </div>
-                        </div>
-                    );
-                })
-            ) : (
-                <NoData />
-            )}
-        </div>
-    );
-}