Monet-SDK（莫奈大屏渲染）
概述
Monet-SDK是一种微服务低代码解决方案，也可以理解为Iframe的替代方案，可快速将莫奈大屏集成到任何React、Vue工程中，并提供了灵活易用的钩子函数，来满足与莫奈大屏的各种交互场景
React [传送门](https://www.npmjs.com/package/@jkyu/monet-draw-react)如何使用Monet-SDK
1. 安装Monet-SDK
npm install @jkyu/monet-draw-vue2. 修改webpack配置
复制资源，配置别名，开启HTTPS
const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');
const draw = 'node_modules/@jkyu/monet-draw-vue/build';
const target = 'http://uc-dev.jdcityos.com';
module.exports = {
configureWebpack: (config) => {
config.plugins.push(
new CopyPlugin(
[
{
from: path.join(draw, 'static'),
to: 'static'
}
],
)
);
},
devServer: {
port: 8600,
// 配置代理
proxy: {
'/api': {
target,
ws: true,
changeOrigin: true,
secure: false,
headers: {
Host: '',
Connection: 'keep-alive'
},
pathRewrite: {
'^/api': '/api'
}
},
'/geojson': {
target,
secure: false,
changeOrigin: true,
headers: {
Host: '',
Connection: 'keep-alive'
},
pathRewrite: {
'^/geojson': '/geojson'
}
}
}
}
};3. 引用样式
<head>
...
<link
rel="stylesheet"
type="text/css"
href="<%= BASE_URL %>static/monet-sdk.css"
/>
...
</head>4. 使用Monet-SDK
globalOption({
// 配置微服务地址，用于解析大屏信息
// 默认为：https://imonet.jdcloud.com
serverURL: "https://imonet.jdcloud.com"
})
<template>
<div className="App">
<div id="leftDiv" />
</div>
</template>
<script>
import { onMounted, defineComponent } from 'vue';
import { MonetRender } from '@jkyu/monet-draw-vue';
export default defineComponent({
name: 'App',
setup () {
let leftEvent = null;
onMounted(() => {
const leftRender = new MonetRender({
bigScreenURL: '', // 大屏发布地址
width:"650px", // 高度
height:"300px", // 宽度
container: 'leftDiv', // 容器ID
token:'234234...' // 授权码
});
leftRender.initDataPool = () => ({}); // 初始化数据池
leftRender.beforeScreenRender = (screenInfo) => {}; // 大屏信息渲染前
leftRender.beforeComRender = (components) => {}; // 组件信息渲染前
leftRender.watchDataPool = (dataPool) => {}; // 监听数据池
// 组件渲染完成
leftRender.onload = (monetEvent) => {
leftEvent = monetEvent;
// 根据组件ID，修改样式信息
monetEvent.setComConfig(3289, (config) => {
config.style = {
backgroundColor: 'rgba(224,72,175,0.5)',
font: { size: 32, color: '#000000' }
};
return config;
});
};
})
// 设置变量
const setDataPool = (key,value)=>{
leftEvent.setDataPool(key, value);
}
// 根据组件ID，修改系列信息
const setComSeries = ()=>{
leftEvent.setComSeries(3291, (series) => {
series[0].barStyle.color = '#6DC8EC';
return series;
});
}
return {
setDataPool,
setComSeries
}
}
})
</script>
<style>
.App {
height: 100vh;
display: flex;
}
</style>一些案例模板
| demo | 描述 |
|---|---|
| msdk-wp4 | 基于React CRA创建的Webpack4工程，集成Monet-SDK的一个示例模板 |
| msdk-wp5 | 基于React Webpack5工程，集成Monet-SDK的一个示例模板 |
| msdk-vue | 基于Monet-SDK集成莫奈大屏，React to Vue示例工程 |