DEMO解析第四期：领导驾驶舱之零售行业子页面

复制链接 | 收藏本帖

8423

楼主

一、页面分析
1、整体简介

主题表：F_CUSTOMER_SHOPPING，F_GOODS_PURCHASE，F_INVENTORY，F_SALE_M

页面结构：宽百分比，高百分比

销售详情页面一览：

运营详情页面一览：

2、【销售详情】模块详解

销售详情由主页面的【月销售完成率】模块右上角的“more”进行下钻。

1) 参数区域

参数区域位于页面的最上方，一共包含了3个参数：2个日期参数（开始日期，结束日期），1个维下拉参数（地区）。可以实现日期和地区的筛选和过滤。

参数组件为了和页面的配色统一，使用了脚本实现参数的配色和图标的设置（脚本1）。

2) 店铺销售完成率/商品销售情况

表格上方为销售完成率排名前三的店铺以及销售额排名前三的商品。

下方的表格分别展现了各分店和商品的销售详情列表。表格设置为每页显示10行，其中页码的颜色用脚本进行了设置（脚本2）。

3、【运营详情】模块详解

销售详情由主页面的【整体运营状况】模块右上角的“more”进行下钻。

1) 参数区域

参数区域添加了3个参数，同销售详情页面中参数的作用效果和脚本是一样的。

2) 指标概览

表格上方有5个指标的概览，分别为：新增会员数，客单价，件单价，人效，坪效。

这5个指标的值取的是表格中浮动表元的合计值。

3) 表格

展示了每个分店的运营详情，其中用脚本设置了表格滚动条的样式。

注意：整个报表的滚动条设置脚本和单个容器的滚动条样式的设置脚本是不一样的。

二、脚本说明
脚本1：参数颜色和图标设置

该脚本可以更换参数显示框背景和输入文字的颜色，也可以更换参数右侧小图标。

注意：更换图标需要先上传图片到资源管理器中，然后在脚本中输入正确的路径。

//参数颜色
addStyleSheet("div.widgetobj_container{color:#56aef3;} .xcombobox_cbar{border:1px solid #24338A;background-color:#24338A} .html_edit{background-color:#24338A;color:#a6adff}");
addStyleSheet("div.cmbBtOut{background:url(vfs/root/products/ebi/sys/picture/pcdemo/领导驾驶舱/零售行业/下拉维1.png) no-repeat!important}");
addStyleSheet("div.cmbBtOver{background:url(vfs/root/products/ebi/sys/picture/pcdemo/领导驾驶舱/零售行业/下拉维1.png) no-repeat!important}");
addStyleSheet("#WidgetParamSEDate21 div div span{background:url(vfs/root/products/ebi/sys/picture/pcdemo/领导驾驶舱/零售行业/下拉维1.png) no-repeat!important}");
addStyleSheet("#WidgetParamButton2{border:1px solid #24338A!important;}")
addStyleSheet("div.menology_cmbBtOut{background:url(vfs/root/products/ebi/sys/picture/pcdemo/领导驾驶舱/零售行业/日历1.png) no-repeat!important}");
addStyleSheet("div.menology_cmbBtOver{background:url(vfs/root/products/ebi/sys/picture/pcdemo/领导驾驶舱/零售行业/日历1.png) no-repeat!important}");

复制代码

脚本2：分页序号颜色设置

页面序号的颜色默认为黑色，使用下方脚本即可设置颜色。

复制代码

脚本3：面包屑导航颜色设置

从主页面下钻到子页面后，左上角会出现面包屑导航，导航栏的背景颜色和字体颜色可以用下方脚本进行设置。

//钻取链接的背景色和字体颜色
addStyleSheet("#rptDrillPath {background-color:#0A0F31;color:#bdbec1;font-size:12px;}");
//钻取链接中a标签的字体颜色
addStyleSheet("#rptDrillPath a.drilllink {color:#5750D9}");
//addStyleSheet("#rptDrillPath a.drilllink {color:#5750D9;text-decoration:underline}");

复制代码

脚本4：容器滚动条样式设置

该脚本中包含了js文件，使用inlude函数进行了调用，文件资源请在文末下载。

脚本解析：

addStyleSheet("#HHH21{overflow:hidden!important}"); //HHH21为容器的代码

addStyleSheet(".scrollBarContainerClass{width:5px!important;}");//设置滚动条宽度

addStyleSheet(".scrollBarClass{border-radius:10px!important;background-color:#111F78 !important;}"); //设置滚动条两端的弧度及滚动条颜色

addStyleSheet("#HHH21{overflow:hidden !important}");
addStyleSheet(".scrollBarContainerClass{width:5px !important;}");
addStyleSheet(".scrollBarClass{border-radius:10px !important;background-color:#111F78 !important;}");
include("vfs/root/demojs/slimscroll.js");
new slimScroll($("#HHH21")[0], {
'wrapperClass': '',
'scrollBarClass': 'scrollBarClass',
'scrollBarContainerClass': 'scrollBarContainerClass',
'scrollBarContainerSpecialClass': '',
'scrollBarMinHeight': '',
'scrollBarFixedHeight': '',
'keepFocus': true
});