latest

angular.json

@@ -28,7 +28,8 @@
               "src/assets"
             ],
             "styles": [
-              "src/styles.less"
+              "src/styles.less",
+              "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
             ],
             
             "scripts":[
@@ -89,7 +90,8 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
-              "src/styles.less"
+              "src/styles.less",
+              "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
             ],
             "scripts": [],
             "assets": [

package-lock.json

@@ -121,6 +121,31 @@
         "rxjs": "6.3.3"
       }
     },
+    "@angular/animations": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npm.taobao.org/@angular/animations/download/@angular/animations-8.2.0.tgz",
+      "integrity": "sha1-QG6SQhUxcsKuDMcsTguzfhTT7Fs=",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "@angular/cdk": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npm.taobao.org/@angular/cdk/download/@angular/cdk-7.3.7.tgz",
+      "integrity": "sha1-zhrVO6BL65yOlQrMVpHqAUN1N2Q=",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^1.7.1"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npm.taobao.org/parse5/download/parse5-5.1.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparse5%2Fdownload%2Fparse5-5.1.0.tgz",
+          "integrity": "sha1-xZNByXI/QUxFKXVWTHwApo1YrNI=",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "7.3.9",
       "resolved": "https://registry.npm.taobao.org/@angular/cli/download/@angular/cli-7.3.9.tgz?cache=0&sync_timestamp=1563411123554&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40angular%2Fcli%2Fdownload%2F%40angular%2Fcli-7.3.9.tgz",
@@ -442,6 +467,23 @@
         "tslib": "^1.9.0"
       }
     },
+    "@ant-design/colors": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npm.taobao.org/@ant-design/colors/download/@ant-design/colors-3.1.0.tgz",
+      "integrity": "sha1-t+LMYaTobT0QlJQDSs+xIi2sqjw=",
+      "requires": {
+        "tinycolor2": "^1.4.1"
+      }
+    },
+    "@ant-design/icons-angular": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npm.taobao.org/@ant-design/icons-angular/download/@ant-design/icons-angular-2.1.0.tgz",
+      "integrity": "sha1-ErDQKHe1M6gnHVYecfG6tR378dE=",
+      "requires": {
+        "@ant-design/colors": "^3.1.0",
+        "tslib": "^1.9.0"
+      }
+    },
     "@babel/code-frame": {
       "version": "7.5.5",
       "resolved": "https://registry.npm.taobao.org/@babel/code-frame/download/@babel/code-frame-7.5.5.tgz",
@@ -2551,6 +2593,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "date-fns": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npm.taobao.org/date-fns/download/date-fns-1.30.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdate-fns%2Fdownload%2Fdate-fns-1.30.1.tgz",
+      "integrity": "sha1-LnG/CxGRU9u0zE6I2epaz7UNwFw="
+    },
     "date-format": {
       "version": "2.1.0",
       "resolved": "https://registry.npm.taobao.org/date-format/download/date-format-2.1.0.tgz",
@@ -6402,19 +6449,22 @@
       "integrity": "sha1-rCetpmFn+ohJpq3dg39rGJrSCBw=",
       "dev": true
     },
+    "ng-zorro-antd": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npm.taobao.org/ng-zorro-antd/download/ng-zorro-antd-7.2.0.tgz?cache=0&sync_timestamp=1564410999960&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fng-zorro-antd%2Fdownload%2Fng-zorro-antd-7.2.0.tgz",
+      "integrity": "sha1-N0dkjMYfJUhu244wwWKoRKoceZs=",
+      "requires": {
+        "@angular/cdk": "^7.0.0",
+        "@ant-design/icons-angular": "^2.0.2",
+        "date-fns": "^1.29.0",
+        "tslib": "^1.9.0"
+      }
+    },
     "ngx-color-picker": {
       "version": "8.1.0",
       "resolved": "https://registry.npm.taobao.org/ngx-color-picker/download/ngx-color-picker-8.1.0.tgz",
       "integrity": "sha1-65n1MGJhaenuoVxMnHLAolIJRpY="
     },
