IoT platform design experience: five-level linkage and memory recovery

In the design of the Internet of things platform, involves a five-level linkage problem, the sequence of operations are as follows: Select the province, the city, the region, the company, the name of the device. In the era of jquery, it's easy to do this, but it's a little cumbersome, and it's good to handle the top-level drop-down list and then trigger the next Level drop-down list to load the data. The code is large and cumbersome compared to using ANGULARJS, and it has to deal with sequential loading issues. In this section, let's see what Angularjs can do for us. This article is written hastily, the explanation inevitably will have the fallacy, also please forgive me.

Five-level linkage design

As the provinces, cities, regions, companies four tables, in the database design is basically consistent, we specifically for these four kinds of drop-down list design a public template out.

App.directive (' Sectorpart ', [function () {    return {        restrict: ' AE ',        replace:true,        scope: {options: ' = "},        Template: ' <select class=" Form-control "ng-options=" item as Item.name for item in the options "Name=" state "style= "WIDTH:220PX;HEIGHT:33PX;" > '                + ' <option value= "" > Please select </option> '                + ' </select> '    };}]);

Because the data field types in the device table are not quite consistent, here we specifically design a drop-down list template for the device:

App.directive (' sectormachine ', [function () {    return {        restrict: ' AE ',        replace:true,        scope: {options : "="},        Template: ' <select class= "Form-control" ng-options= "item as Item.machine_name for item in Options" Name= "s Tate "style=" WIDTH:220PX;HEIGHT:33PX; " > '                + ' <option value= "" > Please select </option> '                + ' </select> '    };}]);

Well, the templates are all designed, and we'll then apply the template (Directive) to the page:

  <div class= "Searchcontainer" > <div class= "Row" > <div class= "col-md-4" > <div class= "Input-group" > <span class= "Input-group-addon" id= "Basic-addon1" > Province: </spa n> <sector-part options= "Provincedata" ng-model= "selectedprovince" ng-change= "GetCityList ()" >&                lt;/sector-part> </div> </div> <div class= "Col-md-4" > <div class= "Input-group" > <span class= "Input-group-addon" id= "Basic-addon1" > City: </ span> <sector-part options= "Citydata" ng-model= "selectedcity" ng-change= "Getdistrictlist ()" &GT;&L                t;/sector-part> </div> </div> <div class= "Col-md-4" > <div class= "Input-group" > <span class= "Input-group-addon" id= "Basic-addon1" > Region: &LT;/S                 Pan>   <sector-part options= "Districtdata" ng-model= "selecteddistrict" ng-change= "Getcompanylist ()" ></            sector-part> </div> </div> </div> <div class= "Row" > <div class= "col-md-4" > <div class= "Input-group" > <span class= "InP Ut-group-addon "id=" Basic-addon1 "> Owned company:</span> <sector-part options=" Companydata "ng-model=             "Selectedcompany" ng-change= "Getmachinelist ()" ></sector-part> </div> </div> <div class= "col-md-4" > <div class= "Input-group" > <spa n class= "Input-group-addon" id= "Basic-addon1" > Device name:</span> <sector-machine options= "Mac                Hinedata "ng-model=" Selectedmachine "ng-change=" RefreshPage () "></sector-machine> </div>            </div><div class= "col-md-4" > <div class= "Input-group" > <button class= "btn btn-s Uccess "ng-click=" Loadcontrollerlist () "style=" height:33px;line-height:16px;width:315px; " > Click Load </button> </div> </div> </div> </div>

From the HTML template, we can see the following key points: Options is the data I passed to the drop-down list, the drop-down list will load the list and display according to the value of the options, Ng-model is my selected item, once the list is selected, the data will be passed to the model Ng-change is the event that is triggered when the drop-down list is selected.

Finally, let's look at the wording of the controller:

App.controller (' Collectorcontroller ', [' $scope ', ' $cookies ', ' $timeout ', ' $compile ', ' baseservice ', ' Collectorservice ', ' uigridconstants ', function ($scope, $cookies, $timeout, $compile, Baseservice, Collectorservice,    uigridconstants) {var = this;    $scope. selectedprovince = null;    $scope. selectedcity = null;    $scope. selecteddistrict = null;    $scope. Selectedcompany = null;    $scope. Selectedmachine = null;        Province bound Collectorservice.getprovincedata (). Then (function (data) {var flag = data.data.success; if (flag) {$scope.        Provincedata = Data.data.data;    }}, NULL); $scope.        Getcitylist = function () {var Selectedprovinceid;        if ($scope. selectedprovince! = undefined) Selectedprovinceid = $scope. selectedprovince.id;        else return; City bound Collectorservice.getcitydata (Selectedprovinceid). Then (function (data) {var flag = DATA.DATA.SUCC            Ess              if (flag) {  $scope.            Citydata = Data.data.data;    }}, NULL); } $scope.        Getdistrictlist = function () {var Selectedcityid;        if ($scope. selectedcity! = undefined) Selectedcityid = $scope. selectedcity.id;        else return; County Bound Collectorservice.getdistrictdata (Selectedcityid). Then (function (data) {var flag = DATA.DATA.SUCC            Ess if (flag) {$scope.            Districtdata = Data.data.data;    }}, NULL); } $scope.        Getcompanylist = function () {var selecteddistrictid;        if ($scope. selecteddistrict! = undefined) else return; Company Bound Collectorservice.getcompanydata (Selecteddistrictid). Then (function (data) {var flag = Data.data.s            uccess;            if (flag) {$scope. Companydata = Data.data.data;    }}, NULL); } $scope.        Getmachinelist = function () {var Selectedcompanyid; if ($scope. selectedcompany! = undefined) Selectedcompanyid = $scope. selectedcompany.id;        else return; Device Bindings Collectorservice.getmachinelist (Selectedcompanyid). Then (function (data) {var flag = data.data.su            ccess; if (flag) {$scope.            Machinedata = Data.data.data;    }}, NULL); }}]);

The

does not look very concise. Anyway, the triggers for these methods are all based on Ng-change. Then the Ng-model is in the MVVM mode, so once the selected item is changed, it is automatically uploaded to the controller. As for Collectorservice is a simple service to get the data, here is not the main, I simply paste:

App.service (' Collectorservice ', [' $http ', function ($http) {var provincedata = function () {return $http ({    Method: ' POST ', url: '/process/getlocationlist?provinceid=-1&cityid=-1 '}); } var citydata = function (Provinceid) {return $http ({method: ' POST ', url: '/process/get    Locationlist?provinceid= ' + Provinceid + ' &cityid=-1 '}); } var districtdata = function (Cityid) {return $http ({method: ' POST ', url: '/process/get    Locationlist?provinceid=-1&cityid= ' + Cityid}); } var companydata = function (Districtid) {return $http ({method: ' POST ', url: '/basedata    /getschoolbydistrictid?districtid= ' + Districtid}); } var machinelist = function (CompanyID) {return $http ({method: ' POST ', url: '/machine/g    Etmachineby?companyid= ' + CompanyID + ' &iscontroller=0 '});        }return {getprovincedata:provincedata, getcitydata:citydata, Getdistrictdata:districtdata, Getcompanydata:companydata, getmachinelist:machinelist};}]);

OK, the above is the level five linkage. We can go down the first level. Isn't it convenient? Operation Diagram shows:

Five-level linkage memory recovery

In the actual use of time, some users reflect, five-level linkage selection is very troublesome, need a point, if you can remember the last choice is good. This makes it easy to click each time without effort. Based on this user requirement, I decided to use a cookie to memorize the last selection of the user, and then to load the previous browsing history at the next browsing time. Let's analyze how you can automatically load down a list and select it based on existing records.

First, we need to save the data in a cookie.

Second, we need to monitor the change of list options, where we can use the $watchcollection method.

Finally, after the list options change, we need to load the sub-list according to the selection, so we need to assign the variable selectedprovice,selectedcity.

With these steps in place, we'll make the following modifications:

App.controller (' Collectorcontroller ', [' $scope ', ' $cookies ', ' $timeout ', ' $compile ', ' baseservice ', ' Collectorservice ', ' uigridconstants ', function ($scope, $cookies, $timeout, $compile, Baseservice, Collectorservice,    uigridconstants) {var = this; $scope.    Provincedata = null; $scope.    Citydata = null; $scope.    Districtdata = null;    $scope. Companydata = null; $scope.    Machinedata = null; $scope.    RealTimeData = null; $scope.    Historydata = null;    $scope. selectedprovince = null;    $scope. selectedcity = null;    $scope. selecteddistrict = null;    $scope. Selectedcompany = null;    $scope. Selectedmachine = null; Monitor changes in the province, and if so, load the city list $scope. $watchCollection (' Selectedprovince ', function (Oldval, newval) {$scope.    Getcitylist ();    }); Monitor city changes and load the region list $scope if a change occurs. $watchCollection (' selectedcity ', function (Oldval, newval) {$scope.    Getdistrictlist ();    }); Monitor regional changes and load the company list $scope if a change occurs. $watchCollection (' Selecteddistrict ', function (oldVal, newval) {$scope.    Getcompanylist ();    }); Monitor company changes and load the machine list $scope if a change occurs. $watchCollection (' Selectedcompany ', function (Oldval, newval) {$scope.    Getmachinelist ();    });        Province bound Collectorservice.getprovincedata (). Then (function (data) {var flag = data.data.success; if (flag) {$scope.            Provincedata = Data.data.data; $scope. selectedprovince = Baseservice.getselecteddatamapper ($scope.        Provincedata, ' Province ');    }}, NULL); $scope.        Getcitylist = function () {var Selectedprovinceid;        if ($scope. selectedprovince! = undefined) Selectedprovinceid = $scope. selectedprovince.id;        else return; City bound Collectorservice.getcitydata (Selectedprovinceid). Then (function (data) {var flag = DATA.DATA.SUCC            Ess if (flag) {$scope.                Citydata = Data.data.data; $scope. selectedcity = Baseservice.getselecteddatamapper ($scope. Citydata, ' City ');    }}, NULL); } $scope.        Getdistrictlist = function () {var Selectedcityid;        if ($scope. selectedcity! = undefined) Selectedcityid = $scope. selectedcity.id;        else return; County Bound Collectorservice.getdistrictdata (Selectedcityid). Then (function (data) {var flag = DATA.DATA.SUCC            Ess if (flag) {$scope.                Districtdata = Data.data.data; $scope. selecteddistrict = Baseservice.getselecteddatamapper ($scope.            Districtdata, ' District ');    }}, NULL); } $scope.        Getcompanylist = function () {var selecteddistrictid;        if ($scope. selecteddistrict! = undefined) Selecteddistrictid = $scope. selecteddistrict.id;        else return; Company Bound Collectorservice.getcompanydata (Selecteddistrictid). Then (function (data) {var flag = Data.data.s            uccess; if (flag) {$scope. CompanydatA = Data.data.data;            $scope. Selectedcompany = Baseservice.getselecteddatamapper ($scope. Companydata, ' company ');    }}, NULL); } $scope.        Getmachinelist = function () {var Selectedcompanyid;        if ($scope. selectedcompany! = undefined) Selectedcompanyid = $scope. selectedcompany.id;        else return; Device Bindings Collectorservice.getmachinelist (Selectedcompanyid). Then (function (data) {var flag = data.data.su            ccess; if (flag) {$scope.                Machinedata = Data.data.data; $scope. Selectedmachine = Baseservice.getselecteddatamapper ($scope.            Machinedata, ' machine ');    }}, NULL); }//Get real-time data $scope.        Getrealtimedatabymachine = function () {//Put cascading list items into a cookie so that the subsequent operation is simplified to var expiredate = new Date ();        Expiredate.setdate (Expiredate.getdate () + 7);        Delete $cookies [' frontselection '];    var cookiedata = json.stringify ({        Province: $scope. Selectedprovince, City: $scope. selectedcity, District: $scope. selecteddistr        ICT, Company: $scope. Selectedcompany, Machine: $scope. selectedmachine});    $cookies. Put (' frontselection ', Cookiedata, {' Expires ': ExpireDate}); }}]);

As you can see, we store cookies in the browser when we click on the last Load button. Then when the page enters, we load the province list, the province list is loaded successfully, we immediately take out the last selected province from the cookie, and then assign a value to the Selectedprovice, this assignment action will immediately trigger the action in $watchcollection, Then the city-county bindings are made. Trigger at the first level until the end.

Some people will ask, what is the Baseservice. As I will be $scope.selectedprovince, $scope. Selectedcity and other objects are saved directly to the cookie, when taken out, I found that these entity has changed, the entity will automatically come out a more _ Hashcode attributes, resulting in a difference from the original entity, which will lead to ANGULARJS can not be verified, I must pass the Baseservice method, to restore the original Selectedprovice and other objects.

App.service (' Baseservice ', [' $cookies ', function ($cookies) {//Gets the data and assigns a value//type:province,city,district,company,mac Hine var selectionmapper = function (SourceData, type) {//Get value var from cookie Collectorselectionfromcookie =        $cookies. Get (' frontselection '); if (Collectorselectionfromcookie! = undefined) {//If the cookie exists, it is parsed Collectorselectionfromcookie = J            Son.parse ($cookies. Get (' frontselection '));                for (var i = 0; i < sourcedata.length; i++) {var-current = Sourcedata[i];                        if (type = = "province") {if (current.id = = collectorSelectionFromCookie.province.id) {                    return current; }} if (type = = "City") {if (current.id = = Collectorselectionfromcookie.                    City.id) {return current;                  }} if (type = = "District") {  if (current.id = = collectorSelectionFromCookie.district.id) {return current; }} if (type = = "Company") {if (current.id = = Collectorselectionfromcoo                    Kie.company.id) {return current; }} if (type = = "Machine") {if (current.machine_id = = Collectorselection                    FromCookie.machine.machine_id) {return current; }} if (type = = "Monitor") {if (current.id = = Collectorselectionfromcook                    Ie.monitor.id) {return current;    }}}} return null; } return {getselecteddatamapper:selectionmapper};}]);

Finally we open the page and see the results of the load:

IoT platform design experience: five-level linkage and memory recovery