數據配置舉例

選擇組件

選中一個組件，首先要看数据选项卡的組件介面說明。

我們以基础地图组件為例，該組件要求數據要由deviceName:{lon:'',lat:''}的數據點組成，OneNET View 2.0 系統約定，傳遞給組件的數據必須是一個对象数组，所以傳給組件最終數據格式應該是

[
  {
    "dev1": {
      "lon": 116.404,
      "lat": 39.915
    }
  },
  {
    "dev1": {
      "lon": 116.404,
      "lat": 39.815
    }
  }
  ...
]

查看初始私有篩檢程式

如果介面欄位說明還無法清晰表達組件所接受的數據格式，組件在被新增到畫布的初始狀態下，都會有一個初始私有过滤器，這個初始篩檢程式提供了本組件接受的數據格式樣例。

選擇數據來源

為了使地圖組件中的點是根據數據來源動態來新增或更改的，我們要在数据源选择中選帶有地圖數據點信息的數據來源。

暫時先不適用篩檢程式，先点击数据处理结果查看當前數據來源的數據。

[
  {
    "update_at": "2019-03-28 16:44:54",
    "id": "map",
    "create_time": "2018-11-05 10:34:31",
    "current_value": {
      "lon": "116.40530370152352",
      "lat": "39.90664650680615"
    },
    "at": "2019-03-28 16:44:54",
    "value": {
      "lon": "116.40530370152352",
      "lat": "39.90664650680615"
    }
  },
  {
    "update_at": "3/28/2019 16:44:59 ",
    "id": "map",
    "create_time": "11/5/2018 10:34:31 ",
    "current_value": {
      "lon": "116.41210366734866",
      "lat": "39.90668046099908"
    },
    "at": "3/28/2019 4:44:59 下午",
    "value": {
      "lon": "116.41210366734866",
      "lat": "39.90668046099908"
    }
  },
  {
    "update_at": "3/28/2019 16:45:03 ",
    "id": "map",
    "create_time": "11/5/2018 10:34:31 ",
    "current_value": {
      "lon": "116.42254386324525",
      "lat": "39.90675495735355"
    },
    "at": "3/28/2019 4:45:03 下午",
    "value": {
      "lon": "116.42254386324525",
      "lat": "39.90675495735355"
    }
  }
]

使用篩檢程式

我們發現，數據來源數據與基礎地圖組件的數據格式並不一致。需要使用數據篩檢程式做一些處理(數據篩檢程式只支援 es5 語法)。

// 最終數據應該是一個陣列
var result = [];
var dataPoint = null;
//循環處理選中的數據來源的數據點
for (var i = 0; i < data.length; i++) {
  // 從數據點中取出需要的數據，通過配置鍵值對使得數據格式符合要求
  dataPoint = {
    dev1: {
      lon: data[i].value.lon,
      lat: data[i].value.lat,
    },
  };
  //將這個數據點添加進結果中
  result.push(dataPoint);
}
return result;

在篩檢程式代碼編輯區寫入以上代碼，點擊保存，然後選中啟用這個篩檢程式，就可以看到最後的數據處理結果了。

這個結果就符合組件的要求了。