页面搭建

src/service/apiurl.js

@@ -897,7 +897,148 @@ const apiurl = {
     weatherasin: service_fxdd + '/weather/basin', // 24小时流域统计
     weatherArea: service_fxdd + '/weather/area', // 24小时区域统计
     short: service_fxdd + '/weather/short/level ' // 短临预报量级统计
-  }
+  },
+
+
+
+  //檀树岗
+  // 全要素
+  dataResourcesCenter: {
+    projectAndWater: {
+      shuikuBasicinfo: {
+        detail: service_fxdd + "/attResBase/list",
+        update: service_fxdd + "/attResBase/update",
+        getFile:service_fxdd + "/attResBase/file/get"
+      },
+      kr: {
+        list: service_fxdd + "/stZvarlB/list",
+        save: service_fxdd + "/stZvarlB/insert",
+        update: service_fxdd + "/stZvarlB/update",
+        delete: service_fxdd + "/stZvarlB/del"
+      },
+      xl: {
+        list: service_fxdd + "/stZqrlB/list",
+        save: service_fxdd + "/stZqrlB/insert",
+        update: service_fxdd + "/stZqrlB/update",
+        delete: service_fxdd + "/stZqrlB/del"
+      },
+      mangerUnit: {
+        list: service_fxdd + "/resMangUnit/list",
+        update:service_fxdd + "/resMangUnit/update"
+      },
+      zrtx: {
+        list: service_fxdd + "/resSafePersonB/list",
+        save: service_fxdd + "/resSafePersonB/insert",
+        update: service_fxdd + "/resSafePersonB/update",
+        delete:service_fxdd + "/resSafePersonB/del"
+      },
+      monthLl: {
+        page: service_fxdd + "/resMonthEcoFlow/list",
+        update:service_fxdd + "/resMonthEcoFlow/updates"
+      },
+      fxya: {
+        page: service_fxdd + "/resPlanB/list",
+        update: service_fxdd + "/resPlanB/update",
+        save: service_fxdd + "/resPlanB/insert",
+        delete:service_fxdd + "/resPlanB/del",
+        getFile:service_fxdd + "/resPlanB/file/get"
+      },
+      sjtz: {
+        list: service_fxdd + "/attResBase/fileList",
+        upload: service_fxdd + "/attResBase/updateFile",
+        delete: service_fxdd + "/attResBase/del",
+      },
+      projectPic: {
+        list: service_fxdd + "/resProjectImg/list",
+        save: service_fxdd + "/resProjectImg/insert",
+        delete:service_fxdd + "/resProjectImg/del"
+      },
+      yhd: {
+        page: service_fxdd + '/attSpillwayBase/page',
+        save:service_fxdd + '/attSpillwayBase/insert',
+        update: service_fxdd + '/attSpillwayBase/update',
+        delete:service_fxdd + "/attSpillwayBase/del"
+      },
+      db: {
+        page: service_fxdd + '/attDamBase/page',
+        save:service_fxdd + '/attDamBase/insert',
+        update: service_fxdd + '/attDamBase/update',
+        delete: service_fxdd + "/attDamBase/del",
+        getFile:service_fxdd + "/attDamBase/get"
+      },
+      zf: {
+        page: service_fxdd + '/attGateValve/page',
+        save:service_fxdd + '/attGateValve/insert',
+        update: service_fxdd + '/attGateValve/update',
+        delete: service_fxdd + "/attGateValve/del",
+        getFile:service_fxdd + "/attGateValve/get"
+
+      },
+      lsy: {
+        page: service_fxdd + '/attMeaWeir/page',
+        save:service_fxdd + '/attMeaWeir/insert',
+        update: service_fxdd + '/attMeaWeir/update',
+        delete: service_fxdd + "/attMeaWeir/del",
+        list:service_fxdd+"/stAddvcdD/tree"
+      }
+    },
+    basicData: {
+      jczd: {
+        page: service_fxdd + "/stStbprpB/page",
+        save: service_fxdd + "/stStbprpB/insert",
+        update: service_fxdd + "/stStbprpB/update",
+        delete: service_fxdd + "/stStbprpB/del"
+      },
+      dmgl: {
+        page: service_fxdd + "/attDamProfile/page",
+        update: service_fxdd + "/attDamProfile/update",
+        save: service_fxdd + "/attDamProfile/insert",
+        delete: service_fxdd + "/attDamProfile/del",
+        getFile: service_fxdd + "/attDamProfile/file/get"
+      },
+      sysbgl: {
+        page: service_fxdd + "/osmoticPressDevice/page",
+        update: service_fxdd + "/osmoticPressDevice/update",
+        save: service_fxdd + "/osmoticPressDevice/insert",
+        delete: service_fxdd + "/osmoticPressDevice/del",
+        list:service_fxdd + "/osmoticPressDevice/list"
+      },
+      slsbgl: {
+        page: service_fxdd + "/osmoticFlowDevice/page",
+        update: service_fxdd + "/osmoticFlowDevice/update",
+        save: service_fxdd + "/osmoticFlowDevice/insert",
+        delete: service_fxdd + "/osmoticFlowDevice/del",
+        list:service_fxdd + "/osmoticFlowDevice/list"
+      },
+      sjzd: {
+        page: service_fxdd + "/sysDictB/page",
+        update: service_fxdd + "/sysDictB/update",
+        save: service_fxdd + "/sysDictB/insert",
+        delete: service_fxdd + "/sysDictB/del",
+      },
+      spjbxx: {
+        page: service_fxdd + "/attCctvBase/page",
+        update: service_fxdd + "/attCctvBase/update",
+        save: service_fxdd + "/attCctvBase/insert",
+        delete: service_fxdd + "/attCctvBase/del",
+        tree: service_fxdd + "/cctvBMenu/tree",
+        saveTree: service_fxdd + "/cctvBMenu/insert",
+        editTree: service_fxdd + "/cctvBMenu/update",
+        deleteTree: service_fxdd + "/cctvBMenu/del"
+      }
+    },
+    dygxb: {
+      zfysxt: {
+        page: service_fxdd + "/gateValveCctvRel/page",
+        save: service_fxdd + "/gateValveCctvRel/insert",
+        update: service_fxdd + "/gateValveCctvRel/update",
+        delete: service_fxdd + "/gateValveCctvRel/del",
+        zflist: service_fxdd + "/attGateValve/list",
+        splist:service_fxdd + "/attCctvBase/list"
+      }
+    }
+  },
+
 }
 
 export default apiurl

src/views/sq/qys/gcys/projectBasicInfo/index.js

