組件覆層開關組件 · 代碼梳理

這個暫時不要添加了 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; } }; ~~~