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: 大厅来访材料附件查看
@@ -276,9 +276,10 @@
                        </Row>
    
                    </Form>
	
                <div style={{ display: 'flex' }}>
                    <div style={{ width: '200px' }}>
                    <Menu
                        className="filesCheck-nav-menu"
                            // className="filesCheck-nav-menu"
                        style={{ width: '200px' }}
                        onOpenChange={(openKeys) => setOpenKeys(openKeys)}
                        mode="inline"
@@ -315,8 +316,9 @@
                            );
                        })}
                    </Menu>
                </nav>
                {/*图片查看*/}

                    </div>
                    <div style={{ flex: 1 }}>
                {files[fileIndex] ? (
                    <main className="filesCheck-main">
                        {/* 头部操作区 */}
@@ -387,9 +389,12 @@
                ) : (
                    <div style={{ width: '100%', paddingTop: '20%' }}>{$$.MyEmpty()}</div>
                )}
                    </div>
                </div>
            </nav>
            {/*图片查看*/}
            </>
        );
    };
    
    export default NewFileCheck;
	

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

@@ -714,3 +714,85 @@
    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 }) => {
    const [list, setList] = useState([
        {
            id: '1',
            type: '典型案例',
            name: '唐某某诉重庆某工业有限公司劳动合同纠纷案'
        },
        {
            id: '2',
            type: '相似案例',
            name: '曾某某诉某网络科技公司劳动争议案'
        },
        {
            id: '3',
            type: '相似案例',
            name: '曾某某诉某网络科技公司劳动争议案'
        },
    ])

    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="事项概况指南"
                title="智能调解助理"
            width={1000}
            style={{ position: 'absolute' }}
            bodyStyle={{ marginTop: '-8px' }}
            titleBefore={true}
        >
            <div style={{ display: 'flex' }}>

                <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>
                    <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>
        </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>

        </>

    )
}