@vtx/modals2 2.6.19

package/src/vtx-housing-estate-modal/components/OverView/index.less

@@ -0,0 +1,246 @@
+@import '../../style/index';
+
+.summary-item {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    color: var(--info-color);
+    .summary-item-text {
+        & > p:nth-child(2) {
+            color: #9ba8b0;
+            span {
+                color: var(--info-color);
+                font-size: 20px;
+                margin-right: 8px;
+            }
+        }
+    }
+}
+
+.@{prefix-cls}-overview {
+    display: flex;
+    gap: 10px;
+    height: 800px;
+    padding: 10px;
+    &-left {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 360px;
+        padding: 10px;
+        background: var(--bg-color2);
+        &-map {
+            height: 260px;
+        }
+        &-info {
+            position: relative;
+            flex: 1;
+            padding: 10px;
+            .vm-estate-summary {
+                position: absolute;
+                right: 29px;
+                &-img {
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-end;
+                    position: relative;
+                    padding-right: 16px;
+                    width: 136px;
+                    height: 50px;
+                    color: var(--info-color);
+                    span {
+                        z-index: 1;
+                    }
+                    img {
+                        position: absolute;
+                        left: 0;
+                        right: 0;
+                        top: 0;
+                        bottom: 0;
+                    }
+                }
+                &-text {
+                    margin-top: -12px;
+                    text-align: center;
+                    span:nth-child(1) {
+                        font-size: 26px;
+                        margin-right: 8px;
+                    }
+                }
+            }
+        }
+    }
+    &-middle {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        width: 455px;
+    }
+    &-hot {
+        display: flex;
+        flex-direction: column;
+        padding: 10px;
+        height: 460px;
+        background: var(--bg-color2);
+        &-summary {
+            display: flex;
+            justify-content: space-around;
+            height: 155px;
+            .garbage-summary {
+                width: 100px;
+                height: 100%;
+                text-align: center;
+                color: var(--info-color);
+                padding-top: 12px;
+                &-bucket {
+                    margin: 0 auto;
+                    margin-bottom: 12px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 45px;
+                    height: 52px;
+                }
+                p {
+                    span {
+                        font-size: 18px;
+                        margin-right: 4px;
+                    }
+                }
+            }
+        }
+        &-buttons {
+            padding: 8px 0;
+            text-align: center;
+        }
+        &-chart {
+            flex: 1;
+        }
+    }
+    &-trend {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        background: var(--bg-color2);
+        padding: 10px;
+        &-chart {
+            flex: 1;
+        }
+    }
+    &-right {
+        height: 100%;
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+    &-manage {
+        // height: 315px;
+        padding: 10px;
+        background: var(--bg-color2);
+        color: var(--info-color);
+        display: flex;
+        flex-direction: column;
+        &-top {
+            display: flex;
+            .top-item {
+                display: flex;
+                gap: 32px;
+                align-items: center;
+                padding-left: 24px;
+                margin-bottom: 16px;
+                padding-right: 8px;
+                .img {
+                    text-align: center;
+                    .name--1 {
+                        color: #1febff;
+                    }
+                    .name--2 {
+                        color: #7fffd8;
+                    }
+                    img {
+                        margin-top: -10px;
+                    }
+                }
+                .statistic {
+                    flex: 1;
+                    & > div:nth-child(1) {
+                        padding-left: 16px;
+                        display: flex;
+                        justify-content: space-between;
+                        background: url('../../imgs/manage-bg-1.png') no-repeat;
+                        background-size: 100% 100%;
+                        margin-bottom: 16px;
+                    }
+                    & > div:nth-child(2) {
+                        padding-left: 16px;
+                        display: flex;
+                        justify-content: space-between;
+                        background: url('../../imgs/manage-bg-2.png') no-repeat;
+                        background-size: 100% 100%;
+                    }
+                    .statistic-value--1 {
+                        font-size: 20px;
+                        font-weight: 400;
+                        color: #50ffdc;
+                        background: linear-gradient(
+                            0deg,
+                            #1febff 0%,
+                            #7ddcff 49.90234375%,
+                            #ffffff 100%
+                        );
+                        -webkit-background-clip: text;
+                        -webkit-text-fill-color: transparent;
+                    }
+                    .statistic-value--2 {
+                        font-size: 20px;
+                        font-weight: 400;
+                        color: #5cff84;
+                        background: linear-gradient(
+                            0deg,
+                            #1febff 0%,
+                            #7dffd0 49.90234375%,
+                            #ffffff 100%
+                        );
+                        -webkit-background-clip: text;
+                        -webkit-text-fill-color: transparent;
+                    }
+                }
+            }
+        }
+        &-bottom {
+            height: 50px;
+            padding: 0 20px;
+            display: flex;
+            justify-content: space-between;
+        }
+    }
+    &-rightbottom {
+        flex: 1;
+        padding: 10px;
+        background: var(--bg-color2);
+        color: var(--info-color);
+        display: flex;
+        flex-direction: column;
+        &--buttons {
+            margin-bottom: 16px;
+            text-align: center;
+        }
+        &-echarts {
+            display: flex;
+            .content {
+                width: 50%;
+            }            
+        }
+        &--pie {
+        }
+        &--gauges {
+            flex: 1;
+            display: flex;
+            .gauges-chart {
+                flex: 1;
+            }
+        }
+    }
+}

package/src/vtx-housing-estate-modal/components/OverView/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Left from './Left';
+import Hot from './Hot';
+import Trend from './Trend';
+import Manage from './Manage';
+import RightBottom from './RightBottom';
+import { EstateStatisticsResp } from '../../types';
+import './index.less';
+
+interface OverViewProps {
+    classPrefix?: string;
+    id: string;
+    throwPoints: any[];
+    basicInfo?: EstateStatisticsResp;
+    serviceList: any[];
+}
+
+const OverView: React.FC<OverViewProps> = ({ classPrefix = '', id, throwPoints, basicInfo, serviceList }) => {
+    const prefix = `${classPrefix}-overview`;
+    const common = {
+        classPrefix: prefix,
+        id,
+        serviceList
+    };
+    return (
+        <div className={prefix}>
+            <Left {...common} throwPoints={throwPoints} basicInfo={basicInfo} />
+            {serviceList?.includes('THROW') && <div className={`${prefix}-middle`}>
+                <Hot {...common} />
+                <Trend {...common} />
+            </div>}
+            <div className={`${prefix}-right`}>
+                <Manage {...common} />
+                <RightBottom {...common} />
+            </div>
+        </div>
+    );
+};
+
+export default OverView;

package/src/vtx-housing-estate-modal/components/SPJK/index.less

@@ -0,0 +1,6 @@
+@import '../../style/index';
+
+.@{prefix-cls}-spjk {
+    height: 800px;
+    padding: 10px 20px;
+}

package/src/vtx-housing-estate-modal/components/SPJK/index.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { getUrlParam } from '@vtx/utils';
+import { SubTabsLine, SubTabPane } from '../../../vm-sub-tabs';
+import './index.less';
+
+interface WGGSProps {
+    classPrefix?: string;
+    videoPlaceCode?: string;
+}
+
+const SPJK = ({ classPrefix = '', videoPlaceCode = '' }: WGGSProps) => {
+    const prefix = `${classPrefix}-spjk`;
+    const [tab, setTab] = useState('real');
+    const onTabChange = (tab: string) => {
+        setTab(tab);
+    };
+    return (
+        <div className={prefix}>
+            <SubTabsLine activeKey={tab} onChange={onTabChange}>
+                <SubTabPane subKey="real" key="real" tab="实时视频">
+                    <iframe
+                        width="100%"
+                        height="650px"
+                        src={`${
+                            window.location.origin
+                        }/vis-reborn/#/realTimeVideo?videoPlaceCode=${videoPlaceCode}&tenantId=${getUrlParam(
+                            'tenantId',
+                        )}&userId=${getUrlParam('userId')}&token=${getUrlParam(
+                            'token',
+                        )}&access_token=${getUrlParam('token')}&systemCode=product_vis&theme=dark`}
+                    />
+                </SubTabPane>
+                <SubTabPane subKey="history" key="history" tab="历史视频">
+                    <iframe
+                        width="100%"
+                        height="650px"
+                        src={`${
+                            window.location.origin
+                        }/vis-reborn/#/historyVideo?videoPlaceCode=${videoPlaceCode}&tenantId=${getUrlParam(
+                            'tenantId',
+                        )}&userId=${getUrlParam('userId')}&token=${getUrlParam(
+                            'token',
+                        )}&access_token=${getUrlParam('token')}&systemCode=product_vis&theme=dark`}
+                    />
+                </SubTabPane>
+            </SubTabsLine>
+        </div>
+    );
+};
+export default SPJK;

package/src/vtx-housing-estate-modal/components/TFRD/index.less

@@ -0,0 +1,15 @@
+@import '../../style/index';
+
+.@{prefix-cls}-tfrd {
+    padding: 10px 30px;
+    &-top {
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        &-summary {
+            display: flex;
+            gap: 32px;
+        }
+    }
+}

package/src/vtx-housing-estate-modal/components/TFRD/index.tsx

@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import moment, { Moment } from 'moment';
+import { useAntdTable } from 'ahooks';
+import VmTable from '../../../vm-table';
+import NoData from '../../../vm-nodata';
+import { VMRangePicker } from '../../../vm-filter';
+import { SummaryItem } from '../OverView/Manage';
+import { throwRecordService, queryPage } from '../../api';
+import { ThrowRecordProps } from '../../types';
+import './index.less';
+
+interface TFRDProps {
+    classPrefix?: string;
+    id?: string;
+}
+
+const columns = [
+    {
+        title: '投放人',
+        dataIndex: 'personName',
+    },
+    {
+        title: '门牌号',
+        dataIndex: 'householdNo',
+    },
+    {
+        title: '分类主体',
+        dataIndex: 'housingEstateName',
+    },
+    {
+        title: '行政区划',
+        dataIndex: 'xzqhName',
+    },
+    {
+        title: '投放点',
+        dataIndex: 'throwPointName',
+    },
+    {
+        title: '分类质量',
+        dataIndex: 'qualityValue',
+    },
+    {
+        title: '投放时间',
+        dataIndex: 'endDatetime',
+        render: (text: string) => {
+            if (text) {
+                return (
+                    <>
+                        <div>{text.split(' ')[0]}</div>
+                        <div>{text.split(' ')[1]}</div>
+                    </>
+                );
+            }
+            return '';
+        },
+    },
+];
+
+const TFRD = ({ classPrefix = '', id }: TFRDProps) => {
+    const prefix = `${classPrefix}-tfrd`;
+    const [times, setTimes] = useState([moment(), moment()]);
+
+    const queryParams = {
+        housingEstateId: id,
+        startDatetime: times[0].format('YYYY-MM-DD 00:00:00'),
+        endDatetime: times[1].format('YYYY-MM-DD 23:59:59'),
+    };
+    const summary = throwRecordService.count(queryParams);
+    const getTableData = ({ current, pageSize }: { current: number; pageSize: number }) => {
+        return queryPage<ThrowRecordProps>('/cloud/sdyd/throwRecord/page', {
+            page: current - 1,
+            size: pageSize,
+            ...queryParams,
+        });
+    };
+    const { tableProps } = useAntdTable(getTableData, {
+        defaultPageSize: 10,
+        refreshDeps: [id, times[0], times[1]],
+    });
+
+    const onDateChange = (date: Array<Moment>) => {
+        setTimes(date);
+    };
+
+    // const onExport = (type: string) => {
+    //     switch (type) {
+    //         case 'all':
+    //             break;
+    //         case 'current-page':
+    //             break;
+    //         case 'select-rows':
+    //             break;
+    //         default:
+    //             break;
+    //     }
+    // };
+    return (
+        <div className={prefix}>
+            <div className={`${prefix}-top`}>
+                <div className={`${prefix}-top-summary`}>
+                    <SummaryItem
+                        icon={require('../../imgs/manage-yyxj.png')}
+                        name="投放户数"
+                        unit="户"
+                        num={summary?.householdCount || 0}
+                    />
+                    <SummaryItem
+                        icon={require('../../imgs/manage-wgmsr.png')}
+                        name="投放次数"
+                        unit="次"
+                        num={summary?.totalCount || 0}
+                    />
+                </div>
+                <div className={`${prefix}-top-search`}>
+                    <VMRangePicker
+                        value={times}
+                        onChange={onDateChange}
+                        style={{ marginRight: 10 }}
+                    />
+                    {/*<ExportBtn onClick={onExport} />*/}
+                </div>
+            </div>
+
+            {!tableProps?.dataSource?.length ? (
+                <div
+                    style={{
+                        height: 500,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <NoData />
+                </div>
+            ) : (
+                // @ts-ignore
+                <VmTable height={500} columns={columns} {...tableProps} />
+            )}
+        </div>
+    );
+};
+export default TFRD;

package/src/vtx-housing-estate-modal/components/WGGS/Content.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { VtxImage } from '@vtx/components';
+import NoData from '../../../vm-nodata';
+import { throwFailPersonService } from '../../api';
+import './index.less';
+
+interface WGGSContentProps {
+    classPrefix?: string;
+    id: string;
+    startTime?: string;
+    endTime?: string;
+    throwPointId?: string;
+}
+
+const WGGSContent = ({
+    classPrefix = '',
+    id,
+    startTime,
+    endTime,
+    throwPointId = '',
+}: WGGSContentProps) => {
+    const data = throwFailPersonService.list({
+        housingEstateId: id,
+        beginTime: startTime,
+        endTime,
+        throwPointId,
+    });
+    const { rows = [] } = data || {};
+    return !rows.length ? (
+        <div
+            style={{ height: 500, display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+        >
+            <NoData />
+        </div>
+    ) : (
+        <div className={`${classPrefix}-content`}>
+            {rows.map(item => {
+                const photoId = JSON.parse(item.personPhoto2 || '[]')[0]?.id;
+                const tempDetectObjects = JSON.parse(item.detectObjects || '[]');
+                const photoAfterArr = tempDetectObjects.find((item: any) => item.pic === 'dropPic2')
+                    ?.info;
+                const str = `/cloud/sdyd/markBox?fileId=${photoId}&detectObjects=${
+                    photoAfterArr ? JSON.stringify(photoAfterArr) : ''
+                }`;
+                return (
+                    <div key={item.throwFailId} className={`${classPrefix}-content-item`}>
+                        <div className={`${classPrefix}-content-item-img`}>
+                            <VtxImage src={str} />
+                        </div>
+                        <p>{item.throwPointName}</p>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+export default WGGSContent;

package/src/vtx-housing-estate-modal/components/WGGS/index.less

@@ -0,0 +1,38 @@
+@import '../../style/index';
+
+.@{prefix-cls}-wggs {
+    padding: 10px;
+    &-content {
+        max-height: 580px;
+        padding: 10px 20px;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 32px;
+        overflow: auto;
+        &-item {
+            padding: 10px;
+            padding-bottom: 0;
+            display: flex;
+            flex-direction: column;
+            height: 263px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid #364e60;
+            border-radius: 6px;
+            &-img {
+                flex: 1;
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+            & > p {
+                height: 30px;
+                line-height: 30px;
+                color: var(--info-color);
+            }
+            &--active {
+                border: 1px solid #55fff5;
+            }
+        }
+    }
+}

package/src/vtx-housing-estate-modal/components/WGGS/index.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import { SubTabsLine, SubTabPane } from '../../../vm-sub-tabs';
+import { VMRangePicker } from '../../../vm-filter';
+import { ExportBtn } from '../../../vm-table';
+import WGGSContent from './Content';
+import { throwFailPersonService } from '../../api';
+import './index.less';
+import moment from 'moment';
+import { Moment } from 'moment/moment';
+import { message } from 'antd';
+
+interface WGGSProps {
+    classPrefix?: string;
+    id: string;
+    throwPoints: any[];
+    serviceList: any[];
+}
+
+const WGGS = ({ classPrefix = '', id, throwPoints = [], serviceList }: WGGSProps) => {
+    const prefix = `${classPrefix}-wggs`;
+    const [tab, setTab] = useState('all');
+    const [times, setTimes] = useState([moment(), moment()]);
+
+    const onTabChange = (tab: string) => {
+        setTab(tab);
+    };
+    // 导出
+    const onExport = () => {
+        throwFailPersonService.export({
+            housingEstateId: id,
+            beginTime: times[0].format('YYYY-MM-DD 00:00:00'),
+            endTime: times[1].format('YYYY-MM-DD 23:59:59'),
+            throwPointId: tab === 'all' ? '' : tab,
+        });
+    };
+
+    const searchContent = (
+        <div>
+            <VMRangePicker
+                value={times}
+                onChange={(date: Moment[]) => {
+                    if (date[1].diff(date[0], 'd') > 7) {
+                        message.warning('时间跨度不能超过7天');
+                        return;
+                    }
+                    setTimes(date);
+                }}
+                style={{ marginRight: 10 }}
+            />
+            <ExportBtn
+                onClick={onExport}
+                items={[
+                    {
+                        label: '导出全部',
+                        key: 'all',
+                    },
+                ]}
+            />
+        </div>
+    );
+
+    return (
+        <div className={prefix}>
+            <SubTabsLine activeKey={tab} onChange={onTabChange} tabBarExtraContent={searchContent}>
+                <SubTabPane subKey="all" key="all" tab="所有投放点">
+                    <WGGSContent
+                        classPrefix={prefix}
+                        id={id}
+                        startTime={times[0].format('YYYY-MM-DD 00:00:00')}
+                        endTime={times[1].format('YYYY-MM-DD 23:59:59')}
+                    />
+                </SubTabPane>
+                {serviceList.includes('IDENTIFICATION') && (throwPoints || []).map(item => {
+                    return (
+                        <SubTabPane subKey={item.id} key={item.id} tab={item.pointName}>
+                            <WGGSContent
+                                classPrefix={prefix}
+                                id={id}
+                                throwPointId={item.id}
+                                startTime={times[0].format('YYYY-MM-DD 00:00:00')}
+                                endTime={times[1].format('YYYY-MM-DD 23:59:59')}
+                            />
+                        </SubTabPane>
+                    );
+                })}
+            </SubTabsLine>
+        </div>
+    );
+};
+export default WGGS;