页面搭建
xielei
commit
e47436eda8
|
|
@ -38,6 +38,7 @@
|
||||||
"gsap": "^3.11.5",
|
"gsap": "^3.11.5",
|
||||||
"http-proxy-middleware": "^2.0.6",
|
"http-proxy-middleware": "^2.0.6",
|
||||||
"js-md5": "^0.8.3",
|
"js-md5": "^0.8.3",
|
||||||
|
"konva": "^8.3.14",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"moment": "^2.29.4",
|
"moment": "^2.29.4",
|
||||||
"ol": "^7.4.0",
|
"ol": "^7.4.0",
|
||||||
|
|
@ -48,6 +49,7 @@
|
||||||
"react-audio-player": "^0.17.0",
|
"react-audio-player": "^0.17.0",
|
||||||
"react-cookies": "^0.1.1",
|
"react-cookies": "^0.1.1",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
"react-konva": "^18.2.3",
|
||||||
"react-pdf": "^7.3.3",
|
"react-pdf": "^7.3.3",
|
||||||
"react-redux": "^8.0.2",
|
"react-redux": "^8.0.2",
|
||||||
"react-rnd": "^10.4.11",
|
"react-rnd": "^10.4.11",
|
||||||
|
|
@ -6593,6 +6595,14 @@
|
||||||
"@types/react": "*"
|
"@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": {
|
"node_modules/@types/resolve": {
|
||||||
"version": "1.17.1",
|
"version": "1.17.1",
|
||||||
"resolved": "https://registry.npmmirror.com/@types/resolve/-/resolve-1.17.1.tgz",
|
"resolved": "https://registry.npmmirror.com/@types/resolve/-/resolve-1.17.1.tgz",
|
||||||
|
|
@ -13004,6 +13014,17 @@
|
||||||
"node": ">=8"
|
"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": {
|
"node_modules/jake": {
|
||||||
"version": "10.8.5",
|
"version": "10.8.5",
|
||||||
"resolved": "https://registry.npmmirror.com/jake/-/jake-10.8.5.tgz",
|
"resolved": "https://registry.npmmirror.com/jake/-/jake-10.8.5.tgz",
|
||||||
|
|
@ -15065,6 +15086,25 @@
|
||||||
"node": ">= 8"
|
"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": {
|
"node_modules/l7-tiny-sdf": {
|
||||||
"version": "0.0.4",
|
"version": "0.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/l7-tiny-sdf/-/l7-tiny-sdf-0.0.4.tgz",
|
"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",
|
"resolved": "https://registry.npmmirror.com/react-is/-/react-is-16.13.1.tgz",
|
||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
"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": {
|
"node_modules/react-lifecycles-compat": {
|
||||||
"version": "3.0.4",
|
"version": "3.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||||
|
|
@ -19603,9 +19688,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/scheduler": {
|
"node_modules/scheduler": {
|
||||||
"version": "0.23.0",
|
"version": "0.23.2",
|
||||||
"resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.23.0.tgz",
|
"resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.23.2.tgz",
|
||||||
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
|
"integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"loose-envify": "^1.1.0"
|
"loose-envify": "^1.1.0"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,10 @@
|
||||||
"react-router-dom": "^6.3.0",
|
"react-router-dom": "^6.3.0",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"redux": "^4.2.0",
|
"redux": "^4.2.0",
|
||||||
"typescript": "^4.7.4"
|
"typescript": "^4.7.4",
|
||||||
|
"konva": "^8.3.14",
|
||||||
|
"react-konva": "^18.2.3"
|
||||||
|
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "craco start",
|
"start": "craco start",
|
||||||
|
|
|
||||||
|
|
@ -45,7 +45,7 @@ const SiderMenu: React.FC<{
|
||||||
},[menuIndexes[1]])
|
},[menuIndexes[1]])
|
||||||
|
|
||||||
|
|
||||||
const onOpenChange = (keys:any) => {
|
const onOpenChange = (keys: any) => {
|
||||||
let openLength = 0
|
let openLength = 0
|
||||||
if(openKeys===undefined){
|
if(openKeys===undefined){
|
||||||
openLength = 0
|
openLength = 0
|
||||||
|
|
|
||||||
|
|
@ -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',
|
id: id(), title: '水政执法', redirect: '/mgr/sz/szzf/ajdj',
|
||||||
children: [
|
children: [
|
||||||
|
|
@ -250,13 +263,13 @@ export async function loadMenu(): Promise<MenuItem[]> {
|
||||||
id: id(), title: '四预', redirect: '/mgr/sy/fhxzfx', icon: 'fxzb',
|
id: id(), title: '四预', redirect: '/mgr/sy/fhxzfx', icon: 'fxzb',
|
||||||
children: [
|
children: [
|
||||||
{ id: id(), title: '防洪形势', path: '/mgr/sy/fhxzfx' },
|
{ 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: [
|
children: [
|
||||||
{ id: id(), title: '洪水预报计算', path: '/mgr/fxzb/hsyb/hyybjs' },
|
{ id: id(), title: '洪水预报计算', path: '/mgr/sy/hsyb/hyybjs' },
|
||||||
{ id: id(), title: '预报方案管理', path: '/mgr/fxzb/hsyb/ybfagl' },
|
{ id: id(), title: '预报方案管理', path: '/mgr/sy/hsyb/ybfagl' },
|
||||||
{ id: id(), title: '参数管理', path: '/mgr/fxzb/hsyb/csgl' },
|
{ id: id(), title: '参数管理', path: '/mgr/sy/hsyb/csgl' },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{ id: id(), title: '防汛预案', path: '/mgr/sy/fxya' },
|
{ 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/byfz/byxc' },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: id(), title: '闸门监控', path: '/mgr/sg/zmjk',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: id(), title: '维修养护', path: '/mgr/sg/wxyh',
|
id: id(), title: '维修养护', path: '/mgr/sg/wxyh',
|
||||||
},
|
},
|
||||||
|
|
@ -363,7 +379,7 @@ export async function loadMenu(): Promise<MenuItem[]> {
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: id(), title: '四全', redirect: '/mgr/sq/qfg/zcdjxx',icon: 'fxzb',
|
id: id(), title: '四全', redirect: '/mgr/sq/qfg/zcdjxx', icon: 'fxzb',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id: id(), title: '全覆盖', redirect: '/mgr/sq/qfg/zcdjxx',
|
id: id(), title: '全覆盖', redirect: '/mgr/sq/qfg/zcdjxx',
|
||||||
|
|
|
||||||
|
|
@ -8,6 +8,37 @@ const service_fxdd = '/gunshiApp/tsg'
|
||||||
const service_xyt = '/gunshiApp/tsg'//登陆先用小玉潭
|
const service_xyt = '/gunshiApp/tsg'//登陆先用小玉潭
|
||||||
const service_shzh = '/shzh'
|
const service_shzh = '/shzh'
|
||||||
const apiurl = {
|
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: {
|
fxya: {
|
||||||
page: service_fxdd + "/resPlanB/list",
|
page: service_fxdd + "/resPlanB/list",
|
||||||
update: service_fxdd + "/resPlanB/update",
|
update: service_fxdd + "/resPlanB/update",
|
||||||
|
|
@ -24,6 +55,14 @@ const apiurl = {
|
||||||
role: service_xyt + '/system/menu/list'
|
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: {
|
home: {
|
||||||
yq: service_fxdd + '/real/rain/list',//'/stStbprpB/rainfallStationDetails/rainfallList',//雨情
|
yq: service_fxdd + '/real/rain/list',//'/stStbprpB/rainfallStationDetails/rainfallList',//雨情
|
||||||
|
|
@ -820,6 +859,7 @@ const apiurl = {
|
||||||
//
|
//
|
||||||
//实时雨情
|
//实时雨情
|
||||||
ssyq: {
|
ssyq: {
|
||||||
|
maxDrp:service_fxdd + "/attResBase/maxRain",
|
||||||
status: service_fxdd + '/xfProjectRun/has/read',
|
status: service_fxdd + '/xfProjectRun/has/read',
|
||||||
basNameList: service_fxdd + '/real/rain/basNameList', //流域选择
|
basNameList: service_fxdd + '/real/rain/basNameList', //流域选择
|
||||||
adnmList: service_fxdd + '/real/rain/adnmList', //行政选择
|
adnmList: service_fxdd + '/real/rain/adnmList', //行政选择
|
||||||
|
|
|
||||||
|
|
@ -131,6 +131,17 @@ export async function StcdAndStartTimeAndEndTimeHour(params) {
|
||||||
return data;
|
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) {
|
export async function queryStPptnDetails(stcd) {
|
||||||
const { data, code, msg } = await httpget(apiurl.ssyq.queryStPptnDetails,{stcd}) || {};
|
const { data, code, msg } = await httpget(apiurl.ssyq.queryStPptnDetails,{stcd}) || {};
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ module.exports = function (app) {
|
||||||
'/gunshiApp',
|
'/gunshiApp',
|
||||||
createProxyMiddleware({
|
createProxyMiddleware({
|
||||||
target: 'http://local.gunshiiot.com:18083/',//测试
|
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/',//移动云
|
// target: 'http://36.139.207.50:18083/',//移动云
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,20 @@ export function changeObjectStringToMoment(obj: { [key: string]: any }, fields:
|
||||||
return ret;
|
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> {
|
export async function base64FromFile(file: File): Promise<string | undefined> {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
|
|
|
||||||
|
|
@ -48,6 +48,7 @@ import Xjxpz from "./rcgl/xcxj/xjxpz"
|
||||||
import Fzxc from "./rcgl/byfz/fzxc"
|
import Fzxc from "./rcgl/byfz/fzxc"
|
||||||
import Bypc from "./rcgl/byfz/bypc"
|
import Bypc from "./rcgl/byfz/bypc"
|
||||||
|
|
||||||
|
import Zmjk from "./rcgl/zmjk"
|
||||||
import Wxyh from "./rcgl/wxyh"
|
import Wxyh from "./rcgl/wxyh"
|
||||||
import Szzb from "./rcgl/szzb"
|
import Szzb from "./rcgl/szzb"
|
||||||
import Stlljc from "./rcgl/stlljc"
|
import Stlljc from "./rcgl/stlljc"
|
||||||
|
|
@ -78,6 +79,8 @@ import Gstjfx from "./gxsl/gstjfx"
|
||||||
// 视频监控
|
// 视频监控
|
||||||
import Spjk from "./video"
|
import Spjk from "./video"
|
||||||
import AiWarn from "./spjk/aiWarn"
|
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/xcxj/xjxpz', element: <Xjxpz/> },
|
||||||
{ path: 'sg/byfz/byxc', element: <Fzxc /> },
|
{ path: 'sg/byfz/byxc', element: <Fzxc /> },
|
||||||
{ path: 'sg/byfz/bypc', element: <Bypc /> },
|
{ path: 'sg/byfz/bypc', element: <Bypc /> },
|
||||||
|
{ path: 'sg/zmjk', element: <Zmjk /> },
|
||||||
{ path: 'sg/wxyh', element: <Wxyh /> },
|
{ path: 'sg/wxyh', element: <Wxyh /> },
|
||||||
{ path: 'sg/aqgl/aqjcgl', element: <Aqjcgl /> },
|
{ path: 'sg/aqgl/aqjcgl', element: <Aqjcgl /> },
|
||||||
{ path: 'sg/aqgl/fxgkqd', element: <Fxgkqd /> },
|
{ path: 'sg/aqgl/fxgkqd', element: <Fxgkqd /> },
|
||||||
|
|
@ -222,6 +226,7 @@ const AppRouters: React.FC = () => {
|
||||||
// 视频监控
|
// 视频监控
|
||||||
{ path: 'sq/qth/spjk', element: <Spjk /> },
|
{ path: 'sq/qth/spjk', element: <Spjk /> },
|
||||||
{ path: 'sg/gjgl/aigj', element: <AiWarn /> },
|
{ path: 'sg/gjgl/aigj', element: <AiWarn /> },
|
||||||
|
{ path: 'sg/gjgl/gbyj', element: <Gbyj /> },
|
||||||
|
|
||||||
// { path: 'fxzb/zbb', element: <Zbb /> },
|
// { path: 'fxzb/zbb', element: <Zbb /> },
|
||||||
// { path: 'fxzb/txl', element: <Txl /> },
|
// { 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 ShenYa from './ShenYa/index.js';
|
||||||
import ShenLiu from './ShenLiu/index.js';
|
import ShenLiu from './ShenLiu/index.js';
|
||||||
import WeiYi from './WeiYi/index.js';
|
import WeiYi from './WeiYi/index.js';
|
||||||
|
import XunJian from './XunJian.js'
|
||||||
|
import DaiChuLi from './DaiChuLi.js'
|
||||||
|
|
||||||
|
|
||||||
import YinShuiGongCheng from './YinShuiGongCheng';//这个先不搞
|
import YinShuiGongCheng from './YinShuiGongCheng';//这个先不搞
|
||||||
|
|
@ -201,10 +203,15 @@ function FeaturePops({ mapobj }) {
|
||||||
<WeiYi id={id} data={data} dispatch={dispatch} record={data}/>
|
<WeiYi id={id} data={data} dispatch={dispatch} record={data}/>
|
||||||
</Modal>
|
</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{
|
else{
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ import clsx from "clsx";
|
||||||
import './index.less'
|
import './index.less'
|
||||||
import TableData from './TableData'
|
import TableData from './TableData'
|
||||||
import drpOption from './drpOption';
|
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;
|
const {RangePicker} = DatePicker;
|
||||||
|
|
||||||
|
|
@ -22,7 +22,7 @@ function DrpSearch({record}) {
|
||||||
const [echartData, setEchartData] = useState({});
|
const [echartData, setEchartData] = useState({});
|
||||||
const [current, setCurrent] = useState(0);
|
const [current, setCurrent] = useState(0);
|
||||||
const [detail, setDetail] = useState({});
|
const [detail, setDetail] = useState({});
|
||||||
|
const [maxDrp, setMaxDrp] = useState({})
|
||||||
|
|
||||||
const option = useMemo(() => {
|
const option = useMemo(() => {
|
||||||
return drpOption({echartData});
|
return drpOption({echartData});
|
||||||
|
|
@ -45,9 +45,11 @@ function DrpSearch({record}) {
|
||||||
console.log("params",params);
|
console.log("params",params);
|
||||||
if(current==0){
|
if(current==0){
|
||||||
setData(await StcdAndStartTimeAndEndTimeHour(params));
|
setData(await StcdAndStartTimeAndEndTimeHour(params));
|
||||||
|
setMaxDrp(await maxDrpUrl(params));
|
||||||
setEchartData(await queryStStbprpPerHourChart(params));
|
setEchartData(await queryStStbprpPerHourChart(params));
|
||||||
}else{
|
}else{
|
||||||
setData(await StcdAndStartTimeAndEndTime(params));
|
setData(await StcdAndStartTimeAndEndTime(params));
|
||||||
|
setMaxDrp(await maxDrpUrl(params));
|
||||||
setEchartData(await queryStStbprpPerDayChart(params));
|
setEchartData(await queryStStbprpPerDayChart(params));
|
||||||
}
|
}
|
||||||
setDetail(await queryStPptnDetails(record?.stcd))
|
setDetail(await queryStPptnDetails(record?.stcd))
|
||||||
|
|
@ -130,35 +132,35 @@ function DrpSearch({record}) {
|
||||||
<div className="footer" style={record?.height?{fontSize:15}:{}}>
|
<div className="footer" style={record?.height?{fontSize:15}:{}}>
|
||||||
<div className="footer-row">
|
<div className="footer-row">
|
||||||
<div className="footer-item">
|
<div className="footer-item">
|
||||||
<div className="footer-name">近1h雨量(mm)</div>
|
<div className="footer-name">最大1h雨量(mm)</div>
|
||||||
<div className="footer-num">{detail?.h1||0}</div>
|
<div className="footer-num">{maxDrp?.h1||0}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="footer-item">
|
<div className="footer-item">
|
||||||
<div className="footer-name">近3h雨量(mm)</div>
|
<div className="footer-name">最大3h雨量(mm)</div>
|
||||||
<div className="footer-num">{detail?.h3||0}</div>
|
<div className="footer-num">{maxDrp?.h3||0}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="footer-item">
|
<div className="footer-item">
|
||||||
<div className="footer-name">近6h雨量(mm)</div>
|
<div className="footer-name">最大6h雨量(mm)</div>
|
||||||
<div className="footer-num">{detail?.h6||0}</div>
|
<div className="footer-num">{maxDrp?.h6||0}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="footer-item">
|
<div className="footer-item">
|
||||||
<div className="footer-name">近12h雨量(mm)</div>
|
<div className="footer-name">最大12h雨量(mm)</div>
|
||||||
<div className="footer-num">{detail?.h12||0}</div>
|
<div className="footer-num">{maxDrp?.h12||0}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="footer-item">
|
{/* <div className="footer-item">
|
||||||
<div className="footer-name">近24h雨量(mm)</div>
|
<div className="footer-name">近24h雨量(mm)</div>
|
||||||
<div className="footer-num">{detail?.h24||0}</div>
|
<div className="footer-num">{detail?.h24||0}</div>
|
||||||
</div>
|
</div> */}
|
||||||
<div className="footer-item">
|
<div className="footer-item">
|
||||||
<div className="footer-name">本年降雨天数</div>
|
<div className="footer-name">本年降雨天数</div>
|
||||||
<div className="footer-num"><span style={{color:"#E69224"}}>{detail?.yearDrpDay}</span>/{days}</div>
|
<div className="footer-num"><span style={{color:"#E69224"}}>{detail?.yearDrpDay}</span>/{days}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="footer-row">
|
<div className="footer-row">
|
||||||
<div className="footer-item">
|
{/* <div className="footer-item">
|
||||||
<div className="footer-name">近48h雨量(mm)</div>
|
<div className="footer-name">近48h雨量(mm)</div>
|
||||||
<div className="footer-num">{detail?.h48||0}</div>
|
<div className="footer-num">{detail?.h48||0}</div>
|
||||||
</div>
|
</div> */}
|
||||||
<div className="footer-item">
|
<div className="footer-item">
|
||||||
<div className="footer-name">今日雨量(mm)</div>
|
<div className="footer-name">今日雨量(mm)</div>
|
||||||
<div className="footer-num">{detail.today}</div>
|
<div className="footer-num">{detail.today}</div>
|
||||||
|
|
|
||||||
|
|
@ -33,7 +33,7 @@ const Page = ({data}) => {
|
||||||
{
|
{
|
||||||
tableData.length>0?
|
tableData.length>0?
|
||||||
<ReactEcharts option={option} style={{width: "100%", height: '300px'}}/>
|
<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 JianCe from './item_jiance'
|
||||||
import ShuiZhi from './item_shuizhi'
|
import ShuiZhi from './item_shuizhi'
|
||||||
import ShiPinDian from './item_shipindian'
|
import ShiPinDian from './item_shipindian'
|
||||||
|
import XunChaXunJian from './item_xunchaxunjian'
|
||||||
|
|
||||||
import GCShuiKu from './item_gongchengshuiku'
|
import GCShuiKu from './item_gongchengshuiku'
|
||||||
import DaBa from './item_daba'
|
import DaBa from './item_daba'
|
||||||
|
|
@ -206,6 +207,7 @@ const HomePage = ({showPanels}) => {
|
||||||
{ checkedObj.label === '水质' ? <ShuiZhi/>:null }
|
{ checkedObj.label === '水质' ? <ShuiZhi/>:null }
|
||||||
{ checkedObj.label === '视频点' ? <ShiPinDian/>:null }
|
{ checkedObj.label === '视频点' ? <ShiPinDian/>:null }
|
||||||
|
|
||||||
|
{ checkedObj.label === '巡查巡检' ? <XunChaXunJian/>:null }
|
||||||
|
|
||||||
{ checkedObj.label === '水库' ? <GCShuiKu/>:null }
|
{ checkedObj.label === '水库' ? <GCShuiKu/>:null }
|
||||||
{ checkedObj.label === '大坝' ? <DaBa/>: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{
|
.home_gongshui{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 5px;
|
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));
|
setSwTableData(await zqrl(stcd));
|
||||||
};
|
};
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getData({args: "",sources: ["SH", "SW"],})
|
getData({args: "",sources: ["SH", "SW"]})
|
||||||
}, [])
|
}, [])
|
||||||
return (
|
return (
|
||||||
<div className='lf' style={{ height: 'calc(100vh - 168px)', width: "100%" }}>
|
<div className='lf' style={{ height: 'calc(100vh - 168px)', width: "100%" }}>
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,8 @@ import NormalSelect from '../../../components/Form/NormalSelect';
|
||||||
import "./index.less"
|
import "./index.less"
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { createCrudService } from '../../../components/crud/_';
|
import { createCrudService } from '../../../components/crud/_';
|
||||||
|
import { httpget2, httppost2 } from '../../../utils/request';
|
||||||
|
|
||||||
const { RangePicker } = DatePicker
|
const { RangePicker } = DatePicker
|
||||||
const { Dragger } = Upload;
|
const { Dragger } = Upload;
|
||||||
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
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)
|
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])
|
}, [record])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (mode !== "save") {
|
getJhList()
|
||||||
let dataSo = [
|
}, [])
|
||||||
record.validStartDate? moment(record.validStartDate):'',
|
|
||||||
record.validEndDate? moment(record.validEndDate): ''
|
|
||||||
]
|
// useEffect(() => {
|
||||||
|
// if (mode !== "save") {
|
||||||
|
// let dataSo = [
|
||||||
|
// record.validStartDate? moment(record.validStartDate):'',
|
||||||
|
// record.validEndDate? moment(record.validEndDate): ''
|
||||||
|
// ]
|
||||||
|
|
||||||
form.setFieldsValue({...record,dateRangeSo:dataSo})
|
// form.setFieldsValue({...record,dateRangeSo:dataSo})
|
||||||
|
|
||||||
}
|
// }
|
||||||
|
|
||||||
}, [record,mode])
|
// }, [record,mode])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{height:"65vh",overflowY:"auto"}}>
|
<div style={{height:"65vh",overflowY:"auto"}}>
|
||||||
|
|
@ -121,21 +139,21 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Form
|
<Form
|
||||||
form={form}
|
form={form}
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
// initialValues={record}
|
initialValues={record}
|
||||||
>
|
>
|
||||||
<Row>
|
<Row>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训计划"
|
label="培训计划"
|
||||||
name="teamName"
|
name="planId"
|
||||||
>
|
>
|
||||||
<Input disabled={true} style={{width:'100%'}} allowClear />
|
<NormalSelect disabled={mode==='view'} style={{width:'100%'}} allowClear options={jh}/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训分类"
|
label="培训分类"
|
||||||
name="teamName"
|
name="type"
|
||||||
>
|
>
|
||||||
<NormalSelect disabled={true} style={{ width: '100%' }} allowClear options={types} />
|
<NormalSelect disabled={true} style={{ width: '100%' }} allowClear options={types} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
@ -145,7 +163,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训日期"
|
label="培训日期"
|
||||||
name="startDate"
|
name="planDate"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
getValueFromEvent={(e,dateString) => dateString}
|
getValueFromEvent={(e,dateString) => dateString}
|
||||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||||
|
|
@ -157,7 +175,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="标题名称"
|
label="标题名称"
|
||||||
name="teamName"
|
name="name"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
>
|
>
|
||||||
<Input disabled={true} style={{width:'100%'}} allowClear />
|
<Input disabled={true} style={{width:'100%'}} allowClear />
|
||||||
|
|
@ -167,52 +185,59 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
|
|
||||||
<Row>
|
<Row>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训时段"
|
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>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训时长(小时)"
|
label="培训时长(小时)"
|
||||||
name="address"
|
name="hour"
|
||||||
>
|
>
|
||||||
<Input disabled={true} style={{width:'100%'}} allowClear />
|
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训地点"
|
label="培训地点"
|
||||||
name="remark"
|
name="addr"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
>
|
>
|
||||||
<Input disabled={true} style={{width:'100%'}} allowClear />
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="主办单位"
|
label="主办单位"
|
||||||
name="remark"
|
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
|
name="unit"
|
||||||
>
|
>
|
||||||
<Input disabled={true} style={{width:'100%'}} allowClear />
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
<Col span={24}>
|
<Col span={24}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训内容"
|
label="培训内容"
|
||||||
name="remark"
|
name="content"
|
||||||
labelCol={{ span: 3 }}
|
labelCol={{ span: 3 }}
|
||||||
wrapperCol={{ span: 19 }}
|
wrapperCol={{ span: 19 }}
|
||||||
rules={[{ required: true }]}
|
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>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
@ -220,7 +245,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={24}>
|
<Col span={24}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训范围"
|
label="培训范围"
|
||||||
name="remark"
|
name="scope"
|
||||||
labelCol={{ span: 3 }}
|
labelCol={{ span: 3 }}
|
||||||
wrapperCol={{ span: 19 }}
|
wrapperCol={{ span: 19 }}
|
||||||
|
|
||||||
|
|
@ -231,41 +256,41 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="参训人员"
|
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>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="参加人数"
|
label="参训人数"
|
||||||
name="address"
|
name="numPeople"
|
||||||
|
rules={[{ required: true }]}
|
||||||
>
|
>
|
||||||
<Input disabled={true} style={{width:'100%'}} allowClear />
|
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
|
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="填报人"
|
label="填报人"
|
||||||
name="address"
|
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
|
name="applicant"
|
||||||
>
|
>
|
||||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
<Input disabled={true} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="登记日期"
|
label="登记日期"
|
||||||
name="startDate"
|
name="regDate"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
getValueFromEvent={(e,dateString) => dateString}
|
getValueFromEvent={(e,dateString) => dateString}
|
||||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||||
|
|
||||||
>
|
>
|
||||||
<DatePicker disabled={true} format={'YYYY-MM-DD'} style={{width:'100%'}} allowClear />
|
<DatePicker disabled={true} format={'YYYY-MM-DD'} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
|
||||||
|
|
@ -47,40 +47,14 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
const [pdfViewOPen, setPdfViewOPen] = useState(false)
|
const [pdfViewOPen, setPdfViewOPen] = useState(false)
|
||||||
|
|
||||||
const [loading, setLoading] = 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 文件下载
|
* @description 文件下载
|
||||||
* @param {String} params 文件fileId
|
* @param {String} params 文件fileId
|
||||||
*/
|
*/
|
||||||
const download = (params) => {
|
const download = (params) => {
|
||||||
let downloadLink = document.createElement("a");
|
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.download = `${params.fileName}`;
|
||||||
downloadLink.style.display = "none";
|
downloadLink.style.display = "none";
|
||||||
// 将链接添加到页面中
|
// 将链接添加到页面中
|
||||||
|
|
@ -120,20 +94,18 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const onfinish = () => {
|
const onfinish = (values) => {
|
||||||
let values = form.getFieldsValue();
|
values.regDate = moment(values.regDate).format('YYYY-MM-DD')
|
||||||
values.details = details;
|
let oldFiles = fileList.map(item => ({fileId:item.response?.data?.fileId }))
|
||||||
values.validStartDate = values.dateRangeSo&&moment(values.dateRangeSo[0]).format("YYYY-MM-DD")
|
values.files = oldFiles;
|
||||||
values.validEndDate = values.dateRangeSo&&moment(values.dateRangeSo[1]).format("YYYY-MM-DD")
|
|
||||||
if (mode === 'edit') {
|
if (mode === 'edit') {
|
||||||
let oldFiles = fileList.map(item => item.response?.data?.fileId )
|
onEdit(apiurl.pxjh.edit,{...record,...values})
|
||||||
values.fileIds = oldFiles;
|
|
||||||
values.teamId = record.teamId;
|
|
||||||
onEdit(apiurl.fxzb.qsdw.zq.edit,values)
|
|
||||||
}
|
}
|
||||||
if (mode === 'save') {
|
if (mode === 'save') {
|
||||||
values.fileIds = fileIds
|
onSave(apiurl.pxjh.save,values)
|
||||||
onSave(apiurl.fxzb.qsdw.zq.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);
|
let filterFile = fileList.filter(item => item.response?.data?.fileId !== fileId);
|
||||||
setFileList(filterFile)
|
setFileList(filterFile)
|
||||||
}
|
}
|
||||||
useEffect(()=>{
|
|
||||||
if (record.teamId ) {
|
|
||||||
getFileInfo(record)
|
|
||||||
}
|
|
||||||
}, [record])
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (mode !== "save") {
|
if (mode!== "save") {
|
||||||
let dataSo = [
|
let fileArr = record?.files.map(item => {
|
||||||
record.validStartDate? moment(record.validStartDate):'',
|
return {
|
||||||
record.validEndDate? moment(record.validEndDate): ''
|
name: item.fileName,
|
||||||
]
|
response: {
|
||||||
|
data: {
|
||||||
form.setFieldsValue({...record,dateRangeSo:dataSo})
|
filePath: item.filePath,
|
||||||
|
fileId:item.fileId
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
setFileList(fileArr)
|
||||||
}
|
}
|
||||||
|
}, [mode, record])
|
||||||
}, [record,mode])
|
|
||||||
|
useEffect(() => {
|
||||||
|
const userName = localStorage.getItem('userName')
|
||||||
|
form.setFieldValue("regDate", moment())
|
||||||
|
form.setFieldValue("applicant",userName)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{height:"65vh",overflowY:"auto"}}>
|
<div style={{height:"65vh",overflowY:"auto"}}>
|
||||||
|
|
@ -172,13 +151,14 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Form
|
<Form
|
||||||
form={form}
|
form={form}
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
// initialValues={record}
|
initialValues={record}
|
||||||
|
onFinish={onfinish}
|
||||||
>
|
>
|
||||||
<Row>
|
<Row>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训班名称"
|
label="培训班名称"
|
||||||
name="teamName"
|
name="name"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
>
|
>
|
||||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
|
@ -187,7 +167,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训班分类"
|
label="培训班分类"
|
||||||
name="teamName"
|
name="type"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
>
|
>
|
||||||
<NormalSelect disabled={mode === 'view'} style={{ width: '100%' }} allowClear options={types} />
|
<NormalSelect disabled={mode === 'view'} style={{ width: '100%' }} allowClear options={types} />
|
||||||
|
|
@ -198,7 +178,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={24}>
|
<Col span={24}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="主办单位"
|
label="主办单位"
|
||||||
name="remark"
|
name="unit"
|
||||||
labelCol={{ span: 3 }}
|
labelCol={{ span: 3 }}
|
||||||
wrapperCol={{ span: 19 }}
|
wrapperCol={{ span: 19 }}
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
|
|
@ -211,7 +191,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="开始培训日期"
|
label="开始培训日期"
|
||||||
name="startDate"
|
name="stm"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
getValueFromEvent={(e,dateString) => dateString}
|
getValueFromEvent={(e,dateString) => dateString}
|
||||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||||
|
|
@ -223,7 +203,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="结束培训日期"
|
label="结束培训日期"
|
||||||
name="startDate"
|
name="etm"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
getValueFromEvent={(e,dateString) => dateString}
|
getValueFromEvent={(e,dateString) => dateString}
|
||||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||||
|
|
@ -238,7 +218,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训天数(天)"
|
label="培训天数(天)"
|
||||||
name="address"
|
name="day"
|
||||||
>
|
>
|
||||||
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
@ -246,7 +226,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训期数(期)"
|
label="培训期数(期)"
|
||||||
name="address"
|
name="num"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
>
|
>
|
||||||
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
|
@ -257,7 +237,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={24}>
|
<Col span={24}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训地点"
|
label="培训地点"
|
||||||
name="remark"
|
name="addr"
|
||||||
labelCol={{ span: 3 }}
|
labelCol={{ span: 3 }}
|
||||||
wrapperCol={{ span: 19 }}
|
wrapperCol={{ span: 19 }}
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
|
|
@ -270,12 +250,12 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={24}>
|
<Col span={24}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训内容"
|
label="培训内容"
|
||||||
name="remark"
|
name="content"
|
||||||
labelCol={{ span: 3 }}
|
labelCol={{ span: 3 }}
|
||||||
wrapperCol={{ span: 19 }}
|
wrapperCol={{ span: 19 }}
|
||||||
rules={[{ required: true }]}
|
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>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|
@ -283,7 +263,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={24}>
|
<Col span={24}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训范围"
|
label="培训范围"
|
||||||
name="remark"
|
name="scope"
|
||||||
labelCol={{ span: 3 }}
|
labelCol={{ span: 3 }}
|
||||||
wrapperCol={{ span: 19 }}
|
wrapperCol={{ span: 19 }}
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
|
|
@ -296,7 +276,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={24}>
|
<Col span={24}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="参训人员"
|
label="参训人员"
|
||||||
name="remark"
|
name="trainees"
|
||||||
labelCol={{ span: 3 }}
|
labelCol={{ span: 3 }}
|
||||||
wrapperCol={{ span: 19 }}
|
wrapperCol={{ span: 19 }}
|
||||||
>
|
>
|
||||||
|
|
@ -308,7 +288,8 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="参训人数(人)"
|
label="参训人数(人)"
|
||||||
name="address"
|
name="numPeople"
|
||||||
|
rules={[{ required: true }]}
|
||||||
>
|
>
|
||||||
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
@ -316,7 +297,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="联系人"
|
label="联系人"
|
||||||
name="address"
|
name="contacts"
|
||||||
>
|
>
|
||||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
@ -326,7 +307,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="联系电话"
|
label="联系电话"
|
||||||
name="address"
|
name="contactNumber"
|
||||||
>
|
>
|
||||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
@ -334,7 +315,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="填报人"
|
label="填报人"
|
||||||
name="address"
|
name="applicant"
|
||||||
>
|
>
|
||||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
@ -344,7 +325,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="状态"
|
label="状态"
|
||||||
name="address"
|
name="status"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
>
|
>
|
||||||
<NormalSelect disabled={mode==='view'} style={{width:'100%'}} allowClear options={[{label:"有效",value:1},{label:"无效",value:2}]} />
|
<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}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="登记日期"
|
label="登记日期"
|
||||||
name="startDate"
|
name="regDate"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
getValueFromEvent={(e,dateString) => dateString}
|
getValueFromEvent={(e,dateString) => dateString}
|
||||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||||
|
|
@ -378,7 +359,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Dragger
|
<Dragger
|
||||||
name='file'
|
name='file'
|
||||||
// multiple
|
// multiple
|
||||||
action="/gunshiApp/xyt/rescue/team/file/upload/singleSimple"
|
action="/gunshiApp/tsg/personnelPlan/file/upload/singleSimple"
|
||||||
onChange={fileChange}
|
onChange={fileChange}
|
||||||
onDrop={(info) => { console.log(info.dataTransfer.files); }}
|
onDrop={(info) => { console.log(info.dataTransfer.files); }}
|
||||||
fileList={fileList}
|
fileList={fileList}
|
||||||
|
|
@ -480,7 +461,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
border: 0,
|
border: 0,
|
||||||
marginTop: 20,
|
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>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -4,13 +4,13 @@ import BasicCrudModal from '../../../components/crud/BasicCrudModal';
|
||||||
import { Table, Card,Modal,Image,Input,Button,Row,Col,message } from 'antd';
|
import { Table, Card,Modal,Image,Input,Button,Row,Col,message } from 'antd';
|
||||||
import ToolBar from './toolbar';
|
import ToolBar from './toolbar';
|
||||||
import ModalForm from './form';
|
import ModalForm from './form';
|
||||||
import RecordDetails from "./RecordForm"
|
import RecordDetails from "../pxjlgl/form"
|
||||||
import apiurl from '../../../service/apiurl';
|
import apiurl from '../../../service/apiurl';
|
||||||
import usePageTable from '../../../components/crud/usePageTable2';
|
import usePageTable from '../../../components/crud/usePageTable2';
|
||||||
import { createCrudService } from '../../../components/crud/_';
|
import { createCrudService } from '../../../components/crud/_';
|
||||||
import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
|
import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
|
||||||
import { exportFile } from '../../../utils/tools.js';
|
import { exportFile } from '../../../utils/tools.js';
|
||||||
import { httppost5 } from '../../../utils/request';
|
import { httppost5,httpget2 } from '../../../utils/request';
|
||||||
|
|
||||||
const Page = () => {
|
const Page = () => {
|
||||||
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
||||||
|
|
@ -21,18 +21,21 @@ const Page = () => {
|
||||||
const refModal = useRef();
|
const refModal = useRef();
|
||||||
const [searchVal, setSearchVal] = useState(false)
|
const [searchVal, setSearchVal] = useState(false)
|
||||||
const [pxRecordOpen, setPxRecordOpen] = useState(false)
|
const [pxRecordOpen, setPxRecordOpen] = useState(false)
|
||||||
|
|
||||||
|
const [qdItem, setQdItem] = useState()
|
||||||
const columns = [
|
const columns = [
|
||||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
{ 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: 'addr', dataIndex: 'addr', width: 150, ellipsis: true },
|
||||||
{ title: '填报人', key: 'phone', dataIndex: 'phone', width: 150, ellipsis: true },
|
{ title: '填报人', key: 'applicant', dataIndex: 'applicant', width: 150, ellipsis: true },
|
||||||
|
|
||||||
{
|
{
|
||||||
title: '操作', key: 'operation', width: 300, fixed: 'right',align: 'center',
|
title: '操作', key: 'operation', width: 300, fixed: 'right',align: 'center',
|
||||||
|
|
@ -48,23 +51,24 @@ const Page = () => {
|
||||||
];
|
];
|
||||||
const columns1 = [
|
const columns1 = [
|
||||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
{ 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,
|
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,
|
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',
|
title: '操作', key: 'operation', width: 100, fixed: 'right',align: 'center',
|
||||||
render: (value, row, index) => (
|
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 [pxOpen, setPxOpen] = useState(false)
|
||||||
const [imgVisible, setImgVisible] = useState(false)
|
const [imgVisible, setImgVisible] = useState(false)
|
||||||
const [imgList, setImgList] = useState([])
|
const [imgList, setImgList] = useState([])
|
||||||
|
const [fileList1, setFileList1] = useState([]) //上传文件列表
|
||||||
|
const [fileList2, setFileList2] = useState([]) //上传文件列表
|
||||||
|
|
||||||
|
|
||||||
const reviewPic = (arrPic) => {
|
const reviewPic = (arrPic) => {
|
||||||
if (arrPic.length > 0) {
|
if (arrPic.length > 0) {
|
||||||
setImgVisible(true)
|
setImgVisible(true)
|
||||||
|
|
@ -88,19 +96,26 @@ const Page = () => {
|
||||||
} else if (type === 'view') {
|
} else if (type === 'view') {
|
||||||
refModal.current.showView(params);
|
refModal.current.showView(params);
|
||||||
} else if (type === 'del') {
|
} 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') {
|
}else if (type === 'similarAdd') {
|
||||||
refModal.current.showSimilarSave(params);
|
refModal.current.showSimilarSave(params);
|
||||||
} else {
|
} else {
|
||||||
// 培训记录
|
// 培训记录
|
||||||
|
const params1 = {
|
||||||
|
search: {
|
||||||
|
...searchVal,
|
||||||
|
planId:params.id
|
||||||
|
}
|
||||||
|
};
|
||||||
setPxOpen(true);
|
setPxOpen(true);
|
||||||
// setPxItem
|
search1(params1)
|
||||||
|
// getFileInfo(params)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const { tableProps, search, refresh } = 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.fxzb.qsdw.zq.page).find_noCode);
|
const { tableProps:tableProps1, search:search1 } = usePageTable(createCrudService(apiurl.pxjl.page).find_noCode);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 处理成功的回调
|
* @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 = () => {
|
const exportExcel = () => {
|
||||||
let params = {
|
let params = {
|
||||||
...searchVal,
|
...searchVal,
|
||||||
|
|
||||||
id:1
|
|
||||||
}
|
}
|
||||||
httppost5(apiurl.gcaqjc.gcaqfx.jrx.export, params).then(res => {
|
httppost5(apiurl.pxjh.export, params).then(res => {
|
||||||
exportFile(`培训计划管理.xlsx`,res.data)
|
exportFile(`培训计划管理.xlsx`,res.data)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -129,6 +181,18 @@ const Page = () => {
|
||||||
};
|
};
|
||||||
search(params)
|
search(params)
|
||||||
}, [searchVal])
|
}, [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 (
|
return (
|
||||||
|
|
@ -141,7 +205,7 @@ const Page = () => {
|
||||||
onSave={command('save')}
|
onSave={command('save')}
|
||||||
role={role}
|
role={role}
|
||||||
callback={refresh}
|
callback={refresh}
|
||||||
exportFile={exportExcel}
|
exportFile1={exportExcel}
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
<div className="ant-card-body" style={{padding:"20px 0 0 0"}}>
|
<div className="ant-card-body" style={{padding:"20px 0 0 0"}}>
|
||||||
|
|
@ -155,7 +219,6 @@ const Page = () => {
|
||||||
title=""
|
title=""
|
||||||
component={ModalForm}
|
component={ModalForm}
|
||||||
onCrudSuccess={successCallback}
|
onCrudSuccess={successCallback}
|
||||||
// onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/* 培训记录 */}
|
{/* 培训记录 */}
|
||||||
|
|
@ -173,7 +236,7 @@ const Page = () => {
|
||||||
columns={columns1}
|
columns={columns1}
|
||||||
rowKey="inx"
|
rowKey="inx"
|
||||||
{...tableProps1}
|
{...tableProps1}
|
||||||
dataSource={[{teamName:1}]}
|
// dataSource={dataSource}
|
||||||
scroll={{ x: width1, y: "calc( 100vh - 400px )" }} />
|
scroll={{ x: width1, y: "calc( 100vh - 400px )" }} />
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
|
|
@ -189,7 +252,7 @@ const Page = () => {
|
||||||
setPxRecordOpen(false);
|
setPxRecordOpen(false);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<RecordDetails mode={"view"} record={{}} />
|
<RecordDetails mode={"view"} record={qdItem} />
|
||||||
</Modal>
|
</Modal>
|
||||||
<div style={{ display: "none" }}>
|
<div style={{ display: "none" }}>
|
||||||
<Image.PreviewGroup
|
<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 {RightOutlined,LeftOutlined,FileExcelOutlined,DeleteOutlined} from '@ant-design/icons';
|
||||||
import { createCrudService } from '../../../components/crud/_';
|
import { createCrudService } from '../../../components/crud/_';
|
||||||
import apiurl from '../../../service/apiurl';
|
import apiurl from '../../../service/apiurl';
|
||||||
import { httppost5 } from '../../../utils/request';
|
import { httpgetExport, httppost5 } from '../../../utils/request';
|
||||||
import { exportFile } from '../../../utils/tools';
|
import { exportFile } from '../../../utils/tools';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
const { Dragger } = Upload;
|
const { Dragger } = Upload;
|
||||||
const { RangePicker } = DatePicker;
|
const { RangePicker } = DatePicker;
|
||||||
const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFile }) => {
|
const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFile1 }) => {
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
const addBtn = role?.rule?.find(item => item.menuName == "新增")|| true;
|
const addBtn = role?.rule?.find(item => item.menuName == "新增")|| true;
|
||||||
const searchBtn = 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;
|
let dateSo;
|
||||||
if (values.tm) {
|
if (values.tm) {
|
||||||
dateSo = {
|
dateSo = {
|
||||||
start: moment(values.tm[0]).format('YYYY'),
|
stm: moment(values.tm[0]).format('YYYY'),
|
||||||
end: moment(values.tm[1]).format('YYYY')
|
etm: moment(values.tm[1]).format('YYYY')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
delete values.tm
|
delete values.tm
|
||||||
setSearchVal({...values, dateSo});
|
setSearchVal({...values, ...dateSo});
|
||||||
}
|
}
|
||||||
|
|
||||||
const beforeUpload = (file) => {
|
const beforeUpload = (file) => {
|
||||||
|
|
@ -58,7 +58,7 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFil
|
||||||
}
|
}
|
||||||
|
|
||||||
const downTemplate = ()=>{
|
const downTemplate = ()=>{
|
||||||
httppost5(apiurl.rcgl.zbgl.zbb.import, {}).then(res => {
|
httpgetExport(apiurl.pxjh.import, {}).then(res => {
|
||||||
exportFile(`培训计划管理.xlsx`,res.data)
|
exportFile(`培训计划管理.xlsx`,res.data)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -76,10 +76,10 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFil
|
||||||
picker='year'
|
picker='year'
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="填报人" name="teamName">
|
<Form.Item label="填报人" name="applicant">
|
||||||
<Input allowClear style={{width:'150px'}}/>
|
<Input allowClear style={{width:'150px'}}/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="培训班名称" name="teamName">
|
<Form.Item label="培训班名称" name="name">
|
||||||
<Input allowClear style={{width:'150px'}}/>
|
<Input allowClear style={{width:'150px'}}/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
{searchBtn ? <Form.Item>
|
{searchBtn ? <Form.Item>
|
||||||
|
|
@ -99,7 +99,7 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFil
|
||||||
<Form.Item>
|
<Form.Item>
|
||||||
<Button onClick={() => {setExportOPen(true)}}>导入</Button>
|
<Button onClick={() => {setExportOPen(true)}}>导入</Button>
|
||||||
</Form.Item><Form.Item>
|
</Form.Item><Form.Item>
|
||||||
<Button onClick={()=>exportFile()}>导出</Button>
|
<Button onClick={()=>exportFile1()}>导出</Button>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -117,7 +117,7 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFil
|
||||||
<Dragger
|
<Dragger
|
||||||
name='file'
|
name='file'
|
||||||
// multiple
|
// multiple
|
||||||
action="/gunshiApp/xyt/rota/importData"
|
action="/gunshiApp/tsg/personnelPlan/upload"
|
||||||
onChange={fileChange}
|
onChange={fileChange}
|
||||||
beforeUpload={beforeUpload}
|
beforeUpload={beforeUpload}
|
||||||
onDrop={(info) => { console.log(info); }}
|
onDrop={(info) => { console.log(info); }}
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import React, { useEffect,useState } from 'react';
|
import React, { useEffect,useState } from 'react';
|
||||||
import { Form, Upload, Button,Row, Col, Input, DatePicker, message,Modal } from 'antd';
|
import { Form, Upload, Button,Row, Col, Input, DatePicker, message,Modal } from 'antd';
|
||||||
import NormalSelect from '../../../components/Form/NormalSelect';
|
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
const ToolBar = ({ setSearchVal }) => {
|
const ToolBar = ({ setSearchVal }) => {
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
|
|
@ -14,15 +15,24 @@ const ToolBar = ({ setSearchVal }) => {
|
||||||
value: 2
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<div style={{display:'flex',justifyContent:'space-between'}}>
|
<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">
|
<Form.Item label="统计维度" name="teamName">
|
||||||
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="选择年份" name="tm">
|
<Form.Item label="选择年份" name="year">
|
||||||
<DatePicker
|
<DatePicker
|
||||||
allowClear
|
allowClear
|
||||||
showTime
|
showTime
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,14 @@
|
||||||
import React,{useEffect,useState,useMemo,useRef} from 'react';
|
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 { DeleteOutlined,FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
|
||||||
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
|
import { formItemLayout, btnItemLayout } from '../../../components/crud/FormLayoutProps';
|
||||||
import apiurl from '../../../service/apiurl';
|
import apiurl from '../../../service/apiurl';
|
||||||
import NormalSelect from '../../../components/Form/NormalSelect';
|
import NormalSelect from '../../../components/Form/NormalSelect';
|
||||||
import "./index.less"
|
import "./index.less"
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import dayjs from "dayjs"
|
||||||
import { createCrudService } from '../../../components/crud/_';
|
import { createCrudService } from '../../../components/crud/_';
|
||||||
|
import { httpget2, httppost2 } from '../../../utils/request';
|
||||||
const { RangePicker } = DatePicker
|
const { RangePicker } = DatePicker
|
||||||
const { Dragger } = Upload;
|
const { Dragger } = Upload;
|
||||||
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
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
|
value:5
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
const jh = [
|
|
||||||
{
|
|
||||||
label: "工程测量业务知识",
|
|
||||||
value:1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "工程管理标准化业务知识",
|
|
||||||
value:2
|
|
||||||
},{
|
|
||||||
label: "消防安全知识培训",
|
|
||||||
value:3
|
|
||||||
},{
|
|
||||||
label: "水雨情测报培训",
|
|
||||||
value:4
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const [details, setDetails] = useState([])
|
const [details, setDetails] = useState([])
|
||||||
|
|
||||||
|
|
@ -73,27 +59,43 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
* @param {*} type
|
* @param {*} type
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
const getFileInfo = (params) => {
|
const getFileInfo = async (params) => {
|
||||||
createCrudService(apiurl.fxzb.qsdw.zq.getFile).delGet({ teamId: params.teamId }).then(res => {
|
try {
|
||||||
|
const res = await httpget2(apiurl.pxjl.getFile + `/${params.id}`)
|
||||||
if (res.code === 200) {
|
if (res.code === 200) {
|
||||||
let fileArr = res.data?.files.map(item => {
|
if (res.data?.files1) {
|
||||||
return {
|
let fileArr1 = res.data?.files1.map(item => {
|
||||||
name: item.fileName,
|
return {
|
||||||
response: {
|
name: item.fileName,
|
||||||
data: {
|
response: {
|
||||||
filePath: item.filePath,
|
data: {
|
||||||
fileId:item.fileId
|
filePath: item.filePath,
|
||||||
}
|
fileId: item.fileId
|
||||||
},
|
|
||||||
}
|
}
|
||||||
})
|
},
|
||||||
setFileList(fileArr)
|
}
|
||||||
const result = res.data?.details.map(item => ({ ...item, key: item.detailId }))
|
})
|
||||||
console.log("resss",result);
|
setFileList1(fileArr1)
|
||||||
|
}
|
||||||
setDetails(result)
|
if (res.data?.files2) {
|
||||||
|
let fileArr = res.data?.files2.map(item => {
|
||||||
|
return {
|
||||||
|
name: item.fileName,
|
||||||
|
response: {
|
||||||
|
data: {
|
||||||
|
filePath: item.filePath,
|
||||||
|
fileId: item.fileId
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
setFileList(fileArr)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
})
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* @description 文件下载
|
* @description 文件下载
|
||||||
|
|
@ -101,7 +103,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
*/
|
*/
|
||||||
const download = (params) => {
|
const download = (params) => {
|
||||||
let downloadLink = document.createElement("a");
|
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.download = `${params.fileName}`;
|
||||||
downloadLink.style.display = "none";
|
downloadLink.style.display = "none";
|
||||||
// 将链接添加到页面中
|
// 将链接添加到页面中
|
||||||
|
|
@ -113,7 +115,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
|
|
||||||
const download1 = (params) => {
|
const download1 = (params) => {
|
||||||
let downloadLink = document.createElement("a");
|
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.download = `${params.fileName}`;
|
||||||
downloadLink.style.display = "none";
|
downloadLink.style.display = "none";
|
||||||
// 将链接添加到页面中
|
// 将链接添加到页面中
|
||||||
|
|
@ -160,6 +162,8 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
})
|
})
|
||||||
setFileIds1(fileIds)
|
setFileIds1(fileIds)
|
||||||
setFileList1(info.fileList)
|
setFileList1(info.fileList)
|
||||||
|
console.log(info.fileList);
|
||||||
|
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* @description pdf文件预览
|
* @description pdf文件预览
|
||||||
|
|
@ -174,20 +178,19 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
setIframeSrc1(params)
|
setIframeSrc1(params)
|
||||||
setPdfViewOPen1(true)
|
setPdfViewOPen1(true)
|
||||||
}
|
}
|
||||||
const onfinish = () => {
|
const onfinish = (values) => {
|
||||||
let values = form.getFieldsValue();
|
values.stm = values.tm ? values.tm[0].format("HH:mm:ss") : ''
|
||||||
values.details = details;
|
values.etm = values.tm ? values.tm[1].format("HH:mm:ss") : ''
|
||||||
values.validStartDate = values.dateRangeSo&&moment(values.dateRangeSo[0]).format("YYYY-MM-DD")
|
values.regDate = moment(values.regDate).format('YYYY-MM-DD')
|
||||||
values.validEndDate = values.dateRangeSo&&moment(values.dateRangeSo[1]).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') {
|
if (mode === 'edit') {
|
||||||
let oldFiles = fileList.map(item => item.response?.data?.fileId )
|
onEdit(apiurl.pxjl.edit,{...record,...values});
|
||||||
values.fileIds = oldFiles;
|
|
||||||
values.teamId = record.teamId;
|
|
||||||
onEdit(apiurl.fxzb.qsdw.zq.edit,values)
|
|
||||||
}
|
}
|
||||||
if (mode === 'save') {
|
if (mode === 'save') {
|
||||||
values.fileIds = fileIds
|
onSave(apiurl.pxjl.save,values)
|
||||||
onSave(apiurl.fxzb.qsdw.zq.save,values)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -206,24 +209,51 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
let filterFile = fileList1.filter(item => item.response?.data?.fileId !== fileId);
|
let filterFile = fileList1.filter(item => item.response?.data?.fileId !== fileId);
|
||||||
setFileList1(filterFile)
|
setFileList1(filterFile)
|
||||||
}
|
}
|
||||||
useEffect(()=>{
|
const [jh, setJh] = useState([])
|
||||||
if (record.teamId ) {
|
const getJhList = async () => {
|
||||||
getFileInfo(record)
|
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") {
|
||||||
|
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(() => {
|
useEffect(() => {
|
||||||
if (mode !== "save") {
|
const userName = localStorage.getItem('userName')
|
||||||
let dataSo = [
|
form.setFieldValue("regDate", moment())
|
||||||
record.validStartDate? moment(record.validStartDate):'',
|
form.setFieldValue("applicant",userName)
|
||||||
record.validEndDate? moment(record.validEndDate): ''
|
getJhList()
|
||||||
]
|
}, [])
|
||||||
|
|
||||||
form.setFieldsValue({...record,dateRangeSo:dataSo})
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}, [record,mode])
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div style={{height:"65vh",overflowY:"auto"}}>
|
<div style={{height:"65vh",overflowY:"auto"}}>
|
||||||
|
|
@ -232,13 +262,14 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Form
|
<Form
|
||||||
form={form}
|
form={form}
|
||||||
{...formItemLayout}
|
{...formItemLayout}
|
||||||
// initialValues={record}
|
initialValues={record}
|
||||||
|
onFinish={onfinish}
|
||||||
>
|
>
|
||||||
<Row>
|
<Row>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训计划"
|
label="培训计划"
|
||||||
name="teamName"
|
name="planId"
|
||||||
>
|
>
|
||||||
<NormalSelect disabled={mode==='view'} style={{width:'100%'}} allowClear options={jh}/>
|
<NormalSelect disabled={mode==='view'} style={{width:'100%'}} allowClear options={jh}/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
@ -246,7 +277,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训分类"
|
label="培训分类"
|
||||||
name="teamName"
|
name="type"
|
||||||
>
|
>
|
||||||
<NormalSelect disabled={mode === 'view'} style={{ width: '100%' }} allowClear options={types} />
|
<NormalSelect disabled={mode === 'view'} style={{ width: '100%' }} allowClear options={types} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
@ -256,7 +287,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训日期"
|
label="培训日期"
|
||||||
name="startDate"
|
name="planDate"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
getValueFromEvent={(e,dateString) => dateString}
|
getValueFromEvent={(e,dateString) => dateString}
|
||||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||||
|
|
@ -267,7 +298,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="标题名称"
|
label="标题名称"
|
||||||
name="teamName"
|
name="name"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
>
|
>
|
||||||
<Input disabled={mode === 'view'} style={{width:'100%'}} allowClear />
|
<Input disabled={mode === 'view'} style={{width:'100%'}} allowClear />
|
||||||
|
|
@ -279,15 +310,22 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训时段"
|
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>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训时长(小时)"
|
label="培训时长(小时)"
|
||||||
name="address"
|
name="hour"
|
||||||
>
|
>
|
||||||
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
@ -297,7 +335,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训地点"
|
label="培训地点"
|
||||||
name="remark"
|
name="addr"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
>
|
>
|
||||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
|
|
@ -307,7 +345,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="主办单位"
|
label="主办单位"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
name="remark"
|
name="unit"
|
||||||
>
|
>
|
||||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
@ -317,7 +355,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={24}>
|
<Col span={24}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训内容"
|
label="培训内容"
|
||||||
name="remark"
|
name="content"
|
||||||
labelCol={{ span: 3 }}
|
labelCol={{ span: 3 }}
|
||||||
wrapperCol={{ span: 19 }}
|
wrapperCol={{ span: 19 }}
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
|
|
@ -327,31 +365,21 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<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>
|
||||||
<Row>
|
<Row>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="参训人员"
|
label="参训人员"
|
||||||
name="remark"
|
name="trainees"
|
||||||
>
|
>
|
||||||
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="参加人数"
|
label="参训人数"
|
||||||
name="address"
|
name="numPeople"
|
||||||
|
rules={[{ required: true }]}
|
||||||
>
|
>
|
||||||
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
<InputNumber min={0} disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
@ -363,15 +391,15 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="填报人"
|
label="填报人"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
name="address"
|
name="applicant"
|
||||||
>
|
>
|
||||||
<Input disabled={mode==='view'} style={{width:'100%'}} allowClear />
|
<Input disabled={true} style={{width:'100%'}} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</Col>
|
</Col>
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="登记日期"
|
label="登记日期"
|
||||||
name="startDate"
|
name="regDate"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
getValueFromEvent={(e,dateString) => dateString}
|
getValueFromEvent={(e,dateString) => dateString}
|
||||||
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
getValueProps={(value) => ({ value: value ? moment(value) : undefined })}
|
||||||
|
|
@ -384,24 +412,25 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Col span={24}>
|
<Col span={24}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="培训签到表"
|
label="培训签到表"
|
||||||
name="fieldId"
|
name="fieldId1"
|
||||||
labelCol={{ span: 3 }}
|
labelCol={{ span: 3 }}
|
||||||
wrapperCol={{ span: 19 }}
|
wrapperCol={{ span: 19 }}
|
||||||
>
|
>
|
||||||
{mode !== "view" &&
|
{mode !== "view" &&
|
||||||
<Dragger
|
<Dragger
|
||||||
name='file'
|
name='file'
|
||||||
// multiple
|
beforeUpload={imgbeforeUpload}
|
||||||
action="/gunshiApp/xyt/rescue/team/file/upload/singleSimple"
|
action="/gunshiApp/tsg/personnelPlanLog/file/upload/singleSimple"
|
||||||
onChange={fileChange1}
|
onChange={fileChange1}
|
||||||
onDrop={(info) => { console.log(info.dataTransfer.files); }}
|
onDrop={(info) => { console.log(info.dataTransfer.files); }}
|
||||||
fileList={fileList1}
|
fileList={fileList1}
|
||||||
disabled={loading1}
|
disabled={loading1}
|
||||||
|
maxCount={1}
|
||||||
// onSuccess={handleSuccess}
|
// onSuccess={handleSuccess}
|
||||||
>
|
>
|
||||||
<p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
|
<p className="ant-upload-text">点击或拖拽文件到此区域上传</p>
|
||||||
<p className="ant-upload-hint">
|
<p className="ant-upload-hint">
|
||||||
支持扩展名：.rar .zip .doc .docx .pdf .jpg .png .ppt
|
支持扩展名：.jpg .png
|
||||||
</p>
|
</p>
|
||||||
</Dragger>
|
</Dragger>
|
||||||
}
|
}
|
||||||
|
|
@ -450,7 +479,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
}
|
}
|
||||||
<span>{file.name}</span>
|
<span>{file.name}</span>
|
||||||
</div>
|
</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 />
|
<DeleteOutlined />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -477,7 +506,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
<Dragger
|
<Dragger
|
||||||
name='file'
|
name='file'
|
||||||
// multiple
|
// multiple
|
||||||
action="/gunshiApp/xyt/rescue/team/file/upload/singleSimple"
|
action="/gunshiApp/tsg/personnelPlanLog/file/upload/singleSimple"
|
||||||
onChange={fileChange}
|
onChange={fileChange}
|
||||||
onDrop={(info) => { console.log(info.dataTransfer.files); }}
|
onDrop={(info) => { console.log(info.dataTransfer.files); }}
|
||||||
fileList={fileList}
|
fileList={fileList}
|
||||||
|
|
@ -579,7 +608,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
border: 0,
|
border: 0,
|
||||||
marginTop: 20,
|
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>
|
</Modal>
|
||||||
|
|
||||||
|
|
@ -600,7 +629,7 @@ const ModalForm = ({ mode, record, onEdit, onSave, onSimilarSave }) => {
|
||||||
border: 0,
|
border: 0,
|
||||||
marginTop: 20,
|
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>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,8 @@ import usePageTable from '../../../components/crud/usePageTable2';
|
||||||
import { createCrudService } from '../../../components/crud/_';
|
import { createCrudService } from '../../../components/crud/_';
|
||||||
import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
|
import { CrudOpRender_text } from '../../../components/crud/CrudOpRender';
|
||||||
import "./index.less"
|
import "./index.less"
|
||||||
|
import { httpget2 } from '../../../utils/request';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
const Page = () => {
|
const Page = () => {
|
||||||
const role = useSelector(state => state.auth.role);
|
const role = useSelector(state => state.auth.role);
|
||||||
|
|
@ -23,18 +25,18 @@ const Page = () => {
|
||||||
const [searchChartVal, setSearchChartVal] = useState(false)
|
const [searchChartVal, setSearchChartVal] = useState(false)
|
||||||
const columns = [
|
const columns = [
|
||||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
{ 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: 'trainees', dataIndex: 'trainees', width: 200, ellipsis: true },
|
||||||
{ title: '培训地点', key: 'teamLeader', dataIndex: 'teamLeader', width: 150, ellipsis: true },
|
{ title: '培训地点', key: 'addr', dataIndex: 'addr', width: 150, ellipsis: true },
|
||||||
{ title: '填报人', key: 'phone', dataIndex: 'phone', width: 150, ellipsis: true },
|
{ title: '填报人', key: 'applicant', dataIndex: 'applicant', width: 150, ellipsis: true },
|
||||||
{ title: '登记日期', key: 'teamLeader', dataIndex: 'teamLeader', width: 150, ellipsis: true },
|
{ title: '登记日期', key: 'regDate', dataIndex: 'regDate', width: 150, ellipsis: true },
|
||||||
|
|
||||||
{
|
{
|
||||||
title: '操作', key: 'operation', width: 200, fixed: 'right',align: 'center',
|
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 width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
||||||
|
|
||||||
const pxOptions = useMemo(() => {
|
|
||||||
return options()
|
|
||||||
}, [])
|
|
||||||
const command = (type) => (params) => {
|
const command = (type) => (params) => {
|
||||||
if (type === 'save') {
|
if (type === 'save') {
|
||||||
refModal.current.showSave();
|
refModal.current.showSave();
|
||||||
|
|
@ -59,12 +59,12 @@ const Page = () => {
|
||||||
} else if (type === 'view') {
|
} else if (type === 'view') {
|
||||||
refModal.current.showView(params);
|
refModal.current.showView(params);
|
||||||
} else if (type === 'del') {
|
} 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 处理成功的回调
|
* @description 处理成功的回调
|
||||||
|
|
@ -73,7 +73,29 @@ const Page = () => {
|
||||||
refresh()
|
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(()=>{
|
useEffect(()=>{
|
||||||
const params = {
|
const params = {
|
||||||
|
|
@ -84,6 +106,13 @@ const Page = () => {
|
||||||
search(params)
|
search(params)
|
||||||
}, [searchVal])
|
}, [searchVal])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (searchChartVal) {
|
||||||
|
getStaData(searchChartVal)
|
||||||
|
}
|
||||||
|
|
||||||
|
}, [searchChartVal])
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
|
|
@ -96,8 +125,8 @@ const Page = () => {
|
||||||
<div className='children-itm'>
|
<div className='children-itm'>
|
||||||
<span>本年培训期数</span>
|
<span>本年培训期数</span>
|
||||||
<span>计划/实际</span>
|
<span>计划/实际</span>
|
||||||
<span><span style={{fontSize:22,fontWeight:"bold"}}>26</span> 期/
|
<span><span style={{ fontSize: 22, fontWeight: "bold" }}>{ staData?.numberOfPeriods2 ?? 1}</span> 期/
|
||||||
<span style={{fontSize:22,fontWeight:"bold"}}>26</span> 期</span>
|
<span style={{fontSize:22,fontWeight:"bold"}}>{ staData?.numberOfPeriods1 ?? 1}</span> 期</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -106,15 +135,15 @@ const Page = () => {
|
||||||
<div className='children-itm'>
|
<div className='children-itm'>
|
||||||
<span>本年培训期数</span>
|
<span>本年培训期数</span>
|
||||||
<span>计划/实际</span>
|
<span>计划/实际</span>
|
||||||
<span><span style={{fontSize:22,fontWeight:"bold"}}>26</span> 人次/
|
<span><span style={{fontSize:22,fontWeight:"bold"}}>{ staData?.personNum2 ?? 1}</span> 人次/
|
||||||
<span style={{fontSize:22,fontWeight:"bold"}}>26</span> 人次</span>
|
<span style={{fontSize:22,fontWeight:"bold"}}>{ staData?.personNum1 ?? 1}</span> 人次</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='pxrecord-title-right'>
|
<div className='pxrecord-title-right'>
|
||||||
<div className='chart-tool'>
|
<div className='chart-tool'>
|
||||||
<ChartToolBar
|
<ChartToolBar
|
||||||
setSearchVal={setSearchVal}
|
setSearchVal={setSearchChartVal}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className='chart-box'>
|
<div className='chart-box'>
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,25 @@
|
||||||
export default function options() {
|
export default function options(data={}) {
|
||||||
var dataGDP = [900, 500, 1632.33, 1100, 400]
|
const xAxisData = data?.list?.map(item => item.month + "月")
|
||||||
var dataGrowth = [2, 2.1, 3, 2.5, 2.1]
|
const maxCount = data?.list ? Math.ceil(Math.max(...data?.list?.map(obj => [obj.num1,obj.num2]).flat())) : 0
|
||||||
var xAxisData = ['2019年', '2020年', '2021年', '2022年', '2023年']
|
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 {
|
return {
|
||||||
animation: true,
|
animation: true,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
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: {
|
grid: {
|
||||||
top: '15%',
|
top: '15%',
|
||||||
|
|
@ -32,13 +46,15 @@ export default function options() {
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
show: true,
|
show: true,
|
||||||
margin: 14,
|
margin: 14,
|
||||||
|
// formatter: '{value}月'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
offset: 10,
|
offset: 10,
|
||||||
|
min: minCount,
|
||||||
|
max: maxCount,
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
|
|
@ -55,6 +71,9 @@ export default function options() {
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '(%)',
|
name: '(%)',
|
||||||
|
|
||||||
|
min: minRate,
|
||||||
|
max: maxRate,
|
||||||
offset: 10,
|
offset: 10,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: 'rgba(255,255,255,0.5)',
|
color: 'rgba(255,255,255,0.5)',
|
||||||
|
|
@ -71,7 +90,6 @@ export default function options() {
|
||||||
fontSize: 18,
|
fontSize: 18,
|
||||||
formatter: '{value}%'
|
formatter: '{value}%'
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
|
|
@ -79,7 +97,7 @@ export default function options() {
|
||||||
name: '计划期数',
|
name: '计划期数',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 25,
|
barWidth: 25,
|
||||||
data: dataGDP,
|
data: data?.list?.map(item =>item.num2),
|
||||||
itemStyle:{
|
itemStyle:{
|
||||||
color:"#6295fa"
|
color:"#6295fa"
|
||||||
}
|
}
|
||||||
|
|
@ -88,7 +106,7 @@ export default function options() {
|
||||||
name: '实际期数',
|
name: '实际期数',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barWidth: 25,
|
barWidth: 25,
|
||||||
data: dataGDP,
|
data: data?.list?.map(item =>item.num1),
|
||||||
itemStyle:{
|
itemStyle:{
|
||||||
color:"#62daab"
|
color:"#62daab"
|
||||||
}
|
}
|
||||||
|
|
@ -110,7 +128,7 @@ export default function options() {
|
||||||
borderColor: '#5d7092',
|
borderColor: '#5d7092',
|
||||||
borderWidth: 2
|
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;
|
let dateSo;
|
||||||
if (values.tm) {
|
if (values.tm) {
|
||||||
dateSo = {
|
dateSo = {
|
||||||
start: moment(values.tm[0]).format('YYYY'),
|
stm: moment(values.tm[0]).format('YYYY'),
|
||||||
end: moment(values.tm[1]).format('YYYY')
|
etm: moment(values.tm[1]).format('YYYY')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
delete values.tm
|
delete values.tm
|
||||||
setSearchVal({...values, dateSo});
|
setSearchVal({...values, ...dateSo});
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
@ -57,13 +57,13 @@ const ToolBar = ({ setSearchVal, onSave, storeData, role = [],callback,exportFil
|
||||||
format={"YYYY-MM-DD"}
|
format={"YYYY-MM-DD"}
|
||||||
/>
|
/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="参训人员" name="teamName">
|
<Form.Item label="参训人员" name="trainees">
|
||||||
<Input allowClear style={{width:'150px'}}/>
|
<Input allowClear style={{width:'150px'}}/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="主办单位" name="teamName">
|
<Form.Item label="主办单位" name="unit">
|
||||||
<Input allowClear style={{width:'150px'}}/>
|
<Input allowClear style={{width:'150px'}}/>
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="培训分类" name="teamName">
|
<Form.Item label="培训分类" name="type">
|
||||||
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
{searchBtn ? <Form.Item>
|
{searchBtn ? <Form.Item>
|
||||||
|
|
|
||||||
|
|
@ -27,13 +27,12 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
const onFinish = (values) => {
|
const onFinish = (values) => {
|
||||||
|
|
||||||
if (mode === 'edit') {
|
if (mode === 'edit') {
|
||||||
values.id = record.id
|
values.id = record.id
|
||||||
onEdit(apiurl.fxzb.sxfd.fxtj.edit, values)
|
onEdit(apiurl.zrrgl.edit, values)
|
||||||
}
|
}
|
||||||
if (mode === 'save') {
|
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}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="责任类型"
|
label="责任类型"
|
||||||
name="title"
|
name="type"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
>
|
>
|
||||||
<NormalSelect allowClear style={{ width: '100%' }} options={types} />
|
<NormalSelect allowClear style={{ width: '100%' }} options={types} />
|
||||||
|
|
@ -54,7 +53,7 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="姓名"
|
label="姓名"
|
||||||
name="period"
|
name="name"
|
||||||
rules={[{ required: true }]}
|
rules={[{ required: true }]}
|
||||||
>
|
>
|
||||||
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
||||||
|
|
@ -65,7 +64,7 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="单位"
|
label="单位"
|
||||||
name="org"
|
name="unit"
|
||||||
>
|
>
|
||||||
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
@ -73,7 +72,7 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="职务"
|
label="职务"
|
||||||
name="tmPred"
|
name="duty"
|
||||||
>
|
>
|
||||||
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
@ -83,7 +82,7 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
|
||||||
<Col span={12}>
|
<Col span={12}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="联系方式"
|
label="联系方式"
|
||||||
name="tmPred"
|
name="contactInfo"
|
||||||
>
|
>
|
||||||
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
<Input disabled={mode === 'view'} style={{ width: '100%' }} allowClear />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
@ -92,8 +91,8 @@ const ModalForm = ({ mode, record, onEdit, onSave }) => {
|
||||||
<Row>
|
<Row>
|
||||||
<Col span={24}>
|
<Col span={24}>
|
||||||
<Form.Item
|
<Form.Item
|
||||||
label="接收时间"
|
label="主要职责"
|
||||||
name="tmRecv"
|
name="dutyBound"
|
||||||
labelCol={{ span: 3 }}
|
labelCol={{ span: 3 }}
|
||||||
wrapperCol={{ span: 19 }}
|
wrapperCol={{ span: 19 }}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -24,14 +24,14 @@ const Page = () => {
|
||||||
const columns = [
|
const columns = [
|
||||||
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align: "center" },
|
{ 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>
|
render: (value) => <span>{types[value]}</span>
|
||||||
},
|
},
|
||||||
{ title: '姓名', key: 'period', dataIndex: 'period', width: 140 },
|
{ title: '姓名', key: 'name', dataIndex: 'name', width: 140 },
|
||||||
{ title: '单位', key: 'org', dataIndex: 'org', width: 200},
|
{ title: '单位', key: 'unit', dataIndex: 'unit', width: 200},
|
||||||
{ title: '职务', key: 'tmPred', dataIndex: 'tmPred', width: 150, },
|
{ title: '职务', key: 'duty', dataIndex: 'duty', width: 150, },
|
||||||
{ title: '联系方式', key: 'tmRecv', dataIndex: 'tmRecv', width: 150, },
|
{ title: '联系方式', key: 'contactInfo', dataIndex: 'contactInfo', width: 150, },
|
||||||
{ title: '主要职责', key: 'tmRecv', dataIndex: 'tmRecv', width: 250,ellipsis: true},
|
{ title: '主要职责', key: 'dutyBound', dataIndex: 'dutyBound', width: 250,ellipsis: true},
|
||||||
{
|
{
|
||||||
title: '操作', key: 'operation', width: 150, fixed: 'right',align: 'center',
|
title: '操作', key: 'operation', width: 150, fixed: 'right',align: 'center',
|
||||||
render: (value, row, index) => (<CrudOpRender_text edit={true} del={true} command={(cmd) => () => command(cmd)(row)} />)
|
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') {
|
} else if (type === 'view') {
|
||||||
refModal.current.showView(params);
|
refModal.current.showView(params);
|
||||||
} else if (type === 'del') {
|
} 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(() => {
|
useEffect(() => {
|
||||||
if (searchVal) {
|
if (searchVal) {
|
||||||
const params = {
|
const params = {
|
||||||
search: {
|
search: {
|
||||||
title: searchVal.title || undefined,
|
...searchVal
|
||||||
dateTimeRangeSo: searchVal.dateTimeRangeSo || undefined,
|
|
||||||
tp:2
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
console.log(searchVal);
|
console.log(searchVal);
|
||||||
|
|
@ -85,7 +83,7 @@ const Page = () => {
|
||||||
ref={refModal}
|
ref={refModal}
|
||||||
title=""
|
title=""
|
||||||
component={ModalForm}
|
component={ModalForm}
|
||||||
// onCrudSuccess={() => { refresh({ addvcd: localStorage.getItem('ADCD6') }) }}
|
onCrudSuccess={refresh}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -48,13 +48,13 @@ const ToolBar = ({ setSearchVal, onSave }) => {
|
||||||
<>
|
<>
|
||||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||||
<Form form={form} className='toolbarBox' layout="inline" onFinish={onFinish}>
|
<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} />
|
<NormalSelect allowClear style={{ width: '150px' }} options={types} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="姓名" name="title">
|
<Form.Item label="姓名" name="name">
|
||||||
<Input allowClear style={{ width: '150px' }} />
|
<Input allowClear style={{ width: '150px' }} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item label="联系方式" name="title">
|
<Form.Item label="联系方式" name="contactInfo">
|
||||||
<Input allowClear style={{ width: '150px' }} />
|
<Input allowClear style={{ width: '150px' }} />
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
<Form.Item>
|
<Form.Item>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue