@vtx/modals2 2.6.19

package/src/vtx-throw-point-modal/components/WGXW/Content.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { VtxImage } from '@vtx/components';
+import NoData from '../../../vm-nodata';
+import { throwFailBehaviorService } from '../../api';
+import './index.less';
+
+interface WGGSContentProps {
+    classPrefix?: string;
+    id?: string;
+    throwAberrantCode?: string;
+    startTime: string;
+    endTime: string;
+    throwPointId?: string;
+}
+
+const WGGSContent = ({
+    classPrefix = '',
+    id,
+    throwAberrantCode,
+    startTime,
+    endTime,
+}: WGGSContentProps) => {
+    const data = throwFailBehaviorService.list({
+        startDatetime: startTime,
+        endDatetime: endTime,
+        throwPointId: id,
+        throwAberrantCode: throwAberrantCode === 'all' ? '' : throwAberrantCode,
+    });
+    return !data?.length ? (
+        <div
+            style={{ height: 500, display: 'flex', justifyContent: 'center', alignItems: 'center' }}
+        >
+            <NoData />
+        </div>
+    ) : (
+        <div className={`${classPrefix}-content`}>
+            {data?.map?.(item => {
+                const photoId = JSON.parse(item.photoAfter || '[]')[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.id} className={`${classPrefix}-content-item`}>
+                        <div className={`${classPrefix}-content-item-img`}>
+                            <VtxImage src={str} />
+                        </div>
+                        <div className={`${classPrefix}-content-item-info1`}>
+                            <span>{item.throwPointName}</span>
+                            <span
+                                className={`${classPrefix}-content-item-${item.rectificationStatus}`}
+                            >
+                                {item.rectificationStatusDesc}
+                            </span>
+                        </div>
+                        <div className={`${classPrefix}-content-item-info2`}>
+                            <span>{item.datetime}</span>
+                            <div>{item.aberrantName}</div>
+                        </div>
+                        <div className={`${classPrefix}-content-item-info3`}>
+                            <img src={require('../../imgs/avatar_empty.png')} />
+                            {item.personName || '暂无关联用户'}
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+export default WGGSContent;

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

@@ -0,0 +1,76 @@
+@import '../../style/index';
+
+.@{prefix-cls}-wgxw {
+    &-content {
+        max-height: 580px;
+        padding: 10px 20px;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 32px;
+        overflow: auto;
+        &-item {
+            padding: 10px;
+            display: flex;
+            flex-direction: column;
+            height: 263px;
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid #364e60;
+            border-radius: 6px;
+            &--active {
+                border: 1px solid #55fff5;
+            }
+            &-img {
+                height: 155px;
+                margin-bottom: 8px;
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+            &-info1 {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 4px;
+                & > span:nth-child(1) {
+                    color: var(--info-color);
+                    font-size: 16px;
+                }
+            }
+            &-info2 {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                margin-bottom: 4px;
+                & > span {
+                    color: var(--info-color);
+                }
+                & > div {
+                    color: var(--info-color);
+                }
+            }
+            &-info3 {
+                display: flex;
+                gap: 8px;
+                align-items: center;
+                color: var(--info-color);
+            }
+            &-TO_BE_RESOLVED,
+            &-PENDING {
+                color: #faad14;
+            }
+            &-TO_BE_AUDITED {
+                color: #faad14;
+            }
+            &-FAILED {
+                color: #ff4d4f;
+            }
+            &-PASSED {
+                color: #52c41a;
+            }
+            &-IGNORED {
+                color: #999999;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react';
+import { Select } from 'antd';
+import moment, { Moment } from 'moment';
+import { SubTabsLine, SubTabPane } from '../../../vm-sub-tabs';
+import { VMRangePicker } from '../../../vm-filter';
+import WGXWContent from './Content';
+import { getViolateBehavior } from '../../api';
+import { filterCode } from '../../config';
+import './index.less';
+
+const { Option } = Select;
+
+interface WGXWProps {
+    classPrefix?: string;
+    id?: string;
+    title?: string;
+    serviceList: any;
+}
+
+const WGXW = ({ classPrefix = '', id, title, serviceList }: WGXWProps) => {
+    const prefix = `${classPrefix}-wgxw`;
+    const [tab, setTab] = useState('all');
+    const [times, setTimes] = useState([moment(), moment()]);
+    // 违规行为
+    const [throwAberrantCode, setThrowAberrantCode] = useState('all');
+    // 违规行为
+    const [throwAberrantList, setThrowAberrantList] = useState<{ text: string; value: string }[]>(
+        [],
+    );
+
+    useEffect(() => {
+        getViolateBehavior().then(data => {
+            setThrowAberrantList([{ text: '全部', value: 'all' }, ...(data || [])]);
+        });
+    }, []);
+
+    const onTabChange = (tab: string) => {
+        setTab(tab);
+    };
+    // 导出
+    // const onExport = () => {
+    //     throwFailBehaviorService.export({
+    //         throwPointId: id,
+    //         startDatetime: times[0].format('YYYY-MM-DD 00:00:00'),
+    //         endDatetime: times[1].format('YYYY-MM-DD 23:59:59'),
+    //         throwPointId: tab === 'all' ? '' : tab,
+    //         throwAberrantCode: throwAberrantCode === 'all' ? '' : throwAberrantCode,
+    //     });
+    // };
+
+    const searchContent = (
+        <div style={{ textAlign: 'right', paddingRight: 10 }}>
+            <span style={{ color: '#B3C4CE' }}> 违规行为：</span>
+
+            <Select
+                value={throwAberrantCode}
+                onChange={value => setThrowAberrantCode(value)}
+                style={{ width: 120 }}
+            >
+                {throwAberrantList.map(item => (
+                    <Option key={item.value}>{item.text}</Option>
+                ))}
+            </Select>
+            <VMRangePicker
+                value={times}
+                onChange={(date: [Moment, Moment]) => setTimes(date)}
+                style={{ margin: '0 10px' }}
+            />
+            {/*<ExportBtn*/}
+            {/*    onClick={onExport}*/}
+            {/*    items={[*/}
+            {/*        {*/}
+            {/*            label: '导出全部',*/}
+            {/*            key: 'all',*/}
+            {/*        },*/}
+            {/*    ]}*/}
+            {/*/>*/}
+        </div>
+    );
+
+    return (
+        <div className={prefix}>
+            <SubTabsLine activeKey={tab} onChange={onTabChange} tabBarExtraContent={searchContent}>
+                {filterCode(serviceList, ['CHUYU_QUALITY', 'LANDING', 'ON_LID', 'QITA_QUALITY']) && <SubTabPane subKey="all" key="all" tab={title}>
+                    <WGXWContent
+                        classPrefix={prefix}
+                        id={id}
+                        throwAberrantCode={throwAberrantCode}
+                        startTime={times[0].format('YYYY-MM-DD 00:00:00')}
+                        endTime={times[1].format('YYYY-MM-DD 23:59:59')}
+                        throwPointId=""
+                    />
+                </SubTabPane>}
+            </SubTabsLine>
+        </div>
+    );
+};
+export default WGXW;

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

@@ -0,0 +1,7 @@
+export { default as OverView } from './OverView';
+export { default as WGGS } from './WGGS';
+export { default as TFRD } from './TFRD';
+export { default as WGXW } from './WGXW';
+export { default as Alarm } from './Alarm';
+export { default as SPJK } from './SPJK';
+export { default as SBZJ } from './SBZJ';

package/src/vtx-throw-point-modal/config.tsx

@@ -0,0 +1,57 @@
+export const OverViewLeftFields = [
+    {
+        key: 'divisionName',
+        label: '行政区划',
+    },
+    {
+        key: 'throwPointName',
+        label: '投放点',
+    },
+    {
+        key: 'address',
+        label: '地址',
+    },
+    {
+        key: 'responsibleOrgName',
+        label: '运营公司',
+    },
+    {
+        key: 'supervisorName',
+        label: '督导员',
+    },
+];
+
+
+
+// 过滤echarts数据
+export const getFilterEcharts = (data: any, filterList: any[]) => {
+    let _data: any[] = [];
+    if (!data?.length) return;
+    filterList.forEach((item: any) => {
+        switch (item) {
+            case 'CHUYU_QUALITY':
+                _data = _data.concat(
+                    data?.filter((ele: any) => ele.alarmTypeName === '厨余混投' || ele.alarmTypeName === '厨余未破袋'),
+                );
+                break;
+            case 'LANDING':
+                _data = _data.concat(
+                    data?.filter((ele:any) => ele.alarmTypeName === '误时落地' || ele.alarmTypeName === '正时落地'),
+                );
+                break;
+            case 'OVERFLOW':
+                _data = _data.concat(data?.filter((ele: any) => ele.alarmTypeName === '满溢'));
+                break;
+            default:
+                break;
+        }
+    });
+    return _data;
+} 
+
+// 取两个数组的交集
+export const filterCode = (arr: any, codes: any) => {
+    let newArr = new Set(arr);
+    let newCodes = new Set(codes);
+    return new Set([...newArr].filter(x => newCodes.has(x)));
+};

package/src/vtx-throw-point-modal/demo/demo1.tsx

@@ -0,0 +1,28 @@
+import { Button } from 'antd';
+import React, { useState } from 'react';
+import { VtxThrowPointModal } from '@vtx/modals';
+
+export default function Demo() {
+    const [visible, setVisible] = useState(false);
+    return (
+        <div style={{ height: '200px' }}>
+            <Button
+                type="primary"
+                onClick={() => {
+                    setVisible(true);
+                }}
+            >
+                暗色
+            </Button>
+            <VtxThrowPointModal
+                visible={visible}
+                theme="dark"
+                title="投放点"
+                id="1561596179991314434"
+                onCancel={() => {
+                    setVisible(false);
+                }}
+            />
+        </div>
+    );
+}

package/src/vtx-throw-point-modal/index.md

@@ -0,0 +1,15 @@
+---
+nav:
+    title: 组件
+    path: /modal
+group:
+    title: 弹窗
+    path: /modal
+    order: 10
+---
+
+# 投放点弹窗
+
+Demo:
+
+<code src="./demo/demo1.tsx">demo</code>

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { getUrlParam } from '@vtx/utils';
+import VtxBaseModal from '../vtx-base-modal';
+import { OverView, WGGS, TFRD, WGXW, Alarm, SPJK, SBZJ } from './components';
+import { overViewService, getLoadEnumValue } from './api';
+
+export interface ThrowPointModalProps {
+    visible?: boolean;
+    onCancel?: () => void;
+    theme?: 'dark' | 'light';
+    title?: '';
+    id: string;
+}
+
+const VtxThrowPointModal = (props: ThrowPointModalProps) => {
+    const { visible = false, onCancel, theme = 'dark', title = '投放点', id } = props;
+    const PREFIX = 'tfd';
+    // 投放点基本信息
+    const basicInfo = overViewService.estateStatistics({
+        throwPointId: id,
+        token: getUrlParam('token'),
+    });
+    // 小区业务包code
+    const serviceList = getLoadEnumValue(id) || [];
+    const tabContents = {
+        overview: <OverView classPrefix={PREFIX} id={id} basicInfo={basicInfo} serviceList={serviceList} />,
+        wggs: <WGGS classPrefix={PREFIX} id={id} title={basicInfo?.throwPointName || title} serviceList={serviceList} />,
+        tfrd: <TFRD classPrefix={PREFIX} id={id} />,
+        alarm: <Alarm classPrefix={PREFIX} id={id} />,
+        wgxw: <WGXW classPrefix={PREFIX} id={id} title={basicInfo?.throwPointName || title} serviceList={serviceList} />,
+        video: <SPJK classPrefix={PREFIX} videoPlaceCode={`tfd_${basicInfo?.pointCode}`} />,
+        device: <SBZJ classPrefix={PREFIX} id={id} />,
+    };
+    return (
+        <VtxBaseModal
+            title={basicInfo?.throwPointName || title}
+            theme={theme}
+            tabs={[
+                {
+                    key: 'overview',
+                    title: '综合总览',
+                },
+                {
+                    key: 'wggs',
+                    title: '违规人公示',
+                },
+                ...(serviceList.includes('THROW')
+                    ? [
+                        {
+                            key: 'tfrd',
+                            title: '居民投放热度',
+                        },
+                    ]
+                    : []),
+                {
+                    key: 'wgxw',
+                    title: '居民违规行为',
+                },
+                {
+                    key: 'alarm',
+                    title: '报警事件分析',
+                },
+                {
+                    key: 'video',
+                    title: '视频监控',
+                },
+                {
+                    key: 'device',
+                    title: '设备自检',
+                },
+            ]}
+            contents={tabContents}
+            visible={visible}
+            onCancel={onCancel}
+        />
+    );
+};
+
+export default VtxThrowPointModal;

package/src/vtx-throw-point-modal/style/index.less

@@ -0,0 +1 @@
+@prefix-cls: tfd;

package/src/vtx-throw-point-modal/style/index.tsx

@@ -0,0 +1,4 @@
+import '../components/OverView/index.less';
+import '../components/WGGS/index.less';
+import '../components/Alarm/index.less';
+import './index.less';