|
|
<!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/font.css">
|
|
|
<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: 60%;
|
|
|
width: 100%;
|
|
|
}
|
|
|
.box>div:nth-child(2)>div:nth-child(2) {
|
|
|
height:calc(40% - 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;
|
|
|
}
|
|
|
.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:43%;
|
|
|
height:48%;
|
|
|
bottom:2%;
|
|
|
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: 15px;
|
|
|
border-radius: 50%;
|
|
|
background-color: #00ffff;
|
|
|
}
|
|
|
.count {
|
|
|
padding: 8px;
|
|
|
position: absolute;
|
|
|
top: 10%;
|
|
|
left: 0;
|
|
|
color:#fff;
|
|
|
width: 100%;
|
|
|
}
|
|
|
.count li {
|
|
|
width: 24.25%;
|
|
|
box-sizing: border-box;
|
|
|
margin-right: 1%;
|
|
|
height: 117px;
|
|
|
padding: 10px;
|
|
|
border: 2px solid #547dc2;
|
|
|
float: left;
|
|
|
}
|
|
|
.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;
|
|
|
}
|
|
|
.header::before {
|
|
|
content: '';
|
|
|
display: inline-block;
|
|
|
width: 400px;
|
|
|
height:4.5rem;
|
|
|
line-height: 4.5rem;
|
|
|
margin-right: 35px;
|
|
|
vertical-align: middle;
|
|
|
background: url("../../images/001.png") no-repeat center center;
|
|
|
|
|
|
}
|
|
|
.header::after {
|
|
|
content: '';
|
|
|
display: inline-block;
|
|
|
width: 400px;
|
|
|
height:4.5rem;
|
|
|
line-height: 4.5rem;
|
|
|
margin-left: 35px;
|
|
|
vertical-align: middle;
|
|
|
background: url("../../images/002.png") no-repeat center center;
|
|
|
|
|
|
}
|
|
|
</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> -->
|
|
|
<label class="timeSelect daySel" id="ye" index="0" >幼儿</label>
|
|
|
<label class="timeSelect" id="xx" index="1" >小学</label>
|
|
|
<label class="timeSelect" id="cz" index="2" >初中</label>
|
|
|
<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>
|
|
|
<ul class="count">
|
|
|
<li>
|
|
|
<div class="title">
|
|
|
<span class="fl">学校总数</span><span class="layui-badge layui-bg-orange fr">所</span>
|
|
|
</div>
|
|
|
<p id="school">306548</p>
|
|
|
<div>
|
|
|
<span class="fl">本学期新增</span>
|
|
|
<div class="fr">
|
|
|
<span id="curr_school">1714</span> 所
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="title">
|
|
|
<span class="fl">单位总数</span><span class="layui-badge layui-bg-blue fr">所</span>
|
|
|
</div>
|
|
|
<p id="dw">545213</p>
|
|
|
<div>
|
|
|
<span class="fl">本学期新增</span>
|
|
|
<div class="fr">
|
|
|
<span id="curr_dw">5413</span> 所
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="title">
|
|
|
<span class="fl">教工总数</span><span class="layui-badge layui-bg-green fr">人</span>
|
|
|
</div>
|
|
|
<p id="tea">28463</p>
|
|
|
<div>
|
|
|
<span class="fl">本学期新增</span>
|
|
|
<div class="fr">
|
|
|
<span id="curr_tea">654</span> 人
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="title">
|
|
|
<span class="fl">学生总数</span><span class="layui-badge layui-bg-yellow fr">人</span>
|
|
|
</div>
|
|
|
<p id="stuCount">2135668</p>
|
|
|
<div>
|
|
|
<span class="fl">本学期新增</span>
|
|
|
<div class="fr">
|
|
|
<span id="curr_stu">752</span> 人
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<div id="detail">
|
|
|
<span>详细数据分析</span>
|
|
|
<div id="map_1" style="width:42%;float: left;height:70%;margin-right: 2%;"></div>
|
|
|
<div id="map_2" style="width: 56%;float: left;height: 80%;"></div>
|
|
|
</div>
|
|
|
<div style="float: left;width: 80%;height: 100%;">
|
|
|
<iframe src="./test.html" width="80%" height="100%" frameborder="0">
|
|
|
</iframe>
|
|
|
</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 style="position: absolute;left: 0;"><img src="../../images/icon01.png"></span>
|
|
|
</div>
|
|
|
<div id="teastu" style="width: 100%;height: 90%;"></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>
|
|
|
<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="districtTeaStu" style="width: 100%;height:96%;"></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-1.12.4.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', 'layer','element','table','laytpl','form'], function() {
|
|
|
var $ = layui.jquery,
|
|
|
admin = layui.admin,
|
|
|
layer = layui.layer,
|
|
|
laytpl = layui.laytpl,
|
|
|
table = layui.table;
|
|
|
var result=getGlobalByCodes("install_area");
|
|
|
var info=getcookie();// 1超级 2市 3区县 4单位
|
|
|
console.log(info)
|
|
|
var areaId="";
|
|
|
if(info.identity_id==1 ||info.identity_id==2){
|
|
|
areaId=result[0].global_value;
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
// left --1 雷达图
|
|
|
var radar = echarts.init(document.getElementById('radar'),'light');
|
|
|
radar.setOption({
|
|
|
backgroundColor: '#132d64',
|
|
|
tooltip: {
|
|
|
position:['50%','50%']
|
|
|
},
|
|
|
legend: {
|
|
|
textStyle:{
|
|
|
color:'#fff'
|
|
|
},
|
|
|
orient: 'vertical', //垂直显示
|
|
|
y: 'top', //延Y轴居中
|
|
|
x: 'left', //居右显示
|
|
|
// padding:1, //调节legend的位置
|
|
|
data: ['德惠市', '农安县','九台市', '宽城区','二道区', '朝阳区','绿园区', '南关区','双阳区', '榆树市']
|
|
|
},
|
|
|
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 : [
|
|
|
{
|
|
|
value : [4300, 18000, 28000, 30130, 51200, 19000, 18696, 25330, 56000, 30000],
|
|
|
name : '德惠市'
|
|
|
},
|
|
|
{
|
|
|
value : [5900, 14000, 29200, 29100, 42640, 21000, 19696, 35963, 16544, 16000],
|
|
|
name : '农安县'
|
|
|
},
|
|
|
{
|
|
|
value : [4500, 16000, 28300, 39500, 51420, 18000, 17696, 23650, 56840, 28000],
|
|
|
name : '九台市'
|
|
|
},
|
|
|
{
|
|
|
value : [1000, 14070, 24500, 11200, 49840, 22000, 15965, 32501, 56220, 29621],
|
|
|
name : '宽城区'
|
|
|
},
|
|
|
{
|
|
|
value : [4300, 10040, 28000, 39500, 39730, 16700, 16984, 30694, 26000, 36952],
|
|
|
name : '二道区'
|
|
|
},
|
|
|
{
|
|
|
value : [5000, 14600, 26000, 37540, 29990, 21960, 20652, 30684, 42320, 45511],
|
|
|
name : '朝阳区'
|
|
|
},
|
|
|
{
|
|
|
value : [4300, 14600, 22000, 56550, 31259, 10845, 21859, 30050, 35521, 23554],
|
|
|
name : '绿园区'
|
|
|
},
|
|
|
{
|
|
|
value : [6000, 14000, 23000, 49800, 47420, 19056, 23521, 35200, 39544, 36540],
|
|
|
name : '南关区'
|
|
|
},
|
|
|
{
|
|
|
value : [4000, 19300, 24000, 59432, 32160, 20396, 18000, 33333, 56222, 18270],
|
|
|
name : '绿园区'
|
|
|
},
|
|
|
{
|
|
|
value : [900, 14000, 28000, 41000, 36540, 20987, 19000, 344441, 38000, 16000],
|
|
|
name : '双阳市'
|
|
|
}
|
|
|
]
|
|
|
}]
|
|
|
},'light')
|
|
|
|
|
|
|
|
|
|
|
|
//left --2最活跃学校
|
|
|
layui.use(['table'], function () {
|
|
|
var table = layui.table;
|
|
|
// 表格数据
|
|
|
var showIndex=0;
|
|
|
var table1=[];
|
|
|
var table2=[];
|
|
|
var dataList=[];
|
|
|
getTableData();
|
|
|
function getTableData(){
|
|
|
var list=[
|
|
|
{
|
|
|
"id": "1"
|
|
|
,"school_name": "长春市希望中学"
|
|
|
,"district": "德惠市"
|
|
|
},
|
|
|
{
|
|
|
"id": "2"
|
|
|
,"school_name": "九台市第一中学"
|
|
|
,"district": "九台市"
|
|
|
},
|
|
|
{
|
|
|
"id": "3"
|
|
|
,"school_name": "长春市农安附中"
|
|
|
,"district": "农安县"
|
|
|
},
|
|
|
{
|
|
|
"id": "4"
|
|
|
,"school_name": "长春市宽城中学"
|
|
|
,"district": "宽城区"
|
|
|
},
|
|
|
{
|
|
|
"id": "5"
|
|
|
,"school_name": "长春市希望中学"
|
|
|
,"district": "南关区"
|
|
|
},
|
|
|
{
|
|
|
"id": "6"
|
|
|
,"school_name": "长春市吉大附中"
|
|
|
,"district": "二道区"
|
|
|
},
|
|
|
{
|
|
|
"id": "7"
|
|
|
,"school_name": "长春市绿园中学"
|
|
|
,"district": "绿园区"
|
|
|
},
|
|
|
{
|
|
|
"id": "8"
|
|
|
,"school_name": "长春市一零三中学"
|
|
|
,"district": "朝阳区"
|
|
|
},
|
|
|
{
|
|
|
"id": "9"
|
|
|
,"school_name": "长春市十一高中"
|
|
|
,"district": "双阳区"
|
|
|
},
|
|
|
{
|
|
|
"id": "10"
|
|
|
,"school_name": "长春市第九中学"
|
|
|
,"district": "榆树市"
|
|
|
}
|
|
|
];
|
|
|
for (var i=0;i<5;i++) {
|
|
|
table1.push(list[i]);
|
|
|
}
|
|
|
for (var i=5;i<10;i++) {
|
|
|
table2.push(list[i]);
|
|
|
}
|
|
|
table.render({
|
|
|
elem: '#idTest'
|
|
|
, cols: [[
|
|
|
{field: 'id', title: '序号', align: 'center', align: 'center'}
|
|
|
,{field: 'school_name', title: '学校名称', align: 'center'}
|
|
|
, {field: 'district', title: '所属区域', align: 'center'}
|
|
|
]]
|
|
|
,data:table1,
|
|
|
// page:true,
|
|
|
limit:'5'
|
|
|
});
|
|
|
}
|
|
|
function dealTableData(){
|
|
|
showIndex=showIndex+1>1 ? 0 :1;
|
|
|
if(showIndex==0){
|
|
|
dataList=table1;
|
|
|
}else{
|
|
|
dataList=table2;
|
|
|
}
|
|
|
table.render({
|
|
|
elem: '#idTest'
|
|
|
, cols: [[
|
|
|
{field: 'id', title: '序号', align: 'center', align: 'center'}
|
|
|
,{field: 'school_name', title: '学校名称', align: 'center'}
|
|
|
, {field: 'district', title: '所属区域', align: 'center'}
|
|
|
]]
|
|
|
,data:dataList,
|
|
|
// page:true,
|
|
|
limit:'5'
|
|
|
});
|
|
|
}
|
|
|
setInterval(function () {
|
|
|
dealTableData();
|
|
|
},3000)
|
|
|
})
|
|
|
|
|
|
//left --3 学段--入学年份--学生数
|
|
|
var stu = echarts.init(document.getElementById('stu'),'light');
|
|
|
stu.setOption(
|
|
|
{
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#547dc2'
|
|
|
}
|
|
|
},
|
|
|
axisLine:{
|
|
|
lineStyle:{
|
|
|
color:'#547dc2',
|
|
|
}
|
|
|
},
|
|
|
// data: ['2012年','2013年','2014年','2015年','2016年','2017年','2018年'],
|
|
|
data: ['2017','2018','2019']
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#547dc2'
|
|
|
}
|
|
|
},
|
|
|
axisLine:{
|
|
|
lineStyle:{
|
|
|
color:'#547dc2',
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name:'学生总数',
|
|
|
type:'line',
|
|
|
data:[26, 38, 15],
|
|
|
// data:countList,
|
|
|
markPoint: {
|
|
|
data: [
|
|
|
{type: 'max', name: '最大值'},
|
|
|
{type: 'min', name: '最小值'}
|
|
|
]
|
|
|
},
|
|
|
markLine: {
|
|
|
data: [
|
|
|
{type: 'average', name: '平均值'}
|
|
|
],
|
|
|
lineStyle:{
|
|
|
color:'#547dc2',
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
]},true)
|
|
|
// 处理折线数据
|
|
|
var lineIndex=-1;
|
|
|
var entryList=[];
|
|
|
var countList=[];
|
|
|
function dealLineData(){
|
|
|
lineIndex=lineIndex+1!==4 ? lineIndex+1 :0;
|
|
|
$(".stu label[index='"+lineIndex+"']").addClass('daySel').siblings().removeClass('daySel');
|
|
|
// 0 幼儿 1小学 2 初中 3高中
|
|
|
if(lineIndex==0){
|
|
|
entryList=['2017','2018','2019'];
|
|
|
countList=['1234','3654','5854'];
|
|
|
}else if(lineIndex==1){
|
|
|
entryList=['2014','2015','2016','2017','2018','2019'];
|
|
|
countList=['4531','5641','2124','7214','3552','6214'];
|
|
|
|
|
|
}else if(lineIndex==2){
|
|
|
entryList=['2017','2018','2019'];
|
|
|
countList=['2000','3000','2894'];
|
|
|
|
|
|
}else if(lineIndex==3){
|
|
|
entryList=['2017','2018','2019'];
|
|
|
countList=['6845','4937','5684'];
|
|
|
|
|
|
}
|
|
|
refreshData(entryList,countList)
|
|
|
}
|
|
|
// 刷新echarts
|
|
|
function refreshData(data1,data2){
|
|
|
if(!stu){
|
|
|
return;
|
|
|
}
|
|
|
var option = stu.getOption();
|
|
|
option.series[0].data=data2;
|
|
|
option.xAxis[0].data=data1;
|
|
|
stu.setOption(option);
|
|
|
}
|
|
|
|
|
|
setInterval(function () {
|
|
|
dealLineData();
|
|
|
},2000)
|
|
|
|
|
|
|
|
|
// middle --2 教师 学生数量对比
|
|
|
var teastu=echarts.init(document.getElementById('teastu'),'light');
|
|
|
teastu.setOption({
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
|
|
},
|
|
|
legend: {
|
|
|
orient: 'vertical',
|
|
|
x: 'left',
|
|
|
textStyle:{
|
|
|
color:'#fff'
|
|
|
},
|
|
|
data:['幼儿', '小学','初中','高中','完全中学','九年一贯制','十二年一贯制','小幼一体','小幼初一体','小幼初高一体']
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name:'学生总数',
|
|
|
type:'pie',
|
|
|
selectedMode: 'single',
|
|
|
radius: [0, '50%'],
|
|
|
|
|
|
label: {
|
|
|
normal: {
|
|
|
position: 'inner'
|
|
|
}
|
|
|
},
|
|
|
labelLine: {
|
|
|
normal: {
|
|
|
show: false
|
|
|
}
|
|
|
},
|
|
|
data:[
|
|
|
{value:535, name:'幼儿', selected:true},
|
|
|
{value:110, name:'小学'},
|
|
|
{value:834, name:'初中'},
|
|
|
{value:635, name:'高中'},
|
|
|
{value:948, name:'完全中学'},
|
|
|
{value:681, name:'九年一贯制'},
|
|
|
{value:747, name:'十二年一贯制'},
|
|
|
{value:652, name:'小幼一体'},
|
|
|
{value:967, name:'小幼初一体'},
|
|
|
{value:192, name:'小幼初高一体'}
|
|
|
]
|
|
|
},
|
|
|
{
|
|
|
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:[
|
|
|
{value:935, name:'幼儿'},
|
|
|
{value:310, name:'小学'},
|
|
|
{value:234, name:'初中'},
|
|
|
{value:135, name:'高中'},
|
|
|
{value:1048, name:'完全中学'},
|
|
|
{value:251, name:'九年一贯制'},
|
|
|
{value:147, name:'十二年一贯制'},
|
|
|
{value:102, name:'小幼一体'},
|
|
|
{value:567, name:'小幼初一体'},
|
|
|
{value:982, name:'小幼初高一体'}
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
},true)
|
|
|
|
|
|
// right --1 十天访问人数 次数
|
|
|
var visit=echarts.init(document.getElementById('visit'),'light');
|
|
|
var personLis=['120','103','95','88','274','34','99','82','168','155',];
|
|
|
var countLis=['100','93','65','128','100','139','158','164','99','64',];
|
|
|
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:['2019-01-31','2019-01-30','2019-01-29','2019-01-28','2019-01-27','2019-01-26','2019-01-25','2019-01-24','2019-01-23','2019-01-22'],
|
|
|
inverse:true,
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#547dc2'
|
|
|
}
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#547dc2',
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: '访问人数',
|
|
|
type: 'bar',
|
|
|
stack: '总量',
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: 'insideRight'
|
|
|
}
|
|
|
},
|
|
|
data: personLis
|
|
|
},
|
|
|
{
|
|
|
name: '访问次数',
|
|
|
type: 'bar',
|
|
|
stack: '总量',
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: 'insideRight'
|
|
|
}
|
|
|
},
|
|
|
data: countLis
|
|
|
}
|
|
|
]
|
|
|
},true)
|
|
|
// 每天更新
|
|
|
setInterval(function () {
|
|
|
/*刷新echart 提取
|
|
|
*
|
|
|
* *
|
|
|
* *
|
|
|
* *
|
|
|
* *
|
|
|
*
|
|
|
* *
|
|
|
* *
|
|
|
* */
|
|
|
},86400000)
|
|
|
|
|
|
|
|
|
// right --2 各区县教师 学生对比
|
|
|
var districtTeaStu=echarts.init(document.getElementById('districtTeaStu'),'light');
|
|
|
var labelOption = {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: 'insideBottom',
|
|
|
distance:'15',
|
|
|
align:'left',
|
|
|
verticalAlign:'middle',
|
|
|
rotate:'90',
|
|
|
fontSize: 12,
|
|
|
formatter: '{c} {name|{a}}',
|
|
|
rich: {
|
|
|
name: {
|
|
|
textBorderColor: '#fff'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
var area_name=['市直属','九台市','德惠市','农安县','双阳区','二道区','南关区','朝阳区','宽城区','绿园区'];
|
|
|
var teaLis=['1230','2230','3230','4230','2305','2430','3630','3930','5330','930'];
|
|
|
var xxLis=['2309','2430','3230','5230','2430','7230','1230','830','930','630'];
|
|
|
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
|
|
|
},
|
|
|
axisLine:{
|
|
|
lineStyle:{
|
|
|
color:'#547dc2',
|
|
|
}
|
|
|
},
|
|
|
data: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:teaLis
|
|
|
},
|
|
|
{
|
|
|
name: '学生',
|
|
|
type: 'bar',
|
|
|
label: labelOption,
|
|
|
data:xxLis
|
|
|
}
|
|
|
]
|
|
|
},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);
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
|
|
|
// middle-1 地图环形数据 map-1
|
|
|
var map_1=echarts.init(document.getElementById('map_1'));
|
|
|
map_1.setOption({
|
|
|
tooltip : {
|
|
|
trigger: 'item',
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
|
},
|
|
|
series : [
|
|
|
{
|
|
|
name: '访问量',
|
|
|
type: 'pie',
|
|
|
radius : '55%',
|
|
|
center: ['50%', '60%'],
|
|
|
data:[
|
|
|
{value:335, name:'德惠市'},
|
|
|
{value:310, name:'农安县'},
|
|
|
{value:234, name:'九台市'},
|
|
|
{value:135, name:'宽城区'},
|
|
|
{value:1548, name:'二道区'},
|
|
|
{value:698, name:'朝阳区'},
|
|
|
{value:788, name:'绿园区'},
|
|
|
{value:654, name:'南关区'},
|
|
|
{value:552, name:'双阳区'},
|
|
|
{value:1954, name:'榆树市'}
|
|
|
],
|
|
|
itemStyle: {
|
|
|
emphasis: {
|
|
|
shadowBlur: 10,
|
|
|
shadowOffsetX: 0,
|
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
},true)
|
|
|
|
|
|
// middle-1 地图折线数据 map-2
|
|
|
var map_2=echarts.init(document.getElementById('map_2'),'light');
|
|
|
map_2.setOption({
|
|
|
|
|
|
tooltip: {
|
|
|
trigger: 'axis'
|
|
|
},
|
|
|
// legend: {
|
|
|
// data:['德惠市', '农安县','九台市', '宽城区','二道区', '朝阳区','绿园区', '南关区','双阳区', '榆树市']
|
|
|
// },
|
|
|
grid: {
|
|
|
left: '3%',
|
|
|
right: '4%',
|
|
|
bottom: '3%',
|
|
|
containLabel: true
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: 'category',
|
|
|
boundaryGap: false,
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#547dc2'
|
|
|
}
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#547dc2',
|
|
|
}
|
|
|
},
|
|
|
data: ['周一','周二','周三','周四','周五','周六','周日']
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: 'value',
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: '#547dc2'
|
|
|
}
|
|
|
},
|
|
|
axisLine: {
|
|
|
lineStyle: {
|
|
|
color: '#547dc2',
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name:'德惠市',
|
|
|
type:'line',
|
|
|
stack: '总量',
|
|
|
data:[120, 132, 101, 134, 90, 230, 210]
|
|
|
},
|
|
|
{
|
|
|
name:'农安县',
|
|
|
type:'line',
|
|
|
stack: '总量',
|
|
|
data:[220, 182, 191, 234, 290, 330, 310]
|
|
|
},
|
|
|
{
|
|
|
name:'九台市',
|
|
|
type:'line',
|
|
|
stack: '总量',
|
|
|
data:[150, 232, 201, 154, 190, 330, 410]
|
|
|
},
|
|
|
{
|
|
|
name:'宽城区',
|
|
|
type:'line',
|
|
|
stack: '总量',
|
|
|
data:[320, 332, 301, 334, 390, 330, 320]
|
|
|
},
|
|
|
{
|
|
|
name:'二道区',
|
|
|
type:'line',
|
|
|
stack: '总量',
|
|
|
data:[820, 932, 901, 934, 1290, 1330, 1320]
|
|
|
},
|
|
|
{
|
|
|
name:'朝阳区',
|
|
|
type:'line',
|
|
|
stack: '总量',
|
|
|
data:[320, 332, 301, 334, 390, 330, 320]
|
|
|
},
|
|
|
{
|
|
|
name:'绿园区',
|
|
|
type:'line',
|
|
|
stack: '总量',
|
|
|
data:[820, 932, 901, 934, 1290, 1330, 1320]
|
|
|
},
|
|
|
{
|
|
|
name:'南关区',
|
|
|
type:'line',
|
|
|
stack: '总量',
|
|
|
data:[320, 332, 301, 334, 390, 330, 320]
|
|
|
},
|
|
|
{
|
|
|
name:'双阳区',
|
|
|
type:'line',
|
|
|
stack: '总量',
|
|
|
data:[820, 932, 901, 934, 1290, 1330, 1320]
|
|
|
},
|
|
|
{
|
|
|
name:'榆树市',
|
|
|
type:'line',
|
|
|
stack: '总量',
|
|
|
data:[820, 932, 901, 934, 1290, 1330, 1320]
|
|
|
}
|
|
|
]
|
|
|
},true)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html> |
