-
-
张纯纯 数据小白Lv1
发表于2020-5-24 17:39
楼主
一、页面分析
1、整体简介
主题表：使用rand()函数产生随机数
页面结构：宽百分比，高固定
【市场】
【存量房】
【商品房】
二、模块详解
2.1 市场分析1）概览
以指标卡的形式直观展现3大核心指标：总投资数、总成交额、总投资数
2）近年房产开发投资走势
以柱状图及线状图结合的形式展现地产、住宅、地产同比、住宅同比走势
3）近年来房产开发占比
通过HTML南丁格尔玫瑰图展示了各个地区的房产开发占比情况
4）中心地图
通过地图展示全市的投资情况，根据金额的不同，区域的颜色也不同。
5）土地成交情况
通过占比图和图片的叠加，展示近4个月的土地成交情况
实现方法：电池图片和占比图放在同一容器中，图片置于顶层
6）房屋新开工情况
通过面积图展示房屋新开工情况，设置透明度让整个展现更加清爽。
7）房屋施工情况
通过图片和文本组合的方式，直观清晰的展示了近4个月的房屋施工情况，包括每个月的住宅施工、房屋施工。
2.2 存量房
1）实时播报
以表格滚动的形式的形式展示存量房的成交具体信息
2）今日交易
通过指标卡的形式展示了今日的交易情况，包括：房屋数、价格、面积
3）本月交易
通过指标卡的形式展示了本月的交易情况，包括：房屋数、价格、面积
4）中心地图
通过地图展示全市的投资情况，根据金额的不同，区域的颜色也不同。
5）本月实时交易情况
通过柱状图和线状图的组合，展示了本月每天交易的房屋套数和均价，让整个交易情况一目了然。
6）近5个月成交面积top5
通过面积图展示存量房和存量住房的近5月的成交面积情况
7）各环线存量房成交情况
通过通过饼图和表格的组合展示了各环的成交情况。
2.3 商品房
2.3 商品房
1）实时播报
以表格滚动的形式的形式展示商品房房的成交具体信息
2）今日交易
通过指标卡的形式展示了今日的交易情况，包括：房屋数、价格、面积
3）本月交易
通过指标卡的形式展示了本月的交易情况，包括：房屋数、价格、面积
4）中心地图
通过地图展示全市的投资情况，根据金额的不同，区域的颜色也不同。
5）本月实时交易情况
通过柱状图和线状图的组合，展示了本月每天交易的房屋套数和均价，让整个交易情况一目了然。
6）近5个月成交面积top5
通过3D柱状图展示了全市近5个月的成交面积前5名
7）各模块商品房成交情况
通过气泡图展示了各个价格的成交量
8）各环线商品房成交情况
通过堆积图展示了各环的商品房成交情况
二、脚本说明
脚本1：表格滚动
GRID9是需要进行滚动的表格名称，HHH2是表格所在的容器名称
- **表格内容自动轮播脚本
- **@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('GRID9'),document.getElementById("HHH2").clientHeight);
脚本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:#062E33 !important;}");
- EUI.include("vfs/root/products/ebi/sys/slimscrollbody.js");
三、资源文件
1、报表资源
说明：.rptttpl后缀文件新建空报表后如下图所示上传
2、图片资源
直接上传到资源管理器，默认的路径：vfs/root/products/ebi/sys/picture/行业DEMO
注意：直接上传【切图.zip】文件后上传。路径不要轻易修改，报表中在引用时使用了文件路径
3、资源文件
智慧政府之房地产.zip
(2.36 MB, 下载次数: )
PS：有任何问题可以本帖咨询，或者社区问答版块求助~
8个回答
在资源管理器，按如下路径/root/products/ebi/sys/ditu/上传附件，注意要解压
copy_html5_310000(20200715_101120).zip
(10.57 KB, 下载次数: )
