mobile CCTV,mobile surveillance,police body worn cameras

 forgetPW
 registerNow
search
view: 1133|reply: 2

smarteye WEB版移动指挥系统讲解

[copyURL]

4

主题

231

帖子

862

积分

advMem

Rank: 4

积分
862
poston 2018-9-25 21:01 | 显示全部楼层 |阅读模式
移动指挥系统 是一个基于AngularJS v1.6.6、Jquery、Bootstrap、Html5、css3的 Web指挥控制系统。目前由登录、移动指挥、图像点播、历史查询、用户管理和系统设置六个界面构成。

下面所讲解的项目代码,是Web插件安装目录下的 \nginx\html\custom\bj 这个项目,在下面的介绍中将使用bj项目来指代所介绍的项目,请悉知。
在介绍代码之前您必须对angularjs中以下知识点有所了解:1、AngularJS 通过被称为 指令 的新属性来扩展 HTML。
      AngularJS 通过内置的指令来为应用添加功能。
      AngularJS 允许你自定义指令。
     在我们的代码中也使用了很多自定义的指令,如设备列表、用户列表等,在项目目录下的ng-derective文件夹下定义了项目中使用的指令
     

2、构建一个AngularJs SPA(单页面应用)的过程

     首先,使用内置ng-app指令
     ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。所有 AngularJS 应用都必须要要一个根元素。
     
  1. <div ng-app="<font color="#ff0000">myApp</font>" ng-controller="myCtrl">
  2.     {{ firstName + " " + lastName }}
  3. </div>

  4. <script>
  5. var app = angular.module("<font color="#ff0000">myApp</font>", []);
  6. app.controller("myCtrl", function($scope) {
  7.     $scope.firstName = "John";
  8.     $scope.lastName = "Doe";
  9. });
  10. </script>
copycode


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


4、AngularJS 中创建自定义的指令
AngularJS指令,相关文档
    bj项目下ng-derective目录下就是自定义的指令。


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




结合上述的AngularJs概念,讲解bj项目中的一个简单的指令loginpanel指令
loginpanel指令的使用


下面是loginpanel指令定义相关的代码
ng-derective/login/  下是loginpanel指令相关的文件,如下图所示。

login目录下包含

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        //模版文件


下面就图像点播 和 集群通话的前端实现做详细介绍
如图所示,图像点播由左侧的设备列表和右侧的多个播放窗口组成。左侧的设备列表用于显示在线设备,右侧的多个播放窗口用于播放实时的视频。

图像点播 相关的文件有
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),用于显示整个图像点播界面,依赖设备列表指令



通过 <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 元素

每个播放窗口div的id都是通过,<div id={{col.id}}>...<div> 指定的。 col.id   在depic.js中scope.row中有定义。   

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


未完待续。。。



本帖子中包含更多资源

pls login 才可以下载或查看,没有帐号?registerNow

x
reply

使用道具 report

5

主题

11

帖子

57

积分

member

Rank: 2

积分
57
poston 2018-9-27 10:49 | 显示全部楼层
麻烦将多语言调用的代码注释也贴出来下
reply agree Against

使用道具 report

9

主题

523

帖子

2216

积分

admin

Rank: 9Rank: 9Rank: 9

积分
2216
poston 2018-9-27 11:25 | 显示全部楼层
好的,已安排。
reply agree Against

使用道具 report

creditRule

QQ|wireless surveillance

GMT+8, 2019-12-9 21:13 , Processed in 0.078124 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

QuickReply backToTop BackToList