@ -1,15 +1,26 @@
'use strict' ;
'use strict'
import React , { Component , useRef , useState } from 'react' ;
import { connect } from 'react-redux' ;
import { Row , Col , Button , Table , Card , Popconfirm , Tag , Notification , Form , Select , Pagination } from '@douyinfe/semi-ui'
import { IconPlus } from "@douyinfe/semi-icons"
import TrendModal from '../components/TrendModal' ;
import React , { Component , useRef , useState } from 'react'
import { connect } from 'react-redux'
import {
Row ,
Col ,
Button ,
Table ,
Card ,
Popconfirm ,
Tag ,
Notification ,
Form ,
Select ,
Pagination ,
} from '@douyinfe/semi-ui'
import { IconPlus } from '@douyinfe/semi-icons'
import TrendModal from '../components/TrendModal'
const Trend = ( props ) => {
const { abnParam , factorId , itName , actions , dispatch , sensorId , project , limits , query , changeQuery , limitChange } = props
const Trend = props => {
const { abnParam , factorId , itName , actions , dispatch , sensorId , project , limits , query , changeQuery , limitChange } =
props
const form = useRef ( )
const [ selectedRowKeys , setSelectedRowKeys ] = useState ( [ ] )
const [ filterFunc , setFilterFunc ] = useState ( { } )
@ -24,8 +35,9 @@ const Trend = (props) => {
const [ graValue , setGraValue ] = useState ( '' )
const [ modalData , setModalData ] = useState ( null )
const filterSet = { sensorName : null , factorName : null }
const { install } = actions
const onSelectChange = ( selectedRowKeys ) => {
const { install } = actions
console . log ( 'query' , query )
const onSelectChange = selectedRowKeys => {
setSelectedRowKeys ( selectedRowKeys )
}
const compareAndEdit = ( e , record ) => {
@ -34,14 +46,14 @@ const Trend = (props) => {
}
const modalCancel = e => {
setModalVisible ( false )
} ;
}
const removeItem = e => {
dispatch ( install . deleteAbnParams ( e ) ) . then ( res => {
if ( res . success ) {
dispatch ( install . deleteAbnParams ( e ) ) . then ( res => {
if ( res . success ) {
const id = [ factorId , - 1 ] . join ( ',' )
changeQuery ( 10 , 0 )
dispatch ( install . getAbnParamList ( { factorId : id , limit : 10 , page : 0 , type : 3 } ) ) . then ( rs => {
if ( rs . success ) {
changeQuery ( 10 , 0 )
dispatch ( install . getAbnParamList ( { factorId : id , limit : 10 , page : 0 , type : 3 } ) ) . then ( rs => {
if ( rs . success ) {
limitChange ( rs . payload . data . count )
}
} )
@ -51,9 +63,15 @@ const Trend = (props) => {
const handleInputChange = e => {
if ( e != null ) {
const value = e
let func = ( ep => ( s => ( s . sensorName ) . search ( ep ) > - 1 ) ) ( value )
let func = (
ep => s =>
s . sensorName . search ( ep ) > - 1
) ( value )
filterSet . sensorName = func
func = ( ep => ( s => ( s . factorName ) . search ( ep ) > - 1 ) ) ( value )
func = (
ep => s =>
s . factorName . search ( ep ) > - 1
) ( value )
filterSet . factorName = func
} else {
filterSet . sensorName = null
@ -62,20 +80,20 @@ const Trend = (props) => {
setFilterFunc ( filterSet )
}
/ / 批 量 启 用 o r 禁 用
const onSwitchChange = ( e ) => {
const onSwitchChange = e => {
if ( selectedRowKeys . length != 0 ) {
let ids = selectedRowKeys . join ( ',' ) ;
let ids = selectedRowKeys . join ( ',' )
let data = {
enabled : e ,
use : 'switch'
} ;
use : 'switch' ,
}
/ / 启 用 和 禁 用 接 口
dispatch ( install . batchCfgAbnParams ( ids , data ) ) . then ( res => {
if ( res . success ) {
dispatch ( install . batchCfgAbnParams ( ids , data ) ) . then ( res => {
if ( res . success ) {
const id = [ factorId , - 1 ] . join ( ',' )
changeQuery ( 10 , 0 )
dispatch ( install . getAbnParamList ( { factorId : id , limit : 10 , page : 0 , type : 3 } ) ) . then ( rs => {
if ( rs . success ) {
changeQuery ( 10 , 0 )
dispatch ( install . getAbnParamList ( { factorId : id , limit : 10 , page : 0 , type : 3 } ) ) . then ( rs => {
if ( rs . success ) {
limitChange ( rs . payload . data . count )
}
} )
@ -86,14 +104,14 @@ const Trend = (props) => {
/ / 批 量 删 除
const batchDelete = ( ) => {
if ( selectedRowKeys . length != 0 ) {
let ids = selectedRowKeys . join ( ',' ) ;
let ids = selectedRowKeys . join ( ',' )
/ / 删 除 接 口
dispatch ( install . deleteAbnParams ( ids ) ) . then ( res => {
if ( res . success ) {
dispatch ( install . deleteAbnParams ( ids ) ) . then ( res => {
if ( res . success ) {
const id = [ factorId , - 1 ] . join ( ',' )
changeQuery ( 10 , 0 )
dispatch ( install . getAbnParamList ( { factorId : id , limit : 10 , page : 0 , type : 3 } ) ) . then ( rs => {
if ( rs . success ) {
changeQuery ( 10 , 0 )
dispatch ( install . getAbnParamList ( { factorId : id , limit : 10 , page : 0 , type : 3 } ) ) . then ( rs => {
if ( rs . success ) {
limitChange ( rs . payload . data . count )
}
} )
@ -103,33 +121,34 @@ const Trend = (props) => {
Notification . warning ( {
content : '您尚未勾选任何参数配置!' ,
duration : 3 ,
} ) }
} )
}
}
/ / 批 量 保 存
const batchSave = ( ) => {
form . current . validate ( ) . then ( value => {
form . current . validate ( ) . then ( value => {
let dataSource = abnParam . filter ( a => a . abnType == 3 && a . factorId == factorId )
if ( selectedRowKeys . length != 0 ) {
let ids = selectedRowKeys . join ( ',' )
let data = {
paramJson : {
"thr_der" : deValue , / / 导 数 阈 值
"win_avg" : reCoef , / / 滑 动 均 值
"win_med" : winSize , / / 滑 动 中 值
"thr_burr" : bvBatch , / / 毛 刺 阈 值
"thr_grad" : graValue , / / 渐 变 阈 值
"win_grad" : graPoint , / / 渐 变 点 个 数
"days_Last" : timeRange / / 分 析 时 长
thr_der : deValue , / / 导 数 阈 值
win_avg : reCoef , / / 滑 动 均 值
win_med : winSize , / / 滑 动 中 值
thr_burr : bvBatch , / / 毛 刺 阈 值
thr_grad : graValue , / / 渐 变 阈 值
win_grad : graPoint , / / 渐 变 点 个 数
days_Last : timeRange , / / 分 析 时 长
} ,
use : 'notSwitch' ,
} ;
}
dispatch ( install . batchCfgAbnParams ( ids , data ) ) . then ( res => {
if ( res . success ) {
dispatch ( install . batchCfgAbnParams ( ids , data ) ) . then ( res => {
if ( res . success ) {
const id = [ factorId , - 1 ] . join ( ',' )
changeQuery ( 10 , 0 )
dispatch ( install . getAbnParamList ( { factorId : id , limit : 10 , page : 0 , type : 3 } ) ) . then ( rs => {
if ( rs . success ) {
changeQuery ( 10 , 0 )
dispatch ( install . getAbnParamList ( { factorId : id , limit : 10 , page : 0 , type : 3 } ) ) . then ( rs => {
if ( rs . success ) {
limitChange ( rs . payload . data . count )
}
} )
@ -145,30 +164,30 @@ const Trend = (props) => {
}
const iconClick = ( ) => {
if ( ! showBatchConfig ) {
setShowBatchConfig ( true ) ;
setShowBatchConfig ( true )
} else {
setShowBatchConfig ( false ) ;
setShowBatchConfig ( false )
}
}
const rangeChange = ( value ) => {
const rangeChange = value => {
setTimeRange ( value )
}
const bvValueBatch = ( value ) => {
const bvValueBatch = value => {
setBvBatch ( value )
}
const winSizeBatch = ( value ) => {
const winSizeBatch = value => {
setWinSize ( value )
}
const reCoefBatch = ( value ) => {
const reCoefBatch = value => {
setReCoef ( value )
}
const deValueBatch = ( value ) => {
const deValueBatch = value => {
setDeValue ( value )
}
const graPointBatch = ( value ) => {
const graPointBatch = value => {
setGraPoint ( value )
}
const graValueBatch = ( value ) => {
const graValueBatch = value => {
setGraValue ( value )
}
const checkInterger = ( rule , val ) => {
@ -179,10 +198,9 @@ const Trend = (props) => {
}
return false
/ / }
} ;
}
const checkPoint = ( rule , value ) => {
const pattern = /^[1-9]*[1-9][0-9]*$/ ;
const pattern = /^[1-9]*[1-9][0-9]*$/
if ( pattern . test ( value ) && value != 1 ) {
return true
}
@ -194,276 +212,337 @@ const Trend = (props) => {
return true
}
return false
}
let dataSource = abnParam . filter ( a => a . abnType == 3 && a . factorId == factorId )
const rowSelection = {
selectedRowKeys : selectedRowKeys ,
onChange : onSelectChange ,
} ;
let filterData = dataSource ;
let flag = false ;
let keyArr = [ ] ;
let tmpds = [ ] ;
let dataPush = [ ] ;
}
let filterData = dataSource
let flag = false
let keyArr = [ ]
let tmpds = [ ]
let dataPush = [ ]
Object . keys ( filterFunc ) . forEach ( key => {
const filter = filterFunc [ key ] ;
filterData = dataSource ;
const filter = filterFunc [ key ]
filterData = dataSource
if ( filter != null ) {
flag = true ;
flag = true
filterData = filterData . filter ( filter )
if ( filterData . length > 0 ) {
filterData . map ( s => {
if ( keyArr . indexOf ( s . id ) == - 1 ) {
keyArr . push ( s . id ) ;
dataPush . push ( s ) ;
keyArr . push ( s . id )
dataPush . push ( s )
}
} )
}
}
} )
tmpds = flag ? dataPush . sort ( ( a , b ) => a . id - b . id ) : dataSource . sort ( ( a , b ) => a . id - b . id ) ;
tmpds = flag ? dataPush . sort ( ( a , b ) => a . id - b . id ) : dataSource . sort ( ( a , b ) => a . id - b . id )
let columns = [
{
title : "测点位置" ,
dataIndex : "sensorName" ,
key : "sensorName" ,
width : '9%'
title : '测点位置' ,
dataIndex : 'sensorName' ,
key : 'sensorName' ,
width : '9%' ,
} ,
{
title : "监测项" ,
dataIndex : "factorName" ,
key : "factorName" ,
title : '监测项' ,
dataIndex : 'factorName' ,
key : 'factorName' ,
width : '10%' ,
render : ( text , record ) => (
record . factorName + "/" + itName
) ,
render : ( text , record ) => record . factorName + '/' + itName ,
} ,
{
title : "分析时段" ,
dataIndex : "params" ,
key : "params1" ,
title : '分析时段' ,
dataIndex : 'params' ,
key : 'params1' ,
width : '9%' ,
render : text => text . days_Last + "个月"
render : text => text . days_Last + '个月' ,
} ,
{
title : "毛刺阈值" ,
dataIndex : "params" ,
key : "params2" ,
title : '毛刺阈值' ,
dataIndex : 'params' ,
key : 'params2' ,
width : '9%' ,
render : text => text . thr_burr
render : text => text . thr_burr ,
} ,
{
title : "窗口数" ,
dataIndex : "params" ,
key : "params3" ,
title : '窗口数' ,
dataIndex : 'params' ,
key : 'params3' ,
width : '9%' ,
render : text => text . win_med
render : text => text . win_med ,
} ,
{
title : "回归系数" ,
dataIndex : "params" ,
key : "params4" ,
title : '回归系数' ,
dataIndex : 'params' ,
key : 'params4' ,
width : '9%' ,
render : text => text . win_avg
render : text => text . win_avg ,
} ,
{
title : "导数阈值" ,
dataIndex : "params" ,
key : "params5" ,
title : '导数阈值' ,
dataIndex : 'params' ,
key : 'params5' ,
width : '9%' ,
render : text => text . thr_der
render : text => text . thr_der ,
} ,
{
title : "渐变点个数" ,
dataIndex : "params" ,
key : "params6" ,
title : '渐变点个数' ,
dataIndex : 'params' ,
key : 'params6' ,
width : '9%' ,
render : text => text . win_grad
render : text => text . win_grad ,
} ,
{
title : "渐变阈值" ,
dataIndex : "params" ,
key : "params7" ,
title : '渐变阈值' ,
dataIndex : 'params' ,
key : 'params7' ,
width : '9%' ,
render : text => text . thr_grad
render : text => text . thr_grad ,
} ,
{
title : "启用状态" ,
dataIndex : "enabled" ,
key : "enabled" ,
title : '启用状态' ,
dataIndex : 'enabled' ,
key : 'enabled' ,
width : '9%' ,
render : ( text , record ) => (
record . enabled ? < Tag color = "blue" > 已启用 < / Tag > : < Tag > 已禁用 < / Tag >
)
render : ( text , record ) => ( record . enabled ? < Tag color = 'blue' > 已启用 < / Tag > : < Tag > 已禁用 < / Tag > ) ,
} ,
{
title : "操作" ,
key : "action" ,
title : '操作' ,
key : 'action' ,
width : '9%' ,
render : ( text , record ) => (
< span >
< Button theme = 'borderless' type = 'primary' onClick = { ( e ) => compareAndEdit ( e , record ) } > 编辑 < / Button >
< span className = "ant-divider" > < / span >
< Popconfirm title = "确认删除该参数配置?" id = { record . id } onConfirm = { ( ) => { removeItem ( record . id ) } } >
< Button theme = 'borderless' type = 'danger' > 删除 < / Button >
< Button theme = 'borderless' type = 'primary' onClick = { e => compareAndEdit ( e , record ) } >
编辑
< / Button >
< span className = 'ant-divider' > < / span >
< Popconfirm
title = '确认删除该参数配置?'
id = { record . id }
onConfirm = { ( ) => {
removeItem ( record . id )
} } >
< Button theme = 'borderless' type = 'danger' >
删除
< / Button >
< / Popconfirm >
< / span >
) ,
}
} ,
]
return ( < Card style = { { marginTop : 15 } } >
< Form style = { { marginBottom : 15 } } labelPosition = 'left' getFormApi = { formApi => {
return (
< Card style = { { marginTop : 15 } } >
< Form
style = { { marginBottom : 15 } }
labelPosition = 'left'
getFormApi = { formApi => {
form . current = formApi
} } >
< Row style = { { display : 'flex' , alignItems : 'center' } } >
< Row style = { { display : 'flex' , alignItems : 'center' } } >
< Col span = { 5 } >
< Form.Input field = 'keywords' noLabel = { true } style = { { marginBottom : 0 , width : '95%' } } placeholder = "关键词:测点位置、监测因素" onChange = { handleInputChange } >
< / Form.Input >
< Form.Input
field = 'keywords'
noLabel = { true }
style = { { marginBottom : 0 , width : '95%' } }
placeholder = '关键词:测点位置、监测因素'
onChange = { handleInputChange } > < / Form.Input >
< / Col >
< Col span = { 2 } >
< Form.Switch label = '是否启用' field = 'switch' style = { { marginBottom : 0 } } checked onChange = { onSwitchChange } >
< / Form.Switch >
< Form.Switch
label = '是否启用'
field = 'switch'
style = { { marginBottom : 0 } }
checked
onChange = { onSwitchChange } > < / Form.Switch >
< / Col >
< Col span = { 2 } >
< Popconfirm style = { { marginBottom : 0 } } title = "确认批量删除选中的参数配置?" onConfirm = { batchDelete } >
< Button style = { { fontSize : 13 } } theme = 'solid' type = 'danger' > 批量删除 < / Button >
< Popconfirm style = { { marginBottom : 0 } } title = '确认批量删除选中的参数配置?' onConfirm = { batchDelete } >
< Button style = { { fontSize : 13 } } theme = 'solid' type = 'danger' >
批量删除
< / Button >
< / Popconfirm >
< / Col >
< Col span = { 2 } >
< IconPlus style = { { paddingTop : 9 } } onClick = { iconClick } / >
< / Col >
< / Row >
{ showBatchConfig ?
< Row style = { { display : 'flex' , alignItems : 'center' , marginTop : 10 } } >
{ showBatchConfig ? (
< Row style = { { display : 'flex' , alignItems : 'center' , marginTop : 10 } } >
< Col span = { 3 } >
< Form.Select showSearch filter noLabel = { true } field = "timeRange" onChange = { rangeChange }
placeholder = "请选择分析时长" style = { { width : '93%' , marginBottom : 0 } } >
< Select.Option value = "1" > 1 个月 < / Select.Option >
< Select.Option value = "2" > 2 个月 < / Select.Option >
< Select.Option value = "3" > 3 个月 < / Select.Option >
< Form.Select
showSearch
filter
noLabel = { true }
field = 'timeRange'
onChange = { rangeChange }
placeholder = '请选择分析时长'
style = { { width : '93%' , marginBottom : 0 } } >
< Select.Option value = '1' > 1 个月 < / Select.Option >
< Select.Option value = '2' > 2 个月 < / Select.Option >
< Select.Option value = '3' > 3 个月 < / Select.Option >
< / Form.Select >
< / Col >
< Col span = { 3 } >
< Form.Input style = { { marginBottom : 0 , width : '93%' } }
< Form.Input
style = { { marginBottom : 0 , width : '93%' } }
field = 'bv'
noLabel = { true }
placeholder = "毛刺阈值:数字"
placeholder = '毛刺阈值:数字'
onChange = { e => bvValueBatch ( e ) }
rules = { [ {
required : true , message : "请输入正整数" , validator : checkInterger
} ] } trigger = 'blur' / >
rules = { [
{
required : true ,
message : '请输入正整数' ,
validator : checkInterger ,
} ,
] }
trigger = 'blur'
/ >
< / Col >
< Col span = { 3 } >
< Form.Input
style = { { marginBottom : 0 , width : '93%' } }
field = 'ws'
placeholder = "滑动中值:正值"
placeholder = '滑动中值:正值'
noLabel = { true }
rules = { [ {
required : true , message : "请输入正整数" , validator : checkInterger
} ] }
rules = { [
{
required : true ,
message : '请输入正整数' ,
validator : checkInterger ,
} ,
] }
onChange = { e => winSizeBatch ( e ) }
trigger = 'blur' / >
trigger = 'blur'
/ >
< / Col >
< Col span = { 3 } >
< Form.Input
style = { { marginBottom : 0 , width : '93%' } }
field = 'rc'
placeholder = "滑动均值:正值"
noLabel = { true } rules = { [ {
required : true , message : "请输入正整数" , validator : checkInterger
} ] }
placeholder = '滑动均值:正值'
noLabel = { true }
rules = { [
{
required : true ,
message : '请输入正整数' ,
validator : checkInterger ,
} ,
] }
onChange = { e => reCoefBatch ( e ) }
trigger = 'blur' / >
trigger = 'blur'
/ >
< / Col >
< Col span = { 3 } >
< Form.Input
style = { { marginBottom : 0 , width : '93%' } }
field = 'dv'
placeholder = "导数阈值:数字"
placeholder = '导数阈值:数字'
noLabel = { true }
rules = { [ {
required : true , message : "请输入正整数" , validator : checkNumber
} ] }
rules = { [
{
required : true ,
message : '请输入正整数' ,
validator : checkNumber ,
} ,
] }
onChange = { e => deValueBatch ( e ) }
trigger = 'blur' / >
trigger = 'blur'
/ >
< / Col >
< Col span = { 3 } >
< Form.Input
style = { { marginBottom : 0 , width : '93%' } }
field = 'pn'
placeholder = "渐变点个数:正值"
noLabel = { true } rules = { [ {
required : true , message : "请输入正整数" , validator : checkPoint
} ] }
placeholder = '渐变点个数:正值'
noLabel = { true }
rules = { [
{
required : true ,
message : '请输入正整数' ,
validator : checkPoint ,
} ,
] }
onChange = { e => graPointBatch ( e ) }
trigger = 'blur' / >
trigger = 'blur'
/ >
< / Col >
< Col span = { 3 } >
< Form.Input
style = { { marginBottom : 0 , width : '93%' } }
field = 'gv'
placeholder = "渐变阈值:数字"
noLabel = { true } rules = { [ {
required : true , message : "请输入正整数" , validator : checkNumber
} ] }
placeholder = '渐变阈值:数字'
noLabel = { true }
rules = { [
{
required : true ,
message : '请输入正整数' ,
validator : checkNumber ,
} ,
] }
onChange = { e => graValueBatch ( e ) }
trigger = 'blur' / >
trigger = 'blur'
/ >
< / Col >
< Col span = { 2 } >
< Button onClick = { batchSave } theme = 'solid' type = 'primary' > 批量保存 < / Button >
< Button onClick = { batchSave } theme = 'solid' type = 'primary' >
批量保存
< / Button >
< / Col >
< / Row > : '' }
< / Row >
) : (
''
) }
< / Form >
< Table rowSelection = { rowSelection } columns = { columns } dataSource = { tmpds } pagination = { false } / >
< Table rowSelection = { rowSelection } columns = { columns } dataSource = { tmpds } pagination = { false } / >
< div
style = { {
display : "flex" ,
justifyContent : "flex-end" ,
padding : "20px 20px" ,
} }
>
< span style = { { lineHeight : "30px" , fontSize : 13 , color : 'rgba(0,90,189,0.8)' } } >
共 { limits } 条信息
< / span >
display : 'flex' ,
justifyContent : 'flex-end' ,
padding : '20px 20px' ,
} } >
< span style = { { lineHeight : '30px' , fontSize : 13 , color : 'rgba(0,90,189,0.8)' } } > 共 { limits } 条信息 < / span >
< Pagination
total = { limits }
showSizeChanger
currentPage = { query . page + 1 }
pageSizeOpts = { [ 10 , 20 , 30 , 40 ] }
onChange = { ( currentPage , pageSize ) => {
changeQuery ( pageSize , currentPage - 1 )
page . current = currentPage - 1
changeQuery ( pageSize , currentPage - 1 )
/ / p a g e . c u r r e n t = c u r r e n t P a g e - 1
} }
/ >
< / div >
{ modalVisible ? < TrendModal
{ modalVisible ? (
< TrendModal
/ / s t r u c t I d = { s t r u c t I d }
visible = { true }
project = { project }
project = { project }
closeModal = { modalCancel }
modalData = { modalData }
sensorId = { sensorId }
factorId = { factorId }
/ > : ' ' }
/ >
) : (
''
) }
< / Card >
) ;
)
}
function mapStateToProps ( state ) {
const { abnParam , global } = state
const { abnParam , global } = state
/ / l e t i s R e q u e s t i n g = a b n P a r a m S t a t e ? . i s R e q u e s t i n g ;
return {
isRequesting : false , / / 请 求 状 态
isRequesting : false , / / 请 求 状 态
abnParam : abnParam ? . data ? . rows || [ ] ,
actions : global . actions
actions : global . actions ,
}
}
export default connect ( mapStateToProps ) ( Trend )