大数据可视化大屏实战项目（39）集成平台运行监控系统【系统架构可视化监控】—HTML+CSS+JS【源码在文末】（可用于比赛项目或者作业参考中🐕🐕🐕）

一，项目概览

☞☞☞☞☞☞项目演示链接：http://59.110.22.223:8080/Data/39/view/

☞☞☞☞☞☞项目演示链接：http://59.110.22.223:8080/Data/39/view/

image-20230907113716944

二，运行视频

☞☞☞☞☞☞B站演示视频：

三，部分代码讲解

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>监控大屏二区</title>
<link rel="stylesheet" href="../css/main.css" type="text/css" />
</head>
<body>
  <div class="header">
    <div class="switch"><img src="../images/switch.gif" alt=""/></div>
    <div class="logo"><img src="../images/logo.gif" alt="" /></div>
    <div class="tabside">
      <ul><li>监控一区</li><li class="selected">监控二区</li></ul>
    </div>
  </div>
  <div class="kong"></div>
  <div class="main">
    <div class="maintop">
      <div class="maintop_l">
        <div class="maintop_r">
          <h1 class="sys_tit"><i></i>系统架构可视化监控</h1>
          <div class="maintop_con">
            <div class="left"><img src="../images/pic1.gif" alt="" /></div>
            <!--数据表结束-->
            <div class="right">
              <div class="list">
                <div class="list_l">
                  <div class="list_l_con">
                    <h1 class="pro_icon"><i></i>厂商列表</h1>
                    <div class="pro_con">
                      <ul class="listone">
                        <li>PACS</li>
                        <li class="cur">HIS</li>
                        <li>病案</li>
                        <li>设备</li>
                        <li>NIS</li>
                        <li>病案</li>
                        <li>设备</li>
                        <li>NIS</li>
                        <li>PACS</li>
                        <li>HIS</li>
                      </ul>
                      <ul class="listtwo">
                        <li>PACS</li>
                        <li>HIS</li>
                        <li>病案</li>
                        <li>设备</li>
                        <li>NIS</li>
                        <li>病案</li>
                        <li>设备</li>
                        <li>NIS</li>
                        <li>PACS</li>
                        <li>HIS</li>
                      </ul>
                      <ul class="listone">
                        <li>PACS</li>
                        <li>HIS</li>
                        <li>病案</li>
                        <li>设备</li>
                        <li>NIS</li>
                        <li>病案</li>
                        <li>设备</li>
                        <li>NIS</li>
                        <li>PACS</li>
                        <li>HIS</li>
                      </ul>
                    </div>
                  </div>
                </div>
                <!--列表结束-->
                <div class="list_r">
                  <div class="list_r_con">
                    <h1 class="his_icon"><i></i>HIS系统业务性能简介</h1>
                    <div class="his_con">
                      <ul>
                        <li>HIS提供服务颗粒：<span class="green">43</span> 个</li>
                        <li>服务平均相应时间：<span class="green">1.5</span>S</li>
                        <li>发送业务消息数：<span class="green">534232</span> 条</li>
                        <li>接收业务消息数：<span class="green">314358 </span>条</li>
                        <li>处理异常消息数：<span class="red">56</span> 条</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>      
    </div>
    <div class="mainbottom">      
       <div class="kong"></div>
       <div class="mainbottom_con">
         <div class="mainbottom_con_l">
           <div class="mainbottom_con_ll">
             <div class="mainbottom_con_lr">
               <h1 class="tod_tit"><i></i>系统架构可视化监控</h1>
               <div class="mainbottom_con_mains">
                 <div class="mainbottom_con_main">
                   <ul class="lisone">
                     <li>病人新建档案：<span class="green">2934</span> 份</li>
                     <li>新开心电单据：<span class="green">324</span> 份</li>
                     <li>新开放射单据：<span class="green">1342</span> 份</li>
                     <li>新开超声单据：<span class="green">212</span> 份</li>
                     <li>新入员工：<span class="green">2</span> 人</li>
                   </ul>
                   <ul class="listwo">
                     <li>入院人数：<span class="green">2934</span> 份</li>
                     <li>出院人数：<span class="green">324</span> 份</li>
                   </ul>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <!--今日业务数据流发展情况-->
         <div class="mainbottom_con_r">
            <div class="mainbottom_con_rl">
              <div class="mainbottom_con_rm">
                <div class="mainbottom_con_rr">
                   <h1 class="app_tit"><i></i>应用系统服务列表 <ul class="dot"><li></li><li></li><li></li><li class="sel"></li><li></li></ul></h1>
                   <div class="mainbottom_con_bodys">
                     <div class="mainbottom_con_body">
                       <div class="wd">
                         <div class="wd_con">
                           <div class="data"><img src="../images/监控大屏二期_49.gif" alt=""/></div>
                           <ul>
                             <li class="tit">病人创建档案服务</li>
                             <li>发送消息：349</li>
                             <li> 异常：0</li>
                           </ul>
                         </div>
                       </div>
                       <div class="wd">
                         <div class="wd_con">
                           <div class="data"><img src="../images/监控大屏二期_49.gif" alt=""/></div>
                           <ul>
                             <li class="tit">病人创建档案服务</li>
                             <li>发送消息：349</li>
                             <li> 异常：0</li>
                           </ul>
                         </div>
                       </div>
                       <div class="wd">
                         <div class="wd_con">
                           <div class="data"><img src="../images/监控大屏二期_49.gif" alt=""/></div>
                           <ul>
                             <li class="tit">病人创建档案服务</li>
                             <li>发送消息：349</li>
                             <li> 异常：0</li>
                           </ul>
                         </div>
                       </div>
                       <div class="wd">
                         <div class="wd_con">
                           <div class="data"><img src="../images/监控大屏二期_49.gif" alt=""/></div>
                           <ul>
                             <li class="tit">病人创建档案服务</li>
                             <li>发送消息：349</li>
                             <li> 异常：0</li>
                           </ul>
                         </div>
                       </div>
                       <div class="wd">
                         <div class="wd_con">
                           <div class="data"><img src="../images/监控大屏二期_49.gif" alt=""/></div>
                           <ul>
                             <li class="tit">病人创建档案服务</li>
                             <li>发送消息：349</li>
                             <li> 异常：0</li>
                           </ul>
                         </div>
                       </div>
                       
                     </div>
                   </div>
                </div>
              </div>
            </div>
         </div>
       </div>
    </div>
  </div>
