ai页面

dminyi

2024-09-07 eaccc230d88483286e67f2ad3499532d0af13440

ai页面

 gz-customerSystem/src/views/filesCheck/newFileCheck.jsx

@@ -2,7 +2,7 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-03-11 11:03:44
 * @LastEditTime: 2024-09-07 11:55:54
 * @LastEditTime: 2024-09-07 15:46:00
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description: 大厅来访材料附件查看
@@ -19,377 +19,382 @@
    POWERPOINT("22_00017-9", "PowerPoint"),
    UNKNOWN("22_00017-99", "其它文件");
 */
    import React, { useState, useEffect, useRef } from 'react';
    import { Button, Menu, Tooltip, Row, Col, Form, Space } from 'antd';
    import { Select, DatePicker } from '@arco-design/web-react';
    import { useSearchParams } from 'react-router-dom';
    import {
        CaretRightOutlined,
        CaretDownOutlined,
        FileOutlined,
        FileImageOutlined,
        FilePdfOutlined,
        FileWordOutlined,
        FileExcelOutlined,
        RotateRightOutlined,
        RotateLeftOutlined,
        DownloadOutlined,
        LeftOutlined,
        RightOutlined,
    } from '@ant-design/icons';
    import * as $$ from '../../utils/utility';
	
	
    const { SubMenu } = Menu;
    const FormItem = Form.Item;
    const Option = Select.Option;
	
    // 获取附件
    function getFileListDataApi() {
        return $$.ax.request({ url: `fileInfo/listFileByCat?mainId=${'10001'}&ownerCat=&createStart=&createEnd=&uploaderType=`, type: 'get', service: 'sys', });
import React, { useState, useEffect, useRef } from 'react';
import { Button, Menu, Tooltip, Row, Col, Form, Space } from 'antd';
import { Select, DatePicker } from '@arco-design/web-react';
import { useSearchParams } from 'react-router-dom';
import {
    CaretRightOutlined,
    CaretDownOutlined,
    FileOutlined,
    FileImageOutlined,
    FilePdfOutlined,
    FileWordOutlined,
    FileExcelOutlined,
    RotateRightOutlined,
    RotateLeftOutlined,
    DownloadOutlined,
    LeftOutlined,
    RightOutlined,
} from '@ant-design/icons';
import * as $$ from '../../utils/utility';


const { SubMenu } = Menu;
const FormItem = Form.Item;
const Option = Select.Option;

// 获取附件
function getFileListDataApi() {
    return $$.ax.request({ url: `fileInfo/listFileByCat?mainId=${'10001'}&ownerCat=&createStart=&createEnd=&uploaderType=`, type: 'get', service: 'sys', });
}

const NewFileCheck = ({ caseId }) => {
    let appUrl = $$.appUrl;

    const [searchParams] = useSearchParams();

    const fileId = searchParams.get('fileId');

    const [data, setData] = useState([]);

    const [openKeys, setOpenKeys] = useState([]);

    // files数组
    const [files, setFiles] = useState([{}]);

    // 当前点击的file的index
    const [fileIndex, setFileIndex] = useState(0);

    const imgBgRef = useRef();

    const imgRef = useRef();
    const formRef = useRef();


    // 图片旋转
    function handleRotateImg(type) {
        if (!imgRef || !imgRef.current) {
            return false;
        }
        let transform = imgRef.current.style.transform,
            reg = /(-)?[0-9][0-9]*/g,
            arr = transform.split('rotate'),
            rotate = Number(transform.match(reg)[4] || 0),
            num = 0;
        if (type === 'right') {
            num = rotate + 90;
        } else {
            num = rotate + -90;
        }
        imgRef.current.style.transform = `${arr[0]}rotate(${num}deg)`;
    }
	
    const NewFileCheck = ({ caseId }) => {
        let appUrl = $$.appUrl;
	
        const [searchParams] = useSearchParams();
	
        const fileId = searchParams.get('fileId');
	
        const [data, setData] = useState([]);
	
        const [openKeys, setOpenKeys] = useState([]);
	
        // files数组
        const [files, setFiles] = useState([{}]);
	
        // 当前点击的file的index
        const [fileIndex, setFileIndex] = useState(0);
	
        const imgBgRef = useRef();
	
        const imgRef = useRef();
        const formRef = useRef();
	
	
        // 图片旋转
        function handleRotateImg(type) {
            if (!imgRef || !imgRef.current) {
                return false;
            }
            let transform = imgRef.current.style.transform,
                reg = /(-)?[0-9][0-9]*/g,
                arr = transform.split('rotate'),
                rotate = Number(transform.match(reg)[4] || 0),
                num = 0;
            if (type === 'right') {
                num = rotate + 90;
            } else {
                num = rotate + -90;
            }
            imgRef.current.style.transform = `${arr[0]}rotate(${num}deg)`;

    // 监听图片滚动事件放大，缩小
    function imgScrollFunc(e) {
        if (!imgRef || !imgRef.current) {
            return false;
        }
	
        // 监听图片滚动事件放大，缩小
        function imgScrollFunc(e) {
            if (!imgRef || !imgRef.current) {
                return false;
        let transform = imgRef.current.style.transform,
            reg = /\((.+?)\)/g,
            scale3d = transform.match(reg)[0],
            scale3dNum = scale3d.substring(1, 2);
        let num = Number(scale3dNum);
        if (e.wheelDelta) {
            //判断浏览器IE，谷歌滑轮事件
            if (e.wheelDelta > 0) {
                //当滑轮向上滚动时
                num = num + 1;
            }
            let transform = imgRef.current.style.transform,
                reg = /\((.+?)\)/g,
                scale3d = transform.match(reg)[0],
                scale3dNum = scale3d.substring(1, 2);
            let num = Number(scale3dNum);
            if (e.wheelDelta) {
                //判断浏览器IE，谷歌滑轮事件
                if (e.wheelDelta > 0) {
                    //当滑轮向上滚动时
                    num = num + 1;
                }
                if (e.wheelDelta < 0) {
                    //当滑轮向下滚动时
                    num = num - 1;
                }
            } else if (e.detail) {
                //Firefox滑轮事件
                if (e.detail > 0) {
                    //当滑轮向上滚动时
                    num = num + 1;
                }
                if (e.detail < 0) {
                    //当滑轮向下滚动时
                    num = num - 1;
                }
            if (e.wheelDelta < 0) {
                //当滑轮向下滚动时
                num = num - 1;
            }
            let res = `scale3d(${num < 1 ? 1 : num},${num < 1 ? 1 : num},1) rotate${transform.match(reg)[1]}`;
            imgRef.current.style.transform = res;
        }
	
        // 判断文件的icon
        function iconType(fileType) {
            let result = <FileOutlined />;
            if (fileType === '22_00017-3') {
                result = <FileImageOutlined />;
        } else if (e.detail) {
            //Firefox滑轮事件
            if (e.detail > 0) {
                //当滑轮向上滚动时
                num = num + 1;
            }
            if (fileType === '22_00017-5') {
                result = <FileExcelOutlined />;
            }
            if (fileType === '22_00017-4') {
                result = <FileWordOutlined />;
            }
            if (fileType === '22_00017-6') {
                result = <FilePdfOutlined />;
            }
            return result;
        }
	
        // 切换下一个，上一个
        async function handleNext(type) {
            global.setSpinning(true);
            let index = fileIndex + (type === 'next' ? 1 : -1);
            if (files[index]) {
                setFileIndex(index);
            } else {
                global.setSpinning(false);
                if (index < 0) {
                    setFileIndex(files.length - 1);
                    return;
                }
                setFileIndex(0);
            if (e.detail < 0) {
                //当滑轮向下滚动时
                num = num - 1;
            }
        }
	
        // 获取附件数据
        async function getFileListData() {
            global.setSpinning(true);
            const res = await getFileListDataApi(caseId || searchParams.get('caseId'));
        let res = `scale3d(${num < 1 ? 1 : num},${num < 1 ? 1 : num},1) rotate${transform.match(reg)[1]}`;
        imgRef.current.style.transform = res;
    }

    // 判断文件的icon
    function iconType(fileType) {
        let result = <FileOutlined />;
        if (fileType === '22_00017-3') {
            result = <FileImageOutlined />;
        }
        if (fileType === '22_00017-5') {
            result = <FileExcelOutlined />;
        }
        if (fileType === '22_00017-4') {
            result = <FileWordOutlined />;
        }
        if (fileType === '22_00017-6') {
            result = <FilePdfOutlined />;
        }
        return result;
    }

    // 切换下一个，上一个
    async function handleNext(type) {
        global.setSpinning(true);
        let index = fileIndex + (type === 'next' ? 1 : -1);
        if (files[index]) {
            setFileIndex(index);
        } else {
            global.setSpinning(false);
            if (res.type) {
                let resData = res.data || [];
                let arr = [];
                let filesArr = [];
                let index = 0;
                resData.forEach((x, t) => {
                    arr.push(x.ownerCatName);
                    filesArr = filesArr.concat(x.fileList || []);
                });
                forEach: for (let i = 0; i < filesArr.length - 1; i++) {
                    if (filesArr[i].id === fileId) {
                        index = i;
                        break forEach;
                    }
                }
                setData({ data: resData, caseNo: res.data?.caseNo });
                setFileIndex(index);
                setFiles(filesArr);
                setOpenKeys(arr);
            if (index < 0) {
                setFileIndex(files.length - 1);
                return;
            }
            setFileIndex(0);
        }
	
        useEffect(() => {
            getFileListData();
        }, []);
	
        // 监听鼠标滚动事件
        useEffect(() => {
            if (imgRef.current) {
                imgRef.current.onload = () => {
                    imgBgRef.current.onmousewheel = imgScrollFunc;
                };
    }

    // 获取附件数据
    async function getFileListData() {
        global.setSpinning(true);
        const res = await getFileListDataApi(caseId || searchParams.get('caseId'));
        global.setSpinning(false);
        if (res.type) {
            let resData = res.data || [];
            let arr = [];
            let filesArr = [];
            let index = 0;
            resData.forEach((x, t) => {
                arr.push(x.ownerCatName);
                filesArr = filesArr.concat(x.fileList || []);
            });
            forEach: for (let i = 0; i < filesArr.length - 1; i++) {
                if (filesArr[i].id === fileId) {
                    index = i;
                    break forEach;
                }
            }
        }, [files]);
	
        // 切换文件加载
        useEffect(() => {
            if (imgRef.current) {
                imgRef.current.src = `${appUrl.fileUrl}${appUrl.fileShowUrl}${files[fileIndex]?.id}`;
                imgRef.current.onload = () => {
                    global.setSpinning(false, 'only');
                };
            } else {
            setData({ data: resData, caseNo: res.data?.caseNo });
            setFileIndex(index);
            setFiles(filesArr);
            setOpenKeys(arr);
        }
    }

    useEffect(() => {
        getFileListData();
    }, []);

    // 监听鼠标滚动事件
    useEffect(() => {
        if (imgRef.current) {
            imgRef.current.onload = () => {
                imgBgRef.current.onmousewheel = imgScrollFunc;
            };
        }
    }, [files]);

    // 切换文件加载
    useEffect(() => {
        if (imgRef.current) {
            imgRef.current.src = `${appUrl.fileUrl}${appUrl.fileShowUrl}${files[fileIndex]?.id}`;
            imgRef.current.onload = () => {
                global.setSpinning(false, 'only');
            }
        }, [appUrl.fileShowUrl, fileIndex, appUrl.baseUrl, files]);
	
        return (
            <>
                <nav className="filesCheck-nav" style={{ borderRight: '1px solid transparent' }}>
                    <Form
                        ref={formRef}
                        layout='horizontal'
                        style={{ marginTop: '24px', marginBottom: '20px' }}
                        requiredSymbol={false}
                        scrollToFirstError={true}
                        initialValues={{
                            level: '三级',
                            isSerious: '否',
                        }}//默认值
                    >
                        <Row gutter={24} style={{ marginRight: '0px' }}>
                            <Col span={7}>
                                <FormItem label='材料类型：' field='level'>
                                    <Select placeholder='Select city' allowClear>
                                        {['一级', '二级', '三级', '四级'].map((option, index) => (
                                            <Option key={option} value={option}>
                                                {option}
                                            </Option>
                                        ))}
                                    </Select>
                                </FormItem>
                            </Col>
                            <Col span={7}>
                                <FormItem
                                    label='上传时间：'
                                    field='name'
                                    onChange={(e) => console.log(e.target.value, 'vvv')}
                                >
                                    <DatePicker.RangePicker
                                        defaultValue={['2020-08-08', '2020-08-18']}
                                        separator='~'
                                        style={{ width: '100%' }}
                                    />
                                </FormItem>
                            </Col>
                            <Col span={7}>
                                <FormItem
                                    label='上传人类型：'
                                    field='name'
                                    onChange={(e) => console.log(e.target.value, 'vvv')}
                                >
                                    <Select placeholder='Select city' allowClear style={{ width: '100%' }}>
                                        {['一级', '二级', '三级', '四级'].map((option, index) => (
                                            <Option key={option} value={option}>
                                                {option}
                                            </Option>
                                        ))}
                                    </Select>
                                </FormItem>
	
                            </Col>
                            <Col span={3}>
                                <Space>
                                    <Button size="middle " type='primary'>查询</Button>
                                    <Button size="middle ">查询</Button>
                                </Space>
                            </Col>
	
                        </Row>
	
                    </Form>
	
                    <Menu
                        className="filesCheck-nav-menu"
                        style={{ width: '200px' }}
                        onOpenChange={(openKeys) => setOpenKeys(openKeys)}
                        mode="inline"
                        selectedKeys={[files[fileIndex]?.id]}
                        openKeys={openKeys}
                    >
                        {data.data?.map((x, t) => {
                            return (
                                <SubMenu
                                    key={x.ownerCatName}
                                    expandIcon={openKeys.includes(x.ownerCatName) ? <CaretRightOutlined /> : <CaretDownOutlined />}
                                    title={x.ownerCatName}
                                >
                                    {x.fileList?.map((y, z) => {
                                        return (
                                            <Menu.Item
                                                onClick={async () => {
                                                    global.setSpinning(true);
                                                    for (let i = 0; i < files.length; i++) {
                                                        if (files[i].id === y.id) {
                                                            setFileIndex(i);
                                                            break;
                                                        }
                                                    }
                                                }}
                                                icon={iconType(y.cat)}
                                                key={y.id}
                                            >
                                                {y.name}
                                            </Menu.Item>
                                        );
                                    })}
                                </SubMenu>
                            );
                        })}
                    </Menu>
                </nav>
                {/*图片查看*/}
                {files[fileIndex] ? (
                    <main className="filesCheck-main">
                        {/* 头部操作区 */}
                        <div className="filesCheck-main-action">
                            <div className="filesCheck-main-action-title">
                                <h3>{files[fileIndex]?.name}</h3>
                            </div>
                            {files[fileIndex]?.cat === '22_00017-3' && (
                                <>
                                    <div className="filesCheck-main-action-item">
                                        <Tooltip title="左转">
                                            <RotateLeftOutlined onClick={() => handleRotateImg('left')} />
                                        </Tooltip>
                                    </div>
                                    <div className="filesCheck-main-action-item">
                                        <Tooltip title="右转">
                                            <RotateRightOutlined onClick={() => handleRotateImg('right')} />
                                        </Tooltip>
                                    </div>
                                </>
                            )}
                            <div className="filesCheck-main-action-item">
                                <Tooltip title="下载">
                                    <a href={`${appUrl.fileUrl}${appUrl.fileDownUrl}${files[fileIndex]?.id}`}>
                                        <DownloadOutlined />
                                    </a>
                                </Tooltip>
                            </div>
                        </div>
                        {files[fileIndex]?.cat === '22_00017-3' ? (
                            <div className="filesCheck-main-imgBg" ref={imgBgRef}>
                                <img
                                    ref={imgRef}
                                    style={{ transform: 'scale3d(1,1,1) rotate(0deg)' }}
                                    className="filesCheck-main-img"
                                    src={`${appUrl.fileUrl}${appUrl.fileShowUrl}${files[fileIndex]?.id}`}
                                    alt="图片加载中..."
            };
        } else {
            global.setSpinning(false, 'only');
        }
    }, [appUrl.fileShowUrl, fileIndex, appUrl.baseUrl, files]);

    return (
        <>
            <nav className="filesCheck-nav" style={{ borderRight: '1px solid transparent' }}>
                <Form
                    ref={formRef}
                    layout='horizontal'
                    style={{ marginTop: '24px', marginBottom: '20px' }}
                    requiredSymbol={false}
                    scrollToFirstError={true}
                    initialValues={{
                        level: '三级',
                        isSerious: '否',
                    }}//默认值
                >
                    <Row gutter={24} style={{ marginRight: '0px' }}>
                        <Col span={7}>
                            <FormItem label='材料类型：' field='level'>
                                <Select placeholder='Select city' allowClear>
                                    {['一级', '二级', '三级', '四级'].map((option, index) => (
                                        <Option key={option} value={option}>
                                            {option}
                                        </Option>
                                    ))}
                                </Select>
                            </FormItem>
                        </Col>
                        <Col span={7}>
                            <FormItem
                                label='上传时间：'
                                field='name'
                                onChange={(e) => console.log(e.target.value, 'vvv')}
                            >
                                <DatePicker.RangePicker
                                    defaultValue={['2020-08-08', '2020-08-18']}
                                    separator='~'
                                    style={{ width: '100%' }}
                                />
                            </div>
                        ) : (
                            <div className="filesCheck-main-other">
                                <div className="filesCheck-main-other-icon">{iconType(files[fileIndex]?.cat)}</div>
                                <div className="filesCheck-main-other-text">
                                    您所查看的附件不支持预览，请下载查看{files[fileIndex]?.cat === '22_00017-6' ? '或跳转预览' : ''}。
                                </div>
                                <div>
                                    {files[fileIndex]?.cat === '22_00017-6' && (
                                        <Button
                                            className="public-buttonMargin"
                                            onClick={() => window.open(`${appUrl.fileUrl}${appUrl.fileShowUrl}${files[fileIndex]?.id}`)}
                                        >
                                            跳转查看
                                        </Button>
                            </FormItem>
                        </Col>
                        <Col span={7}>
                            <FormItem
                                label='上传人类型：'
                                field='name'
                                onChange={(e) => console.log(e.target.value, 'vvv')}
                            >
                                <Select placeholder='Select city' allowClear style={{ width: '100%' }}>
                                    {['一级', '二级', '三级', '四级'].map((option, index) => (
                                        <Option key={option} value={option}>
                                            {option}
                                        </Option>
                                    ))}
                                </Select>
                            </FormItem>

                        </Col>
                        <Col span={3}>
                            <Space>
                                <Button size="middle " type='primary'>查询</Button>
                                <Button size="middle ">查询</Button>
                            </Space>
                        </Col>

                    </Row>

                </Form>
                <div style={{ display: 'flex' }}>
                    <div style={{ width: '200px' }}>
                        <Menu
                            // className="filesCheck-nav-menu"
                            style={{ width: '200px' }}
                            onOpenChange={(openKeys) => setOpenKeys(openKeys)}
                            mode="inline"
                            selectedKeys={[files[fileIndex]?.id]}
                            openKeys={openKeys}
                        >
                            {data.data?.map((x, t) => {
                                return (
                                    <SubMenu
                                        key={x.ownerCatName}
                                        expandIcon={openKeys.includes(x.ownerCatName) ? <CaretRightOutlined /> : <CaretDownOutlined />}
                                        title={x.ownerCatName}
                                    >
                                        {x.fileList?.map((y, z) => {
                                            return (
                                                <Menu.Item
                                                    onClick={async () => {
                                                        global.setSpinning(true);
                                                        for (let i = 0; i < files.length; i++) {
                                                            if (files[i].id === y.id) {
                                                                setFileIndex(i);
                                                                break;
                                                            }
                                                        }
                                                    }}
                                                    icon={iconType(y.cat)}
                                                    key={y.id}
                                                >
                                                    {y.name}
                                                </Menu.Item>
                                            );
                                        })}
                                    </SubMenu>
                                );
                            })}
                        </Menu>

                    </div>
                    <div style={{ flex: 1 }}>
                        {files[fileIndex] ? (
                            <main className="filesCheck-main">
                                {/* 头部操作区 */}
                                <div className="filesCheck-main-action">
                                    <div className="filesCheck-main-action-title">
                                        <h3>{files[fileIndex]?.name}</h3>
                                    </div>
                                    {files[fileIndex]?.cat === '22_00017-3' && (
                                        <>
                                            <div className="filesCheck-main-action-item">
                                                <Tooltip title="左转">
                                                    <RotateLeftOutlined onClick={() => handleRotateImg('left')} />
                                                </Tooltip>
                                            </div>
                                            <div className="filesCheck-main-action-item">
                                                <Tooltip title="右转">
                                                    <RotateRightOutlined onClick={() => handleRotateImg('right')} />
                                                </Tooltip>
                                            </div>
                                        </>
                                    )}
                                    <a href={`${appUrl.fileUrl}${appUrl.fileDownUrl}${files[fileIndex]?.id}`}>
                                        <Button type="primary">下载</Button>
                                    </a>
                                    <div className="filesCheck-main-action-item">
                                        <Tooltip title="下载">
                                            <a href={`${appUrl.fileUrl}${appUrl.fileDownUrl}${files[fileIndex]?.id}`}>
                                                <DownloadOutlined />
                                            </a>
                                        </Tooltip>
                                    </div>
                                </div>
                            </div>
                                {files[fileIndex]?.cat === '22_00017-3' ? (
                                    <div className="filesCheck-main-imgBg" ref={imgBgRef}>
                                        <img
                                            ref={imgRef}
                                            style={{ transform: 'scale3d(1,1,1) rotate(0deg)' }}
                                            className="filesCheck-main-img"
                                            src={`${appUrl.fileUrl}${appUrl.fileShowUrl}${files[fileIndex]?.id}`}
                                            alt="图片加载中..."
                                        />
                                    </div>
                                ) : (
                                    <div className="filesCheck-main-other">
                                        <div className="filesCheck-main-other-icon">{iconType(files[fileIndex]?.cat)}</div>
                                        <div className="filesCheck-main-other-text">
                                            您所查看的附件不支持预览，请下载查看{files[fileIndex]?.cat === '22_00017-6' ? '或跳转预览' : ''}。
                                        </div>
                                        <div>
                                            {files[fileIndex]?.cat === '22_00017-6' && (
                                                <Button
                                                    className="public-buttonMargin"
                                                    onClick={() => window.open(`${appUrl.fileUrl}${appUrl.fileShowUrl}${files[fileIndex]?.id}`)}
                                                >
                                                    跳转查看
                                                </Button>
                                            )}
                                            <a href={`${appUrl.fileUrl}${appUrl.fileDownUrl}${files[fileIndex]?.id}`}>
                                                <Button type="primary">下载</Button>
                                            </a>
                                        </div>
                                    </div>
                                )}
                                <div className="filesCheck-imgLeft" onClick={() => handleNext('back')}>
                                    <LeftOutlined />
                                </div>
                                <div className="filesCheck-imgRight" onClick={() => handleNext('next')}>
                                    <RightOutlined />
                                </div>
                            </main>
                        ) : (
                            <div style={{ width: '100%', paddingTop: '20%' }}>{$$.MyEmpty()}</div>
                        )}
                        <div className="filesCheck-imgLeft" onClick={() => handleNext('back')}>
                            <LeftOutlined />
                        </div>
                        <div className="filesCheck-imgRight" onClick={() => handleNext('next')}>
                            <RightOutlined />
                        </div>
                    </main>
                ) : (
                    <div style={{ width: '100%', paddingTop: '20%' }}>{$$.MyEmpty()}</div>
                )}
            </>
        );
    };
	
    export default NewFileCheck;
	
                    </div>
                </div>
            </nav>
            {/*图片查看*/}
        </>
    );
};

export default NewFileCheck;

 gz-customerSystem/src/views/register/index.less

@@ -713,4 +713,86 @@
    align-items: center;
    padding: 12px 8px;
    border-radius: 12px 0px 0px 12px;
}

.aiBox {
    flex: 1 1 0%;
    background-color: rgb(242, 243, 245);
    height: 100vh;

    &-case {
        display: flex;
        margin: 16px;
        gap: 10px;

        &-logo {
            width: 30px;
            padding-top: 3px;

            &-img {
                width: 26px;
                height: 26px;
            }
        }
    }

    &-list {

        &-item {
            display: flex;
            background-color: #fff;
            width: fit-content;
            padding: 8px 12px;
            border-radius: 8px;
            margin-bottom: 8px;

            &-type {
                border: 1px solid #1A6FB8;
                padding: 0px 8px;
                color: #1A6FB8;
                border-radius: 4px;
            }

            &-name{
                margin: 0px 16px 0px 8px;
            }

            &-btn{
                color: #1A6FB8;
            }
        }
    }
}

.marginLeft{
    margin-left: 55px;


    //fontWeight: '600', marginBottom: '16px'
    &-title{
        font-weight: 600;
        margin-bottom: 16px;
    }
}

.layerDetail{
    margin-top: -8px;

    &-title{
        color: rgb(26, 111, 184);
        margin-bottom: 16px;
    }

    &-name{
        font-size: 16px;
        margin-bottom: 16px;
    }

    &-littleTitle{
        margin-bottom: 16px;
    }

    &-content{
        margin-bottom: 16px;
    }
}

 gz-customerSystem/src/views/register/visit/component/levelDetail.jsx

@@ -2,11 +2,11 @@
 * @Author: dminyi 1301963064@qq.com
 * @Date: 2024-08-27 16:47:12
 * @LastEditors: dminyi 1301963064@qq.com
 * @LastEditTime: 2024-09-07 14:20:23
 * @LastEditTime: 2024-09-07 15:35:53
 * @FilePath: \gzDyh\gz-customerSystem\src\views\register\visit\component\levelDetail.jsx
 * @Description: 右抽屉提示
 */
import React from 'react';
import React, { useState } from 'react';
import MyDrawer from '@/components/MyDrawer';
import { caselogo } from '@/assets/images';

@@ -105,27 +105,127 @@
}

const AiQuestion = ({ visible, onClose }) => {
    return (
        <MyDrawer
            visible={visible}
            onClose={onClose}
            title="事项概况指南"
            width={1000}
            style={{ position: 'absolute' }}
            bodyStyle={{ marginTop: '-8px' }}
            titleBefore={true}
        >
            <div style={{ display: 'flex' }}>
    const [list, setList] = useState([
        {
            id: '1',
            type: '典型案例',
            name: '唐某某诉重庆某工业有限公司劳动合同纠纷案'
        },
        {
            id: '2',
            type: '相似案例',
            name: '曾某某诉某网络科技公司劳动争议案'
        },
        {
            id: '3',
            type: '相似案例',
            name: '曾某某诉某网络科技公司劳动争议案'
        },
    ])

                <div style={{ width: '100px' }}>111</div>
                <div style={{ flex: 1, backgroundColor: '#F2F3F5', height: '100vh' }}>
                    <div>
                        <img src={caselogo} alt='' style={{ width: '30px', height: '30px' }} />
                        <span>刘家健入职吴昆物流公司工作6天，因不适应工作内容、环境等，向吴昆物流公司提出离职申请，但公司称入职1周内因个人原因辞职不予支付工资。刘家健因此向社区调委会申请调解。刘家健希望吴昆物流公司支付6天的工资。经调解，双方达成一致意见，吴昆物流公司同意支付刘家健6天的工资共计1575元。基于这个案件生成合理的调解策略.</span>
    const [layerList, setLayerList] = useState([
        {
            id: '1',
            name: '法条一'
        },
        {
            id: '2',
            name: '法条二'
        },
        {
            id: '3',
            name: '法条三'
        },
    ])

    const [caseDetail,setCaseDetail] = useState(false)
    const toggleView = (id) => {
        console.log(id, 'iddddddd')
        setCaseDetail(true)
        aiCaseDetail(id)
    };

    const caseDetailOnClose = () => {
        setCaseDetail(false)
    }

    const aiCaseDetail = () => {
    
    }



    return (
        <>
            <MyDrawer
                visible={visible}
                onClose={onClose}
                title="智能调解助理"
                width={1000}
                style={{ position: 'absolute' }}
                bodyStyle={{ marginTop: '-8px' }}
                titleBefore={true}
            >
                <div style={{ display: 'flex' }}>
                    <div style={{ width: '100px' }}></div>
                    <div className='aiBox'>
                        <div className='aiBox-case'>
                            <div className='aiBox-case-logo'>
                                <img src={caselogo} alt='' className='aiBox-case-logo-img' />
                            </div>
                            <div style={{ flex: 1 }}>刘家健入职吴昆物流公司工作6天，因不适应工作内容、环境等，向吴昆物流公司提出离职申请，但公司称入职1周内因个人原因辞职不予支付工资。刘家健因此向社区调委会申请调解。刘家健希望吴昆物流公司支付6天的工资。经调解，双方达成一致意见，吴昆物流公司同意支付刘家健6天的工资共计1575元。基于这个案件生成合理的调解策略.</div>
                        </div>
                        <div className='marginLeft'>
                            <div className='marginLeft-title'>相关案例：</div>
                            <div className='aiBox-list'>
                                {list?.map((item, index) => (
                                    <div className='aiBox-list-item'>
                                        <div className='aiBox-list-item-type'>{item.type}</div>
                                        <div className='aiBox-list-item-name'>{item.name}</div>
                                        <div className='aiBox-list-item-btn' onClick={() => toggleView(item.id)}>查看</div>
                                    </div>
                                ))}
                            </div>


                        </div>
                        <div className='marginLeft'>
                            <div className='marginLeft-title'>相关法条：</div>
                            <div className='aiBox-list'>
                                {layerList?.map((item, index) => (
                                    <div className='aiBox-list-item'>
                                        <div className='aiBox-list-item-type'>相关法条</div>
                                        <div className='aiBox-list-item-name'>{item.name}</div>
                                        <div className='aiBox-list-item-btn' onClick={() => toggleView(item.id)}>查看</div>
                                    </div>
                                ))}
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </MyDrawer>
            </MyDrawer>
            <div className='MyDrawer'>
            <MyDrawer
                visible={caseDetail}
                onClose={caseDetailOnClose}
                title="查看相关案例"
                width={400}
                style={{ position: 'absolute' }}
                bodyStyle={{ marginTop: '-8px' }}
                titleBefore={true}
            >
                <div className='layerDetail'>
                    <div className='layerDetail-title'>参考案例</div>
                    <div className='layerDetail-name'>唐某某诉重庆某工业有限公司劳动合同纠纷案</div>
                    <div className='layerDetail-littleTitle'>智能摘要</div>
                    <div className='layerDetail-content'>法院生效裁判认为，本案是肖某某要求某工业公司支付经济补偿金，原审法院已经确认某工业公司存在未足额支付肖某某工资、未休年休假工资情形，故依照《中华人民共和国劳动合同法》（以下简称劳动合同法）第三十八条第一款的规定，某工业公司应当支付解除合同的经济补偿金。</div>
                </div>
            </MyDrawer>

        </div>

        </>

    )
}