tsg-web/src/views/yhxwfx/index.js

import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
import { Divider,Tabs,Dropdown,Space} from 'antd';
import ToolBar from './toolbar';
import { DownOutlined,UpOutlined } from '@ant-design/icons';
import apiurl from '../../service/apiurl';
import moment from 'moment';
import { httpget2, httppost2 } from '../../utils/request';
import userBarOption from "./userBarOption"
import userLineOption from "./userLineOption"
import hotOption from './hotOption';
import ReactEcharts from 'echarts-for-react';
import "./index.less"

const Page = () => {
 
  const [searchVal, setSearchVal] = useState(false)
  const [todayData, setTodayData] = useState({})
  const [activeCount, setActiveCount] = useState()
  const [userCountData, setUserCountData] = useState()
  const [hotData, setHotData] = useState()
  const [tabs, setTabs] = useState({active:0})
  const [showMore, setShowMore] = useState(false)
  const [height, setHeight] = useState("100%")
  const [hotWidth, setHotWidth] = useState("100%")
  const dtoption = useMemo(() => {
    if (userCountData) {
      return userBarOption(userCountData)
    }
  }, [userCountData])

  const lineoption = useMemo(() => {
    if (activeCount) {
      return userLineOption(activeCount)
    }
  }, [activeCount])

  const hotoption = useMemo(() => {
    if (hotData) {
      let substrData = [];
      if (!showMore) { 
        substrData = hotData.slice(0, 10)
      } else {
        substrData = hotData
      }
      setHeight(((substrData.length) * 10) + "%")
      try {
        const labels = substrData.map(item => (
          (item.menu1 || '') + '-' + (item.menu2 || '') + (item.menu3 ? '-' + item.menu3 : '')
        ));
        const maxLen = Math.max(...labels.map(l => (l || '').length), 0);
        const px = Math.min(Math.max(maxLen * 12 + 600, 800), 2400);
        setHotWidth(px + 'px');
      } catch (e) {}
      return hotOption(substrData)
    }
  }, [hotData,showMore])


 
//  获取今日数据
  const getTodayData = async () => {
    try {
      const res = await httpget2(apiurl.systemM.action.todayData)
      setTodayData(res.data)
    } catch (error) {
      console.log(error);
      
    }
  }
 
  // 获取日活跃数
  const getActiveCount = async (params) => {
    try {
      const {data} = await httppost2(apiurl.systemM.action.activeCount,params)
      const {appList,webList} = data
      if(appList&&webList){
        setActiveCount({appList:appList,webList:webList})
      }
    } catch (error) {
      console.log(error);
      
    }
  }
  
   // 获取前十用户活跃数
   const getUserActiveCount = async (params) => {
    try {
      const { data } = await httppost2(apiurl.systemM.action.userCount, params)
      const {appList,webList} = data
      if(appList&&webList){
        setUserCountData({appList:appList,webList:webList})
      }
    } catch (error) {
      console.log(error);
    }
  } 

  //  获取热点数据
  const getHotData = async (data) => {
    try {
      const res = await httppost2(apiurl.systemM.action.hotData, data)
      setHotData(res.data)
    } catch (error) {
      console.log(error);
      
    }
  }
  useEffect(() => {
    getTodayData()
  }, [])

  useEffect(() => {
    if (searchVal) {
      getActiveCount(searchVal)
      getUserActiveCount(searchVal)
     
    }
  }, [searchVal])

  useEffect(() => {
    if (searchVal && tabs) { 
      const params = {
        ...searchVal,
        loginType:Number(tabs?.active)
      }
      getHotData(params)
    }
  }, [searchVal,tabs])
  

  return (
    <>
      <div className='content-root clearFloat' style={{padding:8,paddingBottom:"0"}}>
          <div className='action-top'>
            <div className='comomn-title'>
            <img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
              <span>今日数据总览</span>
            </div>
            <div className='data-panel'>
              <div className='panel-item'>
                <span className='name'>WEB端访问用户</span>
              <p className='value'>{todayData?.web1Count || '-' }</p>
              </div>
              <Divider type="vertical"  style={{fontSize:100,background:"#d7d7d7"}}/>
              <div className='panel-item'>
                <span className='name'>WEB端浏览次数</span>
                <p className='value'>{todayData?.web2Count || '-' }</p>
              </div>
              <Divider type="vertical" style={{fontSize:100,background:"#d7d7d7"}} />
              <div className='panel-item'>
                <span className='name'>WEB端平均访问时长</span>
                <p className='value'>{todayData?.web3Count || '-' }&nbsp;<span style={{fontSize:16}}>h</span></p>
          
              </div>
              <Divider type="vertical" style={{fontSize:100,background:"#d7d7d7"}} />
              <div className='panel-item'>
                <span className='name'>移动端访问用户</span>
                <p className='value'>{todayData?.app1Count || '-'}</p>
              </div>
              <Divider type="vertical" style={{fontSize:100,background:"#d7d7d7"}}/>
              <div className='panel-item'>
                <span className='name'>移动端浏览次数</span>
                <p className='value'>{todayData?.app2Count || '-'}</p>
              </div>
              <Divider type="vertical" style={{fontSize:100,background:"#d7d7d7"}}/>
              <div className='panel-item'>
                <span className='name'>移动端平均访问时长</span>
                <p className='value'>{todayData?.app3Count || '-'}&nbsp;<span style={{fontSize:16}}>h</span></p>
                
              </div>
              <Divider type="vertical" style={{fontSize:100,background:"#d7d7d7"}} />
            </div>
          </div>
          <div className='action-middle'>
          <ToolBar 
            setSearchVal={setSearchVal}
            />
          </div>
        <div className='action-bottom'>
         <div className='left'>
              <div className='left-top'>
                <div className='comomn-title'>
                <img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
                  <span>浏览次数前十</span>
                </div>
                <div className='left-top-charts'>
                <ReactEcharts
                      option={dtoption || {}}
                      style={{ width: "100%", height: '100%' }}
                      notMerge={true}
                    />
              </div>
              </div>
              <div className='left-bottom'>
              <div className='comomn-title'>
                <img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
                  <span>日活跃用户数</span>
                </div>
                <div className='left-bottom-charts'>
                <ReactEcharts
                      option={lineoption || {}}
                      style={{ width: "100%", height: '100%' }}
                      notMerge={true}
                    />
              </div>
              </div>
            </div>
          <div className='right'>
            <div className='right-title'>
             <div className='comomn-title'>
                <img alt='' src={`${process.env.PUBLIC_URL}/assets/panelTitle.png`} />
                  <span>功能热度前十</span>
             </div>
              <Tabs
                defaultActiveKey="1"
                onChange={(e) => { setTabs({ active: e }); setShowMore(false)}}
                items={[
                  {
                    label: `web端`,
                    key: 0,
                    children: ``,
                  },
                  {
                    label: `移动端`,
                    key: 1,
                    children: ``,
                  },
                ]}
              />
              <div className='more'>
              <a onClick={(e) => { e.preventDefault(); setShowMore(!showMore) }}>
                    <Space>
                      更多
                      {!showMore ? <DownOutlined /> :<UpOutlined /> }
                    </Space>
                </a>
              </div>
            </div>
                <div className='right-charts'>
                <ReactEcharts
                      option={hotoption || {}}
                      style={{ width: hotWidth, height: height }}
                      notMerge={true}
                    />
              </div>
            </div>
          </div>
           
        </div>
    </>
  );
}

export default Page;