Monet-SDK（莫奈大屏渲染）

概述

  Monet-SDK是一种微服务低代码解决方案，也可以理解为Iframe的替代方案，可快速将莫奈大屏集成到任何React、Vue工程中，并提供了灵活易用的钩子函数，来满足与莫奈大屏的各种交互场景

如何使用Monet-SDK

1. 安装Monet-SDK

npm install @jkyu/monet-draw

2. 配置代理

const proxy = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(proxy('/api', {
    target: 'https://imonet.jdcloud.com',
    secure: false,
    changeOrigin: true,
    headers: {
      Host: '',
      Connection: 'keep-alive'
    },
    pathRewrite: {
      '^/api': ''
    }
  }));

  app.use(proxy('/geojson', {
    target: 'https://imonet.jdcloud.com',
    secure: false,
    changeOrigin: true,
    headers: {
      Host: '',
      Connection: 'keep-alive'
    },
    pathRewrite: {
      '^/geojson': '/geojson'
    }
  }));

  app.use(
    proxy('/oss-imonet', {
      target,
      secure: false,
      changeOrigin: true,
      headers: {
        Host: '',
        Connection: 'keep-alive',
      },
      pathRewrite: {
        '^/oss-imonet': '/oss-imonet',
      },
    })
  );
};

注意：

 以上配置只是提供了配置代理的一种方式，还可以修改webpack进行配置, 示例配置方式适用于React CRA创建的项目，只需要在src下创建一个setupProxy.js文件，然后将以上代码复制到此文件即可。

3. 修改webpack配置

复制资源，配置别名，开启HTTPS

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
const { override,fixBabelImports,addWebpackAlias,overrideDevServer } = require('customize-cra');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const draw = 'node_modules/@jkyu/monet-draw/build';

module.exports = {
  webpack: override(
    // 配置别名
    addWebpackAlias({
        'static': path.resolve(__dirname, './static'),
    }),
    // 针对antd 实现按需打包
    fixBabelImports('import',{
      libraryName:'antd',
      libraryDirectory:'es',
      style:'css',
    }),
    (config) => {
      // 将Monet-SDK资源文件复制到工程中的static中
      config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));
      config.plugins.push(
        new CopyPlugin(
            [
              {
                from: path.join(draw, 'static'),
                to: 'static'
              }
            ],
          )
      )
      return config;
    },
  ),
  devServer:overrideDevServer(
    (config)=>{
      // 开启HTTPS
      config.https = true
      return config
    }
  )
};

注意：

 以上配置是基于react-app-rewired的配置方式

新建或修改.env文件

HTTPS=true

注意：

 开启HTTPS是因为代理中的target是HTTPS服务所以需要进行统一，统一的原因主要是因为协议限制，以上配置同样是基于React CRA项目的配置方式， 如果代理target配置的是http代理地址，请忽略此步骤

4. 使用Monet-SDK

globalOption

globalOption({
  serverURL: "https://imonet.jdcloud.com",
  monetLoginServerURL: "https://imonet.jdcloud.com",
})

globalOption：配置微服务地址用于解析大屏信息，可在工程入口引入进行设置

参数介绍：serverURL、monetLoginServerURL

服务地址默认为 https://imonet.jdcloud.com，内网环境可切换为私有化部署的地址

MonetRender

 const leftRender =  new MonetRender({ 
    bigScreenURL: '',     // 大屏发布地址
    width:"650px",        // 宽度
    height:"300px",       // 高度
    container: 'leftDiv', // 容器ID
    token:'234234...'     // 授权码
  });

MonetRender：莫奈大屏渲染器，可根据返回值leftRender对大屏进行精细化控制

参数介绍：

bigScreenURL：大屏发布地址，在对应的大屏编辑器进行获取

width：容器宽度

height：容器高度

container：容器ID

token：访问授权码，在对应的大屏编辑器发布页面中开启SDK访问权限

leftRender.initDataPool

leftRender.initDataPool = () => ({
  zhangsan: '张三',
  lisi: '李四',
});

initDataPool：初始化数据池

leftRender.beforeScreenRender

leftRender.beforeScreenRender = (screenInfo)=>{}

beforeScreenRender：大屏信息渲染执行此函数，可根据参数对大屏数据进行调整

leftRender.beforeComRender

leftRender.beforeComRender = (components)=>{}

beforeComRender：组件信息渲染前执行此函数，可根据参数对大屏组件数据进行调整

leftRender.watchDataPool

leftRender.watchDataPool = (dataPool)=>{}

watchDataPool：监听数据池中的变量，变量发生变化则执行此函数

leftRender.onload

leftRender.onload = (monetEvent)=>{});

onload：组件渲染完成，执行此函数

monetEvent介绍：

 monetEvent.setDataPool("numOption","8888888") // 设置变量
 // 根据组件ID，修改样式信息
 monetEvent.setComConfig(3289, (config) => {
   config.style = {
     backgroundColor: 'rgba(224,72,175,0.5)',
     font: { size: 32, color: '#000000' }
   };
   return config;
 });
// 根据组件ID，修改系列信息
monetEvent.setComSeries(3291, (series) => {
   series[0].barStyle.color = '#6DC8EC';
   return series;
});

一些案例模板

| demo | 描述 | | ------------------------------------------------------------- | ------------------------------------------------------------ | | msdk-react | 基于React CRA创建的Webpack4工程，集成Monet-SDK的一个示例模板 | | msdk-vue | 基于Monet-SDK集成莫奈大屏，React to Vue示例工程 |