每次表格展示五個(gè)數(shù)據(jù)，不斷輪詢(xún)
如果數(shù)據(jù)為空，則表格內(nèi)容顯示“沒(méi)內(nèi)容“
當(dāng)單元格內(nèi)容為告警時(shí)，這個(gè)單元格的樣式改變，字體傾斜，并且背景顏色變成紅色
import React from 'react'
import './styles/'
import Red from './images/red.png'
import Blue from './images/blue.png'
import Yellow from './images/yellow.png'
class Table extends React.Component {
constructor() {
super();
this.state = {
tableHead: [],
tableBody: []
}
this.tableTimer = null;
}
render() {
let backgroundColor = ['rgba(56,145,255,0.1)','rgba(0,0,0,0)'];
let tdStyle = {
height:60,
fontSize: 20,
color: 'rgba(255,255,255,0.6)',
};
let tdStyleOdd = {
...tdStyle,
backgroundColor: backgroundColor[1],
};
let tdStyleEven = {
...tdStyle,
backgroundColor: backgroundColor[0],
};
let thStyle = {
textAlign: 'center',
fontSize: 20,
height:32
}
let emptyTdStyle = {
width: 500,
height:300,
fontSize: 30,
//backgroundColor: 'rgba(255,255,255,1)',
textAlign: 'center'
}
let imgSmall = {
width: 18,
height:18
}
let emptyContent = (
<tr>
<td colSpan={6} // 跨列
style={emptyTdStyle}>當(dāng)前無(wú)告警</td>
</tr>
);
let tableHead = this.state.tableHead&&this.state.tableHead.length !==0
&&this.state.tableHead.map(function (head,index) {
if(head == 'index'){
//return '序號(hào)';
return (<th style= {{
...thStyle,
width:70
}} key={index}>序號(hào)</th>)
} else if (head == 'type') {
//return '任務(wù)名稱(chēng)';
return (<th style= {{
...thStyle,
width:180
}} key={index}>任務(wù)名稱(chēng)</th>)
} else if (head == 'level') {
//return '告警等級(jí)';
return (<th style= {{
...thStyle,
width:80
}} key={index}>告警等級(jí)</th>)
} else if (head == 'message') {
//return '告警信息';
return (<th style= {{
...thStyle,
width:237
}} key={index}>告警信息</th>)
}
})
const showCell = function(cell,index) {
//
}
let tableBody = this.state.tableBody && this.state.tableBody.length != 0&&
this.state.tableBody.map((row,index)=>{
return (
<tr key={index} style={{
}}>
{index%2 == 0?
row.map((cell,index)=> {
if(cell=='故障'){
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
}}
><img src={Red} style={{
...imgSmall
}}/>{cell}</td>
} else if(cell=='正常'){
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
}}
><img src={Blue} style={{
...imgSmall
}}/>{cell}</td>
} else if(cell=='告警'){
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
}}
><img src={Yellow} style={{
...imgSmall
}}/>{cell}</td>
} else {
if(index != 3){
if(cell.length>=10){cell = cell.substring(0,10)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
textAlign: 'center',
}}
>{cell}</td>
} else {
if(cell.length>=10){cell = cell.substring(0,10)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven
}}
>{cell}</td>
}
}
}):
row.map((cell,index)=>{
if(cell=='故障'){
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd
}}
><img src={Red} style={{
...imgSmall
}}/>{cell}</td>
} else if(cell=='正常'){
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd
}}
><img src={Blue} style={{
...imgSmall
}}/>{cell}</td>
} else if(cell=='告警'){
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd
}}
><img src={Yellow} style={{
...imgSmall
}}/>{cell}</td>
} else {
if(index != 3){
if(cell.length>=10){cell = cell.substring(0,10)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd,
textAlign: 'center',
}}
>{cell}</td>
} else {
if(cell.length>=10){cell = cell.substring(0,10)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd
}}
>{cell}</td>
}
}
})
}
</tr>
)
})
return (
<div>
<table className={'telecommunication_table'}
border={0}
cellSpacing = {0}
cellPadding = {0}>
<thead className={'theads'}>
<tr>
{this.state.tableHead&&this.state.tableHead.length !==0?
tableHead: ''
}
</tr>
</thead>
<tbody>
{this.state.tableBody && this.state.tableBody.length != 0?
tableBody: emptyContent
}
</tbody>
</table>
</div>
)
}
separateBody(tableBody,separateLength){
let tableBodyList = [];
let tableTempBody = [];
tableBody.map(function(item,index){
tableTempBody.push(item)
if(tableTempBody.length == separateLength){
tableBodyList.push(tableTempBody);
tableTempBody = [];
} else if (index == tableBody.length-1) {
tableBodyList.push(tableTempBody);
tableTempBody = [];
}
})
return tableBodyList;
}
componentDidMount() {
const _self = this;
// let tableBody = [];
let tableHead = ['index','type','level','message'];
let tableBody = [
[10,"任務(wù)5","告警","樵坪山到云篆山"],
[11,"任務(wù)6","故障","樵坪山到云篆山不通"],
[12,"任務(wù)3","故障","樵坪山到云篆山不通"],
[13,"任務(wù)13","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[14,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[15,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[16,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[57,"任務(wù)1","故障","網(wǎng)絡(luò)鏈路不通"],
[18,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[19,"任務(wù)1","告警","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[510,"任務(wù)1","故障","樵坪山到云篆山"],
[21,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[22,"任務(wù)1","告警","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[23,"任務(wù)1","正常","樵坪山到云篆山"],
[24,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[25,"任務(wù)1","告警","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[26,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[27,"任務(wù)1","故障","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[218,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[29,"任務(wù)1","故障","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[630,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[31,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[32,"任務(wù)1","告警","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[33,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[34,"任務(wù)1","故障","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
[35,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"]
]
// let tableBody = [
// [10,"任務(wù)5","告警","樵坪山到云篆山"],
// [11,"任務(wù)6","故障","樵坪山到云篆山不通"],
// [12,"任務(wù)3","故障","樵坪山到云篆山不通"],
// [13,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
// [14,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
// [15,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
// [16,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"],
// [17,"任務(wù)1","正常","網(wǎng)絡(luò)鏈路不通"],
// [18,"任務(wù)1","正常","樵坪山到云篆山匯聚點(diǎn)網(wǎng)絡(luò)鏈路不通"]
// ];
let separateLength = 10;
let tableSeparateData = _self.separateBody(tableBody,separateLength)
//console.log('tableSeparateData =', tableSeparateData);
this.stateChange(tableHead,tableSeparateData[0]);
if(tableSeparateData&&tableSeparateData.length>1){
_self.tableTimer = _self._setInterval(tableSeparateData);
}
//this.fetchMockData();
}
_setInterval(param){
const _self= this;
let table_index = 1;
setInterval(function(){
_self.setState({
tableBody: param[table_index]
});
if( table_index+1 == param.length){
table_index = 0;
}else {
table_index = table_index+1;
}
},5000)
}
stateChange(head, body){
//console.log(receiveData);
const _self= this;
_self.setState({
tableHead:head,
tableBody: body
})
}
tableBodyChange(){
console.log('tableBody ==', this.state.tableBody)
}
componentWillReceiveProps(nextProps) {
const _self= this;
console.log('組件將被移除')
if(this.tableTimer != null){
window.clearInterval(this.tableTimer)
}
let separateLength = 10;
let tableSeparateData = _self.separateBody(nextProps.tableBody,separateLength)
this.stateChange(nextProps.tableHead,tableSeparateData[0]);
if(tableSeparateData&&tableSeparateData.length>1){
_self.tableTimer = _self._setInterval(tableSeparateData);
}
}
componentWillUnmount() {
console.log('組件將被移除')
if(this.tableTimer != null){
window.clearInterval(this.tableTimer)
}
}
}
export default Table;let tableBody = this.state.tableBody && this.state.tableBody.length != 0&&
this.state.tableBody.map((row,index)=>{
return (
<tr key={index} style={{
}}>
{index%2 == 0?
row.map((cell,index)=> {
if(cell=='故障'){
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
}}
><img src={Red} style={{
...imgSmall
}}/>{cell}</td>
} else if(cell=='正常'){
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
}}
><img src={Blue} style={{
...imgSmall
}}/>{cell}</td>
} else if(cell=='告警'){
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
}}
><img src={Yellow} style={{
...imgSmall
}}/>{cell}</td>
} else {
if(index != 3){
if(cell.length>=10){cell = cell.substring(0,10)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
textAlign: 'center',
}}
>{cell}</td>
} else {
if(cell.length>=10){cell = cell.substring(0,10)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven
}}
>{cell}</td>
}
}
}):
row.map((cell,index)=>{
if(cell=='故障'){
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd
}}
><img src={Red} style={{
...imgSmall
}}/>{cell}</td>
} else if(cell=='正常'){
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd
}}
><img src={Blue} style={{
...imgSmall
}}/>{cell}</td>
} else if(cell=='告警'){
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd
}}
><img src={Yellow} style={{
...imgSmall
}}/>{cell}</td>
} else {
if(index != 3){
if(cell.length>=10){cell = cell.substring(0,10)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd,
textAlign: 'center',
}}
>{cell}</td>
} else {
if(cell.length>=10){cell = cell.substring(0,10)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd
}}
>{cell}</td>
}
}
})
}
</tr>
)
})能不能幫忙把這段優(yōu)化下
看你需求，是整個(gè)table都不要還是只是替換掉tbody里面的內(nèi)容。
如果是后者，只要把三元表達(dá)式內(nèi)的空字符串替換成
<tr><td colSpan={tableHeader.length}>沒(méi)內(nèi)容</td></tr>
北大青鳥(niǎo)APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國(guó)IT技能型緊缺人才，是大數(shù)據(jù)專(zhuān)業(yè)的國(guó)家
北大青鳥(niǎo)中博軟件學(xué)院創(chuàng)立于2003年，作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地，中博成功培育了近30000名軟件工程師走向高薪崗位，合作企業(yè)超4
中公教育集團(tuán)創(chuàng)建于1999年，經(jīng)過(guò)二十年潛心發(fā)展，已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機(jī)構(gòu)，發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團(tuán)，成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達(dá)內(nèi)教育集團(tuán)成立于2002年，是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu)，是中國(guó)一站式人才培養(yǎng)平臺(tái)、一站式人才輸送平臺(tái)。2014年4月3日在美國(guó)成功上市，融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開(kāi)發(fā)工程師，曾在博彥科技股份有限公司擔(dān)任項(xiàng)目經(jīng)理從事移動(dòng)互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項(xiàng)目經(jīng)理。精通Java與.NET 技術(shù)， 熟練的跨平臺(tái)面向?qū)ο箝_(kāi)發(fā)經(jīng)驗(yàn)，技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點(diǎn)難點(diǎn)突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫(kù)，具有快速界面開(kāi)發(fā)的能力，對(duì)瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁(yè)制作和網(wǎng)頁(yè)游戲開(kāi)發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開(kāi)發(fā)經(jīng)驗(yàn)。曾經(jīng)歷任德國(guó)Software AG 技術(shù)顧問(wèn)，美國(guó)Dachieve 系統(tǒng)架構(gòu)師，美國(guó)AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號(hào)
手機(jī)訂課，優(yōu)惠多多