11 changed files with 1544 additions and 236 deletions
@ -0,0 +1,774 @@ |
|||||
|
import React, { useEffect, useState, useRef } from 'react'; |
||||
|
import { connect } from 'react-redux'; |
||||
|
import { Timeline, Card, Button, Modal, Form, Tooltip, Select, Radio, RadioGroup } from '@douyinfe/semi-ui'; |
||||
|
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'; |
||||
|
|
||||
|
|
||||
|
|
||||
|
const AlarmChart = ({ dispatch, actions, user, history, projectPoms, loading, socket, pepProjectId, statisticOnline, strucSeries }) => { |
||||
|
|
||||
|
const { control, install, problem } = actions |
||||
|
const [setup, setSetup] = useState(false); //设置是否显现
|
||||
|
const [tableType, setTableType] = useState(''); //localStorage存储名
|
||||
|
const [tableSetup, setTableSetup] = useState([]); //单一表格设置信息
|
||||
|
const [long, setLong] = useState(''); //最新动态设置
|
||||
|
const [pomsList, setPomsList] = useState([]); //项目
|
||||
|
const [faultId, setFaultId] = useState(''); //项目id 故障数统计
|
||||
|
const [onlineId, setOnlineId] = useState(''); //项目id 数据在线率
|
||||
|
const [successionId, setSuccessionId] = useState(''); //项目id 数据连续率
|
||||
|
const [setData, setSetData] = useState(); //设置总数
|
||||
|
const [radioStatistics, setRadioStatistics] = useState('day'); //故障数统计（日，周，月）
|
||||
|
const [radioRank, setRadioRank] = useState('day'); //故障数排名（日，周，月）
|
||||
|
const [dataAlarm, setDataAlarm] = useState({}); //故障数统计--数据类
|
||||
|
const [videoAlarm, setVideoAlarm] = useState({}); //故障故障数统计--视频
|
||||
|
const [useAlarm, setUseAlarm] = useState({}); //故障故障数统计--应用
|
||||
|
const [behind, setBehind] = useState(true); //故障数统计下钻
|
||||
|
const [behindShow, setBehindShow] = useState([]); //故障数统计展示
|
||||
|
const [videoData, setVideoData] = useState([]); //视频故障统计
|
||||
|
const [datumData, setDatumData] = useState([]); //数据故障统计
|
||||
|
const [useData, setUseData] = useState([]); //应用故障统计
|
||||
|
const [rankData, setRankData] = useState([]); //故障排名
|
||||
|
|
||||
|
const [onlineStruc, setOnlineStruc] = useState([]) |
||||
|
const [online, setOnline] = useState([]) |
||||
|
const [value, setValue] = useState([]) |
||||
|
|
||||
|
const [seriesStruc, setSeriesStruc] = useState([]) |
||||
|
const [series, setSeries] = useState([]) |
||||
|
const [seriesValue, setSeriesValue] = useState([]) |
||||
|
|
||||
|
|
||||
|
|
||||
|
useEffect(() => { |
||||
|
if (projectPoms?.length > 0) { |
||||
|
let data = projectPoms?.filter(v => v.pepProjectIsDelete != 1)?.map(v => ({ value: v.id, label: v.pepProjectName || v.name })) |
||||
|
setPomsList(data) |
||||
|
} |
||||
|
}, [projectPoms]) |
||||
|
|
||||
|
useEffect(async () => { |
||||
|
if (projectPoms?.length > 0) { |
||||
|
let data = await getData('day', pepProjectId, true, true) |
||||
|
await getRank(data) |
||||
|
setRadioStatistics('day') |
||||
|
setRadioRank('day') |
||||
|
setFaultId('') |
||||
|
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 }))) |
||||
|
} else { |
||||
|
setPomsList(projectPoms?.filter(v => v.pepProjectIsDelete != 1)?.map(v => ({ value: v.id, label: v.pepProjectName || v.name }))) |
||||
|
} |
||||
|
} |
||||
|
}, [pepProjectId, projectPoms]) |
||||
|
|
||||
|
|
||||
|
useEffect(() => { |
||||
|
setOnlineId('') |
||||
|
dispatch(control.getStatisticOnline({ pepProjectId: onlineId || pepProjectId })).then(res => { |
||||
|
if (res.success) { |
||||
|
let data = res.payload.data?.filter(s => !onlineId || s.pomsProject?.map(p => p.id)?.includes(onlineId)) |
||||
|
setOnlineStruc(data?.map(v => ({ value: v.strucId, label: v.strucName })) || []) |
||||
|
setOnline(data?.slice(0, 10) || []) |
||||
|
setValue(data?.map(v => v.strucId)?.slice(0, 10) || []) |
||||
|
} |
||||
|
}) |
||||
|
}, [onlineId, pepProjectId]) |
||||
|
|
||||
|
useEffect(() => { |
||||
|
setSuccessionId('') |
||||
|
dispatch(control.getStrucSeries({ pepProjectId: successionId || pepProjectId })).then(res => { |
||||
|
if (res.success) { |
||||
|
let data = res.payload.data?.filter(s => !successionId || s.pomsProject?.map(p => p.id)?.includes(successionId)) |
||||
|
setSeriesStruc(data?.map(v => ({ value: v.strucId, label: v.strucName })) || []) |
||||
|
setSeries(data?.slice(0, 10) || []) |
||||
|
setSeriesValue(data?.map(v => v.strucId)?.slice(0, 10) || []) |
||||
|
} |
||||
|
}) |
||||
|
}, [successionId, pepProjectId]) |
||||
|
|
||||
|
const getRank = async (data) => { |
||||
|
let dataList = [] |
||||
|
if (pepProjectId && (!pepProjectId?.length || pepProjectId.split(",")?.length == 1) || projectPoms?.legend == 1) { |
||||
|
|
||||
|
data?.AlarmData?.filter(p => p.State < 3)?.forEach(s => { |
||||
|
let find = dataList?.find(a => a.StructureId == s.StructureId) |
||||
|
if (find) { |
||||
|
find.sum += 1 |
||||
|
} else { |
||||
|
dataList.push({ |
||||
|
StructureId: s.StructureId, |
||||
|
name: s.StructureName, |
||||
|
sum: 1 |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
data?.AlarmVideo?.filter(p => !p.confirmTime)?.forEach(s => { |
||||
|
s?.struc?.forEach(f => { |
||||
|
let find = dataList?.find(a => a.id == s.StructureId) |
||||
|
if (find) { |
||||
|
find.sum += 1 |
||||
|
} else { |
||||
|
dataList.push({ |
||||
|
StructureId: f.id, |
||||
|
name: f.name, |
||||
|
sum: 1 |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
} else { |
||||
|
projectPoms?.filter(v => v.pepProjectIsDelete != 1)?.forEach(d => { |
||||
|
let data1 = data?.AlarmData?.filter(v => v.pomsProject?.map(p => p.id)?.includes(d.id) && v.State < 3)?.length || 0 |
||||
|
let data2 = data?.AlarmVideo?.filter(v => v.pomsProject?.map(p => p.id)?.includes(d.id) && !v.confirmTime)?.length || 0 |
||||
|
dataList.push({ |
||||
|
name: d.name || d.pepProjectName, |
||||
|
sum: data1 + data2 |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
setRankData(dataList.sort((a, b) => b.sum - a.sum)?.slice(0, 5) || []) |
||||
|
} |
||||
|
|
||||
|
const getData = async (radio, pepProjectId, diff1, diff2) => { |
||||
|
let data = {} |
||||
|
await dispatch(control.getAlarmData({ |
||||
|
pepProjectId: pepProjectId, |
||||
|
startTime: moment().startOf(radio).format('YYYY-MM-DD HH:mm:ss') |
||||
|
})).then((res) => { |
||||
|
if (res.success) { |
||||
|
if (diff1) { |
||||
|
data.AlarmData = res.payload.data || [] |
||||
|
} |
||||
|
if (diff2) { |
||||
|
setDatumData(res.payload.data || []) |
||||
|
let group = { |
||||
|
group1: { sum: 0, untreated: 0 }, group2: { sum: 0, untreated: 0 }, group3: { sum: 0, untreated: 0 }, |
||||
|
group4: { sum: 0, untreated: 0 }, group5: { sum: 0, untreated: 0 } |
||||
|
} |
||||
|
res.payload.data?.forEach(v => { |
||||
|
group['group' + v.AlarmGroup].sum += 1 |
||||
|
if (v.State < 3) { |
||||
|
group['group' + v.AlarmGroup].untreated += 1 |
||||
|
} |
||||
|
}) |
||||
|
setDataAlarm(group) |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
|
||||
|
await dispatch(problem.getAlarmVideoList({ |
||||
|
pepProjectId: pepProjectId, |
||||
|
startTime: moment().startOf(radio).format('YYYY-MM-DD HH:mm:ss') |
||||
|
})).then((res) => { |
||||
|
if (res.success) { |
||||
|
if (diff1) { |
||||
|
data.AlarmVideo = res.payload.data || [] |
||||
|
} |
||||
|
if (diff2) { |
||||
|
setVideoData(res.payload.data || []) |
||||
|
let alarmData = { sum: 0, untreated: 0 } |
||||
|
res.payload.data?.forEach(v => { |
||||
|
alarmData.sum += 1 |
||||
|
if (!v.confirmTime) { |
||||
|
alarmData.untreated += 1 |
||||
|
} |
||||
|
}) |
||||
|
setVideoAlarm(alarmData) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
if (diff2) { |
||||
|
await dispatch(control.getAlarmUse({ |
||||
|
pepProjectId: pepProjectId, |
||||
|
startTime: moment().startOf(radio).format('YYYY-MM-DD HH:mm:ss') |
||||
|
})).then((res) => { |
||||
|
if (res.success) { |
||||
|
setUseData(res.payload.data || []) |
||||
|
let alarmData = { sum: 0, untreated: 0 } |
||||
|
res.payload.data?.forEach(v => { |
||||
|
alarmData.sum += 1 |
||||
|
if (!v.confirmTime) { |
||||
|
alarmData.untreated += 1 |
||||
|
} |
||||
|
}) |
||||
|
setUseAlarm(alarmData) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
return data |
||||
|
} |
||||
|
|
||||
|
|
||||
|
const behindHandle = (key) => { |
||||
|
let show = [] |
||||
|
switch (key) { |
||||
|
case '数据中段': |
||||
|
dispatch(problem.getAlarmDataGroup()).then((res) => { |
||||
|
if (res.success) { |
||||
|
let data = res.payload.data?.find(v => v.desc == '数据中断')?.unit || [] |
||||
|
let sumData = datumData?.filter(s => s.AlarmGroup == 1) || [] |
||||
|
data?.forEach(v => { |
||||
|
let dataList = sumData?.filter(s => s.AlarmGroupUnit == v.id) || [] |
||||
|
let untreated = dataList?.filter(s => s.State < 3)?.length || 0 |
||||
|
show.push({ |
||||
|
name: v.name, |
||||
|
untreated: untreated, |
||||
|
processed: dataList?.length - untreated, |
||||
|
num: dataList?.length |
||||
|
}) |
||||
|
}) |
||||
|
setBehindShow(show.sort((a, b) => b.num - a.num)?.slice(0, 5) || []) |
||||
|
} |
||||
|
}) |
||||
|
break; |
||||
|
case '数据异常': |
||||
|
dispatch(problem.getAlarmDataGroup()).then((res) => { |
||||
|
if (res.success) { |
||||
|
let data = res.payload.data?.find(v => v.desc == '数据异常')?.unit || [] |
||||
|
let sumData = datumData?.filter(s => s.AlarmGroup == 2) || [] |
||||
|
data?.forEach(v => { |
||||
|
let dataList = sumData?.filter(s => s.AlarmGroupUnit == v.id) || [] |
||||
|
let untreated = dataList?.filter(s => s.State < 3)?.length || 0 |
||||
|
show.push({ |
||||
|
name: v.name, |
||||
|
untreated: untreated, |
||||
|
processed: dataList?.length - untreated, |
||||
|
num: dataList?.length |
||||
|
}) |
||||
|
}) |
||||
|
setBehindShow(show.sort((a, b) => b.num - a.num)?.slice(0, 5) || []) |
||||
|
} |
||||
|
}) |
||||
|
break; |
||||
|
case '策略命中': |
||||
|
dispatch(problem.getAlarmDataGroup()).then((res) => { |
||||
|
if (res.success) { |
||||
|
let data = res.payload.data?.find(v => v.desc == '策略命中')?.unit || [] |
||||
|
let sumData = datumData?.filter(s => s.AlarmGroup == 3) || [] |
||||
|
data?.forEach(v => { |
||||
|
let dataList = sumData?.filter(s => s.AlarmGroupUnit == v.id) || [] |
||||
|
let untreated = dataList?.filter(s => s.State < 3)?.length || 0 |
||||
|
show.push({ |
||||
|
name: v.name, |
||||
|
untreated: untreated, |
||||
|
processed: dataList?.length - untreated, |
||||
|
num: dataList?.length |
||||
|
}) |
||||
|
}) |
||||
|
setBehindShow(show.sort((a, b) => b.num - a.num)?.slice(0, 5) || []) |
||||
|
} |
||||
|
}) |
||||
|
break; |
||||
|
case '视频异常': |
||||
|
dispatch(problem.getAlarmVideoExceptionType()).then((res) => { |
||||
|
if (res.success) { |
||||
|
res.payload.data?.forEach(v => { |
||||
|
let dataList = videoData?.filter(s => s.statusId == v.statusId) || [] |
||||
|
let untreated = dataList?.filter(s => !s.confirmTime)?.length || 0 |
||||
|
show.push({ |
||||
|
name: v.describe, |
||||
|
untreated: untreated, |
||||
|
processed: dataList?.length - untreated, |
||||
|
num: dataList?.length |
||||
|
}) |
||||
|
}) |
||||
|
setBehindShow(show.sort((a, b) => b.num - a.num)?.slice(0, 5) || []) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
setBehind(false) |
||||
|
|
||||
|
break; |
||||
|
case '应用异常': |
||||
|
[{ name: '接口报错', value: 'apiError ' }, |
||||
|
{ name: '加载超时', value: 'timeout' }, |
||||
|
{ name: '元素异常', value: 'element' }].forEach(v => { |
||||
|
let dataList = useData?.filter(s => s.type == v.value) || [] |
||||
|
let untreated = dataList?.filter(s => !s.confirmTime)?.length || 0 |
||||
|
show.push({ |
||||
|
name: v.name, |
||||
|
untreated: untreated, |
||||
|
processed: dataList?.length - untreated, |
||||
|
num: dataList?.length |
||||
|
}) |
||||
|
}) |
||||
|
setBehindShow(show.sort((a, b) => b.num - a.num)?.slice(0, 5) || []) |
||||
|
break; |
||||
|
case '设备异常': |
||||
|
dispatch(problem.getAlarmDataGroup()).then((res) => { |
||||
|
if (res.success) { |
||||
|
let data = res.payload.data?.find(v => v.desc == '掉线' || v.desc == '不活跃')?.unit || [] |
||||
|
let sumData = datumData?.filter(s => s.AlarmGroup == 4 || s.AlarmGroup == 5) || [] |
||||
|
data?.forEach(v => { |
||||
|
let dataList = sumData?.filter(s => s.AlarmGroupUnit == v.id) || [] |
||||
|
let untreated = dataList?.filter(s => s.State < 3)?.length || 0 |
||||
|
show.push({ |
||||
|
name: v.name, |
||||
|
untreated: untreated, |
||||
|
processed: dataList?.length - untreated, |
||||
|
num: dataList?.length |
||||
|
}) |
||||
|
}) |
||||
|
setBehindShow(show.sort((a, b) => b.num - a.num)?.slice(0, 5) || []) |
||||
|
} |
||||
|
}) |
||||
|
break; |
||||
|
} |
||||
|
setBehind(false) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
return (<> |
||||
|
{/* 数据分析 */} |
||||
|
{ |
||||
|
<div style={{ background: '#FFFFFF', boxShadow: '0px 0px 12px 2px rgba(220,222,224,0.2)', borderRadius: 2, paddingTop: 20, paddingLeft: 24, marginTop: 22 }}> |
||||
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> |
||||
|
<div style={{ display: 'flex', alignItems: 'center' }}> |
||||
|
<div style={{ width: 0, height: 20, borderLeft: '3px solid #005ABD', borderTop: '3px solid transparent', borderBottom: '3px solid transparent' }}></div> |
||||
|
<div style={{ fontFamily: "YouSheBiaoTiHei", fontSize: 24, color: '#101531', marginLeft: 8 }}>数据分析</div> |
||||
|
<div style={{ marginLeft: 6, fontSize: 12, color: '#969799', fontFamily: "DINExp", }}>DATA ANALYSIS</div> |
||||
|
</div> |
||||
|
{/* <div style={{ marginRight: 25 }}> |
||||
|
<img title='设置' src="/assets/images/problem/setup.png" style={{ width: 18, height: 18, cursor: "pointer" }} onClick={() => { |
||||
|
setSetup(true) |
||||
|
setTableType('analyse') |
||||
|
attribute('analyse') |
||||
|
setSetData(10) |
||||
|
}} /> |
||||
|
</div> */} |
||||
|
</div> |
||||
|
<div style={{ width: '100%', height: '100%', marginTop: 20 }}> |
||||
|
|
||||
|
<div style={{ display: "flex" }}> |
||||
|
{/* 故障数统计 */} |
||||
|
<div style={{ padding: 16, width: '50%', height: 300 }}> |
||||
|
{behind ? |
||||
|
<> |
||||
|
<div style={{ display: "flex", justifyContent: "space-between" }}> |
||||
|
<div style={{ fontSize: 18, fontWeight: 'bold', color: "#0b0b0bbd" }}>故障数统计</div> |
||||
|
<div> |
||||
|
<Select showClear filter placeholder='项目' value={faultId} style={{ width: 160, marginRight: 10 }} |
||||
|
onChange={(v) => { |
||||
|
setFaultId(v) |
||||
|
getData(radioStatistics, v, false, true) |
||||
|
}} |
||||
|
optionList={pomsList} |
||||
|
/> |
||||
|
<RadioGroup type='button' buttonSize='middle' value={radioStatistics} style={{ marginRight: 10 }} |
||||
|
onChange={e => { |
||||
|
setRadioStatistics(e.target.value) |
||||
|
getData(e.target.value, pepProjectId, false, true) |
||||
|
}} |
||||
|
> |
||||
|
<Radio value="day">今日</Radio> |
||||
|
<Radio value="week">本周</Radio> |
||||
|
<Radio value="month">本月</Radio> |
||||
|
</RadioGroup> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style={{ display: 'flex', padding: 16, height: "100%" }}> |
||||
|
<div style={{ display: "flex", flexDirection: "column", justifyContent: "space-evenly", width: 180 }}> |
||||
|
<div style={{ display: 'flex', justifyContent: "space-between", cursor: 'pointer' }} onClick={() => behindHandle('数据中段')}> |
||||
|
<div>数据中段：</div> |
||||
|
<div style={{ fontWeight: 500 }}> |
||||
|
<sapn style={{ color: "red" }}>{dataAlarm?.group1?.untreated || 0}</sapn> / |
||||
|
<span style={{ color: "rgb(48 47 138)" }}>{dataAlarm?.group1?.sum || 0}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style={{ display: 'flex', justifyContent: "space-between", cursor: 'pointer' }} onClick={() => behindHandle('数据异常')}> |
||||
|
<div>数据异常：</div> |
||||
|
<div style={{ fontWeight: 500 }}> |
||||
|
<sapn style={{ color: "red" }}>{dataAlarm?.group2?.untreated || 0}</sapn> / |
||||
|
<span style={{ color: "rgb(48 47 138)" }}>{dataAlarm?.group2?.sum || 0}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style={{ display: 'flex', justifyContent: "space-between", cursor: 'pointer' }} onClick={() => behindHandle('策略命中')}> |
||||
|
<div>策略命中：</div> |
||||
|
<div style={{ fontWeight: 500 }}> |
||||
|
<sapn style={{ color: "red" }}>{dataAlarm?.group3?.untreated || 0}</sapn> / |
||||
|
<span style={{ color: "rgb(48 47 138)" }}>{dataAlarm?.group3?.sum || 0}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div style={{ display: 'flex', justifyContent: "space-between", cursor: 'pointer' }} onClick={() => behindHandle('视频异常')}> |
||||
|
<div>视频异常：</div> |
||||
|
<div style={{ fontWeight: 500 }}> |
||||
|
<sapn style={{ color: "red" }}>{videoAlarm?.untreated || 0}</sapn> / |
||||
|
<span style={{ color: "rgb(48 47 138)" }}>{videoAlarm?.sum || 0}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style={{ display: 'flex', justifyContent: "space-between", cursor: 'pointer' }} onClick={() => behindHandle('应用异常')}> |
||||
|
<div>应用异常：</div> |
||||
|
<div style={{ fontWeight: 500 }}> |
||||
|
<sapn style={{ color: "red" }}>{useAlarm?.untreated || 0}</sapn> / |
||||
|
<span style={{ color: "rgb(48 47 138)" }}>{useAlarm?.sum || 0}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div style={{ display: 'flex', justifyContent: "space-between", cursor: 'pointer' }} onClick={() => behindHandle('设备异常')}> |
||||
|
<div>设备异常：</div> |
||||
|
<div style={{ fontWeight: 500 }}> |
||||
|
<sapn style={{ color: "red" }}>{(dataAlarm?.group4?.untreated || 0) + (dataAlarm?.group5?.untreated || 0)}</sapn> / |
||||
|
<span style={{ color: "rgb(48 47 138)" }}>{(dataAlarm?.group4?.sum || 0) + (dataAlarm?.group5?.sum || 0)}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div style={{ width: 'calc(100% - 180px)', display: 'flex', justifyContent: 'center', alignItems: 'center', fontSize: 46, fontWeight: 600 }}> |
||||
|
<div style={{ fontWeight: 500 }}> |
||||
|
|
||||
|
{(dataAlarm?.group1?.untreated || 0) |
||||
|
+ (dataAlarm?.group2?.untreated || 0) |
||||
|
+ (dataAlarm?.group3?.untreated || 0) |
||||
|
+ (dataAlarm?.group4?.untreated || 0) |
||||
|
+ (dataAlarm?.group5?.untreated || 0) |
||||
|
+ (videoAlarm?.untreated || 0) |
||||
|
+ (useAlarm?.untreated || 0) |
||||
|
} |
||||
|
/ |
||||
|
{(dataAlarm?.group1?.sum || 0) |
||||
|
+ (dataAlarm?.group2?.sum || 0) |
||||
|
+ (dataAlarm?.group3?.sum || 0) |
||||
|
+ (dataAlarm?.group4?.sum || 0) |
||||
|
+ (dataAlarm?.group5?.sum || 0) |
||||
|
+ (videoAlarm?.sum || 0) |
||||
|
+ (useAlarm?.sum || 0) |
||||
|
} |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</> |
||||
|
: <div onClick={() => { |
||||
|
setBehindShow([]) |
||||
|
setBehind(true) |
||||
|
}}> |
||||
|
<ReactECharts |
||||
|
option={{ |
||||
|
title: { |
||||
|
text: '故障数统计', |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '10%', |
||||
|
// right: '4%',
|
||||
|
// bottom: '3%',
|
||||
|
// containLabel: true
|
||||
|
}, |
||||
|
// dataZoom: [
|
||||
|
// {
|
||||
|
// type: 'slider',
|
||||
|
// // startValue: behindShow?.map(v => v.name) || []
|
||||
|
// },
|
||||
|
// {
|
||||
|
// type: 'inside',
|
||||
|
// },
|
||||
|
// ],
|
||||
|
tooltip: { |
||||
|
trigger: 'axis' |
||||
|
}, |
||||
|
legend: { |
||||
|
data: ['未处理', '已处理'], |
||||
|
right: '10%', |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'category', |
||||
|
// boundaryGap: false,
|
||||
|
data: behindShow?.map(v => v.name) || [] |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
name: "单位：条", |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'bar', |
||||
|
name: '未处理', |
||||
|
smooth: true, |
||||
|
itemStyle: { color: '#df4141', }, |
||||
|
barWidth: 20, |
||||
|
data: behindShow?.map(v => v.untreated) || [] |
||||
|
}, |
||||
|
{ |
||||
|
type: 'bar', |
||||
|
name: '已处理', |
||||
|
smooth: true, |
||||
|
itemStyle: { color: '#0ddf42', }, |
||||
|
barWidth: 20, |
||||
|
data: behindShow?.map(v => v.processed) || [] |
||||
|
}, |
||||
|
|
||||
|
] |
||||
|
}} |
||||
|
notMerge={true} |
||||
|
lazyUpdate={true} |
||||
|
// onChartReady={this.onChartReadyCallback}
|
||||
|
// onEvents={EventsDict}
|
||||
|
// opts={}
|
||||
|
/> |
||||
|
</div> |
||||
|
} |
||||
|
</div> |
||||
|
{/* 故障数排名*/} |
||||
|
<div style={{ padding: 10, width: '50%', height: 300, position: "relative" }}> |
||||
|
<RadioGroup type='button' buttonSize='middle' value={radioRank} style={{ marginRight: 10, zIndex: 10, position: "absolute", top: 8, left: 112 }} |
||||
|
onChange={async e => { |
||||
|
setRadioRank(e.target.value) |
||||
|
let data = await getData(e.target.value, pepProjectId, true, false) |
||||
|
await getRank(data) |
||||
|
}} |
||||
|
> |
||||
|
<Radio value="day">今日</Radio> |
||||
|
<Radio value="week">本周</Radio> |
||||
|
<Radio value="month">本月</Radio> |
||||
|
</RadioGroup> |
||||
|
<ReactECharts |
||||
|
option={{ |
||||
|
title: { |
||||
|
text: '故障数排名', |
||||
|
}, |
||||
|
grid: { |
||||
|
left: '10%', |
||||
|
// right: '4%',
|
||||
|
// bottom: '3%',
|
||||
|
// containLabel: true
|
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis' |
||||
|
}, |
||||
|
legend: { |
||||
|
data: ['故障数'], |
||||
|
right: '10%', |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'category', |
||||
|
data: rankData?.map(v => v.name) || [] |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'value', |
||||
|
}, |
||||
|
series: [ |
||||
|
{ |
||||
|
type: 'bar', |
||||
|
name: '故障数', |
||||
|
smooth: true, |
||||
|
itemStyle: { color: '#0ddf42', }, |
||||
|
barWidth: 20, |
||||
|
data: rankData?.map(v => v.sum) || [] |
||||
|
}, |
||||
|
|
||||
|
] |
||||
|
}} |
||||
|
notMerge={true} |
||||
|
lazyUpdate={true} |
||||
|
// onChartReady={this.onChartReadyCallback}
|
||||
|
// onEvents={EventsDict}
|
||||
|
// opts={}
|
||||
|
/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div style={{ display: "flex" }}> |
||||
|
{/* 数据在线率 */} |
||||
|
<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 }} |
||||
|
onChange={(v) => { |
||||
|
setOnlineId(v) |
||||
|
}} |
||||
|
optionList={pomsList} |
||||
|
/> |
||||
|
<Select showClear |
||||
|
filter |
||||
|
value={value} |
||||
|
multiple={true} |
||||
|
maxTagCount={1} |
||||
|
style={{ width: 160, marginRight: 10 }} |
||||
|
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))) |
||||
|
}} |
||||
|
/> |
||||
|
|
||||
|
</div> |
||||
|
<ReactECharts |
||||
|
option={{ |
||||
|
title: { |
||||
|
text: '数据在线率', |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 27, |
||||
|
right: 10, |
||||
|
bottom: 20, |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
formatter: function (params) { |
||||
|
// 自定义提示框内容
|
||||
|
// console.log(params);
|
||||
|
let title = params[0].data[0] + '<br/>' + '<br/>' |
||||
|
params.forEach(v => { |
||||
|
let find = online?.find(s => s.strucName == v.seriesName)?.online?.find(d => moment(d.collect_time).format('YYYY-MM-DD HH') == v.data[0]) || {} |
||||
|
title = title + v.seriesName + "：" + " " + " " + v.data[1] + "%" + "（" + find?.online + "/" + find?.total + "）" + '<br/>' |
||||
|
}) |
||||
|
return title |
||||
|
} |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'time', |
||||
|
// name: "时间",
|
||||
|
boundaryGap: false, |
||||
|
minInterval: 1000 * 60 * 60, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
name: "单位%", |
||||
|
areaStyle: { |
||||
|
color: '#FFF', |
||||
|
}, |
||||
|
}, |
||||
|
series: online?.map(v => ({ |
||||
|
type: 'line', |
||||
|
name: v.strucName, |
||||
|
smooth: true, |
||||
|
areaStyle: { |
||||
|
color: '#0e9cff26', |
||||
|
}, |
||||
|
data: v.online?.map(f => [moment(f.collect_time).format('YYYY-MM-DD HH'), f.rate.toFixed(1)]) || [] |
||||
|
})) || [] |
||||
|
}} |
||||
|
notMerge={true} |
||||
|
lazyUpdate={true} |
||||
|
style={{ width: "100%", height: "100%" }} |
||||
|
/> |
||||
|
|
||||
|
</div> |
||||
|
{/* 数据连续率 */} |
||||
|
<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 }} |
||||
|
onChange={(v) => { |
||||
|
setSuccessionId(v) |
||||
|
}} |
||||
|
optionList={pomsList} |
||||
|
/> |
||||
|
<Select showClear |
||||
|
filter |
||||
|
placeholder='结构物' |
||||
|
value={seriesValue} |
||||
|
multiple={true} |
||||
|
maxTagCount={1} |
||||
|
style={{ width: 160, marginRight: 10 }} |
||||
|
optionList={seriesStruc} |
||||
|
onChange={v => { |
||||
|
setSeriesValue(v) |
||||
|
let data = strucSeries?.filter(s => !onlineId || s.pomsProject?.map(p => p.id)?.includes(onlineId)) |
||||
|
setSeries(data?.filter(s => v.includes(s.strucId))) |
||||
|
}} |
||||
|
/> |
||||
|
|
||||
|
</div> |
||||
|
<ReactECharts |
||||
|
option={{ |
||||
|
title: { |
||||
|
text: '数据在线率', |
||||
|
}, |
||||
|
grid: { |
||||
|
left: 27, |
||||
|
right: 10, |
||||
|
bottom: 20, |
||||
|
}, |
||||
|
tooltip: { |
||||
|
trigger: 'axis', |
||||
|
formatter: function (params) { |
||||
|
// 自定义提示框内容
|
||||
|
// console.log(params);
|
||||
|
let title = params[0].data[0] + '<br/>' + '<br/>' |
||||
|
params.forEach(v => { |
||||
|
let find = series?.find(s => s.strucName == v.seriesName)?.series?.find(d => moment(d.collect_time).format('YYYY-MM-DD HH') == v.data[0]) || {} |
||||
|
title = title + v.seriesName + "：" + " " + " " + v.data[1] + "%" + "（" + find?.num + "/" + find?.tTotal + "）" + '<br/>' |
||||
|
}) |
||||
|
return title |
||||
|
} |
||||
|
}, |
||||
|
xAxis: { |
||||
|
type: 'time', |
||||
|
// name: "时间",
|
||||
|
boundaryGap: false, |
||||
|
minInterval: 1000 * 60 * 60, |
||||
|
}, |
||||
|
yAxis: { |
||||
|
type: 'value', |
||||
|
name: "单位%", |
||||
|
areaStyle: { |
||||
|
color: '#FFF', |
||||
|
}, |
||||
|
}, |
||||
|
series: series?.map(v => ({ |
||||
|
type: 'line', |
||||
|
name: v.strucName, |
||||
|
smooth: true, |
||||
|
areaStyle: { |
||||
|
color: '#0e9cff26', |
||||
|
}, |
||||
|
data: v.series?.map(f => [moment(f.collect_time).format('YYYY-MM-DD HH'), Number(f.cont)]) || [] |
||||
|
})) || [] |
||||
|
}} |
||||
|
notMerge={true} |
||||
|
lazyUpdate={true} |
||||
|
style={{ width: "100%", height: "100%" }} |
||||
|
/> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</div >} |
||||
|
|
||||
|
{/* 设置弹窗 */} |
||||
|
{ |
||||
|
setup && <Setup |
||||
|
tableType={tableType} |
||||
|
tableList={tableSetup} |
||||
|
layout={long} |
||||
|
data={setData} |
||||
|
close={() => { |
||||
|
setSetup(false); |
||||
|
attribute(tableType); |
||||
|
setTableType('') |
||||
|
setLong('') |
||||
|
}} |
||||
|
/> |
||||
|
} |
||||
|
</> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
function mapStateToProps (state) { |
||||
|
const { auth, global, members, webSocket, ProjectPoms, statisticOnline, strucSeries } = state; |
||||
|
|
||||
|
return { |
||||
|
user: auth.user, |
||||
|
actions: global.actions, |
||||
|
pepProjectId: global.pepProjectId, |
||||
|
socket: webSocket.socket, |
||||
|
projectPoms: ProjectPoms?.data?.rows, |
||||
|
statisticOnline: statisticOnline?.data || [], |
||||
|
strucSeries: strucSeries?.data || [] |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
export default connect(mapStateToProps)(AlarmChart); |
||||
Loading…
Reference in new issue