AddModal.jsx 17.2 KB
Newer Older
1
import React, { useState, useEffect } from 'react';
2
import { Form, Modal, Input, Select, notification, DatePicker, Spin, Button, Card, Row, Col } from 'antd';
3 4 5 6 7 8 9 10 11 12
import styles from '../policiesIssued.less'
// import moment from 'moment';
// import locale from 'antd/es/date-picker/locale/zh_CN';
// import 'moment/locale/zh-cn';

import moment from 'moment'
import locale from 'antd/lib/date-picker/locale/zh_CN'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
import {
13
  getEquipmentInfo, getQutaList, addStrategyOptions, editStrategyOptions, getPredictDevice, getPredictDevicePoint, getPredictInfo
14
} from '@/services/intelligence/api';
15 16
import { DeleteOutlined } from '@ant-design/icons';

17 18 19 20 21 22 23 24


const { TextArea } = Input;
const AddModal = props => {
  const { callBackSubmit = () => { }, type, formObj, visible, deviceType } = props;
  const [loading, setLoading] = useState(false);
  const [isloading, setIsLoading] = useState(false);
  const [deviceCodes, setDeviceCode] = useState([]); //设备编码列表
25 26 27
  const [predictCode, setPredictCode] = useState([]); //预测编码列表
  const [deviceList, setDeviceList] = useState([]); //设备列表
  const [card, setCard] = useState([]); //卡片列表值
shaoan123's avatar
shaoan123 committed
28
  const [dateArr, setDateArr] = useState({ DeviationType: '秒', DeviationValue: 0, DurationType: '秒', DurationValue: 0}); //偏移量,时段时长
29
  const [source, setSource] = useState([])
30
  const [showTime, setShowTime] = useState(true)
31
  const [PredictID, setPredictID] = useState()
32 33 34 35 36 37 38
  const [form] = Form.useForm();
  const { Item } = Form;
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        let obj = form.getFieldsValue();
39 40 41 42 43 44
        let api = addStrategyOptions
        let query = {
          DeviceType: obj.DeviceType,
          StrategyDes: obj.StrategyDes,
          StrategyName: obj.StrategyName,
          StrategyType: obj.StrategyType,
45 46 47 48
          DeviationType: dateArr.DeviationType,
          DeviationValue: dateArr.DeviationValue,
          DurationType: dateArr.DurationType,
          DurationValue: dateArr.DurationValue,
49
          DetailInfos: card,
50 51
          CreateTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
          PredictID
52
        }
53 54 55 56 57 58 59 60 61
        type === 'edit' ? (query.ID = formObj.ID) && (api = editStrategyOptions) : delete query.ID && (api = addStrategyOptions)
        setLoading(true);
        api(query).then(res => {
          setLoading(false);
          if (res.errMsg === '') {
            form.resetFields();
            callBackSubmit();
            prompt('success', `${type === 'add' ? "增加成功" : res.errMsg}`)
          } else {
62
            prompt('fail',  res.errMsg)
63 64 65 66
          }
        }).catch(e => {
          setLoading(false);
        })
67 68 69
      }
    });
  };
70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
  const prompt = (type, content) => {
    if (type == 'success') {
      notification.success({
        message: '提示',
        duration: 3,
        description: content,
      });
    }
    else {
      notification.error({
        message: '提示',
        duration: 3,
        description: content,
      });
    }
  }
86 87 88 89
  const onFinish = value => { };
  useEffect(() => {
    switch (type) {
      case 'add':
90
        initData()
91 92
        break;
      case 'edit':
93
        initData()
94 95 96 97 98 99
        break;
      default:
        break;
    }
  }, [visible]);

