HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Alarm on tree</title> <!------------------依赖的特舒插件,指定增量合并打包到htiotos.js中即可----------> <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() { //ht demo示例基本都是init()函数开头不动! //在上述模板中就是 var obj = cache.obj = init() // Add circle at left bottom corner represented new alarm initTreeIcon();
// 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(); //在init()内找到调用addToDoM的这句,需要屏蔽掉,并且return该对象即可! }
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] }); } //-------------------------------------------------------------------------------
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();
// 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(); return splitView }
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] }); }
var obj = cache.obj = init()
obj.layoutHTML = function () { gv.layoutHTML(data, obj, false); } }