config/webpack.common.js

@@ -24,8 +24,8 @@ const plugins = [
       charset: "utf-8",
     },
     rootEl: "<div id='app'></div>",
-    favicon: path.resolve(__dirname,"../public/favicon.ico"),
-    globalApi: path.resolve(__dirname,"../public/baseUrlConfig.js"),
+    favicon: path.resolve(__dirname, "../public/favicon.ico"),
+    globalApi: path.resolve(__dirname, "../public/baseUrlConfig.js"),
     publicPath: './'
   }),
   new HtmlWebpackPlugin({
@@ -118,7 +118,8 @@ module.exports = {
           },
         }],
       },
-      { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/, 
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/,
         // use: 'file-loader' ,
         use: [{
           loader: 'file-loader',

config/webpack.dev.js

@@ -133,20 +133,20 @@ module.exports = merge(common, {
     hot: true,
     proxy: {
       "/api": {
-        target: "http://10.9.9.182:9081",
+        //target: "http://10.9.9.182:9081",
         // target: "http://dataportal-test.agile.com.cn:8081"
         // target: "http://10.9.9.173:9081",
-        // target:"https://dms.dataportal.tianqilithium.com:9000",
-        changeOrigin:true,
+        target: "https://dms.dataportal.tianqilithium.com:9000",
+        changeOrigin: true,
 
       },
       "/dataengine-center-oneservice": {
-        target: "http://10.9.9.182:9081",
+        // target: "http://10.9.9.182:9081",
         // target: "http://10.9.9.173:9081",
-        // target:"https://dms.dataportal.tianqilithium.com:9000",
-        changeOrigin:true,
+        target: "https://dms.dataportal.tianqilithium.com:9000",
+        changeOrigin: true,
       },
-      "/mock":{
+      "/mock": {
         target: "http://172.24.81.106:9999",
         pathRewrite: { '^/mock': '/api' },
       }

src/assets/css/styleTemplate.less

@@ -13,16 +13,23 @@
     font-family: 'DingTalkJinBuTi', "DingTalkSans";
   }
 
+  .mgb_box {
+    margin-bottom: 3% !important;
+  }
+
   #echarts7 {
     min-width: 400px;
     width: 95%;
     height: 90%;
-    >div{
+
+    >div {
       text-align: left;
     }
   }
 
 
+
+
   .hidetip {
     display: none;
   }
@@ -244,8 +251,9 @@
     background-color: #0a091e;
 
   }
+
   #app .tlkTop2 {
-    background: url(../imgs/dataVimg/topBg2.png) no-repeat 0 0 / 100% 100% #0a091e!important;
+    background: url(../imgs/dataVimg/topBg2.png) no-repeat 0 0 / 100% 100% #0a091e !important;
   }
 
   #app .top {
@@ -354,15 +362,17 @@
     width: 100%;
     height: 100%;
     background: url(../imgs/dataVimg/homeBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40;
-    .rightJ_png{
+
+    .rightJ_png {
       position: absolute;
-        z-index: 99;
-        width: 2em;
-        right: 0.8em;
-        top: 44%;
-        opacity: .5;
+      z-index: 99;
+      width: 2em;
+      right: 0.8em;
+      top: 44%;
+      opacity: .5;
     }
-    .rightJ_png_L{
+
+    .rightJ_png_L {
       right: unset;
       left: 0.8em;
     }
@@ -390,13 +400,44 @@
         padding: 1% 0 0 10%;
       }
     }
-    @media (max-height: 900px) {
-      .video_box{
-        top: -2em;
-      }
 
+    .video_box3 {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 98.5%;
+      // background: url(../imgs/dataVimg/homeBgDataV.png) no-repeat 0 -10em / 108% 120% #041b40;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+      pointer-events: none;
+      z-index: 1;
+
+      video {
+        width: 40%;
+        // height: 45%;
+        margin-top: -10%;
+        // padding: 1% 0 0 10%;
+      }
     }
 
+    // @media (max-height: 900px) {
+    //   .video_box3 {
+    //     top: -2em;
+    //   }
+
+    // }
+
+
+    // @media (max-height: 900px) {
+    //   .video_box {
+    //     top: -2em;
+    //   }
+
+    // }
+
 
   }
 
@@ -428,6 +469,117 @@
         font-family: "DingTalk JinBuTi";
       }
 
+      .topMsgCommond {
+        width: 100%;
+        height: 100%;
+
+        .topMsg_content {
+          height: calc(100% - 1em);
+          font-size: 2em;
+          color: #69FFDE;
+          background: url(../imgs/dataVimg/sunGong.gif) no-repeat 48% 0/86% 100%;
+          text-align: center;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .topMsg_box {
+            width: 52%;
+
+            .topMsg_number_p {
+              font-size: 0.5em;
+              line-height: 0em;
+              color: #fff;
+              font-weight: 100;
+              margin-top: 0.8em;
+            }
+          }
+
+          .topMsg_number_2 {
+            font-size: 0.5em;
+          }
+        }
+
+        .changBg_topMsg_content {
+          background: url(../imgs/dataVimg/sunGong2.gif) no-repeat 48% 0/86% 100%;
+        }
+
+        .icon_c {
+          width: 100%;
+          display: flex;
+          align-items: flex-start;
+          justify-content: unset !important;
+          flex-wrap: wrap;
+          height: calc(100% - 40px);
+          overflow-y: scroll;
+
+          .icon_p {
+            width: 33%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-wrap: wrap;
+            padding: 2px 0;
+            cursor: pointer;
+            position: relative;
+
+            >i {
+              display: flex;
+              width: 54px;
+              height: 54px;
+              background: @dy-active;
+              color: #fff;
+              border-radius: 50%;
+              text-align: center;
+              justify-content: center;
+              line-height: 50px;
+              font-size: 23px;
+              font-style: normal;
+              font-weight: 700;
+            }
+
+            >span {
+              display: flex;
+              width: 100%;
+              justify-content: center;
+              margin-top: 5px;
+            }
+
+            .delectt {
+              display: none;
+              position: absolute;
+              background: #ff3737;
+              width: 20px;
+              height: 20px;
+              border-radius: 50%;
+              line-height: 13px;
+              font-size: 28px;
+              top: 0;
+              right: 14px;
+              color: #fff;
+            }
+          }
+
+          .icon_p:hover {
+            .delectt {
+              display: block;
+            }
+          }
+        }
+
+        .icon_c::-webkit-scrollbar {
+          display: none;
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+        }
+
+        .icon_c:hover::-webkit-scrollbar {
+          display: unset;
+          scrollbar-width: unset;
+          -ms-overflow-style: unset;
+        }
+      }
+
       .leftContent {
         width: 28%;
         height: 88%;
@@ -523,20 +675,23 @@
                   font-size: 0.9em;
                 }
               }
+
               @media (min-height: 900px) {
-                .name_ul{
-                  top:1.5em
+                .name_ul {
+                  top: 1.5em
                 }
               }
 
 
-              #echarts4,#echarts41,
+              #echarts4,
+              #echarts41,
               #echarts6_box {
                 width: 45%;
                 height: 90%;
               }
 
-              #echarts4,#echarts41 {
+              #echarts4,
+              #echarts41 {
                 width: 55%;
               }
 
@@ -571,7 +726,8 @@
                   }
                 }
 
-                #echarts6,#echarts61 {
+                #echarts6,
+                #echarts61 {
                   width: 100%;
                   height: 100%;
                 }
@@ -607,7 +763,10 @@
             align-items: center;
             justify-content: center;
 
-            #chartmain,#chartmain2 {
+            #chartmain,
+            #chartSend,
+            #chartProduct,
+            #chartmain2 {
               min-width: 300px;
               width: 90%;
               height: 100%;
@@ -652,12 +811,15 @@
           display: flex;
           align-items: center;
 
-          #echarts5,#echarts51 {
+          #echarts5,
+          #echarts_drybase,
+          #echarts51 {
             min-width: 400px;
             width: 100%;
             height: 80%;
           }
-          #echarts51{
+
+          #echarts51 {
             height: 90%;
           }
         }
@@ -665,6 +827,7 @@
 
       .bigDivPd {}
 
+
       .titleDiv {
         width: 100%;
         display: flex;
@@ -702,79 +865,81 @@
         -ms-overflow-style: unset;
       }
 
+      .topMsg_2 .topMsg_content {
+        height: 80%;
+      }
 
