路径：D:\ireport365\ireport365.war\js\enduser\designer\vs-component-basic.js
第一步添加组件对象
```
{
name: "",
type: "clock",
coverImage: contextPath + "/images/componenttypes/" + locale + "/basic/zh_b1000.png",
coverImageWidth: "50%",
tip: "时钟"
}
```
第二步默认大小
```
case "clock":
a.sizeX = 2;
a.sizeY = 20;
break;
```
第三步核心代码
```
vsPluginComponentModule.factory("$vcPlugin_basic_clock", ["$vsPluginRegister", "$timeout",
function (a, c) {
var b = {
showDataCategory: false,
showBorderCategory: true,
showBasicCategory: true,
showFixedCategory: true,
showEventCategory: false,
showTitleCategory: false,
buildDataDescription: function (e, h, g, d, f) {
h.$on(event_refreshBindingData,
function (k, l) {
d.context.orgData = d.context.data;
var i = d.config.datasourceConfig.dimensions;
var j = d.config.datasourceConfig.measures;
if (i && i.length > 0) {
if (!j) {
j = []
}
h.queryModelData({
eventParam: l,
dimensions: i,
measures: j,
tableKey: d.config.datasourceConfig.metadataConfig.metadataTable.key,
onQuerySuccess: function (m) {
if (m.data.success) {
if (d.context.data == null || d.context.data.length == 0) {
return
}
var o = {};
if (d.context.data != null && d.context.data.length > 0) {
for (var n = 0; n < i.length; n++) {
o[i[n].name] = d.context.data[0][i[n].name]
}
for (var n = 0; n < j.length; n++) {
o[j[n].name] = d.context.data[0][j[n].name]
}
}
c(function () {
h.valueMap = o
})
} else {
toaster.error({
body: m.data.message
})
}
},
onError: function () {
toaster.error({
body: vsLang.connection_failed
})
}
})
}
})
},
buildChartDescription: function (j, h, e, g) {
var d = {
name: "chart",
title: "配置",
groups: []
};
e.description.categories.push(d);
if (!e.config.is) {
e.config.is = true;
// 画布宽高
e.config.canvasWidth = 400;
e.config.canvasHeight = 400;
// 背景渐变色
e.config.backgroundColorOne = "#ff8800";
e.config.backgroundColorTow = "#65ff89";
// 线条的颜色
e.config.lineColor = "#ff8800";
// 线条宽度
e.config.lineWidth = 17;
// 线条阴影大小
e.config.shadowBlur = 15;
// 线条阴影颜色
e.config.shadowColor = "#ff8800";
// 文字的上下左右位置
e.config.weekLeft = 145;
e.config.weekTop = 170;
e.config.dataLeft = 125;
e.config.dataTop = 200;
e.config.timeLeft = 90;
e.config.timeTop = 230;
// 文字的大小和颜色
e.config.weekFontSize = 25;
e.config.weekFontColoe = "rgba(00, 255, 255, 1)";
e.config.dataFontSize = 25;
e.config.dataFontColoe = "rgba(00, 255, 255, 1)";
e.config.timeFontSize = 25;
e.config.timeFontColoe = "rgba(00, 255, 255, 1)";
}
if (j.component.config.showTitle == null) {
j.component.config.showTitle = false
}
j.component = e;
var f = [];
f.push("<canvas id='canvas'></canvas>");
var i = g(f.join(""))(j);
h.append(i);
// 时间
function degToRad(degree) {
var factor = Math.PI / 180;
return degree * factor;
}
var clearTime;
function renderTime() {
// console.log('11111')
// var domWidth = document.getElementById(e.id).offsetWidth;
// var domHeight = document.getElementById(e.id).offsetHeight;
j.component.context.canvas = $("#" + e.id + " #canvas")[0]
j.component.context.ctx = j.component.context.canvas.getContext("2d");
// console.log(j.component.context.ctx)
// 清空画布防止重叠
j.component.context.ctx.clearRect(0, 0, e.config.canvasWidth, e.config.canvasHeight);
// 设置宽高
canvas.width = e.config.canvasWidth;
canvas.height = e.config.canvasHeight;
// 线条颜色
j.component.context.ctx.strokeStyle = e.config.lineColor;
// 线条宽度
j.component.context.ctx.lineWidth = e.config.lineWidth;
// 线条的阴影大小
j.component.context.ctx.shadowBlur = e.config.shadowBlur;
// 线条阴影颜色
j.component.context.ctx.shadowColor = e.config.shadowColor
// 时间对象
var now = new Date();
var month = now.getMonth() + 1;
var year = now.getFullYear();
var day = now.getDate();
var a = new Array("日", "一", "二", "三", "四", "五", "六");
var week = now.getDay();
var weekStr = "星期" + a[week];
var today = now.toDateString();
var time = now.toLocaleTimeString();
var hrs = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var mil = now.getMilliseconds();
var smoothsec = sec + (mil / 1000);
var smoothmin = min + (smoothsec / 60);
//Background
gradient = j.component.context.ctx.createRadialGradient((e.config.canvasWidth / 2), (e.config.canvasWidth / 2), 5, (e.config.canvasWidth / 2), (e.config.canvasWidth / 2), (e.config.canvasWidth / 1.333));
gradient.addColorStop(0, e.config.backgroundColorOne);
gradient.addColorStop(1, e.config.backgroundColorTow);
j.component.context.ctx.fillStyle = gradient;
// ctx.fillStyle = 'rgba(00 ,00 , 00, 1)';
// 画布填充
j.component.context.ctx.fillRect(0, 0, e.config.canvasWidth, e.config.canvasHeight);
// 下面是开始画圆 x y 直径
//Hours
j.component.context.ctx.beginPath();
j.component.context.ctx.arc(e.config.canvasWidth / 2.222, e.config.canvasWidth / 2, e.config.canvasWidth / 2.222, degToRad(270), degToRad((hrs * 30) - 90));
j.component.context.ctx.stroke();
//Minutes
j.component.context.ctx.beginPath();
j.component.context.ctx.arc(e.config.canvasWidth / 2.222, e.config.canvasWidth / 2, e.config.canvasWidth / 2.666, degToRad(270), degToRad((smoothmin * 6) - 90));
j.component.context.ctx.stroke();
//Seconds
j.component.context.ctx.beginPath();
j.component.context.ctx.arc(e.config.canvasWidth / 2.222, e.config.canvasWidth / 2, e.config.canvasWidth / 3.333, degToRad(270), degToRad((smoothsec * 6) - 90));
j.component.context.ctx.stroke();
// week
j.component.context.ctx.font = e.config.weekFontSize + "px Helvetica";
j.component.context.ctx.fillStyle = e.config.weekFontColoe;
j.component.context.ctx.fillText(weekStr, e.config.weekLeft, e.config.weekTop);
//Date
j.component.context.ctx.font = e.config.dataFontSize + "px Helvetica";
j.component.context.ctx.fillStyle = e.config.dataFontColoe;
j.component.context.ctx.fillText(year + '-' + month + '-' + day, e.config.dataLeft, e.config.dataTop);
//Time
j.component.context.ctx.font = e.config.timeFontSize + "px Helvetica Bold";
j.component.context.ctx.fillStyle = e.config.timeFontColoe;
j.component.context.ctx.fillText(time + ":" + mil, e.config.timeLeft, e.config.timeTop);
// setTimeout('renderTime()', 40)
}
clearTime = setInterval(renderTime, 40);
// 时间end
d.groups.push({
name: "width",
title: {
text: "基本配置"
},
elements: [{
title: "宽度",
type: "configSlide",
bind: "canvasWidth",
config: {
slideStart: 0,
slideEnd: 1000
},
}, {
title: "背景色值1",
type: "colorpicker",
bind: "backgroundColorOne"
}, {
title: "背景色值2",
type: "colorpicker",
bind: "backgroundColorTow"
}, {
title: "条形颜色",
type: "colorpicker",
bind: "lineColor"
}, {
title: "条形宽度",
type: "configSlide",
bind: "lineWidth",
config: {
slideStart: 0,
slideEnd: 100
},
}, {
title: "条形阴影颜色",
type: "colorpicker",
bind: "shadowColor"
}, {
title: "条形阴影宽度",
type: "configSlide",
bind: "shadowBlur",
config: {
slideStart: 0,
slideEnd: 100
},
}]
});
d.groups.push({
name: "week",
title: {
text: "星期配置"
},
elements: [{
title: "水平位置",
type: "configSlide",
bind: "weekLeft",
config: {
slideEnd: 1000
}
}, {
title: "垂直位置",
type: "configSlide",
bind: "weekTop",
config: {
slideEnd: 1000
}
}, {
title: "字体大小",
type: "configSlide",
bind: "weekFontSize",
config: {
slideEnd: 100
}
}, {
title: "字体颜色",
type: "colorpicker",
bind: "weekFontColoe"
}]
});
d.groups.push({
name: "data",
title: {
text: "日期配置"
},
elements: [{
title: "水平位置",
type: "configSlide",
bind: "dataLeft",
config: {
slideEnd: 1000
}
}, {
title: "垂直位置",
type: "configSlide",
bind: "dataTop",
config: {
slideEnd: 1000
}
}, {
title: "字体大小",
type: "configSlide",
bind: "dataFontSize",
config: {
slideEnd: 100
}
}, {
title: "字体颜色",
type: "colorpicker",
bind: "dataFontColoe"
}]
});
d.groups.push({
name: "time",
title: {
text: "时间配置"
},
elements: [{
title: "水平位置",
type: "configSlide",
bind: "timeLeft",
config: {
slideEnd: 1000
}
}, {
title: "垂直位置",
type: "configSlide",
bind: "timeTop",
config: {
slideEnd: 1000
}
}, {
title: "字体大小",
type: "configSlide",
bind: "timeFontSize",
config: {
slideEnd: 100
}
}, {
title: "字体颜色",
type: "colorpicker",
bind: "timeFontColoe"
}]
});
j.$watch("component.config.canvasWidth", function (w, u) {
var p = e.config;
console.log(w)
p.canvasWidth = w;
p.canvasHeight = w;
});
j.$watch("component.config.backgroundColorOne", function (w, u) {
var p = e.config;
p.backgroundColorOne = w;
});
j.$watch("component.config.backgroundColorTow", function (w, u) {
var p = e.config;
p.backgroundColorTow = w;
});
j.$watch("component.config.lineColor", function (w, u) {
var p = e.config;
p.lineColor = w;
});
j.$watch("component.config.lineWidth", function (w, u) {
var p = e.config;
p.lineWidth = w;
});
j.$watch("component.config.shadowColor", function (w, u) {
var p = e.config;
p.shadowColor = w;
});
j.$watch("component.config.shadowBlur", function (w, u) {
var p = e.config;
p.shadowBlur = w;
});
// 星期
j.$watch("component.config.weekLeft", function (w, u) {
var p = e.config;
p.weekLeft = w;
});
j.$watch("component.config.weekTop", function (w, u) {
var p = e.config;
p.weekTop = w;
});
j.$watch("component.config.weekFontSize", function (w, u) {
var p = e.config;
p.weekFontSize = w;
});
j.$watch("component.config.weekFontColoe", function (w, u) {
var p = e.config;
p.weekFontColoe = w;
});
// 日期
j.$watch("component.config.dataLeft", function (w, u) {
var p = e.config;
p.dataLeft = w;
});
j.$watch("component.config.dataTop", function (w, u) {
var p = e.config;
p.dataTop = w;
});
j.$watch("component.config.dataFontSize", function (w, u) {
var p = e.config;
p.dataFontSize = w;
});
j.$watch("component.config.dataFontColoe", function (w, u) {
var p = e.config;
p.dataFontColoe = w;
});
// 时间
j.$watch("component.config.timeLeft", function (w, u) {
var p = e.config;
p.timeLeft = w;
});
j.$watch("component.config.timeTop", function (w, u) {
var p = e.config;
p.timeTop = w;
});
j.$watch("component.config.timeFontSize", function (w, u) {
var p = e.config;
p.timeFontSize = w;
});
j.$watch("component.config.timeFontColoe", function (w, u) {
var p = e.config;
p.timeFontColoe = w;
});
}
};
a.register("basic", "clock", b);
return null
}
]);
```
分享页
路径D:\ireport365\ireport365.war\WEB-INF\classes\report-resource\design.js
```
// 时钟 start
case "clock":
var html = [];
html.push("<canvas id='canvas'></canvas>");
var el = $compile(html.join(""))(scope);
element.append(el);
var e = scope.component;
// 时间
function degToRad(degree){
var factor = Math.PI/180;
return degree*factor;
}
function renderTime(){
var canvas = $("#"+scope.component.id+" #canvas")[0]
var ctx = canvas.getContext("2d");
// 清空画布防止重叠
ctx.clearRect(0,0,e.config.canvasWidth,e.config.canvasHeight);
// 设置宽高
canvas.width = e.config.canvasWidth;
canvas.height = e.config.canvasHeight;
// 线条颜色
ctx.strokeStyle = e.config.lineColor;
// 线条宽度
ctx.lineWidth = e.config.lineWidth;
// 线条的阴影大小
ctx.shadowBlur= e.config.shadowBlur;
// 线条阴影颜色
ctx.shadowColor = e.config.shadowColor
// 时间对象
var now = new Date();
var month = now.getMonth()+1;
var year = now.getFullYear();
var day = now.getDate();
var a = new Array("日", "一", "二", "三", "四", "五", "六");
var week = now.getDay();
var weekStr = "星期"+ a[week];
var today = now.toDateString();
var time = now.toLocaleTimeString();
var hrs = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var mil = now.getMilliseconds();
var smoothsec = sec+(mil/1000);
var smoothmin = min+(smoothsec/60);
//Background
gradient = ctx.createRadialGradient((e.config.canvasWidth / 2), (e.config.canvasWidth / 2), 5, (e.config.canvasWidth / 2), (e.config.canvasWidth / 2), (e.config.canvasWidth / 1.333));
gradient.addColorStop(0, e.config.backgroundColorOne);
gradient.addColorStop(1, e.config.backgroundColorTow);
ctx.fillStyle = gradient;
// ctx.fillStyle = 'rgba(00 ,00 , 00, 1)';
// 画布填充
ctx.fillRect(0, 0, e.config.canvasWidth, e.config.canvasHeight);
// 下面是开始画圆 x y 直径
//Hours
ctx.beginPath();
ctx.arc(e.config.canvasWidth / 2.222,e.config.canvasWidth / 2,e.config.canvasWidth / 2.222, degToRad(270), degToRad((hrs*30)-90));
ctx.stroke();
//Minutes
ctx.beginPath();
ctx.arc(e.config.canvasWidth / 2.222,e.config.canvasWidth / 2,e.config.canvasWidth / 2.666, degToRad(270), degToRad((smoothmin*6)-90));
ctx.stroke();
//Seconds
ctx.beginPath();
ctx.arc(e.config.canvasWidth / 2.222,e.config.canvasWidth / 2,e.config.canvasWidth / 3.333, degToRad(270), degToRad((smoothsec*6)-90));
ctx.stroke();
// week
ctx.font = e.config.weekFontSize+"px Helvetica";
ctx.fillStyle = e.config.weekFontColoe;
ctx.fillText(weekStr, e.config.weekLeft, e.config.weekTop);
//Date
ctx.font = e.config.dataFontSize+"px Helvetica";
ctx.fillStyle = e.config.dataFontColoe;
ctx.fillText(year+'-'+month+'-'+day, e.config.dataLeft, e.config.dataTop);
//Time
ctx.font = e.config.timeFontSize+"px Helvetica Bold";
ctx.fillStyle = e.config.timeFontColoe;
ctx.fillText(time+":"+mil, e.config.timeLeft, e.config.timeTop);
// setTimeout('renderTime()', 40)
}
setInterval(renderTime, 40);
break;
// 时钟 end
```
- 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说明文档
- 色斑图加透明