feat: 悬停解析

src/App/index.less

@@ -22,6 +22,7 @@
   background-color:#000000d9;
     border-radius: 2px;
     border: 1px solid #69FFDE;
+    white-space: pre-wrap
 }
 .app {
   color: #000;

src/pages/tlk/style.less

@@ -21,6 +21,8 @@
       width: 100%;
       height: 16%!important;
       margin-top: 1em!important;
+      z-index: 999;
+      position: relative;
     }
     .imgMsg {
       width: 100%;
@@ -152,13 +154,13 @@
     .video_box video{
       width: 100%!important;
       height: 75%!important;
-      padding: 0 4% 11% 0!important;
+      padding: 0 4% 12% 0!important;
     }
     @media (min-height: 1000px) {//横屏大屏
       .video_box video{
         width: 100%!important;
-        height: 71%!important;
-        padding: 0 2% 14% 0!important;
+        height: 72%!important;
+        padding: 0 2% 13% 0!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-18 15:00:12
+ * @Last Modified time: 2024-10-28 10:38:17
  */
 /*
  * @Author: dayan_hjm 
@@ -296,7 +296,7 @@ class Home extends Component {
           <div className="leftContent">
             <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower animate__delay-2s">
               <div className="bottomContent bigDivPd">
-                <Tooltip placement="bottom" title={' ● 近六个月的产量和发货量的对比数据（含外加工），当月的数据计算至更新日期。'}>
+                <Tooltip placement="bottom" title={` ● 近六个月的产量和预算产量的对比，当月的数据计算累计至更新日期。 \n● Comparison of actual and planned production for the last 6 months, with month-to-date data for current month`}>
                   <p className="topMsg_title">产品月度产量 <span className="topMsg_tips">/ Monthly Net Production</span></p>
                 </Tooltip>
                 <div className="topMsg_content">
@@ -307,7 +307,7 @@ class Home extends Component {
 
             <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower animate__delay-2s">
               <div className="bottomContent bigDivPd">
-                <Tooltip placement="bottom" title={' ● 近六个月的产量和发货量的对比数据（含外加工），当月的数据计算至更新日期。'}>
+                <Tooltip placement="bottom" title={` ● 近六个月的发货量，当月的数据计算累计至更新日期。\n● Rolling 6 months export volume and month-to-date data for current month`}>
                   <p className="topMsg_title">产品发货量 <span className="topMsg_tips">/ Lithium Shipment</span></p>
                 </Tooltip>
                 <div className="topMsg_content">
@@ -320,9 +320,8 @@ class Home extends Component {
             <div class="center_box2 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
               <div className="center_box">
                 <Tooltip placement="bottom" title={<p className="titpeP">
-                  <p>● 截止更新日期的主产品库存金额，计算：</p>
-                  <img src={require("@assets/imgs/dataVimg/gongshi2.png").default} alt="" style={{ width: "1.3em", margin: " -0.3em 0.5em 0 0em" }} />
-                  物料1库存数*物料1移动平均价+物料2*物料2移动平均价+…
+                  <p>● 截止到更新日期氢氧化锂产品库存量。</p>
+                  Month-to-date Lithium Hydroxide Monohydrate (LHM) inventory
                 </p>}>
                   <p className="topMsg_title" style={{ position: "relative", zIndex: 999999 }}>产品库存 <span className="topMsg_tips">/ Lithium Inventory</span></p>
                 </Tooltip>
@@ -349,7 +348,7 @@ class Home extends Component {
                           changNun && <span className="topMsg_number">{getThousandNum(yearDecline)}</span>
                         }
                         <p className="topMsg_line"></p>
-                        <Tooltip placement="bottom" title={' ● 本年度截止更新日期的主产品（含外加工）的产量合计'}>
+                        <Tooltip placement="bottom" title={' ● 本年度截止更新日期氢氧化锂产品的发货量合计。\n● Year-to-date total LHM shipments'}>
                           <span className="topMsg_tip">年度发货量/吨</span>
                           <span className="topMsg_tip topMsg_tip2">Annual Shipments / t</span>
                         </Tooltip>
@@ -364,7 +363,7 @@ class Home extends Component {
                           changNun && <span className="topMsg_number">{getThousandNum(productInventory)}</span>
                         }
                         <p className="topMsg_line"></p>
-                        <Tooltip placement="bottom" title={' ● 本年度截止更新日期的主产品（含外加工）的发货量合计。'}>
+                        <Tooltip placement="bottom" title={' ● 本年度截止更新日期的氢氧化锂产品的产量合计。\n● Year-to-date total LHM production'}>
                           <span className="topMsg_tip">年度产量/吨</span>
                           <span className="topMsg_tip topMsg_tip2">Annual Production / t</span>
                         </Tooltip>
@@ -378,7 +377,7 @@ class Home extends Component {
                         changNun && <span className="topMsg_number">{getThousandNum(yearSend, true)}%</span>
                       }
                       <p className="topMsg_line"></p>
-                      <Tooltip placement="bottom" title={' ● 截止更新日期的主产品库存数量。'}>
+                      <Tooltip placement="bottom" title={' ● 本年度截止更新日期的氢氧化锂产品累计一次合格率。\n● Year-to-date battery grade LHM production rate excluding retreatment'}>
                         <span className="topMsg_tip">年度产品一次合格率</span>
                         <span className="topMsg_tip topMsg_tip2">Annual First Pass Yield</span>
                       </Tooltip>
@@ -389,7 +388,7 @@ class Home extends Component {
             </div>
             <div class="bottomContent3 animate__animated animate__fadeInUp animate__slower animate__delay-1s">
               <div className="bottomContent">
-                <Tooltip placement="bottom" title={' ● 以更新日期为节点近30天的产量数据（含外加工）。'}>
+                <Tooltip placement="bottom" title={` ● 日产量：以更新日期为节点近90天的产量曲线；日产量趋势：以对应日期为节点前5天的平均产量所生成的趋势线；平均产量：近90天日产量的平均值。\n● Daily production: Rolling 90 days daily production | Daily production trend: Rolling 5 days average production    |Average production: Rolling 90 days average production`}>
                   <p className="topMsg_title">近90天产量 <span className="topMsg_tips">/ Net Production in the last 90 days</span></p>
                 </Tooltip>
                 <div className="topMsg_content">
@@ -407,7 +406,12 @@ class Home extends Component {
                       {
                         index != 4 && <div>
                           {
-                            item.totalName && <p className="name">{item.totalName}</p>
+                            item.totalName && index == 0 && <Tooltip placement="bottom" title={' ● 本年度截止更新日期TLK基地接收的锂辉石数量合计。\n●  Year-to-date spodumeme received at TLK site'}>
+                            <p className="name">{item.totalName}</p>                            </Tooltip>
+
+                          }
+                          {
+                            item.totalName && index != 0 && <p className="name">{item.totalName}</p>
                           }
                           {
                             item.totalName && !changGif && <span class="shu1 nums">{item.total}</span>
@@ -437,7 +441,10 @@ class Home extends Component {
                             item.total && <span className="sma">t</span>
                           }
                           {
-                            <p className="name">锂辉石库存总量</p>
+                            <Tooltip placement="bottom" title={' ● 截止更新日期TLK基地（含暂存仓）的锂辉石库存总量。\n●  Year-to-date spodumene inventory at all TLK sites (including temporary storage)'}>
+                              <p className="name" style={{    position: 'relative',zIndex: 999}}>锂辉石库存总量</p>
+                            </Tooltip>
+
                           }
                           {
                             <p className="name" style={{marginTop:'-0.5em'}}>Spodumene Inventory</p>
@@ -460,7 +467,7 @@ class Home extends Component {
           <div className="rightContent">
             <div class="topMsg2 animate__animated animate__fadeInDown animate__slower">
               <div className="topMsg bigDivPd">
-                <Tooltip placement="bottom" title={' ● 近一年的百万工时损工率。'}>
+                <Tooltip placement="bottom" title={' ● 年度产量累计计划完成率：本年度截止到更新日期产量的累计计划完成率；年度锂辉石计划完成率：本年度截止到更新日期锂辉石消耗量累计计划完成率。\n●  Production plan completion rate: Year to date completion rate of production plan | Spodumene consumption plan completion rate: Year to date completion rate of spodumene consumption plan'}>
                   <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">
@@ -484,7 +491,7 @@ class Home extends Component {
 
             <div class="topMsg_22 animate__animated animate__fadeInDown animate__slower">
               <div className="topMsg_2">
-                <Tooltip placement="bottom" title={' ● 近六个月的主产品一次合格率，当月的数据计算至更新日期。'}>
+                <Tooltip placement="bottom" title={' ● 近六个月的锂辉石消耗量和锂辉石预算消耗量的对比，当月的数据计算累计至更新日期。\n ● Comparison of the last 6 months of actual and planned spodumene consumption, and month-to-date data for current month'}>
                   <p className="topMsg_title">锂辉石消耗量 <span className="topMsg_tips">/ Spodumene Consumption</span></p>
                 </Tooltip>
 
@@ -496,7 +503,7 @@ class Home extends Component {
 
             <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower  animate__delay-1s">
               <div className="bottomContent bigDivPd">
-                <Tooltip placement="bottom" title={' ● 近三年的碳排放总量、碳排放强度数据'}>
+                <Tooltip placement="bottom" title={' ● 近六个月的氢氧化锂产品一次合格率曲线，当月的数据计算至更新日期。\n ● Month-to-date battery grade LHM production rate excluding retreatment'}>
                   <p className="topMsg_title">产品一次合格率 <span className="topMsg_tips">/ First Pass Yield</span></p>
                 </Tooltip>
                 <div className="topMsg_content">