@vtx/modals2 2.6.19 → 2.6.21

package/src/vtx-throw-point-modal/components/OverView/Left.tsx

@@ -1,181 +0,0 @@
-import React from 'react';
-import moment from 'moment';
-import VmInfoCollection from '../../../vm-info-collection';
-import { OverViewLeftFields } from '../../config';
-import { EstateStatisticsResp } from '../../types';
-interface OverViewLeftProps {
-    classPrefix?: string;
-    basicInfo?: EstateStatisticsResp;
-}
-
-const Left: React.FC<OverViewLeftProps> = ({ classPrefix, basicInfo }) => {
-    const fieldsData = OverViewLeftFields.map(item => ({
-        ...item,
-        value: basicInfo?.[item.key],
-    }));
-
-    function inTimeRange(startTime: string, endTime: string) {
-        const starts = startTime.split(':');
-        const ends = endTime.split(':');
-        let flag = false;
-        if (moment().hour() >= parseInt(starts[0]) && moment().hour() <= parseInt(ends[0])) {
-            flag = true;
-            return flag;
-        }
-        if (moment().hour() === parseInt(starts[0]) && moment().hour() === parseInt(ends[0])) {
-            if (
-                moment().minute() >= parseInt(starts[1]) &&
-                moment().minute() <= parseInt(ends[1])
-            ) {
-                flag = true;
-                return flag;
-            }
-        }
-        if (
-            moment().hour() === parseInt(starts[0]) &&
-            moment().hour() === parseInt(ends[0]) &&
-            moment().minute() === parseInt(starts[1]) &&
-            moment().minute() === parseInt(ends[1])
-        ) {
-            if (
-                moment().second() >= parseInt(starts[2]) &&
-                moment().second() <= parseInt(ends[2])
-            ) {
-                flag = true;
-                return flag;
-            }
-        }
-        return flag;
-    }
-
-    // 投放时间
-    const getStatus = (list: any[]) => {
-        let minutes = 0,
-            start = '',
-            end = '';
-        const date = moment().format('YYYY-MM-DD');
-        list?.length &&
-            list.map(ite => {
-                const flag = inTimeRange(ite.startTime, ite.endTime);
-                if (flag) {
-                    minutes =
-                        (moment(moment(`${date} ${ite.endTime}`)).valueOf() - moment().valueOf()) /
-                        1000 /
-                        60;
-                    start = ite.startTime;
-                    end = ite.endTime;
-                }
-            });
-        if (minutes > 0 && minutes <= 30) {
-            return (
-                <>
-                    <span>开放中 | </span>
-                    <span>{minutes.toFixed(0)}分钟后关闭</span>
-                    <span>
-                        ({start} {end})
-                    </span>
-                </>
-            );
-        }
-        if (minutes > 30) {
-            return (
-                <>
-                    <span>开放中</span>
-                </>
-            );
-        }
-        return <span>已关闭</span>;
-    };
-
-    return (
-        <div className={`${classPrefix}-left`}>
-            <div className={`${classPrefix}-left-title`}>
-                <div className={`${classPrefix}-left-title1`}>
-                    <span>{basicInfo?.pointTypeDesc || ''} </span>
-                    <img width={17} height={17} src={require('../../imgs/point.png')} />
-                    {basicInfo?.hasOffline ? <span> 在线</span> : <span> 离线</span>}
-                </div>
-                <div className={`${classPrefix}-left-title2`}>
-                    {getStatus(basicInfo?.throwPeriods)}
-                </div>
-            </div>
-            <div className={`${classPrefix}-left-img`}>
-                {basicInfo?.photo?.length ? (
-                    <img
-                        width={320}
-                        height={250}
-                        src={`/cloudFile/common/downloadFile?id=${JSON.parse(basicInfo.photo || '[]')[0]?.id
-                            }`}
-                    />
-                ) : (
-                    <img
-                        width={320}
-                        height={250}
-                        src={require(`../../imgs/${basicInfo?.pointType === 'SMART_CLEAN_HOUSE'
-                            ? 'toukou'
-                            : basicInfo?.pointType === 'OPEN_CLEAN_HOUSE'
-                                ? 'fangzi'
-                                : 'tingzi'
-                            }.gif`)}
-                    />
-                )}
-            </div>
-            <div className={`${classPrefix}-left-middle`}>
-                <div className={`${classPrefix}-left-item1`}>
-                    <span>满溢</span>
-                    <span>
-                        <span className={`${classPrefix}-left-item1-big`}>
-                            {basicInfo?.throwAberrantStatistics?.overflow.happeningCount || 0}
-                        </span>
-                        /{basicInfo?.throwAberrantStatistics?.overflow.todayCount || 0}件
-                    </span>
-                </div>
-                <div className={`${classPrefix}-left-item2`}>
-                    <div className={`${classPrefix}-left-item3`}>
-                        <span>桶外投放</span>
-                        <span>
-                            <span className={`${classPrefix}-left-item1-big`}>
-                                {basicInfo?.throwAberrantStatistics?.rightTimeOut.happeningCount ||
-                                    0}
-                            </span>
-                            /{basicInfo?.throwAberrantStatistics?.rightTimeOut.todayCount || 0}件
-                        </span>
-                    </div>
-                    <div className={`${classPrefix}-left-item4`}>
-                        <span>误时投放</span>
-                        <span>
-                            <span className={`${classPrefix}-left-item1-big`}>
-                                {basicInfo?.throwAberrantStatistics?.wrongTimeOut.happeningCount ||
-                                    0}
-                            </span>
-                            /{basicInfo?.throwAberrantStatistics?.wrongTimeOut.todayCount || 0}件
-                        </span>
-                    </div>
-                    <div className={`${classPrefix}-left-item5`}>
-                        <span>未破袋</span>
-                        <span>
-                            <span className={`${classPrefix}-left-item1-big`}>
-                                {basicInfo?.throwAberrantStatistics?.trashBag.happeningCount || 0}
-                            </span>
-                            /{basicInfo?.throwAberrantStatistics?.trashBag.todayCount || 0}件
-                        </span>
-                    </div>
-                    <div className={`${classPrefix}-left-item6`}>
-                        <span>混投</span>
-                        <span>
-                            <span className={`${classPrefix}-left-item1-big`}>
-                                {basicInfo?.throwAberrantStatistics?.mixedThrow.happeningCount || 0}
-                            </span>
-                            /{basicInfo?.throwAberrantStatistics?.mixedThrow.todayCount || 0}件
-                        </span>
-                    </div>
-                </div>
-            </div>
-            <div className={`${classPrefix}-left-info`}>
-                <VmInfoCollection data={fieldsData} gap={16} />
-            </div>
-        </div>
-    );
-};
-
-export default Left;

