aiforge/web_src/js/components/DataAnalysis.vue

<template>
    <div  style="height:100%">
        <el-tabs tab-position="left" v-model="activeName" style="height:100%" @tab-click="handleClick" >
            <el-tab-pane label="概览" name="first" >
                <span slot="label"> 
                    <el-image style="width: 13px; height: 13px" src="/img/overview.png">
                    </el-image>
                    概览 
                </span>    
                <div >概览.......</div>
                <div >概览.......</div>   
                <div >概览.......</div><div >概览.......</div>
                <div >概览.......</div>
            </el-tab-pane>
            <el-tab-pane label="项目分析" name="second" id="second" >
                <ProAnalysis  ref='ProAnalysis'id="pro" v-if="isRouterAlive"></ProAnalysis>
                <span slot="label"> 
                    <el-image style="width: 13px; height: 13px" src="/img/pro.svg">
                    </el-image>
                    项目分析 
                </span> 
            </el-tab-pane>
            <el-tab-pane name="third" > 
                <span slot='label'>
                    <el-image style="width: 13px; height: 13px" src="/img/name.png">
                    </el-image>
                    用户分析 
                </span>
                <UserAnalysis ref='UserAnalysis' id ="usr"></UserAnalysis>
            </el-tab-pane>
      </el-tabs>
      </div>
    </template>

    <script>
        import ProAnalysis from './ProAnalysis.vue'
        import UserAnalysis from './UserAnalysis.vue'

        export default {

            components:{
                'ProAnalysis':ProAnalysis,
                'UserAnalysis':UserAnalysis,
            },
            data() {
                return {
                    activeName:"second",
                    loading:true,
                    loading1:true,
                    isRouterAlive: true,
                    
                    isSecond:true,
                    isThird:false,
                }
            },
            methods:{
                handleClick(tab, event){
                    if(tab.name=="second"){
                        this.reload()
                        //document.getElementById('usr').style.display="none"
                        //document.getElementById("pro").style.display='block'
                        
                        //this.$refs.ProAnalysis.getAllProList("all",7)

                        this.isSecond = true
                        this.isThird = false
                        this.$refs.ProAnalysis.getAllProList("all",7)
                    }
                    if(tab.name=="third"){
                        // document.getElementById('usr').style.display="block"
                        // document.getElementById("pro").style.display='none'
                        this.$refs.UserAnalysis.getUserList("all_usr",7)

                        this.isSecond = false
                        this.isThird = true
                    }

                    },
                    
                    reload () {
                        this.isRouterAlive = false
                        this.$nextTick(() => (this.isRouterAlive = true))
                    }   

            },
        }
    </script>
    
    <style scoped>
     /deep/ .is-active{
    color: #238BFC ;
    background-color: #FFFF ;
    }
    /deep/ .ui-container{
      background-color: #FFFF;
    }
    
    
    /deep/ .el-tabs--left .el-tabs__header.is-left{
      background-color:#F5F5F6;
      width: 12.43%;
    
    }
    .el-tabs--left .el-tabs__header.is-left
    
    
    html,
    body,
    /deep/ .el-container {
      padding: 0px;
      margin: 0px;
      height: 100%;
    }
    
    /deep/ .el-tabs--left .el-tabs__item.is-left {
        text-align: left;
    }
    /deep/ .el-tabs__item {
        padding: 0px 20px 0px 20px;
    }

  
    </style>