页面搭建
xielei
commit
e47436eda8
|
|
@ -38,6 +38,7 @@
|
|||
"gsap": "^3.11.5",
|
||||
"http-proxy-middleware": "^2.0.6",
|
||||
"js-md5": "^0.8.3",
|
||||
"konva": "^8.3.14",
|
||||
"lodash": "^4.17.21",
|
||||
"moment": "^2.29.4",
|
||||
"ol": "^7.4.0",
|
||||
|
|
@ -48,6 +49,7 @@
|
|||
"react-audio-player": "^0.17.0",
|
||||
"react-cookies": "^0.1.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-konva": "^18.2.3",
|
||||
"react-pdf": "^7.3.3",
|
||||
"react-redux": "^8.0.2",
|
||||
"react-rnd": "^10.4.11",
|
||||
|
|
@ -6593,6 +6595,14 @@
|
|||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-reconciler": {
|
||||
"version": "0.28.8",
|
||||
"resolved": "https://registry.npmmirror.com/@types/react-reconciler/-/react-reconciler-0.28.8.tgz",
|
||||
"integrity": "sha512-SN9c4kxXZonFhbX4hJrZy37yw9e7EIxcpHCxQv5JUS18wDE5ovkQKlqQEkufdJCCMfuI9BnjUJvhYeJ9x5Ra7g==",
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/resolve": {
|
||||
"version": "1.17.1",
|
||||
"resolved": "https://registry.npmmirror.com/@types/resolve/-/resolve-1.17.1.tgz",
|
||||
|
|
@ -13004,6 +13014,17 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/its-fine": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmmirror.com/its-fine/-/its-fine-1.2.5.tgz",
|
||||
"integrity": "sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==",
|
||||
"dependencies": {
|
||||
"@types/react-reconciler": "^0.28.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=18.0"
|
||||
}
|
||||
},
|
||||
"node_modules/jake": {
|
||||
"version": "10.8.5",
|
||||
"resolved": "https://registry.npmmirror.com/jake/-/jake-10.8.5.tgz",
|
||||
|
|
@ -15065,6 +15086,25 @@
|
|||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/konva": {
|
||||
"version": "8.4.3",
|
||||
"resolved": "https://registry.npmmirror.com/konva/-/konva-8.4.3.tgz",
|
||||
"integrity": "sha512-ARqdgAbdNIougRlOKvkQwHlGhXPRBV4KvhCP+qoPpGoVQwwiJe4Hkdu4HHdRPb9rGUp04jDTAxBzEwBsE272pg==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/lavrton"
|
||||
},
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/konva"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/lavrton"
|
||||
}
|
||||
]
|
||||
},
|
||||
"node_modules/l7-tiny-sdf": {
|
||||
"version": "0.0.4",
|
||||
"resolved": "https://registry.npmjs.org/l7-tiny-sdf/-/l7-tiny-sdf-0.0.4.tgz",
|
||||
|
|
@ -18793,6 +18833,51 @@
|
|||
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/react-konva": {
|
||||
"version": "18.2.10",
|
||||
"resolved": "https://registry.npmmirror.com/react-konva/-/react-konva-18.2.10.tgz",
|
||||
"integrity": "sha512-ohcX1BJINL43m4ynjZ24MxFI1syjBdrXhqVxYVDw2rKgr3yuS0x/6m1Y2Z4sl4T/gKhfreBx8KHisd0XC6OT1g==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/lavrton"
|
||||
},
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/konva"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/lavrton"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"@types/react-reconciler": "^0.28.2",
|
||||
"its-fine": "^1.1.1",
|
||||
"react-reconciler": "~0.29.0",
|
||||
"scheduler": "^0.23.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"konva": "^8.0.1 || ^7.2.5 || ^9.0.0",
|
||||
"react": ">=18.0.0",
|
||||
"react-dom": ">=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-konva/node_modules/react-reconciler": {
|
||||
"version": "0.29.2",
|
||||
"resolved": "https://registry.npmmirror.com/react-reconciler/-/react-reconciler-0.29.2.tgz",
|
||||
"integrity": "sha512-zZQqIiYgDCTP/f1N/mAR10nJGrPD2ZR+jDSEsKWJHYC7Cm2wodlwbR3upZRdC3cjIjSlTLNVyO7Iu0Yy7t2AYg==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"scheduler": "^0.23.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-lifecycles-compat": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
|
|
@ -19603,9 +19688,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/scheduler": {
|
||||
"version": "0.23.0",
|
||||
"resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.23.0.tgz",
|
||||
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
|
||||
"version": "0.23.2",
|
||||
"resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.23.2.tgz",
|
||||
"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.1.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,10 @@
|
|||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"redux": "^4.2.0",
|
||||
"typescript": "^4.7.4"
|
||||
"typescript": "^4.7.4",
|
||||
"konva": "^8.3.14",
|
||||
"react-konva": "^18.2.3"
|
||||
|
||||
},
|
||||
"scripts": {
|
||||
"start": "craco start",
|
||||
|
|
|
|||
|
|
@ -207,6 +207,19 @@ export async function loadMenu(): Promise<MenuItem[]> {
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: id(), title: '培训管理', redirect: '/mgr/sz/pxgl/pxjhgl',
|
||||
children: [
|
||||
{
|
||||
id: id(), title: '培训计划管理', path: '/mgr/sz/pxgl/pxjhgl',
|
||||
},
|
||||
{
|
||||
id: id(), title: '培训记录管理', path: '/mgr/sz/pxgl/pxjlgl',
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
id: id(), title: '水政执法', redirect: '/mgr/sz/szzf/ajdj',
|
||||
children: [
|
||||
|
|
@ -250,13 +263,13 @@ export async function loadMenu(): Promise<MenuItem[]> {
|
|||
id: id(), title: '四预', redirect: '/mgr/sy/fhxzfx', icon: 'fxzb',
|
||||
children: [
|
||||
{ id: id(), title: '防洪形势', path: '/mgr/sy/fhxzfx' },
|
||||
{ id: id(), title: '天气预报', path: '/mgr/fxzb/tqyb' },
|
||||
{ id: id(), title: '天气预报', path: '/mgr/sy/tqyb' },
|
||||
{
|
||||
id: id(), title: '洪水预报', redirect: '/mgr/fxzb/hsyb/hyybjs',
|
||||
id: id(), title: '洪水预报', redirect: '/mgr/sy/hsyb/hyybjs',
|
||||
children: [
|
||||
{ id: id(), title: '洪水预报计算', path: '/mgr/fxzb/hsyb/hyybjs' },
|
||||
{ id: id(), title: '预报方案管理', path: '/mgr/fxzb/hsyb/ybfagl' },
|
||||
{ id: id(), title: '参数管理', path: '/mgr/fxzb/hsyb/csgl' },
|
||||
{ id: id(), title: '洪水预报计算', path: '/mgr/sy/hsyb/hyybjs' },
|
||||
{ id: id(), title: '预报方案管理', path: '/mgr/sy/hsyb/ybfagl' },
|
||||
{ id: id(), title: '参数管理', path: '/mgr/sy/hsyb/csgl' },
|
||||
]
|
||||
},
|
||||
{ id: id(), title: '防汛预案', path: '/mgr/sy/fxya' },
|
||||
|
|
@ -302,6 +315,9 @@ export async function loadMenu(): Promise<MenuItem[]> {
|
|||
{ id: id(), title: '防治宣传', path: '/mgr/sg/byfz/byxc' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: id(), title: '闸门监控', path: '/mgr/sg/zmjk',
|
||||
},
|
||||
{
|
||||
id: id(), title: '维修养护', path: '/mgr/sg/wxyh',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,6 +8,37 @@ const service_fxdd = '/gunshiApp/tsg'
|
|||
const service_xyt = '/gunshiApp/tsg'//登陆先用小玉潭
|
||||
const service_shzh = '/shzh'
|
||||
const apiurl = {
|
||||
gbyj: {
|
||||
list: service_fxdd + "/broadcastStation/list", //广播站
|
||||
page: service_fxdd + "/broadcastWarn/page",
|
||||
mblist: service_fxdd + "/broadcastTemplate/list",
|
||||
bb: service_fxdd + "/broadcastWarn/insert",
|
||||
mbsave: service_fxdd + "/broadcastTemplate/insert",
|
||||
mbDel:service_fxdd + "/broadcastTemplate/del"
|
||||
},
|
||||
zrrgl: {
|
||||
page: service_fxdd + "/resPerson/page",
|
||||
edit: service_fxdd + "/resPerson/update",
|
||||
delete: service_fxdd + "/resPerson/del",
|
||||
save:service_fxdd + "/resPerson/insert",
|
||||
},
|
||||
pxjh: {
|
||||
page: service_fxdd + "/personnelPlan/page",
|
||||
edit: service_fxdd + "/personnelPlan/update",
|
||||
delete: service_fxdd + "/personnelPlan/del",
|
||||
save: service_fxdd + "/personnelPlan/insert",
|
||||
import: service_fxdd + '/personnelPlan/template',
|
||||
export:service_fxdd + "/personnelPlan/download"
|
||||
},
|
||||
pxjl: {
|
||||
page: service_fxdd + "/personnelPlanLog/page",
|
||||
edit: service_fxdd + "/personnelPlanLog/update",
|
||||
delete: service_fxdd + "/personnelPlanLog/del",
|
||||
save: service_fxdd + "/personnelPlanLog/insert",
|
||||
sta: service_fxdd + "/personnelPlanLog/statistics",
|
||||
list: service_fxdd + "/personnelPlan/list",
|
||||
getFile:service_fxdd + "/personnelPlanLog/get"
|
||||
},
|
||||
fxya: {
|
||||
page: service_fxdd + "/resPlanB/list",
|
||||
update: service_fxdd + "/resPlanB/update",
|
||||
|
|
@ -24,6 +55,14 @@ const apiurl = {
|
|||
role: service_xyt + '/system/menu/list'
|
||||
},
|
||||
|
||||
//闸门监控
|
||||
zmjk: {
|
||||
getList : service_xyt + '/attGateB/list',
|
||||
getInformation: service_xyt + '/attGateB/data',
|
||||
getDamData: service_xyt + '/gatePore/listByStcd',
|
||||
getVideo: service_xyt + '/gateValveCctvRel/list'
|
||||
},
|
||||
|
||||
// 基本情况
|
||||
home: {
|
||||
yq: service_fxdd + '/real/rain/list',//'/stStbprpB/rainfallStationDetails/rainfallList',//雨情
|
||||
|
|
@ -820,6 +859,7 @@ const apiurl = {
|
|||
//
|
||||
//实时雨情
|
||||
ssyq: {
|
||||
maxDrp:service_fxdd + "/attResBase/maxRain",
|
||||
status: service_fxdd + '/xfProjectRun/has/read',
|
||||
basNameList: service_fxdd + '/real/rain/basNameList', //流域选择
|
||||
adnmList: service_fxdd + '/real/rain/adnmList', //行政选择
|
||||
|
|
|
|||
|
|
@ -131,6 +131,17 @@ export async function StcdAndStartTimeAndEndTimeHour(params) {
|
|||
return data;
|
||||
}
|
||||
|
||||
export async function maxDrpUrl(params) {
|
||||
params.startTime=moment(params.startTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
params.endTime=moment(params.endTime).format("YYYY-MM-DD HH:mm:ss")
|
||||
const { data, code, msg } = await httppost(apiurl.ssyq.maxDrp,params) || {};
|
||||
|
||||
if (code !== 200) {
|
||||
message.error(msg || '请求失败');
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
//实时雨情-弹框详情-测站编码查详细雨量
|
||||
export async function queryStPptnDetails(stcd) {
|
||||
const { data, code, msg } = await httpget(apiurl.ssyq.queryStPptnDetails,{stcd}) || {};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ module.exports = function (app) {
|
|||
'/gunshiApp',
|
||||
createProxyMiddleware({
|
||||
target: 'http://local.gunshiiot.com:18083/',//测试
|
||||
// target: 'http://36.139.207.50:18083/',//正式
|
||||
// target: 'http://192.168.66.199:24105/',//正式
|
||||
// target: 'http://36.139.207.50:18083/',//移动云
|
||||
changeOrigin: true,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -10,6 +10,20 @@ export function changeObjectStringToMoment(obj: { [key: string]: any }, fields:
|
|||
return ret;
|
||||
}
|
||||
|
||||
export function apertureMeter(val?: any): number | undefined {
|
||||
if (typeof val !== 'number') {
|
||||
return undefined
|
||||
}
|
||||
return val / 1000;
|
||||
}
|
||||
|
||||
export function renAperture(val?: any) {
|
||||
if (typeof val !== 'number') {
|
||||
return '-'
|
||||
}
|
||||
|
||||
return (val / 1000).toFixed(3);
|
||||
}
|
||||
|
||||
export async function base64FromFile(file: File): Promise<string | undefined> {
|
||||
return new Promise((resolve) => {
|
||||
|
|
|
|||
|
|
@ -48,6 +48,7 @@ import Xjxpz from "./rcgl/xcxj/xjxpz"
|
|||
import Fzxc from "./rcgl/byfz/fzxc"
|
||||
import Bypc from "./rcgl/byfz/bypc"
|
||||
|
||||
import Zmjk from "./rcgl/zmjk"
|
||||
import Wxyh from "./rcgl/wxyh"
|
||||
import Szzb from "./rcgl/szzb"
|
||||
import Stlljc from "./rcgl/stlljc"
|
||||
|
|
@ -78,6 +79,8 @@ import Gstjfx from "./gxsl/gstjfx"
|
|||
// 视频监控
|
||||
import Spjk from "./video"
|
||||
import AiWarn from "./spjk/aiWarn"
|
||||
// 广播预警
|
||||
import Gbyj from "./gbyj/index"
|
||||
|
||||
|
||||
// 四全
|
||||
|
|
@ -191,6 +194,7 @@ const AppRouters: React.FC = () => {
|
|||
{ path: 'sg/xcxj/xjxpz', element: <Xjxpz/> },
|
||||
{ path: 'sg/byfz/byxc', element: <Fzxc /> },
|
||||
{ path: 'sg/byfz/bypc', element: <Bypc /> },
|
||||
{ path: 'sg/zmjk', element: <Zmjk /> },
|
||||
{ path: 'sg/wxyh', element: <Wxyh /> },
|
||||
{ path: 'sg/aqgl/aqjcgl', element: <Aqjcgl /> },
|
||||
{ path: 'sg/aqgl/fxgkqd', element: <Fxgkqd /> },
|
||||
|
|
@ -222,6 +226,7 @@ const AppRouters: React.FC = () => {
|
|||
// 视频监控
|
||||
{ path: 'sq/qth/spjk', element: <Spjk /> },
|
||||
{ path: 'sg/gjgl/aigj', element: <AiWarn /> },
|
||||
{ path: 'sg/gjgl/gbyj', element: <Gbyj /> },
|
||||
|
||||
// { path: 'fxzb/zbb', element: <Zbb /> },
|
||||
// { path: 'fxzb/txl', element: <Txl /> },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Descriptions, Modal } from 'antd';
|
||||
import {CloseOutlined} from '@ant-design/icons';
|
||||
import { httpget2 } from '../../../../utils/request';
|
||||
import apiurl from '../../../../service/apiurl';
|
||||
import moment from "moment"
|
||||
|
||||
function Wxq({ id, data, dispatch }) {
|
||||
console.log(data);
|
||||
const width = 400;
|
||||
const [detail, setDetail] = useState({})
|
||||
const [visible,setVisible] = useState(false)
|
||||
const closePop = () => {
|
||||
dispatch.runtime.closeFeaturePop(id);
|
||||
};
|
||||
const getDetailData = async(id) => {
|
||||
try {
|
||||
const res = await httpget2(`${apiurl.home.wxqdetail}/${id}`);
|
||||
setDetail(res.data)
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
if (data?.PID) {
|
||||
getDetailData(data?.PID)
|
||||
}
|
||||
}, [data])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="normalModalStyle homeModal2">
|
||||
<div className="normalModalStyle_title">
|
||||
<div className="normalModalStyle_title_icon"></div>
|
||||
{data.stationCode}
|
||||
<div className="normalModalStyle_title_cancel">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='homeModal2_content'>
|
||||
daichuli
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Wxq);
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { Descriptions, Modal } from 'antd';
|
||||
import {CloseOutlined} from '@ant-design/icons';
|
||||
import { httpget2 } from '../../../../utils/request';
|
||||
import apiurl from '../../../../service/apiurl';
|
||||
import moment from "moment"
|
||||
|
||||
function Wxq({ id, data, dispatch }) {
|
||||
console.log(data);
|
||||
const width = 400;
|
||||
const [detail, setDetail] = useState({})
|
||||
const [visible,setVisible] = useState(false)
|
||||
const closePop = () => {
|
||||
dispatch.runtime.closeFeaturePop(id);
|
||||
};
|
||||
const getDetailData = async(id) => {
|
||||
try {
|
||||
const res = await httpget2(`${apiurl.home.wxqdetail}/${id}`);
|
||||
setDetail(res.data)
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
if (data?.PID) {
|
||||
getDetailData(data?.PID)
|
||||
}
|
||||
}, [data])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="dp-popup" style={{ position: 'absolute', top: '10px', left: 0, width, lineHeight: 1, background:'#ffffff' ,transform: 'translateX(-50%)' }}>
|
||||
<div className="dp-popup-tip" style={{marginTop:'-10px',borderBottomColor:'#f7f7f7'}}></div>
|
||||
<div className="dp-popup-content">
|
||||
<div className="content-body tyb" id='tyb'>
|
||||
<div className="title">
|
||||
<div className="name flex flexac">
|
||||
<div className='nameBorder'></div>
|
||||
{data.stnm}
|
||||
</div>
|
||||
<div style={{cursor:'pointer',marginRight:'10px'}} onClick={()=>{setVisible(true)}}>详情</div>
|
||||
<div className="extra">
|
||||
<CloseOutlined onClick={closePop} style={{color:"#333"}}/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="body">
|
||||
<Descriptions labelStyle={{padding:"5px 0"}}>
|
||||
<Descriptions.Item label="巡查完成日期" span={3} contentStyle={{ padding: "5px 0" }}>{data?.adnm || detail?.adnm}</Descriptions.Item>
|
||||
<Descriptions.Item label="检查人" span={3} contentStyle={{padding:"5px 0"}}>{data?.ptcount || detail?.ptcount}</Descriptions.Item>
|
||||
<Descriptions.Item label="任务类型" span={3} contentStyle={{padding:"5px 0"}}>{data?.etcount || detail?.etcount}</Descriptions.Item>
|
||||
<Descriptions.Item label="问题数量" span={3} contentStyle={{padding:"5px 0"}}>{data.htcount || detail?.htcount}</Descriptions.Item>
|
||||
<Descriptions.Item label="待处理" span={3} contentStyle={{padding:"5px 0"}}>{data.htcount || detail?.htcount}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</div>
|
||||
</div>
|
||||
<div className="boxfoot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<Modal
|
||||
visible={visible}
|
||||
title={'巡查任务详情'}
|
||||
footer={null}
|
||||
onCancel={()=>{setVisible(false)}}
|
||||
width="60vw"
|
||||
destroyOnClose
|
||||
className="queryDrpModal"
|
||||
style={{top:"15px", height:"58vh"}}
|
||||
>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Wxq);
|
||||
|
|
@ -38,6 +38,8 @@ import YHJMH from './YHJMH'
|
|||
import ShenYa from './ShenYa/index.js';
|
||||
import ShenLiu from './ShenLiu/index.js';
|
||||
import WeiYi from './WeiYi/index.js';
|
||||
import XunJian from './XunJian.js'
|
||||
import DaiChuLi from './DaiChuLi.js'
|
||||
|
||||
|
||||
import YinShuiGongCheng from './YinShuiGongCheng';//这个先不搞
|
||||
|
|
@ -201,10 +203,15 @@ function FeaturePops({ mapobj }) {
|
|||
<WeiYi id={id} data={data} dispatch={dispatch} record={data}/>
|
||||
</Modal>
|
||||
)
|
||||
}else if (type === 'xunjian'){
|
||||
Comp = XunJian
|
||||
}else if (type === 'daichuli'){
|
||||
return (
|
||||
<Modal width={1050} wrapClassName='home_modal' bodyStyle={{padding:0}} title={null} closable={false} footer={null} open={true} onCancel={()=>dispatch.runtime.closeFeaturePop(id)} destroyOnClose={true}>
|
||||
<DaiChuLi id={id} data={data} dispatch={dispatch} record={data}/>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
else{
|
||||
return null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import clsx from "clsx";
|
|||
import './index.less'
|
||||
import TableData from './TableData'
|
||||
import drpOption from './drpOption';
|
||||
import {StcdAndStartTimeAndEndTime,StcdAndStartTimeAndEndTimeHour,queryStPptnDetails,queryStStbprpPerDayChart,queryStStbprpPerHourChart} from '../../../../../service/ssyq'
|
||||
import {StcdAndStartTimeAndEndTime,StcdAndStartTimeAndEndTimeHour,queryStPptnDetails,queryStStbprpPerDayChart,queryStStbprpPerHourChart,maxDrpUrl} from '../../../../../service/ssyq'
|
||||
|
||||
const {RangePicker} = DatePicker;
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ function DrpSearch({record}) {
|
|||
const [echartData, setEchartData] = useState({});
|
||||
const [current, setCurrent] = useState(0);
|
||||
const [detail, setDetail] = useState({});
|
||||
|
||||
const [maxDrp, setMaxDrp] = useState({})
|
||||
|
||||
const option = useMemo(() => {
|
||||
return drpOption({echartData});
|
||||
|
|
@ -45,9 +45,11 @@ function DrpSearch({record}) {
|
|||
console.log("params",params);
|
||||
if(current==0){
|
||||
setData(await StcdAndStartTimeAndEndTimeHour(params));
|
||||
setMaxDrp(await maxDrpUrl(params));
|
||||
setEchartData(await queryStStbprpPerHourChart(params));
|
||||
}else{
|
||||
setData(await StcdAndStartTimeAndEndTime(params));
|
||||
setMaxDrp(await maxDrpUrl(params));
|
||||
setEchartData(await queryStStbprpPerDayChart(params));
|
||||
}
|
||||
setDetail(await queryStPptnDetails(record?.stcd))
|
||||
|
|
@ -130,35 +132,35 @@ function DrpSearch({record}) {
|
|||
<div className="footer" style={record?.height?{fontSize:15}:{}}>
|
||||
<div className="footer-row">
|
||||
<div className="footer-item">
|
||||
<div className="footer-name">近1h雨量(mm)</div>
|
||||
<div className="footer-num">{detail?.h1||0}</div>
|
||||
<div className="footer-name">最大1h雨量(mm)</div>
|
||||
<div className="footer-num">{maxDrp?.h1||0}</div>
|
||||
</div>
|
||||
<div className="footer-item">
|
||||
<div className="footer-name">近3h雨量(mm)</div>
|
||||
<div className="footer-num">{detail?.h3||0}</div>
|
||||
<div className="footer-name">最大3h雨量(mm)</div>
|
||||
<div className="footer-num">{maxDrp?.h3||0}</div>
|
||||
</div>
|
||||
<div className="footer-item">
|
||||
<div className="footer-name">近6h雨量(mm)</div>
|
||||
<div className="footer-num">{detail?.h6||0}</div>
|
||||
<div className="footer-name">最大6h雨量(mm)</div>
|
||||
<div className="footer-num">{maxDrp?.h6||0}</div>
|
||||
</div>
|
||||
<div className="footer-item">
|
||||
<div className="footer-name">近12h雨量(mm)</div>
|
||||
<div className="footer-num">{detail?.h12||0}</div>
|
||||
<div className="footer-name">最大12h雨量(mm)</div>
|
||||
<div className="footer-num">{maxDrp?.h12||0}</div>
|
||||
</div>
|
||||
<div className="footer-item">
|
||||
{/* <div className="footer-item">
|
||||
<div className="footer-name">近24h雨量(mm)</div>
|
||||
<div className="footer-num">{detail?.h24||0}</div>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="footer-item">
|
||||
<div className="footer-name">本年降雨天数</div>
|
||||
<div className="footer-num"><span style={{color:"#E69224"}}>{detail?.yearDrpDay}</span>/{days}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="footer-row">
|
||||
<div className="footer-item">
|
||||
{/* <div className="footer-item">
|
||||
<div className="footer-name">近48h雨量(mm)</div>
|
||||
<div className="footer-num">{detail?.h48||0}</div>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="footer-item">
|
||||
<div className="footer-name">今日雨量(mm)</div>
|
||||
<div className="footer-num">{detail.today}</div>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const Page = ({data}) => {
|
|||
{
|
||||
tableData.length>0?
|
||||
<ReactEcharts option={option} style={{width: "100%", height: '300px'}}/>
|
||||
:<div style={{textAlign: "center", margin: "10%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
|
||||
:<div style={{textAlign: "center", padding: "5%"}}><img src={`${process.env.PUBLIC_URL}/assets/noData.png`} alt=""/></div>
|
||||
}
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import GongCheng from './item_gongcheng'
|
|||
import JianCe from './item_jiance'
|
||||
import ShuiZhi from './item_shuizhi'
|
||||
import ShiPinDian from './item_shipindian'
|
||||
import XunChaXunJian from './item_xunchaxunjian'
|
||||
|
||||
import GCShuiKu from './item_gongchengshuiku'
|
||||
import DaBa from './item_daba'
|
||||
|
|
@ -206,6 +207,7 @@ const HomePage = ({showPanels}) => {
|
|||
{ checkedObj.label === '水质' ? <ShuiZhi/>:null }
|
||||
{ checkedObj.label === '视频点' ? <ShiPinDian/>:null }
|
||||
|
||||
{ checkedObj.label === '巡查巡检' ? <XunChaXunJian/>:null }
|
||||
|
||||
{ checkedObj.label === '水库' ? <GCShuiKu/>:null }
|
||||
{ checkedObj.label === '大坝' ? <DaBa/>:null }
|
||||
|
|
|
|||
|
|
@ -151,6 +151,54 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.xunchaxunjian{
|
||||
.title{
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
padding: 0 10px;
|
||||
background-color: #f2f2f2;
|
||||
letter-spacing: -0.5px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.bodyBox{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.bodyBoxItem{
|
||||
width: calc( 33% - 10px);
|
||||
margin: 5px;
|
||||
height: 90px;
|
||||
background-color: rgba(234, 244, 254, 1);
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
.num{
|
||||
height: 45%;
|
||||
font-weight: 500;
|
||||
font-size: 22px;
|
||||
color: #D9001B;
|
||||
}
|
||||
.sw{
|
||||
color: #04D919;
|
||||
}
|
||||
.content{
|
||||
display: block;
|
||||
font-size: 17px;
|
||||
color: #409EFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home_gongshui{
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,198 @@
|
|||
import { useEffect, useState } from "react"
|
||||
import { Button, Modal, message, Table } from 'antd';
|
||||
import {useDispatch, useSelector} from "react-redux";
|
||||
|
||||
import GeoJSONFormat from "ol/format/GeoJSON";
|
||||
import Feature from "ol/Feature";
|
||||
import FillStyle from "ol/style/Fill";
|
||||
import VectorLayer from "ol/layer/Vector";
|
||||
import Style from "ol/style/Style";
|
||||
import StrokeStyle from "ol/style/Stroke";
|
||||
import { Vector as VectorSource } from "ol/source";
|
||||
|
||||
import { httppost2 } from "../../../utils/request";
|
||||
import apiurl from "../../../service/apiurl";
|
||||
import { geometryCenter } from "../../../utils/tools";
|
||||
import moment from "moment";
|
||||
|
||||
|
||||
|
||||
const Page = ({mySetTms}) => {
|
||||
const dispatch = useDispatch();
|
||||
let mapObj = useSelector(s => s.map.map)
|
||||
const [ dataObj, setDataObj ] = useState({})
|
||||
const [ open, setOpen ] = useState(false)
|
||||
const [ key , setkey ] = useState('')
|
||||
const [ tms , setTms ] = useState([
|
||||
moment().add(-1,'days').format('YYYY-MM-DD HH:mm:ss'),
|
||||
moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
])
|
||||
|
||||
const columns1 = [
|
||||
{ title: '巡查完成日期', key: 'stnm', dataIndex: 'stnm',align: "center", ellipsis: true },
|
||||
{ title: '巡查人', key: 'drp', dataIndex: 'drp',align: "center" },
|
||||
{ title: '异常项次', key: 'drp', dataIndex: 'drp',align: "center" },
|
||||
];
|
||||
|
||||
const columns2 = [
|
||||
{ title: '上报时间', key: 'stnm', dataIndex: 'stnm',align: "center", ellipsis: true },
|
||||
{ title: '巡检问题描述', key: 'drp', dataIndex: 'drp',align: "center" },
|
||||
];
|
||||
|
||||
useEffect(()=>{
|
||||
(async()=>{
|
||||
const params = {
|
||||
start:tms[0],
|
||||
end:tms[1]
|
||||
}
|
||||
const { code, data } = await httppost2(apiurl.home.yj_qxyj,params)
|
||||
if(code!==200){
|
||||
message.error('请求失败')
|
||||
return
|
||||
}
|
||||
mySetTms([
|
||||
moment(tms[0]),
|
||||
moment(tms[1])
|
||||
])
|
||||
setDataObj(data)
|
||||
})()
|
||||
},[])
|
||||
|
||||
|
||||
const addHlLayer = (geojsonrv,name,color,item)=>{
|
||||
mapObj && mapObj.getLayers().getArray().forEach((layer)=> {
|
||||
if( (layer.values_.name) && ((layer.values_.name).indexOf("HlSX_") !== -1 || (layer.values_.name).indexOf("HlItem_") !== -1 || (layer.values_.name).indexOf("LyItem_") !== -1) ){
|
||||
layer.getSource().clear();
|
||||
}
|
||||
})
|
||||
|
||||
if(!geojsonrv){
|
||||
return
|
||||
}
|
||||
const geojsonFormat = new GeoJSONFormat();
|
||||
let geometry = geojsonFormat.readGeometry(geojsonrv, {
|
||||
featureProjection: 'EPSG:3857',
|
||||
});
|
||||
const feature = new Feature({
|
||||
geometry,
|
||||
data: item,
|
||||
name: name
|
||||
});
|
||||
|
||||
var vectorSource = new VectorSource({
|
||||
features: [feature]
|
||||
});
|
||||
|
||||
const vectorLayer = new VectorLayer({
|
||||
// @ts-ignore
|
||||
name: name,
|
||||
source: vectorSource,
|
||||
style: new Style({
|
||||
stroke: new StrokeStyle({
|
||||
color: color,
|
||||
width: 4,
|
||||
}),
|
||||
}),
|
||||
zIndex:100
|
||||
});
|
||||
|
||||
mapObj.addLayer(vectorLayer);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="xunchaxunjian">
|
||||
<div className="bodyBox">
|
||||
<div className="bodyBoxItem">
|
||||
<div className="num" style={{color:'#04D919'}}>{dataObj.qxWarn?.length||0}</div>
|
||||
<div className="content">本月巡查</div>
|
||||
</div>
|
||||
<div className="bodyBoxItem">
|
||||
<div className="num" style={{color:'#04D919'}}>{dataObj.shiftWarn?.length||0}</div>
|
||||
<div className="content">本年巡查</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div className="bodyBoxItem">
|
||||
<div className="num">{dataObj.pressWarn?.length||0}</div>
|
||||
<div className="content">未处理异常</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{width:'100%',borderBottom:'1px solid #eee',margin:'10px 0 10px 0'}}></div>
|
||||
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{margin:'0 10px'}} />
|
||||
{'本月巡查记录'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ant-card-body" style={{padding:"10px"}}>
|
||||
<Table rowKey="adcd"
|
||||
sticky
|
||||
columns={columns1}
|
||||
pagination={false}
|
||||
dataSource={[
|
||||
{stnm:'05-19 日常巡检',drp:10,data:{"type":"MultiLineString","coordinates":[[[108.946468916,29.839743716],[108.94648914,29.839752481],[108.946539808,29.839746046],[108.946613728,29.839728456],[108.946710354,29.839695317]]]}},
|
||||
{stnm:'2',drp:11,data:{"type":"MultiLineString","coordinates":[[[108.81539631,29.812984419],[108.815424872,29.813001491],[108.815487593,29.813061075],[108.815576108,29.813157977],[108.815677919,29.813283716]]]}},
|
||||
]}
|
||||
scroll={{ y: "300px"}}
|
||||
onRow={
|
||||
(data)=>({
|
||||
onClick:()=>{
|
||||
addHlLayer(data.data,'HlItem_'+data.stnm,'#00FFFF',data)
|
||||
const center = geometryCenter({type:"LineString",coordinates:data.data.coordinates[0]});
|
||||
dispatch.runtime.setFeaturePop({
|
||||
id: data.stnm,
|
||||
data: data,
|
||||
type: 'xunjian',
|
||||
lgtd: center[0],
|
||||
lttd: center[1],
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{width:'100%',borderBottom:'1px solid #eee',margin:'10px 0 10px 0'}}></div>
|
||||
|
||||
<div className='homePage_head2'>
|
||||
<div className='homePage_head2_Bg'>
|
||||
<img src={`${process.env.PUBLIC_URL}/assets/xyt/homeImg/titleBg2.png`} width="14" height="14" alt="" style={{margin:'0 10px'}} />
|
||||
{'待处理问题清单'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="ant-card-body" style={{padding:"10px"}}>
|
||||
<Table rowKey="adcd"
|
||||
sticky
|
||||
columns={columns2}
|
||||
pagination={false}
|
||||
dataSource={[
|
||||
{stnm:'1',drp:10},
|
||||
{stnm:'2',drp:11},
|
||||
]}
|
||||
scroll={{ y: "300px"}}
|
||||
onRow={
|
||||
(data)=>({
|
||||
onClick:()=>{
|
||||
// dispatch.map.setLayerVisible({"HdswLayer":true});
|
||||
dispatch.runtime.setFeaturePop({
|
||||
id: data.stnm,
|
||||
data: data,
|
||||
type: 'daichuli',
|
||||
lgtd: data.lgtd,
|
||||
lttd: data.lttd,
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Page
|
||||
|
|
@ -0,0 +1,266 @@
|
|||
import React, { useState, useEffect, useMemo,useRef } from 'react'
|
||||
import usePageTable from '../../components/crud/usePageTable2';
|
||||
import { createCrudService } from '../../components/crud/_';
|
||||
import apiurl from '../../service/apiurl';
|
||||
import { httppost2,httpget2 } from '../../utils/request';
|
||||
import CryptoJS from 'crypto-js';
|
||||
import { Card,Table,Button,Radio,Input,Select,Modal,message } from "antd"
|
||||
import ToolBar from "./toolbar"
|
||||
import "./index.less"
|
||||
export default function Gbyj() {
|
||||
const [searchValue, setSearchVal] = useState()
|
||||
const [switchVisible, setSwitchVisible] = useState(false);
|
||||
const [bbParams, setBbParams] = useState({})
|
||||
const [addOpen, setAddOpen] = useState(false)
|
||||
const [mbParams, setMbParams] = useState({})
|
||||
const columns = [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||
{ title: '广播站名称', key: 'name', dataIndex: 'name', width: 200, ellipsis: true },
|
||||
{
|
||||
title: '告警内容', key: 'warnContent', dataIndex: 'warnContent', width: 300,ellipsis: true
|
||||
},
|
||||
{ title: '播报时间', key: 'createTime', dataIndex: 'createTime', width: 200 },
|
||||
{
|
||||
title: '播报人员', key: 'createUserName', dataIndex: 'createUserName', width: 200,ellipsis: true
|
||||
},
|
||||
];
|
||||
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
||||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.gbyj.page).find_noCode);
|
||||
//广播站
|
||||
const [jh, setJh] = useState([])
|
||||
const getJhList = async () => {
|
||||
try {
|
||||
const res = await httppost2(apiurl.gbyj.list)
|
||||
if (res.code == 200) {
|
||||
setJh(res.data.map(item => ({label:item.name,value:item.id})))
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
}
|
||||
const [mbList, setMbList] = useState([])
|
||||
|
||||
const getMbList = async () => {
|
||||
try {
|
||||
const res = await httppost2(apiurl.gbyj.mblist);
|
||||
if(res.code === 200){
|
||||
setMbList(res.data.map(item=>({label:item.content, value:item.id})));
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 右边添加模版
|
||||
const addMb = async () => {
|
||||
try {
|
||||
const res = await httppost2(apiurl.gbyj.mbsave, { content: bbParams.warnContent });
|
||||
if (res.code == 200) {
|
||||
message.success('添加成功');
|
||||
getMbList();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 左边添加模版
|
||||
const saveMb = async () => {
|
||||
try {
|
||||
const res = await httppost2(apiurl.gbyj.mbsave, mbParams);
|
||||
if (res.code == 200) {
|
||||
message.success('添加成功');
|
||||
getMbList();
|
||||
setAddOpen(false)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 删除模版
|
||||
const delMb = async () => {
|
||||
try {
|
||||
const res = await httpget2(apiurl.gbyj.mbDel + `/${bbParams.checkId}`);
|
||||
if (res.code == 200) {
|
||||
message.success('删除成功');
|
||||
getMbList();
|
||||
setBbParams({...bbParams,warnContent:'' })
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
const handleCheck = (e) => {
|
||||
const text = mbList.find(item => item.value == e.target.value)?.label
|
||||
setBbParams({ ...bbParams, warnContent:text,checkId:e.target.value })
|
||||
}
|
||||
|
||||
const gbzChange = (e) => {
|
||||
setBbParams({...bbParams,stationIds:e})
|
||||
}
|
||||
|
||||
const textChange = (e) => {
|
||||
setBbParams({ ...bbParams, warnContent: e.target.value })
|
||||
}
|
||||
|
||||
// 播报
|
||||
|
||||
const playGb = () => {
|
||||
setSwitchVisible(true);
|
||||
|
||||
}
|
||||
|
||||
|
||||
//md5加密
|
||||
const encryptData = (data) => {
|
||||
const encryptedData = CryptoJS.MD5(data).toString();
|
||||
return encryptedData;
|
||||
}
|
||||
// 确认播报
|
||||
const confirmBb = async () => {
|
||||
const name = localStorage.getItem('userName')
|
||||
const id = localStorage.getItem('userId')
|
||||
const params = {
|
||||
...bbParams,
|
||||
ctrlPass: encryptData(bbParams?.ctrlPass),
|
||||
createUserId: id,
|
||||
createUserName: name
|
||||
}
|
||||
try {
|
||||
const res = await httppost2(apiurl.gbyj.bb,params);
|
||||
if (res.code == 200) {
|
||||
setSwitchVisible(false);
|
||||
message.success('播报成功');
|
||||
refresh()
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
useEffect(()=>{
|
||||
const params = {
|
||||
search: {
|
||||
...searchValue,
|
||||
}
|
||||
};
|
||||
search(params)
|
||||
}, [searchValue])
|
||||
|
||||
useEffect(() => {
|
||||
getMbList()
|
||||
getJhList()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className='content-root clearFloat xybm' style={{ paddingRight: "0", paddingBottom: "0" }}>
|
||||
<div className='gb-top'>
|
||||
<div className='gb-top-title'>
|
||||
<span className='gb-top-icon'></span>
|
||||
<span style={{fontSize:18}}>广播预警信息查询</span>
|
||||
</div>
|
||||
<Card className='nonebox'>
|
||||
<ToolBar
|
||||
setSearchVal={setSearchVal}
|
||||
jh={jh}
|
||||
/>
|
||||
</Card>
|
||||
<div className="ant-card-body" style={{padding:"20px 0 0 0"}}>
|
||||
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 700px )"}}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='gb-bottom'>
|
||||
<div className='gb-bottom-left'>
|
||||
<div className='gb-top-title'>
|
||||
<span className='gb-top-icon'></span>
|
||||
<span style={{fontSize:18,marginRight:20}}>广播模板</span>
|
||||
<Button type="primary" onClick={() => setAddOpen(true)}>添加</Button>
|
||||
<Button type="primary" onClick={delMb}>删除</Button>
|
||||
</div>
|
||||
<div className='mb-content'>
|
||||
<Radio.Group
|
||||
style={{display: 'flex', flexDirection: 'column'}}
|
||||
options={mbList}
|
||||
onChange={handleCheck}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='gb-bottom-right'>
|
||||
<div className='gb-top-title'>
|
||||
<span className='gb-top-icon'></span>
|
||||
<span style={{fontSize:18,marginRight:20}}>编辑播报内容</span>
|
||||
<Button type="primary" onClick={addMb}>添加为模板</Button>
|
||||
</div>
|
||||
<div className='right-content'>
|
||||
<div style={{marginRight:10}}>
|
||||
<Input.TextArea
|
||||
style={{ width: '100%', minHeight: '150px' }}
|
||||
allowClear
|
||||
placeholder='请输入播报内容，或者选择广播模板'
|
||||
value={bbParams.warnContent}
|
||||
onChange={textChange}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<div className='gb-top-title'>
|
||||
<span className='gb-top-icon'></span>
|
||||
<span style={{fontSize:18,marginRight:20}}>选择广播预警站</span>
|
||||
</div>
|
||||
<div className='station-content'>
|
||||
<span>已选择：</span>
|
||||
<Select
|
||||
mode="tags"
|
||||
style={{
|
||||
width: '70%',
|
||||
}}
|
||||
onChange={gbzChange}
|
||||
options={jh}
|
||||
/>
|
||||
<Button type="primary" style={{width:"16%"}} onClick={playGb}>播报</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 校验密码 */}
|
||||
<Modal
|
||||
open={switchVisible}
|
||||
width={500}
|
||||
title="输入校验密码"
|
||||
onCancel={()=>{setSwitchVisible(false);}}
|
||||
destroyOnClose
|
||||
onOk={confirmBb}
|
||||
>
|
||||
<div>
|
||||
<div style={{marginBottom:"10px"}}>请输入二次校验密码</div>
|
||||
<div>
|
||||
<Input.Password placeholder='请输入密码' allowClear onChange={(e)=>{setBbParams({...bbParams,ctrlPass:e.target.value})
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
{/* 添加模版 */}
|
||||
<Modal
|
||||
open={addOpen}
|
||||
width={500}
|
||||
title="新增"
|
||||
onCancel={()=>{setAddOpen(false);}}
|
||||
destroyOnClose
|
||||
onOk={saveMb}
|
||||
>
|
||||
<div>
|
||||
<div style={{marginBottom:"10px"}}>请输入模版</div>
|
||||
<div>
|
||||
<Input allowClear onChange={(e)=>{setMbParams({...mbParams,content:e.target.value})
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
|
||||
.gb-top-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
.gb-top-icon{
|
||||
width: 5px;
|
||||
height: 20px;
|
||||
background-color: #0079fe;
|
||||
}
|
||||
}
|
||||
.gb-bottom{
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
column-gap: 20px;
|
||||
margin-top: 20px;
|
||||
.gb-bottom-left{
|
||||
flex: 1;
|
||||
.mb-content{
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
height: 300px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #dfdfdf;
|
||||
.ant-radio-wrapper{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gb-bottom-right{
|
||||
flex: 1;
|
||||
.right-content{
|
||||
.station-content{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import React, { useEffect,useState } from 'react';
|
||||
import { Form, Upload, Button,Row, Col, Input, DatePicker, message,Modal } from 'antd';
|
||||
import apiurl from '../../service/apiurl';
|
||||
import { httppost2 } from '../../utils/request';
|
||||
import moment from 'moment';
|
||||
import NormalSelect from '../../components/Form/NormalSelect';
|
||||
const { RangePicker } = DatePicker;
|
||||
const ToolBar = ({ setSearchVal,jh}) => {
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const onFinish = (values) => {
|
||||
let timeRangeSo;
|
||||
if (values.tm) {
|
||||
timeRangeSo = {
|
||||
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, timeRangeSo});
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
||||
<Form.Item label="告警内容" name="warnContent">
|
||||
<Input allowClear style={{width:'180px'}}/>
|
||||
</Form.Item>
|
||||
<Form.Item label="告警时间" name="tm">
|
||||
<RangePicker
|
||||
allowClear
|
||||
showTime
|
||||
style={{ width: "350px" }}
|
||||
format={"YYYY-MM-DD HH:mm:ss" }
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="广播站名称" name="stationId">
|
||||
<NormalSelect allowClear style={{ width: '150px' }} options={jh} />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">查询</Button>
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button onClick={() => form.resetFields()}>重置</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ToolBar;
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
import React from 'react'
|
||||
import { Shape } from 'react-konva';
|
||||
|
||||
const ColorPolygon: React.FC<{
|
||||
pts: ({ x?: number, y?: number } | [number, number])[]
|
||||
fill: string;
|
||||
desc?: string;
|
||||
opacity?: number;
|
||||
}> = ({ pts, fill, opacity }) => {
|
||||
return (
|
||||
<Shape
|
||||
fill={fill}
|
||||
opacity={opacity}
|
||||
sceneFunc={(context:any, shape:any) => {
|
||||
context.beginPath();
|
||||
pts.forEach((p, i) => {
|
||||
let x:any, y:any;
|
||||
if (Array.isArray(p)) {
|
||||
x = p[0];
|
||||
y = p[1];
|
||||
} else {
|
||||
x = p.x;
|
||||
y = p.y;
|
||||
}
|
||||
if (i === 0) {
|
||||
context.moveTo(x, y);
|
||||
} else {
|
||||
context.lineTo(x, y);
|
||||
}
|
||||
})
|
||||
context.closePath();
|
||||
context.fillStrokeShape(shape)
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default ColorPolygon
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import React from 'react';
|
||||
import { Layer, Rect } from 'react-konva';
|
||||
import ColorPolygon from './ColorPolygon';
|
||||
import { CanvasH, CanvasW, FarBuildingTop, Horizontal, RoofTop, SideRoomSize } from './consts';
|
||||
import { ControlPts } from './coordinates';
|
||||
import { RoomWindows } from './Window';
|
||||
|
||||
const Sider: React.FC<{
|
||||
pts: ControlPts;
|
||||
side: 'left' | 'right';
|
||||
}> = ({ side, pts }) => {
|
||||
|
||||
return (
|
||||
<Layer
|
||||
x={side === 'left' ? 0 : CanvasW}
|
||||
scaleX={side === 'left' ? 1 : -1}
|
||||
width={CanvasW * 0.5}
|
||||
>
|
||||
<ColorPolygon desc='水' fill="#458eab" pts={[[0, Horizontal], [0, CanvasH], [CanvasW * 0.5, CanvasH], [CanvasW * 0.5, Horizontal]]} />
|
||||
|
||||
<ColorPolygon desc='远处的墙' fill="#8fa7a7" pts={[[0, FarBuildingTop], pts.C2, pts.C1, [pts.C1.x, FarBuildingTop]]} />
|
||||
|
||||
<Rect x={pts.RoomLT.x} y={pts.RoomLT.y} width={SideRoomSize} height={SideRoomSize} fill="#738785" />
|
||||
<RoomWindows rect={[pts.RoomLT.x, pts.RoomLT.y + 8, pts.RoomRB.x - 16, pts.RoomRB.y]} />
|
||||
<ColorPolygon desc='房屋侧面' fill="#4a5c5e" pts={[pts.RoomRT, pts.RoomRB, pts.RoomRBFar, pts.RoomRTFar]} />
|
||||
<Rect x={pts.RoomLT.x - 2} y={pts.RoomLT.y} width={SideRoomSize + 4} height={8} fill="#f2ebcd" />
|
||||
<ColorPolygon desc='房屋侧面-白条' fill="#f2ebcd" pts={[
|
||||
[pts.RoomRT.x + 2, pts.RoomRT.y],
|
||||
[pts.RoomRB.x + 2, pts.RoomRT.y + 8],
|
||||
[pts.RoomRTFar.x! + 2, pts.RoomRTFar.y! + 8],
|
||||
[pts.RoomRTFar.x! + 2, pts.RoomRTFar.y!]
|
||||
]} />
|
||||
<ColorPolygon desc='房屋底面' fill="#4a5c5e" pts={[pts.RoomLB, pts.RoomLBFar, pts.RoomRBFar, pts.RoomRB]} />
|
||||
<Rect x={pts.RoomRB.x - 16} y={pts.RoomRB.y - 8 - SideRoomSize} width={16} height={SideRoomSize} fill="#6e3a34" />
|
||||
|
||||
|
||||
<ColorPolygon desc='侧面' fill="#4a5c5e" pts={[pts.L2, pts.B2, pts.B1, pts.L1]} />
|
||||
<ColorPolygon desc='上盖' fill="#728381" pts={[pts.C2, pts.L2, pts.L1, pts.C1]} />
|
||||
<ColorPolygon desc='墙' fill="#738b8b" pts={[[pts.C1.x, RoofTop], pts.C1, pts.L1, pts.A1]} />
|
||||
|
||||
<ColorPolygon desc='内壁' fill="#334648" pts={[pts.A1, pts.B1, pts.B3, pts.A2]} />
|
||||
</Layer>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Sider)
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import { Layer, Rect } from 'react-konva';
|
||||
import ColorPolygon from './ColorPolygon';
|
||||
import { Window1, WindowSep } from './Window';
|
||||
import { TopRoomHeight } from './consts';
|
||||
import { ControlPts, mirror } from './coordinates';
|
||||
|
||||
|
||||
const Topper1: React.FC<{
|
||||
pts: ControlPts;
|
||||
type: number;
|
||||
}> = ({ pts, type }) => {
|
||||
|
||||
const windows = useMemo<{
|
||||
w: number[][];
|
||||
h: number[][];
|
||||
}>(() => {
|
||||
const x1 = pts.TopRectLB.x;
|
||||
const y0 = pts.TopRectLB.y - TopRoomHeight
|
||||
const y1 = pts.TopRectLB.y - TopRoomHeight * 0.75;
|
||||
const x2 = pts.TopRectRB.x;
|
||||
const y2 = pts.TopRectLB.y - TopRoomHeight * 0.25;
|
||||
if (type === 1) {
|
||||
const u = (x2 - x1) / 10;
|
||||
return {
|
||||
w: [
|
||||
[x1 + u, y1, x1 + 3 * u, y2],
|
||||
[x1 + 4 * u, y1, x1 + 6 * u, y2],
|
||||
[x1 + 7 * u, y1, x1 + 9 * u, y2],
|
||||
],
|
||||
h: []
|
||||
}
|
||||
} else if (type === 2) {
|
||||
const u = (x2 - x1 - 8) / 14;
|
||||
return {
|
||||
w: [
|
||||
[x1 + u, y1, x1 + 3 * u, y2],
|
||||
[x1 + 4 * u, y1, x1 + 6 * u, y2],
|
||||
[x1 + 8 * u + 8, y1, x1 + 10 * u + 8, y2],
|
||||
[x1 + 11 * u + 8, y1, x1 + 13 * u + 8, y2],
|
||||
],
|
||||
h: [
|
||||
[x1 + 7 * u, y0, x1 + 7 * u + 8, pts.TopRectLB.y],
|
||||
],
|
||||
}
|
||||
} else if (type === 3) {
|
||||
const xc = (x2 - x1) * 0.5;
|
||||
const u = (xc - 8) / 8;
|
||||
return {
|
||||
w: [
|
||||
[x1 + u, y1, x1 + 3 * u, y2],
|
||||
[x1 + 5 * u + 8, y1, x1 + 7 * u + 8, y2],
|
||||
[x1 + u + xc, y1, x1 + 3 * u + xc, y2],
|
||||
[x1 + 5 * u + 8 + xc, y1, x1 + 7 * u + 8 + xc, y2],
|
||||
],
|
||||
h: [
|
||||
[x1 + 4 * u, y0, x1 + 4 * u + 8, pts.TopRectLB.y],
|
||||
[x1 + 4 * u + xc, y0, x1 + 4 * u + 8 + xc, pts.TopRectLB.y],
|
||||
]
|
||||
}
|
||||
} else if (type > 3) {
|
||||
const xc1 = (x2 - x1) / 3;
|
||||
const xc2 = xc1 * 2;
|
||||
const u = (xc1 - 8) / 8;
|
||||
return {
|
||||
w: [
|
||||
[x1 + u, y1, x1 + 3 * u, y2],
|
||||
[x1 + 5 * u + 8, y1, x1 + 7 * u + 8, y2],
|
||||
[x1 + u + xc1, y1, x1 + 3 * u + xc1, y2],
|
||||
[x1 + 5 * u + 8 + xc1, y1, x1 + 7 * u + 8 + xc1, y2],
|
||||
[x1 + u + xc2, y1, x1 + 3 * u + xc2, y2],
|
||||
[x1 + 5 * u + 8 + xc2, y1, x1 + 7 * u + 8 + xc2, y2],
|
||||
],
|
||||
h: [
|
||||
[x1 + 4 * u, y0, x1 + 4 * u + 8, pts.TopRectLB.y],
|
||||
[x1 + 4 * u + xc1, y0, x1 + 4 * u + 8 + xc1, pts.TopRectLB.y],
|
||||
[x1 + 4 * u + xc2, y0, x1 + 4 * u + 8 + xc2, pts.TopRectLB.y],
|
||||
]
|
||||
}
|
||||
}
|
||||
return {
|
||||
w: [], h: []
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<Layer>
|
||||
<Rect fill='#738b8b' x={pts.TopRectLB.x} y={pts.TopRectLB.y - TopRoomHeight} width={pts.TopRectRB.x - pts.TopRectLB.x} height={TopRoomHeight} />
|
||||
<ColorPolygon fill='#4a5c5e' pts={[pts.TopRectLB, pts.RoomRBFar, mirror(pts.RoomRBFar), pts.TopRectRB]} />
|
||||
{
|
||||
pts.SepsLTLBRBRT.map((s, index) => (
|
||||
<ColorPolygon key={'a' + index} fill='#334648' pts={s} />
|
||||
))
|
||||
}
|
||||
{
|
||||
windows.w.map((o, index) => <Window1 rect={o} key={'w' + index} />)
|
||||
}
|
||||
{
|
||||
windows.h.map((o, index) => <WindowSep rect={o} key={'h' + index} />)
|
||||
}
|
||||
</Layer>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Topper1);
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import React from 'react';
|
||||
import { Layer, Rect } from 'react-konva';
|
||||
import ColorPolygon from './ColorPolygon';
|
||||
import { CanvasH, CanvasW, ViewCenter, WaterTop } from './consts';
|
||||
import { ControlPts, interpolate, intersection, mirror } from './coordinates';
|
||||
|
||||
|
||||
const Topper2: React.FC<{
|
||||
pts: ControlPts;
|
||||
waterRatio: number;
|
||||
}> = ({ pts, waterRatio }) => {
|
||||
|
||||
const waterP1 = interpolate(pts.B1, { x: pts.L1.x, y: WaterTop }, waterRatio);
|
||||
const waterP2 = intersection(waterP1, ViewCenter, { x: 0, y: undefined });
|
||||
|
||||
return (
|
||||
<Layer>
|
||||
{
|
||||
pts.SepsFront.map((s, index) => (
|
||||
<Rect key={index} fill='#738b8b' x={s.x} y={s.y} width={s.w} height={s.h} />
|
||||
))
|
||||
}
|
||||
<ColorPolygon fill='#539cb9' pts={[waterP1, waterP2, mirror(waterP2), mirror(waterP1)]} opacity={0.8} />
|
||||
<ColorPolygon fill='#2d99ba' pts={[waterP2, mirror(waterP2), [CanvasW, CanvasH], [0, CanvasH]]} opacity={0.8} />
|
||||
</Layer>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Topper2);
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
import React from 'react'
|
||||
import { Line, Rect } from 'react-konva';
|
||||
import ColorPolygon from './ColorPolygon';
|
||||
|
||||
const S1 = 4;
|
||||
|
||||
export const Window1: React.FC<{
|
||||
rect: number[];
|
||||
}> = ({ rect }) => {
|
||||
const [x1, y1, x2, y2] = rect;
|
||||
|
||||
const w1 = (x2 - x1 - S1) / 2;
|
||||
const w2 = (x2 - x1 - S1 * 2) / 3;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Rect fill='#b1c3cf' x={x1} y={y1} width={w1} height={16} />
|
||||
<Rect fill='#b1c3cf' x={x1 + w1 + S1} y={y1} width={w1} height={16} />
|
||||
|
||||
<Rect fill='#b1c3cf' x={x1} y={y1 + 16 + S1} width={w2} height={y2 - y1 - 16 - S1} />
|
||||
<Rect fill='#b1c3cf' x={x1 + w2 + S1} y={y1 + 16 + S1} width={w2} height={y2 - y1 - 16 - S1} />
|
||||
<Rect fill='#b1c3cf' x={x1 + (w2 + S1) * 2} y={y1 + 16 + S1} width={w2} height={y2 - y1 - 16 - S1} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export const WindowSep: React.FC<{
|
||||
rect: number[];
|
||||
}> = ({ rect }) => {
|
||||
const [x1, y1, x2, y2] = rect;
|
||||
|
||||
return (
|
||||
<Rect fill='#b1c3cf' x={x1} y={y1 - 8} width={x2 - x1} height={y2 - y1 + 8} />
|
||||
)
|
||||
}
|
||||
|
||||
export const RoomWindows: React.FC<{
|
||||
rect: number[];
|
||||
}> = ({ rect }) => {
|
||||
const [x1, y1, x2, y2] = rect;
|
||||
|
||||
const u = (x2 - x1) / 10;
|
||||
const v = (y2 - y1) / 6;
|
||||
|
||||
const c1 = x1 - 10 + 1;
|
||||
const c2 = x1 - 10 + 7 * u;
|
||||
const dc = (c2 - c1) / 10;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Rect fill='#c1d3d5' x={x1 + u} y={y1 + v} width={u} height={v} />
|
||||
<Line stroke='#fff' points={[x1 + u, y1 + v, x1 + 2 * u, y1 + v]} />
|
||||
<Rect fill='#c1d3d5' x={x1 + u * 2 + 2} y={y1 + v} width={u} height={v} />
|
||||
<Line stroke='#fff' points={[x1 + u * 2 + 2, y1 + v, x1 + 3 * u + 2, y1 + v]} />
|
||||
|
||||
|
||||
<Rect fill='#c1d3d5' x={x1 + u * 5} y={y1 + v} width={u} height={v} />
|
||||
<Line stroke='#fff' points={[x1 + u * 5, y1 + v, x1 + 6 * u, y1 + v]} />
|
||||
<Rect fill='#c1d3d5' x={x1 + u * 6 + 2} y={y1 + v} width={u} height={v} />
|
||||
<Line stroke='#fff' points={[x1 + u * 6 + 2, y1 + v, x1 + 7 * u + 2, y1 + v]} />
|
||||
|
||||
|
||||
|
||||
<Rect fill='#c1d3d5' x={x1 + u} y={y1 + v * 4} width={u} height={v} />
|
||||
<Line stroke='#fff' points={[x1 + u, y1 + v * 4, x1 + 2 * u, y1 + v * 4]} />
|
||||
<Rect fill='#c1d3d5' x={x1 + u * 2 + 2} y={y1 + v * 4} width={u} height={v} />
|
||||
<Line stroke='#fff' points={[x1 + u * 2 + 2, y1 + v * 4, x1 + 3 * u + 2, y1 + v * 4]} />
|
||||
|
||||
|
||||
<Rect fill='#c1d3d5' x={x1 + u * 5} y={y1 + v * 4} width={u} height={v} />
|
||||
<Line stroke='#fff' points={[x1 + u * 5, y1 + v * 4, x1 + 6 * u, y1 + v * 4]} />
|
||||
<Rect fill='#c1d3d5' x={x1 + u * 6 + 2} y={y1 + v * 4} width={u} height={v} />
|
||||
<Line stroke='#fff' points={[x1 + u * 6 + 2, y1 + v * 4, x1 + 7 * u + 2, y1 + v * 4]} />
|
||||
|
||||
<Rect fill='#8fa7a7' x={x1 - 10} y={y1 + 3 * v} width={7 * u} height={v * 0.6} />
|
||||
<ColorPolygon
|
||||
fill='#4a5c5e'
|
||||
pts={[
|
||||
[x1 - 10, y1 + 3.6 * v],
|
||||
[x1 - 10 + 4, y1 + 3.6 * v + 2],
|
||||
[x1 - 10 + 7 * u + 3, y1 + 3.6 * v + 2],
|
||||
[x1 - 10 + 7 * u + 3, y1 + 3 * v + 2],
|
||||
[x1 - 10 + 7 * u, y1 + 3 * v],
|
||||
[x1 - 10 + 7 * u, y1 + 3.6 * v + 2],
|
||||
[x1 - 10 + 7 * u, y1 + 3.6 * v],
|
||||
]}
|
||||
/>
|
||||
<Line stroke='#8fa7a7' lineJoin='round' points={[
|
||||
x1, y1 + 2.5 * v + 2,
|
||||
x1 - 10 + 4, y1 + 2.5 * v + 2,
|
||||
x1 - 10, y1 + 2.5 * v, x1 - 10 + 7 * u, y1 + 2.5 * v,
|
||||
x1 - 10 + 7 * u + 3, y1 + 2.5 * v + 2,
|
||||
]} />
|
||||
<Line stroke='#8fa7a7' points={[x1 - 10 + 4, y1 + 2.5 * v + 2, x1 - 10 + 4, y1 + 3 * v]} />
|
||||
{
|
||||
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(i => (
|
||||
<Line key={i} stroke='#8fa7a7' points={[c1 + dc * i, y1 + 2.5 * v, c1 + dc * i, y1 + 3 * v]} />
|
||||
))
|
||||
}
|
||||
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
import React from 'react'
|
||||
import { Circle, Layer, Line, Rect } from 'react-konva';
|
||||
import ColorPolygon from './ColorPolygon';
|
||||
import { ViewCenter, WaterTop } from './consts';
|
||||
import { ControlPts, interpolate, intersection } from './coordinates';
|
||||
import ZmDec from './ZmDec';
|
||||
import { useLinearAnim } from './useLinearAnim';
|
||||
|
||||
const ZmColumn: React.FC<{
|
||||
kdMax: number;
|
||||
gtophgt?: number;
|
||||
idx: number;
|
||||
pts: ControlPts;
|
||||
waterRatio: number;
|
||||
selected: boolean;
|
||||
}> = ({ kdMax, gtophgt, idx, pts, waterRatio, selected }) => {
|
||||
|
||||
const renKd = gtophgt; //useLinearAnim(gtophgt);
|
||||
|
||||
const a = pts.ZmArea[idx];
|
||||
if (!a || typeof renKd !== 'number') {
|
||||
return null;
|
||||
}
|
||||
|
||||
const hh1 = (a.lb1.y - a.lt1.y) * 0.5;
|
||||
const hh2 = (a.lb2.y - a.lt2.y) * 0.5;
|
||||
|
||||
const ratio = renKd / kdMax;
|
||||
const e1 = hh1 * ratio * 0.8;
|
||||
const e2 = hh2 * ratio * 0.8;
|
||||
|
||||
const lineLineLeft = { x: (a.lt1.x + a.lt2.x) * 0.5, y: (a.lt1.y + a.lt2.y) * 0.5 };
|
||||
const lineLineRight = { x: (a.rt1.x + a.rt2.x) * 0.5, y: (a.rt1.y + a.rt2.y) * 0.5 };
|
||||
const line1 = interpolate(lineLineLeft, lineLineRight, 0.25);
|
||||
const line2 = interpolate(lineLineLeft, lineLineRight, 0.75);
|
||||
|
||||
const ty1 = a.lt1.y + hh1 - e1;
|
||||
const ty2 = a.lt2.y + hh2 - e2;
|
||||
const joiny = (ty1 + ty2) * 0.5;
|
||||
|
||||
const waterP1 = interpolate(a.lb0, { x: a.lb0.x, y: WaterTop }, waterRatio);
|
||||
const waterP1R = { x: a.rb0.x, y: waterP1.y };
|
||||
const waterP2 = intersection(ViewCenter, waterP1, { x: a.lb1.x, y: undefined });
|
||||
const waterP2R = { x: a.rb1.x, y: waterP2.y };
|
||||
const waterP3 = intersection(ViewCenter, waterP1, { x: a.lb3.x, y: undefined });
|
||||
waterP3.y -= 26;
|
||||
const waterP3R = { x: a.rb3.x, y: waterP3.y };
|
||||
if (waterP3.x < waterP2.x) {
|
||||
waterP3.x = waterP2.x;
|
||||
}
|
||||
if (waterP3R.x > waterP2R.x) {
|
||||
waterP3R.x = waterP2R.x
|
||||
}
|
||||
|
||||
//
|
||||
const b1 = { x: a.lb0.x, y: a.lb0.y - 32 };
|
||||
const b6 = { x: a.rb0.x, y: a.rb0.y - 32 };
|
||||
const b2 = interpolate(b1, b6, 0.4);
|
||||
const b5 = interpolate(b1, b6, 0.6);
|
||||
const b3 = { x: b2.x, y: b2.y + 12 };
|
||||
const b4 = { x: b5.x, y: b5.y + 12 };
|
||||
|
||||
const b1_1 = intersection(b1, ViewCenter, { x: a.lb1.x, y: undefined });
|
||||
const b1_6 = intersection(b6, ViewCenter, { x: a.rb1.x, y: undefined });
|
||||
const b1_2 = intersection(b2, ViewCenter, { x: undefined, y: b1_1.y });
|
||||
const b1_5 = intersection(b5, ViewCenter, { x: undefined, y: b1_6.y });
|
||||
const b1_3 = intersection(b3, ViewCenter, { x: b1_2.x, y: undefined });
|
||||
const b1_4 = intersection(b4, ViewCenter, { x: b1_5.x, y: undefined });
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
waterP3 && waterP3R ? (
|
||||
<ColorPolygon fill='#539cb9' pts={[waterP2, waterP2R, waterP3R, waterP3]} opacity={0.8} />
|
||||
) : null
|
||||
}
|
||||
<ColorPolygon
|
||||
desc="闸门上测"
|
||||
fill='#afb5b5'
|
||||
pts={[
|
||||
[a.lt1.x, ty1],
|
||||
[a.rt1.x, ty1],
|
||||
[a.rt2.x, ty2],
|
||||
[a.lt2.x, ty2],
|
||||
]}
|
||||
/>
|
||||
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line1.x, line1.y, line1.x, joiny]} />
|
||||
<Line stroke='#222' strokeWidth={8} lineCap="round" points={[line2.x, line2.y, line2.x, joiny]} />
|
||||
<Circle fill='#afb5b5' x={line1.x} y={joiny} radius={10} />
|
||||
<Circle fill='#afb5b5' x={line2.x} y={joiny} radius={10} />
|
||||
<Line stroke='#222' strokeWidth={12} points={[line1.x, joiny - 8, line1.x, joiny - 10]} />
|
||||
<Line stroke='#222' strokeWidth={12} points={[line2.x, joiny - 8, line2.x, joiny - 10]} />
|
||||
|
||||
<Rect
|
||||
desc='闸门正面'
|
||||
fill={selected ? '#95927a' : '#5f6969'}
|
||||
stroke={selected ? 'orange' : "#222"}
|
||||
strokeWidth={1} x={a.lt1.x} y={ty1} width={a.rt1.x - a.lt1.x} height={hh1} />
|
||||
|
||||
<ZmDec tl={{ x: a.lt1.x, y: ty1 }} rb={{ x: a.rt1.x, y: ty1 + hh1 }} />
|
||||
|
||||
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_1, b1_2, b2, b1]} />
|
||||
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_5, b1_6, b6, b5]} />
|
||||
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_2, b1_3, b3, b2]} />
|
||||
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_3, b1_4, b4, b3]} />
|
||||
<ColorPolygon desc="出水口" fill='#8d9d9b' pts={[b1_4, b1_5, b5, b4]} />
|
||||
<ColorPolygon desc="出水口" fill='#728381' pts={[b1, b2, b3, b4, b5, b6, a.rb0, a.lb0]} />
|
||||
|
||||
{
|
||||
waterP1.y < b1.y ? (
|
||||
<ColorPolygon fill='#539cb9' pts={[waterP1, waterP1R, waterP2R, waterP2]} opacity={0.8} />
|
||||
) : null
|
||||
}
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ZmColumn)
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
import React, { useMemo } from 'react'
|
||||
import { Layer } from 'react-konva';
|
||||
import { ControlPts } from './coordinates';
|
||||
import ZmColumn from './ZmColumn';
|
||||
// import { StationItem, GateRuntime } from '../../../models/_/defs';
|
||||
import { apertureMeter } from '../../../utils/utils';
|
||||
|
||||
const ZmColumns: React.FC<{
|
||||
zmobj: any;
|
||||
runtime: any;
|
||||
pts: ControlPts;
|
||||
selectedId?: string;
|
||||
waterRatio: number;
|
||||
}> = ({ zmobj, runtime, pts, waterRatio }) => {
|
||||
const eqpnoList = useMemo(() => new Array(runtime.length).fill(0).map((o, index) => index), [runtime]);
|
||||
return (
|
||||
<Layer>
|
||||
{
|
||||
eqpnoList.map((o, index) => (
|
||||
<ZmColumn
|
||||
key={o}
|
||||
gtophgt={apertureMeter(runtime[o]?.realAperture)}
|
||||
kdMax={2}
|
||||
pts={pts}
|
||||
idx={index}
|
||||
waterRatio={waterRatio}
|
||||
selected={false}
|
||||
/>)
|
||||
)
|
||||
}
|
||||
</Layer>
|
||||
)
|
||||
}
|
||||
|
||||
export default ZmColumns
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import React from 'react'
|
||||
import { Line, Rect } from 'react-konva';
|
||||
import { Horizontal, ViewCenter } from './consts';
|
||||
import { XY } from './coordinates'
|
||||
|
||||
const INTERVALS = [0, 1, 2];
|
||||
|
||||
const ZmDec: React.FC<{
|
||||
tl: XY;
|
||||
rb: XY;
|
||||
}> = ({ tl, rb }) => {
|
||||
|
||||
const ux = (rb.x - tl.x) / 12;
|
||||
const uy = (rb.y - tl.y) / 12;
|
||||
|
||||
const ox = tl.x + 3 * ux;
|
||||
const oy = tl.y + 3 * uy;
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
INTERVALS.map(y => (
|
||||
<React.Fragment key={y}>
|
||||
{
|
||||
INTERVALS.map(x => {
|
||||
const cx = ox + x * 3 * ux;
|
||||
const cy = oy + y * 3 * uy;
|
||||
const l = cx - ux;
|
||||
const r = cx + ux;
|
||||
const t = cy - uy;
|
||||
const b = cy + uy;
|
||||
return (
|
||||
<React.Fragment key={x}>
|
||||
<Rect fill="323737" x={l} y={t} width={2 * ux} height={2 * uy} />
|
||||
{
|
||||
cx < ViewCenter.x ? (
|
||||
<Line points={[l, t, l, b]} stroke="#afb5b5" strokeWidth={1} />
|
||||
) : (
|
||||
<Line points={[r, t, r, b]} stroke="#afb5b5" strokeWidth={1} />
|
||||
)
|
||||
}
|
||||
{
|
||||
cy < Horizontal ? (
|
||||
<Line points={[l, t, r, t]} stroke="#afb5b5" strokeWidth={1} />
|
||||
) : (
|
||||
<Line points={[l, b, r, b]} stroke="#afb5b5" strokeWidth={1} />
|
||||
)
|
||||
}
|
||||
</React.Fragment>
|
||||
)
|
||||
})
|
||||
}
|
||||
</React.Fragment>
|
||||
))
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ZmDec
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
export const CanvasW = 1080;
|
||||
export const CanvasH = 640;
|
||||
|
||||
export const Horizontal = CanvasH * 1.4 / 3;
|
||||
export const ViewCenter = { x: CanvasW * 0.5, y: Horizontal };
|
||||
|
||||
export const GroundBase = CanvasH * 1.8 / 3;
|
||||
export const BottomBase = CanvasH * 2.5 / 3;
|
||||
export const RoofTop = CanvasH * 0.8 / 3;
|
||||
export const RoofTopFar = RoofTop + 32;
|
||||
export const FarBuildingTop = RoofTop - 16;
|
||||
|
||||
export const SideRoomSize = CanvasH * 0.7 / 3;
|
||||
export const TopRoomHeight = SideRoomSize - 24;
|
||||
export const PillarRatio = 0.2;
|
||||
export const WaterTop = GroundBase;
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
import { BottomBase, CanvasW, GroundBase, PillarRatio, RoofTop, RoofTopFar, SideRoomSize, ViewCenter } from "./consts";
|
||||
|
||||
export type XY = {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
export type XYWH = {
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
}
|
||||
|
||||
export function intersection(pt1: XY, pt2: XY, result: { x?: number, y?: number }): XY {
|
||||
const invalid: XY = { x: result.x || 0, y: result.y || 0 };
|
||||
if (typeof result.x === typeof result.y) {
|
||||
return invalid;
|
||||
}
|
||||
|
||||
const x1 = pt1.x, y1 = pt1.y, x2 = pt2.x, y2 = pt2.y;
|
||||
|
||||
if (typeof result.x === 'number') {
|
||||
const x3 = result.x;
|
||||
|
||||
if (x2 === x1) {
|
||||
return invalid;
|
||||
}
|
||||
|
||||
result.y = (y2 - y1) * (x3 - x1) / (x2 - x1) + y1;
|
||||
} else {
|
||||
const y3 = result.y!;
|
||||
|
||||
if (y2 === y1) {
|
||||
return invalid;
|
||||
}
|
||||
|
||||
result.x = (x2 - x1) * (y3 - y1) / (y2 - y1) + x1;
|
||||
}
|
||||
|
||||
return result as any;
|
||||
}
|
||||
|
||||
export function interpolate(pt1: XY, pt2: XY, ratio: number): XY {
|
||||
return {
|
||||
x: pt1.x + (pt2.x - pt1.x) * ratio,
|
||||
y: pt1.y + (pt2.y - pt1.y) * ratio,
|
||||
}
|
||||
}
|
||||
|
||||
export function mirror(pt: XY): XY {
|
||||
return {
|
||||
x: CanvasW - pt.x,
|
||||
y: pt.y,
|
||||
}
|
||||
}
|
||||
|
||||
export type ControlPts = {
|
||||
C1: XY;
|
||||
L1: XY;
|
||||
B1: XY;
|
||||
C2: XY;
|
||||
L2: XY;
|
||||
B2: XY;
|
||||
A1: XY;
|
||||
A2: XY;
|
||||
B3: XY;
|
||||
RoomLT: XY;
|
||||
RoomRT: XY;
|
||||
RoomRB: XY;
|
||||
RoomLB: XY;
|
||||
RoomRTFar: XY;
|
||||
RoomRBFar: XY;
|
||||
RoomLBFar: XY;
|
||||
TopRectLB: XY;
|
||||
TopRectRB: XY;
|
||||
SepsLTLBRBRT: XY[][];
|
||||
SepsFront: XYWH[];
|
||||
ZmArea: {
|
||||
lt0: XY; lt1: XY; lt2: XY; lt3: XY;
|
||||
lb0: XY; lb1: XY; lb2: XY; lb3: XY;
|
||||
rt0: XY; rt1: XY; rt2: XY; rt3: XY;
|
||||
rb0: XY; rb1: XY; rb2: XY; rb3: XY;
|
||||
|
||||
}[];
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export function contextCoordinates(unitWidth: number, hole: number): ControlPts {
|
||||
const C1 = { x: unitWidth * 0.6, y: GroundBase };
|
||||
const L1 = { x: unitWidth, y: GroundBase };
|
||||
const B1 = { x: unitWidth, y: BottomBase }
|
||||
|
||||
const C2 = intersection(ViewCenter, C1, { x: 0, y: undefined });
|
||||
const L2 = intersection(ViewCenter, L1, { x: 0, y: undefined });
|
||||
const B2 = intersection(ViewCenter, B1, { x: 0, y: undefined });
|
||||
|
||||
const A1 = { x: L1.x, y: RoofTop };
|
||||
const A2 = intersection(ViewCenter, A1, { x: undefined, y: RoofTopFar });
|
||||
|
||||
const B3 = intersection(ViewCenter, B2, { x: A2.x, y: undefined })
|
||||
|
||||
const RoomLT = { x: (C1.x + L1.x) * 0.5 - SideRoomSize * 0.5, y: RoofTop - SideRoomSize }
|
||||
const RoomRT = { x: (C1.x + L1.x) * 0.5 + SideRoomSize * 0.5, y: RoofTop - SideRoomSize }
|
||||
const RoomRB = { x: (C1.x + L1.x) * 0.5 + SideRoomSize * 0.5, y: RoofTop }
|
||||
const RoomLB = { x: (C1.x + L1.x) * 0.5 - SideRoomSize * 0.5, y: RoofTop }
|
||||
const RoomRBFar = intersection(ViewCenter, RoomRB, { x: undefined, y: RoofTopFar });
|
||||
const RoomRTFar = intersection(ViewCenter, RoomRT, { x: RoomRBFar.x, y: undefined });
|
||||
const RoomLBFar = { x: RoomRBFar.x! - SideRoomSize, y: RoomRBFar.y };
|
||||
|
||||
|
||||
const TopRectLB = interpolate(RoomRB, RoomRBFar, 0.05);
|
||||
const TopRectRB = mirror(TopRectLB);
|
||||
|
||||
const TopHoleLT = intersection(A1, ViewCenter, { x: undefined, y: TopRectLB.y });
|
||||
const TopHoleRT = mirror(TopHoleLT);
|
||||
const HolesWidth = TopHoleRT.x - TopHoleLT.x;
|
||||
const PillarWidth = (HolesWidth / hole) * PillarRatio;
|
||||
const HoleWidth = (HolesWidth - PillarWidth * (hole - 1)) / hole;
|
||||
|
||||
const SepsLTLBRBRT: XY[][] = [];
|
||||
const SepsFront: XYWH[] = [];
|
||||
const ZmArea = [];
|
||||
for (let i = 0; i < hole; i++) {
|
||||
const TopBase = TopHoleLT.y;
|
||||
// 隔断
|
||||
if (i > 0) {
|
||||
const frontRight = TopHoleLT.x + (PillarWidth + HoleWidth) * i;
|
||||
const frontLeft = frontRight - PillarWidth;
|
||||
SepsFront.push({ x: frontLeft, y: TopBase, w: PillarWidth, h: BottomBase - TopBase });
|
||||
if (i < hole / 2) {
|
||||
// 右侧面
|
||||
const p1 = { x: frontRight, y: TopBase };
|
||||
const p2 = { x: frontRight, y: BottomBase };
|
||||
const p4 = intersection(p1, ViewCenter, { x: undefined, y: RoofTopFar });
|
||||
const p3 = intersection(p2, ViewCenter, { x: p4.x, y: undefined });
|
||||
SepsLTLBRBRT.push([p1, p2, p3, p4]);
|
||||
} else if (i > hole / 2) {
|
||||
// 左侧面
|
||||
const p1 = { x: frontLeft, y: TopBase };
|
||||
const p2 = { x: frontLeft, y: BottomBase };
|
||||
const p4 = intersection(p1, ViewCenter, { x: undefined, y: RoofTopFar });
|
||||
const p3 = intersection(p2, ViewCenter, { x: p4.x, y: undefined });
|
||||
SepsLTLBRBRT.push([p1, p2, p3, p4]);
|
||||
}
|
||||
}
|
||||
|
||||
// 闸门面
|
||||
{
|
||||
const ZmTopBaseFront = TopBase + 6;
|
||||
const ZmTopBaseBack = ZmTopBaseFront + 10;
|
||||
const lt0 = { x: TopHoleLT.x + (PillarWidth + HoleWidth) * i, y: TopBase };
|
||||
const lb0 = { x: lt0.x, y: BottomBase };
|
||||
const rb0 = { x: lt0.x + HoleWidth, y: BottomBase };
|
||||
const lt1 = intersection(ViewCenter, lt0, { x: undefined, y: ZmTopBaseFront });
|
||||
const lt2 = intersection(ViewCenter, lt0, { x: undefined, y: ZmTopBaseBack });
|
||||
const lt3 = intersection(ViewCenter, lt0, { x: undefined, y: RoofTopFar });
|
||||
const lb1 = intersection(ViewCenter, lb0, { x: lt1.x, y: undefined });
|
||||
const lb2 = intersection(ViewCenter, lb0, { x: lt2.x, y: undefined });
|
||||
const lb3 = intersection(ViewCenter, lb0, { x: lt3.x, y: undefined });
|
||||
const rb1 = intersection(ViewCenter, rb0, { x: undefined, y: lb1.y });
|
||||
const rb2 = intersection(ViewCenter, rb0, { x: undefined, y: lb2.y });
|
||||
const rb3 = intersection(ViewCenter, rb0, { x: undefined, y: lb3.y });
|
||||
const rt0 = { x: rb0.x, y: lt0.y };
|
||||
const rt1 = { x: rb1.x, y: lt1.y };
|
||||
const rt2 = { x: rb2.x, y: lt2.y };
|
||||
const rt3 = { x: rb3.x, y: lt3.y };
|
||||
ZmArea.push({ lt0, lb0, rb0, rt0, lt1, rt1, lb1, rb1, lt2, lb2, rt2, rb2, lt3, lb3, rt3, rb3 });
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
C1, L1, B1, C2, L2, B2, A1, A2, B3,
|
||||
RoomLT, RoomRT, RoomRB, RoomLB, RoomRTFar, RoomRBFar, RoomLBFar,
|
||||
TopRectLB, TopRectRB,
|
||||
SepsLTLBRBRT, SepsFront, ZmArea,
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,350 @@
|
|||
import React, { useEffect, useMemo, useState } from 'react'
|
||||
import { Stage } from 'react-konva';
|
||||
import Sider from './Sider';
|
||||
import Topper1 from './Topper1';
|
||||
import Topper2 from './Topper2';
|
||||
import ZmColumns from './ZmColumns';
|
||||
import { contextCoordinates } from './coordinates';
|
||||
import { renAperture } from '../../../utils/utils';
|
||||
import HFivePlayer from '../../../components/video1Plary'
|
||||
import './index.less';
|
||||
import { httpget, httpget2, httppost2 } from '../../../utils/request';
|
||||
import apiurl from '../../../service/apiurl';
|
||||
const CanvasW = 1080
|
||||
const CanvasH = 640
|
||||
const waterRatio = 0
|
||||
const zmobj ={
|
||||
"hpCode": "HP0074208040002120",
|
||||
"stcd": "4265630075",
|
||||
"ctrlType": "PLC",
|
||||
"ctrlProtocol": "PLC",
|
||||
"uprzStcd": null,
|
||||
"dwrzStcd": null,
|
||||
"flowStcd": null,
|
||||
"gaType": "waga",
|
||||
"ctrlPass": null,
|
||||
"maxHgt": 1.9,
|
||||
"minHgt": 0,
|
||||
"name": "五岭包节制闸",
|
||||
"ghtX": null,
|
||||
"ghtY": null,
|
||||
"irrCode": "D00000020",
|
||||
"irrName": "三干渠",
|
||||
"engCode": "ENG100076",
|
||||
"engName": "三干渠管理处",
|
||||
"orgCode": "A07",
|
||||
"gaorNum": 3,
|
||||
"wagaType": "节制闸",
|
||||
"plcType": null,
|
||||
"bim": 0,
|
||||
"vip": 0,
|
||||
"miu": null,
|
||||
"lgtd": 112.242945,
|
||||
"lttd": 30.848166,
|
||||
"runtime": [
|
||||
null,
|
||||
{
|
||||
"stcd": "4265630075",
|
||||
"gateNumber": 1,
|
||||
"realAperture": 376,
|
||||
"setAperture": 0,
|
||||
"sensorLever": null,
|
||||
"altitudeLever": null,
|
||||
"remoteSignal": 0,
|
||||
"powerSignal": 0,
|
||||
"openingSignal": 0,
|
||||
"closeingSignal": 0,
|
||||
"errorSignal": 0,
|
||||
"openedSignal": 0,
|
||||
"closedSignal": 0,
|
||||
"tm": "2024-09-25 20:03:26",
|
||||
"_online": true
|
||||
},
|
||||
{
|
||||
"stcd": "4265630075",
|
||||
"gateNumber": 2,
|
||||
"realAperture": 388,
|
||||
"setAperture": 0,
|
||||
"sensorLever": null,
|
||||
"altitudeLever": null,
|
||||
"remoteSignal": 0,
|
||||
"powerSignal": 0,
|
||||
"openingSignal": 0,
|
||||
"closeingSignal": 0,
|
||||
"errorSignal": 0,
|
||||
"openedSignal": 0,
|
||||
"closedSignal": 0,
|
||||
"tm": "2024-09-25 20:03:26",
|
||||
"_online": true
|
||||
},
|
||||
{
|
||||
"stcd": "4265630075",
|
||||
"gateNumber": 3,
|
||||
"realAperture": 394,
|
||||
"setAperture": 0,
|
||||
"sensorLever": null,
|
||||
"altitudeLever": null,
|
||||
"remoteSignal": 0,
|
||||
"powerSignal": null,
|
||||
"openingSignal": 0,
|
||||
"closeingSignal": 0,
|
||||
"errorSignal": 0,
|
||||
"openedSignal": 0,
|
||||
"closedSignal": 0,
|
||||
"tm": "2024-09-25 20:03:26",
|
||||
"_online": true
|
||||
}
|
||||
],
|
||||
"real": {
|
||||
"stcd": "4265630075",
|
||||
"stationName": "五岭包节制闸",
|
||||
"z1": null,
|
||||
"zz1": null,
|
||||
"z1tm": null,
|
||||
"z2": null,
|
||||
"zz2": null,
|
||||
"z2tm": null,
|
||||
"hq": null,
|
||||
"hqtm": null,
|
||||
"demtl": null
|
||||
},
|
||||
"cctvs": [],
|
||||
"_idx": 88,
|
||||
"_fav": false,
|
||||
"_sort": 10086
|
||||
}
|
||||
|
||||
const runtime = [
|
||||
null,
|
||||
{
|
||||
"stcd": "4265630075",
|
||||
"gateNumber": 1,
|
||||
"realAperture": 976,
|
||||
"setAperture": 0,
|
||||
"sensorLever": null,
|
||||
"altitudeLever": null,
|
||||
"remoteSignal": 0,
|
||||
"powerSignal": 0,
|
||||
"openingSignal": 0,
|
||||
"closeingSignal": 0,
|
||||
"errorSignal": 0,
|
||||
"openedSignal": 0,
|
||||
"closedSignal": 0,
|
||||
"tm": "2024-09-25 20:03:31"
|
||||
},
|
||||
{
|
||||
"stcd": "4265630075",
|
||||
"gateNumber": 2,
|
||||
"realAperture": 388,
|
||||
"setAperture": 0,
|
||||
"sensorLever": null,
|
||||
"altitudeLever": null,
|
||||
"remoteSignal": 0,
|
||||
"powerSignal": 0,
|
||||
"openingSignal": 0,
|
||||
"closeingSignal": 0,
|
||||
"errorSignal": 0,
|
||||
"openedSignal": 0,
|
||||
"closedSignal": 0,
|
||||
"tm": "2024-09-25 20:03:31"
|
||||
},
|
||||
{
|
||||
"stcd": "4265630075",
|
||||
"gateNumber": 3,
|
||||
"realAperture": 394,
|
||||
"setAperture": 0,
|
||||
"sensorLever": null,
|
||||
"altitudeLever": null,
|
||||
"remoteSignal": 0,
|
||||
"powerSignal": null,
|
||||
"openingSignal": 0,
|
||||
"closeingSignal": 0,
|
||||
"errorSignal": 0,
|
||||
"openedSignal": 0,
|
||||
"closedSignal": 0,
|
||||
"tm": "2024-09-25 20:03:31"
|
||||
}
|
||||
]
|
||||
|
||||
const myType = {
|
||||
// 闸前水位站 2闸后水位站 3流量站
|
||||
'1':'闸前水位/水深(m)',
|
||||
'2':'闸后水位/水深(m)',
|
||||
'3':'流量 (m³/s)',
|
||||
}
|
||||
|
||||
const Page = () => {
|
||||
const [itemIndex,setItemIndex] = useState(null)
|
||||
const [data,setData] = useState({})
|
||||
const [list, setList ] = useState([])
|
||||
const [damList, setDamList ] = useState([])
|
||||
const [videoList, setVideoList ] = useState([])
|
||||
const [videoArr, setvideoArr] = useState({})
|
||||
|
||||
|
||||
const hole = 3;//zmobj.gaorNum;
|
||||
const xunit = CanvasW / (2 + hole);
|
||||
const pts = contextCoordinates(xunit, hole);
|
||||
const eqpnoList = useMemo(() => damList ? new Array(damList.length).fill(0).map((o, index) => index) : [], [damList]);
|
||||
|
||||
useEffect(()=>{
|
||||
getList()
|
||||
},[])
|
||||
|
||||
const getList = async()=>{
|
||||
const {code, data} = await httppost2(apiurl.zmjk.getList)
|
||||
if(code!==200){
|
||||
return
|
||||
}
|
||||
const obj = data[0]||{}
|
||||
getInformation(obj.gateCode)
|
||||
getDamData(obj.stcd)
|
||||
getVideo(obj.gateCode)
|
||||
setData(obj)
|
||||
}
|
||||
|
||||
const getInformation = async(gateCode)=>{
|
||||
const {code, data} = await httpget2(apiurl.zmjk.getInformation,{gateCode})
|
||||
if(code!==200){
|
||||
return
|
||||
}
|
||||
setList(data)
|
||||
}
|
||||
|
||||
const getDamData = async(stcd)=>{
|
||||
const {code, data} = await httpget2(apiurl.zmjk.getDamData,{stcd})
|
||||
if(code!==200){
|
||||
return
|
||||
}
|
||||
const list = []
|
||||
data.map((item)=>{
|
||||
list.push({
|
||||
...item
|
||||
// ,realAperture:item.realAperture*1000
|
||||
})
|
||||
})
|
||||
setDamList(list)
|
||||
}
|
||||
|
||||
const getVideo = async(valveCode)=>{
|
||||
const {code, data} = await httppost2(apiurl.zmjk.getVideo,{valveCode})
|
||||
if(code!==200){
|
||||
return
|
||||
}
|
||||
setVideoList(data)
|
||||
}
|
||||
|
||||
const getVideoSrc = async (current) => {
|
||||
const res = await httpget2(`${apiurl.gsxl.zfzl.videosrc}${'32023a7f27d8448fa10511f24e96acff'}`)
|
||||
if (res.code == 200 && res.data?.length !== 0) {
|
||||
setvideoArr({src:res.data})
|
||||
}else{
|
||||
setvideoArr({})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='content-root clearFloat xybm sg_zmjk' style={{paddingRight:"0",paddingBottom:"0"}}>
|
||||
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
||||
{/* <Card className='nonebox'>
|
||||
</Card> */}
|
||||
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
||||
<dvi className="sg_zmjk_left">
|
||||
<Stage width={1080} height={640}>
|
||||
<Sider pts={pts} side="left" />
|
||||
<Sider pts={pts} side="right" />
|
||||
<Topper1 pts={pts} type={hole} />
|
||||
<ZmColumns runtime={damList} zmobj={zmobj} pts={pts} waterRatio={waterRatio} />
|
||||
<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>
|
||||
{
|
||||
eqpnoList.map(o => (
|
||||
<div key={o}
|
||||
onClick={() => {}}
|
||||
className='o' style={{ flexGrow: 1, width: 100, 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>
|
||||
))
|
||||
}
|
||||
<div key="sider2" style={{ flexGrow: 1, width: 100 }}></div>
|
||||
</div>
|
||||
<div style={{ position: 'absolute', left: 0, bottom: 20, width: '100%', height: 100, display: 'flex', alignContent: 'center' }}>
|
||||
<div key="sider1" style={{ flexGrow: 1, width: 100 }}></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 #444', backgroundColor: '#fff', borderRadius: 4, color: '#888', 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>
|
||||
</dvi>
|
||||
<dvi className="sg_zmjk_right">
|
||||
<div className='sg_zmjk_right_video'>
|
||||
<div className='sg_zmjk_right_video_title'>视频监控</div>
|
||||
<div className='sg_zmjk_right_video_content'>
|
||||
<div className='sg_zmjk_right_video_content_left'>
|
||||
{
|
||||
videoList.map((item,index)=>(
|
||||
<div className={index===itemIndex?'sg_zmjk_right_video_content_left_item itemChecked':'sg_zmjk_right_video_content_left_item'} onClick={()=>{setItemIndex(index);getVideoSrc(item.indexCode)}}>
|
||||
{item.name}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
<div className='sg_zmjk_right_video_content_right'>
|
||||
{
|
||||
videoArr?.src &&
|
||||
<div
|
||||
className="content-video"
|
||||
style={{ width: '100%', height: '100%',cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
// if (controlerParams.type == 1) {
|
||||
// setVideoOpen(true)
|
||||
// setIsShow(!isShow)
|
||||
// }
|
||||
}}
|
||||
>
|
||||
<HFivePlayer size={1} wsUrl={videoArr} playerID={'111'} />
|
||||
{/* <div style={{textAlign:"right"}}>注：单击视频显示/隐藏云台</div> */}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='sg_zmjk_right_information'>
|
||||
<div className='sg_zmjk_right_information_title'>监测数据</div>
|
||||
<div style={{height:'144px',overflowY:'auto',padding:'20px'}}>
|
||||
{
|
||||
list?.map((item)=>{
|
||||
return (
|
||||
<div className='sg_zmjk_right_information_content'>
|
||||
<div>{myType[item.type]}</div>
|
||||
<div>112.079 / 1.279</div>
|
||||
<div>07-10 12:09:00</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div className='sg_zmjk_right_more'>》》查看更多信息</div>
|
||||
</dvi>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Page;
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
.sg_zmjk{
|
||||
.ant-card-body{
|
||||
display: flex;
|
||||
height: 100%;
|
||||
.sg_zmjk_left{
|
||||
top: 30px;
|
||||
position: relative;
|
||||
width: 1080px;
|
||||
height: 640px;
|
||||
transform: scale(0.9,1);
|
||||
|
||||
}
|
||||
.sg_zmjk_right{
|
||||
flex: 1;
|
||||
// width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.sg_zmjk_right_video{
|
||||
height: 400px;
|
||||
margin: 30px 20px 30px -30px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #bbb;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.sg_zmjk_right_video_title{
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
padding-left: 10px;
|
||||
border-bottom: 1px solid #bbb;
|
||||
}
|
||||
.sg_zmjk_right_video_content{
|
||||
flex: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
.sg_zmjk_right_video_content_left{
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 10px;
|
||||
width: 130px;
|
||||
height: 363px;
|
||||
border-right: 1px solid #bbb;
|
||||
cursor: pointer;
|
||||
.sg_zmjk_right_video_content_left_item{
|
||||
width: 110px;
|
||||
// height: 30px;
|
||||
margin-bottom: 5px;
|
||||
// line-height: 30px;
|
||||
text-align: center;
|
||||
border: 1px solid #bbb;
|
||||
}
|
||||
.itemChecked{
|
||||
background-color: #1890FF;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.sg_zmjk_right_video_content_right{
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sg_zmjk_right_information{
|
||||
height: 180px;
|
||||
margin: -10px 20px 30px -30px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #bbb;
|
||||
.sg_zmjk_right_information_title{
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
padding-left: 10px;
|
||||
border-bottom: 1px solid #bbb;
|
||||
}
|
||||
.sg_zmjk_right_information_content{
|
||||
display: flex;
|
||||
padding: 2px 10px;
|
||||
div{
|
||||
width: 33%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sg_zmjk_right_more{
|
||||
margin: -10px 20px 30px -30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
import { useEffect, useReducer, useRef, useState } from "react";
|
||||
|
||||
|
||||
const DURATION = 900;
|
||||
const CNT = 5;
|
||||
|
||||
const INTERVAL = DURATION / CNT;
|
||||
|
||||
export function useLinearAnim(val: number | undefined) {
|
||||
|
||||
const ren = useRef(val);
|
||||
|
||||
const [_, refresh] = useReducer(s => s + 1, 0);
|
||||
|
||||
const alive = useRef<boolean>(true);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
alive.current = false;
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof val !== 'number') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (ren.current == undefined) {
|
||||
ren.current = val;
|
||||
}
|
||||
const len = val - ren.current;
|
||||
|
||||
let handle: any = null;
|
||||
if (len) {
|
||||
const dv = len / CNT;
|
||||
let cnt = CNT;
|
||||
handle = setInterval(() => {
|
||||
if (cnt > 0 && alive.current) {
|
||||
cnt--;
|
||||
ren.current! -= dv;
|
||||
refresh();
|
||||
}
|
||||
}, INTERVAL)
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (handle) {
|
||||
clearInterval(handle);
|
||||
}
|
||||
}
|
||||
}, [val]);
|
||||
|
||||
return ren.current ?? val;
|
||||
}
|
||||
|
|
@ -22,7 +22,7 @@ export default function Sksq() {
|
|||
setSwTableData(await zqrl(stcd));
|
||||
};
|
||||
useEffect(() => {
|
||||
getData({args: "",sources: ["SH", "SW"],})
|
||||
getData({args: "",sources: ["SH", "SW"]})
|
||||
}, [])
|
||||
return (
|
||||
<div className='lf' style={{ height: 'calc(100vh - 168px)', width: "100%" }}>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import NormalSelect from '../../../components/Form/NormalSelect';
|
|||
import "./index.less"
|
||||
import moment from 'moment';
|
||||
import { createCrudService } from '../../../components/crud/_';
|
||||
import { httpget2, httppost2 } from '../../../utils/request';
|
||||
|
||||
const { RangePicker } = DatePicker
|
||||
const { Dragger } = Upload;
|
||||
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||
|
|
@ -91,7 +93,18 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
setPdfViewOPen(true)
|
||||
}
|
||||
|
||||
const [jh, setJh] = useState([])
|
||||
const getJhList = async () => {
|
||||
try {
|
||||
const res = await httppost2(apiurl.pxjl.list)
|
||||
if (res.code == 200) {
|
||||
setJh(res.data.map(item => ({label:item.name,value:item.id})))
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -102,17 +115,22 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
}, [record])
|
||||
|
||||
useEffect(() => {
|
||||
if (mode !== "save") {
|
||||
let dataSo = [
|
||||
record.validStartDate? moment(record.validStartDate):'',
|
||||
record.validEndDate? moment(record.validEndDate): ''
|
||||
]
|
||||
getJhList()
|
||||
}, [])
|
||||
|
||||
form.setFieldsValue({...record,dateRangeSo:dataSo})
|
||||
|
||||
}
|
||||
// useEffect(() => {
|
||||
// if (mode !== "save") {
|
||||
// let dataSo = [
|
||||
// record.validStartDate? moment(record.validStartDate):'',
|
||||
// record.validEndDate? moment(record.validEndDate): ''
|
||||
// ]
|
||||
|
||||
}, [record,mode])
|
||||
// form.setFieldsValue({...record,dateRangeSo:dataSo})
|
||||
|
||||
// }
|
||||
|
||||
// }, [record,mode])
|
||||
|
||||
return (
|
||||
<div style={{height:"65vh",overflowY:"auto"}}>
|
||||
|
|
@ -121,21 +139,21 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Form
|
||||
form={form}
|
||||
{...formItemLayout}
|
||||
// initialValues={record}
|
||||
initialValues={record}
|
||||
>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训计划"
|
||||
name="teamName"
|
||||
name="planId"
|
||||
>
|
||||
<Input disabled={true} style={{width:'100%'}} allowClear />
|
||||
<NormalSelect disabled={mode==='view'} style={{width:'100%'}} allowClear options={jh}/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训分类"
|
||||
name="teamName"
|
||||
name="type"
|
||||
>
|
||||
<NormalSelect disabled={true} style={{ width: '100%' }} allowClear options={types} />
|
||||
</Form.Item>
|
||||
|
|
@ -145,7 +163,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训日期"
|
||||
name="startDate"
|
||||
name="planDate"
|
||||
rules={[{ required: true }]}
|
||||
getValueFromEvent={(e,dateString) => dateString}
|
||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||
|
|
@ -157,7 +175,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="标题名称"
|
||||
name="teamName"
|
||||
name="name"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input disabled={true} style={{width:'100%'}} allowClear />
|
||||
|
|
@ -169,17 +187,24 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训时段"
|
||||
name="address"
|
||||
name="tm"
|
||||
>
|
||||
<Input disabled={true} style={{width:'100%'}} allowClear />
|
||||
<TimePicker.RangePicker
|
||||
disabled={mode === 'view'}
|
||||
style={{ width: '100%' }}
|
||||
allowClear
|
||||
format={"HH:mm:ss"}
|
||||
// value={timeValue}
|
||||
// onChange={(e) => setTimeValue(e)}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训时长(小时)"
|
||||
name="address"
|
||||
name="hour"
|
||||
>
|
||||
<Input disabled={true} style={{width:'100%'}} allowClear />
|
||||
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
@ -187,19 +212,19 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训地点"
|
||||
name="remark"
|
||||
name="addr"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input disabled={true} style={{width:'100%'}} allowClear />
|
||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="主办单位"
|
||||
name="remark"
|
||||
rules={[{ required: true }]}
|
||||
name="unit"
|
||||
>
|
||||
<Input disabled={true} style={{width:'100%'}} allowClear />
|
||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
@ -207,12 +232,12 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="培训内容"
|
||||
name="remark"
|
||||
name="content"
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input.TextArea disabled={true} style={{width:'100%',minHeight:'50px'}} allowClear />
|
||||
<Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'50px'}} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
@ -220,7 +245,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="培训范围"
|
||||
name="remark"
|
||||
name="scope"
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
|
||||
|
|
@ -233,17 +258,18 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="参训人员"
|
||||
name="remark"
|
||||
name="trainees"
|
||||
>
|
||||
<Input min={0} disabled={true} style={{width:'100%'}} allowClear />
|
||||
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="参加人数"
|
||||
name="address"
|
||||
label="参训人数"
|
||||
name="numPeople"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input disabled={true} style={{width:'100%'}} allowClear />
|
||||
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
@ -252,20 +278,19 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="填报人"
|
||||
name="address"
|
||||
rules={[{ required: true }]}
|
||||
name="applicant"
|
||||
>
|
||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
<Input disabled={true} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="登记日期"
|
||||
name="startDate"
|
||||
name="regDate"
|
||||
rules={[{ required: true }]}
|
||||
getValueFromEvent={(e,dateString) => dateString}
|
||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||
|
||||
>
|
||||
<DatePicker disabled={true} format={'YYYY-MM-DD'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
|
|
|
|||
|
|
@ -47,40 +47,14 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
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.href = `http://local.gunshiiot.com:18083/gunshiApp/tsg/personnelPlan/file/download/${params}`;
|
||||
downloadLink.download = `${params.fileName}`;
|
||||
downloadLink.style.display = "none";
|
||||
// 将链接添加到页面中
|
||||
|
|
@ -120,20 +94,18 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
}
|
||||
|
||||
|
||||
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")
|
||||
const onfinish = (values) => {
|
||||
values.regDate = moment(values.regDate).format('YYYY-MM-DD')
|
||||
let oldFiles = fileList.map(item => ({fileId:item.response?.data?.fileId }))
|
||||
values.files = oldFiles;
|
||||
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)
|
||||
onEdit(apiurl.pxjh.edit,{...record,...values})
|
||||
}
|
||||
if (mode === 'save') {
|
||||
values.fileIds = fileIds
|
||||
onSave(apiurl.fxzb.qsdw.zq.save,values)
|
||||
onSave(apiurl.pxjh.save,values)
|
||||
}
|
||||
if (mode === "similarSave") {
|
||||
onSave(apiurl.pxjh.save,values)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -146,24 +118,31 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
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})
|
||||
|
||||
let fileArr = record?.files.map(item => {
|
||||
return {
|
||||
name: item.fileName,
|
||||
response: {
|
||||
data: {
|
||||
filePath: item.filePath,
|
||||
fileId:item.fileId
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
setFileList(fileArr)
|
||||
}
|
||||
}, [mode, record])
|
||||
|
||||
useEffect(() => {
|
||||
const userName = localStorage.getItem('userName')
|
||||
form.setFieldValue("regDate", moment())
|
||||
form.setFieldValue("applicant",userName)
|
||||
}, [])
|
||||
|
||||
}, [record,mode])
|
||||
|
||||
return (
|
||||
<div style={{height:"65vh",overflowY:"auto"}}>
|
||||
|
|
@ -172,13 +151,14 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Form
|
||||
form={form}
|
||||
{...formItemLayout}
|
||||
// initialValues={record}
|
||||
initialValues={record}
|
||||
onFinish={onfinish}
|
||||
>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训班名称"
|
||||
name="teamName"
|
||||
name="name"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
|
|
@ -187,7 +167,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训班分类"
|
||||
name="teamName"
|
||||
name="type"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<NormalSelect disabled={mode === 'view'} style={{ width: '100%' }} allowClear options={types} />
|
||||
|
|
@ -198,7 +178,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="主办单位"
|
||||
name="remark"
|
||||
name="unit"
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
rules={[{ required: true }]}
|
||||
|
|
@ -211,7 +191,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="开始培训日期"
|
||||
name="startDate"
|
||||
name="stm"
|
||||
rules={[{ required: true }]}
|
||||
getValueFromEvent={(e,dateString) => dateString}
|
||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||
|
|
@ -223,7 +203,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="结束培训日期"
|
||||
name="startDate"
|
||||
name="etm"
|
||||
rules={[{ required: true }]}
|
||||
getValueFromEvent={(e,dateString) => dateString}
|
||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||
|
|
@ -238,7 +218,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训天数(天)"
|
||||
name="address"
|
||||
name="day"
|
||||
>
|
||||
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
|
|
@ -246,7 +226,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训期数(期)"
|
||||
name="address"
|
||||
name="num"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
|
|
@ -257,7 +237,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="培训地点"
|
||||
name="remark"
|
||||
name="addr"
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
rules={[{ required: true }]}
|
||||
|
|
@ -270,12 +250,12 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="培训内容"
|
||||
name="remark"
|
||||
name="content"
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'50px'}} allowClear />
|
||||
<Input.TextArea disabled={mode==='view'} style={{width:'100%',minHeight:'100px'}} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
@ -283,7 +263,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="培训范围"
|
||||
name="remark"
|
||||
name="scope"
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
rules={[{ required: true }]}
|
||||
|
|
@ -296,7 +276,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="参训人员"
|
||||
name="remark"
|
||||
name="trainees"
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
>
|
||||
|
|
@ -308,7 +288,8 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="参训人数(人)"
|
||||
name="address"
|
||||
name="numPeople"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
|
|
@ -316,7 +297,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="联系人"
|
||||
name="address"
|
||||
name="contacts"
|
||||
>
|
||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
|
|
@ -326,7 +307,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="联系电话"
|
||||
name="address"
|
||||
name="contactNumber"
|
||||
>
|
||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
|
|
@ -334,7 +315,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="填报人"
|
||||
name="address"
|
||||
name="applicant"
|
||||
>
|
||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
|
|
@ -344,7 +325,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="状态"
|
||||
name="address"
|
||||
name="status"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<NormalSelect disabled={mode==='view'} style={{width:'100%'}} allowClear options={[{label:"有效",value:1},{label:"无效",value:2}]} />
|
||||
|
|
@ -353,7 +334,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="登记日期"
|
||||
name="startDate"
|
||||
name="regDate"
|
||||
rules={[{ required: true }]}
|
||||
getValueFromEvent={(e,dateString) => dateString}
|
||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||
|
|
@ -378,7 +359,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Dragger
|
||||
name='file'
|
||||
// multiple
|
||||
action="/gunshiApp/xyt/rescue/team/file/upload/singleSimple"
|
||||
action="/gunshiApp/tsg/personnelPlan/file/upload/singleSimple"
|
||||
onChange={fileChange}
|
||||
onDrop={(info) => { console.log(info.dataTransfer.files); }}
|
||||
fileList={fileList}
|
||||
|
|
@ -480,7 +461,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
border: 0,
|
||||
marginTop: 20,
|
||||
}}
|
||||
src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/rescue/goods/file/download/${iframeSrc}`)}`}
|
||||
src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/tsg/personnelPlan/file/download/${iframeSrc}`)}`}
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@ import BasicCrudModal from '../../../components/crud/BasicCrudModal';
|
|||
import { Table, Card,Modal,Image,Input,Button,Row,Col,message } from 'antd';
|
||||
import ToolBar from './toolbar';
|
||||
import ModalForm from './form';
|
||||
import RecordDetails from "./RecordForm"
|
||||
import RecordDetails from "../pxjlgl/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 { exportFile } from '../../../utils/tools.js';
|
||||
import { httppost5 } from '../../../utils/request';
|
||||
import { httppost5,httpget2 } from '../../../utils/request';
|
||||
|
||||
const Page = () => {
|
||||
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||
|
|
@ -21,18 +21,21 @@ const Page = () => {
|
|||
const refModal = useRef();
|
||||
const [searchVal, setSearchVal] = useState(false)
|
||||
const [pxRecordOpen, setPxRecordOpen] = useState(false)
|
||||
|
||||
const [qdItem, setQdItem] = useState()
|
||||
const columns = [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||
{ title: '培训班名称', key: 'teamName', dataIndex: 'teamName', width: 200, ellipsis: true },
|
||||
{ title: '培训班名称', key: 'name', dataIndex: 'name', width: 200, ellipsis: true },
|
||||
{
|
||||
title: '计划培训周期', key: 'personCount', dataIndex: 'personCount', width: 200,
|
||||
title: '计划培训周期', key: 'num1', dataIndex: 'num1', width: 200,
|
||||
render: (value, record) => <span>{(record?.stm && record?.etm) ? `${record?.stm}至${record?.etm}` : ''}</span>,
|
||||
},
|
||||
{ title: '主办单位', key: 'address', dataIndex: 'address', width: 200 },
|
||||
{ title: '主办单位', key: 'unit', dataIndex: 'unit', width: 200 },
|
||||
{
|
||||
title: '培训内容', key: 'managementUnit', dataIndex: 'managementUnit', width: 200,ellipsis: true
|
||||
title: '培训内容', key: 'content', dataIndex: 'content', width: 200,ellipsis: true
|
||||
},
|
||||
{ title: '培训地点', key: 'teamLeader', dataIndex: 'teamLeader', width: 150, ellipsis: true },
|
||||
{ title: '填报人', key: 'phone', dataIndex: 'phone', width: 150, ellipsis: true },
|
||||
{ title: '培训地点', key: 'addr', dataIndex: 'addr', width: 150, ellipsis: true },
|
||||
{ title: '填报人', key: 'applicant', dataIndex: 'applicant', width: 150, ellipsis: true },
|
||||
|
||||
{
|
||||
title: '操作', key: 'operation', width: 300, fixed: 'right',align: 'center',
|
||||
|
|
@ -48,23 +51,24 @@ const Page = () => {
|
|||
];
|
||||
const columns1 = [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||
{ title: '培训日期', key: 'teamName', dataIndex: 'teamName', width: 150, ellipsis: true },
|
||||
{ title: '培训日期', key: 'planDate', dataIndex: 'planDate', width: 150, ellipsis: true },
|
||||
{
|
||||
title: '培训时段', key: 'personCount', dataIndex: 'personCount', width: 150,
|
||||
render: (value, record) => <span>{(record?.stm && record?.etm) ? `${record?.stm}至${record?.etm}` : ''}</span>,
|
||||
},
|
||||
{ title: '参加人数', key: 'address', dataIndex: 'address', width: 100 },
|
||||
{ title: '参加人数', key: 'trainees', dataIndex: 'trainees', width: 100 },
|
||||
{
|
||||
title: '参训人员', key: 'managementUnit', dataIndex: 'managementUnit', width: 200,ellipsis: true
|
||||
title: '参训人员', key: 'numPeople', dataIndex: 'numPeople', width: 200,ellipsis: true
|
||||
},
|
||||
{
|
||||
title: '培训签到表', key: 'teamLeader', dataIndex: 'teamLeader', width: 150,
|
||||
render: (value) => <div>{value ? <a onClick={()=>reviewPic(value)}> {value} </a>: ''}</div>
|
||||
render: (value,record) => <div><a onClick={()=>reviewPic(record.files1)}> {record?.files1[0]?.fileName} </a></div>
|
||||
},
|
||||
|
||||
{
|
||||
title: '操作', key: 'operation', width: 100, fixed: 'right',align: 'center',
|
||||
render: (value, row, index) => (
|
||||
<a onClick={() => {setPxRecordOpen(true)}}>查看</a>
|
||||
<a onClick={() => { setPxRecordOpen(true); setQdItem(row)}}>查看</a>
|
||||
)
|
||||
},
|
||||
];
|
||||
|
|
@ -74,6 +78,10 @@ const Page = () => {
|
|||
const [pxOpen, setPxOpen] = useState(false)
|
||||
const [imgVisible, setImgVisible] = useState(false)
|
||||
const [imgList, setImgList] = useState([])
|
||||
const [fileList1, setFileList1] = useState([]) //上传文件列表
|
||||
const [fileList2, setFileList2] = useState([]) //上传文件列表
|
||||
|
||||
|
||||
const reviewPic = (arrPic) => {
|
||||
if (arrPic.length > 0) {
|
||||
setImgVisible(true)
|
||||
|
|
@ -88,19 +96,26 @@ const Page = () => {
|
|||
} else if (type === 'view') {
|
||||
refModal.current.showView(params);
|
||||
} else if (type === 'del') {
|
||||
refModal.current.onDeleteGet(apiurl.fxzb.qsdw.zq.delete + `/${params.teamId}`);
|
||||
refModal.current.onDeleteGet(apiurl.pxjh.delete + `/${params.id}`);
|
||||
}else if (type === 'similarAdd') {
|
||||
refModal.current.showSimilarSave(params);
|
||||
} else {
|
||||
// 培训记录
|
||||
const params1 = {
|
||||
search: {
|
||||
...searchVal,
|
||||
planId:params.id
|
||||
}
|
||||
};
|
||||
setPxOpen(true);
|
||||
// setPxItem
|
||||
search1(params1)
|
||||
// getFileInfo(params)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.fxzb.qsdw.zq.page).find_noCode);
|
||||
const { tableProps:tableProps1, search:search1 } = usePageTable(createCrudService(apiurl.fxzb.qsdw.zq.page).find_noCode);
|
||||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.pxjh.page).find_noCode);
|
||||
const { tableProps:tableProps1, search:search1 } = usePageTable(createCrudService(apiurl.pxjl.page).find_noCode);
|
||||
|
||||
/**
|
||||
* @description 处理成功的回调
|
||||
|
|
@ -110,14 +125,51 @@ const Page = () => {
|
|||
}
|
||||
|
||||
|
||||
// const getFileInfo = async (params) => {
|
||||
// try {
|
||||
// const res = await httpget2(apiurl.pxjl.getFile + `/${params.id}`)
|
||||
// if (res.code === 200) {
|
||||
// if (res.data?.files1) {
|
||||
// let fileArr1 = res.data?.files1.map(item => {
|
||||
// return {
|
||||
// name: item.fileName,
|
||||
// response: {
|
||||
// data: {
|
||||
// filePath: item.filePath,
|
||||
// fileId: item.fileId
|
||||
// }
|
||||
// },
|
||||
// }
|
||||
// })
|
||||
// setFileList1(fileArr1)
|
||||
// }
|
||||
// if (res.data?.files2) {
|
||||
// let fileArr2 = res.data?.files2.map(item => {
|
||||
// return {
|
||||
// name: item.fileName,
|
||||
// response: {
|
||||
// data: {
|
||||
// filePath: item.filePath,
|
||||
// fileId: item.fileId
|
||||
// }
|
||||
// },
|
||||
// }
|
||||
// })
|
||||
// setFileList2(fileArr2)
|
||||
// }
|
||||
// }
|
||||
// } catch (error) {
|
||||
// console.log(error);
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// 导出
|
||||
const exportExcel = () => {
|
||||
let params = {
|
||||
...searchVal,
|
||||
|
||||
id:1
|
||||
}
|
||||
httppost5(apiurl.gcaqjc.gcaqfx.jrx.export, params).then(res => {
|
||||
httppost5(apiurl.pxjh.export, params).then(res => {
|
||||
exportFile(`培训计划管理.xlsx`,res.data)
|
||||
})
|
||||
}
|
||||
|
|
@ -130,6 +182,18 @@ const Page = () => {
|
|||
search(params)
|
||||
}, [searchVal])
|
||||
|
||||
// const dataSource = useMemo(() => {
|
||||
// if (tableProps1.dataSource.length > 0) {
|
||||
// return tableProps1.dataSource.map(item => ({
|
||||
// ...item,
|
||||
// files1: fileList1,
|
||||
// files2: fileList2,
|
||||
// }))
|
||||
// } else {
|
||||
// return []
|
||||
// }
|
||||
// },[tableProps1.dataSource,fileList1,fileList2])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -141,7 +205,7 @@ const Page = () => {
|
|||
onSave={command('save')}
|
||||
role={role}
|
||||
callback={refresh}
|
||||
exportFile={exportExcel}
|
||||
exportFile1={exportExcel}
|
||||
/>
|
||||
</Card>
|
||||
<div className="ant-card-body" style={{padding:"20px 0 0 0"}}>
|
||||
|
|
@ -155,7 +219,6 @@ const Page = () => {
|
|||
title=""
|
||||
component={ModalForm}
|
||||
onCrudSuccess={successCallback}
|
||||
// onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
|
||||
/>
|
||||
</div>
|
||||
{/* 培训记录 */}
|
||||
|
|
@ -173,7 +236,7 @@ const Page = () => {
|
|||
columns={columns1}
|
||||
rowKey="inx"
|
||||
{...tableProps1}
|
||||
dataSource={[{teamName:1}]}
|
||||
// dataSource={dataSource}
|
||||
scroll={{ x: width1, y: "calc( 100vh - 400px )" }} />
|
||||
</Modal>
|
||||
|
||||
|
|
@ -189,7 +252,7 @@ const Page = () => {
|
|||
setPxRecordOpen(false);
|
||||
}}
|
||||
>
|
||||
<RecordDetails mode={"view"} record={{}} />
|
||||
<RecordDetails mode={"view"} record={qdItem} />
|
||||
</Modal>
|
||||
<div style={{ display: "none" }}>
|
||||
<Image.PreviewGroup
|
||||
|
|
|
|||
|
|
@ -3,12 +3,12 @@ import { Form, Upload, Button,Row, Col, Input, DatePicker, message,Modal } from
|
|||
import {RightOutlined,LeftOutlined,FileExcelOutlined,DeleteOutlined} from '@ant-design/icons';
|
||||
import { createCrudService } from '../../../components/crud/_';
|
||||
import apiurl from '../../../service/apiurl';
|
||||
import { httppost5 } from '../../../utils/request';
|
||||
import { httpgetExport, httppost5 } from '../../../utils/request';
|
||||
import { exportFile } from '../../../utils/tools';
|
||||
import moment from 'moment';
|
||||
const { Dragger } = Upload;
|
||||
const { RangePicker } = DatePicker;
|
||||
const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFile }) => {
|
||||
const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFile1 }) => {
|
||||
const [form] = Form.useForm();
|
||||
const addBtn = role?.rule?.find(item => item.menuName == "新增")|| true;
|
||||
const searchBtn = role?.rule?.find(item => item.menuName == "查询") || true;
|
||||
|
|
@ -20,12 +20,12 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFil
|
|||
let dateSo;
|
||||
if (values.tm) {
|
||||
dateSo = {
|
||||
start: moment(values.tm[0]).format('YYYY'),
|
||||
end: moment(values.tm[1]).format('YYYY')
|
||||
stm: moment(values.tm[0]).format('YYYY'),
|
||||
etm: moment(values.tm[1]).format('YYYY')
|
||||
}
|
||||
}
|
||||
delete values.tm
|
||||
setSearchVal({...values, dateSo});
|
||||
setSearchVal({...values, ...dateSo});
|
||||
}
|
||||
|
||||
const beforeUpload = (file) => {
|
||||
|
|
@ -58,7 +58,7 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFil
|
|||
}
|
||||
|
||||
const downTemplate = ()=>{
|
||||
httppost5(apiurl.rcgl.zbgl.zbb.import, {}).then(res => {
|
||||
httpgetExport(apiurl.pxjh.import, {}).then(res => {
|
||||
exportFile(`培训计划管理.xlsx`,res.data)
|
||||
})
|
||||
}
|
||||
|
|
@ -76,10 +76,10 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFil
|
|||
picker='year'
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="填报人" name="teamName">
|
||||
<Form.Item label="填报人" name="applicant">
|
||||
<Input allowClear style={{width:'150px'}}/>
|
||||
</Form.Item>
|
||||
<Form.Item label="培训班名称" name="teamName">
|
||||
<Form.Item label="培训班名称" name="name">
|
||||
<Input allowClear style={{width:'150px'}}/>
|
||||
</Form.Item>
|
||||
{searchBtn ? <Form.Item>
|
||||
|
|
@ -99,7 +99,7 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFil
|
|||
<Form.Item>
|
||||
<Button onClick={() => {setExportOPen(true)}}>导入</Button>
|
||||
</Form.Item><Form.Item>
|
||||
<Button onClick={()=>exportFile()}>导出</Button>
|
||||
<Button onClick={()=>exportFile1()}>导出</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</div>
|
||||
|
|
@ -117,7 +117,7 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFil
|
|||
<Dragger
|
||||
name='file'
|
||||
// multiple
|
||||
action="/gunshiApp/xyt/rota/importData"
|
||||
action="/gunshiApp/tsg/personnelPlan/upload"
|
||||
onChange={fileChange}
|
||||
beforeUpload={beforeUpload}
|
||||
onDrop={(info) => { console.log(info); }}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, { useEffect,useState } from 'react';
|
||||
import { Form, Upload, Button,Row, Col, Input, DatePicker, message,Modal } from 'antd';
|
||||
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||
import moment from 'moment';
|
||||
|
||||
const ToolBar = ({ setSearchVal }) => {
|
||||
const [form] = Form.useForm();
|
||||
|
|
@ -14,15 +15,24 @@ const ToolBar = ({ setSearchVal }) => {
|
|||
value: 2
|
||||
},
|
||||
]
|
||||
const valuesChange = (e,allvalue) => {
|
||||
setSearchVal({ ...allvalue,year:moment(allvalue.year).format("YYYY") })
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const value = {teamName:1,year:moment()}
|
||||
form.setFieldsValue(value)
|
||||
setSearchVal({...value,year:moment().format("YYYY")})
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
||||
<Form form={form} className='toolbarBox' layout="inline" onValuesChange={(e) => {setSearchVal(e)}}>
|
||||
<Form form={form} className='toolbarBox' layout="inline" onValuesChange={valuesChange}>
|
||||
<Form.Item label="统计维度" name="teamName">
|
||||
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||
</Form.Item>
|
||||
<Form.Item label="选择年份" name="tm">
|
||||
<Form.Item label="选择年份" name="year">
|
||||
<DatePicker
|
||||
allowClear
|
||||
showTime
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
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 { Form, Button, Input, Row,Upload, Col, TimePicker, 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 dayjs from "dayjs"
|
||||
import { createCrudService } from '../../../components/crud/_';
|
||||
import { httpget2, httppost2 } from '../../../utils/request';
|
||||
const { RangePicker } = DatePicker
|
||||
const { Dragger } = Upload;
|
||||
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||
|
|
@ -32,22 +34,6 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
value:5
|
||||
},
|
||||
]
|
||||
const jh = [
|
||||
{
|
||||
label: "工程测量业务知识",
|
||||
value:1
|
||||
},
|
||||
{
|
||||
label: "工程管理标准化业务知识",
|
||||
value:2
|
||||
},{
|
||||
label: "消防安全知识培训",
|
||||
value:3
|
||||
},{
|
||||
label: "水雨情测报培训",
|
||||
value:4
|
||||
}
|
||||
]
|
||||
|
||||
const [details, setDetails] = useState([])
|
||||
|
||||
|
|
@ -73,10 +59,26 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
* @param {*} type
|
||||
* @returns
|
||||
*/
|
||||
const getFileInfo = (params) => {
|
||||
createCrudService(apiurl.fxzb.qsdw.zq.getFile).delGet({ teamId: params.teamId }).then(res => {
|
||||
const getFileInfo = async (params) => {
|
||||
try {
|
||||
const res = await httpget2(apiurl.pxjl.getFile + `/${params.id}`)
|
||||
if (res.code === 200) {
|
||||
let fileArr = res.data?.files.map(item => {
|
||||
if (res.data?.files1) {
|
||||
let fileArr1 = res.data?.files1.map(item => {
|
||||
return {
|
||||
name: item.fileName,
|
||||
response: {
|
||||
data: {
|
||||
filePath: item.filePath,
|
||||
fileId: item.fileId
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
setFileList1(fileArr1)
|
||||
}
|
||||
if (res.data?.files2) {
|
||||
let fileArr = res.data?.files2.map(item => {
|
||||
return {
|
||||
name: item.fileName,
|
||||
response: {
|
||||
|
|
@ -88,12 +90,12 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
}
|
||||
})
|
||||
setFileList(fileArr)
|
||||
const result = res.data?.details.map(item => ({ ...item, key: item.detailId }))
|
||||
console.log("resss",result);
|
||||
|
||||
setDetails(result)
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
}
|
||||
/**
|
||||
* @description 文件下载
|
||||
|
|
@ -101,7 +103,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
*/
|
||||
const download = (params) => {
|
||||
let downloadLink = document.createElement("a");
|
||||
downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xyt/rescue/team/file/download/${params}`;
|
||||
downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/tsg/personnelPlanLog/file/download/${params}`;
|
||||
downloadLink.download = `${params.fileName}`;
|
||||
downloadLink.style.display = "none";
|
||||
// 将链接添加到页面中
|
||||
|
|
@ -113,7 +115,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
|
||||
const download1 = (params) => {
|
||||
let downloadLink = document.createElement("a");
|
||||
downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xyt/rescue/team/file/download/${params}`;
|
||||
downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/tsg/personnelPlanLog/file/download/${params}`;
|
||||
downloadLink.download = `${params.fileName}`;
|
||||
downloadLink.style.display = "none";
|
||||
// 将链接添加到页面中
|
||||
|
|
@ -160,6 +162,8 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
})
|
||||
setFileIds1(fileIds)
|
||||
setFileList1(info.fileList)
|
||||
console.log(info.fileList);
|
||||
|
||||
}
|
||||
/**
|
||||
* @description pdf文件预览
|
||||
|
|
@ -174,20 +178,19 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
setIframeSrc1(params)
|
||||
setPdfViewOPen1(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")
|
||||
const onfinish = (values) => {
|
||||
values.stm = values.tm ? values.tm[0].format("HH:mm:ss") : ''
|
||||
values.etm = values.tm ? values.tm[1].format("HH:mm:ss") : ''
|
||||
values.regDate = moment(values.regDate).format('YYYY-MM-DD')
|
||||
const files1 = fileList1.map(item => ({fileId:item.response?.data?.fileId }));
|
||||
const files = fileList.map(item => ({ fileId: item.response?.data?.fileId }));
|
||||
values.files1 = files1;
|
||||
values.files2 = files;
|
||||
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)
|
||||
onEdit(apiurl.pxjl.edit,{...record,...values});
|
||||
}
|
||||
if (mode === 'save') {
|
||||
values.fileIds = fileIds
|
||||
onSave(apiurl.fxzb.qsdw.zq.save,values)
|
||||
onSave(apiurl.pxjl.save,values)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -206,25 +209,52 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
let filterFile = fileList1.filter(item => item.response?.data?.fileId !== fileId);
|
||||
setFileList1(filterFile)
|
||||
}
|
||||
useEffect(()=>{
|
||||
if (record.teamId ) {
|
||||
getFileInfo(record)
|
||||
const [jh, setJh] = useState([])
|
||||
const getJhList = async () => {
|
||||
try {
|
||||
const res = await httppost2(apiurl.pxjl.list)
|
||||
if (res.code == 200) {
|
||||
setJh(res.data.map(item => ({label:item.name,value:item.id})))
|
||||
}
|
||||
}, [record])
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const imgbeforeUpload = (file) => {
|
||||
const isJpgOrPng =
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/jpg' ||
|
||||
file.type === 'image/png';
|
||||
|
||||
if (!isJpgOrPng) {
|
||||
message.error('请上传图片格式的文件！');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 5;
|
||||
if (!isLt2M) {
|
||||
message.error('图片大小需小于5M!');
|
||||
}
|
||||
return isJpgOrPng && isLt2M ? true : Upload.LIST_IGNORE;
|
||||
};
|
||||
useEffect(()=>{
|
||||
if (mode !== "save") {
|
||||
let dataSo = [
|
||||
record.validStartDate? moment(record.validStartDate):'',
|
||||
record.validEndDate? moment(record.validEndDate): ''
|
||||
]
|
||||
|
||||
form.setFieldsValue({...record,dateRangeSo:dataSo})
|
||||
|
||||
getFileInfo(record)
|
||||
const momentArr = (record?.stm && record.etm) ? [dayjs("2024-05-06" + record.stm), dayjs("2024-05-06" +record.etm)] : ''
|
||||
form.setFieldValue("tm",momentArr)
|
||||
}
|
||||
|
||||
}, [record,mode])
|
||||
|
||||
useEffect(() => {
|
||||
const userName = localStorage.getItem('userName')
|
||||
form.setFieldValue("regDate", moment())
|
||||
form.setFieldValue("applicant",userName)
|
||||
getJhList()
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div style={{height:"65vh",overflowY:"auto"}}>
|
||||
<div className='basic-info'>基本信息</div>
|
||||
|
|
@ -232,13 +262,14 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Form
|
||||
form={form}
|
||||
{...formItemLayout}
|
||||
// initialValues={record}
|
||||
initialValues={record}
|
||||
onFinish={onfinish}
|
||||
>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训计划"
|
||||
name="teamName"
|
||||
name="planId"
|
||||
>
|
||||
<NormalSelect disabled={mode==='view'} style={{width:'100%'}} allowClear options={jh}/>
|
||||
</Form.Item>
|
||||
|
|
@ -246,7 +277,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训分类"
|
||||
name="teamName"
|
||||
name="type"
|
||||
>
|
||||
<NormalSelect disabled={mode === 'view'} style={{ width: '100%' }} allowClear options={types} />
|
||||
</Form.Item>
|
||||
|
|
@ -256,7 +287,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训日期"
|
||||
name="startDate"
|
||||
name="planDate"
|
||||
rules={[{ required: true }]}
|
||||
getValueFromEvent={(e,dateString) => dateString}
|
||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||
|
|
@ -267,7 +298,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="标题名称"
|
||||
name="teamName"
|
||||
name="name"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input disabled={mode === 'view'} style={{width:'100%'}} allowClear />
|
||||
|
|
@ -279,15 +310,22 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训时段"
|
||||
name="address"
|
||||
name="tm"
|
||||
>
|
||||
<Input disabled={mode === 'view'} style={{width:'100%'}} allowClear />
|
||||
<TimePicker.RangePicker
|
||||
disabled={mode === 'view'}
|
||||
style={{ width: '100%' }}
|
||||
allowClear
|
||||
format={"HH:mm:ss"}
|
||||
// value={timeValue}
|
||||
// onChange={(e) => setTimeValue(e)}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训时长(小时)"
|
||||
name="address"
|
||||
name="hour"
|
||||
>
|
||||
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
|
|
@ -297,7 +335,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="培训地点"
|
||||
name="remark"
|
||||
name="addr"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
|
|
@ -307,7 +345,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Form.Item
|
||||
label="主办单位"
|
||||
rules={[{ required: true }]}
|
||||
name="remark"
|
||||
name="unit"
|
||||
>
|
||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
|
|
@ -317,7 +355,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="培训内容"
|
||||
name="remark"
|
||||
name="content"
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
rules={[{ required: true }]}
|
||||
|
|
@ -327,31 +365,21 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="培训范围"
|
||||
name="remark"
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="参训人员"
|
||||
name="remark"
|
||||
name="trainees"
|
||||
>
|
||||
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="参加人数"
|
||||
name="address"
|
||||
label="参训人数"
|
||||
name="numPeople"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
|
|
@ -363,15 +391,15 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Form.Item
|
||||
label="填报人"
|
||||
rules={[{ required: true }]}
|
||||
name="address"
|
||||
name="applicant"
|
||||
>
|
||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||
<Input disabled={true} style={{width:'100%'}} allowClear />
|
||||
</Form.Item>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="登记日期"
|
||||
name="startDate"
|
||||
name="regDate"
|
||||
rules={[{ required: true }]}
|
||||
getValueFromEvent={(e,dateString) => dateString}
|
||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||
|
|
@ -384,24 +412,25 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="培训签到表"
|
||||
name="fieldId"
|
||||
name="fieldId1"
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
>
|
||||
{mode !== "view" &&
|
||||
<Dragger
|
||||
name='file'
|
||||
// multiple
|
||||
action="/gunshiApp/xyt/rescue/team/file/upload/singleSimple"
|
||||
beforeUpload={imgbeforeUpload}
|
||||
action="/gunshiApp/tsg/personnelPlanLog/file/upload/singleSimple"
|
||||
onChange={fileChange1}
|
||||
onDrop={(info) => { console.log(info.dataTransfer.files); }}
|
||||
fileList={fileList1}
|
||||
disabled={loading1}
|
||||
maxCount={1}
|
||||
// onSuccess={handleSuccess}
|
||||
>
|
||||
<p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
|
||||
<p className="ant-upload-hint">
|
||||
支持扩展名：.rar .zip .doc .docx .pdf .jpg .png .ppt
|
||||
支持扩展名：.jpg .png
|
||||
</p>
|
||||
</Dragger>
|
||||
}
|
||||
|
|
@ -450,7 +479,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
}
|
||||
<span>{file.name}</span>
|
||||
</div>
|
||||
<div className={mode == "view" ? 'delete-icon disable-icon' : 'delete-icon'} onClick={() => deleteFile(file.response?.data?.fileId)}>
|
||||
<div className={mode == "view" ? 'delete-icon disable-icon' : 'delete-icon'} onClick={() => deleteFile1(file.response?.data?.fileId)}>
|
||||
<DeleteOutlined />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -477,7 +506,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
<Dragger
|
||||
name='file'
|
||||
// multiple
|
||||
action="/gunshiApp/xyt/rescue/team/file/upload/singleSimple"
|
||||
action="/gunshiApp/tsg/personnelPlanLog/file/upload/singleSimple"
|
||||
onChange={fileChange}
|
||||
onDrop={(info) => { console.log(info.dataTransfer.files); }}
|
||||
fileList={fileList}
|
||||
|
|
@ -579,7 +608,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
border: 0,
|
||||
marginTop: 20,
|
||||
}}
|
||||
src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/rescue/goods/file/download/${iframeSrc}`)}`}
|
||||
src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/tsg/personnelPlanLog/file/download/${iframeSrc}`)}`}
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
|
|
@ -600,7 +629,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
|||
border: 0,
|
||||
marginTop: 20,
|
||||
}}
|
||||
src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/rescue/goods/file/download/${iframeSrc1}`)}`}
|
||||
src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/tsg/personnelPlanLog/file/download/${iframeSrc1}`)}`}
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,8 @@ import usePageTable from '../../../components/crud/usePageTable2';
|
|||
import { createCrudService } from '../../../components/crud/_';
|
||||
import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
|
||||
import "./index.less"
|
||||
import { httpget2 } from '../../../utils/request';
|
||||
import moment from 'moment';
|
||||
|
||||
const Page = () => {
|
||||
const role = useSelector(state => state.auth.role);
|
||||
|
|
@ -23,18 +25,18 @@ const Page = () => {
|
|||
const [searchChartVal, setSearchChartVal] = useState(false)
|
||||
const columns = [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
||||
{ title: '培训日期', key: 'teamName', dataIndex: 'teamName', width: 200, ellipsis: true },
|
||||
{ title: '培训日期', key: 'planDate', dataIndex: 'planDate', width: 200, ellipsis: true },
|
||||
{
|
||||
title: '标题', key: 'personCount', dataIndex: 'personCount', width: 200,ellipsis: true
|
||||
title: '标题', key: 'name', dataIndex: 'name', width: 200,ellipsis: true
|
||||
},
|
||||
{ title: '主办单位', key: 'address', dataIndex: 'address', width: 150 },
|
||||
{ title: '主办单位', key: 'unit', dataIndex: 'unit', width: 150 },
|
||||
{
|
||||
title: '培训内容', key: 'managementUnit', dataIndex: 'managementUnit', width: 200,ellipsis: true
|
||||
title: '培训内容', key: 'content', dataIndex: 'content', width: 200,ellipsis: true
|
||||
},
|
||||
{ title: '参训人员', key: 'teamName', dataIndex: 'teamName', width: 200, ellipsis: true },
|
||||
{ title: '培训地点', key: 'teamLeader', dataIndex: 'teamLeader', width: 150, ellipsis: true },
|
||||
{ title: '填报人', key: 'phone', dataIndex: 'phone', width: 150, ellipsis: true },
|
||||
{ title: '登记日期', key: 'teamLeader', dataIndex: 'teamLeader', width: 150, ellipsis: true },
|
||||
{ title: '参训人员', key: 'trainees', dataIndex: 'trainees', width: 200, ellipsis: true },
|
||||
{ title: '培训地点', key: 'addr', dataIndex: 'addr', width: 150, ellipsis: true },
|
||||
{ title: '填报人', key: 'applicant', dataIndex: 'applicant', width: 150, ellipsis: true },
|
||||
{ title: '登记日期', key: 'regDate', dataIndex: 'regDate', width: 150, ellipsis: true },
|
||||
|
||||
{
|
||||
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
|
||||
|
|
@ -48,9 +50,7 @@ const Page = () => {
|
|||
];
|
||||
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
||||
|
||||
const pxOptions = useMemo(() => {
|
||||
return options()
|
||||
}, [])
|
||||
|
||||
const command = (type) => (params) => {
|
||||
if (type === 'save') {
|
||||
refModal.current.showSave();
|
||||
|
|
@ -59,12 +59,12 @@ const Page = () => {
|
|||
} else if (type === 'view') {
|
||||
refModal.current.showView(params);
|
||||
} else if (type === 'del') {
|
||||
refModal.current.onDeleteGet(apiurl.fxzb.qsdw.zq.delete + `/${params.teamId}`);
|
||||
refModal.current.onDeleteGet(apiurl.pxjl.delete + `/${params.id}`);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.fxzb.qsdw.zq.page).find_noCode);
|
||||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.pxjl.page).find_noCode);
|
||||
|
||||
/**
|
||||
* @description 处理成功的回调
|
||||
|
|
@ -73,7 +73,29 @@ const Page = () => {
|
|||
refresh()
|
||||
}
|
||||
|
||||
|
||||
// 获取统计数据
|
||||
const [staData, setStaData] = useState()
|
||||
const pxOptions = useMemo(() => {
|
||||
if (staData) {
|
||||
return options(staData)
|
||||
} else {
|
||||
return options({})
|
||||
}
|
||||
}, [staData])
|
||||
const getStaData = async (params) => {
|
||||
try {
|
||||
const res = await httpget2(apiurl.pxjl.sta + `/${params.year}`)
|
||||
if (res.code == 200) {
|
||||
if (params.teamName == 1) {
|
||||
setStaData({...res.data,list:res.data.list1})
|
||||
} else {
|
||||
setStaData({...res.data,list:res.data.list2})
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
const params = {
|
||||
|
|
@ -84,6 +106,13 @@ const Page = () => {
|
|||
search(params)
|
||||
}, [searchVal])
|
||||
|
||||
useEffect(() => {
|
||||
if (searchChartVal) {
|
||||
getStaData(searchChartVal)
|
||||
}
|
||||
|
||||
}, [searchChartVal])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -96,8 +125,8 @@ const Page = () => {
|
|||
<div className='children-itm'>
|
||||
<span>本年培训期数</span>
|
||||
<span>计划/实际</span>
|
||||
<span><span style={{fontSize:22,fontWeight:"bold"}}>26</span> 期/
|
||||
<span style={{fontSize:22,fontWeight:"bold"}}>26</span> 期</span>
|
||||
<span><span style={{ fontSize: 22, fontWeight: "bold" }}>{ staData?.numberOfPeriods2 ?? 1}</span> 期/
|
||||
<span style={{fontSize:22,fontWeight:"bold"}}>{ staData?.numberOfPeriods1 ?? 1}</span> 期</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -106,15 +135,15 @@ const Page = () => {
|
|||
<div className='children-itm'>
|
||||
<span>本年培训期数</span>
|
||||
<span>计划/实际</span>
|
||||
<span><span style={{fontSize:22,fontWeight:"bold"}}>26</span> 人次/
|
||||
<span style={{fontSize:22,fontWeight:"bold"}}>26</span> 人次</span>
|
||||
<span><span style={{fontSize:22,fontWeight:"bold"}}>{ staData?.personNum2 ?? 1}</span> 人次/
|
||||
<span style={{fontSize:22,fontWeight:"bold"}}>{ staData?.personNum1 ?? 1}</span> 人次</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='pxrecord-title-right'>
|
||||
<div className='chart-tool'>
|
||||
<ChartToolBar
|
||||
setSearchVal={setSearchVal}
|
||||
setSearchVal={setSearchChartVal}
|
||||
/>
|
||||
</div>
|
||||
<div className='chart-box'>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,25 @@
|
|||
export default function options() {
|
||||
var dataGDP = [900, 500, 1632.33, 1100, 400]
|
||||
var dataGrowth = [2, 2.1, 3, 2.5, 2.1]
|
||||
var xAxisData = ['2019年', '2020年', '2021年', '2022年', '2023年']
|
||||
export default function options(data={}) {
|
||||
const xAxisData = data?.list?.map(item => item.month + "月")
|
||||
const maxCount = data?.list ? Math.ceil(Math.max(...data?.list?.map(obj => [obj.num1,obj.num2]).flat())) : 0
|
||||
const minCount = data?.list ? Math.floor(Math.min(...data?.list?.map(obj => [obj.num1, obj.num2]).flat())) : 100
|
||||
|
||||
const maxRate = data?.list ? Math.ceil(Math.max(...data?.list?.map(obj => obj.rate))) : 0
|
||||
const minRate = data?.list ? Math.floor(Math.min(...data?.list?.map(obj => obj.rate))) : 100
|
||||
return {
|
||||
animation: true,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params) {
|
||||
var tooltipText = params[0].name + '<br/>';
|
||||
params.forEach(function (item) {
|
||||
if (item.seriesName === '完成率') {
|
||||
tooltipText += item.marker + ' ' + item.seriesName + ': ' + item.value.toFixed(2) + '%<br/>';
|
||||
} else {
|
||||
tooltipText += item.marker + ' ' + item.seriesName + ': ' + item.value + '<br/>';
|
||||
}
|
||||
});
|
||||
return tooltipText;
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '15%',
|
||||
|
|
@ -32,13 +46,15 @@ export default function options() {
|
|||
axisLabel: {
|
||||
show: true,
|
||||
margin: 14,
|
||||
|
||||
// formatter: '{value}月'
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
offset: 10,
|
||||
min: minCount,
|
||||
max: maxCount,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
|
|
@ -55,6 +71,9 @@ export default function options() {
|
|||
{
|
||||
type: 'value',
|
||||
name: '(%)',
|
||||
|
||||
min: minRate,
|
||||
max: maxRate,
|
||||
offset: 10,
|
||||
nameTextStyle: {
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
|
|
@ -71,7 +90,6 @@ export default function options() {
|
|||
fontSize: 18,
|
||||
formatter: '{value}%'
|
||||
}
|
||||
|
||||
}
|
||||
],
|
||||
series: [
|
||||
|
|
@ -79,7 +97,7 @@ export default function options() {
|
|||
name: '计划期数',
|
||||
type: 'bar',
|
||||
barWidth: 25,
|
||||
data: dataGDP,
|
||||
data: data?.list?.map(item =>item.num2),
|
||||
itemStyle:{
|
||||
color:"#6295fa"
|
||||
}
|
||||
|
|
@ -88,7 +106,7 @@ export default function options() {
|
|||
name: '实际期数',
|
||||
type: 'bar',
|
||||
barWidth: 25,
|
||||
data: dataGDP,
|
||||
data: data?.list?.map(item =>item.num1),
|
||||
itemStyle:{
|
||||
color:"#62daab"
|
||||
}
|
||||
|
|
@ -110,7 +128,7 @@ export default function options() {
|
|||
borderColor: '#5d7092',
|
||||
borderWidth: 2
|
||||
},
|
||||
data: dataGrowth,
|
||||
data: data?.list?.map(item => item.rate),
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,12 +36,12 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFil
|
|||
let dateSo;
|
||||
if (values.tm) {
|
||||
dateSo = {
|
||||
start: moment(values.tm[0]).format('YYYY'),
|
||||
end: moment(values.tm[1]).format('YYYY')
|
||||
stm: moment(values.tm[0]).format('YYYY'),
|
||||
etm: moment(values.tm[1]).format('YYYY')
|
||||
}
|
||||
}
|
||||
delete values.tm
|
||||
setSearchVal({...values, dateSo});
|
||||
setSearchVal({...values, ...dateSo});
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -57,13 +57,13 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFil
|
|||
format={"YYYY-MM-DD"}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item label="参训人员" name="teamName">
|
||||
<Form.Item label="参训人员" name="trainees">
|
||||
<Input allowClear style={{width:'150px'}}/>
|
||||
</Form.Item>
|
||||
<Form.Item label="主办单位" name="teamName">
|
||||
<Form.Item label="主办单位" name="unit">
|
||||
<Input allowClear style={{width:'150px'}}/>
|
||||
</Form.Item>
|
||||
<Form.Item label="培训分类" name="teamName">
|
||||
<Form.Item label="培训分类" name="type">
|
||||
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||
</Form.Item>
|
||||
{searchBtn ? <Form.Item>
|
||||
|
|
|
|||
|
|
@ -27,13 +27,12 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
|
|||
},
|
||||
]
|
||||
const onFinish = (values) => {
|
||||
|
||||
if (mode === 'edit') {
|
||||
values.id = record.id
|
||||
onEdit(apiurl.fxzb.sxfd.fxtj.edit, values)
|
||||
onEdit(apiurl.zrrgl.edit, values)
|
||||
}
|
||||
if (mode === 'save') {
|
||||
onSave(apiurl.fxzb.sxfd.fxtj.save, values)
|
||||
onSave(apiurl.zrrgl.save, values)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -45,7 +44,7 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="责任类型"
|
||||
name="title"
|
||||
name="type"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<NormalSelect allowClear style={{ width: '100%' }} options={types} />
|
||||
|
|
@ -54,7 +53,7 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="姓名"
|
||||
name="period"
|
||||
name="name"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
||||
|
|
@ -65,7 +64,7 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="单位"
|
||||
name="org"
|
||||
name="unit"
|
||||
>
|
||||
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
||||
</Form.Item>
|
||||
|
|
@ -73,7 +72,7 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="职务"
|
||||
name="tmPred"
|
||||
name="duty"
|
||||
>
|
||||
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
||||
</Form.Item>
|
||||
|
|
@ -83,7 +82,7 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
|
|||
<Col span={12}>
|
||||
<Form.Item
|
||||
label="联系方式"
|
||||
name="tmPred"
|
||||
name="contactInfo"
|
||||
>
|
||||
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
||||
</Form.Item>
|
||||
|
|
@ -92,8 +91,8 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
|
|||
<Row>
|
||||
<Col span={24}>
|
||||
<Form.Item
|
||||
label="接收时间"
|
||||
name="tmRecv"
|
||||
label="主要职责"
|
||||
name="dutyBound"
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 19 }}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,14 +24,14 @@ const Page = () => {
|
|||
const columns = [
|
||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
|
||||
{
|
||||
title: '责任类型', key: 'title', dataIndex: 'title', width: 200,
|
||||
title: '责任类型', key: 'type', dataIndex: 'type', width: 200,
|
||||
render: (value) => <span>{types[value]}</span>
|
||||
},
|
||||
{ title: '姓名', key: 'period', dataIndex: 'period', width: 140 },
|
||||
{ title: '单位', key: 'org', dataIndex: 'org', width: 200},
|
||||
{ title: '职务', key: 'tmPred', dataIndex: 'tmPred', width: 150, },
|
||||
{ title: '联系方式', key: 'tmRecv', dataIndex: 'tmRecv', width: 150, },
|
||||
{ title: '主要职责', key: 'tmRecv', dataIndex: 'tmRecv', width: 250,ellipsis: true},
|
||||
{ title: '姓名', key: 'name', dataIndex: 'name', width: 140 },
|
||||
{ title: '单位', key: 'unit', dataIndex: 'unit', width: 200},
|
||||
{ title: '职务', key: 'duty', dataIndex: 'duty', width: 150, },
|
||||
{ title: '联系方式', key: 'contactInfo', dataIndex: 'contactInfo', width: 150, },
|
||||
{ title: '主要职责', key: 'dutyBound', dataIndex: 'dutyBound', width: 250,ellipsis: true},
|
||||
{
|
||||
title: '操作', key: 'operation', width: 150, fixed: 'right',align: 'center',
|
||||
render: (value, row, index) => (<CrudOpRender_text edit={true} del={true} command={(cmd) => () => command(cmd)(row)} />)
|
||||
|
|
@ -48,19 +48,17 @@ const Page = () => {
|
|||
} else if (type === 'view') {
|
||||
refModal.current.showView(params);
|
||||
} else if (type === 'del') {
|
||||
refModal.current.onDeleteGet(apiurl.fxzb.sxfd.fxtj.del + params.id);
|
||||
refModal.current.onDeleteGet(apiurl.zrrgl.delete + `/${params.id}`);
|
||||
}
|
||||
}
|
||||
|
||||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.hsyb.skhs.page).find_noCode);
|
||||
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.zrrgl.page).find_noCode);
|
||||
|
||||
useEffect(() => {
|
||||
if (searchVal) {
|
||||
const params = {
|
||||
search: {
|
||||
title: searchVal.title || undefined,
|
||||
dateTimeRangeSo: searchVal.dateTimeRangeSo || undefined,
|
||||
tp:2
|
||||
...searchVal
|
||||
}
|
||||
};
|
||||
console.log(searchVal);
|
||||
|
|
@ -85,7 +83,7 @@ const Page = () => {
|
|||
ref={refModal}
|
||||
title=""
|
||||
component={ModalForm}
|
||||
// onCrudSuccess={() => { refresh({ addvcd: localStorage.getItem('ADCD6') }) }}
|
||||
onCrudSuccess={refresh}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -48,13 +48,13 @@ const ToolBar = ({ setSearchVal, onSave }) => {
|
|||
<>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
||||
<Form.Item label="责任类型" name="title">
|
||||
<Form.Item label="责任类型" name="type">
|
||||
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||
</Form.Item>
|
||||
<Form.Item label="姓名" name="title">
|
||||
<Form.Item label="姓名" name="name">
|
||||
<Input allowClear style={{ width: '150px' }} />
|
||||
</Form.Item>
|
||||
<Form.Item label="联系方式" name="title">
|
||||
<Form.Item label="联系方式" name="contactInfo">
|
||||
<Input allowClear style={{ width: '150px' }} />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
|
|
|
|||
Loading…
Reference in New Issue