Skip to content

S
sh-ds
Commit 642075d9 authored by 喻春霖's avatar 喻春霖
Browse files
Options

fixed

parent 3eba272e
Hide whitespace changes
Inline Side-by-side
Showing with 653 additions and 599 deletions
eden-authcenter-agent/src/main/resources/templates/statistics.html
View file @ 642075d9
...@@ -35,672 +35,726 @@ ...@@ -35,672 +35,726 @@
</head> </head>
<body style="background-color: rgb(244, 245, 245);"> <body style="background-color: rgb(244, 245, 245);">
<!--[if lt IE 7]> <!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a <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> href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]--> <![endif]-->
<!-- Add your site or application content here --> <!-- Add your site or application content here -->
<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.png" style="margin:5px 0; 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; font-weight: 700;">发现服务 · 速享之旅</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="">
</div>
<div class="flex" style="display: flex;">
<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>
</div>
</div>
<div class="statistics-content">
<div style="width: 25%; 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>
</div> </div>
<div class="flex" style="display: flex;"> <div class="statistics-content-item item-height-higher">
<i-select v-model="app" @on-change="refresh" style="width: 120px; margin: 0 5px;"> <p class="statistics-content-item-title">来源环境分析</p>
<i-option v-for="item in appList" :value="item.code" :label="item.name"></i-option> <div id="app-env-browser" style="width: 95%;height: calc(50% - 30px); margin: 5px 5px;"></div>
</i-select> <div id="app-env-system" style="width: 95%;height: calc(50% - 30px); margin: 5px 5px;"></div>
<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>
</div> </div>
</div> </div>
<div class="statistics-content"> <div style="width: 50%; height: 100%;">
<div style="width: 25%; height: 100%;"> <div class="statistics-content-item" style="height: 30%;">
<div class="statistics-content-item item-height"> <p class="statistics-content-item-title">认证数据统计<span class="statistics-content-item-title-remark">累计登录用户总数：
<p class="statistics-content-item-title">应用来源</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>
<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> <span v-text="numsOfPeople"></span> 人</span>
</p> </p>
<div style="display: flex; height: 100%;"> <div style="display: flex; height: 100%;">
<div class="nums-by-idp" style="height: calc(100% - 40px);"> <div class="nums-by-idp" style="height: calc(100% - 40px);">
<div class="nums-total" style="background: url(../static/img/center-bg-1.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-num"><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/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>
</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 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>
</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> <!-- <div id="idp" style="width: 48%; height: calc(100% - 40px); margin: 5px 5px;"></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> </div>
</div> </div>
<div style="width: 25%; height: 100%;"> <div class="statistics-content-item" style="height: 70%;">
<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(100% - 40px); margin: 0;"></div>
<div id="user-type" style="width: 95%;height: calc(100% - 40px); margin: 5px 5px;"></div> </div>
</div> </div>
<div class="statistics-content-item item-height-higher"> <div style="width: 25%; height: 100%;">
<p class="statistics-content-item-title">认证热点单位</p> <div class="statistics-content-item item-height">
<div id="user-org" style="height: calc(100% - 40px); margin-top: 8px;"> <p class="statistics-content-item-title">身份认证</p>
<p style="padding: 5px 20px 0 20px; color: #5f646a; font-size: 12px; line-height: 1.8;" v-for="item in userOrgList"><span <div id="user-type" style="width: 95%;height: calc(100% - 40px); margin: 5px 5px;"></div>
style="color: orange; font-weight: 900; padding-right: 8px;">·</span><span v-text="item.name"></span><span </div>
style="float: right;" v-text="item.count + ' 人次'"></span></p> <div class="statistics-content-item item-height-higher">
</div> <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> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<script type="text/javascript"> <!-- iview使用了includes方法，兼容ie11 -->
var baseUrl = "/"; <script>
if (!Array.prototype.includes) {
Object.defineProperty(Array.prototype, 'includes', {
value: function(valueToFind, fromIndex) {
var colorList = [ if (this == null) {
'#6c5df1', '#a78bf4', '#fdbf3c', '#ec6367', '#2fcaa8', '#79c161' throw new TypeError('"this" is null or not defined');
]
new Vue({
el: '#app',
data: {
year: 'all',
yearList: [],
month: 1,
monthList: [],
time: 'year',
timeType: [
{ code: 'year', name: '按年统计' },
{ code: 'month', name: '按月统计' },
],
app: 'all',
appList: [],
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 () {
this.appList = [{ code: 'all', name: '全部' }]
var date = new Date(); // 1. Let O be ? ToObject(this value).
var year = date.getFullYear(); var o = Object(this);
var month = date.getMonth() + 1;
this.yearList = [{ code: 'all', name: '全部' },] // 2. Let len be ? ToLength(? Get(O, "length")).
for (var i = 2020; i <= year; i++) { var len = o.length >>> 0;
this.yearList.push({ code: i, name: i + "年" })
} // 3. If len is 0, return false.
for (var i = 1; i <= month; i++) { if (len === 0) {
this.monthList.push({ code: i, name: year + '年' + i + "月" }) 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++;
}
var _this = this; // 8. Return false
$.ajax({ return false;
type: 'GET', }
url: baseUrl + 'authcenter/logstatistics/auth_apps', });
success: function (result) { }
_this.appList = _this.appList.concat(result.data) </script>
},
error: function (e) { <script type="text/javascript">
console.log(e) var baseUrl = "/";
}
}) var colorList = [
}, '#6c5df1', '#a78bf4', '#fdbf3c', '#ec6367', '#2fcaa8', '#79c161'
refresh: function () { ]
this.initSource(); new Vue({
this.initAppEnv(); el: '#app',
this.initNums(); data: {
this.initNumsByTime(); year: 'all',
this.initUserType(); yearList: [],
this.initUserOrg(); month: 1,
}, monthList: [],
initSource: function () { time: 'year',
var myChart = echarts.init(document.getElementById('app-source')); timeType: [
var option = { { code: 'year', name: '按年统计' },
tooltip: { { code: 'month', name: '按月统计' },
trigger: "item", ],
formatter: "{a} <br/>{b}: {c}人次 ({d}%)", app: 'all',
position: [20, 20], appList: [],
}, numsIdpList: [],
legend: { userOrgList: [],
icon: "circle", nums: 0,
bottom: 0, numsJcjy: 0,
data: ["数字教材", "阅览室", "其他"] numsQp: 0,
}, numsSy: 0,
series: [ numsOfPeople: 0
{ },
name: "应用来源", mounted: function () {
type: "pie", this.init();
radius: ["40%", "60%"], this.refresh();
center: ["50%", "48%"], var _this = this;
label: { window.onresize = function () {
position: 'outside', var myChart = echarts.init(document.getElementById('app-source'));
formatter: "{per|{d}%}", var myChartBrowser = echarts.init(document.getElementById('app-env-browser'));
rich: { var myChartSystem = echarts.init(document.getElementById('app-env-system'));
per: { // var myChartNums = echarts.init(document.getElementById("idp"));
color: "black" 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 () {
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;
$.ajax({
type: 'GET',
url: baseUrl + 'authcenter/logstatistics/auth_apps',
success: function (result) {
_this.appList = _this.appList.concat(result.data)
},
error: function (e) {
console.log(e)
}
})
},
refresh: function () {
this.initSource();
this.initAppEnv();
this.initNums();
this.initNumsByTime();
this.initUserType();
this.initUserOrg();
},
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"
} }
}, }
data: [], },
itemStyle: { data: [],
normal: { itemStyle: {
color: function (params) { normal: {
// build a color map as your need. color: function (params) {
return colorList[params.dataIndex] // build a color map as your need.
} return colorList[params.dataIndex]
} }
} }
} }
] }
}; ]
};
let params = { var params = {
clientId: this.app, clientId: this.app,
year: this.year, year: this.year,
month: this.month month: this.month
} }
var _this = this; var _this = this;
$.ajax({ $.ajax({
url: baseUrl + 'authcenter/logstatistics/app?' + _this.getParams(params), url: baseUrl + 'authcenter/logstatistics/app?' + _this.getParams(params),
success: function (result) { success: function (result) {
// _this.appList = _this.appList.concat(result.data.data) // _this.appList = _this.appList.concat(result.data.data)
var legend = []; var legend = [];
var data = []; var data = [];
for (var i = 0; i < result.data.length; i++) { for (var i = 0; i < result.data.length; i++) {
var element = result.data[i]; var element = result.data[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 })
}
option.legend.data = legend;
option.series[0].data = data;
myChart.setOption(option);
},
error: function (e) {
console.log(e)
} }
}) option.legend.data = legend;
}, option.series[0].data = data;
initAppEnv: function () { myChart.setOption(option);
let params = { },
clientId: this.app, error: function (e) {
year: this.year, console.log(e)
month: this.month
} }
var _this = this; })
$.ajax({ },
url: baseUrl + 'authcenter/logstatistics/environment?' + _this.getParams(params), initAppEnv: function () {
success: function (result) { var params = {
var legendSystem = [], dataSystem = [], legendBroswer = [], dataBrowser = []; clientId: this.app,
year: this.year,
month: this.month
}
var _this = this;
$.ajax({
url: baseUrl + 'authcenter/logstatistics/environment?' + _this.getParams(params),
success: function (result) {
var legendSystem = [], dataSystem = [], legendBroswer = [], dataBrowser = [];
if (result.data.os.length) { if (result.data.os.length) {
result.data.os.sort((a, b) => { return b.count - a.count }) result.data.os.sort(function(a, b) { return b.count - a.count })
} }
var others = { name: '其他', value: 0 }; var others = { name: '其他', value: 0 };
var t = 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 === 'unknown') element.name = '未知' if (element.name === 'unknown') element.name = '未知'
if (element.name === 'others' || t >= 4) { if (element.name === 'others' || t >= 4) {
others.value += element.count; others.value += element.count;
continue; continue;
}
t++;
legendSystem.push(element.name);
dataSystem.push({ value: element.count, name: element.name })
}
if (others.value) {
legendSystem.push('其他');
dataSystem.push(others)
} }
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) { if (result.data.browser.length) {
result.data.browser.sort((a, b) => { return b.count - a.count }) result.data.browser.sort(function (a, b) { return b.count - a.count })
} }
others = { name: '其他', value: 0 }; others = { name: '其他', value: 0 };
t = 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 === 'unknown') element.name = '未知' if (element.name === 'unknown') element.name = '未知'
if (element.name === 'others' || t >= 4) { if (element.name === 'others' || t >= 4) {
others.value += element.count; others.value += element.count;
continue; continue;
}
t++;
legendBroswer.push(element.name);
dataBrowser.push({ value: element.count, name: element.name })
}
if (others.value) {
legendBroswer.push('其他');
dataBrowser.push(others)
} }
t++;
legendBroswer.push(element.name);
dataBrowser.push({ value: element.count, name: element.name })
}
if (others.value) {
legendBroswer.push('其他');
dataBrowser.push(others)
}
var myChartBrowser = echarts.init(document.getElementById('app-env-browser')); var myChartBrowser = echarts.init(document.getElementById('app-env-browser'));
var optionBrowser = { var optionBrowser = {
tooltip: { tooltip: {
trigger: "item", trigger: "item",
formatter: "{a} <br/>{b}: {c}人次 ({d}%)", formatter: "{a} <br/>{b}: {c}人次 ({d}%)",
position: [20, 20], position: [20, 20],
}, },
legend: { legend: {
icon: "circle", icon: "circle",
orient: 'vertical', orient: 'vertical',
right: 'right', right: 'right',
top: 'middle', top: 'middle',
data: legendBroswer, data: legendBroswer,
formatter: function (name) { formatter: function (name) {
var target; var target;
for (var i = 0, l = dataBrowser.length; i < l; i++) { for (var i = 0, l = dataBrowser.length; i < l; i++) {
if (dataBrowser[i].name == name) { if (dataBrowser[i].name == name) {
target = dataBrowser[i].value; target = dataBrowser[i].value;
}
} }
return name + ' ' + target;
} }
}, return name + ' ' + target;
series: [ }
{ },
name: "浏览器类型", series: [
type: "pie", {
radius: ["30%", "70%"], name: "浏览器类型",
center: ['30%', '50%'], type: "pie",
labelLine: { radius: ["30%", "70%"],
show: false center: ['30%', '50%'],
}, labelLine: {
label: { show: false
show: false },
}, label: {
data: dataBrowser, show: false
itemStyle: { },
normal: { data: dataBrowser,
color: function (params) { itemStyle: {
// build a color map as your need. normal: {
return colorList[params.dataIndex] 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'));
var optionSystem = { var myChartSystem = echarts.init(document.getElementById('app-env-system'));
tooltip: { var optionSystem = {
trigger: "item", tooltip: {
formatter: "{a} <br/>{b}: {c}人次 ({d}%)", trigger: "item",
position: [20, 20], formatter: "{a} <br/>{b}: {c}人次 ({d}%)",
}, position: [20, 20],
legend: { },
icon: "circle", legend: {
orient: 'vertical', icon: "circle",
right: 'right', orient: 'vertical',
top: 'middle', right: 'right',
data: legendSystem, top: 'middle',
formatter: function (name) { data: legendSystem,
var target; formatter: function (name) {
for (var i = 0, l = dataSystem.length; i < l; i++) { var target;
if (dataSystem[i].name == name) { for (var i = 0, l = dataSystem.length; i < l; i++) {
target = dataSystem[i].value; if (dataSystem[i].name == name) {
} target = dataSystem[i].value;
} }
return name + ' ' + target;
} }
}, return name + ' ' + target;
series: [ }
{ },
name: "操作系统类型", series: [
type: "pie", {
radius: ["30%", "70%"], name: "操作系统类型",
center: ['30%', '50%'], type: "pie",
labelLine: { radius: ["30%", "70%"],
show: false center: ['30%', '50%'],
}, labelLine: {
label: { show: false
show: false },
}, label: {
data: dataSystem, show: false
itemStyle: { },
normal: { data: dataSystem,
color: function (params) { itemStyle: {
// build a color map as your need. normal: {
return colorList[params.dataIndex] color: function (params) {
} // build a color map as your need.
return colorList[params.dataIndex]
} }
} }
} }
] }
}; ]
myChartSystem.setOption(optionSystem); };
}, myChartSystem.setOption(optionSystem);
error: function (e) { },
console.log(e) error: function (e) {
} console.log(e)
}) }
}, })
initNums: function () { },
var _this = this; initNums: function () {
// $.getJSON('./static/js/SHdata.json', function (SHjson) { var _this = this;
// var myChartNums = echarts.init(document.getElementById("idp")); // $.getJSON('./static/js/SHdata.json', function (SHjson) {
// // 第二个参数为导入地图文件 // 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 = { var 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.numsQp = result.data.qp_auth; _this.numsQp = result.data.qp_auth;
_this.numsSy = result.data.operator_auth; _this.numsSy = result.data.operator_auth;
_this.numsOfPeople = result.data.num_of_people; _this.numsOfPeople = result.data.num_of_people;
// _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.filter(element => { return element.value > 0 }); // _this.numsIdpList = data.filter(function (element) { return element.value > 0 });
// optionNums.series[0].data = data // optionNums.series[0].data = data
// myChartNums.setOption(optionNums); // 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: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}, },
error: function (e) { formatter: "{b}: {c}人次 "
console.log(e) },
} xAxis: {
}) type: 'category',
// }) boundaryGap: false,
}, axisLine: {
initNumsByTime: function () { // show: false,//不显示坐标轴线
var optionNumsByTime = { lineStyle: {
grid: { color: 'lightgray'
top: '20px', }
left: '40px',
right: '40px',
bottom: '20px',
containLabel: true
}, },
tooltip: { axisLabel: {
trigger: 'axis', color: "black" //Y轴刻度字颜色
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
formatter: "{b}: {c}人次 "
}, },
xAxis: { splitLine: {
type: 'category', show: true
boundaryGap: false,
axisLine: {
// show: false,//不显示坐标轴线
lineStyle: {
color: 'lightgray'
}
},
axisLabel: {
color: "black" //Y轴刻度字颜色
},
splitLine: {
show: true
},
data: []
}, },
yAxis: { data: []
type: 'value', },
axisLine: { yAxis: {
// show: false,//不显示坐标轴线 type: 'value',
lineStyle: { axisLine: {
color: 'lightgray' // show: false,//不显示坐标轴线
}
},
axisLabel: {
show: false,//不显示坐标轴上的文字
},
},
series: [{
data: [],
type: 'line',
smooth: true,
lineStyle: { lineStyle: {
color: "#4583f4" color: 'lightgray'
},
areaStyle: {
color: '#4583f4'
} }
}]
};
let params = {
clientId: this.app,
year: this.year,
month: this.month
}
var _this = this;
$.ajax({
url: baseUrl + 'authcenter/logstatistics/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 })
}
optionNumsByTime.xAxis.data = legend;
optionNumsByTime.series[0].data = data;
var myChartNumsByTime = echarts.init(document.getElementById("nums-by-time"));
myChartNumsByTime.setOption(optionNumsByTime);
}, },
error: function (e) { axisLabel: {
console.log(e) show: false,//不显示坐标轴上的文字
}
})
},
initUserType: function () {
var optionUserType = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c}人次 ({d}%)",
position: [20, 20],
}, },
legend: { },
icon: "circle", series: [{
bottom: 0, data: [],
data: [] type: 'line',
smooth: true,
lineStyle: {
color: "#4583f4"
}, },
series: [ areaStyle: {
{ color: '#4583f4'
name: "访客身份", }
type: "pie", }]
radius: ["30%", "50%"], };
center: ["50%", "48%"], var params = {
label: { clientId: this.app,
position: 'outside', year: this.year,
formatter: "{per|{d}%}", month: this.month
rich: { }
per: { var _this = this;
color: "black" $.ajax({
} url: baseUrl + 'authcenter/logstatistics/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 })
}
optionNumsByTime.xAxis.data = legend;
optionNumsByTime.series[0].data = data;
var myChartNumsByTime = echarts.init(document.getElementById("nums-by-time"));
myChartNumsByTime.setOption(optionNumsByTime);
},
error: function (e) {
console.log(e)
}
})
},
initUserType: function () {
var optionUserType = {
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c}人次 ({d}%)",
position: [20, 20],
},
legend: {
icon: "circle",
bottom: 0,
data: []
},
series: [
{
name: "访客身份",
type: "pie",
radius: ["30%", "50%"],
center: ["50%", "48%"],
label: {
position: 'outside',
formatter: "{per|{d}%}",
rich: {
per: {
color: "black"
} }
}, }
data: [], },
itemStyle: { data: [],
normal: { itemStyle: {
color: function (params) { normal: {
// build a color map as your need. color: function (params) {
return colorList[params.dataIndex] // build a color map as your need.
} return colorList[params.dataIndex]
} }
} }
} }
]
};
let params = {
clientId: this.app,
year: this.year,
month: this.month
}
var _this = this;
$.ajax({
url: baseUrl + 'authcenter/logstatistics/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 })
}
optionUserType.legend.data = legend;
optionUserType.series[0].data = data;
var myChartUserType = echarts.init(document.getElementById('user-type'));
myChartUserType.setOption(optionUserType);
},
error: function (e) {
console.log(e)
} }
}) ]
}, };
initUserOrg: function () { var params = {
let params = { clientId: this.app,
clientId: this.app, year: this.year,
year: this.year, month: this.month
month: this.month }
} var _this = this;
var _this = this; $.ajax({
$.ajax({ url: baseUrl + 'authcenter/logstatistics/auth_user_type?' + _this.getParams(params),
url: baseUrl + 'authcenter/logstatistics/auth_hot_org?' + _this.getParams(params), success: function (result) {
success: function (result) { var legend = [], data = [];
_this.userOrgList = result.data for (var i = 0; i < result.data.length; i++) {
}, var element = result.data[i];
error: function (e) { legend.push(element.name);
console.log(e) data.push({ value: element.count, name: element.name })
} }
}) optionUserType.legend.data = legend;
}, optionUserType.series[0].data = data;
getParams: function (params) { var myChartUserType = echarts.init(document.getElementById('user-type'));
if (!params) return ''; myChartUserType.setOption(optionUserType);
let res = ''; },
let keys = Object.keys(params); error: function (e) {
if (this.time === 'month') { console.log(e)
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++) { })
if (this.time !== 'month' && keys[i] === 'month') continue; },
if (params[keys[i]] !== 'all') { initUserOrg: function () {
if (res !== '') res += '&' var params = {
res = res + keys[i] + '=' + params[keys[i]]; clientId: this.app,
} year: this.year,
month: this.month
}
var _this = this;
$.ajax({
url: baseUrl + 'authcenter/logstatistics/auth_hot_org?' + _this.getParams(params),
success: function (result) {
_this.userOrgList = result.data
},
error: function (e) {
console.log(e)
} }
return res; })
}, },
randomFun: function (arr) { getParams: function (params) {
for(let i=0, len = arr.length; i < len; i++) { if (!params) return '';
let index = parseInt(Math.random() * (len - 1)); var res = '';
let tempValue = arr[i]; var keys = Object.keys(params);
arr[i] = arr[index]; if (this.time === 'month') {
arr[index] = tempValue; var date = new Date();
var year = date.getFullYear();
params.year = year;
params.month = year + '-' + (this.month < 10 ? ('0' + this.month) : this.month);
}
for (var i = 0; i < keys.length; i++) {
if (this.time !== 'month' && keys[i] === 'month') continue;
if (params[keys[i]] !== 'all') {
if (res !== '') res += '&'
res = res + keys[i] + '=' + params[keys[i]];
} }
return arr;
} }
return res;
}, },
}) randomFun: function (arr) {
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;
}
},
})
</script> </script>
</body> </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