图形或数据集成

常用例子


<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>

页面集成

图形或数据集成

常用例子

完整例子