feat: 产供销价值链-基础页面提交

src/index.js

@@ -78,9 +78,9 @@ if (ticket && ssoEmpId) {
 // reportWebVitals();
 
 if (process.env.NODE_ENV === "production") {
-  document.title = "运营数据中心";
+  document.title = "天齐锂业·数据大屏";
 } else {
-  document.title = "(测试)运营数据中心";
+  document.title = "(测试)天齐锂业·数据大屏";
 }
 
 // 获取socket id , 建立socket连接

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

@@ -576,50 +576,8 @@ export default observer(function (props) {
     console.log($store.app.avator);
   }, []);
 
-  //表单配置
-  const formItemLayout = {
-    labelCol: { span: 4 },
-    wrapperCol: { span: 20 },
-  };
-  /**点击联系我们 */
-  const handleContact = () => {
-    setShowContactModalVisible(true);
-  };
-  /**点击转换主题 */
-  const changeThemesStyle = () => {
-    const name = Cookie.get("themesName");
-    Cookie.set("themesName", name == "chaBaiDao" ? "yaLeJu" : "chaBaiDao");
-    window.location.reload();
-  };
 
 
-  /**提交联系我们 */
-  const handleContactOk = () => {
-    //判断是否是固定的负责人
-    form.validateFields().then(() => {
-      // let isFixDirector =
-      //   probType === 0 ? copyPeople : directorInfo.itManagerAccountId;
-      // let copyAggregate = [...new Set([copyPeople, isFixDirector])];
-      form.setFieldsValue({
-        problemChargePersonId: "1500661792542593026",
-        problemSendPersonId: ["1500661792542593026"],
-      });
-      const config = form.getFieldValue();
-      //固定accountId为1500661792542593026
-      const accountId = sessionStorage.getItem("accountId");
-      const params = Object.assign({ ...config }, { accountId });
-      feedBack(params).then(({ data, resultCode }) => {
-        if (+resultCode === 0) {
-          message.success("反馈成功");
-        }
-      });
-      form.resetFields();
-      setIptValue(0);
-      setShowContactModalVisible(false);
-      getUnReadNum();
-    });
-  };
-
   //获取 未读消息的数量
   const getUnReadNum = () => {
     let accountId = sessionStorage.getItem("accountId");
@@ -630,83 +588,11 @@ export default observer(function (props) {
     //   }
     // });
   };
-
-  /**控制输入字数 */
-  let timer = null;
-  const handleInput = (e) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      setIptValue(e.target.value.length);
-    }, 500);
-  };
-
-  //处理 消息 详情
-  const goHandleMessage = () => {
-    const { messageDetailType, messageContentObjectId, messageType } = detailInfo || {};
-    if (messageType == 'System_bulletin' && (messageDetailType == 'newResourceMsg' || messageDetailType == 'fineReportChange' || messageDetailType == 'fineDataResourceChange') && !hasPermission) {
-      message.warning("该报表无权限!");
-      return;
-    }
-    switch (messageDetailType) {
-      case "fineDataResourceChange":
-        //根据id 找到 该元数据
-        getMenuDesc({ resourceId: messageContentObjectId }).then(
-          ({ data, resultCode }) => {
-            if (+resultCode === 0) {
-              $store.app.setMetaData({
-                data,
-                visible: true,
-              });
-            }
-          }
-        );
-        break;
-      case "fineReportChange":
-        getReportInfo({ resourceId: messageContentObjectId }).then(
-          ({ data, resultCode }) => {
-            if (+resultCode === 0) {
-              switchPage({
-                // pageId: relationship[key].pageId,
-                modelName: data.resourceName,
-                pageName: data.resourceName,
-                pageUrl: data.resourceUrl,
-                resourceId: data.resourceId,
-                visitId: sessionStorage.getItem("unionId"),
-              });
-              let dataOpt = {
-                id: data.resourceId,
-                name: data.resourceName,
-                openType: "self",
-                path: data.resourceUrl,
-                type: data.resourceType,
-              };
-              dealDiffSheetType(data).then((response) => {
-                $store.app.setNavList({ ...dataOpt });
-                $store.app.setCurNav(dataOpt.path);
-                if (response.type === "sys") {
-                  history.push(response.link);
-                } else {
-                  history.push(`/home/outer/${response.activeItem.resourceId}`);
-                }
-              });
-            }
-          }
-        );
-        break;
-      default:
-        setIsShowDetail(false);
-    }
-
-  };
-
-  const userAvator = sessionStorage.getItem("avator");
-  const {
-    createTime,
-    messageContent,
-    messageDetailType,
-    messageTypeValue,
-    messageSourceName,
-  } = detailMessage || {}; /**解构 当前点击的详情数据 */
+  const name_arr = {
+    "#/home/gvc":"产供销价值链",
+    "#/home/operation":"运营数据中心",
+  }
+   window.lo
   return (
     <div class="top2 animate__animated animate__fadeInDown animate__delay-1s animate__slower">
       <div className={$store.app.styleCommon.theme == 'chaBaiDao' ? [styles.top + ' top'] : styles.top}>
@@ -716,7 +602,7 @@ export default observer(function (props) {
             width="17"
           />
           <span></span>
-          <h1>运营数据中心</h1>
+          <h1>{name_arr[window.location.hash] || ''}</h1>
         </div>
         {/* {history.location.pathname === "/home/index" && (
           <>

src/pages/frame/view.jsx

@@ -458,13 +458,7 @@ export default observer(function Frame(props) {
       {/* <div className="nowifi-tip">当前网络状态不佳</div> */}
 
       {/* 正文 */}
-      <div style={history.location.pathname === "/home/index" || history.location.pathname === '/home/operation'? { display: "flex", height: '100%' } : (history.location.pathname.indexOf("/home/outer") > -1 ?{
-        overflow: "hidden",
-        display: "flex",
-        background: 'rgb(255, 255, 255)',
-        height: "100%",
-      } : {display: "flex", height: '100%'})}>
-
+      <div style={{ display: "flex", height: '100%' }}>
         {$store.sysMenu.submenuList.length > 0 && !collapsed && (
           <div
             className="movebar"
@@ -477,18 +471,11 @@ export default observer(function Frame(props) {
         {isMove && <div className="markmore"></div>}
 
         <div
-          className={`${history.location.pathname !== "/home/index" && history.location.pathname !== '/home/operation'&&
-              $store.app.navList.length > 0
-              ? (history.location.pathname.indexOf("/home/outer") > -1 ? "body_box outer_body_box" : 'body_box') : "body_box homePage"
-            }`}
+          className={"body_box homePage"}
         >
           <Navigator
             style={{
-              display:
-                history.location.pathname !== "/home/index" && history.location.pathname !== '/home/operation'&&
-                  $store.app.navList.length > 0
-                  ? "flex"
-                  : "none",
+              display:"none",
             }}
           />
           <TipMsg onRef={onRef2}></TipMsg>

src/pages/gvc/api.js

@@ -0,0 +1,231 @@
+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"
+      ],
+      "pageNum": 1,
+      "pageSize": 10,
+      "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/gvc/component/rightBottomView.jsx

@@ -0,0 +1,309 @@
+/*
+ * @Author: dayan_hjm 碳排放
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-11-08 16:05:47
+ */
+
+
+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=[];
+        data.map((x,i)=>{
+          year.unshift(x.byear)
+          missionsIntensity_arr.unshift(x.missionsIntensity)
+          missionsTotal_arr.unshift(x.missionsTotal)
+        });
+        const max_1 = getArrMax(missionsIntensity_arr);
+        const max_2 = getArrMax(missionsTotal_arr);
+        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: '3%',
+          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/gvc/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/gvc/style.less

@@ -0,0 +1,100 @@
+@import url("../../themes/themes.less");
+
+@assetUrl: "../../assets/imgs/home";
+
+.home_box {
+  background: url(../../assets/imgs/gvc/homeBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40;
+
+  :global {
+    .all_box {
+      width: 100%;
+      height: 100%;
+
+      .gvcHome {
+        height: 100%;
+
+        .leftContent {
+          width: 8%;
+          /* padding: 0 1em; */
+          height: 70%;
+          margin-top: 5%;
+          margin-left: 1%;
+
+          >ul {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            height: 100%;
+            flex-wrap: wrap;
+
+            >li {
+              height: 20%;
+              width: 100%;
+              color: #fff;
+              display: block;
+
+              .top_div {
+                background: none;
+                width: 100%;
+                height: 60%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                >div {
+                  width: 60%;
+                  position: relative;
+                  display: block;
+
+                  .img1 {
+                    width: 100%;
+                  }
+
+                  >span {
+                    font-size: 0.9em;
+                    position: absolute;
+                    width: 100%;
+                    bottom: 15%;
+                    left: 63%;
+                    transform: skew(4deg, 334deg);
+                    font-weight: normal;
+                    color: #ededed;
+
+                  }
+
+                  .img2 {
+                    width: 37%;
+                    position: absolute;
+                    left: 32%;
+                    top: 24%;
+                  }
+                }
+              }
+
+              .text {
+                width: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin-top: 0.5em;
+                font-weight: normal;
+                font-size: 0.8em;
+                color: #CDF1FF;
+                padding: 0.8em 0.9em 0.2em;
+                background: linear-gradient(0deg, #ffffff26 0%, #ffffff00 100%);
+                border-radius: 0.2em;
+
+                .topMsg_number {
+                  color: #69FFDE;
+                  font-size: 1.2em;
+                  margin-right: 0.2em;
+                  margin-top: 0.2em;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/pages/gvc/view.jsx

@@ -0,0 +1,308 @@
+/*
+ * @Author: dayan_hjm  产供销价值链
+ * @Date: 2023-11-10 10:19:34 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2023-11-10 16:43:06
+ */
+
+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 RightBottomView from "./component/rightBottomView.jsx";
+import {
+  timeService,
+  numberService,
+  checkToken,
+  updateTimeService
+} from "./api";
+
+import 'animate.css';
+@withRouter
+
+class Gvc extends Component {
+  // 构造函数，组件的实例创建时，最先执行
+  constructor(props, context) {
+    super(props, context);
+    this.store = mod;
+    this.state = {
+      LeftHtml: [
+        {
+          txt_name: '碳酸锂',
+          num1: 1222,
+          num2: 1000,
+        },
+        {
+          txt_name: '氢氧化钠',
+          num1: 2525,
+          num2: 25,
+        },
+        {
+          txt_name: '氯化锂',
+          num1: 3654,
+          num2: 7541,
+        },
+        {
+          txt_name: '金属锂',
+          num1: 45,
+          num2: 698,
+        },
+      ],
+      updateTime: '',
+      changGif: false,
+      plannedCompletionData: [
+      ],
+      plannedCompletionNum: 1,
+      manHourData: [
+      ],
+      manHourNum: 1,
+    };
+    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) {
+          // this.props.history.push('/')
+        } else {
+          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)
+  }
+  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.indexName == '产量计划完成率') {
+            plannedCompletionData.push({
+              name: x.factoryName,
+              value: x.indexValue * 100,
+            })
+          } else {
+            manHourData.push({
+              name: x.factoryName,
+              value: x.indexValue * 100,
+            })
+          }
+        });
+        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 || '' })
+      }
+    });
+  }
+
+  componentDidCatch() {
+    clearInterval(this.timer);
+    this.timer = null;
+  }
+
+  fontMsgChange() {
+    this.timer = setInterval(() => {
+      const { plannedCompletionData, plannedCompletionNum, manHourData, manHourNum } = this.state;
+
+      //产量计划完成率
+      var p1 = document.getElementById('plannedCompletionBox');
+      const datas_ = plannedCompletionData[plannedCompletionNum - 1];
+      var 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;
+
+      //百万工时损工率
+      var p2 = document.getElementById('manHourBox');
+      const datas_2 = manHourData[manHourNum - 1];
+      var res2 = '<div class="topMsg_box animate__animated animate__zoomIn"><span class="topMsg_number shu1">' + datas_2?.value.toFixed(2) + '</span><span class="topMsg_number_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)
+  }
+
+  getLeftHtml(x, i) {
+    return (
+      <li>
+        <div className={"top_div"}>
+          <div class="animate__animated animate__pulse animate__slower animate__infinite">
+            {i === 0 && <img className={"img1"} src={require("@assets/imgs/gvc/qiu1.png").default} alt="" />}
+            {i === 1 && <img className={"img1"} src={require("@assets/imgs/gvc/qiu2.png").default} alt="" />}
+            {i === 2 && <img className={"img1"} src={require("@assets/imgs/gvc/qiu3.png").default} alt="" />}
+            {i === 3 && <img className={"img1"} src={require("@assets/imgs/gvc/qiu4.png").default} alt="" />}
+            {i === 0 && <img src={require("@assets/imgs/gvc/qiuH1.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
+            {i === 1 && <img src={require("@assets/imgs/gvc/qiuH2.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
+            {i === 2 && <img src={require("@assets/imgs/gvc/qiuH3.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
+            {i === 3 && <img src={require("@assets/imgs/gvc/qiuH4.png").default} alt="" class="img2 animate__animated animate__heartBeat animate__slower animate__infinite" />}
+            <span>{x.txt_name}</span>
+          </div>
+        </div>
+        <div className="text">
+          <div>
+            <p>累计产量</p>
+            <span class="topMsg_number shu1">{x.num1}</span><span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
+          </div>
+          <div>
+            <p>产品库存</p>
+            <span class="topMsg_number shu1">{x.num2}</span><span class="topMsg_number_2" style={{ fontSize: "0.75em", color: "#fff" }}>吨</span>
+          </div>
+        </div>
+      </li>
+
+    )
+  }
+
+  render() {
+    const stores = this.store.state;
+    let { totalValue, yearDecline, yearSend, productInventory } = this.store.state;
+    let { LeftHtml, } = this.state;
+    return (
+      <div className={[styles.home_box + ' home_box']}>
+        <div className={"all_box"}>
+          <div className={"video_box"}>
+            <video src={require("@assets/imgs/dataVImg/homeVideo2.mp4").default} autoplay="autoplay" loop="loop" class="video2 center_box2 animate__animated animate__fadeIn animate__delay-2s"></video>
+          </div>
+          <div className={"gvcHome home cbHome"}>
+            <div className="leftContent">
+              <ul>
+                {
+                  LeftHtml.map((x, i) => {
+                    return this.getLeftHtml(x, i)
+                  })
+                }
+              </ul>
+            </div>
+
+            <div className="centerCon">
+            </div>
+
+            {/* 右侧信息栏 */}
+            <div className="rightContent">
+
+              <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>
+            <div className="bottom_box">
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+export default Gvc;

src/pages/jurisDiction/view.jsx

@@ -32,7 +32,7 @@ class JrisDiction extends Component {
   componentWillMount() { 
     let searchInstance = queryToObj(); // url查询参数对象化
     if(window.location.host.indexOf("localhost") > -1){
-      this.props.history.replace("/home/operation");
+      this.props.history.replace(searchInstance?.type == 1 ? "/home/operation" : "/home/gvc");
     }else if(searchInstance?.token){
       this.getUrl(searchInstance?.token);
     }else{
@@ -47,7 +47,7 @@ class JrisDiction extends Component {
     await checkToken(token).then(({ data, resultCode }) => {
       sessionStorage.setItem("tqcVToken",token)
       if (data?.userId) {
-        this.props.history.replace("/home/operation");
+        this.props.history.replace(searchInstance?.type == 1 ? "/home/operation" : "/home/gvc");
         // this.props.history.push('/')
       } else {
         this.setState({ showMsg: true })

src/pages/tqcDataVHome/component/oneQualified.jsx

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 一次合格率
  * @Date: 2023-10-23 09:32:12 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2023-11-08 16:45:11
+ * @Last Modified time: 2023-11-08 17:53:47
  */
 
 
@@ -75,7 +75,7 @@ class BottomLineForSend extends Component {
         legend: {
           data: ['目标一次及格率', '实际一次及格率'],
           right: 'center',
-          padding: [0, 0, 0, 5],
+          padding: [10, 0, 0, 5],
           top: 0,
           textStyle: {
             color: "#fff",

src/router/router.js

@@ -14,6 +14,7 @@ import Login from "@pages/login/view.jsx";
 import NotFound from "@pages/notFound/view.jsx";
 import Home from '@pages/home/view.jsx';
 import HomeForchaBaiDao from '@pages/tqcDataVHome/view.jsx';
+import GVC from '@pages/gvc/view.jsx';
 import JurisDiction from '@pages/jurisDiction/view.jsx';
 import Loading from "@components/Loading/view.jsx";
 import $store from "@store/";
@@ -61,6 +62,11 @@ const routes = [
         // component: $store.app.styleCommon.theme == 'chaBaiDao' ? HomeForchaBaiDao : Home,
         // navigator: true,
       },
+      {
+        name: "产供销价值链",
+        path: "/home/gvc",
+        component: GVC,
+      },
     ],
   },
   {