fix

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

@@ -44,7 +44,7 @@
         .alls {
           width: 80%;
           height: unset;
-          padding: 1% 0% 0% 2%;
+          padding: 0% 0% 0% 2%;
           position: relative;
           box-sizing: border-box;
           z-index: 1;
@@ -218,7 +218,7 @@
 
         @media (min-width: 2560px) {
           .alls {
-            width: 82%;
+            width: 77%;
           }
 
           video {
@@ -228,7 +228,7 @@
 
         @media (min-width: 2240px) and (max-width: 2559px) {
           .alls {
-            width: 81%;
+            width: 77%;
           }
 
           video {
@@ -238,7 +238,7 @@
 
         @media (min-width: 1760px) and (max-width: 2239px) {
           .alls {
-            width: 80%;
+            width: 77%;
           }
 
           video {
@@ -248,7 +248,7 @@
 
         @media (min-width: 1441px) and (max-width: 1759px) {
           .alls {
-            width: 79%;
+            width: 77%;
           }
 
           video {
@@ -258,7 +258,7 @@
 
         @media (max-width: 1440px) {
           .alls {
-            width: 78%;
+            width: 77%;
           }
 
           video {

src/pages/sial/api.js

@@ -86,10 +86,11 @@ export function timeService(params) {
       "returnFields": [
         "indexName",
         "factoryName",
-        "indexValue"
+        "indexValue",
+        "factoryCode"
       ],
       "pageNum": 1,
-      "pageSize": 10,
+      "pageSize": 999,
       "useResultCache": false
     },
     headers: {
@@ -149,7 +150,8 @@ export function mondService(params) {
         "indexName",
         "indexDate",
         "indexValue",
-        "factoryProdcution"
+        "factoryProdcution",
+        "totalValue"
       ],
       "pageNum": 1,
       "pageSize": 30,
@@ -217,7 +219,7 @@ export function dryBaseData(params) {
         "indexValue",
       ],
       "pageNum": 1,
-      "pageSize": 10,
+      "pageSize": 100,
       "useResultCache": false
     },
     headers: {
@@ -261,4 +263,100 @@ export function updateTimeService(params) {
   });
 }
 
+/**基地数据*/
+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

@@ -22,9 +22,10 @@ class BottomLineForSend extends Component {
     super(props, context);
     this.store = mod;
     this.state = {
-      factoryProdcution_arr: [],
-      missionsIntensity_arr: [],
+      total_arr: [],
       year: [],
+      yanting_arr: [],
+      jiangsu_arr: [],
     };
   }
 
@@ -34,14 +35,15 @@ class BottomLineForSend extends Component {
   async getUrl() {
     await mondService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
-        let year = [], missionsIntensity_arr = [], factoryProdcution_arr = [];
+        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_);
-          missionsIntensity_arr.push(x.indexValue);
-          factoryProdcution_arr.push(x.factoryProdcution)
+          total_arr.push(x.totalValue)
+          yanting_arr.push(x.factoryProdcution)
+          jiangsu_arr.push(x.indexValue)
         });
-        this.setState({ year, missionsIntensity_arr, factoryProdcution_arr });
+        this.setState({ year, total_arr, yanting_arr, jiangsu_arr });
         this.setData();
       }
     });
@@ -76,6 +78,8 @@ class BottomLineForSend extends Component {
           bottom: '15%',
           containLabel: true
         },
+
+
         // legend: {
         //   data: ['字段1', '字段2'],
         //   right: 'center',
@@ -167,22 +171,21 @@ class BottomLineForSend extends Component {
               normal: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
-                  color: '#69ffde5c'
+                  color: 'rgba(0, 255, 182, 0.5)'
                 }, {
                   offset: 1,
-                  color: 'rgba(228, 228, 126, 0)'
+                  color: 'rgba(0, 255, 182, 0)'
                 }], false),
                 shadowColor: 'rgba(0, 0, 0, 0.1)',
               }
             },
             itemStyle: {
               normal: {
-                color: 'rgba(228, 228, 126, 1)',
-                borderColor: 'rgba(228, 228, 126, .1)',
+                color: 'rgba(0, 255, 182, 0.3)',
                 borderWidth: 12
               }
             },
-            data: this.state.missionsIntensity_arr,
+            data: this.state.total_arr,
             "smooth": true
           },
           {
@@ -192,32 +195,16 @@ class BottomLineForSend extends Component {
             symbol: 'circle',
             symbolSize: 0,
             showSymbol: false,
-            lineStyle: {
-              normal: {
-                color: '#69FFDE',
-                width: 0
-              }
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0, [{
-                  offset: 0,
-                  color: '#69ffde5c'
-                }, {
-                  offset: 1,
-                  color: 'rgba(228, 228, 126, 0)'
-                }], false),
-                shadowColor: 'rgba(0, 0, 0, 0)',
-              }
-            },
             itemStyle: {
+              color: '#FFCE00'
+            },
+            lineStyle: {
               normal: {
-                color: 'rgba(228, 228, 126, 1)',
-                borderColor: 'rgba(228, 228, 126, .1)',
-                borderWidth: 0
+                color: '#FFCE00',
+                width: 2
               }
             },
-            data: this.state.factoryProdcution_arr,
+            data: this.state.jiangsu_arr,
             "smooth": true
           },
           {
@@ -229,30 +216,18 @@ class BottomLineForSend extends Component {
             showSymbol: false,
             lineStyle: {
               normal: {
-                color: '#69FFDE',
-                width: 0
-              }
-            },
-            areaStyle: {
-              normal: {
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 0, [{
-                  offset: 0,
-                  color: '#69ffde5c'
-                }, {
-                  offset: 1,
-                  color: 'rgba(228, 228, 126, 0)'
-                }], false),
-                shadowColor: 'rgba(0, 0, 0, 0)',
+                color: '#8D93FF',
+                width: 2
               }
             },
             itemStyle: {
               normal: {
-                color: 'rgba(228, 228, 126, 1)',
-                borderColor: 'rgba(228, 228, 126, .1)',
-                borderWidth: 0
+                color: '#8D93FF',
+                borderColor: '#8D93FF',
+                borderWidth: 2
               }
             },
-            data: this.state.factoryProdcution_arr,
+            data: this.state.yanting_arr,
             "smooth": true
           },
           // {

