feat: FIK大屏

config/webpack.dev.js

@@ -136,14 +136,14 @@ module.exports = merge(common, {
         // target: "http://47.96.100.195:9081"
         // target: "http://dataportal-test.agile.com.cn:8081"
         // target: "http://10.8.8.173:9081",
-        target:"http://dms.dataportal.tianqilithium.com:9000",
+        target:"https://dms.dataportal.tianqilithium.com:9000",
         changeOrigin:true,
 
       },
       "/dataengine-center-oneservice": {
         // target: "http://10.8.8.185:31233",
         // target: "http://10.8.8.173:9081",
-        target:"http://dms.dataportal.tianqilithium.com:9000",
+        target:"https://dms.dataportal.tianqilithium.com:9000",
         changeOrigin:true,
       },
       "/mock":{

src/assets/css/styleTemplate.less

@@ -2,7 +2,7 @@
  * @Author: dayan_hjm 茶百道主题样式
  * @Date: 2022-10-27 10:56:37 
  * @Last Modified by: dayan_hjm
- * @Last Modified time: 2024-07-21 17:58:15
+ * @Last Modified time: 2024-10-14 17:23:10
  */
 
 @import url("../../themes/themes.less");
@@ -13,6 +13,16 @@
     font-family: 'DingTalkJinBuTi', "DingTalkSans";
   }
 
+  #echarts7 {
+    min-width: 600px;
+    width: 95%;
+    height: 90%;
+    >div{
+      text-align: left;
+    }
+  }
+
+
   .hidetip {
     display: none;
   }
@@ -576,6 +586,13 @@
           height: 40%;
         }
 
+        #onesendbox {
+          min-width: 300px;
+          width: 90%;
+          height: 100%;
+        }
+
+
         .bottomContent {
           width: 100%;
           height: 100%;

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

@@ -3,7 +3,7 @@
  * @Date: 2022-11-02 17:24:37 
  * @Last Modified by: dayan_hjm
  * @Last Modified time: 2023-09-06 17:33:24
- * @Last Modified time: 2023-12-19 14:38:50
+ * @Last Modified time: 2024-10-14 14:49:19
  */
 
 import React, { useEffect, useState, useRef, Component } from "react";
@@ -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 ? "产供销价值链" : "运营数据中心")
+      this.props.changeName(route["pathname"].indexOf("gvc") > -1 ? "产供销价值链" : (route["pathname"].indexOf("tlk") > -1 ? "TLK运营数据中心 / TLK Plant Dashboard" : "运营数据中心"))
       this.setState({ showTips: false });
       let activeTree = utils.findNodeTree([...$store.sysMenu.norList, ...$store.sysMenu.menuList], route.pathname, "resourceUrl");
       //调取当前栏目的通知 

src/pages/frame/view.jsx

