433 lines
13 KiB
JavaScript
433 lines
13 KiB
JavaScript
|
// 核心库
|
||
|
|
import React from 'react'
|
||
|
|
import { connect } from 'dva'
|
||
|
|
// 组件库
|
||
|
|
import { Menu, Input, Row, Col, Form, Radio, Button, Icon, Popconfirm, Result, Empty, message, Modal } from 'antd'
|
||
|
|
import { Scrollbars } from 'react-custom-scrollbars'
|
||
|
|
import { LayoutCard, IFComponent, TableTransfer } from '@woowalker/feui'
|
||
|
|
// 工具库
|
||
|
|
import { initFilter, guid } from "../../../utils/common"
|
||
|
|
import { gradientColors } from '../../../utils/gradientColors'
|
||
|
|
// 样式
|
||
|
|
import styles from './index.css'
|
||
|
|
|
||
|
|
const { GradientCard } = LayoutCard
|
||
|
|
class FMVarCruveConfigModel extends React.Component {
|
||
|
|
constructor(props) {
|
||
|
|
super(props)
|
||
|
|
this.state = {
|
||
|
|
visible: false,
|
||
|
|
loading: false,
|
||
|
|
// 配置项
|
||
|
|
activeKey: '',
|
||
|
|
selectVar: {},
|
||
|
|
selectVarCurve: [],
|
||
|
|
//selectedVar: [],
|
||
|
|
config_name: '',
|
||
|
|
// 配置项对应数据
|
||
|
|
tableData: {},
|
||
|
|
dataSource: [],
|
||
|
|
// 配置项校验
|
||
|
|
formValid: {
|
||
|
|
help: '',
|
||
|
|
validateStatus: ''
|
||
|
|
},
|
||
|
|
paginat: {
|
||
|
|
current: 1
|
||
|
|
},
|
||
|
|
search: ''
|
||
|
|
}
|
||
|
|
// scroll bar ref
|
||
|
|
this.scrollRef = null
|
||
|
|
this.columns = [{ title: '变量名称', dataIndex: 'NAME', key: 'NAME' }]
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
this.getCurveConfigs();
|
||
|
|
if (this.props.onRef) {
|
||
|
|
this.props.onRef(this)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
showModal = () => {
|
||
|
|
this.setState({
|
||
|
|
visible: true,
|
||
|
|
}, () => {
|
||
|
|
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
handleOK = e => {
|
||
|
|
this.setState({
|
||
|
|
visible: false
|
||
|
|
}, () => {
|
||
|
|
this.props.getTableData(this.state.activeKey)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
saveSetting = () => {
|
||
|
|
const { selectVar } = this.state
|
||
|
|
const json = {
|
||
|
|
OrgId: this.props.login.OrgId,
|
||
|
|
Data: selectVar
|
||
|
|
}
|
||
|
|
this.props.dispatch({
|
||
|
|
type: 'app/getDataByPost',
|
||
|
|
url: 'FM/FMVarCurve/SaveVariableSetting',
|
||
|
|
payload: json
|
||
|
|
}).then(res => {
|
||
|
|
if (res) {
|
||
|
|
if (!res.IsSucceed) {
|
||
|
|
message.error(res.Msg)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
handleCancel = e => {
|
||
|
|
this.setState({
|
||
|
|
visible: false,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
getCurveConfigs = () => {
|
||
|
|
const { login, dispatch } = this.props
|
||
|
|
const json = initFilter(login.OrgId);
|
||
|
|
return dispatch({
|
||
|
|
type: 'app/getDataByPost',
|
||
|
|
url: 'FM/FMVarCurve/getCurveConfigs',
|
||
|
|
payload: json,
|
||
|
|
onlyData: false
|
||
|
|
}).then(res => {
|
||
|
|
if (res && res.Data.length > 0) {
|
||
|
|
this.setState({
|
||
|
|
selectVarCurve: res.Data,
|
||
|
|
selectVar: res.Data[0],
|
||
|
|
activeKey: res.Data[0].ID,
|
||
|
|
}, () => {
|
||
|
|
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
this.handleOptionAdd();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
getTransferData = ({ pagination, searchVal }) => {
|
||
|
|
const { login, dispatch } = this.props
|
||
|
|
const { activeKey, selectVar } = this.state
|
||
|
|
var strActiveKey = activeKey;
|
||
|
|
if (selectVar.newOption)
|
||
|
|
strActiveKey = "";
|
||
|
|
const json = initFilter(login.OrgId, searchVal, '', 0, pagination.current || 1, strActiveKey)
|
||
|
|
return dispatch({
|
||
|
|
type: 'app/getDataByPost',
|
||
|
|
url: 'FM/FMVarCurve/GetTransferData',
|
||
|
|
payload: json,
|
||
|
|
onlyData: false
|
||
|
|
}).then(res => {
|
||
|
|
selectVar.Nav_VarCurveDetail = res.Data.selectedData;
|
||
|
|
this.setState({ selectVar });
|
||
|
|
|
||
|
|
return res;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
addTransferData = () => {
|
||
|
|
const { login, dispatch } = this.props
|
||
|
|
const json = initFilter(login.OrgId, '', '', 0, 1)
|
||
|
|
return dispatch({
|
||
|
|
type: 'app/getDataByPost',
|
||
|
|
url: 'FM/FMVarCurve/AddTransferData',
|
||
|
|
payload: json,
|
||
|
|
onlyData: false
|
||
|
|
}).then(res => {
|
||
|
|
if (res?.Data?.selectVarCurve) {
|
||
|
|
this.setState({ selectVarCurve: { Nav_VarCurveDetail: [] } })
|
||
|
|
}
|
||
|
|
return res
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
handleTransferChange = (data) => {
|
||
|
|
const { selectVar } = this.state
|
||
|
|
|
||
|
|
selectVar.Nav_VarCurveDetail = data.map(({ ID, VAR_ID }) => ({
|
||
|
|
VAR_CURVE_ID: this.state.activeKey,
|
||
|
|
VAR_ID: VAR_ID, YAXIS_INDEX: 0, ORG_ID: this.props.login.OrgId
|
||
|
|
}))
|
||
|
|
this.setState({
|
||
|
|
selectVar
|
||
|
|
}, () => {
|
||
|
|
//this.saveSetting()
|
||
|
|
this.handleOptionSave(false);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
handleRadioChange = (evt, index) => {
|
||
|
|
const { selectVar } = this.state
|
||
|
|
selectVar.Nav_VarCurveDetail[index].YAXIS_INDEX = evt.target.value
|
||
|
|
this.setState({ selectVar }, () => {
|
||
|
|
//this.saveSetting()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
handleMenuSelected = ({ selectedKeys }) => {
|
||
|
|
this.setState({
|
||
|
|
activeKey: selectedKeys[0],
|
||
|
|
selectVar: this.state.selectVarCurve.find(x => x.ID === selectedKeys[0])
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
handleOptionAdd = () => {
|
||
|
|
const activeKey = guid();
|
||
|
|
var newOptionConfig = {
|
||
|
|
ID: activeKey,
|
||
|
|
CONFIG_NAME: `配置${this.state.selectVarCurve.length + 1}`,
|
||
|
|
GET_INTERVALS: 1,
|
||
|
|
Nav_VarCurveDetail: [],
|
||
|
|
newOption: true
|
||
|
|
};
|
||
|
|
this.setState({
|
||
|
|
activeKey,
|
||
|
|
selectVarCurve: [].concat(this.state.selectVarCurve, [newOptionConfig]),
|
||
|
|
selectVar: newOptionConfig
|
||
|
|
}, () => {
|
||
|
|
//this.saveSetting()
|
||
|
|
this.addTransferData().then(() => {
|
||
|
|
this.scrollRef && this.scrollRef.scrollToBottom()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
handleOptionDel = () => {
|
||
|
|
const { selectVarCurve, activeKey, selectVar } = this.state
|
||
|
|
const findIndex = selectVarCurve.findIndex(item => item.ID === activeKey)
|
||
|
|
|
||
|
|
const lowerIndex = findIndex - 1
|
||
|
|
const higherIndex = findIndex + 1
|
||
|
|
const newActiveKey = lowerIndex >= 0 ? selectVarCurve[lowerIndex].ID : higherIndex <= selectVarCurve.length - 1 ? selectVarCurve[higherIndex].ID : ''
|
||
|
|
|
||
|
|
if (selectVarCurve[findIndex].newOption) {
|
||
|
|
message.success('删除成功')
|
||
|
|
selectVarCurve.splice(findIndex, 1)
|
||
|
|
this.setState({ activeKey: newActiveKey, selectVarCurve },
|
||
|
|
() => {
|
||
|
|
this.setState({
|
||
|
|
selectVar: selectVarCurve.find(x => x.ID === newActiveKey)
|
||
|
|
}, () => {
|
||
|
|
//this.saveSetting()
|
||
|
|
})
|
||
|
|
});
|
||
|
|
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
this.props.dispatch({
|
||
|
|
type: 'app/getDataByGet',
|
||
|
|
url: 'FM/FMVarCurve/FullDelete',
|
||
|
|
payload: { ID: selectVarCurve[findIndex].ID }
|
||
|
|
}).then(res => {
|
||
|
|
if (res) {
|
||
|
|
message.success('删除成功')
|
||
|
|
selectVarCurve.splice(findIndex, 1)
|
||
|
|
this.setState({ activeKey: newActiveKey, selectVarCurve },
|
||
|
|
() => {
|
||
|
|
this.setState({
|
||
|
|
selectVar: selectVarCurve.find(x => x.ID === newActiveKey)
|
||
|
|
}, () => {
|
||
|
|
//this.saveSetting()
|
||
|
|
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
handleOptionSave = (msg) => {
|
||
|
|
const { selectVar } = this.state
|
||
|
|
const { login, dispatch } = this.props
|
||
|
|
const updateData = {
|
||
|
|
ID: selectVar.ID,
|
||
|
|
ORG_ID: login.OrgId,
|
||
|
|
USER_ID: login.userId,
|
||
|
|
CONFIG_NAME: selectVar.CONFIG_NAME,
|
||
|
|
GET_INTERVALS: selectVar.GET_INTERVALS,
|
||
|
|
Nav_VarCurveDetail: selectVar.Nav_VarCurveDetail
|
||
|
|
}
|
||
|
|
dispatch({
|
||
|
|
type: 'app/getDataByPost',
|
||
|
|
url: 'FM/FMVarCurve/FullUpdate',
|
||
|
|
payload: updateData
|
||
|
|
}).then(res => {
|
||
|
|
if (msg && res) {
|
||
|
|
message.success('保存成功')
|
||
|
|
}
|
||
|
|
//
|
||
|
|
selectVar.newOption = false;
|
||
|
|
this.setState(selectVar);
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
handleFormChange = (val) => {
|
||
|
|
const { selectVarCurve, activeKey, selectVar } = this.state
|
||
|
|
const find = selectVarCurve.find(item => item.ID === activeKey)
|
||
|
|
find['CONFIG_NAME'] = val
|
||
|
|
selectVar.CONFIG_NAME = val
|
||
|
|
this.setState({
|
||
|
|
formValid: {
|
||
|
|
help: val ? '' : '请输入配置名称',
|
||
|
|
validateStatus: val ? '' : 'error'
|
||
|
|
},
|
||
|
|
selectVarCurve,
|
||
|
|
selectVar
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
handleChartChange = (evt) => {
|
||
|
|
const { selectVar } = this.state
|
||
|
|
selectVar.GET_INTERVALS = evt.target.value
|
||
|
|
this.setState({ selectVar }, () => {
|
||
|
|
//this.saveSetting()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
const { loading, selectVarCurve, activeKey, formValid, visible, selectVar } = this.state
|
||
|
|
return (
|
||
|
|
<Modal
|
||
|
|
title='变量曲线配置'
|
||
|
|
maskClosable={false}
|
||
|
|
onOk={this.handleOK}
|
||
|
|
onCancel={this.handleCancel}
|
||
|
|
visible={visible}
|
||
|
|
bodyStyle={{ padding: 8, backgroundColor: '#f2f2f2' }}
|
||
|
|
width='80%'
|
||
|
|
style={{ maxWidth: 1480, minWidth: 1200, top: '8%' }}
|
||
|
|
>
|
||
|
|
<div style={{ width: '100%', height: '70%' }}>
|
||
|
|
<div style={{ width: 100, height: '100%', float: 'left' }}>
|
||
|
|
<IFComponent IF={!!selectVarCurve.length}>
|
||
|
|
<Scrollbars
|
||
|
|
ref={ref => this.scrollRef = ref}
|
||
|
|
hideTracksWhenNotNeeded
|
||
|
|
autoHeight
|
||
|
|
autoHeightMax={384}
|
||
|
|
autoHide
|
||
|
|
autoHideTimeout={1000}
|
||
|
|
autoHideDuration={200}
|
||
|
|
style={{ marginBottom: 8 }}
|
||
|
|
>
|
||
|
|
<Menu
|
||
|
|
mode='inline'
|
||
|
|
selectedKeys={[activeKey]}
|
||
|
|
onSelect={this.handleMenuSelected}
|
||
|
|
>
|
||
|
|
{
|
||
|
|
selectVarCurve.map(item => {
|
||
|
|
return (
|
||
|
|
<Menu.Item key={item.ID}>{item.newOption ? '*' : ''}{item.CONFIG_NAME}</Menu.Item>
|
||
|
|
)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</Menu>
|
||
|
|
</Scrollbars>
|
||
|
|
</IFComponent>
|
||
|
|
<Button block icon='plus' onClick={this.handleOptionAdd}>新增</Button>
|
||
|
|
</div>
|
||
|
|
<div style={{ width: 'calc(100% - 108px)', height: '100%', float: 'right' }}>
|
||
|
|
<IFComponent
|
||
|
|
IF={!!selectVarCurve.length}
|
||
|
|
ELSE={
|
||
|
|
<Result
|
||
|
|
icon={loading ? <Icon type='loading' /> : <Empty description=' ' />}
|
||
|
|
title={loading ? '数据加载中，请稍后...' : '暂无配置项，请新增配置'}
|
||
|
|
extra={<Button icon='plus' type='primary' onClick={this.handleOptionAdd}>新增</Button>}
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<div className='scroll_page' style={{ overflow: 'hidden auto' }}>
|
||
|
|
<LayoutCard>
|
||
|
|
<Form layout='inline'>
|
||
|
|
<Form.Item label='配置名称' required {...formValid}>
|
||
|
|
<Input value={selectVar?.CONFIG_NAME} onChange={evt => this.handleFormChange(evt.target.value)} />
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item label='数据间隔'>
|
||
|
|
<Radio.Group name='radiogroup' value={selectVar?.GET_INTERVALS} onChange={this.handleChartChange}>
|
||
|
|
<Radio value={0}>五分钟</Radio>
|
||
|
|
<Radio value={1}>一小时</Radio>
|
||
|
|
<Radio value={2}>一天</Radio>
|
||
|
|
</Radio.Group>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item>
|
||
|
|
<Button type='primary' onClick={() => this.handleOptionSave(true)}>保存</Button>
|
||
|
|
</Form.Item>
|
||
|
|
<Form.Item>
|
||
|
|
<Popconfirm
|
||
|
|
title="确定删除这条配置吗？"
|
||
|
|
onConfirm={this.handleOptionDel}
|
||
|
|
okText='确定'
|
||
|
|
cancelText='取消'
|
||
|
|
>
|
||
|
|
<Button type='delete'>刪除</Button>
|
||
|
|
</Popconfirm>
|
||
|
|
</Form.Item>
|
||
|
|
</Form>
|
||
|
|
</LayoutCard>
|
||
|
|
<LayoutCard style={{ marginTop: 8 }}>
|
||
|
|
<div className={styles.fmvp_transfer}>
|
||
|
|
<TableTransfer
|
||
|
|
key={activeKey}
|
||
|
|
filterKey='NAME'
|
||
|
|
rowKey="VAR_ID"
|
||
|
|
totalKeypath='Data.totalCount'
|
||
|
|
maxSelected={9}
|
||
|
|
getData={this.getTransferData}
|
||
|
|
columns={[this.columns]}
|
||
|
|
onChange={this.handleTransferChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div className={styles.fmvp_cardWrap}>
|
||
|
|
<Row gutter={8}>
|
||
|
|
{
|
||
|
|
selectVar?.Nav_VarCurveDetail != null && selectVar?.Nav_VarCurveDetail.length > 0 ?
|
||
|
|
selectVar?.Nav_VarCurveDetail.map((item, index) => {
|
||
|
|
const varName = item?.Nav_Var?.NAME
|
||
|
|
return (
|
||
|
|
<Col key={varName} span={8}>
|
||
|
|
<GradientCard
|
||
|
|
title={varName}
|
||
|
|
titleClassName={styles.fmvp_cardTitle}
|
||
|
|
colors={gradientColors[index % gradientColors.length]}
|
||
|
|
style={{ borderRadius: 4, marginBottom: 8 }}
|
||
|
|
>
|
||
|
|
<Radio.Group
|
||
|
|
value={item.YAXIS_INDEX}
|
||
|
|
onChange={evt => this.handleRadioChange(evt, index)}
|
||
|
|
style={{ padding: '8px 0' }}
|
||
|
|
>
|
||
|
|
<Radio value={0}>Y1轴</Radio>
|
||
|
|
<Radio value={1}>Y2轴</Radio>
|
||
|
|
</Radio.Group>
|
||
|
|
</GradientCard>
|
||
|
|
</Col>
|
||
|
|
)
|
||
|
|
}) : null
|
||
|
|
}
|
||
|
|
</Row>
|
||
|
|
</div>
|
||
|
|
</LayoutCard>
|
||
|
|
</div>
|
||
|
|
</IFComponent>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Modal>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export default connect(({ login, app }) => ({ login, app }))(FMVarCruveConfigModel)
|