2016-11-09 41 views
0

刷新,angularJS和XT融合圖表的家庭數據表應用AngularJS實體不是我使用JHispter從DTO

我想實施的行爲是非常基本的:重裝數據按照一個選項列表中的變化在頁面已顯示

所以我已經把方法的細節控制,至極呼籲從服務 的方法,此方法將一個REST資源 它本身的數據從實體

的數據映射我想刷新不是來自數據庫,它是計算。

關於日誌,數據是真正計算出來的,但它不影響範圍。 我傾向於認爲數據是在計算之後,或者沒有返回對象

我是AngularJS的初學者,我在這些代碼部分做了很多重做,所以請原諒髒代碼和事實那我肯定不會做這種權利

控制器:

(function() { 
'use strict'; 

angular 
    .module('dashboardsApp') 
    .controller('ChartDetailController', ChartDetailController); 

ChartDetailController.$inject = ['$scope', '$rootScope', '$stateParams', 'entity', 'Chart', 'Client', 'Device', 'Selecteur', 'ChartParam', 'TypeChart']; 

function ChartDetailController($scope, $rootScope, $stateParams, entity, Chart, Client, Device, Selecteur, ChartParam, TypeChart) { 
    var vm = this; 

    vm.chart = entity; 
    console.log ("!!! entity.id : " + entity.id); 
    vm.devices = Chart.getDevices({id : entity.id}); 
    $scope.periodicites = { 
     "Heure" : "HEURE" , 
     "Jour" : "JOURNEE" , 
     "Semaine" : "SEMAINE" , 
     "Mois" : "MOIS" , 
     "Année" : "ANNEE" , 
     "Temps réel" : "TEMPSREEL" 
}; 

$scope.changePeriodicite = function() { 
    entity = Chart.refresh({id : entity.id, pitch: $scope.periodicite}); 

    entity = $scope.vm.chart ; 
    console.log("dataset : " + entity.dataset); 
    console.log("id : " + entity.id); 
    console.log("jsonparam : " + entity.jsonparam); 
    console.log("chart:entity.attrs" + entity.attrs); 
    FusionCharts.render({type: vm.chart.nameTypeChart, renderAt:"chartobject-1", chart:entity.attrs, dataSource : entity.dataset }); 
} 

    var unsubscribe = $rootScope.$on('dashboardsApp:chartUpdate', function(event, result) { 
     vm.chart = result; 
    }); 
    $scope.$on('$destroy', unsubscribe); 


} 
})(); 

服務:

(function() { 
'use strict'; 
angular 
    .module('dashboardsApp') 
    .factory('Chart', Chart); 

Chart.$inject = ['$resource']; 

function Chart ($resource) { 
    var resourceUrl = 'api/charts/:id/:subResource/:pitch'; 

    return $resource(resourceUrl, {}, { 
     'query': { method: 'GET', isArray: true}, 
     'get': { 
      method: 'GET', 
      transformResponse: function (data) { 
       if (data) { 
        data = angular.fromJson(data); 
       } 
       return data; 
      } 
     }, 
     'update': { method:'PUT' }, 
     'getDevices' : { method:'GET', isArray: true, params: { subResource: 'devices'}}, 
     'refresh' : { 
      method:'GET' , 
      transformResponse: function (data) { 
       if (data) { 
        data = angular.fromJson(data); 
       } 
       return data; 
      }, 
      params: { subResource: 'changePitch', pitch:'pitch'}} 
    }); 
} 
})(); 

REST資源

/** 
* GET /charts/:id.changePitch : change chart Pitch and get the datas accordingly. 
* 
* @param id the id of the chartDTO to retrieve 
* @return the ResponseEntity with status 200 (OK) and with body the chartDTO, or with status 404 (Not Found) 
*/ 
@RequestMapping(value = "/charts/{id}/changePitch/{pitch}", 
    method = RequestMethod.GET, 
    produces = MediaType.APPLICATION_JSON_VALUE) 