100 101
  //页面初始化
  const initData = () => {
102 103 104
    getPredictInfo().then(res => {
      res.getMe && res.getMe.length && setSource(res.getMe)
    })
105 106 107 108
    if (type === 'add') {
      form.resetFields();
      setCard([])
      setDeviceList([])
109
      setShowTime(true)
shaoan123's avatar
shaoan123 committed
110
      setDateArr({ DeviationType: '秒', DeviationValue: 0, DurationType: '秒', DurationValue: 0})
111 112
    }
    else {
113 114 115
      let { DeviationType, DeviationValue, DurationType, DurationValue } = formObj
      formObj.StrategyType === '时段控制' ? setShowTime(true) : setShowTime(false)
      setDateArr({ DeviationType, DeviationValue, DurationType, DurationValue })
116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140
      form.setFieldsValue({ time: moment(formObj.CreateTime, "YYYYMMDDHHmmss"), ...formObj });
      if (formObj.DetailInfos.length) {
        let req1 = getEquipmentInfo(formObj.DeviceType)
        let req2 = getPredictDevice(formObj.DeviceType)
        Promise.all([req1, req2]).then(respone => {
          console.log('respone', respone);
          respone[0].getMe.length && respone[0].getMe[0].DeviceList.length && setDeviceCode(respone[0].getMe[0].DeviceList)
          respone[1].getMe.length && setPredictCode(respone[1].getMe)
          let arr = []
          formObj.DetailInfos.map((item, index) => {
            arr[index] = {}
            arr[index].code = respone[0].getMe.length ? respone[0].getMe[0].DeviceList : []
            arr[index].predictCode = respone[1].getMe.length ? respone[1].getMe : []
            form.setFieldsValue({
              [`deviceCode${index}`]: item.ControlCode,
              [`indextr${index}`]: item.ControlPoint,
              [`max${index}`]: item.PredictCode,
              [`min${index}`]: item.PredictPoint
            })
          })
          setCard(formObj.DetailInfos)
          setDeviceList(arr)
          setLoading(false)
        })
      }
141

142
    }
143

144 145 146
  }
  //获取设备编码
  const getDeviceCode = () => {
147
    setLoading(false)
148 149 150 151 152 153 154 155 156 157 158 159 160
    let obj = form.getFieldsValue();
    let req1 = getEquipmentInfo(obj.DeviceType)
    let req2 = getPredictDevice(obj.DeviceType)
    Promise.all([req1, req2]).then(respone => {
      respone[0].getMe.length && respone[0].getMe[0].DeviceList.length && setDeviceCode(respone[0].getMe[0].DeviceList)
      respone[1].getMe.length && setPredictCode(respone[1].getMe)
      if (deviceList.length) {
        let arr = [...deviceList]
        arr.map((item, index) => {
          arr[index].code = respone[0].getMe.length ? respone[0].getMe[0].DeviceList : []
          arr[index].predictCode = respone[1].getMe.length ? respone[1].getMe : []
          arr[index].indexStr = ''
          arr[index].predictStr = ''
161
          clearInput(index)
162 163 164
        })
        setDeviceList(arr)
      }
165 166
      setLoading(false)
    })
167

168 169 170 171
  }
  const layout = {
    layout: 'horizontal',
    labelCol: {
172
      span: 6,
173 174 175 176 177 178 179
    },
    wrapperCol: {
      span: 16,
    },
  };
  //选择设备类型
  const handleDeviceType = (value) => {
180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222
    getDeviceCode()
  }

  //选择设备编码
  const handleChange = (value, option) => {
    let cardList = [...card]
    cardList[+option.index].ControlCode = value
    setCard(cardList)
    let obj = form.getFieldsValue();
    getQutaList({ accountName: obj.DeviceType, AddrSchemeID: option.pointid }).then(res => {
      if (res.getMe && res.getMe.length) {
        let arr = [...deviceList]
        arr[+option.index].indexStr = res.getMe
        setDeviceList(arr)
      }
    })
  }
  //选择预测编码
  const handleChange1 = (value, option) => {
    let cardList = [...card]
    cardList[+option.index].PredictCode = value
    setCard(cardList)
    let obj = form.getFieldsValue();
    getPredictDevicePoint({ deviceType: obj.DeviceType, DeviceCode: value }).then(res => {
      console.log('res', res);
      if (res.getMe && res.getMe.length) {
        let arr = [...deviceList]
        arr[+option.index].predictStr = res.getMe
        setDeviceList(arr)
      }
    })
  }
  //选择设备指标
  const handleChangeIndex = (value, option) => {
    let cardList = [...card]
    cardList[+option.index].ControlPoint = value
    setCard(cardList)
  }
  //选择预测指标
  const handleChangeIndex1 = (value, option) => {
    let cardList = [...card]
    cardList[+option.index].PredictPoint = value
    setCard(cardList)
223
  }
224

225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241
  const add = () => {
    let obj = form.getFieldsValue();
    if (!obj.DeviceType) {
      notification.error({
        message: '提示',
        duration: 3,
        description: '请选择设备类型',
      });
    } else {
      let cardList = [...card]
      let arr = [...deviceList]
      cardList.push({})
      setCard(cardList)
      arr.push({ code: deviceCodes, predictCode })
      setDeviceList(arr)
    }
  }
