Merge branch 'feature/大屏2' into dev

config/webpack.common.js

@@ -81,6 +81,21 @@ module.exports = {
         ],
       },
       {
+        test: /* 匹配文件 */ /\.gif/,
+        include: [path.resolve(__dirname, "../node_modules")],
+        use: /* 使用loader */[{
+          loader: "url-loader",
+          options: /* 加载器相关的配置项 */ {
+            name: 'static/[name].[ext]',
+            limit: /* <=limit的图片转换成base64 */ 8196,
+            mimetype: "gif",
+            fallback: 'file-loader',
+            publicPath: '../../' //采用根路径
+          },
+        },
+        ],
+      },
+      {
         test: /* 匹配文件 */ /\.svg/,
         include: [path.resolve(__dirname, "../src")],
         use: /* 使用loader */[{

package.json

@@ -56,12 +56,14 @@
     "echarts-wordcloud": "2.0.0",
     "es6-symbol": "^3.1.3",
     "eslint": "^7.25.0",
+    "slick-carousel": "^1.8.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-react": "^7.23.2",
     "express-mock-server": "^3.2.0",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "file-loader": "^6.2.0",
     "happypack": "^5.0.1",
+    "react-slick": "^0.29.0",
     "html-webpack-plugin": "^4.2.2",
     "http-server": "^0.12.3",
     "husky": "^6.0.0",

src/App/index.less

@@ -1101,6 +1101,7 @@ li[role="menuitem"] {
 
           .item_c {
             width: 90px;
+            //溢出隐藏
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;

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-08 17:15:55
+ * @Last Modified time: 2023-11-21 17:43:56
  */
 
 @import url("../../themes/themes.less");
@@ -268,6 +268,7 @@
         color: #fff;
         margin: 0;
         font-size: 30px;
+
       }
     }
 
@@ -349,8 +350,8 @@
       position: absolute;
       left: 0;
       top: 0;
-      width: 100%;
-      background: url(../imgs/dataVimg/homeBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40;
+      width: 98.5%;
+      background: url(../imgs/dataVimg/homeBgDataV.png) no-repeat 0 -10em / 108% 120% #041b40;
       height: 100%;
       display: flex;
       align-items: center;
@@ -553,7 +554,7 @@
 
         .bottomContent2 {
           width: 100%;
-          height: 42%;
+          height: 28%;
         }
 
         .bottomContent {
@@ -597,7 +598,7 @@
 
       .rightContent .bottomContent2 {
         width: 100%;
-        height: 28%;
+        height: 100%;
       }
 
       .rightContent .bottomContent {
@@ -1145,7 +1146,7 @@
   .cbRightBottomView {
     flex-wrap: wrap;
     position: relative;
-
+    
     .right_b_tip2 {
       width: 46%;
       display: block;
@@ -1166,7 +1167,13 @@
       text-align: right;
     }
   }
-
+.slider_item_box{
+  justify-content: left;
+  .slick-slider{
+    width: 90%;
+    color: #fff;
+  }
+}
   .testDiv {
     width: 4em;
     display: flex;

src/components/SimpleSlider/index.js

@@ -0,0 +1,98 @@
+/*
+ * @Author: dayan_hjm 轮播图滑动组件
+    settings：{
+        title:true,//是否开启移上title展示
+        clickUrl:true,//是否开启点击转跳功能
+        type 1=茶百道  2=雅居乐
+        dots: true,//是否显示小圆点索引
+        autoplay: true,//是否自动播放
+        infinite: true,//是否无限循环
+        autoplaySpeed: 2000,//自动播放的时间
+        fade: true,//是否采用淡入淡出的效果
+        slidesToShow: 2,一行显示多少个
+        slidesPerRow:1,//行显示多少个
+          slidesToScroll: 5 //每次滚动多少个元素
+    }
+    //dataArr 轮播的数据
+ * @Date: 2023-03-24 15:32:00 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-08-17 14:19:43
+ */
+import utils from "@utils/index";
+import { crossMenuClick } from "@utils/util";
+import $store from "@store/";
+import React, { useState, useEffect, Component } from "react";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css"; 
+import "slick-carousel/slick/slick-theme.css";
+// import "./slick.css";
+// import "./slick-theme.css";
+import { Tooltip } from "antd";
+
+function SimpleSlider(props) {
+    const settings = props.settings
+    const data_ = props.dataArr && props.dataArr instanceof Array ? props.dataArr : [
+        // {
+        //     backGroupPicUrl:"http://14.29.205.92:9081/static/bg_sChaBaiDao@2x.png"
+        // },
+        // {
+        //     backGroupPicUrl:"http://14.29.205.92:9081/static/bg2.png"
+        // },
+    ];
+    return (
+        <div className='swiper-content'>
+            <Slider {...settings} className="swiper-container">
+                {
+                    settings.type == 1 ? data_.map(url => {
+                        return <div className="swiper-div" style={{ cursor: settings.clickUrl && url.redirectUrl ? "pointer" : "auto" }} onClick={() => {
+                            // url.redirectUrl = "http://localhost:9003/transfer.html#/home/menu"
+                            if (!settings.clickUrl) { return }
+                            if (url.redirectUrl) {
+                                let newUrl = url.redirectUrl.replace(window.location.origin + window.location.pathname, "");
+                                newUrl = newUrl.replace("?ticket=&ssoEmpId=", "");
+                                newUrl = newUrl.replace("#", "");
+                                props.sliceClick(newUrl);
+                            }
+                        }}>
+                            <Tooltip title={settings.title ? url.alias : ""} placement="right">
+                            <img src={url.backGroupPicUrl || require("@assets/imgs/login/yunXiBg.png").default} style={{ width: "90%" }} />
+                            </Tooltip>
+                        </div> 
+                    }) : data_.map((card,index) => {
+                        let activeTree = utils.findNodeTree([...$store.sysMenu.norList, ...$store.sysMenu.menuList], card.positive, "resourceUrl");
+                        if(activeTree){card.has_positive = card.positive}else{card.has_positive = ''};
+                        console.log('dy-------',card.has_positive)
+                        return (
+                            <div className={`nor_card ${card.has_positive ? 'cur' : ''}` } onClick={()=>{
+                                if(!card.has_positive){return}
+                                let activeTree = utils.findNodeTree([...$store.sysMenu.norList, ...$store.sysMenu.menuList], card.has_positive, "resourceUrl");
+                                if(activeTree){
+                                    let activeTreeF = utils.findNodeTree([...$store.sysMenu.norList, ...$store.sysMenu.menuList], activeTree.parentId, "resourceId");
+                                    crossMenuClick(activeTreeF.resourceUrl, activeTree.resourceUrl, ((res) => {
+                                        props.history.push(res);
+                                      }))
+                                }
+                            }}>
+                                {/* <Tooltipplacement="right" defaultVisible="true"> */}
+                                    <img src={card.moveDownPicUrl || require(`@assets/imgs/home/agileHome${index + 1}.png`).default} width="95%" className="showImg" />
+                                    <img
+                                        className="tips_img hideimg"
+                                        src={card.has_positive ?card.moveDownPicUrl :(card.moveUpPicUrl || require(`@assets/imgs/home/agileHome6.png`).default)}
+                                        width="95%"
+                                    />
+                                    {
+                                        settings.title && card.alias ? <span class="tipsBox">{card.alias}</span> : null
+                                    }
+                                {/* </Tooltip> */}
+                            </div>
+                        )
+                    })
+                }
+            </Slider>
+            <img src={require("@assets/imgs/login/bg1.png").default} style={{ display: "none" }} />
+            <img src={require("@assets/imgs/login/bg2.png").default} style={{ display: "none" }} />
+            <img src={require("@assets/imgs/login/bg3.png").default} style={{ display: "none" }} />
+        </div>
+    )
+}
+export default SimpleSlider;

src/components/SimpleSlider/slick-theme.css

@@ -0,0 +1,165 @@
+@charset 'UTF-8';
+
+.slick-dots,
+.slick-next,
+.slick-prev {
+    position: absolute;
+    display: block;
+    padding: 0
+}
+
+.slick-dots li button:before,
+.slick-next:before,
+.slick-prev:before {
+    font-family: slick;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale
+}
+
+.slick-loading .slick-list {
+    background: yellow
+}
+
+.slick-next,
+.slick-prev {
+    font-size: 0;
+    line-height: 0;
+    top: 50%;
+    width: 20px;
+    height: 20px;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+    cursor: pointer;
+    color: transparent;
+    border: none;
+    outline: 0;
+    background: 0 0
+}
+
+.slick-next:focus,
+.slick-next:hover,
+.slick-prev:focus,
+.slick-prev:hover {
+    color: transparent;
+    outline: 0;
+    background: 0 0
+}
+
+.slick-next:focus:before,
+.slick-next:hover:before,
+.slick-prev:focus:before,
+.slick-prev:hover:before {
+    opacity: 1
+}
+
+.slick-next.slick-disabled:before,
+.slick-prev.slick-disabled:before {
+    opacity: .25
+}
+
+.slick-next:before,
+.slick-prev:before {
+    font-size: 20px;
+    line-height: 1;
+    opacity: .75;
+    color: #fff
+}
+
+.slick-prev {
+    left: -25px
+}
+
+[dir=rtl] .slick-prev {
+    right: -25px;
+    left: auto
+}
+
+.slick-prev:before {
+    content: '←'
+}
+
+.slick-next:before,
+[dir=rtl] .slick-prev:before {
+    content: '→'
+}
+
+.slick-next {
+    right: -25px
+}
+
+[dir=rtl] .slick-next {
+    right: auto;
+    left: -25px
+}
+
+[dir=rtl] .slick-next:before {
+    content: '←'
+}
+
+.slick-dotted.slick-slider {
+    margin-bottom: 30px
+}
+
+.slick-dots {
+    bottom:-18px;
+    width: 100%;
+    margin: 0;
+    list-style: none;
+    text-align: center
+}
+
+.slick-dots li {
+    position: relative;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin: 0 5px;
+    padding: 0;
+    cursor: pointer
+}
+
+.slick-dots li button {
+    font-size: 0;
+    line-height: 0;
+    display: block;
+    width: 20px;
+    height: 20px;
+    padding: 5px;
+    cursor: pointer;
+    color: transparent;
+    border: 0;
+    outline: 0;
+    background: 0 0
+}
+
+.slick-dots li button:focus,
+.slick-dots li button:hover {
+    outline: 0
+}
+
+.slick-dots li button:focus:before,
+.slick-dots li button:hover:before {
+    opacity: 1
+}
+
+.slick-dots li button:before {
+    font-size: 13px;
+    line-height: 20px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    content: '•';
+    text-align: center;
+    opacity: .25;
+    color: #000
+}
+
+.slick-dots li.slick-active button:before {
+    opacity: .75;
+    color: #000
+}
+
+/*# sourceMappingURL=slick-theme.min.css.map */

src/components/SimpleSlider/slick.css

@@ -0,0 +1,112 @@
+.swiper-content{
+    width:100%;
+    height: calc(100% - 56px);
+}
+.swiper-div{
+    height: 100%;
+    overflow: hidden; 
+}
+.slick-list,
+.slick-slider,
+.slick-track {
+    position: relative;
+    display: block
+}
+
+.slick-loading .slick-slide,
+.slick-loading .slick-track {
+    visibility: hidden
+}
+
+.slick-slider {
+    height: 100%;
+    box-sizing: border-box;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent
+}
+
+.slick-list {
+    height: 100%;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+}
+
+.slick-list:focus {
+    outline: 0
+}
+
+.slick-list.dragging {
+    cursor: pointer;
+    cursor: hand
+}
+
+.slick-slider .slick-list,
+.slick-slider .slick-track {
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    -ms-transform: translate3d(0, 0, 0);
+    -o-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0)
+}
+
+.slick-track {
+    top: 0;
+    left: 0
+}
+
+.slick-track:after,
+.slick-track:before {
+    display: table;
+    content: ''
+}
+
+.slick-track:after {
+    clear: both
+}
+
+.slick-slide {
+    display: none;
+    float: left;
+    height: 100%;
+    min-height: 1px
+}
+
+[dir=rtl] .slick-slide {
+    float: right
+}
+
+.slick-slide img {
+    display: block
+}
+
+.slick-slide.slick-loading img {
+    display: none
+}
+
+.slick-slide.dragging img {
+    pointer-events: none
+}
+
+.slick-initialized .slick-slide {
+    display: block
+}
+
+.slick-vertical .slick-slide {
+    display: block;
+    height: auto;
+    border: 1px solid transparent
+}
+
+.slick-arrow.slick-hidden {
+    display: none
+}
+
+/*# sourceMappingURL=slick.min.css.map */

src/index.js

@@ -78,9 +78,9 @@ if (ticket && ssoEmpId) {
 // reportWebVitals();
 
 if (process.env.NODE_ENV === "production") {
-  document.title = "运营数据中心";
+  document.title = "天齐锂业·数据大屏";
 } else {
-  document.title = "(测试)运营数据中心";
+  document.title = "(测试)天齐锂业·数据大屏";
 }
 
 // 获取socket id , 建立socket连接

src/pages/frame/component/top/view.jsx

@@ -576,50 +576,8 @@ export default observer(function (props) {
     console.log($store.app.avator);
   }, []);
 
-  //表单配置
-  const formItemLayout = {
-    labelCol: { span: 4 },
-    wrapperCol: { span: 20 },
-  };
-  /**点击联系我们 */
-  const handleContact = () => {
-    setShowContactModalVisible(true);
-  };
-  /**点击转换主题 */
-  const changeThemesStyle = () => {
-    const name = Cookie.get("themesName");
-    Cookie.set("themesName", name == "chaBaiDao" ? "yaLeJu" : "chaBaiDao");
-    window.location.reload();
-  };
 
 
-  /**提交联系我们 */
-  const handleContactOk = () => {
-    //判断是否是固定的负责人
-    form.validateFields().then(() => {
-      // let isFixDirector =
-      //   probType === 0 ? copyPeople : directorInfo.itManagerAccountId;
-      // let copyAggregate = [...new Set([copyPeople, isFixDirector])];
-      form.setFieldsValue({
-        problemChargePersonId: "1500661792542593026",
-        problemSendPersonId: ["1500661792542593026"],
-      });
-      const config = form.getFieldValue();
-      //固定accountId为1500661792542593026
-      const accountId = sessionStorage.getItem("accountId");
-      const params = Object.assign({ ...config }, { accountId });
-      feedBack(params).then(({ data, resultCode }) => {
-        if (+resultCode === 0) {
-          message.success("反馈成功");
-        }
-      });
-      form.resetFields();
-      setIptValue(0);
-      setShowContactModalVisible(false);
-      getUnReadNum();
-    });
-  };
-
   //获取 未读消息的数量
   const getUnReadNum = () => {
     let accountId = sessionStorage.getItem("accountId");
@@ -630,83 +588,11 @@ export default observer(function (props) {
     //   }
     // });
   };
-
-  /**控制输入字数 */
-  let timer = null;
-  const handleInput = (e) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      setIptValue(e.target.value.length);
-    }, 500);
-  };
-
-  //处理 消息 详情
-  const goHandleMessage = () => {
-    const { messageDetailType, messageContentObjectId, messageType } = detailInfo || {};
-    if (messageType == 'System_bulletin' && (messageDetailType == 'newResourceMsg' || messageDetailType == 'fineReportChange' || messageDetailType == 'fineDataResourceChange') && !hasPermission) {
-      message.warning("该报表无权限!");
-      return;
-    }
-    switch (messageDetailType) {
-      case "fineDataResourceChange":
-        //根据id 找到 该元数据
-        getMenuDesc({ resourceId: messageContentObjectId }).then(
-          ({ data, resultCode }) => {
-            if (+resultCode === 0) {
-              $store.app.setMetaData({
-                data,
-                visible: true,
-              });
-            }
-          }
-        );
-        break;
-      case "fineReportChange":
-        getReportInfo({ resourceId: messageContentObjectId }).then(
-          ({ data, resultCode }) => {
-            if (+resultCode === 0) {
-              switchPage({
-                // pageId: relationship[key].pageId,
-                modelName: data.resourceName,
-                pageName: data.resourceName,
-                pageUrl: data.resourceUrl,
-                resourceId: data.resourceId,
-                visitId: sessionStorage.getItem("unionId"),
-              });
-              let dataOpt = {
-                id: data.resourceId,
-                name: data.resourceName,
-                openType: "self",
-                path: data.resourceUrl,
-                type: data.resourceType,
-              };
-              dealDiffSheetType(data).then((response) => {
-                $store.app.setNavList({ ...dataOpt });
-                $store.app.setCurNav(dataOpt.path);
-                if (response.type === "sys") {
-                  history.push(response.link);
-                } else {
-                  history.push(`/home/outer/${response.activeItem.resourceId}`);
-                }
-              });
-            }
-          }
-        );
-        break;
-      default:
-        setIsShowDetail(false);
-    }
-
-  };
-
-  const userAvator = sessionStorage.getItem("avator");
-  const {
-    createTime,
-    messageContent,
-    messageDetailType,
-    messageTypeValue,
-    messageSourceName,
-  } = detailMessage || {}; /**解构 当前点击的详情数据 */
+  const name_arr = {
+    "#/home/gvc":"产供销价值链",
+    "#/home/operation":"运营数据中心",
+  }
+   window.lo
   return (
     <div class="top2 animate__animated animate__fadeInDown animate__delay-1s animate__slower">
       <div className={$store.app.styleCommon.theme == 'chaBaiDao' ? [styles.top + ' top'] : styles.top}>
@@ -716,7 +602,7 @@ export default observer(function (props) {
             width="17"
           />
           <span></span>
-          <h1>运营数据中心</h1>
+          <h1>{name_arr[window.location.hash] || ''}</h1>
         </div>
         {/* {history.location.pathname === "/home/index" && (
           <>

src/pages/frame/view.jsx

@@ -458,13 +458,7 @@ export default observer(function Frame(props) {
       {/* <div className="nowifi-tip">当前网络状态不佳</div> */}
 
       {/* 正文 */}
-      <div style={history.location.pathname === "/home/index" || history.location.pathname === '/home/operation'? { display: "flex", height: '100%' } : (history.location.pathname.indexOf("/home/outer") > -1 ?{
-        overflow: "hidden",
-        display: "flex",
-        background: 'rgb(255, 255, 255)',
-        height: "100%",
-      } : {display: "flex", height: '100%'})}>
-
+      <div style={{ display: "flex", height: '100%' }}>
         {$store.sysMenu.submenuList.length > 0 && !collapsed && (
           <div
             className="movebar"
@@ -477,18 +471,11 @@ export default observer(function Frame(props) {
         {isMove && <div className="markmore"></div>}
 
         <div
-          className={`${history.location.pathname !== "/home/index" && history.location.pathname !== '/home/operation'&&
-              $store.app.navList.length > 0
-              ? (history.location.pathname.indexOf("/home/outer") > -1 ? "body_box outer_body_box" : 'body_box') : "body_box homePage"
-            }`}
+          className={"body_box homePage"}
         >
           <Navigator
             style={{
-              display:
-                history.location.pathname !== "/home/index" && history.location.pathname !== '/home/operation'&&
-                  $store.app.navList.length > 0
-                  ? "flex"
-                  : "none",
+              display:"none",
             }}
           />
           <TipMsg onRef={onRef2}></TipMsg>

src/pages/gvc/api.js

@@ -0,0 +1,230 @@
+import request from "@utils/request";
+
+/**登录*/
+export function checkToken(params) {
+  return request({
+    url: `/api/yonghong/checkToken?token=${params}`,
+    method: "GEt",
+  });
+}
+
+/**各基地库存明细 */
+export function smallMaterialService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1358057393917040084",
+    method: "POST",
+    data: {
+      "apiId": "1358057393917040084",
+      "appKey": "200000135",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "factoryCode",
+        "factoryName",
+        "prodCatgoryCode",
+        "prodCatgory",
+        "indexValue",
+      ],
+      "pageNum": 1,
+      "pageSize": 50,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'fdb551d8c6a01d87c58970d519752d81',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1358057393917040084',
+      appKey: '200000135',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**各基地日，月累计，年累计产量 */
+export function smallDayService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1358059456248976873",
+    method: "POST",
+    data: {
+      "apiId": "1358059456248976873",
+      "appKey": "200000135",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "factoryCode",
+        "factoryNameCode",
+        "dateType",
+        "indexValue"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '5f270b133af668b3631fbe7dbff9ebe4',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1358059456248976873',
+      appKey: '200000135',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**左侧数据*/
+export function leftService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1357592107129541992",
+    method: "POST",
+    data: {
+      "apiId": "1357592107129541992",
+      "appKey": "200000135",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "prodCode",
+        "production",
+        "inventory"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '2d35f0b798fe2cc8443f95aed6da466a',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1357592107129541992',
+      appKey: '200000135',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**累计销量客户*/
+export function rollService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1357509594900108615",
+    method: "POST",
+    data: {
+      "apiId": "1357509594900108615",
+      "appKey": "200000135",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "customerName",
+        "salesQty"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '839f9217d1cf81ec03ff6ccf54c86e37',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1357509594900108615',
+      appKey: '200000135',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**锂辉石库存*/
+export function bigShopService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1357489941160170789",
+    method: "POST",
+    data: {
+      "apiId": "1357489941160170789",
+      "appKey": "200000135",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "warehouseNameCode",
+        "indexValue",
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'ae4c520da5ae882455307324f75f5277',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1357489941160170789',
+      appKey: '200000135',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**个基地年累计产量，库存*/
+export function smallShopService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1357592780709598582",
+    method: "POST",
+    data: {
+      "apiId": "1357592780709598582",
+      "appKey": "200000135",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "factoryCode",
+        "production",
+        "inventory",
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'a842b5c5c462d7cacd2baad402ea94a7',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1357592780709598582',
+      appKey: '200000135',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**更新时间*/
+export function updateTimeService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356778817327502618",
+    method: "POST",
+    data: {
+      "apiId": "1356778817327502618",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "etlTime"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '4365b6564b25c852fcf0228188f48114',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356778817327502618',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+

src/pages/gvc/component/mapView2.jsx

@@ -0,0 +1,111 @@
+/*
+ * @Author: dayan_hjm 中部地图 第一段
+ * @Date: 2023-10-25 10:32:44 
+ * @Last Modified by: dayan_hjm
+ * controls 属性 : 值为 controls , 启用控制按钮 , 由于在不同的浏览器中表现不同 , 一般情况下 , 不显示控制按钮 ;
+        autoplay 属性 : 值为 autoplay , 在 Chrome 浏览器中 禁用自动播放 , 其它浏览器不禁用自动播放 ;
+        如果为视频设置静音播放 , 则可以在 Chrom 浏览器中 设置 autoplay 实现自动播放 ;
+        muted 属性 : 值为 muted , 将视频设置为静音播放 ;
+        如果为视频设置静音播放 , 则可以在 Chrom 浏览器中 设置 autoplay 实现自动播放 ;
+        width 属性 : 值为像素值 , 设置播放器宽度 ; 播放器的宽高建议只设置一个 , 避免失真 ;
+        height 属性 : 值为像素值 , 设置播放器高度 ; 播放器的宽高建议只设置一个 , 避免失真 ;
+        loop 属性 : 值为 loop , 设置播放器循环播放 ;
+        poster 属性 : 值为 图片 url 路径 , 设置视频位置等待加载时的图片 ;
+        preload 属性 :
+        设置 auto , 表示 预先加载视频 ;
+        设置 none , 表示 不预先加载视频 ;
+ * @Last Modified time: 2023-11-14 15:22:36
+ */
+import React, { useState, useEffect, Component } from "react";
+import { useHistory, useLocation, withRouter } from "react-router-dom";
+import mod from '../../tqcDataVHome/mod';
+import 'animate.css';
+@withRouter
+
+class MapViewTwo extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+      changGif: false,
+    };
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      //替换gif
+      this.setState({ changGif: true });
+      this.videoStart();
+    }, 200)
+    // setTimeout(() => {
+    //   $(".video_box_hide").hide();
+    // }, 4000)
+  }
+  videoStart() {
+    /*     Chrome 浏览器的视频自动播放策略
+        1.始终允许静音模式下自动播放
+        2.在以下的情况中，带声音播放会被允许：
+          ①用户已经与当前的域进行了交互（也就是click，tap事件）。
+          ②在桌面设备上，用户的媒体参与度指数阈值已经超过，这意味着用户之前播放过有声视频。
+          ③用户已经将网站添加到移动设备上的主屏幕或允在桌面上安装了PWA。
+        3.顶部帧可以将自动播放权限委派给其iframe，来允许自动播放声音
+        
+        媒体参与度（Media Engagement）是指用户与媒体内容进行互动的程度，可以通过多个指标来衡量。这些指标主要包括观看时间、观看率、转化率、交互行为等。
+        可以通过：chrome://media-engagement/ 查看
+     */
+    const video = document.querySelector('.video1');
+    console.log(video.play());
+
+    const model = document.querySelector('.model')
+    const btn = document.querySelector('button')
+    // 第一种方法 引导用户去与页面交互实现播放
+    async function play() {
+      try {
+        await video.play();
+        //使用await的原因是因为video.play()方法返回的是一个Promise,所以在这里我们可以对他进行一些处理
+        // model.style.display = 'none';
+        btn.removeEventListener('click', play);
+        // 如果他自动播放了就隐藏按钮，消除点击事件
+      } catch (err) {
+        // model.style.display = 'block';
+        btn.addEventListener('click', play);
+        // 如果Promise返回的是error就引导用户点击按钮，在调用play方法
+      }
+    }
+    play();
+
+    //第二种方法比较主流，类似的有网页版抖音以及B站
+    function play() {
+      video.muted = true;//设置视频为静音
+      video.play();//调用播放方法
+      const ctx = new AudioContext();
+      const canAutoPlay = ctx.state === 'running'; //通过这个可以判断出视频能不能够自动播放 如何可以它的值就是“running” 否则为"suspended"
+      // 如果是不能播放我们就执行下面的逻辑，其实就是类似于第一种方法，让用户与其交互
+      ctx.close();
+      if (canAutoPlay) {
+        video.muted = false;
+        model.style.display = 'none';
+        btn.removeEventListener('click', play);
+      }
+      else {
+        model.style.display = 'block';
+        btn.addEventListener('click', play);
+      }
+    }
+    play()
+
+  }
+
+  render() {
+    const { changGif } = this.state;
+    return (
+      <div class="video_box video_box_hide gvc_video animate__animated animate__fadeOut animate__delay-2s animate__slower">
+        <div className="alls">
+        <video src={require("@assets/imgs/gvc/video1.mp4").default} autoplay="autoplay" class="video1"></video>
+        </div>
+      </div>
+    )
+  }
+}
+export default MapViewTwo;

src/pages/gvc/component/rightBottomView.jsx

@@ -0,0 +1,107 @@
+/*
+ * @Author: dayan_hjm 累计销量客户
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-11-16 17:05:05
+ */
+
+import React, { useState, useEffect, Component } from "react";
+import styles from "../style.less";
+import { useHistory, useLocation, withRouter } from "react-router-dom";
+import mod from '../mod';
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import { Progress } from 'antd';
+import { getArrMax,sortby } from "@utils/util";
+import {
+  rollService,
+} from "../api";
+import { get, } from "lodash";
+
+@withRouter
+
+class RightBottomView extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+      data_item: [],
+    };
+  }
+
+  componentDidMount() {
+    this.getUrl()
+  }
+
+  async getUrl() {
+    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,
+      infinite: true,
+      autoplay: true,
+      autoplaySpeed: 2500,//自动播放的时间
+      // fade: true,//是否采用淡入淡出的效果  竖着的滚动方式不能添加此动效
+      slidesToShow: data_item.length >= 8 ? 8 : data_item.length,
+      slidesToScroll: 1,
+      vertical: true,
+      verticalSwiping: true,
+      beforeChange: function (currentSlide, nextSlide) {
+        console.log("before change", currentSlide, nextSlide);
+      },
+      afterChange: function (currentSlide) {
+        console.log("after change", currentSlide);
+      }
+    };
+    return (
+      <div className={["eacharView cbRightBottomView slider_item_box"]} style={{height: data_item.length > 8 ? 'auto' : "100%"}}>
+        <p className="title_">累计销量客户/吨</p>
+        <Slider {...settings}>
+          {
+            data_item.map((x, i) => {
+              return (
+                <div className="slider_box">
+                  <div className="slider_top">
+                    <p>{i + 1}.<span>{x.name}</span></p>
+                    <p className="p2">{x.num}</p>
+                  </div>
+                  <Progress
+                    strokeColor={{
+                      from: '#a98911cf',
+                      to: 'rgb(248,204,41,0.9)',
+                    }}
+                    percent={x.percent}
+                    status="active"
+                  />
+                </div>
+              )
+            })
+          }
+
+        </Slider>
+      </div>
+    )
+  }
+}
+export default RightBottomView;

src/pages/gvc/mod.js

@@ -0,0 +1,267 @@
+/*
+ * @Author: dayan_hjm 
+ * @Date: 2022-10-27 11:11:30 
+ * @Last modified by:   dayan_hjm 
+ * @Last modified time: 2022-10-27 11:11:30 
+ */
+
+// 状态管理方法
+import { observable, action, configure, makeObservable, runInAction } from 'mobx';
+// 工具方法
+import { cloneDeep, get, groupBy, isEmpty, orderBy, pick, values } from "lodash";
+
+import { message } from 'antd';
+
+// 默认状态
+const defaultState = {
+  imgMsgData: [
+    {
+      total: 4500,
+      totalName: "累计运输锂辉石",
+      styles: { left: "0%", top: "19%" },
+      cumulativeProduction: null,
+      inventory: 0,
+    },
+    {
+      total: 3233,
+      totalName: "锂辉石库存量",
+      styles: { left: "11%", top: "45%" },
+      cumulativeProduction: null,
+      inventory: 0,
+    },
+    {
+      total: 3578,
+      totalName: "锂辉石库存量",
+      styles: { left: "34%", top: "27%" },
+      cumulativeProduction: null,
+      inventory: 0,
+    },
+    {
+      total: 0,
+      totalName: "",
+      styles: { left: "11%", top: "88%" },
+      cumulativeProduction: 1222,
+      inventory: 1000,
+      day:222,
+      mood:333,
+      year:444,
+      rawMaterial:[
+        {
+          prodCatgory:"原料-鲤辉石",
+          indexValue:22,
+        },
+        {
+          prodCatgory:"产品-碳酸锂",
+          indexValue:33,
+        },
+        {
+          prodCatgory:"原料-氯化锂",
+          indexValue:44,
+        },
+        {
+          prodCatgory:"产品-氢氧化锂",
+          indexValue:66,
+        },
+        {
+          prodCatgory:"产品-金属锂",
+          indexValue:88,
+        },
+        {
+          prodCatgory:"产品-98K",
+          indexValue:1000,
+        },
+      ]
+    },
+    {
+      total: 0,
+      totalName: "",
+      styles: { left: "30%", top: "73%" },
+      cumulativeProduction: 1222,
+      inventory: 1000,
+      day:222,
+      mood:333,
+      year:444,
+      rawMaterial:[
+        {
+          prodCatgory:"原料-鲤辉石",
+          indexValue:22,
+        },
+        {
+          prodCatgory:"产品-碳酸锂",
+          indexValue:33,
+        },
+        {
+          prodCatgory:"原料-氯化锂",
+          indexValue:44,
+        },
+        {
+          prodCatgory:"产品-氢氧化锂",
+          indexValue:66,
+        },
+        {
+          prodCatgory:"产品-金属锂",
+          indexValue:88,
+        },
+        {
+          prodCatgory:"产品-98K",
+          indexValue:1000,
+        },
+      ]
+    },
+    {
+      total: 0,
+      totalName: "",
+      styles: { left: "52%", top: "56%" },
+      cumulativeProduction: 1222,
+      inventory: 1000,
+      day:222,
+      mood:333,
+      year:444,
+      rawMaterial:[
+        {
+          prodCatgory:"原料-鲤辉石",
+          indexValue:22,
+        },
+        {
+          prodCatgory:"产品-碳酸锂",
+          indexValue:33,
+        },
+        {
+          prodCatgory:"原料-氯化锂",
+          indexValue:44,
+        },
+        {
+          prodCatgory:"产品-氢氧化锂",
+          indexValue:66,
+        },
+        {
+          prodCatgory:"产品-金属锂",
+          indexValue:88,
+        },
+        {
+          prodCatgory:"产品-98K",
+          indexValue:1000,
+        },
+      ]
+    },
+    {
+      total: 0,
+      totalName: "",
+      styles: { left: "70%", top: "42%" },
+      cumulativeProduction: 1222,
+      inventory: 1000,
+      day:222,
+      mood:333,
+      year:444,
+      rawMaterial:[
+        {
+          prodCatgory:"原料-鲤辉石",
+          indexValue:22,
+        },
+        {
+          prodCatgory:"产品-碳酸锂",
+          indexValue:33,
+        },
+        {
+          prodCatgory:"原料-氯化锂",
+          indexValue:44,
+        },
+        {
+          prodCatgory:"产品-氢氧化锂",
+          indexValue:66,
+        },
+        {
+          prodCatgory:"产品-金属锂",
+          indexValue:88,
+        },
+        {
+          prodCatgory:"产品-98K",
+          indexValue:1000,
+        },
+      ]
+    },
+    {
+      total: 0,
+      totalName: "",
+      styles: { left: "88%", top: "28%" },
+      cumulativeProduction: 1222,
+      inventory: 1000,
+      day:222,
+      mood:333,
+      year:444,
+      rawMaterial:[
+        {
+          prodCatgory:"原料-鲤辉石",
+          indexValue:22,
+        },
+        {
+          prodCatgory:"产品-碳酸锂",
+          indexValue:33,
+        },
+        {
+          prodCatgory:"原料-氯化锂",
+          indexValue:44,
+        },
+        {
+          prodCatgory:"产品-氢氧化锂",
+          indexValue:66,
+        },
+        {
+          prodCatgory:"产品-金属锂",
+          indexValue:88,
+        },
+        {
+          prodCatgory:"产品-98K",
+          indexValue:1000,
+        },
+      ]
+    },
+  ],
+}
+
+// 严格模式
+configure({
+  enforceActions: 'observed'
+});
+
+
+/**
+ * mod层 - 业务逻辑，数据逻辑应该存储于此
+ */
+class Mod {
+  constructor() {
+    makeObservable(this);
+  }
+  // 监视状态
+  @observable state = cloneDeep(defaultState);
+
+  @action saveState = async (payload) => {
+    runInAction(() => {
+      this.state = {
+        ...this.state,
+        ...payload
+      };
+    });
+  };
+
+
+  // 新增/编辑运营商
+  // @action customerOperatorsmod = async (par, type) => {
+  //   try {
+  //     const { data, resultCode, resultMsg } = await Serv.customerOperatorsServ(par, type);
+  //     if (resultCode + '' === '0') {
+  //       runInAction(() => {
+  //         message.success('操作成功!')
+  //         this.state.addEditVisiable = false;
+  //         this.state.version = Math.random()
+  //       });
+  //     }
+  //   } catch (e) {
+  //     console.log('e: ', e);
+  //   }
+  // }
+}
+
+// 将组件实例化，这意味着组件将不能从别处实例化
+const mod = new Mod();
+export default mod;

src/pages/gvc/style.less

@@ -0,0 +1,391 @@
+@import url("../../themes/themes.less");
+
+@assetUrl: "../../assets/imgs/home";
+
+.home_box {
+  background: url(../../assets/imgs/gvc/homeBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40;
+  // background: #000;
+
+  :global {
+
+    .all_box {
+      width: 100%;
+      height: 100%;
+
+      .gvc_video {
+        align-items: flex-start;
+        // background: #000;
+
+        video {
+          width: 100%;
+          height: unset;
+          padding: 0;
+        }
+
+        .alls {
+
+          width: 64%;
+          height: unset;
+          padding: 2% 0 0 0;
+          position: relative;
+        }
+
+        @media (min-height: 800px) {
+          .alls {
+            width: 73%;
+          }
+        }
+
+        @media (min-height: 900px) {
+          .alls {
+            width: 64%;
+          }
+        }
+
+        @media (min-height: 1000PX) {
+          .alls {
+            width: 70%;
+          }
+        }
+
+      }
+
+      .gvcHome {
+        height: 100%;
+        justify-content: flex-start;
+
+        .leftContent {
+          width: 17%;
+          /* padding: 0 1em; */
+          height: 70%;
+          margin-top: 5%;
+          margin-left: 1%;
+          padding-right: 7%;
+
+          >ul {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            height: 100%;
+            flex-wrap: wrap;
+
+            >li {
+              height: 20%;
+              width: 100%;
+              color: #fff;
+              display: block;
+
+              .top_div {
+                background: none;
+                width: 100%;
+                height: 60%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                >div {
+                  width: 51%;
+                  position: relative;
+                  display: block;
+
+                  .img1 {
+                    width: 100%;
+                  }
+
+                  >span {
+                    font-size: 0.9em;
+                    position: absolute;
+                    width: 100%;
+                    bottom: 15%;
+                    left: 63%;
+                    transform: skew(4deg, 334deg);
+                    font-weight: normal;
+                    color: #ededed;
+
+                  }
+
+                  .img2 {
+                    width: 37%;
+                    position: absolute;
+                    left: 32%;
+                    top: 24%;
+                  }
+                }
+              }
+
+              .text {
+                width: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-top: 1em;
+                font-weight: normal;
+                font-size: 0.9em;
+                color: #CDF1FF;
+                padding: 0.8em 0.5em 0.2em;
+                background: linear-gradient(0deg, #ffffff26 0%, #ffffff00 100%);
+                border-radius: 0.5em;
+
+                .topMsg_number {
+                  color: #69FFDE;
+                  font-size: 1.2em;
+                  margin-right: 0.2em;
+                  margin-top: 0.2em;
+                }
+              }
+            }
+          }
+        }
+
+        @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%;
+          padding: 0;
+          position: relative;
+          margin: 0% 0 0 -1%;
+        }
+
+        @media (min-height: 800px) {
+          .centerCon {
+            width: 65%;
+            height: 78%;
+            padding: 0;
+            position: relative;
+            margin: 0% 0 0 -3%;
+          }
+        }
+
+        @media (min-height: 900px) {
+          .centerCon {
+            width: 62%;
+            height: 80%;
+            padding: 0;
+            position: relative;
+            margin: 0% 0 0 -1%;
+          }
+        }
+
+        @media (min-height: 1000PX) {
+          .centerCon {
+            width: 63%;
+            height: 75%;
+            padding: 0;
+            position: relative;
+            margin: 0% 0 0 -3%;
+          }
+        }
+
+
+        .imgMsg {
+          width: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          height: 100%;
+          color: #fff;
+
+          li {
+            position: absolute;
+            width: 17em;
+            height: 4em;
+            opacity: 1;
+            background: linear-gradient(0deg, #ffffff26 0%, #ffffff00 100%);
+            border-radius: 0.5em;
+            padding: 0.5em;
+            box-sizing: border-box;
+            font-size: 0.9em;
+            color: #CDF1FF;
+
+            .nums {
+              font-size: 1.3em;
+              color: #69FFDE;
+              display: inline-block !important;
+            }
+
+            .topMsg_number_2 {
+              display: inline-block !important;
+            }
+
+            .sma {
+              font-size: 0.7em;
+              color: #CDF1FF;
+              display: inline-block;
+              margin-left: 0.2em;
+            }
+
+            .chanL {
+              background: unset;
+              font-size: 0.9em;
+              color: #CDF1FF;
+              height: 4em;
+              box-sizing: border-box;
+              padding: 0 0.5em;
+              display: flex;
+              justify-content: space-between;
+
+              >div {
+                width: 50%;
+              }
+            }
+
+            .hoverR {
+              width: 100%;
+              height: 12em;
+              position: absolute;
+              left: 0;
+              top: -7em;
+              padding-top: 11em;
+
+
+              .hoverDiv {
+                display: none;
+              }
+            }
+
+            .hoverR:hover {
+              .hoverDiv {
+                display: flex;
+              }
+            }
+
+            .hoverDiv {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              padding: 0 1em;
+              background: linear-gradient(0deg, #ffffff00 20%, #7a7a7a29 100%);
+              width: 100%;
+              border-radius: 0.5em;
+              box-sizing: border-box;
+              margin-top: 0.1em;
+              font-size: 0.8em;
+              padding: 0.2em 1em 0;
+              color: #d7d7d7;
+              align-items: flex-start;
+              height: auto;
+
+              >div>span {
+                display: block;
+              }
+            }
+          }
+
+          li:hover {
+            background: linear-gradient(0deg, #42ca9840 0%, #42ca9800 98%);
+          }
+        }
+
+        .rightContent {
+          width: 15%;
+          position: absolute;
+          right: 0;
+          bottom: 10%;
+          z-index: 9;
+          height: 60%;
+
+          .title_ {
+            text-align: left;
+            color: #fff;
+            width: 90%;
+            height: 2em;
+            border-radius: 0 8px 0 0;
+            opacity: 1;
+            background: linear-gradient(45deg, #ffdf5800 0%, #ffdf584d 100%);
+            line-height: 2em;
+            color: #F1E9E0;
+            margin-bottom: 0.6em;
+          }
+
+          .eacharView {
+            height: auto;
+            overflow: hidden;
+          }
+
+          .slider_box {
+            padding: 0 0.5em;
+            box-sizing: border-box;
+          }
+
+          .slider_top {
+            width: 100%;
+            font-size: 0.9em;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            color: #d4d4d4;
+            font-weight: normal;
+
+            >p {
+              width: 83%;
+              display: flex;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+
+              >span {
+                display: inline-block;
+                width: 99%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+            }
+
+            .p2 {
+              width: 30%;
+              display: inline-block;
+              text-align: right;
+            }
+          }
+
+          .ant-progress {
+            height: 10px;
+
+            .ant-progress-inner {
+              top: -5px;
+              background-color: #57575759;
+
+              .ant-progress-bg {
+                height: 5px !important;
+              }
+            }
+          }
+
+        }
+
+        @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

@@ -0,0 +1,486 @@
+/*
+ * @Author: dayan_hjm  产供销价值链
+ * @Date: 2023-11-10 10:19:34 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-11-21 17:46:28
+ */
+
+import React, { useState, useEffect, Component } from "react";
+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, Tooltip, Icon, Button } from "antd";
+import mod from './mod';
+import { toJS } from "mobx";
+import RightBottomView from "./component/rightBottomView.jsx";
+import {
+  leftService,
+  bigShopService,
+  smallShopService,
+  smallDayService,
+  smallMaterialService,
+  checkToken,
+  updateTimeService
+} from "./api";
+import MapViewTwo from "./component/mapView2.jsx";
+
+import 'animate.css';
+import { get } from "lodash";
+@withRouter
+
+class Gvc extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+      LeftHtml: [
+      ],
+      updateTime: '',
+      changGif: false,
+      plannedCompletionData: [
+      ],
+      plannedCompletionNum: 1,
+      manHourData: [
+      ],
+      manHourNum: 1,
+    };
+    this.timer = null //定时器，用于检测同步状态
+  }
+  componentWillMount() {
+    if (window.location.host.indexOf("localhost") == -1) {
+      this.getToken()
+    }
+  }
+
+  async getToken() {
+    if (!sessionStorage.getItem("tqcVToken")) {
+      this.props.history.replace("/home/index");
+    } else {
+      await checkToken(sessionStorage.getItem("tqcVToken")).then(({ data, resultCode }) => {
+        if (data?.userId) {
+          // this.props.history.push('/')
+        } else {
+          this.props.history.replace("/home/index");
+        }
+      });
+    }
+  }
+  componentDidMount() {
+    // this.fontMsgChange();
+    this.getUrl();
+    this.getUrl2()
+    this.getUrl4()
+    this.getUrl3();
+
+
+    setTimeout(() => {
+      this.videoStart();
+    }, 200)
+    setTimeout(() => {
+      //替换gif
+      this.setState({ changGif: true });
+      $(".shu1").numScroll();
+    }, 3000)
+    setTimeout(() => {
+      this.getUrl5()
+      setTimeout(() => {
+        this.getUrl6()
+      }, 500)
+    }, 2000)
+  }
+  videoStart() {
+    /*     Chrome 浏览器的视频自动播放策略
+        1.始终允许静音模式下自动播放
+        2.在以下的情况中，带声音播放会被允许：
+          ①用户已经与当前的域进行了交互（也就是click，tap事件）。
+          ②在桌面设备上，用户的媒体参与度指数阈值已经超过，这意味着用户之前播放过有声视频。
+          ③用户已经将网站添加到移动设备上的主屏幕或允在桌面上安装了PWA。
+        3.顶部帧可以将自动播放权限委派给其iframe，来允许自动播放声音
+        
+        媒体参与度（Media Engagement）是指用户与媒体内容进行互动的程度，可以通过多个指标来衡量。这些指标主要包括观看时间、观看率、转化率、交互行为等。
+        可以通过：chrome://media-engagement/ 查看
+     */
+    const video = document.querySelector('.video2');
+    console.log(video.play());
+
+    const model = document.querySelector('.model')
+    const btn = document.querySelector('button')
+    // 第一种方法 引导用户去与页面交互实现播放
+    async function play() {
+      try {
+        await video.play();
+        //使用await的原因是因为video.play()方法返回的是一个Promise,所以在这里我们可以对他进行一些处理
+        model.style.display = 'none';
+        btn.removeEventListener('click', play);
+        // 如果他自动播放了就隐藏按钮，消除点击事件
+      } catch (err) {
+        model.style.display = 'block';
+        btn.addEventListener('click', play);
+        // 如果Promise返回的是error就引导用户点击按钮，在调用play方法
+      }
+    }
+    play();
+
+    //第二种方法比较主流，类似的有网页版抖音以及B站
+    function play() {
+      video.muted = true;//设置视频为静音
+      video.play();//调用播放方法
+      const ctx = new AudioContext();
+      const canAutoPlay = ctx.state === 'running'; //通过这个可以判断出视频能不能够自动播放 如何可以它的值就是“running” 否则为"suspended"
+      // 如果是不能播放我们就执行下面的逻辑，其实就是类似于第一种方法，让用户与其交互
+      ctx.close();
+      if (canAutoPlay) {
+        video.muted = false;
+        model.style.display = 'none';
+        btn.removeEventListener('click', play);
+      }
+      else {
+        model.style.display = 'block';
+        btn.addEventListener('click', play);
+      }
+    }
+    play()
+
+  }
+
+  async getUrl() {
+    await leftService().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        let LeftHtml = [], name_ = ["碳酸锂", '氢氧化钠', '氯化锂', '金属锂'];
+        data.map((x, i) => {
+          if (i >= 4) {
+            return
+          }
+          LeftHtml.push(
+            {
+              txt_name: name_[i],
+              num1: x.production,
+              num2: x.inventory,
+            }
+          );
+        });
+        this.setState({ LeftHtml });
+      }
+    });
+  }
+  async getUrl2() {
+    await bigShopService().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        const name_ = ["", "锂辉石库存量", "锂辉石库存量", "累计运输锂辉石"];
+        const style__ = [{}, { left: "34%", top: "27%" }, { left: "11%", top: "45%" }, { left: "0%", top: "19%" }]
+        data = data.map((x, i) => {
+          return {
+            ...x,
+            total: x.indexValue,
+            totalName: name_[x.warehouseNameCode],
+            styles: style__[x.warehouseNameCode],
+            cumulativeProduction: null,
+            inventory: 0,
+          }
+        });
+        const d_1 = data.filter(x => { return x.warehouseNameCode == 3 })[0];
+        const d_2 = data.filter(x => { return x.warehouseNameCode == 2 })[0];
+        const d_3 = data.filter(x => { return x.warehouseNameCode == 1 })[0];
+        let old_imgMsgData = this.store.state.imgMsgData;
+        old_imgMsgData[0] = d_1;
+        old_imgMsgData[1] = d_2;
+        old_imgMsgData[2] = d_3;
+
+        this.store.saveState({ imgMsgData: old_imgMsgData });
+      }
+    });
+  }
+  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: "92%" }, { left: "29%", top: "76%" }]
+        data = data.map((x, i) => {
+          return {
+            ...x,
+            total: 0,
+            totalName: "",
+            styles: style__[x.factoryCode],
+            cumulativeProduction: x.production,
+            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_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];
+        let old_imgMsgData = this.store.state.imgMsgData;
+        old_imgMsgData[3] = d_1;
+        old_imgMsgData[4] = d_2;
+        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 });
+      }
+    });
+  }
+  async getUrl5() {
+    await smallDayService().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        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,
+          }
+          return par
+        }
+
+        const d_1 = getItems(5);
+        const d_2 = getItems(4);
+        const d_3 = getItems(3);
+        // const d_4 = data.filter(x=>{return x.factoryCode == 2})[0];
+        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 };
+        old_imgMsgData[5] = { ...old_imgMsgData[5], ...d_3 };
+        old_imgMsgData[6] = { ...old_imgMsgData[6], ...d_4 };
+        old_imgMsgData[7] = { ...old_imgMsgData[7], ...d_5 };
+        console.log(old_imgMsgData, "1111old_imgMsgData")
+        this.store.saveState({ imgMsgData: old_imgMsgData });
+      }
+    });
+  }
+
+  async getUrl6() {
+    await smallMaterialService().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        function getItems(num) {
+          const datas = data.filter(x => { return x.factoryCode == num });
+          const rawMaterial = datas.map((item,index)=>{
+            return {
+              prodCatgory:item.prodCatgory,
+              indexValue:item.indexValue,
+            }
+          })
+          // const par = {
+          //   rawMaterial: [
+          //     {
+          //       prodCatgory: "原料-鲤辉石",
+          //       indexValue: datas?.filter(x => { return x.prodCatgory == 1 })?.[0]?.indexValue || 0,
+          //     },
+          //     {
+          //       prodCatgory: "产品-碳酸锂",
+          //       indexValue: datas?.filter(x => { return x.prodCatgory == 2 })?.[0]?.indexValue || 0,
+          //     },
+          //     {
+          //       prodCatgory: "原料-氯化锂",
+          //       indexValue: datas?.filter(x => { return x.prodCatgory == 3 })?.[0]?.indexValue || 0,
+          //     },
+          //     {
+          //       prodCatgory: "产品-氢氧化锂",
+          //       indexValue: datas?.filter(x => { return x.prodCatgory == 4 })?.[0]?.indexValue || 0,
+          //     },
+          //     {
+          //       prodCatgory: "产品-金属锂",
+          //       indexValue: datas?.filter(x => { return x.prodCatgory == 5 })?.[0]?.indexValue || 0,
+          //     }
+          //   ]
+          // }
+          return {rawMaterial:rawMaterial}
+        }
+
+        const d_1 = getItems(5);
+        const d_2 = getItems(4);
+        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 };
+        old_imgMsgData[5] = { ...old_imgMsgData[5], ...d_3 };
+        old_imgMsgData[6] = { ...old_imgMsgData[6], ...d_4 };
+        old_imgMsgData[7] = { ...old_imgMsgData[7], ...d_5 };
+        console.log(old_imgMsgData, "1111old_imgMsgData")
+        this.store.saveState({ imgMsgData: old_imgMsgData });
+      }
+    });
+  }
+  async getUrl3() {
+    await updateTimeService().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        this.setState({ updateTime: data?.[0]?.etlTime || '' })
+      }
+    });
+  }
+
+  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.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) {
+    return (
+      <li>
+        <div className={"top_div"}>
+          <div class="animate__animated animate__pulse animate__slower animate__infinite">
+            {i === 0 && <img className={"img1"} src={require("@assets/imgs/gvc/qiu1.png").default} alt="" />}
+            {i === 1 && <img className={"img1"} src={require("@assets/imgs/gvc/qiu2.png").default} alt="" />}
+            {i === 2 && <img className={"img1"} src={require("@assets/imgs/gvc/qiu3.png").default} alt="" />}
+            {i === 3 && <img className={"img1"} src={require("@assets/imgs/gvc/qiu4.png").default} alt="" />}
+            {i === 0 && <img src={require("@assets/imgs/gvc/qiuH1.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
+            {i === 1 && <img src={require("@assets/imgs/gvc/qiuH2.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
+            {i === 2 && <img src={require("@assets/imgs/gvc/qiuH3.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
+            {i === 3 && <img src={require("@assets/imgs/gvc/qiuH4.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
+            <span>{x.txt_name}</span>
+          </div>
+        </div>
+        <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>
+          </div>
+          <div>
+            <p>产品库存</p>
+            <span class="topMsg_number shu1">{x.num2}</span><span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
+          </div>
+        </div>
+      </li>
+
+    )
+  }
+
+  render() {
+    const stores = this.store.state;
+    let { totalValue, yearDecline, yearSend, imgMsgData } = this.store.state;
+    let { LeftHtml, updateTime } = this.state;
+    return (
+      <div className={[styles.home_box + ' home_box']}>
+        <div className={"all_box"}>
+          {/* 视频播放器 */}
+          <MapViewTwo></MapViewTwo>
+          <div className={"video_box gvc_video"}>
+            <div className="alls">
+              <video src={require("@assets/imgs/gvc/video2.mp4").default} autoplay="autoplay" loop="loop" class="video2 center_box2 animate__animated animate__fadeIn animate__delay-2s">
+              </video>
+            </div>
+
+          </div>
+          <div className={"gvcHome home cbHome"}>
+            <div className="leftContent">
+              <ul>
+                {
+                  LeftHtml.map((x, i) => {
+                    return this.getLeftHtml(x, i)
+                  })
+                }
+              </ul>
+            </div>
+
+            <div className="centerCon">
+              <ul className="imgMsg">
+                {
+                  toJS(imgMsgData).map((item, index) => {
+                    return (
+                      <li style={{ ...item.styles }} class="animate__animated animate__bounceInUp animate__slower">
+                        {/* 矿产 */}
+                        {
+                          item.totalName && <p className="name">{item.totalName}</p>
+                        }
+                        {
+                          item.totalName && <span class="shu1 nums">{item.total}</span>
+                        }
+                        {
+                          item.totalName && <span className="sma">吨</span>
+                        }
+                        {/* 基地 */}
+                        {
+                          item.cumulativeProduction !== null && <div className="hoverR">
+                            <div className="hoverDiv chanL">
+                              {/* <div style={{ width: "62%","textAlign":'right' }}> */}
+                              <div style={{ width: "70%"}}>
+                                <p className="title">
+                                  库存/吨
+                                </p>
+                                {
+                                  get(item, "rawMaterial", []).map((ra, rai) => {
+                                    return <span>{ra.prodCatgory}：{ra.indexValue}</span>
+                                  })
+                                }
+                              </div>
+                              <div style={{ width: "38%" }}>
+                                <p className="title">
+                                  产量/吨
+                                </p>
+                                <span>日：{item.day}</span>
+                                <span>月：{item.mood}</span>
+                                <span>年：{item.year}</span>
+                              </div>
+                            </div>
+                          </div>
+                        }
+                        {
+                          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>
+                            </div>
+                            <div>
+                              <p>产品库存</p>
+                              <span class="nums shu1">{item.inventory}</span><span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
+                            </div>
+
+                          </div>
+                        }
+                      </li>
+                    )
+                  })
+                }
+              </ul>
+            </div>
+
+            {/* 右侧信息栏 */}
+            <div className="rightContent">
+
+              <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower  animate__delay-1s">
+                <div className="bottomContent bigDivPd">
+                  <div className="topMsg_content">
+                    <RightBottomView></RightBottomView>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="bottom_box">
+              <p style={{ color: "#6a818d", lineHeight: '2px', width: '100%', textAlign: "center" }}>
+                更新时间 : {updateTime}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+export default Gvc;

src/pages/jurisDiction/view.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm
  * @Date: 2023-11-07 14:21:24 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-11-08 17:18:11
+ * @Last Modified time: 2023-11-21 18:07:33
  */
 
 import React, { useState, useEffect, Component } from "react";
@@ -32,7 +32,7 @@ class JrisDiction extends Component {
   componentWillMount() { 
     let searchInstance = queryToObj(); // url查询参数对象化
     if(window.location.host.indexOf("localhost") > -1){
-      this.props.history.replace("/home/operation");
+      this.props.history.replace(searchInstance?.type == 1 ? "/home/operation" : "/home/gvc");
     }else if(searchInstance?.token){
       this.getUrl(searchInstance?.token);
     }else{
@@ -47,7 +47,8 @@ class JrisDiction extends Component {
     await checkToken(token).then(({ data, resultCode }) => {
       sessionStorage.setItem("tqcVToken",token)
       if (data?.userId) {
-        this.props.history.replace("/home/operation");
+        let searchInstance = queryToObj(); // url查询参数对象化
+        this.props.history.replace(searchInstance?.type == 1 ? "/home/operation" : "/home/gvc");
         // this.props.history.push('/')
       } else {
         this.setState({ showMsg: true })

src/pages/tqcDataVHome/component/oneQualified.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-08 16:45:11
+ * @Last Modified time: 2023-11-08 17:53:47
  */
 
 
@@ -75,7 +75,7 @@ class BottomLineForSend extends Component {
         legend: {
           data: ['目标一次及格率', '实际一次及格率'],
           right: 'center',
-          padding: [0, 0, 0, 5],
+          padding: [10, 0, 0, 5],
           top: 0,
           textStyle: {
             color: "#fff",

src/router/router.js

@@ -14,6 +14,7 @@ import Login from "@pages/login/view.jsx";
 import NotFound from "@pages/notFound/view.jsx";
 import Home from '@pages/home/view.jsx';
 import HomeForchaBaiDao from '@pages/tqcDataVHome/view.jsx';
+import GVC from '@pages/gvc/view.jsx';
 import JurisDiction from '@pages/jurisDiction/view.jsx';
 import Loading from "@components/Loading/view.jsx";
 import $store from "@store/";
@@ -61,6 +62,11 @@ const routes = [
         // component: $store.app.styleCommon.theme == 'chaBaiDao' ? HomeForchaBaiDao : Home,
         // navigator: true,
       },
+      {
+        name: "产供销价值链",
+        path: "/home/gvc",
+        component: GVC,
+      },
     ],
   },
   {

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

yarn.lock

@@ -5662,6 +5662,11 @@ enhanced-resolve@^4.0.0, enhanced-resolve@^4.1.0, enhanced-resolve@^4.1.1, enhan
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
+enquire.js@^2.1.6:
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
+  integrity sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==
+
 enquirer@^2.3.5, enquirer@^2.3.6:
   version "2.3.6"
   resolved "https://registry.npmmirror.com/enquirer/-/enquirer-2.3.6.tgz"
@@ -12992,6 +12997,17 @@ react-simple-verify@^1.0.3, react-simple-verify@^1.0.9:
     webpack-manifest-plugin "^2.2.0"
     workbox-webpack-plugin "^4.3.1"
 
+react-slick@^0.29.0:
+  version "0.29.0"
+  resolved "https://registry.yarnpkg.com/react-slick/-/react-slick-0.29.0.tgz#0bed5ea42bf75a23d40c0259b828ed27627b51bb"
+  integrity sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==
+  dependencies:
+    classnames "^2.2.5"
+    enquire.js "^2.1.6"
+    json2mq "^0.2.0"
+    lodash.debounce "^4.0.8"
+    resize-observer-polyfill "^1.5.0"
+
 react-sortable-hoc@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/react-sortable-hoc/-/react-sortable-hoc-2.0.0.tgz#f6780d8aa4b922a21f3e754af542f032677078b7"
@@ -14021,6 +14037,11 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
+slick-carousel@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
+  integrity sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.npmmirror.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz"