@dayan_hjm 2 anni fa
parent
commit
c65eb0fc17

+ 22 - 8
src/assets/css/styleTemplate.less

@@ -2,7 +2,7 @@
2 2
  * @Author: dayan_hjm 茶百道主题样式
3 3
  * @Date: 2022-10-27 10:56:37 
4 4
  * @Last Modified by: dayan_hjm
5
- * @Last Modified time: 2023-10-30 16:42:23
5
+ * @Last Modified time: 2023-10-30 17:41:41
6 6
  */
7 7
 
8 8
 @import url("../../themes/themes.less");
@@ -483,13 +483,25 @@
483 483
               }
484 484
 
485 485
               #echarts4,
486
-              #echarts6 {
486
+              #echarts6_box {
487 487
                 width: 45%;
488 488
                 height: 90%;
489 489
               }
490
-              #echarts6{
490
+              #echarts6_box{
491 491
                 margin-top: -2em;
492
-                background: url(../imgs/dataVimg/guanghuan.png) no-repeat left 43% / 102% 120%;
492
+                position: relative;
493
+                // background: url(../imgs/dataVimg/guanghuan.png) no-repeat left 43% / 102% 120%;
494
+                .guanghuan{
495
+                  width: 102%;
496
+    height: 120%;
497
+    position: absolute;
498
+    left: 0;
499
+    top: -1.5em;
500
+                }
501
+                #echarts6{
502
+                  width: 100%;
503
+                  height: 100%;
504
+                }
493 505
               }
494 506
 
495 507
             }
@@ -1115,10 +1127,10 @@
1115 1127
     align-items: center;
1116 1128
     justify-self: center;
1117 1129
     flex-wrap: wrap;
1118
-    margin-left: -2.5em;
1119
-    margin-top: -2em;
1130
+    margin-left: -2.2em;
1131
+    margin-top: -1.5em;
1120 1132
     .p3{
1121
-      font-size: 0.2em;
1133
+      font-size: 0.4em;
1122 1134
     margin-left: 0.2em;
1123 1135
     display: inline-block;
1124 1136
     }
@@ -1126,7 +1138,9 @@
1126 1138
       font-size: 0.5em;
1127 1139
       text-align: center;
1128 1140
       width: 100%;
1129
-      color:#CDF1FF
1141
+      color:#CDF1FF;
1142
+      line-height: 0.3em;
1143
+      margin-top: 0.2em;
1130 1144
     }
1131 1145
     .p1{
1132 1146
       text-align: center;

+ 18 - 13
src/pages/tqcDataVHome/component/bottomLineForSend.jsx

@@ -2,7 +2,7 @@
2 2
  * @Author: dayan_hjm 近30天产量
3 3
  * @Date: 2023-10-23 09:32:12 
4 4
  * @Last Modified by: dayan_hjm
5
- * @Last Modified time: 2023-10-23 10:34:12
5
+ * @Last Modified time: 2023-10-30 18:02:38
6 6
  */
7 7
 
8 8
 
@@ -39,9 +39,9 @@ class BottomLineForSend extends Component {
39 39
         },
40 40
         grid: {
41 41
           left: '0',
42
-          top: '30',
43
-          right: '10',
44
-          bottom: '-20',
42
+          top: '5%',
43
+          right: '10%',
44
+          bottom: '10',
45 45
           containLabel: true
46 46
         },
47 47
         // legend: {
@@ -60,7 +60,6 @@ class BottomLineForSend extends Component {
60 60
           type: 'category',
61 61
           boundaryGap: false,
62 62
           axisLabel: {
63
-            rotate: -90,
64 63
             textStyle: {
65 64
               color: "rgba(255,255,255,.6)",
66 65
               fontSize: 12,
@@ -69,13 +68,19 @@ class BottomLineForSend extends Component {
69 68
           },
70 69
           axisLine: {
71 70
             lineStyle: {
72
-              color: 'rgba(255,255,255,.1)'
73
-            }
71
+              color: 'rgba(255,255,255,.1)',
72
+              type: 'dashed',
74 73
 
74
+            }
75 75
           },
76
-
77
-          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']
78
-
76
+          splitLine:{
77
+            show:true,
78
+            lineStyle:{
79
+              color: '#3b3b3b',
80
+              type: 'dashed',
81
+            }
82
+          },
83
+          data: ['17-3', '17-6', '17-9', '17-12', '18-3']
79 84
         }, {
80 85
 
81 86
           axisPointer: { show: false },
@@ -143,8 +148,8 @@ class BottomLineForSend extends Component {
143 148
                 borderWidth: 12
144 149
               }
145 150
             },
146
-            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]
147
-
151
+            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],
152
+            "smooth": true
148 153
           }, 
