zoukankan      html  css  js  c++  java
  • Html模板

    <!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>
  • 相关阅读:
    vue获取客户端ip地址
    Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'
    PageHelper使用以及PageInfo中分页对象的转化
    PyCharm创建Django项目并连接mysql数据库
    Java常用类介绍
    Mybatis中的Mapper.xml映射文件sql查询接收多个参数
    学会聆听……
    SpringSecurity学习
    自定义线程池配置类
    雅虎的工程师团队给出的35个web开发最佳实践
  • 原文地址:https://www.cnblogs.com/mrxiaohe/p/6037572.html
Copyright © 2011-2022 走看看