-    "ngx-webcam": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npm.taobao.org/ngx-webcam/download/ngx-webcam-0.2.5.tgz",
-      "integrity": "sha1-bhKHE+KN+v5z1XfXD2BQR+4MB9c=",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npm.taobao.org/nice-try/download/nice-try-1.0.5.tgz",
@@ -9455,6 +9505,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tinycolor2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.1.tgz",
+      "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz",
@@ -9554,14 +9609,6 @@
       "integrity": "sha1-U5jzdOLykrncx7LnHjClw7tsdDo=",
       "dev": true
     },
-    "tree-ngx": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npm.taobao.org/tree-ngx/download/tree-ngx-2.2.4.tgz",
-      "integrity": "sha1-YaHcfp9PBs/TfyTEH4JbaaRhK6U=",
-      "requires": {
-        "tslib": "^1.9.0"
-      }
-    },
     "trim-newlines": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/trim-newlines/download/trim-newlines-1.0.0.tgz",

package.json

@@ -3,17 +3,18 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --proxy--config proxy.json",
-    "build": "ng build --prod --build-optimizer ",
-    "remove-to": "rd /s /q D:\\projects\\supervise\\src\\main\\resources\\static",
-    "create": "mkdir D:\\projects\\supervise\\src\\main\\resources\\static",
-    "copy-to": " powershell -command \" Copy-Item D:\\projects\\map\\dist\\map\\* -Destination D:\\projects\\supervise\\src\\main\\resources\\static\\ -Recurse \"",
+    "start": "ng serve --port 4321 --proxy--config proxy.json",
+    "build": "ng build --prod --build-optimizer && npm run remove-to && npm run create && npm run copy-to ",
+    "remove-to": "rd /s /q D:\\projects\\supervise\\supervise\\src\\main\\resources\\static",
+    "create": "mkdir D:\\projects\\supervise\\supervise\\src\\main\\resources\\static",
+    "copy-to": " powershell -command \" Copy-Item D:\\projects\\map\\dist\\map\\* -Destination D:\\projects\\supervise\\supervise\\src\\main\\resources\\static\\ -Recurse \"",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
+    "@angular/animations": "^8.2.0",
     "@angular/common": "~7.2.0",
     "@angular/compiler": "~7.2.0",
     "@angular/core": "~7.2.0",
@@ -26,10 +27,9 @@
     "@fortawesome/free-solid-svg-icons": "^5.9.0",
     "angular2-baidu-map": "^4.7.0",
     "core-js": "^2.5.4",
+    "ng-zorro-antd": "^7.2.0",
     "ngx-color-picker": "^8.1.0",
-    "ngx-webcam": "^0.2.5",
     "rxjs": "~6.3.3",
-    "tree-ngx": "^2.2.4",
     "tslib": "^1.9.0",
     "zone.js": "~0.8.26"
   },

src/app/api/api/default.service.ts

@@ -37,13 +37,13 @@ import { BASE_PATH, COLLECTION_FORMATS }                     from '../variables'
 import { Configuration }                                     from '../configuration';
 import { Observable } from 'rxjs';
 