149 154
           // {
150 155
           //   name: '字段2',
@@ -188,7 +193,7 @@ class BottomLineForSend extends Component {
188 193
       window.addEventListener("resize", function () {
189 194
         myChart.resize();
190 195
       });
191
-    }, 200)
196
+    }, 3000)
192 197
   }
193 198
 
194 199
   render() {

+ 13 - 6
src/pages/tqcDataVHome/component/leftMenoyView.jsx

@@ -2,7 +2,7 @@
2 2
  * @Author: dayan_hjm 库存金额
3 3
  * @Date: 2023-10-23 09:32:12 
4 4
  * @Last Modified by: dayan_hjm
5
- * @Last Modified time: 2023-10-30 17:01:39
5
+ * @Last Modified time: 2023-10-30 17:50:01
6 6
  */
7 7
 
8 8
 
@@ -229,14 +229,13 @@ class LeftMenoyView extends Component {
229 229
       window.addEventListener("resize", function () {
230 230
         myChart.resize();
231 231
       });
232
-    }, 200)
232
+    }, 3000)
233 233
   }
234 234
 
235 235
   setData2() {
236 236
     setTimeout(() => {
237 237
       // 基于准备好的dom,初始化echarts实例
238 238
       var myChart = echarts.init(document.getElementById('echarts6'));
239
-      const colorList = ['#ffd813', '#08daaa', '#6571fc'];
240 239
       let index = 0;
241 240
       function fun() {
242 241
         var timer = setInterval(function () {
@@ -266,7 +265,7 @@ class LeftMenoyView extends Component {
266 265
           if (index > 5) {
267 266
             index = 0;
268 267
           }
269
-        }, 1500);
268
+        }, 30000);
270 269
       }
271 270
       fun();
272 271
       setTimeout(function () {
@@ -450,14 +449,22 @@ class LeftMenoyView extends Component {
450 449
         myChart.resize();
451 450
       });
452 451
 
453
-    }, 200)
452
+    }, 3000)
454 453
   }
455 454
 
456 455
   render() {
457 456
 
458 457
     return (
459 458
       <div className={["eacharView cbLeftMenoyView"]}>
460
-        <div id="echarts6"></div>
459
+        <div id="echarts6_box">
460
+        <img
461
+              src={require("@assets/imgs/dataVimg/guanghuan.png").default}
462
+              alt=""
463
+              class="guanghuan animate__animated animate__pulse animate__infinite animate__slower"
464
+            />
465
+
466
+          <div id="echarts6"></div>
467
+        </div>
461 468
         <ul className={"name_ul"}>
462 469
           <li>碳酸锂</li>
463 470
           <li>氧化纳</li>

+ 1 - 1
src/pages/tqcDataVHome/component/mapView.jsx

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

+ 10 - 3
src/pages/tqcDataVHome/component/moodSendView.jsx

@@ -2,7 +2,7 @@
2 2
  * @Author: dayan_hjm 月度产量/发货量
3 3
  * @Date: 2023-10-23 09:32:12 
4 4
  * @Last Modified by: dayan_hjm
5
- * @Last Modified time: 2023-10-23 09:42:34
5
+ * @Last Modified time: 2023-11-01 14:58:29
6 6
  */
7 7
 
8 8
 
@@ -143,7 +143,10 @@ class MoodSendView extends Component {
143 143
           {
144 144
             name: '产量',
145 145
             type: 'bar',
146
-
146
+            animation:true,
147
+            animationDuration:3000,
148
+            "smooth": true,
149
+  
147 150
             emphasis: {
148 151
               focus: 'series'
149 152
             },
@@ -162,6 +165,10 @@ class MoodSendView extends Component {
162 165
           {
163 166
             name: '发货量',
164 167
             type: 'bar',
168
+            animation:true,
169
+            animationDuration:3000,
170
+            "smooth": true,
171
+  
165 172
             barGap: 0,
166 173
             barWidth: 10,
167 174
             emphasis: {
@@ -184,7 +191,7 @@ class MoodSendView extends Component {
184 191
       var myChart = echarts.init(document.getElementById('chartmain'));
185 192
       // 使用刚指定的配置项和数据显示图表。
186 193
       myChart.setOption(option);
187
-    }, 200)
194
+    }, 3000)
188 195
   }
189 196
 
190 197
   render() {

+ 1 - 1
src/pages/tqcDataVHome/component/oneQualified.jsx

@@ -151,7 +151,7 @@ class BottomLineForSend extends Component {
151 151
         myChart.resize();
152 152
       });
153 153
 
154
-    }, 200)
154
+    }, 3000)
155 155
   }
