data_governance/src/views/homecomponents/EquipmentAnalysis/PolicyConfigManage.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>
        <alarm-level-config v-if="currentTabs == '告警等级配置'" ref="alarmLevel" class="content-body-manage"></alarm-level-config>
         <Row :gutter="8" style="width:100%;height: calc(100% - 50px)" v-else>
          <i-col span="5" style="height:100%">
            <div class="station-tree">
              <div class="station-tree-body">
                <div class="station-tree-top">
                  <Input suffix="ios-search" placeholder="请输入关键字查询" clearable search v-model="currentStation" class="common-search"  @on-search="iconChange" @on-clear="clearChange"/>
                </div>
                <div class="station-tree-center">
                  <div class="station-tree-left common-scroll" v-show="showTree">
                    <tree-list :defaultData="stationData" :currentStaData="currentStaData" :clickAllNode="true" v-if="stationData && stationData.length>0" @treeChange="treeChange" ref="tree"></tree-list>
                  </div>
                  <div class="station-tree-left-notree" v-show="!showTree">
                    站点输入错误！
                  </div>
                </div>
              </div>
            </div>
          </i-col>
          <i-col span="19" style="height:100%">
            <div class="right-main">
              <level-deter-config  ref="levelDeter" class="content-body-manage" v-if="currentTabs == '等级判定策略配置'"></level-deter-config>
              <alarm-filter-config ref="alarmFilter" class="content-body-manage" v-if="currentTabs == '告警过滤策略配置'"></alarm-filter-config>
              <alarm-acknowledg-config ref="alarmAcknowledg" class="content-body-manage" v-if="currentTabs == '告警自动确认策略'"></alarm-acknowledg-config>
              <continuity-monitor-config ref="continuityMonitor" class="content-body-manage" v-if="currentTabs == '连续性监测策略'"></continuity-monitor-config>
            </div>
          </i-col>
        </Row>
     </div>
    </div>
  </div>
