From 5ca1930de7c10dc921ee17df50e9e38aa65bb8c1 Mon Sep 17 00:00:00 2001 From: luosongbai <15272473386@163.com> Date: Tue, 24 Aug 2021 11:34:32 +0800 Subject: [PATCH] 1 --- web/main.html | 3 + web/pages/modeltable.html | 4 +- web/pages/retained.html | 1 + web/src/FixedTable.js | 621 ++++++++++++++++++++++++++++++++++ web/src/x.min.js | 275 +++++++++++---- web/srczip/common.js | 72 +++- web/srczip/logic/analysis.js | 28 +- web/srczip/logic/attribute.js | 4 +- web/srczip/logic/category.js | 4 +- web/srczip/logic/dashboard.js | 123 ++++--- web/srczip/logic/retained.js | 44 ++- 11 files changed, 1053 insertions(+), 126 deletions(-) create mode 100644 web/src/FixedTable.js diff --git a/web/main.html b/web/main.html index 6ede4d0..904d0e5 100644 --- a/web/main.html +++ b/web/main.html @@ -28,6 +28,9 @@ + + + diff --git a/web/pages/modeltable.html b/web/pages/modeltable.html index 095489a..29886c2 100644 --- a/web/pages/modeltable.html +++ b/web/pages/modeltable.html @@ -179,9 +179,9 @@

{{d.name}}

-
+
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 @@
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 += '
'; + html += ' '; + html += ' '; + html += ' '; + 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: {