Commit a8d1af019c4853ef4332390b0db0eb8ee6018967

Authored by sqy
1 parent 164ea6f7

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

@@ -266,9 +266,9 @@ @@ -266,9 +266,9 @@
266 mxForceIncludes = true; 266 mxForceIncludes = true;
267 } 267 }
268 if (location.hostname == 'localhost' || location.hostname == '127.0.0.1' || location.hostname == '192.168.10.111') { 268 if (location.hostname == 'localhost' || location.hostname == '127.0.0.1' || location.hostname == '192.168.10.111') {
269 - drawDevUrl = `http://${location.hostname}:3000/`;  
270 - geBasePath = `http://${location.hostname}:3000/js/grapheditor`;  
271 - mxBasePath = `http://${location.hostname}:3000/mxgraph`; 269 + drawDevUrl = `http://${location.hostname}:5000/`;
  270 + geBasePath = `http://${location.hostname}:5000/js/grapheditor`;
  271 + mxBasePath = `http://${location.hostname}:5000/mxgraph`;
272 mxForceIncludes = true; 272 mxForceIncludes = true;
273 } 273 }
274 mxForceIncludes = false; 274 mxForceIncludes = false;
@@ -16,5 +16,5 @@ urlParams["sync"] = "manual"; @@ -16,5 +16,5 @@ urlParams["sync"] = "manual";
16 urlParams["lang"] = "zh"; 16 urlParams["lang"] = "zh";
17 urlParams["mode"] = "device"; 17 urlParams["mode"] = "device";
18 urlParams['gapi'] = 0; 18 urlParams['gapi'] = 0;
19 -urlParams['ui'] = 'min';//使用简约ui主题 19 +// urlParams['ui'] = 'min';//使用简约ui主题
20 urlParams['dark'] = 0; //是否使用深色模式 20 urlParams['dark'] = 0; //是否使用深色模式
@@ -4257,100 +4257,103 @@ DataFormatPanel.prototype.addDataFont = function (container) @@ -4257,100 +4257,103 @@ DataFormatPanel.prototype.addDataFont = function (container)
4257 treeUl.setAttribute('id','organizationTree'); 4257 treeUl.setAttribute('id','organizationTree');
4258 organizationTree.appendChild(treeUl); 4258 organizationTree.appendChild(treeUl);
4259 container.appendChild(organizationTree); 4259 container.appendChild(organizationTree);
  4260 +
  4261 +
  4262 + // 获取组织数据
  4263 + (function getTreeList(){
  4264 + //调用API,获取保存的内容
  4265 + DefHttp().get('/yt/organization/me/list')
  4266 + .then(function (response) {
  4267 + //实例化树形菜单
  4268 + $("#organizationTree").tree({
  4269 + data: response.data,
  4270 + lines: true,
  4271 + formatter(node) {
  4272 + return node.name;
  4273 + },
  4274 + onClick(node) {
  4275 + // 获取组织下的设备
  4276 + getDevicesByOrganizationId(node.id)
  4277 + }
  4278 + });
  4279 + })
  4280 + })()
  4281 +
  4282 +
  4283 + // 选择设备
