You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1631 lines
64 KiB

2 years ago
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>长春市教育基础库运行监测</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../../static/css/weadmin.css">
<!-- 让IE8/9支持媒体查询从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.bg-img {
background: url("../../images/bg.jpg") no-repeat;
background-size: 100% 100%;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -10;
}
.header {
font:normal 2rem/4.5rem "microsoft yahei";
color: #fff;
text-align: center;
}
.box {
overflow: hidden;
clear:both;
width: 100%;
margin:0 10px;
height: calc(100% - 4.5rem - 10px) ;
}
.box>div {
/*width: calc( (100% - 40px)/3 );*/
float: left;
height: 100%;
position: relative;
margin-right:10px;
}
.box .left,.box .right {
width: 26%;
}
.box .right {
width: calc(26% - 10px);
}
.box .middle {
width: calc(48% - 30px);
}
.box>div>div {
width: 100%;
height: calc( (100% - 30px)/3);
padding:3px 10px 10px 10px;
margin-bottom: 10px;
background-color:rgba(33,55,129,0.5);
position: relative;
}
.layui-table-cell {
height: 24px!important;
line-height: 24px!important;
}
.layui-table-view .layui-table td, .layui-table-view .layui-table th {
padding: 3px 0!important;
}
.box>div:nth-child(2)>div:nth-child(1) {
height:53%;
width: 100%;
}
.box>div:nth-child(2)>div:nth-child(2) {
height:calc(47% - 20px);
width: 100%;
}
.daySel {
background: #078dff;
}
::-webkit-scrollbar {
width: 0px;
}
.layui-table,.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(2n) {
background-color: transparent!important;
color: #fff!important;
margin: 3px 0px 0px 0px!important;
}
.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin="line"], .layui-table[lay-skin="row"] {
border-color:#547dc2!important;
}
.layui-table {
width: 100%!important;
}
.topL { width: 11px; height: 11px; border-top-width: 2px; border-top-color: #3690ff; border-top-style: solid; border-left-width: 2px; border-left-color: #3690ff; border-left-style: solid; position: absolute; top: 0px; left: 0px; }
.topR { width: 11px; height: 11px; border-top-width: 2px; border-top-color: #3690ff; border-top-style: solid; border-right-width: 2px; border-right-color: #3690ff; border-right-style: solid; position: absolute; top: 0px; right: 0px; }
.bottomL { width: 11px; height: 11px; border-bottom-width: 2px; border-bottom-color: #3690ff; border-bottom-style: solid; border-left-width: 2px; border-left-color: #3690ff; border-left-style: solid; position: absolute; bottom: 0px; left: 0px; }
.bottomR { width: 11px; height: 11px; border-bottom-width: 2px; border-bottom-color: #3690ff; border-bottom-style: solid; border-right-width: 2px; border-right-color: #3690ff; border-right-style: solid; position: absolute; bottom:0px; right: 0px; }
.portal-title { border-bottom: 1px solid #547dc2; font: normal 16px/28px "microsoft yahei"; color: #b1d4ff; margin-top: 12px; position:relative; }
.portal-title span img { margin-right: 4px; }
.portal-title h2{ text-align:center; font: normal 24px/22px "microsoft yahei"; color: #d7e8ff; padding-left:30px;}
.portal-title h2 span{ font: normal 12px/22px "microsoft yahei"; color: #3690ff; padding-left:5px;}
.timeSelect{border:1px solid #3690ff;padding: 1px 5px 1px 5px;color: #fff;font-size: 14px;margin-left: 0;cursor: pointer}
#appCount {
border: 1px solid #547dc2;
margin-top: 10px;
}
.tableList {
clear: both;
overflow: hidden;
}
ol.tableList, ul.ulLI li {
border-bottom: 2px solid #547dc2;
}
ul.ulLI {
padding: 0 10px;
height: calc(100% - 50px);
overflow: hidden;
}
ul.ulLI li {
clear: both;
overflow: hidden;
}
ul.ulLI li div:nth-child(4n) {
color: greenyellow;
}
ol.tableList li,.ulLI li div {
float: left;
height: 32px;
line-height: 32px;
text-align: center;
color: #fff;
width: 25%;
}
#news {
overflow: hidden;
}
#detail {
border: 2px solid #547dc2;
position: absolute;
width:48%;
height:45%;
padding: 5px;
top:45%;
right: 2%;
z-index: 999999;
}
#detail span{
font-size: 16px;
display: block;
width: 100%;
padding: 0 15px;
height: 32px;
line-height: 32px;
color: #fff;
border-bottom: 2px solid #547dc2;
}
#detail span::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 11px;
border-radius: 50%;
background-color: #00ffff;
}
.count {
padding: 8px;
position: absolute;
top: 10%;
left: 0;
color:#fff;
width: 100%;
z-index:9999999999999;
}
.count li {
width: 24.25%;
box-sizing: border-box;
margin-right: 1%;
height: 117px;
padding: 10px;
border: 2px solid #547dc2;
float: left;
background-color: rgba(255,255,255,0.1);
box-shadow: 4px 4px 10px #02050E;
}
.count li:last-child {
margin-right: 0;
}
.count li .title {
height: 30px;
}
.count li p {
height:46px;
line-height:36px;
font-size: 30px;
color: #00ffff;
text-shadow:0 0 6px #fff, -0 -0 6px #fff;
}
.fl {
float: left;
}
.switchBtn {
background-color: #37a2da;
padding: 5px 12px;
color: #fff;
border-radius: 4px;
margin-top: 4px;
position: absolute;
right: 10px;
cursor: pointer;
display: none;
}
</style>
</head>
<body style="width: 100%;height: 100%;">
<div class="bg-img"></div>
<div class="header">长春市教育基础库运行监测</div>
<div class="box">
<div class="left">
<div>
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="portal-title"> <span><img src="../../images/icon01.png"></span>学校类型分布</div>
<div id="radar" style="width: 100%;height: 88%;"></div>
</div>
<div>
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="portal-title"> <span><img src="../../images/icon01.png"></span>最活跃学校TOP10</div>
<div>
<table class="layui-table" lay-filter="demo" id="idTest"></table>
</div>
</div>
<div>
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="portal-title">
<span><img src="../../images/icon01.png">学生数统计</span>
</div>
<div style="margin-top: 10px;text-align: center;">
<div style="display: inline-block;text-align: center;" class="stu">
<!--<label class="timeSelect daySel" id="ty" >通用</label>&nbsp;&nbsp;&nbsp;&nbsp;-->
<label class="timeSelect daySel" id="ye" index="0" >幼儿</label>&nbsp;&nbsp;&nbsp;&nbsp;
<label class="timeSelect" id="xx" index="1" >小学</label>&nbsp;&nbsp;&nbsp;&nbsp;
<label class="timeSelect" id="cz" index="2" >初中</label>&nbsp;&nbsp;&nbsp;&nbsp;
<label class="timeSelect" id="gz" index="3" >高中</label>
</div>
</div>
<div id="stu" style="width: 100%;height:86%"></div>
</div>
</div>
<div class="middle">
<div style="position: relative">
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="portal-title"> <span><img src="../../images/icon01.png"></span> 系统状态监测</div>
<div style="width: 80%;height: 100%;" id="mapDiv">
<iframe src="./test.html" width="80%" frameborder="0" height="100%">
</iframe>
</div>
<ul class="count" >
<li>
<div class="title">
<span class="fl">学校总数</span><span class="layui-badge layui-bg-orange fr"></span>
</div>
<p id="school"></p>
<div>
<span class="fl">本学期新增</span>
<div class="fr">
<span id="curr_school"></span>&nbsp;
</div>
</div>
</li>
<li>
<div class="title">
<span class="fl">单位总数</span><span class="layui-badge layui-bg-blue fr"></span>
</div>
<p id="dw"></p>
<div>
<span class="fl">本学期新增</span>
<div class="fr">
<span id="curr_dw"></span>&nbsp;
</div>
</div>
</li>
<li>
<div class="title">
<span class="fl">教工总数</span><span class="layui-badge layui-bg-green fr"></span>
</div>
<p id="tea"></p>
<div>
<span class="fl">本学期新增</span>
<div class="fr">
<span id="curr_tea"></span>&nbsp;
</div>
</div>
</li>
<li>
<div class="title">
<span class="fl">学生总数</span><span class="layui-badge layui-bg-yellow fr"></span>
</div>
<p id="stuCount"></p>
<div>
<span class="fl">本学期新增</span>
<div class="fr">
<span id="curr_stu"></span>&nbsp;
</div>
</div>
</li>
</ul>
<div id="detail">
<span>访问日志监测</span>
<div id="map_1" style="width:50%;float: left;height:90%;"></div>
<div id="map_2" style="width: 50%;float: left;height: 80%;"></div>
</div>
</div>
<div>
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="portal-title" style="line-height: 28px;height: 28px;">
<span><img src="../../images/icon01.png"></span>教职工人数与学生人数分布
</div>
<div id="teastu" style="width: 100%;height:98%;"></div>
</div>
</div>
<div class="right">
<div>
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="portal-title"> <span><img src="../../images/icon01.png"></span>市直属学校登录排名 </div>
<div id="visit" style="width: 100%;height:88%;"></div>
<div id="visitTable" style="width: 100%;height:88%;display:none">
<table class="layui-table" lay-filter="demo1" id="idTest1"></table>
</div>
</div>
<div>
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="portal-title"> <span><img src="../../images/icon01.png"></span>县区登录排名Top5 </div>
<div id="districtTeaStu" style="width: 100%;height:96%;"></div>
<div id="districtTeaStuTable" style="width: 100%;height:88%;display:none">
<table class="layui-table" lay-filter="demo2" id="idTest2"></table>
</div>
</div>
<div>
<i class="topL"></i>
<i class="topR"></i>
<i class="bottomL"></i>
<i class="bottomR"></i>
<div class="portal-title"> <span><img src="../../images/icon01.png"></span>第三方平台访问数统计</div>
<div id="appCount" style="width: 100%;height:78%;overflow: hidden">
<ol class="tableList">
<li>平台名称</li>
<li>访问人数/人</li>
<li>访问次数/次</li>
<li>增长率</li>
</ol>
<div id="news">
<ul class="ulLI">
<li>
<div>综合评价系统</div>
<div>98741</div>
<div>126449</div>
<div>32%</div>
</li>
<li>
<div>吃掉物理</div>
<div>198741</div>
<div>326449</div>
<div>6%</div>
</li>
<li>
<div>虚拟实验室</div>
<div>18741</div>
<div>96449</div>
<div>20%</div>
</li>
<li>
<div>理想生涯</div>
<div>741</div>
<div>6449</div>
<div>46%</div>
</li>
<li>
<div>综合评价系统</div>
<div>98741</div>
<div>126449</div>
<div>32%</div>
</li>
<li>
<div>吃掉物理</div>
<div>198741</div>
<div>326449</div>
<div>6%</div>
</li>
<li>
<div>虚拟实验室</div>
<div>18741</div>
<div>96449</div>
<div>20%</div>
</li>
<li>
<div>理想生涯</div>
<div>741</div>
<div>6449</div>
<div>46%</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="../../lib/jquery-3.6.0.min.js"></script>
<script src="./echarts.min.js"></script>
<script src="../../lib/layui/layui.js"></script>
<script>
layui.extend({
admin: '{/}../../static/js/admin'
});
layui.use(['jquery', 'admin', 'table'], function () {
var $ = layui.jquery,
admin = layui.admin,
table = layui.table;
function numFormat(num) {
num = num + '';//数字转字符串
var str = "";//字符串累加
for (var i = num.length - 1, j = 1; i >= 0; i--, j++) {
if (j % 3 == 0 && i != 0) {//每隔三位加逗号,过滤正好在第一个数字的情况
str += num[i] + ",";//加千分位逗号
continue;
}
str += num[i];//倒着累加数字
}
return str.split('').reverse().join("");//字符串=>数组=>反转=>字符串
}
var result=getGlobalByCodes("install_area");
var info=getcookie();// 1超级 2市 3区县 4单位
var areaId="";
// 只有超管 和市管理员可见
if(info.identity_id==1){
areaId=result[0].global_value;
}else if(info.identity_id==2){
areaId=info.city_id;
}
// left --1 雷达图
var radar = echarts.init(document.getElementById('radar'),'light');
// 获取雷达图数据
function getSchoolCountAggsAreaSchoolTypeByCityId(){
var lis=[];
$.ajax({
type: 'GET',
dataType: 'json',
async:false,
url: '/baseService/bigData/getSchoolCountAggsAreaSchoolTypeByCityId?city_id='+areaId,
success: function (data) {
data.sort(function (a, b) {
return a.sort_id - b.sort_id;
})
lis=data;
}
})
return lis;
}
var radarLis=getSchoolCountAggsAreaSchoolTypeByCityId();
var radaryAxisLis = [];//y轴区域
var radardataList=[];
for (var i = 0; i < radarLis.length; i++) {
radaryAxisLis.push(radarLis[i].area_name);
radardataList.push( {
value : [radarLis[i].ye, radarLis[i].xx,radarLis[i].cz, radarLis[i].gz, radarLis[i].jnygz, radarLis[i].senygz, radarLis[i].wqzx, radarLis[i].xycgyt, radarLis[i].xycyt, radarLis[i].xyyt],
name : radarLis[i].area_name
})
}
radar.setOption({
backgroundColor: '#132d64',
tooltip: {
position:['50%','50%']
},
legend: {
textStyle:{
color:'#fff'
},
type: 'scroll',
left: 10,
top: 10,
bottom:0,
show:true,
pageIconInactiveColor:'#547dc2',
pageIconColor:'#00ffff',
orient: 'vertical', //垂直显示
// y: 'top', //延Y轴居中
// x: 'left', //居右显示
// padding:1, //调节legend的位置
data: radaryAxisLis,
// itemGap:15,
},
radar: {
name: {
textStyle: {
color: '#fff',
backgroundColor: 'transparent',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{ name: '幼儿'},
{ name: '小学'},
{ name: '初中'},
{ name: '高中'},
{ name: '完全中学'},
{ name: '九年一贯制'},
{ name: '十二年一贯制'},
{ name: '小幼一体'},
{ name: '小幼初一体'},
{ name: '小幼初高一体'}
],
shape: 'circle',
name: {
textStyle: {
color: 'rgb(238, 197, 102)'
}
},
splitLine: {
lineStyle: {
color: [
'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
].reverse()
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(238, 197, 102, 0.5)'
}
}
},
series: [{
type: 'radar',
data : radardataList
}]
},'light')
// middle--1 获取市 下学校 单位 学生 教工总数
getSchoolOrgTeaStuCountByCityId();
function getSchoolOrgTeaStuCountByCityId(){
$.ajax({
type:'GET',
dataType:'json',
url:'/baseService/bigData/getSchoolOrgTeaStuCountByCityId?city_id='+areaId,
success:function (data) {
if(data.success){
$("#school").text(numFormat(data.school_count));
$("#dw").text(numFormat(data.org_count));
$("#tea").text(numFormat(data.teacher_count));
$("#stuCount").text(numFormat(data.student_count));
$("#curr_school").text(numFormat(data.curr_term_school_count));
$("#curr_dw").text(numFormat(data.curr_term_org_count));
$("#curr_tea").text(numFormat(data.curr_term_teacher_count));
$("#curr_stu").text(numFormat(data.curr_term_student_count));
}
}
})
}
//left --3 学段--入学年份--学生数
var stu = echarts.init(document.getElementById('stu'),'light');
// 获取 学段--入学年份--学生数数据
function getStuCountAggsEntryYearByCityIdStageId(id){
var lis=[];
$.ajax({
type: "GET",
dataType: 'json',
async:false,
url: '/baseService/bigData/getStuCountAggsEntryYearByCityIdStageId?city_id='+areaId+'&stage_id='+id,
success: function (data) {
// refreshData(id,entryList,countList)
if(data.success){
data.list.sort(function (a,b) {
return b.entry_year -a.entry_year
})
lis =data.list;
}
}
})
return lis;
}
var lis=getStuCountAggsEntryYearByCityIdStageId(8);
var stuentryList=[];
var stucountList=[];
for (var i = 0; i < lis.length;i++) {
stuentryList.push(lis[i].entry_year);
stucountList.push(lis[i].count);
}
stu.setOption(
{
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
textStyle: {
color: '#547dc2'
}
},
axisLine:{
lineStyle:{
color:'#547dc2',
}
},
data: stuentryList,
inverse:true
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#547dc2'
}
},
axisLine:{
lineStyle:{
color:'#547dc2',
}
},
},
series: [
{
name:'学生总数',
type:'line',
data:stucountList,
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
],
lineStyle:{
color:'#547dc2',
}
}
}
]},true)
// 处理折线数据
var lineIndex=-1;
var stage_id="";
// 10s刷新一次折线图
function dealLineData() {
lineIndex = lineIndex + 1 !== 4 ? lineIndex + 1 : 0;
$(".stu label[index='" + lineIndex + "']").addClass('daySel').siblings().removeClass('daySel');
// 0 幼儿8 1小学4 2初中5 3高中6
if (lineIndex == 0) {
stage_id = 8;
} else if (lineIndex == 1) {
stage_id = 4;
} else if (lineIndex == 2) {
stage_id = 5;
} else if (lineIndex == 3) {
stage_id = 6;
}
var lis = getStuCountAggsEntryYearByCityIdStageId(stage_id);
var stuentryList = [];
var stucountList = [];
for (var i = 0; i < lis.length; i++) {
stuentryList.push(lis[i].entry_year);
stucountList.push(lis[i].count);
}
if(!stu){
return;
}
var option = stu.getOption();
option.series[0].data=stucountList;
option.xAxis[0].data=stuentryList;
stu.setOption(option);
}
setInterval(function () {
dealLineData();
},10000)
// 10分钟更新一次
setInterval(function () {
getSchoolOrgTeaStuCountByCityId();//获取教师 单位 学校 学生总数
refreshDataList();//刷新雷达图
},600000)
//刷新echarts
function refreshDataList(){
if(!radar){
return;
}
if(!teastu){
return;
}
// 雷达图
var option = radar.getOption();
var radarLis=getSchoolCountAggsAreaSchoolTypeByCityId();
var yAxisLis = [];//y轴区域
var dataList=[];
for (var i = 0; i < radarLis.length; i++) {
yAxisLis.push(radarLis[i].area_name);
dataList.push( {
value : [radarLis[i].ye, radarLis[i].xx,radarLis[i].cz, radarLis[i].gz, radarLis[i].jnygz, radarLis[i].senygz, radarLis[i].wqzx, radarLis[i].xycgyt, radarLis[i].xycyt, radarLis[i].xyyt],
name : radarLis[i].area_name
})
}
option.series[0].data=dataList;
option.legend.data=yAxisLis;
radar.setOption(option);
// middle--2 按学校类型聚合教师学生数
var option2 = teastu.getOption();
var schooltypeList=getTeaStuCountAggsSchoolTypeByCityId();
var stuList=[],teaList=[];
for (var i=0;i<schooltypeList.length;i++){
stuList.push({
value:schooltypeList[i]['stu_count'],
name:schooltypeList[i].type
})
teaList.push({
value:schooltypeList[i]['tea_count'],
name:schooltypeList[i].type
})
}
option2.series[0].data=stuList;
option2.series[1].data=teaList;
teastu.setOption(option2);
}
//left --2 表格最活跃学校
var showIndex=0;
var table1=[];
var table2=[];
var dataList=[];
getTableData();
function getTableData(){
$.ajax({
type:'GET',
async:false,
url:'/baseService/bigData/getActiveListAggsBureauByCityId?city_id='+areaId+'&limit=10',
success:function (data) {
for (var i=0;i<data.list.length;i++){
data.list[i].id=i+1;
}
for (var i=0;i<5;i++) {
table1.push(data.list[i]);
}
for (var i=5;i<10;i++) {
table2.push(data.list[i]);
}
}
})
table.render({
elem: '#idTest'
, cols: [[
{field: 'id', title: '序号', align: 'center',width:'15%'}
,{field: 'bureau_name', title: '学校名称', align: 'center'}
, {field: 'area_name', title: '所属区域', align: 'center'}
,{field: 'count', title: '浏览量', align: 'center',width:'20%'}
]]
,data:table1,
limit:'5'
});
}
function dealTableData(){
getTableData();
showIndex=showIndex+1>1 ? 0 :1;
if(showIndex==0){
dataList=table1;
}else{
dataList=table2;
}
table.render({
elem: '#idTest'
, cols: [[
{field: 'id', title: '序号', align: 'center',width:'10%'}
,{field: 'bureau_name', title: '学校名称', align: 'center'}
, {field: 'area_name', title: '所属区域', align: 'center'}
,{field: 'count', title: '浏览量', align: 'center',width:'20%'}
]]
,data:dataList,
// page:true,
limit:'5'
});
}
setInterval(function () {
dealTableData();
},10000)
// middle --2 按学校类型 --教师 学生数量对比
var teastu=echarts.init(document.getElementById('teastu'),'light');
var stuList=[];
var teaList=[];
function getTeaStuCountAggsSchoolTypeByCityId(){
var list;
$.ajax({
type: "GET",
dataType: 'json',
async:false,
url: '/baseService/bigData/getTeaStuCountAggsSchoolTypeByCityId?city_id='+areaId,
success: function (data) {
list=data.list;
}
})
return list;
}
var schooltypeList=getTeaStuCountAggsSchoolTypeByCityId();
for (var i=0;i<schooltypeList.length;i++){
stuList.push({
value:schooltypeList[i]['stu_count'],
name:schooltypeList[i].type
})
teaList.push({
value:schooltypeList[i]['tea_count'],
name:schooltypeList[i].type
})
}
teastu.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'right',
textStyle:{
color:'#fff'
},
type:'scroll',
data:['幼儿', '小学','初中','高中','完全中学','九年一贯制','十二年一贯制','小幼一体','小幼初一体','小幼初高一体']
},
series: [
{
name:'学生总数',
type:'pie',
selectedMode: 'single',
radius: [0, '50%'],
label: {
normal: {
position: 'inner',
show: false
}
},
labelLine: {
normal: {
show: false
}
},
data:stuList
},
{
name:'教师总数',
type:'pie',
radius: ['60%', '85%'],
label: {
normal: {
formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}}{c} {per|{d}%} ',
backgroundColor: '#183872',
borderColor: '#aaa',
borderWidth:0.5,
borderRadius: 4,
// shadowBlur:3,
// shadowOffsetX: 2,
// shadowOffsetY: 2,
// shadowColor: '#999',
// padding: [0, 7],
rich: {
a: {
color: '#999',
lineHeight:18,
align: 'center'
},
hr: {
borderColor: '#aaa',
width: '100%',
borderWidth: 0.5,
height: 0
},
b: {
fontSize: 10,
lineHeight:18
},
per: {
color: '#eee',
backgroundColor: '#334455',
padding: [0.5, 1],
borderRadius: 2
}
}
}
},
data:teaList
}
]
},true)
// right --2 各区县教师 学生对比
var districtTeaStu=echarts.init(document.getElementById('districtTeaStu'),'light');
var labelOption = {
normal: {
show: true,
position: 'insideBottom',
distance:'25',
align:'left',
verticalAlign:'middle',
rotate:'90',
fontSize: 10,
color:'#fff',
formatter: '{name|{a}} {c}',
rich: {
name: {
// textBorderColor: '#fff'
}
}
}
};
function getTeaStuCountAggsAreaByCityId(){
var jsonStr;
$.ajax({
type:'GET',
async:false,
url:'/baseService/bigData/getAreaLoginTopByCityId?city_id='+areaId+'&day=30&top=5',
dataType:'json',
success:function (data) {
for (var i=0;i<data.list.length;i++){
data.list[i].id= i+1;
}
table.render({
elem: '#idTest2'
, cols: [[
{field: 'id', title: '序号', align: 'center',width:'15%'}
,{field: 'area_name', title: '县区名称', align: 'center'}
, {field: 'accessCount', title: '登录次数', align: 'center'}
,{field: 'accessPersonCount', title: '登录人数', align: 'center',width:'20%'}
]]
,data:data.list,
limit:'5'
});
var area_name=[];
var teaLis=[];
var xxLis=[];
for (var i=0;i<data.list.length;i++) {
area_name.push(data.list[i].area_name);
xxLis.push(data.list[i]['accessPersonCount']);
teaLis.push(data.list[i]['accessCount']);
}
jsonStr={'area_name':area_name,'xxLis':xxLis,'teaLis':teaLis};
// console.log(jsonStr);
}
})
return jsonStr;
}
var jsonStr=getTeaStuCountAggsAreaByCityId();
districtTeaStu.setOption({
// color: ['#ff9f7f', '#fb7293', '#37a2da', '#96bfff'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
extraCssText:'width:160px;height:100px'
},
legend: {
data: ['登录次数', '登录人数'],
textStyle:{
color:'#fff'
}
},
calculable: true,
xAxis: [
{
type: 'category',
axisTick: {show: false},
axisLabel: {
show: true,
textStyle: {
color: '#547dc2'
},
interval:0,
margin:15,
rotate:40
},
axisLine:{
lineStyle:{
color:'#547dc2',
}
},
data:jsonStr['area_name']
}
],
yAxis: [
{
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#547dc2'
},
interval:0,
margin:15
},
axisLine:{
lineStyle:{
color:'#547dc2',
}
},
}
],
series: [
{
name: '登录次数',
type: 'bar',
barGap: 0,
label: labelOption,
data:jsonStr.teaLis
},
{
name: '登录人数',
type: 'bar',
label: labelOption,
data:jsonStr.xxLis
}
]
},true)
setInterval(function () {
showIndex=showIndex+1>1 ? 0 :1;
if(showIndex==0){
$('#visit').show();
$('#visitTable').hide();
$('#districtTeaStu').show();
$('#districtTeaStuTable').hide();
}else{
$('#visit').hide();
$('#visitTable').show();
$('#districtTeaStu').hide();
$('#districtTeaStuTable').show();
}
},5000)
// right --1 七天访问人数 次数
var visit=echarts.init(document.getElementById('visit'),'light');
function getCityDirectlySchoolLoginTopByCityId(){
var dataLis;
$.ajax({
type:'GET',
dataType:'json',
async:false,
url:'/baseService/bigData/getCityDirectlySchoolLoginTopByCityId?city_id='+areaId+'&day=30&top=5',
success:function (data) {
if(data.success){
for (var i=0;i<data.list.length;i++){
data.list[i].id= i+1;
}
table.render({
elem: '#idTest1'
, cols: [[
{field: 'id', title: '序号', align: 'center',width:'15%'}
,{field: 'org_name', title: '学校名称', align: 'center'}
, {field: 'accessCount', title: '访问次数', align: 'center'}
,{field: 'accessPersonCount', title: '访问人数', align: 'center',width:'20%'}
]]
,data:data.list,
limit:'5'
});
dataLis=data.list;
}
}
})
return dataLis;
}
var personLis=[];
var countLis=[];
var dateList=[];
var accessCountLis=getCityDirectlySchoolLoginTopByCityId();
for (var i=0;i<accessCountLis.length;i++) {
personLis.push(accessCountLis[i]['accessPersonCount']);
countLis.push(accessCountLis[i]['accessCount']);
dateList.push(accessCountLis[i]['org_name']);
}
visit.setOption({
tooltip:{
trigger:'axis',
axisPointer:{
type: 'shadow'
},
extraCssText:'width:160px;height:240px;',
position:['250','50'],
extraCssText:'width:160px;height:90px;'
},
legend: {
data: ['访问次数', '访问人数'],
textStyle:{
color:'#fff'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#547dc2'
}
},
axisLine: {
lineStyle: {
color: '#547dc2',
}
}
},
yAxis:{
type: 'category',
data:dateList,
inverse:true,
axisLabel: {
show: true,
textStyle: {
color: '#547dc2',
},
margin:20
},
axisLine: {
lineStyle: {
color: '#547dc2',
}
}
},
series: [
{
name: '访问次数',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: countLis
},
{
name: '访问人数',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'insideRight'
}
},
data: personLis
}
]
},true)
// 定时更新
setInterval(function () {
var accessCountLis=getFewDaysAgoAccessCountByCityId();
var personLis=[];
var countLis=[];
var dateList=[];
for (var i=0;i<accessCountLis.length;i++) {
personLis.push(accessCountLis[i]['accessPerrsonCount']);
countLis.push(accessCountLis[i]['accessCount']);
dateList.push(accessCountLis[i]['date']);
}
var option2 = visit.getOption();
option2.yAxis.data=dateList;
option2.series[0].data=personLis;
option2.series[1].data=countLis;
visit.setOption(option2);
// 近3个月管理员访问日志
var option3=map_1.getOption();
var logsList=getLogsAggsPersonNameByCityId();
logsList.sort(function (a,b) {
return a.count-b.count;
})
var logs=[];
for (var i=0;i<10;i++) {
logs.push({
value:logsList[i].count, name:logsList[i]['person_name'].substr(0,logsList[i]['person_name'].length-3)
});
}
option3.series[0].data=logs;
map_1.setOption(option3);
},600000)
// middle-1 地图环形数据 map-1 近3个月管理员访问日志
function getLogsAggsPersonNameByCityId() {
var logsList;
$.ajax({
type:'GET',
async:false,
url:'/baseService/bigData/getLogsAggsPersonNameByCityId?city_id='+areaId,
dataType:'json',
success:function (data) {
logsList=data;
}
})
return logsList;
}
var logsList=getLogsAggsPersonNameByCityId();
// logsList.sort(function (a,b) {
// return a.count-b.count;
// })
var logs=[];
for (var i=0;i<10;i++) {
logsList[i]['person_name']=logsList[i]['person_name'].substr(0,logsList[i]['person_name'].length-3);
logs.push({
value:logsList[i].count, name:logsList[i]['person_name']
});
}
var map_1=echarts.init(document.getElementById('map_1'),'light');
// map_1.setOption({
// // title:{
// // text:'近3个月管理员访问日志',
// // textStyle:{
// // color:'#547dc2',
// // fontSize:'10'
// // }
// // },
// tooltip : {
// trigger: 'item',
// formatter: "{a} <br/>{b}管理员 : {c} ({d}%)"
// },
// series : [
// {
// name: '近3个月管理员访问日志',
// type: 'pie',
// radius : '55%',
// center: ['50%', '60%'],
// data:logs,
// label: {
// normal: {
// show : false
// }
// },
// itemStyle: {
// emphasis: {
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
// }
// }
// }
// ]
// },true)
map_1.setOption({
color: ['#85b6b2', '#6d4f8d', '#cd5e7e', '#e38980', '#f29e29', '#f7db88', '#ffdb6d'],
title: {
text: '访问日志',
x: 'center',
top: '30%',
textStyle: {
color: '#fff',
fontSize:12
}
},
series: [{
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 40,
shadowColor: 'rgba(40, 40, 40,0.3)',
}
},
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
formatter: function(param) {
return param.name + '\n' + param.percent.toFixed(0) + '%';
},
textStyle: {
fontSize: '10',
color:'#fff'
}
}
},
labelLine: {
normal: {
show: true
}
},
data: logs
}]
},true)
// middle-1 map-2 折线数据
var AreaLoginJsonStr=getFewDayAreaLoginCountByCityId();
function getFewDayAreaLoginCountByCityId() {
var jsonStr;
$.ajax({
type:'GET',
url:'/baseService/bigData/getFewDayAreaLoginCountByCityId?city_id='+areaId+'&day=7',
async:false,
dataType:'json',
success:function (data) {
if(data.success){
var dateList=[];
var areaList=[];
var countLis=[];
for (var i=0;i<data.list.length;i++){
dateList.push(data.list[i].date);
areaList.push(data.list[i].area);
}
// 朝阳区 二道区经开区农安县榆树市双阳区南关区德惠市高新区绿园区一汽区九台市莲花山宽城区净月开发区
var x1=[], x1=[],x2=[],x3=[],x4=[],x5=[],x6=[],x7=[],x8=[],x9=[],x10=[],x11=[], x12=[],x13=[],x14=[],x15=[];
console.log(areaList);
for (var i=0;i<areaList.length;i++){
x1.push(areaList[i][0].count);
x2.push(areaList[i][1].count);
x3.push(areaList[i][2].count);
x4.push(areaList[i][3].count);
x5.push(areaList[i][4].count);
x6.push(areaList[i][5].count);
x7.push(areaList[i][6].count);
x8.push(areaList[i][7].count);
x9.push(areaList[i][8].count);
x10.push(areaList[i][9].count);
x11.push(areaList[i][10].count);
x12.push(areaList[i][11].count);
x13.push(areaList[i][12].count);
x14.push(areaList[i][13].count);
x15.push(areaList[i][14].count);
}
jsonStr={
'date':dateList,
'x1':x1,
'x2':x2,
'x3':x3,
'x4':x4,
'x5':x5,
'x6':x6,
'x7':x7,
'x8':x8,
'x9':x9,
'x10':x10,
'x11':x11,
'x12':x12,
'x13':x13,
'x14':x14,
'x15':x15
};
// areaList.push({
// name:data.list[i]['area_name'],
// type:'line',
// stack: '总量',
// data:[120, 132, 101, 134, 90, 230, 210]
// })
}
}
})
return jsonStr;
}
var map_2=echarts.init(document.getElementById('map_2'),'light');
map_2.setOption({
tooltip : {
trigger: 'axis',
// formatter: "{a}访问总量",
position: ['50%', '30%']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
top:'10%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
show: true,
textStyle: {
color: '#547dc2'
},
// interval:0,
// margin:10,
// rotate:35
},
axisLine: {
lineStyle: {
color: '#547dc2',
}
},
data: AreaLoginJsonStr.date
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
color: '#547dc2'
}
},
axisLine: {
lineStyle: {
color: '#547dc2',
}
}
},
// 朝阳区 二道区经开区农安县榆树市双阳区南关区德惠市高新区绿园区一汽区九台市莲花山宽城区净月开发区
series: [
{
name:'德惠市',
type:'line',
stack: '总量',
data:AreaLoginJsonStr.x8
},
{
name:'农安县',
type:'line',
stack: '总量',
data:AreaLoginJsonStr.x4
},
{
name:'九台市',
type:'line',
stack: '总量',
data:AreaLoginJsonStr.x12
},
{
name:'宽城区',
type:'line',
stack: '总量',
data:AreaLoginJsonStr.x14
},
{
name:'二道区',
type:'line',
stack: '总量',
data:AreaLoginJsonStr.x2
},
{
name:'朝阳区',
type:'line',
stack: '总量',
data:AreaLoginJsonStr.x1
},
{
name:'绿园区',
type:'line',
stack: '总量',
data:AreaLoginJsonStr.x10
},
{
name:'南关区',
type:'line',
stack: '总量',
data:AreaLoginJsonStr.x7
},
{
name:'双阳区',
type:'line',
stack: '总量',
data:AreaLoginJsonStr.x6
},
{
name:'榆树市',
type:'line',
stack: '总量',
data:AreaLoginJsonStr.x5
}
]
},true)
})
// right --3 第三方平台浏览人数 次数
$(function() {
var $this = $("#news");
var scrollTimer;
$this.hover(function() {
clearInterval(scrollTimer);
}, function() {
scrollTimer = setInterval(function() {
scrollNews($this);
}, 2000);
}).trigger("mouseleave");
function scrollNews(obj) {
var $self = obj.find("ul");
var lineHeight = $self.find("li:first").height();
$self.animate({
"marginTop": -lineHeight + "px"
}, 600, function() {
$self.css({
marginTop: 0
}).find("li:first").appendTo($self);
})
}
})
window.onresize = function () {
console.log(1);
// teastu.resize();
radar.resize();
stu.resize();
districtTeaStu.resize();
visit.resize();
}
</script>
</body>
</html>