@vtx/modals2 2.6.19

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

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

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

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

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

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