free-sun
/
OperationalService
15
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

数据在线率和连续率修改

dev
wenlele 1 year ago
parent
bbf5a3546a
commit
695e463ba4
2 changed files with 150 additions and 175 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  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
View File

@ -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
{/* 数据在线率 */}
<div style={{ marginTop: 30, padding: 10, width: '50%', height: 350, position: "relative" }}>
<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) => {
setOnlineId(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) || [])
getStatisticOnline(v)
}}
optionList={pomsList}
/>
<Select showClear
filter
placeholder='结构物'
value={value}
multiple={true}
maxTagCount={1}
@ -634,8 +645,7 @@ const AlarmChart = ({ dispatch, actions, user, history, projectPoms, loading, so
optionList={onlineStruc}
onChange={v => {
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
{/* 数据连续率 */}
<div style={{ marginTop: 30, padding: 10, width: '50%', height: 350, position: "relative" }}>
<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) => {
setSuccessionId(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) || [])
getStrucSeries(v)
}}
optionList={pomsList}
/>
<Select showClear
<Select
filter
placeholder='结构物'
value={seriesValue}
multiple={true}
maxTagCount={1}
style={{ width: 160, marginRight: 10 }}
optionList={seriesStruc}
onChange={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) || [])
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 + "：" + "&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
}

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

@ -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
</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) => {
return (
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>
@ -800,7 +777,7 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
</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 }}>
{/* 项目 */}
@ -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>
<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) => {
return (
<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> */}
</SimpleBar>
</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 }}>
关联web应用
</div>
<div id='web' style={{ position: 'relative', height: 161 }}>
<SimpleBar id='member' style={{ height: 160, paddindRight: 20 }} forceVisible="y">
{
webList.map((item, index) => {
return (
<div key={index + 'webb'} style={{ marginBottom: 15, }}>
<div style={{ display: 'flex' }}>
<div style={{ width: 18, height: 18, marginRight: 8 }}>
<img src="/assets/images/console/icon_webpage.png" alt="web应用" style={{ width: '100%', height: '100%' }} />
</div>
<img style={{ width: 18, height: 18, marginRight: 8 }} src="/assets/images/console/icon_webpage.png" alt="web应用" />
<div style={{ color: '#646566', fontSize: 14, borderBottom: '1px dotted #0F7EFB' }}>
<a href={item.url} target="_blank">
{item.url}
@ -983,7 +961,8 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
)
})
}
</div>
</SimpleBar>
</div>
: ""}
{/* 异常&问题 */}
@ -1020,8 +999,7 @@ const Control = ({ dispatch, actions, user, history, loading, socket, pepProject
: ""}
</div>
</SimpleBar>
</> : ""}
</div></> : ""}
</div>
{/* 图表 */}

Write Preview
Loading…
Cancel
Save