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> -->
    <template>
        <div style="height:100%;padding-bottom: 60px;">
          <el-col :span="3" style="height:100%;padding-right:20px;">
            <el-menu
              default-active="this.$route.path"
              class="el-menu-vertical-demo"
               :router="true" style="height:100%; background-color: #F5F5F6;" >
                <el-menu-item index="overview" >
                    <i class="ri-home-4-line"></i>
                    <span slot="title">概览</span>
                </el-menu-item>
                <el-submenu index="1">
                    <template slot="title">
                    <el-image style="width: 13px; height: 13px" src="/img/pro_rgb.svg">
                    </el-image>
                    <span>项目分析</span>
                    </template>
                    <el-menu-item index="ProTend">项目增长趋势分析</el-menu-item> 
                    <el-menu-item index="ProAnalysis">详细数据</el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                    <i class="ri-user-line"></i>
                    <span>用户分析</span>
                    </template>
                    <el-menu-item index="UserAnalysis">用户增长趋势分析</el-menu-item> 
                    <el-menu-item index="2-2">活动分析</el-menu-item>
                </el-submenu>
                <el-menu-item index="demo">
                    <i class="ri-server-fill"></i>
                    <span slot="title">云脑分析</span>
                </el-menu-item>
            </el-menu>
            
          </el-col>
          <router-view> </router-view>
          </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
    }

    .bk{
        background-color: #F5F5F6;
    }
    .el-menu-item.is-active {
    color: #409eff;
    background-color: #FFFFFF !important;
}
    /* .el-menu-item.el-image{
        filter:grayscale(100%)
    }
 .el-menu-item.is-active.el-image{
        filter:grayscale(0%) ;
    } */
  
    </style>