style: style

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-12-19 16:04:03
+ * @Last Modified time: 2024-07-21 17:58:15
  */
 
 @import url("../../themes/themes.less");
@@ -377,6 +377,13 @@
         padding: 1% 0 0 10%;
       }
     }
+    @media (max-height: 900px) {
+      .video_box{
+        top: -2em;
+      }
+
+    }
+
 
   }
 

src/pages/gvc/style.less

@@ -64,7 +64,7 @@
           width: 17%;
           /* padding: 0 1em; */
           height: 70%;
-          margin-top: 5%;
+          margin-top: 4%;
           margin-left: 1%;
           padding-right: 7%;
 
@@ -76,21 +76,21 @@
             flex-wrap: wrap;
 
             >li {
-              height: 20%;
+              height: 22%;
               width: 100%;
               color: #fff;
               display: block;
 
               .top_div {
                 background: none;
-                width: 100%;
+                width: 110%;
                 height: 60%;
                 display: flex;
                 align-items: center;
                 justify-content: center;
 
                 >div {
-                  width: 51%;
+                  width: 47%;
                   position: relative;
                   display: block;
 
@@ -101,7 +101,7 @@
                   >span {
                     font-size: 0.9em;
                     position: absolute;
-                    width: 100%;
+                    width: 110%;
                     bottom: 15%;
                     left: 63%;
                     transform: skew(4deg, 334deg);
@@ -124,7 +124,7 @@
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
-                margin-top: 1em;
+                // margin-top: 1em;
                 font-weight: normal;
                 font-size: 0.9em;
                 color: #CDF1FF;
@@ -144,12 +144,17 @@
         }
 
         @media (max-height: 900px) {
+          .leftContent{
+            margin-top: 1%;
+            height: 75%;
+          }
           .leftContent li {
-            height: 15% !important;
+            height: 23% !important;
 
             .text {
               width: 107% !important;
-              margin-top: 1em !important;
+              margin-top: 0;
+              padding-top: 0.5em !important;
 
               .topMsg_number {
                 font-size: 1em !important;
@@ -197,6 +202,7 @@
                 
             }
           }
+
         }
 
         @media (min-height: 900px) {
@@ -239,7 +245,8 @@
 
           li {
             position: absolute;
-            width: 19em;
+            width: 25em;
+            z-index: 10;
             height: 4em;
             opacity: 1;
             background: linear-gradient(0deg, #ffffff26 0%, #ffffff00 100%);
@@ -323,11 +330,23 @@
               }
             }
           }
+          @media (max-height: 900px) {
+            li .hoverDiv{
+              background:linear-gradient(0deg, #292929 0%, #252525 100%)!important;
+            }
+  
+          }
+
 
           li:hover {
             background: linear-gradient(0deg, #42ca9840 0%, #42ca9800 98%);
           }
         }
+        @media (max-height: 900px) {
+          .imgMsg {
+            top: -1.5em;
+          }
+        }
 
         .rightContent {
           width: 15%;

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: 2024-01-22 14:26:38
+ * @Last Modified time: 2024-07-21 18:00:14
  */
 
 import React, { useState, useEffect, Component } from "react";
@@ -24,7 +24,7 @@ import {
 } from "./api";
 import MapViewTwo from "./component/mapView2.jsx";
 import mpVideoGvc from "@assets/imgs/dataVimg/videoGvc2.mp4";
-import { getThousandNum,deleteCacheAndChangeUrl,timestampToTime,setWaterMark } from "@utils/util";
+import { getThousandNum, deleteCacheAndChangeUrl, timestampToTime, setWaterMark } from "@utils/util";
 import 'animate.css';
 import { get } from "lodash";
 import $store from "@store/";
@@ -66,7 +66,7 @@ class Gvc extends Component {
           $store.app.setMarkSrc(
             setWaterMark({
               toDataURL: true,
-              waterMarkText: [data?.userId || sessionStorage.getItem("tqcUserName"),timestampToTime()],
+              waterMarkText: [data?.userId || sessionStorage.getItem("tqcUserName"), timestampToTime()],
             })
           );
         } else {
@@ -127,10 +127,10 @@ class Gvc extends Component {
         btn.removeEventListener('click', play);
         // 如果他自动播放了就隐藏按钮，消除点击事件
       } catch (err) {
-      if(model){
-        model.style.display = 'block';
-      }
-      if(btn){btn.addEventListener('click', play);}
+        if (model) {
+          model.style.display = 'block';
+        }
+        if (btn) { btn.addEventListener('click', play); }
         // 如果Promise返回的是error就引导用户点击按钮，在调用play方法
       }
     }
@@ -151,11 +151,11 @@ class Gvc extends Component {
         btn.removeEventListener('click', play);
       }
       else {
-        if(model){
+        if (model) {
           model.style.display = 'block';
         }
-        if(btn){btn.addEventListener('click', play);}
-        }
+        if (btn) { btn.addEventListener('click', play); }
+      }
     }
     play()
 
@@ -177,6 +177,7 @@ class Gvc extends Component {
             }
           );
         });
+        LeftHtml.unshift({ txt_name: '锂辉石(化学级)', num1: 40532.23, num2: '' })
         this.setState({ LeftHtml });
       }
     });
