<html>
<head>
<script src="https://twuyun.com/admin/graphic/runtime/runtime.js"></script>
<script>
//new tw(< app来源 >,< 加载后执行函数: function(myruntime){} >, < true:取消input的平台定制样式 > );
window._tw = new tw("https://twuyun.com/");
</script>
</head>
<body>
<t-data value="/admin/msg.message"></t-data>
<t-data value="=/admin/msg.message+'_2222222'"></t-data>
<t-symbol src="61b2b95e9f4a380da0642946" width="500" height="200" cp.a="=/this.message + '_333333'"></t-symbol>
</body>
<script>
window._tw.load(); //或者 t.load(dom); 其中dom是包含<t-xxx>标签的dom,如果不指定,默认加载document.body
//下面是常用的功能:
window._tw.post("/api/getdata", //这个地址前面会加入定义的来源:https://twuyun.com/api/getdata
{
x: 1,
y: 2
}, function(data) {
data = JSON.parse(data); //data是字符串,可以转为json处理数据
}, function(error) {
//出错的信息
});
window._tw.data("/admin/msg.message", //订阅一个tag(实例),数据变化也会执行
function(data) {
//data的结构:{tag:"/admin/msg.message",value:"msg",time:"2022/04/28 11:11:11"} 其中time为UTC时间
console.log(data);
})
window._tw.instance("/admin/msg"); //设置数据this的实例
</script>
</html>
<html>
<head>
<script src="https://twuyun.com/admin/graphic/runtime/runtime.js"></script>
</head>
<body>
<b-page a="230" b=""></b-page>
<div>
<div>
<b-data id="message" value="/this/msg.message"></b-data>
</div>
<div>
<b-data value="=/this/msg.message+'_2222222'"></b-data>
</div>
<table>
<tr>
<td>
<b-symbol name="5e868fd3776caf06542a2e90" width="500" height="200" cp.a="/a">
</b-symbol>
</td>
<td>
<b-symbol name="5f017aa7a5a79a0390cd2f77" width="200" height="100" cp.b="/a">
</b-symbol>
</td>
<td>
<b-symbol name="/admin/home/symbols/ccc/mysymbol" width="200" height="100" cp.b="/a">
</b-symbol>
</td>
</tr>
</table>
</div>
</body>
<script>
//new tw(< app来源 >,< 加载后执行函数: function(myruntime){} >, < true:取消input的平台定制样式 > );
var t = new tw("https://twuyun.com/");
t.load(document.body, function(myruntime) {
//可以定义onchange函数,在收到数据后自定义显示
document.getElementById("message").onchange = function(value, time) {
//
document.getElementById("message").innerHTML = value + "," + time;
};
//-------------------------------------------
//在加载前执行,一般用作loading
myruntime.oninit = function(dom) {
//dom.parentElement.style.background = null;
var p = dom.parentElement;
p.style.background = "url(/admin/graphic/runtime/loading.gif) no-repeat 0 0";
p.style.backgroundSize = "50px 50px";
p.style.backgroundPositionX = "center";
p.style.backgroundPositionY = "center";
};
//在数据加载完成后,可以取消loading
myruntime.ondataready = function(dom) {
//dom.parentElement.style.background = null;
var p = dom.parentElement;
p.style.background = null;
};
//在图形加载完成后,参数分别为:(展示对象,图形标题,图形用的数据模板,当前实例)
myruntime.onready = function(display, title, template, instance) {
document.title = "图形-" + title;
var dom = display.getdom();
dom.parentElement.style.background = null;
//可以定义一个重新加载函数,重加载显示
window.reloaddisplay = function(cps) {
display.reload(cps);
};
//可以获取到模板下所有实例,便于操作实例的切换
mxUtils.mypost("/admin/graphic/runtime/api/get_instances.ds", {
"tid": template
}, {},
function(data) {
//
data = JSON.parse(data);
// data = [
// {
// "id": "",
// "name": "",
// "desc": "没有实例",
// "style": ""
// }
// ]
}, function(data) {
alert(data)
});
};
//定义图形尺寸大小
myruntime.getsize = function(dom) {
var p = dom.parentElement;
return {
width: p.clientWidth,
height: p.clientHeight
}
};
//出错后的处理
myruntime.onerror = function(error, dom) {
alert(error);
dom.parentElement.style.background = null;
};
//改变图形数据实例
function changeinstance(iid) {
myruntime.setinstance(iid);
};
//改变图形的自定义属性,也可设置实例:(name使用$.instance)
function setprop(name, value) {
myruntime.setpageprop(name, value);
};
//下面例子可以动态订阅数据
var tag = "/604eed2a9f4a38198822d2dd.基础资料.位置"; //实例名,也可以是表达式,如:/604eed2a9f4a38198822d2dd.基础资料.位置 + 12
myruntime.subscribe(tag, function(value, cp) {
alert(value);
//value变量是最新的值,cp中含详细信息,如cp.time可以得到更新时间
})
});
</script>
</html>