@Timed 
public ResponseEntity<ChartDTO> changeChartPitch(@PathVariable Long id, @PathVariable String pitch) { 
    log.debug("REST request to chnage Chart pitch : {}", id); 
    Chart chart = chartRepository.findOne(id); 
    ChartDTO chartDTO = chartMapper.chartToChartDTO(chart); 
    chartDTO.setCategories(pitch); 
    chartDTO.setDataset(chartDTO.getDataset()); 
    //chartDTO = chartMapper.chartToChartDTO(chart); 
    log.info("Resource dataset :" + chartDTO.getDataset()); 
    log.info("Resource JSONParam :" + chartDTO.getJSONParam()); 

    return Optional.ofNullable(chartDTO) 
     .map(result -> new ResponseEntity<>(
      result, 
      HttpStatus.OK)) 
     .orElse(new ResponseEntity<>(HttpStatus.NOT_FOUND)); 
} 

DTO

public String getDataset() { 
    String returnString = "[{\"data\": []}]"; 
    if (this.categories != null) { 
     returnString = "[{\"data\": ["; 
     for (String s:this.categories) { 
      returnString += "{label: \"" + s + "\", value: '" + new Random().nextInt(1000) + "'},"; 
     } 
     returnString += returnString.substring(0, returnString.length()-1) + "]} ] "; 
     log.debug ("DTO Dataset :" + returnString); 
    } else { 
     log.debug ("Categories' null"); 
     log.debug ("DTO Dataset :" + returnString); 
    } 


    return returnString; 
    } 

HTML零件

<tr> 
    <td> 
     <table> 
      <tr> 
       <td> 
        <select ng-model="periodicite" ng-options="x for (x, y) in periodicites" ng-change="changePeriodicite()"></select> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <md-datepicker ng-model="myDatedeb" md-placeholder="Enter date"></md-datepicker> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <md-datepicker ng-model="myDatefin" md-placeholder="Enter date"></md-datepicker> 
       </td> 
      </tr> 
     </table> 
    </td> 
    <td> 
     <div fusioncharts 
      width="600" 
      height="400" 
      type="{{vm.chart.nameTypeChart}}" 
      chart="{{vm.chart.jsonparam}}" 
      dataset="{{vm.chart.dataset}}" > 
     </div> 
    </td> 
</tr> 

日誌:

