Commit df581010 authored by 曹雷's avatar 曹雷

登陆及统计页面修改

parent 766ce1f7
.ds { .ds {
max-width: 1900px; max-width: 1900px;
margin: 0 auto; margin: 0 auto;
height: 100vh;
overflow: hidden;
} }
.ds-header-img { .ds-header-img {
margin-left: 10%; margin-left: 10%;
...@@ -8,7 +10,7 @@ ...@@ -8,7 +10,7 @@
} }
.ds-content { .ds-content {
width: 100%; width: 100%;
height: 80vh; height: 75vh;
background: url("../img/bg.png") no-repeat center center; background: url("../img/bg.png") no-repeat center center;
background-size: 100% 100%; background-size: 100% 100%;
overflow: hidden; overflow: hidden;
...@@ -29,7 +31,7 @@ ...@@ -29,7 +31,7 @@
} }
.ds-footer { .ds-footer {
width: 100%; width: 100%;
height: 10vh; height: 16vh;
overflow: hidden; overflow: hidden;
background: white url("../img/Login-b.jpg") no-repeat center center; background: white url("../img/Login-b.jpg") no-repeat center center;
} }
...@@ -38,18 +40,25 @@ ...@@ -38,18 +40,25 @@
font-size: 12px; font-size: 12px;
/* line-height: 75px; */ /* line-height: 75px; */
text-align: center; text-align: center;
margin-top: 3%;
} }
.ds-content-source { .ds-content-source {
display: flex; display: flex;
max-width: 1000px;
margin: 0 auto;
height: calc(100% - 100px); height: calc(100% - 100px);
} }
.ds-content-city { .ds-content-city {
width: 800px; flex-basis: 400px;
margin: 0 auto; padding-right: 10px;
overflow: auto;
height: 100%; height: 100%;
flex-grow: 1;
}
.ds-content-city-float {
width: 300px;
float: right;
} }
.ds-content-city > p { .ds-content-city-float > p {
width: 90px; width: 90px;
color: white; color: white;
font-size: 20px; font-size: 20px;
...@@ -60,9 +69,10 @@ ...@@ -60,9 +69,10 @@
margin-left: 10px; margin-left: 10px;
} }
.ds-content-district { .ds-content-district {
flex-grow: 1; flex-basis: 600px;
overflow: auto; flex-grow: 2;
height: 100%; height: 100%;
margin-left: 10px;
} }
.ds-content-district > p { .ds-content-district > p {
width: 90px; width: 90px;
...@@ -89,6 +99,7 @@ ...@@ -89,6 +99,7 @@
width: 280px; width: 280px;
height: 52px; height: 52px;
margin: 10px 10px; margin: 10px 10px;
margin-bottom: 82px;
background-size:100% 100% !important; background-size:100% 100% !important;
} }
.idp-btn { .idp-btn {
...@@ -141,20 +152,77 @@ ...@@ -141,20 +152,77 @@
margin-bottom: 6px; margin-bottom: 6px;
} }
@media screen and (max-width: 960px) {
.ds-header-img { @media screen and (max-width: 1000px) {
height: 80px; .ds-content-source {
display: flex;
height: calc(100% - 60px);
}
.ds-content-title {
padding: 10px 0 0 0;
margin: 5px 0;
font-size: 20px;
}
.ds-content-city {
flex-basis: 350px;
padding-right: 0;
height: 100%;
flex-grow: 1;
}
.ds-content-city-float {
width: 220px;
}
.ds-content-city-float > p {
font-size: 16px;
line-height: 16px;
margin: 6px 5px;
}
.ds-content-district {
flex-grow: 1;
margin: 0 auto;
}
.ds-content-district > p {
font-size: 16px;
line-height: 16px;
margin: 6px 5px;
}
.city-btn {
width: 200px;
height: 40px;
margin: 6px 5px;
margin-bottom: 58px;
}
.idp-btn {
width: 110px;
height: 40px;
margin: 6px 5px;
} }
.ds-divide-line {
width: 2px;
margin: 6px 8px;
height: 50vh;
}
.ds-footer > p {
font-size: 6px;
}
}
@media screen and (min-width: 1000px) and (max-width: 1023px) {
.ds-content-title { .ds-content-title {
padding: 30px 0 0 0; padding: 30px 0 0 0;
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
font-size: 25px; font-size: 25px;
} }
.ds-content-city { .ds-content-city {
width: 800px; flex-basis: 400px;
margin: 0 auto; padding-right: 0;
height: 100%;
flex-grow: 1;
}
.ds-content-city-float {
width: 100%;
float: none;
} }
.ds-content-city > p { .ds-content-city-float > p {
font-size: 18px; font-size: 18px;
} }
.ds-content-district { .ds-content-district {
...@@ -168,4 +236,35 @@ ...@@ -168,4 +236,35 @@
width: 215px; width: 215px;
height: 40px; height: 40px;
} }
}
@media screen and (min-width: 1024px) and (max-width: 1279px) {
.ds-content-title {
padding: 30px 0 0 0;
margin: 10px 0 10px 0;
font-size: 25px;
}
.ds-content-city {
flex-basis: 400px;
padding-right: 10px;
height: 100%;
flex-grow: 1;
}
.ds-content-city-float {
width: 300px;
}
.ds-content-city-float > p {
font-size: 18px;
}
.ds-content-district {
flex-grow: 1;
margin: 0 auto;
}
.ds-content-district > p {
font-size: 18px;
}
.city-btn {
width: 280px;
height: 52px;
margin-bottom: 82px;
}
} }
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
body { body {
overflow: auto; overflow: auto;
} }
.static {
height: 100vh;
}
.statistics-header{ .statistics-header{
width: 100%; width: 100%;
display: flex; display: flex;
...@@ -12,22 +15,31 @@ body { ...@@ -12,22 +15,31 @@ body {
/* flex: 1; */ /* flex: 1; */
} }
.statistics-content { .statistics-content {
margin: 20px 20px; margin: 6px 6px;
display: flex; display: flex;
height: calc(100vh - 80px);
} }
.statistics-content-item { .statistics-content-item {
background-color: white; background-color: white;
margin: 10px 5px; margin: 10px 5px;
overflow: hidden; overflow: hidden;
} }
.item-height {
height: 40%;
}
.item-height-higher {
height: 60%;
}
.statistics-content-item-title { .statistics-content-item-title {
padding: 20px 0 0 20px; padding: 20px 0 0 20px;
font-size: 14px; font-size: 14px;
} }
.nums-total { .nums-total {
width: 162px; width: 140px;
height: 81px; height: 70px;
display: inline-block; display: inline-block;
background-size: cover !important;
font-size: 12px;
} }
.nums-title { .nums-title {
color: white; color: white;
...@@ -35,7 +47,7 @@ body { ...@@ -35,7 +47,7 @@ body {
font-weight: 700; font-weight: 700;
} }
.nums-total-nums { .nums-total-nums {
font-size: 24px; font-size: 18px;
} }
.idp-total-nums { .idp-total-nums {
color: rgb(77, 160, 255); color: rgb(77, 160, 255);
......
This diff is collapsed.
...@@ -37,11 +37,13 @@ ...@@ -37,11 +37,13 @@
<p class="ds-content-title">发现服务 · 速享之旅</p> <p class="ds-content-title">发现服务 · 速享之旅</p>
<div class="ds-content-source"> <div class="ds-content-source">
<div class="ds-content-city"> <div class="ds-content-city">
<p>市认证源</p> <div class="ds-content-city-float">
<button onclick="toLogin('szjc')" class="logo-btn city-btn" <p>市认证源</p>
style="background: white url('../static/img/logo-shszjc.png')" type="button"></button> <button onclick="toLogin('szjc')" class="logo-btn city-btn"
<button onclick="toLogin('djg')" class="logo-btn city-btn" style="background: white url('../static/img/logo-shszjc.png')" type="button"></button>
style="background: white url('../static/img/logo-tyrz.png')" type="button"></button> <button onclick="toLogin('djg')" class="logo-btn city-btn"
style="background: white url('../static/img/logo-tyrz.png')" type="button"></button>
</div>
</div> </div>
<div class="ds-divide-line"></div> <div class="ds-divide-line"></div>
<div class="ds-content-district"> <div class="ds-content-district">
......
...@@ -21,11 +21,11 @@ ...@@ -21,11 +21,11 @@
<link rel="stylesheet" th:href="@{/static/css/statistics.css}" /> <link rel="stylesheet" th:href="@{/static/css/statistics.css}" />
<link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}" /> <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{/static/css/normalize.css}" /> <link rel="stylesheet" th:href="@{/static/css/normalize.css}" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/view-design/dist/styles/iview.css"> <link rel="stylesheet" type="text/css" th:href="@{/static/css/iview.css}" />
<script type="text/javascript" src=../static/js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src=../static/js/jquery-1.10.2.min.js"></script>
<script src="../static/js/echarts.min.js"></script> <script src="../static/js/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="../static/js/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/view-design/dist/iview.min.js"></script> <script type="text/javascript" src="../static/js/iview.min.js"></script>
<!-- <link rel="stylesheet" th:href="@{/static/css/main_0327.css}"/> <!-- <link rel="stylesheet" th:href="@{/static/css/main_0327.css}"/>
<link rel="stylesheet" href="@{/static/css/statistics.css}"/> <link rel="stylesheet" href="@{/static/css/statistics.css}"/>
<link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}"/> <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}"/>
...@@ -67,52 +67,53 @@ ...@@ -67,52 +67,53 @@
</div> </div>
</div> </div>
<div class="statistics-content"> <div class="statistics-content">
<div style="width: 25%;"> <div style="width: 25%; height: 100%;">
<div class="statistics-content-item"> <div class="statistics-content-item item-height">
<p class="statistics-content-item-title">应用来源</p> <p class="statistics-content-item-title">应用来源</p>
<div id="app-source" style="width: 95%;height: calc(40vh - 80px); margin: 5px 5px;"></div> <div id="app-source" style="width: 95%;height: calc(100% - 40px); margin: 5px 5px;"></div>
</div> </div>
<div class="statistics-content-item"> <div class="statistics-content-item item-height-higher">
<p class="statistics-content-item-title">来源环境分析</p> <p class="statistics-content-item-title">来源环境分析</p>
<div id="app-env-browser" style="width: 95%;height: calc(30vh - 90px); margin: 5px 5px;"></div> <div id="app-env-browser" style="width: 95%;height: calc(50% - 30px); margin: 5px 5px;"></div>
<div id="app-env-system" style="width: 95%;height: calc(30vh - 90px); margin: 5px 5px;"></div> <div id="app-env-system" style="width: 95%;height: calc(50% - 30px); margin: 5px 5px;"></div>
</div> </div>
</div> </div>
<div style="width: 50%;"> <div style="width: 50%; height: 100%;">
<div class="statistics-content-item"> <div class="statistics-content-item item-height-higher">
<p class="statistics-content-item-title">认证数据统计</p> <p class="statistics-content-item-title">认证数据统计</p>
<div style="display: flex;"> <div style="display: flex; height: 100%;">
<div style="width: 48%; height: calc(60vh - 160px); padding: 20px 0 0 20px; overflow-y: auto;"> <div style="width: 50%; height: calc(100% - 40px); padding: 8px 0 0 20px; overflow-y: auto;">
<div class="nums-total" style="background: url(../static/img/blue-bg.png);"> <div class="nums-total" style="background: url(../static/img/blue-bg.png);">
<p class="nums-title">认证人数</p> <p class="nums-title">人次</p>
<p class="nums-title"><span class="nums-total-nums" v-text="nums">24582</span></p> <p class="nums-title"><span class="nums-total-nums" v-text="nums"></span>人次</p>
</div> </div>
<div class="nums-total" style="background: url(../static/img/green-bg.png);"> <div class="nums-total" style="background: url(../static/img/green-bg.png);">
<p class="nums-title">基础教育统一认证人数</p> <p class="nums-title">基础教育统一认证</p>
<p class="nums-title"><span class="nums-total-nums" v-text="numsJcjy">24164</span></p> <p class="nums-title"><span class="nums-total-nums" v-text="numsJcjy"></span>人次</p>
</div> </div>
<div style="margin-top: 10px; line-height: 1.5;"> <div style="margin-top: 10px; line-height: 1.5;">
<p v-for="item in numsIdpList">通过<span v-text="item.name"></span>子域认证:<span class="idp-total-nums" v-text="item.value"></span> <p v-for="item in numsIdpList">通过<span v-text="item.name"></span>子域认证:<span class="idp-total-nums"
v-text="item.value"></span>
</p> </p>
</div> </div>
</div> </div>
<div id="idp" style="width: 48%; height: calc(60vh - 160px); margin: 5px 5px;"></div> <div id="idp" style="width: 48%; height: calc(100% - 40px); margin: 5px 5px;"></div>
</div> </div>
</div> </div>
<div class="statistics-content-item"> <div class="statistics-content-item item-height">
<p class="statistics-content-item-title">认证登陆高峰时间</p> <p class="statistics-content-item-title">认证登陆高峰时间</p>
<div id="nums-by-time" style="width: 100%; height: calc(40vh - 80px)"></div> <div id="nums-by-time" style="width: 100%; height: calc(100% - 40px); margin: 0;"></div>
</div> </div>
</div> </div>
<div style="width: 25%;"> <div style="width: 25%; height: 100%;">
<div class="statistics-content-item"> <div class="statistics-content-item item-height">
<p class="statistics-content-item-title">身份认证</p> <p class="statistics-content-item-title">身份认证</p>
<div id="user-type" style="width: 95%;height: calc(40vh - 80px); margin: 5px 5px;"></div> <div id="user-type" style="width: 95%;height: calc(100% - 40px); margin: 5px 5px;"></div>
</div> </div>
<div class="statistics-content-item"> <div class="statistics-content-item item-height-higher">
<p class="statistics-content-item-title">认证热点单位</p> <p class="statistics-content-item-title">认证热点单位</p>
<div id="user-org" style="height: calc(60vh - 160px);"> <div id="user-org" style="height: calc(100% - 40px)">
<p style="padding: 10px 20px 0 20px" v-for="item in userOrgList"><span <p style="padding: 6px 20px 0 20px" v-for="item in userOrgList"><span
style="color: orange; font-weight: 900;">·</span><span v-text="item.name"></span><span style="color: orange; font-weight: 900;">·</span><span v-text="item.name"></span><span
style="float: right;" v-text="item.count"></span></p> style="float: right;" v-text="item.count"></span></p>
</div> </div>
...@@ -127,29 +128,13 @@ ...@@ -127,29 +128,13 @@
el: '#app', el: '#app',
data: { data: {
year: 'all', year: 'all',
yearList: [ yearList: [],
{ code: 'all', name: '全部' },
{ code: 2020, name: '2020年' }
],
month: 1, month: 1,
monthList: [ monthList: [],
{ code: 1, name: '1月' },
{ code: 2, name: '2月' },
{ code: 3, name: '3月' },
{ code: 4, name: '4月' },
{ code: 5, name: '5月' },
{ code: 6, name: '6月' },
{ code: 7, name: '7月' },
{ code: 8, name: '8月' },
{ code: 9, name: '9月' },
{ code: 10, name: '10月' },
{ code: 11, name: '11月' },
{ code: 12, name: '12月' },
],
time: 'year', time: 'year',
timeType: [ timeType: [
{code: 'year', name: '按年统计'}, { code: 'year', name: '按年统计' },
{code: 'month', name: '按月统计'}, { code: 'month', name: '按月统计' },
], ],
app: 'all', app: 'all',
appList: [], appList: [],
...@@ -167,6 +152,18 @@ ...@@ -167,6 +152,18 @@
init: function () { init: function () {
this.appList = [{ code: 'all', name: '全部' }] this.appList = [{ code: 'all', name: '全部' }]
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
this.yearList = [{ code: 'all', name: '全部' },]
for (var i = 2020; i <= year; i++) {
this.yearList.push({ code: i, name: i + "年" })
}
for (var i = 1; i <= month; i++) {
this.monthList.push({ code: i, name: year + '年' + i + "月" })
}
var _this = this; var _this = this;
$.ajax({ $.ajax({
type: 'GET', type: 'GET',
...@@ -548,8 +545,15 @@ ...@@ -548,8 +545,15 @@
if (!params) return ''; if (!params) return '';
let res = ''; let res = '';
let keys = Object.keys(params); let keys = Object.keys(params);
if (this.time === 'month') {
var date = new Date();
var year = date.getFullYear();
params.year = year;
params.month = year + '-' + (this.month < 10 ? ('0' + this.month) : this.month);
}
for (let i = 0; i < keys.length; i++) { for (let i = 0; i < keys.length; i++) {
if (params[keys[i]] !== 'all' && (keys[i] === 'clientId' || keys[i] === this.time)) { if (this.time !== 'month' && keys[i] === 'month') continue;
if (params[keys[i]] !== 'all') {
if (res !== '') res += '&' if (res !== '') res += '&'
res = res + keys[i] + '=' + params[keys[i]]; res = res + keys[i] + '=' + params[keys[i]];
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment