Startseite Erkunden Hilfe
Registrieren Anmelden
dayan
/
tqv-data-operation-screen
Beobachten 1
Favorit hinzufügen 0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

feat: git / ttf 文件介入

@dayan_hjm vor 2 Jahren
Ursprung
b840052c3a
Commit
69c87e3859
23 geänderte Dateien mit 196 neuen und 88 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 13 11
      ReadMe.md
  2. 3 4
      config/webpack.common.js
  3. 13 3
      public/index.html
  4. 5 4
      src/App/index.less
  5. 112 23
      src/assets/css/styleTemplate.less
  6. BIN
      src/assets/fonts/DingTalkJinBuTi.ttf
  7. BIN
      src/assets/fonts/DingTalkSans.ttf
  8. BIN
      src/assets/imgs/dataVImg/line.gif
  9. BIN
      src/assets/imgs/dataVImg/logo.png
  10. BIN
      src/assets/imgs/dataVImg/sunGong.gif
  11. BIN
      src/assets/imgs/dataVImg/sunGong2.gif
  12. BIN
      src/assets/imgs/dataVImg/topBg.png
  13. BIN
      src/assets/imgs/dataVImg/toplineB.png
  14. BIN
      src/assets/imgs/dataVImg/toplineV.png
  15. BIN
      src/assets/imgs/dataVImg/toplineleft.png
  16. BIN
      src/assets/imgs/dataVImg/toplineright.png
  17. BIN
      src/assets/imgs/dataVImg/wanchanglv.gif
  18. BIN
      src/assets/imgs/dataVImg/wanchanglv2.gif
  19. BIN
      src/assets/imgs/dataVImg/zongChanZhi.gif
  20. BIN
      src/assets/imgs/dataVImg/zongChanZhi2.gif
  21. 17 10
      src/pages/frame/component/top/view.jsx
  22. 1 1
      src/pages/tqcDataVHome/component/oneQualified.jsx
  23. 32 32
      src/pages/tqcDataVHome/view.jsx

+ 13 - 11
ReadMe.md
Datei anzeigen 

@@ -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 11 
     安装模块：yarn install
11 12 
     开发模式：npm run dev
12 13 
     打包命令：npm run yunxi-dev (生产环境)
14 
+    项目开发前需要提前安装node.js 和yarn
15 
+
13 16
14 17 
 ## 项目构建结构
15 18 
 
@@ -46,10 +49,6 @@ view.jsx 页面文件
46 49 
 src\router\router.js 配置菜单路由
47 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 56 
   生产：npm run yunxi-dev
58 57 
 集群环境
59 58 
   npm run yunxi-dev-new
59 
+
60 
+## 开发注意事项
61 
+    ttf文档的引入只能在css文件 或者在index.html  否则无法显示

+ 3 - 4
config/webpack.common.js
Datei anzeigen 

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

+ 13 - 3
public/index.html
Datei anzeigen 

@@ -3,8 +3,19 @@
3 3
4 4 
 <head>
5 5 
   <meta charset="utf-8" />
6 
-  <title><%= htmlWebpackPlugin.options.title %></title>
6 
+  <title>
7 
+    <%= htmlWebpackPlugin.options.title %>
8 
+  </title>
7 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 19 
     .page-loading-warp {
9 20 
       padding: 98px;
10 21 
       display: flex;
 
@@ -147,7 +158,6 @@
147 158 
         transform: rotate(405deg);
148 159 
       }
149 160 
     }
150 
-
151 161 
   </style>
152 162 
   <script>
153 163 
     // 加载HTML图
 
@@ -183,4 +193,4 @@
183 193 
   <%= htmlWebpackPlugin.options.rootEl %>
184 194 
 </body>
185 195
186 
-</html>
196 
+</html>

+ 5 - 4
src/App/index.less
Datei anzeigen 

@@ -1,9 +1,10 @@
1 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 9 
 // @font-face {
9 10 
 //   font-family: "DINAlternate-Bold";

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

@@ -2,14 +2,16 @@
2 2 
  * @Author: dayan_hjm 茶百道主题样式