src/pages/sial/component/dryBaseQualified.jsx

@@ -24,7 +24,7 @@ class BottomLineForSend extends Component {
     this.state = {
       yantingRate: [],
       year: [],
-      suzhouRate: [],
+      jiangsuRate: [],
     };
   }
 
@@ -35,16 +35,18 @@ class BottomLineForSend extends Component {
   async getUrl() {
     await dryBaseData().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
-        let year = [], suzhouRate = [], yantingRate = [];
+        let year = [], jiangsuRate = [], yantingRate = [];
         data.map((x, i) => {
-          year.push(x.bMonth);
-          if (x.factoryName == '盐亭') {
+          if (!year.includes(x.bMonth)) {
+            year.push(x.bMonth);
+          }
+          if (x.factoryName == '天齐盐亭') {
             yantingRate.push(x.indexValue)
-          } else if (x.factoryName == '盐亭') {
-            suzhouRate.push(x.indexValue)
+          } else if (x.factoryName == '天齐江苏') {
+            jiangsuRate.push(x.indexValue)
           }
         });
-        this.setState({ year, yantingRate, suzhouRate });
+        this.setState({ year, yantingRate, jiangsuRate });
         this.setData();
       }
     });
@@ -97,7 +99,7 @@ class BottomLineForSend extends Component {
           "left": "10%",
         },
         legend: {
-          data: ['盐亭', '苏州'],
+          data: ['盐亭', '江苏'],
           right: 'center',
           padding: [10, 0, 0, 5],
           top: 0,
@@ -178,9 +180,9 @@ class BottomLineForSend extends Component {
             "smooth": true
           },
           {
-            "name": "苏州",
+            "name": "江苏",
             "type": "line",
-            data: this.state.suzhouRate,
+            data: this.state.jiangsuRate,
             lineStyle: {
               normal: {
                 width: 2

src/pages/sial/component/mapView.jsx

@@ -100,8 +100,11 @@ class MapView extends Component {
   render() {
     const { changGif } = this.state;
     return (
-      <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 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>
     )
   }

src/pages/sial/style.less

@@ -3,10 +3,108 @@
 @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: "";
@@ -21,6 +119,7 @@
 
   .home {
     position: relative;
+    overflow: hidden;
 
     .insert {
       position: absolute;
@@ -69,58 +168,13 @@
 
     :global {
       // background: url(../../../public/bg_home.png) 50% 50% no-repeat;
-      background-color: #041747;
+      //background-color: #041747;
       background-size: cover;
       text-align: center;
-      padding: 0 33px 113px 33px;
+      //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;
-        }
-
-        // @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;
@@ -459,25 +513,34 @@
 
   :global {
     .imgMsg2 {
+      list-style: none;
+      margin: 0;
+      padding: 0;
       width: 100%;
       position: absolute;
-      left: 0;
+      left: 27.5%;
+      margin-top: -14%;
       top: 0;
       height: 100%;
       z-index: 100;
+      color: #fff;
+      pointer-events: none;
+      overflow: visible;
 
       li {
         position: absolute;
-        width: 25em;
+        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;
@@ -518,6 +581,7 @@
           left: 0;
           top: -7em;
           padding-top: 11em;
+          overflow: visible;
 
 
           .hoverDiv {
@@ -525,10 +589,10 @@
           }
         }
 
-        .hoverR:hover {
-          .hoverDiv {
-            display: flex;
-          }
+        // hover 区域是绝对定位，直接用 li:hover 更稳定
+        &:hover .hoverDiv,
+        .hoverR:hover .hoverDiv {
+          display: flex;
         }
 
         .hoverDiv {

src/pages/sial/view.jsx

@@ -35,7 +35,10 @@ import {
   timeService,
   numberService,
   checkToken,
-  updateTimeService
+  updateTimeService,
+  getBaseData,
+  getBaseYMDData,
+  getBaseDetailData
 } from "./api";
 import { getThousandNum, deleteCacheAndChangeUrl, timestampToTime, setWaterMark } from "@utils/util";
 import {
@@ -63,73 +66,39 @@ class Home extends Component {
       rightName: deleteCacheAndChangeUrl("right", false, true),
       imgMsgData: [
         {
-          "factoryCode": 3,
-          "production": 2685.99,
-          "inventory": 1340.99,
+          "factoryCode": 5,
+          "production": 0,
+          "inventory": 0,
           "total": 0,
           "totalName": "",
           "styles": {
-            "left": "32%",
-            "top": "32%"
+            "left": "14%",
+            "top": "50%"
           },
-          "cumulativeProduction": 2685.99,
-          "day": "83.38",
-          "mood": "2,685.99",
-          "year": "2,685.99",
+          "cumulativeProduction": 0,
+          "day": "0",
+          "mood": "0",
+          "year": "0",
           "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,
+          "factoryCode": 10,
+          "production": 0,
+          "inventory": 0,
           "total": 0,
           "totalName": "",
           "styles": {
-            "left": "5%",
-            "top": "45%"
+            "left": "0%",
+            "top": "83%"
           },
-          "cumulativeProduction": 2145,
-          "day": "70.00",
-          "mood": "2,145.00",
-          "year": "2,145.00",
+          "cumulativeProduction": 0,
+          "day": "0",
+          "mood": "0",
+          "year": "0",
           "rawMaterial": [
-            {
-              "prodCatgory": "产品-碳酸锂",
-              "indexValue": "343.31"
-            },
-            {
-              "prodCatgory": "基地仓-锂辉石",
-              "indexValue": "8,564.99"
-            },
-            {
-              "prodCatgory": "重庆仓-锂辉石",
-              "indexValue": "2,215.58"
-            }
+
           ]
         },
       ]
@@ -167,6 +136,7 @@ class Home extends Component {
     this.getUrl();
     this.getUrl2()
     this.getUrl3();
+    this.getBaseData();
     setTimeout(() => {
       this.videoStart();
     }, 200)
@@ -179,6 +149,68 @@ class Home extends Component {
     }, 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.始终允许静音模式下自动播放
@@ -242,11 +274,13 @@ class Home extends Component {
           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),
             })
@@ -296,13 +330,13 @@ class Home extends Component {
     this.timer = setInterval(() => {
 
       const { plannedCompletionData, plannedCompletionNum, manHourData, manHourNum } = this.state;
-      const yanting = plannedCompletionData.find(item => item.name == '盐亭');
-      const suzhou = plannedCompletionData.find(item => item.name == '苏州');
+      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_suzhou');
-      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>';
+      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_, })
@@ -315,7 +349,7 @@ class Home extends Component {
     let { totalValue, yearDecline, yearSend, productInventory } = this.store.state;
     let { changGif, updateTime, changNun, leftName, rightName, imgMsgData } = this.state;
     return (
-      <div className={[styles.sial_home + ' home_box ']}>
+      <div className={styles.sial_home}>
         {/* 水印 */}
         {
           window.urlConfig && window.urlConfig.SHOW_WATERMARK && <div className={"shuiYin"} style={{ backgroundImage: `url(${$store.app.markSrc})`, backgroundRepeat: 'repeat' }}></div>
@@ -338,10 +372,85 @@ class Home extends Component {
 
         {/* 视频播放器 */}
         <MapView></MapView>
-        <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 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"]}>
@@ -472,79 +581,7 @@ class Home extends Component {
                 </div>
               </div>
             </div>
-            <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天的产量数据（含外加工）。'}>
@@ -566,7 +603,7 @@ class Home extends Component {
                 <Tooltip placement="bottom" title={' ● 本年度截止到更新日期累计产量的计划完成率。'}>
                   <p className="topMsg_title">产量计划完成率</p>
                 </Tooltip>
-                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="plannedCompletionBox_suzhou">
+                <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>

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: {