hi-ucs/back/src/views/modules/abilityStatistics/index.vue

<template>
<div >
    <div class='container'>
         <!-- <div class='container-left'  v-if='homeIsShow'>
        <div class='left-search'>
            <div>
                <input type="text" class='input-style' placeholder="请输入部门关键词" v-model="inputTxt">
                <div class='input-search'  @click='searchBtn'>
                    <img src="@/assets/img/搜索.png" style='margin-top:7px;margin-left:16px' >
                </div>
            </div>
        </div>
        <el-tree
            class='tree-style'
            :data="treeData"
            :props="defaultProps"
            accordion
            @node-click="handleNodeClick">
           <span slot-scope="{ node }" class='tree-text-style'>
                <img  src="@/assets/img/一级图标.png" style="width: 16px; height: 16px" />
                {{ node.label }}
           </span>
        </el-tree>
         </div> -->
     <el-card shadow="never" class="aui-card--fill"  v-if='homeIsShow'>        
    <div class="mod-demand__bsdemand">
        <div class='top-box'>
            <span class='title'>能力统计</span>
            <div class='title-list-style'>
            <div v-for="(item,index) in titleList" :key='index' class='title-single' :class="{'choseStyle':choseId=== index}" @click="choseBtn(index)">
             <span class='box-style'>{{item.name}}</span>
            </div>
    </div>
        </div>
         <div class='second-title'>
            <span style='margin-right:30px' :class="[departmentId===1?'departmentStyle':'']" @click="handleChose(1)">
                部门发布情况
            </span>
            <span :class="[departmentId===2?'departmentStyle':'']"  @click="handleChose(2)">
                部门使用情况
            </span>           
         </div>
         <div class='line-style'></div>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
            prop="deptName"
            label="部门名称"
            min-width="100%">
        </el-table-column>
        <el-table-column
            prop="resourceNum"
            label="发布总数"
            min-width="100%">
        </el-table-column>
        <el-table-column v-if="this.choseId===0"
            prop="resourceCarNum"
            label="被申请总数"
            min-width="100%">
        </el-table-column>
        <el-table-column
            prop="resourceBrowseNum"
            label="浏览总量"
            min-width="100%">
        </el-table-column>
        <el-table-column
            prop="resourceCollectionNum"
            label="收藏量"
            min-width="100%">
        </el-table-column>
        <el-table-column v-if="this.choseId===0"
            prop="resourceVisits"
            label="被调用总数"
            min-width="100%">
        </el-table-column>
        <el-table-column v-if="this.choseId===0"
            prop="resourceRelNum"
            label="被应用总数"
            min-width="100%">
        </el-table-column>
        <el-table-column v-if="this.choseId===0"
            prop="resourceShareNum" 
            label="需申请数量"
            min-width="100%">
        </el-table-column>
        <el-table-column v-if="this.choseId===0"
            prop="resourceShareNonNum"
            label="免批数量"
            min-width="100%">
        </el-table-column>
        <el-table-column
            label="操作"
            min-width="92%">
        <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
        </template>
        </el-table-column>
    </el-table>
    <div class="block">
    <el-pagination
      @current-change="handleCurrentChange"
      layout="total, prev, pager, next, jumper"
      :total="total"
      :page-size="5"
      :current-page="currentPage"
      >
    </el-pagination>
  </div>
    </div>   
  </el-card>
    </div>
   <component-services v-if='servicesIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-services>
   <application-resources  v-if='resourcesIsShow'  :tableId='tableId' :fatherId='fatherId' @closeApplication='closeApplication'></application-resources>
