index.js 4.73 KB
import React, { useMemo, useCallback, useEffect, useState } from 'react';
import { Form, Tabs, Row, Col, Input, Collapse, Button, Switch } from 'antd';
import useWebSocket, { ReadyState } from 'react-use-websocket';
import { _apiUrl_ } from '@/utils/common';
import { Store } from 'le5le-store';
import './index.css';
// import MQTTComponent from './MQTTComponent';
import LayoutComponent from './LayoutComponent';
import { canvas } from '../../index';
import { hexaToHex } from '../../../utils/utils';
const { TabPane } = Tabs;
const { Panel } = Collapse;
const { TextArea } = Input;


const CanvasProps = ({ data }) => {
  const { bkColor, bkImage, grid, websocket } = data.data;

  const [wsAddress, setWsAddress] = useState();

  // const {
  //   sendMessage,
  //   lastMessage,
  //   readyState,
  // } = useWebSocket(`${_apiUrl_.replace('http', 'ws')}/device-extend/messaging/Bearer-${localStorage.getItem("Authorization")}`,{
  //   onMessage: (msg) => {
  //     console.log(msg);
  //   },
  //   onOpen: (msg) => {
  //     console.log('onOpen' + msg);

      // sendMessage(JSON.stringify({ 
      //   type: "sub",
      //   topic: "/Screens/screen_001/**",
      //   id: "1356896161133875200"
      // }));

  //   }
  // });

  useEffect(() => {

      // console.log(canvas.socket.socket.send)

  }, []);


  const handleFormFinish = useCallback((value) => {
    console.log('Finish:', value);
    for (const key in value) {
      data.data[key] = value[key]
    }
    data.render();
    data.data.bkColor = value.bkColor;
    data.data.bkImage = value.bkImage;
    data.render();
    // form.resetFields();
  }, [data])

  /**
   * 渲染位置和大小的表单
   */

  const renderForm = useMemo(() => {
    const formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 15 }
    };

    // from.re
    return (
      <Form {...formLayout} style={{ marginTop: 10, position: 'relative' }}
        initialValues={{
          bkColor: hexaToHex(bkColor) || '#ffffff',
          bkImage,
          grid
        }} onValuesChange={ handleFormFinish }
        >
        <Row>
          <Col span={24}>
            <Form.Item label="背景颜色" name='bkColor'>
              <Input type="color" />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="背景图片" name='bkImage'>
              <TextArea placeholder="请输入图片的地址" />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item label="背景网格" name='grid' valuePropName="checked">
              <Switch
                checkedChildren="开"
                unCheckedChildren="关"
                onClick={(e) => {
                  canvas && canvas.showGrid && canvas.showGrid(e);
                }}
              />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    );
  }, [bkColor, bkImage, grid, handleFormFinish ]);

  /**
   * 发起websocket连接
   */

  const onHandleConnectWS = () => {
    console.log('wsAddress ========== >>>>>>  ');

  };

  return (
    <div className="rightArea">
      <Tabs defaultActiveKey="1" animated={false}>
        <TabPane tab="图文设置" key="1" style={{ margin: 0, position: 'relative' }}>
          {renderForm}
          <ul className="bottomTip">
              <li>    :移动5个像素</li>
              <li>Ctrl + 鼠标点击:多选</li>
              <li>Ctrl + 鼠标滚轮:缩放画布</li>
              <li>Ctrl +     :移动1个像素</li>
              <li>Ctrl + 鼠标拖拽空白:移动整个画布</li>
              <li>Shift/Alt + 鼠标拖拽节点:独立拖拽(子)节点</li>
          </ul>
          {/* <div style={{ padding: 20 }}>
            <Button type='primary'>保存</Button>
          </div> */}
        </TabPane>
        <TabPane tab="消息通信" key="2" style={{ margin: 0 }}>
          <Collapse defaultActiveKey={['1', '2']}>
            <Panel header="websocket地址" key="1">
              <TextArea
                placeholder="请输入websocket地址"
                value={wsAddress}
                onChange={(e) => { data.data.websocket = e.target.value; setWsAddress(e.target.value) }}
              />
              <Button
                type="primary"
                style={{ width: 265, marginTop: 10 }}
                onClick={() => onHandleConnectWS()}
              >
                测试连接
              </Button>
            </Panel>
            {/* <Panel header="MQTT地址" key="2">
              <MQTTComponent />
            </Panel> */}
          </Collapse>
        </TabPane>
        <TabPane tab="排版布局" key="3" style={{ margin: 0 }}>
          <LayoutComponent />
        </TabPane>
      </Tabs>

    </div>
  );
};

export default (CanvasProps);