硅铝微粉联调

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({
@@ -72,7 +72,7 @@ module.exports = {
           loader: "url-loader",
           options: /* 加载器相关的配置项 */ {
             name: 'static/[name].[ext]',
-            limit: /* <=limit的图片转换成base64 */ 10000,
+            limit: /* <=limit的图片转换成base64 */ 0,
             mimetype: "image/jpg|image|gif/png|image/ico",
             fallback: 'file-loader',
             publicPath: '../../' //采用根路径
@@ -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',

src/assets/css/styleTemplate.less

@@ -13,6 +13,10 @@
     font-family: 'DingTalkJinBuTi', "DingTalkSans";
   }
 
+  .mgb_box {
+    margin-bottom: 3% !important;
+  }
+
   #echarts7 {
     min-width: 400px;
     width: 95%;
@@ -24,6 +28,8 @@
   }
 
 
+
+
   .hidetip {
     display: none;
   }
@@ -395,13 +401,42 @@
       }
     }
 
-    @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;
 
+      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;
+    //   }
+
+    // }
+
 
   }
 
@@ -776,6 +811,7 @@
           align-items: center;
 
           #echarts5,
+          #echarts_drybase,
           #echarts51 {
             min-width: 400px;
             width: 100%;
@@ -790,6 +826,7 @@
 
       .bigDivPd {}
 
+
       .titleDiv {
         width: 100%;
         display: flex;
@@ -842,6 +879,7 @@
         margin-bottom: 2%;
       }
 
