消毒供应大屏

angular.json

@@ -34,10 +34,12 @@
             ],
             "styles": [
               "src/styles.less",
-              "src/assets/iconfont/iconfont.css"
+              "src/assets/iconfont/iconfont.css",
+              "./node_modules/swiper/swiper-bundle.min.css"
             ],
             "scripts": [
-              "node_modules/echarts/dist/echarts.min.js"
+              "node_modules/echarts/dist/echarts.min.js",
+              "./node_modules/swiper/swiper-bundle.min.js"
             ]
           },
           "configurations": {
@@ -103,10 +105,12 @@
             ],
             "styles": [
               "src/styles.less",
-              "src/assets/iconfont/iconfont.css"
+              "src/assets/iconfont/iconfont.css",
+              "./node_modules/swiper/swiper-bundle.min.css"
             ],
             "scripts": [
-              "node_modules/echarts/dist/echarts.min.js"
+              "node_modules/echarts/dist/echarts.min.js",
+              "./node_modules/swiper/swiper-bundle.min.js"
             ]
           }
         },

package-lock.json

@@ -18,12 +18,14 @@
         "@angular/router": "~8.1.1",
         "@types/crypto-js": "^3.1.47",
         "@types/overlayscrollbars": "^1.12.1",
+        "@types/swiper": "^6.0.0",
         "atmosphere.js": "2.3.6",
         "core-js": "^3.18.3",
         "crypto-js": "^3.3.0",
         "datatables.net": "^1.11.3",
         "date-fns": "^2.25.0",
         "echarts": "^4.6.0",
+        "lodash-es": "^4.17.21",
         "ng-zorro-antd": "^8.5.2",
         "ngx-echarts": "^4.2.2",
         "ngx-print": "^1.2.1",
@@ -33,6 +35,7 @@
         "overlayscrollbars-ngx": "^0.1.1",
         "rxjs": "~6.4.0",
         "sortablejs": "^1.14.0",
+        "swiper": "^6.8.4",
         "tslib": "^1.9.0",
         "viewerjs": "^0.10.0",
         "zone.js": "^0.9.1"
@@ -1092,6 +1095,15 @@
       "integrity": "sha1-AHiDYGP/rxdBI0m7o2QIfgrALsk=",
       "dev": true
     },
+    "node_modules/@types/swiper": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/@types/swiper/-/swiper-6.0.0.tgz",
+      "integrity": "sha512-QPZRgxZ+ivXXtzV43B3LxpXUIC7FE/EoKM+rtxngmgt2M7eeUYypZhyqZD8UxJtlBcUDw/ATGoVeSNpvBBrz2w==",
+      "deprecated": "This is a stub types definition. swiper provides its own type definitions, so you do not need this installed.",
+      "dependencies": {
+        "swiper": "*"
+      }
+    },
     "node_modules/@types/webpack-sources": {
       "version": "0.1.8",
       "resolved": "https://registry.npm.taobao.org/@types/webpack-sources/download/@types/webpack-sources-0.1.8.tgz?cache=0&sync_timestamp=1613384834782&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fwebpack-sources%2Fdownload%2F%40types%2Fwebpack-sources-0.1.8.tgz",
@@ -3723,6 +3735,14 @@
         "void-elements": "^2.0.0"
       }
     },
+    "node_modules/dom7": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-3.0.0.tgz",
+      "integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==",
+      "dependencies": {
+        "ssr-window": "^3.0.0-alpha.1"
+      }
+    },
     "node_modules/domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.nlark.com/domain-browser/download/domain-browser-1.2.0.tgz",
@@ -6913,6 +6933,11 @@
       "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
       "dev": true
     },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "node_modules/lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npm.taobao.org/lodash.clonedeep/download/lodash.clonedeep-4.5.0.tgz",
@@ -14904,6 +14929,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssr-window": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-3.0.0.tgz",
+      "integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA=="
+    },
     "node_modules/ssri": {
       "version": "6.0.2",
       "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-6.0.2.tgz?cache=0&sync_timestamp=1617826544307&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fssri%2Fdownload%2Fssri-6.0.2.tgz",
@@ -15225,6 +15255,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/swiper": {
+      "version": "6.8.4",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-6.8.4.tgz",
+      "integrity": "sha512-O+buF9Q+sMA0H7luMS8R59hCaJKlpo8PXhQ6ZYu6Rn2v9OsFd4d1jmrv14QvxtQpKAvL/ZiovEeANI/uDGet7g==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "dom7": "^3.0.0",
+        "ssr-window": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    },
     "node_modules/symbol-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.nlark.com/symbol-observable/download/symbol-observable-1.2.0.tgz",
