diff --git a/web/pages/retained.html b/web/pages/retained.html
index c37a460..31deead 100644
--- a/web/pages/retained.html
+++ b/web/pages/retained.html
@@ -112,6 +112,7 @@
diff --git a/web/src/FixedTable.js b/web/src/FixedTable.js
new file mode 100644
index 0000000..73544ba
--- /dev/null
+++ b/web/src/FixedTable.js
@@ -0,0 +1,621 @@
+/*
+* @Author: 李燕南
+* @Date: 2017-08-30 16:52:50
+* @Last Modified by: 李燕南
+* @Last Modified time: 2017-09-20 19:58:19
+*/
+;(function (factory){
+ if ( typeof define === "function" && define.amd ) {
+ define( ["jquery"], factory );
+ } else if (typeof module === "object" && module.exports) {
+ module.exports = factory( require( "jquery" ) );
+ } else {
+ window.FixedTable = factory( jQuery );
+ try{
+ if(typeof define === "function"){
+ define(function (require){
+ return factory(require("jquery"));
+ });
+ }
+ }catch(e){}
+ }
+})(function ($){
+ function FixedTable(options){
+ this._init(options);
+ }
+ FixedTable._sequence = 0;
+
+ $.extend(FixedTable.prototype, {
+ _init: function (options){
+ if(!options || !$.isPlainObject(options)){
+ throw "缺少init所需的对象!";
+ }
+ this.options = {
+ wrap: null,//生成的表格需要放到哪里,可以是选择器、dom对象、jQuery对象
+ type: "row-col-fixed",//表格类型,有:head-fixed、col-fixed、row-col-fixed
+ extraClass: "",//需要添加到表格中的额外class
+ /*表格的列的每一项配置为:
+ {
+ class: "",
+ width: "150px",
+ field: "日期",//可传递字段名称。也可以传递HTML代码,如果是HTML代码则,htmlDom必须为true
+ htmlDom: false,
+ fieldId: ,//
+ fixed: false,//当前了列是否固定
+ fixedDirection: ""//如果是固定列,则该列的方向是在左边还是在右边
+ }
+ */
+ fields: [],//表格的列
+ /*设置表格内容的最大高度,设置最大高度后可以上下滚动,它的值必须为number,如果不传递该参数则会自动计算*/
+ maxHeight: undefined,
+ onHover: function (){},
+ hoverClass: "rowHover",//鼠标移动到每一行上时需要添加的class
+ tableDefaultContent: "",//表格数据还未添加进来时显示的默认内容,可以是html字符串、dom对象、jQuery对象
+ init: function (){}//FixedTable对象初始化后所执行的函数
+ }
+ $.extend(this.options, options);
+ if(!this.options.fields || !$.isArray(this.options.fields) || this.options.fields.length == 0){
+ throw "必须传递表格的列数组!";
+ }
+ this.wrap = $(this.options.wrap);
+ this.fixedTableClass = {
+ left: "fixed-table_fixed-left",
+ right: "fixed-table_fixed-right"
+ }
+ /*固定列的下标,数组的内容必须是一个对象,且对象格式为
+ {
+ index: 0,//下标
+ direction: "left"//固定列方向
+ }
+ */
+ this.fixedIndex = {};
+ if(this.options.type != "head-fixed"){
+
+ var fields = this.options.fields,
+ that = this;
+ $.each(fields, function (index, item){
+ if(item.fixed){
+ if(!that.fixedIndex.left){//存储左边固定栏索引
+ that.fixedIndex.left = [];
+ }
+ if(!that.fixedIndex.right){//存储右边固定栏索引
+ that.fixedIndex.right = [];
+ }
+ var direction = (!item.fixedDirection ? "left" : item.fixedDirection).toLowerCase();
+
+ that.fixedIndex[direction].push({
+ index: index,
+ direction: direction
+ });
+ }
+ });
+ }
+ this.isIE = FixedTable.isIE();
+
+ this._renderFixedTable();
+
+ if(({}).toString.call(this.options["init"]) == "[object Function]"){
+ this.options["init"].call(this);
+ }
+ },
+ _renderFixedTable: function (){
+ /*渲染fixed-table-box*/
+ var that = this,
+ id = "Lyn_FixedTable_" + (FixedTable._sequence ++),
+ fixedTableBox = this.fixedTableBox = this.build.buildFixedTableBox(),
+ fixedTableHeader = this.fixedTableHeader = this.build.buildFixedTableHeader(),
+ fixedTableBody = this.fixedTableBody = this.build.buildFixedTableBody();
+ this._id = id;
+ //设置显示类型及需额外添加的class
+ fixedTableBox.attr("id", id).addClass(this.options.type).addClass(this.options.extraClass);
+ fixedTableHeader.attr("data-parentid", id);
+ fixedTableBody.attr("data-parentid", id);
+
+ //添加表格数据还未添加进来时显示的默认内容
+ if(this.options.tableDefaultContent){
+ this.tableDefaultContent = $(this.options.tableDefaultContent);
+ fixedTableBody.append(this.tableDefaultContent);
+ }
+ fixedTableHeader.children(".fixed-table_header").children("thead").append(this.build.buildTableTitle(this.options.fields));
+ fixedTableBox.append(fixedTableHeader).append(fixedTableBody);
+
+ this.wrap.append(fixedTableBox);
+
+ //计算table的宽度,否则table的宽度为auto,fixedTableBody就不会出现滚动条了
+ if(this.options.type != "head-fixed"){
+ var tableW = FixedTable.calTableWidth(fixedTableHeader);
+ fixedTableHeader.find("table").data("data-width", tableW).width(tableW);
+ fixedTableBody.find("table").data("data-width", tableW).width(tableW);
+ }
+
+ },
+ _sequence: 0,
+ build: {
+ buildFixedTableBox: function (type, sequence){
+ /*创建包裹table的父盒子*/
+ return $('
');
+ },
+ buildFixedTableHeader: function (){
+ /*创建表头*/
+ var html = '';
+ html += '';
+ return $(html);
+ },
+ buildFixedTableBody: function (){
+ /*创建表格的主体内容*/
+ var html ='';
+ html += '
';
+ html += '
';
+ html += ' ';
+ html += '
';
+ html += '
';
+ return $(html);
+ },
+ buildFixedTable: function (){
+ /*创建固定的列盒子*/
+ return $('
');
+ },
+ buildTableTitle: function (data){
+ /*创建表格标题*/
+ if(!data || !$.isArray(data) || data.length == 0){return;}
+ var html = ['
'];
+ $.each(data, function (index, item){
+ var attr = [],
+ th = '';
+ if(item["class"]){
+ attr.push('class="' + item["class"] + '"');
+ }
+ if(item.width){
+ attr.push('style="width: ' + item.width + ';"');
+ }
+ if(item.fieldId){
+ attr.push('data-fieldid="' + item.fieldId + '"');
+ }
+ if(item.fixed){
+ attr.push('data-fixed="' + item.fixed + '"');
+ if(item.fixedDirection){
+ attr.push('data-fixeddirection="' + item.fixedDirection + '"');
+ }else{
+ attr.push('data-fixeddirection=left');
+ }
+ }
+ //如果传递的field已经是html字符串则直接使用即可
+ if(item.htmlDom){
+ html.push(item.field);
+ }else{
+ html.push('' + item.field + ' | ');
+ }
+
+ });
+ html.push('
');
+
+ return $(html.join(""));
+ }
+ },
+ getRow: function (row){
+ /*根据指定任意地方的行的索引、dom对象、jquery对象获取表格中表格主体、两侧固定列对应的行*/
+ var rowDom = null,
+ rowIndex = undefined,
+ returnVal = {
+ bodyRow: undefined,
+ leftFixedRow: undefined,
+ rightFixedRow: undefined
+ };
+ if(typeof row != "number"){
+ rowDom = $(row);
+ if(rowDom.length == 0){return;}
+ rowIndex = rowDom.index();
+ }else if(typeof row == "number"){
+ rowIndex = row;
+ }
+ if(rowIndex == undefined){return this;}
+
+ returnVal.index = rowIndex;
+ returnVal.bodyRow = this.fixedTableBody.find("tbody tr").eq(rowIndex);
+ if(this.fixedIndex.left){
+ returnVal.leftFixedRow = this.fixedTableBox.find(".fixed-table_fixed-left tbody tr").eq(rowIndex);
+ }
+ if(this.fixedIndex.right){
+ returnVal.rightFixedRow = this.fixedTableBox.find(".fixed-table_fixed-right tbody tr").eq(rowIndex);
+ }
+ return returnVal;
+ },
+ deleteRow: function (row, cb){
+ /*删除行,参数row可以是行的索引、dom对象、jquery对象*/
+ var rows = this.getRow(row);
+
+ if(!rows || !rows.bodyRow){return this;}
+ rows.bodyRow.remove();
+ if(this.fixedIndex.left && rows.leftFixedRow){
+ rows.leftFixedRow.remove();
+ }
+ if(this.fixedIndex.right && rows.rightFixedRow){
+ rows.rightFixedRow.remove();
+ }
+ this._calFixedColHeight();
+ if(cb && ({}).toString.call(cb) == "[obejct Function]"){
+ cb.call(this);
+ }
+ return this;
+ },
+ addRow: function (htmlDom, cb){
+ /*添加行,fn必须返回HTML字符串或jQuery对象*/
+ var returnVal = undefined,
+ rowDoms = undefined,
+ that = this;
+ if(!htmlDom){return this;}
+ if(({}).toString.call(htmlDom) == "[object Function]"){
+ returnVal = htmlDom();
+ }else{
+ returnVal = htmlDom;
+ }
+ if(!returnVal){return this;}
+ rowDoms = $(returnVal);
+
+ if(rowDoms.length == 0){return this;}
+ if(this.tableDefaultContent){
+ this.tableDefaultContent.remove();
+ }
+ this.fixedTableBody.find("tbody").append(rowDoms);
+ if(this.options.type == "head-fixed"){return this;}
+ if(this.fixedIndex.left || this.fixedIndex.right){
+ //设置固定的列
+ this._setFixedCol(rowDoms);
+ //计算固定列的高度
+ if (this.isIE) {
+ //在IE浏览器中连续多次计算固定列的时候会计算出负值的情况,为了避免这个情况需加个定时器
+ setTimeout(function (){
+ that._calFixedColHeight();
+ }, 50);
+ }else{
+ that._calFixedColHeight();
+ }
+ }
+
+ this.rowHover(this.options.onHover);
+ if(cb && ({}).toString.call(cb) == "[obejct Function]"){
+ cb.call(this);
+ }
+ return this;
+ },
+ empty: function (cb){
+ /*清空表格里的所有内容*/
+ this.fixedTableBody.find('tbody').html("");
+ if(this.fixedIndex.left || this.fixedIndex.left){
+ this.fixedTableBox.find(".fixed-table_fixed").height(0).find('tbody').html("");
+ }
+ if(cb && ({}).toString.call(cb) == "[obejct Function]"){
+ cb.call(this);
+ }
+ return this;
+ },
+ rowHover: function (cb){
+ /*鼠标hover在每一行后所处理业务*/
+ var that = this,
+ rowHover = this.options.hoverClass,
+ bodyTrs = this.fixedTableBody.find("tr");
+ bodyTrs.off("mouseenter.rowHover").off("mouseleave.rowHover");
+ bodyTrs.on("mouseenter.rowHover", _process).on("mouseleave.rowHover", _process);
+ if(this.fixedIndex.left){
+ var leftTrs = this.fixedTableBox.find(".fixed-table_fixed-left .fixed-table_body-wraper tr");
+ leftTrs.off("mouseenter.rowHover").off("mouseleave.rowHover");
+ leftTrs.on("mouseenter.rowHover", _process).on("mouseleave.rowHover", _process);
+ }
+ if(this.fixedIndex.right){
+ var rihtTrs = this.fixedTableBox.find(".fixed-table_fixed-right .fixed-table_body-wraper tr");
+ rihtTrs.off("mouseenter.rowHover").off("mouseleave.rowHover");
+ rihtTrs.on("mouseenter.rowHover", _process).on("mouseleave.rowHover", _process);
+ }
+
+ function _process(){
+ var $this = $(this),
+ rows = that.getRow($this.index());
+ if(!rows.bodyRow){return;}
+ rows.bodyRow.toggleClass(rowHover);
+ rows.leftFixedRow.toggleClass(rowHover);
+ rows.rightFixedRow.toggleClass(rowHover);
+
+ if(cb && ({}).toString.call(cb) == "[obejct Function]"){
+ cb.call(that.fixedTableBox[0]);
+ }
+ }
+ return this;
+ },
+ _syncScroll: function (){
+ /*同步滚动*/
+ if(!this.fixedIndex.left || !this.fixedIndex.right){return;}
+ var that = this,
+ fixedTableHeader = this.fixedTableHeader,
+ fixedCols = this.fixedTableBox.find(".fixed-table_fixed .fixed-table_body-wraper");
+ this.fixedTableBody.on("scroll", function (){
+ var $this = $(this);
+ fixedTableHeader.scrollLeft($this.scrollLeft());
+ fixedCols.scrollTop($this.scrollTop());
+ });
+ },
+ _calFixedColHeight: function (){
+ if(!this.fixedIndex.left || !this.fixedIndex.right){return;}
+ /*计算固定列的高度*/
+ var maxHeight = this.options.maxHeight,
+ hasCrosswiseScroll = true,//用于判断固定列的高度是否要减去滚动条的宽度,这样才不会遮住水平滚动条
+ hasVerticalScroll = false,//用于判断右侧的固定列的right值是否需要加上滚动条的宽度,这样才能显示出垂直滚动条
+ $fixedTableBody = this.fixedTableBody,
+ fixedTableBody = $fixedTableBody[0],
+ scrollWidth = 0,
+ scrollWidth2 = 0,
+ fixedTableBodyTable = $fixedTableBody.children('table');
+
+ if(typeof maxHeight != "number"){
+
+ if(this.isIE){//IE浏览器
+ /*在IE浏览器中this.fixedTableBox.height()、this.fixedTableBox[0].offsetHeight获取的高度
+ 都为0,不知道为什么,但this.fixedTableBox[0].clientHeight和this.fixedTableBox[0].scrollHeight都有值,
+ 为了保证两边的固定列能出来,所以就使用了这种解决方案*/
+ maxHeight = this.fixedTableBox.height() || this.fixedTableBox[0].clientHeight || this.fixedTableBox[0].scrollHeight;
+ }else{
+ maxHeight = this.fixedTableBox.height();
+ }
+ }
+ if(fixedTableBody.scrollWidth > fixedTableBody.clientWidth || fixedTableBody.offsetWidth > fixedTableBody.clientWidth){
+ hasCrosswiseScroll = true;
+ }else{
+ hasCrosswiseScroll = false;
+ }
+ /*如果有水平滚动条fixedTableBody.offsetHeight会把水平滚动条的高度也计算进去,因此这里需要减去水平滚动条的高度*/
+ if(fixedTableBody.scrollHeight > fixedTableBody.clientHeight || (fixedTableBody.offsetHeight - FixedTable.getScrollWidth()) > fixedTableBody.clientHeight){
+ hasVerticalScroll = true;
+ }else{
+ hasVerticalScroll = false;
+ }
+
+ if(hasCrosswiseScroll){
+ scrollWidth = FixedTable.getScrollWidth();
+ }
+
+ if(hasVerticalScroll){
+ scrollWidth2 = FixedTable.getScrollWidth();
+
+ if(this.fixedTableBox.find(".fixed-table-box_fixed-right-patch").length == 0){
+ var rightPatch = $('
'),
+ height = this.fixedTableHeader.height();
+ rightPatch.css({
+ width: scrollWidth2,
+ height: height-2
+ });
+ this.fixedTableBox.append(rightPatch);
+ }
+ }else{
+ if(this.fixedTableBox.find(".fixed-table-box_fixed-right-patch").length == 0){
+ this.fixedTableBox.find(".fixed-table-box_fixed-right-patch").remove();
+ }
+ }
+
+ var height = maxHeight - scrollWidth,
+ fixedTable = this.fixedTableBox.find(".fixed-table_fixed");
+ if(fixedTable.height() != Math.abs(height)){
+ fixedTable.height(maxHeight - scrollWidth);
+ }
+
+ this.fixedTableBox.find(".fixed-table_fixed.fixed-table_fixed-right").css("right", (scrollWidth2-1) < 0 ? 1 : (scrollWidth2 - 1));
+ },
+ _setFixedCol: function (rowDoms){
+ /*设置需要固定的列*/
+ var that = this,
+ fixedIndex = this.fixedIndex,
+ first = true,//用来判断是否生成tr
+ leftFixedTableWrap = undefined,//左边固定栏
+ leftFixedTableHeader = undefined,
+ leftFixedTableBody = undefined,
+ rightFixedTableWrap = undefined,//右边固定栏
+ rightFixedTableHeader = undefined,
+ rightFixedTableBody = undefined;
+
+ if(fixedIndex.left || fixedIndex.right){//有固定列
+ if(fixedIndex.left && !this.fixedColCreated){//有左边固定列,并且是第一次添加数据
+ leftFixedTableWrap = that.build.buildFixedTable().addClass(this.fixedTableClass["left"]);
+ leftFixedTableHeader = that.build.buildFixedTableHeader();
+ leftFixedTableBody = that.build.buildFixedTableBody();
+ }else if(fixedIndex.left && this.fixedColCreated){//有左边固定列,并且不是第一次添加数据
+ leftFixedTableWrap = that.fixedTableBox.find(".fixed-table_fixed-left");
+ leftFixedTableHeader = leftFixedTableWrap.find(".fixed-table_header-wraper");
+ leftFixedTableBody = leftFixedTableWrap.find(".fixed-table_body-wraper");
+ }
+ if(fixedIndex.right && !this.fixedColCreated){//有右边固定列
+ rightFixedTableWrap = that.build.buildFixedTable().addClass(this.fixedTableClass["right"]);//右边固定栏
+ rightFixedTableHeader = that.build.buildFixedTableHeader();
+ rightFixedTableBody = that.build.buildFixedTableBody();
+ }else if(fixedIndex.right && this.fixedColCreated){
+ rightFixedTableWrap = that.fixedTableBox.find(".fixed-table_fixed-right");
+ rightFixedTableHeader = rightFixedTableWrap.find(".fixed-table_header-wraper");
+ rightFixedTableBody = rightFixedTableWrap.find(".fixed-table_body-wraper");
+ }
+ }else{//无固定列
+ leftFixedTableWrap = that.fixedTableBox.find(".fixed-table_fixed-left");
+ leftFixedTableHeader = leftFixedTableWrap.find(".fixed-table_header-wraper");
+ leftFixedTableBody = leftFixedTableWrap.find(".fixed-table_body-wraper");
+
+ rightFixedTableWrap = that.fixedTableBox.find(".fixed-table_fixed-right");
+ rightFixedTableHeader = rightFixedTableWrap.find(".fixed-table_header-wraper");
+ rightFixedTableBody = rightFixedTableWrap.find(".fixed-table_body-wraper");
+ }
+
+ //计算固定列的表头,表头只计算一遍
+ if(!this.titleFixeded){
+ var outerFixedTableCols = this.fixedTableHeader.find('.fixed-table_header th'),
+ leftCloneThead = [],
+ rightCloneThead = [],
+ leftCount = 0,
+ rightCount = 0,
+ leftTr = $("
|
"),
+ rightTr = $("
|
");
+
+ outerFixedTableCols.each(function(index, ele) {
+ if(fixedIndex.left){
+ $.each(fixedIndex.left, function(index2, item) {
+ if(index == item.index){
+ leftCloneThead.push($(ele).clone(true));
+ if(leftCount != 0){
+ //移动原来的表头列到对应位置
+ if(index2 != 0){
+ var ths = that.fixedTableHeader.find('.fixed-table_header th')
+ //每次替换位置后需重新获取一下,否则位置会出错
+ ths.eq(item.index).insertAfter(ths.eq(index2-1));
+ }
+
+ }
+ leftCount++;
+ }
+ });
+ }
+ if(fixedIndex.right){
+ $.each(fixedIndex.right, function(index2, item) {
+ if(index == item.index){
+ rightCloneThead.push($(ele).clone(true));
+
+ var ths = that.fixedTableHeader.find('.fixed-table_header th');
+ if(index2 != ths.length - 1){
+ /*每次替换位置后需重新获取一下,否则位置会出错*/
+ outerFixedTableCols.eq(item.index).insertAfter(that.fixedTableHeader.find('.fixed-table_header th').eq(outerFixedTableCols.length - 1));
+ rightCount++;
+ }
+ }
+ });
+ }
+ });
+
+
+ leftFixedTableHeader && leftFixedTableHeader.find(".fixed-table_header thead").append(leftTr.append(leftCloneThead));
+ rightFixedTableHeader && rightFixedTableHeader.find(".fixed-table_header thead").append(rightTr.append(rightCloneThead));
+
+ this.titleFixeded = true;
+ }
+
+
+ var leftCloneBody = [],
+ rightCloneBody = [],
+ rowDomsClone = rowDoms.clone(true),
+ leftCount = 0,
+ rightCount = 0;
+
+ //计算固定列的内容
+ rowDomsClone.each(function(index, ele) {
+ var $this = $(this),
+ leftTr = $(ele).clone(true).html(""),
+ rightTr = $(ele).clone(true).html("");
+ $this.children('td').each(function (index2, td){
+ if(fixedIndex.left){
+ $.each(fixedIndex.left, function (index3, item){
+ if(index2 == item.index){
+ leftTr.append($(td).clone(true));
+ leftCloneBody.push(leftTr);
+ leftCount++;
+ }
+ });
+ }
+ if(fixedIndex.right){
+ $.each(fixedIndex.right, function(index3, item) {
+ if(index2 == item.index){
+ rightTr.append($(td).clone(true));
+ rightCloneBody.push(rightTr);
+ }
+ });
+ }
+ });
+ });
+ //移动表格数据中的列,以让其与固定列对应
+ rowDoms.each(function(index, el) {
+ var $this = $(this),
+ curTd = $this.children('td');
+ curTd.each(function(index2, td) {
+ var $td = $(td);
+ if(fixedIndex.left){
+ $.each(fixedIndex.left, function (index3, item){
+ if(index2 == item.index){
+ if(index3 != 0){
+ $td.insertAfter($this.children('td').eq(index3 -1));
+ }
+ }
+ });
+ }
+ if(fixedIndex.right){
+ $.each(fixedIndex.right, function(index3, item) {
+ if(index2 == item.index){
+ if(index3 != curTd.length - 1){
+ $td.insertAfter($this.children('td').eq(curTd.length - 1));
+ }
+ }
+ });
+ }
+ });
+ });
+
+ if(leftFixedTableWrap){
+ leftFixedTableBody.find("tbody").append(leftCloneBody);
+ if(!this.fixedColCreated){
+ leftFixedTableWrap.append(leftFixedTableHeader).append(leftFixedTableBody);
+ this.fixedTableBox.append(leftFixedTableWrap);
+ }
+ }
+ if(rightFixedTableWrap){
+ rightFixedTableBody.find("tbody").append(rightCloneBody);
+ if(!this.fixedColCreated){
+ rightFixedTableWrap.append(rightFixedTableHeader).append(rightFixedTableBody);
+ this.fixedTableBox.append(rightFixedTableWrap);
+ }
+ }
+ if(!this.fixedColCreated){
+ this._syncScroll();
+ }
+ this.fixedColCreated = true;
+ }
+ });
+
+ /*获取元素滚动条的宽度*/
+ FixedTable.getScrollWidth = function (){
+ var div = document.createElement("div"),
+ w1 = 0,
+ w2 = 0;
+ document.body.appendChild(div);
+
+ div.style.position = "fixed";
+ div.style.left = "-2000px";
+ div.style.width = "200px";
+ div.style.height = "200px";
+ w1 = div.clientWidth;
+ div.style.overflow = "scroll";
+ w2 = div.clientWidth;
+ document.body.removeChild(div);
+
+ return w1-w2;
+ }
+ /*计算表格的真实宽度*/
+ FixedTable.calTableWidth = function (fixedTableHeader){
+ var cloneTable = $(fixedTableHeader).clone(true),
+ width = 0;
+ cloneTable.css({
+ position: "fixed",
+ left: "-2000px",
+ width: "auto"
+ });
+ $("body").append(cloneTable);
+ width = cloneTable.width();
+ cloneTable.remove();
+ return width;
+ }
+ /*判断浏览器是否为IE浏览器*/
+ FixedTable.isIE = function (){
+ var ua = navigator.userAgent.toLowerCase();
+ if(/msie \d/g.test(ua) || ((/trident\/\d/g.test(ua)) && /like gecko/g.test(ua))){
+ return true;
+ }else{
+ return false;
+ }
+ }
+
+ return FixedTable;
+});
diff --git a/web/src/x.min.js b/web/src/x.min.js
index e0900e4..8229e5a 100644
--- a/web/src/x.min.js
+++ b/web/src/x.min.js
@@ -442,6 +442,57 @@ var X = window.X || {
}
};
+ // table
+ X.fixedTable=function(id,type,classname,headdata){
+ new FixedTable({
+ wrap: document.getElementById(id),//生成的表格需要放到哪里
+ type: type,//表格类型,有:head-fixed、col-fixed、row-col-fixed
+ extraClass: classname,//需要添加到表格中的额外class
+ maxHeight: true,
+ fields: headdata,
+ // [//表格的列
+ // {
+ // width: "150px",
+ // field: "日期",
+ // fixed: true
+ // },
+ // {
+ // width: "120px",
+ // field: "姓名",
+ // fixed: true
+ // },
+ // {
+ // width: "120px",
+ // field: "省份",
+ // //fixed: true,
+
+ // },
+ // {
+ // width: "120px",
+ // field: "市区"
+ // },
+ // {
+ // width: "300px",
+ // field: "地址",
+ // // fixed: true,
+
+ // },
+ // {
+ // width: "120px",
+ // field: "邮编",
+
+ // },
+ // {
+ // width: "100px",
+ // field: "操作",
+ // fixed: true,
+ // fixedDirection: "right"
+ // }
+ // ],
+ tableDefaultContent: "
我是一个默认的div
"
+ });
+ };
+
X.eventtable=function(data,callback){
var titledata,condata = [];
for(let i in data){
@@ -688,7 +739,26 @@ var X = window.X || {
};
X.userpropertychart=function(data,callback){
-
+ var xAxisData = [];
+ var seriesdata =[];
+ var legenddata = [];
+ var date,sum,mean,sameday;
+ for(let i in data.value){
+ xAxisData.push(i);
+ seriesdata.push(data.value[i]);
+ }
+ var dataArr = {
+ xAxisData:xAxisData,
+ legenddata:legenddata,
+ seriesData:seriesdata,
+ date:0,
+ sum:0,
+ mean:0,
+ sameday: 0
+ }
+ // console.log(xAxisData);
+ // console.log(seriesdata);
+ callback && callback(dataArr);
};
@@ -2367,6 +2437,7 @@ var X = window.X || {
var querydata;//查询数据
$(document).on('click','.analtsis-chart-switch-box .analtsis-chart-switch',function(){
+ console.log(querydata);
if(querydata){
$('.analtsis-chart-switch-box .analtsis-chart-switch').removeClass('select-chart');
$(this).addClass('select-chart');
@@ -2557,7 +2628,7 @@ var X = window.X || {
for(let j in d[i]['groups']){
var num =0;
for(let z in d[i]['values'][j]){
- num = num + d[i]['values'][j][z]
+ num = parseFloat(num) + parseFloat(d[i]['values'][j][z])
}
if(i > 0){
for(let q in seriesData){
@@ -2650,18 +2721,27 @@ var X = window.X || {
//表格
function tabledata(d){
- var titledata,condata = [];
+ var titledata,condata=[];
for(let i in d){
- if(d[i]['groups']['length'] == 0){
- titledata= $.extend(true,[],d[0]['date_range']) ;
- titledata.unshift('指标','阶段总和');
- condata.push(d[i].values[0]);
- condata[i].unshift(d[i]['event_name'],d[i]['sum']);
+ titledata= $.extend(true,[],d[0]['date_range']) ;
+ titledata.unshift('指标','阶段总和');
+ if(d[i]['groups']['length'] != 0){
+ for(let j in d[i]['values']){
+ var arr;
+ arr = $.extend(true,[],d[i].values[j])
+ arr.unshift(d[i]['event_name'],d[i]['sum'][j]);
+ condata.push(arr);
+ }
+
}else {
-
+ var arr;
+ arr = $.extend(true,[],d[i].values[0])
+ arr.unshift(d[i]['event_name'],d[i]['sum'][0]);
+ condata.push(arr);
}
}
-
+ // console.log(titledata);
+ console.log(condata);
X.laytpldata("#table-fenxi-th-dot",titledata,".table-fenxi-th");
X.laytpldata("#table-fenxi-td-dot",condata ,".table-fenxi-td");
};
@@ -2916,9 +2996,9 @@ var X = window.X || {
})
//从数据看板点击进来触发事件
- if(X.DATA.user_property && X.DATA.user_property != ''){
+ if(X.DATA.user_propertyid && X.DATA.user_propertyid != ''){
var report_idarr = [];
- report_idarr.push(X.DATA.user_property);
+ report_idarr.push(X.DATA.user_propertyid);
X.api('report/read_report','post',{project_id:X.DATA.projectid,report_id:report_idarr},function(d){
backfilldata(d[0]);
})
@@ -3309,7 +3389,7 @@ var X = window.X || {
this.parms = parms;
this.callback = parms.callback; //选择后执行的回调
var data = parms.extData;//获取到上层弹窗传的数据
- console.log(data);
+
// 给条件框赋值
X.laytpldata("#zhuang-tab-dot",data,'.zhuang_tab ');
@@ -3338,8 +3418,6 @@ var X = window.X || {
}
}
// $("#zhuang-conetnt-dot").html("");
- console.log(data);
- console.log(arrData)
X.laytpldata("#zhuang-conetnt-dot",arrData,'.zhuang_conetnt ');
}else {
$('.zhuanghu_ss .qingkomg').hide();
@@ -3823,6 +3901,8 @@ var X = window.X || {
gourl = 'ltvmodel';
// layer.msg('暂未处理当前逻辑');
// return;
+ }else if(cat == 'user_property'){
+ gourl = 'attribute';
}
X.gourl(gourl,'conetnt');//跳到对应的分析页面
X.DATA[cat+'id'] = id;
@@ -4065,48 +4145,91 @@ var X = window.X || {
})
});
-
+ console.log(eventdata);
if(eventdata['modeltype'] == 'echarts' && eventdata['modelsize'] != 'small' ){
var myChart = echarts.init(document.getElementById(eventdata['id']));
- var option = {
- title: {
- text: ''
- },
- color: X.DATA.echartscolor,
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985'
+ if(eventdata['cat'] == 'user_property'){
+ var option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
}
- }
- },
- legend: {
- type:'scroll',
- data: eventdata['legenddata']
- },
- grid: {
- left: '2%',
- right: '2%',
- bottom: '2%',
- top: '10%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: eventdata['xAxisData']
- }
- ],
- yAxis: [
- {
- type: 'value'
- }
- ],
- series: eventdata['seriesData']
- };
+ },
+ color: X.DATA.echartscolor,
+ // legend: {
+ // data: legendData
+ // },
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ top: '10%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {show: false},
+ data: eventdata['xAxisData']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [{
+ data: eventdata['seriesData'],
+ type: 'bar',
+
+ }]
+ };
+ }else{
+ var option = {
+ title: {
+ text: ''
+ },
+ color: X.DATA.echartscolor,
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
+ },
+ legend: {
+ type:'scroll',
+ data: eventdata['legenddata']
+ },
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ top: '10%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: eventdata['xAxisData']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: eventdata['seriesData']
+ };
+ }
+
myChart.setOption(option,true);
}
@@ -8082,6 +8205,20 @@ var X = window.X || {
retaineddata();
});
+ //留存流失
+ var retentionloss = [
+ {'title':'留存','id':0},
+ {'title':'流失','id':1}
+ ]
+ var retentiontype = 0;//判断是显示流失数据还是留存
+ X.laydropdown('.retention-loss',retentionloss,function(d){
+ $('.retention-loss').html(d.title);
+ if(querydata['summary_values']){
+ retentiontype = d.id;
+ updata(querydata);
+ }
+ })
+
// 计算按钮
$(document).off('click','.analysis-calculation').on('click','.analysis-calculation',function(){
// console.log(data);
@@ -8151,6 +8288,14 @@ var X = window.X || {
};
function retainedtable(d){
+ var nname,pname
+ if(retentiontype == 0) {
+ nname = 'n';
+ pname = 'p';
+ }else {
+ nname = 'n_outflow';
+ pname = 'p_outflow';
+ }
var tabledata=[];
for(let i in d['summary_values']){
var arr = {
@@ -8163,8 +8308,8 @@ var X = window.X || {
n:0,
p:0
}
- nrr["n"] = d['summary_values'][i]["n"][j];
- nrr["p"] = d['summary_values'][i]["p"][j]
+ nrr["n"] = d['summary_values'][i][nname][j];
+ nrr["p"] = d['summary_values'][i][pname][j]
arr['data'].push(nrr);
}
tabledata.push(arr)
@@ -8286,14 +8431,22 @@ var X = window.X || {
};
function retainednRetained(d){
+ var nname,pname
+ if(retentiontype == 0) {
+ nname = 'n';
+ pname = 'p';
+ }else {
+ nname = 'n_outflow';
+ pname = 'p_outflow';
+ }
var arr = {};
var legenddata = [];
var seriesData = [];
if(jQuery.isEmptyObject(d.values)){
var arr = []
for(let i in d['summary_values']){
- var index = d['summary_values'][i]['p'].length - 1;
- arr.push(d['summary_values'][i]['p'][index]);
+ var index = d['summary_values'][i][pname].length - 1;
+ arr.push(d['summary_values'][i][pname][index]);
}
seriesData = {
@@ -8306,10 +8459,10 @@ var X = window.X || {
timearr.push(i);
for(let j in d.values[i]){
if(arr[j]){
- arr[j][i] = d.values[i][j]['p'];
+ arr[j][i] = d.values[i][j][pname];
}else {
arr[j]=[];
- arr[j][i] = d.values[i][j]['p'];
+ arr[j][i] = d.values[i][j][pname];
}
}
}
@@ -8340,8 +8493,6 @@ var X = window.X || {
}
- console.log(seriesData);
-
var myChart = echarts.init(document.getElementById('analysis-echarts'));
var option = {
title: {
diff --git a/web/srczip/common.js b/web/srczip/common.js
index 53e88f9..319ec59 100644
--- a/web/srczip/common.js
+++ b/web/srczip/common.js
@@ -441,6 +441,57 @@ var X = window.X || {
}
};
+ // table
+ X.fixedTable=function(id,type,classname,headdata){
+ new FixedTable({
+ wrap: document.getElementById(id),//生成的表格需要放到哪里
+ type: type,//表格类型,有:head-fixed、col-fixed、row-col-fixed
+ extraClass: classname,//需要添加到表格中的额外class
+ maxHeight: true,
+ fields: headdata,
+ // [//表格的列
+ // {
+ // width: "150px",
+ // field: "日期",
+ // fixed: true
+ // },
+ // {
+ // width: "120px",
+ // field: "姓名",
+ // fixed: true
+ // },
+ // {
+ // width: "120px",
+ // field: "省份",
+ // //fixed: true,
+
+ // },
+ // {
+ // width: "120px",
+ // field: "市区"
+ // },
+ // {
+ // width: "300px",
+ // field: "地址",
+ // // fixed: true,
+
+ // },
+ // {
+ // width: "120px",
+ // field: "邮编",
+
+ // },
+ // {
+ // width: "100px",
+ // field: "操作",
+ // fixed: true,
+ // fixedDirection: "right"
+ // }
+ // ],
+ tableDefaultContent: "
我是一个默认的div
"
+ });
+ };
+
X.eventtable=function(data,callback){
var titledata,condata = [];
for(let i in data){
@@ -687,7 +738,26 @@ var X = window.X || {
};
X.userpropertychart=function(data,callback){
-
+ var xAxisData = [];
+ var seriesdata =[];
+ var legenddata = [];
+ var date,sum,mean,sameday;
+ for(let i in data.value){
+ xAxisData.push(i);
+ seriesdata.push(data.value[i]);
+ }
+ var dataArr = {
+ xAxisData:xAxisData,
+ legenddata:legenddata,
+ seriesData:seriesdata,
+ date:0,
+ sum:0,
+ mean:0,
+ sameday: 0
+ }
+ // console.log(xAxisData);
+ // console.log(seriesdata);
+ callback && callback(dataArr);
};
diff --git a/web/srczip/logic/analysis.js b/web/srczip/logic/analysis.js
index b23370c..16e4a0d 100644
--- a/web/srczip/logic/analysis.js
+++ b/web/srczip/logic/analysis.js
@@ -761,6 +761,7 @@
var querydata;//查询数据
$(document).on('click','.analtsis-chart-switch-box .analtsis-chart-switch',function(){
+ console.log(querydata);
if(querydata){
$('.analtsis-chart-switch-box .analtsis-chart-switch').removeClass('select-chart');
$(this).addClass('select-chart');
@@ -951,7 +952,7 @@
for(let j in d[i]['groups']){
var num =0;
for(let z in d[i]['values'][j]){
- num = num + d[i]['values'][j][z]
+ num = parseFloat(num) + parseFloat(d[i]['values'][j][z])
}
if(i > 0){
for(let q in seriesData){
@@ -1044,18 +1045,27 @@
//表格
function tabledata(d){
- var titledata,condata = [];
+ var titledata,condata=[];
for(let i in d){
- if(d[i]['groups']['length'] == 0){
- titledata= $.extend(true,[],d[0]['date_range']) ;
- titledata.unshift('指标','阶段总和');
- condata.push(d[i].values[0]);
- condata[i].unshift(d[i]['event_name'],d[i]['sum']);
+ titledata= $.extend(true,[],d[0]['date_range']) ;
+ titledata.unshift('指标','阶段总和');
+ if(d[i]['groups']['length'] != 0){
+ for(let j in d[i]['values']){
+ var arr;
+ arr = $.extend(true,[],d[i].values[j])
+ arr.unshift(d[i]['event_name'],d[i]['sum'][j]);
+ condata.push(arr);
+ }
+
}else {
-
+ var arr;
+ arr = $.extend(true,[],d[i].values[0])
+ arr.unshift(d[i]['event_name'],d[i]['sum'][0]);
+ condata.push(arr);
}
}
-
+ // console.log(titledata);
+ console.log(condata);
X.laytpldata("#table-fenxi-th-dot",titledata,".table-fenxi-th");
X.laytpldata("#table-fenxi-td-dot",condata ,".table-fenxi-td");
};
diff --git a/web/srczip/logic/attribute.js b/web/srczip/logic/attribute.js
index d284a05..4314360 100644
--- a/web/srczip/logic/attribute.js
+++ b/web/srczip/logic/attribute.js
@@ -85,9 +85,9 @@
})
//从数据看板点击进来触发事件
- if(X.DATA.user_property && X.DATA.user_property != ''){
+ if(X.DATA.user_propertyid && X.DATA.user_propertyid != ''){
var report_idarr = [];
- report_idarr.push(X.DATA.user_property);
+ report_idarr.push(X.DATA.user_propertyid);
X.api('report/read_report','post',{project_id:X.DATA.projectid,report_id:report_idarr},function(d){
backfilldata(d[0]);
})
diff --git a/web/srczip/logic/category.js b/web/srczip/logic/category.js
index d10c93f..3bcc707 100644
--- a/web/srczip/logic/category.js
+++ b/web/srczip/logic/category.js
@@ -6,7 +6,7 @@
this.parms = parms;
this.callback = parms.callback; //选择后执行的回调
var data = parms.extData;//获取到上层弹窗传的数据
- console.log(data);
+
// 给条件框赋值
X.laytpldata("#zhuang-tab-dot",data,'.zhuang_tab ');
@@ -35,8 +35,6 @@
}
}
// $("#zhuang-conetnt-dot").html("");
- console.log(data);
- console.log(arrData)
X.laytpldata("#zhuang-conetnt-dot",arrData,'.zhuang_conetnt ');
}else {
$('.zhuanghu_ss .qingkomg').hide();
diff --git a/web/srczip/logic/dashboard.js b/web/srczip/logic/dashboard.js
index f4ecbad..eb1fc66 100644
--- a/web/srczip/logic/dashboard.js
+++ b/web/srczip/logic/dashboard.js
@@ -267,6 +267,8 @@
gourl = 'ltvmodel';
// layer.msg('暂未处理当前逻辑');
// return;
+ }else if(cat == 'user_property'){
+ gourl = 'attribute';
}
X.gourl(gourl,'conetnt');//跳到对应的分析页面
X.DATA[cat+'id'] = id;
@@ -509,48 +511,91 @@
})
});
-
+ console.log(eventdata);
if(eventdata['modeltype'] == 'echarts' && eventdata['modelsize'] != 'small' ){
var myChart = echarts.init(document.getElementById(eventdata['id']));
- var option = {
- title: {
- text: ''
- },
- color: X.DATA.echartscolor,
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross',
- label: {
- backgroundColor: '#6a7985'
+ if(eventdata['cat'] == 'user_property'){
+ var option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
}
- }
- },
- legend: {
- type:'scroll',
- data: eventdata['legenddata']
- },
- grid: {
- left: '2%',
- right: '2%',
- bottom: '2%',
- top: '10%',
- containLabel: true
- },
- xAxis: [
- {
- type: 'category',
- boundaryGap: false,
- data: eventdata['xAxisData']
- }
- ],
- yAxis: [
- {
- type: 'value'
- }
- ],
- series: eventdata['seriesData']
- };
+ },
+ color: X.DATA.echartscolor,
+ // legend: {
+ // data: legendData
+ // },
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ top: '10%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {show: false},
+ data: eventdata['xAxisData']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [{
+ data: eventdata['seriesData'],
+ type: 'bar',
+
+ }]
+ };
+ }else{
+ var option = {
+ title: {
+ text: ''
+ },
+ color: X.DATA.echartscolor,
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ label: {
+ backgroundColor: '#6a7985'
+ }
+ }
+ },
+ legend: {
+ type:'scroll',
+ data: eventdata['legenddata']
+ },
+ grid: {
+ left: '2%',
+ right: '2%',
+ bottom: '2%',
+ top: '10%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ boundaryGap: false,
+ data: eventdata['xAxisData']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: eventdata['seriesData']
+ };
+ }
+
myChart.setOption(option,true);
}
diff --git a/web/srczip/logic/retained.js b/web/srczip/logic/retained.js
index 2245bee..10fce21 100644
--- a/web/srczip/logic/retained.js
+++ b/web/srczip/logic/retained.js
@@ -474,6 +474,20 @@
retaineddata();
});
+ //留存流失
+ var retentionloss = [
+ {'title':'留存','id':0},
+ {'title':'流失','id':1}
+ ]
+ var retentiontype = 0;//判断是显示流失数据还是留存
+ X.laydropdown('.retention-loss',retentionloss,function(d){
+ $('.retention-loss').html(d.title);
+ if(querydata['summary_values']){
+ retentiontype = d.id;
+ updata(querydata);
+ }
+ })
+
// 计算按钮
$(document).off('click','.analysis-calculation').on('click','.analysis-calculation',function(){
// console.log(data);
@@ -543,6 +557,14 @@
};
function retainedtable(d){
+ var nname,pname
+ if(retentiontype == 0) {
+ nname = 'n';
+ pname = 'p';
+ }else {
+ nname = 'n_outflow';
+ pname = 'p_outflow';
+ }
var tabledata=[];
for(let i in d['summary_values']){
var arr = {
@@ -555,8 +577,8 @@
n:0,
p:0
}
- nrr["n"] = d['summary_values'][i]["n"][j];
- nrr["p"] = d['summary_values'][i]["p"][j]
+ nrr["n"] = d['summary_values'][i][nname][j];
+ nrr["p"] = d['summary_values'][i][pname][j]
arr['data'].push(nrr);
}
tabledata.push(arr)
@@ -678,14 +700,22 @@
};
function retainednRetained(d){
+ var nname,pname
+ if(retentiontype == 0) {
+ nname = 'n';
+ pname = 'p';
+ }else {
+ nname = 'n_outflow';
+ pname = 'p_outflow';
+ }
var arr = {};
var legenddata = [];
var seriesData = [];
if(jQuery.isEmptyObject(d.values)){
var arr = []
for(let i in d['summary_values']){
- var index = d['summary_values'][i]['p'].length - 1;
- arr.push(d['summary_values'][i]['p'][index]);
+ var index = d['summary_values'][i][pname].length - 1;
+ arr.push(d['summary_values'][i][pname][index]);
}
seriesData = {
@@ -698,10 +728,10 @@
timearr.push(i);
for(let j in d.values[i]){
if(arr[j]){
- arr[j][i] = d.values[i][j]['p'];
+ arr[j][i] = d.values[i][j][pname];
}else {
arr[j]=[];
- arr[j][i] = d.values[i][j]['p'];
+ arr[j][i] = d.values[i][j][pname];
}
}
}
@@ -732,8 +762,6 @@
}
- console.log(seriesData);
-
var myChart = echarts.init(document.getElementById('analysis-echarts'));
var option = {
title: {