react antd，echarts全景视图

Sunny
已于 2024-01-04 14:18:44 修改
阅读量699
点赞数 8
文章标签： react.js echarts 前端
于 2024-01-04 14:14:39 首次发布
本文链接：https://blog.csdn.net/L_C_sunny/article/details/135385396
版权
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);
    },
  };
  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 ? (
                    <>
                      <span
                        style={{
                          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}>
                      <TabAndChart
                        type="耗量"
                        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);
                        }}
                      />
                      {/* <Bar
                        type="耗量"
                        metric={m.domainMetric}
                        dpts={pageConfig.deptCons}
                        actuals={actual}
                        targets={target}
                      /> */}
                    </div>
                  ))}
                </Slider>
              ) : (
                <></>
              )}
            </div>

            <div className={styles.middle}>
              <MapUI
                bg={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}>
                      <TabAndChart
                        type="单耗"
                        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));
                          }
                        }}
                      />
                      {/* <Bar
                        type="单耗"
                        metric={m.domainMetric}
                        dpts={pageConfig.deptCons1}
                        actuals={singleData}
                        targets={[]}
                      /> */}
                    </div>
                  ))}
                </Slider>
              ) : (
                <></>
              )}
            </div>
          </div>
        </div>
      </div>
    </Layout>
  );
}

export default Fullview;