+
       .topMsg_2,
       .topMsg_3 {
         width: 100%;

src/pages/gvc/api.js

@@ -11,10 +11,10 @@ export function checkToken(params) {
 /**各基地库存明细 */
 export function smallMaterialService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1358057393917040084",
+    url: "/dataengine-center-oneservice/list/1431155205925726276",
     method: "POST",
     data: {
-      "apiId": "1358057393917040084",
+      "apiId": "1431155205925726276",
       "appKey": "200000135",
       "env": "PROD",
       "reqProtocol": 1,
@@ -30,10 +30,10 @@ export function smallMaterialService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: 'fdb551d8c6a01d87c58970d519752d81',
+      sign: '5de9f29632bf379f46b1a0d1c5a85112',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1358057393917040084',
+      apiId: '1431155205925726276',
       appKey: '200000135',
       execType: '3',
       env: 'PROD',
@@ -45,10 +45,10 @@ export function smallMaterialService(params) {
 /**各基地日，月累计，年累计产量 */
 export function smallDayService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1358059456248976873",
+    url: "/dataengine-center-oneservice/list/1431155399122708561",
     method: "POST",
     data: {
-      "apiId": "1358059456248976873",
+      "apiId": "1431155399122708561",
       "appKey": "200000135",
       "env": "PROD",
       "reqProtocol": 1,
@@ -63,10 +63,10 @@ export function smallDayService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: '5f270b133af668b3631fbe7dbff9ebe4',
+      sign: 'df5c9e31ae6544ae9561c2d2a9f89702',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1358059456248976873',
+      apiId: '1431155399122708561',
       appKey: '200000135',
       execType: '3',
       env: 'PROD',
@@ -78,10 +78,10 @@ export function smallDayService(params) {
 /**左侧数据*/
 export function leftService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1357592107129541992",
+    url: "/dataengine-center-oneservice/list/1431155462568896598",
     method: "POST",
     data: {
-      "apiId": "1357592107129541992",
+      "apiId": "1431155462568896598",
       "appKey": "200000135",
       "env": "PROD",
       "reqProtocol": 1,
@@ -95,10 +95,10 @@ export function leftService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: '2d35f0b798fe2cc8443f95aed6da466a',
+      sign: 'a1288953bd76d9f0b202280c84062f60',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1357592107129541992',
+      apiId: '1431155462568896598',
       appKey: '200000135',
       execType: '3',
       env: 'PROD',
@@ -109,10 +109,10 @@ export function leftService(params) {
 /**累计销量客户*/
 export function rollService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1357509594900108615",
+    url: "/dataengine-center-oneservice/list/1431155512914176090",
     method: "POST",
     data: {
-      "apiId": "1357509594900108615",
+      "apiId": "1431155512914176090",
       "appKey": "200000135",
       "env": "PROD",
       "reqProtocol": 1,
@@ -125,10 +125,10 @@ export function rollService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: '839f9217d1cf81ec03ff6ccf54c86e37',
+      sign: '7e13e57d4d3b4430dad7eedaaf5fe668',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1357509594900108615',
+      apiId: '1431155512914176090',
       appKey: '200000135',
       execType: '3',
       env: 'PROD',
@@ -140,10 +140,10 @@ export function rollService(params) {
 /**锂辉石库存*/
 export function bigShopService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1357489941160170789",
+    url: "/dataengine-center-oneservice/list/1431155276398422090",
     method: "POST",
     data: {
-      "apiId": "1357489941160170789",
+      "apiId": "1431155276398422090",
       "appKey": "200000135",
       "env": "PROD",
       "reqProtocol": 1,
@@ -156,10 +156,10 @@ export function bigShopService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: 'ae4c520da5ae882455307324f75f5277',
+      sign: '253c1c9594881b0724b3403e9ea78527',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1357489941160170789',
+      apiId: '1431155276398422090',
       appKey: '200000135',
       execType: '3',
       env: 'PROD',
@@ -170,10 +170,10 @@ export function bigShopService(params) {
 /**个基地年累计产量，库存*/
 export function smallShopService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1357592780709598582",
+    url: "/dataengine-center-oneservice/list/1431155337148721229",
     method: "POST",
     data: {
-      "apiId": "1357592780709598582",
+      "apiId": "1431155337148721229",
       "appKey": "200000135",
       "env": "PROD",
       "reqProtocol": 1,
@@ -187,10 +187,10 @@ export function smallShopService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: 'a842b5c5c462d7cacd2baad402ea94a7',
+      sign: 'ae68ccba4a6c70600cd9c75be6eb8264',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1357592780709598582',
+      apiId: '1431155337148721229',
       appKey: '200000135',
       execType: '3',
       env: 'PROD',

src/pages/gvc/api2.js

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

src/pages/gvc/component/mapView2.jsx

@@ -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/style.less

@@ -36,10 +36,9 @@
 
 
         .alls {
-
-          width: 70%;
+          width: 80%;
           height: unset;
-          padding: 2% 0 0 0;
+          padding: 2% 0% 0% 2%;
           position: relative;
         }
 

src/pages/gvc/view.jsx

@@ -23,7 +23,7 @@ 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";
@@ -190,8 +190,8 @@ class Gvc extends Component {
     await bigShopService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
         console.log('getUrl2', data)
-        const name_ = ["", "锂辉石(化学级)库存量", "锂辉石(化学级)库存量", "累计运输锂辉石(化学级)"];
-        const style__ = [{}, { left: "28%", top: "40%", width: '12em' }, { left: "5%", top: "55%", width: '12em' }, { left: "-3%", top: "27%", width: '12em' }]
+        const name_ = ["", "锂辉石(化学级)库存量", "锂辉石(化学级)库存量", "累计运输锂辉石(化学级)", "", "锂辉石(化学级)在途库存"];
+        const style__ = [{}, { left: "28%", top: "40%", width: '12em' }, { left: "3%", top: "57%", width: '12em' }, { left: "-6%", top: "29%", width: '12em' }, "", { left: "12%", top: "30%", width: '12em' }]
         data = data.map((x, i) => {
           return {
             ...x,
@@ -200,16 +200,20 @@ 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.store.saveState({ imgMsgData: old_imgMsgData });
@@ -220,7 +224,7 @@ class Gvc extends Component {
     await smallShopService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
         console.log('getUrl4', data)
-        const style__ = [{}, { left: "49%", top: "24%" }, { left: "32%", top: "73%" }, { left: "53%", top: "57%" }, { left: "71%", top: "44%" }, { left: "16%", top: "86%" }]
+        const style__ = [{}, { left: "47%", top: "25%" }, { left: "33%", top: "72%" }, { left: "52%", top: "57%" }, { left: "71%", top: "44%" }, { left: "14%", top: "86%" }, { left: "-4%", top: "100%" }, { left: "90%", top: "31%" }]
         data = data.map((x, i) => {
           return {
             ...x,
@@ -236,12 +240,16 @@ class Gvc extends Component {
         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")
@@ -272,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(() => {
@@ -313,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 };
@@ -321,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 });
       }
@@ -387,6 +404,7 @@ class Gvc extends Component {
   render() {
     const stores = this.store.state;
     let { totalValue, yearDecline, yearSend, imgMsgData } = this.store.state;
+    console.log('imgMsgData', toJS(imgMsgData))
     let { LeftHtml, updateTime, changGif, leftName, rightName } = this.state;
     return (
       <div className={[styles.gvc_home + ' home_box ']}>
@@ -414,12 +432,12 @@ class Gvc extends Component {
 
         <div className={"all_box"}>
           {/* 视频播放器 */}
-          {/* <MapViewTwo></MapViewTwo> */}
+          <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 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" />
+              <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" /> */}
             </div>
 
           </div>
@@ -459,17 +477,20 @@ class Gvc extends Component {
                         }
                         {/* 基地 */}
                         {
-                          item.cumulativeProduction !== null && <div className="hoverR">
+                          (item.cumulativeProduction !== null || item.showDetail) && <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 && <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">
                                   库存/吨

src/pages/sial/api.js

@@ -73,14 +73,14 @@ export function momeyService(params) {
 }
 
 
-/**百万工时损工率   产量计划完成率*/
+/** 产量计划完成率*/
 export function timeService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1356250124518724729",
+    url: "/dataengine-center-oneservice/list/1435868883211217227",
     method: "POST",
     data: {
-      "apiId": "1356250124518724729",
-      "appKey": "200000134",
+      "apiId": "1435868883211217227",
+      "appKey": "200000138",
       "env": "PROD",
       "reqProtocol": 1,
       "returnFields": [
@@ -93,11 +93,11 @@ export function timeService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: '46847fe90889330f13cdc3318d848d45',
+      sign: '897e941a533a75ae9bf82305f2d6df34',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1356250124518724729',
-      appKey: '200000134',
+      apiId: '1435868883211217227',
+      appKey: '200000138',
       execType: '3',
       env: 'PROD',
     }
@@ -107,11 +107,11 @@ export function timeService(params) {
 /**产值+发货量+产量+库存*/
 export function numberService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1356243326548087867",
+    url: "/dataengine-center-oneservice/list/1435869479216572764",
     method: "POST",
     data: {
-      "apiId": "1356243326548087867",
-      "appKey": "200000134",
+      "apiId": "1435869479216572764",
+      "appKey": "200000138",
       "env": "PROD",
       "reqProtocol": 1,
       "returnFields": [
@@ -123,11 +123,11 @@ export function numberService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: '2f079b53e1e63b753bb6f9807f6c6818',
+      sign: 'e764fa1aae81091bde971cd28a709dfa',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1356243326548087867',
-      appKey: '200000134',
+      apiId: '1435869479216572764',
+      appKey: '200000138',
       execType: '3',
       env: 'PROD',
     }
@@ -138,11 +138,11 @@ export function numberService(params) {
 /**近30天产量*/
 export function mondService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1356244872119751767",
+    url: "/dataengine-center-oneservice/list/1435868691592341823",
     method: "POST",
     data: {
-      "apiId": "1356244872119751767",
-      "appKey": "200000134",
+      "apiId": "1435868691592341823",
+      "appKey": "200000138",
       "env": "PROD",
       "reqProtocol": 1,
       "returnFields": [
@@ -156,11 +156,11 @@ export function mondService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: 'ef3ecc442896d925cc02d36f1107d9e3',
+      sign: '419a4e9f3c7ed4b18c42b211e4d209fc',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1356244872119751767',
-      appKey: '200000134',
+      apiId: '1435868691592341823',
+      appKey: '200000138',
       execType: '3',
       env: 'PROD',
     }
@@ -170,11 +170,11 @@ export function mondService(params) {
 /**月度产量/发货量+一次合格率*/
 export function twoService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1356411403496625359",
+    url: "/dataengine-center-oneservice/list/1435869411763775830",
     method: "POST",
     data: {
-      "apiId": "1356411403496625359",
-      "appKey": "200000134",
+      "apiId": "1435869411763775830",
+      "appKey": "200000138",
       "env": "PROD",
       "reqProtocol": 1,
       "returnFields": [
@@ -183,17 +183,49 @@ export function twoService(params) {
         "deliveryQty",
         "qcRate",
         "targeRate",
+        "budgetProdQty",
+        "budgetSalesQty"
       ],
       "pageNum": 1,
       "pageSize": 10,
       "useResultCache": false
     },
     headers: {
-      sign: '9c472223a9acbdb9f16bebb7002e0c40',
+      sign: 'c1a4f54cc466dbc636391987832361f3',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1356411403496625359',
-      appKey: '200000134',
+      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": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'd220845f9b15022fe9cd97aab13935f9',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1435869551190829407',
+      appKey: '200000138',
       execType: '3',
       env: 'PROD',
     }
@@ -203,11 +235,11 @@ export function twoService(params) {
 /**更新日期*/
 export function updateTimeService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1356778817327502618",
+    url: "/dataengine-center-oneservice/list/1435869869019457910",
     method: "POST",
     data: {
-      "apiId": "1356778817327502618",
-      "appKey": "200000134",
+      "apiId": "1435869869019457910",
+      "appKey": "200000138",
       "env": "PROD",
       "reqProtocol": 1,
       "returnFields": [
@@ -218,11 +250,11 @@ export function updateTimeService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: '4365b6564b25c852fcf0228188f48114',
+      sign: '5646c212a5cc864e43c14c2e7e4414b8',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1356778817327502618',
-      appKey: '200000134',
+      apiId: '1435869869019457910',
+      appKey: '200000138',
       execType: '3',
       env: 'PROD',
     }

src/pages/sial/component/dryBaseQualified.jsx

@@ -0,0 +1,217 @@
+/*
+ * @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: [],
+      suzhouRate: [],
+    };
+  }
+
+  componentDidMount() {
+    this.getUrl()
+  }
+
+  async getUrl() {
+    await dryBaseData().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        let year = [], suzhouRate = [], yantingRate = [];
+        data.map((x, i) => {
+          year.push(x.bMonth);
+          if (x.factoryName == '盐亭') {
+            yantingRate.push(x.indexValue)
+          } else if (x.factoryName == '盐亭') {
+            suzhouRate.push(x.indexValue)
+          }
+        });
+        this.setState({ year, yantingRate, suzhouRate });
+        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.suzhouRate,
+            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/mapView.jsx

@@ -54,7 +54,7 @@ class MapView extends Component {
         媒体参与度（Media Engagement）是指用户与媒体内容进行互动的程度，可以通过多个指标来衡量。这些指标主要包括观看时间、观看率、转化率、交互行为等。
         可以通过：chrome://media-engagement/ 查看
      */
-    const video = document.querySelector('.video1');
+    const video = document.querySelector('.videoBoxViem');
     console.log(video.play());
 
     const model = document.querySelector('.model')
@@ -100,8 +100,8 @@ class MapView extends Component {
   render() {
     const { changGif } = this.state;
     return (
-      <div class="video_box video_box_hide animate__animated animate__fadeOut animate__delay-2s animate__slower">
-          <video src={require("@assets/imgs/dataVImg/homeVideo.mp4").default} autoplay="autoplay" class="video1"></video>
+      <div class="video_box3 video_box_hide sial_video animate__animated animate__fadeOut animate__delay-2s animate__slower">
+        <video src={require("@assets/imgs/dataVimg/sial_video1.mp4").default} autoplay="autoplay" class="videoBoxViem"></video>
       </div>
     )
   }

src/pages/sial/component/moodProductionView.jsx

@@ -22,9 +22,9 @@ class MoodSendView extends Component {
     super(props, context);
     this.store = mod;
     this.state = {
-      proQty: [],
+      budgetSalesQty: [],
       year: [],
-      deliveryQty: [],
+      budgetProdQty: [],
     };
   }
 
@@ -35,13 +35,13 @@ class MoodSendView extends Component {
   async getUrl() {
     await twoService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
-        let year = [], proQty = [], deliveryQty = [];
+        let year = [], budgetSalesQty = [], budgetProdQty = [];
         data.map((x, i) => {
           year.push(x.bMonth);
-          proQty.push(x.proQty)
-          deliveryQty.push(x.deliveryQty)
+          budgetSalesQty.push(x.budgetSalesQty || 0)
+          budgetProdQty.push(x.budgetProdQty || 0)
         });
-        this.setState({ year, deliveryQty, proQty });
+        this.setState({ year, budgetProdQty, budgetSalesQty });
         this.setData();
       }
     });
@@ -197,7 +197,7 @@ class MoodSendView extends Component {
               ])
             },
 
-            data: this.state.proQty
+            data: this.state.budgetSalesQty
           },
           {
             name: '实际产量',
@@ -221,7 +221,7 @@ class MoodSendView extends Component {
                 { offset: 1, color: 'rgba(105, 255, 222, 0.3)' },
               ])
             },
-            data: this.state.deliveryQty
+            data: this.state.budgetProdQty
           }
         ]
       }

src/pages/sial/component/oneQualified.jsx

@@ -46,10 +46,10 @@ class BottomLineForSend extends Component {
       }
     });
   }
-  roundFun(value=0) {
+  roundFun(value = 0) {
     value = value * 100;
     var str = parseFloat(value).toFixed(10);
-    var num = str.substring(0,str.lastIndexOf('.')+3);
+    var num = str.substring(0, str.lastIndexOf('.') + 3);
     return num
   }
 
@@ -70,7 +70,7 @@ class BottomLineForSend extends Component {
             fontSize: 12,
             color: "#ededed"
           },
-          formatter: (param)=> {
+          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>
@@ -133,13 +133,13 @@ class BottomLineForSend extends Component {
                 type: 'dashed',
               },
             },
-            min:0.9,
-            max:1,
-            splitNumber:5,
+            min: 0.9,
+            max: 1,
+            splitNumber: 5,
             axisTick: { show: false },
             axisLabel: {
-              formatter: (value)=>{
-                return value*100 + '%'
+              formatter: (value) => {
+                return value * 100 + '%'
               },
               textStyle: {
                 color: '#7d7d7d',

src/pages/sial/style.less

@@ -2,375 +2,569 @@
 
 @assetUrl: "../../assets/imgs/home";
 
-.bg_after {
-  content: "";
-  display: block;
-  bottom: 0;
-  position: absolute;
-  width: 100%;
-  height: 10px;
-}
+.sial_home {
+  background: url(../../assets/imgs/dataVimg/sialBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40 !important;
+
 
 
-.home {
-  position: relative;
-  .insert {
+
+  .bg_after {
+    content: "";
+    display: block;
+    bottom: 0;
     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;
-      }
-    }
+    height: 10px;
   }
-  :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;
+
+
+
+  .home {
+    position: relative;
+
+    .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;
       }
-      .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;
+
+      .notice {
+        background: #fff;
+        border-radius: 6px;
+        padding: 12px;
+        text-align: left;
+        font-size: 12px;
+        margin-bottom: 12px;
+
+        &>*:not(:first-child) {
+          margin-top: 8px;
         }
-        &::before {
-          background-image: linear-gradient(
-            90deg,
-            rgba(255, 255, 255, 1) 0%,
-            rgba(255, 255, 255, 0.3) 100%
-          );
-          right: -46px;
+      }
+
+      .documents {
+        background: #fff;
+        border-radius: 6px;
+        padding: 12px;
+        text-align: left;
+        font-size: 12px;
+
+        &>*:not(:first-child) {
+          margin-top: 8px;
         }
       }
     }
-    .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%;
+
+
+    :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%;
+
+
+      .sial_video {
+        background: url(../../assets/imgs/dataVimg/gvcBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40 !important;
+        align-items: flex-start;
+        // background: #000;
+
+        video {
+          width: 100%;
+          height: unset;
+          padding: 0;
+        }
+
+        img {
+          width: 100%;
+          height: unset;
+          padding: 0;
+        }
+
+
+        .alls {
+          width: 80%;
+          height: unset;
+          padding: 2% 0% 0% 2%;
+          position: relative;
         }
 
-        .not_open_card {
-          display: none;
+        // @media (min-height: 800px) {
+        //   .alls {
+        //     width: 73%;
+        //   }
+        // }
+
+        // @media (min-height: 900px) {
+        //   .alls {
+        //     width: 64%;
+        //   }
+        // }
+
+        // @media (min-height: 1000PX) {
+        //   .alls {
+        //     width: 70%;
+        //   }
+        // }
+
+      }
+
+      .titles {
+        padding-top: 52px;
+        display: inline-block;
+
+        .big_title {
+          font-size: 40px;
+          color: #ffffff;
+          letter-spacing: 5px;
+          text-align: center;
+          font-weight: bold;
         }
 
-        &.toggle_stat {
-          .nor_card {
+        .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;
           }
 
-          &:hover > .nor_card {
-            display: none;
+          &::after {
+            background-image: linear-gradient(90deg,
+                rgba(255, 255, 255, 0.3) 0%,
+                rgba(255, 255, 255, 1) 100%);
+            left: -46px;
           }
-          &:hover > .not_open_card {
-            display: block;
+
+          &::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%;
           }
 
-          .tips {
-            text-align: center;
-            font-size: 16px;
-            color: rgba(255, 255, 255, 0.5);
-            margin-top: -5px;
+          .not_open_card {
+            display: none;
           }
-          .tips_img {
-            width: 60%;
-            margin-top: 30%;
+
+          &.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_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_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_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_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;
+      .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 {
+      .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;
-        color: #fff;
-        margin-top: 48px;
-        margin-bottom: 48px;
       }
-    }
 
-    .type_2 {
-      padding: 42px 0 65px 0;
-    }
+      .mt4 {
+        margin-top: 4px;
+      }
 
-    .card_title {
-      font-size: 20px;
-      color: #ffffff;
-      font-weight: bold;
-      position: absolute;
-      bottom: 7%;
-      width: 100%;
-      text-align: center;
+      .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;
 
-    .text {
-      text-align: left;
+    >div {
       display: flex;
-      justify-content: center;
+      align-items: center;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      white-space: nowrap;
     }
+  }
 
-    .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);
-    }
+  .centerCon {
+    width: 63%;
+    height: 75%;
+    padding: 0;
+    position: relative;
+    margin: 0% 0 0 -1%;
 
-    .fs12 {
-      font-size: 12px;
-    }
 
-    .fs14 {
-      font-size: 14px;
-    }
+  }
+
 
-    .mt4 {
-      margin-top: 4px;
-    }
 
-    .mt50 {
-      margin-top: 90px;
-    }
 
-    .linear {
+  :global {
+    .imgMsg2 {
       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;
-    }
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      color: #ff0;
 
-    .min_w {
-      min-width: 40%;
-    }
-  }
-}
-.add_common_report {
-  display: flex;
-  align-items: center;
+      li {
+        position: absolute;
+        width: 25em;
+        z-index: 100;
+        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;
 
-  >div {
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    white-space: nowrap;
+        .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%);
+      }
+    }
   }
 }
-

src/pages/sial/view.jsx

@@ -25,6 +25,10 @@ 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 {
@@ -57,7 +61,78 @@ class Home extends Component {
       manHourNum: 1,
       leftName: deleteCacheAndChangeUrl("left", false, true),
       rightName: deleteCacheAndChangeUrl("right", false, true),
-
+      imgMsgData: [
+        {
+          "factoryCode": 3,
+          "production": 2685.99,
+          "inventory": 1340.99,
+          "total": 0,
+          "totalName": "",
+          "styles": {
+            "left": "32%",
+            "top": "32%"
+          },
+          "cumulativeProduction": 2685.99,
+          "day": "83.38",
+          "mood": "2,685.99",
+          "year": "2,685.99",
+          "rawMaterial": [
+            {
+              "prodCatgory": "产品-氯化锂",
+              "indexValue": "938.64"
+            },
+            {
+              "prodCatgory": "产品-碳酸锂",
+              "indexValue": "254.00"
+            },
+            {
+              "prodCatgory": "产品-氢氧化锂",
+              "indexValue": "148.35"
+            },
+            {
+              "prodCatgory": "产品-金属锂",
+              "indexValue": 0
+            },
+            {
+              "prodCatgory": "基地仓-锂辉石",
+              "indexValue": "8,184.37"
+            },
+            {
+              "prodCatgory": "重庆仓-锂辉石",
+              "indexValue": "2,093.59"
+            }
+          ]
+        },
+        {
+          "factoryCode": 2,
+          "production": 2145,
+          "inventory": 343.31,
+          "total": 0,
+          "totalName": "",
+          "styles": {
+            "left": "5%",
+            "top": "45%"
+          },
+          "cumulativeProduction": 2145,
+          "day": "70.00",
+          "mood": "2,145.00",
+          "year": "2,145.00",
+          "rawMaterial": [
+            {
+              "prodCatgory": "产品-碳酸锂",
+              "indexValue": "343.31"
+            },
+            {
+              "prodCatgory": "基地仓-锂辉石",
+              "indexValue": "8,564.99"
+            },
+            {
+              "prodCatgory": "重庆仓-锂辉石",
+              "indexValue": "2,215.58"
+            }
+          ]
+        },
+      ]
     };
     this.timer = null //定时器，用于检测同步状态
   }
@@ -116,7 +191,7 @@ class Home extends Component {
         媒体参与度（Media Engagement）是指用户与媒体内容进行互动的程度，可以通过多个指标来衡量。这些指标主要包括观看时间、观看率、转化率、交互行为等。
         可以通过：chrome://media-engagement/ 查看
      */
-    const video = document.querySelector('.video2');
+    const video = document.querySelector('.video_box_2');
     console.log(video.play());
 
     const model = document.querySelector('.model')
@@ -164,21 +239,20 @@ class Home extends Component {
       if (+resultCode === 0) {
         let plannedCompletionData = [], manHourData = [];
         data.map((x, i) => {
-          if (x.indexValue || x.indexValue == 0) {
-            if (x.indexName == '产量计划完成率') {
-              plannedCompletionData.push({
-                name: x.factoryName,
-                value: Number((x.indexValue * 100).toFixed(2)),
-              })
-            } else {
-              manHourData.push({
-                name: x.factoryName,
-                // value: Number((x.indexValue * 100).toFixed(2)),
-                value: Number(x.indexValue),
-              })
-            }
+          if (x.indexName == '产量计划完成率') {
+            plannedCompletionData.push({
+              name: x.factoryName,
+              value: x.indexValue ? Number((x.indexValue * 100).toFixed(2)) : 0,
+            })
+          } else {
+            manHourData.push({
+              name: x.factoryName,
+              // value: Number((x.indexValue * 100).toFixed(2)),
+              value: Number(x.indexValue),
+            })
           }
         });
+        console.log('plannedCompletionData', plannedCompletionData)
         this.setState({ plannedCompletionData, manHourData, plannedCompletionNum: 1, manHourNum: 1 });
       }
     });
@@ -220,48 +294,28 @@ class Home extends Component {
 
   fontMsgChange(type) {
     this.timer = setInterval(() => {
-      const { plannedCompletionData, plannedCompletionNum, manHourData, manHourNum } = this.state;
 
+      const { plannedCompletionData, plannedCompletionNum, manHourData, manHourNum } = this.state;
+      const yanting = plannedCompletionData.find(item => item.name == '盐亭');
+      const suzhou = plannedCompletionData.find(item => item.name == '苏州');
       //产量计划完成率
       var p1 = document.getElementById('plannedCompletionBox_yanting');
       var p3 = document.getElementById('plannedCompletionBox_suzhou');
-      const datas_ = plannedCompletionData[plannedCompletionNum - 1];
-      var res = "";
-      if (datas_) {
-        if (type) {
-          res = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number">' + getThousandNum(datas_?.value.toFixed(2)) + '</span><span class="topMsg_number_2" style={{fontSize: "0.75em",color: "#fff"}}>%</span><p class="topMsg_number_p">' + datas_?.name + '</p></div>';
-        } else {
-          res = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number shu1">' + datas_?.value.toFixed(2) + '</span><span class="topMsg_number_2" style={{fontSize: "0.75em",color: "#fff"}}>%</span><p class="topMsg_number_p">' + datas_?.name + '</p></div>';
-        }
-      }
-      p1.innerHTML = res;
-      p3.innerHTML = res;
-
-      //百万工时损工率
-      var p2 = document.getElementById('manHourBox');
-      const datas_2 = manHourData[manHourNum - 1];
-      var res2 = "";
-      if (datas_2) {
-        if (type) {
-          res2 = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number">' + getThousandNum(datas_2?.value.toFixed(2)) + '</span><p class="topMsg_number_p">' + datas_2?.name + '</p></div>';//<span class="topMsg_number_2">%</span>
-        } else {
-          res2 = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number shu1">' + datas_2?.value.toFixed(2) + '</span><p class="topMsg_number_p">' + datas_2?.name + '</p></div>';
-        }
-      }
-      p2.innerHTML = res2;
+      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">' + yanting?.name + '</p></div>';
+      p3.innerHTML = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number">' + getThousandNum(suzhou?.value.toFixed(2)) + '</span><span class="topMsg_number_2" style={{fontSize: "0.75em",color: "#fff"}}>%</span><p class="topMsg_number_p">' + suzhou?.name + '</p></div>';
 
-      const num_ = plannedCompletionNum + 1 > plannedCompletionData.length ? 1 : plannedCompletionNum + 1;
-      const num_2 = manHourNum + 1 > manHourData.length ? 1 : manHourNum + 1;
-      this.setState({ plannedCompletionNum: num_, manHourNum: num_2 })
+      // 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 } = this.state;
+    let { changGif, updateTime, changNun, leftName, rightName, imgMsgData } = this.state;
     return (
-      <div className={"home_box"}>
+      <div className={[styles.sial_home + ' home_box ']}>
         {/* 水印 */}
         {
           window.urlConfig && window.urlConfig.SHOW_WATERMARK && <div className={"shuiYin"} style={{ backgroundImage: `url(${$store.app.markSrc})`, backgroundRepeat: 'repeat' }}></div>
@@ -284,8 +338,11 @@ class Home extends Component {
 
         {/* 视频播放器 */}
         <MapView></MapView>
-        <div className={"video_box"}>
-          <video src={require("@assets/imgs/dataVImg/homeVideo2.mp4").default} autoplay="autoplay" loop="loop" class="video2 center_box2 animate__animated animate__fadeIn animate__delay-1s"></video>
+        <div className={"video_box3 sial_video"}>
+          <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" /> */}
+
         </div>
         <div className={[styles.home + " home cbHome"]}>
           <div className="leftContent">
@@ -309,7 +366,7 @@ class Home extends Component {
                 </div>
               </div>
             </div> */}
-            <div class="topMsg_33 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
+            <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>
@@ -323,17 +380,14 @@ class Home extends Component {
               </div>
             </div>
 
-            <div class="topMsg2 animate__animated animate__fadeInDown animate__slower" style={{ marginTop: '6%', marginBottom: '6%' }}>
-              <div className="topMsgCommond bigDivPd">
+            <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={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="manHourBox" >
-                  <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 className="topMsg_content">
+                  <DryBaseQualified></DryBaseQualified>
                 </div>
               </div>
             </div>
@@ -353,7 +407,7 @@ class Home extends Component {
               </div>
             </div> */}
 
-            <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower animate__delay-2s">
+            <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>
@@ -418,7 +472,80 @@ class Home extends Component {
                 </div>
               </div>
             </div>
-            <div class="bottomContent3 animate__animated animate__fadeInUp animate__slower animate__delay-1s">
+            <ul className="imgMsg2">
+              {
+                toJS(imgMsgData).map((item, index) => {
+                  if (!item) { return }
+                  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>{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 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>
@@ -434,7 +561,7 @@ class Home extends Component {
           {/* 右侧信息栏 */}
           <div className="leftContent">
 
-            <div class="topMsg_33 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
+            <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>
@@ -448,7 +575,7 @@ class Home extends Component {
               </div>
             </div>
 
-            <div class="topMsg_22 animate__animated animate__fadeInDown animate__slower">
+            <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>
@@ -473,7 +600,7 @@ class Home extends Component {
               </div>
             </div> */}
 
-            <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower animate__delay-2s">
+            <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>