ABI-DEMO解析第四期:智慧教育

340
4

wut 数据老手Lv5

发表于2020-5-15 18:19

楼主
一、页面一览
【学校概览】
教育.gif
【师资队伍】
教育-师资队伍.png
【教学资源】
教育-教学资源.png
【科学研究】
教育-科学研究.png

二、页面分析
1、整体框架
主题表: 使用rand()函数产生随机数
页面结构:学校概览--宽百分比,高固定,自定义布局;其他三个页面,一屏显示,宽高自适应;

2、模块详解
2.1 学校概况
1)办学条件&师生情况&学科专业
三个模块都是通过大容器+小容器嵌套的方式布局,通过百分比的方式控制位置,让其适应不同的分辨率;
三个模块围绕主视觉图分散开来,错落布局,让整个页面生动有趣。每个模块分布展示对应内容的核心指标。
办学条件:教育经费,图书馆藏书,开设课程门数,固定资产总值,占地面积
师生情况:教职工人数,本科人数,专职教师数,应届本科生毕业率,应届本科生就业率
学科专业:专业学科门类数、本科专业数、专业大类数、硕士点数、博士点数

2)学校信息
以文本的方式合理排列,清晰呈现学校概况。

3)学校师资力量
此模块分为上下两个部分,上面部分展现教职工数和高级职称两个指标;下面部分以列表的形式展现每个职称对应的人数,滚动显示;
PS:表格滚动脚本请见后文

4)条件指标仪表盘
以仪表盘的形式直观的展现核心指标是否达标的情况;双系列的仪表盘与同类型院校平均值对比,找出和同院校的差距。
PS:双系列仪表盘脚本请见后文

2.2 师资队伍
1)教师荣誉称号&教师编制
以条形堆积图来展示人数的分布情况

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

3)职称人数分布
以柱状图的形式清晰呈现每个职称的人数分布
4)教职工基本情况
教师男女比:以环形仪表盘形式突出占比情况
教师年龄占比&最高学位分布:以饼图的形式展示占比情况

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

