更新web066html

README.md

@@ -13,7 +13,7 @@
 <p>以上模板均来收集于网络,欢迎大家继续补充贡献！！！</p>
 
 ```
-如果觉得对你有对您有帮助，您可以点右上角 💘Star💘支持,谢谢支持！～
+如果觉得对你有对您有帮助，您可以点右上角 💘Star💘支持,感谢支持！～
 ```
 
 </div>

web/066 系统架构可视化监控/css/_notes/main.css.mno

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<info>
+	<infoitem key="MMGuideColor" value="#00FF00" />
+	<infoitem key="MMGuideVisible" value="false" />
+	<infoitem key="MMGuideLocked" value="false" />
+	<infoitem key="MMSnapToGuide" value="true" />
+	<infoitem key="MMGuidesSnapToElements" value="true" />
+	<infoitem key="MMDistanceColor" value="#0000FF" />
+	<infoitem key="MMGuideCount" value="0" />
+</info>

web/066 系统架构可视化监控/css/main.css

@@ -0,0 +1,128 @@
+@charset "utf-8";
+/**全局**/
+body{ background:#1a1a1a; margin:0; padding:0; min-width:1000px;font-family:"Microsoft YaHei";font-family:"微软雅黑";}
+.kong{ height:12px;}
+.green{ color:#1fcc60;}
+.red{ color:#f00;}
+
+/**头部**/
+.header{ height:54px; background:url(../images/header_bg.gif) repeat-x 0 0; border-bottom:1px solid #0c0c0c} 
+.switch{ width:43px; height:39px; background:url(../images/switch_bg.gif) repeat-x 0 0; border-right:1px solid #0b0b0b; padding:15px 0 0 15px; float:left; cursor:pointer;}
+.logo{padding:13px 0 0 14px; float:left;}
+.tabside{ float:right; height:54px;}
+.tabside ul{margin:0; padding:0; list-style:none;}
+.tabside ul li{ width:143px; height:54px; float:left; margin:0; padding:0; list-style:none;font-size:16px; line-height:54px; color:#555; cursor:pointer; text-align:center;}
+.selected{ color:#36eea4 !important; background:url(../images/tab_bg.gif) no-repeat 0 0;}
+
+/**主体部分**/
+.main{ margin:0 10px;}
+
+/**系统架构可视化监控**/
+.maintop{ height:60%; background:url(../images/maintop_bg.gif) repeat-x 0 bottom; padding-bottom:2px;}
+.maintop_l{ height:100%;background:url(../images/border_l.gif) repeat-y 0 0; padding-left:2px;}
+.maintop_r{ height:100%;background:url(../images/border_r.gif) repeat-y right 0; padding-right:2px;}
+.sys_tit{ height:38px; background:url(../images/sys_tit_bg.gif) repeat-x 0 0; font-size:16px; font-weight:normal; color:#a5a5a5; line-height:38px; margin:0; padding:0;}
+.sys_tit i{ width:23px; height:21px; margin:7px 15px 0 15px; display:inline-block;background:url(../images/sys_icon.gif) no-repeat 0 0; float:left;}
+
+.maintop_con{}
+.maintop_con .left{ width:30%;height:100%; float:left; background:#131313;text-align: center; vertical-align:middle;}
+.maintop_con .left img{ vertical-align:middle; width:100%; height:100%;}
+
+.maintop_con .right{ width:70%;*width:69%;_width:69%; height:100%;background:#131313; float:left;}
+.list{margin:20px 32px 20px 0; background:url(../images/list_l_bg.gif) #1c1c1c repeat-x 0 bottom;}
+
+/**厂商列表**/
+.list_l{ width:55%; height:100%; float:left;background:url(../images/arr_left.gif) left 0 no-repeat;background-size:42px 100%;}
+.list_l_con{padding:0 38px 0 12%; height:100%;}
+.pro_icon{height:45px; line-height:44px;  font-size: 16px; font-weight:normal; margin:0px; padding:0px; background:url(../images/line.gif) repeat-x 0 bottom; color:#a5a5a5;}
+.pro_icon i{ width:19px; height:19px; display:inline-block; float:left; background:url(../images/pro_icon.gif) no-repeat 0 0; margin:12px 8px 0 0;}
+.pro_con{}
+.pro_con ul{margin:10px 0; padding:0; width:26%;}
+.pro_con ul li{list-style:none; margin:0; padding:0; height:25px; line-height:25px; font-size:14px;}
+.pro_con ul li.cur{ color:#2fbbf2;}
+
+/**列表的彩色圆点**/
+.listone{ padding:0 0 0 14px !important; background:url(../images/dot_listone.gif) no-repeat 0 10px; color:#5b5b5b; overflow:hidden; float:left;}
+.listtwo{ padding:0 0 0 14px !important; background:url(../images/dot_listtwo.gif) no-repeat 0 10px; color:#5b5b5b; overflow:hidden; float:left;}
+
+/**HIS系统业务性能简介**/
+.list_r{ width:45%; height:100%; float:left; background:url(../images/arr_right.png) left 0 no-repeat;background-size:42px 100%;}
+.list_r_con{margin-left:42px; padding:0 18px; height:100%;background:url(../images/list_r_bg.gif) #202020 repeat-x 0 bottom;}
+.his_icon{ margin:0; padding:30px 0 0 0;height:54px;color:#2fbbf2; font-size:16px; font-weight:normal; background:url(../images/line.gif) repeat-x 0 bottom; }
+.his_icon i{ width:18px; height:21px; margin:0 10px 0 0; display:inline-block;background:url(../images/his_icon.gif) no-repeat 0 0; float:left;}
+.his_con{ padding:20px 0 0 8px;}
+.his_con ul{margin:0; padding:0;}
+.his_con ul li{list-style:none; margin:0; padding:0; height:30px; line-height:30px; font-size:14px; color:#555;}
+
+
+
+/*****底部*****/
+.mainbottom{height:40%;}
+
+/**今日业务数据流发展情况**/
+.mainbottom_con_l{ width:30%; height:99%; float:left;background:url(../images/maintop_bg.gif) repeat-x 0 bottom;padding-bottom:2px;}
+.mainbottom_con_ll{height:100%;background:url(../images/border_l.gif) repeat-y 0 0;padding-left:2px;}
+.mainbottom_con_lr{height:100%;background:url(../images/border_r.gif) repeat-y right 0;padding-right:2px;}
+
+.tod_tit{ height:44px; line-height:44px;  font-size: 16px; font-weight:normal; margin:0px; padding:0px; background:url(../images/h1_bg.gif) repeat-x 0 0; color:#a5a5a5;}
+.tod_tit i{width:20px; height:19px;margin:12px 10px 0 18px; display:inline-block; background:url(../images/tod_icon.gif) no-repeat 0 0; float:left;}
+
+.mainbottom_con_mains{background:#131313;}
+.mainbottom_con_main{ overflow:hidden;/*padding:26px 20px;*/padding:8% 20px; }
+.mainbottom_con_main ul{ margin:0;padding:0px; float:left;}
+.mainbottom_con_main ul li{ height:30px; line-height:30px; list-style:none; color:#555; font-size:14px;}
+
+.lisone{ width:156px; padding-right:10px !important;}
+.listwo{ width:120px;}
+
+/**应用系统服务列表 **/
+.mainbottom_con_r{width:70%; height:99%; float:left;}
+.mainbottom_con_rl{ height:100%;background:url(../images/maintop_bg.gif) repeat-x 0 bottom;padding-bottom:2px; margin-left:8px;}
+.mainbottom_con_rm{height:100%;background:url(../images/border_l.gif) repeat-y 0 0;padding-left:2px;}
+.mainbottom_con_rr{height:100%;background:url(../images/border_r.gif) repeat-y right 0;padding-right:2px;}
+.app_tit{height:44px; line-height:44px;  font-size: 16px; font-weight:normal; margin:0px; padding:0px; background:url(../images/h1_bg.gif) repeat-x 0 0; color:#a5a5a5; position:relative;}
+.app_tit i{width:20px; height:19px;margin:14px 10px 0 18px; display:inline-block; background:url(../images/app_icon.gif) no-repeat 0 0; float:left;}
+.mainbottom_con_bodys{background:#131313;}
+.mainbottom_con_body{ overflow:hidden; padding:4% 0 4% 0;}
+.wd{ width:20%; float:left;}
+.data{ padding:0 17px 14px 17px ; text-align:center;}
+
+.wd_con{ padding:0 17px;}
+.wd_con ul{margin:0; padding:0; padding-left:20%;}
+.wd_con ul li{ list-style:none; margin:0; padding:0; color:#555; height:22px; line-height:22px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
+.wd_con ul li.tit{ color:#b5b5b5;}
+
+.dot{ width:50px; height:5px; position:absolute; right:8px; top:20px; margin:0; padding:0;}
+.dot li{ width:9px; height:5px; background:url(../images/dot.gif) no-repeat -9px 0; margin:0; padding:0; float:left; list-style:none; cursor:pointer;}
+.dot li.sel{background:url(../images/dot.gif) no-repeat 0 0;}
+
+@media screen and (max-width: 1366px) {
+	.his_icon{padding:28px 0 0 0;height:40px;}
+	.his_con{ padding:10px 0 0 8px;}
+
+	.pro_icon{height:38px;line-height:38px;}
+	.pro_con ul li{ font-size:12px;height:20px; line-height:20px;}
+	.listone{ padding:0 0 0 14px !important; background:url(../images/dot_listone1.gif) no-repeat 0 6px;}
+    .listtwo{ padding:0 0 0 14px !important; background:url(../images/dot_listtwo2.gif) no-repeat 0 6px;}
+	.mainbottom_con_main{padding:4% 20px;} 
+    .mainbottom_con_main ul li{ font-size:12px;}
+    .list{margin:20px 32px 20px 0;}
+	.list_l_con{padding:0 38px 0 62px; height:100%;}
+	.mainbottom_con_body{ overflow:hidden; padding:2% 0 4% 0;}
+
+}
+@media screen and (max-width: 1024px) {
+	.mainbottom_con_main ul li{height:22px;line-height: 22px;}
+	.mainbottom_con_main{padding:4% 20px; }
+	}
+/*@media screen and (max-width: 1366px) {
+.his_icon{padding:24px 0 0 0;height:40px;}
+.his_con{ padding:10px 0 0 8px;}
+.his_con ul li{ height:30px; line-height:30px; }
+
+.mainbottom_con_main{padding:4% 10px;} 
+.mainbottom_con_main ul li{ font-size:12px;}
+
+.list{margin:10px 32px 10px 0;}
+
+} */

web/066 系统架构可视化监控/js/auto_height.js

@@ -0,0 +1,33 @@
+// JavaScript Document
+/**
+ *
+ * 页面js效果
+ * @author cql 2014-01-09
+*/
+
+//高度自适应
+window.onload=window.onresize=function(){
+	var wh=$(window).height();
+	var wd=$(window).width();
+	var header=$(".header").height();
+	var kong=$(".kong").height();
+	var maintop_r=$(".maintop_r").height();
+	var pro_icon=$(".pro_icon").height();
+
+	$(".main").css("height",wh-header-kong-20+"px");
+	$(".maintop_con").height($(".maintop_r").height()-$(".sys_tit").height()-2);
+	$(".list").height($(".right").height()-40);
+	$(".pro_con").height($(".list_l_con").height()-pro_icon-2);
+
+	$(".mainbottom_con").height($(".mainbottom").height()-kong);
+	$(".mainbottom_con_mains").height($(".mainbottom_con_lr").height()-$(".tod_tit").height()-2);
+    $(".mainbottom_con_bodys").height($(".mainbottom_con_lr").height()-$(".tod_tit").height()-2);
+
+	if(wd <1024){
+	 $(".list").height($(".right").height()-40);
+	} else{
+	 $(".list").height($(".right").height()-40);
+	}
+	//$(".wd").height($(".mainbottom_con_body").height());
+	//$(".data").height($(".wd").height()-$(".wd ul").height()-36);
+};

web/066 系统架构可视化监控/view/index.html

@@ -0,0 +1,188 @@
+<!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="更多资源：https://gitee.com/iGaoWei/big-data-view"/></div>
+    <div class="logo"><img src="../images/logo.gif" alt="更多资源：https://gitee.com/iGaoWei/big-data-view" /></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="更多资源：https://gitee.com/iGaoWei/big-data-view" /></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="更多资源：https://gitee.com/iGaoWei/big-data-view"/></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="更多资源：https://gitee.com/iGaoWei/big-data-view"/></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="更多资源：https://gitee.com/iGaoWei/big-data-view"/></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="更多资源：https://gitee.com/iGaoWei/big-data-view"/></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="更多资源：https://gitee.com/iGaoWei/big-data-view"/></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://gitee.com/iGaoWei/big-data-view -->
+<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>