@jkyu/monet-draw-vue v1.5.0
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. 引用样式
```html
<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示例工程 |