@vtx/modals2 2.6.19 → 2.6.21

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

@@ -1,247 +0,0 @@
-/**
- * 报警记录
- */
-import React, { useEffect } from 'react';
-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 { secondToFormatTime } from '../../../util';
-import { BaseService, AlarmService } from '../../api';
-import { useSetState } from 'ahooks';
-
-import level1 from '../../imgs/level1.png';
-import level2 from '../../imgs/level2.png';
-import level3 from '../../imgs/level3.png';
-import level4 from '../../imgs/level4.png';
-import level5 from '../../imgs/level5.png';
-
-interface TypeProps {
-    id: string;
-}
-
-export default function AlarmRecord(props: TypeProps) {
-    const { id } = props;
-    const [state, setState] = useSetState({
-        standardCode: 'all',
-        alarmTabs: [{ key: 'all', label: '全部' }],
-        startDate: moment().format('YYYY-MM-DD'),
-        endDate: moment().format('YYYY-MM-DD'),
-        pagination: {
-            current: 1,
-            pageSize: 10,
-            total: 0,
-        },
-        sort: '',
-        order: '',
-    });
-    const { alarmTabs, pagination, standardCode, startDate, endDate, sort, order } = state;
-
-    const { alarmTypeRes: alarmTs } = BaseService.useBaseAlarmTypes(
-        id,
-        `${startDate} 00:00:00`,
-        `${endDate} 23:59:59`,
-    );
-    const { detail } = AlarmService.useAlarmRecord(
-        id,
-        standardCode === 'all' ? '' : standardCode,
-        startDate,
-        endDate,
-        pagination.current,
-        sort,
-        order,
-    );
-    // 格式化报警类型数据
-    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.standardCode,
-                label: `${ele.standardName} (${ele.count})`,
-            };
-            list.push(obj);
-        });
-        return { list, totalCount };
-    };
-
-    useEffect(() => {
-        let arr = [{ key: 'all', label: '全部' }]; // 报警明细标签
-        if (alarmTs.length > 0) {
-            const { list, totalCount } = formatAlarmType(alarmTs);
-            arr[0].label = `全部 (${totalCount})`;
-            setState({
-                alarmTabs: arr.concat(list),
-            });
-        }
-    }, [alarmTs]);
-
-    const getLevel = (text: number) => {
-        let src = '',
-            color = '#1FEFA9',
-            name = '';
-        switch (text) {
-            case 1:
-                src = level1;
-                name = '一';
-                color = '#FF6A65';
-                break;
-            case 2:
-                src = level2;
-                name = '二';
-                color = '#FFBD1E';
-                break;
-            case 3:
-                src = level3;
-                name = '三';
-                color = '#E86CFF';
-                break;
-            case 4:
-                src = level4;
-                name = '四';
-                color = '#00A8FF';
-                break;
-            case 5:
-                src = level5;
-                name = '五';
-                color = '#1FEFA9';
-                break;
-            default:
-                src = level1;
-                name = '一';
-                color = '#FF6A65';
-                break;
-        }
-        return { src, name: `等级${name}`, color };
-    };
-
-    const columns = [
-        {
-            title: '监测指标',
-            dataIndex: 'standardName',
-            key: 'standardName',
-            ellipsis: true,
-        },
-        {
-            title: '报警名称',
-            dataIndex: 'name',
-            key: 'name',
-            ellipsis: true,
-        },
-        {
-            title: '报警等级',
-            dataIndex: 'level',
-            key: 'level',
-            render: (text: number) => {
-                const { src, name, color } = getLevel(text);
-                return (
-                    <span className="alarmLevel" style={{ color }}>
-                        <img src={src} />
-                        {name}
-                    </span>
-                );
-            },
-        },
-        {
-            title: '报警开始时间',
-            dataIndex: 'startDate',
-            key: 'startDate',
-            sorter: true,
-        },
-        {
-            title: '报警结束时间',
-            dataIndex: 'endDate',
-            key: 'endDate',
-            sorter: true,
-        },
-        {
-            title: '报警时长',
-            dataIndex: 'dur',
-            key: 'dur',
-            width: 80,
-            sorter: (a: any, b: any) => {
-                return (
-                    moment(a.endDate).diff(moment(a.startDate)) -
-                    moment(b.endDate).diff(moment(b.startDate))
-                );
-            },
-            render: (_text: string, record: any) => {
-                return (
-                    record?.startDate &&
-                    record?.endDate &&
-                    secondToFormatTime(moment(record.endDate).diff(moment(record.startDate)) / 1000)
-                );
-            },
-        },
-    ];
-
-    const pageChange = (page: number) => {
-        setState({
-            pagination: {
-                ...pagination,
-                current: page,
-            },
-        });
-    };
-    const handleTableChange = (sorter: any) => {
-        sorter.columnKey !== 'dur' &&
-            setState({
-                sort: sorter.columnKey,
-                order: sorter.order === 'ascend' ? 'ASC' : 'DESC',
-            });
-    };
-    const tableProps = {
-        pagination: {
-            ...pagination,
-            total: detail.total,
-            defaultPageSize: 10,
-            onChange: pageChange,
-        },
-        rowKey: 'id',
-        handleTableChange,
-        height: 160,
-        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={standardCode}
-                onChange={key => {
-                    setState({
-                        standardCode: key,
-                    });
-                }}
-            />
-            <div className="alarm-record-table">
-                <VMTable columns={columns} {...tableProps} />
-            </div>
-        </div>
-    );
-}

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

