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;

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/597610.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

WiFi7: MLD寻址

WiFi7: MLD寻址

原文：MLD使用MLD MAC address唯一的标识本MLD。 MLD下的STA(s)使用与之不同的MAC address。 NOTE MLD MAC address可以和其下的某个STA的MAC address相同或者不同于任一MAC Address。 原文：对于individually addressed 帧。以下规则适用： Address 2(TA)设置为STA的MAC Add…
阅读更多...
springboot项目 java -jar xxx.jar 没有主清单属性解决方法

springboot项目 java -jar xxx.jar 没有主清单属性解决方法

1.在pom文件中添加如下 <plugins><!--解决SpringBoot打包成jar后运行提示没有主清单属性--><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><fork…
阅读更多...
python 堆栈

python 堆栈

栈&#xff08;Stack&#xff09;&#xff1a; 栈是一种后进先出&#xff08;LIFO&#xff09;的数据结构&#xff0c;意味着最后进入栈的元素将首先被取出。栈通常用于存储局部变量、函数调用等信息&#xff0c;这些信息在程序运行时动态生成和销毁。栈的大小在程序编译时就已…
阅读更多...
Hive实战：实现数据去重

Hive实战：实现数据去重

文章目录 一、实战概述二、提出任务三、完成任务&#xff08;一&#xff09;准备数据1、在虚拟机上创建文本文件2、上传文件到HDFS指定目录 &#xff08;二&#xff09;实现步骤1、启动Hive Metastore服务2、启动Hive客户端3、基于HDFS数据文件创建Hive外部表4、利用Hive SQL实…
阅读更多...
el-autocomplete远程搜索使用及el-upload上传多个文件流给后端，详情接口返回的是文件地址，前端将文件地址转成文件流，回传文件流给后端

el-autocomplete远程搜索使用及el-upload上传多个文件流给后端，详情接口返回的是文件地址，前端将文件地址转成文件流，回传文件流给后端

最近遇到一个项目，里面有2个需求我觉得挺常见的，第一个需求是一个表单里，当用户在输入名称后，前端调接口发请求获取到关联名称的企业名称，并展示，然后当用户选中企业后，前端调接口获取选中企业的具体信息，并填充到表单里；第二个需求是，表单里有个上传图片的功能，前端…
阅读更多...
什么是React.FC | 封装ant design弹框组件之：ant design 修改密码弹框组件

什么是React.FC | 封装ant design弹框组件之：ant design 修改密码弹框组件

文章目录 一、什么是React.FC组件的 props 是什么意思二、封装ant design弹框组件之：ant design 修改密码弹框组件定义修改密码弹框组件使用修改密码弹框组件:[重要]关于提交时候，不同组件 表单数据共享报错：Button cannot be used as a JSX component.一、什么是React.FC …
阅读更多...
JVS规则引擎和智能BI（自助式数据分析）1.3新增功能说明

JVS规则引擎和智能BI（自助式数据分析）1.3新增功能说明

规则引擎更新功能 新增: 1、数据源新增Excel数据源&#xff1b; Excel数据源功能允许用户将Excel文件作为数据源导入&#xff0c;并进行数据清洗、转换和处理&#xff0c;以实现数据的集成、可视化和深度分析&#xff0c;为决策提供强大支持&#xff0c;同时保持良好的交互性…
阅读更多...
新一代爬取JavaScript渲染页面的利器-playwright（一）

新一代爬取JavaScript渲染页面的利器-playwright（一）

Playwright的使用 Playwright是微软在2020年初开源的一款新一代自动化测试工具&#xff0c;其功能和**Selenium**、Pyppeteer类似&#xff0c;都可以驱动浏览器进行自动化操作&#xff0c;但是也具备了Selenium、Pyppeteer不具备的更好的API&#xff0c;是新一代爬取JavaScrip渲…
阅读更多...
HbuilderX中的git的使用

HbuilderX中的git的使用

原文链接https://blog.csdn.net/Aom_yt/article/details/119924356
阅读更多...
CentOs 环境下使用 Docker 部署 Ruoyi-Vue

CentOs 环境下使用 Docker 部署 Ruoyi-Vue

CentOs 环境下使用 Docker 部署 Ruoyi-Vue RuoYi-Vue 项目下载地址 RuoYi-Vue: &#x1f389; 基于SpringBoot&#xff0c;Spring Security&#xff0c;JWT&#xff0c;Vue & Element 的前后端分离权限管理系统&#xff0c;同时提供了 Vue3 的版本 (gitee.com) Docker 部…
阅读更多...
MYSQL分表容量预估：简明指南

