react antd，echarts全景视图

1.公告滚动，40s更新一次
2.echarts图标 左右轮播 60s更新一次
3.table 表格

import {
    useState, useEffect } from 'react';

import Slider from 'react-slick';
import 'slick-carousel/slick/slick-theme.css';
import 'slick-carousel/slick/slick.css';

import Layout from './Layout1';
import Kpi from './components/Kpi';

import Profile from './components/Profile';
import useData, {
    useLineData, useSeriesDataInterval } from './hooks/useSeriesData';
import styles from './index.less';
import './index.scss';
import {
   
  getPanoramicViewCoreData,
  getPanoramicViewConsum,
  getPanoramicViewTonConsum,
  alarmRuleReport,
} from '@/services/Fullview/index';
import Bar from './components/Column/components/Bar';
import TabAndChart from './components/Column/components/TabAndChart';
import MapUI from './components/Map/components/MapUI';
import config from './config/index';
import _ from 'lodash';
import {
    getUserInfo } from '@/services/session';
import {
    useRequest } from '@umijs/max';
import {
    response } from 'express';
const path = 'fullview';
let flag1 = 1;
let flagRight1 = 1;

const pageConfig = config[path];
const ruleTypeOptions = [
  {
    label: '表计异常', value: 1 },
  {
    label: '服务器异常', value: 2 },
  {
    label: '能耗超标', value: 3 },
  {
    label: '设备异常', value: 4 },
  {
    label: '数据异常', value: 5 },
];
function Fullview() {
   
  const [leftSlider, setLeftSlider] = useState(null);
  const [rightSlider, setRightSlider] = useState(null);
  const [refSlider, setRefSlider] = useState(null);

  const [kpiEnergyList, setKpiEnergyList] = useState(null);
  const [consumList, setConsumList] = useState(null);
  const [consumListRight, setConsumListRight] = useState(null);
  const [current, setCurrent] = useState(0);

  const [state, setState] = useState([]);
  const [target, setTarget] = useState([]);
  const [flag, setFlag] = useState(1);
  const [flagRight, setFlagRight] = useState(1);

  const [type, setType] = useState(1);
  // const [flagType, setflagType] = useState(0);

  const {
    data = {
   } } = useData(path);
  const {
    singleData = {
   } } = data;
  const {
    data: intervalDatas = {
   } } = useSeriesDataInterval(path);
  const {
    data: lineData = {
   } } = useLineData(path);
  const {
    month = {
   }, year = {
   } } = lineData;
  const [timerId, setTimerId] = useState<number | null>(0 || null);
  const [limits, setLimits] = useState<{
      [key: string]: [number, number] }>({
   
    // 'xinye#Management.Eng_Elec_Cons_1': [110, 160],
    // 'xinye#Management.Eng_All_Cons_1': [120, 180],
  });
  // 轮播
  const syncSlides = (toSlider: {
    slickGoTo: (arg0: number) => void } | null, next: number) => {
   
    console.log('rightSlider', toSlider);
    if (toSlider) {
   
      toSlider.slickGoTo(next);
    }
  };
  const leftSliderSettings = {
   
    dots: true,
    infinite: true,
    // How many slides to show in one frame
    slidesToShow: 1,
    // How many slides to scroll at once
    slidesToScroll: 1,
    autoplay: false,
    speed: 300,
    // 10s播一次
    autoplaySpeed: 10000,
    centerMode: true,
    centerPadding: '0px',
    beforeChange: (_: any, next: number) => {
   
      syncSlides(rightSlider, next);
    }</