</template>
<script>
import AlarmLevelConfig from './AlarmLevelConfig.vue'
import LevelDeterConfig from './LevelDeterConfig.vue'
import AlarmFilterConfig from './AlarmFilterConfig.vue'
import AlarmAcknowledgConfig from './AlarmAcknowledgConfig.vue'
import ContinuityMonitorConfig from './ContinuityMonitorConfig.vue'
export default {
  name: "PolicyConfigManage",
   components:{
    AlarmLevelConfig,LevelDeterConfig,AlarmFilterConfig,AlarmAcknowledgConfig,ContinuityMonitorConfig
  },
  data() {
    return {
      currentStation: '',
      currentStaData: [], // 当前搜索框搜索的站台数组对象，传给子组件，用来判断单选站台名当前选中状态
      showTree: true,// 是否显示树形组件
		  stationData: [],
      tabsData: [{label:'告警等级配置'},{label:'等级判定策略配置'},{label:'告警过滤策略配置'},{label:'告警自动确认策略'},{label:'连续性监测策略'}],
      currentTabs: '告警等级配置',
    };
  },
  mounted() {
    // console.log(sessionStorage.getItem('currentTabs'))
    this.getCurrentTab (sessionStorage.getItem('currentTabs'))
    this.getMetroLevel()
  },
   // 离开当前路由之前的钩子函数 
  beforeRouteLeave(to, form, next) {
    sessionStorage.removeItem('currentTabs')
    next()
  },
  methods: {
     // 获取树形数据
    getMetroLevel () {
      this.$get('metroapi/application/appEquipmentTypeTree').then(res => {
				if (res.httpCode == 1) {
          this.stationData = res.data
				}
		  })
    },
    // 递归函数 每层数组的第一个对象里的属性expand 全展开(true)
    getTree(arr) {
      return arr.map((v,index) => {
        if (index==0) {
          v.expand = true
        }
        if (v.children) v.children = this.getTree(v.children);
        return v;
      });
    },
    iconChange: _.throttle(function() {
      this.currentStaData = []
      this.treeName = []
      this.$nextTick(()=> {
       this.getCurrentTab(this.currentTabs,this.currentStation)
      })
      if(this.currentStation != ''){
        this.showTree = false
        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
      } else {
        document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
        this.showTree = true
        this.stationData = this.getTree(this.stationData)
        return 
      }
      this.getSelectedItem()
		}, 500),
    clearChange () {
      this.getSelectedItem()
      this.getCurrentTab(this.currentTabs,this.currentStation)
    },
    getSelectedItem  () {
      this.stationData.forEach((item, index,itemArr) => {
        item.expand = false;
        item.disabled = false; 
        item.selected = false;
        if (item.title == this.currentStation) {
            item.selected = true;
            item.disabled = true; // disabled 是否禁止选中 
            item.expand = true;
            this.currentStaData.push(item)
            this.showTree = true
        }
        if (this.currentStation == '' && index == 0) {
          item.expand = true
        }
        if (item.children) {
          item.children.forEach((val, i,valArr) => {
          val.expand = false; //expand 是否展开直子节点 
          val.disabled = false; // disabled 是否禁止选中
          val.selected = false;
          if (val.title == this.currentStation) {
            val.selected = true;
            val.disabled = true; // disabled 是否禁止选中 
            val.expand = true;
            item.expand = true;
            this.currentStaData.push(val)
            this.showTree = true
          }
          if (this.currentStation == '' && i==0) {
            val.expand = true
          }
          if (val.children) {
            val.children.forEach ((lastVal,lastIndex) => {
              lastVal.selected = false; //expand 是否展开直子节点 
              lastVal.disabled = false; 
              lastVal.expand = false;
              if (lastVal.title == this.currentStation) {
                lastVal.selected = true;
                lastVal.disabled = true; // disabled 是否禁止选中 
                lastVal.expand = true;
                val.expand = true
                item.expand = true
                this.currentStaData.push(lastVal)
                this.showTree = true
              } 
            })
          } 
        });
        }    
      });
    },
    treeChange(val,arr,level) {
      this.currentStation = val
      this.getCurrentTab(this.currentTabs,this.currentStation,arr,level)
      //  if (this.currentTabs == '设备管理') {
      //   this.$refs.device.getTableData(this.currentStation,arr,level)
      // } else if(this.currentTabs == '设备类型管理'){
      //   this.$nextTick(()=> {
      //     this.$refs.deviceType.getTableData(this.currentStation,arr,level)
      //   })
      // }
		},
    tabsClick (name) {
      this.stationData = this.getElseTree(this.stationData) // 切换tab页时，清除tree选中情况
      this.currentStation = ''
      sessionStorage.setItem("currentTabs",name)
      this.getCurrentTab (name)
      if (document.querySelector(".station-tree-left")) {
        document.querySelector(".station-tree-left").scrollTo(0, 0) 
      }
    },
    getCurrentTab (currentTabs,currentStation,arr,level) {
      this.currentTabs = currentTabs || '告警等级配置'
      if (currentTabs == '告警等级配置' || !currentTabs) {
         this.$nextTick(()=> {
        })
      } else if(currentTabs == '等级判定策略配置'){       
        this.$nextTick(()=> {
          this.$refs.levelDeter.getTableData(currentStation,arr,level)
        })
      } else if(currentTabs == '告警过滤策略配置'){
        this.$nextTick(()=> {
          this.$refs.alarmFilter.getTableData(currentStation,arr,level)
        })
      } else if(currentTabs == '告警自动确认策略'){
        this.$nextTick(()=> {
          this.$refs.alarmAcknowledg.getTableData(currentStation,arr,level)
        })
      } else if(currentTabs == '连续性监测策略'){
        this.$nextTick(()=> {
          this.$refs.continuityMonitor.getTableData(currentStation,arr,level)
        })
      }
    },
    // 递归函数 每层数组的第一个对象里的属性expand 全展开(true)
    getElseTree(arr) {
      return arr.map((v,index) => {
        if (v.title==this.currentStation) {
          v.selected = false
          v.disabled = false
        }
        if (index == 0) {
          v.expand = true
        } else {
          v.expand = false
        }
        if (v.children) v.children = this.getElseTree(v.children);
        return v;
      });
    },
  }
};
</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;
}
.station-tree-center {
  height: calc(100% - 32px);
  padding-top: 10px;
}
.station-tree-left {
  height: 100%;
  overflow: auto;
}
.station-tree-left-notree {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  fon-size: 14px;
}
.right-main {
  height: 100%;
  padding: 10px 0;
}
</style>