Skip to content

S
supervise-front
Commit b9ad0865 by niuxiaolin
Options

latest

parent a1639305
Showing with 718 additions and 141 deletions
package-lock.json
......@@ -602,6 +602,35 @@
}
}
},
"@fortawesome/angular-fontawesome": {
"version": "0.4.0",
"resolved": "https://registry.npm.taobao.org/@fortawesome/angular-fontawesome/download/@fortawesome/angular-fontawesome-0.4.0.tgz",
"integrity": "sha1-q3lDYqXjcSS4NFZNy1XtHAzgQTo=",
"requires": {
"tslib": "^1.9.0"
}
},
"@fortawesome/fontawesome-common-types": {
"version": "0.2.19",
"resolved": "https://registry.npm.taobao.org/@fortawesome/fontawesome-common-types/download/@fortawesome/fontawesome-common-types-0.2.19.tgz",
"integrity": "sha1-dUoPheEpCFgVLhwFcAq1ArERl/E="
},
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.19",
"resolved": "https://registry.npm.taobao.org/@fortawesome/fontawesome-svg-core/download/@fortawesome/fontawesome-svg-core-1.2.19.tgz",
"integrity": "sha1-Dsoc6ShcPZnm40BjPuj2FfnRouA=",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.19"
}
},
"@fortawesome/free-solid-svg-icons": {
"version": "5.9.0",
"resolved": "https://registry.npm.taobao.org/@fortawesome/free-solid-svg-icons/download/@fortawesome/free-solid-svg-icons-5.9.0.tgz",
"integrity": "sha1-HHPnusF0F9I/k02D9//1sQCn/ak=",
"requires": {
"@fortawesome/fontawesome-common-types": "^0.2.19"
}
},
"@ngtools/webpack": {
"version": "7.3.9",
"resolved": "https://registry.npm.taobao.org/@ngtools/webpack/download/@ngtools/webpack-7.3.9.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40ngtools%2Fwebpack%2Fdownload%2F%40ngtools%2Fwebpack-7.3.9.tgz",
......@@ -6373,6 +6402,19 @@
"integrity": "sha1-rCetpmFn+ohJpq3dg39rGJrSCBw=",
"dev": true
},
"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",
......@@ -9512,6 +9554,14 @@
"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
......@@ -8,7 +8,6 @@
"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 \"",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
......@@ -22,9 +21,15 @@
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"@fortawesome/angular-fontawesome": "^0.4.0",
"@fortawesome/fontawesome-svg-core": "^1.2.19",
"@fortawesome/free-solid-svg-icons": "^5.9.0",
"angular2-baidu-map": "^4.7.0",
"core-js": "^2.5.4",
"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/app.module.ts
......@@ -10,7 +10,10 @@ import { FormsModule } from '@angular/forms';
import { ModalComponent } from './modal/modal.component';
import { ApiModule } from './api';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { ColorPickerModule } from 'ngx-color-picker';
import {WebcamModule} from 'ngx-webcam';
import { TreeNgxModule } from 'tree-ngx';
@NgModule({
declarations: [
AppComponent,
......@@ -20,13 +23,15 @@ import { RouterModule } from '@angular/router';
],
imports: [
HttpClientModule,
BrowserModule,
AppRoutingModule,
ColorPickerModule,
FormsModule,
ApiModule,
TreeNgxModule,
WebcamModule,
BaiduMapModule.forRoot({ ak: 'KhQqnL3owyAzqjr4zCGbWiiHwPFmKTD6' })
],
providers: [],
......
src/app/main/main.component.html
......@@ -28,11 +28,10 @@
</div>
<section *ngIf="highShow" class="sub">
<div class ="item" *ngFor="let prj of projects;let i=index">
<label (click)="highLight(i,prj,'project')" >{{prj.name}} </label>
<!-- <section class="sub">
<label (click)="highLight(i,sec)" *ngFor="let sec of getSecs(proj);let i=index">{{sec.name}}</label>
</section> -->
<label (click)="highLight(i,prj,'p');setPrj(prj);" >{{prj.name}} </label>
<section class="sub">
<label (click)=" highLight(i,sec,'s')" *ngFor="let sec of prj.secs;let i=index">{{sec.name}}</label>
</section>
</div>
</section>
</section>
......@@ -64,11 +63,11 @@
</div>
<div class="right">
<section>
<button>视频监管
<button (click)="goToVideo()">视频监管
</button>
<label>监管项目:**个</label>
<label>监控点总计：***Km </label>
<label>监管项目:{{cameraSum.project}}个</label>
<label>监控点总计：{{cameraSum.total}} 个 </label>
</section>
<section>
......@@ -90,13 +89,13 @@
<label> </label>
<label></label>
</section>
<section>
<!-- <section>
<button>数据信息
</button>
<label>名字：{{currProj.name}}</label>
<label>里程：{{currProj.mileage}}</label>
<label>投资：{{currProj.capital}}</label>
</section>
</section> -->
</div>
</div>
......@@ -107,7 +106,9 @@
<p>capital: <input type="text" [(ngModel)]="proj.capital" /></p>
<p>coordinate: <input type="text" [(ngModel)]="proj.coordinate" /></p>
<p>course: <input type="text" [(ngModel)]="proj.course" /></p>
<p>lineStyle: <input type="text" [(ngModel)]="proj.lineStyle" /></p>
<p>lineStyle:
<input [(colorPicker)]="proj.lineStyle" [style.background]="proj.lineStyle"/>
</p>
<p>lineWidth: <input type="text" [(ngModel)]="proj.lineWidth" /></p>
<p>mileage: <input type="text" [(ngModel)]="proj.mileage" /></p>
......@@ -120,7 +121,9 @@
<jw-modal id="custom-modal-2">
<h1>添加course</h1>
<p>courses名称: <input type="text" [(ngModel)]="course.name" /></p>
<p>lineStyle: <input type="text" [(ngModel)]="course.lineStyle" /></p>
<p>lineStyle:
<input [(colorPicker)]="course.lineStyle" [style.background]="course.lineStyle"/>
</p>
<p>lineWidth: <input type="text" [(ngModel)]="course.lineWidth" /></p>
<p>coordinate: <input type="text" [(ngModel)]="course.coordinate" /></p>
<p>mark:
......@@ -138,7 +141,9 @@
<h1>添加section</h1>
<p>section名称: <input type="text" [(ngModel)]="section.name" /></p>
<p>projectId: <input type="text" [(ngModel)]="section.project" /></p>
<p>lineStyle: <input type="text" [(ngModel)]="section.lineStyle" /></p>
<p>lineStyle:
<input [(colorPicker)]="section.lineStyle" [style.background]="section.lineStyle"/>
</p>
<p>lineWidth: <input type="text" [(ngModel)]="section.lineWidth" /></p>
<p>coordinate: <input type="text" [(ngModel)]="section.coordinate" /></p>
<p>mileage: <input type="text" [(ngModel)]="section.mileage" /></p>
......@@ -147,3 +152,19 @@
<button (click)="addSection(section)">添加</button>
<button (click)="closeModal('custom-modal-3');">Close</button>
</jw-modal>
<jw-modal id="marker">
<h1>添加监控</h1>
<p>监控名称: <input type="text" [(ngModel)]="camera.name" /></p>
<p>section:
<select [(ngModel)]="camera.section">
<option *ngFor="let s of allsecs" [value]="s.id">{{s.name}}</option>
</select>
</p>
<p>coordinate: <input type="text" [(ngModel)]="camera.coordinate" /></p>
<button (click)="addCamera(camera)">添加</button>
<button (click)="closeModal('marker');">Close</button>
</jw-modal>
src/app/main/main.component.ts
......@@ -5,17 +5,18 @@ import { DynamicScriptLoaderService } from '../dynamic-script.service';
import { theme } from './theme';
import { ModalService } from '../services';
import { DefaultService, Project, Course, Scetion } from '../api';
import { DefaultService, Project, Course, Scetion, Camera } from '../api';
import { HttpClient, HttpParams } from '@angular/common/http';
import { timer } from 'rxjs';
import { timeInterval, pluck, take, tap } from 'rxjs/operators';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { IdService } from '../services/id.service';
declare var map: any;
declare var BMap: any;
declare var BMapLib: any;
declare var drawingManager:any;
declare var drawingManager: any;
const enum CordType {
PROJ,
COURSE,
......@@ -35,9 +36,11 @@ export interface DialogData {
styleUrls: ['./main.component.less']
})
export class MainComponent implements OnInit {
cameraSum: any={};
allsecs: any=[];
constructor(private route:ActivatedRoute, private cd: ChangeDetectorRef, private http: HttpClient, private dynamicScriptLoader: DynamicScriptLoaderService, private modalService: ModalService, private s: DefaultService) {
constructor(private router:Router, private idService: IdService, private route: ActivatedRoute, private cd: ChangeDetectorRef, private http: HttpClient, private dynamicScriptLoader: DynamicScriptLoaderService, private modalService: ModalService, private s: DefaultService) {
//定位山西省地图
this.opts = {
centerAndZoom: {
......@@ -63,9 +66,10 @@ export class MainComponent implements OnInit {
public polylineOptions: PolylineOptions;
public projects = [
{ secs: [] }
]
public projects1=[]
public projects2=[]
public projects1 = []
public projects2 = []
polys = [];
proj: Project = { delFlag: 0 };
course: Course = { delFlag: 0 };
......@@ -76,8 +80,9 @@ export class MainComponent implements OnInit {
staticHighWay: any = {};
staticNormal: any = {};
normalProjects: any = [];
currProj:Project={};
secs:Array<Scetion>=[];
currProj: Project = {};
secs: Array<Scetion> = [];
camera:Camera={};
debug = false;
toPoints(points: Array<Point>) {
if (!points) {
......@@ -87,20 +92,34 @@ export class MainComponent implements OnInit {
return new window.BMap.Point(p.lng, p.lat)
})
}
typeChange(e){
var dic = {0:"red",1:"yellow",2:"green"}
console.log(drawingManager.polylineOptions.strokeColor=dic[e]);
typeChange(e) {
//0:course, 1 :project,2:section.
var dic = { 0: "red", 1: "yellow", 2: "green" }
console.log(drawingManager.polylineOptions.strokeColor = dic[e]);
//当属于标段类型添加检查是否点在线上机制。
if (e == 2) {
drawingManager.hook = (point: Point) => {
return BMapLib.GeoUtils.isPointOnPolyline(point, this.getOverlayById(this.currentProjId));
}
} else {
drawingManager.hook = null;
}
}
addPoly(proj: Project) {
addPoly(proj) {
var points = JSON.parse(proj.coordinate).map(c => ({ lng: c[0], lat: c[1] }));
var newPolyLine = new window.BMap.Polyline(this.toPoints(points), { strokeColor: proj.lineStyle, strokeWeight: proj.lineWidth });
(newPolyLine as any).id = (proj.course ? "p" : "s") + proj.id;
map.addOverlay(newPolyLine);
}
goToVideo(){
this.router.navigate(['/video']);
}
ngOnInit(): void {
this.route.queryParamMap.subscribe(queryParams => {
this.debug =Boolean( queryParams.get("debug"))
this.debug = Boolean(queryParams.get("debug"))
})
this.http.get<any>(this.s.basePath + `/project/list/${markType.HIGHWAY}`).subscribe(res => {
......@@ -115,42 +134,50 @@ export class MainComponent implements OnInit {
this.http.get<any>(this.s.basePath + `/project/total2`).subscribe(res => {
this.staticNormal = res.data[0];
});
this.http.get<any>(this.s.basePath + `/camera/total`).subscribe(res => {
this.cameraSum = res.data[0];
});
this.http.get<any>(this.s.basePath + "/course/list").subscribe(res => {
this.courses = res.data;
});
this.http.get<any>(this.s.basePath + "/scetion/list").subscribe(res => {
this.allsecs = res.data;
});
}
proj2Change($event,type){
map.clearOverlays();
var proj:any ={} ;
if(type==1){
}else{
proj = this.projects2.find(f=>f.id==$event);
proj2Change($event, type) {
map.clearOverlays();
var proj: any = {};
if (type == 1) {
} else {
proj = this.projects2.find(f => f.id == $event);
}
proj = this.projects1.find(f=>f.id==$event);
proj = this.projects1.find(f => f.id == $event);
this.addPoly(proj);
var points = this.corToPoint(proj.coordinate);
map.setViewport(points);
}
toHighWay() {
this.highShow = !this.highShow;
if(this.highShow){
if (this.highShow) {
map.clearOverlays();
this.http.get<any>(this.s.basePath + `/project/list/${markType.HIGHWAY}`).subscribe(res => {
this.projects = res.data;
this.http.get<any>(this.s.basePath + `/project/list/${markType.HIGHWAY}`).subscribe(res => {
this.projects = res.data;
this.loadPolys(res);
});
}
}
private loadPolys(res: any) {
var allPoints = [];
res.data.forEach(poly => {
this.addPoly(poly);
allPoints = allPoints.concat(JSON.parse(poly.coordinate));
res.data.forEach(obj => {
this.addPoly(obj);
allPoints = allPoints.concat(JSON.parse(obj.coordinate));
});
map.setViewport(allPoints.map(p => ({ lng: p[0], lat: p[1] })));
});
}
}
toNormal() {
map.clearOverlays();
this.normalShow = !this.normalShow;
......@@ -167,42 +194,45 @@ export class MainComponent implements OnInit {
}
corToPoint(json:string):Array<{lng:number,lat:number}>{
return JSON.parse(json).map(r=>({lng:r[0],lat:r[1]}));
corToPoint(json: string): Array<{ lng: number, lat: number }> {
return JSON.parse(json).map(r => ({ lng: r[0], lat: r[1] }));
}
highLight(i:number,proj:Project,type) {
this.currProj= Object.assign({},proj);
highLight(i: number, obj, type) {
this.currProj = Object.assign({}, obj);
var overlays = map.getOverlays();
var cur = overlays.find(o => o.id == type + obj.id);
timer(0, 200)
.pipe(timeInterval(), pluck('interval'), take(6)).subscribe(index => {
if(overlays[i].isVisible()){
overlays[i].hide();
}else{
overlays[i].show();
if (cur.isVisible()) {
cur.hide();
} else {
cur.show();
}
});
var points = this.corToPoint(proj.coordinate);
// var center = {lng:0,lat:0}
// points.forEach(p => {
// center.lng+=p.lng;
// center.lat+=p.lat;
// });
// center.lng=center.lng/points.length;
// center.lat=center.lat/points.length;
// var label = new BMap.Label(proj.name, {
// position: center
// });
// map.addOverlay(label);
var points = this.corToPoint(obj.coordinate);
//标段不定位
if(type!='s'){
map.setViewport(points);
}
map.setViewport(points);
//设置摄像头数据
this.http.get<any>(this.s.basePath + `/camera/totalByProjId?projId=`+obj.id).subscribe(res => {
this.cameraSum ={project:1,total:res.data} ;
});
//设置标注信息
this.addLabel(points,obj);
}
setPrj(prj: Project) {
this.http.get<any>(this.s.basePath + "/scetion/findListById/" + prj.id).subscribe(res => {
prj.secs = res.data;
this.loadPolys(res);
});
}
addCourse(course: Course) {
this.http.post<Course>(this.s.basePath + "/course/add", this.course).subscribe(res => {
......@@ -215,6 +245,12 @@ export class MainComponent implements OnInit {
this.modalService.close('custom-modal-3');
})
}
addCamera(camera: Camera) {
this.http.post<Scetion>(this.s.basePath + "/camera/add", camera).subscribe(res => {
this.modalService.close('marker');
})
}
addProj(proj: Project) {
this.http.post(this.s.basePath + "/project/add", proj).subscribe(res => {
console.log(res)
......@@ -227,75 +263,76 @@ export class MainComponent implements OnInit {
this.setBound();
(window as any).map.setMapStyleV2({ styleJson: theme });
map.enableScrollWheelZoom(true);
if(this.debug){
if (this.debug) {
this.dynamicScriptLoader.load('drawing', 'geouti').then(data => {
// Script Loaded Successfully
this.dynamicScriptLoader.load('drawing', 'geouti').then(data => {
// Script Loaded Successfully
// drawingManager.hook=(point:Point)=>{
// return BMapLib.GeoUtils.isPointOnPolyline(point,this.preCords);
// }
drawingManager.addEventListener('overlaycomplete', e => {
var overlay = e.overlay;
if (!e.overlay.getBounds) {
return;
}
var bounds = e.overlay.getBounds();
var ne = bounds.getNorthEast();
var sw = bounds.getSouthWest();
var mercatorProjection = map.getMapType().getProjection();
var neMc = mercatorProjection.lngLatToPoint(ne);
var swMc = mercatorProjection.lngLatToPoint(sw);
var pathStr = "";
var geojsonStr = {};
var pathmcStr = "";
var path = overlay.getPath();
// var bounds = e.overlay.getBounds();
// var ne = bounds.getNorthEast();
// var sw = bounds.getSouthWest();
// var mercatorProjection = map.getMapType().getProjection();
// var neMc = mercatorProjection.lngLatToPoint(ne);
// var swMc = mercatorProjection.lngLatToPoint(sw);
// var pathStr = "";
//var geojsonStr = {};
// var pathmcStr = "";
var coordinates = [];
for (var i = 0; i < path.length; i++) {
pathStr += path[i].lng + "," + path[i].lat + ",";
var mc = mercatorProjection.lngLatToPoint(path[i]);
pathmcStr += mc.x + "," + mc.y + ",";
coordinates.push([path[i].lng, path[i].lat]);
if(overlay.getPath){
var path = overlay.getPath();
for (var i = 0; i < path.length; i++) {
// pathStr += path[i].lng + "," + path[i].lat + ",";
// var mc = mercatorProjection.lngLatToPoint(path[i]);
// pathmcStr += mc.x + "," + mc.y + ",";
coordinates.push([path[i].lng, path[i].lat]);
}
}else{
coordinates.push(overlay.getPosition())
}
pathmcStr = pathmcStr.substr(0, pathmcStr.length - 1);
pathStr = pathStr.substr(0, pathStr.length - 1);
// pathmcStr = pathmcStr.substr(0, pathmcStr.length - 1);
// pathStr = pathStr.substr(0, pathStr.length - 1);
if (overlay.toString() == '[object Polyline]') {
geojsonStr = {
"type": "LineString",
"coordinates": coordinates
};
if (this.type == CordType.PROJ) {
this.proj.course = this.currentCouseId;
this.proj.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-1');
}
else if (this.type == CordType.COURSE) {
this.course.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-2');
}
else if (this.type == CordType.SECTION) {
this.section.project = this.currentProjId;
this.section.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-3');
}
}
else if (overlay.toString() == '[object Polygon]') {
geojsonStr = {
"type": "Polygon",
"coordinates": [coordinates]
};
// geojsonStr = {
// "type": "Polygon",
// "coordinates": [coordinates]
// };
}else if(overlay.toString() == "[object Marker]"){
this.camera.coordinate = JSON.stringify(coordinates[0]);
this.modalService.open('marker');
}
if (this.type == CordType.PROJ) {
this.proj.course = this.currentCouseId;
this.proj.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-1');
}
else if (this.type == CordType.COURSE) {
this.course.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-2');
}
else if (this.type == CordType.SECTION) {
this.section.project = this.currentProjId;
this.section.coordinate = JSON.stringify(coordinates);
this.modalService.open('custom-modal-3');
}
// document.getElementById('result').innerHTML = "<div><span>左下角,右上角(经纬度)：</span><button class='btn'>复制</button><p class='copyText'>" + sw.lng + "," + sw.lat + "," + ne.lng + "," + ne.lat + "</p></div>"
// + "<div><span>左下角,右上角(墨卡托坐标)：</span><button class='btn'>复制</button><p class='copyText'>" + swMc.x + "," + swMc.y + "," + neMc.x + "," + neMc.y + "</p></div>"
// + "<div><span>坐标集(经纬度)：</span><button class='btn'>复制</button><p class='copyText'>" + pathStr + "</p></div>"
// + "<div><span>坐标集(墨卡托坐标)：</span><button class='btn'>复制</button><p class='copyText'>" + pathmcStr + "</p></div>"
// + "<div><span>geojson：</span><button class='btn'>复制</button><p class='copyText' style='white-space:nowrap;'>" + JSON.stringify(geojsonStr) + "</p></div>";
// document.getElementById('result').innerHTML = "<div><span>左下角,右上角(经纬度)：</span><button class='btn'>复制</button><p class='copyText'>" + sw.lng + "," + sw.lat + "," + ne.lng + "," + ne.lat + "</p></div>"
// + "<div><span>左下角,右上角(墨卡托坐标)：</span><button class='btn'>复制</button><p class='copyText'>" + swMc.x + "," + swMc.y + "," + neMc.x + "," + neMc.y + "</p></div>"
// + "<div><span>坐标集(经纬度)：</span><button class='btn'>复制</button><p class='copyText'>" + pathStr + "</p></div>"
// + "<div><span>坐标集(墨卡托坐标)：</span><button class='btn'>复制</button><p class='copyText'>" + pathmcStr + "</p></div>"
// + "<div><span>geojson：</span><button class='btn'>复制</button><p class='copyText' style='white-space:nowrap;'>" + JSON.stringify(geojsonStr) + "</p></div>";
});
}).catch(error => console.log(error));
}).catch(error => console.log(error));
}
console.log('polyline loaded', polyline)
}
......@@ -355,7 +392,34 @@ export class MainComponent implements OnInit {
map.setMinZoom(8);
});
}
/**
*
* @param id id
* @param type "s" = section ,"p"=project
*/
getOverlayById(id: number, type: string = "p") {
var overlays = map.getOverlays();
return overlays.find(o => o.id == type + id);
}
addLabel(points,proj){
var center = {lng:0,lat:0}
points.forEach(p => {
center.lng+=p.lng;
center.lat+=p.lat;
});
center.lng=center.lng/points.length;
center.lat=center.lat/points.length;
var label = new BMap.Label(`
<div>
<p style="margin:0">名称：${proj.name}</p>
<p style="margin:0">里程：${proj.mileage || ""}Km</p>
<p style="margin:0">投资：${proj.capital || ""}亿</p>
</div>`, {
position: center
});
map.addOverlay(label);
}
}
src/app/services/id.service.spec.ts 0 → 100644
import { TestBed } from '@angular/core/testing';
import { IdService } from './id.service';
describe('IdService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: IdService = TestBed.get(IdService);
expect(service).toBeTruthy();
});
});
src/app/services/id.service.ts 0 → 100644
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class IdService {
public ids: string[] = [];
constructor() {}
public generate(): string {
let isUnique = false;
let tempId = '';
while (!isUnique) {
tempId = this.generator();
if (!this.idExists(tempId)) {
isUnique = true;
this.ids.push(tempId);
}
}
return tempId;
}
public remove(id: string): void {
const index = this.ids.indexOf(id);
this.ids.splice(index, 1);
}
private generator(): string {
const isString = `${this.S4()}${this.S4()}-${this.S4()}-${this.S4()}-${this.S4()}-${this.S4()}${this.S4()}${this.S4()}`;
return isString;
}
private idExists(id: string): boolean {
return this.ids.includes(id);
}
private S4(): string {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
}
\ No newline at end of file
src/app/video/video.component.html
<p>
video works!
</p>
<div class="main">
<tree-ngx [nodeItems]="nodeItems"> </tree-ngx>
<div class="right">
<div *ngFor="let i of cams" class="cam">
<webcam width="350" height="200"></webcam>
<div class='bottom-line'>
<img class="cam-img" src="/assets/camera-retro.svg">
<img class="cam-img" src="/assets/microphone-alt.svg">
<img class="cam-img" src="/assets/play-circle.svg">
<img class="cam-img" src="/assets/camera-retro.svg">
<img class="cam-img" src="/assets/volume-up.svg">
</div>
</div>
<div class="cam">一分部梁场摄像机不在线</div>
<div class="cam">一分部梁场摄像机不在线</div>
<div class="no-cam"> </div>
</div>
</div>
\ No newline at end of file
src/app/video/video.component.less
.main{
display: grid;
grid-template-columns: 400px auto;
.cam{
display: inline-block;
width: 264px;
height: 200px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #524747ab;
color: #c1c2c7;
border: 1px solid #6d6a6a96;
float:left;
position: relative;
padding: 1px;
}
.cam-img{
width:20px;
height: 20px;
margin:0 7px;
}
.bottom-line{
position: absolute;
bottom: 6px;
color: red;
}
}
\ No newline at end of file
src/app/video/video.component.ts
......@@ -9,6 +9,111 @@ export class VideoComponent implements OnInit {
constructor() { }
nodeItems = [{
id: '0',
name: 'NVR(67/92)',
children: [
{
id: '1',
name: '东二环高速(8/8)',
item: {
phrase: 'I am the batman'
}
},
{
id: '2',
name: '第一分部(16/17)',
item: {
phrase: 'Man of steel'
}
},
{
id: '2',
name: '第三分部(16/17)',
item: {
phrase: 'Man of steel'
}
}
, {
id: '2',
name: '第二分部(16/17)',
item: {
phrase: 'Man of steel'
}
},
{
id: '2',
name: '第六分部(16/17)',
item: {
phrase: 'Man of steel'
}
}
]
},
{
id: '3',
name: '分组',
children: [
{
id: '4',
name: '东二环高速(8/8)',
item: {
phrase: 'Why so serius'
}
},
{
id: '5',
name: '第一分部(16/17)',
item: {
phrase: 'I am the villain of this story'
},
children :[
{
id:"6",
name:"第一分部_001_一分部拌合站入口"
},
{
id:"6",
name:"第一分部_002_一分部拌合站"
}, {
id:"6",
name:"第一分部_003_一分部钢筋棚1"
},
{
id:"6",
name:"第一分部_004_一分部钢筋棚2"
},
{
id:"6",
name:"第一分部_005_一分部化验室院"
},
{
id:"6",
name:"第一分部_006_一分部项目部3"
}, {
id:"6",
name:"第一分部_007_一分部项目部2"
}
, {
id:"6",
name:"第一分部_008_一分部项目部出入口"
}, {
id:"6",
name:"第一分部_009_一分部项目部4"
}, {
id:"6",
name:"第一分部_010_一分部生活区"
}, {
id:"6",
name:"第一分部_011_一分部梁场入口"
}
]
}
]
}];
cams = Array(16);
ngOnInit() {
}
......
src/assets/DrawingManager.js
......@@ -1037,9 +1037,9 @@ var BMAP_DRAWING_MARKER = "marker", // 鼠标画点模式
return ;
}
// //添加hook处理
// if(me.hook&&!me.hook(e.point)){
// return;
// }
if(me.hook&&!me.hook(e.point)){
return;
}
points.push(e.point);
drawPoint = points.concat(points[points.length - 1]);
if (points.length == 1) {
......
src/assets/GeoUtils.js
......@@ -105,7 +105,7 @@ var BMapLib = window.BMapLib = BMapLib || {};
//判断点是否在直线上公式
var precision = (curPt.lng - point.lng) * (nextPt.lat - point.lat) -
(nextPt.lng - point.lng) * (curPt.lat - point.lat);
if(precision < 2e-10 && precision > -2e-10){//实质判断是否接近0
if(precision < 2e-5 && precision > -2e-5){//实质判断是否接近0
return true;
}
}
......
src/assets/camera-retro.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48H48zm0 32h106c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H38c-3.3 0-6-2.7-6-6V80c0-8.8 7.2-16 16-16zm426 96H38c-3.3 0-6-2.7-6-6v-36c0-3.3 2.7-6 6-6h138l30.2-45.3c1.1-1.7 3-2.7 5-2.7H464c8.8 0 16 7.2 16 16v74c0 3.3-2.7 6-6 6zM256 424c-66.2 0-120-53.8-120-120s53.8-120 120-120 120 53.8 120 120-53.8 120-120 120zm0-208c-48.5 0-88 39.5-88 88s39.5 88 88 88 88-39.5 88-88-39.5-88-88-88zm-48 104c-8.8 0-16-7.2-16-16 0-35.3 28.7-64 64-64 8.8 0 16 7.2 16 16s-7.2 16-16 16c-17.6 0-32 14.4-32 32 0 8.8-7.2 16-16 16z"/></svg>
\ No newline at end of file
src/assets/microphone-alt.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512"><path d="M336 192h-16c-8.84 0-16 7.16-16 16v48c0 74.8-64.49 134.82-140.79 127.38C96.71 376.89 48 317.11 48 250.3V208c0-8.84-7.16-16-16-16H16c-8.84 0-16 7.16-16 16v40.16c0 89.64 63.97 169.55 152 181.69V464H96c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h160c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-56v-33.77C285.71 418.47 352 344.9 352 256v-48c0-8.84-7.16-16-16-16zM176 352c53.02 0 96-42.98 96-96h-85.33c-5.89 0-10.67-3.58-10.67-8v-16c0-4.42 4.78-8 10.67-8H272v-32h-85.33c-5.89 0-10.67-3.58-10.67-8v-16c0-4.42 4.78-8 10.67-8H272v-32h-85.33c-5.89 0-10.67-3.58-10.67-8v-16c0-4.42 4.78-8 10.67-8H272c0-53.02-42.98-96-96-96S80 42.98 80 96v160c0 53.02 42.98 96 96 96z"/></svg>
\ No newline at end of file
src/assets/play-circle.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm115.7 272l-176 101c-15.8 8.8-35.7-2.5-35.7-21V152c0-18.4 19.8-29.8 35.7-21l176 107c16.4 9.2 16.4 32.9 0 42z"/></svg>
\ No newline at end of file
src/assets/volume-up.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M215.03 71.05L126.06 160H24c-13.26 0-24 10.74-24 24v144c0 13.25 10.74 24 24 24h102.06l88.97 88.95c15.03 15.03 40.97 4.47 40.97-16.97V88.02c0-21.46-25.96-31.98-40.97-16.97zm233.32-51.08c-11.17-7.33-26.18-4.24-33.51 6.95-7.34 11.17-4.22 26.18 6.95 33.51 66.27 43.49 105.82 116.6 105.82 195.58 0 78.98-39.55 152.09-105.82 195.58-11.17 7.32-14.29 22.34-6.95 33.5 7.04 10.71 21.93 14.56 33.51 6.95C528.27 439.58 576 351.33 576 256S528.27 72.43 448.35 19.97zM480 256c0-63.53-32.06-121.94-85.77-156.24-11.19-7.14-26.03-3.82-33.12 7.46s-3.78 26.21 7.41 33.36C408.27 165.97 432 209.11 432 256s-23.73 90.03-63.48 115.42c-11.19 7.14-14.5 22.07-7.41 33.36 6.51 10.36 21.12 15.14 33.12 7.46C447.94 377.94 480 319.54 480 256zm-141.77-76.87c-11.58-6.33-26.19-2.16-32.61 9.45-6.39 11.61-2.16 26.2 9.45 32.61C327.98 228.28 336 241.63 336 256c0 14.38-8.02 27.72-20.92 34.81-11.61 6.41-15.84 21-9.45 32.61 6.43 11.66 21.05 15.8 32.61 9.45 28.23-15.55 45.77-45 45.77-76.88s-17.54-61.32-45.78-76.86z"/></svg>
\ No newline at end of file
src/styles.less
/* You can add global styles to this file, and also import other style files */
/* MODAL STYLES
-------------------------------*/
//Tree
.tree-ngx {
display: flex;
flex: 1 1 auto;
flex-direction: column;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.node {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.node-children {
display: flex;
flex: 1 1 auto;
}
.node-name {
display: inline-block;
padding: 5px 0px 5px 7px;
&.markSelected {
padding: 5px 0px 5px 2px;
border-left: 5px #226699 solid;
}
.active {
cursor: pointer;
}
}
.node-offset {
display: flex;
margin-left: 20px;
}
.node-icon-wrapper {
position: relative;
display: inline-block;
width: 20px;
height: 18px;
top: 1px;
left: 6px;
&.disabled {
cursor: default;
}
}
.collapsable {
cursor: pointer;
}
.node-container {
display: inline-block; //Empty container to align nodes with no collapse
}
//Checkbox
.node-checkbox {
display: inline-block;
position: relative;
top: 3px;
left: 5px;
width: 16px;
height: 16px;
cursor: pointer;
&:disabled {
cursor: auto
}
}
//Animation
.collapsible-wrapper {
display: flex;
overflow: hidden;
}
.collapsible-wrapper:after {
content: '';
height: 25px;
transition: height 0.3s linear, max-height 0s 0.3s linear;
max-height: 0px;
}
.collapsible {
transition: margin-bottom 0.3s cubic-bezier(0, 0, 0, 1);
margin-bottom: 0;
max-height: 1000000px;
}
.collapsible-wrapper.collapsed>.collapsible {
margin-bottom: -20000px;
transition: margin-bottom 0.3s cubic-bezier(1, 0, 1, 1), visibility 0s 0.3s, max-height 0s 0.3s;
visibility: hidden;
max-height: 0;
}
.collapsible-wrapper.collapsed:after {
height: 0;
transition: height 0.3s linear;
max-height: 25px;
}
.arrow-down {
position: absolute;
width: 0;
height: 0;
left: 3px;
top: 6px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top:7px solid #85c6e2;
&.collapse-empty {
border-top: 7px solid #ccc;
}
}
.arrow-right {
position: absolute;
width: 0;
height: 0;
left: 8px;
top: 3px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid #455A64;
}
jw-modal {
/* modals are hidden by default */
display: none;
......
yarn-error.log 0 → 100644
Arguments:
C:\Program Files\nodejs\node.exe C:\Users\symph\AppData\Roaming\npm\node_modules\yarn\bin\yarn.js add @fortawesome/angular-fontawesome
PATH:
C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\170\Tools\Binn\;C:\Program Files\Git\cmd;C:\Program Files\nodejs\;D:\software\apache-maven-3.6.1-bin\apache-maven-3.6.1\bin;C:\Program Files\Java\jdk1.8.0_211\bin;D:\software;D:\software\ninja-win;C:\Program Files\CMake\bin;D:\software\nasm-2.14.03rc2-win64\nasm-2.14.03rc2;D:\projects\18176\tools;D:\Program Files (x86)\Bochs-2.6.9;C:\Program Files\PuTTY\;D:\software\graphviz-2.38\release\bin;C:\Program Files (x86)\Windows Kits\10\Windows Performance Toolkit\;D:\software\dotnet-sdk-3.0.100-preview6-012264-win-x64;C:\Program Files\dotnet\;C:\Program Files\BinDiff\bin;D:\software\spring-boot-cli-2.1.6.RELEASE-bin\spring-2.1.6.RELEASE\bin;D:\scoop\shims;C:\Users\symph\AppData\Local\Microsoft\WindowsApps;C:\Users\symph\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\symph\AppData\Roaming\npm;D:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2019.1.2\bin;C:\Users\symph\.dotnet\tools;C:\Users\symph\AppData\Local\Microsoft\WindowsApps;C:\Program Files\dotnet\;
Yarn version:
1.15.2
Node version:
10.15.3
Platform:
win32 x64
Trace:
Error: EPERM: operation not permitted, unlink 'D:\projects\map\node_modules\node-sass\vendor\win32-x64-64\binding.node'
npm manifest:
{
"name": "map",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --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\\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 \"",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"@fortawesome/fontawesome-svg-core": "^1.2.19",
"angular2-baidu-map": "^4.7.0",
"core-js": "^2.5.4",
"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"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.9",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
yarn manifest:
No manifest
Lockfile:
No lockfile
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment