组件覆层开关组件 · 代码梳理

这个暂时不要添加了 css代码没整理呢路径D:\ireport365\ireport365.war\js\enduser\designer\vs-component-basic.js 1添加组件 ~~~ { name: "", type: "assemblyList", coverImage: contextPath + "/images/componenttypes/" + locale + "/basic/zh_b0080.png", coverImageWidth: "50%", tip: "组件列表" } ~~~ 2默认大小 ~~~ case "assemblyList": a.sizeY = 8; a.sizeY = 10; break; ~~~ 3自定义服务 ~~~ vsPluginComponentModule.factory("$vcPlugin_basic_assemblyList", ["$vsPluginRegister", function (a) { var b = { //配置面板中显示[数据]配置 showDataCategory: false, //配置面板中显示[标题]配置 showTitleCategory: true, //配置面板中显示[边框]配置 showBorderCategory: true, //配置面板中显示[基本]配置 showBasicCategory: true, //配置面板中显示[浮动]配置 showFixedCategory: true, //配置面板中显示[事件]配置 showEventCategory: false, init: function(scope, element, component, $compile){ scope.element = element; scope.component = component; //开启页面过滤 component.config.pageFilter = true; //控件的图形维度数量设置为1 scope.component.config.chartDimensionCount = 1; component.config.selectedItem = null; // console.log(scope) component.config.fontColor = '#ff8800'; component.config.borderColor = '#ff2580'; }, buildDataDescription: function(f, i, h, e, g) {}, refreshChartView: function(k, h, e, g, j) { // 初始化数组 var list = []; // 自身组件 var comp = k.component // 取父级数据集 var componentsList = k.$parent.currentReportPage.designContent.components; // console.log(componentsList) // 遍历组件集 for (var i = 0; i < componentsList.length; i++) { if (componentsList[i].id === comp.id) { continue }else{ list.push({ 'id':componentsList[i].id, 'title':componentsList[i].title, }) } } // console.log(list) k.component.list = list; // h.empty(); var d = []; d.push('<div class="component-box" style="width:100%;height:100%;overflow:hidden;">'); d.push('<li class="component-box-content" ng-style="{\'border-bottom-color\':component.config.borderColor}" ng-repeat="list in component.list">'); d.push('<span class="component-title" ng-style="{color:component.config.fontColor}"><i ng-class="item" class="fa fa-tag" style="margin:0px 3px;"></i>{{list.title}}</span>'); d.push('<span class="component-switch">'); d.push('<input type="checkbox" dataid="{{list.id}}" id="{{list.id}}_1" ng-click="onComponentClickIschecked(list)" class="simple_1">'); d.push('<label for="{{list.id}}_1" class="green"></label>'); d.push('</span>'); d.push('</li>'); d.push('</div>'); var i = g(d.join(""))(k); h.html(i); k.onComponentClickIschecked = (v)=>{ var isShow = $('#'+v.id+'_1').is(':checked') if(isShow){ $('#'+v.id).css({'visibility':'hidden'}) }else{ $('#'+v.id).css({'visibility':'visible'}) } } }, buildChartDescription: function (m, g, k, h, l, o) { var e = { name: "time", title: '配置项', groups: [] }; k.description.categories.push(e); m.component = k; e.groups.push({ name: "", title: { text: "配置" }, elements: [{ title: '字体颜色', type: "colorpicker", bind: "fontColor" }, { title: vsLang.offset_y, title: '线颜色', type: "colorpicker", bind: "borderColor" }] }); e.groups.push({ title: { text: "", show: false }, elements: [{ title: vsLang.reload_component, type: "button", btnClass: "btn-success", onClick: function() { b.refreshChartView(m, g, k, h, o) } }] }); m.$watch("component.config.fontColor", function (w, u) { var p = m.component.config; p.fontColor = w; // console.log(w) b.refreshChartView(m, g, k, h, o); }); m.$watch("component.config.borderColor", function (w, u) { var p = m.component.config; p.borderColor = w; b.refreshChartView(m, g, k, h, o); }); b.refreshChartView(m, g, k, h, o); } }; a.register("basic", "assemblyList", b); return null }]); ~~~ 路径D:\ireport365\ireport365.war\WEB-INF\classes\report-resource\design.js ~~~ case "assemblyList": var refreshChartView = function(scope, element, component, $compile) { // 初始化数组 // console.log(scope.component.list) var list = []; // 自身组件 var comp = scope.component // 取父级数据集 var componentsList =scope.component.list; // console.log(componentsList) // 遍历组件集 for (var i = 0; i < componentsList.length; i++) { if (componentsList[i].id === comp.id) { continue }else{ list.push({ 'id':componentsList[i].id, 'title':componentsList[i].title, }) } } // console.log(list) scope.component.list = list; // h.empty(); var d = []; d.push('<div class="component-box" style="width:100%;height:100%;overflow:hidden;">'); d.push('<li class="component-box-content" ng-style="{\'border-bottom-color\':component.config.borderColor}" ng-repeat="list in component.list">'); d.push('<span class="component-title" ng-style="{color:component.config.fontColor}"><i ng-class="item" class="fa fa-tag" style="margin:0px 3px;"></i>{{list.title}}</span>'); d.push('<span class="component-switch">'); d.push('<input type="checkbox" dataid="{{list.id}}" id="{{list.id}}_1" ng-click="onComponentClickIschecked(list)" class="simple_1">'); d.push('<label for="{{list.id}}_1" class="green"></label>'); d.push('</span>'); d.push('</li>'); d.push('</div>'); var i = $compile(d.join(""))(scope); element.html(i); scope.onComponentClickIschecked = (v)=>{ var isShow = $('#'+v.id+'_1').is(':checked') if(isShow){ $('#'+v.id).css({'visibility':'hidden'}) }else{ $('#'+v.id).css({'visibility':'visible'}) } } }; refreshChartView(scope, element, component, $compile); break; } }; ~~~