@dayan_hjm лет назад: 2
Родитель
Сommit
69c87e3859

+ 13 - 11
ReadMe.md

@@ -1,15 +1,18 @@
1
-2023/5/19:
2
-1.项目开发前需要提前安装node.js 和yarn
3
-
4
-# 新一代前端框架
5
-
6
-基于 webpack4 + ES6 + react17 + react-router-dom5 + antd + mobx
7
-
1
+## 运营数据中心大屏.
2
+    基于 webpack4 + ES6 + react17 + react-router-dom5 + antd + mobx
3
+    git: ssh://root@106.52.242.177:2288/dayan/tqv-data-operation-screen.git
4
+
5
+    分支: 
6
+      dev 开发分支
7
+      master 生产环境分支
8
+      feature/... 其他分支为开发分支
8
 ## 使用方法:
9
 ## 使用方法:
9
 
10
 
10
     安装模块:yarn install
11
     安装模块:yarn install
11
     开发模式:npm run dev
12
     开发模式:npm run dev
12
     打包命令:npm run yunxi-dev (生产环境)
13
     打包命令:npm run yunxi-dev (生产环境)
14
+    项目开发前需要提前安装node.js 和yarn
15
+    
13
 
16
 
14
 ## 项目构建结构
17
 ## 项目构建结构
15
 
18
 
@@ -46,10 +49,6 @@ view.jsx 页面文件
46
 src\router\router.js 配置菜单路由
49
 src\router\router.js 配置菜单路由
47
 src\pages\indexed\component\top 顶部导航栏配置
50
 src\pages\indexed\component\top 顶部导航栏配置
48
 
51
 
49
-## 仓库分支
50
-
51
-master 生产环境分支
52
-feature/... 其他分支为开发分支
53
 
52
 
54
 ## 项目打包
53
 ## 项目打包
55
 非集群环境
54
 非集群环境
@@ -57,3 +56,6 @@ feature/... 其他分支为开发分支
57
   生产:npm run yunxi-dev
56
   生产:npm run yunxi-dev
58
 集群环境
57
 集群环境
59
   npm run yunxi-dev-new
58
   npm run yunxi-dev-new
59
+
60
+## 开发注意事项
61
+    ttf文档的引入只能在css文件 或者在index.html  否则无法显示

+ 3 - 4
config/webpack.common.js

