@vtx/modals2 2.6.19

package/src/vtx-car-modal/index.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import useSettings from '../vm-hooks/useSettings';
+import VtxBaseModal from '../vtx-base-modal';
+import {
+    BaseInfo,
+    CarAlarmInfo,
+    StaticInfo,
+    WaterConsumption,
+    OilConsumption,
+    Maintenance,
+    WorkInfo,
+} from './components';
+import VmVideo from '../vm-video';
+import { BaseService } from './api';
+import VideoService from '../vm-video/api';
+import '../style';
+
+const TABS_BASE = 'car-base';
+const TABS_ALARM = 'car-alarm';
+const TABS_STATIC = 'car-static';
+const TABS_WATER = 'car-water';
+const TABS_OIL = 'car-oil';
+const TABS_MAINTENANCE = 'car-maintenance';
+const TABS_WORK = 'car-work';
+const TABS_VIDEO = 'car-video';
+interface VtxCarModalProps {
+    id: string;
+    theme?: 'light' | 'dark';
+    visible: boolean;
+    onCancel: () => void;
+    title: string;
+    subTitle?: string;
+}
+const VtxCarModal = (props: VtxCarModalProps) => {
+    const { id, title, theme, visible, onCancel } = props;
+    const { baseInfo, info } = BaseService.useBaseInfo(id);
+    const { channels } = VideoService.getChannels(info?.carCode, !!info?.carCode);
+    let tabs = [
+        { key: TABS_BASE, title: '总览信息' },
+        { key: TABS_ALARM, title: '报警信息' },
+        { key: TABS_STATIC, title: '统计信息' },
+        { key: TABS_WATER, title: '水耗信息' },
+        { key: TABS_OIL, title: '油耗信息' },
+        { key: TABS_MAINTENANCE, title: '维保信息' },
+    ];
+    if (channels?.length > 0) {
+        tabs = tabs.concat([{ key: TABS_VIDEO, title: '视频信息' }]);
+    }
+    if (info?.actionType === 'ACTION_LJSY' || info?.actionType === 'ACTION_JXH') {
+        tabs = tabs.concat([{ key: TABS_WORK, title: '作业信息' }]);
+    }
+    return (
+        <>
+            {visible && (
+                <VtxBaseModal
+                    title={title}
+                    subTitle={
+                        <span className="car-subtitle">
+                            {info?.carClassName ? `(${info?.carClassName})` : ''}
+                        </span>
+                    }
+                    id={id}
+                    type="car"
+                    theme={theme}
+                    visible={visible}
+                    onCancel={onCancel}
+                    tabs={tabs}
+                    contents={{
+                        [TABS_BASE]: <BaseInfo id={id} baseInfo={baseInfo} info={info} />,
+                        [TABS_ALARM]: <CarAlarmInfo id={id} carCode={info?.carCode} />,
+                        [TABS_STATIC]: <StaticInfo id={id} />,
+                        [TABS_WATER]: <WaterConsumption id={id} />,
+                        [TABS_OIL]: <OilConsumption id={id} />,
+                        [TABS_MAINTENANCE]: <Maintenance id={id} />,
+                        [TABS_WORK]: <WorkInfo id={id} actionType={info?.actionType || ''} />,
+                        [TABS_VIDEO]: <VmVideo videoPlaceCode={info?.carCode} />,
+                    }}
+                />
+            )}
+        </>
+    );
+};
+
+interface ExtButtonProps {
+    text: string;
+    img: string;
+    onClick: () => void;
+}
+
+export const VehicleExtButton = (props: ExtButtonProps) => {
+    const { img, text, onClick } = props;
+    const { theme } = useSettings();
+    return (
+        <div className={`vtx-vehicle-ext-btn ${theme}`} onClick={onClick}>
+            <img src={img} alt="" />
+            <span>{text}</span>
+        </div>
+    );
+};
+
+export default VtxCarModal;

package/src/vtx-car-modal/style/index.less

@@ -0,0 +1,6 @@
+@import '../../style/index';
+
+.car-subtitle {
+    font-size: 14px;
+    color: var(--sub-title-color);
+}

package/src/vtx-car-modal/style/index.ts

