data_governance/src/views/homecomponents/BasicInfomation/DeviceManage.vue

<template>
 <div class="content-main common-scroll">
    <div class="content-body">
      <Row :gutter="8" style="width:100%;height:100%">
        <i-col span="5" style="height:100%">
          <div class="station-tree">
            <div class="station-tree-body">
              <tree-filter :defaultData="stationData" :clickAllNode="true" secondCalssName="icon-shebei1" thirdCalssName="icon-shebei" v-if="stationData && stationData.length>0" @treeChange="treeChange"></tree-filter>
            </div>
          </div>
        </i-col>
        <i-col span="19" style="height:100%">
          <div class="right-main">
            <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>
            <device-manage-index v-if="currentTabs=='设备管理'" ref="device"></device-manage-index>
            <device-type-manage  v-if="currentTabs=='设备类型管理'" ref="deviceType" @changeTree="changeTree"></device-type-manage>
            <device-model-manage v-if="currentTabs=='设备监测模型'" ref="deviceModel" @changeTree="changeTree"></device-model-manage>
            <model-config v-if="currentTabs=='监测模型配置（开发人员专用）'" ref="modelConfig" @changeTree="changeTree"></model-config>
          </div>
        </i-col>
      </Row>
    </div>
  </div>
</template>
<script>
import _ from 'lodash'
import DeviceManageIndex from './DeviceManageIndex.vue'
import DeviceTypeManage from './DeviceTypeManage.vue'
import DeviceModelManage from './DeviceModelManage.vue'
import ModelConfig from './ModelConfig.vue'
export default {
  name: "DeviceManage",
  components:{
    DeviceManageIndex,DeviceTypeManage,DeviceModelManage,ModelConfig
  },
  data() {
    return {
		  stationData: [],
      // tabsData: [{label:'设备管理'},{label:'设备类型管理'}],
      tabsData: [{label:'设备管理'},{label:'设备类型管理'},{label:'设备监测模型'},{label:'监测模型配置（开发人员专用）'}],
      currentTabs: '设备管理',
      currentAppId: '',
      currentEquTypeId: '',
      level: '',
    };
  },
  mounted() {
    this.getMetroLevel()
    this.currentTabs = sessionStorage.getItem('currentTabs') || '设备管理'
    if(this.currentTabs == '设备管理'){
       this.$nextTick(()=> {
        this.$refs.device.getType()
        this.$refs.device.getTableData()
      })
    } else if (this.currentTabs == '设备类型管理') {
      this.$nextTick(()=> {
        this.$refs.deviceType.getTableData()
      })
    } else if(this.currentTabs == '设备监测模型'){
       this.$nextTick(()=> {
        this.$refs.deviceModel.getTableData()
      })
    } else {
       this.$nextTick(()=> {
        this.$refs.modelConfig.getTableData()
      })
    }
  },
  // 离开当前路由之前的钩子函数 
  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) => {
        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.level = level
      if (this.currentTabs == '设备管理') {
        this.$refs.device.tableParams.pageNum = 1
        this.getParams ('device',arr,level)
        this.$refs.device.getTableData(arr,level)
      } else if(this.currentTabs == '设备类型管理'){
        this.$nextTick(()=> {
          this.getParams ('deviceType',arr,level)
          this.$refs.deviceType.tableParams.pageNum = 1
          this.$refs.deviceType.getTableData()
        })
      } else if(this.currentTabs == '设备监测模型'){
        this.$nextTick(()=> {
          this.getParams ('deviceModel',arr,level)
          this.$refs.deviceModel.tableParams.pageNum = 1
          this.$refs.deviceModel.getTableData()
        })
       } else {
        this.$nextTick(()=> {
          this.getParams ('modelConfig',arr,level)
          this.$refs.modelConfig.tableParams.pageNum = 1
          this.$refs.modelConfig.getTableData()
        })
       }
		},
    getParams (name,arr,level) {
     if (level == 2) {
        this.$refs[name].tableParams.applicationId = arr[arr.length-1]
        this.$refs[name].tableParams.equipmentTypeId = ''
      } else if (level == 3) {
        this.$refs[name].tableParams.applicationId = arr[arr.length-2]
        this.$refs[name].tableParams.equipmentTypeId = arr[arr.length-1]
      } else {
        this.$refs[name].tableParams.applicationId = ''
        this.$refs[name].tableParams.equipmentTypeId = ''
      }
    },
    tabsClick (name) {
      document.querySelector(".station-tree-left").scrollTo(0, 0) 
      sessionStorage.setItem("currentTabs",name)
      this.currentTabs = name
      this.stationData = this.getTree(this.stationData) // 切换tab页时，清除tree选中情况
      if (this.currentTabs == '设备管理') {
         this.$nextTick(()=> {
          //  this.getMetroLevel()
           this.$refs.device.getType()
           this.$refs.device.getTableData()
        })
      } else if(this.currentTabs == '设备类型管理'){
        this.$nextTick(()=> {
          this.$refs.deviceType.getTableData()
        })
      } else if(this.currentTabs == '设备监测模型'){
        this.$nextTick(()=> {
          this.$refs.deviceModel.getTableData()
        })
      } else {
        this.$nextTick(()=> {
          this.$refs.modelConfig.getTableData()
        })
      }
    },
    changeTree () {
     this.getMetroLevel()
    },
  }
};
</script>
<style scoped lang="stylus">
.content-main {
  width: 100%;
  height: calc(100% - 50px);
  overflow: hidden;
}
.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;
}
.content-body {
  width: 100%;
  height: 100%;
  background: #06214D;
}
.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>