diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 28a7f5e..0e888c1 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { AuthGuard } from './auth.guard'; +import { NavComponent } from './home/nav/nav.component'; import { LoginComponent } from './pages/login/login.component'; import { NavigationComponent } from './system-management/navigation/navigation.component'; @@ -8,10 +9,10 @@ const routes: Routes = [ { path: '', redirectTo: '/login', pathMatch: 'full' }, { path: 'login', component: LoginComponent, }, { - path: '', component: NavigationComponent, canActivate: [AuthGuard], children: [ - { path: 'system', loadChildren: () => import('./system-management/system-management.module').then(m => m.SystemManagementModule) } + path: '', component: NavComponent, canActivate: [AuthGuard], children: [ + { path: 'homePage', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) } ] - }//系统管理 + }//主页面 ]; @NgModule({ diff --git a/src/app/home/basic-info/basic-info.component.html b/src/app/home/basic-info/basic-info.component.html new file mode 100644 index 0000000..7ea6c4a --- /dev/null +++ b/src/app/home/basic-info/basic-info.component.html @@ -0,0 +1 @@ +

basic-info works!

diff --git a/src/app/system-management/kafka/kafka.component.scss b/src/app/home/basic-info/basic-info.component.scss similarity index 100% rename from src/app/system-management/kafka/kafka.component.scss rename to src/app/home/basic-info/basic-info.component.scss diff --git a/src/app/home/basic-info/basic-info.component.ts b/src/app/home/basic-info/basic-info.component.ts new file mode 100644 index 0000000..e24cc22 --- /dev/null +++ b/src/app/home/basic-info/basic-info.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-basic-info', + templateUrl: './basic-info.component.html', + styleUrls: ['./basic-info.component.scss'] +}) +export class BasicInfoComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/home-routing.module.ts b/src/app/home/home-routing.module.ts new file mode 100644 index 0000000..43adab8 --- /dev/null +++ b/src/app/home/home-routing.module.ts @@ -0,0 +1,42 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import { BasicInfoComponent } from './basic-info/basic-info.component'; +import { StatisticAnalysisComponent } from './statistic-analysis/statistic-analysis.component'; +import { OrComponent } from './system-management/or/or.component'; +import { RoleComponent } from './system-management/role/role.component'; +import { SystemManagementComponent } from './system-management/system-management.component'; +import { UserComponent } from './system-management/user/user.component'; +import { TaskComponent } from './task/task.component'; + +const routes: Routes = [ + { path: 'basicInfo', component: BasicInfoComponent }, + { path: 'task', component: TaskComponent }, + { path: 'statistic', component: StatisticAnalysisComponent }, + { + path: 'system', component: SystemManagementComponent, + children: [ + { + path: '', + component: RoleComponent, + }, + { + path: 'role', + component: RoleComponent, + }, + { + path: 'user', + component: UserComponent, + }, + { + path: 'or', + component: OrComponent, + } + ], + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class HomeRoutingModule { } diff --git a/src/app/home/home.module.ts b/src/app/home/home.module.ts new file mode 100644 index 0000000..3a98170 --- /dev/null +++ b/src/app/home/home.module.ts @@ -0,0 +1,32 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { HomeRoutingModule } from './home-routing.module'; +import { NavComponent } from './nav/nav.component'; +import { NzLayoutModule } from 'ng-zorro-antd/layout'; +import { BasicInfoComponent } from './basic-info/basic-info.component'; +import { TaskComponent } from './task/task.component'; +import { StatisticAnalysisComponent } from './statistic-analysis/statistic-analysis.component'; +import { SystemManagementComponent } from './system-management/system-management.component'; +import { UserComponent } from './system-management/user/user.component'; +import { RoleComponent } from './system-management/role/role.component'; +import { OrComponent } from './system-management/or/or.component'; + +@NgModule({ + declarations: [ + NavComponent, + BasicInfoComponent, + TaskComponent, + StatisticAnalysisComponent, + SystemManagementComponent, + UserComponent, + RoleComponent, + OrComponent + ], + imports: [ + CommonModule, + HomeRoutingModule, + NzLayoutModule + ] +}) +export class HomeModule { } diff --git a/src/app/home/nav/nav.component.html b/src/app/home/nav/nav.component.html new file mode 100644 index 0000000..dffc78a --- /dev/null +++ b/src/app/home/nav/nav.component.html @@ -0,0 +1,15 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/app/home/nav/nav.component.scss b/src/app/home/nav/nav.component.scss new file mode 100644 index 0000000..a6081d5 --- /dev/null +++ b/src/app/home/nav/nav.component.scss @@ -0,0 +1,47 @@ +:host { + text-align: center; +} + + +nz-header { + background: #7dbcea; + color: #fff; + + ul { + display: flex; + + li { + margin: 0 6px; + } + } +} + +nz-footer { + line-height: 1.5; +} + +nz-sider { + background: #3ba0e9; + color: #fff; + line-height: 120px; +} + +nz-content { + background: rgba(16, 142, 233, 1); + color: #fff; + min-height: 120px; + line-height: 120px; +} + +nz-layout { + width: 100%; + height: 100%; +} + +nz-layout:last-child { + margin: 0; +} + +.router-link-active { + color: black; +} diff --git a/src/app/home/nav/nav.component.ts b/src/app/home/nav/nav.component.ts new file mode 100644 index 0000000..8fcdd84 --- /dev/null +++ b/src/app/home/nav/nav.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-nav', + templateUrl: './nav.component.html', + styleUrls: ['./nav.component.scss'] +}) +export class NavComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/statistic-analysis/statistic-analysis.component.html b/src/app/home/statistic-analysis/statistic-analysis.component.html new file mode 100644 index 0000000..204f3ed --- /dev/null +++ b/src/app/home/statistic-analysis/statistic-analysis.component.html @@ -0,0 +1 @@ +

statistic-analysis works!

diff --git a/src/app/home/statistic-analysis/statistic-analysis.component.scss b/src/app/home/statistic-analysis/statistic-analysis.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home/statistic-analysis/statistic-analysis.component.ts b/src/app/home/statistic-analysis/statistic-analysis.component.ts new file mode 100644 index 0000000..c17eb42 --- /dev/null +++ b/src/app/home/statistic-analysis/statistic-analysis.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-statistic-analysis', + templateUrl: './statistic-analysis.component.html', + styleUrls: ['./statistic-analysis.component.scss'] +}) +export class StatisticAnalysisComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/system-management/or/or.component.html b/src/app/home/system-management/or/or.component.html new file mode 100644 index 0000000..fe5f013 --- /dev/null +++ b/src/app/home/system-management/or/or.component.html @@ -0,0 +1 @@ +

