Skip to content

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

feat: 统计 & 配置

parent 481d51a2
Show whitespace changes
Inline Side-by-side
Showing with 947 additions and 696 deletions
eden-authcenter-agent/src/main/resources/static/css/statistics.css
View file @ 20b6f5e4
......@@ -19,7 +19,7 @@ body {
}
.statistics-content-item {
background-color: white;
margin: 10px 5px;
margin: 10px 5px 0;
overflow: hidden;
}
.item-height {
......@@ -31,6 +31,11 @@ body {
.statistics-content-item-title {
padding: 12px 0 0 20px;
font-size: 14px;
font-weight: bold;
}
.statistics-content-item-title-sub {
padding: 5px 0 0 20px;
font-size: 12px;
color: #777c82;
}
.statistics-content-item-title-remark {
......
eden-authcenter-agent/src/main/resources/templates/config/authclient_list.html
View file @ 20b6f5e4
<!DOCTYPE html>
<!--[if lt IE 7]>
<html xmlns:th="http://www.thymeleaf.org">
<html xmlns:th="http://www.w3.org/1999/xhtml" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html xmlns:th="http://www.w3.org/1999/xhtml" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html xmlns:th="http://www.w3.org/1999/xhtml" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" xmlns:th="http://www.w3.org/1999/xhtml">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta content="" name="description" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>上海市中小学数字教材</title>
<link rel="stylesheet" href="../../static/css/main_0327.css" />
<link rel="stylesheet" href="../../static/css/statistics.css" />
<link rel="stylesheet" href="../../static/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../static/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="../../static/css/iview.css" />
<link rel="shortcut icon" href="../../static/img/favicon.ico">
<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>
</head>
<body style="background-color: rgb(244, 245, 245);">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a
href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div id="app" class="static">
<div class="statistics-header">
<div class="flex" style="display: flex; align-items: center;">
<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; font-weight: 700;">发现服务 · 速享之旅</p>
</div>
<div class="flex">
<img src="../static/img/top-title.png" style="height: 22px;" alt="">
</div>
<div class="flex" style="width: 33%;">
</div>
</div>
<div style="margin: 6px 6px; width: 100%; background-color: #fff;">
<div style="margin: 6px 6px; padding-top: 10px; display: flex; justify-content: space-between;">
<span>授权应用列表:</span>
<i-button type="primary" size="small" style="margin-right: 20px;" @click="clientModal = true;">新增</i-button>
</div>
<i-table :columns="columnsClient" :data="dataClient" style="width: 100%; margin: 6px 6px;"></i-table>
</div>
<Modal
v-model="clientModal"
title="授权应用配置"
@on-ok="handleSubmit('formValidate')"
@on-cancel="clientModal = false;">
<i-form ref="formValidate" :model="formSetting" label-position="right" :label-width="100">
<Form-Item label="clientId">
<i-input v-model="formSetting.key"></i-input>
</Form-Item>
<Form-Item label="clientName">
<i-input v-model="formSetting.name"></i-input>
</Form-Item>
<Form-Item label="clientSecret">
<i-input v-model="formSetting.secret"></i-input>
</Form-Item>
<Form-Item label="白名单">
<i-input v-model="formSetting.whiteRule"></i-input>
</Form-Item>
</i-form>
</Modal>
</div>
<script th:inline="javascript">
var dataList = [[${dataList}]];
</script>
<!-- iview使用了includes方法，兼容ie11 -->
<script>
if (!Array.prototype.includes) {
Object.defineProperty(Array.prototype, 'includes', {
value: function (valueToFind, fromIndex) {
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
// 1. Let O be ? ToObject(this value).
var o = Object(this);
// 2. Let len be ? ToLength(? Get(O, "length")).
var len = o.length >>> 0;
// 3. If len is 0, return false.
if (len === 0) {
return false;
}
// 4. Let n be ? ToInteger(fromIndex).
// (If fromIndex is undefined, this step produces the value 0.)
var n = fromIndex | 0;
// 5. If n ≥ 0, then
// a. Let k be n.
// 6. Else n < 0,
// a. Let k be len + n.
// b. If k < 0, let k be 0.
var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
function sameValueZero(x, y) {
return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) &&
isNaN(y));
}
// 7. Repeat, while k < len
while (k < len) {
// a. Let elementK be the result of ? Get(O, ! ToString(k)).
// b. If SameValueZero(valueToFind, elementK) is true, return true.
if (sameValueZero(o[k], valueToFind)) {
return true;
}
// c. Increase k by 1.
k++;
}
// 8. Return false
return false;
}
});
}
</script>
<script type="text/javascript">
var baseUrl = "https://ds-test.etextbook.cn/authcenter/";
var colorList = [
'#6c5df1', '#a78bf4', '#fdbf3c', '#ec6367', '#2fcaa8', '#79c161'
]
new Vue({
el: '#app',
data() {
var that = this;
return {
clientModal: false,
settingIndex: null,
columnsClient: [
{
title: '应用ID',
key: 'id',
},
{
title: '应用名称',
key: 'name',
},
{
title: '备注',
key: 'province',
},
{
title: '创建时间',
key: 'createdTime',
},
{
title: '状态',
key: 'status',
},
{
title: '操作',
key: 'action',
render: function (h, params) {
return h('div', [
h('Button', {
props: {
type: 'text',
size: 'small'
},
on: {
click: function () {
that.updateClientStatus(params.index, 2)
}
}
}, '废弃'),
h('Button', {
props: {
type: 'text',
size: 'small'
},
on: {
click: function () {
that.updateClientStatus(params.index, 1)
}
}
}, '启用'),
h('Button', {
props: {
type: 'text',
size: 'small'
},
on: {
click: function () {
that.formSetting = params.row;
that.clientModal = true;
}
}
}, '配置')
]);
}
}
],
dataClient: dataList,
formSetting: {
key: '',
name: '',
secret: '',
whiteRule: '',
status: 1,
},
}
},
mounted: function () {
},
methods: {
handleSubmit: function (name) {
var _this = this;
_this.$refs[name].validate(function (valid) {
if (valid) {
var params = {
key: _this.formSetting.key,
name: _this.formSetting.name,
secret: _this.formSetting.secret,
whiteRule: _this.formSetting.whiteRule,
status: 1
}
console.log('params', params, _this)
$.ajax({
url: baseUrl + 'config/authclient/save',
type: 'POST',
data: params,
contentType: 'application/json; charset=utf-8',
success: function (result) {
_this.$Message.success('保存成功!');
},
error: function (e) {
console.log(e)
}
});
} else {
_this.$Message.error('Fail!');
}
})
},
updateClientStatus: function (index, status) {
var params = {
status
}
var _this = this;
$.ajax({
url: baseUrl + 'config/authclient/changestatus',
type: 'POST',
data: params,
success: function (result) {
_this.$Message.success('更新成功!');
},
error: function (e) {
console.log(e)
}
});
},
},
})
</script>
</body>
</html>
\ No newline at end of file
eden-authcenter-agent/src/main/resources/templates/config/index.html
View file @ 20b6f5e4
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<html class="no-js" xmlns:th="http://www.w3.org/1999/xhtml">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta content="" name="description" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>统一认证登录配置</title>
<link rel="stylesheet" th:href="@{/static/css/main_0216.css}" />
<link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{/static/css/normalize.css}" />
<script type="text/javascript" th:src="@{/static/js/jquery-1.10.2.min.js}"></script>
<!--<script src="../js/vendor/modernizr-2.6.2.min.js"></script>-->
</head>
<body style="background-color: #4e97f7 !important;">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a
href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="bg">
</div>
<script th:inline="javascript">
/*<![CDATA[*/
var ctxPath = /*[[@{/}]]*/ '';
/*]]>*/
</script>
<script type="text/javascript">
window.location.href = ctxPath + 'config/authclient/list'
</script>
</body>
</html>
\ No newline at end of file
eden-authcenter-agent/src/main/resources/templates/login/index.html
View file @ 20b6f5e4
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<html class="no-js" xmlns:th="http://www.w3.org/1999/xhtml"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta content="" name="description" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>统一认证登录配置</title>
<link rel="stylesheet" th:href="@{/static/css/main_0216.css}"/>
<link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}"/>
<link rel="stylesheet" th:href="@{/static/css/normalize.css}"/>
<script type="text/javascript" th:src="@{/static/js/jquery-1.10.2.min.js}"></script>
<!--<script src="../js/vendor/modernizr-2.6.2.min.js"></script>-->
</head>
<body style="background-color: #4e97f7 !important;">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a
href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div class="bg">
<div class="bg-form">
<div class="loginContainer">
<div class="login-box text-center">
<form class="form" method="post">
<h2 class="text-center" style="margin-top: 30px;">统一认证登录配置</h2>
<div class="bg-form" style="width: 80%;margin: 50px auto">
<div class="form-group text-left" style="float: left">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span aria-hidden="true" class="glyphicon glyphicon-user"></span></span>
<input aria-describedby="basic-addon1" autocomplete="off" class="form-control" id="username" placeholder="请输入管理员账号" size="25" tabindex="1" type="text" name="userName" value="" />
</div>
</div>
<div class="form-group text-left" style="float: left">
<div class="input-group">
<span class="input-group-addon " id="basic-addon2"> <span aria-hidden="true" class="glyphicon glyphicon-lock"></span></span>
<input aria-describedby="basic-addon1" autocomplete="off" class="form-control" id="password" placeholder="请输入管理员密码" size="25" tabindex="2" type="password" name="pwd" />
</div>
</div>
<button accesskey="l" class="btn btn-primary btn-block" id="login-button" style="outline: 0" tabindex="6" type="button" onclick="toLogin()">登录
</button>
</div>
</form>
</div>
<!-- <div class="login-box">
<button onclick="toLogin(1)" accesskey="l" class="login-btn" id="login-button" name="button" style="outline: 0" type="button">登录
</button>
</div> -->
</div>
</div>
</div>
<script th:inline="javascript">
/*<![CDATA[*/
var ctxPath = /*[[@{/}]]*/ '';
/*]]>*/
</script>
<script type="text/javascript">
function toLogin () {
var action = ctxPath + "login/login";
$("form").attr("action", action);
$("form").submit();
}
</script>
</body></html>
\ No newline at end of file
eden-authcenter-agent/src/main/resources/templates/statistics.html
View file @ 20b6f5e4
......@@ -17,12 +17,12 @@
<meta content="" name="description" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>上海市中小学数字教材</title>
<link rel="stylesheet" th:href="@{/static/css/main_0327.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/normalize.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/static/css/iview.css}" />
<link rel="shortcut icon" th:href="@{/static/img/favicon.ico}" >
<link rel="stylesheet" href="../static/css/main_0327.css" />
<link rel="stylesheet" href="../static/css/statistics.css" />
<link rel="stylesheet" href="../static/css/bootstrap.min.css" />
<link rel="stylesheet" href="../static/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="../static/css/iview.css" />
<link rel="shortcut icon" href="../static/img/favicon.ico">
<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>
......@@ -56,77 +56,60 @@
<i-select v-model="app" @on-change="refresh" style="width: 120px; margin: 0 5px;">
<i-option v-for="item in appList" :value="item.code" :label="item.name"></i-option>
</i-select>
<i-select v-model="time" @on-change="refresh" style="width: 120px; margin: 0 5px;">
<i-option v-for="item in timeType" :value="item.code" :label="item.name"></i-option>
</i-select>
<i-select v-if="time === 'year'" v-model="year" @on-change="refresh" style="width: 120px; margin: 0 5px;">
<i-option v-for="item in yearList" :value="item.code" :label="item.name"></i-option>
</i-select>
<i-select v-if="time === 'month'" v-model="month" @on-change="refresh" style="width: 120px; margin: 0 5px;">
<i-option v-for="item in monthList" :value="item.code" :label="item.name"></i-option>
<i-select v-model="timeRange" @on-change="refresh"
style="width: 120px; margin: 0 5px;">
<i-option v-for="item in timeRangeList" :value="item.code" :label="item.name"></i-option>
</i-select>
</div>
</div>
<div class="statistics-content">
<div style="width: 25%; height: 100%;">
<div style="width: 28%; height: 100%;">
<div class="statistics-content-item item-height">
<p class="statistics-content-item-title">应用来源</p>
<div id="app-source" style="width: 95%;height: calc(100% - 40px); margin: 5px 5px;"></div>
<p class="statistics-content-item-title">应用来源排行 TOP5</p>
<p class="statistics-content-item-title-sub"><span v-text="formatTime(-timeRange)"></span> 至 <span v-text="formatTime(0)"></span> | 最近<span v-text="timeRange"></span>天</p>
<div id="app-source" style="height: calc(100% - 65px); margin: 5px 5px;"></div>
</div>
<div class="statistics-content-item item-height-higher">
<p class="statistics-content-item-title">来源环境分析</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" 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 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-num"><span class="nums-total-nums" v-text="nums"></span>人次</p>
</div>
<div class="nums-total" style="background: url(../static/img/center-bg-2.png);">
<p class="nums-title">基础教育统一认证</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 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>
<p class="statistics-content-item-title">认证热点单位</p>
<p class="statistics-content-item-title-sub"><span v-text="formatTime(-timeRange)"></span> 至 <span v-text="formatTime(0)"></span> | 最近<span v-text="timeRange"></span>天</p>
<div id="user-org" style="height: calc(100% - 65px); margin-top: 8px;">
<p style="padding: 5px 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 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 id="idp" style="width: 48%; height: calc(100% - 40px); margin: 5px 5px;"></div> -->
</div>
<div style="width: 72%; height: 100%;">
<div class="statistics-content-item" style="height: 50%; display: flex;">
<div style="width: calc(100% - 150px); height: 100%;">
<p class="statistics-content-item-title">认证用户访问情况统计</p>
<p class="statistics-content-item-title-sub"><span v-text="formatTime(-timeRange)"></span> 至 <span v-text="formatTime(0)"></span> | 最近<span v-text="timeRange"></span>天</p>
<div id="nums-by-time" style="width: 100%; height: calc(100% - 65px); margin: 0;"></div>
</div>
<div class="statistics-content-item" style="height: 70%;">
<p class="statistics-content-item-title">认证登陆高峰时间</p>
<div id="nums-by-time" style="width: 100%; height: calc(100% - 40px); margin: 0;"></div>
<div style="width: 150px; margin-top: 65px;">
<p>合计：<span v-text="totalCount"></span>人次</p>
<p>教师：<span v-text="teacherCount"></span>人次</p>
<p>学生：<span v-text="studentCount"></span>人次</p>
<p>其他：<span v-text="otherCount"></span>人次</p>
<p>均值：<span v-text="avgTotalCount"></span>人次/天</p>
<p>教师：<span v-text="avgTeacherCount"></span>人次/天</p>
<p>学生：<span v-text="avgStudentCount"></span>人次/天</p>
<p>其他：<span v-text="avgOtherCount"></span>人次/天</p>
</div>
</div>
<div style="width: 25%; height: 100%;">
<div class="statistics-content-item item-height">
<p class="statistics-content-item-title">身份认证</p>
<div id="user-type" style="width: 95%;height: calc(100% - 40px); margin: 5px 5px;"></div>
<div style="height: 50%; display: flex;">
<div class="statistics-content-item" style="width: 50%; height: 100%;">
<p class="statistics-content-item-title">用户访问高峰时段</p>
<p class="statistics-content-item-title-sub"><span v-text="formatTime(-timeRange)"></span> 至 <span v-text="formatTime(0)"></span> | 最近<span v-text="timeRange"></span>天</p>
<div id="pv" style="width: 95%;height: calc(100% - 65px); margin: 5px 5px;"></div>
</div>
<div class="statistics-content-item item-height-higher">
<p class="statistics-content-item-title">认证热点单位</p>
<div id="user-org" style="height: calc(100% - 40px); margin-top: 8px;">
<p style="padding: 5px 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 class="statistics-content-item" style="width: 50%; height: 100%;">
<p class="statistics-content-item-title">来源环境分析</p>
<p class="statistics-content-item-title-sub"><span v-text="formatTime(-timeRange)"></span> 至 <span v-text="formatTime(0)"></span> | 最近<span v-text="timeRange"></span>天</p>
<div id="app-env-browser" style="width: 95%;height: calc(100% - 65px); margin: 5px 5px;"></div>
</div>
</div>
</div>
......@@ -137,7 +120,7 @@
<script>
if (!Array.prototype.includes) {
Object.defineProperty(Array.prototype, 'includes', {
value: function(valueToFind, fromIndex) {
value: function (valueToFind, fromIndex) {
if (this == null) {
throw new TypeError('"this" is null or not defined');
......@@ -166,7 +149,8 @@
var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
function sameValueZero(x, y) {
return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) &&
isNaN(y));
}
// 7. Repeat, while k < len
......@@ -188,7 +172,7 @@
</script>
<script type="text/javascript">
var baseUrl = "/";
var baseUrl = "https://ds-test.etextbook.cn/authcenter";
var colorList = [
'#6c5df1', '#a78bf4', '#fdbf3c', '#ec6367', '#2fcaa8', '#79c161'
......@@ -197,23 +181,22 @@
el: '#app',
data: {
year: 'all',
yearList: [],
timeRangeList: [],
month: 1,
monthList: [],
time: 'year',
timeType: [
{ code: 'year', name: '按年统计' },
{ code: 'month', name: '按月统计' },
],
timeRange: 7,
app: 'all',
appList: [],
numsIdpList: [],
userOrgList: [],
nums: 0,
numsJcjy: 0,
numsQp: 0,
numsSy: 0,
numsOfPeople: 0
totalCount: 0,
teacherCount: 0,
studentCount: 0,
otherCount: 0,
avgTotalCount: 0,
avgTeacherCount: 0,
avgStudentCount: 0,
avgOtherCount: 0,
},
mounted: function () {
this.init();
......@@ -222,38 +205,42 @@
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'));
var myChartPV = echarts.init(document.getElementById('pv'));
myChart.resize();
myChartBrowser.resize();
myChartSystem.resize();
// myChartNums.resize();
myChartNumsByTime.resize();
myChartUserType.resize();
myChartPV.resize();
}
},
methods: {
init: function () {
this.appList = [{ code: 'all', name: '全部' }]
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
this.appList = [{
code: 'all',
name: '全部'
}]
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 + "月" })
}
this.timeRangeList = [{
code: 7,
name: '最近7天'
}, {
code: 30,
name: '最近30天'
}, {
code: 180,
name: '最近180天'
}, {
code: 365,
name: '最近一年'
}]
var _this = this;
$.ajax({
type: 'GET',
url: baseUrl + 'authcenter/logstatistics/auth_apps',
url: baseUrl + '/logstatistics/auth_apps',
success: function (result) {
_this.appList = _this.appList.concat(result.data)
},
......@@ -273,52 +260,35 @@
initSource: function () {
var myChart = echarts.init(document.getElementById('app-source'));
var option = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c}人次 ({d}%)",
position: [20, 20],
},
legend: {
icon: "circle",
bottom: 0,
data: ["数字教材", "阅览室", "其他"]
},
series: [
{
name: "应用来源",
type: "pie",
radius: ["40%", "60%"],
center: ["50%", "48%"],
label: {
position: 'outside',
formatter: "{per|{d}%}",
rich: {
per: {
color: "black"
}
yAxis: {
type: 'category',
data: ['数字教材', '资源评价系统', '阅览室', '空中课堂', '自适应学习系统'],
axisLabel: {
interval: 0,
}
},
data: [],
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
return colorList[params.dataIndex]
}
}
}
xAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}],
grid: {
left: 0,
top: 0,
bottom: 0,
containLabel: true,
}
]
};
var params = {
clientId: this.app,
year: this.year,
month: this.month
latestDays: this.timeRange,
topN: 5
}
var _this = this;
$.ajax({
url: baseUrl + 'authcenter/logstatistics/app?' + _this.getParams(params),
url: baseUrl + '/statistics/app?' + _this.getParams(params),
success: function (result) {
// _this.appList = _this.appList.concat(result.data.data)
......@@ -327,9 +297,12 @@
for (var i = 0; i < result.data.length; i++) {
var element = result.data[i];
legend.push(element.name);
data.push({ value: element.count, name: element.name })
data.push({
value: element.count,
name: element.name
})
}
option.legend.data = legend;
option.yAxis.data = legend;
option.series[0].data = data;
myChart.setOption(option);
},
......@@ -341,154 +314,61 @@
initAppEnv: function () {
var params = {
clientId: this.app,
year: this.year,
month: this.month
latestDays: this.timeRange,
topN: 5,
}
var _this = this;
$.ajax({
url: baseUrl + 'authcenter/logstatistics/environment?' + _this.getParams(params),
url: baseUrl + '/statistics/environment?' + _this.getParams(
params),
success: function (result) {
var legendSystem = [], dataSystem = [], legendBroswer = [], dataBrowser = [];
if (result.data.os.length) {
result.data.os.sort(function(a, b) { return b.count - a.count })
}
var others = { name: '其他', value: 0 };
var t = 0;
for (var i = 0; i < result.data.os.length; i++) {
var element = result.data.os[i];
if (element.name === 'unknown') element.name = '未知'
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('其他');
dataSystem.push(others)
}
if (result.data.browser.length) {
result.data.browser.sort(function (a, b) { return b.count - a.count })
}
others = { name: '其他', value: 0 };
t = 0;
for (var i = 0; i < result.data.browser.length; i++) {
var element = result.data.browser[i];
if (element.name === 'unknown') element.name = '未知'
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('其他');
dataBrowser.push(others)
}
var series = [];
result.osList.forEach((element, index) => {
series.push({
name: element,
type: 'bar',
stack: 'total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: result.browserList.map(b => {
return result.dataMap?.[b]?.[index] || 0;
})
})
});
console.log('series', series)
var myChartBrowser = echarts.init(document.getElementById('app-env-browser'));
var myChartBrowser = echarts.init(document.getElementById(
'app-env-browser'));
var optionBrowser = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c}人次 ({d}%)",
position: [20, 20],
},
legend: {
icon: "circle",
orient: 'vertical',
right: 'right',
top: 'middle',
data: legendBroswer,
formatter: function (name) {
var target;
for (var i = 0, l = dataBrowser.length; i < l; i++) {
if (dataBrowser[i].name == name) {
target = dataBrowser[i].value;
}
}
return name + ' ' + target;
}
},
series: [
{
name: "浏览器类型",
type: "pie",
radius: ["30%", "70%"],
center: ['30%', '50%'],
labelLine: {
show: false
trigger: 'axis',
axisPointer: {
// Use axis to trigger tooltip
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
}
},
label: {
show: false
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
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'));
var optionSystem = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c}人次 ({d}%)",
position: [20, 20],
},
legend: {
icon: "circle",
orient: 'vertical',
right: 'right',
top: 'middle',
data: legendSystem,
formatter: function (name) {
var target;
for (var i = 0, l = dataSystem.length; i < l; i++) {
if (dataSystem[i].name == name) {
target = dataSystem[i].value;
}
}
return name + ' ' + target;
}
},
series: [
{
name: "操作系统类型",
type: "pie",
radius: ["30%", "70%"],
center: ['30%', '50%'],
labelLine: {
show: false
xAxis: {
type: 'value'
},
label: {
show: false
yAxis: {
type: 'category',
data: result.browserList,
},
data: dataSystem,
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
return colorList[params.dataIndex]
}
}
}
}
]
series: series,
};
myChartSystem.setOption(optionSystem);
myChartBrowser.setOption(optionBrowser);
},
error: function (e) {
console.log(e)
......@@ -497,66 +377,27 @@
},
initNums: function () {
var _this = this;
// $.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 params = {
clientId: _this.app,
year: _this.year,
month: _this.month
latestDays: _this.timeRange
}
$.ajax({
url: baseUrl + 'authcenter/logstatistics/auth?' + _this.getParams(params),
url: baseUrl + '/statistics/auth_user_type_sum?' + _this.getParams(params),
success: function (result) {
_this.nums = result.data.all_auth;
_this.numsJcjy = result.data.cas_edu_auth;
_this.numsQp = result.data.qp_auth;
_this.numsSy = result.data.operator_auth;
_this.numsOfPeople = result.data.num_of_people;
// _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(function (element) { return element.value > 0 });
// optionNums.series[0].data = data
// myChartNums.setOption(optionNums);
_this.totalCount = result.data.totalCount;
_this.teacherCount = result.data.teacherCount;
_this.studentCount = result.data.studentCount;
_this.otherCount = result.data.otherCount;
_this.avgTotalCount = result.data.avgTotalCount;
_this.avgTeacherCount = result.data.avgTeacherCount;
_this.avgStudentCount = result.data.avgStudentCount;
_this.avgOtherCount = result.data.avgOtherCount;
},
error: function (e) {
console.log(e)
}
})
// })
},
initNumsByTime: function () {
var optionNumsByTime = {
......@@ -574,8 +415,7 @@
label: {
backgroundColor: '#6a7985'
}
},
formatter: "{b}: {c}人次 "
}
},
xAxis: {
type: 'category',
......@@ -596,46 +436,71 @@
},
yAxis: {
type: 'value',
axisLine: {
// show: false,//不显示坐标轴线
lineStyle: {
color: 'lightgray'
}
// axisLine: {
// // show: false,//不显示坐标轴线
// lineStyle: {
// color: 'lightgray'
// }
// },
// axisLabel: {
// show: false, //不显示坐标轴上的文字
// },
},
axisLabel: {
show: false,//不显示坐标轴上的文字
series: [{
name: '学生',
data: [],
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
}, {
name: '教师',
data: [],
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
series: [{
}, {
name: '其他',
data: [],
type: 'line',
smooth: true,
lineStyle: {
color: "#4583f4"
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
areaStyle: {
color: '#4583f4'
}
}]
};
var params = {
clientId: this.app,
year: this.year,
month: this.month
latestDays: this.timeRange
}
var _this = this;
$.ajax({
url: baseUrl + 'authcenter/logstatistics/auth_pick_times?' + _this.getParams(params),
url: baseUrl + '/statistics/auth_user_type?' + _this.getParams(params),
success: function (result) {
var legend = [], data = [];
for (var i = 0; i < result.data.length; i++) {
var element = result.data[i];
legend.push(element.name);
data.push({ value: element.count, name: element.name })
var legend = [],
studentData = [],
teacherData = [],
otherData = [];
for (var i = 0; i < result.dataList.length; i++) {
var element = result.dataList[i];
legend.push(element.date);
studentData.push(element.studentCount)
teacherData.push(element.teacherCount)
otherData.push(element.otherCount)
}
optionNumsByTime.xAxis.data = legend;
optionNumsByTime.series[0].data = data;
var myChartNumsByTime = echarts.init(document.getElementById("nums-by-time"));
optionNumsByTime.series[0].data = studentData;
optionNumsByTime.series[1].data = teacherData;
optionNumsByTime.series[2].data = otherData;
var myChartNumsByTime = echarts.init(document.getElementById(
"nums-by-time"));
myChartNumsByTime.setOption(optionNumsByTime);
},
error: function (e) {
......@@ -644,63 +509,33 @@
})
},
initUserType: function () {
var optionUserType = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c}人次 ({d}%)",
position: [20, 20],
},
legend: {
icon: "circle",
bottom: 0,
data: []
var optionPV = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
series: [
{
name: "访客身份",
type: "pie",
radius: ["30%", "50%"],
center: ["50%", "48%"],
label: {
position: 'outside',
formatter: "{per|{d}%}",
rich: {
per: {
color: "black"
}
}
yAxis: {
type: 'value'
},
data: [],
itemStyle: {
normal: {
color: function (params) {
// build a color map as your need.
return colorList[params.dataIndex]
}
}
}
}
]
series: [{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}]
};
var params = {
clientId: this.app,
year: this.year,
month: this.month
latestDays: this.timeRange,
}
var _this = this;
$.ajax({
url: baseUrl + 'authcenter/logstatistics/auth_user_type?' + _this.getParams(params),
url: baseUrl + '/statistics/auth_pick_times?' + _this.getParams(
params),
success: function (result) {
var legend = [], data = [];
for (var i = 0; i < result.data.length; i++) {
var element = result.data[i];
legend.push(element.name);
data.push({ value: element.count, name: element.name })
}
optionUserType.legend.data = legend;
optionUserType.series[0].data = data;
var myChartUserType = echarts.init(document.getElementById('user-type'));
myChartUserType.setOption(optionUserType);
optionPV.xAxis.data = result.hourList;
optionPV.series[0].data = result.dataList;
var myChartPV = echarts.init(document.getElementById(
'pv'));
myChartPV.setOption(optionPV);
},
error: function (e) {
console.log(e)
......@@ -710,12 +545,13 @@
initUserOrg: function () {
var params = {
clientId: this.app,
year: this.year,
month: this.month
latestDays: this.timeRange,
topN: 10
}
var _this = this;
$.ajax({
url: baseUrl + 'authcenter/logstatistics/auth_hot_org?' + _this.getParams(params),
url: baseUrl + '/statistics/auth_hot_org?' + _this.getParams(
params),
success: function (result) {
_this.userOrgList = result.data
},
......@@ -744,17 +580,23 @@
return res;
},
randomFun: function (arr) {
for(var i=0, len = arr.length; i < len; i++) {
for (var i = 0, len = arr.length; i < len; i++) {
var index = parseInt(Math.random() * (len - 1));
var tempValue = arr[i];
arr[i] = arr[index];
arr[index] = tempValue;
}
return arr;
}
},
formatTime: function (day) {
var today = new Date();
var target = today.getTime() + 1000 * 3600 * 24 * day;
today.setTime(target);
console.log(today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate())
return today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
},
}
})
</script>
</body>
......
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