@vtx/modals2 2.6.19 → 2.6.21

package/src/vtx-housing-estate-modal/components/Alarm/MY.tsx

@@ -1,268 +0,0 @@
-import React, { useState } from 'react';
-import ReactEcharts from 'echarts-for-react';
-import moment, { Moment } from 'moment';
-import groupBy from 'lodash/groupBy';
-import { message } from 'antd';
-import { VMRangePicker, VMDatePicker } from '../../../vm-filter';
-import VmSubTitle from '../../../vm-sub-title';
-import { Gauge1, Line1 } from '../../../vm-charts';
-import { alarmService } from '../../api';
-import { MySumByGarbageTypeAndPeriodResp } from '../../types';
-import { getMinHundred } from '../OverView/RightBottom';
-import { getPieOption } from './FLZL';
-import { transferLineData } from '../OverView/Trend';
-import { Empty } from './index';
-interface AlarmLdbProps {
-    classPrefix?: string;
-    id: string;
-}
-
-function transferData(data: MySumByGarbageTypeAndPeriodResp[]) {
-    const chartData: [number, number, number][] = [];
-    const xAxis: string[] = [];
-    const dataGroupByDate = groupBy(data, 'garbageTypeName');
-    let count = 0;
-    for (const key in dataGroupByDate) {
-        dataGroupByDate[key].forEach((item, index) => {
-            const x = `${item.periodBegin}-${item.periodEnd}`;
-            if (!xAxis.includes(x)) {
-                xAxis.push(x);
-            }
-            chartData.push([index, count, item.count]);
-        });
-        count++;
-    }
-    return {
-        xAxis,
-        yAxis: Object.keys(dataGroupByDate),
-        chartData,
-    };
-}
-
-const getDistributionChart = (data: MySumByGarbageTypeAndPeriodResp[]) => {
-    const { xAxis, yAxis, chartData } = transferData(data);
-    const max = Math.max(...chartData.map(item => item[2]));
-    if (!chartData?.length) return {};
-    return {
-        tooltip: {
-            position: 'top',
-            formatter: (params: any) => {
-                const { value, marker, name } = params;
-                const garbageType = yAxis[value[1]];
-                return `<div>${garbageType} ${name}</div><div>${marker} 重量：${value[2]}kg</div>`;
-            },
-        },
-        grid: {
-            top: 50,
-            bottom: 0,
-            right: 0,
-            left: 0,
-            containLabel: true,
-        },
-        xAxis: {
-            type: 'category',
-            data: xAxis,
-            splitArea: {
-                show: true,
-            },
-            axisLabel: {
-                color: '#fff',
-            },
-            axisTick: {
-                show: false,
-            },
-        },
-        yAxis: {
-            type: 'category',
-            data: yAxis,
-            splitArea: {
-                show: true,
-            },
-            axisLabel: {
-                color: '#fff',
-            },
-            axisTick: {
-                show: false,
-            },
-        },
-        visualMap: {
-            min: 0,
-            max: max,
-            calculable: true,
-            orient: 'horizontal',
-            left: 'center',
-            top: 0,
-            inRange: {
-                color: ['#364357', '#00759C', '#29A8F0', '#F5B829', '#E7473F'],
-            },
-            textStyle: {
-                color: '#fff',
-            },
-        },
-        series: [
-            {
-                name: '满溢时段分布',
-                type: 'heatmap',
-                data: chartData,
-                label: {
-                    show: true,
-                },
-                emphasis: {
-                    itemStyle: {
-                        shadowBlur: 10,
-                        shadowColor: 'rgba(0, 0, 0, 0.5)',
-                    },
-                },
-            },
-        ],
-    };
-};
-const MY = ({ classPrefix = '', id }: AlarmLdbProps) => {
-    // 工单处理效率日期
-    const [efficiencyDate, setEfficiencyDate] = useState(moment());
-    // 垃圾类型占比日期
-    const [throwDate, setThrowDate] = useState(moment());
-    // 时段分布日期
-    const [disDate, setDisDate] = useState(moment());
-    // 发生次数一周趋势日期范围
-    const [trendTimes, setTrendTimes] = useState([
-        moment().subtract(7, 'day'),
-        moment().subtract(1, 'day'),
-    ]);
-
-    // 工单处理效率
-    const myEfficiency = alarmService.myEfficiency({
-        housingEstateId: id,
-        beginTime: efficiencyDate.format('YYYY-MM-DD 00:00:00'),
-        endTime: efficiencyDate.format('YYYY-MM-DD 23:59:59'),
-    });
-    // 满意垃圾类型占比
-    const mySumByGarbageType = alarmService.mySumByGarbageType({
-        housingEstateId: id,
-        beginTime: throwDate.format('YYYY-MM-DD 00:00:00'),
-        endTime: throwDate.format('YYYY-MM-DD 23:59:59'),
-    });
-    // 满溢一周趋势分布
-    const mySumByGarbageTypeAndDay = alarmService.mySumByGarbageTypeAndDay({
-        housingEstateId: id,
-        beginTime: trendTimes[0].format('YYYY-MM-DD 00:00:00'),
-        endTime: trendTimes[1].format('YYYY-MM-DD 23:59:59'),
-    });
-    // 满溢时段分布
-    const mySumByGarbageTypeAndPeriod = alarmService.mySumByGarbageTypeAndPeriod({
-        housingEstateId: id,
-        beginTime: disDate.format('YYYY-MM-DD 00:00:00'),
-        endTime: disDate.format('YYYY-MM-DD 23:59:59'),
-    });
-
-    const lineData = (mySumByGarbageTypeAndDay || []).map(item => ({
-        name: item.garbageTypeName,
-        count: item.count,
-        day: item.day,
-    }));
-
-    return (
-        <div className={`${classPrefix}-ldb`}>
-            <div className={`${classPrefix}-ldb-item`}>
-                <VmSubTitle
-                    title="工单处理效率"
-                    extra={
-                        <VMDatePicker
-                            value={efficiencyDate}
-                            onChange={(date: Moment) => {
-                                setEfficiencyDate(date);
-                            }}
-                        />
-                    }
-                />
-                <div style={{ flex: 1, display: 'flex' }}>
-                    <div style={{ flex: 1 }}>
-                        <Gauge1
-                            name="满溢处理时长"
-                            unit="分"
-                            min={0}
-                            max={getMinHundred(myEfficiency?.resolveMinute || 0)}
-                            num={myEfficiency?.resolveMinute || 0}
-                            average={false}
-                        />
-                    </div>
-                </div>
-            </div>
-            <div className={`${classPrefix}-ldb-item`}>
-                <VmSubTitle
-                    title="满溢垃圾类型占比"
-                    extra={
-                        <VMDatePicker
-                            value={throwDate}
-                            onChange={(date: Moment) => {
-                                setThrowDate(date);
-                            }}
-                        />
-                    }
-                />
-                <div style={{ flex: 1 }}>
-                    {!mySumByGarbageType?.length ? (
-                        <Empty />
-                    ) : (
-                        <ReactEcharts
-                            option={getPieOption({
-                                data: (mySumByGarbageType || []).map(item => ({
-                                    name: item.garbageTypeName,
-                                    count: item.count,
-                                })),
-                                center: ['30%', '50%'],
-                                legend: {
-                                    left: '55%',
-                                },
-                            })}
-                            style={{ width: '100%', height: '100%' }}
-                        />
-                    )}
-                </div>
-            </div>
-            <div className={`${classPrefix}-ldb-item`}>
-                <VmSubTitle
-                    title="满溢时段分布"
-                    extra={
-                        <VMDatePicker
-                            value={disDate}
-                            onChange={(date: Moment) => {
-                                setDisDate(date);
-                            }}
-                        />
-                    }
-                />
-                <div style={{ flex: 1 }}>
-                    {!mySumByGarbageTypeAndPeriod?.length ? (
-                        <Empty />
-                    ) : (
-                        <ReactEcharts
-                            option={getDistributionChart(mySumByGarbageTypeAndPeriod || [])}
-                        />
-                    )}
-                </div>
-            </div>
-            <div className={`${classPrefix}-ldb-item`}>
-                <VmSubTitle
-                    title="满溢一周变化趋势"
-                    extra={
-                        <VMRangePicker
-                            value={trendTimes}
-                            onChange={(date: Moment[]) => {
-                                if (date[1].diff(date[0], 'd') > 7) {
-                                    message.warning('时间跨度不能超过7天');
-                                    return;
-                                }
-                                setTrendTimes(date);
-                            }}
-                        />
-                    }
-                />
-                <div style={{ flex: 1 }}>
-                    {!lineData?.length ? <Empty /> : <Line1 {...transferLineData(lineData)} />}
-                </div>
-            </div>
-        </div>
-    );
-};
-export default MY;

