@vtx/modals2 2.6.19

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

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

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

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

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

@@ -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-throw-point-modal/components/TFRD/index.tsx

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

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

@@ -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-throw-point-modal/components/WGGS/index.tsx

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