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，一经查实，立即删除！

相关文章

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…
阅读更多...
el-autocomplete远程搜索使用及el-upload上传多个文件流给后端，详情接口返回的是文件地址，前端将文件地址转成文件流，回传文件流给后端

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

最近遇到一个项目，里面有2个需求我觉得挺常见的，第一个需求是一个表单里，当用户在输入名称后，前端调接口发请求获取到关联名称的企业名称，并展示，然后当用户选中企业后，前端调接口获取选中企业的具体信息，并填充到表单里；第二个需求是，表单里有个上传图片的功能，前端…
阅读更多...
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 部…
阅读更多...
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…
阅读更多...
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;但…
阅读更多...
pytorch集智-1安装与简单使用

pytorch集智-1安装与简单使用

1 安装 1.1 简介 pytorch可用gpu加速&#xff0c;也可以不加速。gpu加速是通过cuda来实现&#xff0c;cuda是nvidia推出的一款运算平台&#xff0c;它可以利用gpu提升运算性能。 所以如果要装带加速的pytorch&#xff0c;需要先装cuda&#xff0c;再装pytorch&#xff0c;如…
阅读更多...
2023年第2季社区Task挑战赛贡献者榜单

2023年第2季社区Task挑战赛贡献者榜单

基于FISCO BCOS及Weldentity&#xff0c;实现SSO单点登录服务&#xff1b;提供食品溯源、电商运费险7天退保、电子病历等智能合约库业务场景案例&#xff1b;基于FISCO BCOS更新游戏体验&#xff1b;体验并分析解读最新发布的分布式数据协作管理解决方案DDCMS&#xff0c;提供相…
阅读更多...
Java学校教务管理系统源码带微信小程序

Java学校教务管理系统源码带微信小程序

运行环境&#xff1a;jdk8mysql5.7IntelliJ IDEAmaven 技术&#xff1a;springbootmybatislayuishirojquery 教务管理系统是一个基于网络的在线管理平台, 帮助学校管理教务系统&#xff0c;用一个帐号解决学校教务教学管理&#xff0c; 灵活的定制符合学校自己实际情况的教务系…
阅读更多...
网络连通性批量检测工具

网络连通性批量检测工具

一、背景介绍 企业网络安全防护中&#xff0c;都会要求配置物理网络防火墙以及主机防火墙&#xff0c;加强对网络安全的防护。云改数转之际&#xff0c;多系统上云过程中都会申请开通大量各类网络配置&#xff0c;针对这些复杂且庞大的网络策略开通配置&#xff0c;那么在网络配…
阅读更多...
使用Go语言实现RESTful API

使用Go语言实现RESTful API

RESTful架构是一种设计风格&#xff0c;用于构建网络应用程序的API。它基于HTTP协议&#xff0c;并使用不同的HTTP方法&#xff08;如GET、POST、PUT、DELETE等&#xff09;来处理不同的操作。在Go语言中&#xff0c;我们可以使用标准库中的net/http包来实现RESTful API。 下面…
阅读更多...
【Axure高保真原型】树形表格_多选效果

【Axure高保真原型】树形表格_多选效果

今天和大家分享树形表格_多选效果的原型模板&#xff0c;点击树的箭头可以展开或者收起子节点&#xff0c;点击多选按钮可以选中或取消选择该行以及子级行内容&#xff0c;同时反选父级行内容&#xff0c;父级行内容能根据子级选中的数量自动反选&#xff0c;包括全选、半选和未…
阅读更多...
SpringBoot学习(三)-整合JDBC、Druid、MyBatis

SpringBoot学习(三)-整合JDBC、Druid、MyBatis

注&#xff1a;此为笔者学习狂神说SpringBoot的笔记&#xff0c;其中包含个人的笔记和理解&#xff0c;仅做学习笔记之用&#xff0c;更多详细资讯请出门左拐B站&#xff1a;狂神说!!! 一、整合JDBC使用&#xff08;理解&#xff09; 创建项目 勾选依赖启动器 查看依赖 …
阅读更多...
Electron介绍

Electron介绍

前言 相信很多的前端小伙伴都想过一个问题&#xff0c;web技术是否可以用于开发桌面应用。答案当然是可以的&#xff0c;Electron框架就是其中的一种解决方案。 Electron介绍 Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 并不是一门新的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023