首页 文章 精选 留言 我的

运维架构图之用前端简易实现集群框架图

2017-11-13 696

前言：

    今个群里有个哥们问我怎么实现一个集群的架构图，一说架构图，大家肯定想到的是用visio或者是亿图，但是动态的咋办？甚至说高端了点，不仅可以看到架构图，而且可以看到流量及负载的信息。　现在运维平台这么火热，大家恨不得把平台做全面点。　我以前做过一个机房展现图，有兴趣的朋友可以再以前的博客中找到。　

运维平台化之IDC机柜拓扑及数据展现实现思路

http://rfyiamcool.blog.51cto.com/1030776/1346389


wKiom1Qn1rThOaX4AANwufEHeY4204.jpg


用的是　jquery.jOrgChart.css　　js库，实现提来还算简单。大家只需要做个模板，然后各种if判断就行了。你懂的。     个人觉得大家要在cmdb资产系统里面要做好位置的标记，不然后期做架构图展现的时候，会发现 没法动态。。。。。 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
原文: 
  
     < script  src = "http://libs.baidu.com/jquery/1.9.0/jquery.js" ></ script >
     < script  src = "http://libs.baidu.com/jqueryui/1.8.22/jquery-ui.min.js " ></ script >
     
     < script  src = "jquery.jOrgChart.js" ></ script >
 
     < script >
     jQuery(document).ready(function() {
         $("#org").jOrgChart({
             chartElement : '#chart',
             dragAndDrop  : true
         });
     });
     </ script >
   </ head >
 
   < body  onload = "prettyPrint();" >
     < div  class = "topbar" >
         < div  class = "topbar-inner" >
             < div  class = "container" >
                 < a  class = "brand"  href = "#" >jQuery Organisation Chart</ a >
                 < ul  class = "nav" >
                     < li >< a  href = "http://github.com/wesnolte" >Github</ a ></ li >
                     < li >< a  href = "http://twitter.com/wesnolte" >Twitter</ a ></ li >                  
                     < li >< a  href = "http://th3silverlining.com" >Blog</ a ></ li >      
                 </ ul >
                 < div  class = "pull-right" >
                     < div  class = "alert-message info"  id = "show-list" >Show underlying list.</ div >
                     
< pre  class = "prettyprint lang-html"  id = "list-html"  style = "display:none" ></ pre >       
                 </ div >              
             </ div >
         </ div >
     </ div >
     
     < ul  id = "org"  style = "display:none" >
     < li >< br >< font  size = "4" >Balance</ font >
      
        < ul >
          < li  id = "beer" >< br >redis 192.168.1.10</ li >
          < li >< br >nginx2 192.168.1.13
            < ul >
              < li >mongodb 192.168.1.16</ li >
              < li >mongodb 192.168.1.19</ li >
            </ ul >
          </ li >
          < li  class = "fruit" >nginx3 192.168.1.24
            < ul >
              < li >php 192.168.1.28
                < ul >
                  < li >mysql 192.168.1.33</ li >
                  < li >mysql 192.168.1.37</ li >
                </ ul >
              </ li >
             
            </ ul >
          </ li >
          < li >spider 192.168.1.41</ li >
          < li  class = "collapsed" >nginx5 192.168.1.44
            < ul >
              < li >Topdeck</ li >
              < li >Reese's Cups</ li >
            </ ul >
          </ li >
        </ ul >
      </ li >
    </ ul >            
     
     < div  id = "chart"  class = "orgChart" ></ div >
     
     < script >
         jQuery(document).ready(function() {
             
             /* Custom jQuery for the example */
             $("#show-list").click(function(e){
                 e.preventDefault();
                 
                 $('#list-html').toggle('fast', function(){
                     if($(this).is(':visible')){
                         $('#show-list').text('Hide underlying list.');
                         $(".topbar").fadeTo('fast',0.9);
                     }else{
                         $('#show-list').text('Show underlying list.');
                         $(".topbar").fadeTo('fast',1);                  
                     }
                 });
             });
             
             $('#list-html').text($('#org').html());
             
             $("#org").bind("DOMSubtreeModified", function() {
                 $('#list-html').text('');
                 
                 $('#list-html').text($('#org').html());
                 
                 prettyPrint();                
             });
         });
     </ script >


