[完善]路由配置

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: '', component: NavComponent, canActivate: [AuthGuard], children: [
-      { path: 'system', loadChildren: () => import('./system-management/system-management.module').then(m => m.SystemManagementModule) }
+      { path: 'homePage', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) }
     ]
-  }//系统管理
+  }//主页面
 ];
 
 @NgModule({

src/app/home/basic-info/basic-info.component.html

@@ -0,0 +1 @@
+<p>basic-info works!</p>

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 {
+  }
+
+}

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 { }

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 { }

src/app/home/nav/nav.component.html

@@ -0,0 +1,15 @@
+<nz-layout>
+    <nz-header>
+        <ul>
+            <li [routerLink]="['/homePage/basicInfo']" routerLinkActive="router-link-active">基础信息</li>
+            <li [routerLink]="['/homePage/task']" routerLinkActive="router-link-active">一体化任务</li>
+            <li [routerLink]="['/homePage/statistic']" routerLinkActive="router-link-active">统计分析</li>
+            <li [routerLink]="['/homePage/system']" routerLinkActive="router-link-active">系统管理</li>
+        </ul>
+    </nz-header>
+    <nz-layout>
+        <nz-content>
+            <router-outlet></router-outlet>
+        </nz-content>
+    </nz-layout>
+</nz-layout>

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;
+}

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 {
+  }
+
+}

src/app/home/statistic-analysis/statistic-analysis.component.html

@@ -0,0 +1 @@
+<p>statistic-analysis works!</p>

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 {
+  }
+
+}

src/app/home/system-management/or/or.component.html

@@ -0,0 +1 @@
+<p>or works!</p>

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 {
+  }
+
+}

src/app/home/system-management/role/role.component.html

@@ -0,0 +1 @@
+<p>role works!</p>

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 {
+  }
+
+}

src/app/home/system-management/system-management.component.html

@@ -0,0 +1,12 @@
+<div class="box">
+    <div class="nav">
+        <ul>
+            <li [routerLink]="['/homePage/system/role']" routerLinkActive="router-link-active">角色管理</li>
+            <li [routerLink]="['/homePage/system/user']" routerLinkActive="router-link-active">用户管理</li>
+            <li [routerLink]="['/homePage/system/or']" routerLinkActive="router-link-active">组织机构管理</li>
+        </ul>
+    </div>
+    <div class="content">
+        <router-outlet></router-outlet>
+    </div>
+</div>

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;
+}

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 {
+  }
+
+}

src/app/home/system-management/user/user.component.html

@@ -0,0 +1 @@
+<p>user works!</p>

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 {
+  }
+
+}

src/app/home/task/task.component.html

@@ -0,0 +1 @@
+<p>task works!</p>

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 {
+  }
+
+}

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

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配置');

src/app/system-management/image-label/image-label.component.html

@@ -1,12 +0,0 @@
-<div class="box" id="canvasBox">
-  <div class="btnbox">
-    <button nz-button [ngClass]="{selectBtn: markType}" (click)="markType = true;">标注监控区域</button>
-    <button nz-button [ngClass]="{selectBtn: !markType}" (click)="markType = false;">标注禁止区域</button>
-    <button nz-button nzType="primary" nzDanger (click)="clearCanvas()">清空</button>
-  </div>
-  <div class="imgbox" [style]="heightCount()">
-    <div class="content">
-      <div class="center" id="canvasCenter"><canvas id="canvas" [width]="canvasWidth" [height]="canvasHeight"></canvas></div>
-    </div>
-  </div>
-</div>

src/app/system-management/image-label/image-label.component.scss

@@ -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;
-  }
-}

src/app/system-management/image-label/image-label.component.ts

@@ -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
-  }
-
-}

src/app/system-management/image-label2/image-label2.component.html