or works!

diff --git a/src/app/home/system-management/or/or.component.scss b/src/app/home/system-management/or/or.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home/system-management/or/or.component.ts b/src/app/home/system-management/or/or.component.ts new file mode 100644 index 0000000..7999f38 --- /dev/null +++ b/src/app/home/system-management/or/or.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-or', + templateUrl: './or.component.html', + styleUrls: ['./or.component.scss'] +}) +export class OrComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/system-management/role/role.component.html b/src/app/home/system-management/role/role.component.html new file mode 100644 index 0000000..ce1bd50 --- /dev/null +++ b/src/app/home/system-management/role/role.component.html @@ -0,0 +1 @@ +

role works!

diff --git a/src/app/home/system-management/role/role.component.scss b/src/app/home/system-management/role/role.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home/system-management/role/role.component.ts b/src/app/home/system-management/role/role.component.ts new file mode 100644 index 0000000..dbd7a84 --- /dev/null +++ b/src/app/home/system-management/role/role.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-role', + templateUrl: './role.component.html', + styleUrls: ['./role.component.scss'] +}) +export class RoleComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/system-management/system-management.component.html b/src/app/home/system-management/system-management.component.html new file mode 100644 index 0000000..d1e48c2 --- /dev/null +++ b/src/app/home/system-management/system-management.component.html @@ -0,0 +1,12 @@ +
+
+ +
+
+ +
+
\ No newline at end of file diff --git a/src/app/home/system-management/system-management.component.scss b/src/app/home/system-management/system-management.component.scss new file mode 100644 index 0000000..bc65672 --- /dev/null +++ b/src/app/home/system-management/system-management.component.scss @@ -0,0 +1,19 @@ +.box { + display: flex; +} + +.nav { + width: 300px; + height: 100%; + border-right: 1px solid red; + + +} + +.content { + flex: 1; +} + +.router-link-active { + color: black; +} diff --git a/src/app/home/system-management/system-management.component.ts b/src/app/home/system-management/system-management.component.ts new file mode 100644 index 0000000..d283aa8 --- /dev/null +++ b/src/app/home/system-management/system-management.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-system-management', + templateUrl: './system-management.component.html', + styleUrls: ['./system-management.component.scss'] +}) +export class SystemManagementComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/system-management/user/user.component.html b/src/app/home/system-management/user/user.component.html new file mode 100644 index 0000000..d039bb7 --- /dev/null +++ b/src/app/home/system-management/user/user.component.html @@ -0,0 +1 @@ +

user works!

diff --git a/src/app/home/system-management/user/user.component.scss b/src/app/home/system-management/user/user.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home/system-management/user/user.component.ts b/src/app/home/system-management/user/user.component.ts new file mode 100644 index 0000000..5df0c83 --- /dev/null +++ b/src/app/home/system-management/user/user.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-user', + templateUrl: './user.component.html', + styleUrls: ['./user.component.scss'] +}) +export class UserComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/home/task/task.component.html b/src/app/home/task/task.component.html new file mode 100644 index 0000000..0c8a790 --- /dev/null +++ b/src/app/home/task/task.component.html @@ -0,0 +1 @@ +

task works!

