Kaynağa Gözat

style: style

@dayan_hjm 2 yıl önce
ebeveyn
işleme
f6461ca7c2

+ 92 - 20
src/assets/css/styleTemplate.less

@@ -2,7 +2,7 @@
2
  * @Author: dayan_hjm 茶百道主题样式
2
  * @Author: dayan_hjm 茶百道主题样式
3
  * @Date: 2022-10-27 10:56:37 
3
  * @Date: 2022-10-27 10:56:37 
4
  * @Last Modified by: dayan_hjm
4
  * @Last Modified by: dayan_hjm
5
- * @Last Modified time: 2023-10-25 16:42:23
5
+ * @Last Modified time: 2023-10-25 17:48:44
6
  */
6
  */
7
 
7
 
8
 @import url("../../themes/themes.less");
8
 @import url("../../themes/themes.less");
@@ -226,18 +226,20 @@
226
     display: inline-block;
226
     display: inline-block;
227
     border: 1px solid #ececec;
227
     border: 1px solid #ececec;
228
   }
228
   }
229
+
229
   #app .top2 {
230
   #app .top2 {
230
     background: url(../imgs/dataVimg/topBg.png) no-repeat 0 0 / 100% 100% #0a091e;
231
     background: url(../imgs/dataVimg/topBg.png) no-repeat 0 0 / 100% 100% #0a091e;
231
     height: 8%;
232
     height: 8%;
232
-    background:#0a091e;
233
+    background: #0a091e;
233
     background-color: #0a091e;
234
     background-color: #0a091e;
234
-  
235
+
235
   }
236
   }
237
+
236
   #app .top {
238
   #app .top {
237
     background: url(../imgs/dataVimg/topBg.png) no-repeat 0 0 / 100% 100% #0a091e;
239
     background: url(../imgs/dataVimg/topBg.png) no-repeat 0 0 / 100% 100% #0a091e;
238
     height: 100%;
240
     height: 100%;
239
     position: unset;
241
     position: unset;
240
-  
242
+
241
     .title_box {
243
     .title_box {
242
       display: flex;
244
       display: flex;
243
       align-items: center;
245
       align-items: center;
@@ -319,6 +321,7 @@
319
   .homePage .bottom_body {
321
   .homePage .bottom_body {
320
     // background-image: linear-gradient(to top, #F8FCFE, #F8FCFE, #F8FCFE);
322
     // background-image: linear-gradient(to top, #F8FCFE, #F8FCFE, #F8FCFE);
321
     background: linear-gradient(51.4deg, #000308 0%, #041b40 100%);
323
     background: linear-gradient(51.4deg, #000308 0%, #041b40 100%);
324
+
322
     // background: url(../imgs/dataVimg/homeBgDataV.png) no-repeat 0 0 / 100% 100% #041b40;
325
     // background: url(../imgs/dataVimg/homeBgDataV.png) no-repeat 0 0 / 100% 100% #041b40;
323
   }
326
   }
324
 
327
 
@@ -328,9 +331,12 @@
328
     top: 0;
331
     top: 0;
329
     width: 100%;
332
     width: 100%;
330
     height: 100%;
333
     height: 100%;
331
-    .video_box_hide{
334
+    background: url(../imgs/dataVimg/homeBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40;
335
+
336
+    .video_box_hide {
332
       z-index: 12;
337
       z-index: 12;
333
     }
338
     }
339
+
334
     .video_box {
340
     .video_box {
335
       position: absolute;
341
       position: absolute;
336
       left: 0;
342
       left: 0;
@@ -342,6 +348,8 @@
342
       align-items: center;
348
       align-items: center;
343
       justify-content: center;
349
       justify-content: center;
344
       flex-wrap: wrap;
350
       flex-wrap: wrap;
351
+      pointer-events: none;
352
+
345
       video {
353
       video {
346
         width: 89%;
354
         width: 89%;
347
         height: 83%;
355
         height: 83%;
@@ -367,15 +375,15 @@
367
       width: 100%;
375
       width: 100%;
368
       background: unset;
376
       background: unset;
369
       z-index: 11;
377
       z-index: 11;
378
+
370
       .topMsg_title {
379
       .topMsg_title {
371
         background: url(../imgs/dataVimg/tipleBg.png) no-repeat 0 0 / 100% 100%;
380
         background: url(../imgs/dataVimg/tipleBg.png) no-repeat 0 0 / 100% 100%;
372
         height: 2em;
381
         height: 2em;
373
         color: #fff;
382
         color: #fff;
374
         text-align: left;
383
         text-align: left;
375
-        padding-left: 2em;
384
+        padding-left: 2.5em;
376
         box-sizing: border-box;
385
         box-sizing: border-box;
377
         line-height: 2.2em;
386
         line-height: 2.2em;
378
-        font-weight: 700;
379
         font-family: "DingTalk JinBuTi";
387
         font-family: "DingTalk JinBuTi";
380
       }
388
       }
381
 
389
 
@@ -383,7 +391,8 @@
383
         width: 28%;
391
         width: 28%;
384
         height: 88%;
392
         height: 88%;
385
         z-index: 9;
393
         z-index: 9;
386
-        .topMsg2{
394
+
395
+        .topMsg2 {
387
           width: 100%;
396
           width: 100%;
388
           height: 22%;
397
           height: 22%;
389
           box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04);
398
           box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.04);
@@ -391,6 +400,7 @@
391
           /* padding: 16px; */
400
           /* padding: 16px; */
392
           margin-bottom: 3%;
401
           margin-bottom: 3%;
393
         }
402
         }
403
+
394
         .topMsg {
404
         .topMsg {
395
           width: 100%;
405
           width: 100%;
396
           height: 100%;
406
           height: 100%;
@@ -456,6 +466,21 @@
456
               display: flex;
466
               display: flex;
457
               align-items: center;
467
               align-items: center;
458
               justify-content: space-between;
468
               justify-content: space-between;
469
+              position: relative;
470
+
471
+              .name_ul {
472
+                width: 43%;
473
+                height: 80%;
474
+                color: #fff;
475
+                position: absolute;
476
+                right: 0%;
477
+                top: 1.2em;
478
+
479
+                li {
480
+                  height: 22%;
481
+                  text-align: left;
482
+                }
483
+              }
459
 
484
 
460
               #echarts4,
485
               #echarts4,
461
               #echarts6 {
486
               #echarts6 {
@@ -465,14 +490,16 @@
465
 
490
 
466
             }
491
             }
467
           }
492
           }
493
+
468
           width: 100%;
494
           width: 100%;
469
           height: 100%;
495
           height: 100%;
470
         }
496
         }
471
 
497
 
472
-        .bottomContent2{
498
+        .bottomContent2 {
473
           width: 100%;
499
           width: 100%;
474
-          height: 35%;
500
+          height: 42%;
475
         }
501
         }
502
+
476
         .bottomContent {
503
         .bottomContent {
477
           width: 100%;
504
           width: 100%;
478
           height: 100%;
505
           height: 100%;
@@ -486,7 +513,7 @@
486
 
513
 
487
             #chartmain {
514
             #chartmain {
488
               width: 80%;
515
               width: 80%;
489
-              height: 80%;
516
+              height: 100%;
490
             }
517
             }
491
 
518
 
492
           }
519
           }
@@ -516,6 +543,7 @@
516
         width: 100%;
543
         width: 100%;
517
         height: 28%;
544
         height: 28%;
518
       }
