优化

src/app/share/hs-prompt-modal/hs-prompt-modal.component.html

@@ -1,57 +1,162 @@
-<div class="modal display_flex justify-content_flex-center align-items_center" *ngIf="show">
+<div
+  class="modal display_flex justify-content_flex-center align-items_center"
+  *ngIf="show"
+>
   <div class="modalBody" *ngIf="changeShow">
-    <div class="title">当前科室<i *ngIf="closeTimeFlag<=0||closeTimeFlag>0&&closeTime===0"
-        class="icon_transport transport-guanbi" (click)="hideModal()"></i></div>
+    <div class="title">
+      当前科室<i
+        *ngIf="closeTimeFlag <= 0 || (closeTimeFlag > 0 && closeTime === 0)"
+        class="icon_transport transport-guanbi"
+        (click)="hideModal()"
+      ></i>
+    </div>
     <div class="content">
-      <div class="defeat"><span *ngIf="deptDisplay">{{deptDisplay==2?currentDept.deptalias:currentDept.dept}}</span>
+      <div class="defeat">
+        <span *ngIf="!deptDisplayLoading">{{
+          deptDisplay == 2 ? currentDept.deptalias : currentDept.dept
+        }}</span>
+        <img
+          *ngIf="deptDisplayLoading"
+          src="../../../assets/images/loading.gif"
+          alt=""
+        />
+      </div>
+      <div
+        class="countDown"
+        *ngIf="closeTimeFlag < 0 || (closeTimeFlag > 0 && closeTime > 0)"
+      >
+        <span *ngIf="closeTimeFlag < 0">关闭</span>倒计时<em
+          >{{ closeTime }}s</em
+        >
       </div>
-      <div class="countDown" *ngIf="closeTimeFlag<0||closeTimeFlag>0&&closeTime>0"><span
-          *ngIf="closeTimeFlag<0">关闭</span>倒计时<em>{{closeTime}}s</em></div>
     </div>
     <div class="display_flex justify-content_flex-center">
-      <button *ngIf="closeTimeFlag<=0||closeTimeFlag>0&&closeTime===0" class="btn know" nz-button nzType="primary"
-        (click)="hideModal()">知道了</button>
-      <button *ngIf="closeTimeFlag<=0||closeTimeFlag>0&&closeTime===0" class="btn know" nz-button nzType="primary"
-        nzGhost (click)="changeModal()">切换科室</button>
+      <button
+        *ngIf="closeTimeFlag <= 0 || (closeTimeFlag > 0 && closeTime === 0)"
+        class="btn know"
+        nz-button
+        nzType="primary"
+        (click)="hideModal()"
+      >
+        知道了
+      </button>
+      <button
+        *ngIf="closeTimeFlag <= 0 || (closeTimeFlag > 0 && closeTime === 0)"
+        class="btn know"
+        nz-button
+        nzType="primary"
+        nzGhost
+        (click)="changeModal()"
+      >
+        切换科室
+      </button>
     </div>
   </div>
   <div class="modalBody modalBody-search" *ngIf="!changeShow">
-    <div class="title">搜索当前科室<i class="icon_transport transport-guanbi" (click)="hideModal()"></i></div>
+    <div class="title">
+      搜索当前科室<i
+        class="icon_transport transport-guanbi"
+        (click)="hideModal()"
+      ></i>
+    </div>
     <div class="content content-search">
-      <div class="defeat-search display_flex justify-content_flex-center flex-direction_column">
-        <span>当前院区：<em>{{currentHospital.hosName}}</em></span>
-        <span>当前科室：<em *ngIf="deptDisplay">{{deptDisplay==2?currentDept.deptalias:currentDept.dept}}</em></span>
+      <div
+        class="
+          defeat-search
+          display_flex
+          justify-content_flex-center
+          flex-direction_column
+        "
+      >
+        <span
+          >当前院区：<em>{{ currentHospital.hosName }}</em></span
+        >
+        <span
+          >当前科室：<em *ngIf="!deptDisplayLoading">{{
+            deptDisplay == 2 ? currentDept.deptalias : currentDept.dept
+          }}</em
+          ><img
+            *ngIf="deptDisplayLoading"
+            src="../../../assets/images/loading.gif"
+            alt=""
+        /></span>
       </div>
       <div class="form">
         <form nz-form [formGroup]="validateForm">
-          <nz-form-item style="margin-bottom: 0;">
-            <nz-form-label class="label" [nzSm]="24" [nzXs]="24" nzRequired nzFor="hospital">搜索院区
+          <nz-form-item style="margin-bottom: 0">
+            <nz-form-label
+              class="label"
+              [nzSm]="24"
+              [nzXs]="24"
+              nzRequired
+              nzFor="hospital"
+              >搜索院区
             </nz-form-label>