3 3 
  * @Date: 2022-10-27 10:56:37
4 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 8 
 @import url("../../themes/themes.less");
9 9
10 
+
10 11 
 :global {
11 12 
   #app {
12 13 
     height: inherit;
14 
+    font-family: 'DingTalkJinBuTi',"DingTalkSans";
13 15 
   }
14 16
15 17 
   .hidetip {
 
@@ -231,6 +233,28 @@
231 233 
     height: 8%;
232 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 259 
     .controler .ant-dropdown-link {
236 260 
       color: @dy-font;
 
@@ -331,18 +355,23 @@
331 355
332 356 
           .topMsg_content {
333 357 
             height: calc(100% - 2em);
334 
-            line-height: 2.8em;
335 
-            font-size: 1.8em;
358 
+            line-height: 4em;
359 
+    font-size: 2em;
336 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 363 
             .topMsg_number_2 {
341 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 375 
           .msglist {
347 376 
             padding: 16px 0;
348 377 
 
@@ -434,7 +463,8 @@
434 463 
           margin-right: 5px;
435 464 
         }
436 465 
       }
437 
-      .rightContent .bottomContent{
466 
+
467 
+      .rightContent .bottomContent {
438 468 
         width: 100%;
439 469 
         height: 28%;
440 470 
       }
 
@@ -500,9 +530,11 @@
500 530 
         width: 28%;
501 531 
         height: 88%;
502 532 
         z-index: 9;
503 
-        .topMsg_2 .topMsg_content{
533 
+
534 
+        .topMsg_2 .topMsg_content {
504 535 
           height: 80%;
505 536 
         }
537 
+
506 538 
         .topMsg_2,
507 539 
         .topMsg_3,
508 540 
         .topMsg_4 {
 
@@ -511,17 +543,48 @@
511 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 578 
         .topMsg {
515 579 
           width: 100%;
516 580 
           height: 20%;
517 581 
           margin-bottom: 3%;
518 582
519 583 
           .topMsg_content {
520 
-            height: calc(100% - 2em);
521 
-            font-size: 1.8em;
584 
+            height: calc(100% - 1em);
585 
+            font-size: 2em;
522 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 588 
             text-align: center;
526 589 
             display: flex;
527 590 
             align-items: center;
 
@@ -529,8 +592,6 @@
529 592
530 593 
             .topMsg_box {
531 594 
               width: 52%;
532 
-              height: 71%;
533 
-              background: url(../imgs/dataVimg/sunGongBottom.png) no-repeat 0 0/ 100% 100%;
534 595
535 596 
               .topMsg_number_p {
536 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 614 
           .icon_c {
550 615 
             width: 100%;
551 616 
             display: flex;
 
@@ -653,9 +718,11 @@
653 718 
             display: flex;
654 719 
             align-items: center;
655 720 
             justify-content: center;
656 
-            .eacharView{
721 
+
722 
+            .eacharView {
657 723 
               justify-content: center;
658 724 
             }
725 
+
659 726 
             #echarts2 {
660 727 
               width: 80%;
661 728 
               height: 75%;
 
@@ -665,18 +732,23 @@
665 732
666 733 
         .center_li {
667 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 743 
         .topMsg {
744 
+          background: url(../imgs/dataVimg/toplineleft.png) no-repeat 1.2em 0.2em/ 45px 80%;
745 
+          ;
673 746 
           height: 18%;
674 747 
           color: #69FFDE;
675 748 
           display: flex;
676 749 
           justify-content: center;
677 750 
           flex-wrap: wrap;
678 751 
           font-size: 1.8em;
679 
-          font-weight: 700;
680 752
681 753 
           .topMsg_content {
682 754 
             width: 80%;
 
@@ -686,18 +758,32 @@
686 758
687 759 
             .topMsg_line {
688 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 765 
             .topMsg_tip {
694 
-              color: #fff;
695 
-              font-size: 0.2em;
766 
+              color: #CDF1FF;
767 
+              font-size: 0.5em;
696 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 952 
   .ant-btn-primary {
867 953 
     color: #fff !important;
868 954 
   }
869 
-  #echarts8{
955 
+
956 
+  #echarts8 {
870 957 
     width: 50%;
871 958 
     height: 80%;
872 959 
   }
960 
+
873 961 
   #echarts9 {
874 962 
     width: 40%;
875 963 
     height: 80%;
876 964 
   }
877 965
878 966 
   .leftContent .bottomContent {
879 
-    height: 42%!important;
967 
+    height: 42% !important;
968 
+
880 969 
     .eacharView {
881 970 
       display: flex;
882 971 
       align-items: end;

BIN
src/assets/fonts/DingTalkJinBuTi.ttf
Datei anzeigen


BIN
src/assets/fonts/DingTalkSans.ttf
Datei anzeigen


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


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


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


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


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


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


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


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


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


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


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


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


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


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

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

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

@@ -2,7 +2,7 @@
2 2 
  * @Author: dayan_hjm 一次合格率
3 3 
  * @Date: 2023-10-23 09:32:12
4 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
Datei anzeigen 

@@ -2,7 +2,7 @@
2 2 
  * @Author: dayan_hjm
3 3 
  * @Date: 2022-10-27 11:40:02
4 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 8 
 import React, { useState, useEffect, Component } from "react";
 
@@ -55,32 +55,23 @@ class Home extends Component {
55 55 
     super(props, context);
56 56 
     this.store = mod;
57 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 62 
   componentDidMount() {
76 
-    setTimeout(()=>{
63 
+    setTimeout(() => {
77 64 
       $(".shu1").numScroll();
78 
-    },200)
65 
+    }, 200)
66 
+    setTimeout(() => {
67 
+      //替换gif
68 
+      this.setState({ changGif: true })
69 
+    }, 2000)
79 70 
   }
80 71
81 72 
   render() {
82 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 81 
         <div className="leftContent">
91 82 
           <div className="topMsg">
92 83 
             <p className="topMsg_title">总产值</p>
93 
-            <div className="topMsg_content">
84 
+            <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
94 85 
               <span className="topMsg_number" class="shu1">232425.23</span><span className="topMsg_number_2">万元</span>
95 86 
             </div>
96 87 
           </div>
 
@@ -103,23 +94,28 @@ class Home extends Component {
103 94 
           <div className="bottomContent bigDivPd">
104 95 
             <p className="topMsg_title">月度产量/发货量</p>
105 96 
             <div className="topMsg_content">
106 
-            <MoodSendView></MoodSendView>
97 
+              <MoodSendView></MoodSendView>
107 98 
             </div>
108 99 
           </div>
109 100 
         </div>
110 101
111 102 
         <div className="centerCon">
112 
-          <div className="topMsg">
103 
+        <div className="topMsg">
104 
+        <div className="topMsg2">
113 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 112 
               </div>
119 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 119 
               </div>
124 120 
               <div className="center_li">
125 121 
                 <span className="topMsg_number" class="shu1">13456</span>
 
@@ -127,8 +123,8 @@ class Home extends Component {
127 123 
                 <span className="topMsg_tip">产品库存/吨</span>
128 124 
               </div>
129 125 
             </div>
130 
-
131 
-          </div>
126 
+            </div>
127 
+            </div>
132 128 
           <div className="bottomContent">
133 129 
             <p className="topMsg_title">近30天产量</p>
134 130 
             <div className="topMsg_content">
 
@@ -142,7 +138,7 @@ class Home extends Component {
142 138 
         <div className="rightContent">
143 139 
           <div className="topMsg bigDivPd">
144 140 
             <p className="topMsg_title">百万工时损工率</p>
145 
-            <div className="topMsg_content">
141 
+            <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
146 142 
               <div className="topMsg_box">
147 143 
                 <span className="topMsg_number" class="shu1">232425.23</span><span className="topMsg_number_2">%</span>
148 144 
                 <p className="topMsg_number_p">谢洪</p>
 
@@ -159,7 +155,11 @@ class Home extends Component {
159 155
160 156 
           <div className="topMsg_3">
161 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 163 
             </div>
164 164 
           </div>
165 165