4260 var deviceStylePanel = stylePanel.cloneNode(false); 4284 var deviceStylePanel = stylePanel.cloneNode(false);
4261 deviceStylePanel.style.marginLeft = '0px'; 4285 deviceStylePanel.style.marginLeft = '0px';
4262 deviceStylePanel.style.paddingTop = '8px'; 4286 deviceStylePanel.style.paddingTop = '8px';
4263 deviceStylePanel.style.paddingBottom = '8px'; 4287 deviceStylePanel.style.paddingBottom = '8px';
4264 - deviceStylePanel.style.fontWeight = 'normal';  
4265 mxUtils.write(deviceStylePanel, "选择设备"); 4288 mxUtils.write(deviceStylePanel, "选择设备");
4266 container.appendChild(deviceStylePanel); 4289 container.appendChild(deviceStylePanel);
4267 - var deviceSelect = document.createElement('select');  
4268 - deviceSelect.style.position = 'absolute';  
4269 - deviceSelect.style.left = '30%';  
4270 - deviceSelect.style.width = '60%';  
4271 - deviceSelect.style.border = '1px solid rgb(160, 160, 160)';  
4272 - deviceSelect.style.borderRadius = '4px';  
4273 - deviceSelect.style.marginTop = '-2px';  
4274 -  
4275 - var selectId = '';  
4276 - getTreeList();  
4277 - function getTreeList(){  
4278 - //调用API,获取保存的内容  
4279 - DefHttp().get('/yt/organization/me/list')  
4280 - .then(function (response) {  
4281 - //实例化树形菜单  
4282 - $("#organizationTree").tree({  
4283 - data: response.data,  
4284 - lines: true,  
4285 - formatter: function (node) {  
4286 - return node.name;  
4287 - },  
4288 - onClick: function (node) {  
4289 - selectId = node.id;  
4290 - }  
4291 - });  
4292 - })  
4293 - }  
4294 - 4290 + var deviceSelect = document.createElement('input');
  4291 + deviceSelect.setAttribute('id','device');
  4292 + deviceStylePanel.appendChild(deviceSelect)
  4293 +
  4294 + // 删除父节点下的所有子节点
  4295 + function deleteAllChild(element) {
  4296 + var first = element.firstElementChild;
  4297 + while (first) {
  4298 + first.remove();
  4299 + first = element.firstElementChild;
  4300 + }
  4301 + }
  4302 + // 根据组织id获取组织下的设备列表--在点击组织时调用
4295 function getDevicesByOrganizationId(organizationId){ 4303 function getDevicesByOrganizationId(organizationId){
4296 if(organizationId){ 4304 if(organizationId){
4297 - DefHttp().get('/yt/organization/me/list') 4305 + DefHttp().get(`/yt/device?page=1&pageSize=20&organizationId=${organizationId}`)
4298 .then(function (response) { 4306 .then(function (response) {
4299 - var positionOption = document.createElement('option');  
4300 - positionOption.setAttribute('value', null);  
4301 - mxUtils.write(positionOption, ''); 4307 + $("#device").combobox({
  4308 + data: response.data.items,
  4309 + valueField: "tbDeviceId",
  4310 + textField: "name",
  4311 + onChange(newValue){
  4312 + getDeviceAttribute(newValue)
  4313 + }
  4314 + });
4302 }) 4315 })
4303 } 4316 }
4304 } 4317 }
4305 4318
4306 - var directions = ['topLeft', 'top', 'topRight', 'left', 'center', 'right', 'bottomLeft', 'bottom', 'bottomRight'];  
4307 -  
4308 - for (var i = 0; i < directions.length; i++)  
4309 - {  
4310 - var positionOption = document.createElement('option');  
4311 - positionOption.setAttribute('value', directions[i]);  
4312 - mxUtils.write(positionOption, mxResources.get(directions[i]));  
4313 - deviceSelect.appendChild(positionOption);  
4314 - }  
4315 -  
4316 - deviceStylePanel.appendChild(deviceSelect);  
4317 -  
4318 -  
4319 var attributeStylePanel = stylePanel.cloneNode(false); 4319 var attributeStylePanel = stylePanel.cloneNode(false);
4320 attributeStylePanel.style.marginLeft = '0px'; 4320 attributeStylePanel.style.marginLeft = '0px';
4321 attributeStylePanel.style.paddingTop = '8px'; 4321 attributeStylePanel.style.paddingTop = '8px';
4322 attributeStylePanel.style.paddingBottom = '8px'; 4322 attributeStylePanel.style.paddingBottom = '8px';
4323 - attributeStylePanel.style.fontWeight = 'normal';  
4324 -  
4325 mxUtils.write(attributeStylePanel, "选择属性"); 4323 mxUtils.write(attributeStylePanel, "选择属性");
4326 4324
  4325 + container.appendChild(attributeStylePanel);
  4326 + var attributeSelect = document.createElement("input");
  4327 + attributeSelect.setAttribute('id','attribute');
  4328 + attributeStylePanel.appendChild(attributeSelect);
  4329 +
  4330 + // 获取设备下的属性-key--在改变设备时调用
  4331 + function getDeviceAttribute(tbDeviceId) {
  4332 + if (tbDeviceId) {
  4333 + DefHttp()
  4334 + .get(`/plugins/telemetry/DEVICE/${tbDeviceId}/keys/timeseries`)
  4335 + .then(function (response) {
  4336 + console.log('res', response)
  4337 + const mapRes = response.data.map((item)=>{
  4338 + return {
  4339 + value:item,
  4340 + text:item
  4341 + }
  4342 + });
  4343 + $("#attribute").combobox({
  4344 + data: mapRes,
  4345 + });
  4346 + });
  4347 + }
  4348 + }
  4349 +
