From 9b161f40129996ee209e44bcfa2725e2e5d8422f Mon Sep 17 00:00:00 2001 From: lishenfeng Date: Mon, 23 Sep 2024 18:04:37 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat():=E6=B0=B4=E6=83=85=E5=BC=80=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/crud/CrudOpRender.js | 8 +- src/models/auth/_.ts | 24 +- src/views/AppRouters.tsx | 12 +- .../Home/MapCtrl/components/Jcsj/index.js | 16 +- .../Home/MapCtrl/components/Jcsj/index.less | 2 +- .../Home/MapCtrl/components/Sksjcx/index.js | 41 +- src/views/sq/qth/hdsq/index.js | 54 +++ src/views/sq/qth/hdsq/index.less | 108 +++++ src/views/sq/qth/hdsq/sssw.js | 66 +++ src/views/sq/qth/sksq/index.js | 49 +++ src/views/sq/qth/sksq/index.less | 108 +++++ src/views/sq/qth/sksq/sssw.js | 66 +++ src/views/sq/qth/ssyq/index.js | 72 ++++ src/views/sq/qth/ssyq/index.less | 82 ++++ src/views/sq/qth/ssyq/sssw.js | 43 ++ src/views/sz/pxjhgl/form.js | 395 ++++++++++++++++++ src/views/sz/pxjhgl/index.js | 111 +++++ src/views/sz/pxjhgl/index.less | 17 + src/views/sz/pxjhgl/toolbar.js | 66 +++ 19 files changed, 1288 insertions(+), 52 deletions(-) create mode 100644 src/views/sq/qth/hdsq/index.js create mode 100644 src/views/sq/qth/hdsq/index.less create mode 100644 src/views/sq/qth/hdsq/sssw.js create mode 100644 src/views/sq/qth/sksq/index.js create mode 100644 src/views/sq/qth/sksq/index.less create mode 100644 src/views/sq/qth/sksq/sssw.js create mode 100644 src/views/sq/qth/ssyq/index.js create mode 100644 src/views/sq/qth/ssyq/index.less create mode 100644 src/views/sq/qth/ssyq/sssw.js create mode 100644 src/views/sz/pxjhgl/form.js create mode 100644 src/views/sz/pxjhgl/index.js create mode 100644 src/views/sz/pxjhgl/index.less create mode 100644 src/views/sz/pxjhgl/toolbar.js diff --git a/src/components/crud/CrudOpRender.js b/src/components/crud/CrudOpRender.js index 41dddf830..494a00323 100644 --- a/src/components/crud/CrudOpRender.js +++ b/src/components/crud/CrudOpRender.js @@ -38,9 +38,14 @@ 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 }) { +export function CrudOpRender_text({ command,picReview, edit,detail, dispatch,del, restore, add,similarAdd, view,zg, cjxgl,review,download,record }) { return (
+ { + record ? ( + + ) : null + } { add ? ( @@ -113,6 +118,7 @@ export function CrudOpRender_text({ command,picReview, edit,detail, dispatch,del ) : null } +
) } diff --git a/src/models/auth/_.ts b/src/models/auth/_.ts index 0e9eb07e5..6fbaef2bf 100644 --- a/src/models/auth/_.ts +++ b/src/models/auth/_.ts @@ -208,23 +208,14 @@ export async function loadMenu(): Promise { ] }, { - id: id(), title: '监督考核', redirect: '/mgr/sz/jdkh/khtj', + id: id(), title: '培训管理', redirect: '/mgr/sz/pxgl/pxjhgl', children: [ { - id: id(), title: '考核统计', path: '/mgr/sz/jdkh/khtj', + id: id(), title: '培训计划管理', path: '/mgr/sz/pxgl/pxjhgl', }, { - id: id(), title: '考核任务管理', path: '/mgr/sz/jdkh/khrwgl', + id: id(), title: '培训记录管理', path: '/mgr/sz/pxgl/pxjlgl', }, - { - id: id(), title: '考核问题整改', path: '/mgr/sz/jdkh/khwtzg', - }, - { - id: id(), title: '考核指标管理', path: '/mgr/sz/jdkh/khzbgl', - }, - { - id: id(), title: '考核模板管理', path: '/mgr/sz/jdkh/khmbgl', - } ] } ] @@ -363,6 +354,15 @@ export async function loadMenu(): Promise { { 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'}, + ] + }, ] }, diff --git a/src/views/AppRouters.tsx b/src/views/AppRouters.tsx index 2672dbb40..d68e70d5f 100644 --- a/src/views/AppRouters.tsx +++ b/src/views/AppRouters.tsx @@ -86,6 +86,9 @@ import Kqys from './sq/qys/kqys/index.js' import Xyys from './sq/qys/xyys/index.js' import Gcys from './sq/qys/gcys/index.js' import Gcdsj from './sq/qzq/gcdsj' +import Sksq from './sq/qth/sksq' +import Hdsq from './sq/qth/hdsq' +import Ssyq from './sq/qth/ssyq' // import Zcdjxx from './sq/qys/' // import Zcdjxx from './sq/qfg/zcdjxx' @@ -94,6 +97,7 @@ import Gcdsj from './sq/qzq/gcdsj' // 四制 - 组织机构查看 import Zzjgck from './sz/zzjgck' +import Pxjhgl from './sz/pxjhgl' const HomePage = lazy(() => import('./Home')) @@ -147,6 +151,11 @@ const AppRouters: React.FC = () => { // 工程安全监测 + { path: 'sq/qth/dbaqjc', element: }, + { path: 'sq/qth/sksq', element: }, + { path: 'sq/qth/hdsq', element: }, + { path: 'sq/qth/ssyq', element: }, + // 预警 { path: 'gcaqjc/gcaqyj/bzt', element: }, { path: 'gcaqjc/gcaqyj/yhyj', element: }, @@ -203,7 +212,7 @@ const AppRouters: React.FC = () => { { path: 'fxzb/jczw/yqz', element: }, { path: 'fxzb/jczw/sqz', element: }, // 视频监控 - { path: 'spjk/spjk', element: }, + { path: 'sq/qth/spjk', element: }, { path: 'sg/gjgl/aigj', element: }, // { path: 'fxzb/zbb', element: }, @@ -234,6 +243,7 @@ const AppRouters: React.FC = () => { { path: 'sq/qzq/Gcdsj', element: }, // 四制-组织机构查看 { path: 'sz/gltx/zzjgck', element: }, + { path: 'sz/pxgl/pxjhgl', element: }, ], }, { path: '/login', element: }, diff --git a/src/views/Home/MapCtrl/components/Jcsj/index.js b/src/views/Home/MapCtrl/components/Jcsj/index.js index 511b80be2..2a568168c 100644 --- a/src/views/Home/MapCtrl/components/Jcsj/index.js +++ b/src/views/Home/MapCtrl/components/Jcsj/index.js @@ -77,10 +77,12 @@ function DrpSearch({record}) { ], } - setParams(option) + if (record.stcd) { + setParams(option) getData(option) + } - }, [current]) + }, [current,record]) return ( @@ -104,16 +106,16 @@ function DrpSearch({record}) {
{ ['小时', '日'].map((item, index) => ( -
setCurrent(index)}>{item}
+
setCurrent(index)}>{item}
)) }
-
-
+
+
-
+
{ data?.length > 0 ?
-
+
近1h雨量(mm)
diff --git a/src/views/Home/MapCtrl/components/Jcsj/index.less b/src/views/Home/MapCtrl/components/Jcsj/index.less index caa4e2dfe..107e9d9bf 100644 --- a/src/views/Home/MapCtrl/components/Jcsj/index.less +++ b/src/views/Home/MapCtrl/components/Jcsj/index.less @@ -13,7 +13,7 @@ padding: 8px 0; } - .active { + .sqActive { color: #5FB7FF; background: #F0F7FF; border: 1px solid #5FB7FF; diff --git a/src/views/Home/MapCtrl/components/Sksjcx/index.js b/src/views/Home/MapCtrl/components/Sksjcx/index.js index 96739fdfc..92a7f5dbb 100644 --- a/src/views/Home/MapCtrl/components/Sksjcx/index.js +++ b/src/views/Home/MapCtrl/components/Sksjcx/index.js @@ -40,31 +40,9 @@ function DrpSearch({ record }) { useEffect(() => { + let option = ""; - // 比较当前时间和早上八点 - // if (currentTime.isBefore(eightAM)) { - // option = { - // stcd: record.stcd, - // source: record.source, - // stm: moment().subtract(8, 'days').startOf('day').set({hour: 8, minute: 0}).format("YYYY-MM-DD HH:mm"), - // etm: moment().subtract(1, 'days').startOf('day').set({hour: 8, minute: 0}).format("YYYY-MM-DD HH:mm"), - // tm: [moment().subtract(8, 'days').startOf('day').set({ - // hour: 8, - // minute: 0 - // }), moment().subtract(1, 'days').startOf('day').set({hour: 8, minute: 0})], - // } - // } else { - // option = { - // stcd: record.stcd, - // source: record.source, - // stm: moment().subtract(7, 'days').startOf('day').set({hour: 8, minute: 0}).format("YYYY-MM-DD HH:mm"), - // etm: moment().startOf('day').set({hour: 8, minute: 0}).format("YYYY-MM-DD HH:mm"), - // tm: [moment().subtract(7, 'days').startOf('day').set({ - // hour: 8, - // minute: 0 - // }), moment().startOf('day').set({hour: 8, minute: 0})], - // } - // } + option = { stcd: record.stcd, source: record.source, @@ -75,15 +53,18 @@ function DrpSearch({ record }) { moment().add(1, 'hour').set({ minute: 0, second: 0 }), ], } - setParams(option) - getData(option) + if (record?.stcd && record.source) { + setParams(option) + getData(option) + + } }, [record]) return (
-
+
-
+
-
+
{ data.length > 0 ?
-
+
近1h雨量(mm)
diff --git a/src/views/sq/qth/hdsq/index.js b/src/views/sq/qth/hdsq/index.js new file mode 100644 index 000000000..4570c1e1c --- /dev/null +++ b/src/views/sq/qth/hdsq/index.js @@ -0,0 +1,54 @@ +import React, { useEffect, useState } from 'react' +import { reservoirlist, list} from "../../../../service/sssq"; +import Sssw from './sssw'; +import Sjcx from '../../../Home/MapCtrl/components/Sqjcsj/index' +import "./index.less" +import { helpers } from '@turf/turf'; +export default function Sksq() { + const [tableData, setTableData] = useState([]) + const [tableData1, setTableData1] = useState([]) + const getData = async (params) => { + setTableData(await reservoirlist(params)); + } + const getData1 = async (params) => { + setTableData1(await list(params)); + } + useEffect(() => { + let option = { + sources: ["SW", "SK"], + args: "", + }; + getData(option) + getData1({args: "",sources: ["SH", "SW"],}) + }, []) + return ( +
+
+
+
+
+ + 实时水位 +
+ 站点：{tableData[0]?.stnm} +
+
+ +
+
+
+
+
+ + 数据查询 +
+
+
+ +
+
+
+ +
+ ) +} diff --git a/src/views/sq/qth/hdsq/index.less b/src/views/sq/qth/hdsq/index.less new file mode 100644 index 000000000..e1f623d93 --- /dev/null +++ b/src/views/sq/qth/hdsq/index.less @@ -0,0 +1,108 @@ +.content-sk{ + display: flex; + column-gap: 10px; + height: calc(100vh - 90px); + .comomn-title{ + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 10px; + } + .content-left{ + width: 550px; + height: 100%; + background-color: #fff; + .ssjc{ + .root { + display: flex; + color: #333; + padding: 1rem 1rem 1rem 1rem; + } + + .realinfo { + width: 100%; + margin-right: 1rem + } + + .dataTm { + padding: 0.4rem 1rem; + border-radius: 0.4rem; + margin-bottom: 0.5rem; + font-size: 0.8rem; + } + + .online, .offline{ + color:#fff; + line-height:22px; + font-size:14px; + letter-spacing: 1px; + } + + .online { + border: 1px solid #9ccc65; + background-color: #33691e; + } + .report-time,.rain-report{ + display: flex; + width: 70%; + align-items: center; + color: #689fff; + font-size: 15px; + font-weight: 500; + line-height: 1.5; + column-gap: 5px; + margin-bottom: 10px; + justify-content: center; + padding: 7px 0; + background-color: #ecf5ff; + border: 1px solid #cde5ff; + border-radius: 5px; + margin-left: 10%; + } + + .offline { + border: 1px solid #ef5350; + background-color: #b71c1c; + } + + .infoItem { + border-bottom: 1px dashed #aaa; + display: flex; + font-size: 14px; + line-height: 1.8; + margin-bottom: 0.5rem; + + & > .row-key{ + width: 9rem; + line-height:30px; + } + + & > .row-value{ + width: 50%; + text-align: right; + font-weight: bold; + margin-right: 0.5rem; + flex-grow: 1; + } + + & > .row-unit{ + width: 3rem; + flex-shrink: 0; + } + } + + + } + } + .content-right{ + flex: 1; + height: 100%; + background-color: #fff; + .sjcx-content{ + padding: 10px; + } + } + .pic-container{ + padding: 10px; + } +} \ No newline at end of file diff --git a/src/views/sq/qth/hdsq/sssw.js b/src/views/sq/qth/hdsq/sssw.js new file mode 100644 index 000000000..b45a46ae9 --- /dev/null +++ b/src/views/sq/qth/hdsq/sssw.js @@ -0,0 +1,66 @@ +import React from 'react' +import moment from 'moment' +import MyImg from '../../../Home/MapCtrl/components/Skssjc/myImg' +export default function Sssw({data}) { + return ( +
+
+
+
水位上报时间: {data?.tm}
+ +
+
监测水位:
+
{data?.rz ? data?.rz.toFixed(2):'-'}
+
m
+
+ +
+
设计洪水位:
+
{data?.desFloodLev ? data?.desFloodLev.toFixed(2):'-'}
+
m
+
+ +
+
正常蓄水位:
+
{data.normWatLev ? data.normWatLev.toFixed(2):'-'}
+
m
+
+ +
+
汛限水位:
+
{data.flLowLimLev ? data.flLowLimLev.toFixed(2):'-'}
+
m
+
+ +
+
死水位:
+
{data.deadLev ? data.deadLev.toFixed(2):'-'}
+
m
+
+
+
坝顶高程:
+
{data.crestElev}
+
{ data.crestElev ? "m" : "-"}
+
+ +
+
水库当前库容:
+
{data.nowCap}
+
万m³
+
+ +
+
兴利库容:
+
{data.benResCap}
+
万m³
+
+
+
+
+ +
+
+ ) +} diff --git a/src/views/sq/qth/sksq/index.js b/src/views/sq/qth/sksq/index.js new file mode 100644 index 000000000..0ea1dac41 --- /dev/null +++ b/src/views/sq/qth/sksq/index.js @@ -0,0 +1,49 @@ +import React, { useEffect, useState } from 'react' +import { reservoirlist, } from "../../../../service/sssq"; +import Sssw from './sssw'; +import Sjcx from '../../../Home/MapCtrl/components/Sksjcx/index' +import "./index.less" +import { helpers } from '@turf/turf'; +export default function Sksq() { + const [tableData, setTableData] = useState([]) + const getData = async (params) => { + setTableData(await reservoirlist(params)); + } + useEffect(() => { + let option = { + sources: ["SW", "SK"], + args: "", + }; + getData(option) + }, []) + return ( +
+
+
+
+
+ + 实时水位 +
+ 站点：{tableData[0]?.stnm} +
+
+ +
+
+
+
+
+ + 数据查询 +
+
+
+ +
+
+
+ +
+ ) +} diff --git a/src/views/sq/qth/sksq/index.less b/src/views/sq/qth/sksq/index.less new file mode 100644 index 000000000..e1f623d93 --- /dev/null +++ b/src/views/sq/qth/sksq/index.less @@ -0,0 +1,108 @@ +.content-sk{ + display: flex; + column-gap: 10px; + height: calc(100vh - 90px); + .comomn-title{ + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 10px; + } + .content-left{ + width: 550px; + height: 100%; + background-color: #fff; + .ssjc{ + .root { + display: flex; + color: #333; + padding: 1rem 1rem 1rem 1rem; + } + + .realinfo { + width: 100%; + margin-right: 1rem + } + + .dataTm { + padding: 0.4rem 1rem; + border-radius: 0.4rem; + margin-bottom: 0.5rem; + font-size: 0.8rem; + } + + .online, .offline{ + color:#fff; + line-height:22px; + font-size:14px; + letter-spacing: 1px; + } + + .online { + border: 1px solid #9ccc65; + background-color: #33691e; + } + .report-time,.rain-report{ + display: flex; + width: 70%; + align-items: center; + color: #689fff; + font-size: 15px; + font-weight: 500; + line-height: 1.5; + column-gap: 5px; + margin-bottom: 10px; + justify-content: center; + padding: 7px 0; + background-color: #ecf5ff; + border: 1px solid #cde5ff; + border-radius: 5px; + margin-left: 10%; + } + + .offline { + border: 1px solid #ef5350; + background-color: #b71c1c; + } + + .infoItem { + border-bottom: 1px dashed #aaa; + display: flex; + font-size: 14px; + line-height: 1.8; + margin-bottom: 0.5rem; + + & > .row-key{ + width: 9rem; + line-height:30px; + } + + & > .row-value{ + width: 50%; + text-align: right; + font-weight: bold; + margin-right: 0.5rem; + flex-grow: 1; + } + + & > .row-unit{ + width: 3rem; + flex-shrink: 0; + } + } + + + } + } + .content-right{ + flex: 1; + height: 100%; + background-color: #fff; + .sjcx-content{ + padding: 10px; + } + } + .pic-container{ + padding: 10px; + } +} \ No newline at end of file diff --git a/src/views/sq/qth/sksq/sssw.js b/src/views/sq/qth/sksq/sssw.js new file mode 100644 index 000000000..b45a46ae9 --- /dev/null +++ b/src/views/sq/qth/sksq/sssw.js @@ -0,0 +1,66 @@ +import React from 'react' +import moment from 'moment' +import MyImg from '../../../Home/MapCtrl/components/Skssjc/myImg' +export default function Sssw({data}) { + return ( +
+
+
+
水位上报时间: {data?.tm}
+ +
+
监测水位:
+
{data?.rz ? data?.rz.toFixed(2):'-'}
+
m
+
+ +
+
设计洪水位:
+
{data?.desFloodLev ? data?.desFloodLev.toFixed(2):'-'}
+
m
+
+ +
+
正常蓄水位:
+
{data.normWatLev ? data.normWatLev.toFixed(2):'-'}
+
m
+
+ +
+
汛限水位:
+
{data.flLowLimLev ? data.flLowLimLev.toFixed(2):'-'}
+
m
+
+ +
+
死水位:
+
{data.deadLev ? data.deadLev.toFixed(2):'-'}
+
m
+
+
+
坝顶高程:
+
{data.crestElev}
+
{ data.crestElev ? "m" : "-"}
+
+ +
+
水库当前库容:
+
{data.nowCap}
+
万m³
+
+ +
+
兴利库容:
+
{data.benResCap}
+
万m³
+
+
+
+
+ +
+
+ ) +} diff --git a/src/views/sq/qth/ssyq/index.js b/src/views/sq/qth/ssyq/index.js new file mode 100644 index 000000000..38c5c4b69 --- /dev/null +++ b/src/views/sq/qth/ssyq/index.js @@ -0,0 +1,72 @@ +import React, { useEffect, useState } from 'react' +import { reservoirlist, } from "../../../../service/sssq"; +import { message } from 'antd'; +import Sssw from './sssw'; +import Sjcx from '../../../Home/MapCtrl/components/Jcsj/index' +import "./index.less" +import { httppost2 } from '../../../../utils/request'; +import apiurl from '../../../../service/apiurl'; +import { helpers } from '@turf/turf'; +export default function Sksq() { + const [tableData, setTableData] = useState([]) + const [tableData1, setTableData1] = useState([]) + const getData = async (params) => { + setTableData(await reservoirlist(params)); + } + const getData1 = async () =>{ + const { data, code, msg } = await httppost2(apiurl.home.yq) + if (code !== 200) { + message.error(msg || '请求失败'); + } + const list = data.map((i)=>{ + return { + id : i.stcd, + ...i, + drp : i.drp ,//i.v, + } + }) + setTableData1(list||[]) + + } + useEffect(() => { + let option = { + sources: ["SW", "SK"], + args: "", + }; + getData(option) + }, []) + + useEffect(() => { + getData1() + }, []) + return ( +
+
+
+
+
+ + 实时雨情 +
+ 站点：{tableData[0]?.stnm} +
+
+ +
+
+
+
+
+ + 数据查询 +
+
+
+ +
+
+
+ +
+ ) +} diff --git a/src/views/sq/qth/ssyq/index.less b/src/views/sq/qth/ssyq/index.less new file mode 100644 index 000000000..9159b4b8b --- /dev/null +++ b/src/views/sq/qth/ssyq/index.less @@ -0,0 +1,82 @@ +.content-sk{ + display: flex; + column-gap: 10px; + height: calc(100vh - 90px); + .comomn-title{ + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 10px; + } + .content-left{ + width: 550px; + height: 100%; + background-color: #fff; + .ssjc{ + .root { + display: flex; + color: #333; + padding: 1rem 1rem 1rem 1rem; + .drp-content{ + display: flex; + justify-content: center; + flex-wrap: wrap; + column-gap: 40px; + margin-top: 40px; + } + .drp-item{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + width: 220px; + height: 160px; + background-color: #eaf4fe; + margin-bottom: 40px; + .value{ + font-size: 20px; + font-weight: bold; + } + .name{ + font-size: 16px; + color: #40a9ff; + } + } + } + + + .report-time,.rain-report{ + display: flex; + width: 70%; + align-items: center; + color: #689fff; + font-size: 15px; + font-weight: 500; + line-height: 1.5; + column-gap: 5px; + margin-bottom: 10px; + justify-content: center; + padding: 7px 0; + background-color: #ecf5ff; + border: 1px solid #cde5ff; + border-radius: 5px; + margin-left: 10%; + } + + + + + } + } + .content-right{ + flex: 1; + height: 100%; + background-color: #fff; + .sjcx-content{ + padding: 10px; + } + } + .pic-container{ + padding: 10px; + } +} \ No newline at end of file diff --git a/src/views/sq/qth/ssyq/sssw.js b/src/views/sq/qth/ssyq/sssw.js new file mode 100644 index 000000000..e5883e0d0 --- /dev/null +++ b/src/views/sq/qth/ssyq/sssw.js @@ -0,0 +1,43 @@ +import React from 'react' +import moment from 'moment' +import MyImg from '../../../Home/MapCtrl/components/Skssjc/myImg' +export default function Sssw({data}) { + return ( +
+
+
+
雨情最新上报时间: {data?.tm}
+
+
+
12.5 mm
+
近1小时
+
+
+
12.5 mm
+
近3小时
+
+
+
12.5 mm
+
近6小时
+
+
+
12.5 mm
+
近12小时
+
+
+
12.5 mm
+
近24小时
+
+
12.5 mm
+
近48小时
+
+ +
+
+
+ +
+ ) +} diff --git a/src/views/sz/pxjhgl/form.js b/src/views/sz/pxjhgl/form.js new file mode 100644 index 000000000..0e03b7071 --- /dev/null +++ b/src/views/sz/pxjhgl/form.js @@ -0,0 +1,395 @@ +import React,{useEffect,useState,useMemo,useRef} from 'react'; +import { Form, Button, Input, Row,Upload, Col, Table, DatePicker, InputNumber,message,Image,Modal,Typography ,Popconfirm } 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 NormalSelect from '../../../components/Form/NormalSelect'; +import "./index.less" +import moment from 'moment'; +import { createCrudService } from '../../../components/crud/_'; +const { RangePicker } = DatePicker +const { Dragger } = Upload; +const url = "http://223.75.53.141:9102/test.by-lyf.tmp" + +const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => { + + const types = [ + { + label: "水利", + value:1 + }, + { + label: "岗前培训", + value:2 + },{ + label: "在岗培训", + value:3 + },{ + label: "政治学习教育", + value:4 + },{ + label: "其他", + value:5 + }, + ] + const [details, setDetails] = useState([]) + + + + + + + + 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 {*} type + * @returns + */ + const getFileInfo = (params) => { + createCrudService(apiurl.fxzb.qsdw.zq.getFile).delGet({ teamId: params.teamId }).then(res => { + if (res.code === 200) { + let fileArr = res.data?.files.map(item => { + return { + name: item.fileName, + response: { + data: { + filePath: item.filePath, + fileId:item.fileId + } + }, + } + }) + setFileList(fileArr) + const result = res.data?.details.map(item => ({ ...item, key: item.detailId })) + console.log("resss",result); + + setDetails(result) + } + }) + } + /** + * @description 文件下载 + * @param {String} params 文件fileId + */ + const download = (params) => { + let downloadLink = document.createElement("a"); + downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xyt/rescue/team/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 = () => { + let values = form.getFieldsValue(); + values.details = details; + values.validStartDate = values.dateRangeSo&&moment(values.dateRangeSo[0]).format("YYYY-MM-DD") + values.validEndDate = values.dateRangeSo&&moment(values.dateRangeSo[1]).format("YYYY-MM-DD") + if (mode === 'edit') { + let oldFiles = fileList.map(item => item.response?.data?.fileId ) + values.fileIds = oldFiles; + values.teamId = record.teamId; + onEdit(apiurl.fxzb.qsdw.zq.edit,values) + } + if (mode === 'save') { + values.fileIds = fileIds + onSave(apiurl.fxzb.qsdw.zq.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 (record.teamId ) { + getFileInfo(record) + } + }, [record]) + + useEffect(() => { + if (mode !== "save") { + let dataSo = [ + record.validStartDate? moment(record.validStartDate):'', + record.validEndDate? moment(record.validEndDate): '' + ] + + form.setFieldsValue({...record,dateRangeSo:dataSo}) + + } + + }, [record,mode]) + + return ( + <> +
基本信息
+ {/* */} +
+ + + + + + + + + + + + + + + + dateString} + getValueProps={(value) => { + return { + value: value ? [value[0]&&moment(value[0]),value[1]&&moment(value[1])] : undefined + }; + }} + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {mode !== "view" && + { console.log(info.dataTransfer.files); }} + fileList={fileList} + disabled={loading} + // onSuccess={handleSuccess} + > +

点击或拖拽文件到此区域上传

+

+ 支持扩展名：.rar .zip .doc .docx .pdf .jpg .png .ppt +

+ + } + + { + fileList.length > 0 && fileList.map(file => { + return ( + +
+
+ {file.name.indexOf('.docx') > -1 ? +
{ download(file.response?.data?.fileId) }} + style={{ cursor: 'pointer' }} + > + +
+ : + file.name.indexOf('.pdf') > -1 ? +
{ viewPdf(file.response?.data?.fileId) }} + style={{ cursor: 'pointer' }} + > + +
+ : + file.name.indexOf('.zip') > -1 ? +
{ download(file.response?.data?.fileId) }} + style={{ cursor: 'pointer' }} + > + +
+ : + file.name.indexOf('.xlsx') > -1 ? +
{ download(file.response?.data?.fileId) }} + style={{ cursor: 'pointer' }} + > + +
+ : + + } + {file.name} +
+
deleteFile(file.response?.data?.fileId)}> + +
+
+ + ) + }) + } + + + + +
+
+ 队伍明细：（共计{details?.length}人） +
+ { + setPdfViewOPen(false) + }} + > +