545
       }
546
+
519
       .rightContent .bottomContent {
547
       .rightContent .bottomContent {
520
         width: 100%;
548
         width: 100%;
521
         height: 100%;
549
         height: 100%;
@@ -586,35 +614,42 @@
586
         .topMsg_2 .topMsg_content {
614
         .topMsg_2 .topMsg_content {
587
           height: 80%;
615
           height: 80%;
588
         }
616
         }
589
-        .topMsg_22,.topMsg_33{
617
+
618
+        .topMsg_22 {
619
+          width: 100%;
620
+          height: 28%;
621
+        }
622
+
623
+        .topMsg_33 {
590
           width: 100%;
624
           width: 100%;
591
           height: 22%;
625
           height: 22%;
592
-          margin-bottom: 3%;
626
+          margin-bottom: 2%;
593
         }
627
         }
628
+
594
         .topMsg_2,
629
         .topMsg_2,
595
-        .topMsg_3{
630
+        .topMsg_3 {
596
           width: 100%;
631
           width: 100%;
597
           height: 100%;
632
           height: 100%;
598
         }
633
         }
634
+
599
         .topMsg_4 {
635
         .topMsg_4 {
600
           width: 100%;
636
           width: 100%;
601
           height: 22%;
637
           height: 22%;
602
-          margin-bottom: 3%;
603
         }
638
         }
604
 
639
 
605
         .topMsg_3 {
640
         .topMsg_3 {
606
           .topMsg_content {
641
           .topMsg_content {
607
-            height: calc(100% - 2em);
642
+            height: calc(100% - 1em);
608
             line-height: 2.8em;
643
             line-height: 2.8em;
609
             font-size: 1.8em;
644
             font-size: 1.8em;
610
             color: #69FFDE;
645
             color: #69FFDE;
611
-            background: url(../imgs/dataVimg/wanchanglv.gif) no-repeat center center / 84% 98%;
646
+            background: url(../imgs/dataVimg/wanchanglv.gif) no-repeat center center/ 71% 99%;
612
             display: flex;
647
             display: flex;
613
             align-items: center;
648
             align-items: center;
614
             justify-content: center;
649
             justify-content: center;
615
 
650
 
616
             .topMsg_number_2 {
651
             .topMsg_number_2 {
617
-              font-size: 0.8em;
652
+              font-size: 0.75em;
618
               color: #fff;
653
               color: #fff;
619
             }
654
             }
620
 
655
 
@@ -633,11 +668,13 @@
633
           }
668
           }
634
 
669
 
635
         }
670
         }
636
-        .topMsg2{
671
+
672
+        .topMsg2 {
637
           width: 100%;
673
           width: 100%;
638
           height: 20%;
674
           height: 20%;
639
           margin-bottom: 3%;
675
           margin-bottom: 3%;
640
         }
676
         }
677
+
641
         .topMsg {
678
         .topMsg {
642
           width: 100%;
679
           width: 100%;
643
           height: 100%;
680
           height: 100%;
@@ -766,11 +803,13 @@
766
         width: calc(100% - 56%);
803
         width: calc(100% - 56%);
767
         height: 88%;
804
         height: 88%;
768
         position: relative;
805
         position: relative;
769
-        .topMsg3{
806
+
807
+        .topMsg3 {
770
           width: 100%;
808
           width: 100%;
771
           height: 18%;
809
           height: 18%;
772
           margin-top: 2em;
810
           margin-top: 2em;
773
         }
811
         }
812
+
774
         .bottomContent3 {
813
         .bottomContent3 {
775
           height: 30%;
814
           height: 30%;
776
           width: 100%;
815
           width: 100%;
@@ -779,6 +818,7 @@
779
           bottom: 5%;
818
           bottom: 5%;
780
 
819
 
781
         }
820
         }
821
+
782
         .bottomContent {
822
         .bottomContent {
783
           height: 100%;
823
           height: 100%;
784
           width: 100%;
824
           width: 100%;
@@ -1027,11 +1067,43 @@
1027
   #echarts8 {
1067
   #echarts8 {
1028
     width: 50%;
1068
     width: 50%;
1029
     height: 80%;
1069
     height: 80%;
1070
+    box-sizing: border-box;
1071
+    background: url(../imgs/dataVimg/toplineV.png) no-repeat 26% 50% / 1px 70%;
1072
+
1030
   }
1073
   }
1031
 
1074
 
1032
   #echarts9 {
1075
   #echarts9 {
1033
     width: 40%;
1076
     width: 40%;
1034
     height: 80%;
1077
     height: 80%;
1078
+    box-sizing: border-box;
1079
+    padding-right: 3%;
1080
+    background: url(../imgs/dataVimg/toplineV.png) no-repeat 95% 55% / 1px 70%;
1081
+
1082
+  }
1083
+
1084
+  .cbRightBottomView {
1085
+    flex-wrap: wrap;
1086
+    position: relative;
1087
+
1088
+    .right_b_tip2 {
1089
+      width: 46%;
1090
+      display: block;
1091
+      position: absolute;
1092
+      color: rgba(205, 241, 255, 1);
1093
+      left: 29%;
1094
+      top: 1.2em;
1095
+      text-align: right;
1096
+    }
1097
+
1098
+    .right_b_tip1 {
1099
+      width: 36%;
1100
+      display: block;
1101
+      position: absolute;
1102
+      color: rgba(205, 241, 255, 1);
1103
+      left: 0;
1104
+      top: 1.2em;
1105
+      text-align: right;
1106
+    }
1035
   }
1107
   }
1036
 
1108
 
1037
   .leftContent .bottomContent {
1109
   .leftContent .bottomContent {

+ 1 - 1
src/pages/frame/component/top/view.jsx

@@ -769,7 +769,7 @@ export default observer(function (props) {
769
     messageSourceName,
769
     messageSourceName,
770
   } = detailMessage || {}; /**解构 当前点击的详情数据 */
770
   } = detailMessage || {}; /**解构 当前点击的详情数据 */
771
   return (
771
   return (
772
-    <div class="top2 animate__animated animate__fadeInDown animate__delay-1s">
772
+    <div class="top2 animate__animated animate__fadeInDown animate__delay-1s animate__slower">
773
       <div className={$store.app.styleCommon.theme == 'chaBaiDao' ? [styles.top + ' top'] : styles.top}>
773
       <div className={$store.app.styleCommon.theme == 'chaBaiDao' ? [styles.top + ' top'] : styles.top}>
774
         <div className="title_box">
774
         <div className="title_box">
775
           <img
775
           <img

+ 35 - 31
src/pages/tqcDataVHome/component/leftMenoyView.jsx

@@ -35,7 +35,7 @@ class LeftMenoyView extends Component {
35
       var option = {
35
       var option = {
36
 
36
 
37
         grid: {
37
         grid: {
38
-          left: '2%',
38
+          left: '0%',
39
           top: '1%',
39
           top: '1%',
40
           right: '5%',
40
           right: '5%',
41
           bottom: '0%',
41
           bottom: '0%',
@@ -50,25 +50,12 @@ class LeftMenoyView extends Component {
50
           offset: '7',
50
           offset: '7',
51
           axisLabel: {
51
           axisLabel: {
52
             textStyle: {
52
             textStyle: {
53
-              color: 'rgba(255,255,255,.6)',
54
-              fontSize: '14',
53
+              color: 'rgba(255,255,255,.9)',
54
+              fontSize: '0',
55
             }
55
             }
56
           },
56
           },
57
-          data: ['字段1', '字段2', '字段3', '字段4']
58
-
59
-        }, 
60
-        // {
61
-        //   axisTick: 'none',
62
-        //   axisLine: 'none',
63
-        //   axisLabel: {
64
-        //     textStyle: {
65
-        //       color: 'rgba(255,255,255,.6)',
66
-        //       fontSize: '14',
67
-        //     }
68
-        //   },
69
-        //   data: [1514, 1619, 1623, 1968]
70
-
71
-        // }, 
57
+          data: ['碳酸锂', '氧化纳', '金属锂', '氢氧化钠']
58
+        },
72
         {
59
         {
73
           name: '单位:件',
60
           name: '单位:件',
74
           nameGap: '50',
61
           nameGap: '50',
@@ -87,16 +74,18 @@ class LeftMenoyView extends Component {
87
           name: '条',
74
           name: '条',
88
           type: 'bar',
75
           type: 'bar',
89
           yAxisIndex: 0,
76
           yAxisIndex: 0,
90
-          data: [25, 30, 34, 40, 43, 48, 52, 56, 70],
77
+          data: [{ value: 25, name: '碳酸锂' }, { value: 33, name: '氧化纳' }, { value: 35, name: '金属锂' }, { value: 40, name: '氢氧化钠' }],
91
           label: {
78
           label: {
92
             normal: {
79
             normal: {
93
               show: true,
80
               show: true,
94
               position: 'right',
81
               position: 'right',
95
               formatter: function (param) {
82
               formatter: function (param) {
96
-                return param.value + '%';
83
+                return param.value + '万元';
84
+                // return param.name+":"+param.value + '万元';
85
+
97
               },
86
               },
98
               textStyle: {
87
               textStyle: {
99
-                color: 'rgba(255,255,255,.8)',
88
+                color: 'rgba(255,255,255,1)',
100
                 fontSize: '12',
89
                 fontSize: '12',
101
               }
90
               }
102
             }
91
             }
@@ -104,30 +93,39 @@ class LeftMenoyView extends Component {
104
           barWidth: 15,
93
           barWidth: 15,
105
           itemStyle: {
94
           itemStyle: {
106
             normal: {
95
             normal: {
107
-              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
108
-                offset: 0,
109
-                color: '#03c893'
110
-              },
111
-              {
112
-                offset: 1,
113
-                color: '#0091ff'
114
-              }
96
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
97
+                { offset: 0, color: 'rgba(255, 206, 0, 1)' },
98
+                { offset: 0.7, color: '#ffd01d94' },
99
+                { offset: 1, color: '#ffd01d94' },
115
               ]),
100
               ]),
116
               barBorderRadius: 15,
101
               barBorderRadius: 15,
102
+              borderColor: "rgba(255, 206, 0, 1)",
103
+              borderWidth: 1
117
             }
104
             }
118
           },
105
           },
106
+          labelLine: {
107
+            length: 10,
108
+            length2: 50,
109
+          },
110
+          labelLayout: {
111
+            x: "20%",
112
+            y: "20%",
113
+            verticalAlign: "bottom",
114
+            dy: -10,
115
+          },
119
           z: 2
116
           z: 2
120
         }, {
117
         }, {
121
           name: '白框',
118
           name: '白框',
122
           type: 'bar',
119
           type: 'bar',
123
           yAxisIndex: 1,
120
           yAxisIndex: 1,
124
           barGap: '-100%',
121
           barGap: '-100%',
125
-          data: [99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
122
+          data: [99.5, 99.5, 99.5, 99.5],
126
           barWidth: 15,
123
           barWidth: 15,
127
           itemStyle: {
124
           itemStyle: {
128
             normal: {
125
             normal: {
129
-              color: 'rgba(0,0,0,.2)',
126
+              color: '#ffffff24',
130
               barBorderRadius: 15,
127
               barBorderRadius: 15,
128
+
131
             }
129
             }
132
           },
130
           },
133
           z: 1
131
           z: 1
@@ -246,6 +244,12 @@ class LeftMenoyView extends Component {
246
     return (
244
     return (
247
       <div className={["eacharView cbLeftMenoyView"]}>
245
       <div className={["eacharView cbLeftMenoyView"]}>
248
         <div id="echarts6"></div>
246
         <div id="echarts6"></div>
247
+        <ul className={"name_ul"}>
248
+          <li>碳酸锂</li>
249
+          <li>氧化纳</li>
250
+          <li>金属锂</li>
251
+          <li>氢氧化钠</li>
252
+        </ul>
249
         <div id="echarts4"></div>
253
         <div id="echarts4"></div>
250
       </div>
254
       </div>
251
     )
255
     )

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

@@ -14,7 +14,7 @@
14
         preload 属性 :
14
         preload 属性 :
15
         设置 auto , 表示 预先加载视频 ;
15
         设置 auto , 表示 预先加载视频 ;
16
         设置 none , 表示 不预先加载视频 ;
16
         设置 none , 表示 不预先加载视频 ;
17
- * @Last Modified time: 2023-10-25 16:42:50
17
+ * @Last Modified time: 2023-10-25 17:45:41
18
  */
18
  */
19
 import React, { useState, useEffect, Component } from "react";
19
 import React, { useState, useEffect, Component } from "react";
20
 import { useHistory, useLocation, withRouter } from "react-router-dom";
20
 import { useHistory, useLocation, withRouter } from "react-router-dom";
@@ -100,7 +100,7 @@ class MapView extends Component {
100
   render() {
100
   render() {
101
     const { changGif } = this.state;
101
     const { changGif } = this.state;
102
     return (
102
     return (
103
-      <div class="video_box video_box_hide animate__animated animate__fadeOut animate__delay-2s">
103
+      <div class="video_box video_box_hide animate__animated animate__zoomOut animate__delay-2s animate__slower">
104
           <video src={require("@assets/imgs/dataVImg/homeVideo.mp4").default} autoplay="autoplay" class="video1"></video>
104
           <video src={require("@assets/imgs/dataVImg/homeVideo.mp4").default} autoplay="autoplay" class="video1"></video>
105
       </div>
105
       </div>
106
     )
106
     )

+ 126 - 82
src/pages/tqcDataVHome/component/moodSendView.jsx

@@ -30,113 +30,157 @@ class MoodSendView extends Component {
30
     setTimeout(() => {
30
     setTimeout(() => {
31
       var dataAxis = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日'];
31
       var dataAxis = ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日'];
32
       var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200];
32
       var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200];
33
+      var data2 = [120, 22, 141, 24, 29, 30, 30, 93, 49, 91, 90, 55, 34, 33, 77];
33
       var yMax = 500;
34
       var yMax = 500;
34
       var dataShadow = [];
35
       var dataShadow = [];
35
       for (var i = 0; i < data.length; i++) {
36
       for (var i = 0; i < data.length; i++) {
36
         dataShadow.push(yMax);
37
         dataShadow.push(yMax);
37
       }
38
       }
38
       var option = {
39
       var option = {
39
-        title: {
40
-          text: '',
41
-          subtext: ''
42
-        },
43
-        grid: {
44
-          x: 40,
45
-          y: 40,
46
-          x2: 20,
47
-          y2: 20,
48
-
40
+        tooltip: {
41
+          trigger: 'axis',
42
+          axisPointer: {
43
+            type: 'shadow'
44
+          }
49
         },
45
         },
50
-        xAxis: {
51
-          data: dataAxis,
52
-          axisLabel: {
53
-            /*inside: true,*/
54
-            interval: 0,
55
-            textStyle: {
56
-              color: '#fff',
57
-              fontSize: 12
58
-
59
-            }
46
+        legend: {
47
+          data: ['发货量', '产量'],
48
+          fontFamily:'DingTalkJinBuTi',
49
+          padding: [25, 0, 0, 10],
50
+          textStyle:{
51
+            color:"#fff"
60
           },
52
           },
61
-          axisTick: {
62
-            show: false,
63
-          },
64
-          axisLine: {
65
-            show: true,
66
-            symbol: ['none', 'arrow'],
67
-            symbolOffset: 12,
68
-            lineStyle: {
69
-              color: '#fff',
70
-            }
71
-          },
72
-          z: 10
53
+          itemWidth: 11,
54
+          itemHeight: 11,
73
         },
55
         },
74
-        yAxis: {
75
-          type: 'value',
76
-          name: '单位:元',
77
-          axisLine: {
78
-            show: true,
79
-            symbol: ['none', 'arrow'],
80
-            symbolOffset: 12,
81
-            lineStyle: {
82
-              color: '#fff',
83
-            }
84
-          },
85
-          axisTick: {
86
-            show: false
87
-          },
88
-          axisLabel: {
89
-            textStyle: {
90
-              color: '#fff',
91
-              fontSize: 12
56
+        // toolbox: {
57
+        //   show: true,
58
+        //   orient: 'vertical',
59
+        //   left: 'right',
60
+        //   top: 'center',
61
+        //   feature: {
62
+        //     mark: { show: true },
63
+        //     dataView: { show: true, readOnly: false },
64
+        //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
65
+        //     restore: { show: true },
66
+        //     saveAsImage: { show: true }
67
+        //   }
68
+        // },
69
+        //   xAxis: {
70
+        //     data: dataAxis,
71
+        //     axisTick: {
72
+        //       show: false,
73
+        //     },
74
+        //     axisLine: {
75
+        //       show: true,
76
+        //       symbol: ['none', 'arrow'],
77
+        //       symbolOffset: 12,
78
+        //       lineStyle: {
79
+        //         color: '#fff',
80
+        //       }
81
+        //     },
82
+        //     z: 10
83
+        //   },
84
+
85
+        xAxis: [
86
+          {
87
+            type: 'category',
88
+            axisTick: { show: false },
89
+            data: ['2月', '3月', '4月', '5月', '6月'],
90
+            axisLabel: {
91
+              /*inside: true,*/
92
+              color: "rgba(255,255,255,.6)",
93
+              interval: 0,
94
+              textStyle: {
95
+                color: '#7d7d7d',
96
+                fontSize: 12
97
+
98
+              },
99
+            },
100
+            axisLine: {
101
+              lineStyle: {
102
+                color: 'rgba(255,255,255,.1)',
103
+                type: 'dashed',
104
+              }
105
+            },
106
+            splitLine:{
107
+              show:true,
108
+              lineStyle:{
109
+                color: '#3b3b3b',
110
+                type: 'dashed',
111
+              }
92
             }
112
             }
93
           }
113
           }
94
-        },
95
-
96
-        dataZoom: [
114
+        ],
115
+        yAxis: [
97
           {
116
           {
98
-            type: 'inside'
117
+            type: 'value',
118
+            axisLine: {
119
+              lineStyle: {
120
+                color: '#7d7d7d',
121
+                type: 'dashed',
122
+              },
123
+            },
124
+            axisTick: { show: false },
125
+            axisLabel: {
126
+              formatter: "{value}吨",
127
+              textStyle: {
128
+                color: '#7d7d7d',
129
+                fontSize: 12
130
+              }
131
+            },
132
+            splitLine:{
133
+              show:true,
134
+              lineStyle:{
135
+                color: '#3b3b3b',
136
+                type: 'dashed',
137
+
138
+              }
139
+            }
99
           }
140
           }
100
         ],
141
         ],
101
         series: [
142
         series: [
102
-          { // For shadow
143
+          {
144
+            name: '产量',
103
             type: 'bar',
145
             type: 'bar',
146
+
147
+            emphasis: {
148
+              focus: 'series'
149
+            },
150
+            barWidth: 10,
151
+
104
             itemStyle: {
152
             itemStyle: {
105
-              color: 'rgba(0,0,0,0.05)'
153
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
154
+                { offset: 0, color: 'rgba(255, 206, 0, 1)' },
155
+                { offset: 0.7, color: 'rgba(255, 206, 0, 1)' },
156
+                { offset: 1, color: 'rgba(255, 206, 0, 0.3)' },
157
+              ])
106
             },
158
             },
107
-            barGap: '-100%',
108
-            barCategoryGap: '40%',
109
-            data: dataShadow,
110
-            animation: false
159
+
160
+            data: [220, 182, 191, 234, 290]
111
           },
161
           },
112
           {
162
           {
163
+            name: '发货量',
113
             type: 'bar',
164
             type: 'bar',
114
-            itemStyle: {
115
-              color: new echarts.graphic.LinearGradient(
116
-                0, 0, 0, 1,
117
-                [
118
-                  { offset: 0, color: '#0efdff' },
119
-                  { offset: 0.5, color: '#188df0' },
120
-                  { offset: 1, color: '#188df0' }
121
-                ]
122
-              )
123
-            },
165
+            barGap: 0,
166
+            barWidth: 10,
124
             emphasis: {
167
             emphasis: {
125
-              itemStyle: {
126
-                color: new echarts.graphic.LinearGradient(
127
-                  0, 0, 0, 1,
128
-                  [
129
-                    { offset: 0, color: '#2378f7' },
130
-                    { offset: 0.7, color: '#2378f7' },
131
-                    { offset: 1, color: '#0efdff' }
132
-                  ]
133
-                )
134
-              }
168
+              focus: 'series'
169
+            },
170
+            itemStyle: {
171
+              labelLine:{
172
+                show:false
173
+              },
174
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
175
+                { offset: 0, color: 'rgba(105, 255, 222, 1)' },
176
+                { offset: 0.7, color: 'rgba(105, 255, 222, 1)' },
177
+                { offset: 1, color: 'rgba(105, 255, 222, 0.3)' },
178
+              ])
135
             },
179
             },
136
-            data: data
180
+            data: [320, 332, 301, 334, 390]
137
           }
181
           }
138
         ]
182
         ]
139
-      };
183
+      }
140
       var myChart = echarts.init(document.getElementById('chartmain'));
184
       var myChart = echarts.init(document.getElementById('chartmain'));
141
       // 使用刚指定的配置项和数据显示图表。
185
       // 使用刚指定的配置项和数据显示图表。
142
       myChart.setOption(option);
186
       myChart.setOption(option);

+ 43 - 30
src/pages/tqcDataVHome/component/oneQualified.jsx

@@ -35,68 +35,83 @@ class BottomLineForSend extends Component {
35
         tooltip: {
35
         tooltip: {
36
           trigger: 'axis',
36
           trigger: 'axis',
37
           axisPointer: { type: 'shadow' },
37
           axisPointer: { type: 'shadow' },
38
+          borderColor:"rgba(105, 255, 222, 0.5)",
39
+          borderWidth:2,
40
+          padding:5,
41
+          textStyle:{
42
+            fontSize:12,
43
+            color:"#ededed"
44
+          },
45
+          formatter: '{a0}: {c0}<br />{a1}: {c1}',
46
+          backgroundColor:"#0000008a"
38
         }, "grid": {
47
         }, "grid": {
39
-          "top": "15%",
40
-          "right": "10%",
48
+          "top": "20%",
49
+          "right": "15%",
41
           "bottom": "20",
50
           "bottom": "20",
42
-          "left": "10%",
51
+          "left": "15%",
43
         },
52
         },
44
         legend: {
53
         legend: {
45
           data: ['目标一次及格率', '实际一次及格率'],
54
           data: ['目标一次及格率', '实际一次及格率'],
46
           right: 'center',
55
           right: 'center',
56
+          padding: [10, 0, 0, 15],
47
           top: 0,
57
           top: 0,
48
           textStyle: {
58
           textStyle: {
49
             color: "#fff"
59
             color: "#fff"
50
           },
60
           },
51
           itemWidth: 12,
61
           itemWidth: 12,
52
-          itemHeight: 10,
62
+          itemHeight: 5,
53
         },
63
         },
54
         "xAxis": [
64
         "xAxis": [
55
           {
65
           {
56
             "type": "category",
66
             "type": "category",
57
 
67
 
58
-            data: ['2016', '2017', '2018', '2019'],
68
+            data: ['2月', '3月', '4月', '5月', '6月'],
59
             axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
69
             axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
60
             axisLabel: {
70
             axisLabel: {
61
-              textStyle: { color: "rgba(255,255,255,.7)", fontSize: '14', },
71
+              textStyle: { color: "rgba(255,255,255,.7)", fontSize: '12', },
62
             },
72
             },
73
+            splitLine:{
74
+              show:true,
75
+              lineStyle:{
76
+                color: '#3b3b3b',
77
+                type: 'dashed',
78
+
79
+              }
80
+            }
63
 
81
 
64
           },
82
           },
65
         ],
83
         ],
66
         "yAxis": [
84
         "yAxis": [
67
           {
85
           {
68
-            "type": "value",
69
-            "name": "单位1",
70
-            "show": true,
71
-            axisTick: { show: false },
72
-            "axisLabel": {
73
-              "show": true,
74
-              color: "rgba(255,255,255,.6)"
75
-
86
+            type: 'value',
87
+            axisLine: {
88
+              lineStyle: {
89
+                color: '#7d7d7d',
90
+                type: 'dashed',
91
+              },
76
             },
92
             },
77
-            axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//左线色
78
-
79
-          },
80
-          {
81
-            "type": "value",
82
-            "name": "单位2",
83
-            "show": true,
84
             axisTick: { show: false },
93
             axisTick: { show: false },
85
-            "axisLabel": {
86
-              "show": true,
94
+            axisLabel: {
87
               formatter: "{value}",
95
               formatter: "{value}",
88
-              color: "rgba(255,255,255,.6)"
96
+              textStyle: {
97
+                color: '#7d7d7d',
98
+                fontSize: 12
99
+              }
89
             },
100
             },
90
-            axisLine: { lineStyle: { color: 'rgba(255,255,255,.1)' } },//右线色
91
-            splitLine: { show: true, lineStyle: { color: 'rgba(255,255,255,.1)' } },//x轴线
101
+            splitLine:{
102
+              show:true,
103
+              lineStyle:{
104
+                color: '#3b3b3b',
105
+                type: 'dashed',
106
+
107
+              }
108
+            }
92
           },
109
           },
93
         ],
110
         ],
94
         "series": [
111
         "series": [
95
           {
112
           {
96
             "name": "目标一次及格率",
113
             "name": "目标一次及格率",
97
             "type": "line",
114
             "type": "line",
98
-            "yAxisIndex": 1,
99
-
100
             "data": [66, 16.8, 1.33, 12.65],
115
             "data": [66, 16.8, 1.33, 12.65],
101
             lineStyle: {
116
             lineStyle: {
102
               normal: {
117
               normal: {
@@ -114,8 +129,6 @@ class BottomLineForSend extends Component {
114
           {
129
           {
115
             "name": "实际一次及格率",
130
             "name": "实际一次及格率",
116
             "type": "line",
131
             "type": "line",
117
-            "yAxisIndex": 1,
118
-
119
             "data": [0, 11.48, 18.00, 25.65],
132
             "data": [0, 11.48, 18.00, 25.65],
120
             lineStyle: {
133
             lineStyle: {
121
               normal: {
134
               normal: {

+ 51 - 42
src/pages/tqcDataVHome/component/rightBottomView.jsx

@@ -35,8 +35,8 @@ class RightBottomView extends Component {
35
       var option = {
35
       var option = {
36
 
36
 
37
         grid: {
37
         grid: {
38
-          left: '2%',
39
-          top: '1%',
38
+          left: '5%',
39
+          top: '15%',
40
           right: '5%',
40
           right: '5%',
41
           bottom: '0%',
41
           bottom: '0%',
42
           containLabel: true
42
           containLabel: true
@@ -47,16 +47,18 @@ class RightBottomView extends Component {
47
         yAxis: [{
47
         yAxis: [{
48
           axisTick: 'none',
48
           axisTick: 'none',
49
           axisLine: 'none',
49
           axisLine: 'none',
50
-          offset: '7',
51
           axisLabel: {
50
           axisLabel: {
51
+            padding:[0,25,0,0],
52
             textStyle: {
52
             textStyle: {
53
               color: '#69FFDE',
53
               color: '#69FFDE',
54
               fontSize: '16',
54
               fontSize: '16',
55
+              fontWeight: 700,
56
+              fontFamily: 'DingTalkJinBuTi',
55
             }
57
             }
56
           },
58
           },
57
           data: ['2020', '2021', '2022']
59
           data: ['2020', '2021', '2022']
58
 
60
 
59
-        }, 
61
+        },
60
         {
62
         {
61
           name: '单位:件',
63
           name: '单位:件',
62
           nameGap: '50',
64
           nameGap: '50',
@@ -73,10 +75,11 @@ class RightBottomView extends Component {
73
         }],
75
         }],
74
         legend: {
76
         legend: {
75
           data: '碳排放强度',
77
           data: '碳排放强度',
76
-          right: 'center',
77
-          top: 0,
78
+          // right: 'center',
79
+          // top: 0,
78
           textStyle: {
80
           textStyle: {
79
-            color: "#fff"
81
+            color: "#fff",
82
+            fontSize: 12
80
           },
83
           },
81
           itemWidth: 12,
84
           itemWidth: 12,
82
           itemHeight: 10,
85
           itemHeight: 10,
@@ -85,34 +88,34 @@ class RightBottomView extends Component {
85
           name: '条',
88
           name: '条',
86
           type: 'bar',
89
           type: 'bar',
87
           yAxisIndex: 0,
90
           yAxisIndex: 0,
88
-          data: [25, 30, 34],
91
+          data: [88, 73, 34],
89
           label: {
92
           label: {
90
             normal: {
93
             normal: {
91
               show: true,
94
               show: true,
92
-              position: 'right',
95
+              position: 'insideBottomLeft',
93
               formatter: function (param) {
96
               formatter: function (param) {
94
-                return param.value + '%';
97
+                return param.value;
95
               },
98
               },
96
               textStyle: {
99
               textStyle: {
97
-                color: 'rgba(255,255,255,.8)',
98
-                fontSize: '12',
100
+                color: 'rgba(255,255,255,1)',
101
+                fontSize: '15',
102
+                padding:[5,0,0,5]
99
               }
103
               }
100
             }
104
             }
101
           },
105
           },
102
-          barWidth: 15,
106
+          barWidth: 23,
103
           itemStyle: {
107
           itemStyle: {
104
             normal: {
108
             normal: {
105
-              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
106
-                offset: 0,
107
-                color: '#FFCE00'
108
-              },
109
-              {
110
-                offset: 1,
111
-                color: '#c8a20494'
112
-              }
109
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
110
+                { offset: 0, color: 'rgba(255, 206, 0, 1)' },
111
+                { offset: 0.7, color: '#ffd01d94' },
112
+                { offset: 1, color: '#ffd01d94' },
113
               ]),
113
               ]),
114
               barBorderRadius: 15,
114
               barBorderRadius: 15,
115
-            }
115
+              borderColor: "rgba(255, 206, 0, 1)",
116
+              borderWidth: 1
117
+
118
+            },
116
           },
119
           },
117
           z: 2
120
           z: 2
118
         }, {
121
         }, {
@@ -121,11 +124,12 @@ class RightBottomView extends Component {
121
           yAxisIndex: 1,
124
           yAxisIndex: 1,
122
           barGap: '-100%',
125
           barGap: '-100%',
123
           data: [99.5, 99.5, 99.5],
126
           data: [99.5, 99.5, 99.5],
124
-          barWidth: 15,
127
+          barWidth: 23,
125
           itemStyle: {
128
           itemStyle: {
126
             normal: {
129
             normal: {
127
               color: '#ffffff24',
130
               color: '#ffffff24',
128
               barBorderRadius: 15,
131
               barBorderRadius: 15,
132
+
129
             }
133
             }
130
           },
134
           },
131
           z: 1
135
           z: 1
@@ -149,19 +153,23 @@ class RightBottomView extends Component {
149
       var option = {
153
       var option = {
150
 
154
 
151
         grid: {
155
         grid: {
152
-          left: '2%',
153
-          top: '1%',
156
+          left: '0%',
157
+          top: '15%',
154
           right: '5%',
158
           right: '5%',
155
           bottom: '0%',
159
           bottom: '0%',
156
           containLabel: true
160
           containLabel: true
157
         },
161
         },
158
         xAxis: [{
162
         xAxis: [{
159
           show: false,
163
           show: false,
164
+          inverse: true,
160
         }],
165
         }],
161
         yAxis: [{
166
         yAxis: [{
162
           axisTick: 'none',
167
           axisTick: 'none',
163
           axisLine: 'none',
168
           axisLine: 'none',
164
-          offset: '7',
169
+          offset: '15',
170
+          axisLine: {
171
+            onZero: false
172
+          },
165
           axisLabel: {
173
           axisLabel: {
166
             textStyle: {
174
             textStyle: {
167
               color: 'rgba(255,255,255,.6)',
175
               color: 'rgba(255,255,255,.6)',
@@ -170,7 +178,7 @@ class RightBottomView extends Component {
170
           },
178
           },
171
           data: ['字段1', '字段2', '字段3']
179
           data: ['字段1', '字段2', '字段3']
172
 
180
 
173
-        }, 
181
+        },
174
         {
182
         {
175
           name: '单位:件',
183
           name: '单位:件',
176
           nameGap: '50',
184
           nameGap: '50',
@@ -189,33 +197,32 @@ class RightBottomView extends Component {
189
           name: '条',
197
           name: '条',
190
           type: 'bar',
198
           type: 'bar',
191
           yAxisIndex: 0,
199
           yAxisIndex: 0,
192
-          data: [25, 30, 34],
200
+          data: [25, 55, 88],
193
           label: {
201
           label: {
194
             normal: {
202
             normal: {
195
               show: true,
203
               show: true,
196
-              position: 'right',
204
+              position: 'insideRight',
197
               formatter: function (param) {
205
               formatter: function (param) {
198
-                return param.value + '%';
206
+                return param.value;
199
               },
207
               },
200
               textStyle: {
208
               textStyle: {
201
-                color: 'rgba(255,255,255,.8)',
202
-                fontSize: '12',
209
+                color: 'rgba(255,255,255,1)',
210
+                fontSize: '15',
211
+                padding:[5,5,0,0]
203
               }
212
               }
204
             }
213
             }
205
           },
214
           },
206
-          barWidth: 15,
215
+          barWidth: 23,
207
           itemStyle: {
216
           itemStyle: {
208
             normal: {
217
             normal: {
209
-              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
210
-                offset: 0,
211
-                color: '#03c893'
212
-              },
213
-              {
214
-                offset: 1,
215
-                color: '#0091ff'
216
-              }
218
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
219
+                { offset: 1, color: '#69FFDE' },
220
+                { offset: 0.75, color: '#69FFDE' },
221
+                { offset: 0, color: 'rgb(83 211 183 / 15%)' },
217
               ]),
222
               ]),
218
               barBorderRadius: 15,
223
               barBorderRadius: 15,
224
+              borderColor: "#69FFDE",
225
+              borderWidth: 1
219
             }
226
             }
220
           },
227
           },
221
           z: 2
228
           z: 2
@@ -225,7 +232,7 @@ class RightBottomView extends Component {
225
           yAxisIndex: 1,
232
           yAxisIndex: 1,
226
           barGap: '-100%',
233
           barGap: '-100%',
227
           data: [99.5, 99.5, 99.5],
234
           data: [99.5, 99.5, 99.5],
228
-          barWidth: 15,
235
+          barWidth: 23,
229
           itemStyle: {
236
           itemStyle: {
230
             normal: {
237
             normal: {
231
               color: '#ffffff24',
238
               color: '#ffffff24',
@@ -250,10 +257,12 @@ class RightBottomView extends Component {
250
 
257
 
251
     return (
258
     return (
252
       <div className={["eacharView cbRightBottomView"]}>
259
       <div className={["eacharView cbRightBottomView"]}>
260
+        <span className="right_b_tip1">碳排放强度</span>
253
         <div id="echarts9"></div>
261
         <div id="echarts9"></div>
254
         {/* <div className="fonts">
262
         {/* <div className="fonts">
255
 
263
 
256
         </div> */}
264
         </div> */}
265
+        <span className="right_b_tip2">碳排放总量/万吨</span>
257
         <div id="echarts8"></div>
266
         <div id="echarts8"></div>
258
       </div>
267
       </div>
259
     )
268
     )

+ 3 - 3
src/pages/tqcDataVHome/view.jsx

@@ -2,7 +2,7 @@
2
  * @Author: dayan_hjm 
2
  * @Author: dayan_hjm 
3
  * @Date: 2023-10-25 10:32:44 
3
  * @Date: 2023-10-25 10:32:44 
4
  * @Last Modified by: dayan_hjm
4
  * @Last Modified by: dayan_hjm
5
- * @Last Modified time: 2023-10-25 16:46:16
5
+ * @Last Modified time: 2023-10-25 17:48:42
6
  */
6
  */
7
 /*
7
 /*
8
  * @Author: dayan_hjm 
8
  * @Author: dayan_hjm 
@@ -157,7 +157,7 @@ class Home extends Component {
157
               </div>
157
               </div>
158
             </div>
158
             </div>
159
 
159
 
160
-            <div class="center_box2 animate__animated animate__fadeInDown animate__slower">
160
+            <div class="center_box2 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
161
               <div className="center_box">
161
               <div className="center_box">
162
                 <p className="topMsg_title">库存金额</p>
162
                 <p className="topMsg_title">库存金额</p>
163
                 <div className="topMsg_content">
163
                 <div className="topMsg_content">
@@ -178,7 +178,7 @@ class Home extends Component {
178
           </div>
178
           </div>
179
 
179
 
180
           <div className="centerCon">
180
           <div className="centerCon">
181
-            <div class="topMsg3 animate__animated animate__fadeInDown animate__slower">
181
+            <div class="topMsg3 animate__animated animate__fadeInUp animate__slower">
182
               <div className="topMsg">
182
               <div className="topMsg">
183
                 <div className="topMsg2">
183
                 <div className="topMsg2">
184
                   <div className="topMsg_content">
184
                   <div className="topMsg_content">