<div class="alert-level-cont">
<ul id="alert-level-ul" class="clear alert-level-cont-title">
<li v-for="(item,index) in tabsName" @click="tabsSwitch(index)" v-bind:class="{active:item.isActive}" class="fl">{{item.name}}</li>
</ul>
<div class="alert-level-cont-list">
<div class="display" style="display: block;">
<h3>未處理告警列表1</h3>
<table cellspacing="0" class="alert-level-cont-list-table">
<tr>
<td>序號</td>
<td>告警名稱</td>
<td>狀態</td>
</tr>
<tr>
<td class="number number-one">1</td>
<td>汙水站MBR迴流泵B相電流大於4.9A預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number number-two">2</td>
<td>汙水站調節池液位大於等於4.5m預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number number-three">3</td>
<td>約克空調冷卻水進水溫度大於50℃</td>
<td>未處理</td>
</tr>
<tr>
<td class="number">4</td>
<td>一號鍋爐壓力大於等於0.96Mpa預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number">5</td>
<td>配電室溫度超過35度</td>
<td>未處理</td>
</tr>
</table>
<h3>已處理告警列表</h3>
<table cellspacing="0" class="alert-level-cont-list-table">
<tr>
<td>序號</td>
<td>告警名稱</td>
<td>狀態</td>
</tr>
<tr>
<td class="number number-one">1</td>
<td>汙水站MBR迴流泵B相電流大於4.9A預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number number-two">2</td>
<td>汙水站調節池液位大於等於4.5m預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number number-three">3</td>
<td>約克空調冷卻水進水溫度大於50℃</td>
<td>未處理</td>
</tr>
<tr>
<td class="number">4</td>
<td>一號鍋爐壓力大於等於0.96Mpa預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number">5</td>
<td>配電室溫度超過35度</td>
<td>未處理</td>
</tr>
</table>
</div>
<div class="display">
<h3>未處理告警列表2</h3>
<table cellspacing="0" class="alert-level-cont-list-table">
<tr>
<td>序號</td>
<td>告警名稱</td>
<td>狀態</td>
</tr>
<tr>
<td class="number number-one">1</td>
<td>汙水站MBR迴流泵B相電流大於4.9A預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number number-two">2</td>
<td>汙水站調節池液位大於等於4.5m預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number number-three">3</td>
<td>約克空調冷卻水進水溫度大於50℃</td>
<td>未處理</td>
</tr>
<tr>
<td class="number">4</td>
<td>一號鍋爐壓力大於等於0.96Mpa預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number">5</td>
<td>配電室溫度超過35度</td>
<td>未處理</td>
</tr>
</table>
<h3>已處理告警列表</h3>
<table cellspacing="0" class="alert-level-cont-list-table">
<tr>
<td>序號</td>
<td>告警名稱</td>
<td>狀態</td>
</tr>
<tr>
<td class="number number-one">1</td>
<td>汙水站MBR迴流泵B相電流大於4.9A預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number number-two">2</td>
<td>汙水站調節池液位大於等於4.5m預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number number-three">3</td>
<td>約克空調冷卻水進水溫度大於50℃</td>
<td>未處理</td>
</tr>
<tr>
<td class="number">4</td>
<td>一號鍋爐壓力大於等於0.96Mpa預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number">5</td>
<td>配電室溫度超過35度</td>
<td>未處理</td>
</tr>
</table>
</div>
<div class="display">
<h3>未處理告警列表3</h3>
<table cellspacing="0" class="alert-level-cont-list-table">
<tr>
<td>序號</td>
<td>告警名稱</td>
<td>狀態</td>
</tr>
<tr>
<td class="number number-one">1</td>
<td>汙水站MBR迴流泵B相電流大於4.9A預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number number-two">2</td>
<td>汙水站調節池液位大於等於4.5m預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number number-three">3</td>
<td>約克空調冷卻水進水溫度大於50℃</td>
<td>未處理</td>
</tr>
<tr>
<td class="number">4</td>
<td>一號鍋爐壓力大於等於0.96Mpa預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number">5</td>
<td>配電室溫度超過35度</td>
<td>未處理</td>
</tr>
</table>
<h3>已處理告警列表</h3>
<table cellspacing="0" class="alert-level-cont-list-table">
<tr>
<td>序號</td>
<td>告警名稱</td>
<td>狀態</td>
</tr>
<tr>
<td class="number number-one">1</td>
<td>汙水站MBR迴流泵B相電流大於4.9A預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number number-two">2</td>
<td>汙水站調節池液位大於等於4.5m預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number number-three">3</td>
<td>約克空調冷卻水進水溫度大於50℃</td>
<td>未處理</td>
</tr>
<tr>
<td class="number">4</td>
<td>一號鍋爐壓力大於等於0.96Mpa預警</td>
<td>未處理</td>
</tr>
<tr>
<td class="number">5</td>
<td>配電室溫度超過35度</td>
<td>未處理</td>
</tr>
</table>
</div>
</div>

</div>

<script>
export default {
data() {
return {
tabsName: [{
name: '次要',
isActive: true
}, {
name: '重要',
isActive: false
}, {
name: '嚴重',
isActive: false
}],
active: false
}
},
methods: {
tabsSwitch(tabIndex) {
var tabCollection = document.querySelectorAll(".display"),
len = tabCollection.length;
for(var i = 0; i < len; i++) {
tabCollection[i].style.display = "none";
this.tabsName[i].isActive = false;
}
this.tabsName[tabIndex].isActive = true;
tabCollection[tabIndex].style.display = "block";
}
}
}
</script>


<style>
.display{
display: none;
}
</style>