epmet-oper-gov/src/views/modules/plugins/power/kernelhousehold.vue

<template>
  <div class="div_main">
    <div :style="{height:rowHeight}"
         class="div_tree">
      <el-input placeholder="输入关键字进行过滤"
                v-model="filterText">
      </el-input>
      <el-scrollbar :style="{height:treeHeight}"
                    class="scrollar">
        <el-tree ref="ref_tree"
                 v-loading="treeLoading"
                 class="filter_tree"
                 :data="treeData"
                 :props="defaultProps"
                 :highlight-current="true"
                 node-key="id"
                 :expand-on-click-node="false"
                 default-expand-all
                 :filter-node-method="filterNode"
                 @node-click="handleNodeClick">
        </el-tree>
      </el-scrollbar>
    </div>
    <div :style="{height:rowHeight}"
         class="div_table">
      <kernelhousehold-table :axisStructId="axisStructId" ref="ref_communityTable"></kernelhousehold-table>
    </div>

  </div>
</template>

<script>
import CDialog from '@c/CDialog'
import kernelhouseholdTable from './kernelhouseholdTable'
import { requestPost } from "@/js/dai/request";
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务

let loading // 加载动画
export default {
  data () {
    return {
      filterText: '',
      treeLoading: true,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      selTreeObj: {},
      centerPoint: [],
      axisStructId: '' // 动力主轴节点id
    }
  },
  async mounted () {
    this.treeLoading = true
    await this.loadTree()
    this.treeLoading = false
  },
  computed: {
    rowHeight () {
      return this.$store.state.inIframe ? this.clientHeight - 120 + this.iframeHeight + 'px' : this.clientHeight - 120 + 'px'
    },
    treeHeight () {
      return this.$store.state.inIframe ? this.clientHeight - 200 + this.iframeHeight + 'px' : this.clientHeight - 200 + 'px'
    },
    ...mapGetters(['clientHeight', 'iframeHeight'])
  },
  methods: {
    async loadTree (isRefresh) {
      const url = "/pli/power/data/axis/structTree"
      let params = {
        agencyId: '1495655378069753857'
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        this.treeData = data
        if (!isRefresh && data.length > 0) {
          this.selTreeObj = data[0]
          if (!this.selTreeObj.latitude) {
            this.selTreeObj.latitude = this.centerPoint[0]
          }
          if (!this.selTreeObj.longitude) {
            this.selTreeObj.longitude = this.centerPoint[1]
          }
        }
      } else {
        this.$message.error(msg)
      }
    },
    handleNodeClick (obj) {
      this.axisStructId = obj.id
    },
    filterNode (value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  },
  watch: {
    filterText (val) {
      this.$refs.ref_tree.filter(val);
    }
  },
  components: {
    kernelhouseholdTable, CDialog
  }
}
</script>
<style lang="scss" scoped >
.div_main {
  display: flex;
}
.scrollar {
  margin-top: 10px;
}

.div_tree {
  flex: 0 0 280px;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
  overflow-y: hidden;
}
.filter_tree {
  overflow-x: auto;
}

.div_table {
  margin-left: 15px;
  // flex: 1;
  width: calc(100% - 300px);
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
}

.div_btn {
  margin-top: 20px;
}

.row {
  padding: 10px;
}
</style>

<style>
/* .aui-content > .el-tabs > .el-tabs__content {
  padding: 0px;
} */

.el-tree-node:focus > .el-tree-node__content {
  /* background-color: #ccc !important; */
  color: #2195fe;
}
</style>
<style lang="scss" scoped>
.div_tree {
  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
}
</style>