首页优化

src/app/views/main/main.component.html

@@ -1,28 +1,25 @@
 <nz-layout class="app-layout display_flex flex_auto ant-layout-has-sider">
   <overlay-scrollbars #osComponentRef1 class="menu-sidebar">
     <div class="sidebar-logo display_flex align-items_center justify-content_flex-center">
-      <div style="line-height: normal;height:100%;" class="display_flex align-items_center justify-content_flex-center flex-direction_column">
-        <img [src]="tool.logoUrl">
-        <span>{{tool.logoTitle}}</span>
+      <div class="display_flex align-items_center justify-content_flex-center logoTitle">
+        <div class="title ellipsis-multiline" nz-tooltip nzTooltipTitle="{{tool.logoTitle}}">{{tool.logoTitle}}</div>
       </div>
     </div>
     <!-- 导航重写，兼容chrome39 -->
     <ul id="ds-menu">
       <li class="mainMenuOne" (click)="totoMenu('首页')" [ngClass]="{mainMenuSelected:indexFlag}">
         <i nz-icon nzType="home"></i>
-        <span>首页</span>
+        <span nz-tooltip nzTooltipTitle="首页">首页</span>
       </li>
       <li *ngFor="let data of menus" class="mainMenuWrap">
         <div class="mainMenuOne" (click)="clickMenuOne(data)" [ngClass]="{mainMenuSelected:data.flagBg}">
           <i class="icon_transport" [ngClass]="data.icon" *ngIf="isTransportIcon(data.icon)"></i>
           <i nz-icon [nzType]="data.icon" *ngIf="!isTransportIcon(data.icon)"></i>
-          <span>{{data.title}}</span>
-          <span class="icon_transport transport-xialajiantou"
-            [ngStyle]="{transform:data.flag?'rotate(180deg)':'rotate(0deg)',color:data.flag?'#fff':'#999'}"></span>
+          <span nz-tooltip nzTooltipTitle="{{data.title}}">{{data.title}}</span>
+          <span class="icon_transport transport-xialajiantou" [ngStyle]="{transform:data.flag?'rotate(180deg)':'rotate(0deg)',color:data.flag?'#fff':'#999'}"></span>
         </div>
         <ul>
-          <li *ngFor="let item of data.childrens" class="mainMenu" (click)="totoMenu(item.title,item,data)"
-            [ngStyle]="{height:data.flag?'44px':0}" [ngClass]="{menuTwoSelected:item.flag}">
+          <li *ngFor="let item of data.childrens" class="mainMenu" (click)="totoMenu(item.title,item,data)" [ngStyle]="{height:data.flag?'44px':0}" [ngClass]="{menuTwoSelected:item.flag}" nz-tooltip nzTooltipTitle="{{item.title}}">
             {{item.title}}
           </li>
         </ul>
@@ -33,42 +30,37 @@
     <nz-header>
       <div class="app-header display_flex justify-content_space-between align-items_center">
         <div class="left">