package/src/vtx-throw-point-modal/components/OverView/Manage.tsx

@@ -1,151 +0,0 @@
-import React from 'react';
-import moment from 'moment';
-import VmSubTitle from '../../../vm-sub-title';
-import { getDivisionBusinessPackages, overViewService } from '../../api';
-import { getPercent } from './RightBottom';
-interface OverViewManageProps {
-    classPrefix?: string;
-    id: string;
-}
-
-interface SummaryItemProps {
-    icon: string;
-    name: string;
-    unit: string;
-    num: number;
-}
-
-interface TopItemProps {
-    name: string;
-    icon: string;
-    content: Array<{ text: string; value: string }>;
-    textStyleType: 1 | 2;
-}
-
-export const SummaryItem = ({ icon, name, unit, num }: SummaryItemProps) => {
-    return (
-        <div className="summary-item">
-            <img src={icon} />
-            <div className="summary-item-text">
-                <p>{name}</p>
-                <p>
-                    <span>{num}</span>
-                    {unit}
-                </p>
-            </div>
-        </div>
-    );
-};
-
-const TopItem = ({ name, content, icon, textStyleType }: TopItemProps) => {
-    return (
-        <div className="top-item">
-            <div className="img">
-                <p className={`name--${textStyleType}`}>{name}</p>
-                <img src={icon} />
-            </div>
-            <div className="statistic">
-                {content.map(item => {
-                    return (
-                        <div key={item.text} style={{ width: 240 }}>
-                            <span>{item.text}</span>
-                            <span className={`statistic-value--${textStyleType}`}>
-                                {item.value}
-                            </span>
-                        </div>
-                    );
-                })}
-            </div>
-        </div>
-    );
-};
-const Manage: React.FC<OverViewManageProps> = ({ classPrefix, id }) => {
-    const data = overViewService.managementData({
-        throwPointId: id,
-    });
-    const businessPackages = getDivisionBusinessPackages(id) || [];
-    // 今日已过时常
-    const todayPastHour = Number(
-        (
-            (moment().valueOf() -
-                moment()
-                    .startOf('day')
-                    .valueOf()) /
-            1000 /
-            60 /
-            60
-        ).toFixed(1),
-    );
-    const cleanGroundDuration = data?.dirtyGroundDuration
-        ? (todayPastHour - data?.dirtyGroundDuration / 60).toFixed(1)
-        : 0;
-    const noOverflowDuration = data?.overflowDuration
-        ? (todayPastHour - data?.overflowDuration / 60).toFixed(1)
-        : 0;
-
-    return (
-        <div className={`${classPrefix}-manage`}>
-            <VmSubTitle title="运营管理" />
-            <div className={`${classPrefix}-manage-top`} style={businessPackages.includes('THROW') ? { flexDirection: 'column' } : {}}>
-                <TopItem
-                    name="环境管理成效"
-                    icon={require('../../imgs/manage-hjgl.png')}
-                    textStyleType={1}
-                    content={[
-                        ...(businessPackages.includes('LANDING')
-                            ? [
-                                {
-                                    text: '今日地面干净时长占比',
-                                    value: `${cleanGroundDuration}h/${todayPastHour}h`,
-                                },
-                            ]
-                            : []),
-                        ...(businessPackages.includes('OVERFLOW')
-                            ? [
-                                {
-                                    text: '今日无爆桶状态时长占比',
-                                    value: `${noOverflowDuration}h/${todayPastHour}h`,
-                                },
-                            ]
-                            : []),
-                    ]}
-                />
-                <TopItem
-                    name="公众宣教成效"
-                    icon={require('../../imgs/manage-gzcx.png')}
-                    textStyleType={2}
-                    content={[
-                        ...(businessPackages.includes('CHUYU_QUALITY')
-                            ? [
-                                { text: '厨余准确率', value: `${getPercent(data?.chuyuAccuracy)}%` },
-                            ]
-                            : []),
-                        // { text: '居民参与率', value: `${data?.personParticipationRate || 0}%` },
-                    ]}
-                />
-            </div>
-            <div className={`${classPrefix}-manage-bottom`}>
-                <SummaryItem
-                    icon={require('../../imgs/manage-yyxj.png')}
-                    name="语音宣教"
-                    unit="次"
-                    num={data?.voiceEducateTimes || 0}
-                />
-                {businessPackages.includes('IDENTIFICATION') && <SummaryItem
-                    icon={require('../../imgs/manage-wgmsr.png')}
-                    name="违规陌生人"
-                    unit="人"
-                    num={data?.strangerNum || 0}
-                />}
-                {businessPackages.includes('IDENTIFICATION') && <SummaryItem
-                    icon={require('../../imgs/manage-hmd.png')}
-                    name="灰名单"
-                    unit="人"
-                    num={data?.badLabelPersonNum || 0}
-                />}
-            </div>
-        </div>
-    );
-};
-
-export default Manage;

