tqv-data-operation-screen/src/pages/tqcDataVHome/view.jsx

/*
 * @Author: dayan_hjm 
 * @Date: 2023-10-25 10:32:44 
 * @Last Modified by: dayan_hjm
 * @Last Modified time: 2023-11-16 10:35:01
 */
/*
 * @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 LeftMenoyView from "./component/leftMenoyView.jsx";
import RightBottomView from "./component/rightBottomView.jsx";
import OneQualified from "./component/oneQualified.jsx";
import MapView from "./component/mapView.jsx";
import {
  timeService,
  numberService,
  checkToken,
  updateTimeService
} from "./api";

import 'animate.css';
@withRouter

class Home extends Component {
  // 构造函数，组件的实例创建时，最先执行
  constructor(props, context) {
    super(props, context);
    this.store = mod;
    this.state = {
      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.indexValue){
            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)),
              })
            }
          }
        });
        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)
  }

  render() {
    const stores = this.store.state;
    let { totalValue, yearDecline, yearSend, productInventory } = this.store.state;
    let { changGif, updateTime, } = this.state;
    return (
      <div className={"home_box"}>
        {/* 视频播放器 */}
        <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-2s"></video>
        </div>
        <div className={[styles.home + " home cbHome"]}>
          <div className="leftContent">

            <div class="topMsg2 animate__animated animate__fadeInDown animate__slower">
              <div className="topMsg">
                <Tooltip placement="bottom" title={' ● 从1月至m-1月的产值累计，产值计算方式：∑销售单价*产量'}>
                  <p className="topMsg_title">总产值</p>
                </Tooltip>
                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"}>
                  <span className="topMsg_number" class="shu1">{totalValue}</span><span className="topMsg_number_2">万元</span>
                </div>
              </div>
            </div>

            <div class="center_box2 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
              <div className="center_box">
                <Tooltip placement="bottom" title={' ● 即为 更新数据ETL日期当天的库存金额，百分比即为产品库存金额占总体金额的百分比'}>
                  <p className="topMsg_title" style={{ position: "relative", zIndex: 999999 }}>库存金额</p>
                </Tooltip>
                <div className="topMsg_content">
                  <LeftMenoyView></LeftMenoyView>
                </div>
              </div>
            </div>

            <div class="bottomContent2 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
              <div className="bottomContent bigDivPd">
                <Tooltip placement="bottom" title={' ● m-6至m月的产量和发货量的对比数据（含外加工）当月的数据计算至更新数据ETL日期当天'}>
                  <p className="topMsg_title">月度产量/发货量</p>
                </Tooltip>
                <div className="topMsg_content">
                  <MoodSendView></MoodSendView>
                </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">
                        <span className="topMsg_number" class="shu1">{yearDecline}</span>
                        <p className="topMsg_line"></p>
                        <Tooltip placement="bottom" title={' ● 即为从当年1月1日至更新数据ETL日期当天的产量之和（含外加工）'}>
                          <span className="topMsg_tip">年度产量/吨</span>
                        </Tooltip>
                      </div>
                    </div>
                    <div className="center_li">
                      <div className="right_li">
                        <span className="topMsg_number" class="shu1">{productInventory}</span>
                        <p className="topMsg_line"></p>
                        <Tooltip placement="bottom" title={' ● 即为从当年1月1日至更新数据ETL日期当天的发货量之和（含外加工）'}>
                          <span className="topMsg_tip">年度发货量/吨</span>
                        </Tooltip>
                      </div>
                    </div>
                    <div className="center_li">
                      <span className="topMsg_number" class="shu1">{yearSend}</span>
                      <p className="topMsg_line"></p>
                      <Tooltip placement="bottom" title={' ● 更新数据ETL日期当天的产品库存数量（含外加工）'}>
                        <span className="topMsg_tip">产品库存/吨</span>
                      </Tooltip>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bottomContent3 animate__animated animate__fadeInUp animate__slower">
              <div className="bottomContent">
                <Tooltip placement="bottom" title={' ● t-31 至更新数据ETL日期当天的日产量（含外加工）'}>
                  <p className="topMsg_title">近30天产量</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={' ● 即为1月至m-1月的百万工时损工率'}>
                  <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={' ● m-6至m月近六个月的产品一次合格率和目标值合格率；当月的数据计算至更新数据ETL日期当天'}>
                  <p className="topMsg_title">一次合格率</p>
                </Tooltip>

                <div className="topMsg_content">
                  <OneQualified></OneQualified>
                </div>
              </div>
            </div>

            <div class="topMsg_33 animate__animated animate__fadeInDown animate__slower animate__delay-1s">
              <div className="topMsg_3">
                <Tooltip placement="bottom" title={' ● 即为从当年1月至m-1月的累计产量计划完成率；'}>
                  <p className="topMsg_title">产量计划完成率</p>
                </Tooltip>
                <div className={changGif ? "topMsg_content changBg_topMsg_content" : "topMsg_content"} id="plannedCompletionBox">
                  <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="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">
            <p style={{ color: "#6a818d",lineHeight:'2px' }}>
              更新时间 : {updateTime}
            </p>
          </div>

        </div>
      </div>
    )
  }
}
export default Home;