feat: 联调

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-11-14 17:48:54
+ * @Last Modified time: 2023-11-16 16:23:00
  */
 
 @import url("../../themes/themes.less");
@@ -554,7 +554,7 @@
 
         .bottomContent2 {
           width: 100%;
-          height: 42%;
+          height: 28%;
         }
 
         .bottomContent {
@@ -598,7 +598,7 @@
 
       .rightContent .bottomContent2 {
         width: 100%;
-        height: 28%;
+        height: 100%;
       }
 
       .rightContent .bottomContent {

src/pages/gvc/api.js

@@ -73,61 +73,61 @@ export function momeyService(params) {
 }
 
 
-/**百万工时损工率   产量计划完成率*/
-export function timeService(params) {
+/**左侧数据*/
+export function leftService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1356250124518724729",
+    url: "/dataengine-center-oneservice/list/1357592107129541992",
     method: "POST",
     data: {
-      "apiId": "1356250124518724729",
-      "appKey": "200000134",
+      "apiId": "1357592107129541992",
+      "appKey": "200000135",
       "env": "PROD",
       "reqProtocol": 1,
       "returnFields": [
-        "indexName",
-        "factoryName",
-        "indexValue"
+        "prodCode",
+        "production",
+        "inventory"
       ],
       "pageNum": 1,
       "pageSize": 10,
       "useResultCache": false
     },
     headers: {
-      sign: '46847fe90889330f13cdc3318d848d45',
+      sign: '2d35f0b798fe2cc8443f95aed6da466a',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1356250124518724729',
-      appKey: '200000134',
+      apiId: '1357592107129541992',
+      appKey: '200000135',
       execType: '3',
       env: 'PROD',
     }
   });
 }
 
