diff options
Diffstat (limited to 'usecaseui-portal/src/app')
3 files changed, 163 insertions, 146 deletions
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.html b/usecaseui-portal/src/app/services/services-list/services-list.component.html index 127d9ad9..d47b342c 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.html +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.html @@ -15,30 +15,41 @@ --> <div class="action ant-tabs-bar"> - <span><i style="margin-right: 10px"><img src="assets/images/customer.png" alt=""></i> {{"i18nTextDefine_Customer" | translate}} : </span> + <span> + <i class="icon"> + <img src="../../../assets/images/customer.png" alt=""> + </i> + {{"i18nTextDefine_Customer" | translate}} : + </span> <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> <button nz-button nz-dropdown><span>{{customerSelected.name}}</span> <i class="anticon anticon-down"></i> </button> - <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;"> + <ul nz-menu> <li nz-menu-item (click)="choseCustomer(item)" *ngFor="let item of customerList"> - <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a> + <a title="{{item.name}}">{{item.name}}</a> </li> </ul> </nz-dropdown> - <span style="margin-left:40px"><i style="margin-right: 10px"><img src="assets/images/service-type.png" alt=""></i> {{"i18nTextDefine_ServiceType" | translate}} : </span> + <span> + <i class="icon"> + <img src="../../../assets/images/service-type.png"alt=""> + </i> + {{"i18nTextDefine_ServiceType" | translate}} : + </span> <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'"> <button nz-button nz-dropdown><span>{{serviceTypeSelected.name}}</span> <i class="anticon anticon-down"></i> </button> - <ul nz-menu style="min-height:40px;max-height: 200px; overflow: auto;"> + <ul nz-menu> <li nz-menu-item (click)="choseServiceType(item)" *ngFor="let item of serviceTypeList"> - <a title="{{item.name}}" style="max-width: 165px; overflow: hidden; text-overflow: ellipsis;">{{item.name}}</a> + <a title="{{item.name}}">{{item.name}}</a> </li> </ul> </nz-dropdown> - <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"><i - class="anticon anticon-plus" style="transform: scale(1.5);line-height: 15px;margin-right: 5px;"></i><span> {{"i18nTextDefine_Create" | translate}} </span> + <button class="create" nz-button [nzType]="'primary'" (click)="createModal()"> + <i *ngIf="width>1200" class="anticon anticon-plus"></i> + <span> {{"i18nTextDefine_Create" | translate}} </span> </button> <nz-modal nzWidth="428" [(nzVisible)]="isVisible" nzTitle=" {{'i18nTextDefine_ServiceCreation' | translate}} " (nzOnCancel)="handleCancel()" diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less index fcb70b82..2a19e5bb 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.less +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less @@ -13,6 +13,52 @@ See the License for the specific language governing permissions and limitations under the License. */ +@media screen and (min-width: 1050px){ + .action{ + span:nth-of-type(2){ + margin-left: 40px; + } + } + +} +@media screen and (max-width: 1050px){ + .action{ + span:nth-of-type(2){ + margin-left: 20px; + } + } + +} +@media screen and (max-width: 1300px){ + .top-list-text{ + p{ + width: 200px; + } + } +} +@media screen and (min-width: 1200px){ + .round{ + top:45%; + left: 50px; + margin-top: -40px; + } + +} + +@media screen and (max-width: 1200px){ + .round{ + top:12%; + left: 12%; + } + .top-list-text{ + p{ + width: 170px; + } + } + +} + + .title { font: 700 18px/18px "思源黑体"; color: #4c5e70; @@ -27,6 +73,18 @@ hr { .ant-tabs-bar{ margin-bottom: 0!important; } +.ant-dropdown-menu{ + min-height:40px; + max-height: 200px; + overflow: auto; +} +.ant-dropdown-menu-item{ + a{ + max-width: 165px; + overflow: hidden; + text-overflow: ellipsis; + } +} .mask{ width: 100%; height: 100%; @@ -77,15 +135,20 @@ hr { font: 700 14px "Arial"; color: #3C4F8C; margin-right: 5px; + .icon{ + margin-right: 10px; + } } nz-dropdown { + width: 20%; vertical-align: middle; background-color:#ffffff; :hover{ border-color: #48C6EF; } button { - width: 165px; + width: 100%; + max-width:165px; height: 42px; background-color:#ffffff; text-align: left; @@ -111,11 +174,15 @@ hr { position: absolute; right: 3%; top:50%; - width:116px; height:42px; background:#0DA9E2; border-radius:6px; margin-top: -15px; + i{ + transform: scale(1.5); + line-height: 15px; + margin-right: 5px; + } span { color: #fff; font-weight: 400; @@ -133,90 +200,76 @@ hr { } } -.top-num{ - overflow: auto; - width: 100%; -} -.top-list{ - position: relative; - width:29%; - height:170px; - margin: 10px 1%; - float: left; - background:url("../../../assets/images/servicelist-e2e.png") no-repeat; - background-size: 100% 100%; - border-radius:2px; -} -.top-num .top-list:nth-child(2){ - background:url("../../../assets/images/servicelist-e2e.png") no-repeat; - background-size: 100% 100%; -} -.top-num .top-list:nth-child(3){ - background:url("../../../assets/images/servicelist-e2e.png") no-repeat; - background-size: 100% 100%; -} -.top-num .top-list:nth-child(4){ - background:url("../../../assets/images/servicelist-sotn.png") no-repeat; - background-size: 100% 100%; -} -.top-list .round{ - position: absolute; - width: 60px; - height: 60px; - line-height: 60px; - text-align: center; - top:45%; - left: 50px; - margin-top: -30px; - background:#E0EDFF; - border:2px solid rgba(224,237,255,1); - border-radius: 50%; - font-size:16px; - font-family:ArialMT; - color:#3C4F8C; -} -.top-list { - .top-list-text { - position: absolute; - text-align: right; - height: 40px; - line-height: 20px; - right: 50px; - color: #fff; - p { - font-size: 14px; - width: 250px; - margin: 15px 0 0 0; - height: 13px; - clear: both; - span { - display: inline-block; - font-weight: 500; - text-align: right; - float: right; - } - span:nth-child(1) { - font-size: 18px; - width: 40px; - min-width: 40px; +nz-layout{ + padding: 20px 32px; + .top-num{ + + width: 100%; + display: flex; + justify-content: space-around; + .top-list{ + position: relative; + width:32%; + max-width:400px; + height:170px; + background:url("../../../assets/images/servicelist-e2e.png") no-repeat; + background-size: 100% 100%; + border-radius:2px; + .round{ + position: absolute; + width: 60px; + height: 60px; + line-height: 60px; + text-align: center; + background:#E0EDFF; + border:2px solid rgba(224,237,255,1); + border-radius: 50%; + font-size:16px; + font-family:ArialMT; + color:#3C4F8C; + transition: .5s; } - span:nth-child(2) { - width: 85px; - font-size: 16px; + .top-list-text{ + position: absolute; + text-align: right; + line-height: 20px; + right: 12%; + color: #fff; + p{ + height: 28px; + margin-bottom: 0; + padding-left: 5px; + font-size: 14px; + clear: both; + span{ + display: inline-block; + float: right; + font-weight: 500; + text-align: right; + } + span:nth-child(1){ + font-size: 18px; + margin-left: 15px; + } + span:nth-child(2){ + width: 85px; + font-size: 16px; + } + } + p:nth-child(1){ + margin-top: 25px; + } + .service-description{ + + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: #3C4F8C; + + } } } - p:nth-child(1) { - margin-top: 25px; - } - } - .service-description{ - font-size: 14px; - width: 250px; - height: 13px; - position: absolute; - bottom: 30px; - left: 50px; - color: #3C4F8C; + } } .list { diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.ts b/usecaseui-portal/src/app/services/services-list/services-list.component.ts index 3c22b7d8..3a07c1fe 100644 --- a/usecaseui-portal/src/app/services/services-list/services-list.component.ts +++ b/usecaseui-portal/src/app/services/services-list/services-list.component.ts @@ -18,6 +18,7 @@ import { MyhttpService } from '../../myhttp.service'; import { slideToRight } from '../../animates'; import { NzModalService } from 'ng-zorro-antd'; import { NzNotificationService } from 'ng-zorro-antd'; +import { Observable } from 'rxjs/Rx'; @Component({ selector: 'app-services-list', @@ -28,11 +29,16 @@ import { NzNotificationService } from 'ng-zorro-antd'; export class ServicesListComponent implements OnInit { @HostBinding('@routerAnimate') routerAnimateState; + public width:number = document.documentElement.clientWidth; + constructor(private myhttp: MyhttpService, private modalService: NzModalService, private notification: NzNotificationService) { } ngOnInit() { this.getallCustomers(); + Observable.fromEvent(window, 'resize').subscribe((event) => { + this.width = document.documentElement.clientWidth + }); } // customer servicetype @@ -1273,19 +1279,6 @@ export class ServicesListComponent implements OnInit { queryProgress(obj, callback) { let mypromise = new Promise((res, rej) => { - // let data = { - // operationStatus:{ - // "operationId": "XXXXXX", - // "operation": "create|delete|update|scale", - // "result": "finished|error|processing", - // "reason": "", - // "userId": "", - // "operationContent": "Be creating pop.", - // "progress": 0, - // "operateAt": "", - // "finishedAt": "" - // } - // } let errorNums = 180; let requery = () => { this.myhttp.getProgress(obj) @@ -1319,17 +1312,6 @@ export class ServicesListComponent implements OnInit { res(data.operationStatus); } }) - // setTimeout(()=>{ - // console.log(data.operationStatus.progress) - // data.operationStatus.progress++; - // if(data.operationStatus.progress<100){ - // callback(data.operationStatus); - // requery() - // }else{ - // callback(data.operationStatus); - // res(data.operationStatus) - // } - // },100) } requery(); }) @@ -1338,25 +1320,7 @@ export class ServicesListComponent implements OnInit { queryNsProgress(jobid, id, callback, operationType) { let mypromise = new Promise((res, rej) => { - // let data = { - // "jobId": "string", - // "responseDescriptor": { - // "status": "string", - // "progress": 0, - // "statusDescription": "string", - // "errorCode": "string", - // "responseId": "string", - // "responseHistoryList": [ - // { - // "status": "string", - // "progress": "string", - // "statusDescription": "string", - // "errorCode": "string", - // "responseId": "string" - // } - // ] - // } - // } + let errorNums = 180; let requery = () => { this.myhttp.getNsProgress(jobid, id, operationType) @@ -1366,7 +1330,6 @@ export class ServicesListComponent implements OnInit { return false; } if (data.responseDescriptor == null || data.responseDescriptor.progress == undefined) { - // console.log(data); errorNums--; if (errorNums == 0) { callback({ progress: 255, status: "time over" }); @@ -1390,17 +1353,7 @@ export class ServicesListComponent implements OnInit { res(data); } }) - // setTimeout(()=>{ - // console.log(data.responseDescriptor.progress) - // data.responseDescriptor.progress++; - // if(data.responseDescriptor.progress<100){ - // callback(data.responseDescriptor); - // requery() - // }else{ - // callback(data); - // res(data) - // } - // },100) + }; requery(); }); |