vs-component-basic.js
第一步
~~~
{
name: "",
type: "human",
coverImage: contextPath + "/images/componenttypes/" + locale + "/basic/zh_b0070.png",
coverImageWidth: "50%",
tip: "人体结构图"
}
~~~
第二部设置初始化高度和宽度
添加整个自定义服务
~~~
// 人体结构图
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
在这里添加静态资源
`_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">`
- video
- treemap
- mian.html文件注释
- 配置项tab
- 配置项属性
- internalRefreshAxisMdelData函数梳理
- 函数配置项-engine文件
- 替换数据源流程
- design.js
- 树图
- 下钻 废弃
- 人体图
- 下钻地图
- 行列互转
- 预览样式
- logo旁边的报表名
- echarts 组件生成图片
- 数据集样式
- 头部 黑色head
- 手机 ipad 图片
- k线图部分
- 平台管理css样式
- 目录css和平板的边距
- 设计页-数据源-目录
- 数据集 - 查看数据表 -按钮和目录样式
- 报表列表页按钮css
- 角色管理页按钮css
- 推送通知按钮css
- 子账号按钮css
- 数据连接
- openlayers地图线路图
- openlayers4_map_designer.js
- openlayers4_map_view.js
- 说明
- 常用图标小bug
- echarts 气泡地图
- echarts 线路轨迹图
- 导出pdf
- 可视化sql--css
- 表格滚动
- 主题色
- 时间轴
- 分享弹框
- 管理平台header和菜单
- 报表平台和菜单
- 初始化组件颜色
- 其他弹框
- olap分析样式-废弃
- 3d地图柱状图
- 关系图
- olap分析
- 地区地图
- k线图相关属性设置
- 世界地图
- 时间轴（new）
- 选择省份下转地图
- 选择省市飞线地图
- 面积预警地图默认颜色
- 组件覆层开关组件
- 汽车仪表盘bug
- 雷达图bug修复不能分享的问题
- 饼状 条形图 自动播放
- 临时用
- 自动轮播
- 方形元素 按钮浮动报错
- 面积预警地图整合可选择省市区
- 下钻地图添加返回按钮
- 下钻地图修复预警bug
- 基本时间组件
- 添加时钟组件
- 3d地球组件
- 盒须图
- 组件加载动画
- 报表背景渐变色
- 主题模板
- 没用
- 3机房第三方组件
- 设计
- 分享
- 3d机房需要的静态资源
- cesium地球需要的文件以及样式
- cesium地球
- 设计页
- 分享页
- 图标条形图
- 世豪-前端代码整理
- component.css 文件新添加
- 杂项
- index.jsp
- designer.css 样式暂时不整理 里面比较杂
- vs-common.js 新加生成html2canvas pdf
- vs-component-basic.js 完
- vs-component-datasource.js 完
- vs-component-engine.js 完
- vs-component-widget-grid.js 完
- vs-component-widget-square.js 完
- vs-designer.js 完
- vs-designer-component.js 完
- vs-designer-report.js 完
- vs-designer-reportpage.js 完
- vs-component-echarts.js 完
- main.html 完
- component.html 新加组件设置页模板
- 以前的报表页设置控制器---做个记录
- 大概修改过的代码
- 2019-5-8 修改皮肤控制器
- 选择模板
- 桑基图2019-11-20
- bug 修正 2019-11-21
- 插图柱状图
- cesiumchart组件
- gis 地图 联动 弹框 图标
- 动态面积图添加按钮类配置项
- 玫瑰图形组件
- cesium 图形 和three.js 冲突的bug
- gis 地图 默认图层
- 网格标签
- gis 点图 值域
- gis 面图 值域
- 按钮图标添加提示框
- 百度地图
- 剩余的组件
- gulp说明文档
- 色斑图加透明