156 156
 
157 157
   render() {

+ 9 - 3
src/pages/tqcDataVHome/component/rightBottomView.jsx

@@ -2,7 +2,7 @@
2 2
  * @Author: dayan_hjm 碳排放
3 3
  * @Date: 2023-10-23 09:32:12 
4 4
  * @Last Modified by: dayan_hjm
5
- * @Last Modified time: 2023-10-30 11:16:36
5
+ * @Last Modified time: 2023-11-01 15:01:37
6 6
  */
7 7
 
8 8
 
@@ -142,7 +142,7 @@ class RightBottomView extends Component {
142 142
       window.addEventListener("resize", function () {
143 143
         myChart.resize();
144 144
       });
145
-    }, 200)
145
+    }, 3000)
146 146
   }
147 147
 
148 148
   setData2() {
@@ -198,6 +198,9 @@ class RightBottomView extends Component {
198 198
           type: 'bar',
199 199
           yAxisIndex: 0,
200 200
           data: [25, 55, 88],
201
+          animation:true,
202
+          animationDuration:3000,
203
+          smooth: true,
201 204
           label: {
202 205
             normal: {
203 206
               show: true,
@@ -232,6 +235,9 @@ class RightBottomView extends Component {
232 235
           yAxisIndex: 1,
233 236
           barGap: '-100%',
234 237
           data: [99.5, 99.5, 99.5],
238
+          animation:true,
239
+          animationDuration:3000,
240
+          smooth: true,
235 241
           barWidth: 23,
236 242
           itemStyle: {
237 243
             normal: {
@@ -250,7 +256,7 @@ class RightBottomView extends Component {
250 256
         myChart.resize();
251 257
       });
252 258
 
253
-    }, 200)
259
+    }, 3000)
254 260
   }
255 261
 
256 262
   render() {

+ 46 - 34
src/pages/tqcDataVHome/view.jsx

@@ -12,41 +12,12 @@
12 12
  */
13 13
 
14 14
 import React, { useState, useEffect, Component } from "react";
15
-import PropTypes from "prop-types";
16 15
 import styles from "./style.less";
17 16
 import { useHistory, useLocation, withRouter } from "react-router-dom";
18 17
 import { observer, observable } from "mobx-react";
19 18
 import { message, Space, Form, Popconfirm, Modal, Carousel, Icon, Button } from "antd";
20
-import Flex from "@components/Space/view";
21
-import { dealDiffSheetType, crossMenuClick, isTimes } from "@utils/util";
22
-import moment from "moment";
23
-import {
24
-  getDmpAccessUrl,
25
-  getFineBiToken,
26
-  getValueByDictCode,
27
-  getSunwayAccessUrl,
28
-} from "../frame/component/top/api";
29
-import $store from "@store/";
30
-import {
31
-  getAccountComresourcesNew,
32
-  deleteById,
33
-  insertSysComresourceAccountRelationEntityNew,
34
-  getAccountAllCareResource,
35
-  getLoginUserFineResourceTreebottomLineForSend
36
-} from "@apis/work";
37
-import { cloneDeep, get } from 'lodash'
38
-import {
39
-  getAllRolesVo, //获取所有角色
40
-  listUserModuleBulletinsNew
41
-} from "@apis/system";
42
-import { getAccountTypePage, getBaselistAll } from '@apis/personal'
43 19
 import mod from './mod';
44 20
 import { toJS } from "mobx";
45
-import TreeSearch from "@components/TreeSelectSearch/view";
46
-import {
47
-  StarFilled,
48
-} from "@ant-design/icons";
49
-import ModelBox from "@components/modelBox/view.jsx";
50 21
 import BottomLineForSend from "./component/bottomLineForSend.jsx";
51 22
 import MoodSendView from "./component/moodSendView.jsx";
52 23
 import LeftMenoyView from "./component/leftMenoyView.jsx";
@@ -63,10 +34,26 @@ class Home extends Component {
63 34
     this.store = mod;
64 35
     this.state = {
65 36
       changGif: false,
37
+      plannedCompletionData:[
38
+        {name:'射洪',value:78.1},
39
+        {name:'广东',value:12},
40
+        {name:'珠海',value:65},
41
+        {name:'潮汕',value:45},
42
+      ],
43
+      plannedCompletionNum:1,
44
+      manHourData:[
45
+        {name:'射洪',value:0.2},
46
+        {name:'广东',value:33},
47
+        {name:'珠海',value:65},
48
+        {name:'潮汕',value:65},
49
+      ],
50
+      manHourNum:1,
66 51
     };
52
+    this.timer = null //定时器,用于检测同步状态
67 53
   }
68 54
 
69 55
   componentDidMount() {
56
+    this.fontMsgChange();
70 57
     setTimeout(() => {
71 58
       $(".shu1").numScroll();
72 59
       this.videoStart();
@@ -74,6 +61,7 @@ class Home extends Component {
74 61
     setTimeout(() => {
75 62
       //替换gif
76 63
       this.setState({ changGif: true });
64
+
77 65
     }, 2000)
78 66
   }
79 67
   videoStart() {
@@ -131,12 +119,36 @@ class Home extends Component {
131 119
 
132 120
   }
133 121
 
134
-  render() {
135
-    const stores = this.store.state;
136
-    const { changGif } = this.state;
122
+  componentDidCatch(){
123
+    clearInterval(this.timer);
124
+    this.timer = null;
125
+  }
126
+
127
+  fontMsgChange(){
128
+    this.timer = setInterval(() => {
129
+      const { plannedCompletionData,plannedCompletionNum,manHourData,manHourNum } = this.state;
137 130
 
131
+      //产量计划完成率
132
+      var p1 = document.getElementById('plannedCompletionBox');
133
+      const datas_ = plannedCompletionData[plannedCompletionNum-1];
134
+      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>';
135
+      p1.innerHTML = res;
138 136
 
137
+      //百万工时损工率
138
+      var p2 = document.getElementById('manHourBox');
139
+      const datas_2 = manHourData[manHourNum-1];
140
+      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>';
141
+      p2.innerHTML = res;
139 142
 
143
+      const num_ = plannedCompletionNum+1 >= plannedCompletionData.length ? 1 : plannedCompletionNum+1;
144
+      const num_2 = manHourNum+1 >= manHourData.length ? 1 : manHourNum+1;
145
+      this.setState({plannedCompletionNum:num_,manHourNum:num_2})
146
+    }, 4000)
147
+  }
148
+
149
+  render() {
150
+    const stores = this.store.state;
151
+    const { changGif,plannedCompletionData } = this.state;
140 152
 
141 153
     return (
142 154
       <div className={"home_box"}>
@@ -221,7 +233,7 @@ class Home extends Component {
221 233
             <div class="topMsg2 animate__animated animate__fadeInDown animate__slower">
222 234
               <div className="topMsg bigDivPd">
223 235
                 <p className="topMsg_title">百万工时损工率</p>
224
-                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
236
+                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="manHourBox">
225 237
                   <div className="topMsg_box">
226 238
                     <span className="topMsg_number" class="shu1">232425.23</span><span className="topMsg_number_2">%</span>
227 239
                     <p className="topMsg_number_p">谢洪</p>
@@ -242,7 +254,7 @@ class Home extends Component {
242 254
             <div class="topMsg_33 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
243 255
               <div className="topMsg_3">
244 256
                 <p className="topMsg_title">产量计划完成率</p>
245
-                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
257
+                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="plannedCompletionBox">
246 258
                   <div className="topMsg_box">
247 259
                     <span className="topMsg_number" class="shu1">78.1</span><span className="topMsg_number_2">%</span>
248 260
                     <p className="topMsg_number_p">谢洪</p>