admin2 1.0.0

package/src/components/SMIcon/index.jsx

@@ -0,0 +1,25 @@
+import { createFromIconfontCN } from '@ant-design/icons';
+
+import defaultSettings from '@/configure/defaultSettings';
+
+const { iconfontUrl } = defaultSettings;
+
+const SMIcon = props => {
+    const { type, onClick } = props;
+    const IconFont = createFromIconfontCN({
+        scriptUrl: iconfontUrl,
+    });
+
+    return (
+        <IconFont
+            type={type}
+            onClick={
+                () => onClick && onClick()
+            }
+            {...props}
+        />
+    );
+
+};
+
+export default SMIcon;

package/src/components/SMImage/index.jsx

@@ -0,0 +1,277 @@
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+import { Popover, Image } from 'antd';
+import LazyLoad from 'react-lazy-load';
+import _ from 'lodash';
+
+import { getRandomString } from '@/utils/utils';
+
+import styles from './index.less';
+
+/**
+ * 获取当前尺寸
+ * @param originWidth 原始宽度
+ * @param originHeight 原始高度
+ * @param targetWidth 容器宽度
+ * @param targetHeight 容器高度
+ * @returns {{currentWidth: number, currentHeight: number}}
+ */
+const getCurrentSize = ({ originWidth, originHeight, targetWidth, targetHeight }) => {
+    const originRatio = originWidth / originHeight;
+    const targetRatio = targetWidth / targetHeight;
+    let currentWidth = 0;
+    let currentHeight = 0;
+
+    // 图片宽 > 容器宽
+    if (originWidth > targetWidth) {
+    // 图片高 > 容器高
+        if (originHeight > targetHeight) {
+            // 图片过宽
+            if (originRatio > targetRatio) {
+                currentWidth = targetWidth;
+                currentHeight = targetWidth / originRatio;
+                // 图片过高
+            } else {
+                currentHeight = targetHeight;
+                currentWidth = targetHeight * originRatio;
+            }
+            // 图片高 < 容器高
+        } else {
+            currentWidth = targetWidth;
+            currentHeight = targetWidth / originRatio;
+        }
+    // 图片宽 < 容器宽
+    } else {
+    // 图片高 > 容器高
+        if (originHeight > targetHeight) {
+            currentHeight = targetHeight;
+            currentWidth = targetHeight * originRatio;
+            // 图片高 < 容器高
+        } else {
+            currentWidth = originWidth;
+            currentHeight = originHeight;
+        }
+    }
+
+    return {
+        currentWidth,
+        currentHeight,
+    };
+};
+
+// 银联私有化特殊场景获取图片的方式
+const getImageWithRequestHeader = (url, requestHeader) => {
+    return new Promise((resolve, reject) => {
+        const request = new XMLHttpRequest();
+        request.responseType = 'blob';
+        request.open('get', url, true);
+        if (!_.isEmpty(requestHeader)) {
+            _.each(requestHeader, (headerValue, headerKey) => {
+                request.setRequestHeader(headerKey, headerValue);
+            });
+            request.setRequestHeader('reqId', getRandomString(64));
+        }
+        request.onreadystatechange = () => {
+            if (request.readyState === XMLHttpRequest.DONE && request.status === 200) {
+                const imgSrc = URL.createObjectURL(request.response);
+                resolve(imgSrc);
+            }
+        };
+        request.send();
+    }).catch(() => {});
+};
+
+const AuditImage = props => {
+    const {
+        width = 300,
+        height = 300,
+        url = '',
+        onImageLoaded,
+        popStyles,
+        contentStyles,
+        requestHeader,
+        markRects = [],
+        onlyKey,
+        fallbackSrc,
+    } = props;
+
+    const isSpecialUrl = !_.isEmpty(requestHeader);
+    // 新增一个 useRef，用于获取 canvas 元素的引用
+    const canvasRef = useRef();
+    const canvasPopoverRef = useRef(); // 预览的canvas
+
+    const [originWidth, setOriginWidth] = useState(0);
+    const [originHeight, setOriginHeight] = useState(0);
+    const { currentWidth, currentHeight } = getCurrentSize({
+        originWidth,
+        originHeight,
+        targetWidth: width,
+        targetHeight: height,
+    });
+    const [imgVisible, setImgVisible] = useState(false); // 是否是预览状态
+    const [popoverVisible, setPopoverVisible] = useState(false); // 是否展示悬浮
+    // 银联私有化三代半用到的url
+    const [specialUrl, setSpecialUrl] = useState('');
+
+    const imageSrc = isSpecialUrl ? specialUrl : url;
+    const [newImageSrc, setNewImageSrc] = useState(imageSrc);
+
+    /**
+   * 获取弹窗dom
+   * @returns {XML}
+     */
+    const getPopHtml = () => {
+        const { currentWidth, currentHeight } = getCurrentSize({
+            originWidth,
+            originHeight,
+            targetWidth: 500,
+            targetHeight: 500,
+        });
+
+        return (
+            <div style={popStyles ? popStyles : { textAlign: 'center' }}>
+                <img
+                    src={imageSrc}
+                    // referrerPolicy="no-referrer"
+                    alt="图片加载失败"
+                    width={currentWidth}
+                    height={currentHeight}
+                    onLoad={e => {
+                        const ratio = e.target.naturalWidth / e.target.width;
+                        const ctx = canvasPopoverRef.current.getContext('2d');
+                        drawRect(ctx, ratio);
+                        canvasPopoverRef.current.style.position = 'absolute';
+                        canvasPopoverRef.current.style.top = '12px';
+                        canvasPopoverRef.current.style.left = '16px';
+                    }}
+                />
+                <canvas
+                    ref={canvasPopoverRef}
+                    width={currentWidth}
+                    height={currentHeight}
+                    style={{ position: 'absolute', top: 0, left: 0, 'pointer-events': 'none' }}
+                />
+            </div>
+        );
+    };
+
+    // 新增一个函数，用于在 canvas 上绘制矩形
+    const drawRect = (ctx, ratio = 1) => {
+        ctx.lineWidth = 1;
+        _.forEach(markRects, item => {
+            const location = item.location;
+            // 设置矩形的边框颜色和宽度
+            ctx.strokeStyle = 'red';
+            // 根据后端返回的数据，绘制一个矩形
+            ctx.strokeRect(
+                location[0] / ratio,
+                location[1] / ratio,
+                (location[2] - location[0]) / ratio,
+                (location[3] - location[1]) / ratio);
+        });
+    };
+
+    // 设置Canvas在图片的偏移位置
+    const setCanvasPosition = useCallback(params => {
+        const {dom, width, height, canvasRef} = params;
+        const centerX = (width - dom.target.width) / 2;
+        const centerY = (height - dom.target.height) / 2;
+        // 设置 canvas 的样式
+        canvasRef.current.style.position = 'absolute';
+        canvasRef.current.style.top = `${centerY}px`;
+        canvasRef.current.style.left = `${centerX}px`;
+    }, []);
+
+    useEffect(() => {
+        if (isSpecialUrl) {
+            getImageWithRequestHeader(url, requestHeader).then(data => setSpecialUrl(data));
+        }
+    }, [url, isSpecialUrl, requestHeader]);
+
+    useEffect(() => {
+        setNewImageSrc(imageSrc);
+    }, [imageSrc]);
+
+    const popHtml = getPopHtml();
+
+    return (
+        <div
+            className={styles['image-detail-wrapper']}
+            key={onlyKey}
+            style={{ width, height }}
+        >
+            <div className={styles['image-hidden']}>
+                <img
+                    src={newImageSrc}
+                    // referrerPolicy="no-referrer"
+                    alt="图片加载失败"
+                    onLoad={e => {
+                        const { target } = e;
+                        setOriginHeight(target.height);
+                        setOriginWidth(target.width);
+
+                        onImageLoaded && onImageLoaded(true);
+                    }}
+                    onError={() => {
+                        onImageLoaded && onImageLoaded(false);
+                    }}
+                />
+            </div>
+            <LazyLoad>
+                <Popover
+                    content={popHtml}
+                    trigger="hover"
+                    open={popoverVisible}
+                    placement="right"
+                    onOpenChange={val => {
+                        if (!imgVisible) {
+                            setPopoverVisible(val);
+                        }
+                    }}
+                >
+                    <Image
+                        className={styles['image-detail-img']}
+                        src={newImageSrc}
+                        // referrerPolicy="no-referrer"
+                        alt="图片加载失败"
+                        width={currentWidth}
+                        height={currentHeight}
+                        style={contentStyles}
+                        onLoad={e => {
+                            /*
+                                JIRA: ITRWEBPTWT-193
+                                问题：此处为了解决 历史记录部分图片无法标注人脸（随机的）
+                                排查经过：经排查发现的无法标注人脸的图片，是因为获取图片currentWidth，currentHeight是通过一个隐藏的img标签去获取的
+                                有时候图片在隐藏img标签加载成功前被加载了。就会导致图片加载时，没有实际宽高，导致人脸无法进行标注
+                                解决方案：通过setTimeout异步去延迟执行标注人脸
+                            */
+                            setTimeout(() => {
+                                // 获取图片缩放比例
+                                const ratio = e.target.naturalWidth / e.target.width;
+                                const ctx = canvasRef.current?.getContext('2d');
+                                drawRect(ctx, ratio);
+                                setCanvasPosition({dom: e, width, height, canvasRef});
+                            }, 0);
+                        }}
+                        preview={
+                            {
+                                visible: imgVisible,
+                                onVisibleChange: value => {
+                                    setImgVisible(value);
+                                    setPopoverVisible(false);
+                                },
+                            }}
+                        onError={() => setNewImageSrc(fallbackSrc)}
+                    />
+                    <canvas
+                        ref={canvasRef}
+                        width={currentWidth}
+                        height={currentHeight}
+                        style={{ position: 'absolute', top: 0, left: 0, 'pointer-events': 'none' }}
+                    />
+                </Popover>
+            </LazyLoad>
+        </div>
+    );
+};
+
+export default AuditImage;