@@ -184,7 +185,7 @@ class Gvc extends Component {
   async getUrl2() {
     await bigShopService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
-        const name_ = ["", "锂辉石库存量", "锂辉石库存量", "累计运输锂辉石"];
+        const name_ = ["", "锂辉石(化学级)库存量", "锂辉石(化学级)库存量", "累计运输锂辉石(化学级)"];
         const style__ = [{}, { left: "34%", top: "30%" }, { left: "11%", top: "48%" }, { left: "0%", top: "22%" }]
         data = data.map((x, i) => {
           return {
@@ -237,9 +238,9 @@ class Gvc extends Component {
 
         console.log(old_imgMsgData, "old_imgMsgData")
         this.store.saveState({ imgMsgData: old_imgMsgData });
-        setTimeout(()=>{
+        setTimeout(() => {
           this.getUrl5()
-        },500)
+        }, 500)
       }
     });
   }
@@ -270,9 +271,9 @@ class Gvc extends Component {
         old_imgMsgData[7] = { ...old_imgMsgData[7], ...d_5 };
         console.log(old_imgMsgData, "1111old_imgMsgData")
         this.store.saveState({ imgMsgData: old_imgMsgData });
-        setTimeout(()=>{
+        setTimeout(() => {
           this.getUrl6()
-        },1000)
+        }, 1000)
 
       }
     });
