6 changed files with 221 additions and 6 deletions
@ -0,0 +1,170 @@ |
|||
import React, { useState, useEffect } from "react"; |
|||
import { connect } from "react-redux"; |
|||
import { SideSheet, Tabs, TabPane, Button, Table, Pagination } from "@douyinfe/semi-ui"; |
|||
import copy from "copy-to-clipboard"; |
|||
import moment from "moment"; |
|||
import PerfectScrollbar from "perfect-scrollbar"; |
|||
import ReactECharts from 'echarts-for-react'; |
|||
|
|||
let projectScrollbar; |
|||
|
|||
function SideSheets ({ dispatch, actions, close }) { |
|||
|
|||
const { problem } = actions; |
|||
const [clickStyle, setclickStyle] = useState(); |
|||
const [query, setQuery] = useState({ page: 1, pageSize: 10 }); |
|||
const [dataSource, setdataSource] = useState([]); |
|||
const [option, setOption] = useState({}); |
|||
|
|||
|
|||
|
|||
useEffect(() => { |
|||
dispatch(problem.getAlarmDataDetail({ alarmId: "fa7fd145-f251-3657-8176-8f8f04a92a96" })).then((res) => { |
|||
if (res?.success) { |
|||
console.log(res.payload.data); |
|||
setdataSource(res.payload.data); |
|||
projectScrollbar = new PerfectScrollbar("#Alarm", { |
|||
suppressScrollX: true, |
|||
}); |
|||
} |
|||
}); |
|||
dispatch(problem.getAlarmDataDetailAgg({ alarmId: "fa7fd145-f251-3657-8176-8f8f04a92a96" })).then((res) => { |
|||
if (res?.success) { |
|||
console.log(res.payload.data); |
|||
let data = { |
|||
xAxis: { |
|||
type: 'category', |
|||
name:"时间", |
|||
show :true, |
|||
data: res.payload.data.map(v=>v.hours) |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
name:"次数", |
|||
}, |
|||
series: [ |
|||
{ |
|||
data:res.payload.data.map(v=>v.count) , |
|||
type: 'line' |
|||
} |
|||
] |
|||
} |
|||
console.log(data); |
|||
setOption(data) |
|||
// setNvrDetails(res.payload.data); |
|||
} |
|||
}); |
|||
}, []); |
|||
|
|||
|
|||
useEffect(() => { |
|||
const domProject = document.getElementById("Alarm"); |
|||
if (domProject && projectScrollbar) { |
|||
projectScrollbar.update(); |
|||
} |
|||
}); |
|||
|
|||
let columns = [ |
|||
{ |
|||
title: "告警活动", |
|||
dataIndex: "AlarmState", |
|||
rowKey: 'AlarmState', |
|||
render: (_, r, index) => { |
|||
let data = { 0: '首次产生', 1: '持续产生', 2: '等级提升', 3: '自动恢复', 4: '人工恢复' } |
|||
return data[r.AlarmState] |
|||
}, |
|||
}, { |
|||
title: "告警信息", |
|||
dataIndex: "Content", |
|||
rowKey: 'Content', |
|||
}, { |
|||
title: "等级", |
|||
dataIndex: "CurrentLevel", |
|||
rowKey: 'CurrentLevel', |
|||
render: (_, r, index) => { |
|||
let data = { 1: '一级', 2: '二级', 3: '三级' } |
|||
return data[r.CurrentLevel] |
|||
}, |
|||
}, { |
|||
title: "产生时间", |
|||
dataIndex: "Time", |
|||
rowKey: 'Time', |
|||
render: (_, r, index) => moment(r.time).format("YYYY-MM-DD HH:MM:SS") |
|||
}, |
|||
] |
|||
|
|||
|
|||
|
|||
return ( |
|||
<SideSheet |
|||
visible={true} |
|||
title='' |
|||
style={{ background: "#F9FBFF", height: '100%' }} |
|||
size="large" |
|||
onCancel={() => { |
|||
close(); |
|||
}} |
|||
> |
|||
<Tabs type="line"> |
|||
<TabPane tab="告警信息" itemKey="1"> |
|||
<div id='Alarm' style={{ position: 'relative', height: document.body.clientHeight - 126 }}> |
|||
<Table |
|||
columns={columns} |
|||
dataSource={dataSource.slice((query.page - 1) * query.pageSize, query.page * query.pageSize)} |
|||
bordered={false} |
|||
empty="暂无数据" |
|||
style={{ padding: "0px 20px", }} |
|||
pagination={false} |
|||
onRow={(record, index) => { |
|||
if (index % 1 === 0) { |
|||
return { style: { background: '#FAFCFF' } } |
|||
} |
|||
}} |
|||
/> |
|||
<div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end', marginTop: 16 }}> |
|||
<span style={{ lineHeight: "30px", fontSize: 13 }}> |
|||
共{dataSource?.length || 0}条告警 |
|||
</span> |
|||
<Pagination |
|||
className="22" |
|||
total={dataSource?.length} |
|||
showSizeChanger |
|||
currentPage={query.page} |
|||
pageSizeOpts={[10, 20, 30, 40]} |
|||
onChange={(currentPage, pageSize) => { |
|||
console.log(currentPage, pageSize); |
|||
setQuery({ pageSize: pageSize, page: currentPage }); |
|||
}} |
|||
/> |
|||
</div> |
|||
<ReactECharts |
|||
option={option} |
|||
notMerge={true} |
|||
lazyUpdate={true} |
|||
theme={"theme_name"} |
|||
// onChartReady={this.onChartReadyCallback} |
|||
// onEvents={EventsDict} |
|||
// opts={} |
|||
/> |
|||
|
|||
</div> |
|||
|
|||
</TabPane> |
|||
<TabPane tab="工单信息" itemKey="2"> |
|||
</TabPane> |
|||
</Tabs> |
|||
</SideSheet> |
|||
); |
|||
} |
|||
|
|||
function mapStateToProps (state) { |
|||
const { auth, global, members } = state; |
|||
return { |
|||
// loading: members.isRequesting, |
|||
user: auth.user, |
|||
actions: global.actions, |
|||
global: global, |
|||
// members: members.data, |
|||
}; |
|||
} |
|||
export default connect(mapStateToProps)(SideSheets); |
|||
Loading…
Reference in new issue