data_governance/src/views/homecomponents/EquipmentAnalysis/AlarmHandling.vue

<template>
  <div class="content-main">
    <div class="content-body-wrap">
     <div class="content-body">
        <Tabs :value="currentTabs" @on-click="tabsClick" class="common-tabs">
          <TabPane v-for="tab in tabsData" :key="tab.label" :label="tab.label" :name="tab.label"></TabPane>
        </Tabs>
         <Row :gutter="8" style="width:100%;height: calc(100% - 50px)">
          <i-col span="4" style="height:100%">
            <div class="station-tree">
              <div class="station-tree-body">
                <tree-filter :defaultData="stationData" v-if="stationData && stationData.length>0" @treeChange="treeChange" ref="tree"></tree-filter>
              </div>
            </div>
          </i-col>
          <i-col span="20" style="height:100%">
            <div class="right-main">
              <unable-deter-alarm  ref="unableDeter" class="content-body-manage" v-if="currentTabs == '告警信息-无法判定等级'"></unable-deter-alarm>
              <to-confirmed-alarm  ref="toConfirmed" class="content-body-manage" v-if="currentTabs == '告警信息-待确认'"></to-confirmed-alarm>
              <confirmed-alarm  ref="confirmed" class="content-body-manage" v-if="currentTabs == '告警信息-已确认'"></confirmed-alarm>
              <cleared-alarm ref="cleared" class="content-body-manage" v-if="currentTabs == '告警信息-已清除'"></cleared-alarm>
              <filtered-alarm ref="filtered" class="content-body-manage" v-if="currentTabs == '告警信息-已过滤'"></filtered-alarm>
              <comprehensive-infor ref="comprehensive" class="content-body-manage" v-if="currentTabs == '综合处理告警信息'"></comprehensive-infor>
            </div>
          </i-col>
        </Row>
     </div>
    </div>
  </div>
</template>
<script>
import UnableDeterAlarm from './UnableDeterAlarm.vue'
import ToConfirmedAlarm from './ToConfirmedAlarm.vue'
import ConfirmedAlarm from './ConfirmedAlarm.vue'
import ClearedAlarm from './ClearedAlarm.vue'
import FilteredAlarm from './FilteredAlarm.vue'
import ComprehensiveInfor from './ComprehensiveInfor.vue'
export default {
  name: "AlarmHandling",
   components:{
    UnableDeterAlarm,ToConfirmedAlarm,ConfirmedAlarm,ClearedAlarm,FilteredAlarm,ComprehensiveInfor
  },
  data() {
    return {
		  stationData: [],
      tabsData: [{label:'告警信息-无法判定等级'},{label:'告警信息-待确认'},{label:'告警信息-已确认'},{label:'告警信息-已清除'},{label:'告警信息-已过滤'},{label:'综合处理告警信息'}],
      currentTabs: '告警信息-无法判定等级',
    };
  },
  mounted() {
    this.getCurrentTab (sessionStorage.getItem('currentTabs'))
    this.getMetroLevel()
  },
   // 离开当前路由之前的钩子函数 
  beforeRouteLeave(to, form, next) {
    sessionStorage.removeItem('currentTabs')
    next()
  },
  methods: {
     // 获取树形数据
    getMetroLevel () {
      this.$get('metroapi/lineStation/lineStationTree').then(res => {
				if (res.httpCode == 1) {
          this.stationData = res.data
				}
		  })
    },
    // 递归函数 每层数组的第一个对象里的属性expand 全展开(true)
    getTree(arr) {
       return arr.map((v,index) => {
        v.selected = false
        v.disabled = false
        if (index==0) {
          v.expand = true
        } else {
          v.expand = false
        }
        if (v.children) v.children = this.getTree(v.children);
        return v;
      });
    },
    treeChange(arr,level) {
      this.getCurrentTab(this.currentTabs,arr,level)
		},
    tabsClick (name) {
      this.stationData = this.getTree(this.stationData) // 切换tab页时，清除tree选中情况
      sessionStorage.setItem("currentTabs",name)
      this.getCurrentTab (name)
      if (document.querySelector(".station-tree-left")) {
        document.querySelector(".station-tree-left").scrollTo(0, 0) 
      }
    },
    getCurrentTab (currentTabs,arr,level) {
      this.currentTabs = currentTabs || '告警信息-无法判定等级'
      if (currentTabs == '告警信息-无法判定等级' || !currentTabs) {
         this.$nextTick(()=> {
          this.getParams('unableDeter',arr,level)
          this.$refs.unableDeter.tableParams.pageNum = 1
          this.$refs.unableDeter.getTableData()
        })
      } else if(currentTabs == '告警信息-待确认'){       
        this.$nextTick(()=> {
          this.getParams('toConfirmed',arr,level)
          this.$refs.toConfirmed.tableParams.pageNum = 1
          this.$refs.toConfirmed.getTableData()
        })
      } else if(currentTabs == '告警信息-已确认'){
        this.$nextTick(()=> {
          this.getParams('confirmed',arr,level)
          this.$refs.confirmed.tableParams.pageNum = 1
          this.$refs.confirmed.getTableData()
        })
      } else if(currentTabs == '告警信息-已清除'){
        this.$nextTick(()=> {
          this.getParams('cleared',arr,level)
          this.$refs.cleared.tableParams.pageNum = 1
          this.$refs.cleared.getTableData()
        })
      } else if(currentTabs == '告警信息-已过滤'){
        this.$nextTick(()=> {
          this.getParams('filtered',arr,level)
          this.$refs.filtered.tableParams.pageNum = 1
          this.$refs.filtered.getTableData()
        })
      } else {
         this.$nextTick(()=> {
           this.getParams('comprehensive',arr,level)
          this.$refs.comprehensive.tableParams.pageNum = 1
          this.$refs.comprehensive.getTableData()
        })
      }
    },
    getParams (name,arr,level) {
     if (level == 2) {
        this.$refs[name].tableParams.lineId = arr[arr.length-1]
        this.$refs[name].tableParams.stationId = ''
      } else if (level == 3) {
        this.$refs[name].tableParams.lineId = arr[arr.length-2]
        this.$refs[name].tableParams.stationId = arr[arr.length-1]
      } else {
        this.$refs[name].tableParams.lineId = ''
        this.$refs[name].tableParams.stationId = ''
      }
    },
  }
};
</script>
<style scoped lang="stylus">
.content-main {
  width: 100%;
  height: calc(100% - 50px);
  overflow: hidden;
}
.content-body-wrap {
  width: 100%;
  height: 100%;
  background: #06214D;
}
.content-body {
  width: 100%;
  height: 100%;
  background: #06214D;
  padding: 10px;
}
.common-search {
  width: 100%;
}
>>> .common-search .ivu-input {
  background-color: #06214D;
  border: 1px solid #2355A6;
  border-radius: 15px;
  color: #fff;
  height: 32px;
}
>>> .common-search .ivu-input:focus {
    border-color: #0185ea;
}
.station-tree {
  height: 100%;
  padding: 10px;
}
.station-tree-body {
  border: 1px solid #204384;
  height: 100%;
  padding: 10px;
}
.right-main {
  height: 100%;
  padding: 10px 0;
}
</style>