package/src/components/SMImage/index.less

@@ -0,0 +1,46 @@
+@import "~antd/es/style/themes/default.less";
+
+.image-detail-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    vertical-align: middle;
+    background: rgba(0, 0, 0, 0.1);
+
+    :global {
+        .ant-image {
+            min-width: 100px !important;
+            vertical-align: middle;
+        }
+    }
+
+    .image-detail-img {
+        max-width: 100%;
+
+        cursor: zoom-in;
+    }
+
+    :global(.LazyLoad) {
+        width: 100%;
+        height: 100%;
+
+        &:after {
+            display: inline-block;
+            height: 100%;
+            vertical-align: middle;
+            content: '';
+        }
+    }
+
+    .image-hidden {
+        display: none;
+        vertical-align: middle;
+    }
+}
+:global {
+    .ant-image-preview-operations {
+        background: #000;
+    }
+}

package/src/components/SMInputSelect/index.jsx

@@ -0,0 +1,117 @@
+import lodash from 'lodash';
+import React, { Component } from 'react';
+import { Input, Select, Divider } from 'antd';
+import styles from './index.less';
+
+const { TextArea, Search } = Input;
+const InputGroup = Input.Group;
+
+/**
+ * inputGroup组件
+ * @param value 值 ps:暂时不用
+ * @param onChange 监听事件
+ * @param selectData 选择选项
+ * @param defaultValue 默认选项
+ * @param placeholder 选择框默认文本
+ * @param style  样式
+ * @param componentProps antd自带属性
+ * @param labelName label字段名
+ * @param valueName value字段名
+ * @param isAddAll 是否增加“全部”选项
+ */
+
+class SMInputSelect extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            inputValue: '',
+        };
+    }
+
+    componentDidMount() {
+        const { defaultValue } = this.props;
+        this.setState({
+            inputValue: defaultValue,
+        });
+    }
+
+    // 输入选择回调
+    handleInputChange = e => {
+        this.triggerChange(e);
+        this.setState({
+            inputValue: e,
+        });
+    };
+
+    // 选择回调
+    handleSelectChange = value => {
+        this.triggerChange(value);
+        this.setState({
+            inputValue: value,
+        });
+    };
+
+    // 传值出去
+    triggerChange = changedValue => {
+        const { onChange } = this.props;
+        if (onChange) {
+            onChange(changedValue);
+        }
+    };
+
+
+    // 渲染已有选项
+    renderChildren() {
+        const { selectData, labelName = 'name', valueName = 'value', isAddAll } = this.props;
+        let list = [];
+        list = selectData.map(ele => {
+            return (
+                <Select.Option value={ele[valueName]} key={ele[valueName]}>
+                    {ele[labelName]}
+                </Select.Option>
+            );
+        });
+        if (isAddAll) {
+            list.unshift(
+                <Select.Option value="all" key="all">
+                    全部
+                </Select.Option>
+            );
+        }
+        return list;
+    }
+
+    render() {
+        const { value, defaultValue, style, placeholder, componentProps, disabled } = this.props;
+        const { inputValue } = this.state;
+        return (
+            <div style={style} className={styles.select}>
+                <Select
+                    value={inputValue}
+                    dropdownRender={menu => (
+                        <div>
+                            <div style={{ padding: '4px 8px', cursor: 'pointer' }}>
+                                <Input
+                                    onPressEnter={e => {
+                                        this.handleInputChange(e.target.value);
+                                    }}
+                                />
+                            </div>
+                            <Divider style={{ margin: '4px 0' }} />
+                            {menu}
+                        </div>
+                    )}
+                    defaultValue={defaultValue}
+                    onChange={this.handleSelectChange}
+                    placeholder={placeholder}
+                    disabled={disabled}
+                    {...componentProps}
+                >
+                    {this.renderChildren()}
+                </Select>
+            </div>
+        );
+    }
+}
+
+export default SMInputSelect;

