import React, { useEffect, useRef, useState } from 'react'; import { Skeleton, Button, Pagination, Select, Popconfirm, Table, Tooltip } from '@douyinfe/semi-ui'; import { connect } from 'react-redux'; import Header from '../components/header'; import Body from '../components/body' import Card from '../components/card' import '../style.less' import ReactECharts from 'echarts-for-react'; import moment from 'moment' import PerfectScrollbar from "perfect-scrollbar"; let interrupt let repair let overviewScrollbar; const Bigscreen = ({ dispatch, actions, user, match, history, clientHeight, groupStatisticOnline }) => { const [InterruptRank, setInterruptRank] = useState([]) const [online, setOnline] = useState([]) const [value, setValue] = useState([]) const [time, setTime] = useState([]) const [groupProject, setGroupProject] = useState([]) const [proportion, setProportion] = useState([]) const [formatter, setFormatter] = useState({}) const [alarmData, setAlarmData] = useState()//第三项之后的数据 const [biggest, setBiggest] = useState()//最大的刻度值 const [mockData, setMockData] = useState()//所有的告警数据 const [xData, setXData] = useState([])//横坐标 const self = useRef({ myChart: null }); useEffect(() => { let groupId = JSON.parse(localStorage.getItem('project_group'))?.find(v => user?.id == v.userId)?.projectGroupId statisticOnline(groupId) //计算当前时间，定时更新 timeRequest(groupId) dispatch(actions.projectGroup.groupStatisticAlarm({ groupId })).then(res => { if (res.success) { setMockData(res.payload.data) } }) dispatch(actions.projectGroup.groupProject({ groupId })).then(res => { if (res.success) { setGroupProject(res.payload.data?.map(v => ({ ...v, value: (Math.random() * 20).toFixed(0) })) || []) setProportion([...res.payload.data?.slice(0, 3)?.map(v => ({ name: v.name || v.pepProjectName, value: (Math.random() * 20).toFixed(0) })), { value: 20, name: '其它' }]) } }) const interruptDom = document.getElementById("interrupt"); if (interruptDom) { interrupt = new PerfectScrollbar("#interrupt", { suppressScrollX: true, }); } const repairDom = document.getElementById("repair"); if (repairDom) { repair = new PerfectScrollbar("#repair", { suppressScrollX: true, }); } }, []) useEffect(() => { const overview = document.getElementById("alarmRank"); if (overview) { overviewScrollbar = new PerfectScrollbar("#alarmRank", { suppressScrollX: true, }); } if (overviewScrollbar && overview) { overviewScrollbar.update(); } const interruptDom = document.getElementById("interrupt"); if (interrupt && interruptDom) { interrupt.update(); } const repairDom = document.getElementById("repair"); if (repair && repairDom) { interrupt.update(); } }) useEffect(() => { const maxCombinedValue = mockData?.reduce((max, item) => { const combinedMax = Math.max(item.alarmCount, item.dealAlarmCount); if (combinedMax > max) { return combinedMax; } return max; }, -Infinity) const bigD = Math.ceil(maxCombinedValue / 50) * 50 if (bigD == 0) { setXData([5, 4, 3, 2, 1, 0, 1, 2, 3, 4, 5])//最大值为0，默认横坐标 } else { setXData([bigD, (bigD - bigD / 5), (bigD - bigD * 2 / 5), (bigD - bigD * 3 / 5), (bigD - bigD * 4 / 5), 0, (bigD - bigD * 4 / 5), (bigD - bigD * 3 / 5), (bigD - bigD * 2 / 5), (bigD - bigD / 5), bigD]) } setBiggest(bigD) if (mockData && mockData.length > 3 && mockData.length < 21) { const newArray = mockData.slice(3) setAlarmData(newArray) } if (mockData && mockData.length > 21) { //数据大于20的话，取前20 const newArray = mockData.slice(3, 20) setAlarmData(newArray) } }, [mockData]) let statisticOnline = (groupId) => { dispatch(actions.projectGroup.groupStatisticOnline({ groupId })).then(res => { if (res.success) { let Interrupt = [] res.payload.data?.forEach(v => { if (v.offline?.id) { Interrupt.push({ name: v.name, ...v.offline }) } }) Interrupt = Interrupt?.sort((a, b) => b.offline - a.offline) setInterruptRank(Interrupt) setOnline(res.payload.data?.slice(0, 10) || []) setValue(res.payload.data?.map(v => v.id)?.slice(0, 10) || []) } }) } const timeRequest = (groupId) => { // 获取当前时间 const currentTime = moment(); // 获取下一个小时的时间 const nextHour = moment().add(1, 'hour').startOf('hour'); // 计算分钟差 const minuteDifference = nextHour.diff(currentTime, 'minutes'); setTimeout(function () { statisticOnline(groupId) timeRequest(groupId) }, 1000 * 60 * (minuteDifference + 1 || 61)); } useEffect(() => { let count = 0; let currentIndex = -1; if (!self.current.cityChart) return; const timer = setInterval(() => { count++; if (count == 8) { count = 1; } // 取消之前高亮的图形 self.current.cityChart.dispatchAction({ type: "downplay", seriesIndex: 0, dataIndex: currentIndex, }); currentIndex = (currentIndex + 1) % proportion?.length // 高亮当前图形 self.current.cityChart.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: currentIndex, }); // 显示 label self.current.cityChart.dispatchAction({ type: "showTip", seriesIndex: 0, dataIndex: currentIndex, }); }, 3000); return () => { clearInterval(timer); }; }, [proportion]); return (
{ setFormatter(values?.data) } // `${values.seriesName}
${values.marker} ${values.name} ${values.value}个(${values.percent}%)`, }, series: [ { // name: 'Access From', type: 'pie', radius: ['60%', '70%'], avoidLabelOverlap: false, itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 }, label: { show: false, position: 'center' }, // emphasis: { // label: { // show: true, // fontSize: 44, // fontWeight: 'bold' // } // }, labelLine: { show: false }, data: proportion || [], } ] }} notMerge onChartReady={(instance) => { self.current.cityChart = instance; }} lazyUpdate style={{ width: clientHeight * 0.55 - 300, height: clientHeight * 0.55 - 300 }} />
{formatter?.value}
{formatter?.name}
{proportion?.map((v, index) => { let color = ['rgb(53 100 209)', 'rgb(138 201 15)', 'rgb(239 204 77)', 'rgb(233 107 107)'] return
{v.name}
{v.value}次
})}
序号
工单名称
修复时长
{groupProject?.map((c, index) => { return index < 10 ?
NO.{index + 1}
{c.name || c.pepProjectName}（售后工单）
{c.value}h
: <> })}
{/*
*/}