-      .rightContent {
-        width: 28%;
-        height: 88%;
-        z-index: 9;
-        .bottomContent2{
-          width: 100%;
-          height: 28%;
-        }
-
-        .topMsg_2 .topMsg_content {
-          height: 80%;
-        }
-
-        .topMsg_22 {
-          width: 100%;
-          height: 28%;
-        }
-
-        .topMsg_33 {
-          width: 100%;
-          height: 22%;
-          margin-bottom: 2%;
-        }
+      .topMsg_22 {
+        width: 100%;
+        height: 28%;
+      }
 
-        .topMsg_2,
-        .topMsg_3 {
-          width: 100%;
-          height: 100%;
-        }
+      .topMsg_33 {
+        width: 100%;
+        height: 22%;
+        margin-bottom: 2%;
+      }
 
-        .topMsg_4 {
-          width: 100%;
-          height: 22%;
-        }
 
-        .topMsg_3 {
-          .topMsg_content {
-            height: calc(100% - 1em);
-            line-height: 2.8em;
-            font-size: 1.8em;
-            color: #69FFDE;
-            background: url(../imgs/dataVimg/wanchanglv.gif) no-repeat center center/ 71% 99%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
+      .topMsg_2,
+      .topMsg_3 {
+        width: 100%;
+        height: 100%;
+      }
 
-            .topMsg_number_2 {
-              font-size: 0.5em;
-            }
+      .topMsg_4 {
+        width: 100%;
+        height: 22%;
+      }
 
-            .topMsg_number_p {
-              font-size: 0.5em;
-              line-height: 0em;
-              color: #fff;
-              font-weight: 100;
-              margin-top: -1.5em;
-            }
+      .topMsg_3 {
+        .topMsg_content {
+          height: calc(100% - 1em);
+          line-height: 2.8em;
+          font-size: 1.8em;
+          color: #69FFDE;
+          background: url(../imgs/dataVimg/wanchanglv.gif) no-repeat center center/ 71% 99%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
 
+          .topMsg_number_2 {
+            font-size: 0.5em;
           }
 
-          .changBg_topMsg_content {
-            background: url(../imgs/dataVimg/wanchanglv2.gif) no-repeat center center / 84% 98%;
+          .topMsg_number_p {
+            font-size: 0.5em;
+            line-height: 0em;
+            color: #fff;
+            font-weight: 100;
+            margin-top: -1.5em;
           }
 
         }
 
-        .topMsg2 {
+        .changBg_topMsg_content {
+          background: url(../imgs/dataVimg/wanchanglv2.gif) no-repeat center center / 84% 98%;
+        }
+
+      }
+
+      .topMsg2 {
+        width: 100%;
+        height: 20%;
+        margin-bottom: 3%;
+      }
+
+      .rightContent {
+        width: 28%;
+        height: 88%;
+        z-index: 9;
+
+        .bottomContent2 {
           width: 100%;
-          height: 20%;
-          margin-bottom: 3%;
+          height: 28%;
         }
 
+
         .topMsg {
           width: 100%;
           height: 100%;
@@ -934,11 +1099,13 @@
               justify-content: center;
             }
 
-            #echarts2,#echarts21 {
+            #echarts2,
+            #echarts21 {
               min-width: 600px;
               width: 95%;
               height: 90%;
-              >div{
+
+              >div {
                 text-align: left;
               }
             }
@@ -950,8 +1117,9 @@
           background: url(../imgs/dataVimg/toplineB.png) no-repeat 0 bottom / 100% 11%;
           height: 78%;
         }
+
         @media (min-height: 900px) {
-          .center_li{
+          .center_li {
             height: 60%;
           }
         }
@@ -1194,7 +1362,7 @@
   .cbRightBottomView {
     flex-wrap: wrap;
     position: relative;
-    
+
     .right_b_tip2 {
       width: 46%;
       display: block;
@@ -1215,13 +1383,16 @@
       text-align: right;
     }
   }
-.slider_item_box{
-  justify-content: left;
-  .slick-slider{
-    width: 90%;
-    color: #fff;
+
+  .slider_item_box {
+    justify-content: left;
+
+    .slick-slider {
+      width: 90%;
+      color: #fff;
+    }
   }
-}
+
   .testDiv {
     width: 4em;
     display: flex;

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

@@ -19,7 +19,7 @@ import { registerDataMsgSocket, getUnionId } from "@apis/work";
 import { getUnReadMessageNum } from "@apis/personal";
 import { Tooltip } from 'antd';
 import { getSheetToken } from "@apis/common";
-import { tipsLockStatus,isTimes } from "@utils/util";
+import { tipsLockStatus, isTimes } from "@utils/util";
 import ModelBox from "@components/modelBox/view.jsx";
 
 @withRouter
@@ -53,7 +53,7 @@ export default class extends Component {
     this.pcLogin();
     this.props.history.listen((route, data) => {
       // 大屏切换地址改名称
-      this.props.changeName(route["pathname"].indexOf("gvc") > -1 ? "产供销价值链" : (route["pathname"].indexOf("tlk") > -1 ? "TLK运营数据中心 / TLK Plant Dashboard" : "运营数据中心"))
+      this.props.changeName(route["pathname"].indexOf("gvc") > -1 ? "产供销价值链" : (route["pathname"].indexOf("tlk") > -1 ? "TLK运营数据中心 / TLK Plant Dashboard" : route["pathname"].indexOf("sial") > -1 ? "硅铝微粉数据中心" : "运营数据中心"))
       this.setState({ showTips: false });
       let activeTree = utils.findNodeTree([...$store.sysMenu.norList, ...$store.sysMenu.menuList], route.pathname, "resourceUrl");
       //调取当前栏目的通知 
@@ -216,7 +216,7 @@ export default class extends Component {
         pageNum: 1,
         effectStatus: 1,
         displayArea: id,
-        sysUpdateMsgFuncType:'maintain'
+        sysUpdateMsgFuncType: 'maintain'
         // sysUpdateMsgType:'maintain'
       }).then((res) => {
         if (res?.data && res?.data?.records) {
@@ -224,27 +224,27 @@ export default class extends Component {
           // if (name == '首页') {
           //   $store.app.setShowTips(res.data);
           // } else {
-            if (res?.data?.records[0]) {
-              for (let index = 0; index < 2; index++) {
-                const element = res?.data?.records[index];
-                if (isTimes('', element.effectStartTime, element.effectEndTime)) {
-                  this.ModelBox.setState({ showContactModalVisible: true, activeItem: element });
-                  break
-                }
+          if (res?.data?.records[0]) {
+            for (let index = 0; index < 2; index++) {
+              const element = res?.data?.records[index];
+              if (isTimes('', element.effectStartTime, element.effectEndTime)) {
+                this.ModelBox.setState({ showContactModalVisible: true, activeItem: element });
+                break
               }
             }
+          }
 
-            //this.setState({ showTips: true, tips_detail: res?.data?.records[0] })
-            // setTimeout(() => {
-            //   this.setState({ showTips: false });
-            // }, 3000)
+          //this.setState({ showTips: true, tips_detail: res?.data?.records[0] })
+          // setTimeout(() => {
+          //   this.setState({ showTips: false });
+          // }, 3000)
           // }
         }
       })
-    } 
-    if(activeTree && (activeTree.resourceType == 'yonghong' || activeTree.resourceType == 'fine_bi'|| activeTree.resourceType == 'dmpReport' || activeTree.resourceType == 'report')){
+    }
+    if (activeTree && (activeTree.resourceType == 'yonghong' || activeTree.resourceType == 'fine_bi' || activeTree.resourceType == 'dmpReport' || activeTree.resourceType == 'report')) {
       this.props.getTips()
-    }else{
+    } else {
       this.props.cleatTips()
     }
     if (activeTree) {
@@ -305,4 +305,4 @@ export default class extends Component {
       // </div>
     );
   }
-}
+}

src/pages/frame/view.jsx

@@ -146,11 +146,12 @@ export default observer(function Frame(props) {
   const history = useHistory();
   const [curKey, setKey] = useState("1");
   const moveBar = useRef();
-  const [isMove,setisMove] = useState(false);
+  const [isMove, setisMove] = useState(false);
   const name_arr = {
     "#/home/gvc": "产供销价值链",
     "#/home/operation": "运营数据中心",
     "#/home/tlk": "TLK运营数据中心 / TLK Plant Dashboard",
+    "#/home/sial": "硅铝微粉数据中心",
   }
   const [titleName, setTitleName] = useState(name_arr[window.location.hash]);
 
@@ -249,7 +250,7 @@ export default observer(function Frame(props) {
 
   return (
     <div className={styles.frame}>
-      <Top names={titleName}/>
+      <Top names={titleName} />
       <ModelMsg onRef={onRef} getTips={getTips} cleatTips={cleatTips} changeName={(name) => {
         setTitleName(name);
       }} />

src/pages/gvc/api3.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/1431155205925726276",
+    method: "POST",
+    data: {
+      "apiId": "1431155205925726276",
+      "appKey": "200000135",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "factoryCode",
+        "factoryName",
+        "prodCatgoryCode",
+        "prodCatgory",
+        "indexValue",
+      ],
+      "pageNum": 1,
+      "pageSize": 100,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '5de9f29632bf379f46b1a0d1c5a85112',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1431155205925726276',
+      appKey: '200000135',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**各基地日，月累计，年累计产量 */
+export function smallDayService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1431155399122708561",
+    method: "POST",
+    data: {
+      "apiId": "1431155399122708561",
+      "appKey": "200000135",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "factoryCode",
+        "factoryNameCode",
+        "dateType",
+        "indexValue"
+      ],
+      "pageNum": 1,
+      "pageSize": 20,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'df5c9e31ae6544ae9561c2d2a9f89702',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1431155399122708561',
+      appKey: '200000135',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**左侧数据*/
+export function leftService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1431155462568896598",
+    method: "POST",
+    data: {
+      "apiId": "1431155462568896598",
+      "appKey": "200000135",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "prodCode",
+        "production",
+        "inventory"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'a1288953bd76d9f0b202280c84062f60',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1431155462568896598',
+      appKey: '200000135',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**累计销量客户*/
+export function rollService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1431155512914176090",
+    method: "POST",
+    data: {
+      "apiId": "1431155512914176090",
+      "appKey": "200000135",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "customerName",
+        "salesQty"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '7e13e57d4d3b4430dad7eedaaf5fe668',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1431155512914176090',
+      appKey: '200000135',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**锂辉石库存*/
+export function bigShopService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1431155276398422090",
+    method: "POST",
+    data: {
+      "apiId": "1431155276398422090",
+      "appKey": "200000135",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "warehouseNameCode",
+        "indexValue",
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '253c1c9594881b0724b3403e9ea78527',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1431155276398422090',
+      appKey: '200000135',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**个基地年累计产量，库存*/
+export function smallShopService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1431155337148721229",
+    method: "POST",
+    data: {
+      "apiId": "1431155337148721229",
+      "appKey": "200000135",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "factoryCode",
+        "production",
+        "inventory",
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'ae68ccba4a6c70600cd9c75be6eb8264',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1431155337148721229',
+      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

@@ -89,10 +89,10 @@ class MapViewTwo extends Component {
         btn.removeEventListener('click', play);
       }
       else {
-        if(model){
+        if (model) {
           model.style.display = 'block';
         }
-        if(btn){btn.addEventListener('click', play);}
+        if (btn) { btn.addEventListener('click', play); }
       }
     }
     play()
@@ -104,7 +104,7 @@ class MapViewTwo extends Component {
     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/dataVimg/videoGvc.mp4").default} autoplay="autoplay" class="videoBoxViem"></video>
+          <video src={require("@assets/imgs/dataVimg/gvcVideo1.mp4").default} autoplay="autoplay" class="videoBoxViem"></video>
         </div>
       </div>
     )

src/pages/gvc/component/rightBottomView.jsx

@@ -13,7 +13,7 @@ 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 { getArrMax, sortby } from "@utils/util";
 import {
   rollService,
 } from "../api";
@@ -37,19 +37,19 @@ class RightBottomView extends Component {
   }
 
   async getUrl() {
-    await rollService().then(({ data=[], resultCode }) => {
+    await rollService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
         let data_item = [];
-        const max1 = data.sort(sortby('salesQty',false));
+        const max1 = data.sort(sortby('salesQty', false));
         const max2 = max1?.[0]?.salesQty / 0.95 || 0;
-        data.map((x,i)=>{  
+        data.map((x, i) => {
           data_item.push({
             name: x.customerName,
             num: x.salesQty,
-            percent:Number(x.salesQty / max2).toFixed(2) * 100
+            percent: Number(x.salesQty / max2).toFixed(2) * 100
           })
         });
-        this.setState({data_item});
+        this.setState({ data_item });
       }
     });
 
@@ -59,7 +59,7 @@ class RightBottomView extends Component {
     const { data_item } = this.state;
     const settings = {
       dots: false,
-      arrows:false,
+      arrows: false,
       infinite: true,
       autoplay: true,
       speed: 4000,
@@ -72,14 +72,14 @@ class RightBottomView extends Component {
       vertical: true,
       verticalSwiping: true,
       beforeChange: function (currentSlide, nextSlide) {
-        console.log("before change", currentSlide, nextSlide);
+        // console.log("before change", currentSlide, nextSlide);
       },
       afterChange: function (currentSlide) {
-        console.log("after change", currentSlide);
+        //console.log("after change", currentSlide);
       }
     };
     return (
-      <div className={["eacharView cbRightBottomView slider_item_box"]} style={{height: data_item.length > 8 ? 'auto' : "100%"}}>
+      <div className={["eacharView cbRightBottomView slider_item_box"]} style={{ height: data_item.length > 8 ? 'auto' : "100%" }}>
         <p className="title_">累计发货量客户/吨</p>
         <Slider {...settings}>
           {

src/pages/gvc/mod.js

@@ -16,206 +16,188 @@ import { message } from 'antd';
 const defaultState = {
   imgMsgData: [
     {
-      total: 4500,
-      totalName: "累计运输锂辉石",
-      styles: { left: "0%", top: "19%" },
-      cumulativeProduction: null,
-      inventory: 0,
+      "warehouseNameCode": "3",
+      "indexValue": 0,
+      "total": 0,
+      "totalName": "累计运输锂辉石(化学级)",
+      "styles": {
+        "left": "5%",
+        "top": "27%",
+        "width": "12em"
+      },
+      "cumulativeProduction": null,
+      "inventory": 0,
+      "showDetail": false
     },
     {
-      total: 3233,
-      totalName: "锂辉石库存量",
-      styles: { left: "11%", top: "45%" },
-      cumulativeProduction: null,
-      inventory: 0,
+      "warehouseNameCode": "2",
+      "indexValue": 0,
+      "total": 0,
+      "totalName": "锂辉石(化学级)库存量",
+      "styles": {
+        "left": "13%",
+        "top": "53%",
+        "width": "12em"
+      },
+      "cumulativeProduction": null,
+      "inventory": 0,
+      "showDetail": false
     },
     {
-      total: 3578,
-      totalName: "锂辉石库存量",
-      styles: { left: "34%", top: "27%" },
-      cumulativeProduction: null,
-      inventory: 0,
+      "warehouseNameCode": "1",
+      "indexValue": 0,
+      "total": 0,
+      "totalName": "锂辉石(化学级)库存量",
+      "styles": {
+        "left": "32%",
+        "top": "38%",
+        "width": "12em"
+      },
+      "cumulativeProduction": null,
+      "inventory": 0,
+      "showDetail": false
     },
     {
-      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,
-        },
+      "factoryCode": 5,
+      "production": 0,
+      "inventory": 0,
+      "total": 0,
+      "totalName": "",
+      "styles": {
+        "left": "21%",
+        "top": "76%"
+      },
+      "cumulativeProduction": 0,
+      "day": 0,
+      "mood": "0",
+      "year": "0",
+      "rawMaterial": [
+
       ]
     },
     {
-      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,
-        },
+      "factoryCode": 4,
+      "production": 0,
+      "inventory": 0,
+      "total": 0,
+      "totalName": "",
+      "styles": {
+        "left": "65%",
+        "top": "41%"
+      },
+      "cumulativeProduction": 0,
+      "day": "0",
+      "mood": "0",
+      "year": "0",
+      "rawMaterial": [
+
       ]
     },
     {
-      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,
-        },
+      "factoryCode": 3,
+      "production": 0,
+      "inventory": 0,
+      "total": 0,
+      "totalName": "",
+      "styles": {
+        "left": "52%",
+        "top": "52%"
+      },
+      "cumulativeProduction": 0,
+      "day": "74.52",
+      "mood": "787.84",
+      "year": "8,510.82",
+      "rawMaterial": [
+
+      ]
+    },
+    {
+      "factoryCode": 2,
+      "production": 0,
+      "inventory": 0,
+      "total": 0,
+      "totalName": "",
+      "styles": {
+        "left": "36%",
+        "top": "64%"
+      },
+      "cumulativeProduction": 0,
+      "day": 0,
+      "mood": "108.00",
+      "year": "6,260.16",
+      "rawMaterial": [
+
       ]
     },
     {
-      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,
-        },
+      "factoryCode": 1,
+      "production": 0,
+      "inventory": 0,
+      "total": 0,
+      "totalName": "",
+      "styles": {
+        "left": "47%",
+        "top": "23%"
+      },
+      "cumulativeProduction": 0,
+      "day": 0,
+      "mood": 0,
+      "year": 0,
+      "rawMaterial": [
+
       ]
     },
     {
-      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,
-        },
+      "factoryCode": 6,
+      "production": 0,
+      "inventory": 0,
+      "total": 0,
+      "totalName": "",
+      "styles": {
+        "left": "7%",
+        "top": "89%"
+      },
+      "cumulativeProduction": 0,
+      "day": "0",
+      "mood": "0",
+      "year": "0",
+      "rawMaterial": [
+
       ]
     },
+    {
+      "factoryCode": 7,
+      "production": 0,
+      "inventory": 0,
+      "total": 0,
+      "totalName": "",
+      "styles": {
+        "left": "80%",
+        "top": "28%"
+      },
+      "cumulativeProduction": 0,
+      "day": 0,
+      "mood": 0,
+      "year": 0,
+      "rawMaterial": []
+    },
+    {
+      "warehouseNameCode": "5",
+      "indexValue": 0,
+      "total": 0,
+      "totalName": "锂辉石(化学级)在途库存",
+      "styles": {
+        "left": "20%",
+        "top": "25%",
+        "width": "12em"
+      },
+      "cumulativeProduction": null,
+      "inventory": 0,
+      "showDetail": true,
+      "rawMaterial": [
+
+      ]
+    }
   ],
 }
 

src/pages/gvc/style.less

@@ -20,37 +20,259 @@
       .gvc_video {
         background: url(../../assets/imgs/dataVimg/gvcBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40 !important;
         align-items: flex-start;
-        // background: #000;
+        justify-content: center;
+        box-sizing: border-box;
+        overflow: visible;
 
         video {
+          display: block;
+          width: 100%;
+          height: auto;
+          max-height: min(96vh, 100dvh);
+          padding: 0;
+          object-fit: contain;
+          pointer-events: none;
+        }
+
+        img {
           width: 100%;
           height: unset;
           padding: 0;
         }
 
-        .alls {
 
-          width: 64%;
+        .alls {
+          width: 80%;
           height: unset;
-          padding: 2% 0 0 0;
+          padding: 0% 0% 0% 2%;
           position: relative;
+          box-sizing: border-box;
+          z-index: 1;
+          overflow: visible;
         }
 
-        @media (min-height: 800px) {
+        // 仅主视频接收点击；片头 MapViewTwo 同带 .gvc_video 且 z-index:12，否则会盖住下层热点
+        &:not(.video_box_hide) .alls {
+          pointer-events: auto;
+        }
+
+        &.video_box_hide,
+        &.video_box_hide * {
+          pointer-events: none !important;
+        }
+
+        // 热点与视频同层：百分比相对视频显示区域，缩屏时与画面一起变
+        .imgMsg {
+          list-style: none;
+          margin: 0;
+          padding: 0;
+          width: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          height: 100%;
+          color: #fff;
+          pointer-events: none;
+          z-index: 2;
+          overflow: visible;
+
+          li {
+            position: absolute;
+            width: 20em;
+            z-index: 10;
+            height: 4em;
+            opacity: 1;
+            overflow: visible;
+            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;
+            pointer-events: auto;
+
+            .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;
+              overflow: visible;
+
+
+              .hoverDiv {
+                display: none;
+              }
+            }
+
+            .hoverDiv {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              padding: 0 1em;
+              background: linear-gradient(0deg, #292929f2 0%, #25252540 100%);
+              width: 100%;
+              border-radius: 0.5em;
+              box-sizing: border-box;
+              margin-top: 0.1em;
+              font-size: 0.8em;
+              padding: 0.2em 0em 0 1em;
+              color: #d7d7d7;
+              align-items: flex-start;
+              height: auto;
+
+              >div>span {
+                display: block;
+              }
+            }
+
+            // 必须压过 .hoverR .hoverDiv{display:none} 的单条选择器优先级
+            &:hover .hoverR .hoverDiv {
+              display: flex !important;
+            }
+          }
+
+          @media (max-height: 900px) {
+            li .hoverDiv {
+              background: linear-gradient(0deg, #292929 0%, #252525 100%) !important;
+            }
+          }
+
+          li:hover {
+            background: linear-gradient(0deg, #42ca9840 0%, #42ca9800 98%);
+          }
+        }
+
+        @media (max-height: 1000px) {
+          video {
+            max-height: min(82vh, 100dvh);
+          }
+
           .alls {
-            width: 73%;
+            width: 74%;
           }
+
+
         }
 
-        @media (min-height: 900px) {
+
+        @media (max-height: 1050px) {
+          video {
+            max-height: min(82vh, 100dvh);
+          }
+
           .alls {
-            width: 64%;
+            width: 77%;
+            padding: 1.1% 0 0 1.1%;
+          }
+
+          .imgMsg {
+            top: -1em;
+          }
+
+          .imgMsg li {
+            font-size: 0.82em;
+            width: 21em;
+            height: 3.75em;
+            padding: 0.4em;
+
+            .chanL {
+              // height: 3.75em;
+              font-size: 0.85em;
+            }
           }
         }
 
-        @media (min-height: 1000PX) {
+        @media (min-width: 2560px) {
           .alls {
-            width: 70%;
+            width: 77%;
+          }
+
+          video {
+            max-height: min(88vh, 100dvh);
+          }
+        }
+
+        @media (min-width: 2240px) and (max-width: 2559px) {
+          .alls {
+            width: 77%;
+          }
+
+          video {
+            max-height: min(90vh, 100dvh);
+          }
+        }
+
+        @media (min-width: 1760px) and (max-width: 2239px) {
+          .alls {
+            width: 77%;
+          }
+
+          video {
+            max-height: min(92vh, 100dvh);
+          }
+        }
+
+        @media (min-width: 1441px) and (max-width: 1759px) {
+          .alls {
+            width: 77%;
+          }
+
+          video {
+            max-height: min(93vh, 100dvh);
+          }
+        }
+
+        @media (max-width: 1440px) {
+          .alls {
+            width: 77%;
+          }
+
+          video {
+            max-height: min(94vh, 100dvh);
+          }
+        }
+
+        @media (max-width: 1280px) {
+          .alls {
+            width: 76%;
+          }
+
+          video {
+            max-height: min(90vh, 100dvh);
           }
         }
 
@@ -59,6 +281,14 @@
       .gvcHome {
         height: 100%;
         justify-content: flex-start;
+        // 中间区域需穿透到下层视频热点；否则 hoverR 向上伸出 centerCon 后无法触发 hover
+        pointer-events: none;
+
+        .leftContent,
+        .rightContent,
+        .bottom_box {
+          pointer-events: auto;
+        }
 
         .leftContent {
           width: 17%;
@@ -144,10 +374,11 @@
         }
 
         @media (max-height: 900px) {
-          .leftContent{
+          .leftContent {
             margin-top: 1%;
             height: 75%;
           }
+
           .leftContent li {
             height: 23% !important;
 
@@ -165,11 +396,12 @@
 
 
         .centerCon {
-          width: 62%;
-          height: 80%;
+          width: 63%;
+          height: 75%;
           padding: 0;
           position: relative;
           margin: 0% 0 0 -1%;
+          pointer-events: none;
 
           .rightCar {
             width: 4.5em;
@@ -177,8 +409,10 @@
             position: absolute;
             left: 53%;
             top: 36%;
-            -webkit-animation: antSpinMove 8s linear infinite;;
-            animation: antSpinMove 8s linear infinite;;
+            -webkit-animation: antSpinMove 8s linear infinite;
+            ;
+            animation: antSpinMove 8s linear infinite;
+            ;
 
             >img {
               width: 100%;
@@ -187,166 +421,61 @@
 
         }
 
-        
-
-        @media (min-height: 800px) {
-          .centerCon {
-            width: 65%;
-            height: 78%;
-            padding: 0;
-            position: relative;
-            margin: 0% 0 0 -3%;
-            .rightCar {
-              -webkit-animation: antSpinMove900 8s linear infinite;;
-              animation: antSpinMove900 8s linear infinite;;
-                
-            }
-          }
-
-        }
-
-        @media (min-height: 900px) {
-          .centerCon {
-            width: 62%;
-            height: 80%;
-            padding: 0;
-            position: relative;
-            margin: 0% 0 0 -1%;
-            .rightCar {
-              -webkit-animation: antSpinMove 8s linear infinite;;
-              animation: antSpinMove 8s linear infinite;;
-            }
-          }
-        }
-
-        @media (min-height: 1000PX) {
-          .centerCon {
-            width: 63%;
-            height: 75%;
-            padding: 0;
-            position: relative;
-            margin: 0% 0 0 -3%;
-            .rightCar {
-              -webkit-animation: antSpinMove1100 8s linear infinite;;
-              animation: antSpinMove1100 8s linear infinite;;
-                
-            }
-          }
-        }
-
-
-        .imgMsg {
-          width: 100%;
-          position: absolute;
-          left: 0;
-          top: 0;
-          height: 100%;
-          color: #fff;
-
-          li {
-            position: absolute;
-            width: 25em;
-            z-index: 10;
-            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, #292929f2 0%, #25252540 100%);
-              // 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 0em 0 1em;
-              color: #d7d7d7;
-              align-items: flex-start;
-              height: auto;
-
-              >div>span {
-                display: block;
-              }
-            }
-          }
-          @media (max-height: 900px) {
-            li .hoverDiv{
-              background:linear-gradient(0deg, #292929 0%, #252525 100%)!important;
-            }
-  
-          }
 
 
-          li:hover {
-            background: linear-gradient(0deg, #42ca9840 0%, #42ca9800 98%);
-          }
-        }
-        @media (max-height: 900px) {
-          .imgMsg {
-            top: -1.5em;
-          }
-        }
+        // @media (min-height: 800px) {
+        //   .centerCon {
+        //     width: 65%;
+        //     height: 78%;
+        //     padding: 0;
+        //     position: relative;
+        //     margin: 0% 0 0 -3%;
+
+        //     .rightCar {
+        //       -webkit-animation: antSpinMove900 8s linear infinite;
+        //       ;
+        //       animation: antSpinMove900 8s linear infinite;
+        //       ;
+
+        //     }
+        //   }
+
+        // }
+
+        // @media (min-height: 900px) {
+        //   .centerCon {
+        //     width: 62%;
+        //     height: 80%;
+        //     padding: 0;
+        //     position: relative;
+        //     margin: 0% 0 0 -1%;
+
+        //     .rightCar {
+        //       -webkit-animation: antSpinMove 8s linear infinite;
+        //       ;
+        //       animation: antSpinMove 8s linear infinite;
+        //       ;
+        //     }
+        //   }
+        // }
+
+        // @media (min-height: 1000PX) {
+        //   .centerCon {
+        //     width: 63%;
+        //     height: 75%;
+        //     padding: 0;
+        //     position: relative;
+        //     margin: 0% 0 0 -3%;
+
+        //     .rightCar {
+        //       -webkit-animation: antSpinMove1100 8s linear infinite;
+        //       ;
+        //       animation: antSpinMove1100 8s linear infinite;
+        //       ;
+
+        //     }
+        //   }
+        // }
 
         .rightContent {
           width: 15%;

src/pages/gvc/view.jsx

@@ -23,7 +23,9 @@ import {
   updateTimeService
 } from "./api";
 import MapViewTwo from "./component/mapView2.jsx";
-import mpVideoGvc from "@assets/imgs/dataVimg/videoGvc2.mp4";
+import mpVideoGvc from "@assets/imgs/dataVimg/gvcVideo2.mp4";
+import gvcbg from "@assets/imgs/dataVimg/gvcbg.png";
+
 import { getThousandNum, deleteCacheAndChangeUrl, timestampToTime, setWaterMark } from "@utils/util";
 import 'animate.css';
 import { get } from "lodash";
@@ -47,8 +49,8 @@ class Gvc extends Component {
       manHourData: [
       ],
       manHourNum: 1,
-      leftName:deleteCacheAndChangeUrl("left",false,true),
-      rightName:deleteCacheAndChangeUrl("right",false,true),
+      leftName: deleteCacheAndChangeUrl("left", false, true),
+      rightName: deleteCacheAndChangeUrl("right", false, true),
     };
     this.timer = null //定时器，用于检测同步状态
   }
@@ -187,8 +189,9 @@ class Gvc extends Component {
   async getUrl2() {
     await bigShopService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
-        const name_ = ["", "锂辉石(化学级)库存量", "锂辉石(化学级)库存量", "累计运输锂辉石(化学级)"];
-        const style__ = [{}, { left: "34%", top: "30%" }, { left: "11%", top: "48%" }, { left: "0%", top: "22%" }]
+        console.log('getUrl2', data)
+        const name_ = ["", "锂辉石(化学级)库存量", "锂辉石(化学级)库存量", "累计运输锂辉石(化学级)", "", "锂辉石(化学级)在途库存"];
+        const style__ = [{}, { left: "32%", top: "38%", width: '12em' }, { left: "13%", top: "53%", width: '12em' }, { left: "5%", top: "27%", width: '12em' }, "", { left: "20%", top: "25%", width: '12em' }]
         data = data.map((x, i) => {
           return {
             ...x,
@@ -197,18 +200,22 @@ class Gvc extends Component {
             styles: style__[x.warehouseNameCode],
             cumulativeProduction: null,
             inventory: 0,
+            showDetail: x.warehouseNameCode == 5 //在途显示明细
           }
         });
         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];
         const d_4 = data.filter(x => { return x.warehouseNameCode == 4 })[0];
+        const d_10 = data.filter(x => { return x.warehouseNameCode == 5 })[0];
         let old_imgMsgData = this.store.state.imgMsgData;
         old_imgMsgData[0] = d_1;
         old_imgMsgData[1] = d_2;
         old_imgMsgData[2] = d_3;
+        old_imgMsgData[10] = d_10;
+
 
-        this.setState({ LeftHtml:[...[{txt_name:'锂辉石(化学级)',num1:d_4?.indexValue}],...this.state.LeftHtml] });
+        this.setState({ LeftHtml: [...[{ txt_name: '锂辉石(化学级)', num1: d_4?.indexValue }], ...this.state.LeftHtml] });
         this.store.saveState({ imgMsgData: old_imgMsgData });
       }
     });
@@ -216,7 +223,8 @@ class Gvc extends Component {
   async getUrl4() {
     await smallShopService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
-        const style__ = [{}, { left: "87%", top: "28%" }, { left: "69%", top: "46%" }, { left: "52%", top: "59%" }, { left: "29%", top: "76%" }, { left: "11%", top: "89%" }]
+        console.log('getUrl4', data)
+        const style__ = [{}, { left: "47%", top: "23%" }, { left: "36%", top: "64%" }, { left: "52%", top: "52%" }, { left: "65%", top: "41%" }, { left: "21%", top: "76%" }, { left: "7%", top: "89%" }, { left: "80%", top: "28%" }]
         data = data.map((x, i) => {
           return {
             ...x,
@@ -227,17 +235,21 @@ class Gvc extends Component {
             inventory: x.inventory,
           }
         });
-        const d_1 = data.filter(x => { return x.factoryCode == 5 })[0];
-        const d_2 = data.filter(x => { return x.factoryCode == 4 })[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];
+        const d_1 = data.filter(x => { return x.factoryCode == 5 })[0];//江苏
+        const d_2 = data.filter(x => { return x.factoryCode == 4 })[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];//外加工厂
+        const d_6 = data.filter(x => { return x.factoryCode == 6 })[0];//苏州
+        const d_7 = data.filter(x => { return x.factoryCode == 7 })[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;
+        old_imgMsgData[8] = d_6;
+        old_imgMsgData[9] = d_7;
 
 
         console.log(old_imgMsgData, "old_imgMsgData")
@@ -251,6 +263,7 @@ class Gvc extends Component {
   async getUrl5() {
     await smallDayService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
+        console.log('getUrl5', data)
         function getItems(num) {
           const datas = data.filter(x => { return x.factoryCode == num });
           const par = {
@@ -267,12 +280,16 @@ class Gvc extends Component {
         // const d_4 = data.filter(x=>{return x.factoryCode == 2})[0];
         const d_4 = getItems(2);
         const d_5 = getItems(1);
+        const d_6 = getItems(6);
+        const d_7 = getItems(7);
         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 };
+        old_imgMsgData[8] = { ...old_imgMsgData[8], ...d_6 };
+        old_imgMsgData[9] = { ...old_imgMsgData[9], ...d_7 };
         console.log(old_imgMsgData, "1111old_imgMsgData")
         this.store.saveState({ imgMsgData: old_imgMsgData });
         setTimeout(() => {
@@ -286,6 +303,7 @@ class Gvc extends Component {
   async getUrl6() {
     await smallMaterialService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
+        console.log('getUrl6', data)
         function getItems(num) {
           const datas = data.filter(x => { return x.factoryCode == num });
           let rawMaterial = datas.map((item, index) => {
@@ -307,7 +325,9 @@ class Gvc extends Component {
         const d_3 = getItems(3);
         const d_4 = getItems(2);
         const d_5 = getItems(1);
-
+        const d_6 = getItems(6);
+        const d_7 = getItems(7);
+        const d_8 = getItems(8);//锂辉石在途库存
 
         let old_imgMsgData = this.store.state.imgMsgData;
         old_imgMsgData[3] = { ...old_imgMsgData[3], ...d_1 };
@@ -315,6 +335,9 @@ class Gvc extends Component {
         old_imgMsgData[5] = { ...old_imgMsgData[5], ...d_3 };
         old_imgMsgData[6] = { ...old_imgMsgData[6], ...d_4 };
         old_imgMsgData[7] = { ...old_imgMsgData[7], ...d_5 };
+        old_imgMsgData[8] = { ...old_imgMsgData[8], ...d_6 };
+        old_imgMsgData[9] = { ...old_imgMsgData[9], ...d_7 };
+        old_imgMsgData[10] = { ...old_imgMsgData[10], ...d_8 };
         console.log(old_imgMsgData, "1111old_imgMsgData")
         this.store.saveState({ imgMsgData: old_imgMsgData });
       }
@@ -381,7 +404,8 @@ class Gvc extends Component {
   render() {
     const stores = this.store.state;
     let { totalValue, yearDecline, yearSend, imgMsgData } = this.store.state;
-    let { LeftHtml, updateTime, changGif,leftName,rightName } = this.state;
+    console.log('imgMsgData', toJS(imgMsgData))
+    let { LeftHtml, updateTime, changGif, leftName, rightName } = this.state;
     return (
       <div className={[styles.gvc_home + ' home_box ']}>
         {/* 水印 */}
@@ -411,33 +435,15 @@ class Gvc extends Component {
           <MapViewTwo></MapViewTwo>
           <div className={"video_box gvc_video"}>
             <div className="alls">
-              <video src={mpVideoGvc} playbackRate={0.5} autoplay="autoplay" loop="loop" class="video_box_2 center_box2 animate__animated animate__fadeIn animate__delay-2s">
+              <video src={mpVideoGvc} playbackRate={0.5} autoplay="autoplay" loop="loop" class="video_box_2 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">
-              <p className="rightCar">
-                <img src={require("@assets/imgs/gvc/car.png").default} alt="" />
-              </p>
               <ul className="imgMsg">
                 {
                   toJS(imgMsgData).map((item, index) => {
-                    if (!item) { return }
+                    if (!item) { return null }
                     return (
                       <li style={{ ...item?.styles }} class="animate__animated animate__bounceInUp animate__slower">
-                        {/* 矿产 */}
+
                         {
                           item.totalName && <p className="name">{item.totalName}</p>
                         }
@@ -450,26 +456,27 @@ class Gvc extends Component {
                         {
                           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: "38%" }}>
-                                <p className="title">
-                                  产量/吨
-                                </p>
-                                <span>日：{item.day}</span>
-                                <span>月：{item.mood}</span>
-                                <span>年：{item.year}</span>
-                              </div>
+                          (item.cumulativeProduction !== null || item.showDetail) && <div className="hoverR">
+                            <div className="hoverDiv chanL" >
+                              {
+                                item.cumulativeProduction !== null && <div style={{ width: "38%" }}>
+                                  <p className="title">
+                                    产量/吨
+                                  </p>
+                                  <span>日：{item.day}</span>
+                                  <span>月：{item.mood}</span>
+                                  <span>年：{item.year}</span>
+                                </div>
+                              }
+
                               <div style={{ width: index == 5 ? "58%" : "57%" }}>
                                 <p className="title">
                                   库存/吨
                                 </p>
                                 {
                                   get(item, "rawMaterial", []).map((ra, rai) => {
-                                    return <span>{ra.prodCatgory}:{ra.indexValue}</span>
+                                    return <span key={rai}>{ra.prodCatgory}:{ra.indexValue}</span>
                                   })
                                 }
                               </div>
@@ -503,6 +510,20 @@ class Gvc extends Component {
               </ul>
             </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" />
+
             {/* 右侧信息栏 */}
             <div className="rightContent">
 

src/pages/sial/api.js

@@ -0,0 +1,362 @@
+import request from "@utils/request";
+
+/**登录*/
+export function checkToken(params) {
+  return request({
+    url: `/api/yonghong/checkToken?token=${params}`,
+    method: "GEt",
+  });
+}
+
+/**碳排放 */
+export function dataengineCenterOneservice(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356250396177503367",
+    method: "POST",
+    data: {
+      "apiId": "1356250396177503367",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "byear",
+        "missionsIntensity",
+        "missionsTotal",
+        "biz_id"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '19c3cdb58b80e44f2490b8eba3b7f938',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356250396177503367',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**库存金额 */
+export function momeyService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356776817075459329",
+    method: "POST",
+    data: {
+      "apiId": "1356776817075459329",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "prodCatgory",
+        "indexValue"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'd58de970856e583f126d186662251024',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356776817075459329',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/** 产量计划完成率*/
+export function timeService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1435868883211217227",
+    method: "POST",
+    data: {
+      "apiId": "1435868883211217227",
+      "appKey": "200000138",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "factoryName",
+        "indexValue",
+        "factoryCode"
+      ],
+      "pageNum": 1,
+      "pageSize": 999,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '897e941a533a75ae9bf82305f2d6df34',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1435868883211217227',
+      appKey: '200000138',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**产值+发货量+产量+库存*/
+export function numberService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1435869479216572764",
+    method: "POST",
+    data: {
+      "apiId": "1435869479216572764",
+      "appKey": "200000138",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "indexValue"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'e764fa1aae81091bde971cd28a709dfa',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1435869479216572764',
+      appKey: '200000138',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**近30天产量*/
+export function mondService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1435868691592341823",
+    method: "POST",
+    data: {
+      "apiId": "1435868691592341823",
+      "appKey": "200000138",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "indexDate",
+        "indexValue",
+        "factoryProdcution",
+        "totalValue"
+      ],
+      "pageNum": 1,
+      "pageSize": 30,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '419a4e9f3c7ed4b18c42b211e4d209fc',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1435868691592341823',
+      appKey: '200000138',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**月度产量/发货量+一次合格率*/
+export function twoService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1435869411763775830",
+    method: "POST",
+    data: {
+      "apiId": "1435869411763775830",
+      "appKey": "200000138",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "bMonth",
+        "proQty",
+        "deliveryQty",
+        "qcRate",
+        "targeRate",
+        "budgetProdQty",
+        "budgetSalesQty"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'c1a4f54cc466dbc636391987832361f3',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1435869411763775830',
+      appKey: '200000138',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+/**干基产率*/
+export function dryBaseData(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1435869551190829407",
+    method: "POST",
+    data: {
+      "apiId": "1435869551190829407",
+      "appKey": "200000138",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "bMonth",
+        "factoryName",
+        "indexValue",
+      ],
+      "pageNum": 1,
+      "pageSize": 100,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'd220845f9b15022fe9cd97aab13935f9',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1435869551190829407',
+      appKey: '200000138',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**更新日期*/
+export function updateTimeService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1435869869019457910",
+    method: "POST",
+    data: {
+      "apiId": "1435869869019457910",
+      "appKey": "200000138",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "etlTime"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '5646c212a5cc864e43c14c2e7e4414b8',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1435869869019457910',
+      appKey: '200000138',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**基地数据*/
+export function getBaseData(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1436949456311773653",
+    method: "POST",
+    data: {
+      "apiId": "1436949456311773653",
+      "appKey": "200000138",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "factoryCode",
+        "production",
+        "inventory",
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '47afe9770e467bba26fdbdcdc5a0a1cf',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1436949456311773653',
+      appKey: '200000138',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**基地年月日数据*/
+export function getBaseYMDData(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1436949376672426448",
+    method: "POST",
+    data: {
+      "apiId": "1436949376672426448",
+      "appKey": "200000138",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "factoryCode",
+        "factoryNameCode",
+        "dateType",
+        "indexValue"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '36a12893781aeabbc03e62a3b8e1f493',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1436949376672426448',
+      appKey: '200000138',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**基地年月日数据*/
+export function getBaseDetailData(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1436949284175440330",
+    method: "POST",
+    data: {
+      "apiId": "1436949284175440330",
+      "appKey": "200000138",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "factoryCode",
+        "factoryName",
+        "prodCatgoryCode",
+        "prodCatgory",
+        "indexValue",
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'c7e043fed27eeb6c524a6e5158035329',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1436949284175440330',
+      appKey: '200000138',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+

src/pages/sial/component/bottomLineForSend.jsx

@@ -0,0 +1,287 @@
+/*
+ * @Author: dayan_hjm 近30天产量
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2024-01-03 14:13:59
+ */
+
+
+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 {
+  mondService,
+} from "../api";
+
+@withRouter
+
+class BottomLineForSend extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+      total_arr: [],
+      year: [],
+      yanting_arr: [],
+      jiangsu_arr: [],
+    };
+  }
+
+  componentDidMount() {
+    this.getUrl()
+  }
+  async getUrl() {
+    await mondService().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        let year = [], total_arr = [], yanting_arr = [], jiangsu_arr = [];
+        data.map((x, i) => {
+          const name_ = x.indexDate.split('-')[1] + '-' + x.indexDate.split('-')[2];
+          year.push(name_);
+          total_arr.push(x.totalValue)
+          yanting_arr.push(x.factoryProdcution)
+          jiangsu_arr.push(x.indexValue)
+        });
+        this.setState({ year, total_arr, yanting_arr, jiangsu_arr });
+        this.setData();
+      }
+    });
+
+  }
+
+  setData() {
+    setTimeout(() => {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echarts2'));
+
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' },
+          borderColor: "rgba(105, 255, 222, 0.5)",
+          borderWidth: 2,
+          padding: 5,
+          className: 'dyLeft',
+          textStyle: {
+            fontSize: 12,
+            textAlign: "left",
+            color: "#ededed"
+          },
+          backgroundColor: "#0000008a",
+        },
+        formatter: `日期: {b0}<br />{a0}: {c0}吨<br />{a1}: {c1}吨<br />{a2}: {c2}吨`,
+        grid: {
+          left: '5%',
+          top: '10%',
+          right: '4%',
+          bottom: '15%',
+          containLabel: true
+        },
+
+
+        // legend: {
+        //   data: ['字段1', '字段2'],
+        //   right: 'center',
+        //   top: 0,
+        //   textStyle: {
+        //     color: "#fff"
+        //   },
+        //   itemWidth: 12,
+        //   itemHeight: 10,
+        //   // itemGap: 35
+        // },
+
+        xAxis: [{
+          type: 'category',
+          // boundaryGap: ['20%', '20%'],
+          axisLabel: {
+            interval: 0,
+            rotate: -60,
+            textStyle: {
+              color: '#7d7d7d',
+              fontSize: 11,
+            },
+            showMaxLabel: true,//关键部分，显示最后一个label
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255,255,255,.1)',
+              type: 'dashed',
+
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#3b3b3b',
+              type: 'dashed',
+            }
+          },
+          data: this.state.year
+        }, {
+
+          axisPointer: { show: false },
+          axisLine: { show: false },
+          position: 'bottom',
+          offset: 20,
+
+
+
+        }],
+
+        yAxis: [{
+          type: 'value',
+          axisTick: { show: false },
+          // splitNumber: 6,
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(255,255,255,.1)'
+            },
+          },
+          axisLabel: {
+            formatter: "{value} 吨",
+            textStyle: {
+              color: '#7d7d7d',
+              fontSize: 13
+            },
+          },
+
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(255,255,255,.1)'
+            }
+          }
+        }],
+        series: [
+          {
+            name: '总产量',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                color: '#69FFDE',
+                width: 2
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                  offset: 0,
+                  color: 'rgba(0, 255, 182, 0.5)'
+                }, {
+                  offset: 1,
+                  color: 'rgba(0, 255, 182, 0)'
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(0, 255, 182, 0.3)',
+                borderWidth: 12
+              }
+            },
+            data: this.state.total_arr,
+            "smooth": true
+          },
+          {
+            name: '江苏（产量）',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 0,
+            showSymbol: false,
+            itemStyle: {
+              color: '#FFCE00'
+            },
+            lineStyle: {
+              normal: {
+                color: '#FFCE00',
+                width: 2
+              }
+            },
+            data: this.state.jiangsu_arr,
+            "smooth": true
+          },
+          {
+            name: '盐亭（产量）',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 0,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                color: '#8D93FF',
+                width: 2
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#8D93FF',
+                borderColor: '#8D93FF',
+                borderWidth: 2
+              }
+            },
+            data: this.state.yanting_arr,
+            "smooth": true
+          },
+          // {
+          //   name: '字段2',
+          //   type: 'line',
+          //   smooth: true,
+          //   symbol: 'circle',
+          //   symbolSize: 5,
+          //   showSymbol: false,
+          //   lineStyle: {
+
+          //     normal: {
+          //       color: 'rgba(255, 128, 128, 1)',
+          //       width: 2
+          //     }
+          //   },
+          //   areaStyle: {
+          //     normal: {
+          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+          //         offset: 0,
+          //         color: 'rgba(255, 128, 128,.2)'
+          //       }, {
+          //         offset: 1,
+          //         color: 'rgba(255, 128, 128, 0)'
+          //       }], false),
+          //       shadowColor: 'rgba(0, 0, 0, 0.1)',
+          //     }
+          //   },
+          //   itemStyle: {
+          //     normal: {
+          //       color: 'rgba(255, 128, 128, 1)',
+          //       borderColor: 'rgba(255, 128, 128, .1)',
+          //       borderWidth: 12
+          //     }
+          //   },
+          //   data: [-6.4, 0.1, 6.6, 11.2, 42.1, 26.0, 20.2, 18.31, 21.59, 24.42, 34.03, 32.9]
+          // },
+        ]
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    }, 3000)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbBottomLineForSend"]}>
+        <div id="echarts2"></div>
+      </div>
+    )
+  }
+}
+export default BottomLineForSend;

src/pages/sial/component/dryBaseQualified.jsx

@@ -0,0 +1,219 @@
+/*
+ * @Author: dayan_hjm 一次合格率
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-12-19 16:02:23
+ */
+
+
+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 {
+  dryBaseData,
+} from "../api";
+
+@withRouter
+
+class BottomLineForSend extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+      yantingRate: [],
+      year: [],
+      jiangsuRate: [],
+    };
+  }
+
+  componentDidMount() {
+    this.getUrl()
+  }
+
+  async getUrl() {
+    await dryBaseData().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        let year = [], jiangsuRate = [], yantingRate = [];
+        data.map((x, i) => {
+          if (!year.includes(x.bMonth)) {
+            year.push(x.bMonth);
+          }
+          if (x.factoryName == '天齐盐亭') {
+            yantingRate.push(x.indexValue)
+          } else if (x.factoryName == '天齐江苏') {
+            jiangsuRate.push(x.indexValue)
+          }
+        });
+        this.setState({ year, yantingRate, jiangsuRate });
+        this.setData();
+      }
+    });
+  }
+  roundFun(value = 0) {
+    value = value * 100;
+    var str = parseFloat(value).toFixed(10);
+    var num = str.substring(0, str.lastIndexOf('.') + 3);
+    return num
+  }
+
+
+  setData() {
+    setTimeout(() => {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echarts_drybase'));
+
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' },
+          borderColor: "rgba(105, 255, 222, 0.5)",
+          borderWidth: 2,
+          padding: 2,
+          textStyle: {
+            fontSize: 12,
+            color: "#ededed"
+          },
+          formatter: (param) => {
+            return (param[0] && param[0].seriesName ? param[0].seriesName + ":" : "") + (param[0] && param[0].value ? this.roundFun(param[0].value) + "%<br />" : "") + (param[1] && param[1].seriesName ? param[1].seriesName + ":" : "") + (param[1] && param[1].value ? this.roundFun(param[1].value) + "%" : "")
+            // return (
+            //   <div>
+            //     <p>
+            //       <span>{param[0] && param[0].seriesName ? param[0].seriesName + ":" : ""}</span>
+            //       <span>{param[0] && param[0].value ? param[0].value.toFixed(2) + "%<br />" : ""}</span>
+            //     </p>
+            //     <p>
+            //       <span>{param[1] && param[1].seriesName ? param[1].seriesName + ":" : ""}</span>
+            //       <span>{param[1] && param[1].value ? param[1].value.toFixed(2) + "%" : ""}</span>
+            //     </p>
+            //   </div>
+            // )
+          },
+          //  `{a0}: {c0}<br />{a1}: {c1}`,
+          backgroundColor: "#0000008a"
+        }, "grid": {
+          "top": "20%",
+          "right": "5%",
+          "bottom": "20",
+          "left": "10%",
+        },
+        legend: {
+          data: ['盐亭', '江苏'],
+          right: 'center',
+          padding: [10, 0, 0, 5],
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: 10,
+          },
+          itemWidth: 12,
+          itemHeight: 5,
+        },
+        "xAxis": [
+          {
+            "type": "category",
+            data: this.state.year,
+            axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
+            axisLabel: {
+              textStyle: { color: "'#7d7d7d'", fontSize: '12', },
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#3b3b3b',
+                type: 'dashed',
+
+              }
+            }
+
+          },
+        ],
+        "yAxis": [
+          {
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#7d7d7d',
+                type: 'dashed',
+              },
+            },
+            min: 0,
+            max: 1,
+            // splitNumber: 5,
+            axisTick: { show: false },
+            axisLabel: {
+              formatter: (value) => {
+                return value * 100 + '%'
+              },
+              textStyle: {
+                color: '#7d7d7d',
+                fontSize: 12
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#3b3b3b',
+                type: 'dashed',
+
+              }
+            }
+          },
+        ],
+        "series": [
+          {
+            "name": "盐亭",
+            "type": "line",
+            data: this.state.yantingRate,
+            lineStyle: {
+              normal: {
+                width: 2
+              },
+            },
+            "itemStyle": {
+              "normal": {
+                "color": "#69FFDE",
+
+              }
+            },
+            "smooth": true
+          },
+          {
+            "name": "江苏",
+            "type": "line",
+            data: this.state.jiangsuRate,
+            lineStyle: {
+              normal: {
+                width: 2
+              },
+            },
+            "itemStyle": {
+              "normal": {
+                "color": "#FFCE00",
+
+              }
+            },
+            "smooth": true
+          }
+        ]
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+    }, 3000)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbBottomLineForSend"]}>
+        <div id="echarts_drybase"></div>
+      </div>
+    )
+  }
+}
+export default BottomLineForSend;

src/pages/sial/component/leftMenoyView.jsx

@@ -0,0 +1,425 @@
+/*
+ * @Author: dayan_hjm 库存金额
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2024-10-22 15:07:37
+ */
+
+
+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 { getArrMax } from "@utils/util";
+import { getThousandNum } from "@utils/util";
+import {
+  momeyService,
+} from "../api";
+
+@withRouter
+
+class LeftMenoyView extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+      max1:[],
+      year:["碳酸锂","氧化纳",'金属锂',"氢氧化锂"],
+      missionsIntensity_arr:[
+        {value:0,name:"碳酸锂"},
+        {value:0,name:"氧化纳"},
+        {value:0,name:'金属锂'},
+        {value:0,name:"氢氧化锂"},
+      ],
+    };
+  }
+
+  componentDidMount() {
+    this.getUrl()
+  }
+
+  async getUrl() {
+    let data_style= [{
+            value: 25, name: '', itemStyle: {
+              normal: {
+                // barBorderRadius: 15,
+                // borderColor: "rgba(141, 147, 255, 1)",
+                // borderWidth: 1,
+                color: {
+                  // 完成的圆环的颜色
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(141, 147, 255, 0.3)', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(141, 147, 255, 1)', // 100% 处的颜色
+                    },
+                  ],
+                },
+              },
+            },
+
+          }, {
+            value: 33, name: '', itemStyle: {
+              normal: {
+                // barBorderRadius: 15,
+                // borderColor: "rgba(105, 255, 222, 1)",
+                // borderWidth: 1,
+
+                color: {
+                  // 完成的圆环的颜色
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(105, 255, 222, 0.3)', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(105, 255, 222, 1)', // 100% 处的颜色
+                    },
+                  ],
+                },
+              },
+            },
+
+          }, {
+            value: 35, name: '', itemStyle: {
+              normal: {
+                // barBorderRadius: 15,
+                // borderColor: "rgba(47, 210, 255, 1)",
+                // borderWidth: 1,
+
+                color: {
+                  // 完成的圆环的颜色
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(47, 210, 255, 0.3)', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(47, 210, 255, 1)', // 100% 处的颜色
+                    },
+                  ],
+                },
+              },
+            },
+
+          }, {
+            value: 40, name: '', itemStyle: {
+              normal: {
+                // barBorderRadius: 15,
+                // borderColor: "rgba(255, 206, 0, 1)",
+                // borderWidth: 1,
+
+                color: {
+                  // 完成的圆环的颜色
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: 'rgba(255, 206, 0, 0.3)', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: 'rgba(255, 206, 0, 1)', // 100% 处的颜色
+                    },
+                  ],
+                },
+              },
+            },
+
+          }]
+    await momeyService().then(({ data = [], resultCode }) => {
+      
+      if (+resultCode === 0) {
+        let year = [], missionsIntensity_arr = [],max1=[],num=[];
+        data.map((x, i) => {
+          num.push(x.indexValue)
+          year.unshift(x.prodCatgory);
+          data_style[i].value = x.indexValue;
+          data_style[i].name = x.prodCatgory;
+          missionsIntensity_arr.push(data_style[i])
+        });
+        const max_1 = getArrMax(num);
+        for (let index = 0; index < data.length; index++) {
+          max1.unshift(max_1/0.7)
+        }
+        console.log("year, missionsIntensity_arr,max1",year, missionsIntensity_arr,max1)
+        this.setState({ year, missionsIntensity_arr,max1 });
+        this.setData();
+        this.setData2();
+      }
+    });
+
+  }
+
+
+  setData() {
+    setTimeout(() => {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echarts4'));
+      var option = {
+
+        grid: {
+          left: '0%',
+          top: '4%',
+          right: '5%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: [{
+          show: false,
+        }],
+        yAxis: [{
+          axisTick: 'none',
+          axisLine: 'none',
+          offset: '7',
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255,255,255,.9)',
+              fontSize: '0',
+            }
+          },
+          data: this.state.year
+        },
+        {
+          name: '单位：件',
+          nameGap: '50',
+          nameTextStyle: {
+            color: 'rgba(255,255,255,.6)',
+            fontSize: '16',
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(0,0,0,0)'
+            }
+          },
+          data: [],
+        }],
+        series: [{
+          name: '条',
+          type: 'bar',
+          yAxisIndex: 0,
+          data: this.state.missionsIntensity_arr,
+          label: {
+            normal: {
+              show: true,
+              position: 'right',
+              formatter: function (param) {
+                return getThousandNum(param.value) + '万元';
+                // return param.name+"："+param.value + '万元';
+
+              },
+              textStyle: {
+                color: 'rgba(255,255,255,1)',
+                fontSize: '10',
+              }
+            }
+          },
+          barWidth: 15,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { offset: 0, color: 'rgba(255, 206, 0, 1)' },
+                { offset: 0.7, color: '#ffd01d94' },
+                { offset: 1, color: '#ffd01d94' },
+              ]),
+              barBorderRadius: 15,
+              // borderColor: "rgba(255, 206, 0, 1)",
+              // borderWidth: 1
+            }
+          },
+          labelLine: {
+            length: 10,
+            length2: 50,
+          },
+          // labelLayout: {
+          //   x: "20%",
+          //   y: "20%",
+          //   verticalAlign: "bottom",
+          //   dy: -10,
+          // },
+          z: 2
+        }, {
+          name: '白框',
+          type: 'bar',
+          yAxisIndex: 1,
+          barGap: '-100%',
+          data: this.state.max1,
+          barWidth: 15,
+          itemStyle: {
+            normal: {
+              color: '#ffffff24',
+              barBorderRadius: 15,
+
+            }
+          },
+          z: 1
+        }]
+      };
+
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    }, 3000)
+  }
+
+  setData2() {
+    setTimeout(() => {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echarts6'));
+      let index = 0;
+      function fun() {
+        var timer = setInterval(function () {
+          myChart.dispatchAction({
+            type: 'hideTip',
+            seriesIndex: 0,
+            dataIndex: index,
+          });
+          // 显示提示框
+          myChart.dispatchAction({
+            type: 'showTip',
+            seriesIndex: 0,
+            dataIndex: index,
+          });
+          // 取消高亮指定的数据图形
+          myChart.dispatchAction({
+            type: 'downplay',
+            seriesIndex: 0,
+            dataIndex: index == 0 ? 3 : index - 1,
+          });
+          myChart.dispatchAction({
+            type: 'highlight',
+            seriesIndex: 0,
+            dataIndex: index,
+          });
+          index++;
+          if (index >= 4) {
+            index = 0;
+          }
+        }, 2000);
+      }
+      fun();
+      setTimeout(function () {
+        fun();
+      }, 3000);
+      var option = {
+        // //标题
+        // title: {
+        //   text: '16%',
+        //   subtext: '氢氧化锂',
+        //   x: 'center',
+        //   y: '40%',
+        //   textStyle: {
+        //     color: '#fff',
+        //     fontSize: 20,
+        //     lineHeight: 10,
+        //   },
+        //   subtextStyle: {
+        //     color: 'rgba(205, 241, 255, 1)',
+        //     fontSize: 14,
+        //     lineHeight: 10,
+        //     marginTop: 15,
+        //   },
+        // },
+
+        //图例组件
+
+        tooltip: {
+          trigger: 'item',
+          position: ['50%', '50%'],
+          formatter: function (params, ticket, callback) {
+            // $.get('detail?name=' + params.name, function (content) {
+            //   callback(ticket, toHTML(content));
+            // });
+            return `<div class="testDiv"><p class="p1">
+              ${params.percent ? params.percent.toFixed() : 0}<spanp class="p3">%</span>
+            </p>
+            <p class="p2">${params.name}</p>
+            </div>`;
+          },
+          backgroundColor: 'rgba(0,0,0,0)',
+
+          textStyle: {
+            color: '#fff',
+            fontSize: 20,
+            lineHeight: 10,
+          },
+        },
+        series: [
+          {
+            type: 'pie',
+            radius: ['50%', '65%'],
+            center: ['50%', '50%'],
+            roseType: 'area',
+            //标题与数字一行显示
+            label: {
+              show: false,
+
+            },
+
+            //标题与数字分二行显示
+            // label: {
+            //     alignTo: 'edge',
+            //     formatter: '{name|{b}}\n{time|{d}%}',
+            //     minMargin: 5,
+            //     edgeDistance: 10,
+            //     lineHeight: 30,
+            //     rich: {
+            //         time: {
+            //             fontSize: 10,
+            //             color: 'auto'
+            //         }
+            //     }
+            // },
+            labelLine: {
+              show: false
+            },
+            data: this.state.missionsIntensity_arr,
+          },
+        ],
+      };
+
+
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+    }, 3000)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbLeftMenoyView"]}>
+        <div id="echarts6_box">
+          <img
+            src={require("@assets/imgs/dataVimg/guanghuan.png").default}
+            alt=""
+            class="guanghuan animate__animated animate__pulse animate__infinite animate__slower"
+          />
+
+          <div id="echarts6"></div>
+        </div>
+        <ul className={"name_ul"}>
+          {
+            this.state.year.map(x=>{
+              return <li>{x}</li>
+            })
+          }
+        </ul>
+        <div id="echarts4"></div>
+      </div>
+    )
+  }
+}
+export default LeftMenoyView;

src/pages/sial/component/mapView.jsx

@@ -0,0 +1,112 @@
+/*
+ * @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-01 15:54:40
+ */
+import React, { useState, useEffect, Component } from "react";
+import { useHistory, useLocation, withRouter } from "react-router-dom";
+import mod from '../mod';
+import 'animate.css';
+@withRouter
+
+class MapView 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('.videoBoxViem');
+    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_hide sial_video animate__animated animate__fadeOut animate__delay-2s animate__slower">
+        <div className="alls">
+          <video src={require("@assets/imgs/dataVimg/sial_video1.mp4").default} autoplay="autoplay" class="videoBoxViem"></video>
+        </div>
+
+      </div>
+    )
+  }
+}
+export default MapView;

src/pages/sial/component/moodProductionView.jsx

@@ -0,0 +1,243 @@
+/*
+ * @Author: dayan_hjm 月度产量/发货量
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-11-08 15:24:45
+ */
+
+
+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 {
+  twoService,
+} from "../api";
+
+@withRouter
+
+class MoodSendView extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+      budgetSalesQty: [],
+      year: [],
+      budgetProdQty: [],
+    };
+  }
+
+  componentDidMount() {
+    this.getUrl()
+  }
+
+  async getUrl() {
+    await twoService().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        let year = [], budgetSalesQty = [], budgetProdQty = [];
+        data.map((x, i) => {
+          year.push(x.bMonth);
+          budgetSalesQty.push(x.budgetSalesQty || 0)
+          budgetProdQty.push(x.budgetProdQty || 0)
+        });
+        this.setState({ year, budgetProdQty, budgetSalesQty });
+        this.setData();
+      }
+    });
+
+  }
+
+
+  setData() {
+    setTimeout(() => {
+      var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200];
+      var yMax = 500;
+      var dataShadow = [];
+      for (var i = 0; i < data.length; i++) {
+        dataShadow.push(yMax);
+      }
+      var option = {
+        grid: {
+          left: '2%',
+          top: '18%',
+          right: '0%',
+          bottom: '8%',
+          containLabel: true
+        },
+
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          borderColor: "rgba(105, 255, 222, 0.5)",
+          borderWidth: 2,
+          padding: 5,
+          textStyle: {
+            fontSize: 10,
+            color: "#ededed"
+          },
+          backgroundColor: "#0000008a"
+        },
+        legend: {
+          data: ['计划产量', '实际产量'],
+          fontFamily: 'DingTalkJinBuTi',
+          padding: [25, 0, 0, 10],
+          textStyle: {
+            color: "#fff"
+          },
+          itemWidth: 11,
+          itemHeight: 11,
+        },
+        // toolbox: {
+        //   show: true,
+        //   orient: 'vertical',
+        //   left: 'right',
+        //   top: 'center',
+        //   feature: {
+        //     mark: { show: true },
+        //     dataView: { show: true, readOnly: false },
+        //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
+        //     restore: { show: true },
+        //     saveAsImage: { show: true }
+        //   }
+        // },
+        //   xAxis: {
+        //     data: dataAxis,
+        //     axisTick: {
+        //       show: false,
+        //     },
+        //     axisLine: {
+        //       show: true,
+        //       symbol: ['none', 'arrow'],
+        //       symbolOffset: 12,
+        //       lineStyle: {
+        //         color: '#fff',
+        //       }
+        //     },
+        //     z: 10
+        //   },
+
+        xAxis: [
+          {
+            type: 'category',
+            axisTick: { show: false },
+            data: this.state.year,
+            axisLabel: {
+              /*inside: true,*/
+              color: "rgba(255,255,255,.6)",
+              interval: 0,
+              textStyle: {
+                color: '#7d7d7d',
+                fontSize: 10
+
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgba(255,255,255,.1)',
+                type: 'dashed',
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#3b3b3b',
+                type: 'dashed',
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#7d7d7d',
+                type: 'dashed',
+              },
+            },
+            axisTick: { show: false },
+            axisLabel: {
+              formatter: "{value}吨",
+              textStyle: {
+                color: '#7d7d7d',
+                fontSize: 12
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#3b3b3b',
+                type: 'dashed',
+
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '计划产量',
+            type: 'bar',
+            animation: true,
+            animationDuration: 3000,
+            "smooth": true,
+
+            emphasis: {
+              focus: 'series'
+            },
+            barWidth: 10,
+
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(255, 206, 0, 1)' },
+                { offset: 0.7, color: 'rgba(255, 206, 0, 1)' },
+                { offset: 1, color: 'rgba(255, 206, 0, 0.3)' },
+              ])
+            },
+
+            data: this.state.budgetSalesQty
+          },
+          {
+            name: '实际产量',
+            type: 'bar',
+            animation: true,
+            animationDuration: 3000,
+            "smooth": true,
+
+            barGap: 0,
+            barWidth: 10,
+            emphasis: {
+              focus: 'series'
+            },
+            itemStyle: {
+              labelLine: {
+                show: false
+              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(105, 255, 222, 1)' },
+                { offset: 0.7, color: 'rgba(105, 255, 222, 1)' },
+                { offset: 1, color: 'rgba(105, 255, 222, 0.3)' },
+              ])
+            },
+            data: this.state.budgetProdQty
+          }
+        ]
+      }
+      var myChart = echarts.init(document.getElementById('chartProduct'));
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+    }, 3000)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbMoodSendView"]}>
+        <div id="chartProduct"></div>
+      </div>
+    )
+  }
+}
+export default MoodSendView;

src/pages/sial/component/moodSendView.jsx

@@ -0,0 +1,243 @@
+/*
+ * @Author: dayan_hjm 月度产量/发货量
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-11-08 15:24:45
+ */
+
+
+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 {
+  twoService,
+} from "../api";
+
+@withRouter
+
+class MoodSendView extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+      proQty: [],
+      year: [],
+      deliveryQty: [],
+    };
+  }
+
+  componentDidMount() {
+    this.getUrl()
+  }
+
+  async getUrl() {
+    await twoService().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        let year = [], proQty = [], deliveryQty = [];
+        data.map((x, i) => {
+          year.push(x.bMonth);
+          proQty.push(x.proQty)
+          deliveryQty.push(x.deliveryQty)
+        });
+        this.setState({ year, deliveryQty, proQty });
+        this.setData();
+      }
+    });
+
+  }
+
+
+  setData() {
+    setTimeout(() => {
+      var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 200];
+      var yMax = 500;
+      var dataShadow = [];
+      for (var i = 0; i < data.length; i++) {
+        dataShadow.push(yMax);
+      }
+      var option = {
+        grid: {
+          left: '2%',
+          top: '18%',
+          right: '0%',
+          bottom: '8%',
+          containLabel: true
+        },
+
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          },
+          borderColor: "rgba(105, 255, 222, 0.5)",
+          borderWidth: 2,
+          padding: 5,
+          textStyle: {
+            fontSize: 10,
+            color: "#ededed"
+          },
+          backgroundColor: "#0000008a"
+        },
+        legend: {
+          data: ['计划销售', '实际发货量'],
+          fontFamily: 'DingTalkJinBuTi',
+          padding: [25, 0, 0, 10],
+          textStyle: {
+            color: "#fff"
+          },
+          itemWidth: 11,
+          itemHeight: 11,
+        },
+        // toolbox: {
+        //   show: true,
+        //   orient: 'vertical',
+        //   left: 'right',
+        //   top: 'center',
+        //   feature: {
+        //     mark: { show: true },
+        //     dataView: { show: true, readOnly: false },
+        //     magicType: { show: true, type: ['line', 'bar', 'stack'] },
+        //     restore: { show: true },
+        //     saveAsImage: { show: true }
+        //   }
+        // },
+        //   xAxis: {
+        //     data: dataAxis,
+        //     axisTick: {
+        //       show: false,
+        //     },
+        //     axisLine: {
+        //       show: true,
+        //       symbol: ['none', 'arrow'],
+        //       symbolOffset: 12,
+        //       lineStyle: {
+        //         color: '#fff',
+        //       }
+        //     },
+        //     z: 10
+        //   },
+
+        xAxis: [
+          {
+            type: 'category',
+            axisTick: { show: false },
+            data: this.state.year,
+            axisLabel: {
+              /*inside: true,*/
+              color: "rgba(255,255,255,.6)",
+              interval: 0,
+              textStyle: {
+                color: '#7d7d7d',
+                fontSize: 10
+
+              },
+            },
+            axisLine: {
+              lineStyle: {
+                color: 'rgba(255,255,255,.1)',
+                type: 'dashed',
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#3b3b3b',
+                type: 'dashed',
+              }
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#7d7d7d',
+                type: 'dashed',
+              },
+            },
+            axisTick: { show: false },
+            axisLabel: {
+              formatter: "{value}吨",
+              textStyle: {
+                color: '#7d7d7d',
+                fontSize: 12
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#3b3b3b',
+                type: 'dashed',
+
+              }
+            }
+          }
+        ],
+        series: [
+          {
+            name: '计划销售',
+            type: 'bar',
+            animation: true,
+            animationDuration: 3000,
+            "smooth": true,
+
+            emphasis: {
+              focus: 'series'
+            },
+            barWidth: 10,
+
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(255, 206, 0, 1)' },
+                { offset: 0.7, color: 'rgba(255, 206, 0, 1)' },
+                { offset: 1, color: 'rgba(255, 206, 0, 0.3)' },
+              ])
+            },
+
+            data: this.state.proQty
+          },
+          {
+            name: '实际发货量',
+            type: 'bar',
+            animation: true,
+            animationDuration: 3000,
+            "smooth": true,
+
+            barGap: 0,
+            barWidth: 10,
+            emphasis: {
+              focus: 'series'
+            },
+            itemStyle: {
+              labelLine: {
+                show: false
+              },
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                { offset: 0, color: 'rgba(105, 255, 222, 1)' },
+                { offset: 0.7, color: 'rgba(105, 255, 222, 1)' },
+                { offset: 1, color: 'rgba(105, 255, 222, 0.3)' },
+              ])
+            },
+            data: this.state.deliveryQty
+          }
+        ]
+      }
+      var myChart = echarts.init(document.getElementById('chartSend'));
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+    }, 3000)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbMoodSendView"]}>
+        <div id="chartSend"></div>
+      </div>
+    )
+  }
+}
+export default MoodSendView;

