@vtx/modals2 2.6.20 → 2.6.21

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

@@ -1,91 +0,0 @@
-import React from 'react';
-import VmMap from '../../../vm-map';
-import VmInfoCollection from '../../../vm-info-collection';
-import { OverViewLeftFields } from '../../config';
-import { EstateStatisticsResp } from '../../types';
-interface OverViewLeftProps {
-    classPrefix?: string;
-    throwPoints?: any[];
-    basicInfo?: EstateStatisticsResp;
-}
-
-interface SummaryItemProps {
-    name: string;
-    icon: string;
-    unit: string;
-    num: number;
-    top?: number;
-    color?: string;
-}
-
-// 统计
-const SummaryItem = ({ name, icon, unit, num, top = 0, color }: SummaryItemProps) => {
-    return (
-        <div className="vm-estate-summary" style={{ top, color }}>
-            <div className="vm-estate-summary-img">
-                <img src={icon} />
-                <span>{name}</span>
-            </div>
-            <div className="vm-estate-summary-text">
-                <span>{num}</span>
-                <span>{unit}</span>
-            </div>
-        </div>
-    );
-};
-
-const Left: React.FC<OverViewLeftProps> = ({ classPrefix, throwPoints = [], basicInfo }) => {
-    const fieldsData = OverViewLeftFields.map(item => ({
-        ...item,
-        value: basicInfo?.[item.key],
-    }));
-
-    // 户/点
-    const num1 =
-        basicInfo?.householdNum && basicInfo?.throwPointNum
-            ? Math.ceil(basicInfo?.householdNum / basicInfo?.throwPointNum)
-            : 0;
-    // 点/人
-    const num2 =
-        basicInfo?.throwPointNum && basicInfo?.supervisorNum
-            ? Math.ceil(basicInfo?.throwPointNum / basicInfo?.supervisorNum)
-            : 0;
-
-    const points = throwPoints
-        ?.filter((item: any) => item.longitude && item.latitude)
-        .map((item: any) => ({
-            id: item.id,
-            name: item.pointName,
-            lng: item.longitude,
-            lat: item.latitude,
-            url: require('../../imgs/tfd.png'),
-        }));
-    return (
-        <div className={`${classPrefix}-left`}>
-            <div className={`${classPrefix}-left-map`}>
-                <VmMap mapPoints={points} />
-            </div>
-            <div className={`${classPrefix}-left-info`}>
-                <SummaryItem
-                    top={16}
-                    icon={require('../../imgs/left-tfdmd.png')}
-                    unit="户/点"
-                    num={num1}
-                    name="投放点密度"
-                    color="#88FFD4"
-                />
-                <SummaryItem
-                    top={250}
-                    icon={require('../../imgs/left-ddypz.png')}
-                    unit="点/人"
-                    num={num2}
-                    name="督导员配置"
-                    color="#29EFFF"
-                />
-                <VmInfoCollection data={fieldsData} gap={16} />
-            </div>
-        </div>
-    );
-};
-
-export default Left;

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

@@ -1,158 +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({
-        housingEstateId: 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)}%` },
-                            ]
-                            : []),
-                        ...(businessPackages.includes('IDENTIFICATION')
-                            ? [
-                                {
-                                    text: '居民参与率',
-                                    value: `${getPercent(data?.personParticipationRate)}%`,
-                                },
-                            ]
-                            : []),
-                    ]}
-                />
-            </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-housing-estate-modal/components/OverView/RightBottom.tsx

@@ -1,185 +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({ housingEstateId: id });
-    // 近一周趋势
-    const alarmByDateData = overViewService.alarmSumByDate({ housingEstateId: id });
-    // 工单处理效率
-    const efficiencyData = overViewService.resolveEfficiency({
-        housingEstateId: 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-housing-estate-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({
-        housingEstateId: 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;