Browse Source

数据在线率和连续率修改

dev
wenlele 1 year ago
parent
commit
695e463ba4
  1. 103
      web/client/src/sections/control/components/alarm-chart.js
  2. 222
      web/client/src/sections/control/containers/control.jsx

103
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 { Setup, OutHidden } from "$components";
import ReactECharts from 'echarts-for-react'; import ReactECharts from 'echarts-for-react';
import moment from "moment"; import moment from "moment";
import SimpleBar from 'simplebar-react';
@ -63,35 +62,14 @@ const AlarmChart = ({ dispatch, actions, user, history, projectPoms, loading, so
setRadioStatistics('day') setRadioStatistics('day')
setRadioRank('day') setRadioRank('day')
setFaultId('') setFaultId('')
let ProjectId = pepProjectId ? (pepProjectId?.length > 0 ? pepProjectId.split(",")[0] : pepProjectId) : projectPoms[0]?.id
await dispatch(control.getStatisticOnline({ pepProjectId: pepProjectId })).then(res => { await getStatisticOnline(ProjectId) //始终获取一个项目的数据
if (res.success) { await getStrucSeries(ProjectId) //始终获取一个项目的数据
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) || [])
}
})
if (pepProjectId) { 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 }))) 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) { if (!pepProjectId?.length > 0 || pepProjectId.split(",")?.length == 1) {
setFaultId(Number(pepProjectId)) setFaultId(Number(pepProjectId))
setOnlineId(Number(pepProjectId))
setSuccessionId(Number(pepProjectId))
} }
} else { } else {
setPomsList(projectPoms?.filter(v => v.pepProjectIsDelete != 1)?.map(v => ({ value: v.id, label: v.pepProjectName || v.name }))) 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]) }, [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) => { const getRank = async (data) => {
let dataList = [] let dataList = []
@ -615,18 +629,15 @@ const AlarmChart = ({ dispatch, actions, user, history, projectPoms, loading, so
{/* 数据在线率 */} {/* 数据在线率 */}
<div style={{ marginTop: 30, padding: 10, width: '50%', height: 350, position: "relative" }}> <div style={{ marginTop: 30, padding: 10, width: '50%', height: 350, position: "relative" }}>
<div style={{ zIndex: 10, position: "absolute", top: 8, left: 112, display: 'flex' }}> <div style={{ zIndex: 10, position: "absolute", top: 8, left: 112, display: 'flex' }}>
<Select filter showClear placeholder='项目' value={onlineId} style={{ width: 160, marginRight: 10 }} <Select filter placeholder='项目' value={onlineId} style={{ width: 160, marginRight: 10 }}
onChange={(v) => { onChange={(v) => {
setOnlineId(v) getStatisticOnline(v)
let data = statisticOnline?.filter(s => !v || s.pomsProject?.map(p => p.id)?.includes(v))
setOnlineStruc(data?.map(v => ({ value: v.strucId, label: v.strucName })) || [])
setOnline(data?.slice(0, 10) || [])
setValue(data?.map(v => v.strucId)?.slice(0, 10) || [])
}} }}
optionList={pomsList} optionList={pomsList}
/> />
<Select showClear <Select showClear
filter filter
placeholder='结构物'
value={value} value={value}
multiple={true} multiple={true}
maxTagCount={1} maxTagCount={1}
@ -634,8 +645,7 @@ const AlarmChart = ({ dispatch, actions, user, history, projectPoms, loading, so
optionList={onlineStruc} optionList={onlineStruc}
onChange={v => { onChange={v => {
setValue(v) setValue(v)
let data = statisticOnline?.filter(s => !onlineId || s.pomsProject?.map(p => p.id)?.includes(onlineId)) setOnline(statisticOnline?.filter(s => s.structure == v))
setOnline(data?.filter(s => v.includes(s.strucId)))
}} }}
/> />
@ -695,37 +705,24 @@ const AlarmChart = ({ dispatch, actions, user, history, projectPoms, loading, so
{/* 数据连续率 */} {/* 数据连续率 */}
<div style={{ marginTop: 30, padding: 10, width: '50%', height: 350, position: "relative" }}> <div style={{ marginTop: 30, padding: 10, width: '50%', height: 350, position: "relative" }}>
<div style={{ zIndex: 10, position: "absolute", top: 8, left: 112, display: 'flex' }}> <div style={{ zIndex: 10, position: "absolute", top: 8, left: 112, display: 'flex' }}>
<Select filter showClear placeholder='项目' value={successionId} style={{ width: 160, marginRight: 10 }} <Select filter placeholder='项目' value={successionId} style={{ width: 160, marginRight: 10 }}
onChange={(v) => { onChange={(v) => {
setSuccessionId(v) getStrucSeries(v)
setSeriesValue('')
let data = strucSeries?.filter(s => !v || s?.struc?.pomsProject?.map(p => p.id)?.includes(v))
let struc = []
data?.forEach(f => {
if (!struc?.find(h => h.value == f.structure)) {
struc.push({ value: f.structure, label: f?.struc?.strucName })
}
})
setSeriesStruc(struc)
setSeries(data?.slice(0, 10) || [])
setSensorList(data?.slice(0, 10)?.map(v => ({ value: v.id, label: v.name })) || [])
setSensorValue(data?.slice(0, 10)?.map(d => d.id) || [])
}} }}
optionList={pomsList} optionList={pomsList}
/> />
<Select showClear <Select
filter filter
placeholder='结构物' placeholder='结构物'
value={seriesValue} value={seriesValue}
multiple={true}
maxTagCount={1} maxTagCount={1}
style={{ width: 160, marginRight: 10 }} style={{ width: 160, marginRight: 10 }}
optionList={seriesStruc} optionList={seriesStruc}
onChange={v => { onChange={v => {
setSeriesValue(v) 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) || []) 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) || []) setSensorValue(data?.slice(0, 10)?.map(d => d.id) || [])
}} }}
/> />
@ -739,7 +736,7 @@ const AlarmChart = ({ dispatch, actions, user, history, projectPoms, loading, so
optionList={sensorList} optionList={sensorList}
onChange={v => { onChange={v => {
setSensorValue(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 || []) setSeries(data || [])
}} }}
/> />
@ -763,7 +760,7 @@ const AlarmChart = ({ dispatch, actions, user, history, projectPoms, loading, so
params.forEach(v => { params.forEach(v => {
let find = series?.find(s => s.name == v.seriesName) || {} 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]) || {} let findOne = find?.series?.find(d => moment(d.collect_time).format('YYYY-MM-DD HH') == v.data[0]) || {}
title = title + find?.name + ":" + "&nbsp" + "&nbsp" + v.data[1] * 100 + "%" + "(" + findOne?.tTotal + "/" + (findOne?.num || findOne?.tTotal) + ")" + '<br/>' title = title + find?.name + ":" + "&nbsp" + "&nbsp" + v.data[1] * 100 + "%" + "(" + (findOne?.num || 0) + "/" + (findOne?.max || findOne?.num || 0) + ")" + '<br/>'
}) })
return title return title
} }

222
web/client/src/sections/control/containers/control.jsx

@ -200,7 +200,6 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
useEffect(() => { useEffect(() => {
consoleToollink()
// //
let data = ['overall', 'workbench', 'statistical', 'analyse', 'dynamic'] 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"); const domProject3 = document.getElementById("equipment");
if (domProject3) { if (domProject3) {
@ -259,32 +253,45 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
} }
}, []) }, [])
useEffect(() => { useEffect(() => {
async function concentration1 () { if (pepProjectId) setProjectId(pepProjectId)
if (pepProjectId) setProjectId(pepProjectId) //
// dispatch(control.getConsoleCount({ pepProjectId: pepProjectId })).then(res => {
await dispatch(control.getConsoleCount({ pepProjectId: pepProjectId })).then(res => { if (res.success) setWorkData(res.payload.data)
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()
}, [pepProjectId]) }, [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(() => { useEffect(() => {
async function concentration4 () { async function concentration4 () {
@ -316,53 +323,54 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
// --web // --web
await dispatch(control.getConsoleUser({ pepId: pepProjectId || projectId })).then(res => { await dispatch(control.getConsoleUser({ pepId: pepProjectId || projectId })).then(res => {
if (res.success) { if (res.success) {
if (res.payload.data?.personnel?.length > 5) { // if (res.payload.data?.personnel?.length > 5) {
setMemberList([...res.payload.data?.personnel, ...res.payload.data?.personnel]) // setMemberList([...res.payload.data?.personnel, ...res.payload.data?.personnel])
let membertop = 0 // let membertop = 0
let memberId = document.getElementById('member'); // let memberId = document.getElementById('member');
if (member) clearInterval(member) // if (member) clearInterval(member)
if (memberId) { // if (memberId) {
function startmember () { // function startmember () {
member = setInterval(() => { // member = setInterval(() => {
membertop += 5 // membertop += 5
memberId.scrollTop = membertop // memberId.scrollTop = membertop
if (memberId.scrollTop >= memberId.scrollHeight / 2) membertop = 0, memberId.scrollTop = membertop // if (memberId.scrollTop >= memberId.scrollHeight / 2) membertop = 0, memberId.scrollTop = membertop
}, 500); // }, 500);
memberId.onmouseover = () => clearInterval(member) // memberId.onmouseover = () => clearInterval(member)
} // }
memberId.onmouseout = () => startmember() // memberId.onmouseout = () => startmember()
setTimeout(startmember(), 1000); // setTimeout(startmember(), 1000);
} // }
} else { // } else {
setMemberList(res.payload.data?.personnel) setMemberList(res.payload.data?.personnel)
} // }
if (res.payload.data?.webApp?.length > 3) { // if (res.payload.data?.webApp?.length > 3) {
setWebList([...res.payload.data?.webApp, ...res.payload.data?.webApp]) // setWebList([...res.payload.data?.webApp, ...res.payload.data?.webApp])
let webtop = 0 // let webtop = 0
let webId = document.getElementById('web'); // let webId = document.getElementById('web');
if (web) clearInterval(web) // if (web) clearInterval(web)
let memberId = document.getElementById('member'); // if (webId) {
if (memberId) { // function webstart () {
function webstart () { // member = setInterval(() => {
member = setInterval(() => { // webtop += 5
webtop += 5 // webId.scrollTop = webtop
webId.scrollTop = webtop // if (webId.scrollTop >= webId.scrollHeight / 2) webtop = 0, webId.scrollTop = webtop
if (webId.scrollTop >= webId.scrollHeight / 2) webtop = 0, webId.scrollTop = webtop // }, 500);
}, 500); // webId.onmouseover = () => clearInterval(web)
webId.onmouseover = () => clearInterval(web) // }
} // webId.onmouseout = () => webstart()
webId.onmouseout = () => webstart() // setTimeout(webstart(), 1000);
setTimeout(webstart(), 1000); // }
} // } else {
} else { setWebList(res.payload.data?.webApp)
setWebList(res.payload.data?.webApp) // }
}
} }
}) })
} }
// concentration4() if (exhibition.current?.overall?.find(v => v.key == 'statistical')) {
}, [projectId]) concentration4()
}
}, [projectId, exhibition.current])
useEffect(() => { 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"); const domProject1 = document.getElementById("overviewCalc");
if (domProject1) { 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"); const domProject2 = document.getElementById("member");
if (domProject2) { 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 = { let Select = {
overall: ['workbench', 'statistical', 'dataAnalyse', 'analyse', 'dynamic', 'tool'], overall: ['workbench', 'statistical', 'dataAnalyse', 'analyse', 'dynamic', 'tool'],
@ -759,7 +736,7 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
</div> </div>
</div> </div>
{/* 循环类型 */} {/* 循环类型 */}
<div id='alarm' style={{ width: 'calc(100% - 200px)', position: 'relative', whiteSpace: 'nowrap', }}> <SimpleBar style={{ width: 'calc(100% - 200px)', whiteSpace: 'nowrap', }} forceVisible="x" >
{exhibition.current['workbench']?.map((item, index) => { {exhibition.current['workbench']?.map((item, index) => {
return ( return (
pepProjectId && item.name == '关注的项目' ? '' : <div key={item.name} style={{ background: item.img, backgroundSize: "100% 100%", display: "inline-block", width: 270, height: 135, marginRight: 26 }}> pepProjectId && item.name == '关注的项目' ? '' : <div key={item.name} style={{ background: item.img, backgroundSize: "100% 100%", display: "inline-block", width: 270, height: 135, marginRight: 26 }}>
@ -777,7 +754,7 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
) )
}) })
} }
</div> </SimpleBar>
</div> </div>
@ -800,7 +777,7 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
</div> </div>
</div> </div>
{/* 统计概览 */} {/* 统计概览 */}
<SimpleBar style={{ width: 'calc(100%)', height: 240 }} forceVisible="x" > <div id='overviewCalc' style={{ width: 'calc(100%)', position: 'relative' }}>
<div style={{ display: 'inline-flex', marginTop: 16 }}> <div style={{ display: 'inline-flex', marginTop: 16 }}>
{/* 项目 */} {/* 项目 */}
@ -893,7 +870,8 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
<div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold' }}> <div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold' }}>
相关成员 相关成员
</div> </div>
<div id='member' style={{ position: 'relative', height: 161 }}> <SimpleBar id='member' style={{ height: 160, }} forceVisible="y">
{/* <div id='member' style={{ position: 'relative', height: 161 }}> */}
{memberList?.map((item, index) => { {memberList?.map((item, index) => {
return ( return (
<div key={index + 'member'} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 15 }}> <div key={index + 'member'} style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 15 }}>
@ -918,7 +896,9 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
</div> </div>
) )
})} })}
</div> {/* </div> */}
</SimpleBar>
</div> </div>
: ""} : ""}
{/* 平台设备接入 */} {/* 平台设备接入 */}
@ -961,15 +941,13 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
<div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold', marginBottom: 15 }}> <div style={{ margin: '20px 0px 17px 0px', color: '#4A4A4A', fontSize: 16, fontWeight: 'bold', marginBottom: 15 }}>
关联web应用 关联web应用
</div> </div>
<div id='web' style={{ position: 'relative', height: 161 }}> <SimpleBar id='member' style={{ height: 160, paddindRight: 20 }} forceVisible="y">
{ {
webList.map((item, index) => { webList.map((item, index) => {
return ( return (
<div key={index + 'webb'} style={{ marginBottom: 15, }}> <div key={index + 'webb'} style={{ marginBottom: 15, }}>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<div style={{ width: 18, height: 18, marginRight: 8 }}> <img style={{ width: 18, height: 18, marginRight: 8 }} src="/assets/images/console/icon_webpage.png" alt="web应用" />
<img src="/assets/images/console/icon_webpage.png" alt="web应用" style={{ width: '100%', height: '100%' }} />
</div>
<div style={{ color: '#646566', fontSize: 14, borderBottom: '1px dotted #0F7EFB' }}> <div style={{ color: '#646566', fontSize: 14, borderBottom: '1px dotted #0F7EFB' }}>
<a href={item.url} target="_blank"> <a href={item.url} target="_blank">
{item.url} {item.url}
@ -983,7 +961,8 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
) )
}) })
} }
</div> </SimpleBar>
</div> </div>
: ""} : ""}
{/* 异常&问题 */} {/* 异常&问题 */}
@ -1020,8 +999,7 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
: ""} : ""}
</div> </div>
</SimpleBar> </div></> : ""}
</> : ""}
</div> </div>
{/* 图表 */} {/* 图表 */}

Loading…
Cancel
Save