feat: tlk联调

src/pages/tlk/api.js

@@ -156,7 +156,7 @@ export function mondService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: '4995cb5ad27388171ede287e7e7d32b7',
+      sign: '43cd181c6b8897f1e849a2d0db07f9d0',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
       apiId: '1387839381046678787',

src/pages/tlk/component/mapView.jsx

@@ -14,7 +14,7 @@
         preload 属性 :
         设置 auto , 表示 预先加载视频 ;
         设置 none , 表示 不预先加载视频 ;
- * @Last Modified time: 2023-11-01 15:54:40
+ * @Last Modified time: 2024-10-18 14:46:37
  */
 import React, { useState, useEffect, Component } from "react";
 import { useHistory, useLocation, withRouter } from "react-router-dom";
@@ -100,7 +100,7 @@ class MapView extends Component {
   render() {
     const { changGif } = this.state;
     return (
-      <div class="video_box video_box_hide animate__animated animate__fadeOut animate__delay-2s animate__slower">
+      <div class="video_box video_box_hide animate__animated animate__fadeOut animate__slower">
           <video src={require("@assets/imgs/dataVImg/tlk.mp4").default} autoplay="autoplay" class="video1"></video>
       </div>
     )

src/pages/tlk/component/oneQualified.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 一次合格率
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2024-10-17 11:28:28
+ * @Last Modified time: 2024-10-18 15:17:26
  */
 
 
@@ -68,7 +68,7 @@ class BottomLineForSend extends Component {
       var option = {
         grid: {
           left: '2%',
-          top: '15%',
+          top: '20%',
           right: '0%',
           bottom: '5%',
           containLabel: true
@@ -89,6 +89,7 @@ class BottomLineForSend extends Component {
           backgroundColor:"#0000008a"
         },
         legend: {
+          type: 'scroll',
           data: ['锂辉石消耗量\n(Spodunene Consumption)', '锂辉石计划消耗量\n(Spodumene Consumption Plan)','锂辉石计划执行率\n(Execution rate of spodumene plan)'],
           fontFamily:'DingTalkJinBuTi',
           padding: [0, 0, 10, 0],

src/pages/tlk/component/oneSendView.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 月度产量/发货量
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2024-10-17 11:01:37
+ * @Last Modified time: 2024-10-18 15:13:53
  */
 
 
@@ -62,7 +62,7 @@ class OneSendView extends Component {
       var option = {
         grid: {
           left: '2%',
-          top: '18%',
+          top: '25%',
           right: '0%',
           bottom: '8%',
           containLabel: true
@@ -83,6 +83,7 @@ class OneSendView extends Component {
           backgroundColor:"#0000008a"
         },
         legend: {
+          type: 'scroll',
           data: ['预算产量(Monthly Budget)', '产量(Net Production)','计划完成率(Prodction Efflciebcy)'],
           fontFamily:'DingTalkJinBuTi',
           padding: [15, 0, 0, 0],

src/pages/tlk/component/rightBottomView.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 近30天产量
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2024-10-17 11:30:23
+ * @Last Modified time: 2024-10-18 15:30:14
  */
 
 
@@ -76,6 +76,7 @@ class RightBottomView extends Component {
           containLabel: true
         },
         legend: {
+          type: 'scroll',
           data: ['产量一次合格率（First Pass Yield）', '累计一次合格率（Cumulative First Pass Yield）'],
           fontFamily: 'DingTalkJinBuTi',
           padding: [5, 0, 40, 0],

src/pages/tlk/mod.js

@@ -17,6 +17,7 @@ const defaultState = {
   totalValue:0,
   yearDecline:0,
   yearSend:0,
+  tailiTotal:0,
   implementationOfThePlan:0,
   annualPlan:0,
   productInventory:0,

src/pages/tlk/style.less

@@ -2,6 +2,7 @@
 
 @assetUrl: "../../assets/imgs/home";
 
+
 .bg_after {
   content: "";
   display: block;
@@ -11,12 +12,85 @@
   height: 10px;
 }
 .tlk_box{
-  background: url(../../assets/imgs/dataVImg/homeBgDataV2.jpg) no-repeat 0 -10% #041b40!important;
-  :global {
+  background: #041b40!important;
+  :global {  
+    .rightContent .topMsg .changBg_topMsg_content{
+      background: url(../../assets/imgs/dataVImg/tlkRight2.gif) no-repeat 48% 0/91% 112%!important;
+    }     
+    .centerCon .topMsg3 {
+      width: 100%;
+      height: 16%!important;
+      margin-top: 1em!important;
+    }
+    .imgMsg {
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      color: #fff;
+      li {
+        position: absolute;
+        width: 24em;
+        z-index: 10;
+        height: 4em;
+        opacity: 1;
+        background: linear-gradient(0deg, #ffffff26 0%, #ffffff00 100%);
+        border-radius: 0.5em;
+        padding: 0.5em;
+        box-sizing: border-box;
+        font-size: 0.85em;
+        color: #cdf1ffcf;
+        text-align: left;
+        .nums {
+          font-size: 1.3em;
+          color: #69FFDE;
+          display: inline-block !important;
+      }
+      .sma {
+        font-size: 0.7em;
+        color: #CDF1FF;
+        display: inline-block;
+        margin-left: 0.2em;
+    }
+    }
+      .lastLi{
+        width: 20em;
+        text-align: center;
+        padding-top: 7em;
+        height: 20em;
+        background: url(../../assets/imgs/dataVImg/quanShang.png) no-repeat 40% 40% !important;
+        background-size: 100% 100% !important;
+        .nums{
+          font-size: 1.8em;
+          .sma {
+            font-size: 1em;
+          }
+        }
+      
+        .zhuan{
+          background: url(../../assets/imgs/dataVImg/quanZhong.png) no-repeat 0 0 !important;
+          width: 100%;
+          height: 100%;
+          display: block;
+          position: absolute;
+          left: 0;
+          top: 0;
+          background-size: 100% 100% !important;
+        }
+        .animate__animated.animate__slower{
+          animation-duration: calc(var(--animate-duration)* 15)!important;
+        }
+
+      }
+    }
     .video_box {
       width: 100% !important;
       background: url(../../assets/imgs/dataVImg/homeBgDataV2.jpg) no-repeat 0 -10em / 108% 120% #041b40!important;
     }
+    .video_box_hide{
+      background: #000!important;
+    }
     .leftContent .bottomContent2{
       height: 31%!important;
       .topMsg_content{
@@ -33,17 +107,19 @@
       height: 27%;
     }
     .centerCon .right_li{
-      margin-top: -24px;
+      margin-top: -27px;
     }
     .topMsg_tip2{
       margin-top: 0!important;
     }
     .rightContent .topMsg2{
       height: 30%!important;
+      margin-bottom: 4%!important;
     }
     .centerCon .bottomContent3{
-      bottom: 7%!important;
+      bottom: 5%!important;
     }
+
     .leftContent .bottomContent2{
       margin-bottom: 3%!important;
     }
@@ -53,7 +129,10 @@
     
     .rightContent .topMsg_22{
       height: 30%!important;
-      margin-bottom: 5%;
+      margin-bottom: 6%;
+      .topMsg_title{
+        margin-bottom: 1%;
+      }
       #echarts5{
         height: 100%!important;
       }
@@ -71,9 +150,18 @@
     }
     .video_box video{
       width: 100%!important;
-      height: 70%!important;
-      padding: 0 0 9% 0!important;
+      height: 75%!important;
+      padding: 0 4% 11% 0!important;
+    }
+    @media (min-height: 1000px) {//横屏大屏
+      .video_box video{
+        width: 100%!important;
+        height: 71%!important;
+        padding: 0 2% 14% 0!important;
+      }
     }
+
+
     .rightContent .topMsg .topMsg_content .topMsg_box .topMsg_number_p{
       margin-bottom: 0.1rem;
       color: #84b8dc!important;
@@ -90,6 +178,60 @@
     .rightContent .topMsg .topMsg_content .topMsg_box{
       width: 32%!important;
     }
+    @media (max-height: 768px) {//电脑小屏
+      .rightContent .topMsg .topMsg_content .topMsg_box{
+        width: 38% !important;
+      }
+      .video_box video{
+        width: 100% !important;
+        height: 64% !important;
+        padding: 0 0% 6% 0 !important;
+      }
+      .leftContent{
+        height: 95%;
+        width: 26% !important;
+    margin-left: 0;
+    #onesendbox{
+      width: 100%!important;
+    }
+      }
+      .leftContent .bottomContent2 {
+        height: 30% !important;
+      }
+      .leftContent .center_box2{
+        height: 30% !important;
+      }
+      .imgMsg li{
+        width: auto;
+        height: auto;
+      }
+      .imgMsg li:nth-child(1){
+        right: 5%;
+      }
+      .imgMsg .lastLi{
+        left: 66%!important;
+        top: 45%!important;
+        width: 18em;
+        text-align: center;
+        padding-top: 6.5em;
+        height: 18em;
+      }
+    }
+    @media (max-height: 768px) {//电脑小屏
+      .centerCon .topMsg_content .center_li:nth-last-child(1){
+        height: 107%!important;
+      }
+    }
+    @media (max-height: 900px) {
+      .centerCon .topMsg_content .center_li:nth-last-child(1){
+        height: 107%!important;
+      }
+      .rightContent .topMsg .topMsg_content .topMsg_box{
+        width: 38% !important;
+      }
+
+    }
+
     .topMsg_title{
       background: url(../../assets/imgs/dataVimg/tipleBg2.png) no-repeat 0 0 / 100% 100%!important;
       color: #e0f6ff!important;

src/pages/tlk/view.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 
  * @Date: 2023-10-25 10:32:44 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2024-10-17 10:46:43
+ * @Last Modified time: 2024-10-18 15:00:12
  */
 /*
  * @Author: dayan_hjm 
@@ -27,7 +27,7 @@ import OneQualified from "./component/oneQualified.jsx";
 import MapView from "./component/mapView.jsx";
 import $store from "@store/";
 import {
-  timeService,
+  momeyService,
   numberService,
   checkToken,
   updateTimeService
@@ -48,6 +48,7 @@ class Home extends Component {
       updateTime: '',
       changGif: false,
       changNun: false,
+      imgMsgData: [],
       plannedCompletionData: [
       ],
       plannedCompletionNum: 1,
@@ -85,9 +86,9 @@ class Home extends Component {
   }
   componentDidMount() {
     this.fontMsgChange();
-    this.getUrl();
     this.getUrl2()
     this.getUrl3();
+    this.getUrl();
     setTimeout(() => {
       this.videoStart();
     }, 200)
@@ -156,33 +157,39 @@ class Home extends Component {
   }
 
   async getUrl() {
-    await timeService().then(({ data = [], resultCode }) => {
+    const name_ = ["累计运输锂辉石 /Total Spodumene Shipments： ", "锂辉石库存量 /Spodumene Inventory：", "锂辉石库存量 /Spodumene Inventory：", "锂辉石库存量 /Spodumene Inventory：",""];
+    const style__ = [{ left: "3%", top: "29%" }, { right: "9%", top: "38%" }, { right: "32%", top: "48%" }, { left: "5%", top: "64%" }, { left: "65%", top: "47%" }]
+    let datas = [];
+    await momeyService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
-        let plannedCompletionData = [], manHourData = [];
+        function changeName(x, num) {
+          return {
+            ...x,
+            total: x.IndexValue,
+            totalName: name_[num],
+            styles: style__[num],
+          }
+        }
         data.map((x, i) => {
-          if (x.indexValue || x.indexValue == 0) {
-            if (x.indexName == '产量计划完成率') {
-              plannedCompletionData.push({
-                name: x.factoryName,
-                value: Number((x.indexValue * 100).toFixed(2)),
-              })
-            } else {
-              manHourData.push({
-                name: x.factoryName,
-                // value: Number((x.indexValue * 100).toFixed(2)),
-                value: Number(x.indexValue),
-              })
-            }
+          datas[0] = changeName({ IndexValue: this.store.state.tailiTotal }, 0);
+          if (x.IndexCode == '22') {
+            datas[1] = changeName(x, 1);
+          } else if (x.IndexCode == '23') {
+            datas[2] = changeName(x, 2);
+          } else if (x.IndexCode == '21') {
+            datas[3] = changeName(x, 3);
+          } else if (x.IndexCode == '24') {
+            datas[4] = changeName(x, 4);
           }
         });
-        this.setState({ plannedCompletionData, manHourData, plannedCompletionNum: 1, manHourNum: 1 });
+        this.setState({ imgMsgData: datas });
       }
     });
   }
   async getUrl2() {
     await numberService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
-        let totalValue = 0, productInventory=0,yearDecline = 0, yearSend = 0, annualPlan = 0, implementationOfThePlan = 0;
+        let tailiTotal = 0, totalValue = 0, productInventory = 0, yearDecline = 0, yearSend = 0, annualPlan = 0, implementationOfThePlan = 0;
         data.map((x, i) => {
           if (x.IndexCode == '1') {
             yearDecline = x.IndexValue
@@ -194,9 +201,11 @@ class Home extends Component {
             annualPlan = x.IndexValue //年度产量完成率
           } else if (x.IndexCode == '5') {
             implementationOfThePlan = x.IndexValue //年度锂辉石执行率
+          } else if (x.IndexCode == '6') {
+            tailiTotal = x.IndexValue //年度锂辉石执行率
           }
         });
-        this.store.saveState({ totalValue, yearDecline, yearSend, productInventory,annualPlan,implementationOfThePlan });
+        this.store.saveState({ tailiTotal, totalValue, yearDecline, yearSend, productInventory, annualPlan, implementationOfThePlan });
         setTimeout(() => {
           $(".shu1").numScroll();
         }, 2500)
@@ -254,8 +263,8 @@ class Home extends Component {
 
   render() {
     const stores = this.store.state;
-    let { totalValue, yearDecline, yearSend, productInventory,annualPlan,implementationOfThePlan } = this.store.state;
-    let { changGif, updateTime, changNun } = this.state;
+    let { totalValue, yearDecline, yearSend, productInventory, annualPlan, implementationOfThePlan } = this.store.state;
+    let { changGif, updateTime, changNun, imgMsgData } = this.state;
     return (
       <div className={[styles.tlk_box + ' home_box ']}>
         {/* 水印 */}
@@ -366,7 +375,7 @@ class Home extends Component {
                         !changNun && <span className="topMsg_number" class="shu1">{yearSend}</span>
                       }
                       {
-                        changNun && <span className="topMsg_number">{getThousandNum(yearSend,true)}%</span>
+                        changNun && <span className="topMsg_number">{getThousandNum(yearSend, true)}%</span>
                       }
                       <p className="topMsg_line"></p>
                       <Tooltip placement="bottom" title={' ● 截止更新日期的主产品库存数量。'}>
@@ -388,6 +397,62 @@ class Home extends Component {
                 </div>
               </div>
             </div>
+            <ul className="imgMsg">
+              {
+                toJS(imgMsgData).map((item, index) => {
+                  if (!item) { return }
+                  return (
+                    <li style={{ ...item?.styles }} class={index != 4 ? "animate__animated animate__bounceInUp animate__slower" : "animate__animated animate__bounceInUp animate__slower lastLi"}>
+                      {/* 矿产 */}
+                      {
+                        index != 4 && <div>
+                          {
+                            item.totalName && <p className="name">{item.totalName}</p>
+                          }
+                          {
+                            item.totalName && !changGif && <span class="shu1 nums">{item.total}</span>
+                          }
+                          {
+                            item.totalName && changGif && <span class="nums">{getThousandNum(item.total)}</span>
+                          }
+                          {
+                            item.totalName && <span className="sma">t</span>
+                          }
+
+                        </div>
+                      }
+                      {
+                        index == 4 && <span class="zhuan animate__animated animate__delay-1s animate__rotateIn animate__infinite animate__slower"></span>
+                      }
+                      {
+                        index == 4 && <div>
+                          
+                          {
+                            item.total && !changGif && <span class="shu1 nums">{item.total}</span>
+                          }
+                          {
+                            item.total && changGif && <span class="nums">{getThousandNum(item.total)}</span>
+                          }
+                          {
+                            item.total && <span className="sma">t</span>
+                          }
+                          {
+                            <p className="name">锂辉石库存总量</p>
+                          }
+                          {
+                            <p className="name" style={{marginTop:'-0.5em'}}>Spodumene Inventory</p>
+                          }
+
+                        </div>
+                      }
+
+
+                    </li>
+                  )
+                })
+              }
+            </ul>
+
 
           </div>
 
@@ -396,21 +461,21 @@ class Home extends Component {
             <div class="topMsg2 animate__animated animate__fadeInDown animate__slower">
               <div className="topMsg bigDivPd">
                 <Tooltip placement="bottom" title={' ● 近一年的百万工时损工率。'}>
-                  <p className="topMsg_title">计划完成率 <span className="topMsg_tips">/ Plan Completion Rate</span></p>
+                  <p className="topMsg_title" style={{marginBottom:'8px'}}>计划完成率 <span className="topMsg_tips">/ Plan Completion Rate</span></p>
                 </Tooltip>
                 <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="manHourBox">
                   <div className="topMsg_box">
                     <p className="topMsg_number_p topMsg_number_p_big">年度产量计划完成率</p>
                     <p className="topMsg_number_p">Completion rate of</p>
-                    <p className="topMsg_number_p" style={{marginBottom:'0.05rem'}}>annual production plan</p>
-                    <span className="topMsg_number" class="shu1">{getThousandNum(annualPlan,true)}</span>
+                    <p className="topMsg_number_p" style={{ marginBottom: '0.05rem' }}>annual production plan</p>
+                    <span className="topMsg_number" class="shu1">{getThousandNum(annualPlan, true)}</span>
                     <span className="topMsg_number_2">%</span>
                   </div>
                   <div className="topMsg_box">
                     <p className="topMsg_number_p topMsg_number_p_big">年度锂辉石计划执行率</p>
                     <p className="topMsg_number_p">Annual lithium pyroxene</p>
-                    <p className="topMsg_number_p" style={{marginBottom:'0.05rem'}}>plan execution rate</p>
-                    <span className="topMsg_number" class="shu1">{getThousandNum(implementationOfThePlan,true)}</span>
+                    <p className="topMsg_number_p" style={{ marginBottom: '0.05rem' }}>plan execution rate</p>
+                    <span className="topMsg_number" class="shu1">{getThousandNum(implementationOfThePlan, true)}</span>
                     <span className="topMsg_number_2">%</span>
                   </div>
                 </div>