Html模板

时间:2024-03-03 19:00:18
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN">
<!-- saved from url=(0022)http://www.h3c.com.cn/ -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Html模板</title>
<style> /*提示圆角框*/
.circle_bot {
    clear: both;
    font: 12px/1.125 Arial;
}

.circle_bot .s_b b, .circle_bot span.s_i i {
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
    display: block;
    clear: both;
}

.circle_bot .s_b b, .circle_bot span.s_i i, .circle_bot .info {
    background: #fff2f2;
    border: #f88 solid;
}

.circle_bot b.b1 {
    border-width: 1px 0 0 0;
    margin: 0 2px;
    height: 0px;
}

.circle_bot b.b2 {
    border-width: 0 1px;
    margin: 0 1px;
    height: 1px;
}

.circle_bot span.s_i i {
    height: 1px;
    border-width: 0 1px;
}

.circle_bot .i1 {
    width: 0px;
    margin-left: 36px;
}

.circle_bot .i2 {
    width: 2px;
    margin-left: 35px;
}

.circle_bot .i3 {
    width: 4px;
    margin-left: 34px;
}

.circle_bot .i4 {
    width: 6px;
    margin-left: 33px;
}

.circle_bot .i5 {
    width: 8px;
    margin-left: 32px;
}

.circle_bot .i6 {
    width: 10px;
    margin-left: 31px;
    margin-top: -1px;
}

.circle_bot .info {
    border-width: 0 1px;
    color: #333;
    padding: 10px;
} /*浅黄边白底*/
div.circle_yellow {
    clear: both;
}

div.circle_yellow .s_b b, div.circle_yellow .s_i i, div.circle_yellow .info
    {
    background: #fff;
    border-color: #db9;
}

body {
    font-size: 10pt;
}

.root {
    
}

.theader {
    background-color: #eeeeee;
    text-align: center;
    font-weight: bold;
}

ul, li {
    display: block;
    cursor: pointer;
    padding-left: 5px;
    margin: 0px
}

ul {
    padding-left: 15px;
}

.highlight {
    background-color: #88ff88;
}

.pass {
    background-color: #ffffff;
}

.info {
    background-color: #ccccff;
}

.warn {
    background-color: #ffff99;
}

.error {
    background-color: #ffbbbb;
}

.fatal {
    background-color: #ff0000;
    color: #ffffff;
}

.diagram {
    font-size: 10pt;
    padding: 3px;
    border: 1px solid #555555;
}

#diagram {
    font-size: 12pt;
    text-align: left;
    padding: 20px;
}

#device_info {
    font-size: 10pt;
    padding: 20px;
}

#diag_report {
    padding: 20px;
}

#diag_report table {
    border: 1px solid #999999;
    border-right: 2px solid #999999;
}

#diag_report table td {
    word-break: keep-all;
    border-bottom: 1px solid #555555;;
    padding: 5px;
    font-size: 10pt;
}

#solution {
    width: 550px;
    line-height: 15pt;
    display: none;
    position: absolute;
}

#solution_flag_div {
    cursor: pointer;
    padding-left: 20px;
    width: 200px;
}

