大屏改造

config/webpack.dev.js

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

src/assets/css/styleTemplate.less

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

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

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

src/pages/frame/view.jsx

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

src/pages/gvc/component/mapView2.jsx

@@ -89,10 +89,10 @@ class MapViewTwo extends Component {
         btn.removeEventListener('click', play);
       }
       else {
-        if(model){
+        if (model) {
           model.style.display = 'block';
         }
-        if(btn){btn.addEventListener('click', play);}
+        if (btn) { btn.addEventListener('click', play); }
       }
     }
     play()
@@ -104,7 +104,7 @@ class MapViewTwo extends Component {
     return (
       <div class="video_box video_box_hide gvc_video animate__animated animate__fadeOut animate__delay-2s animate__slower">
         <div className="alls">
-        <video src={require("@assets/imgs/dataVimg/videoGvc.mp4").default} autoplay="autoplay" class="videoBoxViem"></video>
+          <video src={require("@assets/imgs/dataVimg/videoGvc.mp4").default} autoplay="autoplay" class="videoBoxViem"></video>
         </div>
       </div>
     )

src/pages/gvc/component/rightBottomView.jsx

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

src/pages/gvc/style.less

@@ -28,31 +28,38 @@
           padding: 0;
         }
 
+        img {
+          width: 100%;
+          height: unset;
+          padding: 0;
+        }
+
+
         .alls {
 
-          width: 64%;
+          width: 70%;
           height: unset;
           padding: 2% 0 0 0;
           position: relative;
         }
 
-        @media (min-height: 800px) {
-          .alls {
-            width: 73%;
-          }
-        }
+        // @media (min-height: 800px) {
+        //   .alls {
+        //     width: 73%;
+        //   }
+        // }
 
-        @media (min-height: 900px) {
-          .alls {
-            width: 64%;
-          }
-        }
+        // @media (min-height: 900px) {
+        //   .alls {
+        //     width: 64%;
+        //   }
+        // }
 
-        @media (min-height: 1000PX) {
-          .alls {
-            width: 70%;
-          }
-        }
+        // @media (min-height: 1000PX) {
+        //   .alls {
+        //     width: 70%;
+        //   }
+        // }
 
       }
 
