简柏林 / thingskit-scada · Commits

Commit 4de08df8470bdd33a2a950668a45641754114bed

Authored by ww
1 parent 6739b483

feat: implement switch component

Inline Side-by-side
Showing 4 changed files with 57 additions and 29 deletions
  1 +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-toggle-off" viewBox="0 0 16 16">
  2 + <path d="M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z"/>
  3 +</svg>
  1 +<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#3399ff" class="bi bi-toggle-on" viewBox="0 0 16 16">
  2 + <path d="M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z"/>
  3 +</svg>
@@ -235,6 +235,11 @@ @@ -235,6 +235,11 @@
235 VIDEO: 'video', 235 VIDEO: 'video',
236 236
237 /** 237 /**
  238 + * @description 开关
  239 + */
  240 + SWITCH: 'switch',
  241 +
  242 + /**
238 * @description 默认类型 243 * @description 默认类型
239 */ 244 */
240 DEFAULT: 'default', 245 DEFAULT: 'default',
@@ -269,13 +274,46 @@ @@ -269,13 +274,46 @@
269 * @description 数据面板权限 274 * @description 数据面板权限
270 */ 275 */
271 Sidebar.prototype.enumPermissionPanel = { 276 Sidebar.prototype.enumPermissionPanel = {
  277 +
  278 + /**
  279 + * @description 数据源
  280 + */
272 DATA_SOURCE: 'dataSource', 281 DATA_SOURCE: 'dataSource',
  282 +
  283 + /**
  284 + * @descripton 折线图
  285 + */
273 LINE_CHART_EXPAND: 'lineChartExpandDataSource', 286 LINE_CHART_EXPAND: 'lineChartExpandDataSource',
  287 +
  288 + /**
  289 + * @descripiton 柱状图
  290 + */
274 BAR_CHART_EXPAND: 'barChartExpandDataSource', 291 BAR_CHART_EXPAND: 'barChartExpandDataSource',
  292 +
  293 + /**
  294 + * @descripton 交互
  295 + */
275 INTERACTION: 'interaction', 296 INTERACTION: 'interaction',
  297 +
  298 + /**
  299 + * @description 数据权限
  300 + */
276 DYNAMIC_EFFECT: 'dynamicEffect', 301 DYNAMIC_EFFECT: 'dynamicEffect',
  302 +
  303 + /**
  304 + * @description 变量图片
  305 + */
277 VAR_IMAGE: 'variableImage', 306 VAR_IMAGE: 'variableImage',
278 - VIDEO: 'video' 307 +
  308 + /**
  309 + * @description 视频绑定面板
  310 + */
  311 + VIDEO: 'video',
  312 +
  313 + /**
  314 + * @descrpiton 开关 状态设置
  315 + */
  316 + SWTICH_STATE_SETTING: 'stateSetting'
279 } 317 }
280 318
281 /** 319 /**
@@ -632,8 +670,8 @@ @@ -632,8 +670,8 @@
632 //更多图形，显示出来的的标题跟id，同时包括图片 670 //更多图形，显示出来的的标题跟id，同时包括图片
633 671
634 // TODO thingsKit 设置数据绑定展示面板 672 // TODO thingsKit 设置数据绑定展示面板
635 - const { LINE_CHART_EXPAND, BAR_CHART_EXPAND, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION, VIDEO: VIDEO_PANEL } = this.enumPermissionPanel  
636 - const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART, VIDEO } = this.enumComponentType 673 + const { LINE_CHART_EXPAND, BAR_CHART_EXPAND, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION, VIDEO: VIDEO_PANEL, SWTICH_STATE_SETTING } = this.enumPermissionPanel
  674 + const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART, VIDEO, SWITCH } = this.enumComponentType
637 this.setComponentPermission(LINE, [DYNAMIC_EFFECT]) 675 this.setComponentPermission(LINE, [DYNAMIC_EFFECT])
638 this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT]) 676 this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT])
639 this.setComponentPermission(REAL_TIME, [DYNAMIC_EFFECT]) 677 this.setComponentPermission(REAL_TIME, [DYNAMIC_EFFECT])
@@ -641,8 +679,9 @@ @@ -641,8 +679,9 @@
641 this.setComponentPermission(VAR_IMAGE, [INTERACTION, VAR_IMAGE]) 679 this.setComponentPermission(VAR_IMAGE, [INTERACTION, VAR_IMAGE])
642 this.setComponentPermission(VARIABLE, [DATA_SOURCE, INTERACTION, DYNAMIC_EFFECT]) 680 this.setComponentPermission(VARIABLE, [DATA_SOURCE, INTERACTION, DYNAMIC_EFFECT])
643 this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND]) 681 this.setComponentPermission(BAR_CHART, [DATA_SOURCE, BAR_CHART_EXPAND])
644 - this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND]) 682 + this.setComponentPermission(LINE_CHART, [DATA_SOURCE, LINE_CHART_EXPAND])
645 this.setComponentPermission(VIDEO, [VIDEO_PANEL]) 683 this.setComponentPermission(VIDEO, [VIDEO_PANEL])
  684 + this.setComponentPermission(SWITCH, [DATA_SOURCE, SWTICH_STATE_SETTING])
646 685
647 var thingskitEntries = [ 686 var thingskitEntries = [
648 { title: mxResources.get('general'), id: 'general', image: IMAGE_PATH + '/sidebar-general.png' }, 687 { title: mxResources.get('general'), id: 'general', image: IMAGE_PATH + '/sidebar-general.png' },
@@ -4,7 +4,7 @@ @@ -4,7 +4,7 @@
4 // Control Component 控制元件 4 // Control Component 控制元件
5 Sidebar.prototype.addControlComponentsPalette = function () { 5 Sidebar.prototype.addControlComponentsPalette = function () {
6 const { COMPONENT_TYPE } = this.enumCellBasicAttribute 6 const { COMPONENT_TYPE } = this.enumCellBasicAttribute
7 - const { DEFAULT } = this.enumComponentType 7 + const { SWITCH } = this.enumComponentType
8 const gn = 'mxgraph.control'; 8 const gn = 'mxgraph.control';
9 const dt = 'control'; 9 const dt = 'control';
10 const label = '控制元件' 10 const label = '控制元件'
@@ -17,35 +17,18 @@ @@ -17,35 +17,18 @@
17 17
18 // 自定义属性 18 // 自定义属性
19 const cellAttribute = { 19 const cellAttribute = {
20 - [COMPONENT_TYPE]: DEFAULT 20 + [COMPONENT_TYPE]: SWITCH
21 } 21 }
22 22
23 - const graphPathLib = [  
24 - { name: '风机1.png', path: 'fan/风机1.png' },  
25 - { name: '风机2.png', path: 'fan/风机2.png' },  
26 - { name: '风机3.png', path: 'fan/风机3.png' },  
27 - { name: '风机4.png', path: 'fan/风机4.png' },  
28 - { name: '风机5.gif', path: 'fan/风机5.gif' },  
29 - { name: '风机6.gif', path: 'fan/风机6.gif' },  
30 - { name: '风机7.gif', path: 'fan/风机7.gif' },  
31 - { name: '风机8.png', path: 'fan/风机8.png' },  
32 - ]  
33 -  
34 - const lib = graphPathLib.map(item => {  
35 - item.staticPath = staticPath + item.path  
36 - return item  
37 - })  
38 -  
39 - const fns = graphPathLib.map(item => {  
40 - return this.addEntry(this.getTagsForStencil(gn, item.name, dt).join(' '), mxUtils.bind(this, function () {  
41 - const cell = new mxCell('', new mxGeometry(0, 0, width, height), `${prefix}${item.path}${defaultStyle}`); 23 + const fns = [
  24 + this.addEntry(this.getTagsForStencil(gn, 'Switch', dt).join(' '), mxUtils.bind(this, function () {
  25 + const cell = new mxCell('', new mxGeometry(0, 0, 48, 48), `image;image=images/thingskit/switch-on.svg;${defaultStyle}`);
42 cell.setVertex(true) 26 cell.setVertex(true)
43 this.setCellAttributes(cell, cellAttribute) 27 this.setCellAttributes(cell, cellAttribute)
44 - return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, item.name);  
45 - }));  
46 - }) 28 + return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '开关');
  29 + })),
  30 + ]
47 31
48 - this.setVariableImageLib(dt, label, lib)  
49 32
50 this.addPaletteFunctions(dt, label, false, fns); 33 this.addPaletteFunctions(dt, label, false, fns);
51 34