import React, { useState } from 'react'; import moment from 'moment'; import { Button } from 'antd'; import { PandaHistoryConfiguration } from '../index'; // import PandaConfigurationView from '../../es/index'; const Demo = () => { const [speed, setSpeed] = useState(0); const [play, setPlay] = useState(false); const [times, setTimes] = useState(2); const [obj, setObj] = useState({}); const [params, setParams] = useState({ isDilute: true, zoom: '1', unit: 'h', ignoreOutliers: false, isVertical: false, // 是否查询竖表 dateFrom: moment(new Date()).format('yyyy-MM-DD 00:00:00'), dateTo: moment(new Date()).format('yyyy-MM-DD 23:59:59'), }); return ( <> <div style={{ width: '100%', height: '600px', background: '#242835' }}> <PandaHistoryConfiguration name={'水厂工艺流程段'} devices={'EQZT00000008,EQZT00000007,CPDA00000001,JYBZ00000003,JYBZ00000005,JYBZ00000004'.split( ',', )} // name={'崇左丽江水厂原水泵房'} // devices={'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001'.split( // ',', // )} // name={'丽江水厂原水提升泵D单元'} // devices={'CPAA00000001, CPAD00000001, LJSC00000002'.split(',')} config={globalConfig} deviceName={['工艺流程1', '工艺流程2', '工艺流程3']} speed={speed} play={play} times={times} callback={(speed, total, play, time) => { setObj({ speed, total, play, time, }); }} params={params} // isZoom={true} // flowShow={false} /> </div> <Button onClick={() => { setSpeed(20); }} style={{ margin: '10px' }} > 改变speed </Button> <Button onClick={() => { setPlay(!play); }} style={{ margin: '10px' }} > 改变play </Button> <Button onClick={() => { setTimes(5); }} style={{ margin: '10px' }} > 改变times </Button> <Button onClick={() => { setParams({ isDilute: true, zoom: '1', unit: 'min', ignoreOutliers: false, isVertical: false, // 是否查询竖表 dateFrom: moment(new Date()).format('yyyy-MM-DD 00:00:00'), dateTo: moment(new Date()).format('yyyy-MM-DD 23:59:59'), }); }} style={{ margin: '10px' }} > 改变params </Button> <div style={{ display: 'flex', marginTop: '20px', justifyContent: 'space-between', flex: 'none', }} > <span>speed:{obj?.speed || 0}</span> <span>total:{obj?.total || 0}</span> <span>play:{obj?.play ? '开' : '关'}</span> <span>time:{obj?.time || ''}</span> </div> </> ); }; export default Demo; const globalConfig = { token: 'a1372ef0ce7b4e4884d31cfd99fe92f6', mqtt_iotIP: 'emqttd10.panda-water.cn:443', mqtt_path: '/mqtt', mqtt_IsSSL: true, mqtt_site_code: 'site_dc8302ni', mqtt_mess: { MessageLevel: '1.0', TcpIP: 'emqttd10.panda-water.cn', TcpPort: 443, site_code: 'site_dc8302ni', }, userInfo: { LocalSite: 'site_dc8302ni', site: '', }, };