@vtx/modals2 2.6.19 → 2.6.21

package/src/vtx-throw-point-modal/components/SBZJ/index.tsx

@@ -1,300 +0,0 @@
-import React, { useEffect, useRef, forwardRef, useState } from 'react';
-import { getUrlParam } from '@vtx/utils';
-import VmSubTitle from '../../../vm-sub-title';
-import * as zrender from 'zrender/lib/all';
-import SBZJContent from './Content';
-import { deviceService } from '../../api';
-import './index.less';
-
-interface WGGSProps {
-    classPrefix?: string;
-    id?: string;
-}
-
-const SBZJ = ({ classPrefix = '', id = '' }: WGGSProps) => {
-    const prefix = `${classPrefix}-sbzj`;
-    const myRef = useRef();
-    const [height, setHeight] = useState(200);
-    // const [width, setWidth] = useState(800);
-    const runStatusTopology: any = deviceService.throwPointDeviceStatusTopology({
-        throwPointId: id,
-        tenantId: getUrlParam('tenantId'),
-    });
-    const Topology = forwardRef((props, ref: any) => {
-        window.console.log(props);
-        if (runStatusTopology?.nodes?.length) {
-            return (
-                <div className={`${prefix}-canvas`}>
-                    <div
-                        id="zrender"
-                        style={{ height: `${height}px`, width: `100%` }}
-                        ref={ref}
-                        className={`${prefix}-device`}
-                    ></div>
-                </div>
-            );
-        } else {
-            return (
-                <div ref={ref} className={`${prefix}-disconnect`}>
-                    <img
-                        src={require('../../imgs/disconnect.png')}
-                        style={{ width: '400px', height: '212px' }}
-                    />
-                    <div>主机连接已断开，现场情况未知</div>
-                </div>
-            );
-        }
-    });
-    const line = ([x1 = 0, y1 = 0, x2 = 0, y2 = 0, color = '#52c41a']) => {
-        let textX = Math.abs((x2 - x1) / 2) + Math.min(x2, x1);
-        let textY = Math.abs((y2 - y1) / 2) + Math.min(y2, y1);
-        let t = new zrender.Image({
-            style: {
-                image: require('../../imgs/error.png'),
-                width: 16,
-                height: 16,
-                x: textX - 8,
-                y: textY - 8,
-            },
-        });
-        let line = new zrender.Line({
-            shape: {
-                x1: x1,
-                y1: y1,
-                x2: x1,
-                y2: y1,
-            },
-            style: {
-                opacity: 0,
-                stroke: '#fff',
-                lineDash: 'dashed',
-                lineWidth: 2,
-            },
-        });
-
-        let triangle = new zrender.Polygon({
-            shape: {
-                points: [
-                    [x1, y2],
-                    [x1, y2],
-                    [x1, y2],
-                ],
-            },
-            style: {
-                fill: '#fff',
-                opacity: 0,
-            },
-        });
-        triangle.animateTo(
-            // 为箭头添加动画
-            {
-                shape: {
-                    points: [
-                        [x1 - 8, y2],
-                        [x1 + 8, y2],
-                        [x1, y2 + 14],
-                    ],
-                },
-                style: {
-                    fill: color,
-                    opacity: 1,
-                },
-            },
-        );
-        line.animateTo(
-            // 为线段添加动画
-            {
-                shape: {
-                    x1,
-                    y1,
-                    x2,
-                    y2,
-                },
-                style: {
-                    stroke: color,
-                    opacity: 1,
-                },
-            },
-        );
-        return [line, triangle, t];
-    };
-    const group = ([x = 0, y = 0, url = '', text = '', type = 'asc']) => {
-        // 文字排列顺序
-        const g = new zrender.Group();
-        g.x = x;
-        g.y = y;
-        let length = text.length;
-        let a =
-            length > 9 && length < 16
-                ? `${text.substring(0, 9)}\n${text.substring(9, length)}`
-                : length > 15
-                    ? `${text.substring(0, 9)}\n${text.substring(9, 16)}\n${text.substring(16, length)}`
-                    : text;
-        let t = new zrender.Text({
-            style: {
-                text: a,
-                fill: '#fff',
-                fontSize: 12,
-                y: type === 'asc' ? 105 : 0,
-            },
-        });
-        let img = new zrender.Image({
-            style: {
-                image: url,
-                width: 100,
-                height: 100,
-                y: type === 'asc' ? 0 : 30,
-            },
-        });
-        t.animateTo({
-            style: {
-                fontSize: 18,
-                textShadowColor: '#fff',
-                textShadowBlur: 1,
-            },
-        });
-        g.add(img);
-        g.add(t);
-        return g;
-    };
-    const imgType = (item = { nodeType: '', deviceType: '' }) => {
-        if (item.nodeType === 'DEVICE') {
-            switch (item.deviceType) {
-                case 'SHUTTER_DOOR':
-                    return require('../../imgs/window.png');
-                case 'AI_BOX':
-                    return require('../../imgs/getwayBox.png');
-                case 'LIGHT':
-                    return require('../../imgs/lamp.png');
-                case 'ANDROID_SCREEN':
-                    return require('../../imgs/screen.png');
-                case 'CAMERA':
-                    return require('../../imgs/camera.png');
-                case 'DDP':
-                    return require('../../imgs/screen.png');
-                default:
-                    break;
-            }
-        } else {
-            switch (item.nodeType) {
-                case 'CAMERA':
-                    return require('../../imgs/camera.png');
-                case 'GATEWAY':
-                    return require('../../imgs/getway.png');
-                case 'MAIN_GATEWAY_AI_BOX':
-                    return require('../../imgs/getwayBox.png');
-                case 'ANDROID_SCREEN':
-                    return require('../../imgs/screen.png');
-                default:
-                    break;
-            }
-        }
-    };
-    const drawTopology = (startX = 0, y = 0, arr: any, zr: any, count = 0, w = 0) => {
-        arr?.map((v: any, i: any) => {
-            let averageX = arr.length % 2 ? arr.length - 1 || 1 : arr.length;
-            let color = v.status === 'online' ? '#52c41a' : '#ff4d4f';
-            let x = (w - 100) / averageX; // 算出x轴的平均坐标 ( width - 两边图片一半的宽度)
-            let beforeNodesLength = 0;
-            let lineI = i;
-            for (let j = 0; j < i; j++) {
-                beforeNodesLength += arr[j]?.nodes.length || 1;
-            }
-            if (v.level < 2) {
-                //需要算出底层子节点的个数
-                lineI = i && (beforeNodesLength || i);
-            } else {
-                //下一层直接用父级传过来的参数沿用即可
-                lineI = count ? count + i : i;
-            }
-            let lineX = x * lineI + 50; // +50是是因为图片宽度为100 线段要指在图片中间
-            zr.add(line([startX, y, lineX, y, color])[0]); // 添加每个元素x轴的线段
-            let yLine = line([lineX, y, lineX, y + 30, color]); // +30 y轴线段的长度
-            zr.add(yLine[0]); // 添加每个元素y轴的线段
-            zr.add(yLine[1]); // 添加每个元素y轴的箭头
-            if (v.status !== 'online') {
-                zr.add(yLine[2]);
-            }
-            zr.add(
-                group([
-                    x * lineI,
-                    y + 50,
-                    imgType(v),
-                    `${v.nodeType === 'DEVICE' ? `${v.deviceTypeDesc}` : ''}${v.name}`,
-                ]),
-            ); //  + 50： 稍微与线段箭头隔开一点
-            if (v.nodes?.length) {
-                let c = v.nodes.some((e: any) => e.status === 'online') ? '#52c41a' : '#ff4d4f';
-                zr.add(line([lineX, y + 180, lineX, y + 210, c])[0]); //  为每个有子节点的画上y轴坐标  +180 ：50为起始的y坐标 再+图片和文字的高度130
-                drawTopology(lineX, y + 210, v.nodes, zr, beforeNodesLength, w);
-            }
-        });
-    };
-    const getMaxlevel = (treeData: any) => {
-        let maxLevel = 1;
-        let count: any = {}; //记录每个层级及下一层总共的个数
-        const loop = (data: any, level: any) => {
-            if (!count[`maxCount${level}`]) {
-                count[`maxCount${level}`] = 0;
-            }
-            data.forEach((item: any) => {
-                count[`maxCount${level}`] += item.nodes.length || 1;
-                item.level = level;
-                if (level > maxLevel) {
-                    maxLevel = level;
-                }
-                if ('nodes' in item) {
-                    if (item.nodes.length > 0) {
-                        loop(item.nodes, level + 1);
-                    }
-                }
-            });
-        };
-        loop(treeData, 1);
-        return Promise.resolve({ maxLevel, count });
-    };
-    useEffect(() => {
-        if (runStatusTopology?.nodes?.length) {
-            getMaxlevel(runStatusTopology?.nodes).then((res: any) => {
-                let maxCount = 0;
-                for (let i in res.count) {
-                    maxCount = Math.max(res.count[i], maxCount);
-                }
-                let w = 800;
-                setHeight(200 + res.maxLevel * 200);
-                if (maxCount > 4) {
-                    w = maxCount * 150 < 1270 ? 1270 : maxCount * 150;
-                    // setWidth(maxCount * 150 < 1270 ? 1270 : maxCount * 150);
-                }
-                const zr = zrender.init(myRef.current);
-                zr.add(
-                    group([
-                        w / 2 - 50, // 宽度/2减去图片的一边 居中
-                        2,
-                        require('../../imgs/throwPoint.png'),
-                        runStatusTopology.name,
-                        'desc',
-                    ]),
-                );
-                let color = runStatusTopology?.nodes.some((e: any) => e.status === 'online')
-                    ? '#52c41a'
-                    : '#ff4d4f';
-                zr.add(line([w / 2, 110, w / 2, 140, color])[0]);
-                drawTopology(w / 2, 140, runStatusTopology?.nodes, zr, 0, w);
-            });
-        }
-    }, [JSON.stringify(runStatusTopology?.nodes)]);
-    return (
-        <div className={prefix}>
-            <VmSubTitle title="设备总览" />
-            <Topology ref={myRef}></Topology>
-            {runStatusTopology?.nodes?.length ? (
-                <div className={`${prefix}-content`}>
-                    <VmSubTitle title="设备信息" />
-                    <SBZJContent rows={runStatusTopology.nodes} classPrefix={prefix} />
-                </div>
-            ) : null}
-        </div>
-    );
-};
-export default SBZJ;