-            <nz-form-control class="control" [nzSm]="24" [nzXs]="24" nzErrorTip="请选择院区！">
-              <nz-select formControlName="hospital" [nzDropdownMatchSelectWidth]="false"
-                (ngModelChange)="searchHospital($event)" nzPlaceHolder="请选择院区">
+            <nz-form-control
+              class="control"
+              [nzSm]="24"
+              [nzXs]="24"
+              nzErrorTip="请选择院区！"
+            >
+              <nz-select
+                formControlName="hospital"
+                [nzDropdownMatchSelectWidth]="false"
+                (ngModelChange)="searchHospital($event)"
+                nzPlaceHolder="请选择院区"
+              >
                 <ng-container *ngFor="let option of hospitals">
-                  <nz-option *ngIf="!isLoading" [nzLabel]="option.hosName" [nzValue]="option.id"></nz-option>
+                  <nz-option
+                    *ngIf="!isLoading"
+                    [nzLabel]="option.hosName"
+                    [nzValue]="option.id"
+                  ></nz-option>
                 </ng-container>
                 <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
-                  <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
+                  <i nz-icon nzType="loading" class="loading-icon"></i>
+                  搜索中...
                 </nz-option>
               </nz-select>
             </nz-form-control>
           </nz-form-item>
           <nz-form-item>
-            <nz-form-label class="label" [nzSm]="24" [nzXs]="24" nzRequired nzFor="dutyDeptFc">搜索当值科室<span
-                class="red ml8">(可通过拼音首字母检索科室)</span>
+            <nz-form-label
+              class="label"
+              [nzSm]="24"
+              [nzXs]="24"
+              nzRequired
+              nzFor="dutyDeptFc"
+              >搜索当值科室<span class="red ml8"
+                >(可通过拼音首字母检索科室)</span
+              >
             </nz-form-label>
-            <nz-form-control class="control" [nzSm]="24" [nzXs]="24" nzErrorTip="请选择当值科室！">
-              <nz-select formControlName="dutyDeptFc" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch
-                (nzOnSearch)="searchDept(validateForm.controls.hospital.value,$event)" nzPlaceHolder="请选择当值科室">
+            <nz-form-control
+              class="control"
+              [nzSm]="24"
+              [nzXs]="24"
+              nzErrorTip="请选择当值科室！"
+            >
+              <nz-select
+                formControlName="dutyDeptFc"
+                [nzDropdownMatchSelectWidth]="false"
+                nzServerSearch
+                nzShowSearch
+                (nzOnSearch)="
+                  searchDept(validateForm.controls.hospital.value, $event)
+                "
+                nzPlaceHolder="请选择当值科室"
+              >
                 <ng-container *ngFor="let option of dutyDepts">
-                  <nz-option *ngIf="!isLoading" [nzLabel]="deptDisplay==2?option.deptalias:option.dept"
-                    [nzValue]="option.id"></nz-option>
+                  <nz-option
+                    *ngIf="!isLoading"
+                    [nzLabel]="
+                      deptDisplay == 2 ? option.deptalias : option.dept
+                    "
+                    [nzValue]="option.id"
+                  ></nz-option>
                 </ng-container>
                 <nz-option *ngIf="isLoading" nzDisabled nzCustomContent>
-                  <i nz-icon nzType="loading" class="loading-icon"></i> 搜索中...
+                  <i nz-icon nzType="loading" class="loading-icon"></i>
+                  搜索中...
                 </nz-option>
               </nz-select>
             </nz-form-control>
@@ -60,13 +165,29 @@
       </div>
     </div>
     <div class="display_flex justify-content_flex-center">
-      <button class="btn know" nz-button nzType="primary" (click)="ok()">确定</button>
-      <button class="btn know" nz-button nzType="primary" nzGhost (click)="hideModal()">取消</button>
+      <button class="btn know" nz-button nzType="primary" (click)="ok()">
+        确定
+      </button>
+      <button
+        class="btn know"
+        nz-button
+        nzType="primary"
+        nzGhost
+        (click)="hideModal()"
+      >
+        取消
+      </button>
     </div>
   </div>
 </div>
 <!-- 操作成功/失败提示框 -->
-<app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow"
-  [info]="promptInfo" [isReLoad]="true"></app-prompt-modal>
+<app-prompt-modal
+  *ngIf="promptModalShow"
+  [content]="promptContent"
+  [success]="ifSuccess"
+  [show]="promptModalShow"
+  [info]="promptInfo"
+  [isReLoad]="true"
+></app-prompt-modal>
 <!-- 遮罩 -->
 <app-mask *ngIf="maskFlag"></app-mask>

src/app/share/hs-prompt-modal/hs-prompt-modal.component.ts

