Commit ae27cc4f authored by 曹雷's avatar 曹雷

统计及登录页面优化

parent 6f4c79e9
html {
height: 100vh;
}
.ds { .ds {
max-width: 1900px; max-width: 1900px;
margin: 0 auto; margin: 0 auto;
...@@ -5,12 +8,13 @@ ...@@ -5,12 +8,13 @@
overflow: hidden; overflow: hidden;
} }
.ds-header-img { .ds-header-img {
margin: 2vh 0;
margin-left: 10%; margin-left: 10%;
height: 10vh; height: 5vh;
} }
.ds-content { .ds-content {
width: 100%; width: 100%;
height: 75vh; height: 79vh;
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;
...@@ -31,7 +35,7 @@ ...@@ -31,7 +35,7 @@
} }
.ds-footer { .ds-footer {
width: 100%; width: 100%;
height: 16vh; height: 13vh;
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;
} }
...@@ -53,10 +57,11 @@ ...@@ -53,10 +57,11 @@
padding-right: 10px; padding-right: 10px;
height: 100%; height: 100%;
flex-grow: 1; flex-grow: 1;
display: flex;
justify-content: flex-end;
} }
.ds-content-city-float { .ds-content-city-float {
width: 300px; width: 300px;
float: right;
} }
.ds-content-city-float > p { .ds-content-city-float > p {
width: 90px; width: 90px;
...@@ -157,6 +162,7 @@ ...@@ -157,6 +162,7 @@
.ds-content-source { .ds-content-source {
display: flex; display: flex;
height: calc(100% - 60px); height: calc(100% - 60px);
max-width: 700px;
} }
.ds-content-title { .ds-content-title {
padding: 10px 0 0 0; padding: 10px 0 0 0;
......
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<!-- Add your site or application content here --> <!-- Add your site or application content here -->
<div class="ds"> <div class="ds">
<div class="ds-header"> <div class="ds-header">
<img class="ds-header-img" th:src="@{/static/img/Rlogo.jpg}" alt="" /> <img class="ds-header-img" th:src="@{/static/img/Rlogo.png}" alt="" />
</div> </div>
<div class="ds-content"> <div class="ds-content">
<div class="ds-content-mask"> <div class="ds-content-mask">
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<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" th:href="@{/static/css/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="../static/js/vue.js"></script> <script src="../static/js/vue.js"></script>
<script type="text/javascript" src="../static/js/iview.min.js"></script> <script type="text/javascript" src="../static/js/iview.min.js"></script>
...@@ -44,9 +44,9 @@ ...@@ -44,9 +44,9 @@
<div id="app" class="static"> <div id="app" class="static">
<div class="statistics-header"> <div class="statistics-header">
<div class="flex" style="display: flex; align-items: center;"> <div class="flex" style="display: flex; align-items: center;">
<img src="../static/img/Rlogo.jpg" style="margin-left: 30px; width: 250px;" alt=""> <img src="../static/img/Rlogo.png" style="margin:5px 0; margin-left: 30px; width: 250px;" alt="">
<Divider type="vertical" style="height: 26px;"></Divider> <Divider type="vertical" style="height: 26px;"></Divider>
<p style="font-size: 14px;">发现服务 · 速享之旅</p> <p style="font-size: 14px; font-weight: 700;">发现服务 · 速享之旅</p>
</div> </div>
<div class="flex"> <div class="flex">
<img src="../static/img/top-title.png" style="height: 22px;" alt=""> <img src="../static/img/top-title.png" style="height: 22px;" alt="">
...@@ -69,52 +69,67 @@ ...@@ -69,52 +69,67 @@
<div class="statistics-content"> <div class="statistics-content">
<div style="width: 25%; height: 100%;"> <div style="width: 25%; height: 100%;">
<div class="statistics-content-item item-height"> <div class="statistics-content-item item-height">
<p class="statistics-content-item-title">应用来源</p> <p class="statistics-content-item-title">应用来源<span class="statistics-content-item-title-remark">单位:人次</span>
</p>
<div id="app-source" style="width: 95%;height: calc(100% - 40px); 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 item-height-higher"> <div class="statistics-content-item item-height-higher">
<p class="statistics-content-item-title">来源环境分析</p> <p class="statistics-content-item-title">来源环境分析<span class="statistics-content-item-title-remark">单位:人次</span>
</p>
<div id="app-env-browser" style="width: 95%;height: calc(50% - 30px); 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(50% - 30px); 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%; height: 100%;"> <div style="width: 50%; height: 100%;">
<div class="statistics-content-item item-height-higher"> <div class="statistics-content-item" style="height: 30%;">
<p class="statistics-content-item-title">认证数据统计</p> <p class="statistics-content-item-title">认证数据统计<span class="statistics-content-item-title-remark">累计登录用户总数:
<span v-text="numsOfPeople"></span></span>
</p>
<div style="display: flex; height: 100%;"> <div style="display: flex; height: 100%;">
<div style="width: 50%; height: calc(100% - 40px); padding: 8px 0 0 20px; overflow-y: auto;"> <div class="nums-by-idp" style="height: calc(100% - 40px);">
<div class="nums-total" style="background: url(../static/img/blue-bg.png);"> <div class="nums-total" style="background: url(../static/img/center-bg-1.png);">
<p class="nums-title">总人次</p> <p class="nums-title">总人次</p>
<p class="nums-title"><span class="nums-total-nums" v-text="nums"></span>人次</p> <p class="nums-title-num"><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/center-bg-2.png);">
<p class="nums-title">基础教育统一认证</p> <p class="nums-title">基础教育统一认证</p>
<p class="nums-title"><span class="nums-total-nums" v-text="numsJcjy"></span>人次</p> <p class="nums-title-num"><span class="nums-total-nums" v-text="numsJcjy"></span>人次</p>
</div>
<div class="nums-total" style="background: url(../static/img/center-bg-3.png);">
<p class="nums-title">青浦区认证子域</p>
<p class="nums-title-num"><span class="nums-total-nums" v-text="numsQp"></span>人次</p>
</div> </div>
<div style="margin-top: 10px; line-height: 1.5;"> <div class="nums-total" style="background: url(../static/img/center-bg-4.png);">
<p class="nums-title">数字教材实验用户</p>
<p class="nums-title-num"><span class="nums-total-nums" v-text="numsSy"></span>人次</p>
</div>
<!-- <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" <p v-for="item in numsIdpList">通过<span v-text="item.name"></span>子域认证:<span class="idp-total-nums"
v-text="item.value"></span> v-text="item.value"></span>
</p> </p>
</div> </div> -->
</div> </div>
<div id="idp" style="width: 48%; height: calc(100% - 40px); 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 item-height"> <div class="statistics-content-item" style="height: 70%;">
<p class="statistics-content-item-title">认证登陆高峰时间</p> <p class="statistics-content-item-title">认证登陆高峰时间<span
class="statistics-content-item-title-remark">单位:人次</span></p>
<div id="nums-by-time" style="width: 100%; height: calc(100% - 40px); margin: 0;"></div> <div id="nums-by-time" style="width: 100%; height: calc(100% - 40px); margin: 0;"></div>
</div> </div>
</div> </div>
<div style="width: 25%; height: 100%;"> <div style="width: 25%; height: 100%;">
<div class="statistics-content-item item-height"> <div class="statistics-content-item item-height">
<p class="statistics-content-item-title">身份认证</p> <p class="statistics-content-item-title">身份认证<span class="statistics-content-item-title-remark">单位:人次</span>
</p>
<div id="user-type" style="width: 95%;height: calc(100% - 40px); 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 item-height-higher"> <div class="statistics-content-item item-height-higher">
<p class="statistics-content-item-title">认证热点单位</p> <p class="statistics-content-item-title">认证热点单位<span class="statistics-content-item-title-remark">单位:人次</span>
</p>
<div id="user-org" style="height: calc(100% - 40px)"> <div id="user-org" style="height: calc(100% - 40px)">
<p style="padding: 6px 20px 0 20px" v-for="item in userOrgList"><span <p style="padding: 6px 20px 0 20px; color: #5f646a; font-size: 12px; line-height: 1.8;" 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; padding-right: 8px;">·</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>
</div> </div>
...@@ -138,15 +153,32 @@ ...@@ -138,15 +153,32 @@
], ],
app: 'all', app: 'all',
appList: [], appList: [],
numsIdpList: [ numsIdpList: [],
],
userOrgList: [], userOrgList: [],
nums: 0, nums: 0,
numsJcjy: 0, numsJcjy: 0,
numsQp: 0,
numsSy: 0,
numsOfPeople: 0
}, },
mounted: function () { mounted: function () {
this.init(); this.init();
this.refresh(); this.refresh();
var _this = this;
window.onresize = function () {
var myChart = echarts.init(document.getElementById('app-source'));
var myChartBrowser = echarts.init(document.getElementById('app-env-browser'));
var myChartSystem = echarts.init(document.getElementById('app-env-system'));
// var myChartNums = echarts.init(document.getElementById("idp"));
var myChartNumsByTime = echarts.init(document.getElementById("nums-by-time"));
var myChartUserType = echarts.init(document.getElementById('user-type'));
myChart.resize();
myChartBrowser.resize();
myChartSystem.resize();
// myChartNums.resize();
myChartNumsByTime.resize();
myChartUserType.resize();
}
}, },
methods: { methods: {
init: function () { init: function () {
...@@ -185,13 +217,14 @@ ...@@ -185,13 +217,14 @@
this.initUserOrg(); this.initUserOrg();
}, },
initSource: function () { initSource: function () {
var myChart = echarts.init(document.getElementById('app-source'), 'light'); var myChart = echarts.init(document.getElementById('app-source'));
var option = { var option = {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)" formatter: "{a} <br/>{b}: {c} ({d}%)"
}, },
legend: { legend: {
icon: "circle",
bottom: 10, bottom: 10,
data: ["数字教材", "阅览室", "其他"] data: ["数字教材", "阅览室", "其他"]
}, },
...@@ -199,7 +232,8 @@ ...@@ -199,7 +232,8 @@
{ {
name: "应用来源", name: "应用来源",
type: "pie", type: "pie",
radius: ["30%", "50%"], radius: ["40%", "60%"],
center: ["50%", "42%"],
label: { label: {
position: 'outside', position: 'outside',
alignTo: 'edge', alignTo: 'edge',
...@@ -211,11 +245,15 @@ ...@@ -211,11 +245,15 @@
} }
} }
}, },
data: [ data: [],
{ value: 21105, name: "数字教材" }, itemStyle: {
{ value: 3186, name: "阅览室" }, normal: {
{ value: 271, name: "其他" } color: function (params) {
] // build a color map as your need.
return colorList[params.dataIndex]
}
}
}
} }
] ]
}; };
...@@ -258,26 +296,55 @@ ...@@ -258,26 +296,55 @@
url: baseUrl + 'authcenter/logstatistics/environment?' + _this.getParams(params), url: baseUrl + 'authcenter/logstatistics/environment?' + _this.getParams(params),
success: function (result) { success: function (result) {
var legendSystem = [], dataSystem = [], legendBroswer = [], dataBrowser = []; var legendSystem = [], dataSystem = [], legendBroswer = [], dataBrowser = [];
if (result.data.os.length) {
result.data.os.sort((a, b) => { return b.count - a.count })
}
var others = { name: 'others', value: 0 };
var t = 0;
for (var i = 0; i < result.data.os.length; i++) { for (var i = 0; i < result.data.os.length; i++) {
var element = result.data.os[i]; var element = result.data.os[i];
if (element.name === 'others' || t >= 4) {
others.value += element.count;
continue;
}
t++;
legendSystem.push(element.name); legendSystem.push(element.name);
dataSystem.push({ value: element.count, name: element.name }) dataSystem.push({ value: element.count, name: element.name })
} }
if (others.value) {
legendSystem.push('others');
dataSystem.push(others)
}
if (result.data.browser.length) {
result.data.browser.sort((a, b) => { return b.count - a.count })
}
others = { name: 'others', value: 0 };
t = 0;
for (var i = 0; i < result.data.browser.length; i++) { for (var i = 0; i < result.data.browser.length; i++) {
var element = result.data.browser[i]; var element = result.data.browser[i];
if (element.name === 'others' || t >= 4) {
others.value += element.count;
continue;
}
t++;
legendBroswer.push(element.name); legendBroswer.push(element.name);
dataBrowser.push({ value: element.count, name: element.name }) dataBrowser.push({ value: element.count, name: element.name })
} }
if (others.value) {
legendBroswer.push('others');
dataBrowser.push(others)
}
var myChartBrowser = echarts.init(document.getElementById('app-env-browser'));
var myChartBrowser = echarts.init(document.getElementById('app-env-browser'), 'light');
var optionBrowser = { var optionBrowser = {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)" formatter: "{a} <br/>{b}: {c} ({d}%)"
}, },
legend: { legend: {
icon: "circle",
orient: 'vertical', orient: 'vertical',
right: 'right', right: 'right',
top: 'middle', top: 'middle',
...@@ -296,7 +363,7 @@ ...@@ -296,7 +363,7 @@
{ {
name: "浏览器类型", name: "浏览器类型",
type: "pie", type: "pie",
radius: ["30%", "50%"], radius: ["30%", "70%"],
center: ['30%', '50%'], center: ['30%', '50%'],
label: { label: {
position: 'inner', position: 'inner',
...@@ -307,19 +374,28 @@ ...@@ -307,19 +374,28 @@
} }
} }
}, },
data: dataBrowser data: dataBrowser,
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
return colorList[params.dataIndex]
}
}
}
} }
] ]
}; };
myChartBrowser.setOption(optionBrowser); myChartBrowser.setOption(optionBrowser);
var myChartSystem = echarts.init(document.getElementById('app-env-system'), 'light'); var myChartSystem = echarts.init(document.getElementById('app-env-system'));
var optionSystem = { var optionSystem = {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)" formatter: "{a} <br/>{b}: {c} ({d}%)"
}, },
legend: { legend: {
icon: "circle",
orient: 'vertical', orient: 'vertical',
right: 'right', right: 'right',
top: 'middle', top: 'middle',
...@@ -338,7 +414,7 @@ ...@@ -338,7 +414,7 @@
{ {
name: "操作系统类型", name: "操作系统类型",
type: "pie", type: "pie",
radius: ["30%", "50%"], radius: ["30%", "70%"],
center: ['30%', '50%'], center: ['30%', '50%'],
label: { label: {
position: 'inner', position: 'inner',
...@@ -349,7 +425,15 @@ ...@@ -349,7 +425,15 @@
} }
} }
}, },
data: dataSystem data: dataSystem,
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
return colorList[params.dataIndex]
}
}
}
} }
] ]
}; };
...@@ -362,65 +446,72 @@ ...@@ -362,65 +446,72 @@
}, },
initNums: function () { initNums: function () {
var _this = this; var _this = this;
$.getJSON('../static/js/SHdata.json', function (SHjson) { // $.getJSON('./static/js/SHdata.json', function (SHjson) {
var myChartNums = echarts.init(document.getElementById("idp"), 'light'); // var myChartNums = echarts.init(document.getElementById("idp"));
// 第二个参数为导入地图文件 // // 第二个参数为导入地图文件
echarts.registerMap('shanghai', SHjson); // echarts.registerMap('shanghai', SHjson);
var optionNums = { // var optionNums = {
tooltip: { // tooltip: {
trigger: 'item', // trigger: 'item',
formatter: "{b}: {c}" // formatter: "{b}: {c}"
}, // },
visualMap: { // visualMap: {
show: false, // show: false,
min: 0, // min: 0,
max: 418, // max: 418,
text: ['高', '低'], // text: ['高', '低'],
realtime: false, // realtime: false,
calculable: true, // calculable: true,
inRange: { // inRange: {
color: ['lightskyblue', 'yellow', 'orangered'] // color: ['lightskyblue', 'yellow', 'orangered']
} // }
}, // },
series: [ // series: [
{ // {
type: 'map', // type: 'map',
mapType: 'shanghai', // mapType: 'shanghai',
data: [], // data: [],
} // }
] // ]
}; // };
let params = { let params = {
clientId: _this.app, clientId: _this.app,
year: _this.year, year: _this.year,
month: _this.month month: _this.month
} }
$.ajax({ $.ajax({
url: baseUrl + 'authcenter/logstatistics/auth?' + _this.getParams(params), url: baseUrl + 'authcenter/logstatistics/auth?' + _this.getParams(params),
success: function (result) { success: function (result) {
_this.nums = result.data.all_auth; _this.nums = result.data.all_auth;
_this.numsJcjy = result.data.cas_edu_auth; _this.numsJcjy = result.data.cas_edu_auth;
_this.numsIdpList = result.data.area_auth; _this.numsIdpList = result.data.area_auth;
var legend = [], data = []; var legend = [], data = [];
for (var i = 0; i < result.data.area_auth.length; i++) { for (var i = 0; i < result.data.area_auth.length; i++) {
var element = result.data.area_auth[i]; var element = result.data.area_auth[i];
legend.push(element.name); legend.push(element.name);
data.push({ value: element.count, name: element.name }) data.push({ value: element.count, name: element.name })
}
_this.numsIdpList = data;
optionNums.series[0].data = data
myChartNums.setOption(optionNums);
},
error: function (e) {
console.log(e)
} }
}) _this.numsIdpList = data.filter(element => { return element.value > 0 });
// optionNums.series[0].data = data
// myChartNums.setOption(optionNums);
},
error: function (e) {
console.log(e)
}
}) })
// })
}, },
initNumsByTime: function () { initNumsByTime: function () {
var optionNumsByTime = { var optionNumsByTime = {
grid: {
top: '20px',
left: '40px',
right: '40px',
bottom: '20px',
containLabel: true
},
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
...@@ -433,15 +524,42 @@ ...@@ -433,15 +524,42 @@
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
axisLine: {
// show: false,//不显示坐标轴线
lineStyle: {
color: 'lightgray'
}
},
axisLabel: {
color: "black" //Y轴刻度字颜色
},
splitLine: {
show: true
},
data: [] data: []
}, },
yAxis: { yAxis: {
type: 'value' type: 'value',
axisLine: {
// show: false,//不显示坐标轴线
lineStyle: {
color: 'lightgray'
}
},
axisLabel: {
show: false,//不显示坐标轴上的文字
},
}, },
series: [{ series: [{
data: [], data: [],
type: 'line', type: 'line',
areaStyle: {} smooth: true,
lineStyle: {
color: "#4583f4"
},
areaStyle: {
color: '#4583f4'
}
}] }]
}; };
let params = { let params = {
...@@ -461,7 +579,7 @@ ...@@ -461,7 +579,7 @@
} }
optionNumsByTime.xAxis.data = legend; optionNumsByTime.xAxis.data = legend;
optionNumsByTime.series[0].data = data; optionNumsByTime.series[0].data = data;
var myChartNumsByTime = echarts.init(document.getElementById("nums-by-time"), 'light'); var myChartNumsByTime = echarts.init(document.getElementById("nums-by-time"));
myChartNumsByTime.setOption(optionNumsByTime); myChartNumsByTime.setOption(optionNumsByTime);
}, },
error: function (e) { error: function (e) {
...@@ -476,6 +594,7 @@ ...@@ -476,6 +594,7 @@
formatter: "{a} <br/>{b}: {c} ({d}%)" formatter: "{a} <br/>{b}: {c} ({d}%)"
}, },
legend: { legend: {
icon: "circle",
bottom: 10, bottom: 10,
data: [] data: []
}, },
...@@ -484,6 +603,7 @@ ...@@ -484,6 +603,7 @@
name: "访客身份", name: "访客身份",
type: "pie", type: "pie",
radius: ["30%", "50%"], radius: ["30%", "50%"],
center: ["50%", "40%"],
label: { label: {
position: 'outside', position: 'outside',
alignTo: 'edge', alignTo: 'edge',
...@@ -495,7 +615,15 @@ ...@@ -495,7 +615,15 @@
} }
} }
}, },
data: [] data: [],
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
return colorList[params.dataIndex]
}
}
}
} }
] ]
}; };
...@@ -516,7 +644,7 @@ ...@@ -516,7 +644,7 @@
} }
optionUserType.legend.data = legend; optionUserType.legend.data = legend;
optionUserType.series[0].data = data; optionUserType.series[0].data = data;
var myChartUserType = echarts.init(document.getElementById('user-type'), 'light'); var myChartUserType = echarts.init(document.getElementById('user-type'));
myChartUserType.setOption(optionUserType); myChartUserType.setOption(optionUserType);
}, },
error: function (e) { error: function (e) {
...@@ -559,6 +687,15 @@ ...@@ -559,6 +687,15 @@
} }
} }
return res; return res;
},
randomFun: function (arr) {
for(let i=0, len = arr.length; i < len; i++) {
let index = parseInt(Math.random() * (len - 1));
let tempValue = arr[i];
arr[i] = arr[index];
arr[index] = tempValue;
}
return arr;
} }
}, },
}) })
......
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