[新增]新增图片列表页面和图片弹出框

src/app/system-management/host-config/host-config.component.html

@@ -32,7 +32,7 @@
         </tbody>
       </nz-table>
       <div class="footer">
-        <button nz-button nzType="primary">连接</button>
+        <button nz-button nzType="primary" (click)="connect()">连接</button>
       </div>
     </div>
   </div>

src/app/system-management/host-config/host-config.component.ts

@@ -130,4 +130,9 @@ export class HostConfigComponent implements OnInit {
       nzCancelText: '取消'
     });
   }
+
+  connect() {
+    this.router.navigate(['/system/host/camera/imageList'])
+  }
+
 }

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

@@ -0,0 +1,9 @@
+<div class="box">
+  <div class="btnbox">
+    <button nz-button nzType="primary">标注监控区域</button>
+    <button nz-button nzType="primary" nzDanger>标注禁止区域</button>
+  </div>
+  <div class="imgbox" [style]="heightCount()">
+    <img [src]="imgItem.url" alt="">
+  </div>
+</div>

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

@@ -0,0 +1,24 @@
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.btnbox {
+    margin-bottom: 6px;
+  button {
+    margin-right: 12px;
+  }
+}
+
+.imgbox {
+  width: 100%;
+  height:500px;
+  overflow: auto;
+
+  img {
+    width: 1920px;
+    height: 1080px;
+  }
+}

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

@@ -0,0 +1,23 @@
+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
+
+  ngOnInit(): void {
+
+  }
+  heightCount() {
+    let style: any = {}
+    let height = document.documentElement.clientHeight
+    style.height = (height - 180) + 'px';
+    return style
+  }
+}

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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,48 @@
+.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

@@ -0,0 +1,49 @@
+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,
+      },
+      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/system-management-routing.module.ts

@@ -3,12 +3,14 @@ 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';
 
 
 const routes: Routes = [
     { path: 'organization', component: OrganizationComponent },
     { path: 'host', component: AnalysisOfTheHostComponent },
     { path: 'host/camera', component: HostConfigComponent },
+    { path: 'host/camera/imageList', component: ImageListComponent },
 ];
 
 @NgModule({

src/app/system-management/system-management.module.ts

@@ -29,8 +29,10 @@ import { EditcameraComponent } from './host-config/editcamera/editcamera.compone
 import { HostConfigComponent } from './host-config/host-config.component';
 import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
 import { cameraType } from '../pipe/cameraTypePipe';
+import { ImageListComponent } from './image-list/image-list.component';
+import { ImageLabelComponent } from './image-label/image-label.component';
 @NgModule({
-  declarations: [OrganizationComponent, NavigationComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, HostConfigComponent, cameraType],
+  declarations: [OrganizationComponent, NavigationComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent, AddhostComponent, EdithostComponent, AddcameraComponent, EditcameraComponent, HostConfigComponent, cameraType, ImageListComponent, ImageLabelComponent],
   imports: [
     CommonModule,
     SystemRoutingModule,

src/styles.scss

@@ -15,7 +15,7 @@ a { text-decoration: none; color:#000; }
 ul,ol,li { list-style: none; overflow-x: hidden; }
 textarea { resize: none; }
 /* 滚动条样式 */
-::-webkit-scrollbar { width: 5px; background-color: white; }
+// ::-webkit-scrollbar:horizontal  { width: 5px; background-color: white; }
 ::-webkit-scrollbar-thumb { background-color: #999; }
 
 app-root { height: 100%; }