@@ -1,37 +0,0 @@
-<div class="canvasBox">
-  <!-- <nz-page-header class="site-page-header" (nzBack)="goback()" nzBackIcon nzSubtitle="返回上一页"></nz-page-header> -->
-  <div class="btnbox">
-    <label class="leftTitle" *ngIf="markType === 0">进出口</label>
-    <label class="leftTitle" *ngIf="markType === 2">卸油区</label>
-    <label class="leftTitle" *ngIf="markType === 3">便利店</label>
-    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: isDrawArrow && !arrowDirection}"
-      (click)="isDrawArrow = true;arrowDirection=null">箭头方向标绘1</button>
-    <!-- <button nz-button *ngIf="markType === 2"
-      [ngClass]="{selectBtn:(isDrawArrow && arrowDirection=='South')}"
-      (click)="isDrawArrow = true;arrowDirection='South'">South</button> -->
-    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: (isDrawArrow && arrowDirection=='West')}"
-      (click)="isDrawArrow = true;arrowDirection='West'">箭头方向标绘2</button>
-    <!-- <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: (isDrawArrow && arrowDirection=='East')}"
-      (click)="isDrawArrow = true;arrowDirection='East'">East</button>
-    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: (isDrawArrow && arrowDirection=='North')}"
-      (click)="isDrawArrow = true;arrowDirection='North'">North</button> -->
-    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: !isDrawArrow && oilUnloadingArea}"
-      (click)="isDrawArrow = false; oilUnloadingArea = true;">泄油管区域</button>
-    <button nz-button *ngIf="markType === 2" [ngClass]="{selectBtn: !isDrawArrow && !oilUnloadingArea}"
-      (click)="isDrawArrow = false; oilUnloadingArea = false;">静电接地仪</button>
-    <button nz-button nzType="primary" (click)="anewgetImg()">重新捕获摄像头图片</button>
-    <button nz-button nzType="primary" (click)="save()">保存</button>
-    <button nz-button nzType="primary" nzDanger nz-popconfirm nzPopconfirmTitle="您确定要清空吗?"
-      (nzOnConfirm)="clearCanvas()">清空</button>
-    <label *ngIf="camerasData" class="rightTitle">原始分辨率： {{camerasData.originalWeight}} ×
-      {{camerasData.originalHeight}}</label>
-
-    <!-- <label *ngIf="markType === 2 && !isDrawArrow" class="rightTitle">当前矩形框高度为:{{rectangleHeight}}px,请确保低于420px</label> -->
-  </div>
-  <div class="imgbox">
-    <div class="content">
-      <div class="center" id="canvasCenter"><canvas id="canvas" [width]="canvasWidth" [height]="canvasHeight"></canvas>
-      </div>
-    </div>
-  </div>
-</div>

src/app/system-management/image-label2/image-label2.component.scss

@@ -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; }

src/app/system-management/image-label2/image-label2.component.ts

@@ -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;
-  }
-
-}

src/app/system-management/image-list/image-list.component.html

@@ -1,19 +0,0 @@
-<div class="box">
-  <nz-page-header class="site-page-header" (nzBack)="goback()" nzBackIcon nzSubtitle="返回上一页"></nz-page-header>
-  <div class="imgbox">
-    <div class="imageItemBox" *ngFor="let item of imgList">
-      <div class="imgbox">
-        <img [src]="item.url" alt="" (click)="label(item)">
-      </div>
-      <div class="coord">
-        监控坐标点:<span>{{item.showCoord}}</span>
-      </div>
-      <div class="coord">
-        禁止坐标点:<span>{{item.banCoord}}</span>
-      </div>
-    </div>
-  </div>
-  <div class="footer">
-    <button nz-button nzType="primary">提交</button>
-  </div>
-</div>

src/app/system-management/image-list/image-list.component.scss

@@ -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;
-}

src/app/system-management/image-list/image-list.component.ts

@@ -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));
-  }
-}

src/app/system-management/kafka/kafka.component.html

@@ -1 +0,0 @@
-<p>kafka works!</p>

src/app/system-management/kafka/kafka.component.ts

@@ -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 {
-  }
-
-}

src/app/system-management/navigation/navigation.component.html

@@ -1,4 +1,4 @@
-<!-- <p>系统管理页面</p> -->
+<!-- <p>系统管理页面</p>
 <nz-layout>
   <nz-sider [nzWidth]='300'>
     <div class="logo">
@@ -23,8 +23,6 @@
             src="../../../assets/images/icon/push.png" alt="">边缘设备监控</li>
             <li [routerLink]="['/system/videoStreaming']" routerLinkActive="router-link-active"><img
               src="../../../assets/images/icon/push.png" alt="">视频流监控</li>
-        <!-- <li [routerLink]="['/system/kafka']" routerLinkActive="router-link-active"><img
-            src="../../../assets/images/icon/push.png" alt="">kafka检查</li> -->
       </ul>
     </div>
   </nz-sider>
@@ -44,4 +42,4 @@
       <router-outlet></router-outlet>
     </nz-content>
   </nz-layout>
-</nz-layout>
+</nz-layout> -->

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 }
 ];
 

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 { }

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%;
-  }
-}