</body>
<!--
    访问地址：https://paycloud.vip

-->
<script language="javascript" type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script language="javascript" type="text/javascript" src="../js/auto_height.js"></script>
</html>

HTML代码的详细解释如下：
该代码用于创建一个监控大屏的第二区域：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>监控大屏二区</title>
<link rel="stylesheet" href="../css/main.css" type="text/css" />
</head>
<body>

这部分代码定义了HTML文档的基本结构和引用的外部资源，以下是解释：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">：HTML文档类型声明，指定文档使用XHTML 1.0 Transitional标准。

  2. <html xmlns="http://www.w3.org/1999/xhtml">：HTML文档的根元素，指定文档使用XHTML标准。

  3. <head>：包含了文档的元数据和外部资源链接。

    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />：指定文档字符编码为UTF-8，以支持多语言字符。

    • <title>监控大屏二区</title>：设置页面的标题，将显示在浏览器标签页上。

    • <link rel="stylesheet" href="../css/main.css" type="text/css" />：引入名为"main.css"的外部样式表，用于页面的样式和布局。

  4. <body>：HTML文档的主体部分，包含了页面的实际内容。

  <div class="header">
    <!-- 这里包含了页面的顶部内容，如标志、选项卡等 -->
  </div>
  <div class="kong"></div>
  <div class="main">
    <!-- 这里包含了页面的主要内容 -->
  </div>

在<body>内，有一个.header的<div>元素，用于包含页面的顶部内容，包括标志和选项卡。

