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 frameslidesToShow: 1,// How many slides to scroll at onceslidesToScroll: 1,autoplay: false,speed: 300,// 10s播一次autoplaySpeed: 10000,centerMode: true,centerPadding: '0px',beforeChange: (_: any, next: number) => {syncSlides(rightSlider, next);},};const rightSliderSettings = {...leftSliderSettings, // 使用左侧轮播器的设置beforeChange: (_, next: number) => {syncSlides(leftSlider, next);},};const getData = (type: any) => {getPanoramicViewCoreData(type).then((res) => {// debugger;if (res.code === 200) {// 中间最上边let data =res.data.firstRowMetricList?.map((item: { geo: string; flag: string; icon: string }) => {item.geo = 'xinye';if (item.flag === 'E') {item.icon = './fullview/map/electric.png';} else if (item.flag === 'GREEN') {item.icon = './fullview/map/green-electric.png';} else if (item.flag === 'G') {item.icon = './fullview/map/gas.png';} else if (item.flag === 'W') {item.icon = './fullview/map/water.png';} else if (item.flag === 'ENG_ALL_CONS') {item.icon = './fullview/map/coal.png';} else if (item.flag === 'ENG_ALL_CARBON') {item.icon = './fullview/map/co2.png';}// item.domainMetric = "xinye";return item;}) || [];pageConfig.keyMetrics = data?.length > 0 ? data : pageConfig.keyMetrics;// 最中间的值res.data.deptResVoList?.forEach((element: {[x: string]: { left: number; top: number };deptName: string;itemValueList: any;}) => {element['dpt'] = element.deptName;element['position'] = {left: 0,top: 2,};element['metrics'] = element.itemValueList;if (element.deptName === '经典薄片车间') {element['position'] = {left: 0,top: 2,};element['geo'] = 'xinye|joint_workshop|classics_sheet_workshop';} else if (element.deptName === '公辅车间') {element['position'] = {left: 312,top: 0,};element['geo'] = 'xinye|joint_workshop|classics_sheet_workshop';} else if (element.deptName === '行政楼') {element['position'] = {left: 38,top: 320,};} else if (element.deptName === '老车间') {element['position'] = {left: 729,top: 6,};} else if (element.deptName === '其他区域') {element['position'] = {left: 729,top: 317,};}// element['dpt'] =},);pageConfig.areas = res.data.deptResVoList;setKpiEnergyList(res.data.kpiEnergyList);}});};const getView = (flag: any, type: any) => {getPanoramicViewConsum(flag, type).then((res) => {if (res.code === 200) {res.data.forEach((element: { [x: string]: string; name: string }) => {element['geo'] = 'xinye|old_workshop|newstyle_sheet_workshop';if (element.name === '电力') {element['domainMetric'] = 'Management.Eng_Elec_Cons_1';} else if (element.name === '天然气') {element['domainMetric'] = 'Management.Eng_NG_Cons_1';} else if (element.name === '工业水') {element['domainMetric'] = 'Management.Eng_Water_Cons_1';} else if (element.name === '"蒸汽') {element['domainMetric'] = 'Management.Eng_Steam_Cons_1';}});let data = res.data.map((item: { geo: string }) => {item.geo = 'xinye';// item.name = item.// item.domainMetric = "xinye";return item;});pageConfig.metricsRight = data;pageConfig.consumList = data;// 耗量pageConfig.deptCons = data;console.log(pageConfig.deptCons);setConsumList(data);}});};const getPanoraTonConsum = (flag: any, type: any) => {getPanoramicViewTonConsum(flag, type).then((res) => {if (res.code === 200) {res.data.forEach((element: { [x: string]: string; name: string }) => {element['geo'] = 'xinye|old_workshop|newstyle_sheet_workshop';if (element.name === '电力') {element['domainMetric'] = 'Management.Eng_Elec_Cons_1';} else if (element.name === '天然气') {element['domainMetric'] = 'Management.Eng_NG_Cons_1';} else if (element.name === '工业水') {element['domainMetric'] = 'Management.Eng_Water_Cons_1';} else if (element.name === '"蒸汽') {element['domainMetric'] = 'Management.Eng_Steam_Cons_1';}});let data = res.data.map((item: { geo: string }) => {item.geo = 'xinye';// item.name = item.// item.domainMetric = "xinye";return item;});pageConfig.metrics = data;pageConfig.consumList = data;pageConfig.deptCons1 = data;setConsumListRight(data);// console.log(pageConfig, intervalDatas);}});};const getType = (type: any) => {ruleTypeOptions.map((res) => {let lable = '';if (res.value === parseInt(type)) {lable = res.label;}console.log(lable, 'lable');return lable;});};const getAlarmRuleReport = () => {let status = 1;getUserInfo().then((res) => {if (res.code === 200) {let id = res?.data?.user?.userId;let num = 0;alarmRuleReport(id, status, '').then((response) => {if (response.code === 200) {console.log(response, 'current === index');setState(response.data);// let data = [{//   id: 1,//   ruleType: 1,//   alarmContent: 'iPhone11挥泪降价1600元 iPhone12出道即巅峰?5G手机',// },// {//   id: 2,//   ruleType: 1,//   alarmContent: 'VR式体验奔驰博物馆重新开张 广东最惨的"88888"车牌'// },// {//   id: 3,//   ruleType: 1,//   alarmContent: '4年5队的落选秀太香了 巅峰2.6帽!力压魔兽夺最佳新秀'// },// {//   id: 4,//   ruleType: 1,//   alarmContent: '你好世界：寻找心中的风景 [征集]寻找中式风景禅意美'// }]// setState(data)if (data.length > 0) {const timer: NodeJS.Timeout = setInterval(() => {let currentNum = (num + 1) % data.length;num = currentNum;setCurrent(_.cloneDeep(currentNum));console.log(currentNum, current, num, 'currentcurrentcurrentcurrent');// getAlarmRuleReport()}, 10000);return () => {clearInterval(timer); // 组件卸载时清除定时器};}}});}});};useEffect(() => {getView(flag, type);getAlarmRuleReport();getData(type);setFlag(_.cloneDeep(flag));}, [flag]);useEffect(() => {getData(type);getPanoraTonConsum(flagRight, type);setFlagRight(_.cloneDeep(flagRight));}, [flagRight]);useEffect(() => {const id: NodeJS.Timeout = setInterval(() => {getData(type);getView(flag1, type);getPanoraTonConsum(flagRight1, type);}, 60 * 1000);return () => {clearInterval(id); // 组件卸载时清除定时器};}, []);// 告警useEffect(() => {// const timer: NodeJS.Timeout = setInterval(() => {//   setAnimate(true)//   getAlarmRuleReport()// }, 1500);const id: NodeJS.Timeout = setInterval(() => {getAlarmRuleReport();}, 40 * 1000);return () => {clearInterval(id); // 组件卸载时清除定时器// clearInterval(timer); // 组件卸载时清除定时器};}, []);return (<Layout><div className={styles.view}><div className={styles.content}>{/* 头像 */}{/* <Profile /> */}<div className={styles.title}>全景视图</div>{/* <div className={styles.warning}>warning</div> */}<div className="cl-seamless-container" style={{ color: '#4cdced' }}><span className="image"></span><ul className="cl-seamless-list">{state?.map((item, index) => (<li className={styles.consulationNewsItem} key={index} style={{ fontSize: '18px' }}>{current === index ? (<><spanstyle={{background: '#0c465a',border: '2px solid #0da1b7',padding: '2px 10px',marginRight: '20px',borderRadius: '6px',fontSize: '14px',}}>{ruleTypeOptions?.map((res) =>parseInt(item?.ruleType) === res.value ? <>{res.label}</> : <></>,)}</span>{item?.alarmContent}</>) : (<></>)}</li>))}</ul></div><div className={styles.main}><div className={styles.left}>{consumList ? (<Slider{...leftSliderSettings}ref={(slider) => {setLeftSlider(slider);}}className="left-column">{/* 左侧内容轮播项 */}{pageConfig.metrics.map((m, i) => (<div key={i}><TabAndCharttype="耗量"unit={m.unit}metricName={m.name}// todo:4个页面变化area={m.name}limits={limits[`${m.geo}#${m.domainMetric}`]}dayData={intervalDatas.minute?.[`${m.geo}#${m.domainMetric}`] || []}monthData={month?.[`${m.geo}#${m.domainMetric}`]}yearData={year?.[`${m.geo}#${m.domainMetric}`]}listData={consumList}getFlag={(value: any) => {console.log(value);if (value === 'day') {flag1 = 1;setFlag(_.cloneDeep(1));}if (value === 'month') {flag1 = 2;setFlag(_.cloneDeep(2));}if (value === 'year') {flag1 = 3;setFlag(_.cloneDeep(3));}console.log(flag);}}/>{/* <Bartype="耗量"metric={m.domainMetric}dpts={pageConfig.deptCons}actuals={actual}targets={target}/> */}</div>))}</Slider>) : (<></>)}</div><div className={styles.middle}><MapUIbg={pageConfig.bg}keyMetrics={pageConfig.keyMetrics}data={singleData}intervalData={intervalDatas.day}areas={pageConfig.areas}type={0}/><Kpi kpiEnergyList={kpiEnergyList} /></div><div className={styles.right}>{consumListRight ? (<Slider{...rightSliderSettings}ref={(slider) => setRightSlider(slider)}className="right-column">{pageConfig.metricsRight.map((m, i) => (<div key={i}><TabAndCharttype="单耗"unit={m.unit}metricName={m.name}area={m.name}limits={limits[`${m.geo}#${m.domainMetric}`]}dayData={intervalDatas.minute?.[`${m.geo}#${m.domainMetric}`] || []}monthData={month?.[`${m.geo}#${m.domainMetric}`]}yearData={year?.[`${m.geo}#${m.domainMetric}`]}listData={consumListRight}getFlag={(value: any) => {if (value === 'day') {flagRight1 = 1;setFlagRight(_.cloneDeep(1));}if (value === 'month') {flagRight1 = 2;setFlagRight(_.cloneDeep(2));}if (value === 'year') {flagRight1 = 3;setFlagRight(_.cloneDeep(3));}}}/>{/* <Bartype="单耗"metric={m.domainMetric}dpts={pageConfig.deptCons1}actuals={singleData}targets={[]}/> */}</div>))}</Slider>) : (<></>)}</div></div></div></div></Layout>);
}export default Fullview;