@vtx/modals2 2.6.19 → 2.6.21

package/src/vtx-wr-modal/components/BaseInfo/AlarmType.tsx

@@ -1,104 +0,0 @@
-import React from 'react';
-import ReactEcharts from 'echarts-for-react';
-import SubTitle from '../../../vm-sub-title';
-import useSettings from '../../../vm-hooks/useSettings';
-
-interface AlarmTypeProps {
-    data: Array<any>;
-    total: number;
-}
-
-const AlarmType = (props: AlarmTypeProps) => {
-    const { data, total } = props;
-    const { theme, chartFontColor, chartColor } = useSettings();
-
-    let option = {
-        color: chartColor,
-        backgroundColor: 'transparent',
-        tooltip: {
-            show: true,
-            trigger: 'item',
-        },
-        title: {
-            zlevel: 0,
-            text: '总数',
-            top: '30%',
-            left: '26%',
-            textAlign: 'center',
-            textStyle: {
-                color: theme === 'dark' ? '#D4D4D4' : '#000',
-                fontSize: 14,
-            },
-            subtext: `${total}`,
-            subtextStyle: {
-                color: theme === 'dark' ? '#fafafa' : '#000',
-                fontSize: 28,
-            },
-        },
-        legend: {
-            orient: 'vertical',
-            type: 'scroll',
-            left: '50%',
-            top: 'center',
-            align: 'left',
-            itemGap: 8,
-            itemWidth: 10,
-            itemHeight: 10,
-            formatter: function(name: string) {
-                const value = data.find((item: any) => item.name === name);
-                if (value) {
-                    return `\t\t${name}\t\t${value.value}次`;
-                } else {
-                    return '';
-                }
-            },
-            textStyle: {
-                color: chartFontColor,
-            },
-            pageIconColor: chartFontColor,
-            pageIconInactiveColor: chartFontColor,
-            pageTextStyle: {
-                color: chartFontColor,
-            },
-        },
-        series: [
-            {
-                type: 'pie',
-                radius: ['70%', '90%'],
-                center: ['28%', '50%'],
-                hoverAnimation: true,
-                z: 10,
-                itemStyle: {
-                    normal: {
-                        borderWidth: 2,
-                        borderColor: theme === 'dark' ? '#003359' : '#fff',
-                    },
-                },
-                label: {
-                    show: false,
-                },
-                data: data,
-                labelLine: {
-                    show: false,
-                },
-            },
-        ],
-    };
-
-    return (
-        <div className="base-top--right">
-            <SubTitle title="本月报警类型分析" />
-            <div className="base-top--chart">
-                <ReactEcharts
-                    option={option}
-                    notMerge
-                    lazyUpdate
-                    style={{ height: '100%', width: '100%', zIndex: 9 }}
-                />
-                {theme === 'dark' && <div className="base-top--chart-bg" />}
-            </div>
-        </div>
-    );
-};
-
-export default AlarmType;

package/src/vtx-wr-modal/components/BaseInfo/BaseInner.tsx

@@ -1,42 +0,0 @@
-import { VtxImage } from '@vtx/components';
-import { Carousel } from 'antd';
-import React from 'react';
-import Base from '../../../vm-info-collection';
-import NoData from '../../../vm-nodata';
-import SubTitle from '../../../vm-sub-title';
-
-interface BaseInnerProps {
-    photos: Array<any>;
-    baseInfo: any;
-}
-
-export default function BaseInner({ photos, baseInfo }: BaseInnerProps) {
-    return (
-        <div className="base-top--base">
-            <div className="base-top-img">
-                {photos.length ? (
-                    <VtxImage.PreviewGroup>
-                        <Carousel style={{ width: '315px', height: '240px' }}>
-                            {photos.map((item: any) => {
-                                return (
-                                    <VtxImage
-                                        key={item.id}
-                                        src={`/cloudFile/common/downloadFile?id=${item.id}`}
-                                        alt={item.name}
-                                        isDark={true}
-                                    />
-                                );
-                            })}
-                        </Carousel>
-                    </VtxImage.PreviewGroup>
-                ) : (
-                    <NoData />
-                )}
-            </div>
-            <div>
-                <SubTitle title="基本信息" />
-                <Base data={baseInfo} />
-            </div>
-        </div>
-    );
-}