-          <button nz-button nzType="primary" *ngIf='deskRole' (click)="toFuwutai()">调度台</button>
-          <button nz-button nzType="primary" *ngIf="nurseRole" (click)="toHuShi()">护士端</button>
-          <button nz-button nzType="primary" *ngIf="pharmacyRole" (click)="toPharmacy()">药房端</button>
-          <button nz-button nzType="primary" *ngIf="pharmacyRole" (click)="toPharmacy2()">药房端2</button>
-          <button nz-button nzType="primary" *ngIf="largeScreenRole" (click)="toBigScreen('largeScreen')">大屏端</button>
-          <button nz-button nzType="primary" *ngIf="largeScreenRole2" (click)="toBigScreen('largeScreen2')">大屏端2</button>
-          <button nz-button nzType="primary" *ngIf="specimenViewRole" (click)="toBigScreen('specimenView')" [nzLoading]="deptTypeLoading">业务视图</button>
-          <button nz-button nzType="primary" *ngIf="specimenViewRole2" (click)="toSpecimenView2()">标本视图</button>
-					<button nz-button nzType="primary" *ngIf="specimenRoomView" (click)="toSpecimenRoomView()">标本间端</button>
-					<button nz-button nzType="primary" *ngIf="pathology" (click)="toPathology()">病理科端</button>
-					<button nz-button nzType="primary" *ngIf="disinfectionSupplyRole" (click)="toDisinfectionSupply()">全局业务查看</button>
-          <button nz-button nzType="primary" *ngIf="configurationCenterRole" (click)="toConfigurationCenter()">配置中心</button>
+          <i class="icon_transport transport-peizhi1 green" *ngIf='deskRole' (click)="toFuwutai()" nz-tooltip nzTooltipTitle="调度台"></i>
+          <i class="icon_transport transport-hushi green" *ngIf="nurseRole" (click)="toHuShi()" nz-tooltip nzTooltipTitle="护士端"></i>
+          <i class="icon_transport transport-tiaodu-fill green" *ngIf="configurationCenterRole" (click)="toConfigurationCenter()" nz-tooltip nzTooltipTitle="配置中心"></i>
+          <i class="icon_transport transport-shangban green" *ngIf='PCCommutesToWork && userInfo.user && !userInfo.user.online' (click)="GoWork()" nz-tooltip nzTooltipTitle="我要上班"></i>
+          <i class="icon_transport transport-shangban green" *ngIf='PCCommutesToWork && userInfo.user && userInfo.user.online' (click)="GoWork()" nz-tooltip nzTooltipTitle="我要下班"></i>
+          <div class="dropdown">
+            <i class="icon_transport transport-gengduoda-copy" (mouseenter)="showDropdown1 = true" (mouseleave)="showDropdown1 = false"></i>
+            <div class="dropdown-content ct" [hidden]="!showDropdown1" (mouseenter)="showDropdown1 = true" (mouseleave)="showDropdown1 = false">
+              <div class="dropdownItem" *ngIf="pharmacyRole" (click)="toPharmacy()">药房端</div>
+              <div class="dropdownItem" *ngIf="pharmacyRole" (click)="toPharmacy2()">药房端2</div>
+              <div class="dropdownItem" *ngIf="largeScreenRole" (click)="toBigScreen('largeScreen')">大屏端</div>
+              <div class="dropdownItem" *ngIf="largeScreenRole2" (click)="toBigScreen('largeScreen2')">大屏端2</div>
+              <div class="dropdownItem" *ngIf="specimenViewRole" (click)="toBigScreen('specimenView')">业务视图</div>
+              <div class="dropdownItem" *ngIf="specimenViewRole2" (click)="toSpecimenView2()">标本视图</div>
+              <div class="dropdownItem" *ngIf="specimenRoomView" (click)="toSpecimenRoomView()">标本间端</div>
+              <div class="dropdownItem" *ngIf="pathology" (click)="toPathology()">病理科端</div>
+              <div class="dropdownItem" *ngIf="disinfectionSupplyRole" (click)="toDisinfectionSupply()">全局业务查看</div>
+            </div>
+          </div>
         </div>
         <div class="right">
-          <button class="mr8" nz-button nzType="primary" *ngIf='PCCommutesToWork && userInfo.user && !userInfo.user.online' (click)="GoWork()">我要上班</button>
-          <button class="mr8" nz-button nzType="primary" *ngIf='PCCommutesToWork && userInfo.user && userInfo.user.online' (click)="GoWork()">我要下班</button>
-          <!-- <div class="msg">
-            <div class="msgBtn display_flex align-items_center justify-content_flex-center" nz-popover [nzPopoverContent]="contentTemplate" nzPopoverPlacement="bottomRight">
-              <i nz-icon nzType="bell" nzTheme="outline"></i>
-            </div>
-            <ng-template #contentTemplate>
-              <div>
-                <p>消息通知</p>
-              </div>
-            </ng-template>
-          </div> -->
-          <div class="userInfo">
-            <div class="wel" [title]="'欢迎您，' + currentHospital.hosName + '：'">欢迎您，{{currentHospital.hosName}}：</div>
-            <div class="user">
+          <div class="userInfo dropdown">
+            <div class="user" (mouseenter)="showDropdown = true" (mouseleave)="showDropdown = false">
               <img src="../../assets/images/icon_keshi.png" alt="">
-              <span [title]="(userInfo&&userInfo.user)?userInfo.user.name:''">{{(userInfo&&userInfo.user)?userInfo.user.name:''}}</span>
+              <span><ng-container *ngIf="currentHospital.hosName">{{currentHospital.hosName}}-</ng-container>{{(userInfo&&userInfo.user)?userInfo.user.name:''}}</span>
+              <i class="icon_transport transport-xiala1 ml8"></i>
             </div>
