設計頁
文件名 js\enduser\designer\vs-component-widget-square.js
搜索 $vcPlugin_widget_w1050
如圖：
```
vsPluginComponentModule.factory("$vcPlugin_widget_w1050", ["$vsPluginRegister", "$vsDatasource", "$vsUtils", "toaster", function (a, e, d, c) {
var b = {
showBorderCategory: true,
showBasicCategory: true,
showFixedCategory: true,
showEventCategory: true,
buildDataDescription: function (h, k, j, g, i, f) {},
buildChartDescription: function (m, k, h, j, f,) {
m.element = k;
m.component = h;
if (h.config.has == null) {
h.config.has = true;
h.config.backgroundColor = "#ED7A39";
h.config.mainTitle = vsLang.sample_sales_analytics;
h.config.mainTitleColor = "#FFFFFF";
h.config.mainTitleSize = 16;
h.config.mainTitleAlign = "center";
h.config.mainTitleMarginLeft = 0;
h.config.mainTitleMarginTop = 0;
h.config.mainTitleMarginLeft = 0;
h.config.topIcon = "fa";
h.config.topIconColor = "#FFFFFF";
h.config.topIconSize = 16;
h.config.bottomIcon = "fa";
h.config.bottomIconColor = "#FFFFFF";
h.config.bottomIconSize = 16;
h.config.rightIcon = "fa";
h.config.rightIconColor = "#FFFFFF";
h.config.rightIconSize = 16;
h.config.leftIcon = "fa fa-shopping-bag";
h.config.leftIconColor = "#FFFFFF";
h.config.leftIconSize = 16;
h.config.toptext = '';
h.config.lefttext = '';
}
var i = [];
i.push("<div style='width:100%;height:100%;overflow:hidden;cursor:pointer;'>");
i.push("<table style='font-size:14px;height:100%;width:100%;'>");
i.push(" <tr>");
i.push(" <td valign='middle' style='vertical-align:middle;'>");
i.push(" <div ng-show=\"component.config.topIcon !== 'fa'\" ng-style=\"{'text-align':component.config.mainTitleAlign}\">");
i.push(" <i uib-tooltip='{{component.config.toptext}}' tooltip-class='icontooltip' ng-style=\"{'color': component.config.topIconColor, 'font-size': component.config.topIconSize}\" ng-class='component.config.topIcon'></i>");
i.push(" </div>");
i.push(" <div ng-style=\"{'text-align':component.config.mainTitleAlign, 'margin-top': component.config.mainTitleMarginTop}\">");
i.push(" <i uib-tooltip='{{component.config.lefttext}}' tooltip-class='icontooltip' ng-show=\"component.config.leftIcon !== 'fa'\" ng-style=\"{'color': component.config.leftIconColor, 'font-size': component.config.leftIconSize}\" ng-class='component.config.leftIcon'></i>");
i.push(" <span ng-style=\"{'color': component.config.mainTitleColor, 'font-size': component.config.mainTitleSize, 'margin-left': component.config.mainTitleMarginLeft, 'font-weight':component.config.fontStyle.bold?'bold':'normal', 'font-style':component.config.fontStyle.italic?'italic':'normal', 'text-decoration':component.config.fontStyle.underline?'underline':'normal'}\">{{compileVariableString(component.config.mainTitle)}}</span>");
i.push(" </div>");
i.push("</td>");
i.push(" </tr>");
i.push("</table>");
i.push("</div>");
var l = j(i.join(""))(m);
k.html(l);
var g = {
name: "text",
title: vsLang.settings,
groups: []
};
g.groups.push({
name: "text",
title: {
text: vsLang.title
},
elements: [{
title: vsLang.text,
type: "text-input-sl",
bind: "mainTitle"
}, {
title: vsLang.style,
type: "font-style",
bind: "fontStyle"
}, {
title: vsLang.size,
type: "configSlide",
bind: "mainTitleSize",
config: {
slideEnd: 100
}
}, {
title: vsLang.color,
type: "colorpicker",
bind: "mainTitleColor"
}, {
title: vsLang.vertical_spacing_short,
type: "configSlide",
bind: "mainTitleMarginTop",
config: {
slideEnd: 100
}
}, {
title: vsLang.horizontal_spacing_short,
type: "configSlide",
bind: "mainTitleMarginLeft",
config: {
slideEnd: 100
}
}]
});
g.groups.push({
name: "text",
title: {
text: vsLang.icon_left
},
elements: [{
title:'提示說明',
type: "text-input-sl",
bind: "lefttext"
},{
title: vsLang.icon,
type: "iconpicker",
bind: "leftIcon"
}, {
title: vsLang.size,
type: "configSlide",
bind: "leftIconSize",
config: {
slideEnd: 100
}
}, {
title: vsLang.color,
type: "colorpicker",
bind: "leftIconColor"
}]
});
g.groups.push({
name: "text",
title: {
text: vsLang.icon_top
},
elements: [{
title: '提示說明',
type: "text-input-sl",
bind: "toptext"
},{
title: vsLang.icon,
type: "iconpicker",
bind: "topIcon"
}, {
title: vsLang.size,
type: "configSlide",
bind: "topIconSize",
config: {
slideEnd: 100
}
}, {
title: vsLang.color,
type: "colorpicker",
bind: "topIconColor"
}]
});
h.description.categories.push(g)
}
};
a.register("widget", "w1050", b)
}]);
```
分享頁
搜索case"w1050":
替換下面的代碼
如圖：
```
var html = [];
html.push("<div style='width:100%;height:100%;overflow:hidden;'>");
html.push("<table style='font-size:14px;height:100%;width:100%;cursor:pointer;'>");
html.push(" <tr>");
html.push(" <td valign='middle' style='vertical-align:middle;'>");
html.push(" <div ng-show=\"component.config.topIcon !== 'fa'\" ng-style=\"{'text-align':component.config.mainTitleAlign}\">");
html.push(" <i uib-tooltip='{{component.config.toptext}}' ng-style=\"{'color': component.config.topIconColor, 'font-size': component.config.topIconSize}\" ng-class='component.config.topIcon'></i>");
html.push(" </div>");
html.push(" <div ng-style=\"{'text-align':component.config.mainTitleAlign, 'margin-top': component.config.mainTitleMarginTop}\">");
html.push(" <i uib-tooltip='{{component.config.lefttext}}' ng-show=\"component.config.leftIcon !== 'fa'\" ng-style=\"{'color': component.config.leftIconColor, 'font-size': component.config.leftIconSize}\" ng-class='component.config.leftIcon'></i>");
html.push(" <span ng-style=\"{'color': component.config.mainTitleColor, 'font-size': component.config.mainTitleSize, 'margin-left': component.config.mainTitleMarginLeft, 'font-weight':component.config.fontStyle.bold?'bold':'normal', 'font-style':component.config.fontStyle.italic?'italic':'normal', 'text-decoration':component.config.fontStyle.underline?'underline':'normal'}\">{{compileVariableString(component.config.mainTitle)}}</span>");
html.push(" </div>");
html.push(" </td>");
html.push(" </tr>");
html.push("</table>");
html.push("</div>");
var el = $compile(html.join(""))(scope);
element.append(el);
```
用法 報表頁樣式 可能需要用到
```
.tooltip-inner{
/* 提示框背景顏色 */
background: #fafafa !important;
/* 文字左右居中對齊 */
text-align: left !important;
/* 提示框字體顏色 */
color:#363636 !important;
border:1px solid #dedede;
/* 最大寬度 提示框 */
max-width: 400px !important;
white-space:normal;
word-break:break-all;
word-wrap:break-word;
}
.tooltip-arrow{
/* 三角的顏色 */
border-top-color: #ffffff !important;
opacity: 1;
}
.tooltip{
opacity: 1 !important;
}
```
- 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說明文檔
- 色斑圖加透明