package/src/vtx-wr-modal/components/BaseInfo/Situation.tsx

@@ -1,120 +0,0 @@
-import React from 'react';
-import SubTitle from '../../../vm-sub-title';
-import useSettings from '../../../vm-hooks/useSettings';
-
-import PersonNum from '../../imgs/traffic.png';
-import OdorValue from '../../imgs/stench.png';
-import temperature from '../../imgs/temperature.png';
-import humidity from '../../imgs/humidity.png';
-import WaterUse from '../../imgs/water.png';
-import ElecUse from '../../imgs/electric.png';
-
-import PersonNumLight from '../../imgs/traffic_light.png';
-import OdorValueLight from '../../imgs/stench_light.png';
-import temperatureLight from '../../imgs/temperature_light.png';
-import humidityLight from '../../imgs/humidity_light.png';
-import WaterUseLight from '../../imgs/water_light.png';
-import ElecUseLight from '../../imgs/electric_light.png';
-
-interface Props {
-    situationRes: Array<any>;
-}
-
-function Situation(props: Props) {
-    const { situationRes } = props;
-    const { theme } = useSettings();
-
-    const img: any = {
-        light: {
-            PersonNum: PersonNumLight,
-            OdorValue: OdorValueLight,
-            temperature: temperatureLight,
-            humidity: humidityLight,
-            WaterUse: WaterUseLight,
-            ElecUse: ElecUseLight,
-        },
-        dark: {
-            PersonNum,
-            OdorValue,
-            temperature,
-            humidity,
-            WaterUse,
-            ElecUse,
-        },
-    };
-
-    const data = [
-        {
-            monitorType: 'PersonNum',
-            name: '人流量',
-            unit: '人次',
-            imgSrc: img[theme]['PersonNum'],
-            value: 0,
-        },
-        {
-            monitorType: 'OdorValue',
-            name: '臭气值',
-            unit: 'PPm',
-            imgSrc: img[theme]['OdorValue'],
-            value: 0,
-        },
-        {
-            monitorType: 'temperature',
-            name: '温度',
-            unit: '℃',
-            imgSrc: img[theme]['temperature'],
-            value: 0,
-        },
-        {
-            monitorType: 'humidity',
-            name: '湿度',
-            unit: '%',
-            imgSrc: img[theme]['humidity'],
-            value: 0,
-        },
-        {
-            monitorType: 'WaterUse',
-            name: '用水量',
-            unit: '吨',
-            imgSrc: img[theme]['WaterUse'],
-            value: 0,
-        },
-        {
-            monitorType: 'ElecUse',
-            name: '用电量',
-            unit: '度',
-            imgSrc: img[theme]['ElecUse'],
-            value: 0,
-        },
-    ];
-
-    return (
-        <div className="base-bottom-left">
-            <SubTitle title="实时运行情况" />
-
-            <div className="base-bottom-situation">
-                {data.map((item: any) => {
-                    const { name, unit, imgSrc } = item;
-                    return (
-                        <div className="base-bottom-situation--item" key={item.monitorType}>
-                            <img src={imgSrc} />
-                            <div>
-                                <div className="base-bottom-situation--item-name">{name}</div>
-                                <div className="base-bottom-situation--item-value">
-                                    <span>
-                                        {situationRes.find(
-                                            (ele: any) => ele.monitorType === item.monitorType,
-                                        )?.value || 0}
-                                    </span>
-                                    {unit}
-                                </div>
-                            </div>
-                        </div>
-                    );
-                })}
-            </div>
-        </div>
-    );
-}
-
-export default Situation;

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

