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_rgb.svg">
                    </el-image>
                    概览 
                </span>    
                <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_rgb.svg">
                    </el-image>
                    项目分析 
                </span> 
            </el-tab-pane>
            <el-tab-pane name="third" id='third' > 
                <span slot='label'>
                    <el-image style="width: 13px; height: 13px" src="/img/user_rgb.svg">
                    </el-image>
                    用户分析 
                </span>
                <UserAnalysis ref='UserAnalysis'  v-if="isRouterAlive1" id ="usr"></UserAnalysis>
            </el-tab-pane>
            <el-tab-pane name="four" id='four' > 
                <BrainAnalysis  ref='BrainAnalysis'id="brain" v-if="isRouterAlive"></BrainAnalysis>
                <span slot="label"> 
                    <el-image style="width: 13px; height: 13px" src="/img/pro_rgb.svg">
                    </el-image>
                    云脑分析 
                </span> 
            </el-tab-pane>
      </el-tabs>
      </div>
    </template>

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

        export default {

            components:{
                'ProAnalysis':ProAnalysis,
                'UserAnalysis':UserAnalysis,
                'BrainAnalysis':BrainAnalysis,
            },
            data() {
                return {
                    activeName:"second",
                    loading:true,
                    loading1:true,
                    isRouterAlive: true,
                    isRouterAlive1: true,
                    
                    isSecond:true,
                    isThird:false,
                }
            },
            methods:{
                handleClick(tab, event){
                    if(tab.name=="second"){
                        this.reload()

                        this.isSecond = true
                        this.isThird = false
                        this.$refs.ProAnalysis.getAllProList("all",7)
                    }
                    if(tab.name=="third"){

                        this.reload1()
                        this.isSecond = false
                        this.isThird = true

                        this.$refs.UserAnalysis.getUpdateTime()
                        this.$refs.UserAnalysis.getUserList("all_usr",7)
                        

                        
                    }

                },
                    
                reload () {
                    this.isRouterAlive = false
                    this.$nextTick(() => (this.isRouterAlive = true))
                },
                reload1 () {
                    this.isRouterAlive1 = false
                    this.$nextTick(() => (this.isRouterAlive1 = 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;
    }
    /deep/ .el-tabs__item.is-active .el-image{
        filter:none
    }
    /deep/ .el-tabs__item:hover .el-image{
        filter:none
    }
    /deep/ .el-image{
        filter:grayscale(100%)
    }
  
    </style>