@@ -150,6 +150,7 @@ export default observer(function Frame(props) {
   const name_arr = {
     "#/home/gvc": "产供销价值链",
     "#/home/operation": "运营数据中心",
+    "#/home/tlk": "TLK运营数据中心 / TLK Plant Dashboard",
   }
   const [titleName, setTitleName] = useState(name_arr[window.location.hash]);
 

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(searchInstance?.type == 1 ? "/home/operation" : "/home/gvc");
+      this.props.history.replace(searchInstance?.type == 1 ? "/home/operation" : (searchInstance?.type == 3 ? "/home/tlk" : "/home/gvc"));
     }else 
     if(searchInstance?.token){
       this.getUrl(searchInstance?.token);
@@ -50,7 +50,7 @@ class JrisDiction extends Component {
       sessionStorage.setItem("tqcVToken",token)
       if (data?.userId) {
         let searchInstance = queryToObj(); // url查询参数对象化
-        this.props.history.replace(searchInstance?.type == 1 ? "/home/operation" : "/home/gvc");
+        this.props.history.replace(searchInstance?.type == 1 ? "/home/operation" : (searchInstance?.type == 3 ? "/home/tlk" : "/home/gvc"));
         // this.props.history.push('/')
       } else {
         debugger

src/pages/tlk/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/tlk/component/bottomLineForSend.jsx

@@ -0,0 +1,245 @@
+/*
+ * @Author: dayan_hjm 近30天产量
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2024-10-14 17:29:25
+ */
+
+
+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}吨`,
+        grid: {
+          left: '5%',
+          top: '15%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true
+        },
+        legend: {
+          data: ['日产量(Daily Net Prodution)', '日产量趋势( Daily Net Production Trends)', "平均产量(Average Net Production)"],
+          fontFamily: 'DingTalkJinBuTi',
+          padding: [5, 0, 40, 0],
+          textStyle: {
+            color: "#CDF1FF",
+            fontSize: 10
+          },
+          itemWidth: 8,
+          itemHeight: 8,
+        },
+
+        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: '日产量(Daily Net Prodution)',
+            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: 'rgba(0, 255, 182, 0.5)'
+                }, {
+                  offset: 1,
+                  color: 'rgba(0, 255, 182, 0)'
+                }], false),
+                shadowColor: 'rgba(0, 0, 0, 0.1)',
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(0, 255, 182, 0.3)',
+                borderWidth: 12
+              }
+            },
+            data: this.state.missionsIntensity_arr,
+            "smooth": true
+          },
+          {
+            name: '日产量趋势( Daily Net Production Trends)',
+            type: 'line',
+            smooth: true,
+            showSymbol: false,
+            itemStyle: {
+              color: '#FFCE00'
+            },
+            lineStyle: {
+              normal: {
+                color: '#FFCE00',
+                width: 2
+              }
+            },
+            data: [445, 89, 34, 357, 234, 333, 566, 443, 233, 444, 445, 889, 34, 367, 234, 333, 566, 443, 233, 444],//this.state.factoryProdcution_arr,
+          },
+          {
+            name: '平均产量(Average Net Production)',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                color: '#8D93FF',
+                width: 2
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: '#8D93FF',
+                borderColor: '#8D93FF',
+                borderWidth: 12
+              }
+            },
+            data: [889, 889, 889, 889, 889, 889, 889, 889, 889, 889, 889, 889, 889, 889, 889, 889, 889, 889, 889, 889, 889,],//this.state.factoryProdcution_arr,
+            "smooth": true
+          },
+        ]
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      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/tlk/component/leftMenoyView.jsx

@@ -0,0 +1,412 @@
+/*
+ * @Author: dayan_hjm 库存金额
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2024-10-14 16:31:03
+ */
+
+
+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:["氢氧化锂（电池级）/ LHM(BG)","氢氧化锂（工业级）/ LHM(PG)",'氢氧化锂（待检验）/ LHM(PENDING)'],
+      missionsIntensity_arr:[
+        {value:0,name:"氢氧化锂（电池级）/ LHM(BG)"},
+        {value:0,name:"氢氧化锂（工业级）/ LHM(PG)"},
+        {value:0,name:'氢氧化锂（待检验）/ LHM(PENDING)'},
+      ],
+    };
+  }
+
+  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: '#8D93FF', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#8D93FF', // 100% 处的颜色
+                    },
+                  ],
+                },
+              },
+            },
+
+          }, {
+            value: 33, name: '', itemStyle: {
+              normal: {
+                // barBorderRadius: 15,
+                // borderColor: "rgba(105, 255, 222, 1)",
+                // borderWidth: 1,
+
+                color: {
+                  // 完成的圆环的颜色
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: '#FFCE00', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#FFCE00', // 100% 处的颜色
+                    },
+                  ],
+                },
+              },
+            },
+
+          }, {
+            value: 35, name: '', itemStyle: {
+              normal: {
+                // barBorderRadius: 15,
+                // borderColor: "rgba(47, 210, 255, 1)",
+                // borderWidth: 1,
+
+                color: {
+                  // 完成的圆环的颜色
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: '#69FFDE', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#69FFDE', // 100% 处的颜色
+                    },
+                  ],
+                },
+              },
+            },
+
+          }, {
+            value: 40, name: '', itemStyle: {
+              normal: {
+                // barBorderRadius: 15,
+                // borderColor: "rgba(255, 206, 0, 1)",
+                // borderWidth: 1,
+
+                color: {
+                  // 完成的圆环的颜色
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: '#8D93FF', // 0% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: '#8D93FF', // 100% 处的颜色
+                    },
+                  ],
+                },
+              },
+            },
+
+          }]
+    await momeyService().then(({ data = [], resultCode }) => {
+      
+      if (+resultCode === 0) {
+        let year = [], missionsIntensity_arr = [],max1=[],num=[];
+        data.map((x, i) => {
+          if(i > 2){return}
+          num.push(x.indexValue)
+          // year.unshift(x.prodCatgory);
+          data_style[i].value = x.indexValue;
+          data_style[i].name =  this.state.year[i]// x.prodCatgory;
+          missionsIntensity_arr.push(data_style[i])
+        });
+        const max_1 = getArrMax(num);
+        for (let index = 0; index < data.length; index++) {
+          if(index > 2){break}
+          max1.unshift(max_1/0.7)
+        }
+        this.setState({  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: '#CDF1FF',
+                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,
+            },
+            labelLine: {
+              show: false
+            },
+            itemStyle:{
+              borderRadius: 100
+            },
+            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/tlk/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/tlk/component/moodSendView.jsx

@@ -0,0 +1,221 @@
+/*
+ * @Author: dayan_hjm 月度产量/发货量
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2024-10-14 15:37:01
+ */
+
+
+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,
+  
+            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('chartmain'));
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+    }, 3000)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbMoodSendView"]}>
+        <div id="chartmain"></div>
+      </div>
+    )
+  }
+}
+export default MoodSendView;

src/pages/tlk/component/oneQualified.jsx

@@ -0,0 +1,287 @@
+/*
+ * @Author: dayan_hjm 一次合格率
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2024-10-14 17:19:34
+ */
+
+
+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 = {
+      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();
+      }
+    });
+
+  }
+  roundFun(value=0) {
+    value = value * 100;
+    var str = parseFloat(value).toFixed(10);
+    var num = str.substring(0,str.lastIndexOf('.')+3);
+    return num
+  }
+
+
+  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: '0%',
+          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: [20, 0, 0, 10],
+          textStyle:{
+            color:"#CDF1FF",
+            fontSize:10
+          },
+          itemWidth: 8,
+          itemHeight: 8,
+        },
+        // 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',
+
+              }
+            }
+          },
+          {
+            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
+          },
+          {data: [8000, 16000, 20000,45566,3345,33445],
+            type: 'line',
+            showAllSymbol: true,
+            yAxisIndex: 1,
+            symbolSize: 6,
+            name: '锂辉石计划执行率',
+            itemStyle: {
+                normal: {
+                    color: "#8D93FF",
+                },
+            },
+        }
+        ]
+      }
+      var myChart = echarts.init(document.getElementById('echarts5'));
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+    }, 3000)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbBottomLineForSend"]}>
+        <div id="echarts5"></div>
+      </div>
+    )
+  }
+}
+export default BottomLineForSend;

src/pages/tlk/component/oneSendView.jsx

@@ -0,0 +1,281 @@
+/*
+ * @Author: dayan_hjm 月度产量/发货量
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2024-10-14 15:36:11
+ */
+
+
+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 OneSendView 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: ['预算产量(Monthly Budget)', '产量(Net Production)','计划完成率(Prodction Efflciebcy)'],
+          fontFamily:'DingTalkJinBuTi',
+          padding: [10, 0, 0, 10],
+          textStyle:{
+            color:"#CDF1FF",
+            fontSize:10
+          },
+          itemWidth: 8,
+          itemHeight: 8,
+        },
+        // 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',
+
+              }
+            }
+          },
+          {
+            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: '产量(Net Production)',
+            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: '预算产量(Monthly Budget)',
+            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
+          },
+          {data: [8000, 16000, 20000,45566,3345,33445],
+            type: 'line',
+            showAllSymbol: true,
+            yAxisIndex: 1,
+            symbolSize: 6,
+            name: '计划完成率(Prodction Efflciebcy)',
+            itemStyle: {
+                normal: {
+                    color: "#8D93FF",
+                },
+            },
+        }
+        ]
+      }
+      var myChart = echarts.init(document.getElementById('onesendbox'));
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+    }, 3000)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbOneSendView"]}>
+        <div id="onesendbox"></div>
+      </div>
+    )
+  }
+}
+export default OneSendView;

src/pages/tlk/component/rightBottomView.jsx

@@ -0,0 +1,210 @@
+/*
+ * @Author: dayan_hjm 近30天产量
+ * @Date: 2023-10-23 09:32:12 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2024-10-14 17:32:33
+ */
+
+
+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 RightBottomView 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('echarts7'));
+
+      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}吨`,
+        grid: {
+          left: '5%',
+          top: '15%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true
+        },
+        legend: {
+          data: ['产量一次合格率（First Pass Yield）', '累计一次合格率（Cumulative First Pass Yield）'],
+          fontFamily: 'DingTalkJinBuTi',
+          padding: [5, 0, 40, 0],
+          textStyle: {
+            color: "#CDF1FF",
+            fontSize: 10
+          },
+          itemWidth: 8,
+          itemHeight: 8,
+        },
+
+        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: '产量一次合格率（First Pass Yield）',
+            type: 'line',
+            smooth: true,
+            symbol: 'circle',
+            symbolSize: 5,
+            showSymbol: false,
+            lineStyle: {
+              normal: {
+                color: '#69FFDE',
+                width: 2
+              }
+            },
+            itemStyle: {
+              normal: {
+                color: 'rgba(0, 255, 182, 0.3)',
+                borderWidth: 12
+              }
+            },
+            data: this.state.missionsIntensity_arr,
+            "smooth": true
+          },
+          {
+            name: '累计一次合格率（Cumulative First Pass Yield）',
+            type: 'line',
+            smooth: true,
+            showSymbol: false,
+            itemStyle: {
+              color: '#FFCE00'
+            },
+            lineStyle: {
+              normal: {
+                color: '#FFCE00',
+                width: 2
+              }
+            },
+            data: [445, 89, 34, 357, 234, 333, 566, 443, 233, 444, 445, 889, 34, 367, 234, 333, 566, 443, 233, 444],//this.state.factoryProdcution_arr,
+          },
+        ]
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      myChart.setOption(option);
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    }, 3000)
+  }
+
+  render() {
+
+    return (
+      <div className={["eacharView cbBottomLineForSend"]}>
+        <div id="echarts7"></div>
+      </div>
+    )
+  }
+}
+export default RightBottomView;