接下来有一个.kong的<div>元素，可能用于创建一个空白区域或布局。

然后有一个.main的<div>元素，用于包含页面的主要内容。

    <div class="maintop">
      <!-- 这里包含了页面的顶部内容，包括标题、图像等 -->
    </div>

在.main内，有一个.maintop的<div>元素，用于包含页面的顶部内容，可能包括标题和图像。

      <div class="maintop_l">
        <!-- 这里包含了页面的左侧内容 -->
      </div>

在.maintop内，有一个.maintop_l的<div>元素，用于包含页面的左侧内容。

      <div class="maintop_r">
        <!-- 这里包含了页面的右侧内容，包括标题、图像等 -->
      </div>

同时，还有一个.maintop_r的<div>元素，用于包含页面的右侧内容，可能包括标题和图像。

          <h1 class="sys_tit"><i></i>系统架构可视化监控</h1>

在.maintop_r内，有一个带有类名sys_tit的<h1>元素，用于显示系统架构可视化监控的标题。

          <div class="maintop_con">
            <!-- 这里包含了页面的内容，包括左侧和右侧内容 -->
          </div>

接下来有一个.maintop_con的<div>元素，用于包含页面的内容，包括左侧和右侧内容。

            <div class="left">
              <!-- 这里包含了左侧内容的图像 -->
            </div>

在.maintop_con内，有一个.left的<div>元素，可能包含了左侧内容的图像。

            <div class="right">
              <!-- 这里包含了右侧内容，包括列表 -->
            </div>
          </div>
        </div>
      </div>
    </div>

在.maintop_con内，有一个.right的<div>元素，用于包含右侧内容，可能包括列表。

接下来，代码继续定义了页面的其余部分，包括监控数据、系统性能简介等内容，包含了一些图像和数据列表。

整个HTML文档描述了一个监控大屏的第二区域，用于展示系统架构可视化监控的相关数据和信息。页面包含了多个部分，包括顶部导航、主要内容区域和监控数据展示区域。通过引入外部样式表和使用CSS类，可以对页面进行样式设置和布局控制。

可视化图表的使用技巧

1、柱状图

柱状图中的颜色尽量不要超过3种。
柱状图柱子间的宽度和间隙要是适当。住在太窄，用户的视觉可能会集中在两个柱子之间的负空间
对多个数据系列排序时，最好复合一定的逻辑，用直观的方式引导用户更好的查看数据，此时可以通过升序和降序排列。
2、折线图

折线图连接各点可以使用直线和曲线，这样更美观，数据展示更加清晰
折线的颜色要清晰，尽量不要使用与背景色和坐标轴相近的颜色
折线图中的线条尽量不要超过4条，过多的线条会导致界面混乱，无法阅读。
3、饼图

饼图适合用来展示单一维度数据的占比，要求其数值没有零或者负值，并确保各个分块占比总和为100%。
饼图不适合用于精确数据的比较，因此当各类别数据占比相似时，很难分辨出哪个类别占比比较大。
大多数人的视觉习惯是按照顺时针自上而下的顺序去观察，因此在绘制饼图时建议从12点钟开始沿着顺时针右边的第一个分块绘制饼图最大的数据分块，这样可以有效地强调其重要性
4、散点图

如果一个散点图没有显示变量的任何关系，那么或许该图表类型不是次数据的最佳选择
散点图只有在足够多的数据点并且数据间有相关性时，才能呈现很好的结果。
如果数据包含不同系列，可以给不同系列使用不同的颜色

数据功能图介绍
在大数据的可视化图中，按照数据的作用和功能可以把图分为比较类图、分布类图、流程类图、地图类图、占比类图、区间类图、关联类图、时间类图和趋势类图等。
1、比较类图
比较类图可视化的方法通常是显示值与值之间的不同和相似之处，使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小，通常用于展示不同分类间的数值对比一级不同时间点的数据对比。常见的比较类图主要有柱状图、双向柱状图、气泡图、子弹图、色块图、漏斗图和直方图等

