Merge branch 'sqy_dev' into 'main'

'feat:新增右侧面板选择设备和属性'

See merge request huang/thingskit-drawio!3

@@ -266,9 +266,9 @@
 				mxForceIncludes = true;
 			}
 			if (location.hostname == 'localhost' || location.hostname == '127.0.0.1' || location.hostname == '192.168.10.111') {
-				drawDevUrl = `http://${location.hostname}:3000/`;
-				geBasePath = `http://${location.hostname}:3000/js/grapheditor`;
-				mxBasePath = `http://${location.hostname}:3000/mxgraph`;
+				drawDevUrl = `http://${location.hostname}:5000/`;
+				geBasePath = `http://${location.hostname}:5000/js/grapheditor`;
+				mxBasePath = `http://${location.hostname}:5000/mxgraph`;
 				mxForceIncludes = true;
 			}
 			mxForceIncludes = false;

@@ -16,5 +16,5 @@ urlParams["sync"] = "manual";
 urlParams["lang"] = "zh";
 urlParams["mode"] = "device";
 urlParams['gapi'] = 0;
-urlParams['ui'] = 'min';//使用简约ui主题
+// urlParams['ui'] = 'min';//使用简约ui主题
 urlParams['dark'] = 0; //是否使用深色模式
\ No newline at end of file

@@ -4257,100 +4257,103 @@ DataFormatPanel.prototype.addDataFont = function (container)
 	treeUl.setAttribute('id','organizationTree');
 	organizationTree.appendChild(treeUl);
 	container.appendChild(organizationTree);
+
+
+	// 获取组织数据
+	(function getTreeList(){
+	//调用API,获取保存的内容
+	DefHttp().get('/yt/organization/me/list')
+		.then(function (response) {
+			//实例化树形菜单
+			$("#organizationTree").tree({
+				data: response.data,
+				lines: true,
+				formatter(node) {
+					return node.name;
+				},
+				onClick(node) {
+					// 获取组织下的设备
+					getDevicesByOrganizationId(node.id)
+				}
+			});
+		})
+	})()
+
+
+	// 选择设备
 	var deviceStylePanel = stylePanel.cloneNode(false);
 	deviceStylePanel.style.marginLeft = '0px';
 	deviceStylePanel.style.paddingTop = '8px';
 	deviceStylePanel.style.paddingBottom = '8px';
-	deviceStylePanel.style.fontWeight = 'normal';
 	mxUtils.write(deviceStylePanel, "选择设备");
 	container.appendChild(deviceStylePanel);
-	var deviceSelect = document.createElement('select');
-	deviceSelect.style.position = 'absolute';
-	deviceSelect.style.left = '30%';
-	deviceSelect.style.width = '60%';
-	deviceSelect.style.border = '1px solid rgb(160, 160, 160)';
-	deviceSelect.style.borderRadius = '4px';
-	deviceSelect.style.marginTop = '-2px';
-
-	var selectId = '';
-	getTreeList();
-	function getTreeList(){
-		//调用API,获取保存的内容
-		DefHttp().get('/yt/organization/me/list')
-			.then(function (response) {
-				//实例化树形菜单
-				$("#organizationTree").tree({
-					data: response.data,
-					lines: true,
-					formatter: function (node) {
-						return node.name;
-					},
-					onClick: function (node) {
-						selectId = node.id;
-					}
-				});
-			})
-	}
-
+	var deviceSelect = document.createElement('input');
+	deviceSelect.setAttribute('id','device');
+	deviceStylePanel.appendChild(deviceSelect)
+
+	// 删除父节点下的所有子节点
+  function deleteAllChild(element) { 
+		var first = element.firstElementChild; 
+		while (first) { 
+			first.remove(); 
+			first = element.firstElementChild; 
+		}
+  }
+	// 根据组织id获取组织下的设备列表--在点击组织时调用
 	function getDevicesByOrganizationId(organizationId){
 		if(organizationId){
-			DefHttp().get('/yt/organization/me/list')
+			DefHttp().get(`/yt/device?page=1&pageSize=20&organizationId=${organizationId}`)
 				.then(function (response) {
-					var positionOption = document.createElement('option');
-					positionOption.setAttribute('value', null);
-					mxUtils.write(positionOption, '');
+					$("#device").combobox({
+							data: response.data.items,
+							valueField: "tbDeviceId",
+							textField: "name",
+							onChange(newValue){	
+								getDeviceAttribute(newValue)
+							}
+					});
 				})
 		}
 	}
 
