feat: 中部ui

src/assets/css/styleTemplate.less

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 茶百道主题样式
  * @Date: 2022-10-27 10:56:37 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-11-13 14:58:13
+ * @Last Modified time: 2023-11-14 17:48:54
  */
 
 @import url("../../themes/themes.less");
@@ -268,6 +268,7 @@
         color: #fff;
         margin: 0;
         font-size: 30px;
+
       }
     }
 

src/pages/gvc/component/mapView2.jsx

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

src/pages/gvc/mod.js

@@ -14,14 +14,209 @@ import { message } from 'antd';
 
 // 默认状态
 const defaultState = {
-  totalValue:0,
-  yearDecline:0,
-  yearSend:0,
-  productInventory:0,
-  list:[{name:'营运数据大屏'},{name:'经营大盘'},{name:'到家专题'},{name:'门店大盘'},{name:'自助跑数SQL平台'},{name:'月度包材预警跑数模板'}],
-  rightlist:[],
-  bumen:'数字化中心/数据工程部',
-  gw:'数据产品经理',
+  imgMsgData: [
+    {
+      total: 4500,
+      totalName: "累计运输锂辉石",
+      styles: { left: "0%", top: "19%" },
+      cumulativeProduction: "",
+      inventory: 0,
+    },
+    {
+      total: 3233,
+      totalName: "锂辉石库存量",
+      styles: { left: "11%", top: "45%" },
+      cumulativeProduction: "",
+      inventory: 0,
+    },
+    {
+      total: 3578,
+      totalName: "锂辉石库存量",
+      styles: { left: "32%", top: "27%" },
+      cumulativeProduction: "",
+      inventory: 0,
+    },
+    {
+      total: 0,
+      totalName: "",
+      styles: { left: "10%", top: "88%" },
+      cumulativeProduction: 1222,
+      inventory: 1000,
+      day:222,
+      mood:333,
+      year:444,
+      rawMaterial:[
+        {
+          prodCatgory:"原料-鲤辉石",
+          indexValue:22,
+        },
+        {
+          prodCatgory:"产品-碳酸锂",
+          indexValue:33,
+        },
+        {
+          prodCatgory:"产品-氯化锂",
+          indexValue:44,
+        },
+        {
+          prodCatgory:"产品-氢氧化锂",
+          indexValue:66,
+        },
+        {
+          prodCatgory:"产品-金属锂",
+          indexValue:88,
+        },
+        {
+          prodCatgory:"产品-98K",
+          indexValue:1000,
+        },
+      ]
+    },
+    {
+      total: 0,
+      totalName: "",
+      styles: { left: "27%", top: "73%" },
+      cumulativeProduction: 1222,
+      inventory: 1000,
+      day:222,
+      mood:333,
+      year:444,
+      rawMaterial:[
+        {
+          prodCatgory:"原料-鲤辉石",
+          indexValue:22,
+        },
+        {
+          prodCatgory:"产品-碳酸锂",
+          indexValue:33,
+        },
+        {
+          prodCatgory:"产品-氯化锂",
+          indexValue:44,
+        },
+        {
+          prodCatgory:"产品-氢氧化锂",
+          indexValue:66,
+        },
+        {
+          prodCatgory:"产品-金属锂",
+          indexValue:88,
+        },
+        {
+          prodCatgory:"产品-98K",
+          indexValue:1000,
+        },
+      ]
+    },
+    {
+      total: 0,
+      totalName: "",
+      styles: { left: "49%", top: "56%" },
+      cumulativeProduction: 1222,
+      inventory: 1000,
+      day:222,
+      mood:333,
+      year:444,
+      rawMaterial:[
+        {
+          prodCatgory:"原料-鲤辉石",
+          indexValue:22,
+        },
+        {
+          prodCatgory:"产品-碳酸锂",
+          indexValue:33,
+        },
+        {
+          prodCatgory:"产品-氯化锂",
+          indexValue:44,
+        },
+        {
+          prodCatgory:"产品-氢氧化锂",
+          indexValue:66,
+        },
+        {
+          prodCatgory:"产品-金属锂",
+          indexValue:88,
+        },
+        {
+          prodCatgory:"产品-98K",
+          indexValue:1000,
+        },
+      ]
+    },
+    {
+      total: 0,
+      totalName: "",
+      styles: { left: "66%", top: "42%" },
+      cumulativeProduction: 1222,
+      inventory: 1000,
+      day:222,
+      mood:333,
+      year:444,
+      rawMaterial:[
+        {
+          prodCatgory:"原料-鲤辉石",
+          indexValue:22,
+        },
+        {
+          prodCatgory:"产品-碳酸锂",
+          indexValue:33,
+        },
+        {
+          prodCatgory:"产品-氯化锂",
+          indexValue:44,
+        },
+        {
+          prodCatgory:"产品-氢氧化锂",
+          indexValue:66,
+        },
+        {
+          prodCatgory:"产品-金属锂",
+          indexValue:88,
+        },
+        {
+          prodCatgory:"产品-98K",
+          indexValue:1000,
+        },
+      ]
+    },
+    {
+      total: 0,
+      totalName: "",
+      styles: { left: "83%", 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,
+        },
+      ]
+    },
+  ],
 }
 
 // 严格模式