diff --git a/src/app/home/task/task.component.scss b/src/app/home/task/task.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/home/task/task.component.ts b/src/app/home/task/task.component.ts new file mode 100644 index 0000000..785bb2f --- /dev/null +++ b/src/app/home/task/task.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-task', + templateUrl: './task.component.html', + styleUrls: ['./task.component.scss'] +}) +export class TaskComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts index 5087a89..3a40565 100644 --- a/src/app/pages/login/login.component.ts +++ b/src/app/pages/login/login.component.ts @@ -107,7 +107,7 @@ export class LoginComponent implements OnInit { this.autoLogin() sessionStorage.setItem("token", data.token); sessionStorage.setItem("refreshToken", data.refreshToken); - this.router.navigate(['/system/organization']) + this.router.navigate(['/homePage']) this.message.create('success', `登录成功`); //调用服务中的function刷新token diff --git a/src/app/system-management/host-config/host-config.component.ts b/src/app/system-management/host-config/host-config.component.ts index bc9e6fe..a93266f 100644 --- a/src/app/system-management/host-config/host-config.component.ts +++ b/src/app/system-management/host-config/host-config.component.ts @@ -10,7 +10,6 @@ import { EditcameraComponent } from './editcamera/editcamera.component'; import { catchError, tap } from 'rxjs/operators'; import { ConfigFormDataService } from 'src/app/service/configFormData.service'; import { SendFileComponent } from './send-file/send-file.component'; -import { ImageLabel2Component } from '../image-label2/image-label2.component'; interface Camera { name: string; user: string; @@ -199,31 +198,6 @@ export class HostConfigComponent implements OnInit { if (element.requestFullscreen) { //进入全屏 element.requestFullscreen(); } - const modal = this.modal.create({ - nzContent: ImageLabel2Component, - nzViewContainerRef: this.viewContainerRef, - nzWidth: 1920, - nzClosable: false, - nzFooter: null, - nzWrapClassName: 'canvasContentBox', - nzBodyStyle: { - 'border-radius': '0px', - 'padding': '0px', - 'margin': '0px', - }, - nzComponentParams: { - data: item.id - }, - nzOnOk: async () => { - - } - }); - const instance = modal.getContentComponent(); - - modal.afterClose.subscribe(result => { - this.ngOnInit() - }); - //this.router.navigate(['/system/host/camera/imageLabel'], { queryParams: { id: item.id } }) } else { this.isSourceYaml = false this.message.create('error', '请先下发source.yaml配置'); diff --git a/src/app/system-management/image-label/image-label.component.html b/src/app/system-management/image-label/image-label.component.html deleted file mode 100644 index 9b2c16e..0000000 --- a/src/app/system-management/image-label/image-label.component.html +++ /dev/null @@ -1,12 +0,0 @@ -
-
- - - -
-
-
-
-
-
-
diff --git a/src/app/system-management/image-label/image-label.component.scss b/src/app/system-management/image-label/image-label.component.scss deleted file mode 100644 index 89f7b5b..0000000 --- a/src/app/system-management/image-label/image-label.component.scss +++ /dev/null @@ -1,26 +0,0 @@ -.box { - width: 100%; - height: 100%; - display: flex; - flex-direction: column; -} - -.btnbox { - margin-bottom: 5px; - button { - margin-right: 15px; - } -} -.selectBtn { background-color: #1890ff; color: #fff; } - -.imgbox { - width: 100%; - height:500px; - overflow: hidden; - canvas{ overflow: hidden; } - .content,.center{ - width: 100%; - height: 100%; - overflow: hidden; - } -} diff --git a/src/app/system-management/image-label/image-label.component.ts b/src/app/system-management/image-label/image-label.component.ts deleted file mode 100644 index 43cf808..0000000 --- a/src/app/system-management/image-label/image-label.component.ts +++ /dev/null @@ -1,216 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-image-label', - templateUrl: './image-label.component.html', - styleUrls: ['./image-label.component.scss'] -}) -export class ImageLabelComponent implements OnInit { - - constructor() { } - - imgItem: any; - canvasWidth: number = 0; - canvasHeight: number = 0; - copyCanvas: any; - markType: boolean = true; //标注type - - ngOnInit(): void { - - } - - ngAfterContentInit(): void { - this.initBackgroundImg() - } - - //初始化背景图 - initBackgroundImg() { - let canvas = document.getElementById('canvas') as any; - canvas.oncontextmenu = () =>{ return false; }; - let that = this - let ctx - // 检测canvas支持性 - if (canvas.getContext) { - ctx = canvas.getContext('2d'); // 返回一个对象，该对象提供了用在画布上绘图的方法和属性 - } else { - document.write("你的浏览器不支持canvas,请升级你的浏览器!"); - return; - } - - // 读取可视区域 宽高 - let center = (document.getElementById('canvasCenter') as any).getBoundingClientRect(); - - // 图片加载完后，将其显示在canvas中 - var img = new Image(); - img.src = that.imgItem.url? that.imgItem.url : "../../../assets/images/bgImg.png"; - img.onload = () => { - // 等比例缩放图片 - var scale = 1; - if (img.width > center.width || img.height > center.height) { - if (img.width > img.height) { - scale = center.width / img.width; - }else { - scale = center.height / img.height; - } - } - that.canvasWidth = img.width * scale; - that.canvasHeight = img.height * scale; // 计算等比缩小后图片 - window.setTimeout(()=>{ // 加载图片 - ctx.drawImage(img, 0, 0, that.canvasWidth, that.canvasHeight); - this.copyCanvas = ctx.getImageData(0, 0, that.canvasWidth, that.canvasHeight) - that.initCanvasEvent(canvas) - }, 0) - } - } - - //线段的点的集合 - points = []; - points2 = []; - //可拖动圆圈的点的集合 - circles = []; - circles2 = []; - //整体移动点位 - allpoints = []; - allpoints2 = []; - isDragging = false - //是否在绘制区域内 - isInOut = false - //记录鼠标点击位置 - downx = 0 - downy = 0 - - //清空画布 - clearCanvas() { - this.points = []; - this.points2 = []; - this.circles = []; - this.circles2 = []; - this.allpoints = []; - this.allpoints2 = []; - let canvas = document.getElementById('canvas') as any; - let context = canvas.getContext('2d'); - context.clearRect(0, 0, canvas.width, canvas.height); - - this.copyCanvas?context.putImageData(this.copyCanvas, 0, 0) : null; - } - - //初始化 canvas画布 点击事件 - initCanvasEvent(canvas) { - let context = canvas.getContext('2d'); - let html = document.documentElement - let boxDiv = document.getElementsByClassName("canvasDialog")[0] - canvas.onmousedown = (e)=>{ - var clickX = e.pageX - canvas.offsetLeft - ((html.clientWidth - boxDiv.clientWidth) / 2); - var clickY = e.pageY - canvas.offsetTop - ((html.clientHeight - boxDiv.clientHeight) / 2); - this.downx = clickX - this.downy = clickY - if (this.isInt(clickX, clickY)) { - this.isInOut = true - return - } else { - this.isInOut = false - } - - let index - let beforeCircles = this.markType? this.circles: this.circles2 - //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码 - for (var i = 0; i < beforeCircles.length; i++) { - let circle = beforeCircles[i]; - //使用勾股定理计算这个点与圆心之间的距离 - var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)); - - // 如果是其他的点，则设置可以拖动 - if (distanceFromCenter <= circle.radius) { - // 清除之前选择的圆圈 - index = i; - this.isDragging = true; - //停止搜索 - return; - } - } - //如果点击新的位置，则进入下面的代码，绘制点 - //context.clearRect(0, 0, canvas.width, canvas.height); - //遍历数组画圆 - var circle = { - x: clickX, - y: clickY, - radius: 10, - color: "blue", - isSelected: false, //拖拽点的标记 - }; - if (this.markType) { - this.circles.push(circle); - this.allpoints = JSON.parse(JSON.stringify(this.circles)) - this.circles[0].color = "green"; - } else { - this.circles2.push(circle); - this.allpoints2 = JSON.parse(JSON.stringify(this.circles2)) - this.circles2[0].color = "red"; - } - for (var i = 0; i < beforeCircles.length; i++) { - let circle = beforeCircles[i]; - // 绘制圆圈 - context.globalAlpha = 0.85; - context.beginPath(); - context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2); - context.fillStyle = circle.color; - context.strokeStyle = "black"; - context.fill(); - context.stroke(); - } - // 画线 - var point = { - x: clickX, - y: clickY, - }; - this.markType? this.points.push(point) : this.points2.push(point) - context.beginPath(); - context.lineWidth = 3; - //从起始点开始绘制 - let beforePoint = this.markType? this.points: this.points2 - context.moveTo(beforePoint[0].x, beforePoint[0].y); - for (var i = 0; i < beforePoint.length; i++) { - context.lineTo(beforePoint[i].x, beforePoint[i].y); - } - context.closePath() - context.fillStyle = "rgb(2,100,30)"; - context.fill(); - context.strokeStyle = "#9d4dca"; - context.stroke(); - } - } - - //判断点位是否在图形区域内 - isInt(x, y) { - if (this.markType && !this.points[2]) { - return - } - if (!this.markType && !this.points2[2]) { - return - } - var pt = { - x: x, - y: y - } - var poly = this.markType? this.points : this.points2; - return this.PointInPoly(pt, poly) - } - - //射线法判断点位 - PointInPoly(pt, poly) { - for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) - ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y)) - && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x) - && (c = !c); - return c; - } - - //cneter height - heightCount() { - let style: any = {} - let height = document.documentElement.clientHeight - style.height = (height - 180) + 'px'; - return style - } - -} diff --git a/src/app/system-management/image-label2/image-label2.component.html b/src/app/system-management/image-label2/image-label2.component.html deleted file mode 100644 index e09e3b4..0000000 --- a/src/app/system-management/image-label2/image-label2.component.html +++ /dev/null @@ -1,37 +0,0 @@ -
- -
- - - - - - - - - - - - - - - -
-
-
-
-
-
-
-
\ No newline at end of file diff --git a/src/app/system-management/image-label2/image-label2.component.scss b/src/app/system-management/image-label2/image-label2.component.scss deleted file mode 100644 index 27c3510..0000000 --- a/src/app/system-management/image-label2/image-label2.component.scss +++ /dev/null @@ -1,38 +0,0 @@ -.canvasBox { - width: 100%; - height: 100%; - background: #fff; - font-size: 15px; - color: black; - box-sizing: border-box; - display: flex; - flex-direction: column; - overflow: hidden; - .imgbox{ flex: 1; overflow: hidden; } - canvas{ overflow: hidden; display: block; } - .content,.center{ - width: 100%; - height: 100%; - overflow: hidden; - } -} - -.btnbox { - display: flex; - position: fixed; - left: 1%; - top: 1%; - z-index: 10; - button { - margin-right: 6px; - } - .leftTitle{ line-height: 32px; margin-right: 10px; color: #fff; } - .rightTitle{ line-height: 32px; margin-left: 10px; color: #fff; } -} - -.imgbox, -.btnbox { - box-sizing: border-box; - padding: 0; -} -.selectBtn { background-color: #1890ff; color: #fff; } diff --git a/src/app/system-management/image-label2/image-label2.component.ts b/src/app/system-management/image-label2/image-label2.component.ts deleted file mode 100644 index 233ed41..0000000 --- a/src/app/system-management/image-label2/image-label2.component.ts +++ /dev/null @@ -1,647 +0,0 @@ -import { HttpClient, HttpErrorResponse } from '@angular/common/http'; -import { Component, Input, OnInit } from '@angular/core'; -import { NzMessageService } from 'ng-zorro-antd/message'; -import { NzModalService } from 'ng-zorro-antd/modal'; - -@Component({ - selector: 'app-image-label2', - templateUrl: './image-label2.component.html', - styleUrls: ['./image-label2.component.scss'] -}) -export class ImageLabel2Component implements OnInit { - - constructor(private http: HttpClient, private message: NzMessageService, private modal: NzModalService) { } - - @Input() data: any; //传递id - camerasData: any; //摄像头Data - imgItem: any; //图片 URL - canvasWidth: number = 0; - canvasHeight: number = 0; - copyCanvas: any; //拷贝 canvas底图 - - //返回上一步路由 - goback() { - history.go(-1) - } - - ngOnInit(): void { - - } - - ngAfterContentInit(): void { - this.getImgMarkData().then((res: any) => { - this.imgItem = window.URL.createObjectURL(res) - window.setTimeout(() => { - this.initBackgroundImg() - }, 0) - }).catch(err => { - this.message.create('error', '获取图片失败!'); - }) - } - - anewgetImg() { - let params = { - cameraId: this.data - } - this.http.put('/api/Cameras/Commands/CaptureImages', '', { params: params }).subscribe( - { - next: (value: Object) => { - this.message.create('success', '向边缘设备发送请求成功，请过一段时间手动刷新页面!'); - }, - error: (error: HttpErrorResponse) => { - - }, - complete: () => { - - } - } - ) - } - - //获取 摄像头图片/标注点位 - getImgMarkData() { - let that = this - return new Promise((resolve, reject) => { - that.http.get(`/api/Cameras/${that.data}`).subscribe((info: any) => { - info.dimensionedPoints ? info.dimensionedPoints = JSON.parse(info.dimensionedPoints) : null; - that.camerasData = info; - that.markType = info.type; - console.log(that.camerasData, "摄像头数据") - const httpOptions = { - responseType: 'blob' as 'json', - params: { cameraId: that.data } - }; - that.http.get(`/api/Cameras/Images`, httpOptions).subscribe({ - next: (data) => { - resolve(data) - }, - error: (err) => { - reject('error') - }, - }) //get - }) //get - }) - } - - //保存 - save() { - if (!this.camerasData.dimensionedPoints) { - this.camerasData.dimensionedPoints = { - polygon: [], - arrow: [], - arrowOfSouth: [], - arrowOfWest: [], - arrowOfEast: [], - arrowOfNorth: [], - rectangle: [], - } - } - if (this.markType === 0) { - if (!this.points.length) { - this.message.create('warning', '绘制完整后可保存!'); - return - } - this.camerasData.dimensionedPoints.polygon = this.points - } else if (this.markType === 2) { - if (this.arrowPoints.length != 2 || this.oblongPoints.length != 2 || !this.oblongPoints.find(item => { return item.oilUnloadingArea }) || !this.oblongPoints.find(item => { return !item.oilUnloadingArea })) { - this.message.create('warning', '绘制完整后可保存!'); - return - } - this.camerasData.dimensionedPoints.arrow = this.arrowPoints - - this.camerasData.dimensionedPoints.arrowOfSouth = this.arrowPointsOfSouth - this.camerasData.dimensionedPoints.arrowOfWest = this.arrowPointsOfWest - this.camerasData.dimensionedPoints.arrowOfEast = this.arrowPointsOfEast - this.camerasData.dimensionedPoints.arrowOfNorth = this.arrowPointsOfNorth - - this.camerasData.dimensionedPoints.rectangle = this.oblongPoints - } else if (this.markType === 3) { - if (this.arrowPoints.length != 2) { - this.message.create('warning', '绘制完整后可保存!'); - return - } - this.camerasData.dimensionedPoints.arrow = this.arrowPoints - this.camerasData.dimensionedPoints.arrowOfSouth = this.arrowPointsOfSouth - } - let paramsData = JSON.parse(JSON.stringify(this.camerasData)) - paramsData.dimensionedPoints = JSON.stringify(paramsData.dimensionedPoints) - console.log('标点结果', this.camerasData.dimensionedPoints) - this.http.put(`/api/Cameras/${this.camerasData.id}/DimensionedPoints`, paramsData).subscribe(data => { - this.message.create('success', '保存成功!'); - const isFullScreen = document.fullscreenElement - if (document.exitFullscreen && isFullScreen) { //关闭全屏 - document.exitFullscreen() - } - this.modal.closeAll(); - }) - } - - //初始化背景图 - initBackgroundImg() { - let canvas = document.getElementById('canvas') as any; - canvas.oncontextmenu = () => { return false; }; - let that = this - let ctx - // 检测canvas支持性 - if (canvas.getContext) { - ctx = canvas.getContext('2d'); // 返回一个对象，该对象提供了用在画布上绘图的方法和属性 - } else { - document.write("你的浏览器不支持canvas,请升级你的浏览器!"); - return; - } - - // 读取可视区域 宽高 - let center = document.getElementById('canvasCenter') as any; - - // 图片加载完后，将其显示在canvas中 - var img = new Image(); - img.src = that.imgItem ? that.imgItem : "../../../assets/images/bgImg.png"; - img.onload = () => { - // 等比例缩放图片 - // var scale = 1; - // if (img.width > center.clientWidth || img.height > center.clientHeight) { - // let scaleOne = center.clientWidth / img.width; - // let scaleTwo = center.clientHeight / img.height; - // if (img.width * scaleOne <= center.clientWidth && img.height * scaleOne <= center.clientHeight) { - // scale = scaleOne; - // } else if (img.width * scaleTwo <= center.clientWidth && img.height * scaleTwo <= center.clientHeight) { - // scale = scaleTwo; - // } else { - // scale = 0.3; - // } - // } - // that.canvasWidth = img.width * scale; - // that.canvasHeight = img.height * scale; // 计算等比缩小后图片 - that.canvasWidth = img.width; - that.canvasHeight = img.height; - console.log(img.width + "*" + img.height) - window.setTimeout(() => { // 加载图片 - ctx.drawImage(img, 0, 0, that.canvasWidth, that.canvasHeight); - this.copyCanvas = ctx.getImageData(0, 0, that.canvasWidth, that.canvasHeight) - that.initCanvasEvent(canvas) //监听canvas事件 - that.initMark(canvas, ctx) //初始化标绘图形 - }, 0) - } - } - - //初始化标绘图形 - initMark(canvas, context) { - if (!this.camerasData.dimensionedPoints) { - return - } - if (this.markType === 0) { - this.camerasData.dimensionedPoints.polygon.forEach(element => { - this.drawPolygon(element.x, element.y, canvas, context); //绘制多边形 - }); - } else if (this.markType === 2) { - this.arrowPoints = this.camerasData.dimensionedPoints.arrow - if (this.camerasData.dimensionedPoints.arrowOfSouth && this.camerasData.dimensionedPoints.arrowOfSouth.length != 0) { - this.arrowPointsOfSouth = this.camerasData.dimensionedPoints.arrowOfSouth - } - if (this.camerasData.dimensionedPoints.arrowOfWest && this.camerasData.dimensionedPoints.arrowOfWest.length != 0) { - this.arrowPointsOfWest = this.camerasData.dimensionedPoints.arrowOfWest - } - if (this.camerasData.dimensionedPoints.arrowOfEast && this.camerasData.dimensionedPoints.arrowOfEast.length != 0) { - this.arrowPointsOfEast = this.camerasData.dimensionedPoints.arrowOfEast - } - if (this.camerasData.dimensionedPoints.arrowOfNorth && this.camerasData.dimensionedPoints.arrowOfNorth.length != 0) { - this.arrowPointsOfNorth = this.camerasData.dimensionedPoints.arrowOfNorth - } - this.oblongPoints = this.camerasData.dimensionedPoints.rectangle - let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth] - this.drawLine(arr, context) - } else if (this.markType === 3) { - this.arrowPoints = this.camerasData.dimensionedPoints.arrow - if (this.camerasData.dimensionedPoints.arrowOfSouth && this.camerasData.dimensionedPoints.arrowOfSouth.length != 0) { - this.arrowPointsOfSouth = this.camerasData.dimensionedPoints.arrowOfSouth - } - let arr = [this.arrowPoints, this.arrowPointsOfSouth] - this.drawLine(arr, context) - } - } - - - - markType: number = 0; //0=进出口,2=卸油区,3=便利店, - isDrawArrow: boolean = true; //绘制type 箭头/矩形 - arrowDirection = null - oilUnloadingArea: boolean = true; //卸油区type 泄油管区域/静电接地仪 - //记录鼠标点击位置 - downx = 0; - downy = 0; - - //清空画布 - clearCanvas() { - // 清空标绘箭头 - this.arrowPoints = []; - this.arrowPointsOfSouth = []; //南 箭头的点的集合 - this.arrowPointsOfWest = []; //西 箭头的点的集合 - this.arrowPointsOfEast = []; //东 箭头的点的集合 - this.arrowPointsOfNorth = []; //北 箭头的点的集合 - // 清空标绘箭头 - // 清空标绘矩形 - this.oblongPoints = []; - // 清空标绘矩形 - // 清空标绘多边形 - this.points = []; - this.circles = []; - this.allpoints = []; - // 清空标绘多边形 - let canvas = document.getElementById('canvas') as any; - let context = canvas.getContext('2d'); - - context.clearRect(0, 0, canvas.width, canvas.height); - this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null; - } - - //初始化 canvas画布 监听事件 - - initCanvasEvent(canvas) { - let context = canvas.getContext('2d'); - canvas.onmousedown = (e) => { //鼠标按下事件 - var clickX = e.pageX - canvas.offsetLeft; - var clickY = e.pageY - canvas.offsetTop; - this.downx = clickX - this.downy = clickY - - if (this.markType === 0) { //进出口 - this.drawPolygon(clickX, clickY, canvas, context); //绘制多边形 - } else if (this.markType === 2 || this.markType === 3) { //卸油区/便利店 - //开始绘制 - context.beginPath(); - context.moveTo(clickX, clickY); - context.strokeStyle = "green"; - context.lineWidth = 3; - canvas.onmousemove = (ev) => { //鼠标移动事件 - var moveX = ev.pageX - canvas.offsetLeft; - var moveY = ev.pageY - canvas.offsetTop; - if (this.isDrawArrow && !this.arrowDirection) { //绘制 箭头 - if (this.arrowPoints.length === 2) { //限制数量 - return - } - context.lineTo(moveX, moveY); - context.stroke(); - } else if (this.isDrawArrow && this.arrowDirection == 'South') { - if (this.arrowPointsOfSouth.length === 2) { //限制数量 - return - } - context.lineTo(moveX, moveY); - context.stroke(); - } else if (this.isDrawArrow && this.arrowDirection == 'West') { - if (this.arrowPointsOfWest.length === 2) { //限制数量 - return - } - context.lineTo(moveX, moveY); - context.stroke(); - } else if (this.isDrawArrow && this.arrowDirection == 'East') { - if (this.arrowPointsOfEast.length === 2) { //限制数量 - return - } - context.lineTo(moveX, moveY); - context.stroke(); - } else if (this.isDrawArrow && this.arrowDirection == 'North') { - if (this.arrowPointsOfNorth.length === 2) { //限制数量 - return - } - context.lineTo(moveX, moveY); - context.stroke(); - } else { //绘制 矩形 - if (this.oblongPoints.length === 2) { //限制数量 - return - } - this.drawOblong(this.oblongPoints, context) - context.strokeStyle = this.oilUnloadingArea ? "green" : "red"; - let element = this.getOblongInfo(this.downx, this.downy, moveX, moveY) - context.strokeRect(element.x, element.y, element.width, element.height); - context.font = '22px Arial'; - context.fillText('高度:' + element.height, element.x + 3, element.y + 22); - } - } - } - } - - canvas.onmouseup = (e) => { //鼠标松开事件 - canvas.onmousemove = (ev) => { //鼠标移动事件 - return false; - } - if (this.markType != 2 && this.markType != 3) { - return - } - var upX = e.pageX - canvas.offsetLeft; - var upY = e.pageY - canvas.offsetTop; - if (this.isDrawArrow && !this.arrowDirection) { //绘制 箭头 - if (this.arrowPoints.length === 2) { //限制数量 - this.message.create('warning', '绘制数量已达上限!'); - return - } - let point = { - startX: this.downx, - startY: this.downy, - endX: upX, - endY: upY, - } - this.arrowPoints.push(point); - let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth] - this.drawLine(arr, context) - } else if (this.isDrawArrow && this.arrowDirection == 'South') { - if (this.arrowPointsOfSouth.length === 2) { //限制数量 - this.message.create('warning', '绘制数量已达上限!'); - return - } - let point = { - startX: this.downx, - startY: this.downy, - endX: upX, - endY: upY, - } - this.arrowPointsOfSouth.push(point); - let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth] - this.drawLine(arr, context) - } else if (this.isDrawArrow && this.arrowDirection == 'West') { - if (this.arrowPointsOfWest.length === 2) { //限制数量 - this.message.create('warning', '绘制数量已达上限!'); - return - } - let point = { - startX: this.downx, - startY: this.downy, - endX: upX, - endY: upY, - } - this.arrowPointsOfWest.push(point); - let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth] - this.drawLine(arr, context) - } else if (this.isDrawArrow && this.arrowDirection == 'East') { - console.log('East') - if (this.arrowPointsOfEast.length === 2) { //限制数量 - this.message.create('warning', '绘制数量已达上限!'); - return - } - let point = { - startX: this.downx, - startY: this.downy, - endX: upX, - endY: upY, - } - this.arrowPointsOfEast.push(point); - let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth] - this.drawLine(arr, context) - } else if (this.isDrawArrow && this.arrowDirection == 'North') { - console.log('North') - if (this.arrowPointsOfNorth.length === 2) { //限制数量 - this.message.create('warning', '绘制数量已达上限!'); - return - } - let point = { - startX: this.downx, - startY: this.downy, - endX: upX, - endY: upY, - } - this.arrowPointsOfNorth.push(point); - let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth] - this.drawLine(arr, context) - } else { //绘制 矩形 - if (this.oblongPoints.length === 2) { //限制数量 - this.message.create('warning', '绘制数量已达上限!'); - return - } - let point = this.getOblongInfo(this.downx, this.downy, upX, upY) - this.oblongPoints.push(point) - this.drawOblong(this.oblongPoints, context) - } - }; - - } - - arrowPoints = []; //箭头的点的集合 - - arrowPointsOfSouth = []; //南 箭头的点的集合 - arrowPointsOfWest = []; //西 箭头的点的集合 - arrowPointsOfEast = []; //东 箭头的点的集合 - arrowPointsOfNorth = []; //北 箭头的点的集合 - - - - //canvas 绘制直线 - drawLine(pointsList, context, isRepeat: boolean = false) { - context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); - this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null; - if (this.markType === 2 && !isRepeat) { //同时绘制 矩形 - this.oblongPoints.forEach(element => { - context.strokeStyle = element.oilUnloadingArea ? "green" : "red"; - context.lineWidth = 3; - context.strokeRect(element.x, element.y, element.width, element.height); - context.font = '22px Arial'; - context.fillText('高度:' + element.height, element.x + 3, element.y + 22); - }); - } - // console.log(789, pointsList) - pointsList.forEach(element => { - if (element.length != 0) { - element.forEach((item, index) => { - if ((index + 1) % 2 === 0) { - this.drawArrow(item.startX, item.startY, item.endX, item.endY, 30, 10, 3, 'green', context) - } else { - context.beginPath(); - context.moveTo(item.startX, item.startY); - context.strokeStyle = "green"; - context.lineWidth = 3; - context.lineTo(item.endX, item.endY); - context.stroke(); - } - }) - } - - }); - - - } - - //canvas 绘制箭头 - drawArrow(fromX, fromY, toX, toY, theta, headlen, width, color, ctx) { - // fromX, fromY：起点坐标（也可以换成p1，只不过它是一个数组） - // toX, toY：终点坐标 (也可以换成p2，只不过它是一个数组) - // theta：三角斜边一直线夹角 - // headlen：三角斜边长度 - // width：箭头线宽度 - // color：箭头颜色 - - theta = typeof (theta) != 'undefined' ? theta : 30; - headlen = typeof (theta) != 'undefined' ? headlen : 10; - width = typeof (width) != 'undefined' ? width : 1; - color = typeof (color) != 'undefined' ? color : '#000'; - - // 计算各角度和对应的P2,P3坐标 - var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI, - angle1 = (angle + theta) * Math.PI / 180, - angle2 = (angle - theta) * Math.PI / 180, - topX = headlen * Math.cos(angle1), - topY = headlen * Math.sin(angle1), - botX = headlen * Math.cos(angle2), - botY = headlen * Math.sin(angle2); - ctx.save(); - ctx.beginPath(); - - var arrowX = fromX - topX, - arrowY = fromY - topY; - - ctx.moveTo(arrowX, arrowY); - ctx.moveTo(fromX, fromY); - ctx.lineTo(toX, toY); - arrowX = toX + topX; - arrowY = toY + topY; - ctx.moveTo(arrowX, arrowY); - ctx.lineTo(toX, toY); - arrowX = toX + botX; - arrowY = toY + botY; - ctx.lineTo(arrowX, arrowY); - ctx.strokeStyle = color; - ctx.lineWidth = width; - ctx.stroke(); - ctx.restore(); - } - - oblongPoints = []; //矩形的点的集合 - - //获取 矩形左上角点位/宽高 - getOblongInfo(startX, startY, endX, endY) { - let point = { - x: 0, - y: 0, - width: 0, - height: 0, - oilUnloadingArea: this.oilUnloadingArea, - } - if (startX > endX) { - point.x = endX - point.width = startX - endX - } else { - point.x = startX - point.width = endX - startX - } - if (startY > endY) { - point.y = endY - point.height = startY - endY - } else { - point.y = startY - point.height = endY - startY - } - return point - } - - //canvas 绘制矩形 - drawOblong(oblongList, context) { - context.clearRect(0, 0, this.canvasWidth, this.canvasHeight); - this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null; - if (this.markType === 2) { //同时绘制 直线箭头 - let arr = [this.arrowPoints, this.arrowPointsOfSouth, this.arrowPointsOfWest, this.arrowPointsOfEast, this.arrowPointsOfNorth] - this.drawLine(arr, context, true) - } - oblongList.forEach(element => { - context.strokeStyle = element.oilUnloadingArea ? "green" : "red"; - context.lineWidth = 3; - context.strokeRect(element.x, element.y, element.width, element.height); - context.font = '22px Arial'; - context.fillText('高度:' + element.height, element.x + 3, element.y + 22); - }); - } - - points = []; //线段的点的集合 - circles = []; //可拖动圆圈的点的集合 - allpoints = []; //整体移动点位 - isDragging = false; //是否可拖拽 - isInOut = false; //是否在绘制区域内 - - //canvas 绘制多边形 - drawPolygon(clickX, clickY, canvas, context) { - if (this.isInt(clickX, clickY)) { - this.isInOut = true - return - } else { - this.isInOut = false - } - - let index - //判断当前点击点是否在已经绘制的圆圈上，如果是执行相关操作，并return，不进入画线的代码 - for (var i = 0; i < this.circles.length; i++) { - let circle = this.circles[i]; - //使用勾股定理计算这个点与圆心之间的距离 - var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)); - - // 如果是其他的点，则设置可以拖动 - if (distanceFromCenter <= circle.radius) { - // 清除之前选择的圆圈 - index = i; - this.isDragging = true; - //停止搜索 - return; - } - } - //如果点击新的位置，则进入下面的代码，绘制点 - context.clearRect(0, 0, canvas.width, canvas.height); - this.copyCanvas ? context.putImageData(this.copyCanvas, 0, 0) : null; - //遍历数组画圆 - var circle = { - x: clickX, - y: clickY, - radius: 5, - color: "white", - isSelected: false, //拖拽点的标记 - }; - this.circles.push(circle); - this.allpoints = JSON.parse(JSON.stringify(this.circles)) - this.circles[0].color = "white"; - for (var i = 0; i < this.circles.length; i++) { - let circle = this.circles[i]; - // 绘制圆圈 - context.globalAlpha = 0.85; - context.beginPath(); - context.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2); - context.fillStyle = circle.color; - context.strokeStyle = "red"; - context.fill(); - context.stroke(); - } - // 画线 - var point = { - x: clickX, - y: clickY, - }; - this.points.push(point) - context.beginPath(); - context.lineWidth = 3; - //从起始点开始绘制 - context.moveTo(this.points[0].x, this.points[0].y); - for (var i = 0; i < this.points.length; i++) { - context.lineTo(this.points[i].x, this.points[i].y); - } - context.closePath() - //ontext.fillStyle = "rgb(2,100,30)"; - //context.fill(); - context.strokeStyle = "green"; - context.stroke(); - } - - //判断点位是否在图形区域内 - isInt(x, y) { - if (!this.points[2]) { - return - } - var pt = { - x: x, - y: y - } - return this.PointInPoly(pt, this.points) - } - - //射线法判断点位 - PointInPoly(pt, poly) { - for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i) - ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y)) - && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x) - && (c = !c); - return c; - } - -} diff --git a/src/app/system-management/image-list/image-list.component.html b/src/app/system-management/image-list/image-list.component.html deleted file mode 100644 index 1d1d62e..0000000 --- a/src/app/system-management/image-list/image-list.component.html +++ /dev/null @@ -1,19 +0,0 @@ -
- -
-
-
- -
-
- 监控坐标点:{{item.showCoord}} -
-
- 禁止坐标点:{{item.banCoord}} -
-
-
-
- -
-
diff --git a/src/app/system-management/image-list/image-list.component.scss b/src/app/system-management/image-list/image-list.component.scss deleted file mode 100644 index 72933a4..0000000 --- a/src/app/system-management/image-list/image-list.component.scss +++ /dev/null @@ -1,48 +0,0 @@ -.box { - width: 100%; - height: 100%; - background: #fff; - font-size: 15px; - color: black; - box-sizing: border-box; - display: flex; - flex-direction: column; - overflow-y: auto; -} - -.imgbox { - display: flex; - flex-wrap: wrap; - align-content: flex-start; -} - -.imageItemBox { - display: flex; - flex-direction: column; - width: 220px; - border: 1px solid #F2F2F2; - margin: 6px; - - .imgbox { - width: 100%; - height: 250px; - - img { - display: block; - width: 100%; - height: 100%; - cursor: pointer; - } - } - - .coord { - height: 25px; - display: flex; - align-items: center; - } -} -.footer{ - margin: 6px 0; - display: flex; - justify-content: center; -} \ No newline at end of file diff --git a/src/app/system-management/image-list/image-list.component.ts b/src/app/system-management/image-list/image-list.component.ts deleted file mode 100644 index bf5bedc..0000000 --- a/src/app/system-management/image-list/image-list.component.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { Component, OnInit, ViewContainerRef } from '@angular/core'; -import { NzModalService } from 'ng-zorro-antd/modal'; -import { ImageLabelComponent } from '../image-label/image-label.component'; - -@Component({ - selector: 'app-image-list', - templateUrl: './image-list.component.html', - styleUrls: ['./image-list.component.scss'] -}) -export class ImageListComponent implements OnInit { - - constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef) { } - imgList = [ - { url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' }, - { url: '../../../assets/images/bgImg.png', showCoord: '', banCoord: '' }, - { url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' }, - { url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' }, - { url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' }, - { url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' }, - { url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' }, - { url: '../../../assets/images/test/dog.jpg', showCoord: '', banCoord: '' } - ] - ngOnInit(): void { - } - goback() { - history.go(-1) - } - label(item) { - let width = document.documentElement.clientWidth - const modal = this.modal.create({ - nzContent: ImageLabelComponent, - nzViewContainerRef: this.viewContainerRef, - nzComponentParams: { - imgItem: item, - }, - nzClassName: "canvasDialog", - nzWidth: width - 100, - nzCentered: true, - nzOnOk: () => new Promise(resolve => { - item.showCoord = '' - item.banCoord = '' - resolve(1) - }), - }); - const instance = modal.getContentComponent(); - modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!')); - // Return a result when closed - modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result)); - } -} diff --git a/src/app/system-management/kafka/kafka.component.html b/src/app/system-management/kafka/kafka.component.html deleted file mode 100644 index 5bfa2d8..0000000 --- a/src/app/system-management/kafka/kafka.component.html +++ /dev/null @@ -1 +0,0 @@ -

kafka works!

diff --git a/src/app/system-management/kafka/kafka.component.ts b/src/app/system-management/kafka/kafka.component.ts deleted file mode 100644 index 394c064..0000000 --- a/src/app/system-management/kafka/kafka.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-kafka', - templateUrl: './kafka.component.html', - styleUrls: ['./kafka.component.scss'] -}) -export class KafkaComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/src/app/system-management/navigation/navigation.component.html b/src/app/system-management/navigation/navigation.component.html index 6ec5438..0f98142 100644 --- a/src/app/system-management/navigation/navigation.component.html +++ b/src/app/system-management/navigation/navigation.component.html @@ -1,4 +1,4 @@ - + @@ -44,4 +42,4 @@ - \ No newline at end of file + --> \ No newline at end of file diff --git a/src/app/system-management/system-management-routing.module.ts b/src/app/system-management/system-management-routing.module.ts index 8c21d2c..7897c76 100644 --- a/src/app/system-management/system-management-routing.module.ts +++ b/src/app/system-management/system-management-routing.module.ts @@ -3,27 +3,22 @@ import { NgModule } from '@angular/core'; import { OrganizationComponent } from './organization/organization.component'; import { AnalysisOfTheHostComponent } from './analysis-of-the-host/analysis-of-the-host.component'; import { HostConfigComponent } from './host-config/host-config.component'; -import { ImageListComponent } from './image-list/image-list.component'; import { PlottingImageComponent } from './plotting-image/plotting-image.component'; -import { ImageLabel2Component } from './image-label2/image-label2.component'; import { ConfigFormComponent } from './config-form/config-form.component'; import { ConditionMonitoringComponent } from './condition-monitoring/condition-monitoring.component'; -import { KafkaComponent } from './kafka/kafka.component'; import { StatusMonitoringComponent } from './status-monitoring/status-monitoring.component'; import { VideoStreamingComponent } from './video-streaming/video-streaming.component'; const routes: Routes = [ + { path: '', component: OrganizationComponent }, { path: 'organization', component: OrganizationComponent }, { path: 'host', component: AnalysisOfTheHostComponent }, { path: 'host/camera', component: HostConfigComponent }, - { path: 'host/camera/imageList', component: ImageListComponent }, - { path: 'host/camera/imageLabel', component: ImageLabel2Component }, { path: 'host/camera/configForm', component: ConfigFormComponent }, { path: 'plottingImage', component: PlottingImageComponent }, { path: 'conditionMonitoring', component: ConditionMonitoringComponent }, { path: 'statusMonitoring', component: StatusMonitoringComponent }, - { path: 'kafka', component: KafkaComponent }, { path: 'videoStreaming', component: VideoStreamingComponent } ]; diff --git a/src/app/system-management/system-management.module.ts b/src/app/system-management/system-management.module.ts index dbad3bc..dc426b8 100644 --- a/src/app/system-management/system-management.module.ts +++ b/src/app/system-management/system-management.module.ts @@ -31,21 +31,17 @@ import { HostConfigComponent } from './host-config/host-config.component'; import { NzPageHeaderModule } from 'ng-zorro-antd/page-header'; import { PlottingImageComponent } from './plotting-image/plotting-image.component'; import { cameraType } from '../pipe/cameraTypePipe'; -import { ImageListComponent } from './image-list/image-list.component'; -import { ImageLabelComponent } from './image-label/image-label.component'; -import { ImageLabel2Component } from './image-label2/image-label2.component'; import { ConfigFormComponent } from './config-form/config-form.component'; import { NzTabsModule } from 'ng-zorro-antd/tabs'; import { ConditionMonitoringComponent } from './condition-monitoring/condition-monitoring.component'; import { SendFileComponent } from './host-config/send-file/send-file.component'; import { ModelComponent } from './condition-monitoring/model/model.component'; -import { KafkaComponent } from './kafka/kafka.component'; import { StatusMonitoringComponent } from './status-monitoring/status-monitoring.component'; import { FileComponent } from './condition-monitoring/file/file.component'; import { ScriptComponent } from './status-monitoring/script/script.component'; import { VideoStreamingComponent } from './video-streaming/video-streaming.component'; @NgModule({ - declarations: [OrganizationComponent, NavigationComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, HostConfigComponent, ImageListComponent, ImageLabelComponent, PlottingImageComponent, cameraType, ImageLabel2Component, ConfigFormComponent, ConditionMonitoringComponent, SendFileComponent, ModelComponent, KafkaComponent, StatusMonitoringComponent, FileComponent, ScriptComponent, VideoStreamingComponent], + declarations: [OrganizationComponent, NavigationComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, HostConfigComponent, PlottingImageComponent, cameraType, ConfigFormComponent, ConditionMonitoringComponent, SendFileComponent, ModelComponent, StatusMonitoringComponent, FileComponent, ScriptComponent, VideoStreamingComponent], imports: [ CommonModule, SystemRoutingModule, @@ -70,7 +66,7 @@ import { VideoStreamingComponent } from './video-streaming/video-streaming.compo NzTabsModule, NzPopconfirmModule ], - entryComponents: [AddorComponent, EditorComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, SendFileComponent, ModelComponent, FileComponent,ScriptComponent] + entryComponents: [AddorComponent, EditorComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, SendFileComponent, ModelComponent, FileComponent, ScriptComponent] }) export class SystemManagementModule { } diff --git a/src/styles.scss b/src/styles.scss index 5aeccee..c5d400d 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -106,21 +106,28 @@ app-root { color: #ff4d4f; } -.ant-tabs-content { - height: 100%; + +.forbid { + color: gray; + pointer-events: none } .box { width: 100%; height: 100%; overflow-y: auto; - background: #fff; - box-sizing: border-box; - padding: 20px; } -.ant-pagination-next, .ant-pagination-prev{ + + +.ant-tabs-content { + height: 100%; +} + +.ant-pagination-next, +.ant-pagination-prev { overflow: hidden; } + .pagination { margin: 15px 0; display: flex; @@ -128,23 +135,6 @@ app-root { justify-content: center; } -.forbid{ - color: gray; - pointer-events:none -} - .maxHeightTreeSelect { max-height: 280px; } - -.canvasContentBox{ - .ant-modal { - margin: 0; - padding: 0; - top: 0; - left: 0; - width: 100%; - height: 100%; - max-width: 100%; - } -} \ No newline at end of file