SovitChart示例
Sovit2D示例
Sovit3D示例
<!DOCTYPE html>
<html lang="en">
<head>
<title id="page_title"></title>
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="https://admin.sovitjs.com/static/sovitjs/jquery-ui.css">
<script src="https://admin.sovitjs.com/static/sovitjs/SovitChartPaser.min.js"></script>
<!--
如果私有化部署时引入的是私有化系统的地址：如
<link rel="stylesheet" href="http://localhost:9188/static/sovitjs/jquery-ui.css">
<script src="http://localhost:9188/static/sovitjs/SovitChartPaser.min.js"></script>
-->
</head>
<body style="background-color: #e5e7ea;">
<div id="sovitChart_1" style="width:100%;height: 700px;margin-top: 0px;">
</div>
<!--
以下一小段代码是重点，这个代码是用来放到SovitChart制作的大屏中某个位置用的。
通过这种方法实现大屏交互功能，比如数据查询，翻页等。
目前SovitChart编辑器还不支持直接拖拽输入框架、按钮等表单组件放入大屏
因此可以通过二次开发的方法实现。
此代码块因为是用来放入大屏中的，所以默认设置为隐藏
-->
<div id="mydiv" style="display: none;">
ID：<input type="text" id="id" />
<input type="button" id="button" value=" 确定 " onclick="doSubmit()" />
测试ID：2708739056392470537、2711548904452653064<br/>
内容测试表格查询：<input type="text" id="content" />
<input type="button" id="button" value=" 确定 " onclick="doQuery()" />
填写表头列4中的内容查询测试
<br/>
Rest数据查询：<input type="text" id="num" />
<input type="button" id="button" value=" 确定 " onclick="doRestQuery()" />
填写数字测试
</div>
</body>
</html>
<script>
let sceneMain = null;
let page = 1;
//说明：jCanvasQuery是SovitChart核心库提供的JQuery组件，类似$()，你也可以使用自己引入的JQuery库
jCanvasQuery(document).ready(function() {
//创建SovitChart解析器对象
sceneMain = new SovitChartPaser.SceneMain({
apiurl: 'https://admin.sovitjs.com/restapi',
publishType: 1 //1为在线引用组件 2为离开引用组件
});
//引入图表并在指定的DIV里面显示
sceneMain.initChart("sovitChart_1", {
pageId: "3105177608690597888" //图表的ID，发布图表的地方可以找到
});
/**
* 此行代码是SovitChart的API，负责将自定义的Html代码放到大屏中的某个位置
* 参数1：大屏中用来接收自定义代码块的空白Div组件（在Chart编辑器中拖一个空白的Div占个位）。
* 参数2：自定义代码块的Div的ID，对应上面的自定义代码块
*/
sceneMain.putWidget("component_com_div_1_88CBD945C80E", "mydiv");
/**
* 放入大屏以后将代码块设置为显示
*/
jCanvasQuery("#mydiv").show();
pageParser();
});
function doSubmit() {
/**
* 当点击查询按钮时需要刷新某个组件的数据调用此API
* 参数1：大屏所放容器的ID
* 参数2：需要刷新的数据的接口标志名，这个在编辑器中的数据集管理中可以找到
* 参数3：数据集定义的数据接口的参数
*/
sceneMain.refreshDatas("sovitChart_1", "Sql31051773388206899250002", {
id: jCanvasQuery("#id").val()
});
}
function doQuery() {
sceneMain.refreshDatas("sovitChart_1", "Sql31051773388206899250001", {
startPage: 0,
pageNum:10,
content:jCanvasQuery("#content").val()
});
sceneMain.refreshDatas("sovitChart_1", "Sql31051773388206899250003", {
content:jCanvasQuery("#content").val()
});
page = 1;
pageParser();
}
function doRestQuery() {
sceneMain.refreshDatas("sovitChart_1", "Rest31051773388206899250001", {
num: jCanvasQuery("#num").val()
});
}
function doPage(currPage) {
sceneMain.refreshDatas("sovitChart_1", "Sql31051773388206899250001", {
startPage: (currPage-1)*10,
pageNum:10
});
sceneMain.refreshDatas("sovitChart_1", "Sql31051773388206899250003");
page = currPage;
pageParser();
}
/**
* 此函数用来根据查询返回的数据制作翻页
*/
function pageParser() {
let allCount = jCanvasQuery("#component_com_text_1_C94F792D2425").html();
if(allCount != '' && allCount != undefined) {
allCount = parseInt(allCount.trim());
}
let pageHtml = "";
if(allCount>10 && page>1) {
pageHtml = pageHtml + '<a href="javascript:doPage('+(page-1)+')" class="btn-standard2" style="width: 60px;font-size: 16px !important;background: white;color: #848587;border: 1px solid #848587;padding: 4px 15px !important;"> 上一页 </a> ';
}
if(allCount>10*page) {
pageHtml = pageHtml + '<a href="javascript:doPage('+(page+1)+')" class="btn-standard2" style="width: 60px;font-size: 16px !important;background: white;color: #848587;border: 1px solid #848587;padding: 4px 15px !important;"> 下一页 </a>'
}
jCanvasQuery("#component_com_div_1_77B547461F5A").html(pageHtml);
}
</script>
说明：这个例子可以了解到如何二次开发定义自己的页面组件与SovitChart编辑器制作的大屏页面进行集成
比如在大屏页面增加一些表单组件如输入框、下拉框、按钮等。
比如在大屏页面增加一些表单组件如输入框、下拉框、按钮等。
