feat():完成白蚁监测地图交互

src/service/apiurl.js

@@ -415,7 +415,8 @@ const apiurl = {
         detail: service_fxdd + "/termite/survey/detail",
         dictionary: service_fxdd + "/sysDictB/listByCd",
         allCd: service_fxdd + '/termite/survey/list/allOrder',
-        historyPage:service_fxdd + '/termite/survey/detail',
+        historyPage: service_fxdd + '/termite/survey/detail',
+        process:service_fxdd + '/termite/survey/process'
       },
       fzxc: {
         page: service_fxdd + "/termite/adver/file/page",

src/views/Home/homePanelsLayoutPage/item_yujing/index.js

@@ -9,11 +9,15 @@ import Table_wy from './table_wy'
 import Table_sl from './table_sl'
 import Table_sy from './table_sy'
 import Table_AI from './table_AI'
+import { useNavigate } from "react-router";
 
 
 
-const Page = ({mySetTms}) => {
+const Page = ({ mySetTms }) => {
-    const [ dataObj, setDataObj ] = useState({})
+    const navigator = useNavigate();
+    const [dataObj, setDataObj] = useState({})
+    const [count, setCount] = useState({})
+    
     console.log(dataObj)
     const [ open, setOpen ] = useState(false)
     const [ key , setkey ] = useState('')
@@ -22,6 +26,24 @@ const Page = ({mySetTms}) => {
         moment().format('YYYY-MM-DD HH:mm:ss'),
     ])
 
+    // 获取白蚁统计数量
+  const getCount = async () => {
+    const params = {
+      pageSo: {
+        pageNumber: 1,
+        pageSize: 99999,
+      },
+      obDate:moment().format('YYYY-MM-DD')
+    }
+    try {
+      const res = await httppost2(apiurl.rcgl.byfz.bypc.count, params);
+      setCount(res.data);
+    } catch (error) {
+      console.log(error);
+
+    }
+  }
+
     useEffect(()=>{
         (async()=>{
             const params = {
@@ -39,6 +61,7 @@ const Page = ({mySetTms}) => {
             ]) 
             setDataObj(data)
         })()
+        getCount()
     },[])
   
 
@@ -85,6 +108,11 @@ const Page = ({mySetTms}) => {
                     <div className="content">AI告警</div>
                     <div></div>
                 </div>
+                <div className="bodyBoxItem" onClick={() =>{navigator('/mgr/sg/byfz/bypc')}}>
+                    <div className="num">{count.hasAnt}</div>
+                    <div className="content">白蚁告警</div>
+                    <div></div>
+                </div>
             </div>
 
             <Modal 

src/views/rcgl/byfz/bypc/index.js

@@ -11,6 +11,7 @@ import { createCrudService } from '../../../../components/crud/_';
 import { httppost2, httpget2 } from '../../../../utils/request';
 import { CrudOpRender_text } from '../../../../components/crud/CrudOpRender';
 import PointHistory from './pointHistory';
+import PrecessForm from './precessForm'
 import './index.less';
 import moment from 'moment';
 // 引入OpenLayers相关依赖
@@ -46,6 +47,12 @@ const Page = () => {
   // 点位弹框
   const [modalVisible, setModalVisible] = useState(false)
   const [detailPoint, setDetailPoint] = useState({})
+
+
+  // 白蚁处理弹框
+  const [precessVisible, setPrecessVisible] = useState(false)
+  const [mode, setMode] = useState('save')
+
   const dispatch = useDispatch();
 
 
@@ -123,7 +130,27 @@ const Page = () => {
           </Tag>
         );
       }
+    },
+    {
+      title: '操作',
+      dataIndex: 'opreate',
+      key: 'opreate',
+      width: 120,
+      align: 'center',
+      render: (v, r) => {
+        let renderTag;
+        if (!r.isProcess && r.status == 1) {
+          renderTag = <Button style={{ marginRight: 4 }} type="link" size="small" onClick={()=> handlerPrecess(r,'save')} title="处理">处理</Button>;
         }
+        if (r.hasInspectTask && r.jcskByRProcessVo) {
+           renderTag = <Button style={{ marginRight: 4 }} type="link" size="small" onClick={()=> handlerPrecess(r,'view')} title="工单详情">工单详情</Button>;
+        }
+        return (<>
+          {renderTag}
+          <Button style={{ marginRight: 4 }} type="link" size="small" title="查看" onClick={()=> viewDetail(r)}>查看</Button>
+        </>)
+      }
+    },
   ];
   const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
 
@@ -150,6 +177,19 @@ const Page = () => {
     refresh()
   }
 
+
+  // 表格操作栏 查看按钮回调
+  const viewDetail = (r) => {
+    setDetailPoint(r);
+    setModalVisible(true)
+  }
+// 表格操作栏 处理按钮回调
+  const handlerPrecess = (r,type) => {
+    setDetailPoint(r);
+    setPrecessVisible(true)
+    setMode(type)
+  }
+
   // 获取白蚁统计数量
   const getCount = async () => {
     const params = {
@@ -319,7 +359,11 @@ const Page = () => {
   };
 
   // 处理表格行点击事件
-  const handleRowClick = (record) => {
+  const handleRowClick = (record,event) => {
+     // 如果点击的是操作列中的元素，不触发地图交互
+  if (event && (event.target.closest('button') || event.target.closest('.ant-btn'))) {
+    return;
+  }
     const feature = findFeatureByDeviceId(record.order);
     if (feature) {
       highlightFeature(feature);
@@ -475,7 +519,7 @@ const Page = () => {
                 {...tableProps}
                 scroll={{ x: width, y: "calc( 100vh - 400px )" }}
                 onRow={(record) => ({
-                  onClick: () => handleRowClick(record), // 添加行点击事件
+                  onClick: (event) => handleRowClick(record,event), // 添加行点击事件
                   style: { cursor: 'pointer' } // 添加鼠标指针样式
                 })}
               />
@@ -488,12 +532,23 @@ const Page = () => {
           title={detailPoint?.order}
           open={modalVisible}
           onCancel={() => setModalVisible(false)}
-          width={800}
+          width={1000}
           footer={null}
           destroyOnClose
         >
           <PointHistory data={detailPoint} />
         </Modal>
+        {/*处理弹框 */}
+        <Modal
+          title={mode == 'save' ? "处理" : '工单详情'}
+          open={precessVisible}
+          onCancel={() => setPrecessVisible(false)}
+          width={1000}
+          footer={null}
+          destroyOnClose
+        >
+          <PrecessForm record={detailPoint} mode={mode} refresh={refresh} setPrecessVisible={setPrecessVisible} />
+        </Modal>
         <BasicCrudModal
           width={1000}
           ref={refModal}

src/views/rcgl/byfz/bypc/precessForm.js

@@ -0,0 +1,721 @@
+import React, { useEffect, useState, useMemo, useRef } from 'react';
+import { Form, Button, Input, Row, Upload, Col, Table, TreeSelect, DatePicker, InputNumber, message, Image, Radio, Modal, Descriptions, Tabs, Tooltip } from 'antd';
+import { VideoCameraOutlined } from '@ant-design/icons';
+import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';
+import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
+import { CrudOpRender_text } from '../../../../components/crud/CrudOpRender';
+import apiurl from '../../../../service/apiurl';
+import FormComponent from "./formCom"
+import NormalSelect from '../../../../components/Form/NormalSelect';
+
+import "./index.less"
+import moment from 'moment';
+import { httpget2, xyt_httpget2, httppost2 } from '../../../../utils/request';
+const { RangePicker } = DatePicker
+const { Dragger } = Upload;
+const url = "http://223.75.53.141:9100/gs-tsg"
+
+
+const ModalForm = ({ mode, record, refresh, setPrecessVisible }) => {
+  const taskTypes = [
+    { label: "日常巡查", value: 1 },
+    { label: "特别检查", value: 2 },
+    { label: "汛前巡检", value: 3 },
+  ]
+
+  const xjStatus = {
+    0: "cha",
+    1: "gou"
+  }
+  const [form] = Form.useForm();
+  const [form1] = Form.useForm();
+  const [precessType, setPrecessType] = useState()
+  const [itemList, setItemList] = useState([])
+  const [itemParams, setItemParams] = useState([])
+  const [list, setList] = useState([])
+  const [totals, setTotals] = useState({})
+  const [tabsRender, setTabsRender] = useState([])
+  const [imgVisible, setImgVisible] = useState(false)
+  const [imgList, setImgList] = useState([])
+  const [videoOpen, setVideoOpen] = useState(false)
+  const [videoParams, setVideoParams] = useState({})
+  const [handleDetailsOpen, setHandleDetailsOpen] = useState(false)
+  const [handleDetails, setHandleDetails] = useState({})
+  const [handleImgfileList, setHandleImgFileList] = useState([]) //上传文件列表
+  const [handleVideoFileList, setHandleVideoFileList] = useState([]) //上传文件列表
+  const handleDetail = (row) => {
+    setHandleDetailsOpen(true)
+    setHandleDetails(row)
+  }
+  const reviewPic = (arrPic) => {
+    debugger
+    if (arrPic.length > 0) {
+      setImgVisible(true)
+      setImgList(arrPic)
+    }
+  }
+
+  const reviewVideo = (arrVideo) => {
+    if (arrVideo.length > 0) {
+      setVideoOpen(true)
+      setVideoParams(arrVideo[0])
+    }
+  }
+
+
+  const renderTooltip = (value) => {
+    return (
+      <>
+        <Descriptions>
+          <Descriptions.Item label="问题描述" span={3}>
+            {value?.itemProblemDesc}
+          </Descriptions.Item>
+          <Descriptions.Item label="处理建议">
+            {value?.handleSuggestion}
+          </Descriptions.Item>
+        </Descriptions>
+      </>
+    )
+  }
+  const columns = [
+    {
+      title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center",
+      render: (value, row, index) => <span>{index + 1}</span>
+    },
+    {
+      title: '巡查项', key: 'itemDesc', dataIndex: 'itemDesc', width: 200,
+      render: (value, row, index) =>
+        <div style={{ position: "relative" }}>
+          <div style={{ width: "80%", whiteSpace: "nowrap", textOverflow: "ellipsis", overflow: "hidden" }} title={value}>{value}</div>
+          <span style={{ position: "absolute", top: 0, right: 0 }}>
+            <Tooltip
+              title={renderTooltip(row)}
+              color='#ffffff'
+            >
+              <img style={{ width: 20, height: 20 }} src={`${process.env.PUBLIC_URL}/assets/xyt/rcgl/wenhao.png`} />
+            </Tooltip>
+          </span>
+        </div>
+    },
+    {
+      title: '巡查状态', key: 'isNormal', dataIndex: 'isNormal', width: 100, align: "center",
+      render: (value) => <div>
+        {value === null ? '' :
+          <img style={{ width: value ? 20 : 17, height: value ? 20 : 17 }} src={`${process.env.PUBLIC_URL}/assets/xyt/rcgl/${xjStatus[value]}.png`}
+            alt='' />
+        }
+      </div>
+    },
+    { title: '巡查问题描述', key: 'problemDesc', dataIndex: 'problemDesc', width: 300, ellipsis: true },
+    {
+      title: '巡查图片', key: 'inspectPics', dataIndex: 'inspectPics', width: 100, align: "center",
+      render: (value) => <div>{value ? <a onClick={() => reviewPic(value)}> {value.length} </a> : ''}</div>
+
+    },
+    {
+      title: '巡查视频', key: 'inspectVideos', dataIndex: 'inspectVideos', width: 100, align: "center",
+      render: (value) => <div>{value ? <a onClick={() => reviewVideo(value)}> {value.length} </a> : ''}</div>
+
+    },
+    {
+      title: '是否处理', key: 'isHandle', dataIndex: 'isHandle', width: 100, align: "center",
+      render: (value) => <span>{value ? "是" : "否"}</span>
+    },
+    { title: '处理人', key: 'handleUserName', dataIndex: 'handleUserName', width: 150 },
+    {
+      title: '操作', key: 'operator', dataIndex: 'operator', width: 150,
+      render: (value, row) => <a onClick={() => handleDetail(row)}>处理详情</a>
+    },
+
+  ]
+  const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
+
+  const renderItems = (items) => {
+    const result = items.map(o => ({
+      key: o.pointId,
+      label: o.name + `(${o.children.filter(r => r.isNormal == 0).length})`,
+      children:
+        <Table
+          columns={columns}
+          rowKey={o.id}
+          pagination={false}
+          dataSource={o.children}
+          scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
+    }))
+    setTabsRender(result)
+  }
+
+  const getTabsDetail = async (id) => {
+    let items = {};
+    try {
+      const res = await httpget2(apiurl.rcgl.xcxj.xjrw.info, { taskId: id });
+      renderItems(res.data)
+      res.data.forEach(o => {
+        items.isNormalTotal = o.children.filter(item => item.isNormal == 0).length;
+        items.normalTotal = o.children.filter(item => item.isNormal == 1).length;
+      })
+      setTotals(items);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+  const handleTree = (arr) => {
+
+    const res = arr.map(item => {
+      item.value = item.id;
+      item.title = item.itemDesc;
+      if (item.children) {
+        item.children = handleTree(item.children)
+      }
+      return item;
+    })
+    return res
+  }
+
+
+  const getItemList = async () => {
+    try {
+      const res = await httpget2(apiurl.rcgl.xcxj.xjrw.list);
+      if (res.code === 200) {
+        const arr1 = res.data.map(item => ({
+          id: item.id,
+          itemDesc: item.name,
+          children: item.children,
+          disabled: item.children.length > 0 ? false : true
+        }));
+        const result = handleTree(arr1)
+        setList(res.data)
+        console.log(result);
+        setItemList(result)
+      }
+    } catch (error) {
+      console.log(error);
+
+    }
+  }
+
+  const onfinish = (values) => {
+    const userId = localStorage.getItem('userId')
+    const userName = localStorage.getItem('userName')
+    values.inspectTask = values.isWarn == 2 ? {
+      startDate: values.startDate || '',
+      endDate: values.endDate || '',
+      inspectUserName: deptUserList?.find(item => item.userId == values.inspectUserId)?.nickName,
+      items: itemParams,
+      inspectUserId: values?.inspectUserId,
+      taskContent: values?.taskContent,
+      taskTitle: values?.taskTitle,
+      taskType: values?.taskType,
+      createUserId: userId,
+      createUserName: userName
+    } : null
+    if (mode === 'save') {
+      onSave(apiurl.rcgl.byfz.bypc.process, values)
+    }
+
+  }
+
+  const onSave = async (url, params) => {
+    const newParams = { ...params, order: record?.order, obDate: record?.obDate }
+    try {
+      const { code, data } = await httppost2(url, newParams);
+      if (code == 200) {
+        message.success('处理成功')
+        setPrecessVisible(false)
+        refresh();
+      }
+    } catch (error) {
+      console.log(error);
+
+    }
+  }
+
+  const onValuesChange = (v, r) => {
+    setPrecessType(r.isWarn)
+  }
+
+  const itemChange = (a, b, c) => {
+    const itemArr = a.map(item => {
+      let pointId;
+      list.forEach(o => {
+        if (o.id != item && !pointId) {
+          pointId = o.children?.find(t => t.id == item)?.pointId;
+        }
+      })
+      return {
+        itemId: item,
+        pointId
+      }
+    })
+    setItemParams(itemArr)
+  }
+
+
+  const [deptList, setDeptList] = useState([])
+  const [deptUserList, setDeptUserList] = useState([])
+  const buildTree = (data, parentId) => {
+    let tree = [];
+    data.forEach((node) => {
+      node.title = node.deptName;
+      node.key = node.deptId;
+
+      if (node.parentId === parentId) {
+        let children = buildTree(data, node.deptId);
+        if (children.length) {
+          node.children = children;
+        }
+        tree.push(node);
+      }
+    });
+    return tree;
+  }
+
+  const handleTreeList = (dept, user) => {
+    const deptArr = dept.map(item => {
+      return {
+        ...item,
+        value: item.deptId,
+        title: item.deptName,
+        disabled: item.userId ? false : true,
+        children: user.filter(u => u.deptId == item.deptId).map(u => ({
+          ...u,
+          value: u.userId,
+          title: u.nickName
+        }))
+      }
+    })
+    console.log("deptArr", deptArr);
+    const treelist = buildTree(deptArr, 0)
+    return treelist
+  }
+  const treeList = useMemo(() => {
+    if (deptUserList?.length > 0 && deptList?.length > 0) {
+      return handleTreeList(deptList, deptUserList)
+    } else {
+      return []
+    }
+  }, [deptUserList, deptList])
+
+  // 获取部门数据
+  const getDeptList = async () => {
+    try {
+      const result = await xyt_httpget2(apiurl.rcgl.zbgl.zbb.deptlist);
+      if (result.code == 200) {
+        setDeptList(result.data);
+        getDeptUser(result.data[0])
+      }
+
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  // 获取部门人员数据
+  const getDeptUser = async () => {
+    try {
+      const result = await xyt_httpget2(apiurl.rcgl.zbgl.zbb.userList, { pageNum: 1, pageSize: 9999 });
+      if (result.code == 200) {
+        setDeptUserList(result.rows)
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  }
+  useEffect(() => {
+    getDeptList()
+    getItemList()
+  }, [])
+
+  const handleFile = (arr = []) => {
+    const newArr = arr?.map(item => ({
+      name: item.fileName,
+      response: {
+        data: {
+          filePath: item.filePath,
+          fileId: item.fileId
+        }
+      },
+    }))
+    return newArr
+  }
+  useEffect(() => {
+    const handleImgFile = handleFile(handleDetails?.handlePics || []);
+    const hanldeVideoFile = handleFile(handleDetails?.handleVideos || []);
+    setHandleImgFileList(handleImgFile)
+    setHandleVideoFileList(hanldeVideoFile)
+  }, [handleDetails])
+
+  useEffect(() => {
+    if (mode != 'save' && record.jcskByRProcessVo) {
+      const backParmas = {
+        ...record.jcskByRProcessVo,
+        isWarn: 2,
+      }
+      form.setFieldsValue(backParmas)
+      setPrecessType(2)
+      getTabsDetail(record?.jcskByRProcessVo?.id)
+    }
+  }, [mode, record])
+
+
+  return (
+    <div>
+      {mode == 'view' &&
+        <div
+          style={{ marginBottom: 20, borderBottom: "1px solid #dfdfdf", width: "100%", paddingBottom: 5 }}>
+          <span style={{ padding: "0px 3px", backgroundColor: "#0079fe", marginRight: 20 }}></span>基本信息
+        </div>
+      }
+      <Form
+        form={form}
+        {...formItemLayout}
+        onFinish={onfinish}
+        onValuesChange={onValuesChange}
+      >
+        <Row>
+          <Col span={24}>
+            <Form.Item
+              label="单点报警取消"
+              name="isWarn"
+              labelCol={{ span: 4 }}
+              wrapperCol={{ span: 19 }}
+              rules={[
+                {
+                  required: true,
+                },
+              ]}
+            >
+              <Radio.Group disabled={mode === 'view'} >
+                <Radio value={1}>误报并取消报警</Radio>
+                <Radio value={2}>取消报警并创建工单</Radio>
+              </Radio.Group>
+            </Form.Item>
+          </Col>
+          <Col span={24}>
+            <Form.Item
+              label="单点位报警重复豁免时长(h)"
+              name="hours"
+              rules={[
+                {
+                  required: true,
+                },
+              ]}
+              labelCol={{ span: 6 }}
+              wrapperCol={{ span: 18 }}
+            >
+              <InputNumber disabled={mode === 'view'} min={0} style={{ width: '30%' }} allowClear />
+            </Form.Item>
+          </Col>
+        </Row>
+        {precessType == 2 ?
+          <Row>
+            <Col span={12}>
+              <Form.Item
+                label="任务类型"
+                name="taskType"
+                rules={[
+                  {
+                    required: true,
+                  },
+                ]}
+              >
+                <NormalSelect
+                  disabled={mode === 'view'}
+                  style={{ width: '100%' }}
+                  allowClear
+                  options={taskTypes}
+                />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="任务标题"
+                name="taskTitle"
+              >
+                <Input
+                  disabled={mode === 'view'}
+                  style={{ width: '100%' }}
+                  allowClear
+                />
+              </Form.Item>
+            </Col>
+
+            <Col span={24}>
+              <Form.Item
+                label="选择巡查人"
+                name="inspectUserId"
+                labelCol={{ span: 3 }}
+                wrapperCol={{ span: 19 }}
+                rules={[
+                  {
+                    required: true,
+                  },
+                ]}
+              >
+                <TreeSelect
+                  disabled={mode === 'view'}
+                  showSearch
+                  style={{
+                    width: '100%',
+                  }}
+                  dropdownStyle={{
+                    maxHeight: 400,
+                    overflow: 'auto',
+                  }}
+                  allowClear
+                  treeDefaultExpandAll
+                  treeData={treeList}
+                  treeNodeFilterProp='title'
+
+                />
+              </Form.Item>
+            </Col>
+            {
+              mode != 'view' &&
+              <Col span={24}>
+                <Form.Item
+                  label="巡查项"
+                  name="items"
+                  labelCol={{ span: 3 }}
+                  wrapperCol={{ span: 19 }}
+                  rules={[
+                    {
+                      required: true,
+                    },
+                  ]}
+                >
+                  <TreeSelect
+                    showSearch
+                    style={{
+                      width: '100%',
+                    }}
+                    dropdownStyle={{
+                      maxHeight: 400,
+                      overflow: 'auto',
+                    }}
+                    onChange={itemChange}
+                    allowClear
+                    treeDefaultExpandAll
+                    treeData={itemList}
+                    treeNodeFilterProp='title'
+                    treeCheckable={true}
+                    maxTagCount={1}
+                  />
+                </Form.Item>
+              </Col>
+            }
+
+
+            <Col span={24}>
+              <Form.Item
+                label="任务内容"
+                name="taskContent"
+                labelCol={{ span: 3 }}
+                wrapperCol={{ span: 19 }}
+              >
+                <Input.TextArea disabled={mode === 'view'} style={{ width: '100%', minHeight: '100px' }} allowClear />
+              </Form.Item>
+            </Col>
+
+            <Col span={12}>
+              <Form.Item
+                label="开始日期"
+                name="startDate"
+                rules={[
+                  {
+                    required: true,
+                  },
+                ]}
+                getValueFromEvent={(e, dateString) => dateString}
+                getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
+
+              >
+                <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                label="结束日期"
+                name="endDate"
+                rules={[
+                  {
+                    required: true,
+                  },
+                ]}
+                getValueFromEvent={(e, dateString) => dateString}
+                getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
+
+              >
+                <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
+              </Form.Item>
+            </Col>
+          </Row> : null
+        }
+        {(mode == 'view') &&
+          <>
+            <div
+              style={{ borderBottom: "1px solid #dfdfdf", width: "100%", paddingBottom: 5, display: "flex" }}>
+              <span style={{ padding: "0px 3px", backgroundColor: "#0079fe", marginRight: 20 }}></span>
+              <span>巡查信息</span>
+              {record?.jcskByRProcessVo?.status == 2 ?
+                <span style={{ marginLeft: "auto", marginRight: 30 }}>(异常项：<span style={{ color: "red" }}>{totals?.isNormalTotal}</span>，正常项：{totals?.normalTotal})</span>
+                : null
+              }
+            </div>
+            {
+              record?.jcskByRProcessVo?.status == 2 ?
+                <Tabs
+                  defaultActiveKey="1"
+                  items={tabsRender}
+                  tabBarStyle={{ marginLeft: 20 }}
+                />
+                :
+                <img
+                  src={`${process.env.PUBLIC_URL}/assets/noData.png`}
+                  alt=''
+                  style={{ marginLeft: '36%', marginTop: "3%" }}
+                />
+            }
+          </>
+        }
+        {
+          mode === 'view' ? null : (
+            <>
+              <Form.Item wrapperCol={{ span: 3, offset: 21 }} style={{ marginTop: "4%" }}>
+                <Button type="primary" htmlType="submit" >
+                  {mode === 'save' ? '提交' : '修改'}
+                </Button>
+              </Form.Item>
+            </>
+          )
+        }
+      </Form>
+      <div style={{ display: "none" }}>
+        <Image.PreviewGroup
+          preview={{
+            visible: imgVisible,
+            onVisibleChange: (vis) => setImgVisible(vis),
+          }}
+        >
+          {
+            imgList.length > 0 ? imgList.map(item => (
+              <Image src={url + item.filePath} key={item?.id} />
+            ))
+              : null
+          }
+
+        </Image.PreviewGroup>
+
+      </div>
+
+
+
+      <Modal
+        open={videoOpen}
+        width={800}
+        title="视频预览"
+        footer={null}
+        onCancel={() => setVideoOpen(false)}
+      >
+        <video
+          controls
+          src={url + videoParams?.filePath}
+          style={{ width: "100%", height: "100%" }}
+        />
+      </Modal>
+
+      <Modal
+        open={handleDetailsOpen}
+        width={800}
+        title="处理详情"
+        footer={null}
+        onCancel={() => setHandleDetailsOpen(false)}
+      >
+        <>
+          <Form
+            form={form1}
+            {...formItemLayout}
+            initialValues={handleDetails}
+          >
+            <Row>
+              <Col span={24}>
+                <Form.Item
+                  label="处理图片"
+                  name="picId"
+                  labelCol={{ span: 3 }}
+                  wrapperCol={{ span: 19 }}
+                >
+                  <Row gutter={[16]}>
+                    {
+                      handleImgfileList.length > 0 && handleImgfileList.map(file => {
+                        return (
+                          <Col span={12}>
+                            <div className={mode == "view" ? 'file-item view-file' : 'file-item'}  >
+                              <div className='file-description'>
+                                <Image width={60} src={url + file.response?.data?.filePath} alt='' />
+                                <span>{file.name}</span>
+                              </div>
+                            </div>
+                          </Col>
+                        )
+                      })
+                    }
+                  </Row>
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row>
+              <Col span={24}>
+                <Form.Item
+                  label="处理视频"
+                  name="picId"
+                  labelCol={{ span: 3 }}
+                  wrapperCol={{ span: 19 }}
+                >
+                  <Row gutter={[16]}>
+                    {
+                      handleVideoFileList.length > 0 && handleVideoFileList.map(file => {
+                        return (
+                          <Col span={12}>
+                            <div className={mode == "view" ? 'file-item view-file' : 'file-item'}  >
+                              <div className='file-description'>
+                                <div
+                                  onClick={() => { setVideoOpen(true); setVideoParams(file) }}
+                                  style={{ cursor: 'pointer' }}
+                                >
+                                  <VideoCameraOutlined
+                                    style={{ fontSize: 40 }}
+                                  />
+                                </div>
+                                <span>{file.name}</span>
+                              </div>
+                            </div>
+                          </Col>
+                        )
+                      })
+                    }
+                  </Row>
+                </Form.Item>
+              </Col>
+            </Row>
+            <Row>
+              <Col span={24}>
+                <Form.Item
+                  label="处理描述"
+                  name="handleDesc"
+                  labelCol={{ span: 3 }}
+                  wrapperCol={{ span: 19 }}
+                >
+                  <Input.TextArea disabled={mode === 'view'} style={{ width: '100%', minHeight: '100px' }} allowClear />
+                </Form.Item>
+              </Col>
+            </Row>
+          </Form>
+        </>
+      </Modal>
+
+    </div>
+  );
+}
+
+export default ModalForm;