图像 抓拍

xufenglei

2018-08-03 4cec89117e98c5378f03879e407ee44f494eaa8e

图像 抓拍

 src/app/routes/raise-dust/image-grabbing/image-grabbing.component.html

@@ -1,4 +1,44 @@
<div class="content__title">

    <h1>Page Name</h1>

    <h1>图像抓拍</h1>

</div>

<pro-header [title]="'Page Name'"></pro-header>



<nz-card [nzBordered]="false">

    <form nz-form [nzLayout]="'inline'">

        <div nz-row [nzGutter]="24" >

            <div nz-col [nzSpan]="5" class="mb-md">

                <div nz-form-item class="d-flex">

                    <div nz-form-label class="label-width-70">

                        <label>监测站点</label>

                    </div>

                    <div nz-form-control class="flex-1">

                        <nz-select [(ngModel)]="monitorPoint" name="monitorPoint" [nzPlaceHolder]="'请选择 监测站点'" [nzSize]="'large'"  
                            [nzNotFoundContent]="'无法找到'"  nzShowSearch (ngModelChange)="monitorPointChange($event)"> 
                            <nz-option *ngFor="let option of monitorPointOptions"  [nzLabel]="option['name']" [nzValue]="option.id"> </nz-option> 
                        </nz-select>

                    </div>

                </div>

            </div>

            <div nz-col [nzSpan]="5" class="mb-md">

                <div nz-form-item class="d-flex">

                    <div nz-form-label class="label-width-70">

                        <label>设备</label>

                    </div>

                    <div nz-form-control class="flex-1">

                        <nz-select [(ngModel)]="device" name="device" [nzSize]="'large'" [nzPlaceHolder]="'请选择  设备'" (ngModelChange)="deviceChange($event)">

                            <nz-option *ngFor="let option of deviceOptions" [nzLabel]="option.name" [nzValue]="option.id"></nz-option>

                        </nz-select>

                    </div>

                </div>

            </div>

        </div>

    </form>

</nz-card>



<nz-card [nzBordered]="false">

    <div nz-row [nzGutter]="24" class="pt-lg">

        <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md" *ngFor="let time of times;let i = index">

            <h3>{{time}} 摄像</h3>

            <img src="./assets/img/{{i+ base}}.jpg" width="300" height="250" />

        </div>

    </div>

</nz-card>


 src/app/routes/raise-dust/image-grabbing/image-grabbing.component.ts

@@ -1,5 +1,7 @@
import { Component, OnInit } from '@angular/core';

import { _HttpClient } from '@delon/theme';

import {environment} from '../../../../environments/environment';

import {HttpClient} from '@angular/common/http';

import {Component, OnInit} from '@angular/core';

import * as moment from 'moment';



@Component({

  selector: 'app-image-grabbing',

@@ -7,11 +9,29 @@
})

export class ImageGrabbingComponent implements OnInit {



    constructor(

        private http: _HttpClient

    ) { }

  [x: string]: any;

  
  constructor(

    private http: HttpClient

  ) {}



    ngOnInit() {

    }

  ngOnInit() {

    this.http.get(environment.SERVER_BASH_URL + 'monitor-point/list/region', {params: {name: 'areaCode', value: '320583'}}).subscribe((res: any) => {

      this.monitorPointOptions = res.data;

    });

  }



  monitorPointChange(id) {

    this.device = null;

    this.times = null;

    this.http.get(environment.SERVER_BASH_URL + 'device/professionId', {params: {monitorPointId: id}}).subscribe((res: any) => {

      this.deviceOptions = res.data;

    });

  }



  deviceChange(id) {

    const format = 'DD日HH时';

    this.base = id % 10 % 5;

    this.times = [moment().subtract(2, 'h').format(format), moment().subtract(1, 'h').format(format), moment().format(format)];

  }

}