package/src/vtx-throw-point-modal/components/OverView/RightBottom.tsx

@@ -1,182 +0,0 @@
-import React, { useState } from 'react';
-import ReactEcharts from 'echarts-for-react';
-import VmSubTitle from '../../../vm-sub-title';
-import VmButton from '../../../vm-button';
-import { Gauge1, Line1 } from '../../../vm-charts';
-import { overViewService } from '../../api';
-import type { AlarmByTypeResp } from '../../types'
-import { transferLineData } from './Trend';
-import { getFilterEcharts, filterCode } from '../../config';
-
-interface PieOptionProps {
-    data: AlarmByTypeResp[];
-    center?: [string, string];
-    radius?: [string, string];
-    legend?: any
-}
-export const getPieOption = ({ data = [], center, radius, legend = {} }: PieOptionProps, serviceList: any) => {
-    let _data: any = getFilterEcharts(data, serviceList) || [];
-    return {
-        tooltip: {
-            trigger: 'item',
-        },
-        legend: {
-            top: 'center',
-            left: '35%',
-            type: 'scroll',
-            orient: 'vertical',
-            formatter: (name: string) => {
-                const obj = _data?.find?.((item:any) => item.alarmTypeName === name);
-                return `{a|${name}}{a|${obj?.count || 0}次}{a|均值：${obj?.countAvg || 0}次}`;
-            },
-            textStyle: {
-                color: '#fff',
-                rich: {
-                    a: {
-                        width: 70,
-                    },
-                },
-            },
-            ...legend
-        },
-        series: [
-            {
-                name: '事件类型分布',
-                type: 'pie',
-                radius: radius || ['50%', '80%'],
-                center: center || ['15%', '50%'],
-                avoidLabelOverlap: false,
-                labelLine: {
-                    show: false,
-                },
-                label: {
-                    show: false,
-                },
-                data: _data.map((item:any) => ({
-                    name: item.alarmTypeName,
-                    value: item.count,
-                }))
-            },
-        ],
-    };
-};
-
-interface OverViewRightBottomProps {
-    classPrefix?: string;
-    id: string;
-    serviceList: any[];
-}
-
-enum PieCharType {
-    SJLX = '事件类型分布',
-    QS = '近一周趋势',
-}
-
-export function getMinHundred(num: number) {
-    return Math.ceil(num / 100) * 100 || 100;
-}
-export function getPercent(num: number = 0) {
-    return num ? (num * 100).toFixed(2) : 0
-}
-
-const RightBottom: React.FC<OverViewRightBottomProps> = ({ classPrefix, id, serviceList }) => {
-    const [pieChartType, setPieChartType] = useState<PieCharType>(PieCharType.SJLX);
-    // 事件类型分布
-    const alarmByTypeData = overViewService.alarmSumByType({ throwPointId: id });
-    // 近一周趋势
-    const alarmByDateData = overViewService.alarmSumByDate({ throwPointId: id });
-    // 工单处理效率
-    const efficiencyData = overViewService.resolveEfficiency({
-        throwPointId: id,
-    });
-    const lineData = (getFilterEcharts(alarmByDateData, serviceList) || []).map(item => ({
-        name: item.alarmTypeName || '',
-        count: item.count || 0,
-        day: item.day || ''
-    }))
-    return (
-        <div className={`${classPrefix}-rightbottom`}>
-            {/* 根据业务包展示不同的样式 */}
-            {serviceList.includes('THROW') ? <>
-                <VmSubTitle title="AI工单" />
-                <div className={`${classPrefix}-rightbottom--buttons`}>
-                    <VmButton
-                        onClick={() => setPieChartType(PieCharType.SJLX)}
-                        name="事件类型分布"
-                        active={pieChartType === PieCharType.SJLX}
-                        style={{ marginRight: 10 }}
-                    />
-                    <VmButton
-                        onClick={() => setPieChartType(PieCharType.QS)}
-                        name="近一周趋势"
-                        active={pieChartType === PieCharType.QS}
-                    />
-                </div>
-                <div className={`${classPrefix}-rightbottom--pie`}>
-                    {
-                        pieChartType === PieCharType.SJLX && <ReactEcharts option={getPieOption({ data: alarmByTypeData || [] }, serviceList)} style={{ height: 150 }} />
-                    }
-                    {
-                        pieChartType === PieCharType.QS && <Line1 {...transferLineData(lineData)} style={{ height: 150 }} />
-                    }
-                </div>
-            </> : <div className={`${classPrefix}-rightbottom-echarts`}>
-                <div className="content">
-                    <VmSubTitle title="事件类型分布" />
-                    <ReactEcharts option={getPieOption({ data: alarmByTypeData || [] }, serviceList)} style={{ height: 150 }} />
-                </div>
-                <div className="content">
-                    <VmSubTitle title="近一周趋势" />
-                    <Line1 {...transferLineData(lineData)} style={{ height: 150 }} />
-                </div>
-            </div>}
-            {
-                filterCode(serviceList, [
-                    'CHUYU_QUALITY',
-                    'LANDING',
-                    'ON_LID',
-                    'QITA_QUALITY',
-                ])?.size ? <><VmSubTitle title="工单处理效率" />
-                    <div className={`${classPrefix}-rightbottom--gauges`}>
-                        <div className="gauges-chart">
-                            <Gauge1
-                                name="AI工单关闭率"
-                                unit="%"
-                                min={0}
-                                max={100}
-                                num={getPercent(efficiencyData?.closeRate)}
-                                average={getPercent(efficiencyData?.closeRateAverage)}
-                            />
-                        </div>
-                        <div className="gauges-chart">
-                            <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 className="gauges-chart">
-                            <Gauge1
-                                name="AI工单及时关闭率"
-                                unit="%"
-                                min={0}
-                                max={100}
-                                num={getPercent(efficiencyData?.closeInTimeRate)}
-                                average={getPercent(efficiencyData?.closeInTimeRateAverage)}
-                            />
-                        </div>
-                    </div>
-                </> : null}
-        </div>
-    );
-};
-
-export default RightBottom;

