100 lines
2.1 KiB
Vue
100 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<div class="alarm-overview">
|
||
|
|
<peak-secondary-title :title="title"/>
|
||
|
|
<div class="_tab">
|
||
|
|
<div class="tab-item" v-for="item of tabList" :class="item.value === activeTab?'active-tab':''"
|
||
|
|
@click="tabChange(item.value)">{{ item.label }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="alarm-data">
|
||
|
|
<div class="alarm-total" v-if="activeTab === 1">
|
||
|
|
<peak-warning-statistics/>
|
||
|
|
</div>
|
||
|
|
<div class="alarm-details" v-if="activeTab === 2">
|
||
|
|
<peak-latest-warning/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import PeakSecondaryTitle from "@/components/peak-coal-monitoring/PeakSecondaryTitle";
|
||
|
|
import PeakLatestWarning from "@/components/peak-coal-monitoring/PeakLatestWarning";
|
||
|
|
import PeakWarningStatistics from "@/components/peak-coal-monitoring/PeakWarningStatistics";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "AlarmOverview",
|
||
|
|
components: {PeakWarningStatistics, PeakLatestWarning, PeakSecondaryTitle},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: '智能预警概况',
|
||
|
|
tabList: [
|
||
|
|
{
|
||
|
|
label: '智能预警统计',
|
||
|
|
value: 1
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '智能预警详情',
|
||
|
|
value: 2
|
||
|
|
}
|
||
|
|
],
|
||
|
|
activeTab: 1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
tabChange(val) {
|
||
|
|
this.activeTab = val
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
@import "../../assets/styles/mixin";
|
||
|
|
|
||
|
|
.alarm-overview {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
.flex-column;
|
||
|
|
|
||
|
|
._tab {
|
||
|
|
margin-top: 10px;
|
||
|
|
width: 100%;
|
||
|
|
height: 30px;
|
||
|
|
.flex-row;
|
||
|
|
|
||
|
|
.tab-item {
|
||
|
|
width: 50%;
|
||
|
|
height: 100%;
|
||
|
|
font-family: MicrosoftYaHei-Bold;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #FFFFFF;
|
||
|
|
letter-spacing: 0;
|
||
|
|
text-align: center;
|
||
|
|
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.50);
|
||
|
|
font-weight: 700;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.active-tab {
|
||
|
|
background: url("~/assets/peakCoalMonitoring/common/tab-active-bg.png") no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.alarm-data {
|
||
|
|
flex: 1;
|
||
|
|
height: 0;
|
||
|
|
|
||
|
|
.alarm-total {
|
||
|
|
height: 100%;
|
||
|
|
padding-top: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.alarm-details {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|