@@ -1,140 +0,0 @@
-.flex-start {
-    display: flex;
-    justify-content: start;
-    align-items: start;
-}
-
-.mr-20 {
-    margin-right: 20px;
-}
-
-.mt-24 {
-    margin-top: 24px;
-}
-
-.wr-baseContent {
-    padding: 10px;
-
-    .base-top {
-        .flex-start();
-
-        &-img {
-            width: 370px;
-            height: 210px;
-            .mr-20();
-            img {
-                width: 370px;
-                max-height: 245px;
-            }
-        }
-
-        &--base {
-            .flex-start();
-            margin-right: 10px;
-            padding: 20px 24px;
-            width: 690px;
-            background-color: var(--bg-color2);
-        }
-        &--right {
-            width: calc(~'100% - 710px');
-            height: 250px;
-            padding: 20px 24px;
-            background-color: var(--bg-color2);
-        }
-
-        &--chart {
-            .mt-24();
-            height: 148px;
-            width: 100%;
-            position: relative;
-            &-bg {
-                width: 168px;
-                height: 148px;
-                position: absolute;
-                top: 0;
-                left: 60px;
-                background-image: url('../../imgs/chart_bg.png');
-                background-repeat: no-repeat;
-                background-size: 100% 100%;
-            }
-            &-content {
-                height: 148px;
-            }
-        }
-    }
-
-    .base-bottom {
-        margin-top: 10px;
-        .flex-start();
-        &-left {
-            width: 441px;
-            height: 364px;
-            margin-right: 10px;
-            padding: 20px 24px;
-            background-color: var(--bg-color2);
-        }
-        &-situation {
-            display: flex;
-            flex-flow: wrap;
-
-            &--item {
-                width: 50%;
-                text-align: top;
-                .flex-start();
-                align-items: center;
-                margin-bottom: 46px;
-
-                img {
-                    width: 50px;
-                    height: 50px;
-                    .mr-20();
-                }
-                &-name {
-                    font-size: 12px;
-                    color: var(--title-color);
-                }
-                &-value {
-                    color: var(--info-active);
-                    font-size: 12px;
-                    span {
-                        font-size: 20px;
-                        line-height: 25px;
-                    }
-                }
-            }
-
-            &--nodata {
-                img {
-                    width: 100%;
-                }
-            }
-        }
-
-        &-alarm-detail {
-            width: calc(~'100% - 451px - 10px');
-            height: 364px;
-            padding: 20px 24px 0 24px;
-            background-color: var(--bg-color2);
-            &-date {
-                display: flex;
-                justify-content: space-between;
-            }
-            &-tab {
-                .flex-start();
-                margin-bottom: 16px;
-                &-item {
-                    font-size: 14px;
-                    font-family: HiraginoSansGB-W6, HiraginoSansGB;
-                    color: #a7bebb;
-                    line-height: 21px;
-                    margin-right: 15px;
-                    cursor: pointer;
-
-                    &_active {
-                        color: var(--info-active);
-                    }
-                }
-            }
-        }
-    }
-}

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

