已完成：
- 后台的管理功能：
这里用的组件是 element-UI ====> NavMenu
◆首先是排版 ：
1 <div class="manage-page fillcontain"> 2 <el-row style="height: 100%;"> 3 <el-col :span="width" style="height: 100%;background-color: #324057;overflow-y:scroll"> 4 <el-menu :default-active="defaultPath" ref='homeMenu' :default-openeds='arr' style="min-height: 100%;" text-color="#ffffff" unique-opened router @select='selectRouter' @close='closeMenu'> 5 <el-submenu index="1"> 6 <template slot="title"> 7 <i class="el-icon-star-on"></i> 8 <span>实时管理</span> 9 <span class="red-dots dot-little" v-show="applyNum>0 || btext.bool || storageSpace"></span> 10 </template> 11 <el-submenu index="1-1"> 12 <template slot="title"> 13 <i class="el-icon-bell"></i> 14 <span>实时</span> 15 </template> 16 <el-menu-item index="/realTimeStatus">实时状况</el-menu-item> 17 <el-menu-item index="/baseData">基础数据</el-menu-item> 18 <el-menu-item index="/GPURealTime">GPU实时统计</el-menu-item> 19 </el-submenu> 20 <el-submenu index="1-2" v-if="is_administrator"> 21 <template slot="title"> 22 <i class="el-icon-time"></i> 23 <span>主机部署</span> 24 </template> 25 <el-menu-item index="/hostScan">主机扫描</el-menu-item> 26 </el-submenu> 27 <el-submenu index="1-3"> 28 <template slot="title"> 29 <i class="el-icon-plus"></i> 30 <span>设备管理</span> 31 <span class="red-dots dot-little" v-show="btext.bool || storageSpace"></span> 32 </template> 33 <el-menu-item index="/deviceList">设备列表</el-menu-item> 34 <el-menu-item index="/hostList">主机列表 35 <span class="red-dots " v-show="btext.bool">{{btext.num}}</span> 36 </el-menu-item> 37 <el-menu-item index="/modelList">模板列表</el-menu-item> 38 <el-menu-item index="/spaceList">存储空间列表 39 <span class="red-dots" v-show="storageSpace>0">{{storageSpace}}</span> 40 </el-menu-item> 41 <el-menu-item index="/priceList">价格列表</el-menu-item> 42 <el-menu-item index="/networkAgent">网络代理列表</el-menu-item> 43 </el-submenu> 44 <el-submenu index="1-4"> 45 <template slot="title"> 46 <i class="el-icon-goods"></i> 47 <span>市场管理</span> 48 <span class="red-dots dot-little" v-show="workerOrderApply>0"></span> 49 </template> 50 <el-menu-item index="/serviceList">服务列表</el-menu-item> 51 <el-menu-item index="/workOrderList">工单列表 52 <span class="red-dots" v-show="workerOrderApply>0">{{workerOrderApply}}</span> 53 </el-menu-item> 54 <el-menu-item index="/createWorkOrder">创建工单</el-menu-item> 55 <el-menu-item index="/AISoundCode">AI 源码列表</el-menu-item> 56 </el-submenu> 57 <el-submenu index="1-5"> 58 <template slot="title"> 59 <i class="el-icon-printer"></i> 60 <span>财务管理</span> 61 <span class="red-dots dot-little" v-show="billingApply>0"></span> 62 </template> 63 <el-menu-item index="/invoiceProcessing">发票管理 64 <span class="red-dots" v-show="billingApply>0">{{billingApply}}</span> 65 </el-menu-item> 66 <el-menu-item index="/rechargeInfo">收入管理</el-menu-item> 67 <el-menu-item index="/expenditure">支出管理</el-menu-item> 68 <el-menu-item index="/systemPresented">系统赠送</el-menu-item> 69 </el-submenu> 70 <el-submenu index="1-6"> 71 <template slot="title"> 72 <i class="el-icon-user-solid"></i> 73 <span>用户管理</span> 74 </template> 75 <el-menu-item index="/userInfo">用户列表</el-menu-item> 76 <el-menu-item index="/wxUserList">微信用户列表</el-menu-item> 77 </el-submenu> 78 <el-submenu index="1-7"> 79 <template slot="title"> 80 <i class="el-icon-share"></i> 81 <span>推广管理</span> 82 <span class="red-dots dot-little" v-show="(ambassadorApply>0 || withdrawApply>0)"></span> 83 </template> 84 <el-menu-item index="/recommendApply">推广申请 85 <span class="red-dots" v-show="ambassadorApply>0">{{ambassadorApply}}</span> 86 </el-menu-item> 87 <el-menu-item index="/withdrawApply">提现申请 88 <span class="red-dots" v-show="withdrawApply>0">{{withdrawApply}}</span> 89 </el-menu-item> 90 <el-menu-item index="/recommendList">推广信息列表</el-menu-item> 91 </el-submenu> 92 <el-submenu index="1-8"> 93 <template slot="title"> 94 <i class="el-icon-edit"></i> 95 <span>活动管理</span> 96 </template> 97 <el-menu-item index="/discountList">折扣列表</el-menu-item> 98 <el-menu-item index="/activityList">活动列表</el-menu-item> 99 </el-submenu> 100 <el-submenu index="1-9"> 101 <template slot="title"> 102 <i class="el-icon-news"></i> 103 <span>公告管理</span> 104 </template> 105 <el-menu-item index="/notice">公告列表</el-menu-item> 106 </el-submenu> 107 <el-submenu index="1-10" v-if="is_administrator"> 108 <template slot="title"> 109 <i class="el-icon-setting"></i> 110 <span>权限管理</span> 111 </template> 112 <el-menu-item index="/userRole">角色列表</el-menu-item> 113 <el-menu-item index="/permission">权限列表</el-menu-item> 114 <el-menu-item index="/role">角色管理</el-menu-item> 115 </el-submenu> 116 </el-submenu> 117 <el-submenu index="2"> 118 <template slot="title"> 119 <i class="el-icon-document"></i> 120 <span>统计分析</span> 121 </template> 122 <el-submenu index="2-1"> 123 <template slot="title"> 124 <i class="el-icon-document"></i> 125 <span>设备使用情况</span> 126 </template> 127 <el-menu-item index="/equipData">GPU 租用总量总计</el-menu-item> 128 <el-menu-item index="/GPUAvailability">GPU 利用率统计</el-menu-item> 129 <el-menu-item index="/GPUUsed">GPU 使用分时统计</el-menu-item> 130 <el-menu-item index="/GPURent">GPU 租用采样统计</el-menu-item> 131 <el-menu-item index="/GPUUtilizationHeap">GPU 利用率堆积图</el-menu-item> 132 <el-menu-item index="/GPURentBenefit">GPU 租用效益统计</el-menu-item> 133 <!-- <el-menu-item index="/occupancyAnalysis">租用量分析</el-menu-item> 134 <el-menu-item index="/rentalFeeAnalysis">租赁费分析</el-menu-item> --> 135 <!-- <el-menu-item index="/rentalBenefitAnalysis">租用效益分析</el-menu-item> --> 136 </el-submenu> 137 <el-submenu index="2-2"> 138 <template slot="title"> 139 <i class="el-icon-document"></i> 140 <span>用户基本情况</span> 141 </template> 142 <el-menu-item index="/userGrow">用户增长统计</el-menu-item> 143 <el-menu-item index="/userRegister">用户注册时间分布</el-menu-item> 144 <el-menu-item index="/userInformat">用户活跃量统计</el-menu-item> 145 <el-menu-item index="/useTime">使用时长统计</el-menu-item> 146 <el-menu-item index="/userAttribute">用户属性统计</el-menu-item> 147 <el-menu-item index="/visitor">用户排行榜</el-menu-item> 148 <el-menu-item index="/visitStatistics">网站访问统计</el-menu-item> 149 </el-submenu> 150 <el-submenu index="2-7"> 151 <template slot="title"> 152 <i class="el-icon-pie-chart"></i> 153 <span>用户分布统计</span> 154 </template> 155 <el-menu-item index="/provinceStatistics">省份人数分布</el-menu-item> 156 <el-menu-item index="/cityStatistics">城市人数分布</el-menu-item> 157 <el-menu-item index="/schoolStatistics">学校人数分布</el-menu-item> 158 </el-submenu> 159 <el-submenu index="2-3"> 160 <template slot="title"> 161 <i class="el-icon-document"></i> 162 <span>用户 GPU 利用率</span> 163 </template> 164 <el-menu-item index="/rankingList">用户 GPU 利用率排行榜</el-menu-item> 165 </el-submenu> 166 <el-submenu index="2-4"> 167 <template slot="title"> 168 <i class="el-icon-document"></i> 169 <span>用户消费情况</span> 170 </template> 171 <el-menu-item index="/userExpense">消费类型统计</el-menu-item> 172 <el-menu-item index="/mainframeLease">主机租赁统计</el-menu-item> 173 <el-menu-item index="/incrementService">增值服务统计</el-menu-item> 174 <el-menu-item index="/ticketsUsed">消费券使用记录</el-menu-item> 175 <el-menu-item index="/codeList">AI 源码用户购买列表</el-menu-item> 176 </el-submenu> 177 <el-submenu index="2-5"> 178 <template slot="title"> 179 <i class="el-icon-document"></i> 180 <span>用户充值情况</span> 181 </template> 182 <el-menu-item index="/userRecharge">用户充值额统计</el-menu-item> 183 <el-menu-item index="/userRechargeType">用户充值渠道统计</el-menu-item> 184 </el-submenu> 185 <el-submenu index="2-6"> 186 <template slot="title"> 187 <i class="el-icon-document"></i> 188 <span>公司收支分析</span> 189 </template> 190 <el-menu-item index="/comparative">收支对比</el-menu-item> 191 <el-menu-item index="/income">收入统计</el-menu-item> 192 <el-menu-item index="/expenditureTow">支出统计</el-menu-item> 193 </el-submenu> 194 </el-submenu> 195 <el-submenu index='3'> 196 <template slot="title"> 197 <i class="el-icon-s-promotion"></i> 198 <span>直达</span> 199 </template> 200 <!-- <el-menu-item index="/nonstop">快捷方式设置</el-menu-item> --> 201 <el-menu-item v-for='(item,index) in urlList' :index="`3-${index}`" :route="{path:item.nav_url,query:{copy:1}}" :key="index">{{item.nav_name}}</el-menu-item> 202 </el-submenu> 203 </el-menu> 204 </el-col> 205 <el-col :span="(24-width)" style="height: 100%"> 206 <head-top v-on:changeMenu='openAMenu'></head-top> 207 <div class="content"> 208 <keep-alive> 209 <router-view></router-view> 210 </keep-alive> 211 <div class="scrollbar"></div> 212 </div> 213 </el-col> 214 </el-row> 215 </div>
◆消息提示：
小红点样式
.red-dots { display: inline-block; color: white; vertical-align: middle; margin-left: 5px; margin-top: -2px; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 15px; font-size: 10px; background-color: rgb(206, 43, 43); }
如何实现小红点的判断：
1 <template slot="title"> 2 <i class="el-icon-plus"></i> 3 <span>设备管理</span> 4 <span class="red-dots dot-little" v-show="btext.bool || storageSpace"></span> 5 </template>
路由跳转
1 <el-menu-item index="/userExpense">消费类型统计</el-menu-item> 2 <el-menu-item index="/mainframeLease">主机租赁统计</el-menu-item> 3 <el-menu-item index="/incrementService">增值服务统计</el-menu-item> 4 <el-menu-item index="/ticketsUsed">消费券使用记录</el-menu-item> 5 <el-menu-item index="/codeList">AI 源码用户购买列表</el-menu-item>
子组件向父组件传值
1 openMenu(index){ 2 if(index){ 3 this.$emit('changeMenu',index); //$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数 4 } 5 }
父组件获取值
1 <head-top v-on:changeMenu='openTheMenu'></head-top>
//打开指定菜单 openTheMenu(index) { this.$refs["homeMenu"].open(index); }
待完成 ：
- 聊天室
- 直播