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說明文檔
- 色斑圖加透明