package/src/vtx-housing-estate-modal/components/Alarm/Rank.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-interface RankProps {
-    name: string;
-    rank: number;
-    total: number;
-}
-
-const Rank = ({ name, rank, total }: RankProps) => {
-    return (
-        <div className="black-rank">
-            <img src={require('../../imgs/black-rank.png')} />
-            <span className="black-rank-name">{name}</span>
-            <div className="black-rank-progress">
-                <div
-                    className="black-rank-progress--active"
-                    style={{ width: `${rank && total ? (rank / total) * 100 : 0}%` }}
-                />
-            </div>
-            <div>
-                <span className="black-rank-rank">{rank}</span>/
-                <span className="black-rank-total">{total}</span>
-            </div>
-        </div>
-    );
-};
-
-export default Rank;

package/src/vtx-housing-estate-modal/components/Alarm/index.less

@@ -1,66 +0,0 @@
-@import '../../style/index';
-
-.@{prefix-cls}-alarm {
-    height: 800px;
-    padding: 10px;
-    padding-top: 0;
-    &-ldb {
-        height: 768px;
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        grid-template-rows: 1fr 1fr;
-        gap: 10px;
-        &-item {
-            background: var(--bg-color2);
-            padding: 10px;
-            display: flex;
-            flex-direction: column;
-        }
-        &-item2 {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            & > div {
-                padding: 10px;
-                flex: 1;
-                background: var(--bg-color2);
-            }
-        }
-    }
-    .black-rank {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        padding-left: 50px;
-        padding-right: 20px;
-        color: var(--info-color);
-        background: url('../../imgs/rank-bg.png') no-repeat;
-        background-size: 100% 100%;
-        &-name {
-            font-size: 16px;
-        }
-        &-progress {
-            width: 200px;
-            height: 4px;
-            position: relative;
-            background-color: rgba(255, 255, 255, 0.2);
-            border-right: 2px;
-            &--active {
-                position: absolute;
-                top: 0;
-                left: 0;
-                bottom: 0;
-                background: linear-gradient(90deg, #1b89ff, #51f2ff);
-                border-radius: 2px;
-            }
-        }
-        &-rank {
-            font-size: 24px;
-            color: #4debff;
-            margin-right: 4px;
-        }
-        &-total {
-            margin-left: 4px;
-        }
-    }
-}

package/src/vtx-housing-estate-modal/components/Alarm/index.tsx

@@ -1,83 +0,0 @@
-import React, { useState } from 'react';
-import Rank from './Rank';
-import { SubTabsLine, SubTabPane } from '../../../vm-sub-tabs';
-import LDB from './LDB';
-import MY from './MY';
-import FLZL from './FLZL';
-import NoData from '../../../vm-nodata';
-import { alarmService } from '../../api';
-import './index.less';
-
-interface AlarmProps {
-    classPrefix?: string;
-    id?: string;
-}
-
-type AlarmType = 'LANDING' | 'THROW' | 'OVERFLOW';
-export const Empty = () => (
-    <div
-        style={{
-            height: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-        }}
-    >
-        <NoData style={{ width: 265, height: 187 }} />
-    </div>
-);
-
-const Alarm = ({ classPrefix = '', id = '' }: AlarmProps) => {
-    const prefix = `${classPrefix}-alarm`;
-    const [tab, setTab] = useState<AlarmType>('LANDING');
-
-    const onTabChange = (value: any) => {
-        const tab = value;
-        setTab(tab);
-    };
-    const tabs = alarmService.tabs({ housingEstateId: id }) || [];
-    // useEffect(() => {
-    //     const tab = tabs?.[0];
-    //     tab && setTab(tab);
-    // }, [JSON.stringify(tabs)]);
-
-    const blackRank = alarmService.blackRank({
-        thisAreaId: id,
-        businessPackage: tab,
-        areaDimension: 'COMMUNITY',
-    });
-
-    return (
-        <div className={prefix}>
-            <SubTabsLine
-                size="large"
-                activeKey={tab}
-                onChange={onTabChange}
-                tabBarExtraContent={
-                    <Rank
-                        name="黑榜排名"
-                        rank={blackRank?.ranking || 0}
-                        total={blackRank?.total || 0}
-                    />
-                }
-            >
-                {tabs.includes('LANDING') && (
-                    <SubTabPane subKey="LANDING" key="LANDING" tab="落地包分析">
-                        <LDB classPrefix={prefix} id={id} />
-                    </SubTabPane>
-                )}
-                {tabs.includes('CHUYU_QUALITY') && (
-                    <SubTabPane subKey="THROW" key="THROW" tab="分类质量分析">
-                        <FLZL classPrefix={prefix} id={id} />
-                    </SubTabPane>
-                )}
-                {tabs.includes('OVERFLOW') && (
-                    <SubTabPane subKey="OVERFLOW" key="OVERFLOW" tab="满溢分析">
-                        <MY classPrefix={prefix} id={id} />
-                    </SubTabPane>
-                )}
-            </SubTabsLine>
-        </div>
-    );
-};
-export default Alarm;

package/src/vtx-housing-estate-modal/components/OverView/Hot.tsx

@@ -1,243 +0,0 @@
-import React, { useState } from 'react';
-import * as echarts from 'echarts';
-import ReactCharts from 'echarts-for-react';
-import { Distribute1 } from '../../../vm-charts';
-import type { Distribute1Props } from '../../../vm-charts';
-import { overViewService } from '../../api';
-import VmSubTitle from '../../../vm-sub-title';
-import VmButton from '../../../vm-button';
-import {
-    ThrowSumByGarbageTypeResp,
-    ThrowSumByDayAndPointResp,
-    ThrowSumByHourResp,
-} from '../../types';
-
-interface OverViewHotProps {
-    classPrefix?: string;
-    id: string;
-}
-
-enum GarbageType {
-    KEHUISHOU = '可回收物',
-    CHUYU = '厨余垃圾',
-    QITA = '其他垃圾',
-    YOUHAI = '有害垃圾',
-}
-
-enum GarbageTypeColor {
-    KEHUISHOU = '#6BB8FF',
-    CHUYU = '#46DA91',
-    QITA = '#C4C4C4',
-    YOUHAI = '#FF8288',
-}
-
-interface GarbageSummaryProps {
-    type: GarbageType;
-    data?: ThrowSumByGarbageTypeResp[];
-}
-
-const GarbageSummary = ({ type, data }: GarbageSummaryProps) => {
-    let imgSrc = '',
-        bucketSrc = '',
-        bgSrc = '',
-        color = '',
-        count = 0,
-        weight = 0;
-    switch (type) {
-        case GarbageType.KEHUISHOU:
-            imgSrc = require('../../imgs/khsw.png');
-            bucketSrc = require('../../imgs/bucket-khsw.png');
-            bgSrc = require('../../imgs/khsw-bg.png');
-            color = GarbageTypeColor.KEHUISHOU;
-            count = data?.find?.(item => item.garbageTypeCode === 'KEHUISHOU')?.throwCount || 0;
-            weight = data?.find?.(item => item.garbageTypeCode === 'KEHUISHOU')?.weight || 0;
-            break;
-        case GarbageType.CHUYU:
-            imgSrc = require('../../imgs/cylj.png');
-            bucketSrc = require('../../imgs/bucket-cylj.png');
-            bgSrc = require('../../imgs/cylj-bg.png');
-            color = GarbageTypeColor.CHUYU;
-            count = data?.find?.(item => item.garbageTypeCode === 'CHUYU')?.throwCount || 0;
-            weight = data?.find?.(item => item.garbageTypeCode === 'CHUYU')?.weight || 0;
-            break;
-        case GarbageType.QITA:
-            imgSrc = require('../../imgs/qtlj.png');
-            bucketSrc = require('../../imgs/bucket-qtlj.png');
-            bgSrc = require('../../imgs/qtlj-bg.png');
-            color = GarbageTypeColor.QITA;
-            count = data?.find?.(item => item.garbageTypeCode === 'QITA')?.throwCount || 0;
-            weight = data?.find?.(item => item.garbageTypeCode === 'QITA')?.weight || 0;
-            break;
-        case GarbageType.YOUHAI:
-            imgSrc = require('../../imgs/yhlj.png');
-            bucketSrc = require('../../imgs/bucket-yhlj.png');
-            bgSrc = require('../../imgs/yhlj-bg.png');
-            color = GarbageTypeColor.YOUHAI;
-            count = data?.find?.(item => item.garbageTypeCode === 'YOUHAI')?.throwCount || 0;
-            weight = data?.find?.(item => item.garbageTypeCode === 'YOUHAI')?.weight || 0;
-            break;
-        default:
-            break;
-    }
-
-    return (
-        <div className="garbage-summary" style={{ background: `url(${bgSrc})` }}>
-            <div className="garbage-summary-bucket" style={{ background: `url(${bucketSrc})` }}>
-                <img src={imgSrc} />
-            </div>
-            <p style={{ color }}>{type}</p>
-            <p>
-                <span>{count ?? 0}</span>次
-            </p>
-            <p>
-                <span>{weight ?? 0}</span>kg
-            </p>
-        </div>
-    );
-};
-
-function getBarOption(data: ThrowSumByDayAndPointResp[]) {
-    return {
-        tooltip: {
-            trigger: 'item',
-        },
-        legend: {
-            top: 0,
-            left: 'center',
-            textStyle: {
-                color: '#fff',
-            },
-        },
-        grid: {
-            top: 40,
-            left: 20,
-            right: 0,
-            bottom: 0,
-            containLabel: true
-        },
-        xAxis: {
-            data: data?.map?.(item => item.throwPointName),
-            axisLabel: {
-                color: '#DAF1FF',
-                interval: 0,
-            },
-            axisTick: {
-                show: false,
-            },
-            axisLine: {
-                show: false,
-            },
-            z: 10,
-        },
-        yAxis: {
-            name: '单位：次',
-            nameTextStyle: {
-                color: '#fff',
-            },
-            axisLine: {
-                show: false,
-            },
-            axisTick: {
-                show: false,
-            },
-            axisLabel: {
-                color: '#fff',
-            },
-            splitLine: {
-                lineStyle: {
-                    type: 'dashed',
-                    color: 'rgba(255,255,255,0.2)',
-                },
-            },
-        },
-        series: [
-            {
-                name: '',
-                type: 'bar',
-                barWidth: 12,
-                itemStyle: {
-                    normal: {
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                            { offset: 0, color: '#51F2FF' },
-                            { offset: 1, color: '#1B89FF' },
-                        ]),
-                        label: {
-                            show: true,
-                            position: 'top',
-                            textStyle: {
-                                color: '#56FCFF',
-                            },
-                        },
-                    },
-                },
-                data: data?.map?.(item => item.throwCount),
-            },
-        ],
-    };
-}
-
-export function getDistributeChartData(data: ThrowSumByHourResp[]): Distribute1Props['data'] {
-    return data.filter(item => item.date).map(item => {
-        const [date, hour] = (item.date || '').split(' ');
-        return {
-            date,
-            hour,
-            value: item.throwCount || 0
-        }
-    })
-}
-
-const Left: React.FC<OverViewHotProps> = ({ classPrefix, id }) => {
-    const [chartType, setChartType] = useState<'point' | 'hour'>('point');
-    // 按垃圾类型统计
-    const sumByGarbageType = overViewService.throwSumByGarbageType({
-        housingEstateId: id,
-    });
-    // 点位分布
-    const sumByPoint = overViewService.throwSumByPointOneWeek({
-        housingEstateId: id,
-    });
-
-    // 24小时分布
-    const sumByHour = overViewService.throwSumByHour({
-        housingEstateId: id,
-    });
-    const garbageTypeCodes = (sumByGarbageType  || []).map(item => item.garbageTypeCode);
-
-    return (
-        <div className={`${classPrefix}-hot`}>
-            <VmSubTitle title="投放热度" />
-            <div className={`${classPrefix}-hot-summary`}>
-                {garbageTypeCodes.includes('KEHUISHOU') && <GarbageSummary type={GarbageType.KEHUISHOU} data={sumByGarbageType}/>}
-                {garbageTypeCodes.includes('CHUYU') && <GarbageSummary type={GarbageType.CHUYU} data={sumByGarbageType}/>}
-                {garbageTypeCodes.includes('QITA') && <GarbageSummary type={GarbageType.QITA} data={sumByGarbageType}/>}
-                {garbageTypeCodes.includes('YOUHAI') && <GarbageSummary type={GarbageType.YOUHAI} data={sumByGarbageType}/>}
-            </div>
-            <div className={`${classPrefix}-hot-buttons`}>
-                <VmButton
-                    onClick={() => setChartType('point')}
-                    name="点位分布"
-                    style={{ marginRight: 10 }}
-                    active={chartType === 'point'}
-                />
-                <VmButton
-                    onClick={() => setChartType('hour')}
-                    name="24h分布"
-                    active={chartType === 'hour'}
-                />
-            </div>
-            <div className={`${classPrefix}-hot-chart`}>
-                {chartType === 'point' && (
-                    <ReactCharts
-                        option={getBarOption(sumByPoint || [])}
-                        style={{ height: '100%', width: '100%' }}
-                    />
-                )}
-
-                {chartType === 'hour' && <Distribute1 data={getDistributeChartData(sumByHour || [])}/>}
-            </div>
-        </div>
-    );
-};
-
-export default Left;