擎天数据可视化组件

import React, { useEffect, useRef, useState } from 'react';

import { EditorLayout, Preview } from 'bici-datav-npm';
import 'antd/dist/antd.css';
import 'bici-datav-npm/dist/index.css';
import axios from 'axios';
import { Route, BrowserRouter } from 'react-router-dom';
import { Modal } from 'antd';
import preBgImg1 from './bg01.png';
import preBgImg2 from './bg02.png';
import preBgImg3 from './bg03.png';

const { confirm } = Modal;

const EditorLayoutCanvas: React.FC<any> = ({ ...props }) => {
  const history = props.history;
  const [editorData, setEditorData] = useState(undefined);
  const [extraVisible, setExtraVisible] = useState(false);
  const preInstallBgImages = [
    { key: 1, img: preBgImg1 },
    { key: 2, img: preBgImg2 },
    { key: 3, img: preBgImg3 },
  ];
  const token = '9XO2Khne0e18KCiDEl8sC';
  const industrialLibrary = [
    {
      type: 'mk',
      name: '灯光',
      images: [
        {
          name: '1',
          url:
            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          width: 100,
          height: 100,
          type: 'image',
          key: '1',
        },
        {
          name: '2',
          url:
            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          width: 100,
          height: 100,
          type: 'image',
          key: '2',
        },
      ],
    },
    {
      type: 'mj',
      name: '管道',
      images: [
        {
          name: '3',
          url:
            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          width: 100,
          height: 100,
          type: 'image',
          key: '3',
        },
        {
          name: '4',
          url:
            'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          width: 100,
          height: 100,
          type: 'image',
          key: '4',
        },
      ],
    },
  ];
  const selfIndustrialLibrary = [
    {
      name: '9',
      url:
        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      width: 100,
      height: 100,
      type: 'image',
      key: '8',
    },
    {
      name: '10',
      url:
        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      width: 100,
      height: 100,
      type: 'image',
      key: '9',
    },
  ];
  const uploadConfig = {
    baseURL: 'http://qt.test.bicisims.com',
    self: {
      baseURL: 'http://qt.test.bicisims.com',
      token: token,
      url: '/api/file/file/uploadReturnPath',
      apiUrl: {
        list: '/applications/custom/component/componentList',
        delete: '/file/file/delete',
        update: '/file/file/updateFile',
      },
      data: {
        mappingId: 'ooip6ffe388d487db754b885b8aa65b9',
        mappingType: '106',
      },
    },
    preInstall: {
      baseURL: 'http://qt.test.bicisims.com',
      token: token,
      url: '/api/file/file/uploadReturnPath',
      data: {
        mappingId: 'ooip6ffe388d487db754b885b8aa65b9',
        mappingType: '107',
      },
    },
    combineCom: {
      apiURL: 'http://qt.test.bicisims.com',
      token: '9XO2Khne0e18KCiDEl8sC',
      list: {
        url: '/applications/customComponent/list',
        params: {},
      },
      add: {
        url: '/applications/customComponent/save',
        params: {},
      },
      delete: {
        url: '/applications/customComponent/delete',
        params: {},
      },
      rename: {
        url: '/applications/customComponent/update',
        params: {},
      },
    },
  };
  const apiURL = 'http://qt.test.bicisims.com';
  const websocketConf = {
    url: 'ws://47.96.159.115:51060/ws?token=5KmTbcul1R4RNxnSiwTlpr',
  };
  useEffect(() => {
    // 获取数据
    const formData = new FormData();
    formData.append('mappingId', '23233');
    formData.append('mappingType', '107');
    const instance = axios.create({
      baseURL: 'http://qt.test.bicisims.com',
      timeout: 10000000,
      maxContentLength: 1000000000,
    });
    // 获取面板数据
    // 获取面板数据
    instance
      .get('/api/applications/newBoard/detail', {
        method: 'get',
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          token: '9XO2Khne0e18KCiDEl8sC',
          'Content-Type': 'application/json',
        },
        params: {
          id: '31c6e27b5b634a48a2b12ca39c643856',
        },
      })
      .then(res => {
        if (res.data?.data != null) {
          if (
            res.data.data.property != null &&
            res.data.data.property != null
          ) {
            // const getEditorData = JSON.parse(
            //   decodeURIComponent(escape(window.atob(res.data.data.property)))
            // );
            const getEditorData = JSON.parse(res.data.data.property)
            setEditorData(getEditorData);
          }
        }
      });
    // 获取获取当前租户下 上传的背景图片
    // instance
    //   .post(
    //     '/api/applications/custom/component/componentList',
    //     { mappingType: '107' },
    //     {
    //       method: 'post',
    //       headers: {
    //         token: 'development_of_special_token_by_star_quest',
    //         'Content-Type': 'application/json',
    //       },
    //     }
    //   )
    //   .then((res) => {
    //     console.log('背景图片=', res);
    //   });
    // 获取获取当前租户下 指定自定义组件图片列表
    // instance
    //   .post(
    //     '/api/applications/custom/component/componentList',
    //     { mappingType: '106' },
    //     {
    //       method: 'post',
    //       headers: {
    //         token: 'development_of_special_token_by_star_quest',
    //         'Content-Type': 'application/json',
    //       },
    //     }
    //   )
    //   .then((res) => {
    //     console.log('组件图片列表=', res);
    //     (res.data.data || []).map((image: any) => {
    //       const newImg = {
    //         ...image,
    //         name: image.name.replace(/\.(jpg|png)$/g, ''),
    //         width: 100,
    //         height: 100,
    //         type: 'image',
    //         key: image.id,
    //       };
    //       selfIndustrialLibrary.push(newImg);
    //       return null;
    //     });
    //   });

  }, []);
  // 保存数据到数据库
  const handleSaveEditorData = (data: any) => {
    console.log(data);
    const api = axios.create({
      headers: { 'Content-Type': 'multipart/form-data' },
    });
    const formData = new FormData();
    api.defaults.headers.common['token'] = '9XO2Khne0e18KCiDEl8sC';
    formData.append('file', data.screenshot);
    formData.append('mappingId', 'ooip6ffe388d487db754b885b8aa65b9');

    formData.append('mappingType', '107');
    api.post(
      `http://qt.test.bicisims.com//api/file/file/uploadReturnPath`,
      formData
    );

    const instance = axios.create({
      baseURL: 'http://qt.test.bicisims.com',
      timeout: 10000000,
      maxContentLength: 1000000000,
    });
    delete data.screenshot
    instance
      .request({
        url:"/api/applications/newBoard/updateProperty",
        method: 'POST',
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          token: '9XO2Khne0e18KCiDEl8sC',
          'Content-Type': 'application/json;charset=UTF-8',
        },
        data:{
          id: '31c6e27b5b634a48a2b12ca39c643856',
          // property: window.btoa(
          //   unescape(encodeURIComponent(JSON.stringify(data)))
          // )
          property:JSON.stringify(data)
        }
      }).then((res) => {
        console.log('update==', res);
      });
  };
  // 自定义预览，多数为打开一个新页面，路由，内置的预览是弹窗
  // const handlePreview = (data:any)=>{
  //   console.log(data)
  //   html2canvas(document.querySelector(".haha") as HTMLElement).then(canvas => {
  //     console.log(canvas)
  //     document?.querySelector(".haha")?.appendChild(canvas)
  //     var imgData = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  //     console.log(imgData)
  //   });
  // }

  //
  const handleExtraOk = () => {
    setExtraVisible(false);
  };
  const handleExtraCancel = () => {
    setExtraVisible(false);
  };

  // 点击额外配置按钮的回调
  const handleExtraSetting = () => {
    setExtraVisible(true);
  };
  const ExtraModel = () => {
    return (
      <Modal
        title="额外配置"
        className="extra-modal"
        visible={extraVisible}
        onOk={handleExtraOk}
        onCancel={handleExtraCancel}
        okText="确认"
        cancelText="取消"
      >
        <div>这是额外配置</div>
      </Modal>
    );
  };
  const editorRef = useRef();
  const handlePoweroff = () => {
    // @ts-ignore
    const isSave = editorRef?.current.getIsSave();
    if (!isSave) {
      showConfirm();
    }
  };
  function showConfirm() {
    confirm({
      title: '退出页面提示！',
      content: '画布已经修改未保存，是否离开？',
      okText: '保存并退出',
      cancelText: ' 取消',
      onOk() {
        console.log('OK');
        // @ts-ignore
        editorRef?.current.handleSaveData();
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  return (
    <div>
      <ExtraModel />
      <EditorLayout
        history={history}
        ref={editorRef}
        onEditorSaveCb={handleSaveEditorData}
        editorData={editorData}
        onExtraSetting={handleExtraSetting}
        selfIndustrialLibrary={selfIndustrialLibrary}
        industrialLibrary={industrialLibrary}
        uploadConfig={uploadConfig}
        onPoweroff={handlePoweroff}
        preInstallBgImages={preInstallBgImages}
        autoSaveInterval={30}
        websocketConf={websocketConf}
        apiURL={apiURL}
        token={token}
        // onPreview={handlePreview}
      />
    </div>
  );
};

const PreviewLayout: React.FC<any>=({history})=>{
  const [editorData,setEditorData]=useState<any>()
  const websocketConf = {
    url: 'ws://47.96.159.115:51060/ws?token=9XO2Khne0e18KCiDEl8sC',
  };
  useEffect(()=>{
    const instance = axios.create({
      baseURL: 'http://qt.test.bicisims.com',
      timeout: 10000000,
      maxContentLength: 1000000000,
    });
    // 获取面板数据
    instance
      .get('/api/applications/newBoard/detail', {
        method: 'get',
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          token: '9XO2Khne0e18KCiDEl8sC',
          'Content-Type': 'application/json',
        },
        params: {
          id: '31c6e27b5b634a48a2b12ca39c643856',
        },
      })
      .then(res => {
        console.log('detail', res);
        if (res.data?.data != null) {
          if (
            res.data.data.property != null &&
            res.data.data.property != null
          ) {
            // const getEditorData = JSON.parse(
            //   decodeURIComponent(escape(window.atob(res.data.data.property)))
            // );
            const getEditorData = JSON.parse(res.data.data.property)
            setEditorData(getEditorData);
          }
        }
      });
  },[])
  return (<Preview history={history} data={editorData} websocketConf={websocketConf}></Preview>)
}

const App = () => {
  return (
    <BrowserRouter>
      <Route exact path="/" component={EditorLayoutCanvas} key={1} />
      <Route path="/preview" component={PreviewLayout} key={2} />
    </BrowserRouter>
  );
};

export default App;