package/src/vtx-throw-point-modal/components/OverView/Trend.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import groupBy from 'lodash/groupBy';
-import VmSubTitle from '../../../vm-sub-title';
-import { Line1 } from '../../../vm-charts';
-import type { Line1Props } from '../../../vm-charts'
-import { overViewService } from '../../api';
-interface OverViewTrendProps {
-    classPrefix?: string;
-    id: string;
-}
-
-type lineDataItem = {name: string, count: number, day: string}
-export function transferLineData(data: lineDataItem[] = []): Line1Props {
-    const groupByThrowPoint = groupBy(data || [], 'name');
-    const groupByDay = groupBy(data || [], 'day');
-    const lineData = [];
-    for (const key in groupByThrowPoint) {
-        const item = (groupByThrowPoint[key] as lineDataItem[]);
-        lineData.push({
-            name: item[0].name || '',
-            data: item.map(item => item.count || 0),
-        });
-    }
-    // 去除日期中的年
-    const xAxis = Object.keys(groupByDay).map(item => item.substring(5))
-    return { xAxis, data: lineData };
-}
-
-const Trend: React.FC<OverViewTrendProps> = ({ classPrefix, id }) => {
-    const sumByPoint = overViewService.throwSumByDayAndPoint({
-        throwPointId: id,
-    });
-    const lineData = (sumByPoint || []).map(item => ({
-        name: item.throwPointName || '',
-        count: item.throwCount || 0,
-        day: item.day || ''
-    }))
-
-    return (
-        <div className={`${classPrefix}-trend`}>
-            <VmSubTitle title="近一周趋势" />
-            <div className={`${classPrefix}-trend-chart`}>
-                <Line1 {...transferLineData(lineData)} />
-            </div>
-        </div>
-    );
-};
-
-export default Trend;