@@ -144,10 +151,11 @@
         }
 
         @media (max-height: 900px) {
-          .leftContent{
+          .leftContent {
             margin-top: 1%;
             height: 75%;
           }
+
           .leftContent li {
             height: 23% !important;
 
@@ -165,8 +173,8 @@
 
 
         .centerCon {
-          width: 62%;
-          height: 80%;
+          width: 63%;
+          height: 75%;
           padding: 0;
           position: relative;
           margin: 0% 0 0 -1%;
@@ -177,8 +185,10 @@
             position: absolute;
             left: 53%;
             top: 36%;
-            -webkit-animation: antSpinMove 8s linear infinite;;
-            animation: antSpinMove 8s linear infinite;;
+            -webkit-animation: antSpinMove 8s linear infinite;
+            ;
+            animation: antSpinMove 8s linear infinite;
+            ;
 
             >img {
               width: 100%;
@@ -187,52 +197,61 @@
 
         }
 
-        
-
-        @media (min-height: 800px) {
-          .centerCon {
-            width: 65%;
-            height: 78%;
-            padding: 0;
-            position: relative;
-            margin: 0% 0 0 -3%;
-            .rightCar {
-              -webkit-animation: antSpinMove900 8s linear infinite;;
-              animation: antSpinMove900 8s linear infinite;;
-                
-            }
-          }
-
-        }
 
-        @media (min-height: 900px) {
-          .centerCon {
-            width: 62%;
-            height: 80%;
-            padding: 0;
-            position: relative;
-            margin: 0% 0 0 -1%;
-            .rightCar {
-              -webkit-animation: antSpinMove 8s linear infinite;;
-              animation: antSpinMove 8s linear infinite;;
-            }
-          }
-        }
 
-        @media (min-height: 1000PX) {
-          .centerCon {
-            width: 63%;
-            height: 75%;
-            padding: 0;
-            position: relative;
-            margin: 0% 0 0 -3%;
-            .rightCar {
-              -webkit-animation: antSpinMove1100 8s linear infinite;;
-              animation: antSpinMove1100 8s linear infinite;;
-                
-            }
-          }
-        }
+        // @media (min-height: 800px) {
+        //   .centerCon {
+        //     width: 65%;
+        //     height: 78%;
+        //     padding: 0;
+        //     position: relative;
+        //     margin: 0% 0 0 -3%;
+
+        //     .rightCar {
+        //       -webkit-animation: antSpinMove900 8s linear infinite;
+        //       ;
+        //       animation: antSpinMove900 8s linear infinite;
+        //       ;
+
+        //     }
+        //   }
+
+        // }
+
+        // @media (min-height: 900px) {
+        //   .centerCon {
+        //     width: 62%;
+        //     height: 80%;
+        //     padding: 0;
+        //     position: relative;
+        //     margin: 0% 0 0 -1%;
+
+        //     .rightCar {
+        //       -webkit-animation: antSpinMove 8s linear infinite;
+        //       ;
+        //       animation: antSpinMove 8s linear infinite;
+        //       ;
+        //     }
+        //   }
+        // }
+
+        // @media (min-height: 1000PX) {
+        //   .centerCon {
+        //     width: 63%;
+        //     height: 75%;
+        //     padding: 0;
+        //     position: relative;
+        //     margin: 0% 0 0 -3%;
+
+        //     .rightCar {
+        //       -webkit-animation: antSpinMove1100 8s linear infinite;
+        //       ;
+        //       animation: antSpinMove1100 8s linear infinite;
+        //       ;
+
+        //     }
+        //   }
+        // }
 
 
         .imgMsg {
@@ -330,11 +349,12 @@
               }
             }
           }
+
           @media (max-height: 900px) {
-            li .hoverDiv{
-              background:linear-gradient(0deg, #292929 0%, #252525 100%)!important;
+            li .hoverDiv {
+              background: linear-gradient(0deg, #292929 0%, #252525 100%) !important;
             }
-  
+
           }
 
 
@@ -342,6 +362,7 @@
             background: linear-gradient(0deg, #42ca9840 0%, #42ca9800 98%);
           }
         }
+
         @media (max-height: 900px) {
           .imgMsg {
             top: -1.5em;

src/pages/gvc/view.jsx

@@ -24,6 +24,8 @@ import {
 } from "./api";
 import MapViewTwo from "./component/mapView2.jsx";
 import mpVideoGvc from "@assets/imgs/dataVimg/videoGvc2.mp4";
+import gvcbg from "@assets/imgs/dataVimg/gvcbg.png";
+
 import { getThousandNum, deleteCacheAndChangeUrl, timestampToTime, setWaterMark } from "@utils/util";
 import 'animate.css';
 import { get } from "lodash";
@@ -47,8 +49,8 @@ class Gvc extends Component {
       manHourData: [
       ],
       manHourNum: 1,
-      leftName:deleteCacheAndChangeUrl("left",false,true),
-      rightName:deleteCacheAndChangeUrl("right",false,true),
+      leftName: deleteCacheAndChangeUrl("left", false, true),
+      rightName: deleteCacheAndChangeUrl("right", false, true),
     };
     this.timer = null //定时器，用于检测同步状态
   }
@@ -187,8 +189,9 @@ class Gvc extends Component {
   async getUrl2() {
     await bigShopService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
+        console.log('getUrl2', data)
         const name_ = ["", "锂辉石(化学级)库存量", "锂辉石(化学级)库存量", "累计运输锂辉石(化学级)"];
-        const style__ = [{}, { left: "34%", top: "30%" }, { left: "11%", top: "48%" }, { left: "0%", top: "22%" }]
+        const style__ = [{}, { left: "28%", top: "40%", width: '12em' }, { left: "5%", top: "55%", width: '12em' }, { left: "-3%", top: "27%", width: '12em' }]
         data = data.map((x, i) => {
           return {
             ...x,
@@ -208,7 +211,7 @@ class Gvc extends Component {
         old_imgMsgData[1] = d_2;
         old_imgMsgData[2] = d_3;
 
-        this.setState({ LeftHtml:[...[{txt_name:'锂辉石(化学级)',num1:d_4?.indexValue}],...this.state.LeftHtml] });
+        this.setState({ LeftHtml: [...[{ txt_name: '锂辉石(化学级)', num1: d_4?.indexValue }], ...this.state.LeftHtml] });
         this.store.saveState({ imgMsgData: old_imgMsgData });
       }
     });
@@ -216,7 +219,8 @@ class Gvc extends Component {
   async getUrl4() {
     await smallShopService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
-        const style__ = [{}, { left: "87%", top: "28%" }, { left: "69%", top: "46%" }, { left: "52%", top: "59%" }, { left: "29%", top: "76%" }, { left: "11%", top: "89%" }]
+        console.log('getUrl4', data)
+        const style__ = [{}, { left: "49%", top: "24%" }, { left: "32%", top: "73%" }, { left: "53%", top: "57%" }, { left: "71%", top: "44%" }, { left: "16%", top: "86%" }]
         data = data.map((x, i) => {
           return {
             ...x,
@@ -227,11 +231,11 @@ class Gvc extends Component {
             inventory: x.inventory,
           }
         });
-        const d_1 = data.filter(x => { return x.factoryCode == 5 })[0];
-        const d_2 = data.filter(x => { return x.factoryCode == 4 })[0];
-        const d_3 = data.filter(x => { return x.factoryCode == 3 })[0];
-        const d_4 = data.filter(x => { return x.factoryCode == 2 })[0];
-        const d_5 = data.filter(x => { return x.factoryCode == 1 })[0];
+        const d_1 = data.filter(x => { return x.factoryCode == 5 })[0];//江苏
+        const d_2 = data.filter(x => { return x.factoryCode == 4 })[0];//重庆
+        const d_3 = data.filter(x => { return x.factoryCode == 3 })[0];//射洪
+        const d_4 = data.filter(x => { return x.factoryCode == 2 })[0];//安居
+        const d_5 = data.filter(x => { return x.factoryCode == 1 })[0];//外加工厂
         let old_imgMsgData = this.store.state.imgMsgData;
         old_imgMsgData[3] = d_1;
         old_imgMsgData[4] = d_2;
@@ -251,6 +255,7 @@ class Gvc extends Component {
   async getUrl5() {
     await smallDayService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
+        console.log('getUrl5', data)
         function getItems(num) {
           const datas = data.filter(x => { return x.factoryCode == num });
           const par = {
@@ -286,6 +291,7 @@ class Gvc extends Component {
   async getUrl6() {
     await smallMaterialService().then(({ data = [], resultCode }) => {
       if (+resultCode === 0) {
+        console.log('getUrl6', data)
         function getItems(num) {
           const datas = data.filter(x => { return x.factoryCode == num });
           let rawMaterial = datas.map((item, index) => {
@@ -381,7 +387,7 @@ class Gvc extends Component {
   render() {
     const stores = this.store.state;
     let { totalValue, yearDecline, yearSend, imgMsgData } = this.store.state;
-    let { LeftHtml, updateTime, changGif,leftName,rightName } = this.state;
+    let { LeftHtml, updateTime, changGif, leftName, rightName } = this.state;
     return (
       <div className={[styles.gvc_home + ' home_box ']}>
         {/* 水印 */}
@@ -408,11 +414,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 center_box2 animate__animated animate__fadeIn animate__delay-2s">
-              </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>
@@ -428,9 +435,9 @@ class Gvc extends Component {
             </div>
 
             <div className="centerCon">
-              <p className="rightCar">
+              {/* <p className="rightCar">
                 <img src={require("@assets/imgs/gvc/car.png").default} alt="" />
-              </p>
+              </p> */}
               <ul className="imgMsg">
                 {
                   toJS(imgMsgData).map((item, index) => {

src/pages/sial/api.js

@@ -0,0 +1,232 @@
+import request from "@utils/request";
+
+/**登录*/
+export function checkToken(params) {
+  return request({
+    url: `/api/yonghong/checkToken?token=${params}`,
+    method: "GEt",
+  });
+}
+
+/**碳排放 */
+export function dataengineCenterOneservice(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356250396177503367",
+    method: "POST",
+    data: {
+      "apiId": "1356250396177503367",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "byear",
+        "missionsIntensity",
+        "missionsTotal",
+        "biz_id"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '19c3cdb58b80e44f2490b8eba3b7f938',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356250396177503367',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**库存金额 */
+export function momeyService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356776817075459329",
+    method: "POST",
+    data: {
+      "apiId": "1356776817075459329",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "prodCatgory",
+        "indexValue"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'd58de970856e583f126d186662251024',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356776817075459329',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**百万工时损工率   产量计划完成率*/
+export function timeService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356250124518724729",
+    method: "POST",
+    data: {
+      "apiId": "1356250124518724729",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "factoryName",
+        "indexValue"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '46847fe90889330f13cdc3318d848d45',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356250124518724729',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**产值+发货量+产量+库存*/
+export function numberService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356243326548087867",
+    method: "POST",
+    data: {
+      "apiId": "1356243326548087867",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "indexValue"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '2f079b53e1e63b753bb6f9807f6c6818',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356243326548087867',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**近30天产量*/
+export function mondService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356244872119751767",
+    method: "POST",
+    data: {
+      "apiId": "1356244872119751767",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "indexDate",
+        "indexValue",
+        "factoryProdcution"
+      ],
+      "pageNum": 1,
+      "pageSize": 30,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'ef3ecc442896d925cc02d36f1107d9e3',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356244872119751767',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**月度产量/发货量+一次合格率*/
+export function twoService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356411403496625359",
+    method: "POST",
+    data: {
+      "apiId": "1356411403496625359",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "bMonth",
+        "proQty",
+        "deliveryQty",
+        "qcRate",
+        "targeRate",
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '9c472223a9acbdb9f16bebb7002e0c40',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356411403496625359',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**更新日期*/
+export function updateTimeService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356778817327502618",
+    method: "POST",
+    data: {
+      "apiId": "1356778817327502618",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "etlTime"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '4365b6564b25c852fcf0228188f48114',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356778817327502618',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+

src/pages/sial/component/bottomLineForSend.jsx

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

src/pages/sial/component/leftMenoyView.jsx

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

src/pages/sial/component/mapView.jsx

@@ -0,0 +1,109 @@
+/*
+ * @Author: dayan_hjm 中部地图 第一段
+ * @Date: 2023-10-25 10:32:44 
+ * @Last Modified by: dayan_hjm
+ * controls 属性 : 值为 controls , 启用控制按钮 , 由于在不同的浏览器中表现不同 , 一般情况下 , 不显示控制按钮 ;
+        autoplay 属性 : 值为 autoplay , 在 Chrome 浏览器中 禁用自动播放 , 其它浏览器不禁用自动播放 ;
+        如果为视频设置静音播放 , 则可以在 Chrom 浏览器中 设置 autoplay 实现自动播放 ;
+        muted 属性 : 值为 muted , 将视频设置为静音播放 ;
+        如果为视频设置静音播放 , 则可以在 Chrom 浏览器中 设置 autoplay 实现自动播放 ;
+        width 属性 : 值为像素值 , 设置播放器宽度 ; 播放器的宽高建议只设置一个 , 避免失真 ;
+        height 属性 : 值为像素值 , 设置播放器高度 ; 播放器的宽高建议只设置一个 , 避免失真 ;
+        loop 属性 : 值为 loop , 设置播放器循环播放 ;
+        poster 属性 : 值为 图片 url 路径 , 设置视频位置等待加载时的图片 ;
+        preload 属性 :
+        设置 auto , 表示 预先加载视频 ;
+        设置 none , 表示 不预先加载视频 ;
+ * @Last Modified time: 2023-11-01 15:54:40
+ */
+import React, { useState, useEffect, Component } from "react";
+import { useHistory, useLocation, withRouter } from "react-router-dom";
+import mod from '../mod';
+import 'animate.css';
+@withRouter
+
+class MapView extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+      changGif: false,
+    };
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      //替换gif
+      this.setState({ changGif: true });
+      this.videoStart();
+    }, 200)
+    // setTimeout(() => {
+    //   $(".video_box_hide").hide();
+    // }, 4000)
+  }
+  videoStart() {
+    /*     Chrome 浏览器的视频自动播放策略
+        1.始终允许静音模式下自动播放
+        2.在以下的情况中，带声音播放会被允许：
+          ①用户已经与当前的域进行了交互（也就是click，tap事件）。
+          ②在桌面设备上，用户的媒体参与度指数阈值已经超过，这意味着用户之前播放过有声视频。
+          ③用户已经将网站添加到移动设备上的主屏幕或允在桌面上安装了PWA。
+        3.顶部帧可以将自动播放权限委派给其iframe，来允许自动播放声音
+        
+        媒体参与度（Media Engagement）是指用户与媒体内容进行互动的程度，可以通过多个指标来衡量。这些指标主要包括观看时间、观看率、转化率、交互行为等。
+        可以通过：chrome://media-engagement/ 查看
+     */
+    const video = document.querySelector('.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 animate__animated animate__fadeOut animate__delay-2s animate__slower">
+          <video src={require("@assets/imgs/dataVImg/homeVideo.mp4").default} autoplay="autoplay" class="video1"></video>
+      </div>
+    )
+  }
+}
+export default MapView;

src/pages/sial/component/moodProductionView.jsx

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

src/pages/sial/component/moodSendView.jsx

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

src/pages/sial/component/oneQualified.jsx

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

src/pages/sial/component/rightBottomView.jsx

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

src/pages/sial/index.jsx

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

src/pages/sial/mod.js

@@ -0,0 +1,72 @@
+/*
+ * @Author: dayan_hjm 
+ * @Date: 2022-10-27 11:11:30 
+ * @Last modified by:   dayan_hjm 
+ * @Last modified time: 2022-10-27 11:11:30 
+ */
+
+// 状态管理方法
+import { observable, action, configure, makeObservable, runInAction } from 'mobx';
+// 工具方法
+import { cloneDeep, get, groupBy, isEmpty, orderBy, pick, values } from "lodash";
+
+import { message } from 'antd';
+
+// 默认状态
+const defaultState = {
+  totalValue:0,
+  yearDecline:0,
+  yearSend:0,
+  productInventory:0,
+  list:[{name:'营运数据大屏'},{name:'经营大盘'},{name:'到家专题'},{name:'门店大盘'},{name:'自助跑数SQL平台'},{name:'月度包材预警跑数模板'}],
+  rightlist:[],
+  bumen:'数字化中心/数据工程部',
+  gw:'数据产品经理',
+}
+
+// 严格模式
+configure({
+  enforceActions: 'observed'
+});
+
+
+/**
+ * mod层 - 业务逻辑，数据逻辑应该存储于此
+ */
+class Mod {
+  constructor() {
+    makeObservable(this);
+  }
+  // 监视状态
+  @observable state = cloneDeep(defaultState);
+
+  @action saveState = async (payload) => {
+    runInAction(() => {
+      this.state = {
+        ...this.state,
+        ...payload
+      };
+    });
+  };
+
+
+  // 新增/编辑运营商
+  // @action customerOperatorsmod = async (par, type) => {
+  //   try {
+  //     const { data, resultCode, resultMsg } = await Serv.customerOperatorsServ(par, type);
+  //     if (resultCode + '' === '0') {
+  //       runInAction(() => {
+  //         message.success('操作成功!')
+  //         this.state.addEditVisiable = false;
+  //         this.state.version = Math.random()
+  //       });
+  //     }
+  //   } catch (e) {
+  //     console.log('e: ', e);
+  //   }
+  // }
+}
+
+// 将组件实例化，这意味着组件将不能从别处实例化
+const mod = new Mod();
+export default mod;

src/pages/sial/style.less

@@ -0,0 +1,376 @@
+@import url("../../themes/themes.less");
+
+@assetUrl: "../../assets/imgs/home";
+
+.bg_after {
+  content: "";
+  display: block;
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+  height: 10px;
+}
+
+
+.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;
+    }
+    .notice {
+      background: #fff;
+      border-radius: 6px;
+      padding: 12px;
+      text-align: left;
+      font-size: 12px;
+      margin-bottom: 12px;
+      &>*:not(:first-child){
+        margin-top: 8px;
+      }
+    }
+    .documents {
+      background: #fff;
+      border-radius: 6px;
+      padding: 12px;
+      text-align: left;
+      font-size: 12px;
+      &>*:not(:first-child){
+        margin-top: 8px;
+      }
+    }
+  }
+  :global {
+    // background: url(../../../public/bg_home.png) 50% 50% no-repeat;
+    background-color: #041747;
+    background-size: cover;
+    text-align: center;
+    padding: 0 33px 113px 33px;
+    height: 100%;
+    .titles {
+      padding-top: 52px;
+      display: inline-block;
+      .big_title {
+        font-size: 40px;
+        color: #ffffff;
+        letter-spacing: 5px;
+        text-align: center;
+        font-weight: bold;
+      }
+      .sub_title {
+        margin-top: 15px;
+        display: flex;
+        justify-content: space-between;
+        position: relative;
+        width: 100%;
+        opacity: 0.4;
+        font-family: PingFangSC-Regular;
+        font-size: 20px;
+        color: #ffffff;
+        letter-spacing: 0.7px;
+        &::after,
+        &::before {
+          height: 1px;
+          width: 37px;
+          position: absolute;
+          top: 50%;
+          content: "";
+          display: block;
+        }
+        &::after {
+          background-image: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0.3) 0%,
+            rgba(255, 255, 255, 1) 100%
+          );
+          left: -46px;
+        }
+        &::before {
+          background-image: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 1) 0%,
+            rgba(255, 255, 255, 0.3) 100%
+          );
+          right: -46px;
+        }
+      }
+    }
+    .player {
+      margin-top: 54px;
+      display: flex;
+      justify-content: space-between;
+      & > li {
+        position: relative;
+        cursor: pointer;
+        text-align: center;
+        width: 1%;
+        flex-grow: 1;
+        transition: all 0.3s;
+        &:not(:last-child) {
+          margin-right: 1%;
+        }
+
+        .not_open_card {
+          display: none;
+        }
+
+        &.toggle_stat {
+          .nor_card {
+            display: block;
+          }
+
+          &:hover > .nor_card {
+            display: none;
+          }
+          &:hover > .not_open_card {
+            display: block;
+          }
+
+          .tips {
+            text-align: center;
+            font-size: 16px;
+            color: rgba(255, 255, 255, 0.5);
+            margin-top: -5px;
+          }
+          .tips_img {
+            width: 60%;
+            margin-top: 30%;
+          }
+        }
+      }
+    }
+
+    .bg_1 {
+      background: rgba(69, 163, 109, 0.3);
+      border: none;
+
+      &:hover {
+        background: rgba(69, 163, 109, 0.5);
+        transform: translateY(-30px);
+        box-shadow: 0 0 0 1px #45a36d inset;
+        background-image: radial-gradient(
+          120px 60px ellipse at 50% 100%,
+          rgba(42, 186, 128, 0.8) 0%,
+          rgba(42, 186, 128, 0) 90%,
+          transparent 0
+        );
+        &::after {
+          content: "";
+          display: block;
+          bottom: -5px;
+          position: absolute;
+          width: 100%;
+          height: 10px;
+          background: url("@{assetUrl}/bg_light1.png") 50% 50% no-repeat;
+        }
+      }
+    }
+
+    .bg_2 {
+      background: rgba(38, 149, 140, 0.3);
+      border: none;
+      &:hover {
+        background: rgba(38, 149, 140, 0.5);
+        transform: translateY(-30px);
+        box-shadow: 0 0 0 1px #26958c inset;
+        background-image: radial-gradient(
+          120px 60px ellipse at 50% 100%,
+          rgba(0, 199, 207, 0.8) 0%,
+          rgba(0, 199, 207, 0) 90%,
+          transparent 0
+        );
+        &::after {
+          content: "";
+          display: block;
+          bottom: -5px;
+          position: absolute;
+          width: 100%;
+          height: 10px;
+          background: url("@{assetUrl}/bg_light2.png") 50% 50% no-repeat;
+        }
+      }
+    }
+
+    .bg_3 {
+      background: rgba(122, 89, 202, 0.3);
+      border: none;
+      &:hover {
+        background: rgba(122, 89, 202, 0.5);
+        transform: translateY(-30px);
+        box-shadow: 0 0 0 1px #a27cff inset;
+        background-image: radial-gradient(
+          120px 60px ellipse at 50% 100%,
+          rgba(181, 151, 255, 0.8) 0%,
+          rgba(181, 151, 255, 0) 90%,
+          transparent 0
+        );
+        &::after {
+          content: "";
+          display: block;
+          bottom: -5px;
+          position: absolute;
+          width: 100%;
+          height: 10px;
+          background: url("@{assetUrl}/bg_light3.png") 50% 50% no-repeat;
+        }
+      }
+    }
+
+    .bg_4 {
+      background: rgba(37, 90, 199, 0.3);
+      border: none;
+      &:hover {
+        background: rgba(37, 90, 199, 0.5);
+        transform: translateY(-30px);
+        box-shadow: 0 0 0 1px #6899ff inset;
+        background-image: radial-gradient(
+          120px 60px ellipse at 50% 100%,
+          rgba(73, 181, 255, 0.8) 0%,
+          rgba(73, 181, 255, 0) 90%,
+          transparent 0
+        );
+        &::after {
+          content: "";
+          display: block;
+          bottom: -5px;
+          position: absolute;
+          width: 100%;
+          height: 10px;
+          background: url("@{assetUrl}/bg_light4.png") 50% 50% no-repeat;
+        }
+      }
+    }
+
+    .bg_5 {
+      background: rgba(6, 159, 199, 0.3);
+      border: none;
+      &:hover {
+        background: rgba(6, 159, 199, 0.5);
+        transform: translateY(-30px);
+        box-shadow: 0 0 0 1px #41bad9 inset;
+        background-image: radial-gradient(
+          120px 60px ellipse at 50% 100%,
+          rgba(58, 223, 255, 0.8) 0%,
+          rgba(58, 223, 255, 0) 90%,
+          transparent 0
+        );
+        &::after {
+          content: "";
+          display: block;
+          bottom: -5px;
+          position: absolute;
+          width: 100%;
+          height: 10px;
+          background: url("@{assetUrl}/bg_light5.png") 50% 50% no-repeat;
+        }
+      }
+    }
+
+    .type_1 {
+      padding: 82px 0 75px 0;
+      .card_subtitle {
+        font-size: 14px;
+        color: #fff;
+        margin-top: 48px;
+        margin-bottom: 48px;
+      }
+    }
+
+    .type_2 {
+      padding: 42px 0 65px 0;
+    }
+
+    .card_title {
+      font-size: 20px;
+      color: #ffffff;
+      font-weight: bold;
+      position: absolute;
+      bottom: 7%;
+      width: 100%;
+      text-align: center;
+    }
+
+    .text {
+      text-align: left;
+      display: flex;
+      justify-content: center;
+    }
+
+    .type1_sub {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.7);
+    }
+    .type1_left {
+      font-size: 12px;
+      color: rgba(255, 255, 255, 0.7);
+      text-align: left;
+    }
+    .col_fff {
+      color: #ffffff;
+    }
+    .col_gray {
+      color: rgba(255, 255, 255, 0.7);
+    }
+
+    .fs12 {
+      font-size: 12px;
+    }
+
+    .fs14 {
+      font-size: 14px;
+    }
+
+    .mt4 {
+      margin-top: 4px;
+    }
+
+    .mt50 {
+      margin-top: 90px;
+    }
+
+    .linear {
+      width: 100%;
+      height: 1px;
+      background: linear-gradient(
+        90deg,
+        rgba(2, 199, 218, 0) 0%,
+        rgba(2, 199, 218, 0.5) 50%,
+        rgba(2, 199, 218, 0) 100%
+      );
+      transform-origin: center;
+      transform: rotate(-45deg);
+      margin-top: 60px;
+      margin-bottom: 15px;
+    }
+
+    .min_w {
+      min-width: 40%;
+    }
+  }
+}
+.add_common_report {
+  display: flex;
+  align-items: center;
+
+  >div {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    white-space: nowrap;
+  }
+}
+

src/pages/sial/view.jsx

@@ -0,0 +1,499 @@
+/*
+ * @Author: dayan_hjm 
+ * @Date: 2023-10-25 10:32:44 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2024-11-13 10:24:39
+ */
+/*
+ * @Author: dayan_hjm 
+ * @Date: 2022-10-27 11:40:02 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-10-25 10:32:07
+ */
+
+import React, { useState, useEffect, Component } from "react";
+import styles from "./style.less";
+import { useHistory, useLocation, withRouter } from "react-router-dom";
+import { observer, observable } from "mobx-react";
+import { message, Space, Form, Popconfirm, Modal, Tooltip, Icon, Button } from "antd";
+import mod from './mod';
+import { toJS } from "mobx";
+import BottomLineForSend from "./component/bottomLineForSend.jsx";
+import MoodSendView from "./component/moodSendView.jsx";
+import MoodProductionView from "./component/moodProductionView.jsx";
+
+import LeftMenoyView from "./component/leftMenoyView.jsx";
+import RightBottomView from "./component/rightBottomView.jsx";
+import OneQualified from "./component/oneQualified.jsx";
+import MapView from "./component/mapView.jsx";
+import $store from "@store/";
+import {
+  timeService,
+  numberService,
+  checkToken,
+  updateTimeService
+} from "./api";
+import { getThousandNum, deleteCacheAndChangeUrl, timestampToTime, setWaterMark } from "@utils/util";
+import {
+  fullscreen,
+} from "@ant-design/icons";
+import 'animate.css';
+@withRouter
+
+class Home extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+      updateTime: '',
+      changGif: false,
+      changNun: false,
+      plannedCompletionData: [
+      ],
+      plannedCompletionNum: 1,
+      manHourData: [
+      ],
+      manHourNum: 1,
+      leftName: deleteCacheAndChangeUrl("left", false, true),
+      rightName: deleteCacheAndChangeUrl("right", false, true),
+
+    };
+    this.timer = null //定时器，用于检测同步状态
+  }
+  componentWillMount() {
+    if (window.location.host.indexOf("localhost") == -1) {
+      this.getToken()
+    }
+  }
+
+  async getToken() {
+    if (!sessionStorage.getItem("tqcVToken")) {
+      this.props.history.replace("/home/index");
+    } else {
+      await checkToken(sessionStorage.getItem("tqcVToken")).then(({ data, resultCode }) => {
+        if (data?.userId) {
+          sessionStorage.setItem("tqcUserName", data?.userId);
+          $store.app.setMarkSrc(
+            setWaterMark({
+              toDataURL: true,
+              waterMarkText: [data?.userId || sessionStorage.getItem("tqcUserName"), timestampToTime()],
+            })
+          );
+        } else {
+          window.location = window.location.origin + '/transfer.html#/login';
+          // this.props.history.replace("/home/index");
+        }
+      });
+    }
+  }
+  componentDidMount() {
+    this.fontMsgChange();
+    this.getUrl();
+    this.getUrl2()
+    this.getUrl3();
+    setTimeout(() => {
+      this.videoStart();
+    }, 200)
+    setTimeout(() => {
+      //替换gif
+      this.setState({ changGif: true });
+    }, 2000);
+    setTimeout(() => {
+      this.setState({ changNun: true });
+    }, 4500)
+
+  }
+  videoStart() {
+    /*     Chrome 浏览器的视频自动播放策略
+        1.始终允许静音模式下自动播放
+        2.在以下的情况中，带声音播放会被允许：
+          ①用户已经与当前的域进行了交互（也就是click，tap事件）。
+          ②在桌面设备上，用户的媒体参与度指数阈值已经超过，这意味着用户之前播放过有声视频。
+          ③用户已经将网站添加到移动设备上的主屏幕或允在桌面上安装了PWA。
+        3.顶部帧可以将自动播放权限委派给其iframe，来允许自动播放声音
+        
+        媒体参与度（Media Engagement）是指用户与媒体内容进行互动的程度，可以通过多个指标来衡量。这些指标主要包括观看时间、观看率、转化率、交互行为等。
+        可以通过：chrome://media-engagement/ 查看
+     */
+    const video = document.querySelector('.video2');
+    console.log(video.play());
+
+    const model = document.querySelector('.model')
+    const btn = document.querySelector('button')
+    // 第一种方法 引导用户去与页面交互实现播放
+    async function play() {
+      try {
+        await video.play();
+        //使用await的原因是因为video.play()方法返回的是一个Promise,所以在这里我们可以对他进行一些处理
+        model.style.display = 'none';
+        btn.removeEventListener('click', play);
+        // 如果他自动播放了就隐藏按钮，消除点击事件
+      } catch (err) {
+        model.style.display = 'block';
+        btn.addEventListener('click', play);
+        // 如果Promise返回的是error就引导用户点击按钮，在调用play方法
+      }
+    }
+    play();
+
+    //第二种方法比较主流，类似的有网页版抖音以及B站
+    function play() {
+      video.muted = true;//设置视频为静音
+      video.play();//调用播放方法
+      const ctx = new AudioContext();
+      const canAutoPlay = ctx.state === 'running'; //通过这个可以判断出视频能不能够自动播放 如何可以它的值就是“running” 否则为"suspended"
+      // 如果是不能播放我们就执行下面的逻辑，其实就是类似于第一种方法，让用户与其交互
+      ctx.close();
+      if (canAutoPlay) {
+        video.muted = false;
+        model.style.display = 'none';
+        btn.removeEventListener('click', play);
+      }
+      else {
+        model.style.display = 'block';
+        btn.addEventListener('click', play);
+      }
+    }
+    play()
+
+  }
+
+  async getUrl() {
+    await timeService().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        let plannedCompletionData = [], manHourData = [];
+        data.map((x, i) => {
+          if (x.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),
+              })
+            }
+          }
+        });
+        this.setState({ plannedCompletionData, manHourData, plannedCompletionNum: 1, manHourNum: 1 });
+      }
+    });
+  }
+  async getUrl2() {
+    await numberService().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        let totalValue = 0, yearDecline = 0, yearSend = 0, productInventory = 0;
+        data.map((x, i) => {
+          if (x.indexName == '产值') {
+            totalValue = x.indexValue
+          } else if (x.indexName == '年度产量') {
+            yearDecline = x.indexValue
+          } else if (x.indexName == '产品库存') {
+            yearSend = x.indexValue
+          } else if (x.indexName == '年度发货量') {
+            productInventory = x.indexValue
+          }
+        });
+        this.store.saveState({ totalValue, yearDecline, yearSend, productInventory });
+        setTimeout(() => {
+          $(".shu1").numScroll();
+        }, 2500)
+      }
+    });
+  }
+  async getUrl3() {
+    await updateTimeService().then(({ data = [], resultCode }) => {
+      if (+resultCode === 0) {
+        this.setState({ updateTime: data?.[0]?.etlTime || '' })
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timer);
+    this.timer = null;
+  }
+
+  fontMsgChange(type) {
+    this.timer = setInterval(() => {
+      const { plannedCompletionData, plannedCompletionNum, manHourData, manHourNum } = this.state;
+
+      //产量计划完成率
+      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;
+
+      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 })
+    }, 4000)
+  }
+
+  render() {
+    const stores = this.store.state;
+    let { totalValue, yearDecline, yearSend, productInventory } = this.store.state;
+    let { changGif, updateTime, changNun, leftName, rightName } = this.state;
+    return (
+      <div className={"home_box"}>
+        {/* 水印 */}
+        {
+          window.urlConfig && window.urlConfig.SHOW_WATERMARK && <div className={"shuiYin"} style={{ backgroundImage: `url(${$store.app.markSrc})`, backgroundRepeat: 'repeat' }}></div>
+        }
+        {/* 右键切换大屏 */}
+        <Tooltip placement="bottom" title={rightName}>
+          <img src={require("@assets/imgs/iconJpg/rightJ.png").default} alt="" className={"rightJ_png"} onClick={() => {
+            deleteCacheAndChangeUrl("right", (url) => {
+              this.props.history.replace(url);
+            })
+          }} />
+        </Tooltip>
+        <Tooltip placement="bottom" title={leftName}>
+          <img src={require("@assets/imgs/iconJpg/rightJL.png").default} alt="" className={"rightJ_png rightJ_png_L"} onClick={() => {
+            deleteCacheAndChangeUrl("left", (url) => {
+              this.props.history.replace(url);
+            })
+          }} />
+        </Tooltip>
+
+        {/* 视频播放器 */}
+        <MapView></MapView>
+        <div className={"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>
+        <div className={[styles.home + " home cbHome"]}>
+          <div className="leftContent">
+            {/* <div class="topMsg2 animate__animated animate__fadeInDown animate__slower">
+              <div className="topMsg">
+                <Tooltip placement="bottom" title={<p className="titpeP">
+                  ● 本年度截止到最新结账月的主产品的产值合计，计算：
+                  <img src={require("@assets/imgs/dataVimg/gongshi.png").default} alt="" style={{ width: "1.5em", margin: " 0 0.5em 0 0em" }} />
+                  产品1月产量*产品1月平均销售单价+产品2月产量* 产品2月平均销售单价+...
+                </p>}>
+                  <p className="topMsg_title">总产值</p>
+                </Tooltip>
+                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
+                  {
+                    !changNun && <span className="topMsg_number" class="shu1">{totalValue}</span>
+                  }
+                  {
+                    changNun && <span className="topMsg_number">{getThousandNum(totalValue)}</span>
+                  }
+                  <span className="topMsg_number_2">万元</span>
+                </div>
+              </div>
+            </div> */}
+            <div class="topMsg_33 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
+              <div className="topMsg_3">
+                <Tooltip placement="bottom" title={' ● 本年度截止到更新日期累计产量的计划完成率。'}>
+                  <p className="topMsg_title">产量计划完成率</p>
+                </Tooltip>
+                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="plannedCompletionBox_yanting">
+                  <div className="topMsg_box">
+                    <span className="topMsg_number" class="shu1"></span><span className="topMsg_number_2"></span>
+                    <p className="topMsg_number_p"></p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="topMsg2 animate__animated animate__fadeInDown animate__slower" style={{ marginTop: '6%', marginBottom: '6%' }}>
+              <div className="topMsgCommond bigDivPd">
+                <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>
+              </div>
+            </div>
+
+            {/* <div class="center_box2 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
+              <div className="center_box">
+                <Tooltip placement="bottom" title={<p className="titpeP">
+                  <p>● 截止更新日期的主产品库存金额，计算：</p>
+                  <img src={require("@assets/imgs/dataVimg/gongshi2.png").default} alt="" style={{ width: "1.3em", margin: " -0.3em 0.5em 0 0em" }} />
+                  物料1库存数*物料1移动平均价+物料2*物料2移动平均价+…
+                </p>}>
+                  <p className="topMsg_title" style={{ position: "relative", zIndex: 999999 }}>产品库存金额</p>
+                </Tooltip>
+                <div className="topMsg_content">
+                  <LeftMenoyView></LeftMenoyView>
+                </div>
+              </div>
+            </div> */}
+
+            <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower animate__delay-2s">
+              <div className="bottomContent bigDivPd">
+                <Tooltip placement="bottom" title={' ● 近六个月的产量和发货量的对比数据（含外加工），当月的数据计算至更新日期。'}>
+                  <p className="topMsg_title">月度产量</p>
+                </Tooltip>
+                <div className="topMsg_content">
+                  <MoodProductionView></MoodProductionView>
+                </div>
+              </div>
+            </div>
+
+
+
+
+          </div>
+
+          <div className="centerCon">
+            <div class="topMsg3 animate__animated animate__fadeInUp animate__slower">
+              <div className="topMsg">
+                <div className="topMsg2">
+                  <div className="topMsg_content">
+                    <div className="center_li">
+                      <div className="right_li">
+                        {
+                          !changNun && <span className="topMsg_number" class="shu1">{yearDecline}</span>
+                        }
+                        {
+                          changNun && <span className="topMsg_number">{getThousandNum(yearDecline)}</span>
+                        }
+                        <p className="topMsg_line"></p>
+                        <Tooltip placement="bottom" title={' ● 本年度截止更新日期的主产品（含外加工）的产量合计'}>
+                          <span className="topMsg_tip">年度产量/吨</span>
+                        </Tooltip>
+                      </div>
+                    </div>
+                    <div className="center_li">
+                      <div className="right_li">
+                        {
+                          !changNun && <span className="topMsg_number" class="shu1">{productInventory}</span>
+                        }
+                        {
+                          changNun && <span className="topMsg_number">{getThousandNum(productInventory)}</span>
+                        }
+                        <p className="topMsg_line"></p>
+                        <Tooltip placement="bottom" title={' ● 本年度截止更新日期的主产品（含外加工）的发货量合计。'}>
+                          <span className="topMsg_tip">年度发货量/吨</span>
+                        </Tooltip>
+                      </div>
+                    </div>
+                    <div className="center_li">
+                      {
+                        !changNun && <span className="topMsg_number" class="shu1">{yearSend}</span>
+                      }
+                      {
+                        changNun && <span className="topMsg_number">{getThousandNum(yearSend)}</span>
+                      }
+                      <p className="topMsg_line"></p>
+                      <Tooltip placement="bottom" title={' ● 截止更新日期的主产品库存数量。'}>
+                        <span className="topMsg_tip">产品库存/吨</span>
+                      </Tooltip>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="bottomContent3 animate__animated animate__fadeInUp animate__slower animate__delay-1s">
+              <div className="bottomContent">
+                <Tooltip placement="bottom" title={' ● 以更新日期为节点近30天的产量数据（含外加工）。'}>
+                  <p className="topMsg_title">近30天产量</p>
+                </Tooltip>
+                <div className="topMsg_content">
+                  <BottomLineForSend></BottomLineForSend>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+          {/* 右侧信息栏 */}
+          <div className="leftContent">
+
+            <div class="topMsg_33 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
+              <div className="topMsg_3">
+                <Tooltip placement="bottom" title={' ● 本年度截止到更新日期累计产量的计划完成率。'}>
+                  <p className="topMsg_title">产量计划完成率</p>
+                </Tooltip>
+                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="plannedCompletionBox_suzhou">
+                  <div className="topMsg_box">
+                    <span className="topMsg_number" class="shu1"></span><span className="topMsg_number_2"></span>
+                    <p className="topMsg_number_p"></p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="topMsg_22 animate__animated animate__fadeInDown animate__slower">
+              <div className="topMsg_2">
+                <Tooltip placement="bottom" title={' ● 近六个月的主产品一次合格率，当月的数据计算至更新日期。'}>
+                  <p className="topMsg_title">一次合格率</p>
+                </Tooltip>
+
+                <div className="topMsg_content">
+                  <OneQualified></OneQualified>
+                </div>
+              </div>
+            </div>
+
+
+
+            {/* <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower  animate__delay-1s">
+              <div className="bottomContent bigDivPd">
+                <Tooltip placement="bottom" title={' ● 近三年的碳排放总量、碳排放强度数据'}>
+                  <p className="topMsg_title">碳排放</p>
+                </Tooltip>
+                <div className="topMsg_content">
+                  <RightBottomView></RightBottomView>
+                </div>
+              </div>
+            </div> */}
+
+            <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower animate__delay-2s">
+              <div className="bottomContent bigDivPd">
+                <Tooltip placement="bottom" title={' ● 近六个月的产量和发货量的对比数据（含外加工），当月的数据计算至更新日期。'}>
+                  <p className="topMsg_title">月度发货量</p>
+                </Tooltip>
+                <div className="topMsg_content">
+                  <MoodSendView></MoodSendView>
+                </div>
+              </div>
+            </div>
+
+          </div>
+          <div className="bottom_box">
+            <p style={{ color: "#6a818d", lineHeight: '2px' }}>
+              更新日期 : {updateTime ? updateTime.split(" ")[0] : updateTime}
+            </p>
+          </div>
+
+        </div>
+      </div>
+    )
+  }
+}
+export default Home;

src/pages/tqcDataVHome/api.js

@@ -44,10 +44,10 @@ export function dataengineCenterOneservice(params) {
 /**库存金额 */
 export function momeyService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1356776817075459329",
+    url: "/dataengine-center-oneservice/list/1431063632208685082",
     method: "POST",
     data: {
-      "apiId": "1356776817075459329",
+      "apiId": "1431063632208685082",
       "appKey": "200000134",
       "env": "PROD",
       "reqProtocol": 1,
@@ -61,10 +61,10 @@ export function momeyService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: 'd58de970856e583f126d186662251024',
+      sign: '6203b66920c569f8228c3cb921f3ffb8',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1356776817075459329',
+      apiId: '1431063632208685082',
       appKey: '200000134',
       execType: '3',
       env: 'PROD',
@@ -76,10 +76,10 @@ export function momeyService(params) {
 /**百万工时损工率   产量计划完成率*/
 export function timeService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1356250124518724729",
+    url: "/dataengine-center-oneservice/list/1431063077222574093",
     method: "POST",
     data: {
-      "apiId": "1356250124518724729",
+      "apiId": "1431063077222574093",
       "appKey": "200000134",
       "env": "PROD",
       "reqProtocol": 1,
@@ -93,10 +93,10 @@ export function timeService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: '46847fe90889330f13cdc3318d848d45',
+      sign: '9ab2d57a785c513f84cd0c5fb4fad7da',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1356250124518724729',
+      apiId: '1431063077222574093',
       appKey: '200000134',
       execType: '3',
       env: 'PROD',
@@ -107,10 +107,10 @@ export function timeService(params) {
 /**产值+发货量+产量+库存*/
 export function numberService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1356243326548087867",
+    url: "/dataengine-center-oneservice/list/1431049820141217793",
     method: "POST",
     data: {
-      "apiId": "1356243326548087867",
+      "apiId": "1431049820141217793",
       "appKey": "200000134",
       "env": "PROD",
       "reqProtocol": 1,
@@ -123,10 +123,10 @@ export function numberService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: '2f079b53e1e63b753bb6f9807f6c6818',
+      sign: '915848290d3e70a7b8e7fbe911e12725',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1356243326548087867',
+      apiId: '1431049820141217793',
       appKey: '200000134',
       execType: '3',
       env: 'PROD',
@@ -138,10 +138,10 @@ export function numberService(params) {
 /**近30天产量*/
 export function mondService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1356244872119751767",
+    url: "/dataengine-center-oneservice/list/1431065871110334506",
     method: "POST",
     data: {
-      "apiId": "1356244872119751767",
+      "apiId": "1431065871110334506",
       "appKey": "200000134",
       "env": "PROD",
       "reqProtocol": 1,
@@ -156,10 +156,10 @@ export function mondService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: 'ef3ecc442896d925cc02d36f1107d9e3',
+      sign: 'f84acfc47847e71c67be5569b9289291',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1356244872119751767',
+      apiId: '1431065871110334506',
       appKey: '200000134',
       execType: '3',
       env: 'PROD',
@@ -170,10 +170,10 @@ export function mondService(params) {
 /**月度产量/发货量+一次合格率*/
 export function twoService(params) {
   return request({
-    url: "/dataengine-center-oneservice/list/1356411403496625359",
+    url: "/dataengine-center-oneservice/list/1431065780441016356",
     method: "POST",
     data: {
-      "apiId": "1356411403496625359",
+      "apiId": "1431065780441016356",
       "appKey": "200000134",
       "env": "PROD",
       "reqProtocol": 1,
@@ -189,10 +189,10 @@ export function twoService(params) {
       "useResultCache": false
     },
     headers: {
-      sign: '9c472223a9acbdb9f16bebb7002e0c40',
+      sign: '178ae23014a9fecad15ffa9a88ed84f1',
       account: 'yunxi_fuxue',
       'Cache-Control': 'no-cache',
-      apiId: '1356411403496625359',
+      apiId: '1431065780441016356',
       appKey: '200000134',
       execType: '3',
       env: 'PROD',

src/pages/tqcDataVHome/api3.js

@@ -0,0 +1,232 @@
+import request from "@utils/request";
+
+/**登录*/
+export function checkToken(params) {
+  return request({
+    url: `/api/yonghong/checkToken?token=${params}`,
+    method: "GEt",
+  });
+}
+
+/**碳排放 */
+export function dataengineCenterOneservice(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356250396177503367",
+    method: "POST",
+    data: {
+      "apiId": "1356250396177503367",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "byear",
+        "missionsIntensity",
+        "missionsTotal",
+        "biz_id"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '19c3cdb58b80e44f2490b8eba3b7f938',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356250396177503367',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**库存金额 */
+export function momeyService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356776817075459329",
+    method: "POST",
+    data: {
+      "apiId": "1356776817075459329",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "prodCatgory",
+        "indexValue"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'd58de970856e583f126d186662251024',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356776817075459329',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**百万工时损工率   产量计划完成率*/
+export function timeService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356250124518724729",
+    method: "POST",
+    data: {
+      "apiId": "1356250124518724729",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "factoryName",
+        "indexValue"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '46847fe90889330f13cdc3318d848d45',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356250124518724729',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**产值+发货量+产量+库存*/
+export function numberService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356243326548087867",
+    method: "POST",
+    data: {
+      "apiId": "1356243326548087867",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "indexValue"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '2f079b53e1e63b753bb6f9807f6c6818',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356243326548087867',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+
+/**近30天产量*/
+export function mondService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356244872119751767",
+    method: "POST",
+    data: {
+      "apiId": "1356244872119751767",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "indexName",
+        "indexDate",
+        "indexValue",
+        "factoryProdcution"
+      ],
+      "pageNum": 1,
+      "pageSize": 30,
+      "useResultCache": false
+    },
+    headers: {
+      sign: 'ef3ecc442896d925cc02d36f1107d9e3',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356244872119751767',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**月度产量/发货量+一次合格率*/
+export function twoService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356411403496625359",
+    method: "POST",
+    data: {
+      "apiId": "1356411403496625359",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "bMonth",
+        "proQty",
+        "deliveryQty",
+        "qcRate",
+        "targeRate",
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '9c472223a9acbdb9f16bebb7002e0c40',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356411403496625359',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+/**更新日期*/
+export function updateTimeService(params) {
+  return request({
+    url: "/dataengine-center-oneservice/list/1356778817327502618",
+    method: "POST",
+    data: {
+      "apiId": "1356778817327502618",
+      "appKey": "200000134",
+      "env": "PROD",
+      "reqProtocol": 1,
+      "returnFields": [
+        "etlTime"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "useResultCache": false
+    },
+    headers: {
+      sign: '4365b6564b25c852fcf0228188f48114',
+      account: 'yunxi_fuxue',
+      'Cache-Control': 'no-cache',
+      apiId: '1356778817327502618',
+      appKey: '200000134',
+      execType: '3',
+      env: 'PROD',
+    }
+  });
+}
+
+

src/pages/tqcDataVHome/view.jsx

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

src/router/router.js

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

src/utils/util.js

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