fix gauge bug

This commit is contained in:
Steven Zou 2017-04-05 18:37:27 +08:00
parent b7a196f7aa
commit 9afd0c9c3c
3 changed files with 12 additions and 8 deletions

View File

@ -28,8 +28,8 @@
"../node_modules/clarity-icons/clarity-icons.min.js", "../node_modules/clarity-icons/clarity-icons.min.js",
"../node_modules/web-animations-js/web-animations.min.js" "../node_modules/web-animations-js/web-animations.min.js"
], ],
"environmentSource": "environments/environment.ts",
"environments": { "environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts", "dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts" "prod": "environments/environment.prod.ts"
} }

View File

@ -29,7 +29,7 @@ export class GaugeComponent implements AfterViewInit {
private _colorTwo: string; private _colorTwo: string;
private _size: string = "small"; //Support small, medium, large private _size: string = "small"; //Support small, medium, large
private _title: string = "UNKNOWN"; //Lang key private _title: string = "UNKNOWN"; //Lang key
private _used: number = 0; private _free: number = 0;
private _threasHold: number = 0; private _threasHold: number = 0;
/** /**
@ -127,12 +127,12 @@ export class GaugeComponent implements AfterViewInit {
} }
@Input() @Input()
get used(): number { get free(): number {
return this._used; return this._free;
} }
set used(u: number) { set free(u: number) {
this._used = u; this._free = u;
this.determineColors(); this.determineColors();
} }
@ -156,7 +156,11 @@ export class GaugeComponent implements AfterViewInit {
private determineColors() { private determineColors() {
let percent: number = 0; let percent: number = 0;
if (this._threasHold !== 0) { if (this._threasHold !== 0) {
percent = (this._used / this._threasHold) * 100; let used:number = this._threasHold - this._free;
if(used < 0){
used = 0;
}
percent = (used / this._threasHold) * 100;
} }
while (percent > 100) { while (percent > 100) {

View File

@ -37,7 +37,7 @@
</div> </div>
<div class="statistic-item-divider" [hidden]="!isValidSession || !isValidStorage"></div> <div class="statistic-item-divider" [hidden]="!isValidSession || !isValidStorage"></div>
<div class="statistic-block" [hidden]="!isValidSession || !isValidStorage"> <div class="statistic-block" [hidden]="!isValidSession || !isValidStorage">
<esxc-gauge [used]="freeStorage" [threasHold]="totalStorage" [size]="small" [title]='"STATISTICS.STORAGE"' [animate]="true"> <esxc-gauge [free]="freeStorage" [threasHold]="totalStorage" [size]="small" [title]='"STATISTICS.STORAGE"' [animate]="true">
</esxc-gauge> </esxc-gauge>
</div> </div>
</div> </div>