package/src/vtx-throw-point-modal/components/SPJK/index.less

@@ -1,8 +0,0 @@
-@import '../../style/index';
-
-.@{prefix-cls}-spjk {
-    height: 640px;
-    .ant-tabs-tabpane {
-        height: 100%;
-    }
-}

package/src/vtx-throw-point-modal/components/SPJK/index.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { BillPlayer } from '@vtx/player';
-import './index.less';
-
-interface WGGSProps {
-    classPrefix?: string;
-    videoPlaceCode?: string;
-}
-
-const SPJK = ({ classPrefix = '', videoPlaceCode = '' }: WGGSProps) => {
-    const prefix = `${classPrefix}-spjk`;
-    return (
-        <div className={prefix}>
-            {videoPlaceCode ? (
-                <BillPlayer height={640} isDark params={{ billId: videoPlaceCode }} />
-            ) : (
-                <div
-                    style={{
-                        display: 'flex',
-                        height: '100%',
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        color: '#fff',
-                    }}
-                >
-                    暂无视频
-                </div>
-            )}
-        </div>
-    );
-};
-export default SPJK;

package/src/vtx-throw-point-modal/components/TFRD/index.less

@@ -1,15 +0,0 @@
-@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-throw-point-modal/components/TFRD/index.tsx