src/pages/tlk/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/tlk/style.less

@@ -0,0 +1,412 @@
+@import url("../../themes/themes.less");
+
+@assetUrl: "../../assets/imgs/home";
+
+.bg_after {
+  content: "";
+  display: block;
+  bottom: 0;
+  position: absolute;
+  width: 100%;
+  height: 10px;
+}
+
+.tlk_box{
+  :global {
+    .leftContent .bottomContent2{
+      height: 31%!important;
+      .topMsg_content{
+        height: 90%!important;
+      }
+    }
+    .leftContent .center_box .topMsg_content .eacharView .name_ul li{
+      height: 33%!important;
+    }
+    .leftContent .center_box .topMsg_content .eacharView .name_ul {
+      color: #CDF1FF!important;
+    }
+    .centerCon .bottomContent3{
+      height: 27%;
+    }
+    .centerCon .right_li{
+      margin-top: -24px;
+    }
+    .topMsg_tip2{
+      margin-top: 0!important;
+    }
+    .rightContent .topMsg2{
+      height: 30%!important;
+    }
+    .centerCon .bottomContent3{
+      bottom: 10%!important;
+    }
+    .rightContent .topMsg_22{
+      height: 30%!important;
+      #echarts5{
+        height: 100%!important;
+      }
+    }
+  }
+}
+.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/tlk/view.jsx