@@ -66,14 +66,14 @@ module.exports = {
66
     rules: /* 使用规则 */[
66
     rules: /* 使用规则 */[
67
       // images
67
       // images
68
       {
68
       {
69
-        test: /* 匹配文件 */ /\.jpg|\.jpeg|\.png|\.svg|\.ico/,
69
+        test: /* 匹配文件 */ /\.jpg|\.jpeg|\.png|\.gif|\.svg|\.ico/,
70
         include: [path.resolve(__dirname, "../src"), path.resolve(__dirname, "../public")],
70
         include: [path.resolve(__dirname, "../src"), path.resolve(__dirname, "../public")],
71
         use: /* 使用loader */[{
71
         use: /* 使用loader */[{
72
           loader: "url-loader",
72
           loader: "url-loader",
73
           options: /* 加载器相关的配置项 */ {
73
           options: /* 加载器相关的配置项 */ {
74
             name: 'static/[name].[ext]',
74
             name: 'static/[name].[ext]',
75
             limit: /* <=limit的图片转换成base64 */ 8196,
75
             limit: /* <=limit的图片转换成base64 */ 8196,
76
-            mimetype: "image/jpg|image/png|image/ico",
76
+            mimetype: "image/jpg|image|gif/png|image/ico",
77
             fallback: 'file-loader',
77
             fallback: 'file-loader',
78
             publicPath: '../../' //采用根路径
78
             publicPath: '../../' //采用根路径
79
           },
79
           },
@@ -98,12 +98,11 @@ module.exports = {
98
         use: [{
98
         use: [{
99
           loader: 'file-loader',
99
           loader: 'file-loader',
100
           options: {
100
           options: {
101
-            name: 'static/css/[name].[hash].[ext]',
101
+            name: 'static/[name].[ext]',
102
             publicPath: '../../'
102
             publicPath: '../../'
103
           },
103
           },
104
         }],
104
         }],
105
       },
105
       },
106
-      
107
       // babel
106
       // babel
108
       {
107
       {
109
         test: /\.jsx?$/,
108
         test: /\.jsx?$/,

+ 13 - 3
public/index.html

@@ -3,8 +3,19 @@
3
 
3
 
4
 <head>
4
 <head>
5
   <meta charset="utf-8" />
5
   <meta charset="utf-8" />
6
-  <title><%= htmlWebpackPlugin.options.title %></title>
6
+  <title>
7
+    <%= htmlWebpackPlugin.options.title %>
8
+  </title>
7
   <style>
9
   <style>
10
+    @font-face {
11
+      font-family: 'DingTalkJinBuTi';
12
+      src: url('../src/assets/fonts/DingTalkJinBuTi.ttf');
13
+    }
14
+    @font-face {
15
+      font-family: 'DingTalkSans';
16
+      src: url('../src/assets/fonts/DingTalkSans.ttf');
17
+    }
18
+
8
     .page-loading-warp {
19
     .page-loading-warp {
9
       padding: 98px;
20
       padding: 98px;
10
       display: flex;
21
       display: flex;
@@ -147,7 +158,6 @@
147
         transform: rotate(405deg);
158
         transform: rotate(405deg);
148
       }
159
       }
149
     }
160
     }
150
-
151
   </style>
161
   </style>
152
   <script>
162
   <script>
153
     // 加载HTML图
163
     // 加载HTML图
@@ -183,4 +193,4 @@
183
   <%= htmlWebpackPlugin.options.rootEl %>
193
   <%= htmlWebpackPlugin.options.rootEl %>
184
 </body>
194
 </body>
185
 
195
 
186
-</html>
196
+</html>

+ 5 - 4
src/App/index.less

@@ -1,9 +1,10 @@
1
 @import url("../themes/themes.less");
1
 @import url("../themes/themes.less");
2
 
2
 
3
-// @font-face {
4
-//   font-family: 'PingFangSC-Regular';
5
-//   src: url('../assets/fonts/PingFangSCRegular.ttf');
6
-// }
3
+@font-face {
4
+  font-family: 'PingFangSC-Regular';
5
+  src: url('../assets/fonts/PingFangSCRegular.ttf');
6
+}
7
+
7
 
8
 
8
 // @font-face {
9
 // @font-face {
9
 //   font-family: "DINAlternate-Bold";
10
 //   font-family: "DINAlternate-Bold";

+ 112 - 23
src/assets/css/styleTemplate.less

@@ -2,14 +2,16 @@
2
  * @Author: dayan_hjm 茶百道主题样式
2
  * @Author: dayan_hjm 茶百道主题样式
3
  * @Date: 2022-10-27 10:56:37 
3
  * @Date: 2022-10-27 10:56:37 
4
  * @Last Modified by: dayan_hjm
4
  * @Last Modified by: dayan_hjm
5
- * @Last Modified time: 2023-10-23 11:19:55
5
+ * @Last Modified time: 2023-10-24 17:36:38
6
  */
6
  */
7
 
7
 
8
 @import url("../../themes/themes.less");
8
 @import url("../../themes/themes.less");
9
 
9
 
10
+
10
 :global {
11
 :global {
11
   #app {
12
   #app {
12
     height: inherit;
13
     height: inherit;
14
+    font-family: 'DingTalkJinBuTi',"DingTalkSans";
13
   }
15
   }
14
 
16
 
15
   .hidetip {
17
   .hidetip {
@@ -231,6 +233,28 @@
231
     height: 8%;
233
     height: 8%;
232
     position: unset;
234
     position: unset;
233
 
235
 
236
+    .title_box {
237
+      display: flex;
238
+      align-items: center;
239
+      justify-content: center;
240
+      color: #fff;
241
+      height: 8%;
242
+      width: 100%;
243
+
244
+      >img {
245
+        width: 4em;
246
+        height: 3em;
247
+        padding-right: 1em;
248
+        border-right: 1px solid #3d5271;
249
+        margin-right: 1em;
250
+      }
251
+
252
+      >h1 {
253
+        color: #fff;
254
+        margin: 0;
255
+        font-size: 30px;
256
+      }
257
+    }
234
 
258
 
235
     .controler .ant-dropdown-link {
259
     .controler .ant-dropdown-link {
236
       color: @dy-font;
260
       color: @dy-font;
@@ -331,18 +355,23 @@
331
 
355
 
332
           .topMsg_content {
356
           .topMsg_content {
333
             height: calc(100% - 2em);
357
             height: calc(100% - 2em);
334
-            line-height: 2.8em;
335
-            font-size: 1.8em;
358
+            line-height: 4em;
359
+    font-size: 2em;
336
             color: #69FFDE;
360
             color: #69FFDE;
337
-            font-weight: 700;
338
-            background: url(../imgs/dataVimg/zongChanZhi.png) no-repeat 0 bottom / 100% 54%;
361
+            background: url(../imgs/dataVimg/zongChanZhi.gif) no-repeat 0 bottom / 100% 70%;
339
 
362
 
340
             .topMsg_number_2 {
363
             .topMsg_number_2 {
341
               font-size: 0.8em;
364
               font-size: 0.8em;
365
+              color: #fff;
366
+              font-family: DingTalkJinBuTi;
342
             }
367
             }
343
 
368
 
344
           }
369
           }
345
 
370
 
371
+          .changBg_topMsg_content {
372
+            background: url(../imgs/dataVimg/zongChanZhi2.gif) no-repeat 0 bottom / 100% 70%;
373
+          }
374
+
346
           .msglist {
375
           .msglist {
347
             padding: 16px 0;
376
             padding: 16px 0;
348
 
377
 
@@ -434,7 +463,8 @@
434
           margin-right: 5px;
463
           margin-right: 5px;
435
         }
464
         }
436
       }
465
       }
437
-      .rightContent .bottomContent{
466
+
467
+      .rightContent .bottomContent {
438
         width: 100%;
468
         width: 100%;
439
         height: 28%;
469
         height: 28%;
440
       }
470
       }
@@ -500,9 +530,11 @@
500
         width: 28%;
530
         width: 28%;
501
         height: 88%;
531
         height: 88%;
502
         z-index: 9;
532
         z-index: 9;
503
-        .topMsg_2 .topMsg_content{
533
+
534
+        .topMsg_2 .topMsg_content {
504
           height: 80%;
535
           height: 80%;
505
         }
536
         }
537
+
506
         .topMsg_2,
538
         .topMsg_2,
507
         .topMsg_3,
539
         .topMsg_3,
508
         .topMsg_4 {
540
         .topMsg_4 {
@@ -511,17 +543,48 @@
511
           margin-bottom: 3%;
543
           margin-bottom: 3%;
512
         }
544
         }
513
 
545
 
546
+        .topMsg_3 {
547
+          .topMsg_content {
548
+            height: calc(100% - 2em);
549
+            line-height: 2.8em;
550
+            font-size: 1.8em;
551
+            color: #69FFDE;
552
+            background: url(../imgs/dataVimg/wanchanglv.gif) no-repeat center center / 84% 98%;
553
+            display: flex;
554
+            align-items: center;
555
+            justify-content: center;
556
+
557
+            .topMsg_number_2 {
558
+              font-size: 0.8em;
559
+              color: #fff;
560
+            }
561
+
562
+            .topMsg_number_p {
563
+              font-size: 0.2em;
564
+              line-height: 0em;
565
+              color: #fff;
566
+              font-weight: 100;
567
+              margin-top: -3em;
568
+            }
569
+
570
+          }
571
+
572
+          .changBg_topMsg_content {
573
+            background: url(../imgs/dataVimg/wanchanglv2.gif) no-repeat center center / 84% 98%;
574
+          }
575
+
576
+        }
577
+
514
         .topMsg {
578
         .topMsg {
515
           width: 100%;
579
           width: 100%;
516
           height: 20%;
580
           height: 20%;
517
           margin-bottom: 3%;
581
           margin-bottom: 3%;
518
 
582
 
519
           .topMsg_content {
583
           .topMsg_content {
520
-            height: calc(100% - 2em);
521
-            font-size: 1.8em;
584
+            height: calc(100% - 1em);
585
+            font-size: 2em;
522
             color: #69FFDE;
586
             color: #69FFDE;
523
-            font-weight: 700;
524
-            background: url(../imgs/dataVimg/sunGong.png) 0 0/50% 100%;
587
+            background: url(../imgs/dataVimg/sunGong.gif) no-repeat 48% 0/86% 100%;
525
             text-align: center;
588
             text-align: center;
526
             display: flex;
589
             display: flex;
527
             align-items: center;
590
             align-items: center;
@@ -529,8 +592,6 @@
529
 
592
 
530
             .topMsg_box {
593
             .topMsg_box {
531
               width: 52%;
594
               width: 52%;
532
-              height: 71%;
533
-              background: url(../imgs/dataVimg/sunGongBottom.png) no-repeat 0 0/ 100% 100%;
534
 
595
 
535
               .topMsg_number_p {
596
               .topMsg_number_p {
536
                 font-size: 0.2em;
597
                 font-size: 0.2em;
@@ -546,6 +607,10 @@
546
             }
607
             }
547
           }
608
           }
548
 
609
 
610
+          .changBg_topMsg_content {
611
+            background: url(../imgs/dataVimg/sunGong2.gif) no-repeat 48% 0/86% 100%;
612
+          }
613
+
549
           .icon_c {
614
           .icon_c {
550
             width: 100%;
615
             width: 100%;
551
             display: flex;
616
             display: flex;
@@ -653,9 +718,11 @@
653
             display: flex;
718
             display: flex;
654
             align-items: center;
719
             align-items: center;
655
             justify-content: center;
720
             justify-content: center;
656
-            .eacharView{
721
+
722
+            .eacharView {
657
               justify-content: center;
723
               justify-content: center;
658
             }
724
             }
725
+
659
             #echarts2 {
726
             #echarts2 {
660
               width: 80%;
727
               width: 80%;
661
               height: 75%;
728
               height: 75%;
@@ -665,18 +732,23 @@
665
 
732
 
666
         .center_li {
733
         .center_li {
667
           width: 33%;
734
           width: 33%;
668
-          background: url(../imgs/dataVimg/zongChanZhi.png) no-repeat 0 bottom / 100% 18%;
669
-          height: 70%;
735
+          background: url(../imgs/dataVimg/toplineB.png) no-repeat 0 bottom / 100% 11%;
736
+          height: 60%;
737
+        }
738
+
739
+        .right_li {
740
+          background: url(../imgs/dataVimg/toplineV.png) no-repeat right top / 1px 100%;
670
         }
741
         }
671
 
742
 
672
         .topMsg {
743
         .topMsg {
744
+          background: url(../imgs/dataVimg/toplineleft.png) no-repeat 1.2em 0.2em/ 45px 80%;
745
+          ;
673
           height: 18%;
746
           height: 18%;
674
           color: #69FFDE;
747
           color: #69FFDE;
675
           display: flex;
748
           display: flex;
676
           justify-content: center;
749
           justify-content: center;
677
           flex-wrap: wrap;
750
           flex-wrap: wrap;
678
           font-size: 1.8em;
751
           font-size: 1.8em;
679
-          font-weight: 700;
680
 
752
 
681
           .topMsg_content {
753
           .topMsg_content {
682
             width: 80%;
754
             width: 80%;
@@ -686,18 +758,32 @@
686
 
758
 
687
             .topMsg_line {
759
             .topMsg_line {
688
               width: 100%;
760
               width: 100%;
689
-              height: 0.2em;
690
-              background: #878787;
761
+              height: 0.5em;
762
+              background: url(../imgs/dataVimg/line.gif) no-repeat 50% bottom / 50% 100%;
691
             }
763
             }
692
 
764
 
693
             .topMsg_tip {
765
             .topMsg_tip {
694
-              color: #fff;
695
-              font-size: 0.2em;
766
+              color: #CDF1FF;
767
+              font-size: 0.5em;
696
               font-weight: 100;
768
               font-weight: 100;
769
+              display: block;
770
+              margin-top: 0.3em;
697
             }
771
             }
698
           }
772
           }
699
         }
773
         }
700
 
774
 
775
+        .topMsg2 {
776
+          background: url(../imgs/dataVimg/toplineright.png) no-repeat 98% 35%/ 48px 80%;
777
+          ;
778
+          color: #69FFDE;
779
+          display: flex;
780
+          justify-content: center;
781
+          flex-wrap: wrap;
782
+          font-size: 1.2emem;
783
+          width: 100%;
784
+          height: 100%;
785
+        }
786
+
701
       }
787
       }
702
 
788
 
703
     }
789
     }
@@ -866,17 +952,20 @@
866
   .ant-btn-primary {
952
   .ant-btn-primary {
867
     color: #fff !important;
953
     color: #fff !important;
868
   }
954
   }
869
-  #echarts8{
955
+
956
+  #echarts8 {
870
     width: 50%;
957
     width: 50%;
871
     height: 80%;
958
     height: 80%;
872
   }
959
   }
960
+
873
   #echarts9 {
961
   #echarts9 {
874
     width: 40%;
962
     width: 40%;
875
     height: 80%;
963
     height: 80%;
876
   }
964
   }
877
 
965
 
878
   .leftContent .bottomContent {
966
   .leftContent .bottomContent {
879
-    height: 42%!important;
967
+    height: 42% !important;
968
+
880
     .eacharView {
969
     .eacharView {
881
       display: flex;
970
       display: flex;
882
       align-items: end;
971
       align-items: end;

BIN
src/assets/fonts/DingTalkJinBuTi.ttf


BIN
src/assets/fonts/DingTalkSans.ttf


BIN
src/assets/imgs/dataVImg/line.gif


BIN
src/assets/imgs/dataVImg/logo.png


BIN
src/assets/imgs/dataVImg/sunGong.gif


BIN
src/assets/imgs/dataVImg/sunGong2.gif


BIN
src/assets/imgs/dataVImg/topBg.png


BIN
src/assets/imgs/dataVImg/toplineB.png


BIN
src/assets/imgs/dataVImg/toplineV.png


BIN
src/assets/imgs/dataVImg/toplineleft.png


BIN
src/assets/imgs/dataVImg/toplineright.png


BIN
src/assets/imgs/dataVImg/wanchanglv.gif


BIN
src/assets/imgs/dataVImg/wanchanglv2.gif


BIN
src/assets/imgs/dataVImg/zongChanZhi.gif


BIN
src/assets/imgs/dataVImg/zongChanZhi2.gif


+ 17 - 10
src/pages/frame/component/top/view.jsx

@@ -12,7 +12,7 @@ import {
12
 import { getUnReadMessageNum } from "@apis/personal";
12
 import { getUnReadMessageNum } from "@apis/personal";
13
 import { saveMenu } from "@apis/enter.js";
13
 import { saveMenu } from "@apis/enter.js";
14
 import { getStorageKey } from "@utils/common";
14
 import { getStorageKey } from "@utils/common";
15
-import { timeDiffer,tipsLockStatus,isTimes } from "@utils/util";
15
+import { timeDiffer, tipsLockStatus, isTimes } from "@utils/util";
16
 import {
16
 import {
17
   Dropdown,
17
   Dropdown,
18
   Menu,
18
   Menu,
@@ -472,9 +472,9 @@ export default observer(function (props) {
472
   const handleClick = (e, type, goSonUrl) => {//goSonUrl 跨菜单转跳
472
   const handleClick = (e, type, goSonUrl) => {//goSonUrl 跨菜单转跳
473
     handleClickForUtil(e, type, ((res) => {
473
     handleClickForUtil(e, type, ((res) => {
474
       //处理转跳
474
       //处理转跳
475
-      setTimeout(()=>{
475
+      setTimeout(() => {
476
         history.push(res);
476
         history.push(res);
477
-      },1000)
477
+      }, 1000)
478
     }), goSonUrl)
478
     }), goSonUrl)
479
   };
479
   };
480
 
480
 
@@ -578,13 +578,13 @@ export default observer(function (props) {
578
     //检测是否需要提示重置密码
578
     //检测是否需要提示重置密码
579
     console.log(sessionStorage.getItem("lockStatus") == 1)
579
     console.log(sessionStorage.getItem("lockStatus") == 1)
580
     console.log(sessionStorage.getItem("showLockStatus") == 1)
580
     console.log(sessionStorage.getItem("showLockStatus") == 1)
581
-    if( sessionStorage.getItem("lockStatus") == 1 && sessionStorage.getItem("showLockStatus") == 1 ){
582
-      tipsLockStatus(()=>{
581
+    if (sessionStorage.getItem("lockStatus") == 1 && sessionStorage.getItem("showLockStatus") == 1) {
582
+      tipsLockStatus(() => {
583
         setIsResetVisible(true);
583
         setIsResetVisible(true);
584
       })
584
       })
585
       sessionStorage.setItem("showLockStatus", 2);
585
       sessionStorage.setItem("showLockStatus", 2);
586
-    } 
587
-    
586
+    }
587
+
588
   }, []);
588
   }, []);
589
 
589
 
590
   useEffect(() => {
590
   useEffect(() => {
@@ -592,7 +592,7 @@ export default observer(function (props) {
592
     $store.app.setRef(menuRef);
592
     $store.app.setRef(menuRef);
593
     $store.app.setAvator(sessionStorage.getItem("avator"));
593
     $store.app.setAvator(sessionStorage.getItem("avator"));
594
     if (
594
     if (
595
-      $store.app.activedUrl.indexOf('/home/outer') > -1 || 
595
+      $store.app.activedUrl.indexOf('/home/outer') > -1 ||
596
       $store.app.activedUrl === "/home/report" ||
596
       $store.app.activedUrl === "/home/report" ||
597
       $store.app.activedUrl === "/home/log"
597
       $store.app.activedUrl === "/home/log"
598
     ) {
598
     ) {
@@ -780,8 +780,8 @@ export default observer(function (props) {
780
           }
780
           }
781
         );
781
         );
782
         break;
782
         break;
783
-        default:
784
-          setIsShowDetail(false);
783
+      default:
784
+        setIsShowDetail(false);
785
     }
785
     }
786
 
786
 
787
   };
787
   };
@@ -796,6 +796,13 @@ export default observer(function (props) {
796
   } = detailMessage || {}; /**解构 当前点击的详情数据 */
796
   } = detailMessage || {}; /**解构 当前点击的详情数据 */
797
   return (
797
   return (
798
     <div className={$store.app.styleCommon.theme == 'chaBaiDao' ? [styles.top + ' top'] : styles.top}>
798
     <div className={$store.app.styleCommon.theme == 'chaBaiDao' ? [styles.top + ' top'] : styles.top}>
799
+      <div className="title_box">
800
+        <img
801
+          src={require("@assets/imgs/dataVimg/logo.png").default}
802
+          width="17"
803
+         />
804
+         <h1>运营数据中心</h1>
805
+      </div>
799
       {/* {history.location.pathname === "/home/index" && (
806
       {/* {history.location.pathname === "/home/index" && (
800
         <>
807
         <>
801
           <div className="style">
808
           <div className="style">

+ 1 - 1
src/pages/tqcDataVHome/component/oneQualified.jsx

@@ -2,7 +2,7 @@
2
  * @Author: dayan_hjm 一次合格率
2
  * @Author: dayan_hjm 一次合格率
3
  * @Date: 2023-10-23 09:32:12 
3
  * @Date: 2023-10-23 09:32:12 
4
  * @Last Modified by: dayan_hjm
4
  * @Last Modified by: dayan_hjm
5
- * @Last Modified time: 2023-10-23 10:47:46
5
+ * @Last Modified time: 2023-10-23 16:09:39
6
  */
6
  */
7
 
7
 
8
 
8
 

+ 32 - 32
src/pages/tqcDataVHome/view.jsx

@@ -2,7 +2,7 @@
2
  * @Author: dayan_hjm 
2
  * @Author: dayan_hjm 
3
  * @Date: 2022-10-27 11:40:02 
3
  * @Date: 2022-10-27 11:40:02 
4
  * @Last Modified by: dayan_hjm
4
  * @Last Modified by: dayan_hjm
5
- * @Last Modified time: 2023-10-23 10:55:59
5
+ * @Last Modified time: 2023-10-24 15:14:58
6
  */
6
  */
7
 
7
 
8
 import React, { useState, useEffect, Component } from "react";
8
 import React, { useState, useEffect, Component } from "react";
@@ -55,32 +55,23 @@ class Home extends Component {
55
     super(props, context);
55
     super(props, context);
56
     this.store = mod;
56
     this.store = mod;
57
     this.state = {
57
     this.state = {
58
-      rightlist: [],
59
-      isModalVisible: false,
60
-      addReportValue: '',
61
-      userPar: {
62
-        account: '',
63
-        jobUnit: '',
64
-        position: '',
65
-      },
66
-      baselistAll: [
67
-      ],
68
-      showTips: [],
69
-      leftCareReport: [],
70
-      showMassagepop: false,
71
-      MassagepopPar: {}
58
+      changGif: false,
72
     };
59
     };
73
   }
60
   }
74
 
61
 
75
   componentDidMount() {
62
   componentDidMount() {
76
-    setTimeout(()=>{
63
+    setTimeout(() => {
77
       $(".shu1").numScroll();
64
       $(".shu1").numScroll();
78
-    },200)
65
+    }, 200)
66
+    setTimeout(() => {
67
+      //替换gif
68
+      this.setState({ changGif: true })
69
+    }, 2000)
79
   }
70
   }
80
 
71
 
81
   render() {
72
   render() {
82
     const stores = this.store.state;
73
     const stores = this.store.state;
83
-    const { isModalVisible, commonReportTreeData, addReportValue, userPar } = this.state;
74
+    const { changGif } = this.state;
84
 
75
 
85
 
76
 
86
 
77
 
@@ -90,7 +81,7 @@ class Home extends Component {
90
         <div className="leftContent">
81
         <div className="leftContent">
91
           <div className="topMsg">
82
           <div className="topMsg">
92
             <p className="topMsg_title">总产值</p>
83
             <p className="topMsg_title">总产值</p>
93
-            <div className="topMsg_content">
84
+            <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
94
               <span className="topMsg_number" class="shu1">232425.23</span><span className="topMsg_number_2">万元</span>
85
               <span className="topMsg_number" class="shu1">232425.23</span><span className="topMsg_number_2">万元</span>
95
             </div>
86
             </div>
96
           </div>
87
           </div>
@@ -103,23 +94,28 @@ class Home extends Component {
103
           <div className="bottomContent bigDivPd">
94
           <div className="bottomContent bigDivPd">
104
             <p className="topMsg_title">月度产量/发货量</p>
95
             <p className="topMsg_title">月度产量/发货量</p>
105
             <div className="topMsg_content">
96
             <div className="topMsg_content">
106
-            <MoodSendView></MoodSendView>
97
+              <MoodSendView></MoodSendView>
107
             </div>
98
             </div>
108
           </div>
99
           </div>
109
         </div>
100
         </div>
110
 
101
 
111
         <div className="centerCon">
102
         <div className="centerCon">
112
-          <div className="topMsg">
103
+        <div className="topMsg">
104
+        <div className="topMsg2">
113
             <div className="topMsg_content">
105
             <div className="topMsg_content">
114
-            <div className="center_li">
115
-                <span className="topMsg_number" class="shu1">232425</span>
116
-                <p className="topMsg_line"></p>
117
-                <span className="topMsg_tip">年度产量/吨</span>
106
+              <div className="center_li">
107
+                <div className="right_li">
108
+                  <span className="topMsg_number" class="shu1">232425</span>
109
+                  <p className="topMsg_line"></p>
110
+                  <span className="topMsg_tip">年度产量/吨</span>
111
+                </div>
118
               </div>
112
               </div>
119
               <div className="center_li">
113
               <div className="center_li">
120
-                <span className="topMsg_number" class="shu1">32425</span>
121
-                <p className="topMsg_line"></p>
122
-                <span className="topMsg_tip">年度发货量/吨</span>
114
+                <div className="right_li">
115
+                  <span className="topMsg_number" class="shu1">32425</span>
116
+                  <p className="topMsg_line"></p>
117
+                  <span className="topMsg_tip">年度发货量/吨</span>
118
+                </div>
123
               </div>
119
               </div>
124
               <div className="center_li">
120
               <div className="center_li">
125
                 <span className="topMsg_number" class="shu1">13456</span>
121
                 <span className="topMsg_number" class="shu1">13456</span>
@@ -127,8 +123,8 @@ class Home extends Component {
127
                 <span className="topMsg_tip">产品库存/吨</span>
123
                 <span className="topMsg_tip">产品库存/吨</span>
128
               </div>
124
               </div>
129
             </div>
125
             </div>
130
-
131
-          </div>
126
+            </div>
127
+            </div>
132
           <div className="bottomContent">
128
           <div className="bottomContent">
133
             <p className="topMsg_title">近30天产量</p>
129
             <p className="topMsg_title">近30天产量</p>
134
             <div className="topMsg_content">
130
             <div className="topMsg_content">
@@ -142,7 +138,7 @@ class Home extends Component {
142
         <div className="rightContent">
138
         <div className="rightContent">
143
           <div className="topMsg bigDivPd">
139
           <div className="topMsg bigDivPd">
144
             <p className="topMsg_title">百万工时损工率</p>
140
             <p className="topMsg_title">百万工时损工率</p>
145
-            <div className="topMsg_content">
141
+            <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
146
               <div className="topMsg_box">
142
               <div className="topMsg_box">
147
                 <span className="topMsg_number" class="shu1">232425.23</span><span className="topMsg_number_2">%</span>
143
                 <span className="topMsg_number" class="shu1">232425.23</span><span className="topMsg_number_2">%</span>
148
                 <p className="topMsg_number_p">谢洪</p>
144
                 <p className="topMsg_number_p">谢洪</p>
@@ -159,7 +155,11 @@ class Home extends Component {
159
 
155
 
160
           <div className="topMsg_3">
156
           <div className="topMsg_3">
161
             <p className="topMsg_title">产量计划完成率</p>
157
             <p className="topMsg_title">产量计划完成率</p>
162
-            <div className="topMsg_content">
158
+            <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
159
+              <div className="topMsg_box">
160
+                <span className="topMsg_number" class="shu1">78.1</span><span className="topMsg_number_2">%</span>
161
+                <p className="topMsg_number_p">谢洪</p>
162
+              </div>
163
             </div>
163
             </div>
164
           </div>
164
           </div>
165
 
165