src/pages/sial/component/oneQualified.jsx

@@ -0,0 +1,214 @@
+/*
+ * @Author: dayan_hjm 一次合格率
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-12-19 16:02:23
+ */
+
+
+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 {
+  twoService,
+} from "../api";
+
+@withRouter
+
+class BottomLineForSend extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+      targeRate: [],
+      year: [],
+      qcRate: [],
+    };
+  }
+
+  componentDidMount() {
+    this.getUrl()
+  }
+
+  async getUrl() {
+    await twoService().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        let year = [], qcRate = [], targeRate = [];
+        data.map((x, i) => {
+          year.push(x.bMonth);
+          qcRate.push(x.qcRate)
+          targeRate.push(x.targeRate)
+        });
+        this.setState({ year, targeRate, qcRate });
+        this.setData();
+      }
+    });
+  }
+  roundFun(value = 0) {
+    value = value * 100;
+    var str = parseFloat(value).toFixed(10);
+    var num = str.substring(0, str.lastIndexOf('.') + 3);
+    return num
+  }
+
+
+  setData() {
+    setTimeout(() => {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echarts5'));
+
+      var option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { type: 'shadow' },
+          borderColor: "rgba(105, 255, 222, 0.5)",
+          borderWidth: 2,
+          padding: 2,
+          textStyle: {
+            fontSize: 12,
+            color: "#ededed"
+          },
+          formatter: (param) => {
+            return (param[0] && param[0].seriesName ? param[0].seriesName + ":" : "") + (param[0] && param[0].value ? this.roundFun(param[0].value) + "%<br />" : "") + (param[1] && param[1].seriesName ? param[1].seriesName + ":" : "") + (param[1] && param[1].value ? this.roundFun(param[1].value) + "%" : "")
+            // return (
+            //   <div>
+            //     <p>
+            //       <span>{param[0] && param[0].seriesName ? param[0].seriesName + ":" : ""}</span>
+            //       <span>{param[0] && param[0].value ? param[0].value.toFixed(2) + "%<br />" : ""}</span>
+            //     </p>
+            //     <p>
+            //       <span>{param[1] && param[1].seriesName ? param[1].seriesName + ":" : ""}</span>
+            //       <span>{param[1] && param[1].value ? param[1].value.toFixed(2) + "%" : ""}</span>
+            //     </p>
+            //   </div>
+            // )
+          },
+          //  `{a0}: {c0}<br />{a1}: {c1}`,
+          backgroundColor: "#0000008a"
+        }, "grid": {
+          "top": "20%",
+          "right": "5%",
+          "bottom": "20",
+          "left": "10%",
+        },
+        legend: {
+          data: ['目标一次合格率', '实际一次合格率'],
+          right: 'center',
+          padding: [10, 0, 0, 5],
+          top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: 10,
+          },
+          itemWidth: 12,
+          itemHeight: 5,
+        },
+        "xAxis": [
+          {
+            "type": "category",
+            data: this.state.year,
+            axisLine: { lineStyle: { color: "rgba(255,255,255,.1)" } },
+            axisLabel: {
+              textStyle: { color: "'#7d7d7d'", fontSize: '12', },
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#3b3b3b',
+                type: 'dashed',
+
+              }
+            }
+
+          },
+        ],
+        "yAxis": [
+          {
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: '#7d7d7d',
+                type: 'dashed',
+              },
+            },
+            min: 0.9,
+            max: 1,
+            splitNumber: 5,
+            axisTick: { show: false },
+            axisLabel: {
+              formatter: (value) => {
+                return value * 100 + '%'
+              },
+              textStyle: {
+                color: '#7d7d7d',
+                fontSize: 12
+              }
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                color: '#3b3b3b',
+                type: 'dashed',
+
+              }
+            }
+          },
+        ],
+        "series": [
+          {
+            "name": "目标一次合格率",
+            "type": "line",
+            data: this.state.targeRate,
+            lineStyle: {
+              normal: {
+                width: 2
+              },
+            },
+            "itemStyle": {
+              "normal": {
+                "color": "#69FFDE",
+
+              }
+            },
+            "smooth": true
+          },
+          {
+            "name": "实际一次合格率",
+            "type": "line",
+            data: this.state.qcRate,
+            lineStyle: {
+              normal: {
+                width: 2
+              },
+            },
+            "itemStyle": {
+              "normal": {
+                "color": "#FFCE00",
+
+              }
+            },
+            "smooth": true
+          }
+        ]
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+    }, 3000)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbBottomLineForSend"]}>
+        <div id="echarts5"></div>
+      </div>
+    )
+  }
+}
+export default BottomLineForSend;

