style: 开启轮播 / 画面多加一辆小车特效

src/assets/css/styleTemplate.less

@@ -892,6 +892,9 @@
             #echarts2 {
               width: 95%;
               height: 90%;
+              >div{
+                text-align: left;
+              }
             }
           }
         }

src/pages/gvc/component/rightBottomView.jsx

@@ -62,12 +62,12 @@ class RightBottomView extends Component {
       arrows:false,
       infinite: true,
       autoplay: true,
-      speed: 2000,
-      autoplaySpeed: 2000,
+      speed: 4000,
+      autoplaySpeed: 0,
       cssEase: "linear",
       // autoplaySpeed: 1000,//自动播放的时间
       // fade: true,//是否采用淡入淡出的效果  竖着的滚动方式不能添加此动效
-      slidesToShow: data_item.length >= 8 ? 8 : data_item.length,
+      slidesToShow: data_item.length >= 7 ? 7 : data_item.length,
       slidesToScroll: 1,
       vertical: true,
       verticalSwiping: true,

src/pages/gvc/style.less

@@ -2,12 +2,13 @@
 
 @assetUrl: "../../assets/imgs/home";
 
+
 .gvc_home {
-  background: url(../../assets/imgs/dataVimg/gvcBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40!important;
+  background: url(../../assets/imgs/dataVimg/gvcBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40 !important;
   // background: #000;
 
   :global {
-    .rightContent .bottomContent3{
+    .rightContent .bottomContent3 {
       width: 100%;
       height: 100%;
     }
@@ -17,7 +18,7 @@
       height: 100%;
 
       .gvc_video {
-        background: url(../../assets/imgs/dataVimg/gvcBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40!important;
+        background: url(../../assets/imgs/dataVimg/gvcBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40 !important;
         align-items: flex-start;
         // background: #000;
 
@@ -157,14 +158,32 @@
           }
         }
 
+
         .centerCon {
           width: 62%;
           height: 80%;
           padding: 0;
           position: relative;
           margin: 0% 0 0 -1%;
+
+          .rightCar {
+            width: 4.5em;
+            transform: skew(54deg, 306deg);
+            position: absolute;
+            left: 53%;
+            top: 36%;
+            -webkit-animation: antSpinMove 8s linear infinite;;
+            animation: antSpinMove 8s linear infinite;;
+
+            >img {
+              width: 100%;
+            }
+          }
+
         }
 
+        
+
         @media (min-height: 800px) {
           .centerCon {
             width: 65%;
@@ -172,6 +191,11 @@
             padding: 0;
             position: relative;
             margin: 0% 0 0 -3%;
+            .rightCar {
+              -webkit-animation: antSpinMove900 8s linear infinite;;
+              animation: antSpinMove900 8s linear infinite;;
+                
+            }
           }
         }
 
@@ -182,6 +206,10 @@
             padding: 0;
             position: relative;
             margin: 0% 0 0 -1%;
+            .rightCar {
+              -webkit-animation: antSpinMove 8s linear infinite;;
+              animation: antSpinMove 8s linear infinite;;
+            }
           }
         }
 
@@ -192,6 +220,11 @@
             padding: 0;
             position: relative;
             margin: 0% 0 0 -3%;
+            .rightCar {
+              -webkit-animation: antSpinMove1100 8s linear infinite;;
+              animation: antSpinMove1100 8s linear infinite;;
+                
+            }
           }
         }
 
@@ -273,7 +306,7 @@
               align-items: center;
               justify-content: space-between;
               padding: 0 1em;
-              background:linear-gradient(0deg, #292929f2 0%, #25252540 100%); 
+              background: linear-gradient(0deg, #292929f2 0%, #25252540 100%);
               // linear-gradient(0deg, #ffffff00 20%, #7a7a7a29 100%);
               width: 100%;
               border-radius: 0.5em;
@@ -300,9 +333,9 @@
           width: 15%;
           position: absolute;
           right: 0;
-          bottom: 10%;
+          bottom: 15%;
           z-index: 9;
-          height: 60%;
+          height: 45%;
 
           .title_ {
             text-align: left;
@@ -376,21 +409,21 @@
 
         @media (min-height: 800px) {
           .rightContent {
-            bottom: 3%;
-            // height: 38%;
+            bottom: 15%;
+            height: 38%;
           }
         }
 
         @media (min-height: 900px) {
           .rightContent {
-            bottom: 3%;
+            bottom: 15%;
           }
         }
 
         @media (min-height: 1000px) {
           .rightContent {
-            bottom: -5%;
-            // height: 32%;
+            bottom: 15%;
+            height: 32%;
           }
         }
       }

src/pages/gvc/view.jsx

@@ -400,6 +400,9 @@ class Gvc extends Component {
             </div>
 
             <div className="centerCon">
+              <p className="rightCar">
+                <img src={require("@assets/imgs/gvc/car.png").default} alt="" />
+              </p>
               <ul className="imgMsg">
                 {
                   toJS(imgMsgData).map((item, index) => {

src/pages/tqcDataVHome/component/bottomLineForSend.jsx

@@ -60,12 +60,15 @@ class BottomLineForSend extends Component {
           borderColor:"rgba(105, 255, 222, 0.5)",
           borderWidth:2,
           padding:5,
+          className:'dyLeft',
           textStyle:{
             fontSize:12,
+            textAlign:"left",
             color:"#ededed"
           },
           backgroundColor:"#0000008a",
         },
+        formatter: `日期: {b0}<br />{a0}: {c0}吨<br />{a1}: {c1}吨`,
         grid: {
           left: '8%',
           top: '15%',
@@ -146,7 +149,7 @@ class BottomLineForSend extends Component {
         }],
         series: [
           {
-            name: '吨数',
+            name: '产量',
             type: 'line',
             smooth: true,
             symbol: 'circle',
@@ -181,7 +184,7 @@ class BottomLineForSend extends Component {
             "smooth": true
           },
           {
-            name: '外加工产量',
+            name: '含外加工',
             type: 'line',
             smooth: true,
             symbol: 'circle',

src/themes/themes.less

@@ -44,14 +44,14 @@
 //   src: url(@assets/font/PingFangSC.ttf);
 //   font-weight: 100;
 // }
-@dy-bg:#fff;
-@dy-font:rgba(0, 0, 0, 0.6);
-@dy-active:#1B45B4;
-@dy-other-font:#333;
-@dy-all-active:#FFFFFF33;
-@dy-all-themes:#1C45B4;//按钮
-@dy-all-active-hover:#072d97;//按钮hover
-@dy-all-little:#93aff8;//浅色的主题色
+@dy-bg: #fff;
+@dy-font: rgba(0, 0, 0, 0.6);
+@dy-active: #1B45B4;
+@dy-other-font: #333;
+@dy-all-active: #FFFFFF33;
+@dy-all-themes: #1C45B4; //按钮
+@dy-all-active-hover: #072d97; //按钮hover
+@dy-all-little: #93aff8; //浅色的主题色
 //数据查询-style
 @yx_yxHd: 2px;
 
@@ -107,6 +107,158 @@
 //品牌色，主要组件正常背景（Normal）
 @yx_yxColor_brand_1: #4662e6;
 
+@-webkit-keyframes antSpinMove {
+  0% {
+    opacity: 0;
+    left: 53%;
+    top: 36%;
+  }
+
+  10% {
+    opacity: 0.2;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  // 90%{
+  //   opacity: 0.2;
+  // }
+  100% {
+    opacity: 0.5;
+    left: 77%;
+    top: 16%;
+  }
+}
+
+@keyframes antSpinMove {
+  0% {
+    opacity: 0;
+    left: 53%;
+    top: 36%;
+  }
+
+  10% {
+    opacity: 0.2;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  // 90%{
+  //   opacity: 0.2;
+  // }
+  100% {
+    opacity: 0.5;
+    left: 77%;
+    top: 16%;
+  }
+}
+
+
+@-webkit-keyframes antSpinMove1100 {
+  0% {
+    opacity: 0;
+    left: 55%;
+    top: 36%;
+  }
+
+  10% {
+    opacity: 0.2;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  // 90%{
+  //   opacity: 0.2;
+  // }
+  100% {
+    opacity: 0.5;
+    left: 81%;
+    top: 17%;
+  }
+}
+
+@keyframes antSpinMove1100 {
+  0% {
+    opacity: 0;
+    left: 55%;
+    top: 36%;
+  }
+
+  10% {
+    opacity: 0.2;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  // 90%{
+  //   opacity: 0.2;
+  // }
+  100% {
+    opacity: 0.5;
+    left: 81%;
+    top: 17%;
+  }
+}
+
+@-webkit-keyframes antSpinMove900 {
+  0% {
+    opacity: 0;
+    left: 53%;
+    top: 35%;
+  }
+
+  10% {
+    opacity: 0.2;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  // 90%{
+  //   opacity: 0.2;
+  // }
+  100% {
+    opacity: 0.5;
+    left: 79%;
+    top: 16%;
+  }
+}
+
+@keyframes antSpinMove900 {
+  0% {
+    opacity: 0;
+    left: 53%;
+    top: 35%;
+  }
+
+  10% {
+    opacity: 0.2;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  // 90%{
+  //   opacity: 0.2;
+  // }
+  100% {
+    opacity: 0.5;
+    left: 79%;
+    top: 16%;
+  }
+}
+
+
 //辅助色，脚手架正常背景（Normal）
 @yx_yxColor_brand_2: #23283c;
 
@@ -137,6 +289,7 @@
 
 //辅助色，主要组件鼠标按下背景（Pessed)
 @yx_yxColor_brand_11: #2d4ce1;
+
 //圆点/Circle
 .yx_yxCircle_sm {
   width: 4 * @yx_yxHd;
@@ -157,6 +310,7 @@
 .yx_yxShadow_down {
   box-shadow: 0px 2px 3px rgba(51, 65, 80, 3%);
 }
+
 .yx_yxShadow_down_new {
   box-shadow: 0px 1px 8px 0px rgba(51, 65, 80, 16%);
 }
@@ -175,4 +329,3 @@
 
 //成功（Success）
 @yx_yxColor_function_4: #3dba6d;
-