@vtx/modals2 2.6.19

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

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

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

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

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

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