Skip to content

S
sh-ds
Commit ae27cc4f authored by 曹雷's avatar 曹雷
Browse files
Options

统计及登录页面优化

parent 6f4c79e9
Hide whitespace changes
Inline Side-by-side
Showing with 243 additions and 100 deletions
eden-authcenter-agent/src/main/resources/static/css/ds.css
View file @ ae27cc4f
html {
height: 100vh;
}
.ds {
max-width: 1900px;
margin: 0 auto;
......@@ -5,12 +8,13 @@
overflow: hidden;
}
.ds-header-img {
margin: 2vh 0;
margin-left: 10%;
height: 10vh;
height: 5vh;
}
.ds-content {
width: 100%;
height: 75vh;
height: 79vh;
background: url("../img/bg.png") no-repeat center center;
background-size: 100% 100%;
overflow: hidden;
......@@ -31,7 +35,7 @@
}
.ds-footer {
width: 100%;
height: 16vh;
height: 13vh;
overflow: hidden;
background: white url("../img/Login-b.jpg") no-repeat center center;
}
......@@ -53,10 +57,11 @@
padding-right: 10px;
height: 100%;
flex-grow: 1;
display: flex;
justify-content: flex-end;
}
.ds-content-city-float {
width: 300px;
float: right;
}
.ds-content-city-float > p {
width: 90px;
......@@ -157,6 +162,7 @@
.ds-content-source {
display: flex;
height: calc(100% - 60px);
max-width: 700px;
}
.ds-content-title {
padding: 10px 0 0 0;
......
eden-authcenter-agent/src/main/resources/templates/ds.html
View file @ ae27cc4f
......@@ -30,7 +30,7 @@
<!-- Add your site or application content here -->
<div class="ds">
<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 class="ds-content">
<div class="ds-content-mask">
......
eden-authcenter-agent/src/main/resources/templates/statistics.html
View file @ ae27cc4f
......@@ -22,7 +22,7 @@
<link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{/static/css/normalize.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/vue.js"></script>
<script type="text/javascript" src="../static/js/iview.min.js"></script>
......@@ -44,9 +44,9 @@
<div id="app" class="static">
<div class="statistics-header">
<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>
<p style="font-size: 14px;">发现服务 · 速享之旅</p>
<p style="font-size: 14px; font-weight: 700;">发现服务 · 速享之旅</p>
</div>
<div class="flex">
<img src="../static/img/top-title.png" style="height: 22px;" alt="">
......@@ -69,52 +69,67 @@
<div class="statistics-content">
<div style="width: 25%; height: 100%;">
<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>
<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-system" style="width: 95%;height: calc(50% - 30px); margin: 5px 5px;"></div>
</div>
</div>
<div style="width: 50%; height: 100%;">
<div class="statistics-content-item item-height-higher">
<p class="statistics-content-item-title">认证数据统计</p>
<div class="statistics-content-item" style="height: 30%;">
<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="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-by-idp" style="height: calc(100% - 40px);">
<div class="nums-total" style="background: url(../static/img/center-bg-1.png);">
<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 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"><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 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"
v-text="item.value"></span>
</p>
</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 class="statistics-content-item item-height">
<p class="statistics-content-item-title">认证登陆高峰时间</p>
<div class="statistics-content-item" style="height: 70%;">
<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>
</div>
<div style="width: 25%; height: 100%;">
<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>
<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)">
<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
<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; padding-right: 8px;">·</span><span v-text="item.name"></span><span
style="float: right;" v-text="item.count">次</span></p>
</div>
</div>
......@@ -138,15 +153,32 @@
],
app: 'all',
appList: [],
numsIdpList: [
],
numsIdpList: [],
userOrgList: [],
nums: 0,
numsJcjy: 0,
numsQp: 0,
numsSy: 0,
numsOfPeople: 0
},
mounted: function () {
this.init();
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: {
init: function () {
......@@ -185,13 +217,14 @@
this.initUserOrg();
},
initSource: function () {
var myChart = echarts.init(document.getElementById('app-source'), 'light');
var myChart = echarts.init(document.getElementById('app-source'));
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
icon: "circle",
bottom: 10,
data: ["数字教材", "阅览室", "其他"]
},
......@@ -199,7 +232,8 @@
{
name: "应用来源",
type: "pie",
radius: ["30%", "50%"],
radius: ["40%", "60%"],
center: ["50%", "42%"],
label: {
position: 'outside',
alignTo: 'edge',
......@@ -211,11 +245,15 @@
}
}
},
data: [
{ value: 21105, name: "数字教材" },
{ value: 3186, name: "阅览室" },
{ value: 271, name: "其他" }
]
data: [],
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
return colorList[params.dataIndex]
}
}
}
}
]
};
......@@ -258,26 +296,55 @@
url: baseUrl + 'authcenter/logstatistics/environment?' + _this.getParams(params),
success: function (result) {
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++) {
var element = result.data.os[i];
if (element.name === 'others' || t >= 4) {
others.value += element.count;
continue;
}
t++;
legendSystem.push(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++) {
var element = result.data.browser[i];
if (element.name === 'others' || t >= 4) {
others.value += element.count;
continue;
}
t++;
legendBroswer.push(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'), 'light');
var myChartBrowser = echarts.init(document.getElementById('app-env-browser'));
var optionBrowser = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
icon: "circle",
orient: 'vertical',
right: 'right',
top: 'middle',
......@@ -296,7 +363,7 @@
{
name: "浏览器类型",
type: "pie",
radius: ["30%", "50%"],
radius: ["30%", "70%"],
center: ['30%', '50%'],
label: {
position: 'inner',
......@@ -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);
var myChartSystem = echarts.init(document.getElementById('app-env-system'), 'light');
var myChartSystem = echarts.init(document.getElementById('app-env-system'));
var optionSystem = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
icon: "circle",
orient: 'vertical',
right: 'right',
top: 'middle',
......@@ -338,7 +414,7 @@
{
name: "操作系统类型",
type: "pie",
radius: ["30%", "50%"],
radius: ["30%", "70%"],
center: ['30%', '50%'],
label: {
position: 'inner',
......@@ -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 @@
},
initNums: function () {
var _this = this;
$.getJSON('../static/js/SHdata.json', function (SHjson) {
var myChartNums = echarts.init(document.getElementById("idp"), 'light');
// 第二个参数为导入地图文件
echarts.registerMap('shanghai', SHjson);
// $.getJSON('./static/js/SHdata.json', function (SHjson) {
// var myChartNums = echarts.init(document.getElementById("idp"));
// // 第二个参数为导入地图文件
// echarts.registerMap('shanghai', SHjson);
var optionNums = {
tooltip: {
trigger: 'item',
formatter: "{b}: {c}"
},
visualMap: {
show: false,
min: 0,
max: 418,
text: ['高', '低'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
series: [
{
type: 'map',
mapType: 'shanghai',
data: [],
}
]
};
// var optionNums = {
// tooltip: {
// trigger: 'item',
// formatter: "{b}: {c}"
// },
// visualMap: {
// show: false,
// min: 0,
// max: 418,
// text: ['高', '低'],
// realtime: false,
// calculable: true,
// inRange: {
// color: ['lightskyblue', 'yellow', 'orangered']
// }
// },
// series: [
// {
// type: 'map',
// mapType: 'shanghai',
// data: [],
// }
// ]
// };
let params = {
clientId: _this.app,
year: _this.year,
month: _this.month
}
$.ajax({
url: baseUrl + 'authcenter/logstatistics/auth?' + _this.getParams(params),
success: function (result) {
_this.nums = result.data.all_auth;
_this.numsJcjy = result.data.cas_edu_auth;
_this.numsIdpList = result.data.area_auth;
var legend = [], data = [];
for (var i = 0; i < result.data.area_auth.length; i++) {
var element = result.data.area_auth[i];
legend.push(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)
let params = {
clientId: _this.app,
year: _this.year,
month: _this.month
}
$.ajax({
url: baseUrl + 'authcenter/logstatistics/auth?' + _this.getParams(params),
success: function (result) {
_this.nums = result.data.all_auth;
_this.numsJcjy = result.data.cas_edu_auth;
_this.numsIdpList = result.data.area_auth;
var legend = [], data = [];
for (var i = 0; i < result.data.area_auth.length; i++) {
var element = result.data.area_auth[i];
legend.push(element.name);
data.push({ value: element.count, name: element.name })
}
})
_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 () {
var optionNumsByTime = {
grid: {
top: '20px',
left: '40px',
right: '40px',
bottom: '20px',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
......@@ -433,15 +524,42 @@
xAxis: {
type: 'category',
boundaryGap: false,
axisLine: {
// show: false,//不显示坐标轴线
lineStyle: {
color: 'lightgray'
}
},
axisLabel: {
color: "black" //Y轴刻度字颜色
},
splitLine: {
show: true
},
data: []
},
yAxis: {
type: 'value'
type: 'value',
axisLine: {
// show: false,//不显示坐标轴线
lineStyle: {
color: 'lightgray'
}
},
axisLabel: {
show: false,//不显示坐标轴上的文字
},
},
series: [{
data: [],
type: 'line',
areaStyle: {}
smooth: true,
lineStyle: {
color: "#4583f4"
},
areaStyle: {
color: '#4583f4'
}
}]
};
let params = {
......@@ -461,7 +579,7 @@
}
optionNumsByTime.xAxis.data = legend;
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);
},
error: function (e) {
......@@ -476,6 +594,7 @@
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
icon: "circle",
bottom: 10,
data: []
},
......@@ -484,6 +603,7 @@
name: "访客身份",
type: "pie",
radius: ["30%", "50%"],
center: ["50%", "40%"],
label: {
position: 'outside',
alignTo: 'edge',
......@@ -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 @@
}
optionUserType.legend.data = legend;
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);
},
error: function (e) {
......@@ -559,6 +687,15 @@
}
}
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