4327 // Adds writing direction options 4350 // Adds writing direction options
4328 // LATER: Handle reselect of same option in all selects (change event 4351 // LATER: Handle reselect of same option in all selects (change event
4329 // is not fired for same option so have opened state on click) and 4352 // is not fired for same option so have opened state on click) and
4330 // handle multiple different styles for current selection 4353 // handle multiple different styles for current selection
4331 - var dirSelect = document.createElement('select');  
4332 - dirSelect.style.position = 'absolute';  
4333 - dirSelect.style.border = '1px solid rgb(160, 160, 160)';  
4334 - dirSelect.style.left = '30%';  
4335 - dirSelect.style.width = '60%';  
4336 - dirSelect.style.borderRadius = '4px';  
4337 - dirSelect.style.marginTop = '-2px';  
4338 4354
4339 // NOTE: For automatic we use the value null since automatic 4355 // NOTE: For automatic we use the value null since automatic
4340 // requires the text to be non formatted and non-wrapped 4356 // requires the text to be non formatted and non-wrapped
4341 - var dirs = ['automatic', 'leftToRight', 'rightToLeft'];  
4342 -  
4343 - for (var i = 0; i < dirs.length; i++)  
4344 - {  
4345 - var dirOption = document.createElement('option');  
4346 - dirOption.setAttribute('value', dirs[i]);  
4347 - mxUtils.write(dirOption, mxResources.get(dirs[i]));  
4348 - dirSelect.appendChild(dirOption);  
4349 - }  
4350 -  
4351 - attributeStylePanel.appendChild(dirSelect);  
4352 - container.appendChild(attributeStylePanel);  
4353 -  
4354 var interactionStylePanel = this.createPanel(); 4357 var interactionStylePanel = this.createPanel();
4355 container.appendChild(interactionStylePanel); 4358 container.appendChild(interactionStylePanel);
4356 4359
1 /** 1 /**
2 * custom http request 2 * custom http request
3 */ 3 */
4 -DefHttp = function () {  
5 - /**  
6 - * 创建实例  
7 - */  
8 - const instance = axios.create({  
9 - baseURL : DefHttp.baseURL,  
10 - timeout : DefHttp.timeout,  
11 - headers: {  
12 - "content-type": "application/json; charset=UTF-8",  
13 - "X-Authorization":"Bearer " + DefHttp.token  
14 - }  
15 - });  
16 - /**  
17 - * 数据返回拦截  
18 - */  
19 - instance.interceptors.response.use(function (response) {  
20 - return response;  
21 - }, function (error) {  
22 - if(error.response.status == 401){  
23 - alert(error.response.data.message);  
24 - }  
25 - return Promise.reject(error);  
26 - });  
27 - return instance; 4 +function DefHttp() {
  5 + /**
  6 + * 创建实例
  7 + */
  8 + const instance = axios.create({
  9 + baseURL: DefHttp.baseURL,
  10 + timeout: DefHttp.timeout,
  11 + headers: {
  12 + "content-type": "application/json; charset=UTF-8",
  13 + "X-Authorization": "Bearer " + DefHttp.token,
  14 + },
  15 + });
  16 + /**
  17 + * 数据返回拦截-响应拦截器
  18 + */
  19 + instance.interceptors.response.use(
  20 + function (response) {
  21 + return response;
  22 + },
  23 + function (error) {
  24 + if (error.response.status == 401) {
  25 + alert(error.response.data.message);
  26 + }
  27 + return Promise.reject(error);
  28 + }
  29 + );
  30 + return instance;
28 } 31 }
29 -DefHttp.timeout = 10*1000; 32 +DefHttp.timeout = 10 * 1000;
30 DefHttp.token = ""; 33 DefHttp.token = "";
31 -DefHttp.baseURL = "/api/";  
  34 +DefHttp.baseURL = "/api/";