@@ -1,106 +0,0 @@
-/**
- * 监测-报警信息-报警信息汇总
- */
-import React from 'react';
-import moment from 'moment';
-import ReactEcharts from 'echarts-for-react';
-import useSettings from '../../../vm-hooks/useSettings';
-import SubTitle from '../../../vm-sub-title';
-import { AlarmService } from '../../api';
-import NoData from '../../../vm-nodata';
-
-const MonthTrend = ({ id }: { id: string }) => {
-    const { chartFontColor, chartColor } = useSettings();
-    const { alarmTrend } = AlarmService.useAlarmTrend(
-        id,
-        moment()
-            .subtract(6, 'M')
-            .format('YYYY-MM-DD 00:00:00'),
-        moment().format('YYYY-MM-DD 23:59:59'),
-    );
-    const { legends, names, values } = alarmTrend;
-
-    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?.length > 0 ? values[0] : [],
-            },
-        ],
-    };
-    return (
-        <div className="alarm-trend">
-            <SubTitle title="月度趋势分析" />
-            {values?.length > 0 ? (
-                <ReactEcharts
-                    option={option}
-                    notMerge
-                    lazyUpdate
-                    style={{ height: '300px', width: '100%' }}
-                />
-            ) : (
-                <NoData style={{ height: '300px', width: '100%' }} />
-            )}
-        </div>
-    );
-};
-
-export default MonthTrend;

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

@@ -1,151 +0,0 @@
-/**
- * 监测-报警信息-报警信息汇总
- */
-import React, { useEffect } from 'react';
-import moment from 'moment';
-import sumBy from 'lodash/sumBy';
-import ReactEcharts from 'echarts-for-react';
-import useSettings from '../../../vm-hooks/useSettings';
-import SubTitle from '../../../vm-sub-title';
-import { AlarmService, BaseService } from '../../api';
-
-import alarm from '../../imgs/alarm.png';
-import { useSetState } from 'ahooks';
-import NoData from '../../../vm-nodata';
-
-const Summary = ({ id }: { id: string }) => {
-    const { chartFontColor, chartColor,isDark } = useSettings();
-    const [state, setState] = useSetState<{ alarmTabsValue: any[]; totalCount: number }>({
-        alarmTabsValue: [],
-        totalCount: 0,
-    });
-    const { alarmTabsValue, totalCount } = state;
-
-    const { alarmSummary } = AlarmService.useAlarmSummary(id, moment().format('YYYY-MM-DD'));
-
-    const { alarmTypeRes } = BaseService.useBaseAlarmInfo(
-        id,
-        moment()
-            .startOf('M')
-            .format('YYYY-MM-DD'),
-        moment().format('YYYY-MM-DD'),
-    );
-
-    useEffect(() => {
-        let list: Array<any> = [];
-        let count = 0;
-        if (alarmTypeRes.length > 0) {
-            count = sumBy(alarmTypeRes, function(o: any) {
-                return o.count;
-            });
-            alarmTypeRes.forEach((ele: any) => {
-                const obj = {
-                    key: ele.standardCode,
-                    name: ele.standardName,
-                    value: ele.count,
-                };
-                list.push(obj);
-            });
-        }
-        setState({
-            totalCount: count,
-            alarmTabsValue: list,
-        });
-    }, [JSON.stringify(alarmTypeRes)]);
-
-    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' : '#fff',
-                    },
-                },
-                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?.thisYearCount || 0}</span>次
-                        <div className="alarm-summary-time-value-compare">
-                            {`月同比 ${alarmSummary?.thisYearOnLastYearCount || 0}%`}
-                            {alarmSummary?.thisYearOnLastYearCount >= 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', width: '90%' }} />
-                )}
-            </div>
-        </div>
-    );
-};
-
-export default Summary;

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

@@ -1,114 +0,0 @@
-.wr-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: 570px;
-        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% - 588px);
-        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;
-        }
-
-        .alarmLevel {
-            img {
-                margin-top: -2px;
-            }
-        }
-    }
-}

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

@@ -1,27 +0,0 @@
-/**
- * 监测-报警信息
- */
-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="wr-alarm">
-            <div className="wr-alarm-head">
-                <Summary id={id} />
-                <MonthTrend id={id} />
-            </div>
-            <AlarmRecord id={id} />
-        </div>
-    );
-};
-
-export default AlarmInfo;