src/pages/sial/component/rightBottomView.jsx

@@ -0,0 +1,311 @@
+/*
+ * @Author: dayan_hjm 碳排放
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2024-10-22 15:17:20
+ */
+
+
+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 { getArrMax } from "@utils/util";
+import {
+  dataengineCenterOneservice,
+} from "../api";
+import { get, } from "lodash";
+
+@withRouter
+
+class RightBottomView extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+      missionsTotal_arr:[],
+      year:[],
+      missionsIntensity_arr:[],
+      max1:0,
+      max2:0,
+    };
+  }
+
+  componentDidMount() {
+    this.getUrl()
+  }
+
+  async getUrl(){
+    await dataengineCenterOneservice().then(({ data=[], resultCode }) => {
+      if (+resultCode === 0) {
+        let year = [],missionsIntensity_arr = [],missionsTotal_arr = [],max1=[],max2=[],arr_1=[],arr_2=[];
+        data.map((x,i)=>{
+          year.unshift(x.byear)
+          missionsIntensity_arr.unshift(x.missionsIntensity);
+          arr_1.unshift(x.missionsIntensity);
+          missionsTotal_arr.unshift(x.missionsTotal);
+          arr_2.unshift(x.missionsTotal);
+        });
+        const max_1 = getArrMax(arr_1);
+        const max_2 = getArrMax(arr_2);
+        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();    
+      }
+    });
+
+  }
+
+  setData() {
+    setTimeout(() => {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echarts8'));
+      var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3'];
+      var option = {
+
+        grid: {
+          left: '16%',
+          top: '15%',
+          right: '5%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: [{
+          show: false,
+        }],
+        yAxis: [{
+          axisTick: 'none',
+          axisLine: 'none',
+          axisLabel: {
+            padding:[0,22,0,0],
+            textStyle: {
+              color: '#69FFDE',
+              fontSize: '16',
+              fontWeight: 700,
+              fontFamily: 'DingTalkJinBuTi',
+            }
+          },
+          data: this.state.year
+
+        },
+        {
+          name: '单位：件',
+          nameGap: '50',
+          nameTextStyle: {
+            color: 'rgba(255,255,255,.6)',
+            fontSize: '16',
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(0,0,0,0)'
+            }
+          },
+          data: [],
+        }],
+        legend: {
+          data: '碳排放强度',
+          // right: 'center',
+          // top: 0,
+          textStyle: {
+            color: "#fff",
+            fontSize: 12
+          },
+          itemWidth: 12,
+          itemHeight: 10,
+        },
+        series: [{
+          name: '条',
+          type: 'bar',
+          yAxisIndex: 0,
+          data: this.state.missionsTotal_arr,
+          label: {
+            normal: {
+              show: true,
+              position: 'insideLeft',
+              formatter: function (param) {
+                return param.value;
+              },
+              textStyle: {
+                color: 'rgba(255,255,255,1)',
+                fontSize: '15',
+                padding:[5,5,0,5]
+              }
+            }
+          },
+          barWidth: 24,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { offset: 0, color: 'rgb(255 242 72)' },
+                { offset: 0.7, color: '#ffe06a99' },
+                { offset: 1, color: '#ffe06a99' },
+              ]),
+              barBorderRadius: 15,
+              borderColor: "rgb(255 242 72)",
+              borderWidth: 1
+
+            },
+          },
+          z: 2
+        }, {
+          name: '白框',
+          type: 'bar',
+          yAxisIndex: 1,
+          barGap: '-100%',
+          data: this.state.max2,
+          barWidth: 24,
+          itemStyle: {
+            normal: {
+              color: '#ffffff24',
+              barBorderRadius: 15,
+
+            }
+          },
+          z: 1
+        }]
+      };
+
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    }, 3000)
+  }
+
+  setData2() {
+    setTimeout(() => {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById('echarts9'));
+      var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3'];
+      var option = {
+        grid: {
+          left: '0%',
+          top: '15%',
+          right: '5%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: [{
+          show: false,
+          inverse: true,
+        }],
+        yAxis: [{
+          axisTick: 'none',
+          axisLine: 'none',
+          offset: '15',
+          axisLine: {
+            onZero: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: 'rgba(255,255,255,.6)',
+              fontSize: '0',
+            }
+          },
+          data: ['字段1', '字段2', '字段3']
+
+        },
+        {
+          name: '单位：件',
+          nameGap: '50',
+          nameTextStyle: {
+            color: 'rgba(255,255,255,.6)',
+            fontSize: '16',
+          },
+          axisLine: {
+            lineStyle: {
+              color: 'rgba(0,0,0,0)'
+            }
+          },
+          data: [],
+        }],
+        series: [{
+          name: '条',
+          type: 'bar',
+          yAxisIndex: 0,
+          data: this.state.missionsIntensity_arr,
+          animation:true,
+          animationDuration:3000,
+          smooth: true,
+          label: {
+            normal: {
+              show: true,
+              position: 'insideRight',
+              formatter: function (param) {
+                return param.value;
+              },
+              textStyle: {
+                color: 'rgba(255,255,255,1)',
+                fontSize: '15',
+                padding:[5,5,0,5]
+              }
+            }
+          },
+          barWidth: 23,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+                { offset: 1, color: '#69FFDE' },
+                { offset: 0.75, color: '#69FFDE' },
+                { offset: 0, color: 'rgb(83 211 183 / 15%)' },
+              ]),
+              barBorderRadius: 15,
+              borderColor: "#69FFDE",
+              borderWidth: 1
+            }
+          },
+          z: 2
+        }, {
+          name: '白框',
+          type: 'bar',
+          yAxisIndex: 1,
+          barGap: '-100%',
+          data: this.state.max1,
+          animation:true,
+          animationDuration:3000,
+          smooth: true,
+          barWidth: 23,
+          itemStyle: {
+            normal: {
+              color: '#ffffff24',
+              barBorderRadius: 15,
+            }
+          },
+          z: 1
+        }]
+      };
+
+
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+
+    }, 3000)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbRightBottomView"]}>
+        <span className="right_b_tip1">碳排放强度</span>
+        <div id="echarts9"></div>
+        {/* <div className="fonts">
+
+        </div> */}
+        <span className="right_b_tip2">碳排放总量/万吨</span>
+        <div id="echarts8"></div>
+      </div>
+    )
+  }
+}
+export default RightBottomView;