2016-11-09 12:03:27.345 DEBUG 4110 --- [nio-8080-exec-6] c.d.d.aop.logging.LoggingAspect   : Enter: com.domoticsystem.dashboards.web.rest.ChartResource.changeChartPitch() with argument[s] = [2, HEURE] 
2016-11-09 12:03:27.345 DEBUG 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.ChartResource : REST request to chnage Chart pitch : 2 
Hibernate: select chart0_.id as id1_0_0_, chart0_.chart_id as chart_id2_0_0_, chart0_.client_id as client_i5_0_0_, chart0_.json_data_chart as json_dat3_0_0_, chart0_.nom_chart as nom_char4_0_0_, chart0_.type_chart_id as type_cha6_0_0_, client1_.id as id1_2_1_, client1_.client_adress as client_a2_2_1_, client1_.client_city as client_c3_2_1_, client1_.client_id as client_i4_2_1_, client1_.client_name as client_n5_2_1_, client1_.client_zip as client_z6_2_1_, selections2_.chart_id as chart_id6_0_2_, selections2_.id as id1_1_2_, selections2_.id as id1_1_3_, selections2_.chart_id as chart_id6_1_3_, selections2_.default_value as default_2_1_3_, selections2_.name as name3_1_3_, selections2_.type as type4_1_3_, selections2_.type_chart_id as type_cha7_1_3_, selections2_.value as value5_1_3_, typechart3_.id as id1_15_4_, typechart3_.type_name_chart as type_nam2_15_4_, typechart4_.id as id1_15_5_, typechart4_.type_name_chart as type_nam2_15_5_ from chart chart0_ left outer join client client1_ on chart0_.client_id=client1_.id left outer join chart_param selections2_ on chart0_.id=selections2_.chart_id left outer join type_chart typechart3_ on selections2_.type_chart_id=typechart3_.id left outer join type_chart typechart4_ on chart0_.type_chart_id=typechart4_.id where chart0_.id=? 
2016-11-09 12:03:27.391 DEBUG 4110 --- [nio-8080-exec-6] c.d.d.aop.logging.LoggingAspect   : Enter: com.domoticsystem.dashboards.web.rest.mapper.ChartMapper.chartToChartDTO() with argument[s] = [Chart{id=2, chartId='2', nomChart='Chart numéro 2', jsonDataChart='null'}] 
2016-11-09 12:03:27.391 DEBUG 4110 --- [nio-8080-exec-6] c.d.d.aop.logging.LoggingAspect   : Exit: com.domoticsystem.dashboards.web.rest.mapper.ChartMapper.chartToChartDTO() with result = ChartDTO{id=2, chartId='2', nomChart='Chart numéro 2', jsonDataChart='null'} 
2016-11-09 12:03:27.406 DEBUG 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.dto.ChartDTO  : DTO Dataset :[{"data": [{label: "0", value: '1'},{label: "10", value: '348'},{label: "20", value: '309'},{label: "30", value: '98'},{label: "40", value: '637'},{label: "50", value: '86'},[{"data": [{label: "0", value: '1'},{label: "10", value: '348'},{label: "20", value: '309'},{label: "30", value: '98'},{label: "40", value: '637'},{label: "50", value: '86'}]} ] 
2016-11-09 12:03:27.407 DEBUG 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.dto.ChartDTO  : DTO Dataset :[{"data": [{label: "0", value: '805'},{label: "10", value: '850'},{label: "20", value: '15'},{label: "30", value: '587'},{label: "40", value: '559'},{label: "50", value: '888'},[{"data": [{label: "0", value: '805'},{label: "10", value: '850'},{label: "20", value: '15'},{label: "30", value: '587'},{label: "40", value: '559'},{label: "50", value: '888'}]} ] 
2016-11-09 12:03:27.407 INFO 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.ChartResource : Resource dataset :[{"data": [{label: "0", value: '805'},{label: "10", value: '850'},{label: "20", value: '15'},{label: "30", value: '587'},{label: "40", value: '559'},{label: "50", value: '888'},[{"data": [{label: "0", value: '805'},{label: "10", value: '850'},{label: "20", value: '15'},{label: "30", value: '587'},{label: "40", value: '559'},{label: "50", value: '888'}]} ] 
2016-11-09 12:03:27.407 INFO 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.dto.ChartDTO  : DTO jsonParam : [ {"showvalues" : "0"},{"showcanvasborder" : "0"},{"canvasborderalpha" : "0"},{"canvasbordercolor" : "CCCCCC"},{"canvasborderthickness" : "1"},{"yaxismaxvalue" : "30000"},{"captionpadding" : "30"},{"linethickness" : "3"},{"yaxisvaluespadding" : "15"},{"legendshadow" : "0"},{"legendborderalpha" : "0"},{"palettecolors" : "#f8bd19,#008ee4,#33bdda,#e44a00,#6baa01,#583e"},{"showborder" : "0"},{"subCaption" : "Batiment du Port"},{"numberPrefix" : "kWh"},{"bgcolor" : "FFFFFF"},{"showalternatehgridcolor" : "0"},{"caption" : "Consommation Eclectrique"},{"divlinecolor" : "CCCCCC"},{"showvalues" : "0"}, 
2016-11-09 12:03:27.407 INFO 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.ChartResource : Resource JSONParam : [ {"showvalues" : "0"},{"showcanvasborder" : "0"},{"canvasborderalpha" : "0"},{"canvasbordercolor" : "CCCCCC"},{"canvasborderthickness" : "1"},{"yaxismaxvalue" : "30000"},{"captionpadding" : "30"},{"linethickness" : "3"},{"yaxisvaluespadding" : "15"},{"legendshadow" : "0"},{"legendborderalpha" : "0"},{"palettecolors" : "#f8bd19,#008ee4,#33bdda,#e44a00,#6baa01,#583e"},{"showborder" : "0"},{"subCaption" : "Batiment du Port"},{"numberPrefix" : "kWh"},{"bgcolor" : "FFFFFF"},{"showalternatehgridcolor" : "0"},{"caption" : "Consommation Eclectrique"},{"divlinecolor" : "CCCCCC"},{"showvalues" : "0"}] 
2016-11-09 12:03:27.407 DEBUG 4110 --- [nio-8080-exec-6] c.d.d.aop.logging.LoggingAspect   : Exit: com.domoticsystem.dashboards.web.rest.ChartResource.changeChartPitch() with result = <200 OK,ChartDTO{id=2, chartId='2', nomChart='Chart numéro 2', jsonDataChart='null'},{}> 
2016-11-09 12:03:27.409 DEBUG 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.dto.ChartDTO  : DTO Dataset :[{"data": [{label: "0", value: '13'},{label: "10", value: '179'},{label: "20", value: '751'},{label: "30", value: '715'},{label: "40", value: '707'},{label: "50", value: '641'},[{"data": [{label: "0", value: '13'},{label: "10", value: '179'},{label: "20", value: '751'},{label: "30", value: '715'},{label: "40", value: '707'},{label: "50", value: '641'}]} ] 
2016-11-09 12:03:27.410 INFO 4110 --- [nio-8080-exec-6] c.d.dashboards.web.rest.dto.ChartDTO  : DTO jsonParam : [ {"showvalues" : "0"},{"showcanvasborder" : "0"},{"canvasborderalpha" : "0"},{"canvasbordercolor" : "CCCCCC"},{"canvasborderthickness" : "1"},{"yaxismaxvalue" : "30000"},{"captionpadding" : "30"},{"linethickness" : "3"},{"yaxisvaluespadding" : "15"},{"legendshadow" : "0"},{"legendborderalpha" : "0"},{"palettecolors" : "#f8bd19,#008ee4,#33bdda,#e44a00,#6baa01,#583e"},{"showborder" : "0"},{"subCaption" : "Batiment du Port"},{"numberPrefix" : "kWh"},{"bgcolor" : "FFFFFF"},{"showalternatehgridcolor" : "0"},{"caption" : "Consommation Eclectrique"},{"divlinecolor" : "CCCCCC"},{"showvalues" : "0"}, 
2016-11-09 12:24:48.146 WARN 4110 --- [scheduler][T#1]] org.elasticsearch.monitor.jvm   : [Eros] [gc][young][8492][20] duration [1.6s], collections [1]/[2.4s], total [1.6s]/[2.9s], memory [538.8mb]->[134.4mb]/[1.2gb], all_pools {[young] [403.5mb]->[1.7mb]/[408mb]}{[survivor] [14.3mb]->[3.4mb]/[40.5mb]}{[old] [121mb]->[129.3mb]/[981.5mb]} 
+0

我想你可以改變你的** **刷新通過添加成功/錯誤回調爲$資源呼叫的呼叫是異步..類似** Chart.refresh(..)。成功(函數(響應){/ /做一些與響應..})。錯誤(函數(){..處理程序在任何服務器調用錯誤的情況下}) ** –

+0

我嘗試了你所說的話,最終得到了承諾。感謝提示! :) –

回答

0

changePeriodicite功能需要更新綁定chart對象(並呈現圖表)內成功 的Chart.refresh回調:

$scope.changePeriodicite = function() { 
    Chart.refresh({id : entity.id, pitch: $scope.periodicite}, onSuccess, onError); 

    function onSuccess(result) { 
     // success callback, `result` is the retrieved chart 
     vm.chart = result 
     FusionCharts.render({type: vm.chart.nameTypeChart, renderAt: "chartobject-1", chart: vm.chart.attrs, dataSource: vm.chart.dataset}); 
    } 
    function onError(error) { 
     // handle error here 
    } 
} 

另一種選擇,如果你喜歡的諾言:

$scope.changePeriodicite = function() { 
    return Chart.refresh({id : entity.id, pitch: $scope.periodicite}).$promise.then(onSuccess, onError); 

    function onSuccess(result) { 
     // success callback, `result` is the retrieved chart 
     vm.chart = result 
     FusionCharts.render({type: vm.chart.nameTypeChart, renderAt: "chartobject-1", chart: vm.chart.attrs, dataSource: vm.chart.dataset}); 
    } 
    function onError(error) { 
     // handle error here 
    } 
} 
+0

同時,我嘗試了幾件事情,我得到了這個承諾。 非常感謝! :) –