一、框架内容说明
由于项目需求，把SAP UI5技术改为使用Web前端技术，以AngularJS来搭建框架，使用bootstrap进行样式调整，echarts进行绘画图表，在之前的项目基础上设计写出框架：
二、Images文件夹
放置工程中使用的图片。
三、Javascripts文件夹
放置加载所有页面的路由，定义module名，reportApp为在index.html中定义的ng-app的内容，然后定义模块变量。
var reportApp="app"; var YieldRateDashboardModule = angular.module("YieldRateDashboardModule",[]); var ByPlantModule = angular.module('ByPlantModule',[]); var homePageModule = angular.module('homePageModule',[]); var utilsModule =angular.module('utilsModule',[]); |
把所有模块放置在一个声明的变量中，统一配置路由，方便页面切换，这里使用的路由是angular-route.js包里$routeProvider，语法如下：
var myApp = angular.module(reportApp, [ 'ngRoute', 'YieldRateDashboardModule', 'homePageModule','ByPlantModule','utilsModule']); myApp.config([ '$routeProvider', function($routeProvider) { $routeProvider.when("/homePage", { templateUrl : "./modules/homePage/homePage.html", //controller : "homePageCtrl" }).when("/YieldRateDashboard", { templateUrl : "./modules/YieldRateDashboard/YieldRateDashboard.html", controller : "YieldRateDashboardCtrl" }).when("/ByPlant", { templateUrl : "./modules/YieldRateDashboard/ByPlant/ByPlant.html", controller : "ByPlantCtrl" }).otherwise({ redirectTo : "/homePage" }) }]); |
AngularJS经常会出现版本问题导致页面出错，以下代码添加后可以避免因为版本问题导致的页面无法切换问题，如果没有添加以下代码，无法进行页面切换。
myApp.config([ "$locationProvider", function($locationProvider) { $locationProvider.hashPrefix(""); } ]); |
也有另外一种路由方式，导入的是angular-ui-router.min.js这里导入的路由代码如下，使用的路由名为$stateProvider，如果路由报错可以查看是否导包问题，使用的路由问题以及还有导包的顺序问题：
angular .module(AppModuleName) .config([ "$stateProvider", "$urlRouterProvider", '$ocLazyLoadProvider', 'uiSelectConfig', function ($stateProvider, $urlRouterProvider, $ocLazyLoadProvider, uiSelectConfig) { $urlRouterProvider.otherwise("/andon/homepage"); uiSelectConfig.theme = 'bootstrap'; // bootstrap select2 selectize $ocLazyLoadProvider.config({ debug: true }); $stateProvider .state('login', { url: '/login', templateUrl: 'modules/login/login.html', controller: 'loginCtrl' }) }]); |
四、Lib文件夹
Angularjs需要导入包，这里导入的1.6版本的angular.js的包，angularjs很多时候会出现包的版本的问题，所以需要注意导入的包的版本，甚至在导包的顺序也会报错，这是使用angularjs需要注意到的地方。
五、Module文件夹
业务模块层，在这里编写模块代码，关于模块代码的编辑，写到这里。
5.1 HomePage
HomePage是主页面的内容，每个业务模块都要有以下四种类型的内容，css设计样式，html画页面，ctrl.js为控制层代码，Module.js为service层代码，调用公共读取数据代码。
5.2 homepage.css
在这里编写样式，有些样式在bootstrap中的样式不满足需求的，可以在这里编辑样式，把模块分清可以使调理清晰，同时需要在index页面中加载该css。
#head{ margin-top:1%; } #subTitle{ display: inline-block; font-size: 30px; color: black; padding-bottom:2%; } |
5.3 homepage.html
主界面显示页，效果如下，这是一个小demo：
在html文件中只需要写body里面的内容，因为实际内容已经在index.html中加载，所有的放置到ng-view中，此处概念与ui5类似，具体代码如下：
<div> <div id="head"> <img src="./images/catl.PNG" width="211px" height="68px" /> <span id="subTitle">宁德时代新能源智能化报表管理平台span> <input type="button" /> <script> $(function() { $('.disableCss').removeAttr('href');//去掉a标签中的href属性 }); script> div> <hr /> <div> <table CellSpacing="30"> <tr> <td><img src="./images/img1.PNG" />td> <td><img src="./images/img2.PNG" />td> <td><img src="./images/img3.PNG" />td> <td><img src="./images/img4.PNG" />td> tr> <tr> <td><a class="disableCss" href="#YieldRateDashboard" disabled="true" >运营系统人力状况a>td> <td><a class="disableCss" href="#YieldRateDashboard" disabled="true">计划与达成a>td> <td><a class="disableCss" href="#YieldRateDashboard" disabled="true">生产一次优率a>td> <td><a class="disableCss" href="#YieldRateDashboard" disabled="true">设备故障率a>td> tr> <tr> <td><a class="disableCss" href="#YieldRateDashboard" disabled="true">生产部流失率（1-3职等员工）a>td> <td><a class="disableCss" href="#YieldRateDashboard" disabled="true">效率达成a>td> <td><a href="#YieldRateDashboard">生产Total优率a>td> <td><a class="disableCss" href="#YieldRateDashboard" disabled="true">设备综合效率a>td> tr> <tr> <td><a class="disableCss" href="#YieldRateDsashboard" disabled="true">运营系统加班管控a>td> <td><a class="disableCss" href="#YieldRateDsashboard" disabled="true">效率损失因子分析a>td> <td><a class="disableCss" href="#YieldRateDsashboard" disabled="true">原材料利用率a>td> <td><a class="disableCss" href="#YieldRateDsashboard" disabled="true">设备停机率a>td> tr> <tr> <td><a class="disableCss" href="#YieldRateDashboard" disabled="true">数据维护a>td> <td>td> <td>td> <td><a class="disableCss" href="#YieldRateDashboard" disabled="true">故障平均修复时间a>td> tr> <tr> <td>td> <td>td> <td>td> <td><a class="disableCss" href="#YieldRateDashboard" disabled="true">平均停机间隔时间a>td> tr> table> div>div> |
5.4 byPlantCtrl.js
在这里写controller里面的内容，关于页面逻辑在这层进行编辑：
ByPlantModule.controller('ByPlantCtrl',['$scope','HttpAppService','ByPlantService',function($scope,HttpAppService,ByPlantService){ $scope.config={ byPlantChart:[] }; $scope.byPlant=function(){ ByPlantService.byPlant().then(function(sdata){ if(sdata.data&&sdata.data.length > 0){ for(var i=0;i <sdata.data.length;i++){< span> </sdata.data.length;i++){<> $scope.config.byPlantChart.push(sdata.data[i]); }} if($scope.config.byPlantChart == null){ return; } }); } }]); |
5.5 byPlantModule.js
这层是关于service的代码，在这里调用接口路径，与后台对接。
ByPlantModule.service('ByPlantService', [ 'HttpAppService', function (HttpAppService) { return { byPlant:byPlant2 } function byPlant2(){ var url = HttpAppService.URLS.PLANT_DATA; return HttpAppService.get(url);
} }]); ByPlantModule .run([ '$templateCache', function ($templateCache){ $templateCache.put('andon-ui-grid-tpls/planStopStart', " ); $templateCache.put('andon-ui-grid-tpls/planStopEnd', " "); $templateCache.put('andon-ui-grid-tpls/planStopReason', " "); }]); |
5.6 utilService.js
这里的代码是关于整个业务模块的公共方法utilsService和关于接口路径传递参数的方法httpAppService，这里会遇到一个问题，在angularJS 1.6版本后的包已经废弃了$http中的success和error方法传参，如果使用这个方法将会报出没有success方法的错误，由于使用的包为1.6版本，所以使用了以下通用版本的传参方式：
utilsModule .factory('UtilsService', [ '$filter','$q','$timeout', function ($filter,$q,$timeout) { return {} }]); utilsModule .factory('HttpAppService', [ "$http", "$q", "UtilsService", function ($http, $q, UtilsService){ var baseUrl = "/mhp-reporting/web/rest/"; var baseUrl_static = "./modules/YieldRateDashboard/jsonData/"; return { post: post, get: get, /** * [URLS 定义项目中所有请求的请求路径] */ URLS: { PLANT_DATA: baseUrl_static + "plantList.json", }, }; /** * [get 公共get请求出口] */ function get(opt){ var promise=$http({ method:'GET', url:opt, }) return promise; } /** * [post 公共post请求出口] */ function post(opt) { var promise=$http({ method:'POST', url:opt, data:reqParams }); return promise; } }]); |
六、Index.html
在html里面加载所有使用到的包，css，js内容，在body中设置ng-app，在div中设置ng-view：
DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <title>智能优化报表title> <script type="text/javascript" src="./lib/jQuery/jquery-3.2.1.js">script> <script src="./lib/angular/angular.js">script> <script src="./lib/angular/angular-resource.js">script> <script src="./lib/angular/angular-cookies.js">script> <script src="./lib/angular/angular-sanitize.js">script> <script src="./lib/angular/angular-route.js">script> <script src="./lib/echarts/echarts.js">script> <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="./lib/bootstrap/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">script> <script src="./javascripts/ReportApp.js">script> <script src="./modules/homePage/homePageCtrl.js">script> <script src="./modules/homePage/homePageModuld.js">script> <link href="./modules/homePage/homePage.css" rel="stylesheet" type="text/css"/> <script src="./modules/YieldRateDashboard/YieldRateDashboardCtrl.js">script> <script src="./modules/YieldRateDashboard/ByPlant/ByPlantCtrl.js">script> <script src="./modules/YieldRateDashboard/ByPlant/ByPlantModule.js">script> <script src="./modules/utils/utilsServices.js">script> head> <body ng-app= "app"> <div ng-view> div> body> html> |
七、Echarts.js
Echarts.js是目前效果比较绚丽的图表绘制工具，使用起来还是挺简单的，网上还有专门的绘制工具，以下是一个小模板：
YieldRateDashboardModule.controller('YieldRateDashboardCtrl', ['$scope','$http', function($scope,$http) { $scope.legend = [ "Berlin", "London", 'New York', 'Tokyo' ]; $scope.item = [ 'Jan', 'Feb', 'Mar', 'Apr', 'Mar', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]; $scope.data = [ [ -1, 1, 3, 7, 13, 16, 18, 16, 15, 9, 4, 2 ], // Berlin [ 0, 1, 4, 7, 12, 15, 16, 15, 15, 10, 6, 5 ], // London [ 4, 4, 5, 10, 16, 22, 25, 24, 20, 14, 9, 3 ], // New York [ 7, 6, 8, 14, 17, 22, 25, 27, 24, 17, 14, 10 ] // Tokyo ]; }]); YieldRateDashboardModule.directive('line', function() { return { scope : { id : "@", legend : "=", item : "=", data : "=" }, restrict : 'E', template : ' replace : true, link : function($scope, element, attrs, controller) { var option = { color : [ '#3398DB' ], tooltip : { trigger : 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' }}, grid : { left : '3%', right : '4%', bottom : '3%', containLabel : true }, // 横轴坐标轴 xAxis : [ { type : 'category', data : [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ], axisTick : { alignWithLabel : true } } ], // 纵轴坐标轴 yAxis : [ { type : 'value' } ], // 数据内容数组 series : function() { var serie = []; for (var i = 0; i < $scope.legend.length; i++) { var item = { name : $scope.legend[i], type : 'bar', data : $scope.data[i] }; serie.push(item); } return serie; }() }; var myChart = echarts.init(document.getElementById($scope.id), 'macarons'); myChart.setOption(option); } };}); |
我是老周，如果你喜欢我的文字，请记得点击⬇️关注我。
码字不易，文章下拉，右边点个【赞】和【在看】吧！！
猜您还喜欢合集：
猜您还喜欢文章：
