ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
先装载css吧 设计页的 D:\ireport365\ireport365.war\js\enduser\designer\designer.css ~~~ /* oap分析 */ .compTitleBtn{ display:none; position: absolute; line-height:26px; height:26px; cursor:pointer; text-align:center; right:10px; top:5px; width:60px; height:26px; background:#0075d6; color:#fff; border-radius:5px; } .oap-box{ display:none; position:absolute; width:200px; height:120px; background:#fff; right:95%; top:26px; border-radius:5px; z-index:999; border:1px solid #f0f0f0; } .oap-box-tab{ width:100%; margin:0 auto; } .oap-box-tab .oap-box-tab-active{ border-bottom-color:#0075d6; color:#0075d6; } .oap-box-tab>span{ width:80px; display:inline-block; border-bottom:1px solid #999; margin:0 auto; color:#999; } .oap-box-content{ text-align:left; width:90%; margin:0 5%; background:#fff; margin-top:5px; height:80px; /* overflow-y:auto; */ display:none; } .oap-box-content>span{ display:block; height:20px; line-height:20px; color:#000; position:relative; } .oap-box-content input[type=checkbox]{ display:inline-block; vertical-align:middle; margin-top:-5px; } .oap-box-content input[type=checkbox]{ /*同样,首先去除浏览器默认样式*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; /*编辑我们自己的样式*/ position: relative; width: 15px; height: 15px; background: transparent; border:1px solid #00BFFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; outline: none; cursor: pointer; } .oap-box-content input[type=checkbox]:after{ content: '√'; position: absolute; display: block; width: 100%; height: 100%; background: #00BFFF; color: #fff; text-align: center; line-height: 18px; /*增加动画*/ -webkit-transition: all ease-in-out 300ms; -moz-transition: all ease-in-out 300ms; transition: all ease-in-out 300ms; /*利用border-radius和opacity达到填充的假象,首先隐藏此元素*/ -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; opacity: 0; } .oap-box-content input[type=checkbox]:checked:after{ -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; opacity: 1; } .oap-operation{ position:absolute; width:50px; /* overflow: hidden; */ height:auto; top:6px; right:-40px; border-radius:3px; display:none; background:#fff; border:1px solid #f0f0f0; text-align: center; } .oap-operation>span{ display:block; width:100%; height:22px; line-height:22px; } .oap-operation>span:hover{ background:#f0f0f0; } .Classification1{ position:relative; } .Classification2{ display:none; width:50px; height:auto; position: absolute; top:10px; left:42px; border-radius:3px; overflow:hidden; } .Classification1:hover .Classification2{ display:block; } /* end */ ~~~ 分享页的 css 路径:D:\ireport365\ireport365.war\WEB-INF\classes\report-resource\design.css ~~~ /* oap分析 */ .compTitleBtn{ /* display:none; */ position: absolute; line-height:26px; height:26px; cursor:pointer; text-align:center; right:10px; top:5px; width:60px; height:26px; background:#0075d6; color:#fff; border-radius:5px; } .oap-box{ display:none; position:absolute; width:200px; height:auto; background:#fff; right:95%; top:26px; border-radius:5px; z-index:999; border:1px solid #f0f0f0; } .oap-box-tab{ width:100%; margin:0 auto; } .oap-box-tab .oap-box-tab-active{ border-bottom-color:#0075d6; color:#0075d6; } .oap-box-tab>span{ width:80px; display:inline-block; border-bottom:1px solid #999; margin:0 auto; color:#999; } .oap-box-content{ text-align:left; width:90%; margin:0 5%; background:#fff; margin-top:5px; height:80px; /* overflow-y:auto; */ display:none; } .oap-box-content>span{ display:block; height:20px; line-height:20px; color:#000; position:relative; } .oap-box-content input[type=checkbox]{ display:inline-block; vertical-align:middle; margin-top:-5px; } .oap-box-content input[type=checkbox]{ /*同样,首先去除浏览器默认样式*/ -webkit-appearance: none; -moz-appearance: none; appearance: none; /*编辑我们自己的样式*/ position: relative; width: 15px; height: 15px; background: transparent; border:1px solid #00BFFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; outline: none; cursor: pointer; } .oap-box-content input[type=checkbox]:after{ content: '√'; position: absolute; display: block; width: 100%; height: 100%; background: #00BFFF; color: #fff; text-align: center; line-height: 18px; /*增加动画*/ -webkit-transition: all ease-in-out 300ms; -moz-transition: all ease-in-out 300ms; transition: all ease-in-out 300ms; /*利用border-radius和opacity达到填充的假象,首先隐藏此元素*/ -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; opacity: 0; } .oap-box-content input[type=checkbox]:checked:after{ -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; opacity: 1; } .oap-operation{ position:absolute; width:50px; height:auto; top:6px; right:-40px; border-radius:3px; display:none; background:#fff; text-align: center; } .oap-operation>span{ display:block; width:100%; height:22px; line-height:22px; } .oap-operation>span:hover{ background:#f0f0f0; } .Classification1{ position:relative; } .Classification2{ display:none; width:50px; height:auto; position: absolute; top:10px; left:42px; border-radius:3px; overflow:hidden; } .Classification1:hover .Classification2{ display:block; } /* end */ ~~~ 添加html 路径:D:\ireport365\ireport365.war\template\designer\main.html 在标签div上面添加 同级div 在图的上面面添加 ![](https://box.kancloud.cn/970a88698c9d5f49a903ca3efc6019f7_1001x322.png) ~~~ <!-- 分析按钮 --> <div id="compTitleBtn" class="compTitleBtn" n-show="component.config.showOap"> 分析 <div class="oap-box" style="height:auto;"> <div class="oap-box-tab" style=""> <span class="oap-box-tab-active">维度(X轴)</span> <span class="">度量(Y轴)</span> </div> <div class="oap-box-content" style="display:block;"> <span class="oap-box-content-fx">用户名 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation"> <span class="oap-operation-item Classification1">排序 <div class="Classification2"> <span class="oap-operation-item" style="display:block;">升序</span> <span class="oap-operation-item" style="display:block;">降序</span> </div> </span> <span class="oap-operation-item rollUp" style="position:relative;">上卷</span> <span class="oap-operation-item">下转</span> <span class="oap-operation-item">切片</span> <span class="oap-operation-item">切面</span> </div> </span> <span class="oap-box-content-fx">职位 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation"> <span class="oap-operation-item">排序</span> <span class="oap-operation-item rollUp">上卷</span> <span class="oap-operation-item">下转</span> <span class="oap-operation-item">切片</span> <span class="oap-operation-item">切面</span> </div> </span> <span class="oap-box-content-fx">区域 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation"> <span class="oap-operation-item">排序</span> <span class="oap-operation-item rollUp">上卷</span> <span class="oap-operation-item">下转</span> <span class="oap-operation-item">切片</span> <span class="oap-operation-item">切面</span> </div> </span> <span class="oap-box-content-fx">区域 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation"> <span class="oap-operation-item">排序</span> <span class="oap-operation-item rollUp">上卷</span> <span class="oap-operation-item">下转</span> <span class="oap-operation-item">切片</span> <span class="oap-operation-item">切面</span> </div> </span> </div> <div class="oap-box-content" style=""> <span class="oap-box-content-fx">用户名2 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation"> <span class="oap-operation-item Classification1">排序 <div class="Classification2"> <span class="oap-operation-item" style="display:block;">升序</span> <span class="oap-operation-item" style="display:block;">降序</span> </div> </span> <span class="oap-operation-item Classification1">统计 <div class="Classification2"> <span class="oap-operation-item" style="display:block;">汇总</span> <span class="oap-operation-item" style="display:block;">平均</span> <span class="oap-operation-item" style="display:block;">最大</span> <span class="oap-operation-item" style="display:block;">最小</span> </div> </span> </div> </span> <span class="oap-box-content-fx">职位2 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation"> <span class="oap-operation-item">排序</span> <span class="oap-operation-item">统计</span> </div> </span> <span class="oap-box-content-fx">区域2 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation"> <span class="oap-operation-item">排序</span> <span class="oap-operation-item">统计</span> </div> </span> <span class="oap-box-content-fx">区域2 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation"> <span class="oap-operation-item">排序</span> <span class="oap-operation-item">统计</span> </div> </span> </div> <div class="oap-box-content" style="height:auto;"> <span> <input type="checkbox" /> 用户名1 </span> <span> <input type="checkbox" /> 职位 </span> <span> <input type="checkbox" /> 区域 </span> <span> <input type="checkbox" /> 区域 </span> <div style="width:100%;height:30px;line-height:30px;text-align:right;color: #2990ea"> <span style="margin-right:10px;">保存</span> <span>取消</span> </div> </div> </div> </div> <script> $(document).off('click','.compTitleBtn').on('click','.compTitleBtn',function(event){ event.stopPropagation(); var _self = $(this) if(_self.find(".oap-box").is(":hidden")){ _self.find('.oap-box').show(); }else{ _self.find('.oap-box').hide(); } }) $(document).off('click','.oap-box-tab>span').on('click','.oap-box-tab>span',function(event){ event.stopPropagation(); var _self = $(this); var _index = _self.index(); _self.parent().find('span').attr('class',''); _self.attr('class','oap-box-tab-active'); _self.parent().parent().find('.oap-box-content').hide(); _self.parent().parent().find('.oap-box-content').eq(_index).show(); _self.parent().parent().find('.oap-operation').hide(); console.log(_self.parent().parent().find('.oap-operation')) }) $(document).off('click','.oap-box-content>span').on('click','.oap-box-content>span',function(event){ event.stopPropagation(); var _self = $(this); _self.parent().find('span').css({'background':'none'}); _self.css({'background':'rgba(0,0,0,0.1)'}); if(_self.find("input[type='checkbox']").is(':checked')){ _self.find("input[type='checkbox']").prop("checked",false) }else{ _self.find("input[type='checkbox']").prop("checked",true); } }) $(document).off('click','.oap-box-content-fx').on('click','.oap-box-content-fx',function(event){ event.stopPropagation(); var _self = $(this) $('.oap-operation').hide(); _self.find('.oap-operation').show(); }) $(document).off('click','.rollUp').on('click','.rollUp',function(event){ event.stopPropagation(); var _self = $(this) _self.parent().parent().parent().parent().find('.oap-box-content').hide(); _self.parent().parent().parent().parent().find('.oap-box-content').eq(2).show(); }) </script> ~~~ 分享页的HTML 路径:D:\ireport365\ireport365.war\WEB-INF\classes\system-resource\report-template.html 如图的位置 ![](https://box.kancloud.cn/46d24e677e05ea1907933dd429c163f5_921x525.png) ~~~ <!-- 分析按钮 --> <div id="compTitleBtn" class="compTitleBtn" ng-show="component.config.showOap" ng-style="{'background':component.config.oapBackgroundColor,'width':component.config.oapWidth,'color':component.config.oapFontColor}"> 分析 <div class="oap-box" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}"> <div class="oap-box-tab" style=""> <span class="oap-box-tab-active">维度(X轴)</span> <span class="">度量(Y轴)</span> </div> <div class="oap-box-content" style="display:block;" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}"> <span class="oap-box-content-fx" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}">用户名 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor,'border-color':component.config.oapBackgroundColor}"> <span class="oap-operation-item Classification1">排序 <div class="Classification2" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}"> <span class="oap-operation-item" style="display:block;">升序</span> <span class="oap-operation-item" style="display:block;">降序</span> </div> </span> <span class="oap-operation-item rollUp">上卷</span> <span class="oap-operation-item">下转</span> <span class="oap-operation-item">切片</span> <span class="oap-operation-item">切面</span> </div> </span> <span class="oap-box-content-fx" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}">职位 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor,'border-color':component.config.oapBackgroundColor}"> <span class="oap-operation-item">排序</span> <span class="oap-operation-item rollUp">上卷</span> <span class="oap-operation-item">下转</span> <span class="oap-operation-item">切片</span> <span class="oap-operation-item">切面</span> </div> </span> <span class="oap-box-content-fx" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}">区域 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor,'border-color':component.config.oapBackgroundColor}"> <span class="oap-operation-item">排序</span> <span class="oap-operation-item rollUp">上卷</span> <span class="oap-operation-item">下转</span> <span class="oap-operation-item">切片</span> <span class="oap-operation-item">切面</span> </div> </span> <span class="oap-box-content-fx" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}">区域 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor,'border-color':component.config.oapBackgroundColor}"> <span class="oap-operation-item">排序</span> <span class="oap-operation-item rollUp">上卷</span> <span class="oap-operation-item">下转</span> <span class="oap-operation-item">切片</span> <span class="oap-operation-item">切面</span> </div> </span> </div> <div class="oap-box-content" style="" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}"> <span class="oap-box-content-fx" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}">用户名2 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}"> <span class="oap-operation-item Classification1">排序 <div class="Classification2" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}"> <span class="oap-operation-item" style="display:block;">升序</span> <span class="oap-operation-item" style="display:block;">降序</span> </div> </span> <span class="oap-operation-item Classification1">统计 <div class="Classification2" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}"> <span class="oap-operation-item" style="display:block;">汇总</span> <span class="oap-operation-item" style="display:block;">平均</span> <span class="oap-operation-item" style="display:block;">最大</span> <span class="oap-operation-item" style="display:block;">最小</span> </div> </span> </div> </span> <span class="oap-box-content-fx" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}">职位2 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}"> <span class="oap-operation-item">排序</span> <span class="oap-operation-item">统计</span> </div> </span> <span class="oap-box-content-fx" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}">区域2 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}"> <span class="oap-operation-item">排序</span> <span class="oap-operation-item">统计</span> </div> </span> <span class="oap-box-content-fx" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}">区域2 <i style="float:right;margin-top:5px;margin-right:8px;" class="fa fa-ellipsis-v"></i> <div class="oap-operation" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}"> <span class="oap-operation-item">排序</span> <span class="oap-operation-item">统计</span> </div> </span> </div> <div class="oap-box-content" style="" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}"> <span ng-style="{'color':component.config.oapFontColor}"> <input type="checkbox" /> 用户名2 </span> <span ng-style="{'color':component.config.oapFontColor}"> <input type="checkbox" /> 职位2 </span> <span ng-style="{'color':component.config.oapFontColor}"> <input type="checkbox" /> 区域2 </span> <span ng-style="{'color':component.config.oapFontColor}"> <input type="checkbox" /> 区域2 </span> <div style="width:100%;height:30px;line-height:30px;text-align:right;" ng-style="{'background':component.config.oapBackgroundColor,'color':component.config.oapFontColor}"> <span style="margin-right:10px;">保存</span> <span>取消</span> </div> </div> </div> </div> <script> $(document).off('click','.compTitleBtn').on('click','.compTitleBtn',function(event){ event.stopPropagation(); var _self = $(this) if(_self.find(".oap-box").is(":hidden")){ _self.find('.oap-box').show(); }else{ _self.find('.oap-box').hide(); } }) $(document).off('click','.oap-box-tab>span').on('click','.oap-box-tab>span',function(event){ event.stopPropagation(); var _self = $(this); var _index = _self.index(); _self.parent().find('span').attr('class',''); _self.attr('class','oap-box-tab-active'); _self.parent().parent().find('.oap-box-content').hide(); _self.parent().parent().find('.oap-box-content').eq(_index).show(); _self.parent().parent().find('.oap-operation').hide(); console.log(_self.parent().parent().find('.oap-operation')) }) $(document).off('click','.oap-box-content>span').on('click','.oap-box-content>span',function(event){ event.stopPropagation(); var _self = $(this); _self.parent().find('span').css({'background':'none'}); _self.css({'background':'rgba(0,0,0,0.1)'}); if(_self.find("input[type='checkbox']").is(':checked')){ _self.find("input[type='checkbox']").prop("checked",false) }else{ _self.find("input[type='checkbox']").prop("checked",true); } }) $(document).off('click','.oap-box-content-fx').on('click','.oap-box-content-fx',function(event){ event.stopPropagation(); var _self = $(this) $('.oap-operation').hide(); _self.find('.oap-operation').show(); }) $(document).off('click','.rollUp').on('click','.rollUp',function(event){ event.stopPropagation(); var _self = $(this) _self.parent().parent().parent().parent().find('.oap-box-content').hide(); _self.parent().parent().parent().parent().find('.oap-box-content').eq(2).show(); }) </script> <!-- end --> ~~~ 控制端 基本里面添加选项 面板 路径:D:\ireport365\ireport365.war\js\enduser\designer\vs-component-engine.js 代码搜索 B.groups.push ~~~ B.groups.push({ name: "fx", title: { text: "分析" }, elements: [{ title: "分析显示", type: "switch", bind: "showOap", on: vsLang.on, off: vsLang.off },{ title: "背景颜色", type: "colorpicker", bind: "oapBackgroundColor" },{ title: "字体颜色", type: "colorpicker", bind: "oapFontColor" },{ title: "按钮宽度", type: "configSlide", bind: "oapWidth", config: { slideStart: 60, slideEnd: 200 } }] }); ~~~ ![](https://box.kancloud.cn/99c15636cc2f397bcb72c2e22bca3705_651x707.png) 监听的位置 代码 路径D:\ireport365\ireport365.war\js\enduser\designer\vs-designer-component.js 搜索图上面的字符 component.config.showTitle 写在他的下面 ![](https://box.kancloud.cn/262869bc53d6d4d193b8ab1775e7d6c8_1070x867.png) ~~~ // 分析监听代码 var compTitleBtn = $element.find("#compTitleBtn"); var oapBox = compTitleBtn.find(".oap-box"); var oapBoxContent = compTitleBtn.find(".oap-box-content"); var oapOperation = compTitleBtn.find(".oap-operation"); var Classification2 = compTitleBtn.find(".Classification2"); console.log(Classification2) compTitleBtn.hide(); // 测试监听分析开关 $scope.$watch("component.config.showOap", function(newValue) { $scope.component.config.showOap = newValue; console.log(newValue) console.log($scope.component.config.showOap) if (newValue) { $timeout(function() { compTitleBtn.show() }, 200) }else{ $timeout(function() { compTitleBtn.hide() }, 200) } }); // 宽度 $scope.$watch("component.config.oapWidth", function(newValue) { if (newValue) { var newValue = parseInt(newValue); $scope.component.config.oapWidth = newValue+'px'; compTitleBtn.width(newValue+'px') } }); // 背景颜色 $scope.$watch("component.config.oapBackgroundColor", function(newValue, oldValue) { if (newValue != null && oldValue != null) { $scope.component.config.oapBackgroundColor = newValue; compTitleBtn.css({'background':newValue}); oapBox.css({'background':newValue}); oapBoxContent.css({'background':newValue}); oapOperation.css({'background':newValue,'borderColor':newValue}); Classification2.css({'background':newValue,'borderColor':newValue}) } }); // 字体颜色 $scope.$watch("component.config.oapFontColor", function(newValue, oldValue) { if (newValue != null && oldValue != null) { $scope.component.config.oapFontColor = newValue; compTitleBtn.css({'color':newValue}) oapBoxContent.find('span').css({'color':newValue}); oapOperation.css({'color':newValue}); } }); // 分析监听代码结束end ~~~ 全部效果图如下 分享页效果 ![](https://box.kancloud.cn/380e1f0608df206f346cf625022e174d_1068x290.png) 设计页效果 ![](https://box.kancloud.cn/c2d0236748b3c54d4f0c946197fe9985_1006x473.png) 设计配置面板效果 ![](https://box.kancloud.cn/0adbaa5305a8afe53aa0acce4cbff753_383x597.png) ps jq只处理视图 view 和数据没有关系