react如何实现点击表格行数据时携带参数，跳转到另外一个页面？
** 需求描述**
如下图一大屏页面所示，点击红色框住的部分，携带agentID、agentIP、agentName参数跳转到图二的页面
大屏页面代码
/*
import * as React from 'react';
import styled, { css } from 'styled-components';
import * as URLUtils from 'util/URLUtils';
import ApiRoutes from 'routing/ApiRoutes';
import fetch from 'logic/rest/FetchProvider';
import 'assets/css/DataBigScreenPage.less';
import { DocumentTitle } from 'components/common';
import BarChart from 'views/components/dashboard/dataBigScreenChart/PictographBarChart';
import LineChart from 'views/components/dashboard/dataBigScreenChart/LineChart';
import PieChart from 'views/components/dashboard/dataBigScreenChart/3DPieChart';
import EarthChart from 'views/components/dashboard/dataBigScreenChart/EarthChart';
import ScrolledList from 'views/components/scrolledlist/ScrolledList';
import BigScreenTimeFilter from './BigScreenTimeFilter';
import SecondIcon from 'assets/second_icon.png';
import SecondTitle from 'assets/second_title.png';
import bg from 'assets/bg.png';
import logo from 'assets/dataBigLogo.png';
import recent7Log from 'assets/recent7Log.png';
import agentStatus from 'assets/agentStatus.png';
import alertLevel8 from 'assets/alertLevel8.png';
import alertTop5 from 'assets/alertTop5.png';
import alertTrend from 'assets/alertTrend.png';
import alertType from 'assets/alertType.png';
import logNumRank from 'assets/logNumRank.png';
import earthBottom from 'assets/earthBottom.png';
import earthLeft from 'assets/earthLeft.png';
import earthRight from 'assets/earthRight.png';
import earthLight from 'assets/earthLight.png';
import earthLogNum from 'assets/earthLogNum.png';
import earthAlertLevel8Num from 'assets/earthAlertLevel8Num.png';
import DemoEvent from 'util/DemoEvent'
const DataBigScreen = styled.span(() => css`
.wrapper {
// height: 100%;
background-image: url(${bg});
background-position: center 0;
background-size: cover;
overflow-y: auto;
padding: 15px;
}
.wrapper-bottom {
display: flex;
flex-wrap: wrap;
}
.wrapper-content {
display: flex;
flex-direction: column;
width: 30%;
margin-right: 1%;
color: black;
&:last-child {
margin-right: 0;
}
}
.col-3 {
width: 38%;
}
.info {
padding: 20px 8px 8px 8px;
.info-col {
display: flex;
flex-direction: column;
// justify-content: center;
margin-right: 10px;
width: 22%;
}
.info-col-con {
display: flex;
align-items: center;
margin-bottom: 30px;
img {
margin-right: 10px;
}
}
.liquidfill {
width: 33%;
}
.child-title {
font-size: 12px;
font-weight: lighter;
}
.number {
font-size: 12px;
font-weight: bold;
margin-bottom: 0;
}
}
.alert-list {
height: 500px;
overflow: auto;
padding: 8px;
&-title {
font-size: 12px;
font-weight: lighter;
}
&-item {}
.time {
display: flex;
align-items: center;
}
.circle {
width: 10px; /* 设置宽度 */
height: 10px; /* 设置高度 */
border-radius: 50%; /* 将边界变为圆角 */
background-color: #ff7800; /* 设置背景颜色为透明 */
position: relative; /* 相对定位 */
margin-right: 20px;
}
.circle::before {
content: ""; /* 必需属性，表示生成内容 */
display: block; /* 显示为块级元素 */
width: 6px; /* 设置前景图像的宽度 */
height: 6px; /* 设置前景图像的高度 */
border-radius: 50%; /* 将边界变为圆角 */
background-color: #fff; /* 设置前景图像的背景颜色 */
position: absolute; /* 绝对定位 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.line {
border-left: 1px solid #b6c2cd;
margin: 0 5px;
padding: 10px;
p {
background-color: #f8fafb;
padding: 5px;
}
}
}
.recent-alert-list {
height: 575px;
}
.earth {
height: 100%;
position: relative;
display: flex;
align-items: end;
justify-content: center;
.earth-num {
position: absolute;
display: flex;
width: 100%;
top: -17px;
justify-content: center;
img {
height: 110px;
}
.img-text {
position: absolute;
top: 38px;
left: 52%;
font-size: 12px;
color: #fff;
}
.earth-log-num, .earth-alert-num {
position: absolute;
top: 58px;
left: 55%;
font-size: 12px;
}
.earth-log-num {
color: #41e2ff;
}
.earth-alert-num {
color: #41ffc3
}
.earth-num-img {
position: relative;
}
}
.earth-bottom {
position: absolute;
width: 90%;
height: 204px;
bottom: 60px;
left: 50%;
right: 50%;
transform: translate(-50%, 50%);
}
.earth-left {
position: absolute;
left: 19px;
bottom: 80px;
}
.earth-right {
position: absolute;
right: 19px;
bottom: 80px;
}
.earth-light {
position: absolute;
width: 70%;
top: 54%;
transform: translate(-50%, -50%);
left: 50%;
right: 50%;
}
}
/* 修改滚动条宽度和颜色 */
.alert-list::-webkit-scrollbar {
width: 5px;
background-color: #f5f5f5;
}
/* 修改滚动条轨道颜色 */
.alert-list::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
/* 修改滚动条滑块颜色 */
.alert-list::-webkit-scrollbar-thumb {
background-color: #aeb8c1;
border-radius: 5px;
}
@media screen and (max-width: 1400px) {
.col-1, .col-2 {
width: 49.375%;
margin-right: 1.25%;
}
.col-2 {
margin-right: 0;
}
.col-3 {
width: 100%;
flex-direction: row;
margin-right: 0;
}
.col-3-item {
width: 100%;
margin-right: 1.25%;
&:last-child {
margin-right: 0;
}
}
.alert-list {
// height: 220px;
}
.recent-alert-list {
// height: 270px;
}
}
`);
interface Obj {
value: number,
name: string
}
interface LineChart {
xAxis: string[],
data: number[] | { [key: string]: number[] },
colors?: string[],
}
interface BarChart {
xAxis: string[],
data: number[]
}
// interface PieChart {
// legend: string[],
// color: string[],
// data: Obj[],
// type?: string
// }
class DataBigScreenPage extends React.Component<any, any> {
constructor(props) {
super(props);
this.state = {
// 24小时内告警趋势发展图
alertLine: {
xAxis: ["0-4", "4-8", "8-12", "12-16", "16-20", "20-24"],
data: {
'总数': [15, 120, 36, 110, 110, 20]
},
colors: ["#00aa72"]
},
// 总告警数
alertCount: 0,
// 高、中、低危数量
alertPriority: {},
// 告警饼图
alertPie: {},
// 告警柱状图
alertBar: {
xAxis: ['192.168', '192.168', '192.168.3.227']
},
alterLevelList: [], // 告警top5
alertLevel7: [], // 1-7级告警趋势
alertLevel8: [], // 8级告警趋势
alertEarth: [], // 地图数据
alertList: [],
alertListTotal: 0,
alertListParams: {
query: "",
filter: {alerts: "exclude",event_definitions:[]},
timerange:{range: 7*24*3600, type: "relative"},
page: 1,
per_page: 20
},
isRefreshAlertList: false,
alertListRecentTime: '',
alertChartParams: {
query: "",
filter: {alerts: "exclude"},
timerange:{range: 7*24*3600,
type: "relative"}
},
logChartParams: 7*24*3600,
logData: {
total: 0,
agentTotal: 0,
windowsTotal: 0, // Windows日志总数
linuxTotal: 0, // 服务器日志总数
linuxData: {}, // 日志发展趋势
linux: {}, // Linux日志饼图
// Windows安全日志柱状图
windows: {
series: [],
xAxis: []
},
},
agentStatus: {},
logBar: {
xAxis: [],
data: [],
colors: [],
}, // 近7天日志统计
top5AgentList: [], // 日志数量排名
analysisPlatData: {
cpu: {
used: "",
free: ""
},
mem: {
used: "",
free: ""
},
jvm: {
used: "",
free: ""
},
SysFile: {
used: "",
free: ""
},
logdata: {
used: ""
},
lognode: {
totalCount: 0,
inputCount: 0
},
}
}
this.receiveTimeFilter = this.receiveTimeFilter.bind(this)
}
componentDidMount() {
// 获取要交换位置的两个DOM节点
var nodeA = document.getElementById("nodeA"); // 第一个节点
var nodeB = document.getElementById("nodeB"); // 第二个节点
var nodeC = document.getElementById("nodeC"); // 第三个节点
var nodeD = document.getElementById("nodeD"); // 第四个节点
var nodeE = document.getElementById("nodeE"); // 第四个节点
if(document.documentElement.clientWidth < 1400) {
// 将第二个节点移动到第一个节点之前
nodeA.parentNode.insertBefore(nodeB, nodeA);
nodeD.parentNode.insertBefore(nodeC, nodeD.nextSibling);
} else {
nodeB.parentNode.insertBefore(nodeA, nodeB);
nodeE.parentNode.insertBefore(nodeC, nodeE.nextSibling);
}
window.addEventListener('resize', () => {
const w = document.documentElement.clientWidth;
if(w < 1400) {
// 将第二个节点移动到第一个节点之前
nodeA.parentNode.insertBefore(nodeB, nodeA);
nodeD.parentNode.insertBefore(nodeC, nodeD.nextSibling);
} else {
nodeB.parentNode.insertBefore(nodeA, nodeB);
nodeE.parentNode.insertBefore(nodeC, nodeE.nextSibling);
}
});
// 订阅事件
DemoEvent.addListener('timeFilter', this.receiveTimeFilter)
this.getAlertChart(this.state.alertChartParams)
this.getLogChart(this.state.logChartParams)
this.getAlertList(this.state.alertListParams)
this.getAnalysisPlatData()
this.time()
}
componentWillUnmount() {
// 取消订阅
DemoEvent.removeListener('timeFilter', this.receiveTimeFilter)
}
receiveTimeFilter(temTime, temTimeUnit) {
const unitObj = {
'秒': 1,
'分钟': 60,
'小时': 3600,
'天': 24 * 3600
}
let alertChartParams = this.state.alertChartParams
let alertListParams = this.state.alertListParams
alertChartParams.timerange.range = Number(temTime) * unitObj[temTimeUnit]
alertListParams.timerange.range = Number(temTime) * unitObj[temTimeUnit]
this.setState({alertChartParams: alertChartParams})
this.setState({alertListParams: alertListParams})
this.getAlertChart(this.state.alertChartParams)
this.getLogChart(Number(temTime) * unitObj[temTimeUnit])
this.setState({alertList: []})
this.getAlertList(this.state.alertListParams)
}
getAlertList(alertListParams) {
const alertListUrl = URLUtils.qualifyUrl(ApiRoutes.DashboardsApiController.alertList().url)
fetch('POST', alertListUrl, alertListParams)
.then((result) => {
const newAlertList = this.state.alertList.concat(result.data.data)
this.setState({alertList: newAlertList})
this.setState({alertListTotal: result.data.count})
this.setState({alertListRecentTime: result.refreshTime})
const newAlertListParams = Object.assign({}, this.state.alertListParams, { per_page: result.size})
this.setState({alertListParams: newAlertListParams})
})
}
getLogChart(time) {
const logChartUrl = URLUtils.qualifyUrl(ApiRoutes.DashboardsApiController.logChart(time).url)
fetch('GET', logChartUrl).then(result => {
const logData = {
total: result.logTotal,
agentTotal: result.agent,
// windowsTotal: result.windowsTotal, // Windows日志总数
// linuxTotal: result.linuxTotal, // 服务器日志总数
linuxData: result.log, // 近七天日志统计
linux: result.pieData, // agent状态
windows: {
xAxis:result.topAgent.xAxis,
series:result.topAgent.series
},// Windows安全日志柱状图
}
this.setState({logData})
this.setState({logBar: {
xAxis: this.state.logData.linuxData.xAxis,
data: this.state.logData.linuxData.data,
colors: ['#2191ca'],
}})
// 日志数量排名
this.setState({top5AgentList: result.top5AgentList})
const colors = ["#85f1c4", "#5aa4ff", "#17c4d7","#3e55ff","#79a2f4"]
// agent状态
const agentStatus = {
data: result.pieData.pieData.map((item, index)=> {
return {
name: item.name,
value: item.value,
itemStyle: {
color: colors[index]
}
}
}),
type: "agent"
}
this.setState({agentStatus})
})
}
getAlertChart(params) {
const alertChartUrl = URLUtils.qualifyUrl(ApiRoutes.DashboardsApiController.alertChart().url)
// 告警饼图、折线图、柱图
fetch('POST', alertChartUrl, params)
.then((result) => {
const xAxis = result.alertLine.map(item => {
return item.key;
})
const data = result.alertLine.map(item => {
return item.value;
})
const alertLine = {
xAxis,
data: {'总数': data},
colors: ["#00aa72"]
}
const colors = ["#85f1c4", "#5aa4ff", "#17c4d7","#3e55ff","#79a2f4"]
const alertPie = {
legend: result.alertPie.map(item => {
return item.key;
}),
data: result.alertPie.map((item, index)=> {
return {
name: item.key,
value: item.value,
itemStyle: {
color: colors[index]
}
}
}),
type: 'alert', // 和其他饼图做区分
}
const alertBar = {
xAxis: result.alertBar.map(item => {
return item.key;
}),
series: result.alertBar.map(item => {
return item.value;
}),
}
console.log(alertBar)
let alertPriority = {}
// result.alertPriority.forEach(element => {
// alertPriority[element.key] = element.value
// });
alertPriority=result.alertPriority
this.setState({alertPriority})
this.setState({alertLine})
this.setState({alertCount: result.alertCount})
this.setState({alertPie})
this.setState({alertBar})
this.setState({alterLevelList: result.alterLevelList}) // 告警top5
this.setState({alertLevel7: result.alertLevel7}) // 1-7级告警趋势
this.setState({alertLevel8: result.alertLevel8}) // 8级告警趋势
this.setState({alertEarth: result.alertEarth}) // 地图数据
});
}
getAnalysisPlatData() {
const analysisPlatDataUrl = URLUtils.qualifyUrl(ApiRoutes.DashboardsApiController.analysisPlatData().url)
fetch('GET', analysisPlatDataUrl)
.then((result) => {
this.setState({analysisPlatData: result.data})
})
}
//開始运行
time() {
let t = null;
clearTimeout(t);//清除定时器
let dt = new Date();
let h=dt.getHours();//获取时
let m=dt.getMinutes();//获取分
let s=dt.getSeconds();//获取秒]
document.getElementById("showTime").innerHTML = Appendzero(h)+":"+Appendzero(m)+":"+Appendzero(s);
function Appendzero(obj){
if(obj<10) return "0" +""+ obj;
else return obj;
}
t = setTimeout(() => {
this.time()
},1000); //设定定时器，循环运行
}
render() {
return (
<DocumentTitle title="大屏展示">
<DataBigScreen>
<div className='wrapper'>
<div className='wrapper-nav'>
<img src={logo}/>
<div className='nav-right'>
<BigScreenTimeFilter></BigScreenTimeFilter>
<div id="showTime" style={{fontSize: "30px",color: "#ffffff"}}>17:51:50</div>
</div>
</div>
<div className='wrapper-bottom'>
<div className='wrapper-content col-1' id='nodeA'>
<div className='card-panel'>
<div className="title-common">
<img src={SecondTitle}/>
<div className="title-content">
<img src={SecondIcon} />
<img className='title-icon' src={recent7Log} />
<h4>近七天日志统计</h4>
</div>
</div>
<div className='info'>
<BarChart props={this.state.logBar}></BarChart>
</div>
<span className="horn horn-top-left"></span>
<span className="horn horn-top-right"></span>
<span className="horn horn-bottom-left"></span>
<span className="horn horn-bottom-right"></span>
</div>
<div className='card-panel log-rank'>
<div className="title-common">
<img src={SecondTitle}/>
<div className="title-content">
<img src={SecondIcon} />
<img className='title-icon' src={logNumRank} />
<h4>日志数量排名</h4>
</div>
</div>
<div className="log-rank-content">
<div className="content-title">
<span></span>
<span>名称</span>
<span>IP</span>
<span>数量</span>
</div>
{this.state.top5AgentList.map((item:any, index:number) => (
<div key={index} className={'content-item' + '' + ((index + 1) % 2 === 0 ? ' opacity-4' : ' content-item-font')}>
<span>
<div className='trapezoid'>
<span className='trapezoid-num'>{index + 1}</span>
</div>
</span>
<span >{item.name}</span>
<span className="content-span">{item.ip}</span>
<span className="content-span">{item.count}</span>
</div>
))}
</div>
<span className="horn horn-top-left"></span>
<span className="horn horn-top-right"></span>
<span className="horn horn-bottom-left"></span>
<span className="horn horn-bottom-right"></span>
</div>
<div className='card-panel'>
<div className="title-common">
<img src={SecondTitle}/>
<div className="title-content">
<img src={SecondIcon} />
<img className='title-icon' src={agentStatus} />
<h4>Agent状态</h4>
</div>
</div>
{
this.state.agentStatus.data ? <PieChart props={this.state.agentStatus}></PieChart> : ""
}
<span className="horn horn-top-left"></span>
<span className="horn horn-top-right"></span>
<span className="horn horn-bottom-left"></span>
<span className="horn horn-bottom-right"></span>
</div>
</div>
<div className='wrapper-content col-3' id="nodeB">
<div className='card-panel col-3-item recent-alert-list' id='nodeE'>
<div className='earth'>
{
this.state.alertEarth.coords ? <EarthChart props={this.state.alertEarth}></EarthChart> : ""
}
<div className='earth-num'>
<div className='earth-num-img'>
<img src={earthLogNum} /> <p className='img-text'>日志数量</p> <p className='earth-log-num'>{this.state.logData.total}条</p>
</div>
<div className='earth-num-img'>
<img src={earthAlertLevel8Num} /> <p className='img-text'>8级以上告警</p> <p className='earth-alert-num'>{this.state.alertListTotal}次</p>
</div>
</div>
<img className='earth-bottom' src={earthBottom} />
<img className='earth-left' src={earthLeft} />
<img className='earth-right' src={earthRight} />
<img className='earth-light' src={earthLight} />
</div>
<span className="horn horn-top-left"></span>
<span className="horn horn-top-right"></span>
<span className="horn horn-bottom-left"></span>
<span className="horn horn-bottom-right"></span>
</div>
<div className='card-panel col-3-item' id="nodeC">
<div className="title-common">
<img src={SecondTitle}/>
<div className="title-content">
<img src={SecondIcon} />
<img className='title-icon' src={alertLevel8} />
<h4>最近8级以上告警列表</h4>
</div>
</div>
<ScrolledList props={this.state.alertList}></ScrolledList>
<span className="horn horn-top-left"></span>
<span className="horn horn-top-right"></span>
<span className="horn horn-bottom-left"></span>
<span className="horn horn-bottom-right"></span>
</div>
</div>
<div className='wrapper-content col-2' id="nodeD">
<div className='card-panel'>
<div className="title-common">
<img src={SecondTitle}/>
<div className="title-content">
<img src={SecondIcon} />
<img className='title-icon' src={alertType} />
<h4>告警类型分布</h4>
</div>
</div>
{
this.state.alertPie.data ? <PieChart props={this.state.alertPie}></PieChart> : ""
}
<span className="horn horn-top-left"></span>
<span className="horn horn-top-right"></span>
<span className="horn horn-bottom-left"></span>
<span className="horn horn-bottom-right"></span>
</div>
<div className='card-panel log-rank'>
<div className="title-common">
<img src={SecondTitle}/>
<div className="title-content">
<img src={SecondIcon} />
<img className='title-icon' src={alertTop5} />
<h4>告警Top5</h4>
</div>
</div>
<div className="log-rank-content">
<div className="content-title">
<span></span>
<span>名称</span>
<span>IP</span>
<span>数量</span>
</div>
{this.state.alterLevelList.map((item:any, index:number) => (
<div key={index} className={'content-item' + '' + ((index + 1) % 2 === 0 ? ' opacity-4' : ' content-item-font')}>
<span>
<div className='trapezoid'>
<span className='trapezoid-num'>{index + 1}</span>
</div>
</span>
<span >{item.name}</span>
<span className="content-span">{item.ip}</span>
<span className="content-span">{item.count}</span>
</div>
))}
</div>
<span className="horn horn-top-left"></span>
<span className="horn horn-top-right"></span>
<span className="horn horn-bottom-left"></span>
<span className="horn horn-bottom-right"></span>
</div>
<div className='card-panel'>
<div className="title-common">
<img src={SecondTitle}/>
<div className="title-content">
<img src={SecondIcon} />
<img className='title-icon' src={alertTrend} />
<h4>告警级别趋势</h4>
</div>
</div>
<div >
<LineChart props={{'1-7级告警趋势': this.state.alertLevel7, '8级告警趋势': this.state.alertLevel8}}></LineChart>
</div>
<span className="horn horn-top-left"></span>
<span className="horn horn-top-right"></span>
<span className="horn horn-bottom-left"></span>
<span className="horn horn-bottom-right"></span>
</div>
</div>
</div>
</div>
</DataBigScreen>
</DocumentTitle>
);
}
};
export default DataBigScreenPage;
