feat(): 库容曲线迁移

src/models/auth/_.ts

@@ -193,6 +193,41 @@ export async function loadMenu(): Promise<MenuItem[]> {
   const id = idgen()
   return [
     { id: id(), title: '水库一张图', path: '/mgr/home', icon: 'jbqk' },
+    {
+      id: id(), title: '四全', redirect: '/mgr/sq/qfg/zcdjxx', icon: 'fxzb',
+      children: [
+        {
+          id: id(), title: '全覆盖', redirect: '/mgr/sq/qfg/zcdjxx',
+          children: [
+            { id: id(), title: '注册登记信息', path: '/mgr/sq/qfg/zcdjxx' },
+          ]
+        },
+        {
+          id: id(), title: '全要素', redirect: '/mgr/sq/qys/kqys',
+          children: [
+            { id: id(), title: '库区要素', path: '/mgr/sq/qys/kqys' },
+            { id: id(), title: '工程要素', path: '/mgr/sq/qys/gcys' },
+            { id: id(), title: '下游要素', path: '/mgr/sq/qys/xyys' },
+
+          ]
+        },
+        { id: id(), title: '全周期', redirect: '/mgr/sq/qzq/gcdsj',
+          children: [
+            { id: id(), title: '工程大事记', path: '/mgr/sq/qzq/gcdsj'},
+            { id: id(), title: '全周期档案', path: '/mgr/sq/qys/qzqda'},
+          ]
+        },
+        { id: id(), title: '全天候', redirect: '/mgr/sq/qth/sksq',
+          children: [
+            { id: id(), title: '水库水情', path: '/mgr/sq/qth/sksq'},
+            { id: id(), title: '河道水情', path: '/mgr/sq/qth/hdsq'},
+            { id: id(), title: '实时雨情', path: '/mgr/sq/qth/ssyq'},
+            { id: id(), title: '大坝安全监测', path: '/mgr/sq/qth/dbaqjc'},
+            { id: id(), title: '视频监控', path: '/mgr/sq/qth/spjk'},
+          ]
+        },
+      ]
+    },
     {
       id: id(), title: '四制', redirect: '/mgr/sz/gltx/zzjgck', icon: 'jbqk',
       children: [
@@ -318,6 +353,9 @@ export async function loadMenu(): Promise<MenuItem[]> {
         {
           id: id(), title: '维修养护', path: '/mgr/sg/wxyh',
         },
+        {
+          id: id(), title: '库容管理', path: '/mgr/sg/krgl',
+        },
         {
           id: id(), title: '值班管理', redirect: '/mgr/sg/zbgl/zbb',
           children: [
@@ -375,41 +413,7 @@ export async function loadMenu(): Promise<MenuItem[]> {
         },
       ],
     },
-    {
+  
-      id: id(), title: '四全', redirect: '/mgr/sq/qfg/zcdjxx', icon: 'fxzb',
-      children: [
-        {
-          id: id(), title: '全覆盖', redirect: '/mgr/sq/qfg/zcdjxx',
-          children: [
-            { id: id(), title: '注册登记信息', path: '/mgr/sq/qfg/zcdjxx' },
-          ]
-        },
-        {
-          id: id(), title: '全要素', redirect: '/mgr/sq/qys/kqys',
-          children: [
-            { id: id(), title: '库区要素', path: '/mgr/sq/qys/kqys' },
-            { id: id(), title: '工程要素', path: '/mgr/sq/qys/gcys' },
-            { id: id(), title: '下游要素', path: '/mgr/sq/qys/xyys' },
-
-          ]
-        },
-        { id: id(), title: '全周期', redirect: '/mgr/sq/qzq/gcdsj',
-          children: [
-            { id: id(), title: '工程大事记', path: '/mgr/sq/qzq/gcdsj'},
-            { id: id(), title: '全周期档案', path: '/mgr/sq/qys/qzqda'},
-          ]
-        },
-        { id: id(), title: '全天候', redirect: '/mgr/sq/qth/sksq',
-          children: [
-            { id: id(), title: '水库水情', path: '/mgr/sq/qth/sksq'},
-            { id: id(), title: '河道水情', path: '/mgr/sq/qth/hdsq'},
-            { id: id(), title: '实时雨情', path: '/mgr/sq/qth/ssyq'},
-            { id: id(), title: '大坝安全监测', path: '/mgr/sq/qth/dbaqjc'},
-            { id: id(), title: '视频监控', path: '/mgr/sq/qth/spjk'},
-          ]
-        },
-      ]
-    },
 
 
     // { id: id(), title: '基本情况', path: '/mgr/home', icon: 'jbqk' },

src/service/apiurl.js

@@ -8,6 +8,13 @@ const service_fxdd = '/gunshiApp/tsg'
 const service_xyt = '/gunshiApp/tsg'//登陆先用小玉潭
 const service_shzh = '/shzh'
 const apiurl = {
+
+  krline: {
+    list: service_fxdd + "/stZvarlB/list",
+    save: service_fxdd + "/stZvarlB/insert",
+    update: service_fxdd + "/stZvarlB/update",
+    delete: service_fxdd + "/stZvarlB/del"
+  },
   gbyj: {
     list: service_fxdd + "/broadcastStation/list", //广播站
     page: service_fxdd + "/broadcastWarn/page",

src/views/AppRouters.tsx

@@ -108,6 +108,9 @@ import Ajdj from './sz/szzf/ajdj'
 import Ajtj from './sz/szzf/ajtj'
 import Clyj from './sz/szzf/clyj'
 
+import Krgl from './KrLine'
+
+
 
 const HomePage = lazy(() => import('./Home'))
 
@@ -202,6 +205,7 @@ const AppRouters: React.FC = () => {
         { path: 'sg/aqgl/aqsgdj', element: <Aqsgdj /> },
         { path: 'sg/gcdsj', element: <Gcdsj /> },
         { path: 'sg/szzb', element: <Szzb /> },
+        { path: 'sg/krgl', element: <Krgl /> },
         { path: 'rcgl/stlljc', element: <Stlljc /> },
         { path: 'sg/zbgl/zbb', element: <Zbb /> },
         { path: 'sg/zbgl/zbrz', element: <Zbrz /> },

src/views/KrLine/drpOption.js

@@ -0,0 +1,97 @@
+import echarts from 'echarts/lib/echarts';
+import { GetInterval } from '../../utils/tools' 
+
+export default function drpOption({data}) {
+  const maxVal = Math.ceil(Math.max(...data.map(obj => obj.rz)))
+  const minVal = Math.floor(Math.min(...data.map(obj => obj.rz)))
+  const maxValX = Math.max(...data.map(obj => obj.w))
+  const minValX = Math.min(...data.map(obj => obj.w))
+  
+
+
+  let arr =[]
+  data.forEach(item=>{
+    console.log(data);
+    arr.push([item.w,item.rz])
+  })
+  // console.log(GetInterval(minValX,maxValX),'jhsdjkashdjkahjk');
+  return {
+    toolbox: {
+      show: true,
+      feature: {
+        saveAsImage: {
+          show: true,
+          excludeComponents: ['toolbox'],
+          pixelRatio: 2,
+          name:"库容曲线图"
+        }
+      },
+      right: "14%",
+      top:"5%"
+    },
+    title: {
+      text: "库容曲线图",
+      left: "40%",
+    },
+    tooltip: {
+      trigger: 'axis',
+    },
+    grid: [
+      {
+        top: "10%",
+        left: "15%",
+        right: "15%",
+        bottom: "8%"
+      },
+    ],
+    xAxis: [
+      {
+        name: "库容(万m³)",
+        nameGap: 5,
+        type: 'value',
+        min:Math.floor(minValX / 5)  *5,
+        max:Math.ceil(maxValX / 5)  *5,
+        interval:GetInterval(minValX,maxValX),
+        data: data.map(o => o.w),
+        splitLine: {
+          show: false
+        },
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: "库水位(m)",
+        minInterval:1,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: '#07a6ff',
+            width: 0.25,
+            type: 'dotted'
+          }
+        },
+        axisLabel: {
+          color: '#333',
+          fontSize: 12,
+        },
+        axisLine: {
+          show: true
+        },
+        axisTick: {
+          show: true,
+        },
+        min: minVal,
+        max: maxVal
+      }
+    ],
+    series: [
+      {
+        type: 'line',
+        color: "#007AFD",
+        data: arr,
+        smooth: true
+      },
+    ]
+  };
+}

src/views/KrLine/form.js

@@ -0,0 +1,79 @@
+import React,{useEffect,useState,useRef} from 'react';
+import { Form, Button, Input, Row, Col} from 'antd';
+import { formItemLayout, btnItemLayout } from '../../components/crud/FormLayoutProps';
+import apiurl from '../../service/apiurl';
+const ModalForm = ({ mode, record,onEdit,onSave,onCrudSuccess }) => {
+  const [form] = Form.useForm();
+  const onFinish = async (values) => {
+    values.resCode = "42120250085"
+    values.id = record?.id
+    if (mode === 'edit') {
+      const params = {
+        ...record,
+        rz: Number(values?.rz),
+        w: Number(values?.w),
+      }
+      onEdit(apiurl.krline.update,params)
+    }
+    if (mode === 'save') {
+      onSave(apiurl.krline.save,values)
+    }
+  }
+  
+  return (
+    <>
+      <Form
+        form={form}
+        // {...formItemLayout}
+        onFinish={onFinish}
+        initialValues={record}>
+      <Row>
+          <Col span={24}>
+              <Form.Item
+                label="水位(m)"
+                name="rz"
+                labelCol={{ span: 5, offset: 0 }}
+                wrapperCol={{span:19,offset:0}}
+                rules={[{ required: true }]}
+              >
+              <Input
+                style={{ width: '100%' }}
+                allowClear
+              />
+              </Form.Item>
+          </Col>
+      </Row>
+
+      <Row>
+          <Col span={24}>
+              <Form.Item
+                label="库容(万m³)"
+                name="w"
+                labelCol={{ span: 5, offset: 0 }}
+                wrapperCol={{span:19,offset:0}}
+                rules={[{ required: true }]}
+              >
+               <Input
+                style={{ width: '100%' }}
+                allowClear
+              />
+              </Form.Item>
+          </Col> 
+      </Row>
+      {
+        mode==='view'?null:(
+          <>
+          <Form.Item {...btnItemLayout}>
+            <Button type="primary" htmlType="submit">
+              {mode === 'save' ? '提交' : '修改'}
+            </Button>
+          </Form.Item>
+          </>
+        )
+      }
+      </Form>
+    </>
+  );
+}
+
+export default ModalForm;

src/views/KrLine/index.js

@@ -0,0 +1,88 @@
+import React,{useEffect,useState,useRef,useMemo} from 'react'
+import { Table, Button } from 'antd'
+import ModalForm from './form';
+import ReactEcharts from 'echarts-for-react';
+import drpOption from './drpOption'
+import apiurl from '../../service/apiurl';
+import { httppost2 } from '../../utils/request';
+import { CrudOpRender_text } from '../../components/crud/CrudOpRender';
+import BasicCrudModal from '../../components/crud/BasicCrudModal2';
+export default function Zrtx() {
+    const refModal = useRef();
+    const columns = [
+        {
+            title: '序号', dataIndex: 'index', key: 'index', align: "center",
+            render: (r, c,i) => <span>{i + 1}</span>
+         },
+        { title: '水位(m)', dataIndex: 'rz', key: 'rz',align:"center" },
+        { title: '库容(万m³)', dataIndex: 'w', key: 'w',align:"center" },
+        {
+            title: '操作', dataIndex: 'op', key: 'op', align: "center",width:200,
+            render: (value, row, index) => (<CrudOpRender_text  del={true} edit={true} command={(cmd) => () => command(cmd)(row)} />)
+         },
+    ];
+    const [data, setData] = useState([])
+    const option = useMemo(() => {
+      return drpOption({data});
+    }, [data])
+    const getData = async () => {
+        try {
+            const res = await httppost2(apiurl.krline.list)
+            setData(res.data.map((item,i) => ({...item,inx:i + 1})))
+        } catch (error) {
+            console.log(error);
+            
+        }
+    }
+
+    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.onDeletePost(apiurl.krline.delete,params);
+        } 
+      }
+    useEffect(() => {
+      getData();
+    }, [])
+    
+  return (
+      <div className='content-root clearFloat xybm' style={{ paddingRight: "0", paddingBottom: "0" }}>
+         <h1><Button type='primary' onClick={() => {refModal.current.showSave({})}}>新增</Button></h1>
+         <div style={{display:"flex",columnGap:10,width:"100%",height:"calc(100% - 36px)"}}>
+          <div style={{width:500,height:"100%"}}>
+          <Table
+              rowKey="inx"
+              columns={columns}
+              dataSource={data}
+              pagination={false}
+              scroll={{ y:"calc( 100vh - 300px )"}}
+          />
+          </div>
+          <div className='right-echarts' style={{ flex: 1,height:"100%" }}>
+              {
+                  data.length > 0 ?
+                  <ReactEcharts
+                    option={option}
+                    style={{width: "100%", height: '100%'}}
+                  /> : <div style={{textAlign: "center", margin: "10%"}}>
+                    <img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/>
+                  </div>
+              }
+          </div>
+         </div>
+
+        <BasicCrudModal
+          width={550}
+          ref={refModal}
+          title=""
+          component={ModalForm}
+          onCrudSuccess={getData}
+        />
+    </div>
+  )
+}

src/views/gbyj/index.js

@@ -170,7 +170,7 @@ export default function Gbyj() {
               jh={jh}
             />
           </Card>
-          <div className="ant-card-body" style={{padding:"20px 0 0 0"}}>
+          <div className="ant-card-body" style={{padding:"20px 10px 0 0"}}>
             <Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 700px )"}}/>
           </div>
          </div>