/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-24 09:22:19
|
* @LastEditTime: 2022-11-29 18:09:21
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 司法确认动态
|
*/
|
import React, { useState, useRef, useEffect } from 'react';
|
import { useVirtual } from 'react-virtual';
|
import { Space } from 'antd';
|
import { mediationRoom } from '../../../assets/images/icon';
|
import mediateDynamicStatus from '../../../status/mediateDynamicStatus';
|
import * as $$ from '../../../utils/utility';
|
import timer from '../../../utils/timer';
|
|
// 语音转写文字
|
function getContentApi(submitData) {
|
$$.ax.ax.defaults.headers.common['Authorization'] =
|
'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIxMDAwMDAwMDAxIiwidGltZSI6Ik1vbiBNYXkgMjMgMDk6NDY6MjggQ1NUIDIwMjIifQ.W0dCrVnsNEV0Yws9ccvUIG_lAeOxqG6BF52qBTD_fn8';
|
return $$.ax.ax.post('https://voipconference.xfyun.cn/api/v1/asr/getContent?appKey=1000000001&userId=tjy', submitData).then((response) => {
|
return response.data;
|
});
|
}
|
|
// 虚拟滚动组件
|
function RowVirtualizerDynamic({ rows, recordRef }) {
|
const rowVirtualizer = useVirtual({
|
size: rows.length,
|
parentRef: recordRef,
|
});
|
|
return (
|
<div className="mediationWindow-dynamic-record" ref={recordRef}>
|
{rows.length === 0 && $$.MyEmpty()}
|
<div style={{ height: rowVirtualizer.totalSize, width: '100%', position: 'relative' }}>
|
{rowVirtualizer.virtualItems.map((virtualRow) => {
|
let type = rows[virtualRow.index].userId;
|
return (
|
<div
|
key={virtualRow.index}
|
ref={virtualRow.measureRef}
|
style={{
|
position: 'absolute',
|
top: 0,
|
left: 0,
|
width: '100%',
|
transform: `translateY(${virtualRow.start}px)`,
|
}}
|
>
|
<div style={{ minHeight: 60, paddingBottom: 8 }}>
|
<div
|
className={`mediationWindow-dynamic-record-line animated faster ${type === 'tjy' ? 'fadeInRight' : 'fadeInLeft'}`}
|
style={{ flexDirection: type === 'tjy' && 'row-reverse' }}
|
>
|
<div
|
className={`mediationWindow-dynamic-record-name mediationWindow-dynamic-record-${
|
type === 'bgdsr' ? 'bei' : type === 'ygdsr' ? 'shen' : 'tiao'
|
}`}
|
>
|
{type === 'bgdsr' ? '被' : type === 'ygdsr' ? '申' : '调'}
|
</div>
|
<div className={`mediationWindow-dynamic-record-bubble mediationWindow-dynamic-record-bubble-${type === 'tjy' ? 'right' : 'left'}`}>
|
{rows[virtualRow.index].txt}
|
</div>
|
</div>
|
</div>
|
</div>
|
);
|
})}
|
</div>
|
</div>
|
);
|
}
|
|
const MediateDynamic = () => {
|
const recordRef = useRef();
|
|
// 气泡弹出
|
const [voiceBubble, setVoiceBubble] = useState(false);
|
|
// 语音记录
|
const [callRecord, setCallRecord] = useState([]);
|
|
// tab当前选择
|
const [tabActive, setTabActive] = useState(1);
|
|
// 语音记录实时添加
|
function addCallRecord(speakData) {
|
let dom = recordRef?.current;
|
if (dom) {
|
let scrollClientHeight = dom.scrollHeight - dom.clientHeight;
|
callRecord.push(speakData);
|
setCallRecord([...callRecord]);
|
// 判断滚动条位置从下往上处于三分之一的区域时添加新的记录置底
|
if (dom.scrollTop > scrollClientHeight - scrollClientHeight / 3) {
|
recordRef.current.scrollTop = recordRef.current.scrollHeight + 100;
|
return;
|
}
|
if (callRecord.length < 30 && dom.scrollTop < 30) {
|
recordRef.current.scrollTop = recordRef.current.scrollHeight;
|
}
|
}
|
}
|
|
// 获取语音历史记录
|
async function getContent() {
|
let roomNum = $$.myTimeFormat(new Date(), 'YYYYMMDD');
|
const { code, data } = await getContentApi({ roomNum, appid: '1000000001' });
|
if (code === 200) {
|
let speakArr = [],
|
speakObj = {};
|
// 排序获取最新的说话的人是谁
|
data.asrList.forEach((x) => {
|
speakArr.push({
|
userId: x.userId,
|
createTime: x.historyTxts[x.historyTxts.length - 1].createTime,
|
txt: x.historyTxts[x.historyTxts.length - 1].txt,
|
});
|
speakObj[x.userId] = x.historyTxts;
|
});
|
speakArr.sort((a, b) => a.createTime - b.createTime);
|
let positionItem = speakArr[speakArr.length - 1];
|
// 通过保存的时间戳获取下标
|
let index = 0;
|
if (mediateDynamicStatus.legObj[positionItem.userId]) {
|
loop: for (let i = 0; i < speakObj[positionItem.userId].length; i++) {
|
if (speakObj[positionItem.userId][i].txt.indexOf(mediateDynamicStatus.legObj[positionItem.userId]) !== -1) {
|
index = i;
|
break loop;
|
}
|
}
|
}
|
// 将最新的说话的人的过往语句拼接起来
|
let speakArrOne = [];
|
speakObj[positionItem.userId].splice(index).forEach((x) => speakArrOne.push(x.txt));
|
if (speakArrOne.length !== 0) {
|
// 保存当前截取的时间戳
|
if (positionItem.txt !== mediateDynamicStatus.legObj[positionItem.userId]) {
|
mediateDynamicStatus.setTime(positionItem.userId, positionItem.txt);
|
addCallRecord({ userId: positionItem.userId, txt: speakArrOne });
|
if (voiceBubble) {
|
setVoiceBubble(false);
|
}
|
setTimeout(() => {
|
setVoiceBubble(true);
|
}, 1000);
|
}
|
}
|
}
|
}
|
|
useEffect(() => {
|
setTabActive(1);
|
setVoiceBubble(false);
|
timer.setInterval('loop', () => getContent(), 5000);
|
return () => {
|
mediateDynamicStatus.clear();
|
timer.clearInterval('loop');
|
};
|
}, []);
|
|
const lastSpeak = callRecord.length !== 0 ? callRecord[callRecord.length - 1] : {};
|
|
return (
|
<>
|
<div className="mediationWindow-dynamic animated faster flipInY">
|
{tabActive === 1 ? (
|
<div className="mediationWindow-dynamic-realTime">
|
{voiceBubble ? (
|
<div className="mediationWindow-dynamic-realTime-bubble animated faster fadeInUp">
|
<div
|
className={`mediationWindow-dynamic-realTime-box mediationWindow-dynamic-realTime-${
|
lastSpeak.userId === 'ygdsr' ? 'boxLeft' : lastSpeak.userId === 'bgdsr' ? 'boxRight' : 'boxCenter'
|
}`}
|
>
|
<div className="mediationWindow-dynamic-realTime-content">{lastSpeak.txt}</div>
|
</div>
|
</div>
|
) : (
|
<div className="mediationWindow-dynamic-realTime-bubble" />
|
)}
|
<img src={mediationRoom} className="mediationWindow-dynamic-realTime-img" alt="" />
|
</div>
|
) : (
|
<RowVirtualizerDynamic rows={callRecord} recordRef={recordRef} />
|
)}
|
</div>
|
<Space className="mediationWindow-dynamic-tabs" direction="vertical">
|
{[
|
['实', '时'],
|
['历', '史'],
|
].map((x, t) => (
|
<div
|
onClick={() => setTabActive(t + 1)}
|
className={`mediationWindow-dynamic-tabs-item ${t + 1 === tabActive ? 'mediationWindow-dynamic-tabs-itemActive' : ''}`}
|
key={t}
|
>
|
<div>{x[0]}</div>
|
<div>{x[1]}</div>
|
</div>
|
))}
|
</Space>
|
</>
|
);
|
};
|
|
export default MediateDynamic;
|
