From eaccc230d88483286e67f2ad3499532d0af13440 Mon Sep 17 00:00:00 2001
From: dminyi <1301963064@qq.com>
Date: Sat, 07 Sep 2024 15:55:06 +0800
Subject: [PATCH] ai页面
---
gz-customerSystem/src/views/register/index.less | 82 +++++
gz-customerSystem/src/views/filesCheck/newFileCheck.jsx | 723 ++++++++++++++++++++++----------------------
gz-customerSystem/src/views/register/visit/component/levelDetail.jsx | 140 +++++++-
3 files changed, 566 insertions(+), 379 deletions(-)
diff --git a/gz-customerSystem/src/views/filesCheck/newFileCheck.jsx b/gz-customerSystem/src/views/filesCheck/newFileCheck.jsx
index ee5cf4e..ce0424c 100644
--- a/gz-customerSystem/src/views/filesCheck/newFileCheck.jsx
+++ b/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;
-
\ No newline at end of file
+ </div>
+ </div>
+ </nav>
+ {/*图片查看*/}
+ </>
+ );
+};
+
+export default NewFileCheck;
diff --git a/gz-customerSystem/src/views/register/index.less b/gz-customerSystem/src/views/register/index.less
index 8c3d3c7..1bc0930 100644
--- a/gz-customerSystem/src/views/register/index.less
+++ b/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;
+ }
}
\ No newline at end of file
diff --git a/gz-customerSystem/src/views/register/visit/component/levelDetail.jsx b/gz-customerSystem/src/views/register/visit/component/levelDetail.jsx
index 7e985cb..14556eb 100644
--- a/gz-customerSystem/src/views/register/visit/component/levelDetail.jsx
+++ b/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>
+
+ </>
)
}
--
Gitblit v1.8.0