import React, { useEffect, useRef, useState } from 'react'; import { Skeleton, Button, Pagination, Select, Popconfirm, Table, Tooltip,Tabs,TabPane} from '@douyinfe/semi-ui'; import { IconChevronUpDown,IconChevronUp,IconChevronDown } from '@douyinfe/semi-icons' import { connect } from 'react-redux'; import { push } from 'react-router-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"; import AutoRollComponent from '../components/AutoRollComponent' let interrupt let repair let overviewScrollbar; const Bigscreen = (props) => { const { dispatch, actions, user, match, history, clientHeight, groupStatisticOnline, pomsProjectBasicAll, ...restProps } = props 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 [groupDetail, setGroupDetail] = useState({}) const [allProjects, setAllProjects] = useState([]) const [alarmData, setAlarmData] = useState()//第三项之后的数据 const [biggest, setBiggest] = useState()//最大的刻度值 const [mockData, setMockData] = useState()//所有的告警数据 const [xData, setXData] = useState([])//横坐标 const self = useRef({ myChart: null }); const [state, setState] = useState(0) const [interruptData,setInterruptData]=useState([]) const [avgTmes,setAvgTimes]=useState([])//平均修复时长数组 // const [queryUserId, setQueryUserId] = useState('') useEffect(() => { let groupIdLocal = JSON.parse(localStorage.getItem('project_group'))?.find(v => user?.id == v.userId)?.projectGroupId let search = restProps?.location?.search || ''; let params = new URLSearchParams(search); // let userId = params.get('pomsU') let groupId = params.get('pomsPG') // setQueryUserId(userId) let groupId_ = groupId || groupIdLocal statisticOnline(groupId_) //计算当前时间，定时更新 timeRequest(groupId_) dispatch(actions.projectGroup.groupStatisticAlarm({ groupId: groupId_ })).then(res => { if (res.success) { setMockData(res.payload.data) } }) // dispatch(actions.projectGroup.groupProject({ groupId: groupId_ })).then(res => { // if (res.success) { // // setProportion([...res.payload.data?.slice(0, 3)?.map(v => ({ name: v.name || v.pepProjectName, value: (Math.random() * 20).toFixed(0) })), { value: 20, name: '其它' }]) // } // }) dispatch(actions.projectGroup.getProjectGroupDetail(groupId_)).then(res => { if (res.success) { setGroupDetail(res.payload.data) } }) dispatch(actions.workOrder.getPomsProjectBasicAll()).then(res => { if (res.success) { setAllProjects(res.payload.data) } }) 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 > 21) { //数据大于20的话，取前20 const newArray = mockData.slice(0, 20) setAlarmData(newArray) } else { setAlarmData(mockData) } }, [mockData]) useEffect(() => { if (groupDetail?.pomsProjectIds && groupDetail?.pomsProjectIds.length && allProjects && allProjects.length) { const query = groupDetail?.pomsProjectIds + '' dispatch(actions.projectGroup.getProjectWorkOrders({ projectIds: query })).then(res => { if (res.success) { setProportion([...res.payload.data?.slice(0, 3)?.map(v => ({ name: allProjects?.find(item => item.value === v.projectId)?.label, value: Number(v.count) })), { name: '其它', value: res.payload.data && res.payload.data.length > 3 ? res.payload.data?.slice(3)?.reduce((p, c) => { return p + Number(c.count) }, 0) : 0 }]) } }) dispatch(actions.projectGroup.getWorkOrdersRepairRank({ projectIds: query })).then(res => { if (res.success) { setGroupProject(res.payload.data?.slice(0, 10).map(v => ({ name: v.formname, startTime: moment(v?.startTime).format('YYYY-MM-DD'), duration: moment(v?.endTime).add(8, 'hours').diff(v?.startTime, 'hours') })) || []) } }) //修复平均时长 dispatch(actions.projectGroup.getWorkOrdersAvgTimes({ projectIds: query })).then(res=>{ if (res.success) { const data=res.payload.data?.map(v=>{ return {projectName:allProjects?.find(item => item.value == v.project_id)?.label, avgTime: Math.ceil(v.avgTime / 60 / 60), project_id:v.project_id } }) setAvgTimes(data) } }) } }, [groupDetail, allProjects]) 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) =>a.offnum/a.totnum- b.offnum/b.totnum) setInterruptRank(Interrupt) setInterruptData(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)); } //中断排名排序相关 const topClick=(e)=>{ let data=[] interruptData.map(v=>{data.push(v)}) switch (e) { case 'perBottom': setInterruptRank(data.sort((a, b) => b.offnum/b.totnum-a.offnum/a.totnum)) setState(1) break; case 'perTop': setInterruptRank(data.sort((a, b) => a.offnum/a.totnum - b.offnum/b.totnum)) setState(0) break; case 'timeBottom': setInterruptRank(data.sort((a, b) => b.offline-a.offline )) setState(3) break; case 'timeTop': setInterruptRank(data.sort((a, b) => a.offline - b.offline )) setState(2) break; case 'countBottom': setInterruptRank(data.sort((a, b) => b.totnum-a.totnum )) setState(5) break; case 'countTop': setInterruptRank(data.sort((a, b) => a.totnum-b.totnum )) setState(4) break; default: return } } // console.log('sortOrder',sortOrder) 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 (
{/*
*/}