mobile CCTV,mobile surveillance,police body worn cameras

标题: smarteye WEB版移动指挥系统讲解 [打印本页]

author: IBeli time: 2018-9-25 21:01
标题: smarteye WEB版移动指挥系统讲解
移动指挥系统是一个基于AngularJS v1.6.6、Jquery、Bootstrap、Html5、css3的 Web指挥控制系统。目前由登录、移动指挥、图像点播、历史查询、用户管理和系统设置六个界面构成。
[attach]1492[/attach][attach]1493[/attach]
下面所讲解的项目代码，是Web插件安装目录下的 \nginx\html\custom\bj 这个项目，在下面的介绍中将使用bj项目来指代所介绍的项目，请悉知。
在介绍代码之前您必须对angularjs中以下知识点有所了解：1、AngularJS 通过被称为指令的新属性来扩展 HTML。
   AngularJS 通过内置的指令来为应用添加功能。
   AngularJS 允许你自定义指令。
   在我们的代码中也使用了很多自定义的指令，如设备列表、用户列表等，在项目目录下的ng-derective文件夹下定义了项目中使用的指令。


2、构建一个AngularJs SPA（单页面应用）的过程。

   首先，使用内置ng-app指令
   ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。所有 AngularJS 应用都必须要要一个根元素。

<div ng-app="<font color="#ff0000">myApp</font>" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("<font color="#ff0000">myApp</font>", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>

copycode

[attach]1481[/attach][attach]1480[/attach]

3、AngularJS 中可以创建自己的服务
AngularJS服务，是一个可以在Angularjs框架下使用的全局唯一的Js对象。
bj项目下ng-services目录中就是service的定义。
ngServiceJsw.js 中定义了对jsw.js 封装的服务JswService。

4、AngularJS 中创建自定义的指令

AngularJS指令，相关文档

bj项目下ng-derective目录下就是自定义的指令。
[attach]1485[/attach]

5、ng-repeat指令
   ng-repeat 指令用于循环输出指定次数的 HTML 元素, bj项目的设备列表，用户列表，多屏幕都是用ng-repeat来实现的，ng-repeat使用参考文档。

结合上述的AngularJs概念，讲解bj项目中的一个简单的指令loginpanel指令
loginpanel指令的使用
[attach]1490[/attach]

下面是loginpanel指令定义相关的代码
ng-derective/login/  下是loginpanel指令相关的文件，如下图所示。
[attach]1488[/attach]
login目录下包含
[attach]1489[/attach]
delogin.js
      向AngularjsApp注册loginpanel指令，指定模版地址 templateUrl: ng-derective/login/template.html
      scope:{
         ontrylogin: '=',
         dftinfo: '=',
         gbinfo: '=',
         loadresult: '='
      }, //Angularjs 作用域的绑定策略，bj项目中使用的基本上都是"=",与父scope进行双向绑定
      link: function(scope, element, attr){//scope：就是该指令实例的作用域， element是该指令元素的Jquery对象， attr是该指令元素属性集合的jquery对象
            scope.onclicktrylogin = function(){

            }// scope.onclicktrylogin 给scope添加了个onclicktrylogin属性，这个属性可以直接在html视图中使用 , 像是 <a>{{onclicktrylogin}}</a> 或者 <button ng-click="onclicktrylogin()"></button>
            // <button ng-click="onclicktrylogin()"></button> 当该button被单击时，就会触发scope.onclicktrylogin()方法。
      }
template.css       //template.css template.html的样式文件  在index.html 中引入
template.html       //模版文件

下面就图像点播和集群通话的前端实现做详细介绍
如图所示，图像点播由左侧的设备列表和右侧的多个播放窗口组成。左侧的设备列表用于显示在线设备，右侧的多个播放窗口用于播放实时的视频。
[attach]1479[/attach]
图像点播相关的文件有
ng-controller/picController.js    定义了控制器picCtrl，依赖ng-services/ngServiceJsw.js，封装了打开关闭视频的接口             在index.html中通过ng-controller="picCtrl"，指定picctrl的作用域。
ng-derective/pulist/                   设备列表指令（tpulist），用于显示设备列表，依赖ng-services/ngProviderPulist.js                通过<tpulist></tpulist> 在ng-derective/options/pic/template.html 中使用。

ng-derective/options/pic/          图像点播指令（picmodel），用于显示整个图像点播界面，依赖设备列表指令
[attach]1487[/attach]

[attach]1486[/attach]
通过 <picmodel></picmodel>在index.html中使用，在index.html中picCtrl控制器向<picmodel></picmodel>，提供picevent，listinfo目前已废弃。在picmodel通过，scope.picevents接收。
ng-derective/options/pic/template.css ng-derective/options/pic/template.html  请类比lognpanel指令，其作用是相同的。

ng-services/ngProviderPulist.js 用于生成设备设备列表数据对象，当设备状态改变时，也会更改数据对象
ng-services/ngServiceJsw.js       封装了jsw.js，向上层提供对smarteye平台访问的接口

实际上多个播放窗口就是多个div，这里使用了ng-repeat指令，ng-repeat 指令用于循环输出指定次数的 HTML 元素
[attach]1491[/attach]
每个播放窗口div的id都是通过，<div id={{col.id}}>...<div> 指定的。 col.id 在depic.js中scope.row中有定义。

阅读代码中如果遇到ng-xxxx的html元素属性，那么这就是Angularjs内置的指令，可以百度了解其作用。

未完待续。。。

author: qiyu time: 2018-9-27 10:49
麻烦将多语言调用的代码注释也贴出来下

author: admin time: 2018-9-27 11:25
好的，已安排。

欢迎光临 mobile CCTV,mobile surveillance,police body worn cameras (http://bbs.besovideo.com:8067/)