数据模型dm、视图gv，以及数据节点Data/Node、浏览器全屏DOM的关系；渲染元素gv做一个视图场景图标组件，用来接受传入图纸url，动态切换图纸多页切换；反序列化以及xhrLoad异步加载

最新推荐文章于 2024-08-14 16:38:30 发布

IOTOS

最新推荐文章于 2024-08-14 16:38:30 发布

阅读量408

点赞数

本文链接：https://blog.csdn.net/IOTOS/article/details/127081864

版权

ht for web深度开发实践专栏收录该内容

63 篇文章 38 订阅

订阅专栏

1. 数据模型DataModel、视图GraphicView关系

如下示例，左侧tree树形组件，右侧是GraphicView视图（支持动态切换加载图纸），同时用SplitView分割容器组件进行布局，整体铺满浏览器。可见，视图GraphicView是可以跟常规Node节点一样，可以有多个实例，同时展现在浏览器的不同位置，对应一个或多个独立的数据模型分别展示界面！并非浏览器全局只能全屏一个GraphicView视图！

[该类型的内容暂不支持下载]

JavaScript
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Alarm on tree</title>
        <script src="../../../../lib/core/ht.js"></script>
        <script src="../../../../lib/plugin/ht-telecom.js"></script>
        <script>

            var dataModel = new ht.DataModel();
            var graphView = new ht.graph.GraphView(dataModel);
            var treeView = new ht.widget.TreeView(dataModel);
            var splitView = new ht.widget.SplitView(treeView, graphView, 'horizontal', .3);

            function init() {
                // Add circle at left bottom corner represented new alarm
                initTreeIcon();

                // Enable AlarmStatePropagator
                dataModel.setEnableAlarmStatePropagator(true);

                // Add Group
                var group = new ht.Group();
                group.setExpanded(true);
                group.setName('Group');
                dataModel.add(group);

                // Iterate HT default AlarmSeverity, add node with related AlarmSeverity
                var x = -50, y = 100;
                ht.AlarmSeverity.each(function (severity) {
                    var node = new ht.Node();
                    node.setName(severity.name);
                    node.setPosition(x += 100, 100);
                    node.getAlarmState().increaseNewAlarm(severity);
                    group.addChild(node);
                    dataModel.add(node);
                });

                // Expand all tree nodes
                treeView.expandAll();

                // Add spliteView to document body
                splitView.addToDOM();
            }

            function initTreeIcon() {
                ht.Default.getImage('__alarmIcon__').comps.push({
                    type: 'circle',
                    gradient: 'radial.center',
                    gradientColor: '#FFFFFF',
                    background: {
                        func: function (data) {
                            var severity = data.getAlarmState().getHighestNewAlarmSeverity();
                            if (severity) {
                                return severity.color;
                            }
                            return null;
                        }
                    },
                    visible: {
                        func: function (data) {
                            return !!data.getAlarmState().getHighestNewAlarmSeverity();
                        },
                    },
                    rect: [1, 8, 8, 8]
                });
            }

        </script>
    </head>
    <body οnlοad="init();">
    </body>
</html>

2. 视图GrahphicView反序列化加载图纸json，一般会结合ht.Default.xhrLoad

典型的图纸加载反序列化代码如下，GrahphicView可直接传入json文件URL地址并非json文件本身，那么为什么要有ht.Default.xhrLoad异步加载这个环节？加载两次？是的！外层的xhrLoad异步加载可以判断是否是json对象文件，进行异常错误处理，但是如果视图graphicView直接加载，格式不对就会直接报错。

JavaScript
//加载图纸文件
function init() {
    dataModel = new ht.DataModel();
    graphView = new ht.graph.GraphView(dataModel);
    //监听图纸事件
    graphView.mi(mi2dEvent);
    //图纸放到dom上
    graphView.addToDOM();
    //获取图纸json url
    var url = getParam("tag")
    const loadCb = (json) => {
        if (json) {
            graphView.deserialize(
                url,
                function(json, dm, gv, datas) {
                    //完成加载预览，初始化
                    // 修改title，但是该属性只有在preview下才有
                    if (json.title) document.title = json.title;
                    if (json.a['json.background']) {
                        var bgJSON = json.a['json.background'];
                        if (bgJSON.indexOf('displays') === 0) {
                            var bgGv = new ht.graph.GraphView();
                            bgGv.deserialize(bgJSON);
                            bgGv.addToDOM();
                            graphView.addToDOM(bgGv.getView());
                        }
                    }
                    //图纸加载完毕！
                    initTreeData()
                }
            );
        } else {
            console.log('资源加载失败');
        }
    };
    ht.Default.xhrLoad(url, loadCb);
}

html中最简的GraphView加载图纸url，展示到页面上的最小代码：

JavaScript
<html>

    ……

    <script>
        function init() {

            let urltmp = urlParam('tag');
            let graphView = new ht.graph.GraphView();    //① 实例化图元场景
            graphView.addToDOM();                        //② 添加到HTML DOM根节点
            graphView.deserialize(                       //③ 加载图纸url反序列化
                        urltmp,
                        function(json, dm, gv, datas) {}
                      );
        }
    </script>

</head>

<body οnlοad="setTimeout(init, 0)">
</body>

</html>

3. 制作视图渲染元素，实现在组态中作为常规图标组件拖放，配置URL地址来动态切换图纸，graphicView的嵌套，相对于iframe浏览器嵌套，极其便于数据里外层的数据传递！！

渲染元素可以是html dom对象，也可以是ht对象！渲染元素模板，以及设置渲染元素是否编辑状态随着图纸也矢量缩放；内置拖放矢量基本组件类型

图纸测试包、图标文件以及渲染元素代码分别如下：

[MQTT客户端.zip]

[graphicView.json]

JavaScript
if (!cache.obj) {

    function init(){
        var dataModel = new ht.DataModel();
        var graphView = new ht.graph.GraphView(dataModel);
        return graphView;
    }
    var obj = cache.obj = init()

    obj.layoutHTML = function () {
        gv.layoutHTML(data, obj, false);
    }
}

/*注意，数据模型需要主动清空dm.clear()，否则场景视图GraphicView多次反序列化加载，只会让
关联的数据模型，dataModel重复追加数据，导致场景视图叠加！！！内存也会持续增加！应用平台更
需要注意这里避免问题出现*/
function clear(){
    var graphView = cache.obj
    graphView.dm().clear()
    graphView.reset()
}

var urltmp = data.a('displayUrl')
/*JS中不能用!xxx，来识别判断undefined，需要如下这样显示表达式来判断！*/
if(urltmp != undefined && urltmp != ''){
    if(!cache.url || cache.url != urltmp){
        clear()
        cache.url = urltmp
        var graphView = cache.obj
        const loadCb = (json) => {
            if (json) {
                graphView.deserialize(
                    urltmp,
                    function(json, dm, gv, datas) {

                        //图纸加载完毕！

                    }
                );
            } else {
                var logtmp = '加载失败：' + urltmp
                console.error(logtmp)

                /*渲染元素支持数据反向输出给属性，结合图纸的数据绑定，可以实现反向到
                物联中台设备数据点的下发控制，并且同样也是以数据点绑定的方式，双向绑定！*/
                data.a('outputLog',logtmp)
            }
        };
        ht.Default.xhrLoad(urltmp, loadCb);
    }
}

return cache.obj;