diff --git a/src/assets/ykzImg/left.png b/src/assets/ykzImg/left.png new file mode 100644 index 0000000..8735d26 Binary files /dev/null and b/src/assets/ykzImg/left.png differ diff --git a/src/assets/ykzImg/right.png b/src/assets/ykzImg/right.png new file mode 100644 index 0000000..b346c2c Binary files /dev/null and b/src/assets/ykzImg/right.png differ diff --git a/src/components/DashboardLayout/index.tsx b/src/components/DashboardLayout/index.tsx index 2d31354..81445cb 100644 --- a/src/components/DashboardLayout/index.tsx +++ b/src/components/DashboardLayout/index.tsx @@ -172,7 +172,7 @@ const DashboardLayout: React.FC = () => { }
- + Loading}> { menu.length>0?:null } diff --git a/src/components/crud/CrudOpRender.js b/src/components/crud/CrudOpRender.js index 494a003..2099f23 100644 --- a/src/components/crud/CrudOpRender.js +++ b/src/components/crud/CrudOpRender.js @@ -38,30 +38,9 @@ export function CrudOpRender_icon({ command, edit, del, restore, add, view }) { ) } -export function CrudOpRender_text({ command,picReview, edit,detail, dispatch,del, restore, add,similarAdd, view,zg, cjxgl,review,download,record }) { +export function CrudOpRender_text({ command,modify,edit,del,view}) { return (
- { - record ? ( - - ) : null - } - { - add ? ( - - ) : null - } - - { - detail ? ( - - ) : null - } - { - similarAdd ? ( - - ) : null - } { edit ? ( @@ -72,45 +51,6 @@ export function CrudOpRender_text({ command,picReview, edit,detail, dispatch,del ) : null } - { - cjxgl ? ( - - ) : null - } - { - review ? ( - - ) : null - } - { - picReview ? ( - - ) : null - } - { - zg ? ( - - ) : null - } - { - download ? ( - - ) : null - } - { - restore ? ( - - - - ) : null - } - { - dispatch ? ( - - - - ) : null - } { del ? ( @@ -118,7 +58,11 @@ export function CrudOpRender_text({ command,picReview, edit,detail, dispatch,del ) : null } - + { + modify ? ( + + ) : null + }
) } diff --git a/src/models/auth/_.ts b/src/models/auth/_.ts index bf5892c..cb0313d 100644 --- a/src/models/auth/_.ts +++ b/src/models/auth/_.ts @@ -246,7 +246,7 @@ export async function loadMenu(): Promise { ] }, { - id: id(), title: '系统管理', path: '/mgr/xtgl/yhxx', icon: 'sz', + id: id(), title: '系统管理', redirect: '/mgr/xtgl/yhxx', icon: 'sz', children: [ { id: id(), title: '用户信息', path: '/mgr/xtgl/yhxx', diff --git a/src/service/apiurl.js b/src/service/apiurl.js index 49ddbd6..a3977f5 100644 --- a/src/service/apiurl.js +++ b/src/service/apiurl.js @@ -11,6 +11,11 @@ const apiurl = { router: service_xyt + '/getRouters', role: service_xyt + '/system/menu/list' }, + + home: { + videoList: service_fxdd + "/gateValveCctvRel/list", + videosrc: service_fxdd + "/attCctvBase/preview", + }, zmjk: { getList : service_xyt + '/attGateB/list', getInformation: service_xyt + '/attGateB/data', diff --git a/src/views/AppRouters.tsx b/src/views/AppRouters.tsx index 6974582..b484bd1 100644 --- a/src/views/AppRouters.tsx +++ b/src/views/AppRouters.tsx @@ -13,11 +13,11 @@ import BasicSituation from "./Gcyx/InformationSearch/BasicSituation"; import RunSituation from "./Gcyx/InformationSearch/RunSituation"; import StaticTable from "./Gcyx/InformationSearch/StaticTable"; import OperateLog from "./Gcyx/InformationSearch/OperateLog"; -import Jcsj from './WatchData/Jcsj' +import Jcsj from './WatchData/Jcsj'; import PoliceRecord from './WatchData/PoliceMangant/PoliceRecord' import PoliceRuleConfig from './WatchData/PoliceMangant/PoliceRuleConfig' - +import UserInfo from './SystemMangant/UserInfo' const HomePage = lazy(() => import('./Home')) @@ -55,6 +55,10 @@ const AppRouters: React.FC = () => { { path: 'gcyx/xxcx/yxqk', element: }, { path: 'gcyx/xxcx/tjbb', element: }, { path: 'gcyx/xxcx/czrz', element: }, + + // 系统管理 + { path: 'xtgl/yhxx', element: }, + ], }, { path: '/login', element: }, diff --git a/src/views/Home/index.js b/src/views/Home/index.js index 00844fe..b091d7d 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -1,8 +1,14 @@ -import React, { useEffect, useState } from 'react' +import React, { useEffect, useState,useMemo } from 'react' import { useNavigate } from 'react-router'; import autofit from 'autofit.js' import Zmjk from "./zmjk" import './index.less' +import ReactEcharts from 'echarts-for-react'; +import options from './options' +import clsx from 'clsx'; +import { Select } from 'antd'; +import { httpget2,httppost2 } from '../../utils/request'; +import apiurl from '../../service/apiurl'; const MenuTitleCard = ({key,title}) => { return ( @@ -38,18 +44,82 @@ export default function Home() { }, ] + + const runData = [ + { + name: '闸后流量(m³/s)', + value: 4300, + time:'2024-08-15 15:00:00' + }, + { + name: '闸前水位(m)', + value: 9.82, + time:'2024-08-15 15:00:00' + }, + { + name: '闸后流量(m)', + value: 8.87, + time:'2024-08-15 15:00:00' + }, + { + name: '雨量(mm)', + value: 10.5, + time:'2024-08-15 15:00:00' + } + ] + + const pxOptions = useMemo(() => { + // if (staData) { + // return options(staData) + // } else { + // return options({}) + // } + return options({}) + }, []) + //安全监测数据 + const [safeData, setSafeData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, cd: "SY01", dm: '1#断面', kpa: 2749, time: '2024-08-15 15:00:00' }))) + //操作日志 + const [operateData, setOperateData] = useState(Array(5).fill(0).map((item, i) => ({ id: i, cd: '1#闸孔', content: "设定闸门开度为0.10m", name: '刘天明', kpa: 2749, time: '2024-08-15 15:00:00' }))) + //报警信息 + const [policeData, setPoliceData] = useState(Array(5).fill(0).map((item, i) => ({ id: i,zd:'闸前水位', watchvalue: "10.23",limit:0,max:10, time: '2024-08-15 15:00:00' }))) const navigate = useNavigate(); const jumpMenu = (item) => { navigate(item.key) } + const [videoList, setVideoList] = useState([]) + const [videoArr, setvideoArr] = useState({}) + + // 获取视频列表 + const getVideoList = async () => { + try { + const res = await httppost2(apiurl.home.videoList,{valveCode:"HP0024208020000063"}) + setVideoList(res.data.map(item => ({label:item.name,value:item.indexCode}))) + } catch (error) { + console.log(error); + } + } + + + // 获取视频流 + const getVideoSrc = async (current) => { + const res = await httpget2(`${apiurl.home.videosrc}${current}`) + if (res.code == 200 && res.data?.length !== 0) { + setvideoArr({src:res.data}) + }else{ + setvideoArr({}) + } + } + + const [activeOne, setActiveOne] = useState(0) useEffect(() => { autofit.init({ dh: 1080, dw: 1920, el:'#daping-body', resize: true - }) + }) + getVideoList() }, []) return ( @@ -66,6 +136,138 @@ export default function Home() {
+
+ {/* 工程简介 */} +
+
工程简介
+
+ + 盐卡闸位于湖北省荆州市经济开发区，荆江大堤左岸桩 745+614 处，位于观音寺闸上游 5km 处。盐卡闸主要工程任务为引水灌溉，解决四湖中下区农 +业灌溉和洪湖生态保障不足的问题。利用盐卡泵站进水渠，反向从长江引水，引水灌溉设计流量55m³/s，水闸级别为 1 级，次要建筑物级别为 3 级。 +
+
+ {/* 运行监测数据 */} +
+
运行监测数据
+
+ {runData.map((item,i) => ( +
setActiveOne(i)}> + {item.name} + {item.value} + {item.time} +
+ ))} +
+ +
+
+
+ {/* 安全监测数据 */} +
+
+
安全监测数据
+
+ + + + + + + + + + + {safeData.map((item, i) => ( + + + + + + + ))} + + +
测点编号监测断面渗压(KPa)监测时间
{item.cd}{item.dm}{item.kpa}{item.time}
+
+
+
+
+
+ {/* 操作日志 */} +
+
操作日志
+
+ + + + + + + + + + + {operateData.map((item, i) => ( + + + + + + + ))} + + +
闸孔编号操作内容操作人员操作时间
{item.cd}{item.content}{item.name}{item.time}
+
+
+ {/* 报警信息 */} +
+
报警信息
+
+ + + + + + + + + + + 6 ? 'scroll':'hidden'}} > + {policeData.map((item, i) => ( + + + + + + + + ))} + + +
监测点监测值阈值下限阈值上限报警时间
{item.zd}{item.watchvalue}{item.limit}{item.max}{item.time}
+
+
+ {/* 视频监控 */} +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + dateString} + getValueProps={(value) => { + return { + value: value ? [value[0]&&moment(value[0]),value[1]&&moment(value[1])] : undefined + }; + }} + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + { + mode==='view'?null:( + <> + + + + + ) + } + + + + ); +} + +export default ModalForm; diff --git a/src/views/SystemMangant/UserInfo/index.js b/src/views/SystemMangant/UserInfo/index.js new file mode 100644 index 0000000..0066b01 --- /dev/null +++ b/src/views/SystemMangant/UserInfo/index.js @@ -0,0 +1,159 @@ +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 {btnItemLayout } from '../../../components/crud/FormLayoutProps'; +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 types = { + 0: "管理员", + 1: '普通用户', + } + const [form] = Form.useForm(); + const refModal = useRef(); + const [searchVal, setSearchVal] = useState(false) + const columns = [ + { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" }, + { title: '登录账号', key: 'name', dataIndex: 'name', width: 150}, + { title: '姓名', key: 'adress', dataIndex: 'adress', width: 150}, + { title: '联系电话', key: 'adress', dataIndex: 'adress', width: 150}, + { title: '职务', key: 'adress', dataIndex: 'adress', width: 150}, + { title: '职责', key: 'adress', dataIndex: 'adress', width: 200}, + { + title: '角色', key: 'type', dataIndex: 'type', width: 140, + render: (value) => {types[value]}, + }, + { + title: '创建时间', key: 'eventsDate', dataIndex: 'eventsDate', width: 140, + }, + { + title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center', + render: (value, row, index) => ( + () => command(cmd)(row)} />) + }, + ]; + + + const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]); + + const [rowRecord, setRowRecord] = useState({}) + const [modifyOpen, setModifyOpen] = useState(false) + 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}`); + } else if (type === 'modify') { + setModifyOpen(true) + setRowRecord(params) + } + } + + + + const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.sbwh.whfabz.page).find_noCode); + + /** + * @description 处理成功的回调 + */ + const successCallback = () => { + refresh() +} + + useEffect(()=>{ + const params = { + search: { + ...searchVal, + } + }; + search(params) + }, [searchVal]) + + + return ( + <> +
+
+ + + +
+ + + + + + + + setModifyOpen(false)} + destroyOnClose + footer={null} + > +
{}} + > + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default Page; diff --git a/src/views/SystemMangant/UserInfo/index.less b/src/views/SystemMangant/UserInfo/index.less new file mode 100644 index 0000000..e69de29 diff --git a/src/views/SystemMangant/UserInfo/toolbar.js b/src/views/SystemMangant/UserInfo/toolbar.js new file mode 100644 index 0000000..295ed61 --- /dev/null +++ b/src/views/SystemMangant/UserInfo/toolbar.js @@ -0,0 +1,67 @@ +import React, { useEffect,useState } from 'react'; +import { Form, Input, Button, DatePicker } from 'antd'; +import NormalSelect from '../../../components/Form/NormalSelect'; + +import moment from 'moment'; +const { RangePicker } = DatePicker; +const ToolBar = ({ setSearchVal, onSave, storeData, role }) => { + + const types = [ + { + label: "管理员", + value: 0 + }, + { + label: "普通用户", + value: 1 + } + ] + const [form] = Form.useForm(); + + const onFinish = (values) => { + let dateSo; + if (values.tm) { + dateSo = { + 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, dateSo}); + } + + + return ( + <> +
+
+ + + + + + + + + + + + + + + + + { + (onSave) ? + + + + :null + } + +
+ + ); +} + +export default ToolBar; \ No newline at end of file diff --git a/src/views/WatchData/Jcsj/index.js b/src/views/WatchData/Jcsj/index.js index 372570d..40cc146 100644 --- a/src/views/WatchData/Jcsj/index.js +++ b/src/views/WatchData/Jcsj/index.js @@ -1,14 +1,16 @@ -import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react'; -import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image } from 'antd'; +import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react'; +import { Table, Card, Modal, Form, Input, Button, Row, Col, Timeline, message, Tabs, Image } from 'antd'; import ToolBar from './toolbar'; import apiurl from '../../../service/apiurl'; +import ReactEcharts from 'echarts-for-react'; +import options from './options' import usePageTable from '../../../components/crud/usePageTable2'; import { createCrudService } from '../../../components/crud/_'; import { httppost5 } from '../../../utils/request'; import { exportFile } from '../../../utils/tools.js'; import './index.less' -const RealCard = ({item}) => { +const RealCard = ({ item }) => { return (
{item.label}
@@ -21,54 +23,61 @@ const Page = () => { const types = { 0: "闸后流量", 1: '闸前水位', - 2:'闸后水位', - 3:'雨量', + 2: '闸后水位', + 3: '雨量', } - + const pxOptions = useMemo(() => { + // if (staData) { + // return options(staData) + // } else { + // return options({}) + // } + return options({}) + }, []) const nameList = [ { label: "闸后流量(m³/s)", - value:300 + value: 300 }, { label: "闸前水位(m)", - value:300 + value: 300 }, { label: "闸后水位(m)", - value:300 + value: 300 }, { label: "雨量(mm)", - value:300 + value: 300 } ] const [searchVal, setSearchVal] = useState(false) const columns = [ - { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" }, + { title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" }, { title: '监测项目', key: 'name', dataIndex: 'name', width: 150, render: (v) => {types[v]} - }, - { title: '监测值', key: 'adress', dataIndex: 'adress', width: 150}, + }, + { title: '监测值', key: 'adress', dataIndex: 'adress', width: 150 }, { title: '监测时间', key: 'eventsDate', dataIndex: 'eventsDate', 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 exportExcel = () => { let params = { ...searchVal, } httppost5(apiurl.pxjh.export, params).then(res => { - exportFile(`统计报表.xlsx`,res.data) - }) + exportFile(`统计报表.xlsx`, res.data) + }) } useEffect(() => { const params = { @@ -78,11 +87,11 @@ const Page = () => { }; search(params) }, [searchVal]) - - + + return ( <> -
+
@@ -95,7 +104,7 @@ const Page = () => { ))}
-
+
监测数据
@@ -107,12 +116,16 @@ const Page = () => { exportFile1={exportExcel} /> -
+
-
+
-
- +
+
diff --git a/src/views/WatchData/Jcsj/options.js b/src/views/WatchData/Jcsj/options.js new file mode 100644 index 0000000..e58cbcb --- /dev/null +++ b/src/views/WatchData/Jcsj/options.js @@ -0,0 +1,57 @@ +export default function options(data = {}) { + return { + tooltip: { + trigger: "axis", + }, + grid: { + top: 10, + bottom:135, + right:30 + }, + xAxis: { + type: "category", + data: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"], + boundaryGap: false, + axisLine: { + lineStyle: { + color: "#d9d9d9", + }, + }, + axisLabel: { + color: "#7a869a", + }, + }, + yAxis: { + type: "value", + splitLine: { + lineStyle: { + color: "#d9d9d9", + }, + }, + axisLine: { + show: false, + }, + axisLabel: { + color: "#7a869a", + formatter: '{value} m³/s' + }, + axisTick: { + show: false + } + }, + series: [ + { + data: [150, 230, 224, 218, 135, 147, 260], + type: "line", + name: '闸前水位', + lineStyle: { + color: '#5b8ff9' + }, + itemStyle: { + color: '#5b8ff9', + }, + }, + ], + + } +} \ No newline at end of file