Django 搭建CMDB系统完整[3](主页面)
main_page.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CMDB-后台系统</title> <link href="/static/style/authority/main_css.css" rel="stylesheet" type="text/css" /> <link href="/static/style/authority/zTreeStyle.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="/static/scripts/jquery/jquery-1.7.1.js"></script> <script type="text/javascript" src="/static/scripts/zTree/jquery.ztree.core-3.2.js"></script> <script type="text/javascript" src="/static/scripts/authority/commonAll.js"></script> <script type="text/javascript"> /退出系统/ function logout(){ if(confirm("您确定要退出本系统吗？")){ window.location.href = "/login/"; } } /**获得当前日期**/ function getDate01(){ var time = new Date(); var myYear = time.getFullYear(); var myMonth = time.getMonth()+1; var myDay = time.getDate(); if(myMonth < 10){ myMonth = "0" + myMonth; } document.getElementById("yue_fen").innerHTML = myYear + "." + myMonth; document.getElementById("day_day").innerHTML = myYear + "." + myMonth + "." + myDay; } /**加入收藏夹**/ function addfavorite(){ var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf("360se") > -1){ art.dialog({icon:'error', title:'友情提示', drag:false, resize:false, content:'由于360浏览器功能限制，加入收藏夹功能失效', ok:true,}); }else if (ua.indexOf("msie 8") > -1){ window.external.AddToFavoritesBar('${dynamicURL}/authority/loginInit.action','xmrbi-cmdb');//IE8 }else if (document.all){ window.external.addFavorite('${dynamicURL}/authority/loginInit.action','xmrbi-cmdb'); }else{ art.dialog({icon:'error', title:'友情提示', drag:false, resize:false, content:'添加失败，请用ctrl+D进行添加', ok:true,}); } } </script> <script type="text/javascript"> /* zTree插件加载目录的处理 */ var zTree; var setting = { view: { dblClickExpand: false, showLine: false, expandSpeed: ($.browser.msie && parseInt($.browser.version)<=6)?"":"fast" }, data: { key: { name: "resourceName" }, simpleData: { enable:true, idKey: "resourceID", pIdKey: "parentID", rootPId: "" } }, callback: { // beforeExpand: beforeExpand, // onExpand: onExpand, onClick: zTreeOnClick } }; var curExpandNode = null; function beforeExpand(treeId, treeNode) { var pNode = curExpandNode ? curExpandNode.getParentNode():null; var treeNodeP = treeNode.parentTId ? treeNode.getParentNode():null; for(var i=0, l=!treeNodeP ? 0:treeNodeP.children.length; i<l; i++ ) { if (treeNode !== treeNodeP.children[i]) { zTree.expandNode(treeNodeP.children[i], false); } } while (pNode) { if (pNode === treeNode) { break; } pNode = pNode.getParentNode(); } if (!pNode) { singlePath(treeNode); } } function singlePath(newNode) { if (newNode === curExpandNode) return; if (curExpandNode && curExpandNode.open==true) { if (newNode.parentTId === curExpandNode.parentTId) { zTree.expandNode(curExpandNode, false); } else { var newParents = []; while (newNode) { newNode = newNode.getParentNode(); if (newNode === curExpandNode) { newParents = null; break; } else if (newNode) { newParents.push(newNode); } } if (newParents!=null) { var oldNode = curExpandNode; var oldParents = []; while (oldNode) { oldNode = oldNode.getParentNode(); if (oldNode) { oldParents.push(oldNode); } } if (newParents.length>0) { for (var i = Math.min(newParents.length, oldParents.length)-1; i>=0; i--) { if (newParents[i] !== oldParents[i]) { zTree.expandNode(oldParents[i], false); break; } } }else { zTree.expandNode(oldParents[oldParents.length-1], false); } } } } curExpandNode = newNode; } function onExpand(event, treeId, treeNode) { curExpandNode = treeNode; } /** 用于捕获节点被点击的事件回调函数 **/ function zTreeOnClick(event, treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj("dleft_tab1"); zTree.expandNode(treeNode, null, null, null, true); // zTree.expandNode(treeNode); // 规定：如果是父类节点，不允许单击操作 if(treeNode.isParent){ // alert("父类节点无法点击哦..."); return false; } // 如果节点路径为空或者为"#"，不允许单击操作 if(treeNode.accessPath=="" || treeNode.accessPath=="#"){ //alert("节点路径为空或者为'#'哦..."); return false; } // 跳到该节点下对应的路径, 把当前资源ID(resourceID)传到后台，写进Session rightMain(treeNode.accessPath); if( treeNode.isParent ){ $('#here_area').html('当前位置：'+treeNode.getParentNode().resourceName+' > <span style="color:#1A5CC6">'+treeNode.resourceName+'</span>'); }else{ $('#here_area').html('当前位置：系统 > <span style="color:#1A5CC6">'+treeNode.resourceName+'</span>'); } }; /* 上方菜单 */ function switchTab(tabpage,tabid){ var oItem = document.getElementById(tabpage).getElementsByTagName("li"); for(var i=0; i<oItem.length; i++){ var x = oItem[i]; x.className = ""; } if('left_tab1' == tabid){ $(document).ajaxStart(onStart).ajaxSuccess(onStop); // 异步加载"业务模块"下的菜单 loadMenu('YEWUMOKUAI', 'dleft_tab1'); }else if('left_tab2' == tabid){ $(document).ajaxStart(onStart).ajaxSuccess(onStop); // 异步加载"系统管理"下的菜单 loadMenu('XITONGMOKUAI', 'dleft_tab1'); }else if('left_tab3' == tabid){ $(document).ajaxStart(onStart).ajaxSuccess(onStop); // 异步加载"其他"下的菜单 loadMenu('QITAMOKUAI', 'dleft_tab1'); } } $(document).ready(function(){ $(document).ajaxStart(onStart).ajaxSuccess(onStop); /** 默认异步加载"业务模块"目录 **/ loadMenu('YEWUMOKUAI', "dleft_tab1"); // 默认展开所有节点 if( zTree ){ // 默认展开所有节点 zTree.expandAll(true); } }); function loadMenu(resourceType, treeObj){ /*$.ajax({ type:"POST", url:"${dynamicURL}/authority/modelPart.action?resourceType=" + resourceType, dataType : "json", success:function(data){ // 如果返回数据不为空，加载"业务模块"目录 if(data != null){ // 将返回的数据赋给zTree $.fn.zTree.init($("#"+treeObj), setting, data); alert(treeObj); zTree = $.fn.zTree.getZTreeObj(treeObj); if( zTree ){ // 默认展开所有节点 zTree.expandAll(true); } } } });*/ data = [{"accessPath":"","checked":false,"delFlag":0,"parentID":1,"resourceCode":"","resourceDesc":"","resourceGrade":2,"resourceID":3,"resourceName":"菜单一","resourceOrder":0,"resourceType":""}, {"accessPath":"house_list.html","checked":false,"delFlag":0,"parentID":3,"resourceCode":"","resourceDesc":"","resourceGrade":2,"resourceID":31,"resourceName":"菜单1","resourceOrder":0,"resourceType":""}, {"accessPath":"","checked":false,"delFlag":0,"parentID":3,"resourceCode":"","resourceDesc":"","resourceGrade":2,"resourceID":32,"resourceName":"菜单2","resourceOrder":0,"resourceType":""}, {"accessPath":"","checked":false,"delFlag":0,"parentID":1,"resourceCode":"","resourceDesc":"","resourceGrade":2,"resourceID":4,"resourceName":"菜单二","resourceOrder":0,"resourceType":""}, {"accessPath":"","checked":false,"delFlag":0,"parentID":4,"resourceCode":"","resourceDesc":"","resourceGrade":2,"resourceID":41,"resourceName":"菜单3","resourceOrder":0,"resourceType":""}, {"accessPath":"","checked":false,"delFlag":0,"parentID":4,"resourceCode":"","resourceDesc":"","resourceGrade":2,"resourceID":42,"resourceName":"菜单4","resourceOrder":0,"resourceType":""}]; // 如果返回数据不为空，加载"业务模块"目录 if(data != null){ // 将返回的数据赋给zTree("#"+treeObj), setting, data); // alert(treeObj); zTree = $.fn.zTree.getZTreeObj(treeObj); if( zTree ){ // 默认展开所有节点 zTree.expandAll(true); } } } //ajax start function function onStart(){ $("#ajaxDialog").show(); } //ajax stop function function onStop(){ // $("#ajaxDialog").dialog("close"); $("#ajaxDialog").hide(); } </script> </head> <body onload="getDate01()"> <div id="top"> <div id="top_logo"> <img alt="logo" src="/static/images/common/logo.jpg" width="274" height="49" style="vertical-align:middle;"> </div> <div id="top_links"> <div id="top_op"> <ul> <li> <img alt="当前用户" src="/static/images/common/user.jpg">： <span>{% if user.username %}{{ user.username }}{% else %}anonymous user!You need to <a href="/login/">login</a>{% endif %}</span> </li> <li> <img alt="事务月份" src="/static/images/common/month.jpg">： <span id="yue_fen"></span> </li> <li> <img alt="今天是" src="/static/images/common/date.jpg">： <span id="day_day"></span> </li> </ul> </div> <div id="top_close"> <a href="javascript:void(0);" onclick="logout();" target="_parent"> <img alt="退出系统" title="退出系统" src="/static/images/common/close.jpg" style="position: relative; top: 10px; left: 25px;"> </a> </div> </div> </div> <div id="side"> <div id="left_menu"> <ul id="TabPage2" style="height:200px; margin-top:50px;"> <li id="left_tab1" class="selected" onClick="javascript:switchTab('TabPage2','left_tab1');" title="服务器资产管理"> <img alt="服务器资产管理" title="服务器资产管理" src="/static/images/common/1_hover.jpg" width="33" height="31"> </li> <li id="left_tab2" onClick="javascript:switchTab('TabPage2','left_tab2');" title="监控管理系统"> <img alt=" 监控管理系统" title=" 监控管理系统" src="/static/images/common/2.jpg" width="33" height="31"> </li> <li id="left_tab3" onClick="javascript:switchTab('TabPage2','left_tab3');" title="系统管理"> <img alt=" 系统管理" title="系统管理" src="/static/images/common/3.jpg" width="33" height="31"> </li> </ul> <div id="nav_show" style="position:absolute; bottom:0px; padding:10px;"> <a href="javascript:;" id="show_hide_btn"> <img alt="显示/隐藏" title="显示/隐藏" src="/static/images/common/nav_hide.png" width="35" height="35"> </a> </div> </div> <div id="left_menu_cnt"> <div id="nav_module"> <img src="/static/images/common/module_1.png" width="210" height="58"/> </div> <div id="nav_resource"> <ul id="dleft_tab1" class="ztree"></ul> </div> </div> </div> <script type="text/javascript"> $(function(){ $('#TabPage2 li').click(function(){ var index = $(this).index(); $(this).find('img').attr('src', '/static/images/common/'+ (index+1) +'_hover.jpg'); $(this).css({background:'#fff'}); $('#nav_module').find('img').attr('src', '/static/images/common/module_'+ (index+1) +'.png'); $('#TabPage2 li').each(function(i, ele){ if( i!=index ){ $(ele).find('img').attr('src', '/static/images/common/'+ (i+1) +'.jpg'); $(ele).css({background:'#044599'}); } }); // 显示侧边栏 switchSysBar(true); }); // 显示隐藏侧边栏 $("#show_hide_btn").click(function() { switchSysBar(); }); }); /**隐藏或者显示侧边栏**/ function switchSysBar(flag){ var side = $('#side'); var left_menu_cnt = $('#left_menu_cnt'); if( flag==true ){ // flag==true left_menu_cnt.show(500, 'linear'); side.css({width:'280px'}); $('#top_nav').css({width:'77%', left:'304px'}); $('#main').css({left:'280px'}); }else{ if ( left_menu_cnt.is(":visible") ) { left_menu_cnt.hide(10, 'linear'); side.css({width:'60px'}); $('#top_nav').css({width:'100%', left:'60px', 'padding-left':'28px'}); $('#main').css({left:'60px'}); $("#show_hide_btn").find('img').attr('src', '/static/images/common/nav_show.png'); } else { left_menu_cnt.show(500, 'linear'); side.css({width:'280px'}); $('#top_nav').css({width:'77%', left:'304px', 'padding-left':'0px'}); $('#main').css({left:'280px'}); $("#show_hide_btn").find('img').attr('src', '/static/images/common/nav_hide.png'); } } } </script> <!-- side menu start --> <div id="top_nav"> <span id="here_area">当前位置：系统 > 系统介绍</span> </div> <div id="main"> <iframe name="right" id="rightMain" src="" frameborder="no" scrolling="auto" width="100%" height="100%" allowtransparency="true"/> </div> </body> </html>