#diag_path {
    font-size: 10pt;
}
</style>
</head>
<body>
    <div id="diag_report">
        <table cellspacing=\'0\' cellpadding=\'0\'>
            <tr class=\'theader\'>
                <td style=\'border-right: 1px solid\'>编号
                <td>类别</td>
                <td>检查项</td>
                <td>级别</td>
                <td class=\'infoheader\'>巡检结果</td>
                <td class=\'infoheader\'>建议</td>
            </tr>
            <tr>
                <td style=\'border-right: 1px solid;\'>1</td>
                <td rowspan=\'2\' style=\'border-right: 1px solid\'>集群</td>
                <td>检查集群高可靠性(HA)功能</td>
                <td>重要</td>
                <td>不通过</td>
                <td class=\'root\'><ul>
                        <li class=\'error\' onclick=\'switch_menu(this)\'>+建议开启集群高可靠性(HA)功能</li>
                        <ul>
                            <li class=\'error\' onclick=\'switch_menu(this)\'>序号="1"&nbsp;&nbsp;&nbsp;集群名称="Cluster02"&nbsp;&nbsp;&nbsp;HA状态="未开启"&nbsp;&nbsp;&nbsp;</li>
                        </ul>
                    </ul></td>
            </tr>
            <tr>
                <td style=\'border-right: 1px solid;\'>2</td>
                <td>检查集群计算资源DRS功能</td>
                <td>重要</td>
                <td>不通过</td>
                <td class=\'root\'><ul>
                        <li class=\'error\' onclick=\'switch_menu(this)\'>+建议开启集群计算资源DRS功能</li>
                        <ul>
                            <li class=\'error\' onclick=\'switch_menu(this)\'>序号="1"&nbsp;&nbsp;&nbsp;集群名称="Cluster01"&nbsp;&nbsp;&nbsp;计算DRS状态="未开启"&nbsp;&nbsp;&nbsp;</li>
                            <li class=\'error\' onclick=\'switch_menu(this)\'>序号="2"&nbsp;&nbsp;&nbsp;集群名称="Cluster02"&nbsp;&nbsp;&nbsp;计算DRS状态="未开启"&nbsp;&nbsp;&nbsp;</li>
                        </ul>
                    </ul></td>
            </tr>
            <tr>
                <td style=\'border-right: 1px solid;\'>3</td>
                <td rowspan=\'8\' style=\'border-right: 1px solid\'>主机</td>
                <td>检查CVK主机和CVM主机的CAS版本是否一致</td>
                <td></td>
                <td>通过</td>
                <td class=\'root\'><ul>
                        <li class=\'info\' onclick=\'switch_menu(this)\'>CVK主机和CVM主机的CAS版本必须保持一致</li>
                    </ul></td>
            </tr>
            <tr>
                <td style=\'border-right: 1px solid;\'>4</td>
                <td>检查主机状态是否正常</td>
                <td>重要</td>
                <td>通过</td>
                <td class=\'root\'><ul>
                        <li class=\'info\' onclick=\'switch_menu(this)\'>确保所有主机状态正常</li>
                    </ul></td>
            </tr>
            <tr>
                <td style=\'border-right: 1px solid;\'>5</td>
                <td>检查NTP服务器配置</td>
                <td>重要</td>
                <td>不通过</td>
                <td class=\'root\'><ul>
                        <li class=\'error\' onclick=\'switch_menu(this)\'>+建议配置主备NTP服务器</li>
                        <ul>
                            <li class=\'error\' onclick=\'switch_menu(this)\'>NTP服务器配置="未配置"&nbsp;&nbsp;&nbsp;</li>
                        </ul>
                    </ul></td>
            </tr>
            <tr>
                <td style=\'border-right: 1px solid;\'>6</td>
                <td>检查CVK和CVM主机的时间差</td>
                <td>重要</td>
                <td>通过</td>
                <td class=\'root\'><ul>
                        <li class=\'info\' onclick=\'switch_menu(this)\'>CVK和CVM主机的系统时间需要保持一致</li>
                    </ul></td>
            </tr>
            <tr>
                <td style=\'border-right: 1px solid;\'>7</td>
                <td>检查主机系统时间和物理时钟的时间差</td>
                <td>重要</td>
                <td>通过</td>
                <td class=\'root\'><ul>
                        <li class=\'info\' onclick=\'switch_menu(this)\'>主机系统时间和物理时钟需要保持一致</li>
                    </ul></td>
            </tr>
            <tr>
                <td style=\'border-right: 1px solid;\'>8</td>
                <td>检查主机CPU利用率</td>
                <td>紧急</td>
                <td>通过</td>
                <td class=\'root\'><ul>
                        <li class=\'info\' onclick=\'switch_menu(this)\'>建议主机CPU利用率不要超过80%</li>
                    </ul></td>
            </tr>
            <tr>
                <td style=\'border-right: 1px solid;\'>9</td>
                <td>检查主机内存利用率</td>
                <td>紧急</td>
                <td>通过</td>
                <td class=\'root\'><ul>
                        <li class=\'info\' onclick=\'switch_menu(this)\'>建议主机内存利用率不要超过80%</li>
                    </ul></td>
            </tr>
            <tr>
                <td style=\'border-right: 1px solid;\'>10</td>
                <td>检查主机分区利用率</td>
                <td>紧急</td>
                <td>通过</td>
                <td class=\'root\'><ul>
                        <li class=\'info\' onclick=\'switch_menu(this)\'>建议主机分区利用率不要超过80%</li>
                    </ul></td>
            </tr>
            <tr>
                <td style=\'border-right: 1px solid;\'>11</td>
                <td rowspan=\'5\' style=\'border-right: 1px solid\'>虚拟交换机</td>
                <td>检查虚拟交换机状态</td>
                <td>重要</td>
                <td>通过</td>
                <td class=\'root\'><ul>
                        <li class=\'info\' onclick=\'switch_menu(this)\'>确保虚拟交换机状态正常</li>
                    </ul></td>
            </tr>
            <tr>
                <td style=\'border-right: 1px solid;\'>12</td>
                <td>检查主机是否只有管理虚拟交换机</td>
                <td>重要</td>
                <td>通过</td>
                <td class=\'root\'><ul>
                        <li class=\'info\' onclick=\'switch_menu(this)\'>管理、存储和业务虚拟交换机不能合并使用</li>
                    </ul></td>
            </tr>
            <tr>
                <td style=\'border-right: 1px solid;\'>13</td>
                <td>检查虚拟交换机的网卡状态</td>
                <td>重要</td>
                <td>不通过</td>
                <td class=\'root\'><ul>
                        <li class=\'error\' onclick=\'switch_menu(this)\'>+确保虚拟交换机绑定的物理网卡状态正常</li>
                        <ul>
                            <li class=\'error\' onclick=\'switch_menu(this)\'>序号="1"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK02"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch-test"&nbsp;&nbsp;&nbsp;网卡名称="eth3"&nbsp;&nbsp;&nbsp;网卡状态="不活动"&nbsp;&nbsp;&nbsp;</li>
                        </ul>
                    </ul></td>
            </tr>
            <tr>
                <td style=\'border-right: 1px solid;\'>14</td>
                <td>检查虚拟交换机的链路冗余状态</td>
                <td>重要</td>
                <td>不通过</td>
                <td class=\'root\'><ul>
                        <li class=\'error\' onclick=\'switch_menu(this)\'>+建议虚拟交换机绑定多个物理网卡,提高链路冗余性</li>
                        <ul>
                            <li class=\'error\' onclick=\'switch_menu(this)\'>序号="1"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK01"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch-app"&nbsp;&nbsp;&nbsp;网卡名称="eth1"&nbsp;&nbsp;&nbsp;</li>
                            <li class=\'error\' onclick=\'switch_menu(this)\'>序号="2"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK01"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch-storage"&nbsp;&nbsp;&nbsp;网卡名称="eth2"&nbsp;&nbsp;&nbsp;</li>
                            <li class=\'error\' onclick=\'switch_menu(this)\'>序号="3"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK01"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch0"&nbsp;&nbsp;&nbsp;网卡名称="eth0"&nbsp;&nbsp;&nbsp;</li>
                            <li class=\'error\' onclick=\'switch_menu(this)\'>序号="4"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK02"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch-app"&nbsp;&nbsp;&nbsp;网卡名称="eth2"&nbsp;&nbsp;&nbsp;</li>
                            <li class=\'error\' onclick=\'switch_menu(this)\'>序号="5"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK02"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch-storage"&nbsp;&nbsp;&nbsp;网卡名称="eth1"&nbsp;&nbsp;&nbsp;</li>
                            <li class=\'error\' onclick=\'switch_menu(this)\'>序号="6"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK02"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch-test"&nbsp;&nbsp;&nbsp;网卡名称="eth3"&nbsp;&nbsp;&nbsp;</li>
                            <li class=\'error\' onclick=\'switch_menu(this)\'>序号="7"&nbsp;&nbsp;&nbsp;主机名称="HZ-CAS01-CVK02"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch0"&nbsp;&nbsp;&nbsp;网卡名称="eth0"&nbsp;&nbsp;&nbsp;</li>
                        </ul>
                    </ul></td>
            </tr>
            <tr>
                <td style=\'border-right: 1px solid;\'>15</td>
                <td>检查集群下CVK主机的虚拟交换机名称是否一致</td>
                <td>紧急</td>
                <td>不通过</td>
                <td class=\'root\'><ul>
                        <li class=\'error\' onclick=\'switch_menu(this)\'>+确保集群下CVK主机的虚拟交换机名称保持一致</li>
                        <ul>
                            <li class=\'error\' onclick=\'switch_menu(this)\'>+序号="1"&nbsp;&nbsp;&nbsp;集群名称="Cluster01"&nbsp;&nbsp;&nbsp;主机一名称="HZ-CAS01-CVK01"&nbsp;&nbsp;&nbsp;主机二名称="HZ-CAS01-CVK02"&nbsp;&nbsp;&nbsp;</li>
                            <ul>
                                <li class=\'error\' onclick=\'switch_menu(this)\'>主机名称="HZ-CAS01-CVK01"&nbsp;&nbsp;&nbsp;虚拟交换机名称="test,vswitch-app,vswitch-storage,vswitch0"&nbsp;&nbsp;&nbsp;</li>
                                <li class=\'error\' onclick=\'switch_menu(this)\'>主机名称="HZ-CAS01-CVK02"&nbsp;&nbsp;&nbsp;虚拟交换机名称="vswitch-app,vswitch-storage,vswitch-test,vswitch0"&nbsp;&nbsp;&nbsp;</li>
                            </ul>
                        </ul>
                    </ul></td>
            </tr>
        </table>
    </div>
    <!--解决方案文字框-->
    <div id="solution" class="circle_bot circle_yellow">
        <span class="s_b"> <b class="b1"></b> <b class="b2"></b></span>
        <div id="info" class="info"></div>
        <span class="s_b"><b class="b2"></b> <b class="b1"></b></span> <span
            class="s_i"> <i class="i6"></i> <i class="i5"></i> <i
            class="i4"></i> <i class="i3"></i> <i class="i2"></i> <i class="i1"></i></span>
    </div>

    <script> 
    function showfold(obj)
            {
                var
        curr_status=obj.style.display; obj.style.display=( curr_status==
        "block" || curr_status== "" )? "none" : "";
            }
            
            function
        addEvent(obj)
            {
                obj.onclick=showfold(obj) }
            
            function
        fold (obj)
            {
                obj.style.display="none"
        ;
            }
            
            function
        show (obj)
            {
                obj.style.display="block"
        ;
            }
                        
            function
        show_solution(obj)
            {
                
                //IE支持window.event事件,而火狐(ff)不支持,需要显式地去获取onmouseover事件event,才能用event获得坐标x,y
        var event=getEvent(); var show_flag=document.getElementById(
        "solution_flag").checked;
                if (show_flag !=true)
        {
                    return;
                }
                
                var text=obj.getAttribute(
        "solution");
                if (text== null || text.length==
        0)
                {
                    return;
                }
                var
        solution=document.getElementById( "solution");
                var
        info=document.getElementById(
        "info");
                solution.style.display="block"
        ;    
                
                //ff不支持innerText方法,改为兼容的textContent
        if(!document.all) 
                {
                    info.textContent=text;
        } else {
                    info.innerText=text;
        }
                


                //ff不支持style.posLeft和style.posTop方法,这里改为兼容的style.left和style.top;另外ff还要求赋值得加上"px"
                //solution.style.left=event.clientX
        - 30 + document.documentElement.scrollLeft+"px";
                //solution.style.top=event.clientY
        - solution.offsetHeight - 15 + document.documentElement.scrollTop+"px" ;
                
                solution.style.left=event.clientX
        - 30 + (document.body.scrollLeft||document.documentElement.scrollLeft)+"px";                                                                                                       
                solution.style.top=event.clientY
        - solution.offsetHeight - 15 + (document.body.scrollTop||document.documentElement.scrollTop)+"px" ;
                

                //solution.style.posLeft=event.clientX
        - 30 + document.documentElement.scrollLeft;
                //solution.style.posTop=event.clientY
        - solution.offsetHeight - 15 + document.documentElement.scrollTop ;
                        
            }
            function
        hide_solution()
            {
                document.getElementById("solution").style.display="none"
        ;
            }
            
            function highlight(obj)
            {
                var
        class_old=obj.className; obj.className="highlight"
        ;
                obj.setAttribute("class_old", class_old);
                
            
                show_solution(obj);
                
                
            }
            
            function
        recover(obj)
            {
                obj.className=obj.getAttribute(
        "class_old");
                hide_solution();
            }
            
            function
        getRootElements()
            {
                var result=[]; var
        root_list=document.getElementsByTagName( "TD");
                for (var i=0; i< root_list.length ; i ++)
                {
                    if (root_list[i].className == "root")
                    {
                        result.push(root_list[i]);
                    }
                } 
                return result;
            }
            
            //把除第一级标题下的子标题隐藏
            var is_set = false;
            function switch_sub ( how )
            {
                //var root_list = document.getElementsByClassName("root");
                var root_list = getRootElements();
                
                for (var i = 0 ; i < root_list.length; i++)
                {
                    var ul_list = root_list[i].getElementsByTagName("UL");
                    for (var j = 0; j < ul_list.length; j++)
                    {
                            if (ul_list[j] != root_list[i].firstChild)
                            {
                                if (how == "fold")
                                {
                                    fold(ul_list[j]);
                                }else{
                                    show(ul_list[j]);
                                }
                            }
                    }
                    
                    if (!is_set)
                    {
                        var li_list = root_list[i].getElementsByTagName("LI");
                        for ( var k = 0 ; k < li_list.length; k++)
                        {
                            li_list[k].setAttribute("onmouseover", "highlight(this)"); 
                            li_list[k].setAttribute("onmouseout", "recover(this)");
                        }
                    }
                    
                    

                }
                is_set = true;
            }
            
            //展开和收起子项时,改变+ -
            function change_icon(obj)
            {
                var str = obj.firstChild.nodeValue;
                if ( str.indexOf("+") < 3 && str.indexOf("+") != -1)
                {
                    
                    obj.firstChild.nodeValue = str.replace("+", "-");
                    //obj.firstChild.nodeValue = str.replace("?", "?");
                        
                } 
                else if ( str.indexOf("-") < 3 && str.indexOf("-") != -1 )
                {
                    obj.firstChild.nodeValue = str.replace("-", "+");
                }
                
            }
            
            function switch_menu(obj)
            {
                var uplevel = obj.parentNode;
                //var uplevel = obj;
                var ul_list = uplevel.childNodes;
                
                
                change_icon(obj);
                
                
                for (var i = 0; i < ul_list.length; i++)
                {
                    if (ul_list[i].nodeName == "UL")
                    {
                        showfold(ul_list[i]);
                    }
                }
            }
            switch_sub(\'fold\');
            
            
            
            
            //兼容ie和ff获得event的方法
            function getEvent()  
      {  
        //如果是IE
        if(document.all)  return window.event;
        
        //如果不是IE    
        func=getEvent.caller;        
        while(func!=null){  
            var arg0=func.arguments[0]; 
            if(arg0) 
            { 
              if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)) 
              {  
              return arg0; 
              } 
            } 
            func=func.caller; 
        } 
        return null; 
      } 
      //------------------------------------------------------------------------------------------------------------------------------------------------------------------
      //兼容修改到这结束

            
            
            
        </script>
</body>
</html>