ngds/backendEle/src/views/atlas/network-line-opt.vue

<template>
  <div v-loading="loading">
    <div class="white-box">
      <el-tabs v-model="tabActiveName">
        <el-tab-pane label="安置链路图" name="first" v-if="permission.hasPermission(`atlas/network-line`)">
          <div class="filter-user">
            <el-input v-model="mainUserName" size="small" style="width:300px;">
              <template slot="prepend">会员编号</template>
            </el-input>
            <el-input v-model="periodNum" size="small" style="width:150px;">
              <template slot="prepend">期数</template>
            </el-input>
            <el-button type="primary" size="small" @click="getMainData()">确定</el-button>
            <span class="l-height">不添默认为当前期数</span>
          </div>
          <el-timeline>
            <el-timeline-item class="out-side">
              <el-tag class="tag-header llt-header" color="white">会员编号</el-tag>
              <el-tag class="tag-header llt-header" color="white">姓名</el-tag>
              <el-tag class="tag-header llt-header" color="white">级别</el-tag>
              <el-tag class="tag-header llt-header" color="white">聘级</el-tag>
              <el-tag class="tag-header llt-header" color="white">加入期数</el-tag>
              <el-tag class="tag-header llt-header" color="white">区位</el-tag>
              <el-tag class="tag-header llt-header" color="white">状态</el-tag>
            </el-timeline-item>
            <el-timeline-item
                class="out-side"
                v-for="(timeLine, index) in timeLineData"
                :key="index"
                icon="el-icon-top"
                type="primary"
                size="large">
              <el-tag class="tag-header">{{timeLine.USER_NAME}}</el-tag>
              <el-tag class="tag-header" type="success">{{timeLine.REAL_NAME}}</el-tag>
              <el-tag class="tag-header" type="warning">{{timeLine.DEC_LV_NAME}}</el-tag>
              <el-tag class="tag-header" type="warning">{{timeLine.EMP_LV_NAME}}</el-tag>
              <el-tag class="tag-header">{{timeLine.PERIOD_AT}}</el-tag>
              <el-tag class="tag-header" type="danger">{{timeLine.LOCATION}}</el-tag>
              <el-tag class="tag-header">{{timeLine.STATUS_NAME}}</el-tag>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
        <el-tab-pane label="安置链路列表" name="two" v-if="permission.hasPermission(`user/network-line-list`)">
          <div class="filter-user">
            <el-input v-model="filterForm.userName" size="small" style="width:300px;">
              <template slot="prepend">会员编号</template>
            </el-input>
            <el-input v-model="filterForm.deep" size="small" style="width:150px;">
              <template slot="prepend">深度</template>
            </el-input>
            <el-input v-model="filterForm.periodNum" size="small" style="width:150px;">
              <template slot="prepend">期数</template>
            </el-input>
            <el-button type="primary" size="small" @click="handleFilter">确定</el-button>
          </div>

          <el-table :data="tableData" stripe style="width: 100%;" :height="tool.getTableHeight(true)">
            <el-table-column v-for="(tableHeader, key) in tableHeaders" :key="key" :label="tableHeader.header" :width="tableHeader.other.width ? tableHeader.other.width : ''">
              <template slot-scope="scope">
                <template v-if="scope.row[tableHeader.index].other.tag" >
                  <el-tag :type="scope.row[tableHeader.index].other.tag.type ? scope.row[tableHeader.index].other.tag.type : null" :size="scope.row[tableHeader.index].other.tag.size ? scope.row[tableHeader.index].other.tag.size : null" :class="scope.row[tableHeader.index].other.tag.class ? scope.row[tableHeader.index].other.tag.class : null" >{{scope.row[tableHeader.index].value}}</el-tag>
                </template>
                <template v-else-if="scope.row[tableHeader.index].other.progress" >
                  <el-progress type="circle" :percentage="Number.parseInt(percentList['MOVE_PERCENT'][scope.row.ID])"
                               :width="50"
                               :stroke-width="3"></el-progress>
                </template>
                <template v-else>
                  <div v-html="scope.row[tableHeader.index].value"></div>
                </template>
              </template>
            </el-table-column>
          </el-table>
          <div class="white-box-footer">
            <el-button type="success" size="small" @click="handleExport"
                       v-show="permission.hasPermission(`atlas/network-line-list-export`)">Export Excel
            </el-button>
            <pagination :total="totalCount" :page_size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange"></pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import network from '@/utils/network'
  import tool from '@/utils/tool'
  import store from '@/utils/vuexStore'
  import permission from '@/utils/permission'
  import Pagination from '@/components/Pagination'
  import baseInfo from '@/utils/baseInfo'

  export default {
    name: 'atlas_network-line-opt',
    components: {Pagination},
    mounted() {
      this.getData()
      store.state.socket.onMessageCallback = this.onMessageCallback
    },
    data() {
      return {
        loading: true,
        tabActiveName: 'first',
        permission: permission,
        //relation
        props: {
          label: 'USER_NAME',
          children: 'children',
          //isLeaf: 'leaf',
          icon: 'icon',
        },
        timeLineData: null,
        expandDeep: 2,
        topDeep: 0,
        mainUserName: '',
        periodNum: null,
        listPeriodNum: null,
        allData: null,
        tableHeaders: null,
        tableData: null,
        currentPage: 1,
        totalPages: 1,
        totalCount: 1,
        pageSize: 20,
        tool: tool,
        filterForm: {
          userName: null,
          deep: null,
          periodNum: null,
        },
        listTopDeep: 0,
      }
    },
    methods: {
      getData() {
        this.$message({
          message: '正在获取数据，请稍后',
        })
        this.periodNum = baseInfo.nowPeriodNum()
        this.filterForm.periodNum = baseInfo.nowPeriodNum()
        if (permission.hasPermission(`atlas/network-line-list`)) {
          this.tabActiveName = 'two'
        }
        if (permission.hasPermission(`atlas/network-line`)) {
          this.tabActiveName = 'first'
        }
        this.loading = false
      },
      getMainData (userName = null, getList = false) {
        this.$message({
          message: '正在获取数据，请稍后',
        })
        let thisObj = this
        let requestData = {
          periodNum: this.periodNum
        }
        if (this.mainUserName !== null) {
          requestData = {userName: this.mainUserName,periodNum: this.periodNum}
        }
        network.getData('atlas/network-line', requestData).then(response => {
          thisObj.timeLineData = response.list
          thisObj.loading = false
        }).catch(response => {
          thisObj.loading = false
        })
      },
      countTopDeep(deep,topDeep){
        return Number(deep)-Number(topDeep)
      },
      handleCurrentChange (page) {
        this.getListData(page, this.pageSize)
      },
      handleSizeChange (pageSize) {
        this.getListData(this.currentPage, pageSize)
      },
      handleFilter () {
        this.getListData(1, this.pageSize)
        this.tabActiveName = 'two'
      },
      handleShow(row) {
        this.loading = true
        this.filterForm.userName = row.USER_NAME
        this.getListData(1, this.pageSize)
        this.tabActiveName = 'two'
      },
      getListData (page, pageSize) {
        let obj = this
        network.getPageData(this, 'atlas/network-line-list', page, pageSize, this.filterForm, function (response) {
          obj.allData = response
          obj.listPeriodNum = response.periodNum
          obj.listTopDeep = response.listTopDeep
        })
      },
      onMessageCallback(data) {
        //this.getData(this.currentPage, this.pageSize, false)
      },
      handleExport(){
        this.$confirm(`确定要导出当前数据吗？`, 'Notice', {
          confirmButtonText: 'confirm', // 确定
          cancelButtonText: 'cancel', // 取消
          type: 'warning'
        }).then(() => {
          return network.getData(`atlas/network-line-list-export`, this.filterForm)
        }).then(response => {
          this.$message({
            message: response,
            type: 'success'
          })
        }).catch(response => {

        })
      },
    }
  }
</script>

<style>
  .l-height{line-height: 32px;}
  .out-side{white-space:nowrap;}
  .tag-header{width:150px;text-align: center;}
  .llt-header{color: #2b2b2b;font-size: medium}
  .el-timeline-item__content .tag-header{border-color: #fff;}
  .filter-user{font-size: 14px;margin-bottom: 20px;}
  .filter-user:after{content: '';display: table;
    clear: both;}
  .filter-user .el-input-group{position: relative;}
  .filter-user .el-input-group,.filter-user .el-button{float: left;margin-right: 15px;}
  .el-timeline {
    padding-top:20px;
    padding-bottom:20px;
    font-size: 14px;
    overflow-x: auto;
  }

  .el-timeline .el-tag {
    height: 20px;
    line-height: 18px;vertical-align: middle;
  }
</style>