标題
<!DOCTYPE html>
<html>
<script type="text/javascript" src="/jquery.min.js"></script>
<head>
<title>無标題頁</title>
<style type="text/css">
body {
font: 12px/1.8 "宋體";
position: relative;
}
html, body {
height: 100%;
overflow-y: hidden;
margin: 0;
padding: 0;
overflow: auto;
}
.strt-wrap {
width: 20000px;
margin: 2px auto;
float: left;
margin-bottom: 200px;
}
.strt-part {
text-align: center;
float: left;
position: relative;
}
.strt-part .line-v {
position: relative;
height: 40px;
width: 100%;
}
.strt-part .line-v span {
display: block;
background: #ccc;
position: absolute;
top: 0;
font-size: 0;
line-height: 1px;
width: 1px;
height: 40px;
left: 50%;
}
.strt-name {
display: inline-block;
padding: 0 5px;
height: 24px;
line-height: 24px;
border: 1px solid #ccc;
margin: 0 10px;
border-radius: 3px;
background: #f8f8f8;
}
.strt-part .line-h {
height: 1px;
display: block;
background: #ccc;
position: absolute;
top: 0;
font-size: 0;
}
.strt-part .line-h-l {
width: 50%;
left: 0;
}
.strt-part .line-h-c {
width: 100%;
left: 0;
}
.strt-part .line-h-r {
width: 50%;
right: 0;
}
.strt-block {
float: inherit;
}
</style>
</head>
<body style="/* overflow: hidden; */">
<!-- <div class="strt-wrap" id="strtWrap">
<div class="strt-block">
<div class="strt-part">
<span class="strt-name" style="background: #DBA659; color: white;">檔案類</span>
<div class="line-v">
<span></span>
</div>
<div class="strt-part">
<span class="line-h line-h-r"></span>
<div class="line-v">
<span></span>
</div>
<span class="strt-name" style="background: #DBA659; color: white;">檔案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v">
<span></span>
</div>
<span class="strt-name" style="background: #DBA659; color: white;">檔案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v">
<span></span>
</div>
<div class="strt-block">
<div class="strt-part">
<span class="strt-name" style="background: #DBA659; color: white;">檔案類</span>
<div class="line-v">
<span></span>
</div>
<div class="strt-part">
<span class="line-h line-h-r"></span>
<div class="line-v">
<span></span>
</div>
<span class="strt-name" style="background: #DBA659; color: white;">檔案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-l"></span>
<div class="line-v">
<span></span>
</div>
<span class="strt-name" style="background: #DBA659; color: white;">檔案</span>
</div>
</div>
</div>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v">
<span></span>
</div>
<span class="strt-name" style="background: #DBA659; color: white;">檔案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v">
<span></span>
</div>
<span class="strt-name" style="background: #DBA659; color: white;">檔案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v">
<span></span>
</div>
<span class="strt-name" style="background: #DBA659; color: white;">檔案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-c"></span>
<div class="line-v">
<span></span>
</div>
<span class="strt-name" style="background: #DBA659; color: white;">檔案</span>
</div>
<div class="strt-part">
<span class="line-h line-h-l"></span>
<div class="line-v">
<span></span>
</div>
<span class="strt-name" style="background: #DBA659; color: white;">檔案</span>
</div>
</div>
</div>
</div> -->
<script type="text/javascript">
$(function(){
init(testData)
})
function init(data){
var result = data[0];
DFS(result,'c',false,0);
$("body").append(html);
html="";
DFS(data[1],'c',false,0);
$("body").append(html);
}
function DFS(childArry,rgl,flag,num){
if(childArry.children){
if(childArry.children.length>0){
if(num==0){
html+='<div class="strt-wrap" id="strtWrap">';
html+='<div class="strt-block">';
}
html+='<div class="strt-part">';
if(flag==false && num!=0){
html+='<span class="line-h line-h-'+rgl+'"></span>';
html+='<div class="line-v">';
html+='<span></span>';
html+='</div>';
}
html+='<div class="strt-block">';
html+='<div class="strt-part">';
html+='<span class="strt-name" style="background: #DBA659; color: white;">'+childArry.text+'</span>';
html+='<div class="line-v">';
html+='<span></span>';
html+='</div>';
}
for (var i = 0; i < childArry.children.length; i++) {
if(childArry.children[i].children.length>=1){
if(i==0){
if(childArry.children.length==1){
DFS(childArry.children[i],"r",true,1);
}else{
DFS(childArry.children[i],"r",false,1);
}
}else if(i==childArry.children.length-1){
DFS(childArry.children[i],"l",false,1);
}else{
DFS(childArry.children[i],"c",false,1);
}
}else{
var obj = childArry.children[i];
html+='<div class="strt-part">';
var t="c";
if(i==0){
t="r";
}else if(i==childArry.children.length-1){
t="l";
}
if(childArry.children.length>1){
html+='<span class="line-h line-h-'+t+'"></span>';
html+='<div class="line-v">';
html+='<span></span>';
html+='</div>';
}
html+='<span class="strt-name"style="background: #DBA659; color: white;">'+obj.text+'</span>';
html+='</div>';
}
}
html+='</div>';
html+='</div>';
html+='</div>';
if(num==0){
html+='</div>';
html+='</div>';
}
}
}
var html ='';
var testData=[{"children":[{"children":[],"checked":true,"pid":"1","ID":"101","text":"首頁"},{"children":[{"children":[{"children":[],"checked":true,"pid":"10301","ID":"1030101","text":"建立會議室"},{"children":[],"checked":true,"pid":"10301","ID":"1030102","text":"視訊記錄"},{"children":[],"checked":true,"pid":"10301","ID":"1030103","text":"視訊記錄2"}],"pid":"103","ID":"10301","text":"菜單","state":"closed"}],"pid":"1","ID":"103","text":"視訊會商","state":"closed"},{"children":[],"pid":"1","ID":"104","text":"郵箱"},{"children":[],"checked":true,"pid":"1","ID":"105","text":"文檔庫"},{"children":[],"checked":true,"pid":"1","ID":"106","text":"巡查管理"},{"children":[{"children":[{"children":[],"checked":true,"pid":"10701","ID":"1070101","text":"模版管理"},{"children":[],"checked":true,"pid":"10701","ID":"1070102","text":"訂閱中心"}],"pid":"107","ID":"10701","text":"菜單","state":"closed"}],"pid":"1","ID":"107","text":"訂閱管理","state":"closed"},{"children":[{"children":[{"children":[],"checked":true,"pid":"10801","ID":"1080101","text":"listTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080102","text":"系統設定"},{"children":[],"checked":true,"pid":"10801","ID":"1080103","text":"divTableTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080104","text":"textTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080105","text":"textAreaTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080106","text":"selectTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080107","text":"checkbox"},{"children":[],"checked":true,"pid":"10801","ID":"1080108","text":"textCalTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080109","text":"swfUploadTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080110","text":"echartsTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080113","text":"divTreeDataTag"},{"children":[],"checked":true,"pid":"10801","ID":"1080114","text":"開關标簽"},{"children":[],"checked":true,"pid":"10801","ID":"1080115","text":"tableReq"},{"children":[],"checked":true,"pid":"10801","ID":"1080116","text":"chartInfo"},{"children":[],"checked":true,"pid":"10801","ID":"1080117","text":"tableStat"},{"children":[],"checked":true,"pid":"10801","ID":"1080118","text":"标準角色管理"},{"children":[],"checked":true,"pid":"10801","ID":"1080121","text":"地圖(待建）"}],"pid":"108","ID":"10801","text":"菜單","state":"closed"}],"pid":"1","ID":"108","text":"例子","state":"closed"},{"children":[{"children":[{"children":[],"checked":true,"pid":"10901","ID":"1090101","text":"組織機構"},{"children":[],"pid":"10901","ID":"1090102","text":"組織管理"},{"children":[],"checked":true,"pid":"10901","ID":"1090103","text":"角色管理"},{"children":[],"checked":true,"pid":"10901","ID":"1090104","text":"使用者統計"},{"children":[],"checked":true,"pid":"10901","ID":"1090105","text":"通知公告"},{"children":[],"checked":true,"pid":"10901","ID":"1090106","text":"角色配置設定"},{"children":[],"checked":true,"pid":"10901","ID":"1090107","text":"菜單管理"},{"children":[],"checked":true,"pid":"10901","ID":"1090108","text":"app版本管理"},{"children":[],"checked":true,"pid":"10901","ID":"1090193","text":"标準角色管理"}],"pid":"109","ID":"10901","text":"組織菜單","state":"closed"},{"children":[{"children":[],"checked":true,"pid":"10902","ID":"1090201","text":"站點管理"},{"children":[],"checked":true,"pid":"10902","ID":"1090202","text":"河道管理"},{"children":[],"checked":true,"pid":"10902","ID":"1090203","text":"行政分區管理"},{"children":[],"checked":true,"pid":"10902","ID":"1090204","text":"取水使用者管理"},{"children":[],"checked":true,"pid":"10902","ID":"1090206","text":"水源地管理"},{"children":[],"checked":true,"pid":"10902","ID":"1090207","text":"水功能區資訊"},{"children":[],"checked":true,"pid":"10902","ID":"1090208","text":"水資源區資訊"},{"children":[],"checked":true,"pid":"10902","ID":"1090211","text":"臨時站點管理"},{"children":[],"checked":true,"pid":"10902","ID":"1090212","text":"站點資料序列管理"}],"pid":"109","ID":"10902","text":"業務配置","state":"closed"},{"children":[{"children":[],"checked":true,"pid":"10903","ID":"1090301","text":"獲得水情最新資料"},{"children":[],"checked":true,"pid":"10903","ID":"1090302","text":"獲得水質最新資料"},{"children":[],"checked":true,"pid":"10903","ID":"1090303","text":"最新資料1"},{"children":[],"checked":true,"pid":"10903","ID":"1090304","text":"獲得風情最新資料"},{"children":[],"checked":true,"pid":"10903","ID":"1090305","text":"最新資料2"},{"children":[],"checked":true,"pid":"10903","ID":"1090306","text":"最新資料3"},{"children":[],"checked":true,"pid":"10903","ID":"1090307","text":"最新資料4"},{"children":[],"checked":true,"pid":"10903","ID":"1090308","text":"最新資料5"},{"children":[],"checked":true,"pid":"10903","ID":"1090309","text":"最新資料6"}],"pid":"109","ID":"10903","text":"資訊查詢","state":"closed"}],"pid":"1","ID":"109","text":"系統管理","state":"closed"}],"pid":"0","ID":"1","text":"預警移動系統","state":"closed"},{"children":[{"children":[{"children":[],"checked":true,"pid":"901","ID":"90101","text":"通知公告"},{"children":[],"checked":true,"pid":"901","ID":"90102","text":"工作動态"},{"children":[],"checked":true,"pid":"901","ID":"90103","text":"視訊會商"},{"children":[],"checked":true,"pid":"901","ID":"90104","text":"身邊雷達"},{"children":[{"children":[],"checked":true,"pid":"90109","ID":"9010901","text":"公文審批"},{"children":[],"checked":true,"pid":"90109","ID":"9010902","text":"預警資訊"},{"children":[],"checked":true,"pid":"90109","ID":"9010903","text":"水位監測"},{"children":[],"checked":true,"pid":"90109","ID":"9010904","text":"太湖流域雨量"},{"children":[],"checked":true,"pid":"90109","ID":"9010905","text":"取水使用者水量"},{"children":[],"checked":true,"pid":"90109","ID":"9010906","text":"水功能區水質達标"},{"children":[],"checked":true,"pid":"90109","ID":"9010907","text":"外業巡查"},{"children":[],"checked":true,"pid":"90109","ID":"9010908","text":"氣象預報"},{"children":[],"checked":true,"pid":"90109","ID":"9010909","text":"東南諸河雨量"},{"children":[],"checked":true,"pid":"90109","ID":"9010910","text":"太湖流域工情"},{"children":[],"checked":true,"pid":"90109","ID":"9010911","text":"太湖流域風情"},{"children":[],"checked":true,"pid":"90109","ID":"9010912","text":"環保排污口"},{"children":[],"checked":true,"pid":"90109","ID":"9010913","text":"環保重點污染企業"},{"children":[],"checked":true,"pid":"90109","ID":"9010914","text":"環保環評"},{"children":[],"checked":true,"pid":"90109","ID":"9010915","text":"漁業生态"},{"children":[],"checked":true,"pid":"90109","ID":"9010916","text":"漁業養殖"},{"children":[],"checked":true,"pid":"90109","ID":"9010917","text":"省界斷面水質"},{"children":[],"checked":true,"pid":"90109","ID":"9010918","text":"省界斷面水質達标"},{"children":[],"checked":true,"pid":"90109","ID":"9010919","text":"水源水質"},{"children":[],"checked":true,"pid":"90109","ID":"9010920","text":"水廠水質"},{"children":[],"checked":true,"pid":"90109","ID":"9010921","text":"水源地湖泊富營養"},{"children":[],"checked":true,"pid":"90109","ID":"9010922","text":"水源地供水名額"},{"children":[],"checked":true,"pid":"90109","ID":"9010923","text":"水源地飲水名額"},{"children":[],"checked":true,"pid":"90109","ID":"9010924","text":"太湖藍藻"},{"children":[],"checked":true,"pid":"90109","ID":"9010925","text":"太湖藍藻飲用水"},{"children":[],"checked":true,"pid":"90109","ID":"9010926","text":"環太湖斷面水質"},{"children":[],"checked":true,"pid":"90109","ID":"9010927","text":"環太湖出入流量"},{"children":[],"checked":true,"pid":"90109","ID":"9010930","text":"引江濟太水質"},{"children":[],"checked":true,"pid":"90109","ID":"9010931","text":"引江濟太水量"},{"children":[],"checked":true,"pid":"90109","ID":"9010932","text":"沿江水量"},{"children":[],"checked":true,"pid":"90109","ID":"9010933","text":"重點河湖取水總量"},{"children":[],"checked":true,"pid":"90109","ID":"9010934","text":"社會經濟"},{"children":[],"checked":true,"pid":"90109","ID":"9010935","text":"漁業漁民"},{"children":[],"checked":true,"pid":"90109","ID":"9010936","text":"資料管理"},{"children":[],"checked":true,"pid":"90109","ID":"9010937","text":"值班管理"},{"children":[],"checked":true,"pid":"90109","ID":"9010938","text":"防汛專題"}],"pid":"901","ID":"90109","text":"我的應用","state":"closed"}],"pid":"9","ID":"901","text":"首頁","state":"closed"},{"children":[{"children":[],"checked":true,"pid":"902","ID":"90201","text":"電子郵件"},{"children":[],"checked":true,"pid":"902","ID":"90202","text":"公文審批"},{"children":[],"checked":true,"pid":"902","ID":"90203","text":"日程安排"},{"children":[],"checked":true,"pid":"902","ID":"90204","text":"值班管理"},{"children":[],"checked":true,"pid":"902","ID":"90205","text":"巡查任務"}],"pid":"9","ID":"902","text":"個人事務","state":"closed"},{"children":[],"checked":true,"pid":"9","ID":"903","text":"訂閱"},{"children":[{"children":[],"checked":true,"pid":"904","ID":"90401","text":"通訊錄"},{"children":[],"checked":true,"pid":"904","ID":"90402","text":"修改密碼"},{"children":[],"checked":true,"pid":"904","ID":"90403","text":"技術支援"},{"children":[],"checked":true,"pid":"904","ID":"90404","text":"版本更新"},{"children":[],"checked":true,"pid":"904","ID":"90405","text":"清除緩存"}],"pid":"9","ID":"904","text":"我的","state":"closed"},{"children":[{"children":[],"pid":"905","ID":"90501","text":"資料庫"},{"children":[],"pid":"905","ID":"90502","text":"新聞"}],"pid":"9","ID":"905","text":"文檔庫","state":"closed"},{"children":[{"children":[],"pid":"906","ID":"90601","text":"行政辦公"},{"children":[],"pid":"906","ID":"90602","text":"防汛事務"}],"pid":"9","ID":"906","text":"事務管理","state":"closed"},{"children":[{"children":[],"pid":"907","ID":"90701","text":"實時水情"},{"children":[],"pid":"907","ID":"90702","text":"實時雨情"},{"children":[],"pid":"907","ID":"90703","text":"實時水量"},{"children":[],"pid":"907","ID":"90704","text":"實時水質"},{"children":[],"pid":"907","ID":"90705","text":"實時共情"},{"children":[],"pid":"907","ID":"90706","text":"實時風情"},{"children":[],"pid":"907","ID":"90707","text":"實時工況"},{"children":[],"pid":"907","ID":"90708","text":"衛星雲圖"},{"children":[],"pid":"907","ID":"90709","text":"實時台風"}],"pid":"9","ID":"907","text":"資訊查詢","state":"closed"},{"children":[{"children":[],"pid":"908","ID":"90801","text":"取用水監測"},{"children":[],"pid":"908","ID":"90802","text":"水功能區監測"},{"children":[],"pid":"908","ID":"90803","text":"省界斷面監測"},{"children":[],"pid":"908","ID":"90804","text":"水源地監測"},{"children":[],"pid":"908","ID":"90805","text":"太湖藍藻監測"},{"children":[],"pid":"908","ID":"90806","text":"環太湖監測"},{"children":[],"pid":"908","ID":"90807","text":"入河排污口監測"},{"children":[],"pid":"908","ID":"90808","text":"沿江水量監測"},{"children":[],"pid":"908","ID":"90809","text":"引江濟監測"},{"children":[],"pid":"908","ID":"90810","text":"重點河湖取水總量控制"},{"children":[],"pid":"908","ID":"90811","text":"水量配置設定方案管理"},{"children":[],"pid":"908","ID":"90812","text":"用水定額管理"},{"children":[],"pid":"908","ID":"90813","text":"節水型社會建設管理"},{"children":[],"pid":"908","ID":"90814","text":"水資源管理監督考核"},{"children":[],"pid":"908","ID":"90815","text":"社會經濟"},{"children":[],"pid":"908","ID":"90816","text":"環保漁業"}],"pid":"9","ID":"908","text":"專題查詢","state":"closed"},{"children":[{"children":[],"pid":"909","ID":"90901","text":"水功能區監督管理"},{"children":[],"pid":"909","ID":"90902","text":"省界水體監督管理"},{"children":[],"pid":"909","ID":"90903","text":"太湖藍藻及水源地管理"},{"children":[],"pid":"909","ID":"90904","text":"環太湖監督管理"},{"children":[],"pid":"909","ID":"90905","text":"入河排污口管理"}],"pid":"9","ID":"909","text":"監督管理","state":"closed"},{"children":[{"children":[],"pid":"910","ID":"91001","text":"工程資料"},{"children":[],"pid":"910","ID":"91002","text":"工程安全資訊"},{"children":[],"pid":"910","ID":"91003","text":"工程養護維護管理"},{"children":[],"pid":"910","ID":"91004","text":"工程巡檢管理"},{"children":[],"pid":"910","ID":"91005","text":"排污口的台賬"},{"children":[],"pid":"910","ID":"91006","text":"取水許可證"},{"children":[],"pid":"910","ID":"91007","text":"站點資訊"},{"children":[],"pid":"910","ID":"91008","text":"流域公報"}],"pid":"9","ID":"910","text":"資料管理","state":"closed"},{"children":[{"children":[],"pid":"911","ID":"91101","text":"水保值班"},{"children":[],"pid":"911","ID":"91102","text":"重大污染事故應急值班"},{"children":[],"pid":"911","ID":"91103","text":"會商"}],"pid":"9","ID":"911","text":"值班管理","state":"closed"},{"children":[{"children":[],"pid":"912","ID":"91201","text":"水保正常巡查"},{"children":[],"pid":"912","ID":"91202","text":"水保專題巡查"},{"children":[],"pid":"912","ID":"91203","text":"水保其他巡查"},{"children":[],"pid":"912","ID":"91204","text":"水政取水戶巡查"},{"children":[],"pid":"912","ID":"91205","text":"防辦巡查"}],"pid":"9","ID":"912","text":"外業管理","state":"closed"}],"pid":"0","ID":"9","text":"移動端","state":"closed"}];
</script>
</body>
</html>
![vue搭建過程及出現問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)