这里实现的方法有些简单，大家自己举一反三的做成模板，也可以换成自己服务器的图标。


好了，不多说了 ！ 




 本文转自 rfyiamcool 51CTO博客，原文链接：http://blog.51cto.com/rfyiamcool/1559137，如需转载请自行联系原作者

上一篇 下一篇
优秀的个人博客,低调大师

微信关注我们

原文链接：https://yq.aliyun.com/articles/402313

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

RDIFramework.NET框架SOA解决方案（集Windows服务、WinForm形式与IIS形式发布）-分布式应用

RDIFramework.NET框架SOA解决方案（集Windows服务、WinForm形式与IIS形式发布）-分布式应用 RDIFramework.NET，基于.NET的快速信息化系统开发、整合框架，给用户和开发者最佳的.Net框架部署方案。该框架以SOA范式作为指导思想，作为异质系统整合与互操作性、分布式应用提供了可行的解决方案。 1、SOA平台简介 1.1、概述 SOA（service-oriented architecture，也叫面向服务的体系结构或面向服务架构）是指为了解决在Internet环境下业务集成的需要，通过连接能完成特定任务的独立功能实体实现的一种软件系统架构。SOA是一个组件模型，它将应用程序的不同功能单元（称为服务）通过这些服务之间定义良好的接口和契约联系起来。接口是采用中立的方式进行定义的，它应该独立于实现服务的硬件平台、操作系统和编程语言。这使得构建在各种这样的系统中的服务可以以一种统一和通用的方式进行交互。 传统的Web（HTML/HTTP）技术有效的解决了人与信息系统的交互和沟通问题，极大的促进了B2C模式的发展。WEB服务(XML/SOAP/WSDL...
2017-11-14
558
上一篇

Crossbar技术冲破网络容量瓶颈

现在，网络技术平台正在伴随着用户新一轮网络整合业务需求的提出，发生着积极的变化。在追求更快、更宽、更可靠的同时，能够面向具体业务的均衡、全方位的要求也正在成为网络应用的关注要点。与此同时，Crossbar技术也随之得到了日益广泛的应用。 交换结构的演进 以往的网络分层结构决定了用户不太注重网络核心层设备的业务支撑能力，只需要完成高效的转发就可以了。而随着网络业务的复杂性增加，如IPv6数据流需要网络中每个节点设备处理；业务覆盖范围增大导致广域核心设备需要参与业务处理；使用人数和频度增加导致处理资源长期被占用，实现全网智能化和业务线速处理就变得越来越重要了。 应用永远是技术发展的原动力。正是在这样的背景下，Crossbar技术得到了迅速成长，并已逐渐成为了主流的交换结构。 交换结构是网络交换设备的重要组成部分，它直接决定了路由器和交换机的应用性能，因此高性能交换结构的设计对网络核心交换设备的研制十分关键。从高端交换机、高端路由器的发展来看，共出现了4种交换网络形式：总线交换、环形交换、共享内存交换和Crossbar交换。其中，前三种早期的数据交换方式不同程度的都存在着对于交换容...
2017-11-14
513
下一篇

相关文章

发表评论

资源下载

更多资源
优质分享App

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

时间: 2025-12-03 大小: 4.36MB 下载: 23次
Spring

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

时间: 2025-12-17 大小: 5MB 下载: 1次
Rocky Linux

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

时间: 2026-01-03 大小: 1.42GB 下载: 2次
Sublime Text

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

时间: 2025-12-03 大小: 9.84MB 下载: 39次
手机查看

扫码在手机上查看文章

扫描二维码，手机阅读更方便

热门标签
HarmonyOS6 SpringCloud DeepSeek Kubernetes SpringBoot4 Rocky Gemini3 Service Mesh Jdk25 Nacos3 Docker Redis OpenAi

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册