feat(): 渗压监测模块开发

src/service/apiurl.js

@@ -77,7 +77,15 @@ const apiurl = {
       wysave: service_ykz + '/osmoticShiftR/insert',
       wyedit: service_ykz + '/osmoticShiftR/update',
       wydelete: service_ykz + '/osmoticShiftR/del',
-      wyexport:service_ykz + '/osmoticShiftR/export'
+      wyexport: service_ykz + '/osmoticShiftR/export',
+      jgfpage: service_ykz + '/osmoticJointRReal/page',
+      jgfexport: service_ykz + '/osmoticJointR/export',
+      jgflist:service_ykz + '/osmoticJointR/list'
+    },
+    syjc: {
+      page: service_ykz + '/osmoticPressRReal/page',
+      export: service_ykz + '/osmoticPressRReal/export',
+      list:service_ykz + '/osmoticPressR/list'
     },
     cdgl: {
       page: service_ykz + '/osmoticStationInfo/page',

src/views/Home/index.less

@@ -23,7 +23,7 @@
         }
         .title_name{
             position: absolute;
-            top: 130px;
+            top: 230px;
             // left: 41%;
             width: 350px;
             height: 70px;

src/views/Home/zmjk/consts.ts

@@ -1,5 +1,5 @@
 export const CanvasW = 1080;
-export const CanvasH = 640;
+export const CanvasH = 470;
 
 export const Horizontal = CanvasH * 1.4 / 3;
 export const ViewCenter = { x: CanvasW * 0.5, y: Horizontal };

src/views/Home/zmjk/index.js

@@ -123,7 +123,7 @@ const Page = () => {
   const [list, setList ] = useState([])
 
   const hole = 10;//zmobj.gaorNum;
-  const xunit = CanvasW / (2 + hole);
+  const xunit = CanvasW / (hole - 5);
   const pts = contextCoordinates(xunit, hole);
   const eqpnoList = useMemo(() => damList ? new Array(damList.length).fill(0).map((o, index) => index) : [], [damList]);
 
@@ -186,33 +186,33 @@ const Page = () => {
                 <Topper2 pts={pts} waterRatio={waterRatio} />
               </Stage>
               <div style={{ position: 'absolute', left: 0, top: 20, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
-                <div key="sider1" style={{ flexGrow: 1, width: 100 }}></div>
+                <div key="sider1" style={{ flexGrow: 1, width: 135 }}></div>
                 {
                   eqpnoList.map(o => (
                     <div key={o}
                       onClick={() => {}}
-                      className='o' style={{ flexGrow: 1, width: 100, display: 'flex', justifyContent: 'center', cursor: 'pointer' }}>
+                      className='o' style={{ flexGrow: 1, width: 0, display: 'flex', justifyContent: 'center', cursor: 'pointer' }}>
-                      <div style={{ width: 80, height: 40, backgroundColor: '#43c4e7', borderRadius: 12, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 28 }}>#{o+1}</div>
+                      <div style={{ width: 60, height: 40, backgroundColor: '#43c4e7', borderRadius: 12, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 28 }}>#{o+1}</div>
                     </div>
                   ))
                 }
-                <div key="sider2" style={{ flexGrow: 1, width: 100 }}></div>
+                <div key="sider2" style={{ flexGrow: 1, width: 135 }}></div>
               </div>
-              <div style={{ position: 'absolute', left: 0, bottom: 20, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
+              <div style={{ position: 'absolute', left: 0, bottom: 155, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
-                <div key="sider1" style={{ flexGrow: 1, width: 100 }}></div>
+                <div key="sider1" style={{ flexGrow: 1, width: 280 }}></div>
                 {
                   eqpnoList.map(o => (
                     <div key={o} className='o' style={{ flexGrow: 1, width: 100, display: 'flex', justifyContent: 'center' }}>
                       <div
                         onClick={() => {}}
-                        style={{ width: 80, height: 32, border: '1px solid #4c5dce', backgroundColor: '#315da2', borderRadius: 4, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 18, cursor: 'pointer' }}
+                        style={{ width: 60, height: 32, border: '1px solid #4c5dce', backgroundColor: '#315da2', borderRadius: 4, color: '#fff', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 18, cursor: 'pointer' }}
                       >
                         {renAperture(damList[o]?.realAperture)}
                       </div>
                     </div>
                   ))
                 }
-                <div key="sider2" style={{ flexGrow: 1, width: 100 }}></div>
+                <div key="sider2" style={{ flexGrow: 1, width: 280 }}></div>
               </div>
             </dvi>
           </div>

src/views/Home/zmjk/index.less

@@ -3,7 +3,7 @@
         display: flex;
         height: 100%;
         .sg_zmjk_left{
-            top: 85px;
+            top: 250px;
             position: relative;
             width: 1080px;
             height: 640px;

src/views/SafeWatch/Dmgl/index.js

@@ -24,7 +24,6 @@ const Page = () => {
       title: '断面名称', key: 'profileName', dataIndex: 'profileName', width: 150,
     },
     { title: '备注', key: 'remark', dataIndex: 'remark', width: 150},
-
     {
       title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
       render: (value, row, index) => (

src/views/SafeWatch/SlWatch/TableData.js

@@ -0,0 +1,32 @@
+import {Table} from 'antd';
+import React, {useEffect, useState} from 'react';
+import moment from 'moment'
+
+
+const Tabledata = ({tableData}) => {
+  const columns = [
+    { title: '序号', key: 'inx', dataIndex: 'inx', align: "center", render: (v, r, i) => <span>{i + 1}</span> },
+    { title: '测点编号', key: 'stationCode', dataIndex: 'stationCode'},
+    { title: '水位(mm)', key: 'value', dataIndex: 'value'},
+    { title: '水压(KPa)', key: 'press', dataIndex: 'press'},
+    { title: '水位高程(m)', key: 'waterEle', dataIndex: 'waterEle'},
+    { title: '温度(°℃)', key: 'temp', dataIndex: 'temp'},
+    { title: '模数(F)', key: 'modulus', dataIndex: 'modulus'},
+    {title: '监测时间', key: 'tm', dataIndex: 'tm'},
+  ];
+  
+  return (
+    <>
+      <Table rowKey="tm"
+             sticky 
+             columns={columns}
+             pagination={false}
+             dataSource={tableData}
+             scroll={{ y: "420px"}}
+      />
+    </>
+  )
+
+}
+
+export default Tabledata

src/views/SafeWatch/SlWatch/historyToolbar.js

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import { Form, Input, Button, DatePicker, Radio } from 'antd';
+import NormalSelect from '../../../components/Form/NormalSelect';
+
+import moment from 'moment';
+const { RangePicker } = DatePicker;
+const ToolBar = ({ setHistorySearchVal, exportFile1, setTabVal }) => {
+    const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
+    const end = moment().format('YYYY-MM-DD 23:59:59')
+    const [form] = Form.useForm();
+
+    const onFinish = (values) => {
+        let dateTimeRangeSo;
+        if (values.tm) {
+            dateTimeRangeSo = {
+                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
+        setHistorySearchVal({ ...values, dateTimeRangeSo });
+    }
+
+    useEffect(() => {
+        form.setFieldValue('tm', [moment(start), moment(end)])
+        setHistorySearchVal({ dateTimeRangeSo: { start: start, end: end } })
+    }, [])
+
+
+    return (
+        <>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
+                    <Form.Item label="时间段" name="tm">
+                        <RangePicker
+                            allowClear
+                            showTime
+                            style={{ width: "280px" }}
+                            format="YYYY-MM-DD"
+                        />
+                    </Form.Item>
+                    <Form.Item>
+                        <Button type="primary" htmlType="submit">查询</Button>
+                    </Form.Item>
+
+                    <Form.Item>
+                        <Button onClick={() => form.resetFields()}>重置</Button>
+                    </Form.Item>
+                    <Form.Item>
+                        <Button onClick={() => exportFile1()}>导出</Button>
+                    </Form.Item>
+                    <Form.Item style={{ marginLeft: '140px' }}>
+                        <Radio.Group onChange={(e) => { setTabVal(e.target.value) }} defaultValue="1" size="large" buttonStyle="outline">
+                            <Radio.Button value="1">数据图</Radio.Button>
+                            <Radio.Button value="2">数据表</Radio.Button>
+                        </Radio.Group>
+                    </Form.Item>
+                </Form>
+
+            </div>
+        </>
+    );
+}
+
+export default ToolBar;

src/views/SafeWatch/SlWatch/index.js

@@ -1,46 +1,68 @@
-import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
+import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
 import BasicCrudModal from '../../../components/crud/BasicCrudModal';
-import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image } from 'antd';
+import { Table, Card, Modal, Form, Input, Button, Row, Col, Timeline, message, Tabs, Image } from 'antd';
 import ToolBar from './toolbar';
+import ReactEcharts from 'echarts-for-react';
 import apiurl from '../../../service/apiurl';
 import usePageTable from '../../../components/crud/usePageTable2';
 import { createCrudService } from '../../../components/crud/_';
-import { httppost5 } from '../../../utils/request';
+import { httppost5, httppost2 } from '../../../utils/request';
 import { exportFile } from '../../../utils/tools.js';
+import HistoryToolBar from './historyToolbar'
+import TableData from './TableData';
+import drpOption from './options'
 const Page = () => {
-  const types = {
-    0: "设备维修",
-    1: '设备更换',
-    2:"结构加固"
-  }
   const [searchVal, setSearchVal] = useState(false)
+  const [jgfOpen, setJgfOpen] = useState(false)
+  const [clickItem, setClickItem] = useState(false)
+  const [tabVal, setTabVal] = useState('1')
+  const [historySearchVal, setHistorySearchVal] = useState(false)
+  const [tableData, setTableData] = useState([])
+  const option = useMemo(() => drpOption(tableData), [tableData])
   const columns = [
-    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
+    { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
-    { title: '监测断面', key: 'projectName', dataIndex: 'projectName', width: 150},
+    { title: '测点编号', key: 'stationCode', dataIndex: 'stationCode', width: 150 },
-    { title: '测点编号', key: 'projectAddr', dataIndex: 'projectAddr', width: 150},
+    { title: '水位(mm)', key: 'value', dataIndex: 'value', width: 150 },
-    { title: '测压管水位(m)', key: 'projectAddr', dataIndex: 'projectAddr', width: 150},
+    { title: '水压(KPa)', key: 'press', dataIndex: 'press', width: 150 },
-    { title: '渗压(KPa)', key: 'projectAddr', dataIndex: 'projectAddr', width: 150},
+    { title: '水位高程(m)', key: 'waterEle', dataIndex: 'waterEle', width: 150 },
-    { title: '振弦(Hz)', key: 'projectAddr', dataIndex: 'projectAddr', width: 150},
+    { title: '温度(°℃)', key: 'temp', dataIndex: 'temp', width: 150 },
-    { title: '温度(℃)', key: 'projectAddr', dataIndex: 'projectAddr', width: 150},
+    { title: '模数(F)', key: 'modulus', dataIndex: 'modulus', width: 150 },
+    { title: '测点位置', key: 'location', dataIndex: 'location', width: 150,ellipse:true },
     {
-      title: '监测时间', key: 'createTime', dataIndex: 'createTime', width: 140,
+      title: '监测时间', key: 'tm', dataIndex: 'tm', width: 140,
     },
 
   ];
   const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
-  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode);
+  const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.aqjc.syjc.page).find_noCode);
-  
-    // 导出
-    const exportExcel = () => {
-      let params = {
-        ...searchVal,
-      }
-      httppost5(apiurl.sbwh.cgtzgl.export, params).then(res => {
-        exportFile(`渗流监测.xlsx`,res.data)
-    })
-    }
 
-  useEffect(()=>{
+  // 导出
+  const exportExcel = () => {
+    let params = {
+      ...historySearchVal,
+    }
+    httppost5(apiurl.aqjc.syjc.export, params).then(res => {
+      exportFile(`${clickItem.stationCode}.xlsx`, res.data)
+    })
+  }
+
+  // 单击行的回调
+  const clickRow = (r) => {
+    setClickItem(r)
+    setJgfOpen(true)
+  }
+  const getHistoryData = async (parmas) => {
+    try {
+      const res = await httppost2(apiurl.aqjc.syjc.list, parmas)
+      if (res.code == 200) {
+        setTableData(res.data)
+      }
+    } catch (error) {
+      console.log(error);
+
+    }
+  }
+  useEffect(() => {
     const params = {
       search: {
         ...searchVal,
@@ -48,12 +70,20 @@ const Page = () => {
     };
     search(params)
   }, [searchVal])
-  
+  useEffect(() => {
-  
+    if (historySearchVal && clickItem) {
+      const params = {
+        ...historySearchVal,
+        stationCode: clickItem.stationCode
+      }
+      getHistoryData(params)
+    }
+  }, [historySearchVal, clickItem])
+
   return (
     <>
-      <div className='content-root clearFloat xybm' style={{paddingBottom:"0"}}>
+      <div className='content-root clearFloat xybm' style={{ paddingBottom: "0" }}>
-        <div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
+        <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
           <Card className='nonebox'>
             <ToolBar
               setSearchVal={setSearchVal}
@@ -61,9 +91,54 @@ 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="tm"
+              {...tableProps}
+              scroll={{ x: width, y: "calc( 100vh - 400px )" }}
+              onRow={(r) => {
+                return {
+                  onClick: () => {
+                    clickRow(r)
+                  }
+                }
+              }}
+            />
           </div>
         </div>
+        <Modal
+          open={jgfOpen}
+          width={1000}
+          title={<div style={{ display: 'flex', columnGap: 10, alignItems: 'center' }}>
+            <span style={{ width: 5, height: 16, background: "#3477f5" }}></span>
+            <span style={{ fontSize: 16, marginLeft: 10 }}>{clickItem.stationCode}</span>
+          </div>}
+          footer={null}
+          onCancel={() => setJgfOpen(false)}
+          destroyOnClose
+        >
+          <>
+            <HistoryToolBar
+              exportFile1={exportExcel}
+              setTabVal={setTabVal}
+              setHistorySearchVal={setHistorySearchVal}
+            />
+            <div style={{ height: 504, padding: '5px 10px 20px 10px' }}>
+
+              {
+                tabVal == '1' ?
+                  tableData.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>
+                  : null
+              }
+              {
+                tabVal === '2' ? <div style={{ marginTop: '10px' }}><TableData tableData={tableData} /></div> : null
+              }
+            </div>
+
+          </>
+        </Modal>
       </div>
     </>
   );

src/views/SafeWatch/SlWatch/options.js

@@ -0,0 +1,296 @@
+export default function options(data) {
+    // 水位
+    const rzMin = Math.floor(Math.min(...data.map(item => item.value)));
+    const rzMax = Math.ceil(Math.max(...data.map(item => item.value)));
+
+    // 水压
+    const pressMin = Math.floor(Math.min(...data.map(item => item.press)));
+    const pressMax = Math.ceil(Math.max(...data.map(item => item.press)));
+
+    // 高程
+    const waterEleMin = Math.floor(Math.min(...data.map(item => item.waterEle)));
+    const waterEleMax = Math.ceil(Math.max(...data.map(item => item.waterEle)));
+    // 温度
+    const tempMin = Math.floor(Math.min(...data.map(item => item.temp)));
+    const tempMax = Math.ceil(Math.max(...data.map(item => item.temp)));
+
+    // 模数
+    const modulusMin = Math.floor(Math.min(...data.map(item => item.modulus)));
+    const modulusMax = Math.ceil(Math.max(...data.map(item => item.modulus)));
+
+
+
+    return {
+        tooltip: {
+            trigger: 'axis',
+        },
+        legend: {
+            top: '3%',
+            data: ['水位','水压','水位高程','温度', '模数']
+        },
+        grid: {
+            left: 35,
+            right: 120
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: data.map(o => o.tm),
+                inverse: false,
+                splitLine: {
+                    show: false
+                },
+                axisLabel: {
+                    padding: [0, 0, 100, 0],
+                    color: '#333',
+                    fontSize: 12,
+                    formatter: val => val.slice(0, 10)
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: '#8c8c8c',
+                        width: 1,
+                    }
+                },
+                axisTick: {
+                    show: false,
+                },
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                position: 'left',
+                name: "水位(mm)",
+                nameTextStyle: {
+                    padding: [0, 0, 10, 10],
+                    color: '#333333',
+                    fontSize: 14
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#bfbfbf',
+                        width: 0.5,
+                        type: 'dotted'
+                    }
+                },
+                axisLabel: {
+                    color: '#333',
+                    fontSize: 12,
+                },
+                axisLine: {
+                    // show: false
+                    lineStyle: {
+                        color: '#8c8c8c',
+                        width: 1,
+                    }
+                },
+                axisTick: {
+                    show: false,
+                },
+                min: rzMin,
+                max: rzMax,
+            },
+            {
+                type: 'value',
+                position: 'right',
+                name: "水压(KPa)",
+                offset: -40,
+                nameTextStyle: {
+                    padding: [0, 0, 10, 10],
+                    color: '#333333',
+                    fontSize: 14
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#07a6ff',
+                        width: 0.25,
+                        type: 'dotted'
+                    }
+                },
+                axisLabel: {
+                    color: '#333',
+                    fontSize: 12,
+                },
+                axisLine: {
+                    // show: false
+                    lineStyle: {
+                        color: '#8c8c8c',
+                        width: 1,
+                    }
+                },
+                axisTick: {
+                    show: false,
+                },
+                min: pressMin,
+                max: pressMax,
+            },
+            {
+                type: 'value',
+                position: 'right',
+                name: "水位高程(m)",
+                offset: -120,
+                nameTextStyle: {
+                    padding: [0, 0, 10, 10],
+                    color: '#333333',
+                    fontSize: 14
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#07a6ff',
+                        width: 0.25,
+                        type: 'dotted'
+                    }
+                },
+                axisLabel: {
+                    color: '#333',
+                    fontSize: 12,
+                },
+                axisLine: {
+                    // show: false
+                    lineStyle: {
+                        color: '#8c8c8c',
+                        width: 1,
+                    }
+                },
+                axisTick: {
+                    show: false,
+                },
+                min: waterEleMin,
+                max: waterEleMax,
+            },
+            {
+                type: 'value',
+                position: 'right',
+                name: "温度(°℃)",
+                offset: 25,
+                nameTextStyle: {
+                    padding: [0, 0, 10, 10],
+                    color: '#333333',
+                    fontSize: 14
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#07a6ff',
+                        width: 0.25,
+                        type: 'dotted'
+                    }
+                },
+                axisLabel: {
+                    color: '#333',
+                    fontSize: 12,
+                },
+                axisLine: {
+                    // show: false
+                    lineStyle: {
+                        color: '#8c8c8c',
+                        width: 1,
+                    }
+                },
+                axisTick: {
+                    show: false,
+                },
+                min: tempMin,
+                max: tempMax,
+            },
+            {
+                type: 'value',
+                position: 'right',
+                name: "模数(F)",
+                offset: 80,
+                nameTextStyle: {
+                    padding: [0, 0, 10, 10],
+                    color: '#333333',
+                    fontSize: 14
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#07a6ff',
+                        width: 0.25,
+                        type: 'dotted'
+                    }
+                },
+                axisLabel: {
+                    color: '#333',
+                    fontSize: 12,
+                },
+                axisLine: {
+                    // show: false
+                    lineStyle: {
+                        color: '#8c8c8c',
+                        width: 1,
+                    }
+                },
+                axisTick: {
+                    show: false,
+                },
+                min: modulusMin,
+                max: modulusMax,
+            }
+        ],
+        series: [
+            {
+                yAxisIndex: 0,
+                name: '水位',
+                type: 'line',
+                color: "#d6eaec",
+                data: data.map(o => o.value),
+                symbol: 'none', // 设置标记点为'none'，即去掉圆点
+                smooth: 0.5
+            },
+            {
+                yAxisIndex: 1,
+                name: '水压',
+                type: 'line',
+                color: "#60a0f8",
+                lineStyle: {
+                    // type: "dashed"
+                },
+                data: data.map(o => o.press),
+                symbol: 'none', // 设置标记点为'none'，即去掉圆点
+                smooth: 0.5
+            },
+            {
+                yAxisIndex: 2,
+                name: '水位高程',
+                type: 'line',
+                // color: "#60a0f8",
+                lineStyle: {
+                    // type: "dashed"
+                },
+                data: data.map(o => o.waterEle),
+                symbol: 'none', // 设置标记点为'none'，即去掉圆点
+                smooth: 0.5
+            },
+            {
+                yAxisIndex: 3,
+                name: '温度',
+                type: 'line',
+                // color: "#60a0f8",
+                lineStyle: {
+                    // type: "dashed"
+                },
+                data: data.map(o => o.temp),
+                symbol: 'none', // 设置标记点为'none'，即去掉圆点
+                smooth: 0.5
+            },
+            {
+                yAxisIndex: 4,
+                name: '模数',
+                type: 'line',
+                // color: "#60a0f8",
+                lineStyle: {
+                    // type: "dashed"
+                },
+                data: data.map(o => o.modulus),
+                symbol: 'none', // 设置标记点为'none'，即去掉圆点
+                smooth: 0.5
+            },
+        ]
+    }
+}

src/views/SafeWatch/SlWatch/toolbar.js

@@ -38,20 +38,17 @@ const ToolBar = ({ setSearchVal, exportFile1, storeData, role }) => {
     <>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
         <Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
-          <Form.Item label="监测断面" name="projectName">
+          <Form.Item label="测点编号" name="stationCode">
             <NormalSelect allowClear style={{ width: '150px' }} options={types} />
           </Form.Item>
-          <Form.Item label="测点编号" name="maintainType">
+          {/* <Form.Item label="监测时间" name="tm">
-            <NormalSelect allowClear style={{ width: '150px' }} options={types} />
-          </Form.Item>
-          <Form.Item label="监测时间" name="tm">
             <RangePicker
               allowClear
               showTime
               style={{ width: "330px" }}
               format="YYYY-MM-DD HH:mm:ss"
             />
-          </Form.Item>
+          </Form.Item> */}
           <Form.Item>
             <Button type="primary" htmlType="submit">查询</Button>
           </Form.Item>
@@ -59,9 +56,9 @@ const ToolBar = ({ setSearchVal, exportFile1, storeData, role }) => {
           <Form.Item>
             <Button onClick={() => form.resetFields()}>重置</Button>
           </Form.Item>
-          <Form.Item>
+          {/* <Form.Item>
             <Button onClick={() => exportFile1()}>导出</Button>
-          </Form.Item>
+          </Form.Item> */}
         </Form>
       </div>
     </>

src/views/SafeWatch/TransformWatch/TableData.js

@@ -0,0 +1,30 @@
+import {Table} from 'antd';
+import React, {useEffect, useState} from 'react';
+import moment from 'moment'
+
+
+const Tabledata = ({tableData}) => {
+  const columns = [
+    { title: '序号', key: 'inx', dataIndex: 'inx', align: "center", render: (v, r, i) => <span>{i + 1}</span> },
+    { title: '监测点', key: 'stationCode', dataIndex: 'stationCode' },
+    { title: '缝开度(mm)', key: 'value', dataIndex: 'value'},
+    { title: '温度(°℃)', key: 'temp', dataIndex: 'temp'},
+    { title: '模数(F)', key: 'modulus', dataIndex: 'modulus'},
+    {title: '监测时间', key: 'tm', dataIndex: 'tm'},
+  ];
+  
+  return (
+    <>
+      <Table rowKey="tm"
+             sticky 
+             columns={columns}
+             pagination={false}
+             dataSource={tableData}
+             scroll={{ y: "420px"}}
+      />
+    </>
+  )
+
+}
+
+export default Tabledata

src/views/SafeWatch/TransformWatch/historyToolbar.js

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from 'react';
+import { Form, Input, Button, DatePicker, Radio } from 'antd';
+import NormalSelect from '../../../components/Form/NormalSelect';
+
+import moment from 'moment';
+const { RangePicker } = DatePicker;
+const ToolBar = ({ setHistorySearchVal, exportFile1, setTabVal }) => {
+    const start = moment().subtract(7, 'days').format('YYYY-MM-DD 00:00:00')
+    const end = moment().format('YYYY-MM-DD 23:59:59')
+    const [form] = Form.useForm();
+
+    const onFinish = (values) => {
+        let dateTimeRangeSo;
+        if (values.tm) {
+            dateTimeRangeSo = {
+                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
+        setHistorySearchVal({ ...values, dateTimeRangeSo });
+    }
+
+    useEffect(() => {
+        form.setFieldValue('tm', [moment(start), moment(end)])
+        setHistorySearchVal({ dateTimeRangeSo: { start: start, end: end } })
+    }, [])
+
+
+    return (
+        <>
+            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
+                    <Form.Item label="时间段" name="tm">
+                        <RangePicker
+                            allowClear
+                            showTime
+                            style={{ width: "280px" }}
+                            format="YYYY-MM-DD"
+                        />
+                    </Form.Item>
+                    <Form.Item>
+                        <Button type="primary" htmlType="submit">查询</Button>
+                    </Form.Item>
+
+                    <Form.Item>
+                        <Button onClick={() => form.resetFields()}>重置</Button>
+                    </Form.Item>
+                    <Form.Item>
+                        <Button onClick={() => exportFile1()}>导出</Button>
+                    </Form.Item>
+                    <Form.Item style={{ marginLeft: '140px' }}>
+                        <Radio.Group onChange={(e) => { setTabVal(e.target.value) }} defaultValue="1" size="large" buttonStyle="outline">
+                            <Radio.Button value="1">数据图</Radio.Button>
+                            <Radio.Button value="2">数据表</Radio.Button>
+                        </Radio.Group>
+                    </Form.Item>
+                </Form>
+
+            </div>
+        </>
+    );
+}
+
+export default ToolBar;

src/views/SafeWatch/TransformWatch/index.js

@@ -2,28 +2,31 @@ import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
 import BasicCrudModal from '../../../components/crud/BasicCrudModal';
 import { Table, Card, Modal, Form, Input, Button, Row, Col, Timeline, message, Tabs, Image } from 'antd';
 import ToolBar from './toolbar';
+import ReactEcharts from 'echarts-for-react';
 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';
-import { httppost5 } from '../../../utils/request';
+import { httppost2, httppost5 } from '../../../utils/request';
 import { exportFile } from '../../../utils/tools.js';
-
+import HistoryToolBar from './historyToolbar'
+import TableData from './TableData';
+import drpOption from './options'
 const Page = () => {
-  const types = {
-    0: "设备维修",
-    1: '设备更换',
-    2: "结构加固"
-  }
   const refModal = useRef();
   const [searchVal, setSearchVal] = useState(false)
-  const [tabsActive, setTabsActive] = useState("1")
+  const [tabsActive, setTabsActive] = useState(0)
-
+  const [jgfOpen, setJgfOpen] = useState(false)
+  const [clickItem, setClickItem] = useState(false)
+  const [tabVal, setTabVal] = useState('1')
+  const [historySearchVal, setHistorySearchVal] = useState(false)
+  const [ tableData, setTableData ] = useState([])
+  const option = useMemo(() => drpOption(tableData), [tableData])
   const wColumns = [
     { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
-    { title: '监测点', key: 'stationCode', dataIndex: 'stationCode', width: 150},
+    { title: '监测点', key: 'stationCode', dataIndex: 'stationCode', width: 150 },
-    { title: 'X方向位移(mm)', key: 'x', dataIndex: 'x', width: 150},
+    { title: 'X方向位移(mm)', key: 'x', dataIndex: 'x', width: 150 },
     { title: 'Y方向位移(mm)', key: 'y', dataIndex: 'y', width: 150 },
     { title: 'H方向位移(mm)', key: 'h', dataIndex: 'h', width: 150 },
     {
@@ -41,15 +44,20 @@ const Page = () => {
   ];
   const jColumns = [
     { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
-    { title: '监测点', key: 'stationCode', dataIndex: 'stationCode', width: 150},
+    { title: '监测点', key: 'stationCode', dataIndex: 'stationCode', width: 150 },
-    { title: '缝开度(mm)', key: 'createUserName', dataIndex: 'createUserName', width: 150 },
+    { title: '缝开度(mm)', key: 'value', dataIndex: 'value', width: 150 },
+    { title: '温度(°℃)', key: 'temp', dataIndex: 'temp', width: 150 },
+    { title: '模数(F)', key: 'modulus', dataIndex: 'modulus', width: 150 },
     {
       title: '监测时间', key: 'tm', dataIndex: 'tm', width: 140,
     },
+    { title: '测点位置', key: 'location', dataIndex: 'location', width: 150,ellipse:true },
+
   ];
   const columns = useMemo(() => {
-    return tabsActive == '1' ? wColumns : jColumns
+    return tabsActive == 0 ? wColumns : jColumns
-  },[tabsActive])
+  }, [tabsActive])
+
 
   const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
 
@@ -68,7 +76,13 @@ const Page = () => {
 
 
   const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.aqjc.bxjc.wypage).find_noCode);
+  const { tableProps: tableProps1, search: search1, refresh: refresh1 } = usePageTable(createCrudService(apiurl.aqjc.bxjc.jgfpage).find_noCode);
 
+  const dataSource = useMemo(() => {
+    if (tableProps || tableProps1) {
+      return tabsActive == 0 ? tableProps : tableProps1
+    }
+  }, [tabsActive, tableProps, tableProps1])
   /**
     * @description 处理成功的回调
     */
@@ -77,39 +91,68 @@ const Page = () => {
   }
 
 
-    // 导出
+  // 导出
-    const exportExcel = () => {
+  const exportExcel = () => {
-      let params = {
+    const exportUrl = tabsActive == 0 ? apiurl.aqjc.bxjc.wyexport : apiurl.aqjc.bxjc.jgfexport;
-        ...searchVal,
+    const params = tabsActive == 0 ? searchVal :historySearchVal
-      }
+    httppost5(exportUrl, params).then(res => {
-      httppost5(apiurl.aqjc.bxjc.wyexport, params).then(res => {
+      exportFile(`${tabsActive == 0 ? '水平位移':clickItem.stationCode}.xlsx`, res.data)
-        exportFile(`${tabsActive == '1' ? '水平位移':'结构缝开度'}.xlsx`,res.data)
     })
+  }
+  // 获取结构缝历史数据
+  const getHistoryData = async (parmas) => {
+    try {
+      const res = await httppost2(apiurl.aqjc.bxjc.jgflist, parmas)
+      if (res.code == 200) {
+        setTableData(res.data)
+      }
+    } catch (error) {
+      console.log(error);
+      
     }
+  }
+
+  // 单击行的回调
+  const clickRow = (r) => {
+    if (tabsActive != 0) {
+      setClickItem(r)
+      setJgfOpen(true)
+    }
+  }
   useEffect(() => {
     const params = {
       search: {
         ...searchVal,
+        type: tabsActive
       }
     };
-    search(params)
+    tabsActive == 0 ? search(params) : search1(params);
-  }, [searchVal])
+  }, [searchVal, tabsActive])
-
 
+  useEffect(() => {
+    if (historySearchVal && clickItem) {
+      const params = {
+        ...historySearchVal,
+        stationCode:clickItem.stationCode
+      }
+      getHistoryData(params)
+    }
+  }, [historySearchVal,clickItem])
+  
   return (
     <>
       <div className='content-root clearFloat xybm' style={{ paddingBottom: "0" }}>
         <Tabs
-          defaultActiveKey="1"
+          defaultActiveKey={0}
-          onChange={(e) => {setTabsActive(e) }}
+          onChange={(e) => { setTabsActive(e) }}
           items={[
             {
               label: '水平位移',
-              key: '1',
+              key: 0,
             },
             {
               label: '结构缝开度',
-              key: '2',
+              key: 1,
 
             }
           ]}
@@ -120,21 +163,67 @@ const Page = () => {
               setSearchVal={setSearchVal}
               onSave={command('save')}
               tabsActive={tabsActive}
-              exportFile1={exportExcel}
+             
             />
           </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 )" }} />
+            {dataSource &&
+              <Table
+                columns={columns}
+                rowKey="tm"
+                {...dataSource}
+                scroll={{ x: width, y: "calc( 100vh - 400px )" }}
+                onRow={(r) => {
+                  return {
+                    onClick: () => {
+                      clickRow(r)
+                    }
+                  }
+                }}
+              />
+            }
           </div>
         </div>
-
         <BasicCrudModal
           width={1000}
           ref={refModal}
-          title=""
+          title=''
           component={ModalForm}
           onCrudSuccess={successCallback}
         />
+        <Modal
+          open={jgfOpen}
+          width={1000}
+          title={<div style={{display:'flex',columnGap:10,alignItems:'center'}}>
+          <span style={{width:5,height:16,background:"#3477f5"}}></span>
+          <span style={{fontSize:16, marginLeft:10}}>{clickItem.stationCode}</span>
+      </div>}
+          footer={null}
+          onCancel={() => setJgfOpen(false)}
+          destroyOnClose  
+        >
+          <>
+            <HistoryToolBar
+              exportFile1={exportExcel}
+              setTabVal={setTabVal}
+              setHistorySearchVal={setHistorySearchVal}
+            />
+            <div style={{ height: 504, padding: '5px 10px 20px 10px' }}>
+              
+            {
+              tabVal == '1' ?
+                tableData.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>
+                :null
+            }
+               {
+                tabVal==='2'?<div style={{marginTop:'10px'}}><TableData tableData={tableData}/></div>:null
+            }
+            </div>
+            
+          </>
+        </Modal>
       </div>
     </>
   );

src/views/SafeWatch/TransformWatch/options.js

@@ -0,0 +1,194 @@
+export default function options(data) {
+    // 缝开度
+    const kdMin = Math.floor(Math.min(...data.map(item => item.value)));
+    const kdMax = Math.ceil(Math.max(...data.map(item => item.value)));
+
+    // 温度
+    const tempMin = Math.floor(Math.min(...data.map(item => item.temp)));
+    const tempMax = Math.ceil(Math.max(...data.map(item => item.temp)));
+
+    // 模数
+    const modulusMin = Math.floor(Math.min(...data.map(item => item.modulus)));
+    const modulusMax = Math.ceil(Math.max(...data.map(item => item.modulus)));
+
+
+    return {
+        tooltip: {
+            trigger: 'axis',
+        },
+        legend: {
+            top:'3%',
+            data: ['缝开度', '温度', '模数']
+        },
+        grid: {
+            left: 35,
+            right:120
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: data.map(o => o.tm),
+                inverse: false,
+                splitLine: {
+                    show: false
+                },
+                axisLabel: {
+                    padding: [0, 0, 100, 0],
+                    color: '#333',
+                    fontSize: 12,
+                    formatter: val => val.slice(0, 10)
+                },
+                axisLine: {
+                    lineStyle: {
+                        color: '#8c8c8c',
+                        width: 1,
+                    }
+                },
+                axisTick: {
+                    show: false,
+                },
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                position: 'left',
+                name: "缝开度(mm)",
+                nameTextStyle: {
+                    padding: [0, 0, 10, 10],
+                    color: '#333333',
+                    fontSize: 14
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: '#bfbfbf',
+                        width: 0.5,
+                        type: 'dotted'
+                    }
+                },
+                axisLabel: {
+                    color: '#333',
+                    fontSize: 12,
+                },
+                axisLine: {
+                    // show: false
+                    lineStyle: {
+                        color: '#8c8c8c',
+                        width: 1,
+                    }
+                },
+                axisTick: {
+                    show: false,
+                },
+                min: kdMin,
+                max: kdMax,
+            },
+            {
+                type: 'value',
+                position: 'right',
+                offset: 80,
+                name: "温度(°℃)",
+                nameTextStyle: {
+                    padding: [0, 0, 10, 10],
+                    color: '#333333',
+                    fontSize: 14
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#07a6ff',
+                        width: 0.25,
+                        type: 'dotted'
+                    }
+                },
+                axisLabel: {
+                    color: '#333',
+                    fontSize: 12,
+                },
+                axisLine: {
+                    // show: false
+                    lineStyle: {
+                        color: '#8c8c8c',
+                        width: 1,
+                    }
+                },
+                axisTick: {
+                    show: false,
+                },
+                min: tempMin,
+                max: tempMax,
+            },
+            {
+                type: 'value',
+                position: 'right',
+                name: "模数(F)",
+                nameTextStyle: {
+                    padding: [0, 0, 10, 10],
+                    color: '#333333',
+                    fontSize: 14
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#07a6ff',
+                        width: 0.25,
+                        type: 'dotted'
+                    }
+                },
+                axisLabel: {
+                    color: '#333',
+                    fontSize: 12,
+                },
+                axisLine: {
+                    // show: false
+                    lineStyle: {
+                        color: '#8c8c8c',
+                        width: 1,
+                    }
+                },
+                axisTick: {
+                    show: false,
+                },
+                min: modulusMin,
+                max: modulusMax,
+            }
+        ],
+        series: [
+            {
+                yAxisIndex: 0,
+                name: '缝开度',
+                type: 'line',
+                color: "#d6eaec",
+                data: data.map(o => o.value),
+                symbol: 'none', // 设置标记点为'none'，即去掉圆点
+                smooth: 0.5
+            },
+            {
+                // xAxisIndex: 1,
+                yAxisIndex: 1,
+                name: '温度',
+                type: 'line',
+                color: "#60a0f8",
+                lineStyle: {
+                    // type: "dashed"
+                },
+                data: data.map(o => o.temp),
+                symbol: 'none', // 设置标记点为'none'，即去掉圆点
+                smooth: 0.5
+            },
+            {
+                yAxisIndex: 2,
+                name: '模数',
+                type: 'line',
+                // color: "#60a0f8",
+                lineStyle: {
+                    // type: "dashed"
+                },
+                data: data.map(o => o.modulus),
+                symbol: 'none', // 设置标记点为'none'，即去掉圆点
+                smooth: 0.5
+            },
+        ]
+    }
+}

src/views/SafeWatch/TransformWatch/toolbar.js

@@ -26,7 +26,8 @@ const ToolBar = ({ setSearchVal, onSave, tabsActive, exportFile1 }) => {
           <Form.Item label="监测点" name="stationCode">
             <Input allowClear style={{ width: '150px' }} />
           </Form.Item>
-          <Form.Item label={`${tabsActive == '1' ? '上报时间' : '监测时间'}`} name="tm">
+          {tabsActive == 0 && 
+            <Form.Item label='上报时间' name="tm">
             <RangePicker
               allowClear
               showTime
@@ -34,6 +35,8 @@ const ToolBar = ({ setSearchVal, onSave, tabsActive, exportFile1 }) => {
               format="YYYY-MM-DD HH:mm:ss"
             />
           </Form.Item>
+          }
+        
           <Form.Item>
             <Button type="primary" htmlType="submit">查询</Button>
           </Form.Item>
@@ -41,11 +44,13 @@ const ToolBar = ({ setSearchVal, onSave, tabsActive, exportFile1 }) => {
           <Form.Item>
             <Button onClick={() => form.resetFields()}>重置</Button>
           </Form.Item>
-          <Form.Item>
+          {tabsActive == 0 && 
+            <Form.Item>
             <Button onClick={() => exportFile1()}>导出</Button>
           </Form.Item>
+          }
           {
-            (onSave && tabsActive == '1') ?
+            (onSave && tabsActive == 0) ?
               <Form.Item>
                 <Button onClick={onSave}>新增</Button>
               </Form.Item>

src/views/SafeWatch/WarnRuleConfig/form.js

@@ -57,6 +57,14 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
                 <NormalSelect disabled={mode==='view'} style={{width:'100%'}} allowClear options={types} />
               </Form.Item>
           </Col>
+          <Col span={12}>
+              <Form.Item
+                label="测点位置"
+                name="location"
+              >
+                 <Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
+              </Form.Item>
+          </Col>
         
       </Row>
         {

src/views/SafeWatch/WarnRuleConfig/index.js

@@ -20,7 +20,8 @@ const Page = () => {
   const [searchVal, setSearchVal] = useState(false)
   const columns = [
     { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
-    { title: '测点', key: 'stationCode', dataIndex: 'stationCode', width: 150},
+    { title: '测点', key: 'stationCode', dataIndex: 'stationCode', width: 150 },
+    { title: '测点位置', key: 'location', dataIndex: 'location', width: 150,ellipse:true },
     {
       title: '类型', key: 'type', dataIndex: 'type', width: 150,
       render: (v) => <span>{types[v]}</span>