admin2 1.0.0

package/src/pages/pageComponents/historyPage/components/HistoryDetailDrawer/index.jsx

@@ -0,0 +1,716 @@
+/* eslint-disable max-len */
+import {Drawer, Tooltip, Descriptions, Popover, Button, Popconfirm, message} from 'antd';
+import { SMTable, SMVideo} from 'sm-antd';
+import lodash from 'lodash';
+import Player from 'griffith';
+import { Component} from 'react';
+import { connect } from 'umi';
+import moment from 'moment';
+
+import { getAuthFunction } from '@/utils/AuthorityManage';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import SMAudio from '@/components/SMAudio';
+import SMText from '@/components/SMText';
+import SMRiskLevel from '@/components/SMRiskLevel';
+import { formatSecond } from '@/utils/utils';
+import {formatUs} from '@/utils/helpers';
+import SMImage from '@/components/SMImage';
+import { TIMES_TAMP_TYPE } from '@/pages/tw/constants';
+import withIntlComponents from '@/hoc/withIntlComponents';
+import {cancelFeedback} from '@/services/history';
+import {REQUEST_CODE} from '@/contants';
+
+import ImgSliderDetail from '../../TypeTwo/components/ImgSliderDetail';
+
+import styles from './index.less';
+
+const MODEL_TEXT = '该策略暂无解释';
+const CANCEL_LIST = [
+    'POST_TEXT',
+    'POST_TEXT_EN',
+    'POST_TEXT_AR',
+    'POST_IMG',
+    'POST_VIDEO_IMG',
+    'POST_VIDEOSTREAM_IMG',
+    'POST_VIDEOSTREAM_IMG_EN',
+    'POST_VIDEOSTREAM_IMG_AR',
+];
+
+class HistoryDetailDrawer extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            imgColumns: [
+                {
+                    title: '流水号',
+                    key: 'requestId',
+                    type: 'text',
+                }, {
+                    title: '截帧时间',
+                    key: 'time',
+                    type: 'text',
+                }, {
+                    title: 'OCR识别结果',
+                    key: 'text',
+                    type: 'highLight',
+                }, {
+                    title: '识别结果',
+                    key: 'riskLevel',
+                    type: 'riskLevel',
+                }, {
+                    title: '风险类型',
+                    key: 'riskType',
+                    type: 'text',
+                }, {
+                    title: '风险原因',
+                    key: 'description',
+                    type: 'text',
+                }, {
+                    title: '规则标识',
+                    key: 'model',
+                    type: 'text',
+                },
+            ],
+            imgDataSource: [],
+            audioDataSource: [],
+            hasImgList: false,
+            hasAudioList: false,
+            audioLoading: true,
+        };
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps) {
+        const oldDetailData = this.props.detailData;
+        const newDetailData = nextProps.detailData || {};
+        const { imgListData = {}, audioListData = {} } = newDetailData;
+        const {isGlobalSearch} = nextProps;
+        if (!lodash.isEqual(oldDetailData, newDetailData)) {
+            if (imgListData.serviceId) {
+                this.getRiskImgList(imgListData);
+                this.setState({
+                    hasImgList: true,
+                });
+            }
+            if (audioListData.serviceId) {
+                if (!audioListData.dataSource
+            || (audioListData.isNeedFetch && audioListData.dataSource && audioListData.dataSource.length === 0)
+                ) {
+                    this.getRiskAudioList(audioListData);
+                    this.setState({
+                        hasAudioList: true,
+                    });
+                } else {
+                    this.setState({
+                        hasAudioList: true,
+                        audioLoading: false,
+                        audioDataSource: audioListData.dataSource,
+                    });
+                }
+            }
+        }
+    }
+
+    getRiskImgList = async data => {
+        let { searchParams, dispatch, isGlobalSearch } = this.props;
+        searchParams.riskLevels = ['REVIEW', 'REJECT'];
+        searchParams.serviceId = data.serviceId;
+        searchParams.requestId = data.requestId;
+        searchParams.count = 1000;
+        searchParams.offset = 0;
+        let { listData } = await dispatch({
+            type: 'history/fetchHistoryList',
+            payload: searchParams,
+        });
+        let newImgDataSource = [];
+        listData.forEach(item => {
+            item.input = item.input || {};
+            item.output = item.output || {};
+            newImgDataSource.push({
+                imgUrl: item.input.choseImgUrl,
+                requestId: item.requestId,
+                time: formatSecond(item.input.time),
+                description: item.output.description ? `${item.output.description}` : '-',
+                riskLevel: `${item.output.riskLevelDisplayName}|${item.output.riskLevel}`,
+                riskType: item.output.riskTypeDisplayName,
+                model: item.output.model,
+                text: item.output.text || '-',
+                matchedItem: item.output.matchedItem || '',
+                key: item.requestId,
+            });
+        });
+        this.setState({
+            imgDataSource: newImgDataSource,
+        });
+    };
+
+    getRiskAudioList = async data => {
+        const { dispatch, searchParams, isGlobalSearch } = this.props;
+        searchParams.riskLevels = ['REVIEW', 'REJECT'];
+        searchParams.serviceId = data.serviceId;
+        searchParams.requestId = data.requestId;
+        searchParams.count = 1000;
+        searchParams.offset = 0;
+        let { listData } = await dispatch({
+            type: 'history/fetchHistoryList',
+            payload: searchParams,
+        });
+        let newAudioDataSource = [];
+        listData.forEach(item => {
+            newAudioDataSource.push({
+                requestId: item.requestId,
+                audioDurationDisplayName: `${item.input.audio_starttime}-${item.input.audio_endtime}`,
+                audio: item.input.audioUrl || item.input.wavformAudioUrl,
+                audioText: item.output.audioText || '-',
+                riskLevel: `${item.output.riskLevelDisplayName}|${item.output.riskLevel}`,
+                description: item.output.description || '-',
+                matchedItem: item.output.matchedItem || '',
+                model: item.output.model || item.output.audioModel || '-',
+            });
+        });
+        this.setState({
+            audioLoading: false,
+            audioDataSource: newAudioDataSource,
+        });
+    };
+
+    textRender = (text, action) => {
+        const {onActionClick, modelText} = this.props;
+        if (action && action.renderType === TIMES_TAMP_TYPE.POPOVER) {
+            return (
+                <Popover
+                    content={modelText || MODEL_TEXT}
+                    trigger="click"
+                    className={styles['item-action']}
+                    onClick={() => {onActionClick(action.type);}}
+                >
+                    {text}
+                </Popover>
+            );
+        }
+
+        return (
+            <Tooltip title={text} placement="left">
+                <span className={styles.text}>
+                    {text}
+                </span>
+            </Tooltip>
+        );
+    };
+
+    audioRender = (text, record, index) => {
+        return (
+            <SMAudio
+                audioUrl={text}
+                audioId={record.requestId}
+                showSpeedFlag={false}
+                showDownloadFlag={false}
+                showSilenceFlag={false}
+                showProgressFlag // zhangzhe 2022-10-17 列表上要显示进度条
+                showSimpleTimeFlag={false}
+            />
+        );
+    };
+
+    riskLevelRender = (text = ' ', record, index) => {
+        const {t} = this.props;
+        const riskLevelStr = text.split('|')[0] || '通过';
+        const riskLevel = text.split('|')[1] || 'PASS';
+        return <SMRiskLevel riskLevel={riskLevel} riskLevelStr={t(riskLevelStr)} />;
+    };
+
+    highLightRender = (text, record, index) => {
+        const matchedItem = record.matchedItem || '';
+        const toolTipTitle = <span><SMText content={text} keywords={matchedItem} /></span>;
+        return (
+            <Tooltip title={toolTipTitle} placement="left">
+                <span>
+                    <SMText content={text} keywords={matchedItem} ellipsis />
+                </span>
+            </Tooltip>
+        );
+    };
+
+    textItemRender = data => {
+        let { name, value, action = [], key } = data;
+        const {onActionClick, t} = this.props;
+        if (!value && value !== 0) { // 没有的不展示
+            return null;
+        }
+        if (lodash.isBoolean(value)) {
+            value = `${value}`;
+        }
+
+        if (value instanceof Array) {
+            value = value.join(',');
+        } else if (value instanceof Object) {
+            value = JSON.stringify(value);
+        }
+        return (
+            <div className={styles['detail-item']} key={key}>
+                <span className={styles['item-name']}>{t(name)}：</span>
+                <span className={styles['item-value']}>{value}</span>
+                {action.map((item, index) => {
+                    return item.isShow && getAuthFunction(item.authAction) ? (
+                        <span
+                            className={styles['item-action']}
+                            key={item.id || index}
+                            onClick={() => {onActionClick(item.action, key, value, item.otherData);}}
+                        >
+                            {t(item.name)}
+                        </span>
+                    ) : null;
+                })}
+            </div>
+        );
+    };
+
+    riskLevelItemRender = data => {
+        const {t} = this.props;
+        const { name, value } = data;
+        const riskLevelStr = value.split('|')[0];
+        const riskLevel = value.split('|')[1];
+
+        return (
+            <div className={styles['detail-item']} key={name}>
+                <span className={styles['item-name']}>{t(name)}：</span>
+                <SMRiskLevel riskLevel={riskLevel} riskLevelStr={riskLevelStr} />
+            </div>
+        );
+    };
+
+    hightLightItemRender = data => {
+        const { name, value, action = [], key, matchedItem = '' } = data;
+        const { onActionClick, t} = this.props;
+        if (!value) { // 没有的不展示
+            return null;
+        }
+        return (
+            <div className={styles['detail-item']} key={name}>
+                <span className={styles['item-name']}>{t(name)}：</span>
+                <span className={styles['item-value']}><SMText content={value} keywords={matchedItem} /></span>
+                {action.map((item, index) => {
+                    return item.isShow ? (
+                        <span
+                            className={styles['item-action']}
+                            key={item.id || index}
+                            onClick={() => {onActionClick(item.action, key, value, item.otherData);}}
+                        >
+                            {item.name}
+                        </span>
+                    ) : null;
+                })}
+            </div>
+        );
+    };
+
+    // 其他风险类型列表
+    otherRiskListItemRender = data => {
+        const {t} = this.props;
+        const TextColumns = data.columns.map(item => {
+            switch (item.type) {
+                case 'text':
+                    item.render = text => this.textRender(text, item.action);
+                    break;
+                case 'riskLevel':
+                    item.render = this.riskLevelRender;
+                    break;
+                default:
+                    item.render = this.textRender;
+                    break;
+            }
+            return item;
+        });
+        const { isShow = true } = data;
+
+        return (
+            isShow
+                ? (
+                    <div className={styles['main-content']} key={data.name}>
+                        <span className={styles['second-title']}>{t(data.name)}</span>
+                        <div className={styles['audio-table']}>
+                            <SMTable
+                                columns={formatUs(TextColumns, ['title'], t)}
+                                dataSource={data.dataSource}
+                                isHidePagination
+                                loading={false}
+                                wrapperStyle={{
+                                    padding: 0,
+                                }}
+                            />
+                        </div>
+                    </div>
+                )
+                : null
+        );
+    };
+
+    // 详情描述列表展示
+    descriptionItemRender = data => {
+
+        return (
+            <div className={styles['main-content']} key={data.name}>
+                <span className={styles['second-title']}>{data.name}</span>
+                <Descriptions column={1} bordered>
+                    {data.descriptionData.map((item, index) => {
+                        return (
+                            <Descriptions.Item
+                                label={item.label}
+                                key={item.id || index}
+                            >
+                                {item.value}
+                            </Descriptions.Item>
+                        );
+                    })}
+                </Descriptions>
+            </div>
+        );
+    };
+
+    // 图片展示
+    imageItemRender = data => {
+        const fallbackSrc = this.props.activityData?.imgUrl;
+        return <SMImage width={'100%'} key={data.name} height={200} url={data.value} fallbackSrc={fallbackSrc} />;
+    };
+
+    imageRgbaItemRender = data => {
+        return data.value ? (
+            <div className={styles['detail-item']}>
+                <span className={styles['item-name']}>四通道图像：</span>
+                <div className={styles['item-both']}>
+                    <span onClick={() => this.handleImgClass('black')}>
+                        <SMImage
+                            width={'80%'}
+                            key={data.name}
+                            height={200}
+                            url={data.value}
+                            popStyles={{backgroundColor: 'black', textAlign: 'center'}}
+                            contentStyles={{backgroundColor: 'black'}}
+                        />
+                    </span>
+                    <span onClick={() => this.handleImgClass('white')}>
+                        <SMImage
+                            width={'80%'}
+                            key={data.name}
+                            height={200}
+                            url={data.value}
+                            popStyles={{backgroundColor: 'white', textAlign: 'center'}}
+                            contentStyles={{backgroundColor: 'white'}}
+                        />
+                    </span>
+
+                </div>
+            </div>
+        ) : undefined;
+    };
+
+    handleImgClass = str => {
+        setTimeout(() => {
+            if (document.querySelector('.ant-image-preview-img').style.backgroundColor) {
+                document.querySelectorAll('.ant-image-preview-img')[1].style.backgroundColor = str;
+            } else {
+                document.querySelector('.ant-image-preview-img').style.backgroundColor = str;
+            }
+        });
+    };
+
+    videoItemRender = data => {
+        const sources = {
+            hd: {
+                play_url: data.value,
+            },
+        };
+
+        return (
+            <div style={{height: '280px', width: '100%'}}>
+                <SMVideo id={data.value} width="508" height="280" src={data.value} />
+            </div>
+        );
+    };
+
+    getAudioColumns = () => {
+        const audioColumns = [
+            {
+                title: '流水号',
+                key: 'requestId',
+                dataIndex: 'requestId',
+                width: '15%',
+                ellipsis: true,
+                render: this.textRender,
+            }, {
+                title: '起始位置',
+                key: 'audioDurationDisplayName',
+                dataIndex: 'audioDurationDisplayName',
+                width: '15%',
+                ellipsis: true,
+                render: this.textRender,
+            }, {
+                title: '音频内容',
+                key: 'audioText',
+                dataIndex: 'audioText',
+                width: '10%',
+                ellipsis: true,
+                render: this.highLightRender,
+            }, {
+                title: '识别结果',
+                key: 'riskLevel',
+                dataIndex: 'riskLevel',
+                width: '20%',
+                ellipsis: true,
+                render: this.riskLevelRender,
+            }, {
+                title: '风险原因',
+                key: 'description',
+                dataIndex: 'description',
+                width: '10%',
+                ellipsis: true,
+                render: this.textRender,
+            }, {
+                title: '规则标识',
+                key: 'model',
+                dataIndex: 'model',
+                width: '10%',
+                ellipsis: true,
+                render: this.textRender,
+            }, {
+                title: '操作',
+                key: 'audio',
+                dataIndex: 'audio',
+                width: '20%',
+                ellipsis: true,
+                render: this.audioRender,
+            },
+        ];
+        return audioColumns;
+    };
+
+    imgListRender = () => {
+        const { imgColumns, imgDataSource } = this.state;
+        const { detailData } = this.props;
+        const { imgListData = {} } = detailData;
+        return (
+            <div className={styles['main-content']} key={imgListData.name}>
+                <span className={styles.title}>{imgListData.name}</span>
+                {<ImgSliderDetail sliderWidth={512} dataSource={imgDataSource} colunms={imgColumns} />}
+            </div>
+        );
+    };
+
+    audioListRender = () => {
+        const { audioDataSource, audioLoading } = this.state;
+        const { detailData } = this.props;
+        const { audioListData = {} } = detailData;
+        const audioColumns = this.getAudioColumns();
+        return (
+            <div className={styles['main-content']} key={audioListData.name}>
+                <span className={styles.title}>{audioListData.name}</span>
+                <div className={styles['audio-table']}>
+                    <SMTable
+                        columns={audioColumns}
+                        dataSource={audioDataSource}
+                        loading={audioLoading}
+                        customLoadingUrl={this.props.customLoadingIcon}
+                        isHidePagination
+                        wrapperStyle={{
+                            padding: 0,
+                        }}
+                    />
+                </div>
+            </div>
+        );
+    };
+
+
+    timestampItemRender = (data, timeType) => {
+        let { name, value } = data;
+        const isTwo = timeType === TIMES_TAMP_TYPE.timestampTwo;
+        if (!value && value !== 0) {
+            return null;
+        }
+
+        if (isTwo) {
+            if (Number(value) === 0 || Number(value) === 1) {
+                value = '-';
+            } else {
+                const newValue = (value + '').length > 10 ? value / 1000 : value;
+                value = moment(moment.unix(newValue)).format(TIMES_TAMP_TYPE.formatTime);
+            }
+            if (value === TIMES_TAMP_TYPE.invalidDate) {
+                value = '-';
+            }
+        }
+
+        return (
+            <div className={styles['time-detail']} key={name}>
+                <span className={styles['time-name']}>
+                    {name}
+                    <div className={styles['time-tooltip']}>
+                        <Tooltip title={isTwo ? TIMES_TAMP_TYPE.secondTip : TIMES_TAMP_TYPE.oneTip}>
+                            <QuestionCircleOutlined />
+                        </Tooltip>
+                    </div>
+                    ：
+                </span>
+                <span className={styles['time-value']}>{value}</span>
+            </div>
+        );
+    };
+
+    popoverRender = item => {
+        const {onActionClick, modelText } = this.props;
+        const {action, name, value, key} = item;
+
+        return (
+            <div className={styles['detail-item']} key={name}>
+                <span className={styles['item-name']}>{name}：</span>
+                <span className={styles['item-value']}>{value}</span>
+                {action.map((item, index) => {
+                    return (
+                        <Popover
+                            content={modelText || MODEL_TEXT}
+                            trigger="click"
+                            className={styles['item-action']}
+                            key={item.id || index}
+                            onClick={() => {onActionClick(item.action, key, value, item.otherData);}}
+                        >
+                            {item.name}
+                        </Popover>
+                    );
+                })}
+            </div>
+        );
+    };
+
+    handleCancelError = async () => {
+        const {activityData = {}, onClose, doSearch} = this.props;
+        const params = {
+            organization: activityData.organization,
+            requestId: activityData.requestId,
+            serviceId: activityData.serviceId,
+        };
+        const result  = await cancelFeedback(params);
+        if (result.code === REQUEST_CODE.SUCCESS) {
+            onClose && onClose();
+            doSearch && doSearch();
+            message.success(result.message);
+        }
+        else {
+            message.error(result.message);
+        }
+    };
+
+    cancelBtnRender = t => (
+        <Popconfirm
+            title={t('取消纠错后该条记录将被删除且不再展示，请确认是否继续？')}
+            okText={t('是')}
+            cancelText={t('否')}
+            onConfirm={this.handleCancelError}
+        >
+            <Button>{t('取消纠错')}</Button>
+        </Popconfirm>
+    );
+
+    multiContentsRender = data => {
+        const {name, value} = data;
+
+        return (
+            <div className={styles['detail-item']}>
+                <span className={styles['item-name']}>{name}：</span>
+                <span className={styles['item-value']}>{
+                    lodash.map(value, item => {
+                        if (item?.image) {
+                            return <SMImage width={'100%'} key={item?.image} height={100} url={item?.image} />;
+                        }
+                        else if (item?.text) {
+                            return <span>{item?.text}</span>;
+                        }
+                    })
+                }
+                </span>
+            </div>
+        );
+    };
+
+    detailItemRender = data => {
+        let detailItems = [];
+        data.forEach((item, index) => {
+            const { type } = item;
+            let detailItem = null;
+            switch (type) {
+                case 'text':
+                    detailItem = this.textItemRender(item);
+                    break;
+                case 'riskLevel':
+                    detailItem = this.riskLevelItemRender(item);
+                    break;
+                case 'highLight':
+                    detailItem = this.hightLightItemRender(item);
+                    break;
+                case 'otherRiskList':
+                    detailItem = this.otherRiskListItemRender(item);
+                    break;
+                case 'video':
+                    detailItem = this.videoItemRender(item);
+                    break;
+                case 'image':
+                    detailItem = this.imageItemRender(item);
+                    break;
+                case 'description':
+                    detailItem = this.descriptionItemRender(item);
+                    break;
+                case 'imageRgba':
+                    detailItem = this.imageRgbaItemRender(item);
+                    break;
+                case TIMES_TAMP_TYPE.timestampOne:
+                    detailItem = this.timestampItemRender(item, TIMES_TAMP_TYPE.timestampOne);
+                    break;
+                case TIMES_TAMP_TYPE.timestampTwo:
+                    detailItem = this.timestampItemRender(item, TIMES_TAMP_TYPE.timestampTwo);
+                    break;
+                case TIMES_TAMP_TYPE.POPOVER:
+                    detailItem = this.popoverRender(item);
+                    break;
+                case 'multiContents':
+                    detailItem = this.multiContentsRender(item);
+                    break;
+            }
+            if (detailItem) {
+                detailItems.push(detailItem);
+            }
+
+        });
+
+        return detailItems;
+    };
+
+    render() {
+        const {detailData = {}, onActionClick, visible, onClose, t, activityData = {}} = this.props;
+        const { data = [] } = detailData;
+        const { hasImgList, hasAudioList } = this.state;
+        return (
+            <Drawer
+                visible={visible}
+                closable
+                destroyOnClose
+                width={800}
+                onClose={() => {
+                    onClose();
+                }}
+            >
+                <span className={styles.tips}>{t('可以使用方向键快速上一条（←）、下一条（→）切换')}</span>
+                {data.map((item, index) => {
+                    return (
+                        <div className={styles['main-content']} key={item.id || index}>
+                            <span className={styles.title}>{t(item.title)}</span>
+                            {this.detailItemRender(item.data)}
+                        </div>
+                    );
+                })}
+                {hasImgList ? this.imgListRender() : null}
+                {hasAudioList ? this.audioListRender() : null}
+                {/* {CANCEL_LIST.includes(activityData.serviceId) ? this.cancelBtnRender(t) : null} */}
+
+            </Drawer>
+        );
+    }
+}
+export default connect()(withIntlComponents(HistoryDetailDrawer));