242 243 244 245 246 247 248 249 250
  //清除卡片删除一项的值
  const clearInput = (index) => {
    form.setFieldsValue({
      [`deviceCode${index}`]: undefined,
      [`indextr${index}`]: undefined,
      [`max${index}`]: undefined,
      [`min${index}`]: undefined
    })
  }
251 252 253 254
  //删除卡片
  const deleteDevice = (index) => {
    let cardList = [...card]
    let arr = [...deviceList]
255 256 257 258 259 260
    cardList.splice(index, 1)
    arr.splice(index, 1)
    clearInput(index)
    setCard(cardList)
    setDeviceList(arr)
  }
261
  const handleOrgin = (value, option) => {
262
    setPredictID(option.id)
263
  }
264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287
  const changeDeviationValue = (e) => {
    const newArr = { ...dateArr }
    newArr.DeviationValue = e.target.value
    setDateArr(newArr)
  }
  const changeDeviationType = (value) => {
    const newArr = { ...dateArr }
    newArr.DeviationType = value
    setDateArr(newArr)
  }
  const changeDurationValue = (e) => {
    const newArr = { ...dateArr }
    newArr.DurationValue = e.target.value
    setDateArr(newArr)
  }
  const changeDurationType = (value) => {
    const newArr = { ...dateArr }
    newArr.DurationType = value
    setDateArr(newArr)
  }
  const hangleTime = (value) => {
    value === '时段控制' ? setShowTime(true) : setShowTime(false)
    const newArr = { ...dateArr }
    newArr.DurationValue = 0
shaoan123's avatar
shaoan123 committed
288
    newArr.DurationType = '秒'
289 290
    setDateArr(newArr)
  }
291 292
  return (
    <Modal
293
      title={`${type === 'add' ? '策略下发新增' : '编辑'}`}
294 295
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: '150px' }}
296
      width="800px"
