@jkyu/monet-draw-react v1.5.0
Monet-SDK（莫奈大屏渲染）
概述
Monet-SDK是一种微服务低代码解决方案，也可以理解为Iframe的替代方案，可快速将莫奈大屏集成到任何React、Vue工程中，并提供了灵活易用的钩子函数，来满足与莫奈大屏的各种交互场景
Vue [传送门](https://www.npmjs.com/package/@jkyu/monet-draw-vue)如何使用Monet-SDK
1. 安装Monet-SDK
npm install @jkyu/monet-draw-react2. 配置代理
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' } })); };
> **注意：**
>
>  以上配置只是提供了配置代理的一种方式，还可以修改webpack进行[配置](https://webpack.docschina.org/configuration/dev-server/#devserverproxy),
> 示例配置方式适用于React CRA创建的项目，只需要在`src`下创建一个`setupProxy.js`文件，然后将以上代码复制到此文件即可。
### 3. 修改webpack配置
#### 复制资源，配置别名，开启HTTPS
```js
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. 引用样式
<head> ... <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/static/monet-sdk.css" /> ... </head>5. 使用Monet-SDK
globalOption({ // 配置微服务地址，用于解析大屏信息 // 默认为：https://imonet.jdcloud.com serverURL: "https://imonet.jdcloud.com" })
class Demo extends React.Component { componentDidMount() { const leftRender = new MonetRender({ bigScreenURL: '', // 大屏发布地址 width:"650px", // 高度 height:"300px", // 宽度 container: 'leftDiv', // 容器ID token:'234234...' // 授权码 }); leftRender.initDataPool = () => ({}); // 初始化数据池,返回值：Object leftRender.beforeScreenRender = (screenInfo)=>{} // 大屏信息渲染前 leftRender.beforeComRender = (components)=>{} // 组件信息渲染前 leftRender.watchDataPool = (dataPool)=>{} // 监听数据池 leftRender.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) => { // series0.barStyle.color = '#6DC8EC'; // return series; // }); } } render(){