2、分布类图
分布类图可视化的方法通常是显示频率，将数据分散在一个区间或分组，并使用图形的为、大小、颜色的渐变程度类表现数据的分布。分布类图通常用于展示连续数据上数值的分布情况。常见的分布类图主要有箱型图、热力图、散点图、分布曲线图、色块图和直方图

3、流程类图
流程类图可视化的方法通常是显示流程流转和流程流量。一般流程都会呈现出多个环节，每个环节之间会有相应的流量关系，因此这类图形可以很好的表示这些流量关系。常见的流程图主要有漏斗图和桑基图

4、地图类图
地图类图可视化的方法是显示地理区域上的数据，并在显示是使用地图作为背景，通过图形的位置来表现数据的地理位置。地图类图通常用来展示数据在不同地理区域上的分布情况。常见的地图类图主要有待气泡的地图和统计地图

5、占比类图
占比类图可视化的范式是显示同一维度上的占比关系。常见的占比类图主要有换图、马赛克图、堆叠面积图、堆叠柱状图和矩形树图

6、区间类图
区间类图可视化的方法是显示同一维度上值的上限和下限之间的差异。区间类图使用图形的大小和位置表示数值的上限和下限，通常用于表示数据在某一分类（时间点）上的最大值和最小值。常见的区间类图主要有仪表盘图和堆叠面积图

7、关联类图
关联类图可视化的方法显示数据之间的相互关系。关联类图使用图形的嵌套和位置表示数据之间的关系，通常用于表示数据之间的前后顺序、父子关系和相关性。常见的关联类图主要有和弦图、桑基图、矩阵树图、树状图和韦恩图

8、时间类图
时间类图可视化的方法显示以时间为特定维度的数据。时间类图使用图形的位置表现出数据在时间深的房补，通常用于表现数据在时间维度上的趋势和变化。常见的实践类图主要有面截图、K线图、卡吉图和螺旋图

9、趋势类图
趋势类图可视化的方式分析数据的变化趋势，趋势类图使用图形的位置表现出数据在连续区域上的分布，通常展示数据在连续区域上的大小变化的规律。常见的趋势类图主要有面积图、K线图、折线图和回归曲线图

四，源码

链接：https://pan.baidu.com/s/1ZvZR_ebIoT6i90BHqIrwMA?pwd=nljy
提取码：nljy

创作不易，项目已加密，有偿（—3r—，可修改页面，做实验报告，代码讲解，待上服务器等…）

请私信作者（v）15135757306

注：非白嫖仅为维护服务器，若想白嫖请CSDN私信我（大概率可能时间忙顾不上回复）

若侵权请私信作者下架博客

# 信息可视化 # 系统架构 # html
Logo
永洪数据分析社区

永洪科技，致力于打造全球领先的数据技术厂商，具备从数据应用方案咨询、BI、AIGC智能分析、数字孪生、数据资产、数据治理、数据实施的端到端大数据价值服务能力。

更多推荐

cover

基于Java+Vue的企业移动培训考学系统：为企业数字化培训降本增效（整套代码）

avatar 永洪数据分析社区

《财务报表分析指南》企业财务透视必备：解读财务报表、深度解析财务报表分析方法、财务指标体系指南···

财务报表分析的重要性不言而喻。如果说，比重法和相关比率法旨在建立或计算各种财务指标或经济指标，确定各项财务和经营结构，或会计项目结构，那么，因素替代法就是对其中的综合性指标或项目作进一步的内部结构分析，即对影响或决定综合指标或项目的各项因素及其对综合指标或项目的影响程度作出测定和评价。财务报表的趋势分析法，是根据企业连续几年的财务报表，比较有关项目的数额，以求出其金额和百分比增减变化的方向和幅度，

avatar 永洪数据分析社区
cover

大数据毕业设计hadoop+spark+hive知识图谱医生推荐系统 医生数据分析可视化大屏 医生爬虫 医疗可视化 医生大数据 机器学习 大数据毕业设计 计算机毕业设计

avatar 永洪数据分析社区