@@ -1,136 +0,0 @@
-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 = {
-        throwPointId: 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-throw-point-modal/components/WGGS/Content.tsx

@@ -1,49 +0,0 @@
-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;
-}
-
-const WGGSContent = ({ classPrefix = '', id, startTime, endTime }: WGGSContentProps) => {
-    const data = throwFailPersonService.list({
-        beginTime: startTime,
-        endTime,
-        throwPointId: id,
-    });
-    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-throw-point-modal/components/WGGS/index.less

@@ -1,38 +0,0 @@
-@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-throw-point-modal/components/WGGS/index.tsx

@@ -1,76 +0,0 @@
-import React, { useState } from 'react';
-import moment from 'moment';
-import { Moment } from 'moment/moment';
-import { message } from 'antd';
-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';
-
-interface WGGSProps {
-    classPrefix?: string;
-    id?: string;
-    title?: string;
-    serviceList: any[];
-}
-
-const WGGS = ({ classPrefix = '', id, title, 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({
-            beginTime: times[0].format('YYYY-MM-DD 00:00:00'),
-            endTime: times[1].format('YYYY-MM-DD 23:59:59'),
-            throwPointId: id,
-        });
-    };
-
-    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}>
-                {serviceList.includes('IDENTIFICATION') && <SubTabPane subKey="all" key="all" tab={title}>
-                    <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>}
-            </SubTabsLine>
-        </div>
-    );
-};
-export default WGGS;