# monit

**Repository Path**: Maxfengyan/monit

## Basic Information

- **Project Name**: monit
- **Description**: monit
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-09-13
- **Last Updated**: 2020-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目名称：boss-monit
### 项目描述：广电融合用户播控平台-数据监控系统
### 开发者：马丰彦
### 描述：
- boss-monit系统为boss系统的数据监控系统，包含IPTV线上的产品数据同步统计、用户下发、实时监控同步成功失败、工单执行下发等功能（没有做websocket主动推送）。
- boss-monit每次切换menu是都会用从中心登录系统传入的token主动调取权限接口，来做到动态获取权限加载，做到权限无缝切换修改，无需重新登录。
- 系统左侧菜单三角处为各个系统衔接的入口，可以通过点击进入到不同系统（url携带token参数，处理与登录中心相同。）
- 系统内核心为图表，展示各种统计数据
- 业务中心有平台的概念，所有涉及到所属平台下拉框搜索的都配有平台校验权限，如果没有多平台权限，所属平台下拉框会隐藏掉，搜索条件固定单一平台权限。
- 左侧菜单为动态路由加载，接口传入几个平台权限，菜单就会根据权限显示（包括每个菜单下的按钮）。
### 技术栈：vue/vue-router/vuex/element-ui/axios/crypto-js/mockjs等
### <div style="color:red;">核心逻辑处理:</div>
- 通过登录中心传入的url参数，获取到了token值
- token值存入cookie以及store中
- 调取`获取用户`接口，得到用户的所有权限
- 在store中处理好接收到的参数，把分平台拆分处理循环存入路由数组中，并把获取到的菜单权限+按钮权限存入store中便于menu显示以及按钮指令接收。
- 在路由守卫中调用addRouter()，实现路由动态加载。在页面中调用指令v-power实现按钮权限(感觉实现的逻辑很复杂，为什么一句话就说完了，sad)
### <h4 style="color:red;">注意：除正式线上环境外，所有其他演示环境皆为mock数据(重写了axios拦截请求)。为方便处理，所有mock数据没有做到根据请求参数来返回结果，*故所有总平台与分平台的用户管控以及统计数据皆相同，特此说明。*</h4>
#### 项目结构
```
|— build                                // 构建相关
|— public                               // 不打包文件
|— dist                                 // 打包文件
|— mock                                 // mock数据
|— src                                  // 源代码
|   |— api                              // 所有http请求(每个模块对应每个请求模块)
|   |— assets                           // 静态图片文件
|   |— components                       // 全局公用组件
|   |   |— Breadcrumb                   // 封装面包屑导航组件
|   |   |— Hamburger                    // 封装侧边栏状态组件
|   |   |— SvgIcon                      // 封装icon图标库组件
|   |— directive                        // 按钮权限自定义指令
|   |— icons                            // svg图标库/iconfont图标库
|   |— router                           // 全局路由管理
|   |— store                            // vuex缓存数据存放
|   |   |— modules                      // vuex模块
|   |   |     |— app.js                 // 侧边栏状态存储
|   |   |     |— permission.js          // 权限处理js
|   |   |     |— setting.js             // 过滤路由表
|   |   |     |— user.js                // 获取用户状态：登录、登出、前端登出、获取用户信息
|   |   |— getters.js                   // vuex getters 
|   |   |— index.js                     // vuex 入口页
|   |— styles                           // css样式文件
|   |    |— element-ui.scss             // 修改原生element-ui框架样式
|   |    |— index.scss                  // 默认样式统一
|   |    |— mixin.scss                  // 修改侧边栏滚动条
|   |    |— sidebar.scss                // 侧边栏样式
|   |    |— transition.scss             // 页面跳转过渡动画效果
|   |    |— variables.scss              // 变量样式，一键换肤
|   |— utils                            // 全局公用项目
|   |   |— auth.js                      // 获取用户token写缓存
|   |   |— downLoad.js                  // excel下载封装
|   |   |— loading.js                   // 封装axios请求全局遮罩
|   |   |— index.js                     // 工具类
|   |   |— request.js                   // 封装axios请求
|   |   |— secret.js                    // 封装aes+base64加密
|   |   |— urldecode.js                 // 封装url解码方法
|   |   |— urlencode.js                 // 封装url转码方法
|   |   |— validate.js                  // 正则验证
|   |— views                            // 所有页面
|   |   |— dashboard                    // 进入主页
|   |   |— layout                       // 布局页面
|   |   |   |— components               // 布局页面组件
|   |   |   |   |— Sidebar              // 侧边栏
|   |   |   |   |   |— index.vue        // 侧边栏主体
|   |   |   |   |   |— Item.vue         // 侧边栏图标实现
|   |   |   |   |   |— SidebarItem.vue  // 侧边栏嵌套实现
|   |   |   |   |— index.js             // 侧边栏入口文件
|   |   |   |   |— APPMain              // 主体部分
|   |   |   |   |— Navbar               // 头部导航栏 
|   |   |   |   |— mixin                // 侧边栏收缩实现
|   |   |   |   |— layout               // 页面布局
|   |   |— productMonit                 // 产品监控
|   |   |   |— index.vue                // 产品监控
|   |   |— userMonit                    // 用户监控
|   |   |   |— index.vue                // 用户监控
|   |   |— 404.vue                      // 404错误页面
|   |— App.vue                          // 入口挂载页面
|   |— main.js                          // 总入口文件
|   |— permission.js                    // 封装权限管理+重定向页面        
|— static                               // 不打包资源
|— .babelrc                             // babel-loader配置
|— .editorconfig                        // 编辑器配置
|— .eslintrc.js                         // eslint配置
|— .gitignore                           // .git忽略项
|— .travis.yml                          // 自动化CI配置
|— index.html                           // html模板
|— package.json                         // npm包管理
|— README.md                            // 项目详细介绍
```