@@ -36,8 +36,11 @@ export class HsPromptModalComponent implements OnInit {
   ) {}
   searchDeptSubject = new Subject();
   deptDisplay; //护士端是否显示可以别名，1是显示科室名称，2是显示科室别名
+  deptDisplayLoading: boolean = false;
   ngOnInit() {
+    this.deptDisplayLoading = true;
     this.tool.getDeptDisplay().subscribe((result) => {
+      this.deptDisplayLoading = false;
       if (result.status == 200) {
         this.deptDisplay = result.list[0].valueconfig;
       }

src/app/views/hushijiandan/hushijiandan.component.html

@@ -2,7 +2,7 @@
   <nz-layout class="app-layout display_flex flex_auto">
     <nz-sider
       class="menu-sidebar slider"
-      nzWidth="220px"
+      nzWidth="224px"
       nzBreakpoint="xs"
       [nzTrigger]="null"
     >

src/app/views/hushijiandan/hushijiandan.component.less

@@ -459,7 +459,7 @@
       .sidebar-logo {
         height: 88px;
         overflow: hidden;
-        line-height: 64px;
+        line-height: 88px;
         background: #001529;
         transition: all 0.3s;
         border-bottom: 1px solid #fff;
@@ -480,7 +480,7 @@
       }
 
       .mainInfo {
-        width: 220px;
+        width: 100%;
         height: 100%;
         color: #fff;
         position: absolute;
@@ -498,7 +498,6 @@
 
         .checkBanner {
           width: 100%;
-          height: 34px;
           z-index: 1;
 
           .checkItem {
@@ -506,7 +505,7 @@
             text-align: center;
             color: #fff;
             background: #284450;
-            line-height: 34px;
+            line-height: 32px;
             border: none;
 
             &.checked {
@@ -553,7 +552,7 @@
           }
 
           .item {
-            padding: 8px 6px;
+            padding: 8px;
             border-bottom: 1px solid #fff;
 
             .itemTit {
@@ -577,7 +576,7 @@
             }
 
             .checkInfo {
-              padding: 5px 0;
+              padding: 8px 0;
               .transport-zhongdianguanzhu {
                 cursor: pointer;
               }
@@ -600,7 +599,6 @@
               line-height: 28px;
               text-align: center;
               border-radius: 4px;
-              margin-top: 3px;
               cursor: default;
               border: none;
             }
@@ -812,6 +810,7 @@
 
         .cont {
           .top {
+            box-sizing: content-box;
             position: relative;
             z-index: 9;
 
@@ -822,7 +821,7 @@
               div {
                 .h33 {
                   height: 33px;
-                  line-height: 31px;
+                  line-height: 32px;
                 }
 
                 .h53 {
@@ -839,7 +838,7 @@
                 .quick {
                   width: 100%;
                   height: 100%;
-                  padding: 5px;
+                  padding: 8px;
                   display: flex;
                   flex-direction: column;
                   justify-content: center;
@@ -927,7 +926,7 @@
               overflow: hidden;
               .cur {
                 height: 100%;
-                border-radius: 10px;
+                border-radius: 4px;
                 position: relative;
                 background-size: 400% 100%;
                 color: #333;
@@ -982,21 +981,15 @@
           }
 
           .searchBox {
-            height: 60px;
+            height: 56px;
             padding: 0 8px;
             position: relative;
             z-index: 9;
 
-            // & > div:nth-child(1) {
-            //   input {
-            //     // min-width: 253px;
-            //   }
-            // }
-
             .btns {
               button {
                 width: 80px;
-                height: 40px;
+                height: 32px;
 
                 &:nth-child(1) {
                   color: @primary-color;

src/app/views/login/login.component.less

@@ -12,15 +12,22 @@
   align-items: center;
 
   .loginBox {
+    position: relative;
     flex: 1;
 
     .title {
-      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       margin-bottom: 24px;
       font-size: 28px;
       color: @primary-color;
+      position: absolute;
+      width: 100%;
+      bottom: 100%;
 
       img {
+        width: 60px;
         height: 48px;
         margin-right: 8px;
       }
@@ -56,7 +63,7 @@
           .loginBtn {
             button {
               width: 100%;
-              height: 52px;
+              height: 48px;
               background-color: #8e9d9e;
               border-radius: 26px;
               border: 1px solid #8e9d9e;
@@ -75,6 +82,9 @@
     }
 
     .bottom {
+      position: absolute;
+      width: 100%;
+      top: 100%;
       font-size: 12px;
       color: @primary-color;
       text-align: center;

src/app/views/main/main.component.less

@@ -18,7 +18,7 @@ nz-sider {
 }
 
 .menu-sidebar {
-  flex: 0 0 220px;
+  flex: 0 0 224px;
   position: relative;
   z-index: 8;
   min-height: 100vh;