src/pages/sial/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function TqcDataVHomeCopy() {
+  return (
+    <div>
+      TqcDataVHomeCopy
+    </div>
+  );
+}
+
+export default TqcDataVHomeCopy;

src/pages/sial/mod.js

@@ -0,0 +1,72 @@
+/*
+ * @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 = {
+  totalValue:0,
+  yearDecline:0,
+  yearSend:0,
+  productInventory:0,
+  list:[{name:'营运数据大屏'},{name:'经营大盘'},{name:'到家专题'},{name:'门店大盘'},{name:'自助跑数SQL平台'},{name:'月度包材预警跑数模板'}],
+  rightlist:[],
+  bumen:'数字化中心/数据工程部',
+  gw:'数据产品经理',
+}
+
+// 严格模式
+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/sial/style.less

@@ -0,0 +1,634 @@
+@import url("../../themes/themes.less");
+
+@assetUrl: "../../assets/imgs/home";
+
+.sial_home {
+  position: relative;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  overflow-x: hidden;
+  background: url(../../assets/imgs/dataVimg/sialBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40 !important;
+
+  :global(.rightJ_png) {
+    position: absolute;
+    z-index: 99;
+    width: 2em;
+    right: 0.8em;
+    top: 44%;
+    opacity: .5;
+  }
+
+  :global(.rightJ_png_L) {
+    right: unset;
+    left: 0.8em;
+  }
+
+
+
+  :global(.sial_video) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 98.5%;
+    // background: url(../imgs/dataVimg/homeBgDataV.png) no-repeat 0 -10em / 108% 120% #041b40;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+    pointer-events: none;
+    z-index: 12;
+
+    video {
+      width: 45%;
+      // height: 45%;
+      margin-top: -14%;
+      // padding: 1% 0 0 10%;
+    }
+
+    img {
+      width: 100%;
+      height: unset;
+      padding: 0;
+    }
+
+
+    :global(.alls) {
+      width: 80%;
+      height: unset;
+      padding: 1% 0 0 0;
+      margin: 0 auto;
+      position: relative;
+      box-sizing: border-box;
+      z-index: 1;
+      overflow: visible;
+      display: flex;
+      justify-content: center;
+    }
+
+    // 允许热点层接收 hover；片头层(.video_box_hide)继续禁用交互
+    &:not(.video_box_hide) :global(.alls) {
+      pointer-events: auto;
+    }
+
+    &.video_box_hide,
+    &.video_box_hide * {
+      pointer-events: none !important;
+    }
+
+    @media (min-height: 700px) {
+      :global(.alls) {
+        width: 60%;
+      }
+    }
+
+    @media (min-height: 800px) {
+      :global(.alls) {
+        width: 70%;
+      }
+    }
+
+    @media (min-height: 900px) {
+      :global(.alls) {
+        width: 75%;
+      }
+    }
+
+    @media (min-height: 1000px) {
+      :global(.alls) {
+        width: 80%;
+      }
+    }
+
+  }
+
+
+  .bg_after {
+    content: "";
+    display: block;
+    bottom: 0;
+    position: absolute;
+    width: 100%;
+    height: 10px;
+  }
+
+
+
+  .home {
+    position: relative;
+    overflow: hidden;
+
+    .insert {
+      position: absolute;
+      z-index: 4;
+      width: 100%;
+      left: 0;
+      top: 0;
+      height: 100vh;
+      padding: 16px;
+
+      .user {
+        background: #fff;
+        border-radius: 6px;
+        padding: 12px;
+        text-align: left;
+        margin-bottom: 12px;
+        font-size: 12px;
+      }
+
+      .notice {
+        background: #fff;
+        border-radius: 6px;
+        padding: 12px;
+        text-align: left;
+        font-size: 12px;
+        margin-bottom: 12px;
+
+        &>*:not(:first-child) {
+          margin-top: 8px;
+        }
+      }
+
+      .documents {
+        background: #fff;
+        border-radius: 6px;
+        padding: 12px;
+        text-align: left;
+        font-size: 12px;
+
+        &>*:not(:first-child) {
+          margin-top: 8px;
+        }
+      }
+    }
+
+
+    :global {
+      // background: url(../../../public/bg_home.png) 50% 50% no-repeat;
+      //background-color: #041747;
+      background-size: cover;
+      text-align: center;
+      //padding: 0 33px 113px 33px;
+      height: 100%;
+
+
+      .titles {
+        padding-top: 52px;
+        display: inline-block;
+
+        .big_title {
+          font-size: 40px;
+          color: #ffffff;
+          letter-spacing: 5px;
+          text-align: center;
+          font-weight: bold;
+        }
+
+        .sub_title {
+          margin-top: 15px;
+          display: flex;
+          justify-content: space-between;
+          position: relative;
+          width: 100%;
+          opacity: 0.4;
+          font-family: PingFangSC-Regular;
+          font-size: 20px;
+          color: #ffffff;
+          letter-spacing: 0.7px;
+
+          &::after,
+          &::before {
+            height: 1px;
+            width: 37px;
+            position: absolute;
+            top: 50%;
+            content: "";
+            display: block;
+          }
+
+          &::after {
+            background-image: linear-gradient(90deg,
+                rgba(255, 255, 255, 0.3) 0%,
+                rgba(255, 255, 255, 1) 100%);
+            left: -46px;
+          }
+
+          &::before {
+            background-image: linear-gradient(90deg,
+                rgba(255, 255, 255, 1) 0%,
+                rgba(255, 255, 255, 0.3) 100%);
+            right: -46px;
+          }
+        }
+      }
+
+      .player {
+        margin-top: 54px;
+        display: flex;
+        justify-content: space-between;
+
+        &>li {
+          position: relative;
+          cursor: pointer;
+          text-align: center;
+          width: 1%;
+          flex-grow: 1;
+          transition: all 0.3s;
+
+          &:not(:last-child) {
+            margin-right: 1%;
+          }
+
+          .not_open_card {
+            display: none;
+          }
+
+          &.toggle_stat {
+            .nor_card {
+              display: block;
+            }
+
+            &:hover>.nor_card {
+              display: none;
+            }
+
+            &:hover>.not_open_card {
+              display: block;
+            }
+
+            .tips {
+              text-align: center;
+              font-size: 16px;
+              color: rgba(255, 255, 255, 0.5);
+              margin-top: -5px;
+            }
+
+            .tips_img {
+              width: 60%;
+              margin-top: 30%;
+            }
+          }
+        }
+      }
+
+      .bg_1 {
+        background: rgba(69, 163, 109, 0.3);
+        border: none;
+
+        &:hover {
+          background: rgba(69, 163, 109, 0.5);
+          transform: translateY(-30px);
+          box-shadow: 0 0 0 1px #45a36d inset;
+          background-image: radial-gradient(120px 60px ellipse at 50% 100%,
+              rgba(42, 186, 128, 0.8) 0%,
+              rgba(42, 186, 128, 0) 90%,
+              transparent 0);
+
+          &::after {
+            content: "";
+            display: block;
+            bottom: -5px;
+            position: absolute;
+            width: 100%;
+            height: 10px;
+            background: url("@{assetUrl}/bg_light1.png") 50% 50% no-repeat;
+          }
+        }
+      }
+
+      .bg_2 {
+        background: rgba(38, 149, 140, 0.3);
+        border: none;
+
+        &:hover {
+          background: rgba(38, 149, 140, 0.5);
+          transform: translateY(-30px);
+          box-shadow: 0 0 0 1px #26958c inset;
+          background-image: radial-gradient(120px 60px ellipse at 50% 100%,
+              rgba(0, 199, 207, 0.8) 0%,
+              rgba(0, 199, 207, 0) 90%,
+              transparent 0);
+
+          &::after {
+            content: "";
+            display: block;
+            bottom: -5px;
+            position: absolute;
+            width: 100%;
+            height: 10px;
+            background: url("@{assetUrl}/bg_light2.png") 50% 50% no-repeat;
+          }
+        }
+      }
+
+      .bg_3 {
+        background: rgba(122, 89, 202, 0.3);
+        border: none;
+
+        &:hover {
+          background: rgba(122, 89, 202, 0.5);
+          transform: translateY(-30px);
+          box-shadow: 0 0 0 1px #a27cff inset;
+          background-image: radial-gradient(120px 60px ellipse at 50% 100%,
+              rgba(181, 151, 255, 0.8) 0%,
+              rgba(181, 151, 255, 0) 90%,
+              transparent 0);
+
+          &::after {
+            content: "";
+            display: block;
+            bottom: -5px;
+            position: absolute;
+            width: 100%;
+            height: 10px;
+            background: url("@{assetUrl}/bg_light3.png") 50% 50% no-repeat;
+          }
+        }
+      }
+
+      .bg_4 {
+        background: rgba(37, 90, 199, 0.3);
+        border: none;
+
+        &:hover {
+          background: rgba(37, 90, 199, 0.5);
+          transform: translateY(-30px);
+          box-shadow: 0 0 0 1px #6899ff inset;
+          background-image: radial-gradient(120px 60px ellipse at 50% 100%,
+              rgba(73, 181, 255, 0.8) 0%,
+              rgba(73, 181, 255, 0) 90%,
+              transparent 0);
+
+          &::after {
+            content: "";
+            display: block;
+            bottom: -5px;
+            position: absolute;
+            width: 100%;
+            height: 10px;
+            background: url("@{assetUrl}/bg_light4.png") 50% 50% no-repeat;
+          }
+        }
+      }
+
+      .bg_5 {
+        background: rgba(6, 159, 199, 0.3);
+        border: none;
+
+        &:hover {
+          background: rgba(6, 159, 199, 0.5);
+          transform: translateY(-30px);
+          box-shadow: 0 0 0 1px #41bad9 inset;
+          background-image: radial-gradient(120px 60px ellipse at 50% 100%,
+              rgba(58, 223, 255, 0.8) 0%,
+              rgba(58, 223, 255, 0) 90%,
+              transparent 0);
+
+          &::after {
+            content: "";
+            display: block;
+            bottom: -5px;
+            position: absolute;
+            width: 100%;
+            height: 10px;
+            background: url("@{assetUrl}/bg_light5.png") 50% 50% no-repeat;
+          }
+        }
+      }
+
+      .type_1 {
+        padding: 82px 0 75px 0;
+
+        .card_subtitle {
+          font-size: 14px;
+          color: #fff;
+          margin-top: 48px;
+          margin-bottom: 48px;
+        }
+      }
+
+      .type_2 {
+        padding: 42px 0 65px 0;
+      }
+
+      .card_title {
+        font-size: 20px;
+        color: #ffffff;
+        font-weight: bold;
+        position: absolute;
+        bottom: 7%;
+        width: 100%;
+        text-align: center;
+      }
+
+      .text {
+        text-align: left;
+        display: flex;
+        justify-content: center;
+      }
+
+      .type1_sub {
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.7);
+      }
+
+      .type1_left {
+        font-size: 12px;
+        color: rgba(255, 255, 255, 0.7);
+        text-align: left;
+      }
+
+      .col_fff {
+        color: #ffffff;
+      }
+
+      .col_gray {
+        color: rgba(255, 255, 255, 0.7);
+      }
+
+      .fs12 {
+        font-size: 12px;
+      }
+
+      .fs14 {
+        font-size: 14px;
+      }
+
+      .mt4 {
+        margin-top: 4px;
+      }
+
+      .mt50 {
+        margin-top: 90px;
+      }
+
+      .linear {
+        width: 100%;
+        height: 1px;
+        background: linear-gradient(90deg,
+            rgba(2, 199, 218, 0) 0%,
+            rgba(2, 199, 218, 0.5) 50%,
+            rgba(2, 199, 218, 0) 100%);
+        transform-origin: center;
+        transform: rotate(-45deg);
+        margin-top: 60px;
+        margin-bottom: 15px;
+      }
+
+      .min_w {
+        min-width: 40%;
+      }
+    }
+  }
+
+  .add_common_report {
+    display: flex;
+    align-items: center;
+
+    >div {
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      white-space: nowrap;
+    }
+  }
+
+  .centerCon {
+    width: 63%;
+    height: 75%;
+    padding: 0;
+    position: relative;
+    margin: 0% 0 0 -1%;
+
+
+  }
+
+
+
+
+  :global {
+    .imgMsg2 {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      position: absolute;
+      left: 27.5%;
+      margin-top: -14%;
+      top: 0;
+      height: 100%;
+      z-index: 100;
+      color: #fff;
+      pointer-events: none;
+      overflow: visible;
+
+      li {
+        position: absolute;
+        width: 20em;
+        z-index: 100;
+        height: 4em;
+        opacity: 1;
+        overflow: visible;
+        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;
+        pointer-events: auto;
+
+        .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;
+          overflow: visible;
+
+
+          .hoverDiv {
+            display: none;
+          }
+        }
+
+        // hover 区域是绝对定位，直接用 li:hover 更稳定
+        &:hover .hoverDiv,
+        .hoverR:hover .hoverDiv {
+          display: flex;
+        }
+
+        .hoverDiv {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 1em;
+          background: linear-gradient(0deg, #292929f2 0%, #25252540 100%);
+          // 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 0em 0 1em;
+          color: #d7d7d7;
+          align-items: flex-start;
+          height: auto;
+
+          >div>span {
+            display: block;
+          }
+        }
+      }
+
+      @media (max-height: 900px) {
+        li .hoverDiv {
+          background: linear-gradient(0deg, #292929 0%, #252525 100%) !important;
+        }
+
+      }
+
+
+      li:hover {
+        background: linear-gradient(0deg, #42ca9840 0%, #42ca9800 98%);
+      }
+    }
+  }
+}

src/pages/sial/view.jsx

@@ -0,0 +1,663 @@
+/*
+ * @Author: dayan_hjm 
+ * @Date: 2023-10-25 10:32:44 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2024-11-13 10:24:39
+ */
+/*
+ * @Author: dayan_hjm 
+ * @Date: 2022-10-27 11:40:02 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-10-25 10:32:07
+ */
+
+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 BottomLineForSend from "./component/bottomLineForSend.jsx";
+import MoodSendView from "./component/moodSendView.jsx";
+import MoodProductionView from "./component/moodProductionView.jsx";
+
+import LeftMenoyView from "./component/leftMenoyView.jsx";
+import RightBottomView from "./component/rightBottomView.jsx";
+import OneQualified from "./component/oneQualified.jsx";
+import DryBaseQualified from "./component/dryBaseQualified";
+import mpVideoGvc from "@assets/imgs/dataVimg/sial_video2.mp4";
+import { get } from "lodash";
+
+import MapView from "./component/mapView.jsx";
+import $store from "@store/";
+import {
+  timeService,
+  numberService,
+  checkToken,
+  updateTimeService,
+  getBaseData,
+  getBaseYMDData,
+  getBaseDetailData
+} from "./api";
+import { getThousandNum, deleteCacheAndChangeUrl, timestampToTime, setWaterMark } from "@utils/util";
+import {
+  fullscreen,
+} from "@ant-design/icons";
+import 'animate.css';
+@withRouter
+
+class Home extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+      updateTime: '',
+      changGif: false,
+      changNun: false,
+      plannedCompletionData: [
+      ],
+      plannedCompletionNum: 1,
+      manHourData: [
+      ],
+      manHourNum: 1,
+      leftName: deleteCacheAndChangeUrl("left", false, true),
+      rightName: deleteCacheAndChangeUrl("right", false, true),
+      imgMsgData: [
+        {
+          "factoryCode": 5,
+          "production": 0,
+          "inventory": 0,
+          "total": 0,
+          "totalName": "",
+          "styles": {
+            "left": "14%",
+            "top": "50%"
+          },
+          "cumulativeProduction": 0,
+          "day": "0",
+          "mood": "0",
+          "year": "0",
+          "rawMaterial": [
+
+          ]
+        },
+        {
+          "factoryCode": 10,
+          "production": 0,
+          "inventory": 0,
+          "total": 0,
+          "totalName": "",
+          "styles": {
+            "left": "0%",
+            "top": "83%"
+          },
+          "cumulativeProduction": 0,
+          "day": "0",
+          "mood": "0",
+          "year": "0",
+          "rawMaterial": [
+
+          ]
+        },
+      ]
+    };
+    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) {
+          sessionStorage.setItem("tqcUserName", data?.userId);
+          $store.app.setMarkSrc(
+            setWaterMark({
+              toDataURL: true,
+              waterMarkText: [data?.userId || sessionStorage.getItem("tqcUserName"), timestampToTime()],
+            })
+          );
+        } else {
+          window.location = window.location.origin + '/transfer.html#/login';
+          // this.props.history.replace("/home/index");
+        }
+      });
+    }
+  }
+  componentDidMount() {
+    this.fontMsgChange();
+    this.getUrl();
+    this.getUrl2()
+    this.getUrl3();
+    this.getBaseData();
+    setTimeout(() => {
+      this.videoStart();
+    }, 200)
+    setTimeout(() => {
+      //替换gif
+      this.setState({ changGif: true });
+    }, 2000);
+    setTimeout(() => {
+      this.setState({ changNun: true });
+    }, 4500)
+
+  }
+  async getBaseData() {
+    await getBaseData().then(async ({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        console.log('getBaseData', data)
+        const jiangsu = data?.find(item => item.factoryCode == 5);
+        const yanting = data?.find(item => item.factoryCode == 10);
+        const imgMsgData = this.state.imgMsgData.map((item) => ({ ...item }));
+        if (jiangsu) {
+          imgMsgData[0] = { ...imgMsgData[0], inventory: jiangsu.inventory, cumulativeProduction: jiangsu.production };
+        }
+        if (yanting) {
+          imgMsgData[1] = { ...imgMsgData[1], inventory: yanting.inventory, cumulativeProduction: yanting.production };
+        }
+        this.setState({ imgMsgData });
+        await this.getBaseYMDData();
+        await this.getBaseDetailData();
+      }
+    });
+  }
+  async getBaseYMDData() {
+    await getBaseYMDData().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        console.log('getBaseYMDData', data)
+        function getItems(num) {
+          const datas = data.filter(x => { return x.factoryCode == num });
+          const par = {
+            day: getThousandNum(datas?.filter(x => { return x.dateType == 1 })?.[0]?.indexValue || 0),
+            mood: getThousandNum(datas?.filter(x => { return x.dateType == 2 })?.[0]?.indexValue || 0),
+            year: getThousandNum(datas?.filter(x => { return x.dateType == 3 })?.[0]?.indexValue || 0),
+          }
+          return par
+        }
+        const jiangsu = getItems(5);
+        const yanting = getItems(10);
+        const imgMsgData = this.state.imgMsgData.map((item) => ({ ...item }));
+        if (jiangsu) {
+          imgMsgData[0] = { ...imgMsgData[0], ...jiangsu };
+        }
+        if (yanting) {
+          imgMsgData[1] = { ...imgMsgData[1], ...yanting };
+        }
+        this.setState({ imgMsgData });
+      }
+    });
+  }
+  async getBaseDetailData() {
+    await getBaseDetailData().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        console.log('getBaseDetailData', data)
+        const jiangsu = (data?.filter(item => item.factoryCode == 5)) || [];
+        const yanting = (data?.filter(item => item.factoryCode == 10)) || [];
+        const imgMsgData = this.state.imgMsgData.map((item) => ({ ...item }));
+        if (jiangsu.length) {
+          imgMsgData[0] = { ...imgMsgData[0], rawMaterial: jiangsu };
+        }
+        if (yanting.length) {
+          imgMsgData[1] = { ...imgMsgData[1], rawMaterial: yanting };
+        }
+        this.setState({ imgMsgData });
+      }
+    });
+  }
+  videoStart() {
+    /*     Chrome 浏览器的视频自动播放策略
+        1.始终允许静音模式下自动播放
+        2.在以下的情况中，带声音播放会被允许：
+          ①用户已经与当前的域进行了交互（也就是click，tap事件）。
+          ②在桌面设备上，用户的媒体参与度指数阈值已经超过，这意味着用户之前播放过有声视频。
+          ③用户已经将网站添加到移动设备上的主屏幕或允在桌面上安装了PWA。
+        3.顶部帧可以将自动播放权限委派给其iframe，来允许自动播放声音
+        
+        媒体参与度（Media Engagement）是指用户与媒体内容进行互动的程度，可以通过多个指标来衡量。这些指标主要包括观看时间、观看率、转化率、交互行为等。
+        可以通过：chrome://media-engagement/ 查看
+     */
+    const video = document.querySelector('.video_box_2');
+    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 timeService().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        let plannedCompletionData = [], manHourData = [];
+        data.map((x, i) => {
+          if (x.indexName == '产量计划完成率') {
+            plannedCompletionData.push({
+              name: x.factoryName,
+              factoryCode: x.factoryCode,
+              value: x.indexValue ? Number((x.indexValue * 100).toFixed(2)) : 0,
+            })
+          } else {
+            manHourData.push({
+              name: x.factoryName,
+              factoryCode: x.factoryCode,
+              // value: Number((x.indexValue * 100).toFixed(2)),
+              value: Number(x.indexValue),
+            })
+          }
+        });
+        console.log('plannedCompletionData', plannedCompletionData)
+        this.setState({ plannedCompletionData, manHourData, plannedCompletionNum: 1, manHourNum: 1 });
+      }
+    });
+  }
+  async getUrl2() {
+    await numberService().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        let totalValue = 0, yearDecline = 0, yearSend = 0, productInventory = 0;
+        data.map((x, i) => {
+          if (x.indexName == '产值') {
+            totalValue = x.indexValue
+          } else if (x.indexName == '年度产量') {
+            yearDecline = x.indexValue
+          } else if (x.indexName == '产品库存') {
+            yearSend = x.indexValue
+          } else if (x.indexName == '年度发货量') {
+            productInventory = x.indexValue
+          }
+        });
+        this.store.saveState({ totalValue, yearDecline, yearSend, productInventory });
+        setTimeout(() => {
+          $(".shu1").numScroll();
+        }, 2500)
+      }
+    });
+  }
+  async getUrl3() {
+    await updateTimeService().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        this.setState({ updateTime: data?.[0]?.etlTime || '' })
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timer);
+    this.timer = null;
+  }
+
+  fontMsgChange(type) {
+    this.timer = setInterval(() => {
+
+      const { plannedCompletionData, plannedCompletionNum, manHourData, manHourNum } = this.state;
+      const yanting = plannedCompletionData.find(item => item.factoryCode == 10);
+      const jiangsu = plannedCompletionData.find(item => item.factoryCode == 5);
+      //产量计划完成率
+      var p1 = document.getElementById('plannedCompletionBox_yanting');
+      var p3 = document.getElementById('plannedCompletionBox_jiangsu');
+      p1.innerHTML = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number">' + getThousandNum(yanting?.value.toFixed(2)) + '</span><span class="topMsg_number_2" style={{fontSize: "0.75em",color: "#fff"}}>%</span><p class="topMsg_number_p">' + '盐亭' + '</p></div>';
+      p3.innerHTML = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number">' + getThousandNum(jiangsu?.value.toFixed(2)) + '</span><span class="topMsg_number_2" style={{fontSize: "0.75em",color: "#fff"}}>%</span><p class="topMsg_number_p">' + '江苏' + '</p></div>';
+
+      // const num_ = plannedCompletionNum + 1 > plannedCompletionData.length ? 1 : plannedCompletionNum + 1;
+      // this.setState({ plannedCompletionNum: num_, })
+    }, 4000)
+
+  }
+
+  render() {
+    const stores = this.store.state;
+    let { totalValue, yearDecline, yearSend, productInventory } = this.store.state;
+    let { changGif, updateTime, changNun, leftName, rightName, imgMsgData } = this.state;
+    return (
+      <div className={styles.sial_home}>
+        {/* 水印 */}
+        {
+          window.urlConfig && window.urlConfig.SHOW_WATERMARK && <div className={"shuiYin"} style={{ backgroundImage: `url(${$store.app.markSrc})`, backgroundRepeat: 'repeat' }}></div>
+        }
+        {/* 右键切换大屏 */}
+        <Tooltip placement="bottom" title={rightName}>
+          <img src={require("@assets/imgs/iconJpg/rightJ.png").default} alt="" className={"rightJ_png"} onClick={() => {
+            deleteCacheAndChangeUrl("right", (url) => {
+              this.props.history.replace(url);
+            })
+          }} />
+        </Tooltip>
+        <Tooltip placement="bottom" title={leftName}>
+          <img src={require("@assets/imgs/iconJpg/rightJL.png").default} alt="" className={"rightJ_png rightJ_png_L"} onClick={() => {
+            deleteCacheAndChangeUrl("left", (url) => {
+              this.props.history.replace(url);
+            })
+          }} />
+        </Tooltip>
+
+        {/* 视频播放器 */}
+        <MapView></MapView>
+        <div className={"sial_video"}>
+          <div className="alls">
+            <video src={mpVideoGvc} playbackRate={0.5} autoplay="autoplay" loop="loop" class="video_box_2 animate__animated animate__fadeIn animate__delay-2s">
+            </video>
+            {/* <img src={require("@assets/imgs/dataVimg/gvcbg.png").default} alt="" class="video_box_2 center_box2 animate__animated animate__fadeIn animate__delay-2s" /> */}
+            <ul className="imgMsg2">
+              {
+                toJS(imgMsgData).map((item, index) => {
+                  if (!item) { return null }
+                  return (
+                    <li style={{ ...item?.styles }} class="animate__animated animate__bounceInUp animate__slower">
+                      {/* 矿产 */}
+                      {
+                        item.totalName && <p className="name">{item.totalName}</p>
+                      }
+                      {
+                        item.totalName && !changGif && <span class="shu1 nums">{item.total}</span>
+                      }
+                      {
+                        item.totalName && changGif && <span class="nums">{getThousandNum(item.total)}</span>
+                      }
+                      {
+                        item.totalName && <span className="sma">吨</span>
+                      }
+                      {/* 基地 */}
+                      {
+                        (item.cumulativeProduction !== null || item.showDetail) && <div className="hoverR">
+                          <div className="hoverDiv chanL">
+                            {/* <div style={{ width: "62%","textAlign":'right' }}> */}
+                            {
+                              item.cumulativeProduction !== null && <div style={{ width: "38%", textAlign: 'start' }}>
+                                <p className="title">
+                                  产量/吨
+                                </p>
+                                <span>日：{item.day}</span>
+                                <span>月：{item.mood}</span>
+                                <span>年：{item.year}</span>
+                              </div>
+                            }
+
+                            <div style={{ width: index == 5 ? "58%" : "57%", textAlign: 'start' }}>
+                              <p className="title">
+                                库存/吨
+                              </p>
+                              {
+                                get(item, "rawMaterial", []).map((ra, rai) => {
+                                  return <span key={rai}>{ra.prodCatgory}:{ra.indexValue}</span>
+                                })
+                              }
+                            </div>
+                          </div>
+                        </div>
+                      }
+                      {
+                        item.cumulativeProduction !== null && <div className="chanL text">
+                          <div>
+                            <p>累计产量</p>
+                            {
+                              !changGif ? <span class="nums shu1">{item.cumulativeProduction}</span> : <span class="nums">{getThousandNum(item.cumulativeProduction)}</span>
+                            }
+
+                            <span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
+                          </div>
+                          <div style={{ width: "60%" }}>
+                            <p>产品库存</p>
+                            {
+                              !changGif ? <span class="nums shu1">{item.inventory}</span> : <span class="nums">{getThousandNum(item.inventory)}</span>
+                            }
+                            <span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
+                          </div>
+
+                        </div>
+                      }
+                    </li>
+                  )
+                })
+              }
+            </ul>
+          </div>
+
+        </div>
+        <div className={[styles.home + " home cbHome"]}>
+          <div className="leftContent">
+            {/* <div class="topMsg2 animate__animated animate__fadeInDown animate__slower">
+              <div className="topMsg">
+                <Tooltip placement="bottom" title={<p className="titpeP">
+                  ● 本年度截止到最新结账月的主产品的产值合计，计算：
+                  <img src={require("@assets/imgs/dataVimg/gongshi.png").default} alt="" style={{ width: "1.5em", margin: " 0 0.5em 0 0em" }} />
+                  产品1月产量*产品1月平均销售单价+产品2月产量* 产品2月平均销售单价+...
+                </p>}>
+                  <p className="topMsg_title">总产值</p>
+                </Tooltip>
+                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
+                  {
+                    !changNun && <span className="topMsg_number" class="shu1">{totalValue}</span>
+                  }
+                  {
+                    changNun && <span className="topMsg_number">{getThousandNum(totalValue)}</span>
+                  }
+                  <span className="topMsg_number_2">万元</span>
+                </div>
+              </div>
+            </div> */}
+            <div class="topMsg_33 mgb_box animate__animated animate__fadeInDown animate__slower animate__delay-1s">
+              <div className="topMsg_3">
+                <Tooltip placement="bottom" title={' ● 本年度截止到更新日期累计产量的计划完成率。'}>
+                  <p className="topMsg_title">产量计划完成率</p>
+                </Tooltip>
+                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="plannedCompletionBox_yanting">
+                  <div className="topMsg_box">
+                    <span className="topMsg_number" class="shu1"></span><span className="topMsg_number_2"></span>
+                    <p className="topMsg_number_p"></p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="topMsg_22 mgb_box animate__animated animate__fadeInDown animate__slower">
+              <div className="topMsg_2">
+                <Tooltip placement="bottom" title={' ● 近一年的干基产率。'}>
+                  <p className="topMsg_title">干基产率</p>
+                </Tooltip>
+
+                <div className="topMsg_content">
+                  <DryBaseQualified></DryBaseQualified>
+                </div>
+              </div>
+            </div>
+
+            {/* <div class="center_box2 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
+              <div className="center_box">
+                <Tooltip placement="bottom" title={<p className="titpeP">
+                  <p>● 截止更新日期的主产品库存金额，计算：</p>
+                  <img src={require("@assets/imgs/dataVimg/gongshi2.png").default} alt="" style={{ width: "1.3em", margin: " -0.3em 0.5em 0 0em" }} />
+                  物料1库存数*物料1移动平均价+物料2*物料2移动平均价+…
+                </p>}>
+                  <p className="topMsg_title" style={{ position: "relative", zIndex: 999999 }}>产品库存金额</p>
+                </Tooltip>
+                <div className="topMsg_content">
+                  <LeftMenoyView></LeftMenoyView>
+                </div>
+              </div>
+            </div> */}
+
+            <div class="bottomContent2 mgb_box animate__animated animate__fadeInDown animate__slower animate__delay-2s">
+              <div className="bottomContent bigDivPd">
+                <Tooltip placement="bottom" title={' ● 近六个月的产量和发货量的对比数据（含外加工），当月的数据计算至更新日期。'}>
+                  <p className="topMsg_title">月度产量</p>
+                </Tooltip>
+                <div className="topMsg_content">
+                  <MoodProductionView></MoodProductionView>
+                </div>
+              </div>
+            </div>
+
+
+
+
+          </div>
+
+          <div className="centerCon">
+            <div class="topMsg3 animate__animated animate__fadeInUp animate__slower">
+              <div className="topMsg">
+                <div className="topMsg2">
+                  <div className="topMsg_content">
+                    <div className="center_li">
+                      <div className="right_li">
+                        {
+                          !changNun && <span className="topMsg_number" class="shu1">{yearDecline}</span>
+                        }
+                        {
+                          changNun && <span className="topMsg_number">{getThousandNum(yearDecline)}</span>
+                        }
+                        <p className="topMsg_line"></p>
+                        <Tooltip placement="bottom" title={' ● 本年度截止更新日期的主产品（含外加工）的产量合计'}>
+                          <span className="topMsg_tip">年度产量/吨</span>
+                        </Tooltip>
+                      </div>
+                    </div>
+                    <div className="center_li">
+                      <div className="right_li">
+                        {
+                          !changNun && <span className="topMsg_number" class="shu1">{productInventory}</span>
+                        }
+                        {
+                          changNun && <span className="topMsg_number">{getThousandNum(productInventory)}</span>
+                        }
+                        <p className="topMsg_line"></p>
+                        <Tooltip placement="bottom" title={' ● 本年度截止更新日期的主产品（含外加工）的发货量合计。'}>
+                          <span className="topMsg_tip">年度发货量/吨</span>
+                        </Tooltip>
+                      </div>
+                    </div>
+                    <div className="center_li">
+                      {
+                        !changNun && <span className="topMsg_number" class="shu1">{yearSend}</span>
+                      }
+                      {
+                        changNun && <span className="topMsg_number">{getThousandNum(yearSend)}</span>
+                      }
+                      <p className="topMsg_line"></p>
+                      <Tooltip placement="bottom" title={' ● 截止更新日期的主产品库存数量。'}>
+                        <span className="topMsg_tip">产品库存/吨</span>
+                      </Tooltip>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="bottomContent3  animate__animated animate__fadeInUp animate__slower animate__delay-1s" style={{ bottom: '3%' }}>
+              <div className="bottomContent">
+                <Tooltip placement="bottom" title={' ● 以更新日期为节点近30天的产量数据（含外加工）。'}>
+                  <p className="topMsg_title">近30天产量</p>
+                </Tooltip>
+                <div className="topMsg_content">
+                  <BottomLineForSend></BottomLineForSend>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+          {/* 右侧信息栏 */}
+          <div className="leftContent">
+
+            <div class="topMsg_33 mgb_box animate__animated animate__fadeInDown animate__slower animate__delay-1s">
+              <div className="topMsg_3">
+                <Tooltip placement="bottom" title={' ● 本年度截止到更新日期累计产量的计划完成率。'}>
+                  <p className="topMsg_title">产量计划完成率</p>
+                </Tooltip>
+                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="plannedCompletionBox_jiangsu">
+                  <div className="topMsg_box">
+                    <span className="topMsg_number" class="shu1"></span><span className="topMsg_number_2"></span>
+                    <p className="topMsg_number_p"></p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="topMsg_22 mgb_box animate__animated animate__fadeInDown animate__slower">
+              <div className="topMsg_2">
+                <Tooltip placement="bottom" title={' ● 近六个月的主产品一次合格率，当月的数据计算至更新日期。'}>
+                  <p className="topMsg_title">一次合格率</p>
+                </Tooltip>
+
+                <div className="topMsg_content">
+                  <OneQualified></OneQualified>
+                </div>
+              </div>
+            </div>
+
+
+
+            {/* <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower  animate__delay-1s">
+              <div className="bottomContent bigDivPd">
+                <Tooltip placement="bottom" title={' ● 近三年的碳排放总量、碳排放强度数据'}>
+                  <p className="topMsg_title">碳排放</p>
+                </Tooltip>
+                <div className="topMsg_content">
+                  <RightBottomView></RightBottomView>
+                </div>
+              </div>
+            </div> */}
+
+            <div class="bottomContent2 mgb_box animate__animated animate__fadeInDown animate__slower animate__delay-2s">
+              <div className="bottomContent bigDivPd">
+                <Tooltip placement="bottom" title={' ● 近六个月的产量和发货量的对比数据（含外加工），当月的数据计算至更新日期。'}>
+                  <p className="topMsg_title">月度发货量</p>
+                </Tooltip>
+                <div className="topMsg_content">
+                  <MoodSendView></MoodSendView>
+                </div>
+              </div>
+            </div>
+
+          </div>
+          <div className="bottom_box">
+            <p style={{ color: "#6a818d", lineHeight: '2px' }}>
+              更新日期 : {updateTime ? updateTime.split(" ")[0] : updateTime}
+            </p>
+          </div>
+
+        </div>
+      </div>
+    )
+  }
+}
+export default Home;