@@ -1,246 +0,0 @@
-import { useSetState } from 'ahooks';
-import moment from 'moment';
-import sumBy from 'lodash/sumBy';
-import React, { useEffect } from 'react';
-import { secondToFormatTime } from '../../../util';
-import { VMRangePicker } from '../../../vm-filter';
-import { SubTabsLine } from '../../../vm-sub-tabs';
-import SubTitle from '../../../vm-sub-title';
-import VMTable from '../../../vm-table';
-import { BaseService } from '../../api';
-import AlarmType from './AlarmType';
-import BaseInner from './BaseInner';
-import './index.less';
-import Situation from './Situation';
-
-interface BaseInfoProps {
-    id: string;
-    photos: any[];
-    baseInfo: any[];
-}
-
-const BaseInfo = (props: BaseInfoProps) => {
-    const { id, photos, baseInfo } = props;
-    const nowDate = moment().format('YYYY-MM-DD');
-    const [state, setState] = useSetState({
-        standardCode: 'all',
-        startDate: nowDate,
-        endDate: nowDate,
-        alarmTabs: [{ key: 'all', label: '全部', value: 0 }],
-        alarmTabsValue: [{}],
-        totalCount: 0,
-        pagination: {
-            current: 1,
-            pageSize: 10,
-            total: 0,
-        },
-        sort: '',
-        order: '',
-    });
-    const {
-        standardCode,
-        startDate,
-        endDate,
-        alarmTabs,
-        alarmTabsValue,
-        totalCount,
-        pagination,
-        sort,
-        order,
-    } = state;
-
-    const handleDateChange = (start: string, end: string) => {
-        setState({
-            startDate: start,
-            endDate: end,
-        });
-    };
-    // const { baseInfo, photos } = BaseService.useBaseDetail(id);
-    const { situationRes } = BaseService.useBaseInfo(id, nowDate, nowDate);
-    const { alarmTypeRes } = BaseService.useBaseAlarmInfo(
-        id,
-        moment(nowDate)
-            .startOf('M')
-            .format('YYYY-MM-DD 00:00:00'),
-        moment(nowDate).format('YYYY-MM-DD 23:59:59'),
-    );
-    const { alarmTypeRes: alarmTs } = BaseService.useBaseAlarmTypes(
-        id,
-        `${startDate} 00:00:00`,
-        `${endDate} 23:59:59`,
-    );
-
-    // 格式化报警类型数据
-    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,
-                name: ele.standardName,
-                value: ele.count,
-                label: ele.standardName,
-            };
-            list.push(obj);
-        });
-        return { list, totalCount };
-    };
-
-    useEffect(() => {
-        if (alarmTypeRes.length > 0) {
-            const { list, totalCount } = formatAlarmType(alarmTypeRes);
-            setState({
-                alarmTabsValue: list,
-                totalCount,
-            });
-        }
-    }, [alarmTypeRes]);
-
-    useEffect(() => {
-        let arr = [{ key: 'all', label: '全部', value: 0 }]; // 报警明细标签
-        if (alarmTs.length > 0) {
-            const { list, totalCount } = formatAlarmType(alarmTs);
-            arr[0].value = totalCount;
-            setState({
-                alarmTabs: arr.concat(list),
-            });
-        }
-    }, [alarmTs]);
-
-    const { detail } = BaseService.useAlarmDetails(
-        id,
-        standardCode === 'all' ? '' : standardCode,
-        startDate,
-        endDate,
-        pagination.current,
-        sort,
-        order,
-    );
-    const columns = [
-        {
-            title: '监测指标',
-            dataIndex: 'standardName',
-            key: 'standardName',
-            width: 80,
-            ellipsis: true,
-        },
-        {
-            title: '报警名称',
-            dataIndex: 'name',
-            key: 'name',
-            width: 80,
-            ellipsis: true,
-        },
-        {
-            title: '报警等级',
-            dataIndex: 'level',
-            key: 'level',
-        },
-        {
-            title: '报警开始时间',
-            dataIndex: 'startDate',
-            key: 'startDate',
-            width: 120,
-            sorter: true,
-        },
-        {
-            title: '报警结束时间',
-            dataIndex: 'endDate',
-            key: 'endDate',
-            width: 120,
-            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 handleTableChange = (sorter: any) => {
-        sorter.columnKey !== 'dur' &&
-            setState({
-                sort: sorter.columnKey,
-                order: sorter.order === 'ascend' ? 'ASC' : 'DESC',
-            });
-    };
-    const pageChange = (page: number) => {
-        setState({
-            pagination: {
-                ...pagination,
-                current: page,
-            },
-        });
-    };
-    const tableProps = {
-        pagination: {
-            ...pagination,
-            total: detail?.total,
-            defaultPageSize: 10,
-            onChange: pageChange,
-        },
-        rowKey: 'id',
-        height: 150,
-        handleTableChange,
-        dataSource: detail?.dataSource,
-    };
-    return (
-        <div className="wr-baseContent">
-            <div className="base-top">
-                <BaseInner photos={photos} baseInfo={baseInfo} />
-
-                <AlarmType data={alarmTabsValue} total={totalCount} />
-            </div>
-            <div className="base-bottom">
-                <Situation situationRes={situationRes} />
-                <div className="base-bottom-alarm-detail">
-                    <div className="base-bottom-alarm-detail-date">
-                        <SubTitle title="报警明细" />
-                        <VMRangePicker
-                            value={[moment(startDate), moment(endDate)]}
-                            size="small"
-                            onChange={(dates: any) =>
-                                dates &&
-                                handleDateChange(
-                                    moment(dates[0]).format('YYYY-MM-DD'),
-                                    moment(dates[1]).format('YYYY-MM-DD'),
-                                )
-                            }
-                            // style={{ position: 'absolute', top: 24, right: 32 }}
-                        />
-                    </div>
-                    <div className="base-bottom-alarm-detail-tab">
-                        <SubTabsLine
-                            items={alarmTabs}
-                            activeKey={standardCode}
-                            onChange={key => {
-                                setState({
-                                    standardCode: key,
-                                });
-                            }}
-                        />
-                    </div>
-                    <VMTable columns={columns} {...tableProps} />
-                </div>
-            </div>
-        </div>
-    );
-};
-
-export default BaseInfo;