소스 검색

样式优化

seimin 1 년 전
부모
커밋
3b54249fb9

+ 8 - 24
src/app/views/disinfection-supply/disinfection-supply.component.less

@@ -369,6 +369,7 @@
369
                 overflow: hidden;
369
                 overflow: hidden;
370
                 text-overflow: ellipsis;
370
                 text-overflow: ellipsis;
371
                 white-space: nowrap;
371
                 white-space: nowrap;
372
+                padding: 0 20px;
372
               }
373
               }
373
             }
374
             }
374
           }
375
           }
@@ -388,52 +389,35 @@
388
                 background-color: #02374E;
389
                 background-color: #02374E;
389
               }
390
               }
390
               .item_name{
391
               .item_name{
391
-                flex: 1;
392
+                flex: 56;
393
+                width: 56%;
392
                 font-size: 21px;
394
                 font-size: 21px;
393
                 font-weight: 400;
395
                 font-weight: 400;
394
                 color: #B3ECFD;
396
                 color: #B3ECFD;
395
-                display: flex;
396
-                justify-content: center;
397
-                align-items: center;
397
+                padding: 0 20px;
398
+                line-height: 80px;
398
                 overflow: hidden;
399
                 overflow: hidden;
399
                 text-overflow: ellipsis;
400
                 text-overflow: ellipsis;
400
                 white-space: nowrap;
401
                 white-space: nowrap;
401
-                // word-break: break-all;
402
-                // text-overflow: ellipsis;
403
-                // overflow: hidden;
404
-                // display: -webkit-box;
405
-                // -webkit-box-orient: vertical;
406
-                // -webkit-line-clamp: 2; /* 这里是超出几行省略 */
407
               }
402
               }
408
               .item_description{
403
               .item_description{
409
-                flex: 1;
404
+                flex: 44;
405
+                width: 44%;
410
                 font-size: 17px;
406
                 font-size: 17px;
411
                 font-weight: 300;
407
                 font-weight: 300;
412
                 color: #FFFFFF;
408
                 color: #FFFFFF;
413
                 display: flex;
409
                 display: flex;
414
                 flex-direction: column;
410
                 flex-direction: column;
415
                 justify-content: center;
411
                 justify-content: center;
416
-                align-items: center;
412
+                padding: 0 20px;
417
                 .item_orderInfo{
413
                 .item_orderInfo{
418
-                  width: 100%;
419
                   display: flex;
414
                   display: flex;
420
-                  justify-content: center;
421
                   align-items: center;
415
                   align-items: center;
422
                 }
416
                 }
423
                 .item_remarks{
417
                 .item_remarks{
424
-                  width: 100%;
425
-                  display: flex;
426
-                  justify-content: center;
427
-                  align-items: center;
428
                   overflow: hidden;
418
                   overflow: hidden;
429
                   text-overflow: ellipsis;
419
                   text-overflow: ellipsis;
430
                   white-space: nowrap;
420
                   white-space: nowrap;
431
-                  // word-break: break-all;
432
-                  // text-overflow: ellipsis;
433
-                  // overflow: hidden;
434
-                  // display: -webkit-box;
435
-                  // -webkit-box-orient: vertical;
436
-                  // -webkit-line-clamp: 2; /* 这里是超出几行省略 */
437
                 }
421
                 }
438
               }
422
               }
439
             }
423
             }

+ 18 - 4
src/app/views/disinfection-supply/disinfection-supply.component.ts

@@ -21,8 +21,8 @@ export class DisinfectionSupplyComponent implements OnInit, OnDestroy {
21
   ) { }
21
   ) { }
22
 
22
 
23
   tasktype = null; //任务类型
23
   tasktype = null; //任务类型
24
-  refreshTime: number = 60; //刷新时间
25
-  screenCuttingTime: number = 10; //切屏时间
24
+  refreshTime: number = 6000; //刷新时间
25
+  screenCuttingTime: number = 1000; //切屏时间
26
 
26
 
27
   taskTypeName:string = '';
27
   taskTypeName:string = '';
28
   buildings: any[] = [];
28
   buildings: any[] = [];
@@ -33,14 +33,25 @@ export class DisinfectionSupplyComponent implements OnInit, OnDestroy {
33
   isMask: boolean = true;
33
   isMask: boolean = true;
34
   mySwiper:Swiper;
34
   mySwiper:Swiper;
35
   timer = null;
35
   timer = null;
36
+  resizeTimer = null;
36
   activeIndex: number = 0;
37
   activeIndex: number = 0;
37
 
38
 
38
   ngOnDestroy(){
39
   ngOnDestroy(){
39
     clearTimeout(this.timer);
40
     clearTimeout(this.timer);
41
+    clearTimeout(this.resizeTimer);
40
     this.mySwiper.destroy();
42
     this.mySwiper.destroy();
43
+    window.onresize = null;
41
   }
44
   }
42
 
45
 
43
   ngOnInit() {
46
   ngOnInit() {
47
+    let _this = this;
48
+    window.onresize = function(){
49
+      clearTimeout(_this.resizeTimer);
50
+      _this.resizeTimer = setTimeout(() => {
51
+        !_this.isMask && _this.getList();
52
+      }, 200);
53
+    }
54
+
44
     this.hosId = this.tool.getCurrentHospital().id;
55
     this.hosId = this.tool.getCurrentHospital().id;
45
 
56
 
46
     this.onSearchOtherTaskTypeSubject.pipe(debounceTime(500)).subscribe((v) => {
57
     this.onSearchOtherTaskTypeSubject.pipe(debounceTime(500)).subscribe((v) => {
@@ -127,17 +138,20 @@ export class DisinfectionSupplyComponent implements OnInit, OnDestroy {
127
           }));
138
           }));
128
           console.log(buildings);
139
           console.log(buildings);
129
           let oItemH = 80;
140
           let oItemH = 80;
141
+          let oItemW = 464;
130
           let oBodyH = window.innerHeight - 289;
142
           let oBodyH = window.innerHeight - 289;
143
+          let oBodyW = window.innerWidth - 46;
131
           let n = Math.floor(oBodyH / oItemH); //有效个数
144
           let n = Math.floor(oBodyH / oItemH); //有效个数
145
+          let n_width = Math.floor(oBodyW / oItemW); //有效个数
132
           if(buildings.length){
146
           if(buildings.length){
133
             let arr = [];
147
             let arr = [];
134
             buildings.forEach(v => {
148
             buildings.forEach(v => {
135
               let item = chunk(v.departments, n).map(vv => ({id: v.id, name: v.name, departments: vv}));
149
               let item = chunk(v.departments, n).map(vv => ({id: v.id, name: v.name, departments: vv}));
136
               arr.push(item);
150
               arr.push(item);
137
             })
151
             })
138
-            arr = chunk((arr as any).flat(), 4);
152
+            arr = chunk((arr as any).flat(), n_width);
139
             let m = arr[arr.length - 1].length;
153
             let m = arr[arr.length - 1].length;
140
-            for (let index = 0; index < 4 - m; index++) {
154
+            for (let index = 0; index < n_width - m; index++) {
141
               arr[arr.length - 1].push({});
155
               arr[arr.length - 1].push({});
142
             }
156
             }
143
             this.buildings = arr;
157
             this.buildings = arr;