-	var directions = ['topLeft', 'top', 'topRight', 'left', 'center', 'right', 'bottomLeft', 'bottom', 'bottomRight'];
-
-	for (var i = 0; i < directions.length; i++)
-	{
-		var positionOption = document.createElement('option');
-		positionOption.setAttribute('value', directions[i]);
-		mxUtils.write(positionOption, mxResources.get(directions[i]));
-		deviceSelect.appendChild(positionOption);
-	}
-
-	deviceStylePanel.appendChild(deviceSelect);
-
-
 	var attributeStylePanel = stylePanel.cloneNode(false);
 	attributeStylePanel.style.marginLeft = '0px';
 	attributeStylePanel.style.paddingTop = '8px';
 	attributeStylePanel.style.paddingBottom = '8px';
-	attributeStylePanel.style.fontWeight = 'normal';
-
 	mxUtils.write(attributeStylePanel, "选择属性");
 
+	container.appendChild(attributeStylePanel);
+  var attributeSelect = document.createElement("input");
+	attributeSelect.setAttribute('id','attribute');
+  attributeStylePanel.appendChild(attributeSelect);
+
+  // 获取设备下的属性-key--在改变设备时调用
+  function getDeviceAttribute(tbDeviceId) {
+    if (tbDeviceId) {
+      DefHttp()
+        .get(`/plugins/telemetry/DEVICE/${tbDeviceId}/keys/timeseries`)
+        .then(function (response) {
+					console.log('res', response)
+					const mapRes = response.data.map((item)=>{
+						return {
+							value:item,
+							text:item
+						}
+					});
+					$("#attribute").combobox({
+            data: mapRes,
+          });
+        });
+    }
+  }
+
 	// Adds writing direction options
 	// LATER: Handle reselect of same option in all selects (change event
 	// is not fired for same option so have opened state on click) and
 	// handle multiple different styles for current selection
-	var dirSelect = document.createElement('select');
-	dirSelect.style.position = 'absolute';
-	dirSelect.style.border = '1px solid rgb(160, 160, 160)';
-	dirSelect.style.left = '30%';
-	dirSelect.style.width = '60%';
-	dirSelect.style.borderRadius = '4px';
-	dirSelect.style.marginTop = '-2px';
 
 	// NOTE: For automatic we use the value null since automatic
 	// requires the text to be non formatted and non-wrapped
-	var dirs = ['automatic', 'leftToRight', 'rightToLeft'];
-
-	for (var i = 0; i < dirs.length; i++)
-	{
-		var dirOption = document.createElement('option');
-		dirOption.setAttribute('value', dirs[i]);
-		mxUtils.write(dirOption, mxResources.get(dirs[i]));
-		dirSelect.appendChild(dirOption);
-	}
-
-	attributeStylePanel.appendChild(dirSelect);
-	container.appendChild(attributeStylePanel);
-
 	var interactionStylePanel = this.createPanel();
 	container.appendChild(interactionStylePanel);
 

 /**
  * custom http request
  */
-DefHttp = function () {
-    /**
-     * 创建实例
-     */
-    const instance = axios.create({
-        baseURL : DefHttp.baseURL,
-        timeout : DefHttp.timeout,
-        headers: {
-            "content-type": "application/json; charset=UTF-8",
-            "X-Authorization":"Bearer " + DefHttp.token
-        }
-    });
-    /**
-     * 数据返回拦截
-     */
-    instance.interceptors.response.use(function (response) {
-        return response;
-    }, function (error) {
-        if(error.response.status == 401){
-            alert(error.response.data.message);
-        }
-        return Promise.reject(error);
-    });
-    return instance;
+function DefHttp() {
+  /**
+   * 创建实例
+   */
+  const instance = axios.create({
+    baseURL: DefHttp.baseURL,
+    timeout: DefHttp.timeout,
+    headers: {
+      "content-type": "application/json; charset=UTF-8",
+      "X-Authorization": "Bearer " + DefHttp.token,
+    },
+  });
+  /**
+   * 数据返回拦截-响应拦截器
+   */
+  instance.interceptors.response.use(
+    function (response) {
+      return response;
+    },
+    function (error) {
+      if (error.response.status == 401) {
+        alert(error.response.data.message);
+      }
+      return Promise.reject(error);
+    }
+  );
+  return instance;
 }
-DefHttp.timeout = 10*1000;
+DefHttp.timeout = 10 * 1000;
 DefHttp.token = "";
-DefHttp.baseURL = "/api/";
\ No newline at end of file
+DefHttp.baseURL = "/api/";