我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-辰哥课堂 › 亿信ABI-DEMO解析第四期：智慧教育 ...

亿信ABI-DEMO解析第四期：智慧教育

复制链接 | 收藏本帖

10047

: wut 数据老手Lv5

发表于2020-5-15 18:19

楼主

一、页面一览
【学校概览】
教育.gif

【师资队伍】

【教学资源】

【科学研究】

二、页面分析
1、整体框架

主题表：使用rand()函数产生随机数

页面结构：学校概览--宽百分比，高固定，自定义布局；其他三个页面，一屏显示，宽高自适应；

2、模块详解

2.1 学校概况

1）办学条件&师生情况&学科专业

三个模块都是通过大容器+小容器嵌套的方式布局，通过百分比的方式控制位置，让其适应不同的分辨率；

三个模块围绕主视觉图分散开来，错落布局，让整个页面生动有趣。每个模块分布展示对应内容的核心指标。

办学条件：教育经费，图书馆藏书，开设课程门数，固定资产总值，占地面积

师生情况：教职工人数，本科人数，专职教师数，应届本科生毕业率，应届本科生就业率

学科专业：专业学科门类数、本科专业数、专业大类数、硕士点数、博士点数

2）学校信息

以文本的方式合理排列，清晰呈现学校概况。

3）学校师资力量

此模块分为上下两个部分，上面部分展现教职工数和高级职称两个指标；下面部分以列表的形式展现每个职称对应的人数，滚动显示；

PS：表格滚动脚本请见后文

4）条件指标仪表盘

以仪表盘的形式直观的展现核心指标是否达标的情况；双系列的仪表盘与同类型院校平均值对比，找出和同院校的差距。

PS：双系列仪表盘脚本请见后文

2.2 师资队伍

1）教师荣誉称号&教师编制

以条形堆积图来展示人数的分布情况

2）教师变动情况

以指标卡的形式展示三个核心指标：教职工人数新增、教职工人数减少、编制异动的情况

3）职称人数分布

以柱状图的形式清晰呈现每个职称的人数分布

4）教职工基本情况

教师男女比：以环形仪表盘形式突出占比情况

教师年龄占比&最高学位分布：以饼图的形式展示占比情况

PS：其他两个页面类似于【师资队伍】，不再赘述。想看详情，恢复demo即可。

三、脚本说明

1、学校概况

脚本1：背景雪花飘动动效

PS：HHH3是报表整个容器的代号

function showStar(){
var starBgDomContainer = document.getElementById("<font color="#ff0000">HHH3</font>").insertBefore(document.createElement("div"),document.getElementById("<font color="#ff0000">HHH3</font>").firstChild);
starBgDomContainer.className="star_bgdom_container";
var starBgDom = starBgDomContainer.appendChild(document.createElement("div"));
starBgDom.id = "star_bgdom";
var stary = new Starry_LY(starBgDom, "star_bgdom");
var _animate = function(){
stary.animation();
requestAnimationFrame(_animate);
}
_animate();
}
EUI.addStyle(document,"vfs/public/star/star_ly.css?version=1",showStar);
EUI.include("vfs/public/star/star_ly2.js");

复制代码

脚本2：更改滚动条样式

脚本中引用了js脚本文件，文件的存储在资源管理器中(路径为:vfs/root/products/ebi/sys/slimscrollbody.js）

//滚动条在整个页面中

EUI.addStyleSheet("#BODYAREA{overflow:hidden !important}");

EUI.addStyleSheet(".scrollBarContainerClass{width:10px !important;}");

EUI.addStyleSheet(".scrollBarClass{border-radius:10px !important;background-color:#013844 !important;}");

EUI.include("vfs/root/products/ebi/sys/slimscrollbody.js");
复制代码

脚本3：双系列仪表盘

function setPointerColor(headerId,colorArray){
var ready = true;
var chart = null;
if(!window["echarts"]){
ready = false;
}else{
var header = document.getElementById(headerId);
var chartId = header.getAttribute("_echarts_instance_");
if(!chartId){
ready = false;
}else{
chart = echarts.getInstanceById(chartId);
if(!chart){
ready =false;
}
}
}
if(!ready){
setTimeout(function(){
setPointerColor(headerId,colorArray);
},50);
}else{
var option = chart.getOption();
for(var i=0;i<option.series.length;i++){
option.series[i].pointer.color=colorArray[i];
option.series[i].splitLine.length=-35;
if(i!=0){
option.series[i].axisLabel.show=false;
option.series[i].axisTick.show=false;
}
}
chart.setOption(option,false);
}
}
setPointerColor("HHH159",["#8C949B","#FA5C3D"]);
setPointerColor("HHH182",["#8C949B","#FA5C3D"]);
setPointerColor("HHH184",["#8C949B","#FA5C3D"]);
setPointerColor("HHH188",["#8C949B","#FA5C3D"]);
setPointerColor("HHH192",["#8C949B","#FA5C3D"]);

复制代码

脚本4：表格滚动脚本

/***
**表格内容自动轮播脚本
**@param tableDom内容滚动的表格，最好是表格的父DIV
**@param visibleHeight 可视区的高度
***/
function autoScrollTable(tableDom, visibleHeight) {
var marqueesHeight = visibleHeight;
var stopscroll = false;
var scrollElem = tableDom;
var preTop = 0;
var currentTop = 0;
var stoptime = 0;
with (scrollElem) {
style.height = parseFloat(marqueesHeight) + "px";
style.overflow = 'hidden';
noWrap = true;
}
var scrollUp = function () {
if (stopscroll) {
setTimeout(scrollUp, 50);
return;
}
currentTop += 1;
if (currentTop == (marqueesHeight + 1)) {
stoptime += 1;
currentTop -= 1;
if (stoptime == 1) {
currentTop = 0;
stoptime = 0;
}
} else {
preTop = scrollElem.scrollTop;
scrollElem.scrollTop += 1;
if (preTop == scrollElem.scrollTop) {
scrollElem.scrollTop = 0;
scrollElem.scrollTop += 1;
}
}
setTimeout(scrollUp, 50);
};
var restartScroll = function () {
scrollElem.scrollTop = 0;
setTimeout(scrollUp, 50);
};
jQuery(tableDom).hover(function () {
stopscroll = true;
}, function () {
stopscroll = false;
});
setTimeout(restartScroll, 2000);
}
autoScrollTable(document.getElementById('GRID1'),document.getElementById("HHH130").clientHeight);