@vtx/modals2 2.6.19

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

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

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