style: style

src/assets/css/styleTemplate.less

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 茶百道主题样式
  * @Date: 2022-10-27 10:56:37 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-10-30 16:42:23
+ * @Last Modified time: 2023-10-30 17:41:41
  */
 
 @import url("../../themes/themes.less");
@@ -483,13 +483,25 @@
               }
 
               #echarts4,
-              #echarts6 {
+              #echarts6_box {
                 width: 45%;
                 height: 90%;
               }
-              #echarts6{
+              #echarts6_box{
                 margin-top: -2em;
-                background: url(../imgs/dataVimg/guanghuan.png) no-repeat left 43% / 102% 120%;
+                position: relative;
+                // background: url(../imgs/dataVimg/guanghuan.png) no-repeat left 43% / 102% 120%;
+                .guanghuan{
+                  width: 102%;
+    height: 120%;
+    position: absolute;
+    left: 0;
+    top: -1.5em;
+                }
+                #echarts6{
+                  width: 100%;
+                  height: 100%;
+                }
               }
 
             }
@@ -1115,10 +1127,10 @@
     align-items: center;
     justify-self: center;
     flex-wrap: wrap;
-    margin-left: -2.5em;
-    margin-top: -2em;
+    margin-left: -2.2em;
+    margin-top: -1.5em;
     .p3{
-      font-size: 0.2em;
+      font-size: 0.4em;
     margin-left: 0.2em;
     display: inline-block;
     }
@@ -1126,7 +1138,9 @@
       font-size: 0.5em;
       text-align: center;
       width: 100%;