297 298 299 300 301 302 303 304 305 306 307 308 309 310
      destroyOnClose
      maskClosable={false}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      confirmLoading={loading}
      forceRender={true}
      getContainer={false}
    >
      <Spin spinning={isloading} delay={300}>
        {visible && (
          <Form form={form} {...layout} onFinish={onFinish}>
            <Item
311 312
              label="策略名称"
              name="StrategyName"
313
              rules={[{ required: true, message: '请输入策略名称' }]}
314 315 316 317
            >
              <Input placeholder="请输入任务名称" allowClear />
            </Item>
            <Item
318 319
              label="策略类型"
              name="StrategyType"
320
              rules={[{ required: true, message: '请选择策略类型' }]}
321
            >
322
              <Select onChange={hangleTime} >
323 324
                <Select.Option value='实时控制'>实时控制</Select.Option>
                <Select.Option value='时段控制'>时段控制</Select.Option>
325 326
              </Select>
            </Item>
327 328 329 330 331
            <Item
              label="数据来源"
              name="PredictName"
              rules={[{ required: true, message: '请选择数据来源' }]}
            >
332
              <Select onChange={(value, option) => handleOrgin(value, option)}>
333 334 335
                {source.length ? source.map((item, index) => { return <Select.Option key={index} id={item.ID} value={item.PredictName}>{item.PredictName}</Select.Option> }) : ''}
              </Select>
            </Item>
336 337
            <Item
              label="设备类型"
338
              name="DeviceType"
339 340 341 342 343
            >
              <Select onChange={handleDeviceType} >
                {deviceType.length ? deviceType.map((item, index) => { return <Select.Option key={index} value={item.DeviceType}>{item.DeviceType}</Select.Option> }) : ''}
              </Select>
            </Item>
344 345 346 347 348 349 350
            <Item
              label="偏移量"
              name="Cycle"
              rules={[{ required: true, message: '请输入偏移量' }]}
            >
              <div>
                <div className={styles.predict}></div>
351
                <Input style={{ width: '64%' }} placeholder="请输入偏移量" value={dateArr.DeviationValue} onChange={changeDeviationValue} allowClear />
352 353 354 355 356 357 358 359 360 361 362 363 364 365 366
                <Select style={{ marginLeft: '2rem', width: '28%' }} onChange={changeDeviationType} value={dateArr.DeviationType}>
                  <Select.Option value='秒'></Select.Option>
                  <Select.Option value='分'></Select.Option>
                  <Select.Option value='时'></Select.Option>
                  <Select.Option value='日'></Select.Option>
                </Select>
              </div>
            </Item>
            {showTime ? <Item
              label="时段时长"
              name="Cycle"
              rules={[{ required: true, message: '请输入时段时长' }]}
            >
              <div>
                <div className={styles.predict}></div>
367
                <Input style={{ width: '64%' }} placeholder="请输入时段时长" value={dateArr.DurationValue} onChange={changeDurationValue} allowClear />
368 369 370 371 372 373 374 375
                <Select style={{ marginLeft: '2rem', width: '28%' }} onChange={changeDurationType} value={dateArr.DurationType}>
                  <Select.Option value='秒'></Select.Option>
                  <Select.Option value='分'></Select.Option>
                  <Select.Option value='时'></Select.Option>
                  <Select.Option value='日'></Select.Option>
                </Select>
              </div>
            </Item> : ''}
376 377
            <Item
              label="描述"
378
              name="StrategyDes"
379 380 381
            >
              <TextArea placeholder="可输入描述信息" rows={4} allowClear />
            </Item>
382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441
            <Button size="small" onClick={() => { add() }}>
              新增
            </Button>
            <div className={styles.deviceList}>
              {deviceList.length ? deviceList.map((item, index) => {
                return <Card key={index} style={{ marginTop: '0.5rem' }}>
                  <Row gutter='36' justify='space-between'>
                    <Col span={12}>
                      <Item
                        label="控制编码"
                        name={'deviceCode' + index}
                        rules={[{ required: true, message: '请选择设备编码' }]}
                      >
                        <Select
                          placeholder="请选择控制编码"
                          onChange={(value, option) => handleChange(value, option)}
                        >
                          {item.code.length ? item.code.map((item, codeIndex) => { return <Select.Option index={index} key={codeIndex} value={item.Code} pointid={item.PointAddressID}>{item.Code}</Select.Option> }) : ''}
                        </Select>
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="控制指标"
                        name={'indextr' + index}
                        rules={[{ required: true, message: '请选择指标名称' }]}
                      >
                        <Select
                          placeholder="请选择控制指标"
                          onChange={(value, option) => handleChangeIndex(value, option)}
                        >
                          {item.indexStr && item.indexStr.length ? item.indexStr.map((item, zindex) => { return <Select.Option key={zindex} index={index} value={item.Name}>{item.Name}</Select.Option> }) : ''}
                        </Select>
                      </Item>
                    </Col>
                  </Row>
                  <Row gutter='24' justify='space-between'>
                    <Col span={12}>
                      <Item
                        label="预测编码"
                        name={'max' + index}
                        rules={[{ required: true, message: '请输入预测编码' }]}
                      >
                        <Select
                          placeholder="请选择预测编码"
                          onChange={(value, option) => handleChange1(value, option)}
                        >
                          {item.predictCode.length ? item.predictCode.map((item, codeIndex) => { return <Select.Option index={index} key={codeIndex} value={item} >{item}</Select.Option> }) : ''}
                        </Select>
                        {/* <Input placeholder="请输入最大值" onChange={(value) => inputMax(value, index)} index={index} allowClear /> */}
                      </Item>
                    </Col>
                    <Col span={12}>
                      <Item
                        label="预测指标"
                        name={'min' + index}
                        rules={[{ required: true, message: '请输入预测指标' }]}
                      >
                        <Select
                          placeholder="请选择预测指标"
442
                          style={{ width: '98%', marginLeft: '0.4rem' }}
443 444 445 446 447 448 449 450 451 452 453 454 455 456 457
                          onChange={(value, option) => handleChangeIndex1(value, option)}
                        >
                          {item.predictStr && item.predictStr.length ? item.predictStr.map((item, zindex) => { return <Select.Option key={zindex} index={index} value={item}>{item}</Select.Option> }) : ''}
                        </Select>
                      </Item>
                    </Col>
                  </Row>
                  <DeleteOutlined
                    className={styles.deleteItem}
                    onClick={() => deleteDevice(index)}
                    style={{ fontSize: '16px', color: '#e86060' }}
                  />
                </Card>
              }) : ''}
            </div>
458 459 460 461 462 463 464 465
          </Form>
        )}
      </Spin>

    </Modal>
  );
};
export default AddModal;