diff --git a/assets/css/joe.census.min.css b/assets/css/joe.census.min.css index 19428d5..e86765c 100644 --- a/assets/css/joe.census.min.css +++ b/assets/css/joe.census.min.css @@ -1 +1 @@ -.joe_census__basic{display:grid;grid-template-columns:repeat(2, 1fr);gap:15px;margin-bottom:15px}.joe_census__basic-item.list{display:grid;grid-template-columns:repeat(2, 1fr);gap:15px}.joe_census__basic-item.list .list{display:flex;align-items:center;justify-content:space-between;background:var(--background);box-shadow:var(--box-shadow);border-radius:var(--radius-inner) var(--radius-wrap) var(--radius-wrap) var(--radius-inner);padding:15px 15px 12px}.joe_census__basic-item.list .list .count{display:flex;flex-direction:column;justify-content:space-between;height:100%}.joe_census__basic-item.list .list .count h6{font-size:12px;margin-bottom:10px;color:var(--seat)}.joe_census__basic-item.list .list .count p{font-size:28px;font-weight:700}.joe_census__basic-item.list .list .icon{fill:var(--classA)}.joe_census__basic-item.list .list:nth-child(1){border-left:5px solid #1cc88a;color:#1cc88a}.joe_census__basic-item.list .list:nth-child(2){border-left:5px solid #36b9cc;color:#36b9cc}.joe_census__basic-item.list .list:nth-child(3){border-left:5px solid #2196f3;color:#2196f3}.joe_census__basic-item.list .list:nth-child(4){border-left:5px solid #9c27b0;color:#9c27b0}.joe_census__basic-item.category{background:var(--background);box-shadow:var(--box-shadow);border-radius:var(--radius-wrap)}.joe_census__basic-item.category #category{height:230px}.joe_census__lately{background:var(--background);margin-bottom:15px;border-radius:var(--radius-wrap);box-shadow:var(--box-shadow)}.joe_census__lately .title{display:flex;align-items:center;height:45px;padding:0 12px;border-bottom:1px solid var(--classC);color:var(--main);justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_census__lately .content{padding:15px}.joe_census__lately .content #lately{height:300px}.joe_census__server{display:grid;grid-template-columns:repeat(2, 1fr);gap:15px}.joe_census__server-item{background:var(--background);box-shadow:var(--box-shadow);border-radius:var(--radius-wrap)}.joe_census__server-item .title{display:flex;align-items:center;height:45px;padding:0 12px;border-bottom:1px solid var(--classC);color:var(--main);justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_census__server-item .title .count{color:var(--minor);font-size:12px}.joe_census__server-item .title .count .split{margin:0 5px}.joe_census__server-item .content{padding:15px}.joe_census__server-item .content #work,.joe_census__server-item .content #flow{height:315px} +.joe_census__basic{display:grid;grid-template-columns:repeat(2, 1fr);gap:15px;margin-bottom:15px}.joe_census__basic-item.list{display:grid;grid-template-columns:repeat(2, 1fr);gap:15px}.joe_census__basic-item.list .list{display:flex;align-items:center;justify-content:space-between;background:var(--background);box-shadow:var(--box-shadow);border-radius:var(--radius-inner) var(--radius-wrap) var(--radius-wrap) var(--radius-inner);padding:15px 15px 12px}.joe_census__basic-item.list .list .count{display:flex;flex-direction:column;justify-content:space-between;height:100%}.joe_census__basic-item.list .list .count h6{font-size:12px;margin-bottom:10px;color:var(--seat)}.joe_census__basic-item.list .list .count p{font-size:28px;font-weight:700}.joe_census__basic-item.list .list .icon{fill:var(--classA)}.joe_census__basic-item.list .list:nth-child(1){border-left:5px solid #1cc88a;color:#1cc88a}.joe_census__basic-item.list .list:nth-child(2){border-left:5px solid #36b9cc;color:#36b9cc}.joe_census__basic-item.list .list:nth-child(3){border-left:5px solid #2196f3;color:#2196f3}.joe_census__basic-item.list .list:nth-child(4){border-left:5px solid #9c27b0;color:#9c27b0}.joe_census__basic-item.category{background:var(--background);box-shadow:var(--box-shadow);border-radius:var(--radius-wrap)}.joe_census__basic-item.category #category{height:230px}.joe_census__lately{background:var(--background);margin-bottom:15px;border-radius:var(--radius-wrap);box-shadow:var(--box-shadow)}.joe_census__lately .title{display:flex;align-items:center;height:45px;padding:0 12px;border-bottom:1px solid var(--classC);color:var(--main);justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_census__lately .content{padding:15px}.joe_census__lately .content #lately{height:300px}.joe_census__server{display:grid;grid-template-columns:repeat(2, 1fr);gap:15px;margin-bottom:15px}.joe_census__server-item{background:var(--background);box-shadow:var(--box-shadow);border-radius:var(--radius-wrap)}.joe_census__server-item .title{display:flex;align-items:center;height:45px;padding:0 12px;border-bottom:1px solid var(--classC);color:var(--main);justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_census__server-item .title .count{color:var(--minor);font-size:12px}.joe_census__server-item .title .count .split{margin:0 5px}.joe_census__server-item .content{padding:15px}.joe_census__server-item .content #work,.joe_census__server-item .content #flow{height:315px}.joe_census__filing{background:var(--background);box-shadow:var(--box-shadow);border-radius:var(--radius-wrap)}.joe_census__filing .title{display:flex;align-items:center;height:45px;padding:0 12px;border-bottom:1px solid var(--classC);color:var(--main);justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.joe_census__filing .content{padding:15px}.joe_census__filing .content .item{position:relative}.joe_census__filing .content .item:last-child .wrapper{padding-bottom:0}.joe_census__filing .content .item .head{position:absolute;top:14px;width:13px;height:13px;background:var(--classC);border-radius:50%}.joe_census__filing .content .item .tail{position:absolute;left:6px;top:0;width:1px;height:100%;background:var(--classC)}.joe_census__filing .content .item .wrapper{padding-left:30px;padding-bottom:15px}.joe_census__filing .content .item .wrapper .panel{position:relative;display:flex;align-items:center;justify-content:space-between;color:var(--routine);cursor:pointer;background:var(--classD);padding:10px;height:40px;border-radius:4px}.joe_census__filing .content .item .wrapper .panel svg{width:10px;height:10px;fill:var(--minor);-webkit-transform:rotate(180deg);transform:rotate(180deg);transition:-webkit-transform 0.25s;transition:transform 0.25s;transition:transform 0.25s, -webkit-transform 0.25s}.joe_census__filing .content .item .wrapper .panel.in svg{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.joe_census__filing .content .item .wrapper .panel::before{content:'';position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:-8px;width:0;height:0;border-right:8px solid var(--classD);border-top:8px solid transparent;border-bottom:8px solid transparent}.joe_census__filing .content .item .wrapper .panel-body{display:none;padding-left:20px}.joe_census__filing .content .item .wrapper .panel-body li{margin-top:20px}.joe_census__filing .content .item .wrapper .panel-body li a{color:var(--routine)}.joe_census__filing .content .item .wrapper .panel-body li a:hover{color:var(--theme)}.joe_census__filing .content .item.load{padding-top:15px}.joe_census__filing .content .item.load .head{top:25px;background:#2db7f5}.joe_census__filing .content .item.load .button{position:relative;margin-left:30px;border:none;background:#2db7f5;color:#fff;border-radius:4px;padding:0 12px;height:34px;font-size:13px}.joe_census__filing .content .item.load .button::before{content:'';position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:-8px;width:0;height:0;border-right:8px solid #2db7f5;border-top:8px solid transparent;border-bottom:8px solid transparent} diff --git a/assets/css/joe.census.min.scss b/assets/css/joe.census.min.scss index 17ae9fc..201d89c 100644 --- a/assets/css/joe.census.min.scss +++ b/assets/css/joe.census.min.scss @@ -89,6 +89,7 @@ display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; + margin-bottom: 15px; &-item { background: var(--background); box-shadow: var(--box-shadow); @@ -119,4 +120,129 @@ } } } + &__filing { + background: var(--background); + box-shadow: var(--box-shadow); + border-radius: var(--radius-wrap); + .title { + display: flex; + align-items: center; + height: 45px; + padding: 0 12px; + border-bottom: 1px solid var(--classC); + color: var(--main); + justify-content: space-between; + user-select: none; + } + .content { + padding: 15px; + .item { + position: relative; + &:last-child { + .wrapper { + padding-bottom: 0; + } + } + .head { + position: absolute; + top: 14px; + width: 13px; + height: 13px; + background: var(--classC); + border-radius: 50%; + } + .tail { + position: absolute; + left: 6px; + top: 0; + width: 1px; + height: 100%; + background: var(--classC); + } + .wrapper { + padding-left: 30px; + padding-bottom: 15px; + .panel { + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + color: var(--routine); + cursor: pointer; + background: var(--classD); + padding: 10px; + height: 40px; + border-radius: 4px; + svg { + width: 10px; + height: 10px; + fill: var(--minor); + transform: rotate(180deg); + transition: transform 0.25s; + } + &.in { + svg { + transform: rotate(90deg); + } + } + &::before { + content: ''; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: -8px; + width: 0; + height: 0; + border-right: 8px solid var(--classD); + border-top: 8px solid transparent; + border-bottom: 8px solid transparent; + } + } + .panel-body { + display: none; + padding-left: 20px; + li { + margin-top: 20px; + a { + color: var(--routine); + &:hover { + color: var(--theme); + } + } + } + } + } + &.load { + padding-top: 15px; + .head { + top: 25px; + background: #2db7f5; + } + .button { + position: relative; + margin-left: 30px; + border: none; + background: #2db7f5; + color: #fff; + border-radius: 4px; + padding: 0 12px; + height: 34px; + font-size: 13px; + &::before { + content: ''; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: -8px; + width: 0; + height: 0; + border-right: 8px solid #2db7f5; + border-top: 8px solid transparent; + border-bottom: 8px solid transparent; + } + } + } + } + } + } } diff --git a/assets/js/joe.census.js b/assets/js/joe.census.js index 9dacf9f..c7cda0d 100644 --- a/assets/js/joe.census.js +++ b/assets/js/joe.census.js @@ -2,22 +2,20 @@ document.addEventListener('DOMContentLoaded', () => { { /* 转换字节 */ const bytesToSize = bytes => { + if (!bytes) return '0 B'; const k = 1024, sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes) / Math.log(k)); return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; }; - const categories = []; const upSeries = []; const downSeries = []; - const flowDom = document.querySelector('#flow'); const workDom = document.querySelector('#work'); const flowChart = flowDom && echarts.init(flowDom); const workChart = workDom && echarts.init(workDom); if (flowDom && workDom) initChart(); - function initChart() { $.ajax({ url: Joe.BASE_API, @@ -27,6 +25,7 @@ document.addEventListener('DOMContentLoaded', () => { routeType: 'server_status' }, success(res) { + if (!res.status) Qmsg.warning('服务器接口异常!'); { $('.joe_census__server-item .count .up').html(`总发送:${bytesToSize(res.upTotal)}`); $('.joe_census__server-item .count .down').html(`总接收:${bytesToSize(res.downTotal)}`); @@ -48,7 +47,7 @@ document.addEventListener('DOMContentLoaded', () => { grid: { left: '3%', right: '4%', - bottom: '0', + bottom: '3%', containLabel: true }, tooltip: { @@ -250,6 +249,9 @@ document.addEventListener('DOMContentLoaded', () => { }, success(res) { latelyChart.setOption({ + title: { + subtext: '单位 数量' + }, tooltip: { trigger: 'axis', axisPointer: { @@ -294,4 +296,55 @@ document.addEventListener('DOMContentLoaded', () => { } }); } + + /* 初始化归档 */ + { + let page = 0; + initFiling(); + function initFiling() { + if ($('.joe_census__filing .button').html() === 'loading...') return; + $.ajax({ + url: Joe.BASE_API, + type: 'POST', + dataType: 'json', + data: { + routeType: 'article_filing', + page: ++page + }, + success(res) { + if (!res.length) { + $('.joe_census__filing .item.load').remove(); + return Qmsg.warning('没有更多内容了'); + } + let htmlStr = ''; + res.forEach(item => { + htmlStr += ` +