react antd，echarts全景视图

  • 开发
  • 48

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;

在这里插入图片描述

阅读全部

相关推荐

  4. ffmpeg全景视频转普通视角视频的filter开发

    2024-01-05 17:50:03       58 阅读

  10. 计算机视觉与深度学习 | 基于特征的图像配准技术（全景图像拼接）

    2024-01-05 17:50:03       31 阅读

最近更新

  3. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-05 17:50:03       98 阅读

  4. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-05 17:50:03       106 阅读

  9. 在Django里面运行非项目文件

    2024-01-05 17:50:03       87 阅读

  19. Python语言-面向对象

    2024-01-05 17:50:03       96 阅读

  20. 如何分清楚常见的 Git 分支管理策略Git Flow、GitHub Flow 和 GitLab Flow

    2024-01-05 17:50:03       91 阅读

热门阅读

  1. React拖拽实践

    2024-01-05 17:50:03       53 阅读

  3. 白云山橘红痰咳煎膏，止咳值得信赖

    2024-01-05 17:50:03       54 阅读

  5. 常用链表算法——快慢指针法

    2024-01-05 17:50:03       59 阅读

  6. Axios 面试题及答案

    2024-01-05 17:50:03       58 阅读

  9. 工业固体废物智能化综合管控平台

    2024-01-05 17:50:03       60 阅读

  11. 第三方测试检测出来privateKey 怎么办

    2024-01-05 17:50:03       55 阅读

  16. T527 Android13遥控适配

    2024-01-05 17:50:03       52 阅读

  20. C++使用openssl的EVP对文件进行AES-256-CBC加解密

    2024-01-05 17:50:03       54 阅读

  24. go语言gin框架的基本使用

    2024-01-05 17:50:03       70 阅读