Basic1.tsx 3.48 KB
Newer Older
1 2 3 4 5
import React, { useState } from 'react';
import moment from 'moment';
import { Button } from 'antd';
import { PandaHistoryConfiguration } from '../index';
// import PandaConfigurationView from '../../es/index';
6
// 增加一行注释
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
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
25 26
          name={'水厂工艺流程段'}
          devices={'EQZT00000008,EQZT00000007,CPDA00000001,JYBZ00000003,JYBZ00000005,JYBZ00000004'.split(
27 28
            ',',
          )}
29 30 31 32
          // name={'崇左丽江水厂原水泵房'}
          // devices={'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001'.split(
          //   ',',
          // )}
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
          // 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: '',
  },
};