-
+//import {environment} from '../../../environments';
 @Injectable()
 export class DefaultService {
 
-   //public basePath = 'http://localhost:8081';
-   
-    public basePath = 'http://192.168.19.200:8081';
+    public basePath = 'http://localhost:8081';
+   // public basePath = 'http://192.168.19.199:8081';
+     // public basePath = environment.prod? 'http://localhost:8081':'http://192.168.19.199:8081';
     public defaultHeaders = new HttpHeaders();
     public configuration = new Configuration();
 

src/app/app.module.ts

@@ -11,8 +11,8 @@ import { ModalComponent } from './modal/modal.component';
 import { ApiModule } from './api';
 import { HttpClientModule } from '@angular/common/http';
 import { ColorPickerModule } from 'ngx-color-picker';
-import {WebcamModule} from 'ngx-webcam';
-import { TreeNgxModule } from 'tree-ngx';
+import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [
@@ -28,10 +28,11 @@ import { TreeNgxModule } from 'tree-ngx';
     BrowserModule,
     AppRoutingModule,
     ColorPickerModule,
+    BrowserAnimationsModule,
     FormsModule,
     ApiModule,
-    TreeNgxModule,
-    WebcamModule,
+       /** 导入 ng-zorro-antd 模块 **/
+       NgZorroAntdModule,
     BaiduMapModule.forRoot({ ak: 'KhQqnL3owyAzqjr4zCGbWiiHwPFmKTD6' })
   ],
   providers: [],

src/app/main/main.component.html

@@ -228,7 +228,7 @@
    </div>  
 </div>  
 
-
+-->
 <jw-modal id="custom-modal-1">
   <h1>添加项目</h1>
   <p>项目名称: <input type="text" [(ngModel)]="proj.name" /></p>
@@ -296,7 +296,7 @@
     
         <button (click)="addCamera(camera)">添加</button>
         <button (click)="closeModal('marker');">Close</button>
-      </jw-modal>-->
+      </jw-modal>
 
 <div class="function">
   <div class="tooltip">

src/app/main/main.component.ts

@@ -41,7 +41,7 @@ export interface DialogData {
 export class MainComponent implements OnInit {
   cameraSum: any={};
   allsecs: any=[];
-  curive:boolean = false;
+  curive:boolean = true;
   curiveLength:number = 10;
   theme: any;
 

src/app/services/map.service.ts

@@ -17,13 +17,47 @@ export class SelfMapService {
  * 转换为平滑点
  * @param points 点
  */
-  toPoints(points: Array<Point>,cursiveLength:number,cursive:boolean) {
+  toPoints(points: any,cursiveLength:number,cursive:boolean) {
 
     if (!points) {
       return []
     }
     if(cursive){
-      var newPoints = this.getCurvePoints(points,{count:cursiveLength});
+
+      //平滑折点附近的算法
+      var newPoints = [];
+       var distince = 0.0001;
+       newPoints.push(points[0]);
+       for(var i=1;i<points.length-1;i++){
+            var currentPointx = points[i][0];
+            var currentPointy = points[i][1];
+
+            var prevPointx = points[i-1][0];
+            var prevPointy = points[i-1][1];
+
+            var nextPointx = points[i+1][0];
+            var nextPointy = points[i+1][1];
+
+            var distince$  = Math.sqrt(Math.pow(prevPointx-currentPointx,2)+Math.pow(prevPointy-currentPointy,2));
+            var length1=distince$*0.1;
+            //左节点
+            var pleftx = currentPointx+(length1*(prevPointx-currentPointx)/distince$);
+            var plefty = currentPointy+(length1*(prevPointy-currentPointy)/distince$);
+
+
+            var distince$2  = Math.sqrt(Math.pow(nextPointx-currentPointx,2)+Math.pow(nextPointy-currentPointy,2));
+            var length2 = distince$2*0.1;
+                   //右节点
+                   var prightx = currentPointx+(length2*(nextPointx-currentPointx)/distince$2);
+                   var prighty = currentPointy+(length2*(nextPointy-currentPointy)/distince$2);
+            
+
+            
+             var cacPoints =   this.getCurvePoints([{lng:pleftx,lat:plefty},{lng:prightx,lat:prighty}],{count:cursiveLength});
+            newPoints = newPoints.concat(cacPoints);       
+            //newPoints = newPoints.concat([[pleftx,plefty],[prightx,prighty]]);       
+       }
+       newPoints.push(points[points.length-1]);
       return newPoints.map(p => {
         return new window.BMap.Point(p[0], p[1])
       })
@@ -151,7 +185,7 @@ export class SelfMapService {
   /**
   * 根据弧线的坐标节点数组
   */
- getCurvePoints (points, options) {
+ getCurvePoints (points, options):Array<Point> {
   options = options || {};
   var curvePoints = [];
   for (var i = 0; i < points.length - 1; i++) {
@@ -243,6 +277,9 @@ export class SelfMapService {
     var lng1_src = obj1.lng;
     var lng2_src = obj2.lng;
 
+    // curveCoordinates.push([
+    //   (lng1_src < 0 && lng2_src > 0) ? x - 360 : x, y
+    // ]);
     curveCoordinates.push([
       (lng1_src < 0 && lng2_src > 0) ? x - 360 : x, y
     ]);

src/app/video/video.component.html

@@ -6,7 +6,10 @@
 <div class="main">
  <div>
    <button (click)="back()">返回</button>
-   <tree-ngx  [nodeItems]="nodeItems"> </tree-ngx>
+   <!-- <tree-ngx  [nodeItems]="nodeItems"> </tree-ngx> -->
+   <nz-tree [nzData]="nodes" nzAsyncData (nzClick)="addVCR($event)" (nzExpandChange)="nzEvent($event)"> </nz-tree>
+
+
    <a (click)="preview()" style="    color: white;
    text-decoration: none;
    margin-left: 2em;">演示demo1</a>

src/app/video/video.component.ts

 import { Component, OnInit } from '@angular/core';
 import { DynamicScriptLoaderService } from '../dynamic-script.service';
+import { NzTreeNodeOptions, NzFormatEmitEvent } from 'ng-zorro-antd';
+import { HttpClient } from '@angular/common/http';
+import { DefaultService } from '../api';
 declare var WebControl;
 declare var JSEncrypt;
 declare var $;
@@ -12,7 +15,7 @@ const height =700;
 })
 export class VideoComponent implements OnInit {
 
-  constructor(private dynamicScriptLoader: DynamicScriptLoaderService) { }
+  constructor(private dynamicScriptLoader: DynamicScriptLoaderService,private http:HttpClient,private d:DefaultService ) { }
   oWebControl = null;
   pubKey = null;
   initCount = 0;
@@ -127,6 +130,57 @@ export class VideoComponent implements OnInit {
      this.startVideo();
     });
   }
+
+  nodes = [
+    { title: '高速公路', key: '1' },
+    { title: '普通干线', key: '0' }
+  ];
+
+  nzEvent(event: Required<NzFormatEmitEvent>): void {
+    console.log(event);
+    // load child async
+    if (event.eventName === 'expand') {
+      const node = event.node;
+      var request = null;
+      switch (node.level) {
+        case 0://项目
+           request = "/project/list/";
+          break;
+        case 1://标段
+          request = "/scetion/findListById/";
+          break;
+          case 2://录像机
+            request = "/vcr/findListById/";
+            break;
+        default:
+          break;
+      }
+      this.http.get( this.d.basePath+ request+node.key).subscribe(res=>{
+       console.log(res);
+        node.addChildren((res as any).data.map((d,index)=>({title:d.name || d.cameraName,key:d.id ||d.cameraIndexCode,index:index })));
+      });
+      // if (node && node.getChildren().length === 0 && node.isExpanded) {
+      //   this.loadNode().then(data => {
+      //     node.addChildren(data);
+      //   });
+      // }
+    }
+  }
+  addVCR($event:Required<NzFormatEmitEvent>){
+      this.preview2($event.node.key,$event.node.origin.index+1);
+  }
+  loadNode(): Promise<NzTreeNodeOptions[]> {
+    return new Promise(resolve => {
+      setTimeout(
+        () =>
+          resolve([
+            { title: 'Child Node', key: `${new Date().getTime()}-0` },
+            { title: 'Child Node', key: `${new Date().getTime()}-1` }
+          ]),
+        1000
+      );
+    });
+  }
   preview() {
     var cameraIndexCode  ="862edc0a09734e83a69101f69f840e0d";     //获取输入的监控点编号值，必填
     var streamMode = 0;                                     //主子码流标识：0-主码流，1-子码流
@@ -148,12 +202,11 @@ export class VideoComponent implements OnInit {
         })
     })
   }
-  preview2() {
-    var cameraIndexCode  ="bb44edc4e843421da68f33699e7203f2";     //获取输入的监控点编号值，必填
+  preview2(cameraIndexCode:string,wndId) {
+    //var cameraIndexCode  ="bb44edc4e843421da68f33699e7203f2";     //获取输入的监控点编号值，必填
     var streamMode = 0;                                     //主子码流标识：0-主码流，1-子码流
     var transMode = 1;                                      //传输协议：0-UDP，1-TCP
-    var gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用
-    var wndId = 2;                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）
+    var gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用                                       //播放窗口序号（在2x2以上布局下可指定播放窗口）
 
     cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
     cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

src/styles.less

@@ -234,4 +234,13 @@ body.jw-modal-open {
   p{
     padding: 0 10px;
   }
+}
+
+
+//video style
+.ant-tree li .ant-tree-node-content-wrapper{
+  color:white!important;
+}
+.ant-tree li span.ant-tree-iconEle, .ant-tree li span.ant-tree-switcher{
+  color:white!important;
 }
\ No newline at end of file