@vtx/modals2 2.6.20 → 2.6.21

package/src/vtx-throw-point-modal/components/Alarm/FLZL.tsx

@@ -1,358 +0,0 @@
-import React, { useState } from 'react';
-import ReactEcharts from 'echarts-for-react';
-import moment, { Moment } from 'moment';
-import { message } from 'antd';
-import EChartsReact from 'echarts-for-react';
-import { VMRangePicker, VMDatePicker } from '../../../vm-filter';
-import VmButton from '../../../vm-button';
-import VmSubTitle from '../../../vm-sub-title';
-import { Gauge1, Line1 } from '../../../vm-charts';
-import { overViewService, alarmService } from '../../api';
-import { getMinHundred, getPercent } from '../OverView/RightBottom';
-import { transferLineData } from '../OverView/Trend';
-import { Empty } from './index';
-
-interface AlarmLdbProps {
-    classPrefix?: string;
-    id?: string;
-}
-
-type PieData = {
-    name: string;
-    count: number;
-}[];
-
-interface PieOptionProps {
-    data: PieData;
-    center?: [string, string];
-    radius?: [string, string];
-    legend?: any;
-}
-export const getPieOption = ({ data, center, radius, legend = {} }: PieOptionProps) => {
-    const total = (data || []).reduce((pre, cur) => pre + cur.count, 0);
-    return {
-        tooltip: {
-            trigger: 'item',
-        },
-        legend: {
-            top: 'center',
-            left: '35%',
-            type: 'scroll',
-            orient: 'vertical',
-            formatter: (name: string) => {
-                const obj = data?.find?.(item => item.name === name);
-                const percent = total && obj?.count ? ((obj.count / total) * 100).toFixed(2) : 0;
-                return `{a|${name}}{a|${obj?.count || 0}次}{a|${percent}%}`;
-            },
-            textStyle: {
-                color: '#fff',
-                rich: {
-                    a: {
-                        width: 70,
-                    },
-                },
-            },
-            ...legend,
-        },
-        series: [
-            {
-                type: 'pie',
-                radius: radius || ['50%', '80%'],
-                center: center || ['15%', '50%'],
-                avoidLabelOverlap: false,
-                labelLine: {
-                    show: false,
-                },
-                label: {
-                    show: false,
-                },
-                data: data.map(item => ({
-                    name: item.name,
-                    value: item.count,
-                })),
-            },
-        ],
-    };
-};
-
-interface PictorialBarOption {
-    title: string;
-    data: { name: string; count: number; symbol: any }[];
-}
-const symbols = {
-    'PLASTIC-BAG': require('../../imgs/PLASTIC_BAG.png'),
-    NAPKIN: require('../../imgs/NAPKIN.png'),
-    BOTTLE: require('../../imgs/BOTTLE.png'),
-    CAN: require('../../imgs/CAN.png'),
-    KRAFT_PAPER_BOX: require('../../imgs/KRAFT_PAPER_BOX.png'),
-    DEFAULT: require('../../imgs/garbage_default.png'),
-};
-const getPictorialBarOption = ({ title = '本周', data = [] }: PictorialBarOption) => {
-    return {
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'shadow',
-            },
-        },
-        grid: {
-            containLabel: true,
-            left: 20,
-        },
-        yAxis: {
-            data: data.map(item => item.name),
-            inverse: true,
-            axisLine: { show: false },
-            axisTick: { show: false },
-            axisLabel: {
-                margin: 30,
-                fontSize: 14,
-            },
-            axisPointer: {
-                label: {
-                    show: true,
-                    margin: 30,
-                },
-            },
-        },
-        xAxis: {
-            splitLine: { show: false },
-            axisLabel: { show: false },
-            axisTick: { show: false },
-            axisLine: { show: false },
-        },
-        animationDurationUpdate: 500,
-        series: [
-            {
-                name: title,
-                id: 'bar1',
-                type: 'pictorialBar',
-                label: {
-                    show: true,
-                    position: 'right',
-                    offset: [10, 0],
-                    fontSize: 16,
-                    color: '#fff',
-                },
-                symbolRepeat: true,
-                symbolSize: ['80%', '60%'],
-                barCategoryGap: '40%',
-                // universalTransition: {
-                //     enabled: true,
-                //     delay: function (idx, total) {
-                //         return (idx / total) * 1000;
-                //     }
-                // },
-                data: data.map(item => ({
-                    value: item.count,
-                    symbol: `image://${item.symbol}`,
-                })),
-            },
-        ],
-    };
-};
-const FLZL = ({ classPrefix = '', id = '' }: AlarmLdbProps) => {
-    // 工单处理效率日期
-    const [efficiencyDate, setEfficiencyDate] = useState(moment());
-    // 厨余投放日期
-    const [chuyuDate, setChuyuDate] = useState(moment());
-    // 落地包发生次数一周趋势日期范围
-    const [trendTimes, setTrendTimes] = useState([
-        moment().subtract(7, 'day'),
-        moment().subtract(1, 'day'),
-    ]);
-    // 混投垃圾排行日期范围
-    const [rankTimes, setRankTimes] = useState([
-        moment().subtract(7, 'day'),
-        moment().subtract(1, 'day'),
-    ]);
-    // 混投垃圾排行
-    const [thisWeek, setThisWeek] = useState(true);
-
-    // 工单处理效率
-    const efficiencyData = overViewService.resolveEfficiency({
-        throwPointId: id,
-        businessPackage: 'THROW',
-        beginTime: efficiencyDate.format('YYYY-MM-DD 00:00:00'),
-        endTime: efficiencyDate.format('YYYY-MM-DD 23:59:59'),
-    });
-    // 近一周趋势
-    const alarmByDateData = overViewService.alarmSumByDate({
-        throwPointId: id,
-        businessPackage: 'THROW',
-        beginTime: trendTimes[0].format('YYYY-MM-DD 00:00:00'),
-        endTime: trendTimes[1].format('YYYY-MM-DD 23:59:59'),
-    });
-
-    // 厨余未破袋，混合投放占比
-    const throwPercent = alarmService.chuyuFail({
-        throwPointId: id,
-        beginTime: chuyuDate.format('YYYY-MM-DD 00:00:00'),
-        endTime: chuyuDate.format('YYYY-MM-DD 23:59:59'),
-    });
-
-    // 混投垃圾排行
-    const mixRank = alarmService.mixSumRank({
-        throwPointId: id,
-        beginTime: thisWeek
-            ? rankTimes[0].format('YYYY-MM-DD 00:00:00')
-            : rankTimes[0].subtract(8, 'd').format('YYYY-MM-DD 00:00:00'),
-        endTime: thisWeek
-            ? rankTimes[1].format('YYYY-MM-DD 23:59:59')
-            : rankTimes[1].subtract(8, 'd').format('YYYY-MM-DD 23:59:59'),
-    });
-
-    const barData = (mixRank || []).map(item => ({
-        name: item.garbageTypeName,
-        count: thisWeek ? item.thisWeekCount : item.lastWeekCount,
-        // @ts-ignore
-        symbol: symbols[item.garbageTypeCode] || symbols.DEFAULT,
-    }));
-
-    const lineData = (alarmByDateData || []).map(item => ({
-        name: item.alarmTypeName || '',
-        count: item.count || 0,
-        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="AI工单关闭率"
-                            unit="%"
-                            min={0}
-                            max={100}
-                            num={getPercent(efficiencyData?.closeRate)}
-                            average={getPercent(efficiencyData?.closeRateAverage)}
-                        />
-                    </div>
-                    <div style={{ flex: 1 }}>
-                        <Gauge1
-                            name="AI工单处理时长"
-                            unit="分"
-                            min={0}
-                            max={getMinHundred(
-                                Math.max(
-                                    efficiencyData?.resolveMinute || 0,
-                                    efficiencyData?.resolveMinuteAverage || 0,
-                                ),
-                            )}
-                            num={efficiencyData?.resolveMinute || 0}
-                            average={efficiencyData?.resolveMinuteAverage || 0}
-                        />
-                    </div>
-                    <div style={{ flex: 1 }}>
-                        <Gauge1
-                            name="AI工单及时关闭率"
-                            unit="%"
-                            min={0}
-                            max={100}
-                            num={getPercent(efficiencyData?.closeInTimeRate)}
-                            average={getPercent(efficiencyData?.closeInTimeRateAverage)}
-                        />
-                    </div>
-                </div>
-            </div>
-            <div className={`${classPrefix}-ldb-item`}>
-                <VmSubTitle
-                    title="厨余垃圾投放分析"
-                    extra={
-                        <VMDatePicker
-                            value={chuyuDate}
-                            onChange={(date: Moment) => {
-                                setChuyuDate(date);
-                            }}
-                        />
-                    }
-                />
-                <div style={{ flex: 1 }}>
-                    <ReactEcharts
-                        option={getPieOption({
-                            data: [
-                                { name: '未破袋投放', count: throwPercent?.trashBagCount || 0 },
-                                { name: '混合投放', count: throwPercent?.mixedThrowCount || 0 },
-                            ],
-                            center: ['30%', '50%'],
-                            legend: {
-                                left: '55%',
-                            },
-                        })}
-                        style={{ width: '100%', height: '100%' }}
-                    />
-                </div>
-            </div>
-            <div className={`${classPrefix}-ldb-item`}>
-                <VmSubTitle
-                    title="混投垃圾排行"
-                    extra={
-                        <VMRangePicker
-                            value={rankTimes}
-                            onChange={(date: Moment[]) => {
-                                if (date[1].diff(date[0], 'd') > 7) {
-                                    message.warning('时间跨度不能超过7天');
-                                    return;
-                                }
-                                setRankTimes(date);
-                            }}
-                        />
-                    }
-                />
-                <div style={{ flex: 1 }}>
-                    <div style={{ display: 'flex', justifyContent: 'center', gap: 10 }}>
-                        <VmButton name="本周" active={thisWeek} onClick={() => setThisWeek(true)} />
-                        <VmButton
-                            name="上周"
-                            active={!thisWeek}
-                            onClick={() => setThisWeek(false)}
-                        />
-                    </div>
-                    {!barData?.length ? (
-                        <Empty />
-                    ) : (
-                        <EChartsReact
-                            option={getPictorialBarOption({
-                                title: thisWeek ? '本周' : '上周',
-                                data: barData,
-                            })}
-                        />
-                    )}
-                </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 FLZL;

package/src/vtx-throw-point-modal/components/Alarm/LDB.tsx

@@ -1,201 +0,0 @@
-import React, { useState } from 'react';
-import ReactEcharts from 'echarts-for-react';
-import { message } from 'antd';
-import moment, { Moment } from 'moment';
-import { VMRangePicker, VMDatePicker } from '../../../vm-filter';
-import VmSubTitle from '../../../vm-sub-title';
-import { Gauge1, Line1, Distribute1 } from '../../../vm-charts';
-import { overViewService, alarmService } from '../../api';
-import { getDistributeChartData } from '../OverView/Hot';
-import { getMinHundred, getPercent } from '../OverView/RightBottom';
-import { transferLineData } from '../OverView/Trend';
-import { Empty } from './index';
-import { getPieOption } from './FLZL';
-
-interface AlarmLdbProps {
-    classPrefix?: string;
-    id?: string;
-}
-
-const LDB = ({ classPrefix = '', id = '' }: AlarmLdbProps) => {
-    // 工单处理效率日期
-    const [efficiencyDate, setEfficiencyDate] = useState(moment());
-    // 发生时段日期
-    const [alarmDate, setAlarmDate] = useState(moment());
-    // 落地包发生次数一周趋势日期范围
-    const [trendTimes, setTrendTimes] = useState([
-        moment().subtract(7, 'day'),
-        moment().subtract(1, 'day'),
-    ]);
-    // 落地包发生次数一周分布日期范围
-    const [disTimes, setDisTimes] = useState([
-        moment().subtract(7, 'day'),
-        moment().subtract(1, 'day'),
-    ]);
-
-    // 事件类型分布
-    const alarmByTypeData = overViewService.alarmSumByType({
-        throwPointId: id,
-        businessPackage: 'LANDING',
-        beginTime: alarmDate.format('YYYY-MM-DD 00:00:00'),
-        endTime: alarmDate.format('YYYY-MM-DD 23:59:59'),
-    });
-    // 工单处理效率
-    const efficiencyData = overViewService.resolveEfficiency({
-        throwPointId: id,
-        businessPackage: 'LANDING',
-        beginTime: efficiencyDate.format('YYYY-MM-DD 00:00:00'),
-        endTime: efficiencyDate.format('YYYY-MM-DD 23:59:59'),
-    });
-    // 近一周趋势
-    const alarmByDateData = overViewService.alarmSumByDate({
-        throwPointId: id,
-        businessPackage: 'LANDING',
-        beginTime: trendTimes[0].format('YYYY-MM-DD 00:00:00'),
-        endTime: trendTimes[1].format('YYYY-MM-DD 23:59:59'),
-    });
-    // 一周分布
-    const sumByHour = alarmService.aiAlarmGroupByTypeAndHourOneWeek({
-        throwPointId: id,
-        beginTime: disTimes[0].format('YYYY-MM-DD 00:00:00'),
-        endTime: disTimes[1].format('YYYY-MM-DD 23:59:59'),
-        businessPackage: 'LANDING',
-    });
-
-    const lineData = (alarmByDateData || []).map(item => ({
-        name: item.alarmTypeName || '',
-        count: item.count || 0,
-        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="AI工单关闭率"
-                            unit="%"
-                            min={0}
-                            max={100}
-                            num={getPercent(efficiencyData?.closeRate)}
-                            average={getPercent(efficiencyData?.closeRateAverage)}
-                        />
-                    </div>
-                    <div style={{ flex: 1 }}>
-                        <Gauge1
-                            name="AI工单处理时长"
-                            unit="分"
-                            min={0}
-                            max={getMinHundred(
-                                Math.max(
-                                    efficiencyData?.resolveMinute || 0,
-                                    efficiencyData?.resolveMinuteAverage || 0,
-                                ),
-                            )}
-                            num={efficiencyData?.resolveMinute || 0}
-                            average={efficiencyData?.resolveMinuteAverage || 0}
-                        />
-                    </div>
-                    <div style={{ flex: 1 }}>
-                        <Gauge1
-                            name="AI工单及时关闭率"
-                            unit="%"
-                            min={0}
-                            max={100}
-                            num={getPercent(efficiencyData?.closeInTimeRate)}
-                            average={getPercent(efficiencyData?.closeInTimeRateAverage)}
-                        />
-                    </div>
-                </div>
-            </div>
-            <div className={`${classPrefix}-ldb-item`}>
-                <VmSubTitle
-                    title="落地包发生时段对比"
-                    extra={
-                        <VMDatePicker
-                            value={alarmDate}
-                            onChange={(date: Moment) => {
-                                setAlarmDate(date);
-                            }}
-                        />
-                    }
-                />
-                <div style={{ flex: 1 }}>
-                    {!alarmByTypeData?.length ? (
-                        <Empty />
-                    ) : (
-                        <ReactEcharts
-                            option={getPieOption({
-                                data: (alarmByTypeData || []).map(item => ({
-                                    name: item.alarmTypeName,
-                                    count: item.count,
-                                })),
-                                center: ['30%', '50%'],
-                                legend: {
-                                    left: '50%',
-                                },
-                            })}
-                        />
-                    )}
-                </div>
-            </div>
-            <div className={`${classPrefix}-ldb-item`}>
-                <VmSubTitle
-                    title="落地包发生次数一周分布"
-                    extra={
-                        <VMRangePicker
-                            value={disTimes}
-                            onChange={(date: Moment[]) => {
-                                if (date[1].diff(date[0], 'd') > 7) {
-                                    message.warning('时间跨度不能超过7天');
-                                    return;
-                                }
-                                setDisTimes(date);
-                            }}
-                        />
-                    }
-                />
-                <div style={{ flex: 1 }}>
-                    {!sumByHour?.length ? (
-                        <Empty />
-                    ) : (
-                        <Distribute1 data={getDistributeChartData(sumByHour || [])} />
-                    )}
-                </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 ? <Empty /> : <Line1 {...transferLineData(lineData)} />}
-                </div>
-            </div>
-        </div>
-    );
-};
-export default LDB;