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(0,0,0,0)','rgba(42,244,255,0.2)'];
let tdStyle = {
height:40,
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,
color: 'rgba(42,244,255,1)',
backgroundColor: 'rgba(39,147,252,0.3)'
}
let emptyTdStyle = {
width: 500,
height:300,
fontSize: 30,
//backgroundColor: 'rgba(255,255,255,1)',
textAlign: 'center',
color:'rgba(255,255,255,0.5)'
}
let imgSmall = {
width: 18,
height:18
}
let emptyContent = (
<tr>
<td colSpan={6} // 跨列
style={emptyTdStyle}>當(dāng)前無告警</td>
</tr>
);
let tableHead = this.state.tableHead&&this.state.tableHead.length !==0
&&this.state.tableHead.map(function (head,index) {
if(head == 'index'){
//return '序號';
return (<th style= {{
...thStyle,
width:70
}} key={index}>序號</th>)
} else if (head == 'type') {
//return '任務(wù)名稱';
return (<th style= {{
...thStyle,
width:180
}} key={index}>任務(wù)名稱</th>)
} else if (head == 'level') {
//return '告警等級';
return (<th style= {{
...thStyle,
width:80
}} key={index}>告警等級</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 == 0){
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
textAlign: 'center',
width: 70
}}
>{cell}</td>
} else if(index == 1){
if(cell.length>=10){cell = cell.substring(0,5)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
textAlign: 'center',
width: 180
}}
>{cell}</td>
} else if (index == 2) {
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
textAlign: 'center',
width: 80
}}
>{cell}</td>
} else if (index == 3) {
if(cell.length>=10){cell = cell.substring(0,10)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
textAlign: 'center',
width: 237
}}
>{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 == 0){
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd,
textAlign: 'center',
width: 70
}}
>{cell}</td>
} else if(index == 1){
if(cell.length>=10){cell = cell.substring(0,5)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd,
textAlign: 'center',
width: 180
}}
>{cell}</td>
} else if (index == 2) {
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd,
textAlign: 'center',
width: 80
}}
>{cell}</td>
} else if (index == 3) {
if(cell.length>=10){cell = cell.substring(0,10)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd,
textAlign: 'center',
width: 237
}}
>{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&&tableBody.length!=0&&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 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);
}
}
_setInterval(param){
const _self= this;
let table_index = 1;
var set_interval= setInterval(function(){
_self.setState({
tableBody: param[table_index]
});
if( table_index+1 == param.length){
table_index = 0;
}else {
table_index = table_index+1;
}
},5000)
return set_interval;
}
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(_self.tableTimer != null){
window.clearInterval(_self.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;
我想把下面這段優(yōu)化一下，請問如何處理？
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 == 0){
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
textAlign: 'center',
width: 70
}}
>{cell}</td>
} else if(index == 1){
if(cell.length>=10){cell = cell.substring(0,5)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
textAlign: 'center',
width: 180
}}
>{cell}</td>
} else if (index == 2) {
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
textAlign: 'center',
width: 80
}}
>{cell}</td>
} else if (index == 3) {
if(cell.length>=10){cell = cell.substring(0,10)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleEven,
textAlign: 'center',
width: 237
}}
>{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 == 0){
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd,
textAlign: 'center',
width: 70
}}
>{cell}</td>
} else if(index == 1){
if(cell.length>=10){cell = cell.substring(0,5)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd,
textAlign: 'center',
width: 180
}}
>{cell}</td>
} else if (index == 2) {
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd,
textAlign: 'center',
width: 80
}}
>{cell}</td>
} else if (index == 3) {
if(cell.length>=10){cell = cell.substring(0,10)+'...'}
return <td
className={'emeBodyTd'}
style={{
...tdStyleOdd,
textAlign: 'center',
width: 237
}}
>{cell}</td>
}
}
})
}
</tr>
)
})
let tableBody = this.state.tableBody && this.state.tableBody.length != 0 &&
this.state.tableBody.map((row,index)=>{
return (
<tr key={index} style={{ }}>{
row.map((cell,i)=>{
if(['故障','正常','告警'].includes(cell)){
return <td
className={'emeBodyTd'}
style={{
index%2==0?...tdStyleEven:...tdStyleOdd,
}}
><img src={cell=='正常'?Blue:cell=='故障'?Red:Yellow} style={{
...imgSmall
}}/>{cell}</td>
} else {
const styles = [70,180,80,237];
return <td
className={'emeBodyTd'}
style={{
index%2==0?...tdStyleEven:...tdStyleOdd,
textAlign: 'center',
width: styles[i]
}}
>{cell}</td>
}
})
}</tr>
)
})
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學(xué)院創(chuàng)立于2003年，作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地，中博成功培育了近30000名軟件工程師走向高薪崗位，合作企業(yè)超4
中公教育集團(tuán)創(chuàng)建于1999年，經(jīng)過二十年潛心發(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)，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔(dān)任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項目經(jīng)理。精通Java與.NET 技術(shù)， 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗，技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點(diǎn)難點(diǎn)突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問，美國Dachieve 系統(tǒng)架構(gòu)師，美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多