@@ -0,0 +1,8 @@
+import './index.less';
+import '../components/BaseInfo/index.less';
+import '../components/AlarmInfo/index.less';
+import '../components/StaticInfo/index.less';
+import '../components/WaterConsumption/index.less';
+import '../components/OilConsumption/index.less';
+import '../components/Maintenance/index.less';
+import '../components/WorkInfo/index.less';

package/src/vtx-cp-modal/api.ts

@@ -0,0 +1,325 @@
+import { request } from '@vtx/utils';
+import { useRequest } from 'ahooks';
+const BaseService = {
+    useBaseDetail: (id: string) => {
+        const { data: baseInfoRes } = useRequest(
+            () =>
+                request.get('/cloud/ljsy-reborn/api/collect/point/get', {
+                    data: { id: id, coordinateType: 'bd09' },
+                }),
+            { refreshDeps: [id] },
+        );
+        const info = baseInfoRes?.data;
+        const baseInfo = [
+            {
+                label: '行政区划',
+                key: 'divisionName',
+                value: info?.divisionName,
+            },
+
+            {
+                label: '垃圾类型',
+                key: 'productTypeNames',
+                value: info?.productTypeNames,
+            },
+            {
+                label: '管理单位',
+                key: 'manageUnitName',
+                value: info?.manageUnitName,
+            },
+            {
+                label: '收运单位',
+                key: 'accUnitName',
+                value: info?.accUnitName,
+            },
+
+            {
+                label: '地址',
+                key: 'address',
+                value: info?.address,
+            },
+        ];
+        return {
+            info,
+            baseInfo,
+            rules: info?.rules || [],
+        };
+    },
+
+    useBaseInfo: (id: string, startDate: string, endDate: string) => {
+        // 今日作业
+        const { data: todayWorkRes } = useRequest(
+            () =>
+                request.get('/cloud/ljsy-reborn/api/kanban/collectRateByProduct', {
+                    data: {
+                        collectPointId: id,
+                        startDate,
+                        endDate,
+                        coordinateType: 'bd09',
+                    },
+                }),
+            { refreshDeps: [id, startDate, endDate] },
+        );
+        // 车辆作业信息
+        const { data: carWorkRes } = useRequest(
+            () =>
+                request.get('/cloud/ljsy-reborn/api/kanban/getCarCollectInfoByPointId', {
+                    data: {
+                        collectPointId: id,
+                        startDate,
+                        endDate,
+                        coordinateType: 'bd09',
+                    },
+                }),
+            { refreshDeps: [id, startDate, endDate] },
+        );
+        return {
+            todayWorkRes: todayWorkRes?.data || [],
+            dataSource: carWorkRes?.data || [],
+        };
+    },
+};
+
+const SyService = {
+    useBaseInfo: (id: string, startDate: string, endDate: string) => {
+        const { data: baseInfoRes } = useRequest(
+            () =>
+                request.get('/cloud/ljsy-reborn/api/kanban/collectRateByProduct', {
+                    data: { collectPointId: id, startDate, endDate },
+                }),
+            { refreshDeps: [id, startDate, endDate] },
+        );
+        const baseInfo = baseInfoRes?.data || [];
+
+        const { data: collectWeightRes } = useRequest(
+            () =>
+                request.get('/cloud/ljsy-reborn/api/kanban/collectWeightAnalyze', {
+                    data: { collectPointId: id, startDate, endDate },
+                }),
+            { refreshDeps: [id, startDate, endDate] },
+        );
+        const collectWeight = collectWeightRes?.data;
+        return {
+            baseInfo,
+            collectWeight,
+        };
+    },
+    useRecordInfo: (
+        id: string,
+        productTypeId: string,
+        startTime: string,
+        endTime: string,
+        page: number,
+        sort: string,
+    ) => {
+        const { data: recordRes } = useRequest(
+            () =>
+                request.get('/cloud/ljsy-reborn/api/collect/record/day/page', {
+                    data: {
+                        collectPointId: id,
+                        productTypeId,
+                        startTime,
+                        endTime,
+                        page,
+                        size: 10,
+                        sort,
+                    },
+                }),
+            { refreshDeps: [id, productTypeId, startTime, endTime, page, sort] },
+        );
+        const records = recordRes?.data || { total: 0, rows: [] };
+        return {
+            records,
+        };
+    },
+};
+
+const AlarmService = {
+    //信息汇总
+    useAlarmSummary: (id: string, dateValue: string) => {
+        const { data: alarmSummaryRes } = useRequest(
+            () =>
+                request.get('/cloud/ljsy-reborn/api/kanban/getAlarmStatisticsByCollectPointId', {
+                    data: {
+                        collectPointId: id,
+                        dateValue,
+                    },
+                }),
+            { refreshDeps: [id, dateValue] },
+        );
+        const alarmSummary = alarmSummaryRes?.data || [];
+
+        return {
+            alarmSummary,
+        };
+    },
+
+    // 类型分析
+    useAlarmTrend: (id: string, startDate: string, endDate: string) => {
+        const { data: alarmTypeRes } = useRequest(
+            () =>
+                request.get('/cloud/ljsy-reborn/api/kanban/alarmStatisticsByAlarmType', {
+                    data: {
+                        collectPointId: id,
+                        startDate,
+                        endDate,
+                    },
+                }),
+            { refreshDeps: [id, startDate, endDate] },
+        );
+        const alarmTypes = alarmTypeRes?.data || [];
+
+        return {
+            alarmTypes,
+        };
+    },
+
+    // 月度趋势分析
+    useAlarmMonthTrend: (id: string, startDate: string, endDate: string) => {
+        const { data: alarmMonthTrendRes } = useRequest(
+            () =>
+                request.get('/cloud/ljsy-reborn/api/kanban/alarmStatisticsByMonth', {
+                    data: {
+                        collectPointId: id,
+                        startDate,
+                        endDate,
+                    },
+                }),
+            { refreshDeps: [id, startDate, endDate] },
+        );
+
+        const alarmMonthTrend = alarmMonthTrendRes?.data || [];
+
+        return {
+            alarmMonthTrend,
+        };
+    },
+
+    // 报警记录
+    useAlarmRecord: (
+        id: string,
+        alarmTypeCode: string,
+        start: string,
+        end: string,
+        page: number,
+        sort: string,
+    ) => {
+        const { data: alarmRecordRes } = useRequest(
+            () =>
+                request.get('/cloud/ljsy-reborn/api/collect/point/alarm/alarmPage', {
+                    data: {
+                        collectPointIds: id,
+                        alarmTypeCode,
+                        startDate: start,
+                        endDate: end,
+                        page: page,
+                        size: 10,
+                        sort,
+                    },
+                }),
+            {
+                paginated: true,
+                refreshDeps: [id, alarmTypeCode, start, end, page, sort],
+            },
+        );
+        const dataSource = alarmRecordRes?.data?.rows || [];
+        const total = alarmRecordRes?.data?.total;
+        return { detail: { dataSource, total } };
+    },
+};
+
+const ExeceptionService = {
+    //信息汇总
+    useAlarmSummary: (id: string, dateValue: string) => {
+        const { data: alarmSummaryRes } = useRequest(
+            () =>
+                request.get('/cloud/ljsy-reborn/api/kanban/getAbnormalStatisticsByCollectPointId', {
+                    data: {
+                        collectPointId: id,
+                        dateValue,
+                    },
+                }),
+            { refreshDeps: [id, dateValue] },
+        );
+        const alarmSummary = alarmSummaryRes?.data || [];
+
+        return {
+            alarmSummary,
+        };
+    },
+
+    // 类型分析
+    useAlarmTrend: (id: string, startDate: string, endDate: string) => {
+        const { data: alarmTypeRes } = useRequest(
+            () =>
+                request.get('/cloud/ljsy-reborn/api/kanban/abnormalStatisticsByAbnormalType', {
+                    data: {
+                        collectPointId: id,
+                        startDate,
+                        endDate,
+                    },
+                }),
+            { refreshDeps: [id, startDate, endDate] },
+        );
+        const alarmTypes = alarmTypeRes?.data || [];
+
+        return {
+            alarmTypes,
+        };
+    },
+
+    // 月度趋势分析
+    useAlarmMonthTrend: (id: string, startDate: string, endDate: string) => {
+        const { data: alarmMonthTrendRes } = useRequest(
+            () =>
+                request.get('/cloud/ljsy-reborn/api/kanban/abnormalStatisticsByMonth', {
+                    data: {
+                        collectPointId: id,
+                        startDate,
+                        endDate,
+                    },
+                }),
+            { refreshDeps: [id, startDate, endDate] },
+        );
+
+        const alarmMonthTrend = alarmMonthTrendRes?.data || [];
+
+        return {
+            alarmMonthTrend,
+        };
+    },
+
+    // 异常记录
+    useAlarmRecord: (
+        id: string,
+        abnormalType: string,
+        start: string,
+        end: string,
+        page: number,
+        sort: string,
+    ) => {
+        const { data: alarmRecordRes } = useRequest(
+            () =>
+                request.get('/cloud/ljsy-reborn/api/abnormal/reporting/page', {
+                    data: {
+                        collectPointIds: id,
+                        abnormalType,
+                        startTime: start,
+                        endTime: end,
+                        page: page,
+                        size: 10,
+                        sort,
+                    },
+                }),
+            {
+                paginated: true,
+                refreshDeps: [id, abnormalType, start, end, page, sort],
+            },
+        );
+        const dataSource = alarmRecordRes?.data?.rows || [];
+        const total = alarmRecordRes?.data?.total;
+        return { detail: { dataSource, total } };
+    },
+};
+
+export { BaseService, SyService, AlarmService, ExeceptionService };

