Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
952 lines (583 loc) · 127 KB
/
Copy pathindex.html
File metadata and controls
952 lines (583 loc) · 127 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.1.1">
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
<link rel="mask-icon" href="/images/logo.svg" color="#222">
<link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">
<script id="hexo-configurations">
var NexT = window.NexT || {};
var CONFIG = {"hostname":"example.com","root":"/","scheme":"Pisces","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
</script>
<meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://example.com/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="HlgdB">
<meta name="twitter:card" content="summary">
<link rel="canonical" href="http://example.com/">
<script id="page-configurations">
// https://hexo.io/docs/variables.html
CONFIG.page = {
sidebar: "",
isHome : true,
isPost : false,
lang : 'en'
};
</script>
<title>Hexo</title>
<noscript>
<style>
.use-motion .brand,
.use-motion .menu-item,
.sidebar-inner,
.use-motion .post-block,
.use-motion .pagination,
.use-motion .comments,
.use-motion .post-header,
.use-motion .post-body,
.use-motion .collection-header { opacity: initial; }
.use-motion .site-title,
.use-motion .site-subtitle {
opacity: initial;
top: initial;
}
.use-motion .logo-line-before i { left: initial; }
.use-motion .logo-line-after i { right: initial; }
</style>
</noscript>
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<div class="container use-motion">
<div class="headband"></div>
<header class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"><div class="site-brand-container">
<div class="site-nav-toggle">
<div class="toggle" aria-label="Toggle navigation bar">
<span class="toggle-line toggle-line-first"></span>
<span class="toggle-line toggle-line-middle"></span>
<span class="toggle-line toggle-line-last"></span>
</div>
</div>
<div class="site-meta">
<a href="/" class="brand" rel="start">
<span class="logo-line-before"><i></i></span>
<h1 class="site-title">Hexo</h1>
<span class="logo-line-after"><i></i></span>
</a>
</div>
<div class="site-nav-right">
<div class="toggle popup-trigger">
</div>
</div>
</div>
<nav class="site-nav">
<ul id="menu" class="main-menu menu">
<li class="menu-item menu-item-home">
<a href="/" rel="section"><i class="fa fa-home fa-fw"></i>Home</a>
</li>
<li class="menu-item menu-item-archives">
<a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="back-to-top">
<i class="fa fa-arrow-up"></i>
<span>0%</span>
</div>
<main class="main">
<div class="main-inner">
<div class="content-wrap">
<div class="content index posts-expand">
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="http://example.com/2021/02/04/%E5%90%88%E6%88%90%E5%A4%A7%E8%A5%BF%E7%93%9C%E9%AD%94%E6%94%B9%E8%AE%B0%E5%BD%95/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="HlgdB">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Hexo">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2021/02/04/%E5%90%88%E6%88%90%E5%A4%A7%E8%A5%BF%E7%93%9C%E9%AD%94%E6%94%B9%E8%AE%B0%E5%BD%95/" class="post-title-link" itemprop="url">合成大西瓜魔改记录</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2021-02-04 12:58:35 / Modified: 13:43:45" itemprop="dateCreated datePublished" datetime="2021-02-04T12:58:35+08:00">2021-02-04</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>这网页小游戏刚开始的时候就想自己找找找魔改试一下,然后比较忙就一直搁置了,昨晚有个沙雕让我帮忙魔改一下,我就想着试试。</p>
<h1 id="找源码,确定修改方法"><a href="#找源码,确定修改方法" class="headerlink" title="找源码,确定修改方法"></a>找源码,确定修改方法</h1><p>这个简单得hin,源码和教程网上一搜一大堆,不过我找了个比较良心的,网址在这</p>
<p><a target="_blank" rel="noopener" href="https://juejin.cn/post/6923047027475644430#heading-5">https://juejin.cn/post/6923047027475644430#heading-5</a></p>
<p>找到教程之后就可以冻手了。过一遍教程发现和我原来想的差不多,基本上就是ctrl F找到对应功能然后魔改,图片就是找到对应的图片存储路径,把自己要用的改成一模一样尺寸,名称的然后替换掉就可以。一共需要11张照片,然后对应的文件位置都有说,看教程可以知道,图片文件名的前两个字就是所在文件夹的名字,这点是个伏笔,等下可以用到。然后还有个点要注意,用到的图片都得裁成圆形记得,不然就会变成合成大正方形==。</p>
<p>好,现在可以确定基本思路了,我需要写一份python代码,将一个文件夹中的11份图片,先调整成和要替换的水果图片一样大小的尺寸,然后在不改变尺寸的基础上,将图片裁剪成圆形,最后将处理好的图片重命名好,输出到对应的位置替换掉原来的图片,一个换壳的游戏就有了。</p>
<h1 id="python代码"><a href="#python代码" class="headerlink" title="python代码"></a>python代码</h1><p>这玩意肯定得用到PIL,上网查查怎么用PIL将图片调整尺寸,get一份代码</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">infile = <span class="string">'#源文件路径#'</span></span><br><span class="line">outfile = <span class="string">'#输出路径#'</span></span><br><span class="line">im = Image.open(infile)</span><br><span class="line">(x,y) = im.size <span class="comment">#read image size</span></span><br><span class="line">x_s = <span class="number">250</span> <span class="comment">#define standard width</span></span><br><span class="line">y_s = y * x_s / x <span class="comment">#calc height based on standard width</span></span><br><span class="line">out = im.resize((x_s,y_s),Image.ANTIALIAS) <span class="comment">#resize image with high-quality</span></span><br><span class="line">out.save(outfile)</span><br><span class="line"></span><br><span class="line"><span class="keyword">print</span> <span class="string">'original size: '</span>,x,y</span><br><span class="line"><span class="keyword">print</span> <span class="string">'adjust size: '</span>,x_s,y_s</span><br></pre></td></tr></table></figure>
<p>然后搜一下怎么把图片调整成圆形(我就是面向搜索引擎编程程序员,</p>
<figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#圆形头像</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">circle</span>(<span class="params">img_path</span>):</span></span><br><span class="line"> path_name = os.path.dirname(img_path)</span><br><span class="line"> cir_file_name = <span class="string">'cir_img.png'</span></span><br><span class="line"> cir_path = path_name + <span class="string">'/'</span> + cir_file_name</span><br><span class="line"> ima = Image.open(img_path).convert(<span class="string">"RGBA"</span>)</span><br><span class="line"> size = ima.size</span><br><span class="line"> print(size)</span><br><span class="line"> <span class="comment"># 因为是要圆形,所以需要正方形的图片</span></span><br><span class="line"> r2 = min(size[<span class="number">0</span>], size[<span class="number">1</span>])</span><br><span class="line"> <span class="keyword">if</span> size[<span class="number">0</span>] != size[<span class="number">1</span>]:</span><br><span class="line"> ima = ima.resize((r2, r2), Image.ANTIALIAS)</span><br><span class="line"> <span class="comment"># 最后生成圆的半径</span></span><br><span class="line"> r3 = int(r2/<span class="number">2</span>)</span><br><span class="line"> imb = Image.new(<span class="string">'RGBA'</span>, (r3*<span class="number">2</span>, r3*<span class="number">2</span>),(<span class="number">255</span>,<span class="number">255</span>,<span class="number">255</span>,<span class="number">0</span>))</span><br><span class="line"> pima = ima.load() <span class="comment"># 像素的访问对象</span></span><br><span class="line"> pimb = imb.load()</span><br><span class="line"> r = float(r2/<span class="number">2</span>) <span class="comment">#圆心横坐标</span></span><br><span class="line"> </span><br><span class="line"> <span class="keyword">for</span> i <span class="keyword">in</span> range(r2):</span><br><span class="line"> <span class="keyword">for</span> j <span class="keyword">in</span> range(r2):</span><br><span class="line"> lx = abs(i-r) <span class="comment">#到圆心距离的横坐标</span></span><br><span class="line"> ly = abs(j-r)<span class="comment">#到圆心距离的纵坐标</span></span><br><span class="line"> l = (pow(lx,<span class="number">2</span>) + pow(ly,<span class="number">2</span>))** <span class="number">0.5</span> <span class="comment"># 三角函数 半径</span></span><br><span class="line"> <span class="keyword">if</span> l < r3:</span><br><span class="line"> pimb[i-(r-r3),j-(r-r3)] = pima[i,j]</span><br><span class="line"> </span><br><span class="line"> imb.save(cir_path)</span><br><span class="line"> <span class="keyword">return</span> cir_path</span><br></pre></td></tr></table></figure>
<p>好,现在就只需要写个循环处理一下图片就OK,芜湖起飞。</p>
<h1 id="部署"><a href="#部署" class="headerlink" title="部署"></a>部署</h1><p>如果都弄完只能自己本地serve一下在localhost上玩玩那肯定没啥意思,这不装不了b了嘛,本来是想直接放到在做的项目服务器上,但是感觉8太好,因为服务器毕竟不是我买的哈哈哈。然后这又只是个静态网页,网上找找托管网站,github我自个儿这个个人博客网站已经给用了,有没有那种能多搞点的,然后发现最开始那教程推荐的vercel,很不错!</p>
<blockquote>
<p>这个vercel貌似跟腾讯不大对付,这个网站只能用github,gitlab或者Bitbucket如果你的github账号主邮箱是qq邮箱会被拒绝注册,所以我又注册了个网易邮箱用来创建个新的github账号用来搞这个,很烦~</p>
</blockquote>
<p>在vercel官网注册一个账号以后,先到可以在本地用npm或者yarn安装vercel,然后直接终端处理。我是直接在浏览器上弄的,登录之后进dashboard,然后会让你import github的仓库,安装它的引导直接关联你的github,然后你的库就可以直接拉进去了。把本地的文件push到仓库里,然后在vercel上导入,然后deploy,跟着引导一步步走就可以,然后就部署完成了。强烈推荐,界面美观,使用方便,好像免费版都可以支持蛮多个静态网页,然后付费可以开启团队协作功能,除了不支持qq邮箱真的完美。</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="http://example.com/2021/01/30/FUS%E9%9A%8F%E8%AE%BF%E7%B3%BB%E7%BB%9F%E6%80%BB%E7%BB%93/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="HlgdB">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Hexo">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2021/01/30/FUS%E9%9A%8F%E8%AE%BF%E7%B3%BB%E7%BB%9F%E6%80%BB%E7%BB%93/" class="post-title-link" itemprop="url">FUS随访系统总结</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2021-01-30 11:23:39 / Modified: 12:56:17" itemprop="dateCreated datePublished" datetime="2021-01-30T11:23:39+08:00">2021-01-30</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>对随访系统遇到过的难点做一个复习和总结。</p>
<h1 id="实验室检查"><a href="#实验室检查" class="headerlink" title="实验室检查"></a>实验室检查</h1><ol>
<li><p>实验室检查从血常规,血生化到肿瘤标志物,一共有9个表单,其中除了尿常规没有单位这一列,其他的列名都是一样的。所以完全可以只设计一个BasicTable来作为9个检查表单的基本表,然后处理好内部的数据逻辑即可。这样子处理的好处是大大减少了代码量,增加了代码可重用性。但是也有缺点,一个表格要处理9个表单的数据,这个表格的内部数据逻辑处理会特别复杂,会有很多的switch语句,并且model的state肯定也会比较庞大。举个例子,表格的完成按钮肯定是触发一个dispatch,但是根据现在所处的表单的不同,表格的dispatch的type肯定也不一样,所以就要9个不同的表单对应9个不同的提交事件。所以要有一个唯一标识确定现在处于哪个表单,原来是使用tabs来分隔各个表单的,所以将tabs的title作为一个页面的state,传入表格中作为表格的一个参数即可,用这个title来确定处于哪个表单。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">switch</span> (title) {</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'血常规'</span>:</span><br><span class="line"> ...</span><br><span class="line"> <span class="keyword">case</span> <span class="string">'血生化'</span>:</span><br><span class="line"> ...</span><br><span class="line"> ...</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
</li>
<li><p>实验室检查还有一个棘手的组件,临床意义判断这一列,需要有一个单选框,正常或是异常,选择异常后,又要可以弹出5个异常等级单选框。并且甲方给的需求是,可以只选正常或只选异常,并且可以只选异常不选异常等级,选择异常等级后,异常还是要处于被选中状态。我记得当时这个给我造成了蛮大的麻烦。我当时是自己封装了一个IsNormalRadios组件来处理这一列的。因为整个表格是这样封装的</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">Form</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">table</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tbody</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">Form.Item</span>></span></span><br><span class="line"> ...</span><br><span class="line"> <span class="tag"></<span class="name">Form.Item</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">td</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tr</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">tbody</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">table</span>></span></span><br><span class="line"><span class="tag"></<span class="name">Form</span>></span></span><br></pre></td></tr></table></figure>
<p>正常和异常,5个异常等级,肯定是得分开的,也就是要有两个Radios,但是Form.Item里面有2个antd组件用于提交数据就会什么都没有,值传不出的。后来是把正常异常的Radios放到Item外面,然后设置两个state分别来处理两组Radios,因为异常等级这组Radios本来就在Item里,所以不用管,但是正常异常这组Radios如果发生value的改变,就需要添加一个函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">form.setFieldsValue({})</span><br></pre></td></tr></table></figure>
<p>把临床意义判断这个Item的value手动设置一下。同样的,在获取到数据初始化表格的时候,也要用useEffect来初始化这两组Radios的状态。如果value是0,那就标记正常,如果是-1,就仅仅标记异常,如果是其他大于0的,既要标记异常,又要标记异常等级。弹出问题很好解决,也是平时在编码中用得很多的一种方法。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">style={{ <span class="attr">display</span>: state1 === <span class="number">-1</span> ? <span class="string">'block'</span> : <span class="string">'none'</span> }}</span><br></pre></td></tr></table></figure>
</li>
<li><p>loading的处理,因为9个表单对应的model中fetch数据的Effect不同,所以在mapStateToProps里对应的loading也不一样,一共会有九个loading,解决办法就是设置一个state loading,用useEffect在不同的表单把state loading设置成对应的那个,然后用state loading来控制Spin。</p>
</li>
</ol>
<h1 id="其他检查"><a href="#其他检查" class="headerlink" title="其他检查"></a>其他检查</h1><p>这里主要是记录一下对antd的日期组件的处理方法,antd的DatePicker组件直接传的value不是xx-xx-xx这种格式的,而数据库要存只能存这种日期格式,所以在上传数据和获取数据初始化表的时候都要经过处理。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> moment <span class="keyword">from</span> <span class="string">'moment'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 设置表单时</span></span><br><span class="line">form.setFieldsValue({</span><br><span class="line"> ...otherExam,</span><br><span class="line"> ECGDetTime: otherExam.ECGDetTime ? moment(otherExam.ECGDetTime) : <span class="literal">null</span>,</span><br><span class="line"> UCGDetTime: otherExam.UCGDetTime ? moment(otherExam.UCGDetTime) : <span class="literal">null</span>,</span><br><span class="line">});</span><br><span class="line"></span><br><span class="line"><span class="comment">// 提交数据时</span></span><br><span class="line">values.ECGDetTime = values.ECGDetTime ? values.ECGDetTime.format(<span class="string">'YYYY-MM-DD'</span>) : <span class="literal">null</span>;</span><br><span class="line">values.UCGDetTime = values.UCGDetTime ? values.UCGDetTime.format(<span class="string">'YYYY-MM-DD'</span>) : <span class="literal">null</span>;</span><br></pre></td></tr></table></figure>
<h1 id="分子检测"><a href="#分子检测" class="headerlink" title="分子检测"></a>分子检测</h1><ol>
<li><p>封装了一个小组件,某个分子检测为阳性时,要在分子检测的Radios弹出3个组件,分别是这个分子的检测样本,检测方法和检测描述,隐藏和弹出还是用的老方法,这里主要是这个弹出的3个组件设置好包裹的Form.Item的name,不让数据混乱</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">Form.Item</span> <span class="attr">label</span>=<span class="string">"检测样本"</span> <span class="attr">name</span>=<span class="string">{</span>`${<span class="attr">name</span>}<span class="attr">Sam</span>`}></span></span><br><span class="line"> <span class="tag"><<span class="name">Input</span> /></span></span><br><span class="line"><span class="tag"></<span class="name">Form.Item</span>></span></span><br><span class="line"><span class="tag"><<span class="name">Form.Item</span> <span class="attr">label</span>=<span class="string">"检测方法"</span> <span class="attr">name</span>=<span class="string">{</span>`${<span class="attr">name</span>}<span class="attr">DetMed</span>`}></span></span><br><span class="line"> <span class="tag"><<span class="name">Select</span> <span class="attr">style</span>=<span class="string">{{</span> <span class="attr">width:</span> <span class="attr">120</span> }}></span></span><br><span class="line"> <span class="tag"><<span class="name">Option</span> <span class="attr">value</span>=<span class="string">{1}</span>></span>ARMS<span class="tag"></<span class="name">Option</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">Option</span> <span class="attr">value</span>=<span class="string">{2}</span>></span>FISH<span class="tag"></<span class="name">Option</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">Option</span> <span class="attr">value</span>=<span class="string">{3}</span>></span>NGS<span class="tag"></<span class="name">Option</span>></span></span><br><span class="line"> <span class="tag"></<span class="name">Select</span>></span></span><br><span class="line"><span class="tag"></<span class="name">Form.Item</span>></span></span><br><span class="line"><span class="tag"><<span class="name">Form.Item</span> <span class="attr">label</span>=<span class="string">"检测描述"</span> <span class="attr">name</span>=<span class="string">{</span>`${<span class="attr">name</span>}<span class="attr">Desc</span>`}></span></span><br><span class="line"> <span class="tag"><<span class="name">Input</span> /></span></span><br><span class="line"><span class="tag"></<span class="name">Form.Item</span>></span></span><br></pre></td></tr></table></figure>
</li>
<li><p>使用antd的Switch组件来控制其他组件的disabled的状态。</p>
</li>
</ol>
<h1 id="症状体征,副反应,其他检查-影像学检查"><a href="#症状体征,副反应,其他检查-影像学检查" class="headerlink" title="症状体征,副反应,其他检查-影像学检查"></a>症状体征,副反应,其他检查-影像学检查</h1><p>这3个表单有一个共同点,就是都是不定长的,就是可以添加或者删除组数据,但是每一组也就是每一行的数据格式都是一样的,即要用到的组件都是一样的。后面还有一个和这个比较像的随访检查也是这种表单,但是我用了两种不同的处理方式。先说这里的,主要是要确认思路,既然每一行的组件都是一样,那就把行封装成组件,然后按行来渲染组件。后端传过来的数是数组,数组的每一个元素就是一行的数据。这里就要用到一个非常非常好用的函数</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.prototype.map(提供函数)</span><br></pre></td></tr></table></figure>
<p>map方法是创建一个新数组,结果是每个元素调用一次提供的函数后返回的结果。所以map括号中提供的函数可以获得一个参数item,就是数组的元素,我们将封装好的行组件叫做ImageExamRow,给他设置一个参数rowData,用于初始化ImageExamRow中的组件</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span>></span></span><br><span class="line"> {data?.map((item: any) => {</span><br><span class="line"> return item !== undefined ? <span class="tag"><<span class="name">ImageExamRow</span> <span class="attr">rowData</span>=<span class="string">{item}</span> /></span> : null;</span><br><span class="line"> })}</span><br><span class="line"><span class="tag"></<span class="name">div</span>></span></span><br></pre></td></tr></table></figure>
<p>这里的data是后端返回的数组数据。这样就渲染好了每一行,在将这个div用table层层包裹起来。这里不能用一个统一的Form了,因为每一行的组件都是一样的,如果都用一样的Form.item的name那肯定会混乱的,如果都用不同的name那更不行,后端就不方便处理数据了。所以每一行都有单独的Form。</p>
<p>然后设计好newMember函数,就是新建行。我们整个组件有一个state data是用来记录整个表单现在的数据的,肯定是数组形式,新建一行时,我们只需要新建一个格式相同的object,把每个key的value填充成undefined,然后push进这个数组,然后传给后端让后端授予一个id即可。这样state改变了,也会重新渲染一遍表格,添加了新的一行。删除就毋庸赘述了,根据key来删除就可以。</p>
<h1 id="随访信息"><a href="#随访信息" class="headerlink" title="随访信息"></a>随访信息</h1><p>前面提到的,随访信息也是和前面比较一样的数据格式,数组而不是一个对象了。但是前面的我都是用原生的table自己封装的组件,但是这个随访信息有点点不一样,它每一行得加个序号,这对我原来的那个table来说是个不小的麻烦,因为后端给的数据中,key值并不是按顺序来的。跟数据库有关系,数据库删除一行后,并不会保留这一行的序号,再添加就是直接跳过往后添加了。所以我尝试用antd 的Table来处理。</p>
<p>我感觉antd的Table和我自己封装的组件就是两种完全不同的处理方式,我是以行为单位,设计好行组件,再用map函数渲染每一行。而antd的Table则是以列为单位,在Table的参数columns中设计好每一列的处理和渲染。columns主要是设计好render这个key,render对应的value是一个函数,返回值必须是jsx组件,淡然如果不需要处理直接返回(JSX)这样也可以。如果用函数的话,这里提供了一系列参数,text,record和index。text是文本,有时候提供的数据就是纯文本的话,直接用text渲染就行。record是Table的另一个参数dataSource数据数组提供给每一列的数据,这里定位到每一列是通过key来定位的。index就是我需要的,序号,不过index是从0开始的,用作序号的话要记得加一。</p>
<p>了解这些基本信息后,就可以设计好每一列了。这里有个巨坑,初始化antd的组件时,一定要拿数据设置value这个参数而不是去设置defaultValue参数,不然的话你删除的时候,删除一行,已经删除的那一行数据会直接往上填充,也就是删除的行数据会代替它原来上一行的数据。然后新增和删除倒是和另一种处理方法比较像,然后这里因为没有用Form包裹,所以要获得每一个组件的value只能使用onChange,就是只要组件的value发生改变就要记录一次,记录到自己定义的数组里就可以,最后用于提交。但是你定义的那个用于记录和提交的数组不能设置成state,不然会陷入更改刷新的循环,就用const定义就可以。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> columns = [</span><br><span class="line"> {</span><br><span class="line"> title: <span class="string">'序号'</span>,</span><br><span class="line"> dataIndex: <span class="string">'key'</span>,</span><br><span class="line"> key: <span class="string">'key'</span>,</span><br><span class="line"> align: <span class="string">'center'</span>,</span><br><span class="line"> width: <span class="number">80</span>,</span><br><span class="line"> render: <span class="function">(<span class="params">text: any, record: any, index: any</span>) =></span> {</span><br><span class="line"> <span class="comment">// console.log(record);</span></span><br><span class="line"> <span class="keyword">return</span> <span class="xml"><span class="tag"><<span class="name">span</span>></span>{index + 1}<span class="tag"></<span class="name">span</span>></span></span>;</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> title: <span class="string">'随访日期'</span>,</span><br><span class="line"> dataIndex: <span class="string">'date'</span>,</span><br><span class="line"> key: <span class="string">'date'</span>,</span><br><span class="line"> align: <span class="string">'center'</span>,</span><br><span class="line"> width: <span class="number">175</span>,</span><br><span class="line"> render: <span class="function">(<span class="params">text: any, record: any</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <DateGrid</span><br><span class="line"> value={record.date ? moment(record.date, <span class="string">'YYYY-MM-DD'</span>) : <span class="literal">undefined</span>}</span><br><span class="line"> id={record.id}</span><br><span class="line"> name=<span class="string">"date"</span></span><br><span class="line"> /></span><br><span class="line"> );</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> title: <span class="string">'随访方式'</span>,</span><br><span class="line"> dataIndex: <span class="string">'folMet'</span>,</span><br><span class="line"> key: <span class="string">'folMet'</span>,</span><br><span class="line"> align: <span class="string">'center'</span>,</span><br><span class="line"> width: <span class="number">175</span>,</span><br><span class="line"> render: <span class="function">(<span class="params">text: any, record: any</span>) =></span> {</span><br><span class="line"> <span class="comment">// console.log('record.folMet', record.folMet);</span></span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <SelectGrid</span><br><span class="line"> options={fw_Options}</span><br><span class="line"> value={record.folMet ? record.folMet : <span class="literal">null</span>}</span><br><span class="line"> id={record.id}</span><br><span class="line"> name=<span class="string">"folMet"</span></span><br><span class="line"> /></span><br><span class="line"> );</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> title: <span class="string">'疗效评估'</span>,</span><br><span class="line"> dataIndex: <span class="string">'effEva'</span>,</span><br><span class="line"> key: <span class="string">'effEva'</span>,</span><br><span class="line"> align: <span class="string">'center'</span>,</span><br><span class="line"> width: <span class="number">175</span>,</span><br><span class="line"> render: <span class="function">(<span class="params">text: any, record: any</span>) =></span> (</span><br><span class="line"> <SelectGrid</span><br><span class="line"> options={re_Options}</span><br><span class="line"> value={record.effEva ? record.effEva : <span class="literal">undefined</span>}</span><br><span class="line"> id={record.id}</span><br><span class="line"> name=<span class="string">"effEva"</span></span><br><span class="line"> /></span><br><span class="line"> ),</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> title: <span class="string">'生存状态'</span>,</span><br><span class="line"> dataIndex: <span class="string">'livSta'</span>,</span><br><span class="line"> key: <span class="string">'livSta'</span>,</span><br><span class="line"> align: <span class="string">'center'</span>,</span><br><span class="line"> width: <span class="number">175</span>,</span><br><span class="line"> render: <span class="function">(<span class="params">text: any, record: any</span>) =></span> (</span><br><span class="line"> <></span><br><span class="line"> <SelectGrid</span><br><span class="line"> value={record.livSta ? record.livSta : <span class="literal">undefined</span>}</span><br><span class="line"> options={ls_Options}</span><br><span class="line"> id={record.id}</span><br><span class="line"> name=<span class="string">"livSta"</span></span><br><span class="line"> dieDate={record.dieDate}</span><br><span class="line"> /></span><br><span class="line"> </></span><br><span class="line"> ),</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> title: <span class="string">'影像类型'</span>,</span><br><span class="line"> dataIndex: <span class="string">'imaFilType'</span>,</span><br><span class="line"> key: <span class="string">'imaFilType'</span>,</span><br><span class="line"> align: <span class="string">'center'</span>,</span><br><span class="line"> width: <span class="number">175</span>,</span><br><span class="line"> render: <span class="function">(<span class="params">text: any, record: any</span>) =></span> (</span><br><span class="line"> <SelectGrid</span><br><span class="line"> options={it_Options}</span><br><span class="line"> value={record.imaFilType ? record.imaFilType : <span class="literal">undefined</span>}</span><br><span class="line"> id={record.id}</span><br><span class="line"> name=<span class="string">"imaFilType"</span></span><br><span class="line"> /></span><br><span class="line"> ),</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> title: <span class="string">'影像'</span>,</span><br><span class="line"> dataIndex: <span class="string">'savFilPath'</span>,</span><br><span class="line"> key: <span class="string">'savFilPath'</span>,</span><br><span class="line"> align: <span class="string">'center'</span>,</span><br><span class="line"> width: <span class="number">175</span>,</span><br><span class="line"> render: <span class="function">(<span class="params">text: any, record: any</span>) =></span> <span class="xml"><span class="tag"><<span class="name">FileTable</span> <span class="attr">pid</span>=<span class="string">{pid}</span> <span class="attr">folder</span>=<span class="string">"follInfo"</span> <span class="attr">id</span>=<span class="string">{record.id}</span> /></span></span>,</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> title: <span class="string">'备注'</span>,</span><br><span class="line"> dataIndex: <span class="string">'remarks'</span>,</span><br><span class="line"> align: <span class="string">'center'</span>,</span><br><span class="line"> width: <span class="number">190</span>,</span><br><span class="line"> render: <span class="function">(<span class="params">text: any, record: any</span>) =></span> (</span><br><span class="line"> <TextArea</span><br><span class="line"> value={record.remarks ? record.remarks : <span class="literal">undefined</span>}</span><br><span class="line"> onInput={<span class="function">(<span class="params">e</span>) =></span> {</span><br><span class="line"> onChange(record.id, <span class="string">'remarks'</span>, e.target.value);</span><br><span class="line"> }}</span><br><span class="line"> /></span><br><span class="line"> ),</span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> title: <span class="string">'操作'</span>,</span><br><span class="line"> dataIndex: <span class="string">'operation'</span>,</span><br><span class="line"> align: <span class="string">'center'</span>,</span><br><span class="line"> width: <span class="number">80</span>,</span><br><span class="line"> render: <span class="function">(<span class="params">text: any, record: any</span>) =></span></span><br><span class="line"> data.length >= <span class="number">1</span> ? (</span><br><span class="line"> <span></span><br><span class="line"> <Popconfirm title=<span class="string">"确认删除(不可恢复)?"</span> onConfirm={<span class="function">() =></span> handleDelete(record.id)}></span><br><span class="line"> <a>删除</a></span><br><span class="line"> </Popconfirm></span><br><span class="line"> </span></span><br><span class="line"> ) : <span class="literal">null</span>,</span><br><span class="line"> },</span><br><span class="line"> ];</span><br></pre></td></tr></table></figure>
<p>这里的SelectGrid是我自己封装的组件,因为随访信息每一行的组件大部分都是选择框,所以可以设计一个组件封装一下,只要改变一下SelectGrid的props就又是一个新的Select,这个思想跟前面的实验室检查的设计差不多吧。</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="http://example.com/2021/01/25/%E8%AE%B0%E5%BD%95%E4%B8%80%E4%B8%8B%E5%B8%AE%E5%A6%B9%E5%A6%B9%E5%86%99%E7%9A%84%E4%B8%80%E4%B8%AA%E5%AF%92%E5%81%87%E4%BD%9C%E4%B8%9A%E5%B0%8F%E7%BD%91%E9%A1%B5/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="HlgdB">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Hexo">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2021/01/25/%E8%AE%B0%E5%BD%95%E4%B8%80%E4%B8%8B%E5%B8%AE%E5%A6%B9%E5%A6%B9%E5%86%99%E7%9A%84%E4%B8%80%E4%B8%AA%E5%AF%92%E5%81%87%E4%BD%9C%E4%B8%9A%E5%B0%8F%E7%BD%91%E9%A1%B5/" class="post-title-link" itemprop="url">记录一下帮妹妹写的一个寒假作业小网页</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2021-01-25 13:58:33 / Modified: 14:32:33" itemprop="dateCreated datePublished" datetime="2021-01-25T13:58:33+08:00">2021-01-25</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h2 id="前因"><a href="#前因" class="headerlink" title="前因"></a>前因</h2><p>妹妹在念小学二年级,她老师布置了一个寒假作业,要求他们每天要写10个100以内的加减法和5个九九乘除法题目,然后题目自己任意出。妹妹让我帮她每天出题,我就想着给她弄个小网页每天自己上去做题,同时自己也学习一下一些前端知识。</p>
<p>网址:<a target="_blank" rel="noopener" href="http://47.97.152.219:2200/">http://47.97.152.219:2200/</a></p>
<h1 id="响应式设计"><a href="#响应式设计" class="headerlink" title="响应式设计"></a>响应式设计</h1><p>每个题目我用antd的List加Card组件来包裹,因为小孩子肯定手机用的多一些,所以肯定需要做好响应式设计,然后这个响应式也比较简单,我就想着正好学习一些antd的响应式设计。</p>
<h2 id="Grid响应式设计"><a href="#Grid响应式设计" class="headerlink" title="Grid响应式设计"></a>Grid响应式设计</h2><p>antd的栅格组件包括了Row行,和Col列。一般来说每一行Row是分为24个单位,而Col的span属性就是确定这一列在一行的24个单位中可以占据多少个单位。我一开始打算用Grid来设计,所以先看了部分Grid的资料。antd栅格是仿bootstrap的,可以看一下bootstrap对于响应式设计的介绍<a target="_blank" rel="noopener" href="https://getbootstrap.com/docs/3.4/css/%EF%BC%8C%E6%A0%B9%E6%8D%AE%E4%BD%BF%E7%94%A8%E8%AE%BE%E5%A4%87%E7%9A%84%E4%B8%8D%E5%90%8C%EF%BC%8C%E6%A0%B9%E6%8D%AE%E5%B1%8F%E5%B9%95%E5%A4%A7%E5%B0%8F%E5%B0%86%E5%AE%BD%E5%BA%A6%E5%88%86%E6%88%90%E4%BA%866%E4%B8%AA%E5%B0%BA%E5%AF%B8%EF%BC%9Axs">https://getbootstrap.com/docs/3.4/css/,根据使用设备的不同,根据屏幕大小将宽度分成了6个尺寸:xs</a>, sm, md, lg, xl, xxl根据这6个尺寸来设计col的span可以使得在不同的屏幕大小下每一列所占据的行的比例都不同,因为如果是电脑屏幕,你一行可以放置3个组件能够看清楚,但是手机屏幕也许就只能放一个了。下面是antd给出的代码示例:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><Row></span><br><span class="line"> <Col xs={<span class="number">2</span>} sm={<span class="number">4</span>} md={<span class="number">6</span>} lg={<span class="number">8</span>} xl={<span class="number">10</span>}></span><br><span class="line"> Col<span class="number">-1</span></span><br><span class="line"> </Col></span><br><span class="line"> <Col xs={<span class="number">20</span>} sm={<span class="number">16</span>} md={<span class="number">12</span>} lg={<span class="number">8</span>} xl={<span class="number">4</span>}></span><br><span class="line"> Col<span class="number">-2</span></span><br><span class="line"> </Col></span><br><span class="line"> <Col xs={<span class="number">2</span>} sm={<span class="number">4</span>} md={<span class="number">6</span>} lg={<span class="number">8</span>} xl={<span class="number">10</span>}></span><br><span class="line"> Col<span class="number">-3</span></span><br><span class="line"> </Col></span><br><span class="line"></Row></span><br></pre></td></tr></table></figure>
<h2 id="List响应式设计"><a href="#List响应式设计" class="headerlink" title="List响应式设计"></a>List响应式设计</h2><p>List的响应式设计和Grid的区别不大其实,一言以蔽之就是Grid是根据屏幕的大小调整每一列的宽度,而List是根据屏幕的宽度调整每一行可以放几个List.Item,可以把Grid看成更宽泛的List吧。下面是List的代码示例,也是我所用的:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><List</span><br><span class="line"> grid={{</span><br><span class="line"> gutter: <span class="number">16</span>,</span><br><span class="line"> xs: <span class="number">1</span>,</span><br><span class="line"> sm: <span class="number">2</span>,</span><br><span class="line"> md: <span class="number">2</span>,</span><br><span class="line"> lg: <span class="number">3</span>,</span><br><span class="line"> xl: <span class="number">3</span>,</span><br><span class="line"> xxl: <span class="number">4</span>,</span><br><span class="line"> }}</span><br><span class="line"> dataSource={data}</span><br><span class="line"> renderItem={<span class="function"><span class="params">item</span> =></span> (</span><br><span class="line"> <List.Item></span><br><span class="line"> <Card title={item.title}>Card content</Card></span><br><span class="line"> </List.Item></span><br><span class="line"> )}</span><br><span class="line">/>,</span><br></pre></td></tr></table></figure>
<h1 id="踩坑"><a href="#踩坑" class="headerlink" title="踩坑"></a>踩坑</h1><h2 id="宝塔-阿里云部署"><a href="#宝塔-阿里云部署" class="headerlink" title="宝塔+阿里云部署"></a>宝塔+阿里云部署</h2><p>我原来在部署的时候就碰到过这个问题,就是阿里云上已经开放了端口,但是还是不能访问。后来查了一下,是因为ubuntu本身的防火墙没有运行这个端口访问,正确的办法是除了阿里云安全组要添加端口,然后还要远程连接终端,通过指令</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">iptables -I INPUT -p tcp --dport 端口 -j ACCEPT</span><br></pre></td></tr></table></figure>
<p>开放端口,然后</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">iptables-save</span><br></pre></td></tr></table></figure>
<p>保存。一般来说都是自带了iptables的,如果没有那就先安装一个。</p>
<h2 id="Hook-UseState设置数组不刷新问题"><a href="#Hook-UseState设置数组不刷新问题" class="headerlink" title="Hook UseState设置数组不刷新问题"></a>Hook UseState设置数组不刷新问题</h2><p>这个以前也碰到过,就是如果你使用dva也好,useState也好,如果设置了某个state是数组,当你使用useState的时候并不会刷新组件。然后查阅了一些资料,解决方法就是使用slice函数,数组的浅拷贝方法,返回一个新的数组,用这个slice得到的新数组去setState才会引发刷新</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">setArr(arr.slice())</span><br></pre></td></tr></table></figure>
<p>引用一些资料:</p>
<blockquote>
<p>查看文档发现一句话useState里数据务必为immutable (不可赋值的对象)<br>也就是ass component的state也提倡使用immutable数据,但不是强制的,因为只要调用了setState就会触发更新。所以再class组件中没有出现这种问题,或者通过改变为空再赋值是可以触发更新的。<br>但是再使用useState时,如果在更新函数里传入同一个对象时将无法触发更新。<br>于是解决思路就是通过slice() 返回一个新的对象去赋值是解决问题的关键。</p>
</blockquote>
<h2 id="杂七杂八"><a href="#杂七杂八" class="headerlink" title="杂七杂八"></a>杂七杂八</h2><p>在umi build之前记得在配置文件里加一行这个</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">publicPath: <span class="string">'./'</span></span><br></pre></td></tr></table></figure>
<p>设置antd的主题颜色的配置:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">theme: {</span><br><span class="line"> <span class="string">'primary-color'</span>: <span class="string">'#e74c3c'</span>,</span><br><span class="line"> }</span><br></pre></td></tr></table></figure>
<p>JS声明一个长度为10并且全部填充为0的数组:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = <span class="built_in">Array</span>(<span class="number">10</span>).fill(<span class="number">0</span>)</span><br></pre></td></tr></table></figure>
<p>js生成min到max的随机数:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// max - 期望的最大值</span></span><br><span class="line"><span class="comment">// min - 期望的最小值</span></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="built_in">Math</span>.random()*(max-min+<span class="number">1</span>)+min,<span class="number">10</span>);</span><br><span class="line"><span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random()*(max-min+<span class="number">1</span>)+min);</span><br></pre></td></tr></table></figure>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="http://example.com/2021/01/20/canvas-video%E5%AE%9E%E7%8E%B0%E8%A7%86%E9%A2%91%E6%88%AA%E5%9B%BE%E6%80%BB%E7%BB%93/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="HlgdB">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Hexo">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2021/01/20/canvas-video%E5%AE%9E%E7%8E%B0%E8%A7%86%E9%A2%91%E6%88%AA%E5%9B%BE%E6%80%BB%E7%BB%93/" class="post-title-link" itemprop="url">canvas+video实现视频截图总结</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2021-01-20 18:00:22 / Modified: 18:21:04" itemprop="dateCreated datePublished" datetime="2021-01-20T18:00:22+08:00">2021-01-20</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="昨天在写博客上传的时候碰到个坑,简单记录一下"><a href="#昨天在写博客上传的时候碰到个坑,简单记录一下" class="headerlink" title="昨天在写博客上传的时候碰到个坑,简单记录一下"></a>昨天在写博客上传的时候碰到个坑,简单记录一下</h1><p>博客的头部信息要严格按照yaml格式书写,也就是</p>
<blockquote>
<p>xxx: xxxx</p>
</blockquote>
<p>这种格式,冒号后面一定要空一格,不然hexo g就会报错。</p>
<h1 id="canvas-video实现纯前端视频截图"><a href="#canvas-video实现纯前端视频截图" class="headerlink" title="canvas+video实现纯前端视频截图"></a>canvas+video实现纯前端视频截图</h1><p>首先是实现的思路,肯定在播放视频的是有办法获取到视频当前帧的数据的,如果能想办法把当前帧的数据转存为base64,然后在将这个数据作为img组件的src属性,就实现了截图。这个时候就要用到canvas,html5的绘图组件。</p>
<p>先用DOM获取到video组件,然后同样用DOM新建一个canvas组件,使用canvas的函数getContext以及drawImage设置它的上下文如下所示:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">canvas.getContext(<span class="string">'2d'</span>)?.drawImage(video, <span class="number">0</span>, <span class="number">0</span>, canvas.width, canvas.height);</span><br></pre></td></tr></table></figure>
<p>这里的5个参数代表的信息就显而易见,第一个肯定是图片信息,这里的video就是刚刚用DOM获取到的video组件,后两个参数应该是左上角位置,然后就是宽和高。绘制好了canvas后,我们只需要图片不需要用canva的话,使用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">canvas.toDataURL(<span class="string">'image/png'</span>)</span><br></pre></td></tr></table></figure>
<p>把刚刚获取到的帧信息转换为base64信息。我是用的umi+dva,所以我把这个数据就存为这个页面绑定的一个model里的state中的数组中的元素,这个数组暂且叫它screenShots,然后再在页面中使用List将所有截图展示出来,所有截图的base64数据都一一存到screenShots里面了,后面就很简单了,还有就是图片的实际大小不是你展示的img大小,而是你用canvas存数据时设置的那个宽高。</p>
<p>页面组件的源代码记录一下:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { Breadcrumb, Button, Input, List } <span class="keyword">from</span> <span class="string">'antd'</span>;</span><br><span class="line"><span class="keyword">import</span> React, { useEffect } <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="keyword">import</span> { connect } <span class="keyword">from</span> <span class="string">'umi'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> url = <span class="string">'http://vjs.zencdn.net/v/oceans.mp4'</span>;</span><br><span class="line"><span class="keyword">const</span> scale = <span class="number">0.3</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> Index = <span class="function">(<span class="params">props: any</span>) =></span> {</span><br><span class="line"> <span class="keyword">const</span> { videoTool, dispatch } = props;</span><br><span class="line"></span><br><span class="line"> useEffect(<span class="function">() =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(videoTool);</span><br><span class="line"> <span class="keyword">return</span> <span class="function">() =></span> {};</span><br><span class="line"> }, [videoTool]);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> captureImage = <span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">const</span> video = <span class="built_in">document</span>.getElementById(<span class="string">'video'</span>);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> canvas = <span class="built_in">document</span>.createElement(<span class="string">'canvas'</span>);</span><br><span class="line"> canvas.width = <span class="number">640</span> * scale;</span><br><span class="line"> canvas.height = <span class="number">300</span> * scale;</span><br><span class="line"> canvas.getContext(<span class="string">'2d'</span>)?.drawImage(video, <span class="number">0</span>, <span class="number">0</span>, canvas.width, canvas.height);</span><br><span class="line"></span><br><span class="line"> <span class="keyword">const</span> shotsArr = videoTool.screenShots;</span><br><span class="line"> shotsArr.push(canvas.toDataURL(<span class="string">'image/png'</span>));</span><br><span class="line"></span><br><span class="line"> dispatch({</span><br><span class="line"> type: <span class="string">'videoTool/setScreenshots'</span>,</span><br><span class="line"> payload: shotsArr,</span><br><span class="line"> });</span><br><span class="line"> };</span><br><span class="line"></span><br><span class="line"> <span class="keyword">return</span> (</span><br><span class="line"> <div style={{ <span class="attr">width</span>: <span class="string">'100%'</span>, <span class="attr">padding</span>: <span class="number">20</span> }}></span><br><span class="line"> <Breadcrumb style={{ <span class="attr">margin</span>: <span class="string">'16px 0'</span> }}></span><br><span class="line"> <Breadcrumb.Item>活体检测</Breadcrumb.Item></span><br><span class="line"> <Breadcrumb.Item>视频工具</Breadcrumb.Item></span><br><span class="line"> </Breadcrumb></span><br><span class="line"> <div</span><br><span class="line"> id=<span class="string">"header-nav"</span></span><br><span class="line"> style={{</span><br><span class="line"> padding: <span class="number">12</span>,</span><br><span class="line"> <span class="comment">// width: 800,</span></span><br><span class="line"> border: <span class="string">'1px solid #d9d9d9'</span>,</span><br><span class="line"> marginBottom: <span class="number">10</span>,</span><br><span class="line"> backgroundColor: <span class="string">'white'</span>,</span><br><span class="line"> }}</span><br><span class="line"> ></span><br><span class="line"> <Button type=<span class="string">"primary"</span> onClick={captureImage}></span><br><span class="line"> 截图</span><br><span class="line"> </Button></span><br><span class="line"> </div></span><br><span class="line"> <div style={{ <span class="attr">width</span>: <span class="number">640</span>, <span class="attr">height</span>: <span class="number">300</span> }}></span><br><span class="line"> <video id=<span class="string">"video"</span> controls={<span class="literal">true</span>} crossOrigin=<span class="string">"anonymous"</span> width=<span class="string">"100%"</span>></span><br><span class="line"> <source src={url} /></span><br><span class="line"> </video></span><br><span class="line"> </div></span><br><span class="line"></span><br><span class="line"> <div id=<span class="string">"output"</span>></div></span><br><span class="line"> <div style={{ <span class="attr">width</span>: <span class="number">700</span> }}></span><br><span class="line"> <List</span><br><span class="line"> bordered</span><br><span class="line"> split</span><br><span class="line"> header={<span class="xml"><span class="tag"><<span class="name">span</span>></span>全部截图<span class="tag"></<span class="name">span</span>></span></span>}</span><br><span class="line"> dataSource={videoTool?.screenShots}</span><br><span class="line"> <span class="comment">// pagination={{pageSize: 3}}</span></span><br><span class="line"> renderItem={<span class="function">(<span class="params">record: any, index: any</span>) =></span> (</span><br><span class="line"> <List.Item></span><br><span class="line"> <div>{index + <span class="number">1</span>}</div></span><br><span class="line"> <img src={record} height={<span class="number">300</span> * scale} width={<span class="number">640</span> * scale} /></span><br><span class="line"> <Input style={{ <span class="attr">width</span>: <span class="number">300</span> }}></Input></span><br><span class="line"> <Button</span><br><span class="line"> type=<span class="string">"primary"</span></span><br><span class="line"> onClick={<span class="function">() =></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(<span class="string">'index'</span>, index);</span><br><span class="line"> <span class="keyword">const</span> arr = videoTool.screenShots.filter(</span><br><span class="line"> (item: any) => item !== videoTool.screenShots[index],</span><br><span class="line"> );</span><br><span class="line"> dispatch({</span><br><span class="line"> type: <span class="string">'videoTool/setScreenshots'</span>,</span><br><span class="line"> payload: arr,</span><br><span class="line"> });</span><br><span class="line"> }}</span><br><span class="line"> ></span><br><span class="line"> 删除</span><br><span class="line"> </Button></span><br><span class="line"> </List.Item></span><br><span class="line"> )}</span><br><span class="line"> /></span><br><span class="line"> </div></span><br><span class="line"> </div></span><br><span class="line"> );</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> mapStateToProps = <span class="function">(<span class="params">{ videoTool }: { videoTool: any }</span>) =></span> {</span><br><span class="line"> <span class="keyword">return</span> {</span><br><span class="line"> videoTool,</span><br><span class="line"> };</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> connect(mapStateToProps)(Index);</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>最后实现的demo效果:</p>
<p></p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="http://example.com/2021/01/19/umi%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E5%BE%AE%E7%94%9F%E7%89%A9%E9%A1%B9%E7%9B%AE%EF%BC%89/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="HlgdB">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Hexo">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2021/01/19/umi%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E5%BE%AE%E7%94%9F%E7%89%A9%E9%A1%B9%E7%9B%AE%EF%BC%89/" class="post-title-link" itemprop="url">umi学习笔记(微生物项目)</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2021-01-19 21:23:19 / Modified: 22:30:18" itemprop="dateCreated datePublished" datetime="2021-01-19T21:23:19+08:00">2021-01-19</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="踩坑-总结"><a href="#踩坑-总结" class="headerlink" title="踩坑+总结"></a>踩坑+总结</h1><p>今儿碰到一个umi里面的关于dva的坑,写好一个页面组件的props后,用connect绑定这个页面组件和它的props的时候,比如现在有一个BasicLayouts组件和它的mapStateToProps时,一定要把props放前面,组件放后面</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> connect(mapStateToProps)(BasicLayouts);</span><br></pre></td></tr></table></figure>
<p>因为connect连接的顺序决定了获得的参数props有些什么,其实这个坑也帮助我进一步理解了dva的使用,我以前经常纠结于到底是一个组件绑定一个model,又或者是一对多,又或者是多对一。然后我发现其实没有什么这种强制的对应的,在你的mapStateToProps里面,只要你把它写到connect的第一个参数上,它就可以获得所有model的数据。</p>
<p>每一个model可以理解为一个数据仓库,这里回顾一下umi认定的model文件:</p>
<blockquote>
<p>pages页面下的model文件以及src文件夹的models文件夹下的所有文件,文件指的是js和ts</p>
</blockquote>
<p>model的namespace就是他的唯一标识,也就是他在props里的名字,他定义中的state就是你在props获取到的以他的namespace为名的object的键,而值则是通过reducer中的函数来实现定义也只能由reducer来处理,这也就是dva数据传输单向性的确保手段。</p>
<p>这样下来理解dva就很轻松了,model文件是一个个唯一数据仓库,定义了一个个具有唯一名称的全局object。怎么实现唯一名称的呢?通过model定义里的namespace,这个namespace就是这个全局object的名称。怎么实现object型数据的呢,通过state,state中定义了这个全局object的所有键,所以叫state,就是这个model的状态。怎么传输数据到model呢,通过model中的effect,effect中的函数的前一个参数包含了{ payload },payload就是从页面传来的数据,后一个参数有{ put, call },put用于调用同是model中的effect或者reducer,call用于调用service中的函数来调用接口获取数据或者增删改除。怎么改变state呢,通过使用reducer,reducer可以return对象数据,当这个对象的键和state某一个同名,相当于就修改了state了,也就修改了仓库中的数据。最后就是subscription,订阅,订阅其实很简单,就是一个作用(我的理解),当model检测到路由发生变化时,如果进入到了某个页面,就执行一系列操作。</p>
<p>定义好了一个个model后,当你把一个函数放到connect的第一个括号中时,他的props中就包含了所有的model定义的全局object,选择一些需要的进行return。这里有一个值得注意的对象loding,loading.effects[…]包含了所有model的effect的执行状态,常常可以用他来进行一些页面中loading状态的处理。当你把需要的数据return出来后,connect的第二个括号中的数据就可以在他的props里获取到这些第一个括号中return出来的数据了,以及一些dispatch,history这些常用函数。这个就是mvvm的实现,绑定了页面与数据,而不是我原来理解的绑定了一个页面与一个model(虽然大部分情况下确实是这样。</p>
<p>下面一个比较典型的model例子用来帮助记忆理解:</p>
<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> { Effect, Reducer, Subscription } <span class="keyword">from</span> <span class="string">'umi'</span>;</span><br><span class="line"><span class="keyword">import</span> { getUserInfo } <span class="keyword">from</span> <span class="string">'../pages/service'</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">interface</span> IndexModelType {</span><br><span class="line"> <span class="keyword">namespace</span>: <span class="string">'global'</span>;</span><br><span class="line"> state: <span class="built_in">any</span>;</span><br><span class="line"> effects: {</span><br><span class="line"> setPics: Effect;</span><br><span class="line"> getUserInfo: Effect;</span><br><span class="line"> };</span><br><span class="line"> reducers: {</span><br><span class="line"> save: Reducer;</span><br><span class="line"> };</span><br><span class="line"> subscriptions: { setup: Subscription };</span><br><span class="line">}</span><br><span class="line"><span class="keyword">const</span> IndexModel: IndexModelType = {</span><br><span class="line"> <span class="keyword">namespace</span>: <span class="string">'global'</span>,</span><br><span class="line"> state: {</span><br><span class="line"> pics: [],</span><br><span class="line"> userInfo: <span class="literal">undefined</span>,</span><br><span class="line"> },</span><br><span class="line"> effects: {</span><br><span class="line"> *setPics({ payload }, { put }) {</span><br><span class="line"> <span class="keyword">const</span> arr = [];</span><br><span class="line"> arr.push(payload);</span><br><span class="line"> <span class="keyword">yield</span> put({</span><br><span class="line"> <span class="keyword">type</span>: <span class="string">'save'</span>,</span><br><span class="line"> payload: { pics: arr },</span><br><span class="line"> });</span><br><span class="line"> },</span><br><span class="line"> *getUserInfo(action, { put, call }) {</span><br><span class="line"> <span class="keyword">const</span> data = <span class="keyword">yield</span> call(getUserInfo);</span><br><span class="line"> <span class="keyword">yield</span> put({</span><br><span class="line"> <span class="keyword">type</span>: <span class="string">'save'</span>,</span><br><span class="line"> payload: { userInfo: data },</span><br><span class="line"> });</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> reducers: {</span><br><span class="line"> save(state, { payload }) {</span><br><span class="line"> <span class="keyword">return</span> { ...state, ...payload };</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> subscriptions: {</span><br><span class="line"> setup({ dispatch, history }) {</span><br><span class="line"> <span class="keyword">return</span> history.listen(<span class="function">() =></span> {</span><br><span class="line"> dispatch({</span><br><span class="line"> <span class="keyword">type</span>: <span class="string">'getUserInfo'</span>,</span><br><span class="line"> });</span><br><span class="line"> });</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line">};</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> IndexModel;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<p>以上是通过踩坑对dva的总结和理解。</p>
<h1 id="遇到一个有趣的bug"><a href="#遇到一个有趣的bug" class="headerlink" title="遇到一个有趣的bug"></a>遇到一个有趣的bug</h1><p>如果你用pathname来设置Menu的参数defaultSelectedKeys,对了记得keys结尾的参数都是数组,那当你使用Link页面跳转的时候,Menu的所选择项会跟着改变,但是当你用history进行跳转,它就不会改变。</p>
<p>而使用selectedKeys参数来设置就不会出现这种情况。</p>
<h1 id="以前遇到的一个忘记记录的bug"><a href="#以前遇到的一个忘记记录的bug" class="headerlink" title="以前遇到的一个忘记记录的bug"></a>以前遇到的一个忘记记录的bug</h1><p>不能在useEffect的第一个函数参数中写useState的改变state函数然后又在第二个数组参数中写props中的model数据,如果这两个数据是存在相互影响关系并且你在第一个函数中没有加任何限制条件的话这个useEffect的函数参数会陷入死循环执行状态。</p>
<p>继续学习,道阻且长。</p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="http://example.com/2020/09/19/%E9%9A%8F%E8%AE%BF%E7%B3%BB%E7%BB%9F%E7%BC%96%E5%86%99%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="HlgdB">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Hexo">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2020/09/19/%E9%9A%8F%E8%AE%BF%E7%B3%BB%E7%BB%9F%E7%BC%96%E5%86%99%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/" class="post-title-link" itemprop="url">随访系统编写学习记录</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2020-09-19 22:59:05 / Modified: 23:47:58" itemprop="dateCreated datePublished" datetime="2020-09-19T22:59:05+08:00">2020-09-19</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="React代码学习"><a href="#React代码学习" class="headerlink" title="React代码学习"></a>React代码学习</h1><p>一. 一般界面中如果有通过如面包屑这种组件进行导航的,但是页面路由并没有切换的,可以通过将组件分别用tsx文件写好,然后在index中导入,构造一个对象,将每一个面包屑对应的组件在这个对象中一一写好并且和key对应起来,像这样</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> contentListNoTitle = {</span><br><span class="line"> BaseInfo: <span class="xml"><span class="tag"><<span class="name">BaseInfoContent</span> <span class="attr">pid</span>=<span class="string">{pid}</span> /></span></span>,</span><br><span class="line"> PastMedicalHistory: <span class="xml"><span class="tag"><<span class="name">PastMedicalHistory</span> <span class="attr">pid</span>=<span class="string">{pid}</span> /></span></span>,</span><br><span class="line"> OtherExamContent: <span class="xml"><span class="tag"><<span class="name">OtherExamContent</span> <span class="attr">pid</span>=<span class="string">{pid}</span> <span class="attr">treNum</span>=<span class="string">{0}</span> /></span></span>,</span><br><span class="line"> LaboratoryExamContent: <span class="xml"><span class="tag"><<span class="name">LaboratoryExamContent</span> <span class="attr">pid</span>=<span class="string">{pid}</span> <span class="attr">treNum</span>=<span class="string">{0}</span> /></span></span>,</span><br><span class="line"> ImmunohistochemistryContent: <span class="xml"><span class="tag"><<span class="name">ImmunohistochemistryContent</span> <span class="attr">pid</span>=<span class="string">{pid}</span> <span class="attr">treNum</span>=<span class="string">{0}</span> /></span></span>,</span><br><span class="line"> MolecularTestContent: <span class="xml"><span class="tag"><<span class="name">MolecularTestContent</span> <span class="attr">pid</span>=<span class="string">{pid}</span> <span class="attr">treNum</span>=<span class="string">{0}</span> /></span></span></span><br><span class="line"> };</span><br></pre></td></tr></table></figure>
<p>然后在return中<code>{contentListNoTitle[key]}</code>这样写上去,就可以通过切换key来切换页面中的某个组件但是不用切换路由。react一定要有面向对象的思想,把页面中的各部分看成组件,某些很类似的组件可以把不同点抽离出来作为参数,然后写好组件后将参数作为props传入组件内部,实现一个组件重复使用。</p>
<p>二. react要善于利用组件之间props的传递可以省很多事情,还有就是在渲染组件时要善于在各种<></>中间穿插 { } 语句,比如</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">{Object.keys(para).map(key => {</span><br><span class="line"> return (</span><br><span class="line"> <table className={style.row}></span><br><span class="line"> <tr style={{ minHeight: '3rem' }}></span><br><span class="line"> <td style={{ width: '12.5%' }} className={style.grid}></span><br><span class="line"> {key}</span><br><span class="line"> </td></span><br><span class="line"> <td style={{ width: '16.6%' }} className={style.grid}></span><br><span class="line"> {para[key].name}</span><br><span class="line"> </td></span><br><span class="line"> <td style={{ width: '16.6%' }} className={style.grid}></span><br><span class="line"> <Form.Item name={`${para[key].key}_detect_num`}></span><br><span class="line"> <Input style={{ marginTop: '10%', width: '96%' }} autoComplete="off" /></span><br><span class="line"> </Form.Item></span><br><span class="line"> </td></span><br><span class="line"> {title === '尿常规' ? null : (</span><br><span class="line"> <td style={{ width: '8.3%' }} className={style.grid}></span><br><span class="line"> {para[key].unit}</span><br><span class="line"> </td></span><br><span class="line"> )}</span><br><span class="line"> <td style={{ width: '16.7%' }} className={style.grid}></span><br><span class="line"> <Form.Item name={`${para[key].key}_normal`}></span><br><span class="line"> <IsNormalRadios /></span><br><span class="line"> </Form.Item></span><br><span class="line"> </td></span><br><span class="line"> <td style={{ width: '16.7%' }} className={style.grid}></span><br><span class="line"> <Form.Item name={`${para[key].key}_note`}></span><br><span class="line"> <TextArea style={{ marginTop: 20, width: '96%' }} /></span><br><span class="line"> </Form.Item></span><br><span class="line"> </td></span><br><span class="line"> </tr></span><br><span class="line"> </table></span><br><span class="line"> );</span><br><span class="line"> })}</span><br></pre></td></tr></table></figure>
<p>这样的语句,把参数抽离出来作为para对象,然后根据para的每一个键值对用.map语句渲染每一个小单元,.map这个函数在实际编程中作用很大很大,当我们 发现一些组件,是由很多相似或者完全一样的部分组成的,只是每一部分的文字之类的可能有些不一样,但是组成这些部分的组件都是一模一样的,这个时候就 可以用抽象的思想,和上面封装组件一样的,把那些文字之类的不同点抽出类作为一个object或者array,然后在<></>中用如上的语句轻松的渲染组件,代码结 构这样会清晰易懂许多。</p>
<p>所以一定要会利用传参这个功能,组件的props是一个很强大的东西,并且ES6提供的箭头函数,以及React的hook都是给使代码结构清晰简单的好工具,比传 统的React好用很多,必须要善于利用。</p>
<p>三. 一个组件中如果某一部分是因为另一部分的状态发生变化而发生变化时,一定要用组件的 state来控制,因为组件只有在state改变时才会重新渲染,这里要注意,我发现用hook的useState创建一个state时对象时,改变对象内部键值对的某个值并不会引起重新渲染,这时候我的做法是,如果有很多这样的参数需要用一个object作为state,那么肯定可以参考第二点,抽离,寻找参数,封装,然后在封装的新的小组件中肯定就可以用number这类的作为state。React的Hook和ES6的箭头函数是很强大很强大的东西!!!</p>
<p>四. react中尽量用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">import style from './style.css';</span><br><span class="line">...</span><br><span class="line"><... className={style.xxx}><.../></span><br></pre></td></tr></table></figure>
<p>这样的语句来写css,umi中是这样,因为不这样容易引起各种css混乱,就是组件类名相同的时候,这个组件可能用到一个并没有引入的css中的样式去了。</p>
<p>五. 代码中可以用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{ ...(和组件state有关的条件) ? null : <div></div> }</span><br></pre></td></tr></table></figure>
<p>这样的语句来渲染某些可视化收到参数控制的组件,这样写可以省很多代码,并且方便很多,还是上面说的,React的渲染组件语句里面不要就一味的写<></>,多用 </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">{ xxx.map(item => {</span><br><span class="line"> return(</span><br><span class="line"> ...</span><br><span class="line"> )</span><br><span class="line">})</span><br></pre></td></tr></table></figure>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">{ ...(和组件state有关的条件) ? null : <div></div> }</span><br></pre></td></tr></table></figure>
<p>可以省不少事。</p>
<p>六. React一定要有面向对象思想!!!面向对象!!!</p>
<h1 id="Antd组件学习"><a href="#Antd组件学习" class="headerlink" title="Antd组件学习"></a>Antd组件学习</h1><p>这段时间主要是用了antd的Form以及Form.Item,真的是一个特别强大的组件,善于将表单的各部分分好部分,然后就用Form.Item一个个装好,Form.Item的name参数就是用来给Form最后提交的json格式的数据当key用的,所以name这个参数要设置好。然后样式可以用wrapperCol,labelCol这些Form的参数来设置,此外Form有一个onFinish参数,这个参数是一个函数,原来不懂怎么用,只用在表单中设置一个按钮,按钮的htmlType参数设置成“submit”,点击这个按钮就会触发Form的onFinish函数了,onFinish这个函数带的参数e,我console.log后发现就是Form的各个Form.Item的 name,和Form.Item里的组件的值组成的键值对的集合,相当于把整个Form都给整理的明明白白的,瑞斯拜!属实好用!</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br></pre></td><td class="code"><pre><span class="line"><></span><br><span class="line"> <Form</span><br><span class="line"> name="molecularTest"</span><br><span class="line"> labelAlign='left'</span><br><span class="line"> labelCol={{ span: 2 }}</span><br><span class="line"> wrapperCol={{ span: 8 }}</span><br><span class="line"> onFinish={e => {</span><br><span class="line"> console.log(e);</span><br><span class="line"> }}</span><br><span class="line"> ></span><br><span class="line"> {</span><br><span class="line"> radio_props.map(item => {</span><br><span class="line"> return (</span><br><span class="line"> <MolecularRadios name={item} /></span><br><span class="line"> )</span><br><span class="line"> })</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> <Form.Item name="MSI" label="MSI"></span><br><span class="line"> <Radio.Group></span><br><span class="line"> <Radio value={0}>MSS</Radio></span><br><span class="line"> <Radio value={1}>MSIH</Radio></span><br><span class="line"> <Radio value={2}>MSIL</Radio></span><br><span class="line"> </Radio.Group></span><br><span class="line"> </Form.Item></span><br><span class="line"></span><br><span class="line"> <Form.Item label="PD-L1表达"></span><br><span class="line"> <Switch</span><br><span class="line"> checkedChildren="已检测"</span><br><span class="line"> unCheckedChildren="未检测"</span><br><span class="line"> defaultChecked</span><br><span class="line"> onChange={checked => {</span><br><span class="line"> SetPD_L1checked( !checked );</span><br><span class="line"> }}</span><br><span class="line"> /></span><br><span class="line"> <Form.Item name="PD-L1"></span><br><span class="line"> <InputNumber </span><br><span class="line"> style={{ width: '100%', textAlign: 'center', marginTop: 15 }} </span><br><span class="line"> placeholder="请输入数值" </span><br><span class="line"> disabled={PD_L1checked}</span><br><span class="line"> min={0}</span><br><span class="line"> max={100}</span><br><span class="line"> formatter={value => `${value}%`}</span><br><span class="line"> parser={ value => value.replace('%', '')}</span><br><span class="line"> /></span><br><span class="line"> </Form.Item></span><br><span class="line"> <Form.Item name="antibody" label="抗体"></span><br><span class="line"> <Input disabled={PD_L1checked} /></span><br><span class="line"> </Form.Item></span><br><span class="line"> </Form.Item></span><br><span class="line"></span><br><span class="line"> <Form.Item label="TMB(/Mb)" style={{marginTop: -15}}></span><br><span class="line"> <Switch</span><br><span class="line"> checkedChildren="已检测"</span><br><span class="line"> unCheckedChildren="未检测"</span><br><span class="line"> defaultChecked</span><br><span class="line"> onChange={checked => {</span><br><span class="line"> SetTMBchecked( !checked );</span><br><span class="line"> }}</span><br><span class="line"> /></span><br><span class="line"> <Form.Item name="TMB_num"></span><br><span class="line"> <InputNumber </span><br><span class="line"> min={0}</span><br><span class="line"> style={{ width: '100%', textAlign: 'center', marginTop: 10 }} </span><br><span class="line"> placeholder="请输入数值" </span><br><span class="line"> disabled={TMBchecked} </span><br><span class="line"> /></span><br><span class="line"> </Form.Item> </span><br><span class="line"> </Form.Item></span><br><span class="line"></span><br><span class="line"> <Form.Item label="上传" name="uplaod" style={{marginTop: -15}}></span><br><span class="line"> <Upload {...upload_props}></span><br><span class="line"> <Button icon={<UploadOutlined />}>上传报告</Button></span><br><span class="line"> </Upload></span><br><span class="line"> </Form.Item></span><br><span class="line"></span><br><span class="line"> <Form.Item></span><br><span class="line"> <Button type="primary" htmlType="submit"></span><br><span class="line"> 保存</span><br><span class="line"> </Button></span><br><span class="line"> </Form.Item></span><br><span class="line"> </Form></span><br><span class="line"> </></span><br></pre></td></tr></table></figure>
<p>随便选一些单选框,填一些数据点击上传后控制台打印:</p>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">ALK: 1</span><br><span class="line">BIM: 2</span><br><span class="line">BIMDesc: "123"</span><br><span class="line">BIMSam: "123"</span><br><span class="line">BIMTestMed: 2</span><br><span class="line">BRAF: 0</span><br><span class="line">EGFR: 1</span><br><span class="line">HER_2: 1</span><br><span class="line">KRAS: 0</span><br><span class="line">MSI: 1</span><br><span class="line">PD-L1: 10</span><br><span class="line">PIK3CA: 1</span><br><span class="line">RET: 0</span><br><span class="line">ROS1: 0</span><br><span class="line">TMB_num: 4</span><br><span class="line">UGT1A1: 2</span><br><span class="line">UGT1A1Desc: "111"</span><br><span class="line">UGT1A1Sam: "111"</span><br><span class="line">UGT1A1TestMed: 1</span><br><span class="line">antibody: "321抗体"</span><br><span class="line">cMET: 1</span><br><span class="line">uplaod: undefined</span><br></pre></td></tr></table></figure>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="http://example.com/2020/09/14/css-animations%E4%BD%BF%E7%94%A8%E8%AE%B0%E5%BD%95/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="HlgdB">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Hexo">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2020/09/14/css-animations%E4%BD%BF%E7%94%A8%E8%AE%B0%E5%BD%95/" class="post-title-link" itemprop="url">css animations使用记录</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2020-09-14 23:15:08" itemprop="dateCreated datePublished" datetime="2020-09-14T23:15:08+08:00">2020-09-14</time>
</span>
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar-check"></i>
</span>
<span class="post-meta-item-text">Edited on</span>
<time title="Modified: 2020-09-15 22:25:46" itemprop="dateModified" datetime="2020-09-15T22:25:46+08:00">2020-09-15</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<h1 id="使用示例"><a href="#使用示例" class="headerlink" title="使用示例"></a>使用示例</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">.loginDiv {</span><br><span class="line"> width: 500px;</span><br><span class="line"> height: 300px;</span><br><span class="line"> padding: 10px 10px;</span><br><span class="line"> padding-top: 180px;</span><br><span class="line"> animation: down 1.2s;</span><br><span class="line"> -webkit-animation: down 1.2s; /* Safari 与 Chrome */</span><br><span class="line"> -moz-animation: down 1.2s; /* Firefox */</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">@keyframes down</span><br><span class="line">{</span><br><span class="line"> from {padding-top: 10px;}</span><br><span class="line"> to {padding-top: 180px;}</span><br><span class="line">}</span><br><span class="line"> </span><br><span class="line">@-webkit-keyframes down /* Safari 与 Chrome */</span><br><span class="line">{</span><br><span class="line"> from {padding-top: 10px;}</span><br><span class="line"> to {padding-top: 180px;}</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">@-moz-keyframes down</span><br><span class="line">{</span><br><span class="line"> from {padding-top: 10px;}</span><br><span class="line"> to {padding-top: 180px;}</span><br><span class="line">}</span><br></pre></td></tr></table></figure>
<p>animation后跟随两个参数,第一个参数代表动画绘制函数(姑且这么理解)的名字,比如这里就是 <strong>down</strong>,然后第二个参数就是动画完成的时间。</p>
<p> -webkit-是safari和chrome的兼容,-moz-是火狐的兼容,还有一个-o-这里省略掉了。</p>
<p>然后是 <code>@keyframe</code> ,后面跟函数名字,大括号里面可以写 <strong>from</strong> ,<strong>to</strong> 也可以写关键帧比如 25%,50%,75%,100%,等等。然后接下来的大括号里写开始结束或者关键帧时的变化的css属性。</p>
<p>animation和用起来比transition方便很多,transition和transform还没太搞明白,光是animation就还有许多属性可以用,但是这个用来制作一些动画属实简单便捷。</p>
<p> <strong>有一个必须要注意的地方,不加其他属性就像我这样写的话,动画结束后,css元素的属性会回到原来指定的状态,比如我指定了 <code>.loginDiv</code>的padding-top是180px,虽然从10px开始动画到180px结束,最后会停在padding-top是180px是因为我一开始就指定了,不指定的话会回到初始状态一般。</strong></p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
<article itemscope itemtype="http://schema.org/Article" class="post-block" lang="en">
<link itemprop="mainEntityOfPage" href="http://example.com/2020/09/13/hello-world/">
<span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
<meta itemprop="image" content="/images/avatar.gif">
<meta itemprop="name" content="HlgdB">
<meta itemprop="description" content="">
</span>
<span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
<meta itemprop="name" content="Hexo">
</span>
<header class="post-header">
<h2 class="post-title" itemprop="name headline">
<a href="/2020/09/13/hello-world/" class="post-title-link" itemprop="url">Hello World</a>
</h2>
<div class="post-meta">
<span class="post-meta-item">
<span class="post-meta-item-icon">
<i class="far fa-calendar"></i>
</span>
<span class="post-meta-item-text">Posted on</span>
<time title="Created: 2020-09-13 22:36:35" itemprop="dateCreated datePublished" datetime="2020-09-13T22:36:35+08:00">2020-09-13</time>
</span>
</div>
</header>
<div class="post-body" itemprop="articleBody">
<p>Welcome to <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a target="_blank" rel="noopener" href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a target="_blank" rel="noopener" href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/writing.html">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/server.html">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/generating.html">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>
</div>
<footer class="post-footer">
<div class="post-eof"></div>
</footer>
</article>
</div>
<script>
window.addEventListener('tabs:register', () => {
let { activeClass } = CONFIG.comments;
if (CONFIG.comments.storage) {
activeClass = localStorage.getItem('comments_active') || activeClass;
}
if (activeClass) {
let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
if (activeTab) {
activeTab.click();
}
}
});
if (CONFIG.comments.storage) {
window.addEventListener('tabs:click', event => {
if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
let commentClass = event.target.classList[1];
localStorage.setItem('comments_active', commentClass);
});
}
</script>
</div>
<div class="toggle sidebar-toggle">
<span class="toggle-line toggle-line-first"></span>
<span class="toggle-line toggle-line-middle"></span>
<span class="toggle-line toggle-line-last"></span>
</div>
<aside class="sidebar">
<div class="sidebar-inner">
<ul class="sidebar-nav motion-element">
<li class="sidebar-nav-toc">
Table of Contents
</li>
<li class="sidebar-nav-overview">
Overview
</li>
</ul>
<!--noindex-->
<div class="post-toc-wrap sidebar-panel">
</div>
<!--/noindex-->
<div class="site-overview-wrap sidebar-panel">
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
<p class="site-author-name" itemprop="name">HlgdB</p>
<div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
<nav class="site-state">
<div class="site-state-item site-state-posts">
<a href="/archives/">
<span class="site-state-item-count">8</span>
<span class="site-state-item-name">posts</span>
</a>
</div>
<div class="site-state-item site-state-tags">
<span class="site-state-item-count">4</span>
<span class="site-state-item-name">tags</span>
</div>
</nav>
</div>
</div>
</div>
</aside>
<div id="sidebar-dimmer"></div>
</div>
</main>
<footer class="footer">
<div class="footer-inner">
<div class="copyright">
©
<span itemprop="copyrightYear">2021</span>
<span class="with-love">
<i class="fa fa-heart"></i>
</span>
<span class="author" itemprop="copyrightHolder">HlgdB</span>
</div>
<div class="powered-by">Powered by <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://pisces.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Pisces</a>
</div>
</div>
</footer>
</div>
<script src="/lib/anime.min.js"></script>
<script src="/lib/velocity/velocity.min.js"></script>
<script src="/lib/velocity/velocity.ui.min.js"></script>
<script src="/js/utils.js"></script>
<script src="/js/motion.js"></script>
<script src="/js/schemes/pisces.js"></script>
<script src="/js/next-boot.js"></script>
</body>
</html>