@@ -17018,7 +17061,8 @@
     "node_modules/zone.js": {
       "version": "0.9.1",
       "resolved": "https://registry.npm.taobao.org/zone.js/download/zone.js-0.9.1.tgz",
-      "integrity": "sha1-43xuXFTBP65N4mtf/o2OkhLabZs="
+      "integrity": "sha1-43xuXFTBP65N4mtf/o2OkhLabZs=",
+      "dev": true
     },
     "node_modules/zrender": {
       "version": "4.3.2",
@@ -17855,6 +17899,14 @@
       "integrity": "sha1-AHiDYGP/rxdBI0m7o2QIfgrALsk=",
       "dev": true
     },
+    "@types/swiper": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmmirror.com/@types/swiper/-/swiper-6.0.0.tgz",
+      "integrity": "sha512-QPZRgxZ+ivXXtzV43B3LxpXUIC7FE/EoKM+rtxngmgt2M7eeUYypZhyqZD8UxJtlBcUDw/ATGoVeSNpvBBrz2w==",
+      "requires": {
+        "swiper": "*"
+      }
+    },
     "@types/webpack-sources": {
       "version": "0.1.8",
       "resolved": "https://registry.npm.taobao.org/@types/webpack-sources/download/@types/webpack-sources-0.1.8.tgz?cache=0&sync_timestamp=1613384834782&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fwebpack-sources%2Fdownload%2F%40types%2Fwebpack-sources-0.1.8.tgz",
@@ -18094,8 +18146,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npm.taobao.org/acorn-dynamic-import/download/acorn-dynamic-import-4.0.0.tgz",
       "integrity": "sha1-SCIQFAWCo2uDw+NC4c/ryqkkCUg=",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "acorn-walk": {
       "version": "7.2.0",
@@ -18149,15 +18200,13 @@
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/ajv-errors/download/ajv-errors-1.0.1.tgz",
       "integrity": "sha1-81mGrOuRr63sQQL72FAUlQzvpk0=",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npm.taobao.org/ajv-keywords/download/ajv-keywords-3.5.2.tgz?cache=0&sync_timestamp=1616882384060&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fajv-keywords%2Fdownload%2Fajv-keywords-3.5.2.tgz",
       "integrity": "sha1-MfKdpatuANHC0yms97WSlhTVAU0=",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "amdefine": {
       "version": "1.0.1",
@@ -19258,8 +19307,7 @@
       "version": "5.0.2",
       "resolved": "https://registry.npm.taobao.org/circular-dependency-plugin/download/circular-dependency-plugin-5.0.2.tgz",
       "integrity": "sha1-2haMCzfntDVj+5+RLBwAfCEzie8=",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "class-utils": {
       "version": "0.3.6",
@@ -20133,6 +20181,14 @@
         "void-elements": "^2.0.0"
       }
     },
+    "dom7": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/dom7/-/dom7-3.0.0.tgz",
+      "integrity": "sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==",
+      "requires": {
+        "ssr-window": "^3.0.0-alpha.1"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.nlark.com/domain-browser/download/domain-browser-1.2.0.tgz",
@@ -22654,8 +22710,7 @@
       "version": "1.7.0",
       "resolved": "https://registry.nlark.com/karma-jasmine-html-reporter/download/karma-jasmine-html-reporter-1.7.0.tgz",
       "integrity": "sha1-UsSJp012CTShCJv6XqSo/LhMwos=",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "karma-source-map-support": {
       "version": "1.4.0",
@@ -22782,6 +22837,11 @@
       "integrity": "sha1-Z5WRxWTDv/quhFTPCz3zcMPWkRw=",
       "dev": true
     },
+    "lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+    },
     "lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npm.taobao.org/lodash.clonedeep/download/lodash.clonedeep-4.5.0.tgz",
@@ -26999,8 +27059,7 @@
     "overlayscrollbars-ngx": {
       "version": "0.1.1",
       "resolved": "https://registry.nlark.com/overlayscrollbars-ngx/download/overlayscrollbars-ngx-0.1.1.tgz",
-      "integrity": "sha1-APyVynU9vV7by2Njp9AokJJVIow=",
-      "requires": {}
+      "integrity": "sha1-APyVynU9vV7by2Njp9AokJJVIow="
     },
     "p-defer": {
       "version": "1.0.0",
@@ -29071,6 +29130,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-3.0.0.tgz",
+      "integrity": "sha512-q+8UfWDg9Itrg0yWK7oe5p/XRCJpJF9OBtXfOPgSJl+u3Xd5KI328RUEvUqSMVM9CiQUEf1QdBzJMkYGErj9QA=="
+    },
     "ssri": {
       "version": "6.0.2",
       "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-6.0.2.tgz?cache=0&sync_timestamp=1617826544307&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fssri%2Fdownload%2Fssri-6.0.2.tgz",
@@ -29340,6 +29404,15 @@
         "has-flag": "^3.0.0"
       }
     },
+    "swiper": {
+      "version": "6.8.4",
+      "resolved": "https://registry.npmmirror.com/swiper/-/swiper-6.8.4.tgz",
+      "integrity": "sha512-O+buF9Q+sMA0H7luMS8R59hCaJKlpo8PXhQ6ZYu6Rn2v9OsFd4d1jmrv14QvxtQpKAvL/ZiovEeANI/uDGet7g==",
+      "requires": {
+        "dom7": "^3.0.0",
+        "ssr-window": "^3.0.0"
+      }
+    },
     "symbol-observable": {
       "version": "1.2.0",
       "resolved": "https://registry.nlark.com/symbol-observable/download/symbol-observable-1.2.0.tgz",
@@ -30818,7 +30891,8 @@
     "zone.js": {
       "version": "0.9.1",
       "resolved": "https://registry.npm.taobao.org/zone.js/download/zone.js-0.9.1.tgz",
-      "integrity": "sha1-43xuXFTBP65N4mtf/o2OkhLabZs="
+      "integrity": "sha1-43xuXFTBP65N4mtf/o2OkhLabZs=",
+      "dev": true
     },
     "zrender": {
       "version": "4.3.2",

package.json

@@ -23,12 +23,14 @@
     "@angular/router": "~8.1.1",
     "@types/crypto-js": "^3.1.47",
     "@types/overlayscrollbars": "^1.12.1",
+    "@types/swiper": "^6.0.0",
     "atmosphere.js": "2.3.6",
     "core-js": "^3.18.3",
     "crypto-js": "^3.3.0",
     "datatables.net": "^1.11.3",
     "date-fns": "^2.25.0",
     "echarts": "^4.6.0",
+    "lodash-es": "^4.17.21",
     "ng-zorro-antd": "^8.5.2",
     "ngx-echarts": "^4.2.2",
     "ngx-print": "^1.2.1",
@@ -38,6 +40,7 @@
     "overlayscrollbars-ngx": "^0.1.1",
     "rxjs": "~6.4.0",
     "sortablejs": "^1.14.0",
+    "swiper": "^6.8.4",
     "tslib": "^1.9.0",
     "viewerjs": "^0.10.0",
     "zone.js": "^0.9.1"

proxy.conf.json

@@ -1,6 +1,6 @@
 {
   "/service": {
-    "target": "http://192.168.4.240",
+    "target": "http://192.168.3.108",
     "logLevel": "debug",
     "changeOrigin": true,
     "pathRewrite": {

src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import { FuwutaiGuard } from './guard/fuwutai.guard';//服务台权限
 import { MainGuard } from './guard/main.guard';//管理端权限
 import { PharmacyGuard } from './guard/pharmacy.guard';//药房端权限
 import { SpecimenView2Guard } from './guard/SpecimenView2Guard.guard';//标本视图权限
+import { DisinfectionSupplyGuard } from './guard/DisinfectionSupplyGuard.guard';
 const routes: Routes = [
   {
     path: '',
@@ -51,6 +52,11 @@ const routes: Routes = [
     canActivate: [SpecimenView2Guard]
   },
   {
+    path: 'disinfectionSupply',//全局业务查看
+    loadChildren: () => import('./views/disinfection-supply/disinfection-supply.module').then(m => m.DisinfectionSupplyModule),
+    canActivate: [DisinfectionSupplyGuard]
+  },
+  {
     // 问卷预览
     path: "preview",
     loadChildren: () => import("./views/preview/preview.module").then((m) => m.PreviewModule),

src/app/app.component.ts

@@ -19,7 +19,6 @@ export class AppComponent {
       this.tool.setLogo(logoUrl);
       this.tool.setFavicon(faviconUrl);
       this.titleService.setTitle(this.tool.logoTitle);
-      console.log(document.querySelector('#favicon'));
       (document.querySelector('#favicon') as any).href = this.tool.faviconUrl;
     })
   }

src/app/guard/DisinfectionSupplyGuard.guard.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, Router } from '@angular/router';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DisinfectionSupplyGuard implements CanActivate  {
+  constructor(public router: Router) { }
+
+  canActivate(): boolean {
+    let menus = JSON.parse(localStorage.getItem('menu'));
+    let can = false;
+    if (menus) {
+      menus.forEach((e) => {
+        if (e.link == 'disinfectionSupply') {
+          can = true;
+        }
+      });
+    }
+    if (!can) {
+      this.router.navigate(['login']);
+      return false
+    }
+    return true;
+  }
+}

src/app/views/disinfection-supply/disinfection-supply-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { DisinfectionSupplyComponent } from './disinfection-supply.component';
+
+
+const routes: Routes = [
+  {
+    path: "",
+    component: DisinfectionSupplyComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DisinfectionSupplyRoutingModule { }

src/app/views/disinfection-supply/disinfection-supply.component.html

@@ -0,0 +1,116 @@
+<div class="mask" *ngIf="isMask">
+  <div class="con-wrap">
+    <div class="con">
+      <div class="title">配置</div>
+      <div class="conditions">
+        <div nz-row>
+          <div nz-col nzSpan="6"><span class="red">*</span>任务类型：</div>
+          <div nz-col nzSpan="15">
+            <div nz-row>
+              <nz-select class="w100" [nzDropdownMatchSelectWidth]="false" nzShowSearch nzPlaceHolder="请选择任务类型" nzServerSearch (nzOnSearch)="onSearchOtherTaskType($event)" [(ngModel)]="tasktype">
+                <ng-container *ngFor="let o of taskTypeList">
+                  <nz-option *ngIf="!searchLoading" [nzLabel]="o.taskName" [nzValue]="o.id"></nz-option>
+                </ng-container>
+                <nz-option *ngIf="searchLoading" nzDisabled nzCustomContent>
+                  <i nz-icon nzType="loading" class="loading-icon"></i>
+                  搜索中...
+                </nz-option>
+              </nz-select>
+            </div>
+          </div>
+        </div>
+        <div nz-row>
+          <div nz-col nzSpan="6"><span class="red">*</span>刷新时间：</div>
+          <div nz-col nzSpan="15">
+            <div nz-row>
+              <div nz-col nzSpan="">
+                <nz-input-group nzAddOnAfter="秒">
+                  <nz-input-number
+                    class="w100"
+                    [(ngModel)]="refreshTime"
+                    [nzMin]="10"
+                    [nzStep]="1"
+                    placeholder="请输入刷新时间"
+                  ></nz-input-number>
+                </nz-input-group>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div nz-row>
+          <div nz-col nzSpan="6"><span class="red">*</span>切屏时间：</div>
+          <div nz-col nzSpan="15">
+            <div nz-row>
+              <div nz-col nzSpan="">
+                <nz-input-group nzAddOnAfter="秒">
+                  <nz-input-number
+                    class="w100"
+                    [(ngModel)]="screenCuttingTime"
+                    [nzMin]="10"
+                    [nzStep]="1"
+                    placeholder="请输入切屏时间"
+                  ></nz-input-number>
+                </nz-input-group>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="btns display_flex justify-content_flex-center">
+        <button
+          nz-button
+          nzType="primary"
+          nzValue="small"
+          (click)="saveScreen()"
+        >
+          确定
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="screen" *ngIf="!isMask">
+  <!-- 头部 -->
+  <div class="screen_head">
+    <div class="screen_head_txt">
+      <h1>消毒供应中心下收下送实时表</h1>
+      <div class="left_oblique_line_image"></div>
+      <div class="right_oblique_line_image"></div>
+    </div>
+    <div class="left_line"></div>
+    <div class="right_line"></div>
+    <div class="left_oblique_line"></div>
+    <div class="right_oblique_line"></div>
+    <div class="bottom_line"></div>
+  </div>
+
+  <!-- 内容 -->
+  <div class="screen_body swiper" id="mySwiper" *ngIf="buildings.length">
+    <div class="swiper-wrapper display_flex">
+      <div class="screen_wrap swiper-slide" *ngFor="let screen of buildings">
+        <div class="screen_list" *ngFor="let building of screen">
+          <div class="screen_list_head">
+            <div class="screen_list_title">{{building.name}}</div>
+            <div class="screen_list_column">
+              <div class="column" *ngIf="building.name">科室名称</div>
+              <div class="column" *ngIf="building.name">{{taskTypeName}}工单状态</div>
+            </div>
+          </div>
+          <div class="screen_list_body">
+            <div class="screen_list_item" *ngFor="let department of building.departments">
+              <div class="item_name">{{department.name}}</div>
+              <div class="item_description">
+                <div class="item_orderInfo" *ngIf="department.orders[0]">{{department.orders[0][11].slice(-4)}}-{{department.orders[0][7]}} {{department.orders[0][8]}}</div>
+                <div class="item_remarks" *ngIf="department.orders[0]">{{department.orders[0][13]}}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 如果需要分页器 -->
+    <div class="swiper-pagination">
+      <div class="dit" [ngClass]="{active: activeIndex == i}" *ngFor="let dit of buildings;let i = index;" (click)="setActiveIndex(i)"></div>
+    </div>
+  </div>
+</div>

src/app/views/disinfection-supply/disinfection-supply.component.less

@@ -0,0 +1,451 @@
+@import "../../../../src/theme.less";
+
+:host {
+  background-color: #00253f;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+
+  // 遮罩
+  .mask{
+    background-color: rgba(80, 80, 80, 0.5);
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 9;
+    .con-wrap{
+      width: 480px;
+      background: #fff;
+      padding: 16px;
+      border-radius: 5px;
+      border: 1px solid #e5e9ed;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      .con {
+        background: #f9fafb;
+        width: 100%;
+        border-radius: 5px;
+        border: 1px solid #e5e9ed;
+        padding: 16px;
+        &.bindingExtension {
+          min-height: 246px;
+          .bindingExtension_content {
+            display: flex;
+            flex-wrap: wrap;
+          }
+          .noContentFlex {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 136px;
+            flex-direction: column;
+            .noContent {
+              width: 128px;
+            }
+            p {
+              margin-top: 8px;
+            }
+          }
+          .ant-checkbox-wrapper {
+            font-size: 12px;
+            width: 100%;
+            display: flex;
+            margin-top: 8px;
+            justify-content: space-between;
+            align-items: center;
+            ::ng-deep .ant-checkbox {
+              font-size: 12px;
+              top: 0;
+            }
+            ::ng-deep .ant-checkbox + span {
+              flex: 1;
+            }
+          }
+        }
+
+        &.tableCon {
+          padding: 0;
+
+          .table {
+            font-size: 14px;
+
+            tr {
+              td {
+                padding: 15px 6px;
+                text-align: center;
+
+                & > .tdiv {
+                  overflow: hidden;
+
+                  .name {
+                    float: left;
+                  }
+
+                  .num {
+                    float: right;
+                    font-size: 12px;
+
+                    span {
+                      color: @primary-color;
+                      font-size: 14px;
+                    }
+                  }
+                }
+
+                .notOpen {
+                  color: #666;
+                  font-size: 12px;
+
+                  img {
+                    margin-bottom: 8px;
+                  }
+                }
+              }
+            }
+          }
+        }
+
+        .title {
+          color: #333;
+          text-align: center;
+        }
+
+        .conditions {
+          & > .ant-row {
+            margin: 8px 0;
+            display: flex;
+            align-items: center;
+
+            .ant-row {
+              .ant-col-6 {
+                margin: 2px 0;
+              }
+            }
+
+            .checkAll {
+              width: 100%;
+              border-bottom: 1px solid rgb(233, 233, 233);
+              color: @primary-color;
+            }
+          }
+        }
+
+        .btns {
+          padding: 5px 20px 0 20px;
+        }
+      }
+    }
+  }
+
+  // 大屏
+  .screen{
+    // 头部
+    .screen_head{
+      height: 117px;
+      padding-top: 21px;
+      display: flex;
+      justify-content: center;
+      position: relative;
+
+      .screen_head_txt{
+        width: 855px;
+        height: 52px;
+        position: relative;
+
+        h1{
+          letter-spacing: 8px;
+          font-weight: bold;
+          color: #fff;
+          font-size: 36px;
+          margin: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          z-index: 11;
+        }
+        &::after{
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          z-index: 1;
+          width: 855px;
+          background: linear-gradient(to bottom, #15B4ED, #09658E);
+          clip-path: polygon(0 0, 100% 0, calc(100% - 52px) 100%, 52px 100%);
+        }
+
+        .left_oblique_line_image{
+          position: absolute;
+          left: 0;
+          top: 18px;
+          width: 413px;
+          height: 41px;
+          background: url(../../../assets/images/screen/left_oblique_line.png) no-repeat;
+          background-size: contain;
+          transform: translateX(-100%);
+        }
+
+        .right_oblique_line_image{
+          position: absolute;
+          right: 0;
+          top: 18px;
+          width: 413px;
+          height: 41px;
+          background: url(../../../assets/images/screen/right_oblique_line.png) no-repeat;
+          background-size: contain;
+          transform: translateX(100%);
+        }
+      }
+
+      .left_line{
+        position: absolute;
+        left: 0;
+        top: 21px;
+        width: calc((100% - 855px) / 2 - 22px);
+        height: 4px;
+        background-color: #76A8BC;
+      }
+
+      .right_line{
+        position: absolute;
+        right: 0;
+        top: 21px;
+        width: calc((100% - 855px) / 2 - 22px);
+        height: 4px;
+        background-color: #76A8BC;
+      }
+
+      .left_oblique_line{
+        position: absolute;
+        left: calc((100% - 855px) / 2 - 22px - 17px);
+        top: 54px;
+        width: 89px;
+        height: 4px;
+        background-color: #76A8BC;
+        transform: rotate(50deg);
+      }
+
+      // .left_oblique_line_common(@n){
+      //   position: absolute;
+      //   left: calc((100% - 855px) / 2 - 22px - 17px - 24px * (@n - 1));
+      //   top: 41px;
+      //   width: 12px;
+      //   height: 45px;
+      //   background-image: linear-gradient(to right bottom, rgba(0, 172, 221, 0.01) 70%, rgba(0, 172, 221, 0.5));
+      //   transform: skewX(40deg);
+      // }
+
+      // @numList: {
+      //   1: 1;
+      //   2: 2;
+      //   3: 3;
+      //   4: 4;
+      //   5: 5;
+      //   6: 6;
+      //   7: 7;
+      //   8: 8;
+      //   9: 9;
+      //   10: 10;
+      //   11: 11;
+      //   12: 12;
+      //   13: 13;
+      //   14: 14;
+      //   15: 15;
+      // }
+
+      // each(@numList, {
+      //   .left_oblique_line@{key} {
+      //     .left_oblique_line_common(@value);
+      //   }
+      // });
+
+      .right_oblique_line{
+        position: absolute;
+        right: calc((100% - 855px) / 2 - 22px - 17px);
+        top: 54px;
+        width: 89px;
+        height: 4px;
+        background-color: #76A8BC;
+        transform: rotate(-50deg);
+      }
+
+      .bottom_line{
+        position: absolute;
+        left: 50%;
+        bottom: 25px;
+        width: calc(855px - 52px * 2 + 20px * 2);
+        height: 4px;
+        background-color: #76A8BC;
+        transform: translateX(-50%);
+      }
+    }
+    // 内容
+    .screen_body{
+      .swiper-pagination{
+        position: fixed;
+        right: 0;
+        bottom: 0;
+        height: 70px;
+        display: flex;
+        align-items: center;
+        .dit{
+          width: 28px;
+          height: 28px;
+          background: #FFFFFF;
+          border-radius: 50%;
+          margin-right: 14px;
+          cursor: pointer;
+          &:last-of-type{
+            margin-right: 20px;
+          }
+          &.active{
+            background: #8AE4FF;
+          }
+        }
+      }
+      .screen_wrap{
+        padding: 0 20px 70px;
+        display: flex;
+        .screen_list{
+          min-width: 464px;
+          flex: 1;
+          .screen_list_head{
+            height: 70px;
+            background-color: #02356D;
+            box-shadow: 0px 3px 6px 1px #092543;
+            margin-left: 6px;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            &::before{
+              content: '';
+              position: absolute;
+              left: 0;
+              top: 0;
+              width: 13px;
+              height: 13px;
+              border-top: 1px solid #B3ECFD;
+              border-left: 1px solid #B3ECFD;
+            }
+            &::after{
+              content: '';
+              position: absolute;
+              right: 0;
+              bottom: 0;
+              width: 13px;
+              height: 13px;
+              border-bottom: 1px solid #B3ECFD;
+              border-right: 1px solid #B3ECFD;
+            }
+            .screen_list_title{
+              font-size: 20px;
+              font-weight: bold;
+              color: #57D8FF;
+            }
+            .screen_list_column{
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              width: 100%;
+              text-align: center;
+              .column{
+                font-size: 18px;
+                font-weight: 400;
+                color: #75B2C4;
+                flex: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+            }
+          }
+          .screen_list_body{
+            margin-top: 20px;
+            border: 6px solid #fff;
+            border-right: none;
+            height: calc(100vh - 289px);
+            overflow: hidden;
+            .screen_list_item{
+              height: 80px;
+              display: flex;
+              &:nth-of-type(2n + 1){
+                background-color: #043144;
+              }
+              &:nth-of-type(2n){
+                background-color: #02374E;
+              }
+              .item_name{
+                flex: 1;
+                font-size: 21px;
+                font-weight: 400;
+                color: #B3ECFD;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                // word-break: break-all;
+                // text-overflow: ellipsis;
+                // overflow: hidden;
+                // display: -webkit-box;
+                // -webkit-box-orient: vertical;
+                // -webkit-line-clamp: 2; /* 这里是超出几行省略 */
+              }
+              .item_description{
+                flex: 1;
+                font-size: 17px;
+                font-weight: 300;
+                color: #FFFFFF;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                .item_orderInfo{
+                  width: 100%;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                }
+                .item_remarks{
+                  width: 100%;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                  // word-break: break-all;
+                  // text-overflow: ellipsis;
+                  // overflow: hidden;
+                  // display: -webkit-box;
+                  // -webkit-box-orient: vertical;
+                  // -webkit-line-clamp: 2; /* 这里是超出几行省略 */
+                }
+              }
+            }
+          }
+          &:last-of-type .screen_list_body{
+            border-right: 6px solid #fff;
+          }
+          &:last-of-type .screen_list_head{
+            margin-right: 6px;
+          }
+        }
+      }
+    }
+  }
+}

src/app/views/disinfection-supply/disinfection-supply.component.ts

@@ -0,0 +1,192 @@
+import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
+import { debounceTime } from 'rxjs/operators';
+import { ToolService } from 'src/app/services/tool.service';
+import { MainService } from 'src/app/services/main.service';
+import { Subject } from 'rxjs';
+import { NzMessageService } from 'ng-zorro-antd';
+import chunk from 'lodash-es/chunk';
+import { Swiper, Autoplay } from 'swiper';
+Swiper.use([Autoplay]);
+@Component({
+  selector: 'app-disinfection-supply',
+  templateUrl: './disinfection-supply.component.html',
+  styleUrls: ['./disinfection-supply.component.less']
+})
+export class DisinfectionSupplyComponent implements OnInit, OnDestroy {
+
+  constructor(
+    private mainService: MainService,
+    private tool: ToolService,
+    private message: NzMessageService,
+  ) { }
+
+  tasktype = null; //任务类型
+  refreshTime: number = 60; //刷新时间
+  screenCuttingTime: number = 10; //切屏时间
+
+  taskTypeName:string = '';
+  buildings: any[] = [];
+  taskTypeList: any[] = [];
+  hosId;
+  onSearchOtherTaskTypeSubject = new Subject(); //搜索防抖
+  searchLoading: boolean = false;
+  isMask: boolean = true;
+  mySwiper:Swiper;
+  timer = null;
+  activeIndex: number = 0;
+
+  ngOnDestroy(){
+    clearTimeout(this.timer);
+    this.mySwiper.destroy();
+  }
+
+  ngOnInit() {
+    this.hosId = this.tool.getCurrentHospital().id;
+
+    this.onSearchOtherTaskTypeSubject.pipe(debounceTime(500)).subscribe((v) => {
+      this.getOtherTasktype(v).then((result) => {
+        this.searchLoading = false;
+        if (result.status == 200) {
+          this.taskTypeList = result.list;
+        }
+      });
+    });
+
+    this.getOtherTasktype().then((result) => {
+      this.searchLoading = false;
+      if (result.status == 200) {
+        this.taskTypeList = result.list;
+      }
+    });
+  }
+
+  setActiveIndex(i:number){
+    this.activeIndex = i;
+    this.mySwiper.slideToLoop(i, 1000, false);
+  }
+
+  startGetList(){
+    clearTimeout(this.timer);
+    this.timer = setTimeout(() => {
+      this.getList();
+    }, this.refreshTime * 1000)
+  }
+
+  // 轮播
+  startSwiper(){
+    let _this = this;
+    setTimeout(() => {
+      // this.mySwiper && this.mySwiper.destroy();
+      if(this.mySwiper){
+        this.mySwiper.loopDestroy()
+        this.mySwiper.loopCreate()
+        return;
+      }
+      this.mySwiper = new Swiper('#mySwiper', {
+        autoplay: {
+          delay: this.screenCuttingTime * 1000,
+          stopOnLastSlide: false,
+          disableOnInteraction: false,
+        },
+        observer: true, //修改swiper自己或子元素时，自动初始化swiper
+        observeParents: true, //修改swiper的父元素时，自动初始化swiper
+        loop: true,
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true, //轮播按钮支持点击
+        },
+        on: {
+          slideChangeTransitionEnd: function(swiper) {
+            _this.activeIndex = swiper.realIndex;
+            console.log(swiper, _this.activeIndex)
+          },
+        },
+      });
+    }, 0)
+  }
+
+  // 获取列表数据
+  getList(){
+    let maskFlag = this.message.loading("加载中", { nzDuration: 0 }).messageId;
+    this.mainService.listMsgByMain('reserveView', {
+      taskTypeId: this.tasktype
+    }).subscribe((result: any) => {
+      this.message.remove(maskFlag);
+      const data = result.data || {};
+      console.log(data);
+      if(result.state == 200){
+        if(Object.keys(data).length > 0){
+          // 楼栋-楼层-科室-工单 转成前端可用的 楼栋-科室-工单
+          let buildings = Object.keys(data)
+          .map(v => ({
+            id: v,
+            name: Object.values(Object.values(data[v])[0])[0][0][3],
+            departments: (
+              Object.values(data[v]).map(vv => Object.keys(vv).map(vvv => ({id: vvv, name: vv[vvv][0][6], orders: vv[vvv], checked: false, isDisabled: vv[vvv].every(vvvv => !(vvvv[12] == 2 || (!vvvv[8] && vvvv[12] != 2 && vvvv[12] != 6 && vvvv[12] != 7 && vvvv[12] != 11)))}))) as any
+            ).flat()
+          }));
+          console.log(buildings);
+          let oItemH = 80;
+          let oBodyH = window.innerHeight - 289;
+          let n = Math.floor(oBodyH / oItemH); //有效个数
+          if(buildings.length){
+            let arr = [];
+            buildings.forEach(v => {
+              let item = chunk(v.departments, n).map(vv => ({id: v.id, name: v.name, departments: vv}));
+              arr.push(item);
+            })
+            arr = chunk((arr as any).flat(), 4);
+            let m = arr[arr.length - 1].length;
+            for (let index = 0; index < 4 - m; index++) {
+              arr[arr.length - 1].push({});
+            }
+            this.buildings = arr;
+            console.log(this.buildings);
+            this.startSwiper();
+            this.startGetList();
+          }else{
+            this.buildings = [];
+          }
+        }else{
+          this.buildings = [];
+        }
+      }else{
+        this.buildings = [];
+      }
+    })
+  }
+
+  // 获取其他临床服务
+  getOtherTasktype(keyword?) {
+    let postData: any = {
+      idx: 0,
+      sum: 10,
+      taskType: {
+        hosId: {id: this.hosId},
+        taskName: keyword,
+        simpleQuery: true,
+        associationType: {key: "association_types", value: "other"},
+      },
+    };
+    return this.mainService
+      .getFetchDataList("configuration", "taskType", postData)
+      .toPromise();
+  }
+
+  //其他临床服务任务类型
+  onSearchOtherTaskType(e){
+    this.searchLoading = true;
+    this.onSearchOtherTaskTypeSubject.next(e);
+  }
+
+  // 确定
+  saveScreen(){
+    if(!this.tasktype || !this.refreshTime || !this.screenCuttingTime){
+      this.message.info('请填写必选项！');
+      return;
+    }
+    this.taskTypeName = this.taskTypeList.find(v => v.id == this.tasktype).taskName;
+    this.isMask = false;
+    this.getList();
+  }
+}

src/app/views/disinfection-supply/disinfection-supply.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DisinfectionSupplyRoutingModule } from './disinfection-supply-routing.module';
+import { DisinfectionSupplyComponent } from './disinfection-supply.component';
+import { ShareModule } from 'src/app/share/share.module';
+
+
+@NgModule({
+  declarations: [DisinfectionSupplyComponent],
+  imports: [
+    CommonModule,
+    DisinfectionSupplyRoutingModule,
+    ShareModule,
+  ]
+})
+export class DisinfectionSupplyModule { }

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

@@ -42,6 +42,7 @@
           <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="disinfectionSupplyRole" (click)="toDisinfectionSupply()">全局业务查看</button>
         </div>
         <div class="right">
           <div class="msg">

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

@@ -29,6 +29,7 @@ export class MainComponent implements OnInit {
   largeScreenRole2: boolean = false; //大屏端权限
   specimenViewRole: boolean = false; //业务视图权限
   specimenViewRole2: boolean = false; //标本视图权限
+  disinfectionSupplyRole: boolean = false; //全局业务查看权限
   @ViewChild("osComponentRef1", {
     read: OverlayScrollbarsComponent,
     static: false,
@@ -125,6 +126,10 @@ export class MainComponent implements OnInit {
         this.specimenViewRole2 = true;
         console.log("标本视图权限");
       }
+      if (e.link == "disinfectionSupply") {
+        this.disinfectionSupplyRole = true;
+        console.log("全局业务查看权限");
+      }
       if (!e.link) {
         arr.push(e);
       }
@@ -232,6 +237,10 @@ export class MainComponent implements OnInit {
   toSpecimenView2(): void {
     this.router.navigateByUrl("specimenView2");
   }
+  // 全局业务查看
+  toDisinfectionSupply(): void {
+    this.router.navigateByUrl("disinfectionSupply");
+  }
   // 大屏端或视图端
   screenType;
   hosFlag = false;

tsconfig.app.json

@@ -2,7 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": []
+    "types": ["swiper"]
   },
   "include": [
     "src/**/*.ts"