src/pages/tlk/api.js

@@ -89,7 +89,7 @@ export function timeService(params) {
         "indexValue"
       ],
       "pageNum": 1,
-      "pageSize": 10,
+      "pageSize": 999,
       "useResultCache": false
     },
     headers: {

src/pages/tqcDataVHome/api.js

@@ -89,7 +89,7 @@ export function timeService(params) {
         "indexValue"
       ],
       "pageNum": 1,
-      "pageSize": 10,
+      "pageSize": 999,
       "useResultCache": false
     },
     headers: {

src/pages/tqcDataVHome/api2.js

@@ -0,0 +1,232 @@
+import request from "@utils/request";
+
+/**登录*/
+export function checkToken(params) {
+  return request({
+    url: `/api/yonghong/checkToken?token=${params}`,
+    method: "GEt",
+  });
+}
+
+/**碳排放 */
+export function dataengineCenterOneservice(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356250396177503367",
+    method: "POST",
+    data: {
+      "apiId": "1356250396177503367",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "byear",
+        "missionsIntensity",
+        "missionsTotal",
+        "biz_id"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '19c3cdb58b80e44f2490b8eba3b7f938',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356250396177503367',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**库存金额 */
+export function momeyService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1431063632208685082",
+    method: "POST",
+    data: {
+      "apiId": "1431063632208685082",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "prodCatgory",
+        "indexValue"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '6203b66920c569f8228c3cb921f3ffb8',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1431063632208685082',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**百万工时损工率   产量计划完成率*/
+export function timeService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1431063077222574093",
+    method: "POST",
+    data: {
+      "apiId": "1431063077222574093",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "factoryName",
+        "indexValue"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '9ab2d57a785c513f84cd0c5fb4fad7da',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1431063077222574093',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**产值+发货量+产量+库存*/
+export function numberService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1431049820141217793",
+    method: "POST",
+    data: {
+      "apiId": "1431049820141217793",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "indexValue"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '915848290d3e70a7b8e7fbe911e12725',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1431049820141217793',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**近30天产量*/
+export function mondService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1431065871110334506",
+    method: "POST",
+    data: {
+      "apiId": "1431065871110334506",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "indexDate",
+        "indexValue",
+        "factoryProdcution"
+      ],
+      "pageNum": 1,
+      "pageSize": 30,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'f84acfc47847e71c67be5569b9289291',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1431065871110334506',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**月度产量/发货量+一次合格率*/
+export function twoService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1431065780441016356",
+    method: "POST",
+    data: {
+      "apiId": "1431065780441016356",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "bMonth",
+        "proQty",
+        "deliveryQty",
+        "qcRate",
+        "targeRate",
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '178ae23014a9fecad15ffa9a88ed84f1',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1431065780441016356',
+      appKey: '200000134',
+      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/tqcDataVHome/view.jsx

@@ -31,7 +31,7 @@ import {
   checkToken,
   updateTimeService
 } from "./api";
-import { getThousandNum, deleteCacheAndChangeUrl,timestampToTime,setWaterMark  } from "@utils/util";
+import { getThousandNum, deleteCacheAndChangeUrl, timestampToTime, setWaterMark } from "@utils/util";
 import {
   fullscreen,
 } from "@ant-design/icons";
@@ -53,8 +53,8 @@ class Home extends Component {
       manHourData: [
       ],
       manHourNum: 1,
-      leftName:deleteCacheAndChangeUrl("left",false,true),
-      rightName:deleteCacheAndChangeUrl("right",false,true),
+      leftName: deleteCacheAndChangeUrl("left", false, true),
+      rightName: deleteCacheAndChangeUrl("right", false, true),
 
     };
     this.timer = null //定时器，用于检测同步状态
@@ -75,7 +75,7 @@ class Home extends Component {
           $store.app.setMarkSrc(
             setWaterMark({
               toDataURL: true,
-              waterMarkText: [data?.userId || sessionStorage.getItem("tqcUserName"),timestampToTime()],
+              waterMarkText: [data?.userId || sessionStorage.getItem("tqcUserName"), timestampToTime()],
             })
           );
         } else {
@@ -255,7 +255,7 @@ class Home extends Component {
   render() {
     const stores = this.store.state;
     let { totalValue, yearDecline, yearSend, productInventory } = this.store.state;
-    let { changGif, updateTime, changNun,leftName,rightName } = this.state;
+    let { changGif, updateTime, changNun, leftName, rightName } = this.state;
     return (
       <div className={"home_box"}>
         {/* 水印 */}

src/router/router.js

@@ -16,6 +16,8 @@ import Home from '@pages/home/view.jsx';
 import HomeForchaBaiDao from '@pages/tqcDataVHome/view.jsx';
 import GVC from '@pages/gvc/view.jsx';
 import TLK from '@pages/tlk/view.jsx';
+import SiAl from '@pages/sial/view.jsx';
+
 import JurisDiction from '@pages/jurisDiction/view.jsx';
 import Loading from "@components/Loading/view.jsx";
 import $store from "@store/";
@@ -73,6 +75,11 @@ const routes = [
         path: "/home/tlk",
         component: TLK,
       },
+      {
+        name: "硅铝微粉数据中心",
+        path: "/home/sial",
+        component: SiAl,
+      },
     ],
   },
   {
@@ -121,13 +128,13 @@ function RouteComponent(props) {
   );
 }
 function CacheRouteComponent(props) {
-  return  <CacheSwitch>
-  {
-    props.cacheRoutes.map((route, idx) => {
-      return <CacheRoute cacheKey={RouterCache.urlName(route.path)} key={route.path} path={route.path} exact component={route.component} when="always" className="bottom_body" />
-    })
-  }
-</CacheSwitch>
+  return <CacheSwitch>
+    {
+      props.cacheRoutes.map((route, idx) => {
+        return <CacheRoute cacheKey={RouterCache.urlName(route.path)} key={route.path} path={route.path} exact component={route.component} when="always" className="bottom_body" />
+      })
+    }
+  </CacheSwitch>
 }
 /*  */
 RouteComponent.propTypes = {

src/utils/util.js

@@ -998,17 +998,17 @@ export function getThousandNum(num, need100) {
 
 //大屏转跳-去除缓存
 export function deleteCacheAndChangeUrl(next = 'left', callback, needName) {//needName 获取名称
-  const screenName = ["/home/operation", "/home/gvc", "/home/tlk"];
-  const names = ["运营数据中心", "产供销价值链", "TLK运营数据中心 / TLK Plant Dashboard"];
+  const screenName = ["/home/operation", "/home/gvc", "/home/tlk", "/home/sial"];
+  const names = ["运营数据中心", "产供销价值链", "TLK运营数据中心 / TLK Plant Dashboard", "硅铝微粉数据中心"];
   const HasScreen = localStorage.getItem("tqcHasScreen")?.split(",") || [];
   const currUrl = window.location.hash.split("#")[1];
   //检测是否含有当前页面的路径
   if (!HasScreen.includes(currUrl)) {
     message.error("您没有当前路径的权限!").then(() => {
       setTimeout(() => {
-        if(HasScreen && HasScreen[0]){
-          window.location = window.location.href.split('/transfer.html')[0] + '/transfer.html#'+HasScreen[0];
-        }else{
+        if (HasScreen && HasScreen[0]) {
+          window.location = window.location.href.split('/transfer.html')[0] + '/transfer.html#' + HasScreen[0];
+        } else {
           window.location = window.location.href.split('/transfer.html')[0] + '/transfer.html#/login';
         }
       }, 300)