三、脚本说明
1、学校概况
脚本1:背景雪花飘动动效
PS:HHH3是报表整个容器的代号
  1. function showStar(){
  2.         var starBgDomContainer = document.getElementById("<font color="#ff0000">HHH3</font>").insertBefore(document.createElement("div"),document.getElementById("<font color="#ff0000">HHH3</font>").firstChild);
  3.         starBgDomContainer.className="star_bgdom_container";
  4.         var starBgDom = starBgDomContainer.appendChild(document.createElement("div"));
  5.         starBgDom.id = "star_bgdom";
  6.         var stary = new Starry_LY(starBgDom, "star_bgdom");
  7.         var _animate = function(){
  8.         stary.animation();
  9.         requestAnimationFrame(_animate);
  10.         }
  11.         _animate();
  12. }
  13. EUI.addStyle(document,"vfs/public/star/star_ly.css?version=1",showStar);
  14. EUI.include("vfs/public/star/star_ly2.js");
复制代码
脚本2:更改滚动条样式
脚本中引用了js脚本文件,文件的存储在资源管理器中(路径为:vfs/root/products/ebi/sys/slimscrollbody.js)
  1. //滚动条在整个页面中
  2. EUI.addStyleSheet("#BODYAREA{overflow:hidden !important}");
  3. EUI.addStyleSheet(".scrollBarContainerClass{width:10px !important;}");
  4. EUI.addStyleSheet(".scrollBarClass{border-radius:10px !important;background-color:#013844 !important;}");

  5. EUI.include("vfs/root/products/ebi/sys/slimscrollbody.js");
复制代码
脚本3:双系列仪表盘
  1. function setPointerColor(headerId,colorArray){
  2.         var ready = true;
  3.         var chart = null;
  4.         if(!window["echarts"]){
  5.                 ready = false;
  6.         }else{
  7.                 var header = document.getElementById(headerId);
  8.                 var chartId = header.getAttribute("_echarts_instance_");
  9.                 if(!chartId){
  10.                         ready = false;
  11.                 }else{
  12.                         chart = echarts.getInstanceById(chartId);
  13.                         if(!chart){
  14.                                 ready =false;
  15.                         }
  16.                 }
  17.         }
  18.         if(!ready){
  19.                 setTimeout(function(){
  20.                         setPointerColor(headerId,colorArray);
  21.                 },50);
  22.         }else{
  23.                 var option = chart.getOption();
  24.                 for(var i=0;i<option.series.length;i++){
  25.                         option.series[i].pointer.color=colorArray[i];
  26.                         option.series[i].splitLine.length=-35;
  27.                         if(i!=0){
  28.                                 option.series[i].axisLabel.show=false;
  29.                                 option.series[i].axisTick.show=false;
  30.                         }
  31.                 }
  32.                
  33.                 chart.setOption(option,false);
  34.         }
  35. }

  36. setPointerColor("HHH159",["#8C949B","#FA5C3D"]);
  37. setPointerColor("HHH182",["#8C949B","#FA5C3D"]);
  38. setPointerColor("HHH184",["#8C949B","#FA5C3D"]);
  39. setPointerColor("HHH188",["#8C949B","#FA5C3D"]);
  40. setPointerColor("HHH192",["#8C949B","#FA5C3D"]);
复制代码
脚本4:表格滚动脚本
  1. /***
  2. **表格内容自动轮播脚本
  3. **@param tableDom内容滚动的表格,最好是表格的父DIV
  4. **@param visibleHeight 可视区的高度
  5. ***/
  6. function autoScrollTable(tableDom, visibleHeight) {
  7.         var marqueesHeight = visibleHeight;
  8.         var stopscroll = false;
  9.         var scrollElem = tableDom;
  10.         var preTop = 0;
  11.         var currentTop = 0;
  12.         var stoptime = 0;
  13.         with (scrollElem) {
  14.                 style.height = parseFloat(marqueesHeight) + "px";
  15.                 style.overflow = 'hidden';
  16.                 noWrap = true;
  17.         }
  18.         var scrollUp = function () {
  19.                 if (stopscroll) {
  20.                         setTimeout(scrollUp, 50);
  21.                         return;
  22.                 }
  23.                 currentTop += 1;
  24.                 if (currentTop == (marqueesHeight + 1)) {
  25.                         stoptime += 1;
  26.                         currentTop -= 1;
  27.                         if (stoptime == 1) {
  28.                                 currentTop = 0;
  29.                                 stoptime = 0;
  30.                         }
  31.                 } else {
  32.                         preTop = scrollElem.scrollTop;
  33.                         scrollElem.scrollTop += 1;
  34.                         if (preTop == scrollElem.scrollTop) {
  35.                                 scrollElem.scrollTop = 0;
  36.                                 scrollElem.scrollTop += 1;
  37.                         }
  38.                 }
  39.                 setTimeout(scrollUp, 50);
  40.         };
  41.         var restartScroll = function () {
  42.                 scrollElem.scrollTop = 0;
  43.                 setTimeout(scrollUp, 50);
  44.         };
  45.         jQuery(tableDom).hover(function () {
  46.                 stopscroll = true;
  47.         }, function () {
  48.                 stopscroll = false;
  49.         });
  50.         setTimeout(restartScroll, 2000);
  51. }
  52. autoScrollTable(document.getElementById('GRID1'),document.getElementById("HHH130").clientHeight);
复制代码
四、资源文件
1、脚本资源
直接上传到资源管理器,【star_ly.css】【star_ly2.js】默认的路径:/vfs/public/stars;
【slimscrollbody.js】默认的路径:vfs/root/products/ebi/sys
注意:路径不要轻易修改,报表中在引用时使用了文件路径;单独使用脚本资源也可以实现报表中的动态效果呢~~~
脚本文件.zip (4.8 KB, 下载次数: 43)

最近看过此主题的会员

guozhifeng

道德模范

qhzysoft

小亿

尊少007

jdily

nuonuo88

亿家

15587107535

名字真棒

wxq

张纯纯

18233561185

18047386560

小由菜

mxy123456

xinying

本主题由小亿于2020-5-18 10:16添加图章 精华

4个回答

只看楼主

程序小哥哥 小试身手Lv3

发表于2020-5-18 10:15

只看该作者

取消 关注该作者的回复

沙发

这个优秀了,感谢分享

小亿 管理员

发表于2020-5-18 10:17

只看该作者

取消 关注该作者的回复

板凳

替薏米们谢谢这位大神,太方便了~

数据王子 数据达人Lv4

发表于2020-5-18 10:17

只看该作者

取消 关注该作者的回复

地板

已下载复用,nicie~~

挨踢妹 数据达人Lv4

发表于2020-5-18 10:18

只看该作者

取消 关注该作者的回复

5#

已成功复用,感谢,什么时候再分享一下,驾驶舱的指标搭建思路呢?

登录后可回答问题,请登录注册

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

渠道咨询电话:137-0120-6790

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

进群交流、一对一指导

©2020ESENSOFT北京亿信华辰软件有限责任公司版权所有:京ICP备07017321号京公网安备11010802016281号