diff --git a/web/client/src/sections/control/components/alarm-chart.js b/web/client/src/sections/control/components/alarm-chart.js index d1dfd9d..99c6ce4 100644 --- a/web/client/src/sections/control/components/alarm-chart.js +++ b/web/client/src/sections/control/components/alarm-chart.js @@ -5,7 +5,6 @@ import { push } from 'react-router-redux'; import { Setup, OutHidden } from "$components"; import ReactECharts from 'echarts-for-react'; import moment from "moment"; -import SimpleBar from 'simplebar-react'; @@ -63,35 +62,14 @@ const AlarmChart = ({ dispatch, actions, user, history, projectPoms, loading, so setRadioStatistics('day') setRadioRank('day') setFaultId('') - - await dispatch(control.getStatisticOnline({ pepProjectId: pepProjectId })).then(res => { - if (res.success) { - setOnlineId('') - let data = res.payload.data - setOnlineStruc(data?.map(v => ({ value: v.strucId, label: v.strucName })) || []) - setOnline(data?.slice(0, 10) || []) - setValue(data?.map(v => v.strucId)?.slice(0, 10) || []) - } - }) - - await dispatch(control.getStrucSeries({ pepProjectId: pepProjectId })).then(res => { - if (res.success) { - setSuccessionId('') - setSeriesValue('') - let data = res.payload.data?.filter(s => !successionId || s?.struc?.pomsProject?.map(p => p.id)?.includes(successionId)) - setSeriesStruc(data?.map(v => ({ value: v.id, label: v.name })) || []) - setSeries(data?.slice(0, 10) || []) - setSensorList(data?.map(v => ({ value: v.id, label: v.name })) || []) - setSensorValue(data?.map(v => v.id)?.slice(0, 10) || []) - } - }) + let ProjectId = pepProjectId ? (pepProjectId?.length > 0 ? pepProjectId.split(",")[0] : pepProjectId) : projectPoms[0]?.id + await getStatisticOnline(ProjectId) //始终获取一个项目的数据 + await getStrucSeries(ProjectId) //始终获取一个项目的数据 if (pepProjectId) { setPomsList(projectPoms?.filter(v => v.pepProjectIsDelete != 1 && ((pepProjectId?.length > 0 ? pepProjectId.split(",")?.map(p => Number(p)) : [pepProjectId]).includes(v.id)))?.map(v => ({ value: v.id, label: v.pepProjectName || v.name }))) if (!pepProjectId?.length > 0 || pepProjectId.split(",")?.length == 1) { setFaultId(Number(pepProjectId)) - setOnlineId(Number(pepProjectId)) - setSuccessionId(Number(pepProjectId)) } } else { setPomsList(projectPoms?.filter(v => v.pepProjectIsDelete != 1)?.map(v => ({ value: v.id, label: v.pepProjectName || v.name }))) @@ -101,6 +79,42 @@ const AlarmChart = ({ dispatch, actions, user, history, projectPoms, loading, so }, [pepProjectId, projectPoms]) + //数据在线率 + const getStatisticOnline = async (id) => { + await dispatch(control.getStatisticOnline({ pepProjectId: id })).then(res => { + if (res.success) { + setOnlineId(Number(id)) + let data = res.payload.data + setOnlineStruc(data?.map(v => ({ value: v.strucId, label: v.strucName })) || []) + setOnline(data?.slice(0, 10) || []) + setValue(data?.map(v => v.strucId)?.slice(0, 10) || []) + } + }) + } + + //数据连续率 + const getStrucSeries = async (id) => { + await dispatch(control.getStrucSeries({ pepProjectId: id })).then(res => { + if (res.success) { + let data = res.payload.data + setSuccessionId(Number(id)) + let struc = [] + data?.forEach(f => { + if (!struc?.find(h => h.value == f.structure)) { + struc.push({ value: f.structure, label: f?.struc?.strucName }) + } + }) + setSeriesStruc(struc) + setSeriesValue(struc[0]?.value) + let findStruc = data?.filter(d => d.structure == struc[0]?.value) + setSeries(findStruc?.slice(0, 10) || []) + setSensorList(findStruc?.map(v => ({ value: v.id, label: v.name })) || []) + setSensorValue(findStruc?.map(v => v.id)?.slice(0, 10) || []) + } + }) + } + + const getRank = async (data) => { let dataList = [] @@ -615,18 +629,15 @@ const AlarmChart = ({ dispatch, actions, user, history, projectPoms, loading, so {/* 数据在线率 */}
- { setValue(v) - let data = statisticOnline?.filter(s => !onlineId || s.pomsProject?.map(p => p.id)?.includes(onlineId)) - setOnline(data?.filter(s => v.includes(s.strucId))) + setOnline(statisticOnline?.filter(s => s.structure == v)) }} /> @@ -695,37 +705,24 @@ const AlarmChart = ({ dispatch, actions, user, history, projectPoms, loading, so {/* 数据连续率 */}
- { setSeriesValue(v) - let data = strucSeries?.filter(s => (!v.length > 0 || v.includes(s.structure)) && (!successionId || s.pomsProject?.map(p => p.id)?.includes(successionId))) + let data = strucSeries?.filter(s => v == s.structure) setSeries(data?.slice(0, 10) || []) - setSensorList(data?.slice(0, 10)?.map(v => ({ value: v.id, label: v.name })) || []) + setSensorList(data?.map(v => ({ value: v.id, label: v.name })) || []) setSensorValue(data?.slice(0, 10)?.map(d => d.id) || []) }} /> @@ -739,7 +736,7 @@ const AlarmChart = ({ dispatch, actions, user, history, projectPoms, loading, so optionList={sensorList} onChange={v => { setSensorValue(v) - let data = strucSeries?.filter(s => (!v.length > 0 || v.includes(s.id)) && (!seriesValue?.length > 0 || seriesValue?.includes(s.structure)) && (!successionId || s.pomsProject?.map(p => p.id)?.includes(successionId))) + let data = strucSeries?.filter(s => (!v.length > 0 || v.includes(s.id)) && seriesValue == s.structure) setSeries(data || []) }} /> @@ -763,7 +760,7 @@ const AlarmChart = ({ dispatch, actions, user, history, projectPoms, loading, so params.forEach(v => { let find = series?.find(s => s.name == v.seriesName) || {} let findOne = find?.series?.find(d => moment(d.collect_time).format('YYYY-MM-DD HH') == v.data[0]) || {} - title = title + find?.name + "：" + " " + " " + v.data[1] * 100 + "%" + "（" + findOne?.tTotal + "/" + (findOne?.num || findOne?.tTotal) + "）" + '
' + title = title + find?.name + "：" + " " + " " + v.data[1] * 100 + "%" + "（" + (findOne?.num || 0) + "/" + (findOne?.max || findOne?.num || 0) + "）" + '
' }) return title } diff --git a/web/client/src/sections/control/containers/control.jsx b/web/client/src/sections/control/containers/control.jsx index 3cd3f79..7ae3ae3 100644 --- a/web/client/src/sections/control/containers/control.jsx +++ b/web/client/src/sections/control/containers/control.jsx @@ -200,7 +200,6 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject useEffect(() => { - consoleToollink() //初始化表格显示设置 let data = ['overall', 'workbench', 'statistical', 'analyse', 'dynamic'] @@ -218,12 +217,7 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject }); } - const domProject2 = document.getElementById("member"); - if (domProject2) { - memberScrollbar = new PerfectScrollbar("#member", { - suppressScrollX: true, - }); - } + const domProject3 = document.getElementById("equipment"); if (domProject3) { @@ -259,32 +253,45 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject } }, []) + + useEffect(() => { - async function concentration1 () { - if (pepProjectId) setProjectId(pepProjectId) - // 工作台数据请求 - await dispatch(control.getConsoleCount({ pepProjectId: pepProjectId })).then(res => { - if (res.success) setWorkData(res.payload.data) - }) - // 查询BI分析数据-数据 - await dispatch(control.getDataAlarmsAggDay({ pepProjectId: pepProjectId })).then(res => { - if (res.success) setDataBI(res.payload.data) - }) - // 查询BI分析数据-视频异常 - await dispatch(control.getVideoAlarmsAggDay({ pepProjectId: pepProjectId })).then(res => { - if (res.success) setVideoBI(res.payload.data) - }) - // 查询BI分析数据-应用 - await dispatch(control.getAppAlarmsAggDay({ pepProjectId: pepProjectId })).then(res => { - if (res.success) setAppBI(res.payload.data) - }) - await dispatch(control.getAlarmsHandleStatistics({ projectCorrelationId: pepProjectId })).then(res => { - if (res.success) setEfficiencyBI(res.payload.data[0]) - }) - } - concentration1() + if (pepProjectId) setProjectId(pepProjectId) + // 工作台数据请求 + dispatch(control.getConsoleCount({ pepProjectId: pepProjectId })).then(res => { + if (res.success) setWorkData(res.payload.data) + }) }, [pepProjectId]) + useEffect(() => { + if (exhibition.current?.overall?.find(v => v.key == 'tool')) { + consoleToollink() + } + }, [exhibition.current]) + + useEffect(() => { + async function concentration2 () { + if (exhibition.current?.overall?.find(v => v.key == 'analyse')) { + // 查询BI分析数据-数据 + await dispatch(control.getDataAlarmsAggDay({ pepProjectId: pepProjectId })).then(res => { + if (res.success) setDataBI(res.payload.data) + }) + // 查询BI分析数据-视频异常 + await dispatch(control.getVideoAlarmsAggDay({ pepProjectId: pepProjectId })).then(res => { + if (res.success) setVideoBI(res.payload.data) + }) + // 查询BI分析数据-应用 + await dispatch(control.getAppAlarmsAggDay({ pepProjectId: pepProjectId })).then(res => { + if (res.success) setAppBI(res.payload.data) + }) + await dispatch(control.getAlarmsHandleStatistics({ projectCorrelationId: pepProjectId })).then(res => { + if (res.success) setEfficiencyBI(res.payload.data[0]) + }) + } + } + concentration2() + }, [pepProjectId, exhibition.current]) + useEffect(() => { async function concentration4 () { @@ -316,53 +323,54 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject // 统计概览--相关成员与web应用 await dispatch(control.getConsoleUser({ pepId: pepProjectId || projectId })).then(res => { if (res.success) { - if (res.payload.data?.personnel?.length > 5) { - setMemberList([...res.payload.data?.personnel, ...res.payload.data?.personnel]) - - let membertop = 0 - let memberId = document.getElementById('member'); - if (member) clearInterval(member) - if (memberId) { - function startmember () { - member = setInterval(() => { - membertop += 5 - memberId.scrollTop = membertop - if (memberId.scrollTop >= memberId.scrollHeight / 2) membertop = 0, memberId.scrollTop = membertop - }, 500); - memberId.onmouseover = () => clearInterval(member) - } - memberId.onmouseout = () => startmember() - setTimeout(startmember(), 1000); - } - } else { - setMemberList(res.payload.data?.personnel) - } - if (res.payload.data?.webApp?.length > 3) { - setWebList([...res.payload.data?.webApp, ...res.payload.data?.webApp]) - let webtop = 0 - let webId = document.getElementById('web'); - if (web) clearInterval(web) - let memberId = document.getElementById('member'); - if (memberId) { - function webstart () { - member = setInterval(() => { - webtop += 5 - webId.scrollTop = webtop - if (webId.scrollTop >= webId.scrollHeight / 2) webtop = 0, webId.scrollTop = webtop - }, 500); - webId.onmouseover = () => clearInterval(web) - } - webId.onmouseout = () => webstart() - setTimeout(webstart(), 1000); - } - } else { - setWebList(res.payload.data?.webApp) - } + // if (res.payload.data?.personnel?.length > 5) { + // setMemberList([...res.payload.data?.personnel, ...res.payload.data?.personnel]) + + // let membertop = 0 + // let memberId = document.getElementById('member'); + // if (member) clearInterval(member) + // if (memberId) { + // function startmember () { + // member = setInterval(() => { + // membertop += 5 + // memberId.scrollTop = membertop + // if (memberId.scrollTop >= memberId.scrollHeight / 2) membertop = 0, memberId.scrollTop = membertop + // }, 500); + // memberId.onmouseover = () => clearInterval(member) + // } + // memberId.onmouseout = () => startmember() + // setTimeout(startmember(), 1000); + // } + // } else { + setMemberList(res.payload.data?.personnel) + // } + // if (res.payload.data?.webApp?.length > 3) { + // setWebList([...res.payload.data?.webApp, ...res.payload.data?.webApp]) + // let webtop = 0 + // let webId = document.getElementById('web'); + // if (web) clearInterval(web) + // if (webId) { + // function webstart () { + // member = setInterval(() => { + // webtop += 5 + // webId.scrollTop = webtop + // if (webId.scrollTop >= webId.scrollHeight / 2) webtop = 0, webId.scrollTop = webtop + // }, 500); + // webId.onmouseover = () => clearInterval(web) + // } + // webId.onmouseout = () => webstart() + // setTimeout(webstart(), 1000); + // } + // } else { + setWebList(res.payload.data?.webApp) + // } } }) } - // concentration4() - }, [projectId]) + if (exhibition.current?.overall?.find(v => v.key == 'statistical')) { + concentration4() + } + }, [projectId, exhibition.current]) useEffect(() => { //查询最新动态 @@ -420,7 +428,10 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject }) } } - // concentration3() + + if (exhibition.current?.overall?.find(v => v.key == 'dynamic')) { + concentration3() + } const domProject1 = document.getElementById("overviewCalc"); if (domProject1) { @@ -529,12 +540,7 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject } } - const domProject1 = document.getElementById("overviewCalc"); - if (domProject1) { - if (domProject1 && overviewScrollbar) { - overviewScrollbar.update(); - } - } + const domProject2 = document.getElementById("member"); if (domProject2) { @@ -582,35 +588,6 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject }) } - //轮播 - function startmarquee (name) { - /* - 函数startmarquee的参数： - lh：文字一次向上滚动的距离或高度； - speed：滚动速度； - delay：滚动停顿的时间间隔； - index：可以使封装后的函数应用于页面当中不同的元素； - */ - let t; - let p = false - let top = 0 - let o = document.getElementById(name); - if (t) clearInterval(t) - if (o) { - function start () { - t = setInterval(() => { - top += 5 - o.scrollTop = top - if (o.scrollTop >= o.scrollHeight / 2) top = 0, o.scrollTop = top - }, 500); - o.onmouseover = () => clearInterval(t) - } - o.onmouseout = () => start() - setTimeout(start(), 1000); - } - } - - let Select = { overall: ['workbench', 'statistical', 'dataAnalyse', 'analyse', 'dynamic', 'tool'], @@ -759,7 +736,7 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
{/* 循环类型 */} -
+ {exhibition.current['workbench']?.map((item, index) => { return ( pepProjectId && item.name == '关注的项目' ? '' :
@@ -777,7 +754,7 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject ) }) } -
+
@@ -800,7 +777,7 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
{/* 统计概览 */} - +
{/* 项目 */} @@ -893,7 +870,8 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
相关成员
-
+ + {/*
*/} {memberList?.map((item, index) => { return (
@@ -918,7 +896,9 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
) })} -
+ {/*
*/} + +
: ""} {/* 平台设备接入 */} @@ -961,15 +941,13 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
关联web应用
- : ""}
{/* 图表 */}