js三级垂直组织结构图

页面是以3840*1080px的分辨率设计的,如果对设计宽度有要求的网友请自行修改样式,谢谢!

废话少说先上效果图:

HTML文件:
<!DOCTYPE html>
<html lang="en" style="">
    <head>
        <meta charset="utf-8" />
        <title>健康值_放大</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" type="text/css" href="css/public.css">
        <link rel="stylesheet" type="text/css" href="css/jiankangzhi_max.css">
    </head>
    <body>
        <div class="data" id="dnt"></div>
        <div class="data" id="dnp"></div>
        <div class="clear"></div>
        <div class="data" id="dnc"></div>
        <script src="js/common/jquery.min.js"></script>
        <script src="js/common/init.js"></script>
        <script src="js/jiankangzhi_max.js"></script>
    </body>      

</html>

jiankangzhi_max.css文件:

* {
    margin: 0;
    padding: 0;
}
body {
color: #fff;
    background: #161b38;
    background-size: 100% 100%;
    font-family: "ruiFont";
    font-size: 2rem;
    overflow:auto
}
li{
list-style: none
}
.topdata{
text-align:center;
border-bottom:2px solid #04a7f4;
padding-top: 4rem;
padding-bottom: 1rem;
}
.top-title{
border: 1px solid #04a7f4;
    padding: 1rem 0;
    border-radius: 5px;
    width: 60rem;
    margin: 0 auto;
}
.parentdata{
float: left;
text-align: center;
border-bottom:2px solid #04a7f4;
padding-bottom: 1rem;
}
.parentinfo{
position: relative;
}
.childdata{
float:left;
}
.childinfo{
position: relative;
    width: 5rem;
    border:1px solid #235882;
    background:#091638;
    text-align: center;
    margin: 0 auto;
    margin-top:2rem;
    padding-top: 1rem;
}
.childinfo .child-title{
    padding:0 1rem;
}
.childinfo .child-indicate{
padding:1rem 0;
color: #3bdb33
}
.childinfo .child-nums h3{
font-size: 1.4rem;
font-weight: normal;
background:#0d277e;
padding:.2rem 0;
}
.childinfo .child-nums p{
padding:1rem 0;
}
.childacrosstop{
position: absolute;
    width: 2px;
    height: 2rem;
    background: #04a7f4;
    top: -2rem;
    left: 50%;;
}
.parent-title{
text-align: center;
white-space:nowrap;
}
.parentacrosstop{
position: absolute;
    width: 2px;
    height: 3rem;
    background: #04a7f4;
    top: -4rem;
    left: 50%;
}
.dispose{
color: #ff2637
}
.disposeing{
color: #f8ee00
}
.undispose{
color: #d002e0

}


js文件:
$(function() {


    var jiankangzhi = {
        init:function() {
            this.numData();
        },
        numData:function(typeid) {
            //var address = urlConfig.getJcOverall;
            var address = "js/jiankangzhi_max.json";


            $.get(address, function(data) {




                if (!data || data.retStatus != '000' || mining.isEmpty(data.retBody)) {
                    return false;
                }




                if (data) {
                    //数据处理
                    
                    var arrData = data.retBody;
                    var treeData = {};
                    treeData.today = [];
                    treeData.thismonth = [];
                    treeData.history = [];
                    treeData.daymax = [];


                    treeData.typeName = [];


                    treeData.typechildname = [];


                    var dispose = data.dispose;
                    var disposeing = data.disposeing;
                    var undispose = data.undispose;
                    


                    //获取最底层数据
                    for(var n=0; n<arrData.length;n++){
                        for(var i=0;i<arrData[n].childNodes.length;i++){
                            treeData.typechildname.push(arrData[n].childNodes[i].typechildname);
                            treeData.today.push(arrData[n].childNodes[i].today);
                            treeData.thismonth.push(arrData[n].childNodes[i].thismonth);
                            treeData.history.push(arrData[n].childNodes[i].history);
                            treeData.daymax.push(arrData[n].childNodes[i].daymax);
                        }
                    }
                    //计算子元素宽度
                    var childWidth = 100/treeData.typechildname.length;
                    //循环遍历最底层数据
                    for(var c=0; c<treeData.typechildname.length; c++){
                        document.getElementById("dnc").innerHTML+=`
                            <div class="childdata" style="width:`+childWidth+`%;">
                                <div class="childinfo">
                                    <div class="child-title">`+treeData.typechildname[c]+`</div>
                                    <div class="child-indicate">●</div>
                                    <ul class="child-nums">
                                        <li><h3>当日</h3><p>0</p></li>
                                        <li><h3>本月</h3><p>25</p></li>
                                        <li><h3>历史</h3><p>126</p></li>
                                        <li><h3>日峰值</h3><p>12</p></li>
                                    </ul>
                                    <div class="childacrosstop"></div>
                                </div>
                            </div>
                        `
                        }


                    //获取顶层数据
                    for(var d=0; d<arrData.length;d++){
                        treeData.typeName.push(arrData[d].typeName);
                        var parentWidth = (arrData[d].childNodes.length-1)*childWidth;
                         document.getElementById("dnp").innerHTML+=`
                            <div class="parentdata" style="width:`+parentWidth+`%; margin:4rem `+childWidth/2+`% 0">
                                <div class="parentinfo">
                                    <div class="parent-title">`+treeData.typeName[d]+`</div>
                                    <div class="parentacrosstop"></div>
                                </div>
                            </div>
                        `
                    }
                    //显示最顶层数据
                        var topWidth = (treeData.typechildname.length - arrData[0].childNodes.length/2 - arrData[arrData.length-1].childNodes.length/2)*childWidth;
                        var topLeft = arrData[0].childNodes.length/2*childWidth;
                         document.getElementById("dnt").innerHTML+=`
                            <div class="topdata" style="width:`+topWidth+`%;margin-left:`+topLeft+`%">
                                <div class="top-title">当前 待处置 `+dispose+` <span class="dispose">●</span> 处置中  `+disposeing+`  <span class="disposeing">●</span> 处置超时  `+undispose+`  <span class="undispose">●</span></div>
                            </div>
                        `
                }


                });






        }
    };
    jiankangzhi.init();
});


json文件:
{
  "retBody": [{
    "typeName": "类型一",
    "childNodes": [{
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }]
  }, {
    "typeName": "类型二",
    "childNodes": [{
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }]
  }, {
    "typeName": "类型三",
    "childNodes": [{
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }]
  }, {
    "typeName": "类型四",
    "childNodes": [{
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }]
  }, {
    "typeName": "类型五",
    "childNodes": [{
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }, {
      "typechildname": "稽查超时预警",
      "today": "12",
      "thismonth": "32",
      "history": "122",
      "daymax": "12"
    }]
  }],
  "dispose": "1",
  "disposeing": "35",
  "undispose": "3",
  "retStatus": "000"
}

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值