From 2a952e53b9b3fc13094868341d3341ccb9884ebc Mon Sep 17 00:00:00 2001
From: fengxiang <110431245@qq.com>
Date: Mon, 16 Apr 2018 13:40:20 +0800
Subject: [PATCH] 查询数据 选择框调整
---
src/app/routes/reports/query/query.component.less | 2 +-
src/app/routes/reports/query/query.component.ts | 14 ++++++++++++++
src/app/routes/reports/query/query.component.html | 18 ++++++++++--------
3 files changed, 25 insertions(+), 9 deletions(-)
diff --git a/src/app/routes/reports/query/query.component.html b/src/app/routes/reports/query/query.component.html
index 63ac75f..068ca0d 100644
--- a/src/app/routes/reports/query/query.component.html
+++ b/src/app/routes/reports/query/query.component.html
@@ -10,18 +10,20 @@
<label>������������</label>
</div>
<div nz-form-control class="flex-1">
- <nz-popover [nzPlacement]="'bottomLeft'" [nzTrigger]="'hover'">
- <nz-input [nzType]="'input'" nz-popover [ngModel]="sensorNames" name="sensorNames" [nzReadonly]="true" [nzPlaceHolder]="'���������������������'">
+ <nz-popover [nzPlacement]="'bottomLeft'" [(nzVisible)]="sensorSelectVisible" [nzTrigger]="'click'">
+ <nz-input [nzType]="'input'" nz-popover [ngModel]="sensorNames" style="cursor:pointer;"
+ name="sensorNames" [nzReadonly]="true"
+ [nzPlaceHolder]="'���������������������'">
<ng-template #suffix>
- <i class="anticon anticon-plus ant-input-search-icon"></i>
+ <i class="anticon anticon-down ng-star-inserted 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 style="position: relative; width: 240px; height: 240px;" (mouseover) = "onTreeMouseOver($event)" (mouseout) = "onTreeMouseOut($event)">
+ <div style="position: absolute; left: -16px; width: 272px; height: 256px; overflow-y :auto; top: -8px;">
+ <nz-tree [nzNodes]="sensorOptions" (nzActivate)="onTreeClickSelect($event)"
+ (nzDeactivate)="onTreeClickSelect($event)" [nzCheckable]="true" (nzCheck)="onSensorSelect($event)"></nz-tree>
+ </div>
</div>
</ng-template>
</nz-popover>
diff --git a/src/app/routes/reports/query/query.component.less b/src/app/routes/reports/query/query.component.less
index 3abb251..1a97419 100644
--- a/src/app/routes/reports/query/query.component.less
+++ b/src/app/routes/reports/query/query.component.less
@@ -19,6 +19,6 @@
}
.chart-switch-select {
position: absolute;
- right: 10%;
+ right: 8%;
top: 2%;
}
diff --git a/src/app/routes/reports/query/query.component.ts b/src/app/routes/reports/query/query.component.ts
index 0a782de..6e81d40 100644
--- a/src/app/routes/reports/query/query.component.ts
+++ b/src/app/routes/reports/query/query.component.ts
@@ -693,9 +693,23 @@
public sensorTableFocus(index) {
this.sensorTableFocusIndex = index;
}
+
public sensorTableBlur(index) {
this.sensorTableFocusIndex = -1;
}
+ public sensorSelectVisible = false;
+ public treeMouseOverOccur = false;
+ public onTreeMouseOver(event) {
+ this.treeMouseOverOccur = true;
+ }
+ public onTreeMouseOut(event) {
+ this.treeMouseOverOccur = false;
+ setTimeout(() => {
+ if (!this.treeMouseOverOccur) {
+ this.sensorSelectVisible = false;
+ }
+ }, 900);
+ }
}
--
Gitblit v1.8.0