-/**产值+发货量+产量+库存*/
-export function numberService(params) {
+/**累计销量客户*/
+export function rollService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1356243326548087867",
+    url: "/dataengine-center-oneservice/list/1357509594900108615",
     method: "POST",
     data: {
-      "apiId": "1356243326548087867",
-      "appKey": "200000134",
+      "apiId": "1357509594900108615",
+      "appKey": "200000135",
       "env": "PROD",
       "reqProtocol": 1,
       "returnFields": [
-        "indexName",
-        "indexValue"
+        "customerName",
+        "salesQty"
       ],
       "pageNum": 1,
       "pageSize": 10,
       "useResultCache": false
     },
     headers: {
-      sign: '2f079b53e1e63b753bb6f9807f6c6818',
+      sign: '839f9217d1cf81ec03ff6ccf54c86e37',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1356243326548087867',
-      appKey: '200000134',
+      apiId: '1357509594900108615',
+      appKey: '200000135',
       execType: '3',
       env: 'PROD',
     }

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-13 16:14:33
+ * @Last Modified time: 2023-11-16 17:05:05
  */
 
 import React, { useState, useEffect, Component } from "react";
@@ -13,9 +13,9 @@ import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import { Progress } from 'antd';
-import { getArrMax } from "@utils/util";
+import { getArrMax,sortby } from "@utils/util";
 import {
-  dataengineCenterOneservice,
+  rollService,
 } from "../api";
 import { get, } from "lodash";
 
@@ -27,107 +27,35 @@ class RightBottomView extends Component {
     super(props, context);
     this.store = mod;
     this.state = {
-      data_item: [
-        {
-          name: '很长的很长的很长的很长的很长的很长的很长的布置岛实业有限公司',
-          num: 666969988666969988666969988666969988,
-          percent:99.5
-        },
-        {
-          name: '布置岛实业有限公司',
-          num: 966,
-          percent:95.5
-
-        },
-        {
-          name: '布置岛实业有限公司',
-          num: 666969988,
-          percent:85.5
-        },
-        {
-          name: '布置岛实业有限公司',
-          num: 666969988,
-          percent:59.5
-
-        },
-        {
-          name: '布置岛实业有限公司',
-          num: 666969988,
-          percent:48.5
-
-        },
-        {
-          name: '布置岛实业有限公司',
-          num: 36,
-          percent:6
-
-        },
-        {
-          name: '布置岛实业有限公司',
-          num: 666969988,
-          percent:78
-        },
-        {
-          name: '布置岛实业有限公司',
-          num: 666969988,
-          percent:45
-        },
-        {
-          name: '布置岛实业有限公司',
-          num: 666969988,
-          percent:36
-        },
-        {
-          name: '布置岛实业有限公司',
-          num: 666969988,
-          percent:36
-        },
-        {
-          name: '布置岛实业有限公司',
-          num: 666969988,
-          percent:98
-        },
-        {
-          name: '布置岛实业有限公司',
-          num: 666969988,
-          percent:65
-        },
-        {
-          name: '布置岛实业有限公司',
-          num: 666969988,
-          percent:36
-        },
-      ],
+      data_item: [],
     };
   }
 
   componentDidMount() {
+    this.getUrl()
   }
 
   async getUrl() {
-    // await dataengineCenterOneservice().then(({ data=[], resultCode }) => {
-    //   if (+resultCode === 0) {
-    //     let year = [],missionsIntensity_arr = [],missionsTotal_arr = [],max1=[],max2=[];
-    //     data.map((x,i)=>{
-    //       year.unshift(x.byear)
-    //       missionsIntensity_arr.unshift(x.missionsIntensity)
-    //       missionsTotal_arr.unshift(x.missionsTotal)
-    //     });
-    //     const max_1 = getArrMax(missionsIntensity_arr);
-    //     const max_2 = getArrMax(missionsTotal_arr);
-    //     for (let index = 0; index < data.length; index++) {
-    //       max1.unshift(max_1/0.8)
-    //       max2.unshift(max_2/0.8)
-    //     }
-    //     this.setState({year,missionsIntensity_arr,missionsTotal_arr,max1,max2});
-    //       this.setData();
-    //       this.setData2();    
-    //   }
-    // });
+    await rollService().then(({ data=[], resultCode }) => {
+      if (+resultCode === 0) {
+        let data_item = [];
+        const max1 = data.sort(sortby('salesQty',false));
+        const max2 = max1?.[0]?.salesQty / 0.95 || 0;
+        data.map((x,i)=>{  
+          data_item.push({
+            name: x.customerName,
+            num: x.salesQty,
+            percent:Number(x.salesQty / max2).toFixed(2) * 100
+          })
+        });
+        this.setState({data_item});
+      }
+    });
 
   }
 
   render() {
+    const { data_item } = this.state;
     const settings = {
       dots: false,
       arrows:false,
@@ -135,7 +63,7 @@ class RightBottomView extends Component {
       autoplay: true,
       autoplaySpeed: 2500,//自动播放的时间
       // fade: true,//是否采用淡入淡出的效果  竖着的滚动方式不能添加此动效
-      slidesToShow: 8,
+      slidesToShow: data_item.length >= 8 ? 8 : data_item.length,
       slidesToScroll: 1,
       vertical: true,
       verticalSwiping: true,
@@ -146,9 +74,8 @@ class RightBottomView extends Component {
         console.log("after change", currentSlide);
       }
     };
-    const { data_item } = this.state;
     return (
-      <div className={["eacharView cbRightBottomView slider_item_box"]}>
+      <div className={["eacharView cbRightBottomView slider_item_box"]} style={{height: data_item.length > 8 ? 'auto' : "100%"}}>
         <p className="title_">累计销量客户/吨</p>
         <Slider {...settings}>
           {

src/pages/gvc/style.less

@@ -35,6 +35,7 @@
             width: 73%;
           }
         }
+
         @media (min-height: 900px) {
           .alls {
             width: 64%;
@@ -59,7 +60,7 @@
           height: 70%;
           margin-top: 5%;
           margin-left: 1%;
-          padding-right: 8%;
+          padding-right: 7%;
 
           >ul {
             width: 100%;
@@ -83,7 +84,7 @@
                 justify-content: center;
 
                 >div {
-                  width: 60%;
+                  width: 51%;
                   position: relative;
                   display: block;
 
@@ -117,11 +118,11 @@
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
-                margin-top: 0.5em;
+                margin-top: 1em;
                 font-weight: normal;
                 font-size: 0.9em;
                 color: #CDF1FF;
-                padding: 0.8em 0.9em 0.2em;
+                padding: 0.8em 0.5em 0.2em;
                 background: linear-gradient(0deg, #ffffff26 0%, #ffffff00 100%);
                 border-radius: 0.5em;
 
@@ -136,6 +137,21 @@
           }
         }
 
+        @media (max-height: 900px) {
+          .leftContent li {
+            height: 15% !important;
+
+            .text {
+              width: 107% !important;
+              margin-top: 1em !important;
+
+              .topMsg_number {
+                font-size: 1em !important;
+              }
+            }
+          }
+        }
+
         .centerCon {
           width: 62%;
           height: 80%;
@@ -153,6 +169,7 @@
             margin: 0% 0 0 -3%;
           }
         }
+
         @media (min-height: 900px) {
           .centerCon {
             width: 62%;
@@ -160,7 +177,7 @@
             padding: 0;
             position: relative;
             margin: 0% 0 0 -1%;
-            }
+          }
         }
 
         @media (min-height: 1000PX) {
@@ -193,6 +210,7 @@
             box-sizing: border-box;
             font-size: 0.9em;
             color: #CDF1FF;
+
             .nums {
               font-size: 1.3em;
               color: #69FFDE;
@@ -265,7 +283,8 @@
               }
             }
           }
-          li:hover{
+
+          li:hover {
             background: linear-gradient(0deg, #42ca9840 0%, #42ca9800 98%);
           }
         }
@@ -274,9 +293,9 @@
           width: 15%;
           position: absolute;
           right: 0;
-          bottom: 16%;
+          bottom: 10%;
           z-index: 9;
-          height: auto;
+          height: 60%;
 
           .title_ {
             text-align: left;
@@ -290,6 +309,10 @@
             color: #F1E9E0;
             margin-bottom: 0.6em;
           }
+          .eacharView{
+            height: auto;
+            overflow: hidden;
+          }
 
           .slider_box {
             padding: 0 0.5em;
@@ -306,7 +329,7 @@
             font-weight: normal;
 
             >p {
-              width: 59%;
+              width: 83%;
               display: flex;
               overflow: hidden;
               text-overflow: ellipsis;
@@ -342,9 +365,23 @@
           }
 
         }
-      }
 
+        @media (min-height: 800px) {
+          .rightContent {
+            bottom: 3%;
+          }
+        }
+        @media (min-height: 900px) {
+          .rightContent {
+            bottom: 3%;
+          }
+        }
+        @media (min-height: 1000px) {
+          .rightContent {
+            bottom:-5%;
+          }
+        }
+      }
     }
-
   }
 }

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-15 16:30:25
+ * @Last Modified time: 2023-11-16 16:47:16
  */
 
 import React, { useState, useEffect, Component } from "react";
