feat: basic implement image component

@@ -4221,8 +4221,7 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
 	function getUserPermission() {
 		defHttp.get('/yt/role/me/permissions')
 			.then(res => {
-				USER_PERMISSION.permission = res
-				console.log({ USER_PERMISSION })
+				USER_PERMISSION.permission = res 
 				updateButtonContainer()
 				// var flag = hasSavePermission()
 				// if (!flag) {
@@ -4235,8 +4234,7 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
 	// 调用API,获取保存的内容
 	function getSaveContent() {
 		defHttp.get('/yt/configuration/center/getConfigurationInfo/' + Editor.configurationId)
-			.then(function (response) {
-				console.log({ response })
+			.then(function (response) { 
 				const { platform } = response || {}
 				const pageSizeControl = PageSetupDialog.getFormats
 				PageSetupDialog.getFormats = function () {
@@ -4283,8 +4281,7 @@ App.prototype.loadFile = function (id, sameWindow, file, success, force) {
 
 				getUserPermission()
 			})
-			.catch(function (error) {
-				console.log(error);
+			.catch(function (error) { 
 			});
 	}
 

@@ -268,6 +268,11 @@
 		 * @description 开关组件状态 {true | false | null}
 		 */
 		SWITCH_STATE: 'switchState',
+
+		/**
+		 * @description 图片组件
+		 */
+		IMAGE: 'image'
 		
 	}
 
@@ -717,7 +722,7 @@
 
 		// TODO thingsKit 设置数据绑定展示面板
 		const { LINE_CHART_EXPAND, BAR_CHART_EXPAND, DASHBOARD_CHART_EXPAND, DYNAMIC_EFFECT, DATA_SOURCE, VAR_IMAGE, INTERACTION, VIDEO: VIDEO_PANEL, SWITCH_STATE_SETTING, ONLY_SINGLE_EVENT, RUNNING_AND_STOP } = this.enumPermissionPanel
-		const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART, VIDEO, SWITCH, PARAMS_SETTING_BUTTON, DASHBOARD_CHART } = this.enumComponentType
+		const { LINE, LINE_CHART, REAL_TIME, TITLE, VARIABLE, DEFAULT, BAR_CHART, VIDEO, SWITCH, PARAMS_SETTING_BUTTON, DASHBOARD_CHART, IMAGE } = this.enumComponentType
 		this.setComponentPermission(LINE, [RUNNING_AND_STOP, DYNAMIC_EFFECT])
 		this.setComponentPermission(DEFAULT, [DYNAMIC_EFFECT])
 		this.setComponentPermission(REAL_TIME, [DYNAMIC_EFFECT])
@@ -730,6 +735,7 @@
 		this.setComponentPermission(VIDEO, [VIDEO_PANEL])
 		this.setComponentPermission(SWITCH, [DATA_SOURCE, SWITCH_STATE_SETTING])
 		this.setComponentPermission(PARAMS_SETTING_BUTTON, [DATA_SOURCE, ONLY_SINGLE_EVENT])
+		this.setComponentPermission(IMAGE, [DATA_SOURCE])
 
 		var thingskitEntries = [
 			{ title: mxResources.get('general'), id: 'general', image: IMAGE_PATH + '/sidebar-general.png' },

@@ -59,6 +59,12 @@
 				this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.VIDEO })
 				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '视频');
 			})),
+			this.addEntry(this.getTagsForStencil('mxgraph.basic', '图片', 'basic').join(' '), mxUtils.bind(this, function () {
+				const cell = new mxCell(`<img class="basic-component__image" src="${Proxy_Prefix}/images/thingskit/img-placeholder.png" />`, new mxGeometry(0, 0, 190, 190), 'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;overflow=hidden;');
+				cell.setVertex(true)
+				this.setCellAttributes(cell, { [basicAttr.COMPONENT_TYPE]: componentType.IMAGE })
+				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, '图片');
+			})),
 		];
 
 		this.addPaletteFunctions('component', '基础元件', true, fns);

@@ -5930,7 +5930,8 @@ DataFormatPanel.prototype.addDataFont = function (container) {
             [componentType.DEFAULT]: getSubmitValue,
             [componentType.VIDEO]: getVideoSubmitValue,
             [componentType.SWITCH]: getSwitchSubmitValue,
-            [componentType.PARAMS_SETTING_BUTTON]: getSwitchSubmitValue
+            [componentType.PARAMS_SETTING_BUTTON]: getSwitchSubmitValue,
+            [componentType.IMAGE]: getSubmitValue
         }
 
         const cell = vertices[0]
@@ -13453,6 +13454,11 @@ class HandleDataSource {
                 return
             }
 
+            if (type === this.componentType.IMAGE) {
+                this.handleImageComponent(message)
+                return
+            }
+
             if (!data) return
             const [[timespan, value]] = data[attr]
             node.setValue(value)
@@ -13516,6 +13522,16 @@ class HandleDataSource {
         }, node)
     }
 
+    handleImageComponent(message) {
+        const { subscriptionId, data = {} } = message
+        const node = this.getNodeByCmdId(subscriptionId)
+        const { attr } = this.getBindData(subscriptionId)
+        const [[timespan, receiveValue] = []] = data[attr] || []
+        this.updatePage(() => {
+            node.setAttribute('label', `<img class="basic-component__image" alt="图片" src="${Proxy_Prefix}/${receiveValue}" />`)
+        }, node)
+    }
+
     /**
      * @description 更新实时数据
      * @param {} message 

@@ -595,3 +595,10 @@
   top: -130px; 
   z-index: 99;
 }
+
+
+/* basic-component */
+.basic-component__image {
+  width: 100%;
+  height: 100%;
+}