# FMPWEB

**Repository Path**: zhangbin23/fmpweb

## Basic Information

- **Project Name**: FMPWEB
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-20
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<h1 align="center">Fault Management Of Vue</h1>
<div align="center">
An out-of-box UI solution for enterprise applications as a Vue boilerplate. based on  <a href="https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/" target="_blank">Ant Design Of Vue</a>
</div>

<div align="center">

[![Backers on Open Collective](https://opencollective.com/ant-design-pro-vue/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/ant-design-pro-vue/sponsors/badge.svg)](#sponsors) [![License](https://img.shields.io/npm/l/package.json.svg?style=flat)](https://github.com/sendya/ant-design-pro-vue/blob/master/LICENSE)
[![Release](https://img.shields.io/github/release/sendya/ant-design-pro-vue.svg?style=flat)](https://github.com/sendya/ant-design-pro-vue/releases/latest)
[![Travis branch](https://travis-ci.org/sendya/ant-design-pro-vue.svg?branch=master)](https://travis-ci.org/sendya/ant-design-pro-vue)

</div>

- 测试报告:
1、首页Dashboard仪表盘：
```js
const api = {
  alertCountToday: '/analyse/alertCountToday', // 当天统计,all、P0、P1、OK分类统计card展示正常
  alertCountDaily: '/analyse/alertCountDaily', // 过去七天每日统计汇总，MiniArea展示正常
  alertCountHourly: '/analyse/alertCountHourly', // 过去七天每小时统计汇总，MiniBar展示正常
  alertDuration: '/analyse/alertDuration', // 过去七天MTTR，minMttr，maxMttr展示正常
  alertTopMetric: '/analyse/alertTopMetric', // 监控项Top10 Barchart统计展示正常
  alertTopEndpoint: '/analyse/alertTopEndpoint', // 主机TOp10 Barchart统计展示正常
  alertCustomer: '/analyse/alertCustomer', // 人员处理时间ranklist排名展示正常
  alertPriorityCount: '/analyse/alertPriorityCount', // 各租户项目ranklist排名展示正常
  apiAvailabilityTop: '/analyse/apiAvailabilityTop', // 接口可用性TOP10 sTabble展示正常，分页10
  alertProjectCount: '/analyse/alertProjectCount' // 告警份级别 Piechart展示正常
}
```
2、列表详情页：
```js
const api = {
//   用户管理、权限控制留坑
//   user: '/user',
//   role: '/role',
//   service: '/service',
//   permission: '/permission',
//   permissionNoPager: '/permission/no-pager',
//   orgTree: '/org/tree', // 树形选择图测试，已废弃
  alert: '/alerts?priority__lte=2', // 告警列表stable展示正常，筛选功能正常，支持主机、状态、级别、监控系、责任人、综合筛选、模糊匹配；注：按照日期筛选功能异常，定位为日期格式传递有问题，修复中
  event: '/events?priority__lte=2', // 告警详情stable展示正常，分页10
  alertid: '/alerts/' // 详情页数据获取跳转正常
  // test: '/snippets',
  // orgTree: 'http://123.103.11.248/orgtrees/'
}

return axios({
    // 获取列表页主键ID传参跳转到对应详情页展示该ID所关联详细历史信息正常
    url: api.alertid + id, 
    // 近一周每天告警的数量趋势chart图展示正常，其中为空的日期补0值
    url: api.alertid + id + '/analyse/countDay',
    // 恢复时间按区间统计占比piechart展示正常
    url: api.alertid + id + '/analyse/durationRange',
    // 平均恢复时间, 最大/最小恢复时间card展示正常
    url: api.alertid + id + '/analyse/duration',

    method: 'get',
    params: parameter
  })

```

Overview
----

<!-- 基于 [Ant Design of Vue](https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/) 实现的 [Jucloud FMP](https://pro.ant.design/)  -->

<!-- ![首页-多标签模式](http://cdn.muinlu.cn/devops/JucloudAlert1.png) -->

![首页+多样式展示](http://cdn.muinlu.cn/devops/JucloudAlert3.png)

![告警列表](http://cdn.muinlu.cn/devops/JucloudAlert2.png)

![告警详情](http://cdn.muinlu.cn/devops/JucloudAlert4.png)

![历史关联](http://cdn.muinlu.cn/devops/JucloudAlert5.png)

环境和依赖
----

- node
- yarn
- webpack
- eslint
- @vue/cli ~3
- [ant-design-vue](https://github.com/vueComponent/ant-design-vue) - Ant Design Of Vue 实现
- [vue-cropper](https://github.com/xyxiao001/vue-cropper) - 头像裁剪组件
- [@antv/g2](https://antv.alipay.com/zh-cn/index.html) - Alipay AntV 数据可视化图表
- [Viser-vue](https://viserjs.github.io/docs.html#/viser/guide/installation)  - antv/g2 封装实现



项目下载和运行
----

- 拉取项目代码
```bash
git clone 
cd ant-design-pro-vue
```

- 安装依赖
```
npm install
```

- 开发模式运行
```
npm run serve
```

- 编译项目
```
npm run build
```

- Lints and fixes files
```
npm run lint
```



其他说明
----

- **关于 Issue 反馈 (重要!重要!重要!) 请在开 *Issue* 前，先阅读该内容：[Issue / PR 编写建议](http://123.103.91.185:8888/pages/viewpage.action?pageId=1868563)** 

- 项目使用的 [vue-cli3](https://cli.vuejs.org/guide/), 请确保你所使用的 vue-cli 是新版，并且已经学习 cli 官方文档使用教程

- 关闭 Eslint (不推荐) 移除 `package.json` 中 `eslintConfig` 整个节点代码, `vue.config.js` 下的 `lintOnSave` 值改为 `false`

- 开启组件按需加载 `/src/main.js` L14 修改为 `import './core/lazy_use'`

- [修改 Ant Design 配色 (@kokoroli)](https://github.com/kokoroli/antd-awesome/blob/master/docs/Ant_Design_%E6%A0%B7%E5%BC%8F%E8%A6%86%E7%9B%96.md)

- I18n: [多语言支持 (@musnow)](./src/locales/index.js)

- 生成环境默认不加载 `mock`，更多详情请看 `src/mock/index.js`

- **用于生产环境，请使用 `release` 版本代码，使用 master 代码出现的任何问题需要你自行解决**

## 浏览器兼容

Modern browsers and IE10.

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
| --- | --- | --- | --- | --- |
| IE10, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |