@vtx/modals2 2.6.19

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

@@ -0,0 +1,162 @@
+/**
+ * 公厕-报警信息-报警信息汇总
+ */
+import React, { useEffect } from 'react';
+import moment from 'moment';
+import sumBy from 'lodash/sumBy';
+import ReactEcharts from 'echarts-for-react';
+import SubTitle from '../../../vm-sub-title';
+import NoData from '../../../vm-nodata';
+import { AlarmService } from '../../api';
+import useSettings from '../../../vm-hooks/useSettings';
+
+import alarm from '../../imgs/alarm.png';
+import { useSetState } from 'ahooks';
+
+interface StateTypes {
+    totalCount: number;
+    alarmTabsValue: Array<{ name: string; value: number }>;
+}
+
+const Summary = ({ id }: { id: string }) => {
+    const { chartColor, chartFontColor, isDark } = useSettings();
+    const [state, setState] = useSetState<StateTypes>({
+        alarmTabsValue: [],
+        totalCount: 0,
+    });
+    const { alarmTabsValue, totalCount } = state;
+
+    const { alarmSummary } = AlarmService.useAlarmSummary(id, moment().format('YYYY-MM-DD'));
+
+    const { alarmTypes } = AlarmService.useAlarmTrend(
+        id,
+        moment()
+            .startOf('M')
+            .format('YYYY-MM-DD'),
+        moment().format('YYYY-MM-DD'),
+    );
+
+    useEffect(() => {
+        let list: StateTypes['alarmTabsValue'] = [];
+        let count = 0;
+        if (alarmTypes?.length > 0) {
+            count = sumBy(alarmTypes, function(o: any) {
+                return o.count;
+            });
+            alarmTypes.forEach((ele: any) => {
+                const obj = {
+                    key: ele.typeCode,
+                    name: ele.typeName,
+                    value: ele.count,
+                };
+                list.push(obj);
+            });
+            setState({
+                totalCount: count,
+                alarmTabsValue: list,
+            });
+        }
+    }, [alarmTypes]);
+
+    let option = {
+        color: chartColor,
+        backgroundColor: 'transparent',
+        tooltip: {
+            show: true,
+            trigger: 'item',
+        },
+
+        legend: {
+            orient: 'vertical',
+            left: '40%',
+            top: 'middle',
+            align: 'left',
+            itemGap: 8,
+            itemWidth: 10,
+            itemHeight: 10,
+            formatter: function(name: string) {
+                const value = alarmTabsValue.find((item: any) => item.name === name);
+                const rate = ((value?.value || 0) / totalCount) * 100;
+                if (value) {
+                    return `\t\t${name}\t\t${value.value}次\t\t${rate.toFixed(2)}%`;
+                } else {
+                    return '';
+                }
+            },
+            textStyle: {
+                fontSize: 14,
+                color: chartFontColor,
+            },
+            pageIconColor: chartFontColor,
+            pageIconInactiveColor: chartFontColor,
+            pageTextStyle: {
+                color: chartFontColor,
+            },
+        },
+        series: [
+            {
+                type: 'pie',
+                radius: ['55%', '75%'],
+                center: ['20%', '50%'],
+                hoverAnimation: true,
+                z: 10,
+                itemStyle: {
+                    normal: {
+                        borderWidth: 2,
+                        borderColor: isDark ? '#003359' : '#ffffff',
+                    },
+                },
+                label: {
+                    show: false,
+                },
+                data: alarmTabsValue,
+                labelLine: {
+                    show: false,
+                },
+            },
+        ],
+    };
+    return (
+        <div className="alarm-summary">
+            <SubTitle title="报警信息汇总" />
+            <div className="alarm-summary-time">
+                <img src={alarm} />
+                <div>
+                    <div className="alarm-summary-time-name">月度报警总次数</div>
+                    <div className="alarm-summary-time-value">
+                        <span>{alarmSummary?.thisMonthCount || 0}</span>次
+                        <div className="alarm-summary-time-value-compare">
+                            {`月同比 ${alarmSummary?.thisMonthOnLastMonthCount || 0}%`}
+                            {alarmSummary?.thisMonthOnLastMonthCount >= 100 ? (
+                                <div className="triangle-up"></div>
+                            ) : (
+                                <div className="triangle-down"></div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div className="alarm-summary-type-analysis">
+                <SubTitle title="类型分析" />
+                {alarmTabsValue?.length > 0 ? (
+                    <ReactEcharts
+                        option={option}
+                        notMerge
+                        lazyUpdate
+                        style={{ height: '180px', width: '100%' }}
+                    />
+                ) : (
+                    <NoData
+                        style={{
+                            height: '180px',
+                            marginLeft: '50%',
+                            transform: 'translateX(-50%)',
+                        }}
+                    />
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default Summary;

package/src/vtx-cp-modal/components/AlarmInfo/index.less

@@ -0,0 +1,115 @@
+.cp-alarm {
+    margin: 6px;
+    width: 100%;
+
+    &-head {
+        width: 100%;
+        display: flex;
+        justify-content: start;
+        align-items: start;
+    }
+
+    .alarm-summary {
+        padding: 14px 20px;
+        background-color: var(--bg-color2);
+        width: 500px;
+        margin-right: 6px;
+
+        &-time {
+            margin: 24px;
+            display: flex;
+            justify-content: start;
+            align-items: center;
+            img {
+                width: 46px;
+                height: 46px;
+                margin-right: 19px;
+            }
+            &-name {
+                font-size: 12px;
+                color: var(--title-color);
+            }
+            &-value {
+                color: var(--title-color);
+                font-size: 12px;
+                span {
+                    font-size: 20px;
+                    line-height: 25px;
+                }
+                &-compare {
+                    display: inline-block;
+                    margin-left: 36px;
+                }
+            }
+        }
+        .triangle-up {
+            width: 12px;
+            height: 8px;
+            position: relative;
+            overflow: hidden;
+            display: inline-block;
+            margin-left: 4px;
+            &::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: #f65861;
+                transform-origin: left bottom;
+                transform: rotate(45deg);
+            }
+        }
+        .triangle-down {
+            width: 12px;
+            height: 8px;
+            position: relative;
+            overflow: hidden;
+            display: inline-block;
+            margin-left: 4px;
+            margin-bottom: -2px;
+            &::before {
+                content: '';
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: #41ffb4;
+                transform-origin: right top;
+                transform: rotate(45deg);
+            }
+        }
+    }
+
+    .alarm-trend {
+        width: calc(100% - 518px);
+        height: 358px;
+        padding: 14px 20px;
+        background-color: var(--bg-color2);
+    }
+
+    .alarm-record {
+        padding: 14px 20px;
+        margin: 6px 12px 0 0;
+        background-color: var(--bg-color2);
+
+        &-head {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        &-table {
+            margin-top: 14px;
+            height: 200px;
+        }
+
+        .alarmLevel {
+            img {
+                margin-top: -2px;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,27 @@
+/**
+ * 收集点-报警信息
+ */
+import React from 'react';
+import Summary from './Summary';
+import MonthTrend from './MonthTrend';
+import AlarmRecord from './AlarmRecord';
+import './index.less';
+
+interface AlarmInfoProps {
+    id: string;
+}
+
+const AlarmInfo: React.FC<AlarmInfoProps> = props => {
+    const { id } = props;
+    return (
+        <div className="cp-alarm">
+            <div className="cp-alarm-head">
+                <Summary id={id} />
+                <MonthTrend id={id} />
+            </div>
+            <AlarmRecord id={id} />
+        </div>
+    );
+};
+
+export default AlarmInfo;

package/src/vtx-cp-modal/components/BaseInfo/CarWork.tsx

@@ -0,0 +1,82 @@
+/**
+ * 收集点-总览信息-车辆作业信息
+ */
+import React from 'react';
+import VMTable from '../../../vm-table';
+import track from '../../imgs/track.png';
+
+export default function CarWork(props: any) {
+    const { dataSource } = props;
+
+    const columns = [
+        {
+            title: '车牌号',
+            dataIndex: 'carCode',
+            key: 'carCode',
+            ellipsis: true,
+        },
+        {
+            title: '垃圾类型',
+            dataIndex: 'productTypeName',
+            key: 'productTypeName',
+            width: 80,
+            ellipsis: true,
+        },
+        {
+            title: '收集频次',
+            dataIndex: 'collectNum',
+            key: 'collectNum',
+            width: 80,
+            ellipsis: true,
+        },
+        {
+            title: '桶数(桶)',
+            dataIndex: 'bucketNum',
+            key: 'bucketNum',
+            width: 70,
+            ellipsis: true,
+        },
+        {
+            title: '收集重量(kg)',
+            dataIndex: 'weight',
+            key: 'weight',
+            width: 100,
+            ellipsis: true,
+        },
+        {
+            title: '轨迹',
+            dataIndex: 'carId',
+            key: 'carId',
+            width: 50,
+            render: (text: string) => {
+                return (
+                    <a
+                        onClick={() => {
+                            window.open(
+                                `${location.protocol}//${
+                                    location.host
+                                }/carHistory/#/index?carId=${text}&${location.href.split('?')[1]}`,
+                            );
+                        }}
+                    >
+                        <img src={track} />
+                    </a>
+                );
+            },
+        },
+    ];
+
+    const tableProps = {
+        height: 240,
+        pagination: {
+            current: 1,
+            pageSize: 10,
+        },
+        dataSource:
+            dataSource?.length > 0
+                ? dataSource.map((ele: any, index: number) => ({ ...ele, index }))
+                : [],
+    };
+
+    return <VMTable columns={columns} rowKey="index" {...tableProps} />;
+}

package/src/vtx-cp-modal/components/BaseInfo/Rules.tsx

@@ -0,0 +1,56 @@
+/**
+ * 收集点-总览信息-收运规则
+ */
+import React from 'react';
+import NoData from '../../../vm-nodata';
+
+export default function Rules(props: any) {
+    const { rules } = props;
+    const getImgCode = (name: string) => {
+        let code = 'qt';
+        switch (name) {
+            case '其他垃圾':
+                code = 'qt';
+                break;
+            case '厨余垃圾':
+                code = 'cy';
+                break;
+            case '有害垃圾':
+                code = 'yh';
+                break;
+            case '可回收物':
+                code = 'khsw';
+                break;
+            default:
+                code = 'qt';
+                break;
+        }
+        return code;
+    };
+    return (
+        <>
+            {Array.isArray(rules) ? (
+                rules.map((ele, index) => {
+                    return (
+                        <div className="syrules-item" key={index}>
+                            <div
+                                className={`syrules-item--name ${getImgCode(
+                                    ele?.productTypeName || '',
+                                )}`}
+                            >
+                                {ele?.productTypeName || '--'}
+                            </div>
+                            <div className="syrules-item--content">
+                                <div>{ele?.timeOrPeriod || '--'}</div>
+                                <div>{ele?.bucketNum || 0}个桶</div>
+                                <div>{ele?.carCodes || '--'}</div>
+                            </div>
+                        </div>
+                    );
+                })
+            ) : (
+                <NoData />
+            )}
+        </>
+    );
+}

package/src/vtx-cp-modal/components/BaseInfo/TodayWork.tsx

@@ -0,0 +1,135 @@
+/**
+ * 收集点-总览信息-收运规则
+ */
+import Progress from 'antd/es/progress';
+import React from 'react';
+import NoData from '../../../vm-nodata';
+import useSettings from '../../../vm-hooks/useSettings';
+
+import './index.less';
+
+import allRate from '../../imgs/all_rate.png';
+import cyRate from '../../imgs/cy_rate.png';
+import qtRate from '../../imgs/qt_rate.png';
+import yhRate from '../../imgs/yh_rate.png';
+
+import allRateLight from '../../imgs/all_rate_light.png';
+import cyRateLight from '../../imgs/cy_rate_light.png';
+import qtRateLight from '../../imgs/qt_rate_light.png';
+import yhRateLight from '../../imgs/yh_rate_light.png';
+
+export default function TodayWork(props: any) {
+    const { data } = props;
+    const { theme } = useSettings();
+    const blockItem = (title: string, value: number, unit: string) => (
+        <div className="twork--item-block-item">
+            <div>{title}</div>
+            <div className="twork--item-block-item-value">
+                <span>{value || 0}</span>
+                {unit}
+            </div>
+        </div>
+    );
+
+    const img: any = {
+        dark: {
+            全部: allRate,
+            其他垃圾: qtRate,
+            厨余垃圾: cyRate,
+            有害垃圾: yhRate,
+        },
+        light: {
+            全部: allRateLight,
+            其他垃圾: qtRateLight,
+            厨余垃圾: cyRateLight,
+            有害垃圾: yhRateLight,
+        },
+    };
+
+    const getValue = (name: string) => {
+        let strokeColor = {
+            '0%': '#BFFFE8',
+            '100%': '#37D3B0',
+        };
+        let src = img[theme][name] || img[theme]['其他垃圾'];
+        switch (name) {
+            case '全部':
+                strokeColor = {
+                    '0%': '#BFFFE8',
+                    '100%': '#37D3B0',
+                };
+                src = allRate;
+                break;
+            case '其他垃圾':
+                strokeColor = {
+                    '0%': '#EC982B',
+                    '100%': '#FFE49A',
+                };
+                src = qtRate;
+                break;
+            case '厨余垃圾':
+                strokeColor = {
+                    '0%': '#62C1FD',
+                    '100%': '#3E9DF9',
+                };
+                src = cyRate;
+                break;
+            case '有害垃圾':
+                strokeColor = {
+                    '0%': '#FFA793',
+                    '100%': '#FF6770',
+                };
+                src = yhRate;
+                break;
+            default:
+                strokeColor = {
+                    '0%': '#EC982B',
+                    '100%': '#FFE49A',
+                };
+                src = qtRate;
+                break;
+        }
+        return { strokeColor, src };
+    };
+
+    return (
+        <div className="twork">
+            {Array.isArray(data) ? (
+                data.map((item, index) => {
+                    const { strokeColor, src } = getValue(item?.productTypeName);
+                    return (
+                        <div className="twork--item" key={index}>
+                            <div>
+                                <img src={src} />
+                            </div>
+                            <div className="twork--item-progress">
+                                <div>
+                                    {item?.productTypeName}完成率：
+                                    {item.rate || 0}%
+                                </div>
+                                <div className="twork--item-progress-bg">
+                                    <Progress
+                                        strokeLinecap="butt"
+                                        percent={item.rate}
+                                        strokeColor={strokeColor}
+                                        trailColor="#444B59"
+                                        strokeWidth={6}
+                                        showInfo={false}
+                                    />
+                                </div>
+                            </div>
+                            <div className="twork--item-block">
+                                {blockItem('应收次数', item?.planNum, '次')}
+                                {blockItem('实收次数', item?.collectNum, '次')}
+                                {blockItem('收集桶数', item?.bucketNum, '桶')}
+                                {blockItem('收集重量', item?.weight, 'kg')}
+                            </div>
+                        </div>
+                    );
+                })
+            ) : (
+                <NoData />
+            )}
+        </div>
+    );
+}