-      color:#CDF1FF
+      color:#CDF1FF;
+      line-height: 0.3em;
+      margin-top: 0.2em;
     }
     .p1{
       text-align: center;

src/pages/tqcDataVHome/component/bottomLineForSend.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 近30天产量
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-10-23 10:34:12
+ * @Last Modified time: 2023-10-30 18:02:38
  */
 
 
@@ -39,9 +39,9 @@ class BottomLineForSend extends Component {
         },
         grid: {
           left: '0',
-          top: '30',
-          right: '10',
-          bottom: '-20',
+          top: '5%',
+          right: '10%',
+          bottom: '10',
           containLabel: true
         },
         // legend: {
@@ -60,7 +60,6 @@ class BottomLineForSend extends Component {
           type: 'category',
           boundaryGap: false,
           axisLabel: {
-            rotate: -90,
             textStyle: {
               color: "rgba(255,255,255,.6)",
               fontSize: 12,
@@ -69,13 +68,19 @@ class BottomLineForSend extends Component {
           },
           axisLine: {
             lineStyle: {
-              color: 'rgba(255,255,255,.1)'
-            }
+              color: 'rgba(255,255,255,.1)',
+              type: 'dashed',
 
+            }
           },
-
-          data: ['17-3', '17-6', '17-9', '17-12', '18-3', '18-6', '18-9', '18-12', '19-3', '19-6', '19-9', '19-12']
-
+          splitLine:{
+            show:true,
+            lineStyle:{
+              color: '#3b3b3b',
+              type: 'dashed',
+            }
+          },
+          data: ['17-3', '17-6', '17-9', '17-12', '18-3']
         }, {
 
           axisPointer: { show: false },
@@ -143,8 +148,8 @@ class BottomLineForSend extends Component {
                 borderWidth: 12
               }
             },
-            data: [12.50, 14.4, 16.1, 14.9, 20.1, 17.2, 17.0, 13.42, 20.12, 18.94, 17.27, 16.10]
-
+            data: [12.50, 14.4, 16.1, 14.9, 20.1, 17.2, 17.0, 13.42, 20.12, 18.94, 17.27, 16.10],
+            "smooth": true
           }, 
           // {
           //   name: '字段2',
@@ -188,7 +193,7 @@ class BottomLineForSend extends Component {
       window.addEventListener("resize", function () {
         myChart.resize();
       });
-    }, 200)
+    }, 3000)
   }
 
   render() {

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-10-30 17:01:39
+ * @Last Modified time: 2023-10-30 17:50:01
  */
 
 
@@ -229,14 +229,13 @@ class LeftMenoyView extends Component {
       window.addEventListener("resize", function () {
         myChart.resize();
       });
-    }, 200)
+    }, 3000)
   }
 
   setData2() {
     setTimeout(() => {
       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('echarts6'));
-      const colorList = ['#ffd813', '#08daaa', '#6571fc'];
       let index = 0;
       function fun() {
         var timer = setInterval(function () {
@@ -266,7 +265,7 @@ class LeftMenoyView extends Component {
           if (index > 5) {
             index = 0;
           }
-        }, 1500);
+        }, 30000);
       }
       fun();
       setTimeout(function () {
@@ -450,14 +449,22 @@ class LeftMenoyView extends Component {
         myChart.resize();
       });
 
-    }, 200)
+    }, 3000)
   }
 
   render() {
 
     return (
       <div className={["eacharView cbLeftMenoyView"]}>
-        <div id="echarts6"></div>
+        <div id="echarts6_box">
+        <img
+              src={require("@assets/imgs/dataVimg/guanghuan.png").default}
+              alt=""
+              class="guanghuan animate__animated animate__pulse animate__infinite animate__slower"
+            />
+
+          <div id="echarts6"></div>
+        </div>
         <ul className={"name_ul"}>
           <li>碳酸锂</li>
           <li>氧化纳</li>

src/pages/tqcDataVHome/component/mapView.jsx

@@ -14,7 +14,7 @@
         preload 属性 :
         设置 auto , 表示 预先加载视频 ;
         设置 none , 表示 不预先加载视频 ;
- * @Last Modified time: 2023-10-25 17:45:41
+ * @Last Modified time: 2023-11-01 14:59:33
  */
 import React, { useState, useEffect, Component } from "react";
 import { useHistory, useLocation, withRouter } from "react-router-dom";

src/pages/tqcDataVHome/component/moodSendView.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 月度产量/发货量
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-10-23 09:42:34
+ * @Last Modified time: 2023-11-01 14:58:29
  */
 
 
@@ -143,7 +143,10 @@ class MoodSendView extends Component {
           {
             name: '产量',
             type: 'bar',
-
+            animation:true,
+            animationDuration:3000,
+            "smooth": true,
+  
             emphasis: {
               focus: 'series'
             },
@@ -162,6 +165,10 @@ class MoodSendView extends Component {
           {
             name: '发货量',
             type: 'bar',
+            animation:true,
+            animationDuration:3000,
+            "smooth": true,
+  
             barGap: 0,
             barWidth: 10,
             emphasis: {
@@ -184,7 +191,7 @@ class MoodSendView extends Component {
       var myChart = echarts.init(document.getElementById('chartmain'));
       // 使用刚指定的配置项和数据显示图表。
       myChart.setOption(option);
-    }, 200)
+    }, 3000)
   }
 
   render() {

src/pages/tqcDataVHome/component/oneQualified.jsx

@@ -151,7 +151,7 @@ class BottomLineForSend extends Component {
         myChart.resize();
       });
 
-    }, 200)
+    }, 3000)
   }
 
   render() {

src/pages/tqcDataVHome/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-10-30 11:16:36
+ * @Last Modified time: 2023-11-01 15:01:37
  */
 
 
@@ -142,7 +142,7 @@ class RightBottomView extends Component {
       window.addEventListener("resize", function () {
         myChart.resize();
       });
-    }, 200)
+    }, 3000)
   }
 
   setData2() {
@@ -198,6 +198,9 @@ class RightBottomView extends Component {
           type: 'bar',
           yAxisIndex: 0,
           data: [25, 55, 88],
+          animation:true,
+          animationDuration:3000,
+          smooth: true,
           label: {
             normal: {
               show: true,
@@ -232,6 +235,9 @@ class RightBottomView extends Component {
           yAxisIndex: 1,
           barGap: '-100%',
           data: [99.5, 99.5, 99.5],
+          animation:true,
+          animationDuration:3000,
+          smooth: true,
           barWidth: 23,
           itemStyle: {
             normal: {
@@ -250,7 +256,7 @@ class RightBottomView extends Component {
         myChart.resize();
       });
 
-    }, 200)
+    }, 3000)
   }
 
   render() {

src/pages/tqcDataVHome/view.jsx

@@ -12,41 +12,12 @@
  */
 
 import React, { useState, useEffect, Component } from "react";
-import PropTypes from "prop-types";
 import styles from "./style.less";
 import { useHistory, useLocation, withRouter } from "react-router-dom";
 import { observer, observable } from "mobx-react";
 import { message, Space, Form, Popconfirm, Modal, Carousel, Icon, Button } from "antd";
-import Flex from "@components/Space/view";
-import { dealDiffSheetType, crossMenuClick, isTimes } from "@utils/util";
-import moment from "moment";
-import {
-  getDmpAccessUrl,
-  getFineBiToken,
-  getValueByDictCode,
-  getSunwayAccessUrl,
-} from "../frame/component/top/api";
-import $store from "@store/";
-import {
-  getAccountComresourcesNew,
-  deleteById,
-  insertSysComresourceAccountRelationEntityNew,
-  getAccountAllCareResource,
-  getLoginUserFineResourceTreebottomLineForSend
-} from "@apis/work";
-import { cloneDeep, get } from 'lodash'
-import {
-  getAllRolesVo, //获取所有角色
-  listUserModuleBulletinsNew
-} from "@apis/system";
-import { getAccountTypePage, getBaselistAll } from '@apis/personal'
 import mod from './mod';
 import { toJS } from "mobx";
-import TreeSearch from "@components/TreeSelectSearch/view";
-import {
-  StarFilled,
-} from "@ant-design/icons";
-import ModelBox from "@components/modelBox/view.jsx";
 import BottomLineForSend from "./component/bottomLineForSend.jsx";
 import MoodSendView from "./component/moodSendView.jsx";
 import LeftMenoyView from "./component/leftMenoyView.jsx";
@@ -63,10 +34,26 @@ class Home extends Component {
     this.store = mod;
     this.state = {
       changGif: false,
+      plannedCompletionData:[
+        {name:'射洪',value:78.1},
+        {name:'广东',value:12},
+        {name:'珠海',value:65},
+        {name:'潮汕',value:45},
+      ],
+      plannedCompletionNum:1,
+      manHourData:[
+        {name:'射洪',value:0.2},
+        {name:'广东',value:33},
+        {name:'珠海',value:65},
+        {name:'潮汕',value:65},
+      ],
+      manHourNum:1,
     };
+    this.timer = null //定时器，用于检测同步状态
   }
 
   componentDidMount() {
+    this.fontMsgChange();
     setTimeout(() => {
       $(".shu1").numScroll();
       this.videoStart();
@@ -74,6 +61,7 @@ class Home extends Component {
     setTimeout(() => {
       //替换gif
       this.setState({ changGif: true });
+
     }, 2000)
   }
   videoStart() {
@@ -131,12 +119,36 @@ class Home extends Component {
 
   }
 
-  render() {
-    const stores = this.store.state;
-    const { changGif } = this.state;
+  componentDidCatch(){
+    clearInterval(this.timer);
+    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 + '</span><span class="topMsg_number_2">%</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 res = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number shu1">' + datas_2.value + '</span><span class="topMsg_number_2">%</span><p class="topMsg_number_p">'+datas_2.name+'</p></div>';
+      p2.innerHTML = res;
 
+      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)
+  }
+
+  render() {
+    const stores = this.store.state;
+    const { changGif,plannedCompletionData } = this.state;
 
     return (
       <div className={"home_box"}>
@@ -221,7 +233,7 @@ class Home extends Component {
             <div class="topMsg2 animate__animated animate__fadeInDown animate__slower">
               <div className="topMsg bigDivPd">
                 <p className="topMsg_title">百万工时损工率</p>
-                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
+                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="manHourBox">
                   <div className="topMsg_box">
                     <span className="topMsg_number" class="shu1">232425.23</span><span className="topMsg_number_2">%</span>
                     <p className="topMsg_number_p">谢洪</p>
@@ -242,7 +254,7 @@ class Home extends Component {
             <div class="topMsg_33 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
               <div className="topMsg_3">
                 <p className="topMsg_title">产量计划完成率</p>
-                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
+                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="plannedCompletionBox">
                   <div className="topMsg_box">
                     <span className="topMsg_number" class="shu1">78.1</span><span className="topMsg_number_2">%</span>
                     <p className="topMsg_number_p">谢洪</p>