feat: 数据千分位

src/pages/gvc/api.js

@@ -59,7 +59,7 @@ export function smallDayService(params) {
         "indexValue"
       ],
       "pageNum": 1,
-      "pageSize": 10,
+      "pageSize": 20,
       "useResultCache": false
     },
     headers: {

src/pages/gvc/component/rightBottomView.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 累计销量客户
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-11-16 17:05:05
+ * @Last Modified time: 2023-11-28 10:27:31
  */
 
 import React, { useState, useEffect, Component } from "react";
@@ -18,6 +18,7 @@ import {
   rollService,
 } from "../api";
 import { get, } from "lodash";
+import { getThousandNum } from "@utils/util";
 
 @withRouter
 
@@ -84,7 +85,7 @@ class RightBottomView extends Component {
                 <div className="slider_box">
                   <div className="slider_top">
                     <p>{i + 1}.<span>{x.name}</span></p>
-                    <p className="p2">{x.num}</p>
+                    <p className="p2">{getThousandNum(x.num)}</p>
                   </div>
                   <Progress
                     strokeColor={{

src/pages/gvc/view.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm  产供销价值链
  * @Date: 2023-11-10 10:19:34 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-11-27 17:16:02
+ * @Last Modified time: 2023-11-28 10:30:13
  */
 
 import React, { useState, useEffect, Component } from "react";
@@ -24,6 +24,7 @@ import {
 } from "./api";
 import MapViewTwo from "./component/mapView2.jsx";
 import mpVideoGvc from "@assets/imgs/dataVimg/videoGvc2.mp4";
+import { getThousandNum } from "@utils/util";
 
 import 'animate.css';
 import { get } from "lodash";
@@ -68,26 +69,31 @@ class Gvc extends Component {
     }
   }
   componentDidMount() {
-    // this.fontMsgChange();
     this.getUrl();
     this.getUrl2()
     this.getUrl4()
     this.getUrl3();
-
-
     setTimeout(() => {
       this.videoStart();
     }, 200)
     setTimeout(() => {
       //替换gif
-      this.setState({ changGif: true });
-      $(".shu1").numScroll();
+      $(".shu1").numScroll({time:3000});
+      // this.changeAllShu()
     }, 3000)
-    // setTimeout(() => {
-    //   setTimeout(() => {
-    //   }, 500)
-    // }, 4000)
+    setTimeout(() => {
+      this.setState({ changGif: true });
+    }, 4500)
   }
+
+  changeAllShu(){
+    const stu_input = document.getElementsByClassName("shu1");
+    for(var i=0;i<stu_input.length;i++){
+      console.log(stu_input[i],"arr_")
+      console.log(stu_input[i].value,"arr_")
+    }
+  }
+
   videoStart() {
     /*     Chrome 浏览器的视频自动播放策略
         1.始终允许静音模式下自动播放
@@ -147,7 +153,7 @@ class Gvc extends Component {
   async getUrl() {
     await leftService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
-        let LeftHtml = [], name_ = ["碳酸锂", '氢氧化钠', '氯化锂', '金属锂'];
+        let LeftHtml = [], name_ = ["碳酸锂", '氢氧化锂', '氯化锂', '金属锂'];
         data.map((x, i) => {
           if (i >= 4) {
             return
@@ -194,7 +200,7 @@ class Gvc extends Component {
   async getUrl4() {
     await smallShopService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
-        const style__ = [{}, { left: "88%", top: "28%" }, { left: "70%", top: "46%" }, { left: "52%", top: "59%" }, { left: "11%", top: "90%" }, { left: "29%", top: "76%" }]
+        const style__ = [{}, { left: "88%", top: "28%" }, { left: "70%", top: "46%" }, { left: "52%", top: "59%" }, { left: "29%", top: "76%" }, { left: "11%", top: "89%" }]
         data = data.map((x, i) => {0
           return {
             ...x,
@@ -205,8 +211,8 @@ class Gvc extends Component {
             inventory: x.inventory,
           }
         });
-        const d_1 = data.filter(x => { return x.factoryCode == 4 })[0];
-        const d_2 = data.filter(x => { return x.factoryCode == 5 })[0];
+        const d_1 = data.filter(x => { return x.factoryCode == 5 })[0];
+        const d_2 = data.filter(x => { return x.factoryCode == 4 })[0];
         const d_3 = data.filter(x => { return x.factoryCode == 3 })[0];
         const d_4 = data.filter(x => { return x.factoryCode == 2 })[0];
         const d_5 = data.filter(x => { return x.factoryCode == 1 })[0];
@@ -216,6 +222,8 @@ class Gvc extends Component {
         old_imgMsgData[5] = d_3;
         old_imgMsgData[6] = d_4;
         old_imgMsgData[7] = d_5;
+        
+
         console.log(old_imgMsgData, "old_imgMsgData")
         this.store.saveState({ imgMsgData: old_imgMsgData });
         this.getUrl5()
@@ -228,13 +236,13 @@ class Gvc extends Component {
         function getItems(num) {
           const datas = data.filter(x => { return x.factoryCode == num });
           const par = {
-            day: datas?.filter(x => { return x.dateType == 1 })?.[0]?.indexValue || 0,
-            mood: datas?.filter(x => { return x.dateType == 2 })?.[0]?.indexValue || 0,
-            year: datas?.filter(x => { return x.dateType == 3 })?.[0]?.indexValue || 0,
+            day: getThousandNum(datas?.filter(x => { return x.dateType == 1 })?.[0]?.indexValue || 0),
+            mood: getThousandNum(datas?.filter(x => { return x.dateType == 2 })?.[0]?.indexValue || 0),
+            year: getThousandNum(datas?.filter(x => { return x.dateType == 3 })?.[0]?.indexValue || 0),
           }
           return par
         }
-
+        
         const d_1 = getItems(5);
         const d_2 = getItems(4);
         const d_3 = getItems(3);
@@ -263,7 +271,7 @@ class Gvc extends Component {
           const rawMaterial = datas.map((item, index) => {
             return {
               prodCatgory: item.prodCatgory,
-              indexValue: item.indexValue,
+              indexValue: getThousandNum(item.indexValue),
             }
           })
           // const par = {
@@ -298,6 +306,8 @@ class Gvc extends Component {
         const d_3 = getItems(3);
         const d_4 = getItems(2);
         const d_5 = getItems(1);
+        
+
         let old_imgMsgData = this.store.state.imgMsgData;
         old_imgMsgData[3] = { ...old_imgMsgData[3], ...d_1 };
         old_imgMsgData[4] = { ...old_imgMsgData[4], ...d_2 };
@@ -322,29 +332,9 @@ class Gvc extends Component {
     this.timer = null;
   }
 
-  fontMsgChange() {
-    this.timer = setInterval(() => {
-      const { plannedCompletionData, plannedCompletionNum, manHourData, manHourNum } = this.state;
-
-      //产量计划完成率
-      var p1 = document.getElementById('plannedCompletionBox');
-      const datas_ = plannedCompletionData[plannedCompletionNum - 1];
-      var res = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number shu1">' + datas_?.value.toFixed(2) + '</span><span class="topMsg_number_2" style={{fontSize: "0.75em",color: "#fff"}}>%</span><p class="topMsg_number_p">' + datas_.name + '</p></div>';
-      p1.innerHTML = res;
-
-      //百万工时损工率
-      var p2 = document.getElementById('manHourBox');
-      const datas_2 = manHourData[manHourNum - 1];
-      var res2 = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number shu1">' + datas_2?.value.toFixed(2) + '</span><span class="topMsg_number_2">%</span><p class="topMsg_number_p">' + datas_2.name + '</p></div>';
-      p2.innerHTML = res2;
-
-      const num_ = plannedCompletionNum + 1 >= plannedCompletionData.length ? 1 : plannedCompletionNum + 1;
-      const num_2 = manHourNum + 1 >= manHourData.length ? 1 : manHourNum + 1;
-      this.setState({ plannedCompletionNum: num_, manHourNum: num_2 })
-    }, 4000)
-  }
 
   getLeftHtml(x, i) {
+    const { changGif } = this.state;
     return (
       <li>
         <div className={"top_div"}>
@@ -363,11 +353,18 @@ class Gvc extends Component {
         <div className="text">
           <div>
             <p>累计产量</p>
-            <span class="topMsg_number shu1">{x.num1}</span><span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
+            {
+              !changGif ? <span class="topMsg_number shu1">{x.num1}</span> : <span class="topMsg_number">{getThousandNum(x.num1)}</span>
+            }
+            
+            <span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
           </div>
           <div>
             <p>产品库存</p>
-            <span class="topMsg_number shu1">{x.num2}</span><span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
+            {
+              !changGif ? <span class="topMsg_number shu1">{x.num2}</span> : <span class="topMsg_number">{getThousandNum(x.num2)}</span>
+            }
+            <span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
           </div>
         </div>
       </li>
@@ -378,7 +375,7 @@ class Gvc extends Component {
   render() {
     const stores = this.store.state;
     let { totalValue, yearDecline, yearSend, imgMsgData } = this.store.state;
-    let { LeftHtml, updateTime } = this.state;
+    let { LeftHtml, updateTime,changGif } = this.state;
     return (
       <div className={[styles.gvc_home + ' home_box ']}>
         <div className={"all_box"}>
@@ -414,7 +411,10 @@ class Gvc extends Component {
                           item.totalName && <p className="name">{item.totalName}</p>
                         }
                         {
-                          item.totalName && <span class="shu1 nums">{item.total}</span>
+                          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">吨</span>
@@ -449,11 +449,18 @@ class Gvc extends Component {
                           item.cumulativeProduction !== null && <div className="chanL text">
                             <div>
                               <p>累计产量</p>
-                              <span class="nums shu1">{item.cumulativeProduction}</span><span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
+                              {
+                                !changGif ? <span class="nums shu1">{item.cumulativeProduction}</span> : <span class="nums">{getThousandNum(item.cumulativeProduction)}</span>
+                              }
+                              
+                              <span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
                             </div>
                             <div>
                               <p>产品库存</p>
-                              <span class="nums shu1">{item.inventory}</span><span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
+                              {
+                                !changGif ? <span class="nums shu1">{item.inventory}</span> : <span class="nums">{getThousandNum(item.inventory)}</span>
+                              }
+                              <span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
                             </div>
 
                           </div>

src/pages/tqcDataVHome/component/leftMenoyView.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 库存金额
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-11-16 11:01:51
+ * @Last Modified time: 2023-11-28 10:43:30
  */
 
 
@@ -11,6 +11,7 @@ import styles from "../style.less";
 import { useHistory, useLocation, withRouter } from "react-router-dom";
 import mod from '../mod';
 import { getArrMax } from "@utils/util";
+import { getThousandNum } from "@utils/util";
 import {
   momeyService,
 } from "../api";
@@ -24,12 +25,12 @@ class LeftMenoyView extends Component {
     this.store = mod;
     this.state = {
       max1:[],
-      year:["碳酸锂","氧化纳",'金属锂',"氢氧化钠"],
+      year:["碳酸锂","氧化纳",'金属锂',"氢氧化锂"],
       missionsIntensity_arr:[
         {value:0,name:"碳酸锂"},
         {value:0,name:"氧化纳"},
         {value:0,name:'金属锂'},
-        {value:0,name:"氢氧化钠"},
+        {value:0,name:"氢氧化锂"},
       ],
     };
   }
@@ -208,7 +209,7 @@ class LeftMenoyView extends Component {
               show: true,
               position: 'right',
               formatter: function (param) {
-                return param.value + '万元';
+                return getThousandNum(param.value) + '万元';
                 // return param.name+"："+param.value + '万元';
 
               },
@@ -312,7 +313,7 @@ class LeftMenoyView extends Component {
         // //标题
         // title: {
         //   text: '16%',
-        //   subtext: '氢氧化钠',
+        //   subtext: '氢氧化锂',
         //   x: 'center',
         //   y: '40%',
         //   textStyle: {

src/pages/tqcDataVHome/view.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 
  * @Date: 2023-10-25 10:32:44 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-11-27 17:16:04
+ * @Last Modified time: 2023-11-28 10:41:00
  */
 /*
  * @Author: dayan_hjm 
@@ -30,6 +30,7 @@ import {
   checkToken,
   updateTimeService
 } from "./api";
+import { getThousandNum } from "@utils/util";
 
 import 'animate.css';
 @withRouter
@@ -42,6 +43,7 @@ class Home extends Component {
     this.state = {
       updateTime: '',
       changGif: false,
+      changNun: false,
       plannedCompletionData: [
       ],
       plannedCompletionNum: 1,
@@ -52,7 +54,7 @@ class Home extends Component {
     this.timer = null //定时器，用于检测同步状态
   }
   componentWillMount() {
-    if(window.location.host.indexOf("localhost") == -1){
+    if (window.location.host.indexOf("localhost") == -1) {
       this.getToken()
     }
   }
@@ -81,8 +83,11 @@ class Home extends Component {
     setTimeout(() => {
       //替换gif
       this.setState({ changGif: true });
+    }, 2000);
+    setTimeout(() => {
+      this.setState({ changNun: true });
+    }, 4500)
 
-    }, 2000)
   }
   videoStart() {
     /*     Chrome 浏览器的视频自动播放策略
@@ -144,7 +149,7 @@ class Home extends Component {
       if (+resultCode === 0) {
         let plannedCompletionData = [], manHourData = [];
         data.map((x, i) => {
-          if(x.indexValue){
+          if (x.indexValue) {
             if (x.indexName == '产量计划完成率') {
               plannedCompletionData.push({
                 name: x.factoryName,
@@ -197,20 +202,30 @@ class Home extends Component {
     this.timer = null;
   }
 
-  fontMsgChange() {
+  fontMsgChange(type) {
     this.timer = setInterval(() => {
       const { plannedCompletionData, plannedCompletionNum, manHourData, manHourNum } = this.state;
 
       //产量计划完成率
       var p1 = document.getElementById('plannedCompletionBox');
       const datas_ = plannedCompletionData[plannedCompletionNum - 1];
-      var res = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number shu1">' + datas_?.value.toFixed(2) + '</span><span class="topMsg_number_2" style={{fontSize: "0.75em",color: "#fff"}}>%</span><p class="topMsg_number_p">' + datas_.name + '</p></div>';
+      var res;
+      if (type) {
+        res = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number">' + getThousandNum(datas_?.value.toFixed(2)) + '</span><span class="topMsg_number_2" style={{fontSize: "0.75em",color: "#fff"}}>%</span><p class="topMsg_number_p">' + datas_.name + '</p></div>';
+      } else {
+        res = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number shu1">' + datas_?.value.toFixed(2) + '</span><span class="topMsg_number_2" style={{fontSize: "0.75em",color: "#fff"}}>%</span><p class="topMsg_number_p">' + datas_.name + '</p></div>';
+      }
       p1.innerHTML = res;
 
       //百万工时损工率
       var p2 = document.getElementById('manHourBox');
       const datas_2 = manHourData[manHourNum - 1];
-      var res2 = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number shu1">' + datas_2?.value.toFixed(2) + '</span><span class="topMsg_number_2">%</span><p class="topMsg_number_p">' + datas_2.name + '</p></div>';
+      var res2;
+      if (type) {
+        res2 = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number">' + getThousandNum(datas_2?.value.toFixed(2)) + '</span><span class="topMsg_number_2">%</span><p class="topMsg_number_p">' + datas_2.name + '</p></div>';
+      } else {
+        res2 = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number shu1">' + datas_2?.value.toFixed(2) + '</span><span class="topMsg_number_2">%</span><p class="topMsg_number_p">' + datas_2.name + '</p></div>';
+      }
       p2.innerHTML = res2;
 
       const num_ = plannedCompletionNum + 1 > plannedCompletionData.length ? 1 : plannedCompletionNum + 1;
@@ -222,7 +237,7 @@ class Home extends Component {
   render() {
     const stores = this.store.state;
     let { totalValue, yearDecline, yearSend, productInventory } = this.store.state;
-    let { changGif, updateTime, } = this.state;
+    let { changGif, updateTime, changNun } = this.state;
     return (
       <div className={"home_box"}>
         {/* 视频播放器 */}
@@ -239,7 +254,13 @@ class Home extends Component {
                   <p className="topMsg_title">总产值</p>
                 </Tooltip>
                 <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
-                  <span className="topMsg_number" class="shu1">{totalValue}</span><span className="topMsg_number_2">万元</span>
+                  {
+                    !changNun && <span className="topMsg_number" class="shu1">{totalValue}</span>
+                  }
+                  {
+                    changNun && <span className="topMsg_number">{getThousandNum(totalValue)}</span>
+                  }
+                  <span className="topMsg_number_2">万元</span>
                 </div>
               </div>
             </div>
@@ -275,7 +296,12 @@ class Home extends Component {
                   <div className="topMsg_content">
                     <div className="center_li">
                       <div className="right_li">
-                        <span className="topMsg_number" class="shu1">{yearDecline}</span>
+                        {
+                          !changNun && <span className="topMsg_number" class="shu1">{yearDecline}</span>
+                        }
+                        {
+                          changNun && <span className="topMsg_number">{getThousandNum(yearDecline)}</span>
+                        }
                         <p className="topMsg_line"></p>
                         <Tooltip placement="bottom" title={' ● 即为从当年1月1日至更新数据ETL日期当天的产量之和（含外加工）'}>
                           <span className="topMsg_tip">年度产量/吨</span>
@@ -284,7 +310,12 @@ class Home extends Component {
                     </div>
                     <div className="center_li">
                       <div className="right_li">
-                        <span className="topMsg_number" class="shu1">{productInventory}</span>
+                        {
+                          !changNun && <span className="topMsg_number" class="shu1">{productInventory}</span>
+                        }
+                        {
+                          changNun && <span className="topMsg_number">{getThousandNum(productInventory)}</span>
+                        }
                         <p className="topMsg_line"></p>
                         <Tooltip placement="bottom" title={' ● 即为从当年1月1日至更新数据ETL日期当天的发货量之和（含外加工）'}>
                           <span className="topMsg_tip">年度发货量/吨</span>
@@ -292,7 +323,12 @@ class Home extends Component {
                       </div>
                     </div>
                     <div className="center_li">
-                      <span className="topMsg_number" class="shu1">{yearSend}</span>
+                      {
+                        !changNun && <span className="topMsg_number" class="shu1">{yearSend}</span>
+                      }
+                      {
+                        changNun && <span className="topMsg_number">{getThousandNum(yearSend)}</span>
+                      }
                       <p className="topMsg_line"></p>
                       <Tooltip placement="bottom" title={' ● 更新数据ETL日期当天的产品库存数量（含外加工）'}>
                         <span className="topMsg_tip">产品库存/吨</span>
@@ -324,7 +360,8 @@ class Home extends Component {
                 </Tooltip>
                 <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="manHourBox">
                   <div className="topMsg_box">
-                    <span className="topMsg_number" class="shu1"></span><span className="topMsg_number_2"></span>
+                    <span className="topMsg_number" class="shu1"></span>
+                    <span className="topMsg_number_2"></span>
                     <p className="topMsg_number_p"></p>
                   </div>
                 </div>
@@ -369,8 +406,8 @@ class Home extends Component {
             </div>
           </div>
           <div className="bottom_box">
-            <p style={{ color: "#6a818d",lineHeight:'2px' }}>
-            更新时间 : {updateTime?updateTime.split(" ")[0]:updateTime}
+            <p style={{ color: "#6a818d", lineHeight: '2px' }}>
+              更新时间 : {updateTime ? updateTime.split(" ")[0] : updateTime}
             </p>
           </div>
 

src/utils/util.js

@@ -980,6 +980,13 @@ export function mapTree2(tree, c_name, la_name, isChildren = false, fathers) {
   return par;
 }
 
+export function getThousandNum(num){
+  if(!num){return 0}
+  var TextBox8_all = num+"";
+  var text8_sum = TextBox8_all.replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,');
+  return text8_sum;
+}
+
 
 // 格式化树结构
 export function findTreeAllNode(tree) {