You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
469 lines
17 KiB
469 lines
17 KiB
'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';
|
|
|
|
|
|
|
|
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({})
|
|
const [modalVisible, setModalVisible] = useState(false)
|
|
const [showBatchConfig, setShowBatchConfig] = useState(false)
|
|
const [timeRange, setTimeRange] = useState('')
|
|
const [bvBatch, setBvBatch] = useState('')
|
|
const [winSize, setWinSize] = useState('')
|
|
const [reCoef, setReCoef] = useState('')
|
|
const [deValue, setDeValue] = useState('')
|
|
const [graPoint, setGraPoint] = useState('')
|
|
const [graValue, setGraValue] = useState('')
|
|
const [modalData, setModalData] = useState(null)
|
|
const filterSet = { sensorName: null, factorName: null }
|
|
const {install}=actions
|
|
const onSelectChange = (selectedRowKeys) => {
|
|
setSelectedRowKeys(selectedRowKeys)
|
|
}
|
|
const compareAndEdit = (e, record) => {
|
|
setModalVisible(true)
|
|
setModalData(record)
|
|
}
|
|
const modalCancel = e => {
|
|
setModalVisible(false)
|
|
};
|
|
const removeItem = e => {
|
|
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){
|
|
limitChange(rs.payload.data.count)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
const handleInputChange = e => {
|
|
if (e != null) {
|
|
const value = e
|
|
let func = (ep => (s => (s.sensorName).search(ep) > -1))(value)
|
|
filterSet.sensorName = func
|
|
func = (ep => (s => (s.factorName).search(ep) > -1))(value)
|
|
filterSet.factorName = func
|
|
} else {
|
|
filterSet.sensorName = null
|
|
filterSet.factorName = null
|
|
}
|
|
setFilterFunc(filterSet)
|
|
}
|
|
//批量启用or禁用
|
|
const onSwitchChange = (e) => {
|
|
if (selectedRowKeys.length != 0) {
|
|
let ids = selectedRowKeys.join(',');
|
|
let data = {
|
|
enabled: e,
|
|
use: 'switch'
|
|
};
|
|
//启用和禁用接口
|
|
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){
|
|
limitChange(rs.payload.data.count)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
//批量删除
|
|
const batchDelete = () => {
|
|
if (selectedRowKeys.length != 0) {
|
|
let ids = selectedRowKeys.join(',');
|
|
//删除接口
|
|
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){
|
|
limitChange(rs.payload.data.count)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
} else {
|
|
Notification.warning({
|
|
content: '您尚未勾选任何参数配置！',
|
|
duration: 3,
|
|
}) }
|
|
}
|
|
//批量保存
|
|
const batchSave = () => {
|
|
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//分析时长
|
|
},
|
|
use: 'notSwitch',
|
|
};
|
|
|
|
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){
|
|
limitChange(rs.payload.data.count)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
} else if (dataSource.length != 0) {
|
|
Notification.warning({
|
|
content: '您尚未勾选任何参数配置！',
|
|
duration: 3,
|
|
})
|
|
}
|
|
})
|
|
}
|
|
const iconClick = () => {
|
|
if (!showBatchConfig) {
|
|
setShowBatchConfig(true);
|
|
} else {
|
|
setShowBatchConfig(false);
|
|
}
|
|
}
|
|
const rangeChange = (value) => {
|
|
setTimeRange(value)
|
|
}
|
|
const bvValueBatch = (value) => {
|
|
setBvBatch(value)
|
|
}
|
|
const winSizeBatch = (value) => {
|
|
setWinSize(value)
|
|
}
|
|
const reCoefBatch = (value) => {
|
|
setReCoef(value)
|
|
}
|
|
const deValueBatch = (value) => {
|
|
setDeValue(value)
|
|
}
|
|
const graPointBatch = (value) => {
|
|
setGraPoint(value)
|
|
}
|
|
const graValueBatch = (value) => {
|
|
setGraValue(value)
|
|
}
|
|
const checkInterger = (rule, val) => {
|
|
// if(val){
|
|
const strRegex = /^[1-9]*[1-9][0-9]*$/
|
|
if (strRegex.test(val)) {
|
|
return true
|
|
}
|
|
return false
|
|
// }
|
|
|
|
};
|
|
const checkPoint = (rule, value) => {
|
|
const pattern = /^[1-9]*[1-9][0-9]*$/;
|
|
if (pattern.test(value) && value != 1) {
|
|
return true
|
|
}
|
|
return false
|
|
}
|
|
const checkNumber = (rule, val) => {
|
|
const strRegex = /^-?\d+(\.\d+)?$/
|
|
if (strRegex.test(val)) {
|
|
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 = [];
|
|
Object.keys(filterFunc).forEach(key => {
|
|
const filter = filterFunc[key];
|
|
filterData = dataSource;
|
|
if (filter != null) {
|
|
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);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
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: "factorName",
|
|
key: "factorName",
|
|
width: '10%',
|
|
render: (text, record) => (
|
|
record.factorName + "/" + itName
|
|
),
|
|
},
|
|
{
|
|
title: "分析时段",
|
|
dataIndex: "params",
|
|
key: "params1",
|
|
width: '9%',
|
|
render: text => text.days_Last + "个月"
|
|
},
|
|
{
|
|
title: "毛刺阈值",
|
|
dataIndex: "params",
|
|
key: "params2",
|
|
width: '9%',
|
|
render: text => text.thr_burr
|
|
},
|
|
{
|
|
title: "窗口数",
|
|
dataIndex: "params",
|
|
key: "params3",
|
|
width: '9%',
|
|
render: text => text.win_med
|
|
},
|
|
{
|
|
title: "回归系数",
|
|
dataIndex: "params",
|
|
key: "params4",
|
|
width: '9%',
|
|
render: text => text.win_avg
|
|
},
|
|
{
|
|
title: "导数阈值",
|
|
dataIndex: "params",
|
|
key: "params5",
|
|
width: '9%',
|
|
render: text => text.thr_der
|
|
},
|
|
{
|
|
title: "渐变点个数",
|
|
dataIndex: "params",
|
|
key: "params6",
|
|
width: '9%',
|
|
render: text => text.win_grad
|
|
},
|
|
{
|
|
title: "渐变阈值",
|
|
dataIndex: "params",
|
|
key: "params7",
|
|
width: '9%',
|
|
render: text => text.thr_grad
|
|
},
|
|
{
|
|
title: "启用状态",
|
|
dataIndex: "enabled",
|
|
key: "enabled",
|
|
width: '9%',
|
|
render: (text, record) => (
|
|
record.enabled ? <Tag color="blue">已启用</Tag> : <Tag>已禁用</Tag>
|
|
)
|
|
},
|
|
{
|
|
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>
|
|
</Popconfirm>
|
|
</span>
|
|
),
|
|
}
|
|
]
|
|
return (<Card style={{ marginTop: 15 }}>
|
|
<Form style={{ marginBottom: 15 }} labelPosition='left' getFormApi={formApi => {
|
|
form.current = formApi
|
|
}}>
|
|
<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>
|
|
</Col>
|
|
<Col span={2}>
|
|
<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>
|
|
</Col>
|
|
<Col span={2}>
|
|
<IconPlus style={{ paddingTop: 9 }} onClick={iconClick} />
|
|
</Col>
|
|
</Row>
|
|
{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>
|
|
</Col>
|
|
<Col span={3}>
|
|
<Form.Input style={{ marginBottom: 0, width: '93%' }}
|
|
field='bv'
|
|
noLabel={true}
|
|
placeholder="毛刺阈值：数字"
|
|
onChange={e => bvValueBatch(e)}
|
|
rules={[{
|
|
required: true, message: "请输入正整数", validator: checkInterger
|
|
}]} trigger='blur'/>
|
|
</Col>
|
|
<Col span={3}>
|
|
<Form.Input
|
|
style={{ marginBottom: 0, width: '93%' }}
|
|
field='ws'
|
|
placeholder="滑动中值：正值"
|
|
noLabel={true}
|
|
rules={[{
|
|
required: true, message: "请输入正整数", validator: checkInterger
|
|
}]}
|
|
onChange={e => winSizeBatch(e)}
|
|
trigger='blur'/>
|
|
</Col>
|
|
<Col span={3}>
|
|
<Form.Input
|
|
style={{ marginBottom: 0, width: '93%' }}
|
|
field='rc'
|
|
placeholder="滑动均值：正值"
|
|
noLabel={true} rules={[{
|
|
required: true, message: "请输入正整数", validator: checkInterger
|
|
}]}
|
|
onChange={e => reCoefBatch(e)}
|
|
trigger='blur'/>
|
|
</Col>
|
|
<Col span={3}>
|
|
<Form.Input
|
|
style={{ marginBottom: 0, width: '93%' }}
|
|
field='dv'
|
|
placeholder="导数阈值：数字"
|
|
noLabel={true}
|
|
rules={[{
|
|
required: true, message: "请输入正整数", validator: checkNumber
|
|
}]}
|
|
onChange={e => deValueBatch(e)}
|
|
trigger='blur'/>
|
|
</Col>
|
|
<Col span={3}>
|
|
<Form.Input
|
|
style={{ marginBottom: 0, width: '93%' }}
|
|
field='pn'
|
|
placeholder="渐变点个数：正值"
|
|
noLabel={true} rules={[{
|
|
required: true, message: "请输入正整数", validator: checkPoint
|
|
}]}
|
|
onChange={e => graPointBatch(e)}
|
|
trigger='blur'/>
|
|
</Col>
|
|
<Col span={3}>
|
|
<Form.Input
|
|
style={{ marginBottom: 0, width: '93%' }}
|
|
field='gv'
|
|
placeholder="渐变阈值：数字"
|
|
noLabel={true} rules={[{
|
|
required: true, message: "请输入正整数", validator: checkNumber
|
|
}]}
|
|
onChange={e => graValueBatch(e)}
|
|
trigger='blur'/>
|
|
</Col>
|
|
<Col span={2}>
|
|
<Button onClick={batchSave} theme='solid' type='primary'>批量保存</Button>
|
|
</Col>
|
|
</Row> : ''}
|
|
</Form>
|
|
<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>
|
|
<Pagination
|
|
total={limits}
|
|
showSizeChanger
|
|
currentPage={query.page + 1}
|
|
pageSizeOpts={[10, 20, 30, 40]}
|
|
onChange={(currentPage, pageSize) => {
|
|
changeQuery( pageSize, currentPage - 1)
|
|
page.current = currentPage - 1
|
|
}}
|
|
/>
|
|
</div>
|
|
{modalVisible ? <TrendModal
|
|
// structId={structId}
|
|
visible={true}
|
|
project={ project}
|
|
closeModal={modalCancel}
|
|
modalData={modalData}
|
|
sensorId={sensorId}
|
|
factorId={factorId}
|
|
|
|
/> : ''}
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function mapStateToProps(state) {
|
|
const { abnParam,global } = state
|
|
// let isRequesting = abnParamState?.isRequesting;
|
|
|
|
return {
|
|
isRequesting: false,//请求状态
|
|
abnParam: abnParam?.data?.rows || [],
|
|
actions:global.actions
|
|
}
|
|
}
|
|
export default connect(mapStateToProps)(Trend)
|
|
|
|
|