@@ -14,8 +14,8 @@ import mod from './mod';
 import { toJS } from "mobx";
 import RightBottomView from "./component/rightBottomView.jsx";
 import {
-  timeService,
-  numberService,
+  leftService,
+  rollService,
   checkToken,
   updateTimeService
 } from "./api";
@@ -32,26 +32,6 @@ class Gvc extends Component {
     this.store = mod;
     this.state = {
       LeftHtml: [
-        {
-          txt_name: '碳酸锂',
-          num1: 1222,
-          num2: 1000,
-        },
-        {
-          txt_name: '氢氧化钠',
-          num1: 2525,
-          num2: 25,
-        },
-        {
-          txt_name: '氯化锂',
-          num1: 3654,
-          num2: 7541,
-        },
-        {
-          txt_name: '金属锂',
-          num1: 45,
-          num2: 698,
-        },
       ],
       updateTime: '',
       changGif: false,
@@ -85,11 +65,10 @@ class Gvc extends Component {
   }
   componentDidMount() {
     // this.fontMsgChange();
-    // this.getUrl();
+    this.getUrl();
     // this.getUrl2()
-    // this.getUrl3();
+    this.getUrl3();
     setTimeout(() => {
-
       this.videoStart();
     }, 200)
     setTimeout(() => {
@@ -154,28 +133,27 @@ class Gvc extends Component {
   }
 
   async getUrl() {
-    await timeService().then(({ data = [], resultCode }) => {
+    await leftService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
-        let plannedCompletionData = [], manHourData = [];
+        let LeftHtml = [], name_ = ["碳酸锂", '氢氧化钠', '氯化锂', '金属锂'];
         data.map((x, i) => {
-          if (x.indexName == '产量计划完成率') {
-            plannedCompletionData.push({
-              name: x.factoryName,
-              value: x.indexValue * 100,
-            })
-          } else {
-            manHourData.push({
-              name: x.factoryName,
-              value: x.indexValue * 100,
-            })
+          if (i >= 4) {
+            return
           }
+          LeftHtml.push(
+            {
+              txt_name: name_[i],
+              num1: x.production,
+              num2: x.inventory,
+            }
+          );
         });
-        this.setState({ plannedCompletionData, manHourData, plannedCompletionNum: 1, manHourNum: 1 });
+        this.setState({ LeftHtml });
       }
     });
   }
   async getUrl2() {
-    await numberService().then(({ data = [], resultCode }) => {
+    await rollService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
         let totalValue = 0, yearDecline = 0, yearSend = 0, productInventory = 0;
         data.map((x, i) => {
@@ -262,7 +240,7 @@ class Gvc extends Component {
   render() {
     const stores = this.store.state;
     let { totalValue, yearDecline, yearSend, imgMsgData } = this.store.state;
-    let { LeftHtml } = this.state;
+    let { LeftHtml,updateTime } = this.state;
     return (
       <div className={[styles.home_box + ' home_box']}>
         <div className={"all_box"}>
@@ -359,6 +337,9 @@ class Gvc extends Component {
               </div>
             </div>
             <div className="bottom_box">
+              <p style={{ color: "#6a818d", lineHeight: '2px',width: '100%',textAlign: "center" }}>
+                更新时间 : {updateTime}
+              </p>
             </div>
           </div>
         </div>

src/utils/util.js

@@ -29,6 +29,17 @@ export function getParams(url = "") {
   return args;
 }
 
+
+export function sortby(prop, rev = true) {
+  // prop 属性名
+  // rev  升序降序 默认升序
+   return function(a, b) {
+      var val1 = a[prop]; 
+      var val2 = b[prop]; 
+      return rev ? val1 - val2 : val2 - val1;
+   }
+}
+
 /**下载文件*/
 export function download(param) {
   // 文件类型是否为pdf