package/src/vtx-cp-modal/components/AlarmInfo/AlarmRecord.tsx

@@ -0,0 +1,155 @@
+/**
+ * 报警记录
+ */
+import React, { useEffect } from 'react';
+import { useSetState } from 'ahooks';
+import moment from 'moment';
+import sumBy from 'lodash/sumBy';
+import VMTable from '../../../vm-table';
+import { SubTabsLine } from '../../../vm-sub-tabs';
+import SubTitle from '../../../vm-sub-title';
+import { VMRangePicker } from '../../../vm-filter';
+import { AlarmService } from '../../api';
+
+interface TypeProps {
+    id: string;
+}
+
+export default function AlarmRecord(props: TypeProps) {
+    const { id } = props;
+    const [state, setState] = useSetState({
+        alarmTypeCode: 'all',
+        alarmTabs: [{ key: 'all', label: '全部' }],
+        startDate: moment()
+            .startOf('M')
+            .format('YYYY-MM-DD'),
+        endDate: moment().format('YYYY-MM-DD'),
+        pagination: {
+            current: 1,
+            pageSize: 10,
+            total: 0,
+        },
+        sort: '',
+    });
+    const { alarmTabs, pagination, alarmTypeCode, startDate, endDate, sort } = state;
+
+    const { alarmTypes } = AlarmService.useAlarmTrend(id, startDate, endDate);
+    const { detail } = AlarmService.useAlarmRecord(
+        id,
+        alarmTypeCode === 'all' ? '' : alarmTypeCode,
+        startDate,
+        endDate,
+        pagination.current - 1,
+        sort,
+    );
+    // 格式化报警类型数据
+    const formatAlarmType = (dataList: Array<any>) => {
+        let list: Array<any> = [];
+        let totalCount = 0; // 报警类型总数
+        totalCount = sumBy(dataList, function(o: any) {
+            return o.count;
+        });
+        dataList.forEach((ele: any) => {
+            const obj = {
+                key: ele.typeCode,
+                label: `${ele.typeName} (${ele.count})`,
+            };
+            list.push(obj);
+        });
+        return { list, totalCount };
+    };
+
+    useEffect(() => {
+        let arr = [{ key: 'all', label: '全部' }]; // 报警明细标签
+        if (alarmTypes?.length > 0) {
+            const { list, totalCount } = formatAlarmType(alarmTypes);
+            arr[0].label = `全部 (${totalCount})`;
+            setState({
+                alarmTabs: arr.concat(list),
+            });
+        }
+    }, [alarmTypes]);
+
+    const columns = [
+        {
+            title: '报警日期',
+            dataIndex: 'alarmDate',
+            key: 'alarmDate',
+            sorter: true,
+        },
+        {
+            title: '报警垃圾类型',
+            dataIndex: 'productTypeName',
+            key: 'productTypeName',
+        },
+        {
+            title: '报警类型',
+            dataIndex: 'alarmTypeName',
+            key: 'alarmTypeName',
+            ellipsis: true,
+        },
+    ];
+
+    const pageChange = (page: number) => {
+        setState({
+            pagination: {
+                ...pagination,
+                current: page,
+            },
+        });
+    };
+    const handleTableChange = (sorter: any) => {
+        setState({
+            sort: `collectDay,${sorter.order === 'ascend' ? 'ASC' : 'DESC'}`,
+        });
+    };
+
+    const tableProps = {
+        pagination: {
+            ...pagination,
+            total: detail.total,
+            defaultPageSize: 10,
+            onChange: pageChange,
+        },
+        handleTableChange,
+        height: 120,
+        dataSource: detail.dataSource,
+    };
+
+    const handleDateChange = (start: string, end: string) => {
+        setState({
+            startDate: start,
+            endDate: end,
+        });
+    };
+
+    return (
+        <div className="alarm-record">
+            <div className="alarm-record-head">
+                <SubTitle title="报警记录" />
+                <VMRangePicker
+                    value={[moment(startDate), moment(endDate)]}
+                    onChange={(dates: any) =>
+                        dates &&
+                        handleDateChange(
+                            moment(dates[0]).format('YYYY-MM-DD'),
+                            moment(dates[1]).format('YYYY-MM-DD'),
+                        )
+                    }
+                />
+            </div>
+            <SubTabsLine
+                items={alarmTabs}
+                activeKey={alarmTypeCode}
+                onChange={key => {
+                    setState({
+                        alarmTypeCode: key,
+                    });
+                }}
+            />
+            <div className="alarm-record-table">
+                <VMTable columns={columns} {...tableProps} />
+            </div>
+        </div>
+    );
+}