</div>  
</template>
<script>
import componentServices from './componentServices.vue'
import applicationResources from './applicationResources.vue'
export default {
    components:{componentServices,applicationResources},
    data(){
        return{
            inputTxt:'',
            tableId:'',
            fatherId:'',
            treeData: [{
                label: '一级 1',
                children: [{
                    label: '二级 1-1',
                    children: [{
                    label: '三级 1-1-1'
                    }]
                }]
                }, {
                label: '一级 2',
                    children: [{
                        label: '二级 2-1',
                        children: [{
                        label: '三级 2-1-1'
                        }]
                    }, {
                        label: '二级 2-2',
                        children: [{
                        label: '三级 2-2-1'
                        }]
                    }]
                }, {
                label: '一级 3',
                children: [{
                    label: '二级 3-1',
                    children: [{
                    label: '三级 3-1-1'
                    }]
                }, {
                    label: '二级 3-2',
                    children: [{
                    label: '三级 3-2-1'
                    }]
                }]
                }],
            total:null,
            defaultProps: {
            children: 'children',
            label: 'name'
            },
            choseId:0,
            departmentId:1,
            currentPage: 1,
            homeIsShow:true,
            servicesIsShow:false,
            resourcesIsShow:false,
            titleList:[
                {name:'组件服务',key:1}, {name:'应用资源',key:2}, {name:'基础设施',key:3}, {name:'数据资源',key:3}, {name:'知识库',key:3},
            ],
            tableData: []
        }
    },
    created(){
      
        
    },
    mounted(){
         this.getFirstTree()
    },
     methods: {
        //搜索框
        // searchBtn(){
        //     this.getALLTree()
        // },
        //  //树
        //     handleNodeClick(data) {
        //         console.log(data.name);
        //         this.getTreeName(data)
        //     },
            //翻页
            handleCurrentChange(val){
                if(this.choseId===0){
                     this.getFirstTree(val)
                }
               else if(this.choseId===1){
                this.getReleaseTree(val)
               }               
            },
             getTreeName (data) {               
                this.$http.get('/census/center/v3/treeList/' ,{
                  params : {
                    keywords:data.name,
                    deptId:'1067246875800000066',
                    // pageNo: pageNo || 1,
                    // pageSize: 20
                    }                    
            }).then(res => {
                this.tableData =res.data.data
            })
            },
        //  // 获取部门列表
        //     getALLTree () {               
        //     this.$http.get('/census/center/v3/treeList/' ,{
        //           params : {
        //             keywords:this.inputTxt,
        //             deptId:'1067246875800000066',
        //             // pageNo: pageNo || 1,
        //             // pageSize: 20
        //             }                    
        //     }).then(res => {
        //         this.treeData =res.data.data
        //         // this.tableData =res.data.data
        //     })
        //     },

          // 组件服务部门发布情况
            getFirstTree (page) {               
            this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
                  params : {
                    page:page||1,
                    limit:5,                  
                    // id:'1067246875800000066',
                    resourceType:'组件服务'
                    }                    
            }).then(res => {
                this.tableData =res.data.data.list
                this.total = res.data.data.total            
            })
            },
            // 组件服务部门使用情况列表
            getSecondTree () {               
            this.$http.get('/census/center/v3/resourceUsedDetails/' ,{
                  params : {
                    limit:5,
                    page:1,
                    // id:'1067246875800000064',
                    resourceType:'组件服务'
                    }                     
            }).then(res => {
                this.tableData =res.data.data.list
            
            })
            },
             // 应用资源部门发布情况列表
            getReleaseTree (page) {               
            this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
                  params : {
                    limit:5,
                    page:page||1,
                    // id:'1067246875800000066',
                    resourceType:'应用资源'
                    }                     
            }).then(res => {
                this.tableData =res.data.data.list
                this.total = res.data.data.total
            
            })
            },
            // 应用资源部门使用情况列表
            getUsedTree () {               
            this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
                  params : {
                    limit:5,
                    page:1,
                    // id:'1067246875800000066',
                    resourceType:'应用资源'
                    }                     
            }).then(res => {
                this.tableData =res.data.data.list
            
            })
            },
      handleClick(row) {
        if(this.choseId===0){
            this.homeIsShow=false
            this.servicesIsShow=true
            this.tableId=row.deptId
            this.fatherId=1
        }else if(this.choseId===1){
            this.homeIsShow=false
            this.resourcesIsShow=true
            this.tableId=row.deptId
            this.fatherId=2
        }
       
      },
      //选择组件
      choseBtn(index){
        this.choseId=index
        this.handleChose(1)
      },
    //   choseBtn(index){
    //     this.choseId=index
    //     if (index===0){
    //         this.homeIsShow=false
    //         this.servicesIsShow=true
    //     } else if(index===1){
    //         this.homeIsShow=false
    //         this.servicesIsShow=false
    //         this.resourcesIsShow=true
    //     }
    //   },
      //选择发布or使用表格
      handleChose(index){
        this.departmentId=index
        if(index===1){
            if(this.choseId===0){
                this.getFirstTree()
            }else if(this.choseId===1){
                this.getReleaseTree()
            }            
        }else if(index===2){
             if(this.choseId===0){
                this.getSecondTree()
            }else{
                this.getUsedTree()
            }  
        }
      },
      //翻页
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      closeChild(){
        this.homeIsShow=true
        this.servicesIsShow=false
      },
       closeApplication(){
        this.homeIsShow=true
        this.resourcesIsShow=false
      }
    },

}
</script>
<style lang="scss" scoped>
.container{
    display: flex;

}
.container-left{
    width:250px;
    height:1000px;
    display: inline-block;
    // background-color: #ffffff;
    margin-right:10px
}
.left-search{
    width:250px;
    height:76px;
    background-color: #ffffff;
}
.input-style{
    width:210px;
    height:36px;
    margin:20px 20px;
    padding-left: 20px;
    border-radius: 18px;
    border:1px solid transparent;
    background-color: #f2f4fa;
}
input::placeholder {
   font-weight: 400;
   font-size: 14px;
   color: #b0b3ca;
}
.input-search{
    width:44px;
    height:30px;
    background-color: #ffffff;
    position: absolute;
    border-radius: 15px;
    top:38px;
    left:196px;
}
::v-deep.tree-style  {
  .el-tree-node__label{
        font-size:16px;        
    }
    .el-tree-node__content{
            width:240px;
        overflow: hidden;        
        text-overflow: ellipsis;
        white-space: nowrap;    
    }
}

.top-box{
    height:80px;
    width:100%;
    background-color: #fafafc;
    display: inline-block;
}
    .title{
        display: flex;
        font-size:20px; 
        color:#000000;
        font-weight: bold;
        padding-left:15px;
        padding-top:10px;
    }
    .title-list-style{
        display: flex;
        margin-top:10px;
        
    }
    .title-single{
        font-size:14px;
        width:90px;
        color:#666666;
        height:24px;
        margin-left:10px;
        border:1px solid #cccccc;
        border-radius: 12px;
        cursor:pointer
       
    }
    .box-style{
        width:90px;
        height:24px;
        display:flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 2px;
    }
    .second-title{
        margin-top:20px;
        font-size: 14px;
        color:#979eb9;
        cursor:pointer
    }
    .line-style{
         width:100%;
         height:1px;
         background-color:#f5f6fa;
         margin-top:15px;
         margin-bottom:15px;
    }
   .aui-card--fill{
        width:100% !important;
        padding: 0px !important;
    }
    .choseStyle{
        color:#526aff;
        border:1px solid #526aff
    }
    .departmentStyle{
        color:#526aff
    }
   ::v-deep .tree-text-styleJ{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>