package/src/components/SMInputSelect/index.less

@@ -0,0 +1,6 @@
+.select {
+    display: inline-block;
+    height: 40px;
+    line-height: 40px;
+    width: 155px;
+}

package/src/components/SMLabelSearch/index.jsx

@@ -0,0 +1,107 @@
+import { useState, useEffect } from 'react';
+import { Input, Select } from 'antd';
+
+import {useLanguage} from '@/hooks';
+
+import styles from './index.less';
+
+const { Search } = Input;
+const { Option } = Select;
+
+const SMLabelSearch = props => {
+    const {onSearch, configData, isGlobalSearch, labelSearchValue, resetCount, resetValue} = props;
+
+    const {t} = useLanguage();
+
+    const {
+        optionData = [],
+        placeholder = '请输入搜索内容',
+        allowClear = true,
+        defaultValue = null,
+        defaultContent = null,
+        addonBefore = true,
+        isSearch,
+        style = {},
+    } = configData;
+
+    let defaultSearchId = defaultValue ? defaultValue : optionData[0] && optionData[0].value;
+    const [searchId, setSearchId] = useState(defaultSearchId);
+    const [searchContent, setSearchContent] = useState(defaultContent);
+    const [tip, setTip] = useState(placeholder);
+
+    useEffect(() => {
+        setSearchId(defaultSearchId);
+    }, [defaultValue, resetCount, resetValue]);
+
+    useEffect(() => {
+        setSearchContent(defaultContent);
+    }, [defaultContent, resetCount, resetValue]);
+
+    const onChange = searchId => {
+        const tip = optionData?.find?.(i => i?.value === searchId)?.placeholder;
+        setTip(tip || placeholder);
+        setSearchId(searchId);
+        if (isGlobalSearch) {
+            onSearch && onSearch(searchId, searchContent);
+        }
+    };
+
+    const onSearchContentChange = e => {
+        setSearchContent(e.target.value);
+        if (isGlobalSearch || isSearch) {
+            onSearch?.(searchId || defaultSearchId, e.target.value.trimEnd());
+        }
+    };
+
+    const onLabelSearch = searchText => {
+        onSearch && onSearch(searchId, searchText.trimEnd());
+    };
+
+    const selectBefore
+        = optionData.length === 1 ? (
+            <span>{t(optionData[0].name)}</span>
+        ) : (
+            <Select defaultValue={searchId} value={searchId} onChange={onChange} className={styles['sm-select']}>
+                {optionData.map((option, index) => {
+                    return (
+                        <Option key={option.id || index} value={option.value}>
+                            {t(option.name)}
+                        </Option>
+                    );
+                })}
+            </Select>
+        );
+
+    return (
+        <div className={styles['sm-label-search']}>
+            {!isGlobalSearch && !isSearch
+                ? (
+                    <Search
+                        value={searchContent}
+                        placeholder={t(tip)}
+                        allowClear={allowClear}
+                        addonBefore={addonBefore ? selectBefore : null}
+                        style={{ verticalAlign: 'middle', ...style }}
+                        onSearch={onLabelSearch}
+                        onChange={onSearchContentChange}
+                    />
+                )
+                : (
+                    <div className={styles['golbal-label-search']}>
+                        <Input
+                            value={searchContent}
+                            placeholder={t(placeholder)}
+                            allowClear={allowClear}
+                            addonBefore={addonBefore ? selectBefore : null}
+                            style={{ verticalAlign: 'middle' }}
+                            onSearch={onLabelSearch}
+                            onChange={onSearchContentChange}
+                        />
+                    </div>
+
+                )}
+        </div>
+    );
+};
+
+export default SMLabelSearch;

package/src/components/SMLabelSearch/index.less

@@ -0,0 +1,41 @@
+@import '../common.less';
+
+.sm-label-search{
+    height: 40px;
+    line-height: 36px;
+    display: inline-block;
+    :global {
+        .ant-input-group-addon{
+            background-color: @white-color !important;
+        }
+        .ant-select{
+            width: 128px !important;
+        }
+        .ant-input-search-icon:before{
+            border: none;
+        }
+    }
+}
+.sm-select {
+    :global(.ant-select-selection-item){
+        color: @black-color !important;
+    }
+}
+
+.golbal-label-search {
+    height: 40px;
+    line-height: 36px;
+    display: inline-block;
+    :global {
+        .ant-input-group-addon {
+            background-color: @white-color !important;
+            width: 128px !important;
+        }
+        .ant-select {
+            width: 128px !important;
+        }
+        .ant-input-search-icon:before {
+            border: none;
+        }
+    }
+}