package/src/vtx-cp-modal/components/AlarmInfo/MonthTrend.tsx

@@ -0,0 +1,101 @@
+/**
+ * 公厕-报警信息-报警信息汇总
+ */
+import React from 'react';
+import moment from 'moment';
+import ReactEcharts from 'echarts-for-react';
+import SubTitle from '../../../vm-sub-title';
+import { AlarmService } from '../../api';
+import useSettings from '../../../vm-hooks/useSettings';
+
+const MonthTrend = ({ id }: { id: string }) => {
+    const { chartColor, chartFontColor,  } = useSettings();
+    const { alarmMonthTrend } = AlarmService.useAlarmMonthTrend(
+        id,
+        moment()
+            .subtract(6, 'M')
+            .format('YYYY-MM-DD'),
+        moment().format('YYYY-MM-DD'),
+    );
+    const { legends, names, values } = alarmMonthTrend;
+
+    const option = {
+        color: chartColor,
+        tooltip: {
+            trigger: 'axis',
+        },
+        legend: {
+            show: true,
+            itemWith: 6,
+            itemHeight: 6,
+            top: 20,
+            textStyle: {
+                color: chartFontColor,
+                fontSize: 12,
+            },
+            data: legends || [],
+        },
+        grid: {
+            top: 58,
+            left: 24,
+            bottom: 12,
+            right: 24,
+            containLabel: true,
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: {
+                show: false,
+            },
+            axisLabel: {
+                color: chartFontColor,
+            },
+            data: names || [],
+        },
+        yAxis: [
+            {
+                name: '单位（次）',
+                type: 'value',
+                nameTextStyle: {
+                    color: chartFontColor,
+                },
+                axisTick: {
+                    show: false,
+                },
+                axisLabel: {
+                    color: chartFontColor,
+                },
+                axisLine: {
+                    show: true,
+                },
+                splitLine: {
+                    lineStyle: {
+                        type: 'dashed',
+                        color: 'rgba(151,151,151,0.28)',
+                    },
+                },
+            },
+        ],
+        series: [
+            {
+                name: '次数',
+                type: 'line',
+                data: values[0] || [],
+            },
+        ],
+    };
+    return (
+        <div className="alarm-trend">
+            <SubTitle title="月度趋势分析" />
+            <ReactEcharts
+                option={option}
+                notMerge
+                lazyUpdate
+                style={{ height: '300px', width: '100%' }}
+            />
+        </div>
+    );
+};
+
+export default MonthTrend;