@vtx/modals2 2.6.19

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

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

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

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

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