MYSQL分表容量预估：简明指南

随着数据量的日益增长&#xff0c;分表技术成为优化mysql数据库性能的重要策略。本文介绍一种简明有效的预估分表容量大小的方法&#xff0c;帮助开发者和数据库管理员进行有效的资源规划。 背景 在处理大规模数据时&#xff0c;为了优化性能和管理便利&#xff0c;常常采用分…
阅读更多...
Java 流程控制语句

Java 流程控制语句

程序设计中规定的三种流程结构&#xff0c;即&#xff1a; 顺序结构 程序从上到下逐行地执行&#xff0c;中间没有任何判断和跳转 分支结构 根据条件&#xff0c;选择性地执行某段代码 有 if…else 和 switch-case 两种分支语句 循环结构 根据循环条件&#xff0c;重复性的执…
阅读更多...
DRF从入门到精通九（权限控制）

DRF从入门到精通九（权限控制）

文章目录 一、权限控制模型1) ACL(Access Control List,访问控制列表)2) RBAC(Role-Based Access Control,基于角色的访问控制)应用前后台权限控制实操 3) ABAC(Attribute-Based Access Control,基于属性的访问控制) 一、权限控制模型 1) ACL(Access Control List,访问控制列表…
阅读更多...
郑州大学算法设计与分析实验2

郑州大学算法设计与分析实验2

判断题 1 #include<bits/stdc.h> using namespace std;const int N 50; int f[N], n;int main() { // freopen("1.in", "r", stdin);ios::sync_with_stdio(false);cin.tie(0);cout.tie(0);cin >> n;f[1] 1; f[2] 1;for(int i 3; i &l…
阅读更多...
数字IC后端实现之快速获取innovus中drv violation的所有net list

数字IC后端实现之快速获取innovus中drv violation的所有net list

在Innovus中place_opt_design和optDesign阶段&#xff0c;我们经常会看到如下所示的log提示信息&#xff0c;核心关键词是“ Reasons for remaining drv violations”。而且告诉我们总共有819条net存在drv violation&#xff0c;且无法被工具优化掉。 Reasons for remaining dr…
阅读更多...
深入理解 Golang 中的值类型和引用类型

深入理解 Golang 中的值类型和引用类型

目录 Golang 的内存模型 值类型 引用类型 值类型与引用类型在函数传递中的差异 指针类型&#xff08;Pointer Types&#xff09; 值类型与引用类型的比较 小结 在 Golang 中&#xff0c;数据类型可以分为两大类&#xff1a;值类型&#xff08;Value Types&#xff09;和…
阅读更多...
ARM Cortex-Mx 权威指南笔记

ARM Cortex-Mx 权威指南笔记

用于中断或异常屏蔽特殊寄存器细节 1、PRIMASK 在许多应用中,可能都需要暂时禁止所有中断以执行一些时序关键的任务&#xff0c;此时可以使用PRIMASK寄存器。PRIMASK寄存器只能在特权状态访问。PRIMASK 用于禁止除NMI和 HardFault 外的所有异常它实际上是将当前优先级改为0(最…
阅读更多...
图解设计模式-中介者模式（Mediator）

图解设计模式-中介者模式（Mediator）

中介者模式 定义 使用一个中介者对象&#xff08;mediator&#xff09;集中封装多个具有依赖/关联关系的对象&#xff08;colleague&#xff0c;同事对象&#xff09;之间的交互&#xff0c;使各对象之间不再互相引用&#xff0c;降低对象之间的强耦合程度&#xff0c;对象之…
阅读更多...
CTF之Misc杂项干货

CTF之Misc杂项干货

目录 一、常见编码 二、文件分析与处理 三、隐写工具与命令 四、隐写术实例 一、常见编码 1、base家族 2、进制转换 3、摩斯、希尔、凯撒、仿射、栏栅、维吉尼亚、培根、键盘、rabbit、rot13、AES、md5、RSA等 &#xff08;md5、RSA可能不会出现在杂项里&#xff0c;但…
阅读更多...
【算法题】38. 外观数列

【算法题】38. 外观数列

题目 给定一个正整数 n &#xff0c;输出外观数列的第 n 项。 「外观数列」是一个整数序列&#xff0c;从数字 1 开始&#xff0c;序列中的每一项都是对前一项的描述。 你可以将其视作是由递归公式定义的数字字符串序列&#xff1a; countAndSay(1) "1" countAn…
阅读更多...
最新文章

Copyright @ 2022~2023