@@ -0,0 +1,443 @@
+/*
+ * @Author: dayan_hjm 
+ * @Date: 2023-10-25 10:32:44 
+ * @Last Modified by: dayan_hjm
+ * @Last Modified time: 2024-10-14 17:16:34
+ */
+/*
+ * @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 OneSendView from "./component/oneSendView.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,
+    };
+    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');
+      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;
+
+      //百万工时损工率
+      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 } = this.state;
+    return (
+      <div className={[styles.tlk_box + ' home_box ']}>
+        {/* 水印 */}
+        {
+          window.urlConfig && window.urlConfig.SHOW_WATERMARK && <div className={"shuiYin"} style={{ backgroundImage: `url(${$store.app.markSrc})`, backgroundRepeat: 'repeat' }}></div>
+        }
+        {/* 右键切换大屏 */}
+        <Tooltip placement="bottom" title={"产供销价值链"}>
+          <img src={require("@assets/imgs/iconJpg/rightJ.png").default} alt="" className={"rightJ_png"} onClick={() => {
+            deleteCacheAndChangeUrl("/home/gvc", (url) => {
+              this.props.history.replace(url);
+            })
+          }} />
+        </Tooltip>
+        <Tooltip placement="bottom" title={"产供销价值链"}>
+          <img src={require("@assets/imgs/iconJpg/rightJL.png").default} alt="" className={"rightJ_png rightJ_png_L"} onClick={() => {
+            deleteCacheAndChangeUrl("/home/gvc", (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="bottomContent2 animate__animated animate__fadeInDown animate__slower animate__delay-2s">
+              <div className="bottomContent bigDivPd">
+                <Tooltip placement="bottom" title={' ● 近六个月的产量和发货量的对比数据（含外加工），当月的数据计算至更新日期。'}>
+                  <p className="topMsg_title">产品月度产量 / Monthly Net Production</p>
+                </Tooltip>
+                <div className="topMsg_content">
+                  <OneSendView></OneSendView>
+                </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">产品发货量 / Lithium Shipment</p>
+                </Tooltip>
+                <div className="topMsg_content">
+                  <MoodSendView></MoodSendView>
+                </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 }}>产品库存 / Lithium Inventory</p>
+                </Tooltip>
+                <div className="topMsg_content">
+                  <LeftMenoyView></LeftMenoyView>
+                </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>
+                        <span className="topMsg_tip topMsg_tip2">Annual Shipments / t</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>
+                        <span className="topMsg_tip topMsg_tip2">Annual Production / t</span>
+                        </Tooltip>
+                      </div>
+                    </div>
+                    <div className="center_li" style={{marginTop:'-24px',height:'78%'}}>
+                      {
+                        !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>
+                      <span className="topMsg_tip topMsg_tip2">Annual First Pass Yield</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">近90天产量 / Net Production in the last 90 days</p>
+                </Tooltip>
+                <div className="topMsg_content">
+                  <BottomLineForSend></BottomLineForSend>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+          {/* 右侧信息栏 */}
+          <div className="rightContent">
+            <div class="topMsg2 animate__animated animate__fadeInDown animate__slower">
+              <div className="topMsg 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="topMsg_22 animate__animated animate__fadeInDown animate__slower">
+              <div className="topMsg_2">
+                <Tooltip placement="bottom" title={' ● 近六个月的主产品一次合格率，当月的数据计算至更新日期。'}>
+                  <p className="topMsg_title">锂辉石消耗量 / Spodumene Consumption</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">产品一次合格率 / First Pass Yield</p>
+                </Tooltip>
+                <div className="topMsg_content">
+                  <RightBottomView></RightBottomView>
+                </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/router/router.js

@@ -15,6 +15,7 @@ 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 TLK from '@pages/tlk/view.jsx';
 import JurisDiction from '@pages/jurisDiction/view.jsx';
 import Loading from "@components/Loading/view.jsx";
 import $store from "@store/";
@@ -67,6 +68,11 @@ const routes = [
         path: "/home/gvc",
         component: GVC,
       },
+      {
+        name: "TLK运营数据中心",
+        path: "/home/tlk",
+        component: TLK,
+      },
     ],
   },
   {