-            <div class="logOut">
-              <span (click)="hosFlag1 = true">选择院区</span>
-              <span (click)="showUpPwd()">修改密码</span>
-              <span (click)="logOut()">退出</span>
+            <div class="dropdown-content r8" [hidden]="!showDropdown" (mouseenter)="showDropdown = true" (mouseleave)="showDropdown = false">
+              <div class="dropdownItem" (click)="selectHospital()">选择院区</div>
+              <div class="dropdownItem" (click)="showUpPwd()">修改密码</div>
+              <div class="dropdownItem" (click)="logOut()">退出</div>
             </div>
           </div>
         </div>

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

@@ -17,9 +17,46 @@ nz-sider {
   overflow-y: auto;
 }
 
+// 下拉列表
+.dropdown{
+  position: relative;
+  height: 48px;
+  line-height: 48px;
+  .dropdown-content {
+    position: absolute;
+    top: 48px;
+    background-color: #fff;
+    width: 156px;
+    box-shadow: 0px 2px 4px 1px #D9D9D9;
+    z-index: 999999;
+    border-radius: 4px;
+    border: 1px solid rgba(0,0,0,0.15);
+    color: rgba(0,0,0,0.65);
+    &.ct{
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    &.r8{
+      right: 8px;
+    }
+  }
+
+  .dropdown-content .dropdownItem {
+    height: 40px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    padding: 0 24px;
+  }
+
+  .dropdown-content .dropdownItem:hover {
+    background-color: #e9f7e9;
+  }
+}
+
 .menu-sidebar {
-  width: 224px;
-  flex: 0 0 224px;
+  width: 175px;
+  flex: 0 0 175px;
   position: relative;
   z-index: 8;
   min-height: 100vh;
@@ -79,7 +116,7 @@ nz-sider {
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
 
     & > i {
-      margin-left: 24px;
+      margin-left: 16px;
       margin-right: 10px;
       font-size: 14px;
     }
@@ -113,7 +150,11 @@ nz-sider {
     margin: 0;
     padding: 0;
     li {
-      padding-left: 48px;
+      white-space: nowrap;
+      overflow: hidden;//文本超出隐藏
+      text-overflow: ellipsis;//文本超出省略号替代
+      padding-left: 40px;
+      padding-right: 40px;
       transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
       box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45) inset;
     }
@@ -123,14 +164,19 @@ nz-sider {
 
 .sidebar-logo {
   position: relative;
-  height: 88px;
+  height: 48px;
   overflow: hidden;
-  line-height: 64px;
+  line-height: 48px;
   background: #fff;
   transition: all 0.3s;
 
-  span {
-    margin-top: 8px;
+  .logoTitle{
+    padding: 0 8px;
+    line-height: normal;
+    height:100%;
+  }
+
+  .title {
     color: @primary-color;
     font-weight: 600;
     font-size: 13px;
@@ -147,13 +193,13 @@ nz-sider {
 nz-header.ant-layout-header {
   padding: 0;
   width: 100%;
-  z-index: 2;
+  z-index: 99;
   background: #fff;
-  height: 88px;
+  height: 48px;
 
   .app-header {
     position: relative;
-    height: 88px;
+    height: 48px;
     padding: 0;
     background: #fff;
     box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
@@ -161,10 +207,19 @@ nz-header.ant-layout-header {
     border-bottom: 1px solid rgba(0, 21, 41, 0.08);
 
     .left {
+      height: 100%;
       flex: 1;
       display: flex;
-      flex-wrap: wrap;
       align-items: center;
+      justify-content: flex-end;
+      .icon_transport{
+        margin-right: 24px;
+        cursor: pointer;
+        font-size: 20px;
+        height: 48px;
+        line-height: 48px;
+        display: inline-block;
+      }
       .menuLabel {
         color: #333;
         font-size: 22px;
@@ -206,10 +261,9 @@ nz-header.ant-layout-header {
       }
 
       .userInfo {
-        width: 260px;
         height: 100%;
         float: right;
-        padding: 8px 36px 8px 8px;
+        padding: 0 24px;
         box-sizing: border-box;
         font-size: 14px;
         border-left: 1px solid #e5e9ed;
@@ -223,22 +277,22 @@ nz-header.ant-layout-header {
 
         .user {
           overflow: hidden;
-          font-size: 20px;
-          height: 40px;
+          height: 100%;
           display: flex;
           justify-content: center;
           align-items: center;
+          font-size: 16px;
+          cursor: pointer;
 
           img {
-            width: 36px;
-            height: 36px;
+            width: 32px;
+            height: 32px;
             margin-right: 8px;
           }
 
-          span {
-            white-space: nowrap;
-            overflow: hidden;//文本超出隐藏
-            text-overflow: ellipsis;//文本超出省略号替代
+          span, .transport-xiala1 {
+            height: 48px;
+            line-height: 48px;
           }
         }
 

src/app/views/main/main.component.ts

@@ -452,18 +452,20 @@ export class MainComponent implements OnInit {
     }
   }
   //获取系统设置中的科室类型
-  deptTypeLoading = false;
   getTypeByDept(id) {
     let postData = {
       idx: 0,
       sum: 1,
       systemConfiguration: { keyconfig: "busiViewDeptId" },
     };
-    this.deptTypeLoading = true;
+    this.maskFlag = this.msg.loading("正在加载中..", {
+      nzDuration: 0,
+    }).messageId;
     this.mainService
       .getFetchDataList("simple/data", "systemConfiguration", postData)
       .subscribe((result) => {
-        this.deptTypeLoading = false;
+        this.msg.remove(this.maskFlag);
+        this.maskFlag = false;
         if (result.status == 200) {
           let remember = JSON.parse(localStorage.getItem("remember"));
           window.open(
@@ -493,6 +495,15 @@ export class MainComponent implements OnInit {
     this.iShowMenuModal = false;
   }
 
+  // 下拉
+  showDropdown:boolean = false;
+  showDropdown1:boolean = false;
+
+  // 选择院区
+  selectHospital(){
+    this.hosFlag1 = true
+  }
+
   // 退出
   logOut(): void {
     // 假退出

src/assets/iconfont/demo_index.html

@@ -55,6 +55,36 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon icon_transport">&#xe6bb;</span>
+                <div class="name">配置</div>
+                <div class="code-name">&amp;#xe6bb;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon icon_transport">&#xe659;</span>
+                <div class="name">筛选</div>
+                <div class="code-name">&amp;#xe659;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon icon_transport">&#xe695;</span>
+                <div class="name">home_title_class</div>
+                <div class="code-name">&amp;#xe695;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon icon_transport">&#xe6b5;</span>
+                <div class="name">调度-fill</div>
+                <div class="code-name">&amp;#xe6b5;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon icon_transport">&#xe657;</span>
+                <div class="name">护士</div>
+                <div class="code-name">&amp;#xe657;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon icon_transport">&#xe62b;</span>
                 <div class="name">下载</div>
                 <div class="code-name">&amp;#xe62b;</div>
@@ -841,6 +871,12 @@
               </li>
           
             <li class="dib">
+              <span class="icon icon_transport">&#xeeed;</span>
+                <div class="name">更多</div>
+                <div class="code-name">&amp;#xeeed;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon icon_transport">&#xe633;</span>
                 <div class="name">搜索</div>
                 <div class="code-name">&amp;#xe633;</div>
@@ -906,9 +942,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'icon_transport';
-  src: url('iconfont.woff2?t=1724726830485') format('woff2'),
-       url('iconfont.woff?t=1724726830485') format('woff'),
-       url('iconfont.ttf?t=1724726830485') format('truetype');
+  src: url('iconfont.woff2?t=1728986389176') format('woff2'),
+       url('iconfont.woff?t=1728986389176') format('woff'),
+       url('iconfont.ttf?t=1728986389176') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -935,6 +971,51 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon icon_transport transport-peizhi1"></span>
+            <div class="name">
+              配置
+            </div>
+            <div class="code-name">.transport-peizhi1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon icon_transport transport-shaixuan"></span>
+            <div class="name">
+              筛选
+            </div>
+            <div class="code-name">.transport-shaixuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon icon_transport transport-shangban"></span>
+            <div class="name">
+              home_title_class
+            </div>
+            <div class="code-name">.transport-shangban
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon icon_transport transport-tiaodu-fill"></span>
+            <div class="name">
+              调度-fill
+            </div>
+            <div class="code-name">.transport-tiaodu-fill
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon icon_transport transport-hushi"></span>
+            <div class="name">
+              护士
+            </div>
+            <div class="code-name">.transport-hushi
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon icon_transport transport-xiazai"></span>
             <div class="name">
               下载
@@ -2114,6 +2195,15 @@
           </li>
           
           <li class="dib">
+            <span class="icon icon_transport transport-gengduoda-copy"></span>
+            <div class="name">
+              更多
+            </div>
+            <div class="code-name">.transport-gengduoda-copy
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon icon_transport transport-sousuo"></span>
             <div class="name">
               搜索
@@ -2214,6 +2304,46 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#transport-peizhi1"></use>
+                </svg>
+                <div class="name">配置</div>
+                <div class="code-name">#transport-peizhi1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#transport-shaixuan"></use>
+                </svg>
+                <div class="name">筛选</div>
+                <div class="code-name">#transport-shaixuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#transport-shangban"></use>
+                </svg>
+                <div class="name">home_title_class</div>
+                <div class="code-name">#transport-shangban</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#transport-tiaodu-fill"></use>
+                </svg>
+                <div class="name">调度-fill</div>
+                <div class="code-name">#transport-tiaodu-fill</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#transport-hushi"></use>
+                </svg>
+                <div class="name">护士</div>
+                <div class="code-name">#transport-hushi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#transport-xiazai"></use>
                 </svg>
                 <div class="name">下载</div>
@@ -3262,6 +3392,14 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#transport-gengduoda-copy"></use>
+                </svg>
+                <div class="name">更多</div>
+                <div class="code-name">#transport-gengduoda-copy</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#transport-sousuo"></use>
                 </svg>
                 <div class="name">搜索</div>

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "icon_transport"; /* Project id 4543613 */
-  src: url('iconfont.woff2?t=1724726830485') format('woff2'),
-       url('iconfont.woff?t=1724726830485') format('woff'),
-       url('iconfont.ttf?t=1724726830485') format('truetype');
+  src: url('iconfont.woff2?t=1728986389176') format('woff2'),
+       url('iconfont.woff?t=1728986389176') format('woff'),
+       url('iconfont.ttf?t=1728986389176') format('truetype');
 }
 
 .icon_transport {
@@ -13,6 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.transport-peizhi1:before {
+  content: "\e6bb";
+}
+
+.transport-shaixuan:before {
+  content: "\e659";
+}
+
+.transport-shangban:before {
+  content: "\e695";
+}
+
+.transport-tiaodu-fill:before {
+  content: "\e6b5";
+}
+
+.transport-hushi:before {
+  content: "\e657";
+}
+
 .transport-xiazai:before {
   content: "\e62b";
 }
@@ -537,6 +557,10 @@
   content: "\ea66";
 }
 
+.transport-gengduoda-copy:before {
+  content: "\eeed";
+}
+
 .transport-sousuo:before {
   content: "\e633";
 }

src/assets/iconfont/iconfont.json

@@ -6,6 +6,41 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "376638",
+      "name": "配置",
+      "font_class": "peizhi1",
+      "unicode": "e6bb",
+      "unicode_decimal": 59067
+    },
+    {
+      "icon_id": "12911869",
+      "name": "筛选",
+      "font_class": "shaixuan",
+      "unicode": "e659",
+      "unicode_decimal": 58969
+    },
+    {
+      "icon_id": "2213025",
+      "name": "home_title_class",
+      "font_class": "shangban",
+      "unicode": "e695",
+      "unicode_decimal": 59029
+    },
+    {
+      "icon_id": "5766821",
+      "name": "调度-fill",
+      "font_class": "tiaodu-fill",
+      "unicode": "e6b5",
+      "unicode_decimal": 59061
+    },
+    {
+      "icon_id": "28467714",
+      "name": "护士",
+      "font_class": "hushi",
+      "unicode": "e657",
+      "unicode_decimal": 58967
+    },
+    {
       "icon_id": "11833563",
       "name": "下载",
       "font_class": "xiazai",
@@ -923,6 +958,13 @@
       "unicode_decimal": 60006
     },
     {
+      "icon_id": "42129639",
+      "name": "更多",
+      "font_class": "gengduoda-copy",
+      "unicode": "eeed",
+      "unicode_decimal": 61165
+    },
+    {
       "icon_id": "2675116",
       "name": "搜索",
       "font_class": "sousuo",