src/pages/gvc/style.less

@@ -3,13 +3,127 @@
 @assetUrl: "../../assets/imgs/home";
 
 .home_box {
-  background: url(../../assets/imgs/gvc/homeBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40;
+  // background: url(../../assets/imgs/gvc/homeBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40;
+  background: #000;
 
   :global {
     .all_box {
       width: 100%;
       height: 100%;
 
+      .gvc_video {
+        align-items: flex-start;
+        background: #000;
+
+        video {
+          width: 100%;
+          height: unset;
+          padding: 0;
+        }
+
+        .alls {
+
+          width: 64%;
+          height: unset;
+          padding: 2% 0 0 0;
+          position: relative;
+        }
+
+        .imgMsg {
+          width: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          height: 100%;
+          color: #fff;
+
+          li {
+            position: absolute;
+            width: 14em;
+            height: 4em;
+            opacity: 1;
+            background: linear-gradient(0deg, #42ca9840 0%, #42ca9800 98%);
+            ;
+            border-radius: 0.5em;
+            padding: 0.5em;
+            box-sizing: border-box;
+            font-size: 0.9em;
+            color: #CDF1FF;
+
+            .nums {
+              font-size: 1.3em;
+              color: #69FFDE;
+              display: inline-block !important;
+            }
+
+            .topMsg_number_2 {
+              display: inline-block !important;
+            }
+
+            .sma {
+              font-size: 0.7em;
+              color: #CDF1FF;
+              display: inline-block;
+              margin-left: 0.2em;
+            }
+
+            .chanL {
+              background: unset;
+              font-size: 0.9em;
+              color: #CDF1FF;
+              height: 4em;
+              box-sizing: border-box;
+              padding: 0 0.5em;
+              display: flex;
+              justify-content: space-between;
+              >div {
+                width: 50%;
+              }
+            }
+            .hoverR{
+              width: 100%;
+              height: 12em;
+              position: absolute;
+              left: 0;
+              top: -7em;
+              padding-top: 11em;
+              &:hover {
+                background-color: red;
+              }
+              .hoverDiv{
+                // display: none;
+              }
+            }
+            .hoverR:hover{
+              background-color: red;
+              .hoverDiv{
+                display: flex;
+              }
+            }
+
+            .hoverDiv {
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              padding: 0 1em;
+              background: linear-gradient(0deg, #ffffff00 20%, #ffffff29 100%);
+              width:100%;
+              border-radius: 0.5em;
+              box-sizing: border-box;
+              margin-top: 0.1em;
+              font-size: 0.8em;
+              padding: 0.7em 1em 0;
+              color: #d7d7d7;
+              align-items: flex-start;
+
+              >div>span {
+                display: block;
+              }
+            }
+          }
+        }
+      }
+
       .gvcHome {
         height: 100%;
 

src/pages/gvc/view.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm  产供销价值链
  * @Date: 2023-11-10 10:19:34 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-11-10 16:43:06
+ * @Last Modified time: 2023-11-14 17:32:45
  */
 
 import React, { useState, useEffect, Component } from "react";
@@ -19,8 +19,10 @@ import {
   checkToken,
   updateTimeService
 } from "./api";
+import MapViewTwo from "./component/mapView2.jsx";
 
 import 'animate.css';
+import { get } from "lodash";
 @withRouter
 
 class Gvc extends Component {
@@ -82,18 +84,19 @@ class Gvc extends Component {
     }
   }
   componentDidMount() {
-    this.fontMsgChange();
-    this.getUrl();
-    this.getUrl2()
-    this.getUrl3();
+    // this.fontMsgChange();
+    // this.getUrl();
+    // this.getUrl2()
+    // this.getUrl3();
     setTimeout(() => {
+
       this.videoStart();
     }, 200)
     setTimeout(() => {
       //替换gif
       this.setState({ changGif: true });
-
-    }, 2000)
+      $(".shu1").numScroll();
+    }, 3000)
   }
   videoStart() {
     /*     Chrome 浏览器的视频自动播放策略
@@ -187,9 +190,6 @@ class Gvc extends Component {
           }
         });
         this.store.saveState({ totalValue, yearDecline, yearSend, productInventory });
-        setTimeout(() => {
-          $(".shu1").numScroll();
-        }, 2500)
       }
     });
   }
@@ -261,13 +261,77 @@ class Gvc extends Component {
 
   render() {
     const stores = this.store.state;
-    let { totalValue, yearDecline, yearSend, productInventory } = this.store.state;
-    let { LeftHtml, } = this.state;
+    let { totalValue, yearDecline, yearSend, imgMsgData } = this.store.state;
+    let { LeftHtml } = this.state;
     return (
       <div className={[styles.home_box + ' home_box']}>
         <div className={"all_box"}>
-          <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-2s"></video>
+          {/* 视频播放器 */}
+          <MapViewTwo></MapViewTwo>
+          <div className={"video_box gvc_video"}>
+            <div className="alls">
+              <video src={require("@assets/imgs/gvc/video2.mp4").default} autoplay="autoplay" loop="loop" class="video2 center_box2 animate__animated animate__fadeIn animate__delay-2s">
+              </video>
+              <ul className="imgMsg">
+                {
+                  toJS(imgMsgData).map((item, index) => {
+                    return (
+                      <li style={{ ...item.styles }}>
+                        {/* 矿产 */}
+                        {
+                          item.totalName && <p className="name">{item.totalName}</p>
+                        }
+                        {
+                          item.totalName && <span class="shu1 nums">{item.total}</span>
+                        }
+                        {
+                          item.totalName && <span className="sma">吨</span>
+                        }
+                        {/* 基地 */}
+                        {
+                          item.cumulativeProduction && <div className="hoverR">
+                            <div className="hoverDiv chanL">
+                              <div style={{ width: "38%" }}>
+                                <p className="title">
+                                  产量/吨
+                                </p>
+                                <span>日：{item.day}</span>
+                                <span>月：{item.mood}</span>
+                                <span>年：{item.year}</span>
+                              </div>
+                              <div style={{ width: "62%" }}>
+                                <p className="title">
+                                  库存/吨
+                                </p>
+                                {
+                                  get(item, "rawMaterial", []).map((ra, rai) => {
+                                    return <span>{ra.prodCatgory}：{ra.indexValue}</span>
+                                  })
+                                }
+                              </div>
+                            </div>
+                          </div>
+                        }
+                        {
+                          item.cumulativeProduction && <div className="chanL text">
+                            <div>
+                              <p>累计产量</p>
+                              <span class="nums shu1">{item.cumulativeProduction}</span><span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
+                            </div>
+                            <div>
+                              <p>产品库存</p>
+                              <span class="nums shu1">{item.inventory}</span><span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
+                            </div>
+
+                          </div>
+                        }
+                      </li>
+                    )
+                  })
+                }
+              </ul>
+            </div>
+
           </div>
           <div className={"gvcHome home cbHome"}>
             <div className="leftContent">