@@ -45,7 +45,9 @@ export default function ProjectBasciInfo() {
 
     const getData = async () => {
         try {
+            
             const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.shuikuBasicinfo.detail)
+            // debugger;
             if (res.code == 200) {
                 form.setFieldsValue(res.data[0])
                 setData(res.data[0])

src/views/sz/szzf/ajdj/bajz.js

@@ -4,8 +4,25 @@ import { useForm } from 'antd/lib/form/Form';
 import { useState } from 'react';
 const { Dragger } = Upload;
 
+const list = [
+    {
+        type:'立案'
+    },
+    {
+        type:'调查取证'
+    },
+    {
+        type:'审查处理'
+    },
+    {
+        type:'送达执行'
+    },
+    {
+        type:'结案'
+    }
+]
 const Page = () => {
-    const form =useForm()
+    const [form] = Form.useForm();
     const [fileList ,setFileList] =useState()
     const props = {
         name: 'file',
@@ -31,10 +48,14 @@ const Page = () => {
 
     }
     return (
-        <Form form={form} name="searchTabel" onFinish={onFinish} >
+        <Form form={form}  onFinish={onFinish} >
             <Row>
-                <div>案卷存档</div>
+            <Col span={2}>
-                <Col>
+                <div style={{display:'flex',alignItems:'center'}}>
+                    <div style={{width:3,height:12,background:'blue',marginRight:5}}></div>
+                    案卷存档</div>
+                </Col>
+                <Col span={10}>
                     <Form.Item
                         label='保管人员'
                         name='name'
@@ -42,7 +63,7 @@ const Page = () => {
                         <Input />
                     </Form.Item>
                 </Col>
-                <Col>
+                <Col span={10}>
                     <Form.Item
                         label='保管地点'
                         name='adress'
@@ -51,9 +72,14 @@ const Page = () => {
                     </Form.Item>
                 </Col>
             </Row>
-            <Row>
+            {list.map(item=>(
-                <div>案卷存档</div>
+                <Row>
-                <Col>
+                <Col span={2}>
+                <div style={{display:'flex',alignItems:'center'}}>
+                <div style={{width:3,height:12,background:'blue',marginRight:5}}></div>
+                    {item.type}</div>
+                </Col>
+                <Col span={22}>
                     <Form.Item
                         label='附件'
                         name='name'
@@ -66,7 +92,7 @@ const Page = () => {
                         </Dragger>
                     </Form.Item>
                 </Col>
-            </Row>
+            </Row>))}
         </Form >
 
     )

src/views/sz/szzf/ajdj/editTabs.js

@@ -3,6 +3,7 @@ import { Tabs } from 'antd';
 import BascForm from '../form/index'
 import { basicData,clqkData,xzfy} from './config'
 import Bajz from './bajz'
+import Lsyx from './lsyx'
 const items = [
     {
         key: '1',
@@ -40,8 +41,8 @@ const Page = () => {
             {key==1&& <BascForm formJson={basicData}></BascForm>}
             {key==2&& <BascForm formJson={clqkData}></BascForm>}
             {key==3&& <BascForm formJson={xzfy}></BascForm>}
-            {key==4&& <Bajz formJson={basicData}></Bajz>}
+            {key==4&& <Bajz ></Bajz>}
-            {/* {key==5&& <BascForm formJson={basicData}></BascForm>} */}
+            {key==5&& <Lsyx ></Lsyx>}
             </>
         </>
     )

src/views/sz/szzf/ajdj/form.js

@@ -1,305 +0,0 @@
-import React, { useEffect, useState, useMemo, useRef } from 'react';
-import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Select } from 'antd';
-import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
-import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';
-import apiurl from '../../../../service/apiurl';
-
-// import "./index.less"
-import moment from 'moment';
-const { RangePicker } = DatePicker
-const { Dragger } = Upload;
-const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
-
-const opntios=[
-  {label:'宪法',value:'宪法'},
-  {label:'法律',value:'法律'},
-  {label:'行政法规',value:'行政法规'},
-  {label:'督察法规',value:'督察法规'},
-  {label:'司法解释',value:'司法解释'},
-  {label:'地方性法规',value:'地方性法规'},
-]
-const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
-
-  const [form] = Form.useForm();
-  const [fileList, setFileList] = useState([]) //上传文件列表
-  const [fileIds, setFileIds] = useState([])
-  const [iframeSrc, setIframeSrc] = useState('')
-  const [pdfViewOPen, setPdfViewOPen] = useState(false)
-
-  const [loading, setLoading] = useState(false)
-
-  /**
-   * @description 文件下载
-   * @param {String} params 文件fileId
-   */
-  const download = (params) => {
-    let downloadLink = document.createElement("a");
-    downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xyt/projectEvents/file/download/${params}`;
-    downloadLink.download = `${params.fileName}`;
-    downloadLink.style.display = "none";
-    // 将链接添加到页面中
-    document.body.appendChild(downloadLink);
-
-    // 模拟点击事件，开始下载
-    downloadLink.click();
-  }
-  /**
-    * @description 上传图片
-    * @param {string}  file 上传的文件
-    */
-  const fileChange = (info) => {
-    if (info.file.status === "done") {
-      setLoading(false);
-    }
-    if (info.file.status === "uploading") {
-      setLoading(true);
-    }
-    if (info.file.status === "error") {
-      message.error("文件上传失败")
-      setLoading(false);
-    }
-    let fileIds = info.fileList.map(file => {
-      return file.response?.data?.fileId
-    })
-    setFileIds(fileIds)
-    setFileList(info.fileList)
-  }
-  /**
-   * @description pdf文件预览
-   * @param {String} params 文件预览url
-   */
-  const viewPdf = (params) => {
-    setIframeSrc(params)
-    setPdfViewOPen(true)
-  }
-
-
-  const onfinish = (values) => {
-    values.eventsDate = values.eventsDate ? moment(values.eventsDate).format("YYYY-MM-DD 00:00:00") : ''
-    let oldFiles = fileList.map(item => ({ fileId: item.response?.data?.fileId }))
-    if (mode === 'edit') {
-      values.files = oldFiles;
-      values.id = record.id;
-      onEdit(apiurl.rcgl.gcdsj.edit, values)
-    }
-    if (mode === 'save') {
-      values.files = oldFiles
-      onSave(apiurl.rcgl.gcdsj.save, values)
-    }
-  }
-
-  /**
- * @description 删除上传的图片
- * @param {string}  id 删除的id
- */
-  const deleteFile = (fileId) => {
-    console.log(fileId);
-    let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
-    setFileList(filterFile)
-  }
-  useEffect(() => {
-    if (mode != 'save') {
-      const imgFile = record?.files?.map(o => ({
-        name: o.fileName,
-        response: {
-          data: {
-            filePath: o.filePath,
-            fileId: o.fileId
-          }
-        },
-      }))
-      setFileList(imgFile)
-    }
-  }, [record, mode])
-
-
-
-  return (
-    <>
-      <Form
-        form={form}
-        {...formItemLayout}
-        onFinish={onfinish}
-        initialValues={record}
-      >
-        <Row>
-          <Col span={12}>
-            <Form.Item
-              label="标题"
-              name="name"
-              rules={[{ required: true }]}
-            >
-              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item
-              label="制定机关"
-              name="name"
-              rules={[{ required: true }]}
-            >
-              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item label="制定机关" name="name">
-              <Select allowClear style={{ width: '150px' }} options={opntios} />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item label="失效性" name="name">
-              <Select allowClear style={{ width: '150px' }} options={opntios} />
-            </Form.Item>
-          </Col>
-
-          <Col span={12}>
-            <Form.Item
-              label="公布日期"
-              name="eventsDate"
-              getValueFromEvent={(e, dateString) => dateString}
-              getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
-              rules={[
-                {
-                  required: true,
-                },
-              ]}
-            >
-              <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item
-              label="施行日期"
-              name="eventsDate"
-              getValueFromEvent={(e, dateString) => dateString}
-              getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
-              rules={[
-                {
-                  required: true,
-                },
-              ]}
-            >
-              <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
-            </Form.Item>
-          </Col>
-        </Row>
-
-        <Row>
-          <Col span={24}>
-            <Form.Item
-              label="附件"
-              name="fieldId"
-              labelCol={{ span: 3 }}
-              wrapperCol={{ span: 19 }}
-            >
-              {mode !== "view" &&
-                <Dragger
-                  name='file'
-                  // multiple
-                  action="/gunshiApp/xyt/projectEvents/file/upload/singleSimple"
-                  onChange={fileChange}
-                  onDrop={(info) => { console.log(info.dataTransfer.files); }}
-                  fileList={fileList}
-                  disabled={loading}
-                // onSuccess={handleSuccess}
-                >
-                  <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
-                  <p className="ant-upload-hint">
-                    支持扩展名：.doc .docx .pdf .jpg .png .ppt
-                  </p>
-                </Dragger>
-              }
-              <Row gutter={[16]}>
-                {
-                  fileList.length > 0 && fileList.map(file => {
-                    return (
-                      <Col span={12}>
-                        <div className="file-item" style={{ width: "75%" }}>
-                          <div className='file-description'>
-                            {file.name.indexOf('.docx') > -1 ?
-                              <div
-                                onClick={() => { download(file.response?.data?.fileId) }}
-                                style={{ cursor: 'pointer' }}
-                              >
-                                <FileWordOutlined
-                                  style={{ fontSize: 40 }}
-                                />
-                              </div>
-                              :
-                              file.name.indexOf('.pdf') > -1 ?
-                                <div
-                                  onClick={() => { viewPdf(file.response?.data?.fileId) }}
-                                  style={{ cursor: 'pointer' }}
-                                >
-                                  <FilePdfOutlined style={{ fontSize: 40 }} />
-                                </div>
-                                :
-                                file.name.indexOf('.zip') > -1 ?
-                                  <div
-                                    onClick={() => { download(file.response?.data?.fileId) }}
-                                    style={{ cursor: 'pointer' }}
-                                  >
-                                    <FileZipOutlined style={{ fontSize: 40 }} />
-                                  </div>
-                                  :
-                                  file.name.indexOf('.xlsx') > -1 ?
-                                    <div
-                                      onClick={() => { download(file.response?.data?.fileId) }}
-                                      style={{ cursor: 'pointer' }}
-                                    >
-                                      <FileExcelOutlined style={{ fontSize: 40 }} />
-                                    </div>
-                                    :
-                                    <Image width={60} src={url + file.response?.data?.filePath} alt='' />
-                            }
-                            <span>{file.name}</span>
-                          </div>
-                          <div className={mode == "view" ? 'delete-icon disable-icon' : 'delete-icon'} onClick={() => deleteFile(file.response?.data?.fileId)}>
-                            <DeleteOutlined />
-                          </div>
-                        </div>
-                      </Col>
-                    )
-                  })
-                }
-              </Row>
-            </Form.Item>
-          </Col>
-        </Row>
-        {
-          mode === 'view' ? null : (
-            <>
-              <Form.Item {...btnItemLayout}>
-                <Button type="primary" htmlType="submit">
-                  {mode === 'save' ? '提交' : '修改'}
-                </Button>
-              </Form.Item>
-            </>
-          )
-        }
-      </Form>
-      <Modal
-        open={pdfViewOPen}
-        width={1000}
-        title=""
-        footer={null}
-        style={{ marginTop: "-5%" }}
-        onCancel={() => {
-          setPdfViewOPen(false)
-        }}
-      >
-        <iframe
-          style={{
-            height: '80vh',
-            width: '100%',
-            border: 0,
-            marginTop: 20,
-          }}
-          src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/projectEvents/file/download/${iframeSrc}`)}`}
-        />
-      </Modal>
-    </>
-  );
-}
-
-export default ModalForm;

src/views/sz/szzf/ajdj/index.js

@@ -109,7 +109,7 @@ const Page = () => {
                         />
                     </Card>
                     <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
-                        <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
+                        <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width, y: "calc( 100vh - 400px )" }} dataSource={[{name:1}]}/>
                     </div>
                 </div>
 

src/views/sz/szzf/ajdj/lsyx.js

@@ -0,0 +1,69 @@
+import { Space, Table, Radio, DatePicker, Form, Select, Button, message, Upload, Input, Row, Col, Switch, Image } from 'antd';
+import { InboxOutlined, LinkOutlined, DeleteOutlined, LoadingOutlined,VerticalAlignBottomOutlined } from '@ant-design/icons'
+import { useForm } from 'antd/lib/form/Form';
+import { useState } from 'react';
+const { Dragger } = Upload;
+
+const list = [
+    {
+        type:'整改前'
+    },
+    {
+        type:'整改后'
+    }
+]
+const Page = () => {
+    const [form] = Form.useForm();
+    const [fileList ,setFileList] =useState()
+    const props = {
+        name: 'file',
+        multiple: true,
+        fileList: fileList,
+        showUploadList: false,
+        beforeUpload: (file, fileList) => { 
+            // if (fileType == "pic" &&
+            //     (file.type != "image/jpeg" || file.type != "image/png" || file.type != "image/jpg")) {
+            //     message.error('仅支持上传jpg/png/jpeg格式的图片');
+            //     return false;
+            // } else {
+            //     return true;
+            // }
+        },
+        onChange(e) {
+            // httpPostFile(apiUrl.service.uploadFile.uploadUrl + "?group=" + typeUpload, e).then(res => {
+            //     setFileList([...fileList, res.data])
+            // })
+        }
+    };
+    const onFinish = () =>{
+
+    }
+    return (
+        <Form form={form}  onFinish={onFinish} >
+            {list.map(item=>(
+                <Row>
+                <Col span={2}>
+                <div style={{display:'flex',alignItems:'center'}}>
+                <div style={{width:3,height:12,background:'blue',marginRight:5}}></div>
+                    {item.type}</div>
+                </Col>
+                <Col span={22}>
+                    <Form.Item
+                        label='附件'
+                        name='name'
+                    >
+                        <Dragger {...props}>
+                            <p className="ant-upload-drag-icon">
+                                <InboxOutlined />
+                            </p>
+                            <p className="ant-upload-text">点击或将文件拖拽到这里上传 支持扩展名：jpeg、png</p>
+                        </Dragger>
+                    </Form.Item>
+                </Col>
+            </Row>))}
+        </Form >
+
+    )
+}
+
+export default Page

src/views/sz/szzf/ajtj/barCharts.js

@@ -0,0 +1,91 @@
+import dayjs from 'dayjs';
+import { Space, Table, Tag, DatePicker, Form, Select, Button, Card } from 'antd';
+import ReactECharts from 'echarts-for-react';
+import { useEffect, useState,useMemo } from 'react';
+
+const Page = ({title}) => {
+    const [echart2, setEchart2] = useState(Object())
+    const [inspectordata, setInspectorData] = useState([{}])
+    const [plandata, setPlanData] = useState(Object())
+    const [problemdata, setProblemData] = useState(Object())
+    const getPlanOption = useMemo((name, data) => {
+        // let total = 0
+        // for (let i = 0; i < data.length; i++) {
+        //     total = total + Number(data[i].value)
+        // }
+        return {
+            title: {},
+            tooltip: {},
+            // legend: {
+            //     data: name
+            // },
+            graphic: {
+                type: 'text',
+                top: 'center',
+                left: 'center',
+                style: {
+                    text: `总计\n${0}`,
+                    fontSize: 20,
+                    fontWeight: 'bold',
+                    // textAlign: 'center'
+                }
+            },
+            series: {
+                name: '圆环图系列名称',
+                type: 'pie',
+                // center: ['50%', '50%'],
+                // radius: ['35%', '50%'],
+                hoverAnimation: true,
+                data: plandata,
+                label: {
+                    normal: {
+                        show: true,
+                        position: 'outside',
+                        formatter: '{c}'
+                    }
+                }
+            }
+
+
+        }
+    },[plandata])
+    console.log(getPlanOption);
+    
+    const onOk = (event, index) => {
+        if (event !== null) {
+            let params = {
+                stm: dayjs(new Date(event[0])).format('YYYY-MM-DD'),
+                etm: dayjs(new Date(event[1])).format('YYYY-MM-DD'),
+            }
+            // getStm(params, index)
+        }
+    }
+    useEffect(()=>{
+        let data = [
+            { value: 1048, name: 'Search Engine' },
+            { value: 735, name: 'Direct' },
+            { value: 580, name: 'Email' },
+            { value: 484, name: 'Union Ads' },
+            { value: 300, name: 'Video Ads' }
+          ]
+          setPlanData(data)
+    })
+    return (
+        <>
+            <div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+                <div style={{ fontSize: 20, fontWeight: 'bold' }}>{title}</div>
+                <DatePicker.RangePicker
+                    style={{ width: 220, }}
+                    onChange={(e, index) => onOk(e, 2)}
+                    defaultValue={[dayjs().startOf("year"), dayjs()]}
+                ></DatePicker.RangePicker>
+            </div>
+            <ReactECharts
+                ref={(e) => setEchart2(e)}
+                option={getPlanOption}
+                style={{ height: 350 }}
+            />
+        </>
+    )
+}
+export default Page

src/views/sz/szzf/ajtj/bincharts.js

@@ -0,0 +1,91 @@
+import dayjs from 'dayjs';
+import { Space, Table, Tag, DatePicker, Form, Select, Button, Card } from 'antd';
+import ReactECharts from 'echarts-for-react';
+import { useEffect, useState,useMemo } from 'react';
+
+const Page = ({title}) => {
+    const [echart2, setEchart2] = useState(Object())
+    const [inspectordata, setInspectorData] = useState([{}])
+    const [plandata, setPlanData] = useState(Object())
+    const [problemdata, setProblemData] = useState(Object())
+    const getPlanOption = useMemo((name, data) => {
+        // let total = 0
+        // for (let i = 0; i < data.length; i++) {
+        //     total = total + Number(data[i].value)
+        // }
+        return {
+            title: {},
+            tooltip: {},
+            // legend: {
+            //     data: name
+            // },
+            graphic: {
+                type: 'text',
+                top: 'center',
+                left: 'center',
+                style: {
+                    text: `总计\n${0}`,
+                    fontSize: 20,
+                    fontWeight: 'bold',
+                    // textAlign: 'center'
+                }
+            },
+            series: {
+                name: '圆环图系列名称',
+                type: 'pie',
+                center: ['50%', '50%'],
+                radius: ['60%', '80%'],
+                hoverAnimation: true,
+                data: plandata,
+                label: {
+                    normal: {
+                        show: true,
+                        position: 'outside',
+                        formatter: '{c}'
+                    }
+                }
+            }
+
+
+        }
+    },[plandata])
+    console.log(getPlanOption);
+    
+    const onOk = (event, index) => {
+        if (event !== null) {
+            let params = {
+                stm: dayjs(new Date(event[0])).format('YYYY-MM-DD'),
+                etm: dayjs(new Date(event[1])).format('YYYY-MM-DD'),
+            }
+            // getStm(params, index)
+        }
+    }
+    useEffect(()=>{
+        let data = [
+            { value: 1048, name: 'Search Engine' },
+            { value: 735, name: 'Direct' },
+            { value: 580, name: 'Email' },
+            { value: 484, name: 'Union Ads' },
+            { value: 300, name: 'Video Ads' }
+          ]
+          setPlanData(data)
+    })
+    return (
+        <>
+            <div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+                <div style={{ fontSize: 20, fontWeight: 'bold' }}>{title}</div>
+                <DatePicker.RangePicker
+                    style={{ width: 220, }}
+                    onChange={(e, index) => onOk(e, 2)}
+                    defaultValue={[dayjs().startOf("year"), dayjs()]}
+                ></DatePicker.RangePicker>
+            </div>
+            <ReactECharts
+                ref={(e) => setEchart2(e)}
+                option={getPlanOption}
+                style={{ height: 350 }}
+            />
+        </>
+    )
+}
+export default Page

src/views/sz/szzf/ajtj/form.js

@@ -1,307 +0,0 @@
-import React, { useEffect, useState, useMemo, useRef } from 'react';
-import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Select } from 'antd';
-import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
-import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';
-
-import apiurl from '../../../../service/apiurl';
-
-
-// import "./index.less"
-import moment from 'moment';
-const { RangePicker } = DatePicker
-const { Dragger } = Upload;
-const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
-
-const opntios=[
-  {label:'宪法',value:'宪法'},
-  {label:'法律',value:'法律'},
-  {label:'行政法规',value:'行政法规'},
-  {label:'督察法规',value:'督察法规'},
-  {label:'司法解释',value:'司法解释'},
-  {label:'地方性法规',value:'地方性法规'},
-]
-const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
-
-  const [form] = Form.useForm();
-  const [fileList, setFileList] = useState([]) //上传文件列表
-  const [fileIds, setFileIds] = useState([])
-  const [iframeSrc, setIframeSrc] = useState('')
-  const [pdfViewOPen, setPdfViewOPen] = useState(false)
-
-  const [loading, setLoading] = useState(false)
-
-  /**
-   * @description 文件下载
-   * @param {String} params 文件fileId
-   */
-  const download = (params) => {
-    let downloadLink = document.createElement("a");
-    downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xyt/projectEvents/file/download/${params}`;
-    downloadLink.download = `${params.fileName}`;
-    downloadLink.style.display = "none";
-    // 将链接添加到页面中
-    document.body.appendChild(downloadLink);
-
-    // 模拟点击事件，开始下载
-    downloadLink.click();
-  }
-  /**
-    * @description 上传图片
-    * @param {string}  file 上传的文件
-    */
-  const fileChange = (info) => {
-    if (info.file.status === "done") {
-      setLoading(false);
-    }
-    if (info.file.status === "uploading") {
-      setLoading(true);
-    }
-    if (info.file.status === "error") {
-      message.error("文件上传失败")
-      setLoading(false);
-    }
-    let fileIds = info.fileList.map(file => {
-      return file.response?.data?.fileId
-    })
-    setFileIds(fileIds)
-    setFileList(info.fileList)
-  }
-  /**
-   * @description pdf文件预览
-   * @param {String} params 文件预览url
-   */
-  const viewPdf = (params) => {
-    setIframeSrc(params)
-    setPdfViewOPen(true)
-  }
-
-
-  const onfinish = (values) => {
-    values.eventsDate = values.eventsDate ? moment(values.eventsDate).format("YYYY-MM-DD 00:00:00") : ''
-    let oldFiles = fileList.map(item => ({ fileId: item.response?.data?.fileId }))
-    if (mode === 'edit') {
-      values.files = oldFiles;
-      values.id = record.id;
-      onEdit(apiurl.rcgl.gcdsj.edit, values)
-    }
-    if (mode === 'save') {
-      values.files = oldFiles
-      onSave(apiurl.rcgl.gcdsj.save, values)
-    }
-  }
-
-  /**
- * @description 删除上传的图片
- * @param {string}  id 删除的id
- */
-  const deleteFile = (fileId) => {
-    console.log(fileId);
-    let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
-    setFileList(filterFile)
-  }
-  useEffect(() => {
-    if (mode != 'save') {
-      const imgFile = record?.files?.map(o => ({
-        name: o.fileName,
-        response: {
-          data: {
-            filePath: o.filePath,
-            fileId: o.fileId
-          }
-        },
-      }))
-      setFileList(imgFile)
-    }
-  }, [record, mode])
-
-
-
-  return (
-    <>
-      <Form
-        form={form}
-        {...formItemLayout}
-        onFinish={onfinish}
-        initialValues={record}
-      >
-        <Row>
-          <Col span={12}>
-            <Form.Item
-              label="标题"
-              name="name"
-              rules={[{ required: true }]}
-            >
-              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item
-              label="制定机关"
-              name="name"
-              rules={[{ required: true }]}
-            >
-              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item label="制定机关" name="name">
-              <Select allowClear style={{ width: '150px' }} options={opntios} />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item label="失效性" name="name">
-              <Select allowClear style={{ width: '150px' }} options={opntios} />
-            </Form.Item>
-          </Col>
-
-          <Col span={12}>
-            <Form.Item
-              label="公布日期"
-              name="eventsDate"
-              getValueFromEvent={(e, dateString) => dateString}
-              getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
-              rules={[
-                {
-                  required: true,
-                },
-              ]}
-            >
-              <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item
-              label="施行日期"
-              name="eventsDate"
-              getValueFromEvent={(e, dateString) => dateString}
-              getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
-              rules={[
-                {
-                  required: true,
-                },
-              ]}
-            >
-              <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
-            </Form.Item>
-          </Col>
-        </Row>
-
-        <Row>
-          <Col span={24}>
-            <Form.Item
-              label="附件"
-              name="fieldId"
-              labelCol={{ span: 3 }}
-              wrapperCol={{ span: 19 }}
-            >
-              {mode !== "view" &&
-                <Dragger
-                  name='file'
-                  // multiple
-                  action="/gunshiApp/xyt/projectEvents/file/upload/singleSimple"
-                  onChange={fileChange}
-                  onDrop={(info) => { console.log(info.dataTransfer.files); }}
-                  fileList={fileList}
-                  disabled={loading}
-                // onSuccess={handleSuccess}
-                >
-                  <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
-                  <p className="ant-upload-hint">
-                    支持扩展名：.doc .docx .pdf .jpg .png .ppt
-                  </p>
-                </Dragger>
-              }
-              <Row gutter={[16]}>
-                {
-                  fileList.length > 0 && fileList.map(file => {
-                    return (
-                      <Col span={12}>
-                        <div className="file-item" style={{ width: "75%" }}>
-                          <div className='file-description'>
-                            {file.name.indexOf('.docx') > -1 ?
-                              <div
-                                onClick={() => { download(file.response?.data?.fileId) }}
-                                style={{ cursor: 'pointer' }}
-                              >
-                                <FileWordOutlined
-                                  style={{ fontSize: 40 }}
-                                />
-                              </div>
-                              :
-                              file.name.indexOf('.pdf') > -1 ?
-                                <div
-                                  onClick={() => { viewPdf(file.response?.data?.fileId) }}
-                                  style={{ cursor: 'pointer' }}
-                                >
-                                  <FilePdfOutlined style={{ fontSize: 40 }} />
-                                </div>
-                                :
-                                file.name.indexOf('.zip') > -1 ?
-                                  <div
-                                    onClick={() => { download(file.response?.data?.fileId) }}
-                                    style={{ cursor: 'pointer' }}
-                                  >
-                                    <FileZipOutlined style={{ fontSize: 40 }} />
-                                  </div>
-                                  :
-                                  file.name.indexOf('.xlsx') > -1 ?
-                                    <div
-                                      onClick={() => { download(file.response?.data?.fileId) }}
-                                      style={{ cursor: 'pointer' }}
-                                    >
-                                      <FileExcelOutlined style={{ fontSize: 40 }} />
-                                    </div>
-                                    :
-                                    <Image width={60} src={url + file.response?.data?.filePath} alt='' />
-                            }
-                            <span>{file.name}</span>
-                          </div>
-                          <div className={mode == "view" ? 'delete-icon disable-icon' : 'delete-icon'} onClick={() => deleteFile(file.response?.data?.fileId)}>
-                            <DeleteOutlined />
-                          </div>
-                        </div>
-                      </Col>
-                    )
-                  })
-                }
-              </Row>
-            </Form.Item>
-          </Col>
-        </Row>
-        {
-          mode === 'view' ? null : (
-            <>
-              <Form.Item {...btnItemLayout}>
-                <Button type="primary" htmlType="submit">
-                  {mode === 'save' ? '提交' : '修改'}
-                </Button>
-              </Form.Item>
-            </>
-          )
-        }
-      </Form>
-      <Modal
-        open={pdfViewOPen}
-        width={1000}
-        title=""
-        footer={null}
-        style={{ marginTop: "-5%" }}
-        onCancel={() => {
-          setPdfViewOPen(false)
-        }}
-      >
-        <iframe
-          style={{
-            height: '80vh',
-            width: '100%',
-            border: 0,
-            marginTop: 20,
-          }}
-          src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/projectEvents/file/download/${iframeSrc}`)}`}
-        />
-      </Modal>
-    </>
-  );
-}
-
-export default ModalForm;

src/views/sz/szzf/ajtj/index.js

@@ -1,150 +1,28 @@
-import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
+import Charts from './bincharts'
-import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
+import BarCharts from './barCharts'
-import { Table, Card, Modal, Form, Input, Button, Row, Col, Timeline, message, Tabs, Image } from 'antd';
+import LineCharts from './lincharts'
-import { FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
-import { useSelector } from 'react-redux';
-import ToolBar from './toolbar';
-import ModalForm from './form';
-import apiurl from '../../../../service/apiurl';
-import usePageTable from '../../../../components/crud/usePageTable2';
-import { createCrudService } from '../../../../components/crud/_';
-import { CrudOpRender_text } from '../../../../components/crud/CrudOpRender';
 
-const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
 const Page = () => {
-    const role = useSelector(state => state.auth.role);
-    const editBtn = role?.rule?.find(item => item.menuName == "编辑");
-    const viewBtn = role?.rule?.find(item => item.menuName == "查看");
-    const delBtn = role?.rule?.find(item => item.menuName == "删除");
-    const refModal = useRef();
-    const [searchVal, setSearchVal] = useState(false)
-    const [iframeSrc, setIframeSrc] = useState('')
-    const [pdfViewOPen, setPdfViewOPen] = useState(false)
-    const [isFetch, setIsFetch] = useState(false)
-    const columns = [
-        { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
-        { title: '标题', key: 'name', dataIndex: 'name', width: 250, ellipsis: true },
-        {
-            title: '制定机关', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
-        },
-        {
-            title: '法律性质', key: 'eventsType', dataIndex: 'eventsType', width: 140,
-            render: (value) => <span>{value == 1 ? "综合大事记" : value == 2 ? "专题大事记" : ''}</span>,
-        },
-        {
-            title: '时效性', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
-        },
-        {
-            title: '公布日期', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
-        },
-        {
-            title: '施行日期', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
-        },
-        {
-            title: '上传时间', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
-        },
-        {
-            title: '附件', key: 'fileName', dataIndex: 'fileName', width: 300,render:(v,r)=><a onClick={()=>viewPdf(r.fileId)}>{v}</a>
-        },
-        {
-            title: '操作', key: 'operation', width: 240, fixed: 'right', align: 'center',
-            render: (value, row, index) => (
-                <CrudOpRender_text
-                    edit={true}
-                    del={true}
-                    view={true}
-                    command={(cmd) => () => command(cmd)(row)} />)
-        },
-    ];
-
-
-    const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
-
-    const command = (type) => (params) => {
-        if (type === 'save') {
-            refModal.current.showSave();
-        } else if (type === 'edit') {
-            refModal.current.showEdit({ ...params });
-        } else if (type === 'view') {
-            refModal.current.showView(params);
-        } else if (type === 'del') {
-            refModal.current.onDeleteGet(apiurl.rcgl.gcdsj.delete + `/${params.id}`);
-        }
-    }
-
-
-    const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.gcdsj.page).find_noCode);
-
-    /**
-      * @description 处理成功的回调
-      */
-    const successCallback = () => {
-        refresh()
-        setIsFetch(!isFetch)
-    }
-
-    const viewPdf = (params) => {
-        setIframeSrc(params)
-        setPdfViewOPen(true)
-      }
-    useEffect(() => {
-        const params = {
-            search: {
-                ...searchVal,
-            }
-        };
-        search(params)
-    }, [searchVal])
-
 
     return (
         <>
-            <div className='content-root clearFloat xybm' style={{ paddingRight: "0", paddingBottom: "0" }}>
+            <div style={{ display: 'flex',height:'50%'}}>
-                <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
+                <div style={{width:'33%',backgroundColor:'#ffffff',margin:5,padding:10}}>
-                    <Card className='nonebox'>
+                    <Charts />
-                        <ToolBar
+                </div>
-                            setSearchVal={setSearchVal}
+                <div style={{width:'33%',backgroundColor:'#ffffff',margin:5,padding:10}}>
-                            onSave={command('save')}
+                    <Charts />
-                            role={role}
+                </div>
-                        />
+                <div style={{width:'33%',backgroundColor:'#ffffff',margin:5,padding:10}}>
-                    </Card>
+                    <BarCharts />
-                    <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
-                        <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
-                    </div>
                 </div>
 
-                <BasicCrudModal
+            </div>
-                    width={1000}
+            <div style={{backgroundColor:'#ffffff',padding:10,height:'50%'}}>
-                    ref={refModal}
+                <LineCharts />
-                    title=""
-                    component={ModalForm}
-                    onCrudSuccess={successCallback}
-                // onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
-                />
             </div>
 
-            <Modal
-                open={pdfViewOPen}
-                width={1000}
-                title=""
-                footer={null}
-                style={{ marginTop: "-5%" }}
-                onCancel={() => {
-                    setPdfViewOPen(false)
-                }}
-            >
-                <iframe
-                    style={{
-                        height: '80vh',
-                        width: '100%',
-                        border: 0,
-                        marginTop: 20,
-                    }}
-                    src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/projectEvents/file/download/${iframeSrc}`)}`}
-                />
-            </Modal>
         </>
-    );
+    )
 }
-
+export default Page
-export default Page;

src/views/sz/szzf/ajtj/lincharts.js

@@ -0,0 +1,92 @@
+import dayjs from 'dayjs';
+import { Space, Table, Tag, DatePicker, Form, Select, Button, Card } from 'antd';
+import ReactECharts from 'echarts-for-react';
+import { useEffect, useState, useMemo } from 'react';
+import { encode } from 'punycode';
+
+const Page = ({ title }) => {
+    const [echart2, setEchart2] = useState(Object())
+    const [inspectordata, setInspectorData] = useState([{}])
+    const [plandata, setPlanData] = useState([])
+    const [problemdata, setProblemData] = useState(Object())
+    const getPlanOption = useMemo((name, data) => {
+        return {
+            tooltip: {
+                trigger: 'axis',
+                position: ['20%', '50%'],
+
+            },
+            legend: {
+                data: ['运行调度指令'],
+            },
+
+            dataset: [
+                { source: plandata },
+            ]
+            ,
+            xAxis:
+            {
+                type: 'category',
+            }
+            ,
+            yAxis: [
+                {
+                    name: 'mm',
+                    type: 'value'
+                }
+            ],
+            series: [
+                {
+                    name: '2量',
+                    type: 'line',
+                    datasetIndex: 0,
+                    encode: {
+                      x: 'name',
+                      y: 'value'
+                    },
+                    itemStyle: {
+                      color: 'skyblue'
+                    }
+                  },
+
+            ]
+        }
+    }, [plandata])
+
+    const onOk = (event, index) => {
+        if (event !== null) {
+            let params = {
+                stm: dayjs(new Date(event[0])).format('YYYY-MM-DD'),
+                etm: dayjs(new Date(event[1])).format('YYYY-MM-DD'),
+            }
+        }
+    }
+    useEffect(() => {
+        let data = [
+            { value: 1048, name: 'Search Engine' },
+            { value: 735, name: 'Direct' },
+            { value: 580, name: 'Email' },
+            { value: 484, name: 'Union Ads' },
+            { value: 300, name: 'Video Ads' }
+        ]
+        setPlanData(data)
+    })
+    return (
+        <>
+            <div className='top' style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+                <div style={{ fontSize: 20, fontWeight: 'bold' }}>{title}</div>
+                <DatePicker.RangePicker
+                    style={{ width: 220, }}
+                    onChange={(e, index) => onOk(e, 2)}
+                    defaultValue={[dayjs().startOf("year"), dayjs()]}
+                ></DatePicker.RangePicker>
+            </div>
+            <ReactECharts
+                ref={(e) => setEchart2(e)}
+                option={getPlanOption}
+                style={{ height: 350 }}
+            />
+        </>
+    )
+}
+export default Page

src/views/sz/szzf/ajtj/toolbar.js

@@ -1,91 +0,0 @@
-import React, { useEffect,useState } from 'react';
-import { Form, Input, Button, DatePicker, Select } from 'antd';
-import { DownOutlined, UpOutlined } from '@ant-design/icons'
-
-import moment from 'moment';
-const { RangePicker } = DatePicker;
-const ToolBar = ({ setSearchVal, onSave, storeData,role }) => {
-  const addBtn = role?.rule?.find(item => item.menuName == "新增");
-  const searchBtn = role?.rule?.find(item => item.menuName == "查询");
-  const [form] = Form.useForm();
-  const [showGj , setShowGj] =useState(false)
-  const onFinish = (values) => {
-    let dataSo;
-    if (values.tm) {
-      dataSo = {
-        start: moment(values.tm[0]).format('YYYY-MM-DD HH:mm:ss'),
-        end: moment(values.tm[1]).format('YYYY-MM-DD HH:mm:ss')
-      }
-    }
-    delete values.tm
-    setSearchVal({...values, dataSo});
-  }
-
-  const opntios=[
-    {label:'宪法',value:'宪法'},
-    {label:'法律',value:'法律'},
-    {label:'行政法规',value:'行政法规'},
-    {label:'督察法规',value:'督察法规'},
-    {label:'司法解释',value:'司法解释'},
-    {label:'地方性法规',value:'地方性法规'},
-  ]
-  const styles={
-    fontFamily: '微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif',
-    fontWeight: '700',
-    fontStyle: 'normal',
-    fontSize: '16px'
-  }
-  return (
-    <>
-      <div style={{display:'flex',justifyContent:'space-between'}}>
-        <Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
-          <div style={{display:'flex'}}>
-          <Form.Item label="标题" name="name">
-            <Input allowClear  style={{width:'150px'}}/>
-          </Form.Item>
-          <Form.Item label="制定机关" name="name">
-            <Input allowClear  style={{width:'150px'}}/>
-          </Form.Item>
-          <Form.Item label="制定机关" name="name">
-            <Select allowClear  style={{width:'150px'}} options={opntios}/>
-          </Form.Item>
-          <Form.Item>
-            <Button type="primary" htmlType="submit">查询</Button>
-          </Form.Item>
-          
-          <Form.Item>
-            <Button onClick={() => form.resetFields()}>重置</Button>
-          </Form.Item>
-         
-          {
-            (onSave) ?
-              <Form.Item>
-                <Button onClick={onSave}>新增</Button>
-              </Form.Item>
-            :null
-          }
-           <Form.Item>
-            <div style={styles} onClick={()=>setShowGj(!showGj)}>高级搜索 {!showGj&&<DownOutlined />} {showGj&&<UpOutlined />}</div>
-          </Form.Item>
-          </div>
-          {showGj&&<div style={{display:'flex'}}>
-          <Form.Item label="时效性" name="name">
-            <Select allowClear  style={{width:'150px'}} options={opntios}/>
-          </Form.Item>
-          <Form.Item label="公布日期" name="name">
-            <RangePicker allowClear />
-          </Form.Item>
-          <Form.Item label="施行日期" name="name">
-            <RangePicker allowClear />
-          </Form.Item>
-          <Form.Item label="上传时间" name="name">
-            <RangePicker allowClear />
-          </Form.Item>
-          </div>}
-        </Form>
-      </div>
-    </>
-  );
-}
-
-export default ToolBar;

src/views/sz/szzf/clyj/content.js

@@ -0,0 +1,55 @@
+import styles from './content.module.less'
+import { Button } from 'antd'
+import ModalForm from './form';
+import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
+import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
+const Page = ({ data }) => {
+    const refModal = useRef();
+
+    /**
+  * @description 处理成功的回调
+  */
+    const successCallback = () => {
+        // refresh()
+        // setIsFetch(!isFetch)
+    }
+    const dataPahe = {
+        title: '侵占、毁坏水工程及堤防、护岸等有关设施',
+        zhunag: '1'
+    }
+    const edit = () => {
+        refModal.current.showEdit({});
+    }
+    return (
+        <>
+            <div className={styles.list} style={{ padding: '0 10px', marginBottom: 5 }}>{dataPahe.title}<Button type="primary" onClick={edit}>编辑</Button></div>
+
+            <div className={styles.listborder} style={{ padding: '0 10px', }}>{dataPahe.title}</div>
+            <div className={styles.listborder} style={{ padding: '0 10px', marginBottom: 5 }}>{dataPahe.title}</div>
+            <div className={styles.contentBor} style={{ padding: '0 10px', marginBottom: 5, height: '35%' }}>
+                <div className={styles.listborder} style={{ padding: '0 10px', height: '30%' }}>{dataPahe.title}</div>
+                {dataPahe.title ?? '无内容请添加'}
+            </div>
+
+            <div style={{ display: 'flex', height: '33%' }}>
+                <div className={styles.contentBor} style={{ flex: 1, marginRight: 5 }}>
+                    <div className={styles.listborder} style={{ height: '30%', padding: '0 10px', }}>{dataPahe.title}</div>
+                    <div style={{ padding: '0 10px' }}>{dataPahe.title ?? '无内容请添加'}</div>
+                </div>
+                <div className={styles.contentBor} style={{ flex: 1 }}>
+                    <div className={styles.listborder} style={{ height: '30%', padding: '0 10px', }}>{dataPahe.title}</div>
+                    <div style={{ padding: '0 10px' }}>{dataPahe.title ?? '无内容请添加'}</div>
+                </div>
+
+            </div>
+            <BasicCrudModal
+                width={800}
+                ref={refModal}
+                title=""
+                component={ModalForm}
+                onCrudSuccess={successCallback}
+            />
+        </>
+    )
+}
+export default Page

src/views/sz/szzf/clyj/content.module.less

@@ -0,0 +1,23 @@
+.list{
+    height: 10%;
+    // margin: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #fff;
+
+}
+.listborder{
+    height: 10%;
+    // margin: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #fff;
+    border-bottom: 1px solid #f0f0f0;
+}
+.contentBor{
+
+    background-color: #fff;
+    border-bottom: 1px solid #f0f0f0;
+}

src/views/sz/szzf/clyj/form.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useMemo, useRef } from 'react';
-import { Form, Button, Input, Row, Upload, Col, Table, DatePicker, InputNumber, message, Image, Modal, Typography, Select } from 'antd';
+import { Space, Table, Radio, DatePicker, Form, Select, Button, message, Upload, Input, Row, Col, Switch, Image } from 'antd';
 import { DeleteOutlined, FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
 import { formItemLayout, btnItemLayout } from '../../../../components/crud/FormLayoutProps';
 
@@ -7,72 +7,20 @@ import apiurl from '../../../../service/apiurl';
 
 // import "./index.less"
 import moment from 'moment';
-const { RangePicker } = DatePicker
+const { TextArea } = Input;
-const { Dragger } = Upload;
-const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
 
-const opntios=[
+const options=[
-  {label:'宪法',value:'宪法'},
+  {label:'禁用'},
-  {label:'法律',value:'法律'},
+  {label:'启用'}
-  {label:'行政法规',value:'行政法规'},
-  {label:'督察法规',value:'督察法规'},
-  {label:'司法解释',value:'司法解释'},
-  {label:'地方性法规',value:'地方性法规'},
 ]
 const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
 
   const [form] = Form.useForm();
   const [fileList, setFileList] = useState([]) //上传文件列表
-  const [fileIds, setFileIds] = useState([])
-  const [iframeSrc, setIframeSrc] = useState('')
-  const [pdfViewOPen, setPdfViewOPen] = useState(false)
 
   const [loading, setLoading] = useState(false)
 
-  /**
-   * @description 文件下载
-   * @param {String} params 文件fileId
-   */
-  const download = (params) => {
-    let downloadLink = document.createElement("a");
-    downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xyt/projectEvents/file/download/${params}`;
-    downloadLink.download = `${params.fileName}`;
-    downloadLink.style.display = "none";
-    // 将链接添加到页面中
-    document.body.appendChild(downloadLink);
 
-    // 模拟点击事件，开始下载
-    downloadLink.click();
-  }
-  /**
-    * @description 上传图片
-    * @param {string}  file 上传的文件
-    */
-  const fileChange = (info) => {
-    if (info.file.status === "done") {
-      setLoading(false);
-    }
-    if (info.file.status === "uploading") {
-      setLoading(true);
-    }
-    if (info.file.status === "error") {
-      message.error("文件上传失败")
-      setLoading(false);
-    }
-    let fileIds = info.fileList.map(file => {
-      return file.response?.data?.fileId
-    })
-    setFileIds(fileIds)
-    setFileList(info.fileList)
-  }
-  /**
-   * @description pdf文件预览
-   * @param {String} params 文件预览url
-   */
-  const viewPdf = (params) => {
-    setIframeSrc(params)
-    setPdfViewOPen(true)
-  }
 
 
   const onfinish = (values) => {
@@ -88,16 +36,6 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
       onSave(apiurl.rcgl.gcdsj.save, values)
     }
   }
-
-  /**
- * @description 删除上传的图片
- * @param {string}  id 删除的id
- */
-  const deleteFile = (fileId) => {
-    console.log(fileId);
-    let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
-    setFileList(filterFile)
-  }
   useEffect(() => {
     if (mode != 'save') {
       const imgFile = record?.files?.map(o => ({
@@ -123,150 +61,62 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
         onFinish={onfinish}
         initialValues={record}
       >
-        <Row>
-          <Col span={12}>
-            <Form.Item
-              label="标题"
-              name="name"
-              rules={[{ required: true }]}
-            >
-              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item
-              label="制定机关"
-              name="name"
-              rules={[{ required: true }]}
-            >
-              <Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item label="制定机关" name="name">
-              <Select allowClear style={{ width: '150px' }} options={opntios} />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item label="失效性" name="name">
-              <Select allowClear style={{ width: '150px' }} options={opntios} />
-            </Form.Item>
-          </Col>
-
-          <Col span={12}>
-            <Form.Item
-              label="公布日期"
-              name="eventsDate"
-              getValueFromEvent={(e, dateString) => dateString}
-              getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
-              rules={[
-                {
-                  required: true,
-                },
-              ]}
-            >
-              <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
-            </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item
-              label="施行日期"
-              name="eventsDate"
-              getValueFromEvent={(e, dateString) => dateString}
-              getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
-              rules={[
-                {
-                  required: true,
-                },
-              ]}
-            >
-              <DatePicker disabled={mode === 'view'} format={'YYYY-MM-DD'} style={{ width: '100%' }} allowClear />
-            </Form.Item>
-          </Col>
-        </Row>
-
         <Row>
           <Col span={24}>
             <Form.Item
-              label="附件"
+              label="节点"
-              name="fieldId"
+              name="name"
-              labelCol={{ span: 3 }}
+              rules={[{ required: true }]}
-              wrapperCol={{ span: 19 }}
             >
-              {mode !== "view" &&
+              <Input disabled style={{ width: '100%' }} allowClear />
-                <Dragger
-                  name='file'
-                  // multiple
-                  action="/gunshiApp/xyt/projectEvents/file/upload/singleSimple"
-                  onChange={fileChange}
-                  onDrop={(info) => { console.log(info.dataTransfer.files); }}
-                  fileList={fileList}
-                  disabled={loading}
-                // onSuccess={handleSuccess}
-                >
-                  <p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
-                  <p className="ant-upload-hint">
-                    支持扩展名：.doc .docx .pdf .jpg .png .ppt
-                  </p>
-                </Dragger>
-              }
-              <Row gutter={[16]}>
-                {
-                  fileList.length > 0 && fileList.map(file => {
-                    return (
-                      <Col span={12}>
-                        <div className="file-item" style={{ width: "75%" }}>
-                          <div className='file-description'>
-                            {file.name.indexOf('.docx') > -1 ?
-                              <div
-                                onClick={() => { download(file.response?.data?.fileId) }}
-                                style={{ cursor: 'pointer' }}
-                              >
-                                <FileWordOutlined
-                                  style={{ fontSize: 40 }}
-                                />
-                              </div>
-                              :
-                              file.name.indexOf('.pdf') > -1 ?
-                                <div
-                                  onClick={() => { viewPdf(file.response?.data?.fileId) }}
-                                  style={{ cursor: 'pointer' }}
-                                >
-                                  <FilePdfOutlined style={{ fontSize: 40 }} />
-                                </div>
-                                :
-                                file.name.indexOf('.zip') > -1 ?
-                                  <div
-                                    onClick={() => { download(file.response?.data?.fileId) }}
-                                    style={{ cursor: 'pointer' }}
-                                  >
-                                    <FileZipOutlined style={{ fontSize: 40 }} />
-                                  </div>
-                                  :
-                                  file.name.indexOf('.xlsx') > -1 ?
-                                    <div
-                                      onClick={() => { download(file.response?.data?.fileId) }}
-                                      style={{ cursor: 'pointer' }}
-                                    >
-                                      <FileExcelOutlined style={{ fontSize: 40 }} />
-                                    </div>
-                                    :
-                                    <Image width={60} src={url + file.response?.data?.filePath} alt='' />
-                            }
-                            <span>{file.name}</span>
-                          </div>
-                          <div className={mode == "view" ? 'delete-icon disable-icon' : 'delete-icon'} onClick={() => deleteFile(file.response?.data?.fileId)}>
-                            <DeleteOutlined />
-                          </div>
-                        </div>
-                      </Col>
-                    )
-                  })
-                }
-              </Row>
             </Form.Item>
           </Col>
+          <Col span={24}>
+            <Form.Item
+              label="状态"
+              name="name"
+              rules={[{ required: true }]}
+            >
+              <Radio.Group options={options}/>
+            </Form.Item>
+          </Col>
+          <Col span={24}>
+            <Form.Item
+              label="法律名称"
+              name="name"
+              rules={[{ required: true }]}
+            >
+              <Input  style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+          <Col span={24}>
+            <Form.Item
+              label="法条内容"
+              name="name"
+            >
+              <Input  style={{ width: '100%' }} allowClear />
+            </Form.Item>
+          </Col>
+
+          <Col span={24}>
+            <Form.Item
+              label="违法行为描述"
+              name="name"
+            >
+              <TextArea rows={4}  />
+            </Form.Item>
+          </Col>
+          <Col span={24}>
+            <Form.Item
+              label="处罚措施"
+              name="name"
+            >
+              <TextArea rows={4} />
+            </Form.Item>
+          </Col>
+
         </Row>
+
         {
           mode === 'view' ? null : (
             <>
@@ -279,26 +129,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
           )
         }
       </Form>
-      <Modal
+
-        open={pdfViewOPen}
-        width={1000}
-        title=""
-        footer={null}
-        style={{ marginTop: "-5%" }}
-        onCancel={() => {
-          setPdfViewOPen(false)
-        }}
-      >
-        <iframe
-          style={{
-            height: '80vh',
-            width: '100%',
-            border: 0,
-            marginTop: 20,
-          }}
-          src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/projectEvents/file/download/${iframeSrc}`)}`}
-        />
-      </Modal>
     </>
   );
 }

src/views/sz/szzf/clyj/index.js

@@ -1,136 +1,21 @@
-import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
+import { Card } from 'antd'
-import BasicCrudModal from '../../../../components/crud/BasicCrudModal';
+import TreeSelectZdy from './treeSelectZdy'
-import { Table, Card, Modal, Form, Input, Button, Row, Col, Timeline, message, Tabs, Image } from 'antd';
+
-import { FileWordOutlined, FilePdfOutlined, FileZipOutlined, FileExcelOutlined } from '@ant-design/icons';
+import ContentPage from './content'
-import { useSelector } from 'react-redux';
+
-import ModalForm from './form';
-import apiurl from '../../../../service/apiurl';
-import usePageTable from '../../../../components/crud/usePageTable2';
-import { createCrudService } from '../../../../components/crud/_';
-import { CrudOpRender_text } from '../../../../components/crud/CrudOpRender';
 
-const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
 const Page = () => {
-    const role = useSelector(state => state.auth.role);
-    const editBtn = role?.rule?.find(item => item.menuName == "编辑");
-    const viewBtn = role?.rule?.find(item => item.menuName == "查看");
-    const delBtn = role?.rule?.find(item => item.menuName == "删除");
-    const refModal = useRef();
-    const [searchVal, setSearchVal] = useState(false)
-    const [iframeSrc, setIframeSrc] = useState('')
-    const [pdfViewOPen, setPdfViewOPen] = useState(false)
-    const [isFetch, setIsFetch] = useState(false)
-    const columns = [
-        { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
-        { title: '标题', key: 'name', dataIndex: 'name', width: 250, ellipsis: true },
-        {
-            title: '制度类型', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
-        },
-        {
-            title: '发布日期', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
-        },
-        {
-            title: '发布单位', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
-        },
-        {
-            title: '上传时间', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300
-        },
-        {
-            title: '附件', key: 'fileName', dataIndex: 'fileName', width: 300,render:(v,r)=><a onClick={()=>viewPdf(r.fileId)}>{v}</a>
-        },
-        {
-            title: '操作', key: 'operation', width: 240, fixed: 'right', align: 'center',
-            render: (value, row, index) => (
-                <CrudOpRender_text
-                    edit={true}
-                    del={true}
-                    view={true}
-                    command={(cmd) => () => command(cmd)(row)} />)
-        },
-    ];
-
-
-    const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
-
-    const command = (type) => (params) => {
-        if (type === 'save') {
-            refModal.current.showSave();
-        } else if (type === 'edit') {
-            refModal.current.showEdit({ ...params });
-        } else if (type === 'view') {
-            refModal.current.showView(params);
-        } else if (type === 'del') {
-            refModal.current.onDeleteGet(apiurl.rcgl.gcdsj.delete + `/${params.id}`);
-        }
-    }
-
-
-    const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.gcdsj.page).find_noCode);
-
-    /**
-      * @description 处理成功的回调
-      */
-    const successCallback = () => {
-        refresh()
-        setIsFetch(!isFetch)
-    }
-
-    const viewPdf = (params) => {
-        setIframeSrc(params)
-        setPdfViewOPen(true)
-      }
-    useEffect(() => {
-        const params = {
-            search: {
-                ...searchVal,
-            }
-        };
-        search(params)
-    }, [searchVal])
-
    
     return (
-        <>
+        <div style={{display:'flex',height: '100%'}}>
-            <div className='content-root clearFloat xybm' style={{ paddingRight: "0", paddingBottom: "0" }}>
+            <div style={{ width: 320, backgroundColor: '#fff', padding: 10  }}>
-                <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
+                <TreeSelectZdy />
-        
+            </div>
-                    <div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
+            <div style={{ flex:1 ,marginLeft:10}}>
-                        <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width, y: "calc( 100vh - 400px )" }} />
+                <ContentPage />
-                    </div>
-                </div>
-
-                <BasicCrudModal
-                    width={1000}
-                    ref={refModal}
-                    title=""
-                    component={ModalForm}
-                    onCrudSuccess={successCallback}
-                // onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
-                />
             </div>
             
-            <Modal
+        </div>
-                open={pdfViewOPen}
+    )
-                width={1000}
-                title=""
-                footer={null}
-                style={{ marginTop: "-5%" }}
-                onCancel={() => {
-                    setPdfViewOPen(false)
-                }}
-            >
-                <iframe
-                    style={{
-                        height: '80vh',
-                        width: '100%',
-                        border: 0,
-                        marginTop: 20,
-                    }}
-                    src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/projectEvents/file/download/${iframeSrc}`)}`}
-                />
-            </Modal>
-        </>
-    );
 }
-
+export default Page
-export default Page;

src/views/sz/szzf/clyj/treeSelectZdy.js

@@ -0,0 +1,75 @@
+import React, { useState,useMemo } from 'react';
+import { Tree, Input } from 'antd';
+const { Search } = Input;
+
+const treeData = [
+    {
+        value: 'parent 1',
+        title: '违反水利工程建设与管理类行为',
+        children: [
+            {
+                value: 'parent 1-0',
+                title: '侵占、毁坏水法规定相关设施',
+                children: [
+                    {
+                        value: 'leaf1',
+                        title: '侵占、毁坏水工程及堤防、护岸...',
+                    },
+                    {
+                        value: 'leaf2',
+                        title: '毁坏防汛、水文监测、水文地质...',
+                    },
+                    {
+                        value: 'leaf3',
+                        title: '在水工程保护范围内，从事影响..',
+                    }
+                ],
+            },
+            {
+                value: 'parent 1-1',
+                title: '破坏大坝管理设施、妨碍大坝',
+                children: [
+                    {
+                        value: 'leaf3',
+                        title: '毁坏大坝及其管理设施',
+                    },
+                    {
+                        value: 'leaf3',
+                        title: '危害大坝安全或破坏大坝正常运行',
+                    },
+                    {
+                        value: 'leaf3',
+                        title: '在岸区或坝体从事生产活动',
+                    },
+                ],
+            },
+        ],
+    },
+];
+const Page = () => {
+    const [value, setValue] = useState();
+
+    const filterTreeNode=useMemo((treeNode)=>{
+        console.log(1111111);
+        
+        if (!value) return false;
+        return treeNode?._title?.indexOf(value) > -1;
+    },[value])
+    const onSearch =(e)=>{
+        setValue(e)
+        console.log(e);
+    }
+    return (
+        <>
+            <div style={{margin:'10px 0'}}><Search onSearch={onSearch}/></div>
+            <Tree
+                defaultExpandAll={true}
+                blockNode={false}
+                treeData={treeData}
+                filterTreeNode={filterTreeNode}
+            />
+        </>
+    );
+};
+
+export default Page;