ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
vs-component-basic.js 第一步 ~~~ { name: "", type: "human", coverImage: contextPath + "/images/componenttypes/" + locale + "/basic/zh_b0070.png", coverImageWidth: "50%", tip: "人体结构图" } ~~~ 第二部设置初始化高度和宽度 ![](https://box.kancloud.cn/288b3fe74b731dfa26910ec4a6f0c8a4_347x526.png) 添加整个自定义服务 ~~~ // 人体结构图 vsPluginComponentModule.factory("$vcPlugin_basic_human", ["$vsPluginRegister", function (a) { // console.log(a) var b = { //配置面板中显示[数据]配置 showDataCategory: true, //配置面板中显示[标题]配置 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; }, // 构建数据描述,此方法中对控件的数据进行处理 buildDataDescription: function (dataDescription, scope, element, component, $compile) { console.log(scope) scope.$on(event_refreshBindingData, function (target, param) { //如果刷新数据事件的发出者是当前控件,不处理本次通知 if(param.component != null && scope.component.id === param.component.id){ return; } // console.log(scope.component.config.datasourceConfig) var dimensions = scope.component.config.datasourceConfig.dimensions; var measures = scope.component.config.datasourceConfig.measures; if (dimensions && dimensions.length > 0 && measures && measures.length > 0) { scope.queryModelData({ eventParam: param, dimensions: dimensions, measures: measures, tableKey: scope.component.config.datasourceConfig.metadataConfig.metadataTable.key, onQuerySuccess: function (response) { if (response.data.success) { console.log(response.data.success) b.refreshChartView(scope, element, component, $compile) } else { toaster.error({ body: response.data.message }) } }, onError: function () { toaster.error({ body: vsLang.connection_failed }) } }) } }); }, refreshChartView: function(scope, element, component, $compile) { var dimensions = component.config.datasourceConfig.dimensions; //从context中获得控件数据 var data = component.context.data; //获取图形维度默认值 var initValue = scope.parseInitValue(); //过滤器中的选项 var optionItems = []; //当前选中项 var selectedItem = null; //将维度值设置为过滤器中的选项 for(var i = 0; i < data.length; i++){ var value = data[i][dimensions[dimensions.length-1].name]; var item = { label: ""+value, value: ""+value }; //检查值是否是合计,中文环境下是'合计',英文环境下是"All" if(value != null && value === vsLang.heji){ //获取合计别名 item.label = scope.getDimensionSummaryAlias(dimensions[dimensions.length-1].name); } optionItems.push(item); } //检查是否配置了维度默认值 if(initValue != null && component.context.first_render_init_value == null){ component.context.first_render_init_value = initValue; selectedItem = { value: initValue, label: initValue }; }else{ //如果没有配置维度默认值,尝试从缓存中获取维度值作为默认选中 var cachedSelectedValue = scope.getCachedDimensionValue(dimensions[dimensions.length-1].name); for(var i = 0; i < optionItems.length; i++){ if(""+optionItems[i].value === ""+cachedSelectedValue){ selectedItem = optionItems[i]; break; } } } scope.component.config.optionItems = optionItems; //如果默认选中的值为空,则将第一个值作为默认选中 if(selectedItem == null && optionItems.length > 0){ selectedItem = optionItems[0]; } component.config.selectedItem = selectedItem; //将选中的值缓存起来 scope.cacheDimensionValue(dimensions[dimensions.length-1].name, selectedItem == null ? null : selectedItem.value); //选择项被选中时,发出过滤通知 $(".signIndex").unbind("click"); $('.signIndex').on('click',function(){ $(this).css({'background':'yellow'}).siblings().css({'background':'red'}) var value = $(this).attr('thesign') var reg = /([<br>][^/]+)$/; var value = value.replace(reg, ""); scope.cacheDimensionValue(scope.getLastDimension().name, value); scope.notifyDimensionValueFilterEvent({ queryConditionDimensions: true }); }) // end var dimensions = component.config.datasourceConfig.dimensions; var measures = component.config.datasourceConfig.measures; var data = component.context.data; if (data == null) { return } var measureIdx = 0; if (component.config.receiveMeasureLink != null && component.config.receiveMeasureLink === true) { var newMeasures = scope.getSelectedLinkMeasure(component, component.config.datasourceConfig.measures); for (var i = 0; i < measures.length; i++) { if (newMeasures[i] != null) { measureIdx = i; break } } } var serieData = []; var legendData = []; for (var i = 0; i < data.length; i++) { var dimValue = data[i][dimensions[dimensions.length - 1].name]; if (VSUtils.isEmpty(dimValue)) { continue } serieData.push({ name: dimValue, value: data[i][measures[measureIdx].name] == null ? 0 : data[i][measures[measureIdx].name] }); legendData.push(dimValue) } if (serieData.length == 0) { serieData = [""]; legendData = [""] } // console.log(serieData) // 处理数据 var arr2=[{left: 202.25, top: 115, sign: "心脏", name: "心脏"},{left: 312.25, top: 250, sign: "手", name: "手"},{left: 145.25, top: 466, sign: "右脚", name: "右脚"},{left: 244.5, top: 461, sign: "左脚", name: "左脚"},{left: 204.5, top: 37, sign: "头部", name: "头部"}]; var merge = [], kvIndex = {}; for (var i = 0; i < serieData.length; i++) { for (var j = 0; j < arr2.length; j++) { if (serieData[i].name == arr2[j].name) { var item if (kvIndex[serieData[i].name] == undefined) { kvIndex[serieData[i].name] = merge.length; item = {}; for (var attr in serieData[i]) item[attr] = serieData[i][attr]; merge[kvIndex[serieData[i].name]] = item; } else item = merge[kvIndex[serieData[i].name]]; for (var attr in arr2[j]) item[attr] = arr2[j][attr]; } } } // 组件api $.sign.bindSign('.signx');//初始化 $.sign.loadingSign(merge);//载入标记数据 }, // 构建图形描述,此方法中定义控件的配置面板 buildChartDescription: function (h, f, c, e) { // console.log(c.description) console.log(h) // 组件宽度盖度 h.calculateBackgroundSize = function (i) { return f.width() > f.height() ? "auto 100%" : "100% auto" }; // html模板 var html = []; html.push('<div class="imagebox signx" id="signx" style="position:relative;">') html.push('<img src="/images/singn/renti.jpg">') html.push('</div>') var g = e(html.join(""))(h); // 插入 f.append(g); // 组件api // $.sign.bindSign('#signx');//初始化 $.sign.setSignColor('red'); //设置标记框颜色 $.sign.setBodyColor('rgba(255,255,255,0.5)'); //设置提示背景颜色 $.sign.setFontColor('#000');//设置字体颜色 var m=$.sign.getSignMessage();//获取所有标记数据,返回为数组 // $.sign.loadingSign(merge);//载入标记数据 } }; // 注册组件 a.register("basic", "human", b); return null }]); ~~~ design.js 文件 搜索video 在下面写以下代码 ~~~ case "human": // dom的大小 scope.calculateBackgroundSize = function (dom) { return element.width() > element.height() ? "auto 100%" : "100% auto" }; var component = scope.component; // component.config.selectedItem = null; scope.isSelectedItem = function(item){ return component.config.selectedItem != null && ""+item.value === ""+component.config.selectedItem.value; } // 模板 var html = []; html.push('<div class="imagebox signx" id="signx" style="position:relative;">') html.push('<img src="/images/singn/renti.jpg">') html.push('</div>') // 注入模板 var el = $compile(html.join(""))(scope); // 插入html element.append(el); scope.$on(event_refreshBindingData, function(target, param) { console.log("响应刷新") //如果刷新数据事件的发出者是当前控件,不处理本次通知 if(param.component != null && scope.component.id === param.component.id){ return; } var dimensions = component.config.datasourceConfig.dimensions; var measures = component.config.datasourceConfig.measures; if (dimensions && dimensions.length > 0 && measures && measures.length > 0) { scope.queryModelData({ eventParam: param, dimensions: dimensions, measures: measures, tableKey: component.config.datasourceConfig.metadataConfig.metadataTable.key, onQuerySuccess: function(response) { if (response.data.success) { console.log(response.data.success) scope.refreshChartView(scope, element, component, $compile) } else { console.log(response.data.message) } }, onError: function() {} }) } }); scope.$on(event_chartDimensionValueChange, function(s, event) { if (event.source.dimension.name === scope.getLastDimension().name) { component.config.selectedItem = null; for (var i = 0; i < component.config.optionItems.length; i++) { if (component.config.optionItems[i].value === event.source.value) { console.log(event.source.value) var value = event.source.value; $(".signIndex").css({'background':'red'}) $("[thesign*='"+value+"']").css({'background':'yellow'}); // console.log($("[thesign*='"+value+"']")) // component.config.selectedItem = component.config.optionItems[i]; // console.log(component.config.selectedItem) break } } } }); //刷新控件渲染 scope.refreshChartView = function(scope, element, component, $compile) { var dimensions = component.config.datasourceConfig.dimensions; //从context中获得控件数据 var data = component.context.data; //获取图形维度默认值 var initValue = scope.parseInitValue(); //过滤器中的选项 var optionItems = []; //当前选中项 var selectedItem = null; //将维度值设置为过滤器中的选项 for(var i = 0; i < data.length; i++){ var value = data[i][dimensions[dimensions.length-1].name]; var item = { label: ""+value, value: ""+value }; //检查值是否是合计,中文环境下是'合计',英文环境下是"All" if(value != null && value === vsLang.heji){ //获取合计别名 item.label = scope.getDimensionSummaryAlias(dimensions[dimensions.length-1].name); } optionItems.push(item); } //检查是否配置了维度默认值 if(initValue != null && component.context.first_render_init_value == null){ component.context.first_render_init_value = initValue; selectedItem = { value: initValue, label: initValue }; }else{ //如果没有配置维度默认值,尝试从缓存中获取维度值作为默认选中 var cachedSelectedValue = scope.getCachedDimensionValue(dimensions[dimensions.length-1].name); for(var i = 0; i < optionItems.length; i++){ if(""+optionItems[i].value === ""+cachedSelectedValue){ selectedItem = optionItems[i]; break; } } } scope.component.config.optionItems = optionItems; //如果默认选中的值为空,则将第一个值作为默认选中 if(selectedItem == null && optionItems.length > 0){ selectedItem = optionItems[0]; } component.config.selectedItem = selectedItem; //将选中的值缓存起来 scope.cacheDimensionValue(dimensions[dimensions.length-1].name, selectedItem == null ? null : selectedItem.value); // start var dimensions = component.config.datasourceConfig.dimensions; var measures = component.config.datasourceConfig.measures; var data = component.context.data; if (data == null) { return } // 数据处理 var measureIdx = 0; var serieData = []; var legendData = []; for (var i = 0; i < data.length; i++) { var dimValue = data[i][dimensions[dimensions.length - 1].name]; if (VSUtils.isEmpty(dimValue)) { continue } serieData.push({ name: dimValue, value: data[i][measures[measureIdx].name] == null ? 0 : data[i][measures[measureIdx].name] }); legendData.push(dimValue) } if (serieData.length == 0) { serieData = [""]; legendData = [""] } var arr2=[{left: 202.25, top: 115, sign: "心脏", name: "心脏"},{left: 312.25, top: 250, sign: "手", name: "手"},{left: 145.25, top: 466, sign: "右脚", name: "右脚"},{left: 244.5, top: 461, sign: "左脚", name: "左脚"},{left: 204.5, top: 37, sign: "头部", name: "头部"}]; var merge = [], kvIndex = {}; for (var i = 0; i < serieData.length; i++) { for (var j = 0; j < arr2.length; j++) { if (serieData[i].name == arr2[j].name) { var item if (kvIndex[serieData[i].name] == undefined) { kvIndex[serieData[i].name] = merge.length; item = {}; for (var attr in serieData[i]) item[attr] = serieData[i][attr]; merge[kvIndex[serieData[i].name]] = item; } else item = merge[kvIndex[serieData[i].name]]; for (var attr in arr2[j]) item[attr] = arr2[j][attr]; } } } // console.log(merge); $.sign.bindSign('.signx');//初始化 $.sign.setSignColor('red'); //设置标记框颜色 $.sign.setBodyColor('rgba(255,255,255,0.5)'); //设置提示背景颜色 $.sign.setFontColor('#000');//设置字体颜色 $.sign.loadingSign(merge);//载入标记数据 //选择项被选中时,发出过滤通知 $(".signIndex").unbind("click"); $('.signIndex').on('click',function(){ $(this).css({'background':'yellow'}).siblings().css({'background':'red'}) var value = $(this).attr('thesign') var reg = /([<br>][^/]+)$/; var value = value.replace(reg, ""); //将选中项的值缓存起来 scope.cacheDimensionValue(scope.getLastDimension().name, value); $timeout(function(){ scope.notifyDimensionValueFilterEvent({ queryConditionDimensions: true }); }); }) // $("[thesign*='"+value+"']").css({'background':'yellow'}).siblings().css({'background':'red'}) // $("[thesign*='手']").css({'background':'yellow'}).siblings().css({'background':'red'}) // console.log($("[thesign*='手']")) } break; ~~~ D:\ireport365\ireport365.war\WEB-INF\pages\enduser\designer\index.jsp 在这里添加静态资源 ![](https://box.kancloud.cn/d07fd1ce4e59b5dcf0853a113150f532_936x594.png) `_scripts.push({url: "/libs/js/jquery-plugin/jquery-singn/jquery.singn.min.js"});` 添加css `<link href="${pageContext.request.contextPath}/libs/js/jquery-plugin/jquery-singn/signStyle.css" rel="stylesheet">` D:\ireport365\ireport365.war\WEB-INF\classes\system-resource\report-template.html 这里添加静态资源 这个文件添加的东西 需要重新启动项目才能生效 不知什么原因 加js ``<script src="/libs/js/jquery-plugin/jquery-singn/jquery.singn.min.js"></script>`` css `<link rel="stylesheet" href="/libs/js/jquery-plugin/jquery-singn/signStyle.css">`