/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-04-08 09:12:50
|
* @LastEditTime: 2023-12-20 16:04:43
|
* @LastEditors: dminyi 1301963064@qq.com
|
* @Version: 1.0.0
|
* @Description: 调解导航
|
*/
|
import '../index.less';
|
import React, { useState, useEffect, useRef } from 'react';
|
import { useSearchParams } from 'react-router-dom';
|
import { Checkbox, Popover, Space, Typography } from 'antd';
|
import { useVirtual } from 'react-virtual';
|
import { FilterOutlined } from '@ant-design/icons';
|
import { nav1, nav2, nav3, nav4, nav5, toppingUp, toppingUp2, toppingDown, fullScreen, navBg } from '../../../assets/images/icon';
|
import * as $$ from '../../../utils/utility';
|
import timer from '../../../utils/timer';
|
function getDataApi(submitData) {
|
return $$.ax.request({ url: `guide/windowCaseGuideByDb?caseId=${submitData}`, type: 'get', service: 'mediate' });
|
}
|
const { Paragraph } = Typography;
|
|
// 虚拟滚动组件
|
function ListDom({ rows, recordRef, fixedList, activeData, onClickItem }) {
|
const rowVirtualizer = useVirtual({
|
size: rows.length,
|
parentRef: recordRef,
|
});
|
|
return (
|
<div className="mediationWindow-nav-left-list" ref={recordRef}>
|
<div style={{ height: rowVirtualizer.totalSize, width: '100%', position: 'relative' }}>
|
{rowVirtualizer.virtualItems.map((virtualRow) => {
|
let id = rows[virtualRow.index].id;
|
let guideType = rows[virtualRow.index].guideType;
|
let fixedIndex = rows[virtualRow.index].fixedIndex;
|
return (
|
<div
|
key={virtualRow.index}
|
ref={virtualRow.measureRef}
|
style={{
|
position: 'absolute',
|
top: 0,
|
left: 0,
|
width: '100%',
|
transform: `translateY(${virtualRow.start}px)`,
|
}}
|
>
|
<div
|
className={`mediationWindow-nav-left-list-item ${fixedList.ids.includes(id) && fixedIndex !== undefined ? 'mediationWindow-nav-left-list-itemTop' : ''
|
} ${activeData.id === id && !fixedList.ids.includes(id) ? 'mediationWindow-nav-left-list-itemActive' : ''}`}
|
onClick={() => onClickItem(rows[virtualRow.index], virtualRow.index)}
|
>
|
{fixedList.ids.includes(id) && fixedIndex !== undefined && (
|
<img className="mediationWindow-nav-left-list-topUpIcon" src={toppingUp} alt="" />
|
)}
|
<Space>
|
{/* guideType: 1-类案推荐-itemIcon1 2-法律法规 3-要素提取 5-调解策略 6-争议焦点 （颜色对应如）
|
nav1-法条推荐 nav2-类案推荐 nav3-要素提取 nav4-争议焦点 nav5-调解策略
|
*/}
|
<div
|
className={`mediationWindow-nav-left-list-itemIcon mediationWindow-nav-left-list-${guideType === '1' ? 'itemIcon1' : guideType === '2' ? 'itemIcon2' : guideType === '3' ? 'itemIcon3and5and6' : guideType === '5' ? 'itemIcon3and5and6' : guideType === '6' ? 'itemIcon3and5and6' : 'itemIcon3and5and6'}`}
|
>
|
<img src={guideType === '1' ? nav2 : guideType === '2' ? nav1 : guideType === '3' ? nav3 :
|
guideType === '4' ? nav4 : guideType === '5' ? nav5 : guideType === '6' ? nav4 : nav4
|
} alt="" />
|
</div>
|
<h5>{rows[virtualRow.index].guideTypeName}</h5>
|
<div className="mediationWindow-nav-left-list-itemTime">
|
{$$.myTimeFormat(rows[virtualRow.index].guideTime || new Date(), 'HH:mm')}
|
</div>
|
</Space>
|
<Paragraph ellipsis={true} style={{ marginTop: '4px', marginBottom: 0 }}>
|
{rows[virtualRow.index].guideText || '-'}
|
</Paragraph>
|
</div>
|
</div>
|
);
|
})}
|
</div>
|
</div>
|
);
|
}
|
|
const MediationNav = () => {
|
const [searchParams] = useSearchParams();
|
|
const recordRef = useRef();
|
|
const caseId = searchParams.get('caseId');
|
|
// 数据
|
const [data, setData] = useState({ data: [], tabs: [], list: [] });
|
|
// 置顶数据
|
const [fixedList, setFixedList] = useState({ list: [], ids: [] });
|
|
// 当前选择的数据
|
const [activeData, setActiveData] = useState({});
|
|
// tabs选择项
|
const [tabActive, setTabActive] = useState([]);
|
|
// 导航数量动画控制
|
const [guideNumAnimated, setGuideNumAnimated] = useState(null);
|
|
// 是否全屏
|
const [isFullScreen, setIsFullScreen] = useState(false);
|
|
// 数据筛选
|
function handleScreen(value) {
|
let list = [];
|
value.forEach((x) => (list = list.concat(data.data[x - 1]?.guideInfoList || [])));
|
list.sort((a, b) => ($$.timeFormat(a.guideTime) < $$.timeFormat(b.guideTime) ? 1 : -1));
|
setData({ ...data, list });
|
setTabActive(value);
|
global.tabActive = value;
|
}
|
|
// 点击案例
|
function handleClickItem(item, index) {
|
global.activeDataId = item?.id;
|
setActiveData({ ...item, index: index - fixedList.ids.length });
|
}
|
|
// 置顶 or 取消置顶
|
function handleTopping() {
|
if (fixedList.ids.includes(activeData.id)) {
|
let index = fixedList.ids.indexOf(activeData.id);
|
data.list = [activeData, ...data.list];
|
fixedList.list.splice(index, 1);
|
fixedList.ids.splice(index, 1);
|
setData({ ...data });
|
setFixedList({ ...fixedList });
|
} else {
|
fixedList.list.push({ ...activeData, fixedIndex: fixedList.list.length });
|
fixedList.ids.push(activeData.id);
|
data.list.splice(activeData.index, 1);
|
setData({ ...data });
|
setFixedList({ ...fixedList });
|
}
|
}
|
|
// 获取数据
|
async function getData() {
|
const res = await getDataApi(caseId);
|
console.log(res);
|
if (res.type) {
|
let obj = { data: [], tabs: [], list: [] },
|
tabActives = [];
|
res.data.forEach((x, t) => {
|
obj.tabs.push({ value: t + 1, label: x.guideName });
|
obj.list = obj.list.concat(x.guideInfoList || []);
|
tabActives.push(t + 1);
|
});
|
obj.data = res.data;
|
if (global.tabActive?.length > 0) {
|
tabActives = global.tabActive;
|
obj.list = [];
|
tabActives.forEach((x) => (obj.list = obj.list.concat(obj.data[x - 1]?.guideInfoList || [])));
|
}
|
obj.list.sort((a, b) => ($$.timeFormat(a.guideTime) < $$.timeFormat(b.guideTime) ? 1 : -1));
|
if (obj.list.length !== 0 && !global.activeDataId) {
|
global.activeDataId = obj.list[0]?.id;
|
setActiveData({ ...obj.list[0], index: 0 });
|
}
|
setData(obj);
|
setTabActive(tabActives);
|
setAnimated();
|
}
|
}
|
|
useEffect(() => {
|
getData();
|
// timer.setInterval(
|
// 'getAiData',
|
// () => {
|
// if (window.location.hash.indexOf('mediationWindow') !== -1) getData();
|
// },
|
// 20000
|
// );
|
// return () => {
|
// timer.clearInterval('getAiData');
|
// global.tabActive = void 0;
|
// global.activeDataId = void 0;
|
// };
|
}, [caseId]);
|
|
async function setAnimated() {
|
setGuideNumAnimated(false);
|
await $$.sleep(300);
|
setGuideNumAnimated(true);
|
}
|
|
return (
|
<div className={`mediationWindow-card ${isFullScreen ? 'mediationWindow-fullScreenNav' : 'mediationWindow-nav'}`}>
|
{data.data.length === 0 ? (
|
<div className="mediationWindow-card">
|
<h5>调解导航</h5>
|
<div className="mediationWindow-nav-empty">{$$.MyEmpty({ description: '暂无相关内容推荐' })}</div>
|
</div>
|
) : (
|
<>
|
<div className="mediationWindow-nav-left">
|
<div className="mediationWindow-nav-left-title">
|
<Space size={4}>
|
<h5>调解导航</h5>
|
{/* <Popover
|
placement="rightTop"
|
content={
|
<Checkbox.Group value={tabActive} onChange={handleScreen}>
|
<Space direction="vertical">
|
{data.tabs.map((x, t) => (
|
<Checkbox value={x.value} key={x.value}>
|
{x.label}
|
</Checkbox>
|
))}
|
</Space>
|
</Checkbox.Group>
|
}
|
>
|
<FilterOutlined />
|
</Popover> */}
|
</Space>
|
<div className="mediationWindow-nav-left-total">
|
<div className={`animated ${guideNumAnimated === null ? '' : guideNumAnimated ? 'fadeInUpBig' : 'fadeOutUpBig'}`}>
|
{data.list.length + fixedList.ids.length}
|
</div>
|
</div>
|
</div>
|
<div style={{ flex: 1, overflow: 'hidden' }}>
|
<ListDom
|
rows={[...fixedList.list, ...data.list]}
|
fixedList={fixedList}
|
recordRef={recordRef}
|
activeData={activeData}
|
onClickItem={handleClickItem}
|
/>
|
</div>
|
</div>
|
<div className="mediationWindow-nav-right">
|
<div className="mediationWindow-nav-right-header">
|
<h4>{activeData.guideTitle}</h4>
|
<div className="mediationWindow-nav-right-subtitle">
|
<div>
|
<span>{activeData.guideSource || '-'}</span>
|
<span className="public-rightBorder">{$$.dateFormat(activeData.implTime)}</span>
|
</div>
|
<Space>
|
<Space size={4}>
|
<img src={fullScreen} alt="" />
|
<span className="public-a" onClick={() => setIsFullScreen(!isFullScreen)}>
|
{isFullScreen ? '取消全屏' : '全屏'}
|
</span>
|
</Space>
|
<Space size={4}>
|
<img src={fixedList.ids.includes(activeData.id) ? toppingDown : toppingUp2} alt="" />
|
<span className="public-a" onClick={handleTopping}>
|
{fixedList.ids.includes(activeData.id) ? '取消置顶' : '置顶'}
|
</span>
|
</Space>
|
</Space>
|
</div>
|
</div>
|
<img className="mediationWindow-nav-right-content-bg" src={navBg} alt="" />
|
<div className="mediationWindow-nav-right-content">
|
<pre style={{ position: 'relative' }}>{activeData.guideText}</pre>
|
</div>
|
</div>
|
</>
|
)}
|
</div>
|
);
|
};
|
|
MediationNav.propTypes = {};
|
|
export default MediationNav;
|