@@ -283,36 +284,17 @@ class Gvc extends Component {
       if (+resultCode === 0) {
         function getItems(num) {
           const datas = data.filter(x => { return x.factoryCode == num });
-          const rawMaterial = datas.map((item, index) => {
+          let rawMaterial = datas.map((item, index) => {
             return {
               prodCatgory: item.prodCatgory,
               indexValue: getThousandNum(item.indexValue),
             }
           })
-          // const par = {
-          //   rawMaterial: [
-          //     {
-          //       prodCatgory: "原料-鲤辉石",
-          //       indexValue: datas?.filter(x => { return x.prodCatgory == 1 })?.[0]?.indexValue || 0,
-          //     },
-          //     {
-          //       prodCatgory: "产品-碳酸锂",
-          //       indexValue: datas?.filter(x => { return x.prodCatgory == 2 })?.[0]?.indexValue || 0,
-          //     },
-          //     {
-          //       prodCatgory: "原料-氯化锂",
-          //       indexValue: datas?.filter(x => { return x.prodCatgory == 3 })?.[0]?.indexValue || 0,
-          //     },
-          //     {
-          //       prodCatgory: "产品-氢氧化锂",
-          //       indexValue: datas?.filter(x => { return x.prodCatgory == 4 })?.[0]?.indexValue || 0,
-          //     },
-          //     {
-          //       prodCatgory: "产品-金属锂",
-          //       indexValue: datas?.filter(x => { return x.prodCatgory == 5 })?.[0]?.indexValue || 0,
-          //     }
-          //   ]
-          // }
+          // rawMaterial.push({prodCatgory:'锂辉石(化学级)-XXXXX仓',indexValue:33231.88})
+          // rawMaterial.push({prodCatgory:'锂辉石(化学级)-XXXXX仓',indexValue:33231.88})
+          // rawMaterial.push({prodCatgory:'锂辉石(化学级)-XXXXX仓',indexValue:33231.88})
+          // rawMaterial.push({prodCatgory:'锂辉石(化学级)-XXXXX仓',indexValue:33231.88})
+          // rawMaterial.push({prodCatgory:'锂辉石(化学级)-XXXXX仓',indexValue:33231.88})
           return { rawMaterial: rawMaterial }
         }
 
@@ -355,32 +337,37 @@ class Gvc extends Component {
         <div className={"top_div"}>
           <div class="animate__animated animate__pulse animate__slower animate__infinite">
             {i === 0 && <img class="img1" src={require("@assets/imgs/dataVimg/qiu1.png").default} alt="" />}
-            {i === 1 && <img class="img1" src={require("@assets/imgs/dataVimg/qiu2.png").default} alt="" />}
-            {i === 2 && <img class="img1" src={require("@assets/imgs/dataVimg/qiu3.png").default} alt="" />}
-            {i === 3 && <img class="img1" src={require("@assets/imgs/dataVimg/qiu4.png").default} alt="" />}
+            {i === 1 && <img class="img1" src={require("@assets/imgs/dataVimg/qiu1.png").default} alt="" />}
+            {i === 2 && <img class="img1" src={require("@assets/imgs/dataVimg/qiu2.png").default} alt="" />}
+            {i === 3 && <img class="img1" src={require("@assets/imgs/dataVimg/qiu3.png").default} alt="" />}
+            {i === 4 && <img class="img1" src={require("@assets/imgs/dataVimg/qiu4.png").default} alt="" />}
             {i === 0 && <img src={require("@assets/imgs/gvc/qiuH1.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
-            {i === 1 && <img src={require("@assets/imgs/gvc/qiuH2.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
-            {i === 2 && <img src={require("@assets/imgs/gvc/qiuH3.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
-            {i === 3 && <img src={require("@assets/imgs/gvc/qiuH4.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
+            {i === 1 && <img src={require("@assets/imgs/gvc/qiuH1.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
+            {i === 2 && <img src={require("@assets/imgs/gvc/qiuH2.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
+            {i === 3 && <img src={require("@assets/imgs/gvc/qiuH3.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
+            {i === 4 && <img src={require("@assets/imgs/gvc/qiuH4.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
             <span>{x.txt_name}</span>
           </div>
         </div>
         <div className="text">
           <div>
-            <p>累计产量</p>
+            <p>{i == 0 ? '库存' : '累计产量'}</p>
             {
               !changGif ? <span class="topMsg_number shu1">{x.num1}</span> : <span class="topMsg_number">{getThousandNum(x.num1)}</span>
             }
 
             <span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
           </div>
-          <div>
-            <p>产品库存</p>
-            {
-              !changGif ? <span class="topMsg_number shu1">{x.num2}</span> : <span class="topMsg_number">{getThousandNum(x.num2)}</span>
-            }
-            <span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
-          </div>
+          {
+            i != 0 && <div>
+              <p>产品库存</p>
+              {
+                !changGif ? <span class="topMsg_number shu1">{x.num2}</span> : <span class="topMsg_number">{getThousandNum(x.num2)}</span>
+              }
+              <span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
+            </div>
+
+          }
         </div>
       </li>
 
@@ -400,7 +387,7 @@ class Gvc extends Component {
         {/* 右键切换大屏 */}
         <Tooltip placement="bottom" title={"数据运营中心"}>
           <img src={require("@assets/imgs/iconJpg/rightJ.png").default} alt="" className={"rightJ_png"} onClick={() => {
-            deleteCacheAndChangeUrl("/home/operation",(url)=>{
+            deleteCacheAndChangeUrl("/home/operation", (url) => {
               this.props.history.replace(url);
             })
 
@@ -408,7 +395,7 @@ class Gvc extends Component {
         </Tooltip>
         <Tooltip placement="bottom" title={"数据运营中心"}>
           <img src={require("@assets/imgs/iconJpg/rightJL.png").default} alt="" className={"rightJ_png rightJ_png_L"} onClick={() => {
-            deleteCacheAndChangeUrl("/home/operation",(url)=>{
+            deleteCacheAndChangeUrl("/home/operation", (url) => {
               this.props.history.replace(url);
             })
           }} />
@@ -494,7 +481,7 @@ class Gvc extends Component {
 
                               <span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
                             </div>
-                            <div style={{width:"60%"}}>
+                            <div style={{ width: "60%" }}>
                               <p>产品库存</p>
                               {
                                 !changGif ? <span class="nums shu1">{item.inventory}</span> : <span class="nums">{getThousandNum(item.inventory)}</span>