fengxiang
2018-05-28 f1f78b9bae93fe9a07cc3ebdc743eb71ac78c29e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<pro-header [title]="'报表展示'"></pro-header>
<nz-card [nzBordered]="false">
    <form nz-form  (ngSubmit)="reportQuery()" [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 [nzMode]="'multiple'" [(ngModel)]="query.sensorKeys" name="sensorKeys" [nzSize]="'large'" [nzPlaceHolder]="'请选择'">
                            <nz-option *ngFor="let option of sensorOptions" [nzLabel]="option.name" [nzValue]="option.sensorKey + '-' + option.name + '-' + option.unit"></nz-option>
                        </nz-select> -->
                        <nz-popover [nzPlacement]="'bottomLeft'" [nzTrigger]="'click'">
                            <nz-input [nzType]="'input'" nz-popover [ngModel]="sensorNames" name="sensorKeys" [nzReadonly]="true" [nzPlaceHolder]="'请选择 项目'" [nzSize]="'large'">
                                <ng-template #suffix>
                                    <i class="anticon anticon-down ant-cascader-picker-arrow" style="right: 1px;"></i>
                                </ng-template>
                            </nz-input>
                            <ng-template #nzTemplate>
                                <div [ngStyle]="{'width': '240px', 'height': '240px', 'overflow-y' :'auto'}">
                                    <nz-tree [nzNodes]="sensorOptions" (nzActivate)="onTreeClickSelect($event)" (nzDeactivate)="onTreeClickSelect($event)" [nzCheckable]="true" (nzCheck)="onSensorSelect($event)"></nz-tree>
                                </div>
                            </ng-template>
                        </nz-popover>
                    </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)]="query.dimension" name="dimension" [nzSize]="'large'" [nzPlaceHolder]="'请选择'" (ngModelChange)="dimensionChange($event)">
                            <nz-option *ngFor="let option of dimensionOptions" [nzLabel]="option.label" [nzValue]="option.value" ></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)]="timeType" name="timeType" [nzSize]="'large'" [nzPlaceHolder]="'请选择'">
                            <nz-option *ngFor="let option of typeOptions" [nzLabel]="option.label" [nzValue]="option" ></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)]="query.reportType" name="reportType" [nzSize]="'large'" [nzPlaceHolder]="'请选择'">
                            <nz-option *ngFor="let option of reportOptions" [nzLabel]="option.label" [nzValue]="option.value" ></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="4" class="mb-md" *ngIf="items.length < 2">
                <button nz-button type="button" [nzType]="'primary'" [nzSize]="'large'" (click)="addItem()">
                    <!-- <i class="anticon anticon-plus"></i> -->
                    <i class="anticon anticon-plus-circle-o"></i>
                    <span>增加查询条目</span>
                </button>
            </div>
            
        </div>
 
        <div nz-row [nzGutter]="24" *ngFor="let item of items;let i = index">
            <div nz-col [nzSpan]="5" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label class="label-width-70">
                        <label nz-form-item-required>省市区</label>
                    </div>
                    <div nz-form-control class="flex-1">
                        <nz-cascader [nzSize]="'large'" (nzLoad)="areaLazyLoad($event,i)" [nzPlaceHolder]="'请选择 省/市/区'" [nzAllowClear]="false" [nzChangeOnSelect]="true" (nzSelect)="regionChange($event,i)">
                        </nz-cascader>
                    </div>
                </div>
            </div>
 
            <div nz-col [nzSpan]="5" class="mb-md" [ngStyle]="{'display':monitorPointShow ? 'block' : 'none' }">
                <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)]="item.monitorPoint" name="monitorPoint{{item.id}}" [nzPlaceHolder]="'请选择 监测站点'" [nzSize]="'large'"  
                            [nzNotFoundContent]="'无法找到'" (ngModelChange)="getDevices(i)" nzShowSearch nzAllowClear> 
                            <nz-option *ngFor="let option of item.monitorPointOptions"  [nzLabel]="option['name']" [nzValue]="option"> </nz-option> 
                        </nz-select>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="5" class="mb-md" [ngStyle]="{'display':professionShow ? 'block' : 'none' }">
                <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)]="item.profession" name="profession{{item.id}}" [nzSize]="'large'" [nzPlaceHolder]="'请选择 行业'" nzAllowClear (ngModelChange)="getDevices(i)" >
                            <nz-option *ngFor="let option of professionOptions" [nzLabel]="option.name" [nzValue]="option" ></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)]="item.device" name="mac{{item.id}}" [nzSize]="'large'" [nzPlaceHolder]="'请选择 设备'" [nzNotFoundContent]="'无法找到'" nzShowSearch nzAllowClear>
                            <nz-option *ngFor="let option of item.deviceOptions" [nzLabel]="option.name" [nzValue]="option" ></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-datepicker style="width: 100%;" [(ngModel)]="item.time" name="time{{item.id}}" [nzFormat]="timeType.format" [nzDisabledDate]="_disabledDate" [nzAllowClear]="false"
                            [nzMode]="timeType.value=='hour'||timeType.value=='day'?'day':'month'" [nzShowTime]="timeType.value=='hour'?true:false" [nzSize]="'large'"></nz-datepicker>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="4" class="mb-md" *ngIf="items.length > 1">
                <button nz-button type="button" [nzType]="'danger'" [nzSize]="'large'" (click)="items.splice(i, 1)">
                    <i class="anticon anticon-minus-circle-o dynamic-delete-button"></i>
                    <span>删除查询条目</span>
                </button>
            </div>
        </div>
 
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="6" class="mb-md">
                <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'">
                    <a target="_blank" [routerLink]="['/report']" (click)="reportQuery()">查询</a>
                </button>
                <!-- <button nz-button type="reset" [nzSize]="'large'" class="mx-sm" (click)="load()">重置</button> -->
            </div>
        </div>
    </form>
 
</nz-card>