├── .env.example
├── .github
    └── workflows
    │   └── ci.yml
├── .gitignore
├── .yarn
    └── releases
    │   └── yarn-1.22.19.cjs
├── .yarnrc.yml
├── README.md
├── _routes.json
├── _worker.js
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── conf.example.json
    ├── core.example.php
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── router
    │   └── index.js
    └── views
    │   └── Home.vue
├── vue.config.js
└── yarn.lock


/.env.example:
--------------------------------------------------------------------------------
 1 | VUE_APP_use_env = 1 # 此参数为 1 时启用环境变量代替conf.json，无法读取此参数时使用conf.json
 2 | 
 3 | VUE_APP_config_title = 状态监控 # 页面标题
 4 | VUE_APP_config_title_english = StatusLive #页面副标题
 5 | 
 6 | VUE_APP_config_mode = 2 # 模式选项，1为公开模式，2为隐私模式
 7 | VUE_APP_config_readonly_apikey = USE_SERVER_APIKEY # 公开模式用，填写从UptimeRobot后台获得的ReadOnly-ApiKey
 8 | VUE_APP_config_proxy_link = /core.php # 隐私模式用，反代访问路径
 9 | VUE_APP_config_history_time = 60 # 获取过去 X 天的可用率，单位为天
10 | VUE_APP_config_logs_history_days = 30 # 获取过去 X 天的状态日志，单位为天
11 | 
12 | VUE_APP_config_success_min = 98 # 合格(success)等级标准，低于此数字为警告(warning)等级
13 | VUE_APP_config_warning_min = 90 # 警告(warning)等级标准，低于此数字为危险(danger)等级
14 | VUE_APP_config_auto_refresh_seconds = 60 # 自动刷新时间，单位为秒，填写0为禁用自动刷新
15 | 
16 | VUE_APP_logs_each_page = 10  # 日志模块每页展示行数，v2.1新增，作用于日志查看区
17 | 


--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
 1 | name: Status-Vercel
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ "master" , "freejishu-dev", "cloudflare-try" ]
 6 |   pull_request:
 7 |     branches: [ "master" , "freejishu-dev", "cloudflare-try" ]
 8 | 
 9 | jobs:
10 |   ci:
11 |     name: Build & Test
12 |     runs-on: ubuntu-latest
13 |     strategy:
14 |       matrix:
15 |         node-version: [16.x]
16 |     steps:
17 |     - uses: actions/checkout@v3
18 |     - name: Use Node.js ${{ matrix.node-version }}
19 |       uses: actions/setup-node@v3
20 |       with:
21 |         node-version: ${{ matrix.node-version }}
22 |         cache: 'npm'
23 |       env:
24 |         CI: true
25 |     - name: install yarn 
26 |       run: npm install yarn -g
27 |     - name: yarn 
28 |       run: yarn
29 |     - name: yarn build
30 |       run: yarn build
31 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files & example file
 7 | .env.local
 8 | .env.*.local
 9 | .dev.vars
10 | 
11 | # Log files
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | pnpm-debug.log*
16 | 
17 | # Editor directories and files
18 | .idea
19 | .vscode
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | config.json
26 | core.php


--------------------------------------------------------------------------------
/.yarnrc.yml:
--------------------------------------------------------------------------------
1 | yarnPath: .yarn/releases/yarn-1.22.19.cjs
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # StatusLive &nbsp;<a href="https://github.com/freejishu/StatusLive/stargazers"><img src="https://img.shields.io/github/stars/freejishu/StatusLive?style=flat" alt="Stars"></a> <a href="https://github.com/freejishu/StatusLive/issues"><img alt="GitHub issues" src="https://img.shields.io/github/issues/freejishu/StatusLive"></a>
  2 | 
  3 | <p align="center"> 简洁 · 快速 · 轻便 </p>
  4 | 
  5 | ![qhn.webp](https://s2.loli.net/2022/10/31/N4sCi7YDIZ8XxST.webp)
  6 | 
  7 | ## What's StatusLive?
  8 | 
  9 | StatusLive 是一个基于 Uptimerobot 的状态页，数据基于 Uptimerobot API 而来，开箱即用。
 10 | 
 11 | StatusLive is a status page based on Uptimerobot. The data is based on Uptimerobot API.
 12 | 
 13 | 注册一个 Uptimerobot 账户并添加监测点，即可搭建属于自己的、高可用的状态页面。
 14 | 
 15 | Register an Uptimerobot account and add monitoring points to build your own status page. 
 16 | 
 17 | ## Demo
 18 | 
 19 | https://status.freejishu.com/
 20 | 
 21 | ## How to use
 22 | 
 23 | - 最经典的打开方式 ( `dist` + `conf.json` + `core.php` ) ：
 24 | 
 25 |     1. 注册一个 `UptimeRobot` 账户并添加监控节点。
 26 | 
 27 |     2. ⭐Star 一下，然后从 [Releases][1] 下载最新版本并解压。
 28 | 
 29 |     3. 复制 `conf.example.conf` 到 `conf.json` ，并配置配置文件 [conf.json][2]
 30 |         ```
 31 |         {
 32 |             "config_title": "状态监控",      //页面标题
 33 |             "config_title_english": "StatusLive",    //页面副标题
 34 | 
 35 |             "config_mode": 2,  //模式选项，1为公开模式，2为隐私模式（模式区别请看下方）
 36 |             "config_readonly_apikey": "USE_SERVER_APIKEY", //公开模式用，填写从UptimeRobot后台获得的ReadOnly-ApiKey
 37 |             "config_proxy_link": "/core.php", //隐私模式用，反代访问路径
 38 | 
 39 |             "config_history_time": 60, //获取过去 X 天的可用率，单位为天
 40 |             "config_logs_history_days": 30, //获取过去 X 天的状态日志，单位为天
 41 | 
 42 |             "config_success_min": 98, //合格(success)等级标准，低于此数字为警告(warning)等级
 43 |             "config_warning_min": 90, //警告(warning)等级标准，低于此数字为危险(danger)等级
 44 |             "config_auto_refresh_seconds": 60, //自动刷新时间，单位为秒，填写0为禁用自动刷新
 45 | 
 46 |             "logs_each_page": 10  //日志模块每页展示行数，v2.1新增，作用于日志查看区
 47 |         }
 48 |         ```
 49 |     - **公开模式（不推荐）**
 50 | 
 51 |         最简单、快速的开箱方式。系统会根据 `conf.json` 内的 `config_readonly_apikey` 直接请求 UptimeRobot API 接口。此模式不需要 `core.php` 。
 52 |         
 53 |         `conf.json` 内应该如此填写：
 54 |         
 55 |         ```
 56 |         "config_mode": 1, 
 57 |         "config_readonly_apikey": "ur609xxx-27fxxxxxxxxxxxxxxxxxxxxx",
 58 |         ```
 59 | 
 60 |         **注意：此模式下一定要使用 `只读ApiKey (Read-Only API Key)`，非只读ApiKey的泄露会导致其他人使用官方 API 操纵账户！**
 61 |         
 62 |         如果觉得直接请求 UptimeRobot API 接口速度有些差，或不想暴露部分关键字段，您也可以使用下面的隐私模式反代以提高速度。
 63 | 
 64 |     - **隐私模式（推荐）**
 65 | 
 66 |         由于UptimeRobot API返回数据内包含 `url` 、 `http_username` 、 `http_password` 、 `port` 等字段，直接请求可能会导致真实域名、IP等泄露；同时对免费账户，UptimeRobot 的 API 存在 QPS 限制。故推荐使用隐私模式，可隐去关键字段并针对性缓存。
 67 | 
 68 |         `conf.json` 内应该如此填写：
 69 | 
 70 |         ```
 71 |         "config_mode": 2, 
 72 |         "config_readonly_apikey": "USE_SERVER_APIKEY", //无需再填写apikey，以core.php中为准
 73 |         "config_proxy_link": "/core.php",  //填写你的core.php路径
 74 |         ```
 75 | 
 76 |         本程序自带一个php的反代文件。对反代文件 `core.example.php` ，您需要先复制到 `core.php` （当然其他名字也可以，`config.json` 中的 `config_proxy_link` 字段需同步更新），再修改 `core.php` 的部分配置：
 77 |         
 78 |         ```
 79 |         //在这里填入你的API_KEY，如果使用公开模式则置空避免key被更改。
 80 |         $apikey = 'ur609264-xxxxxxxxxxxxxxxxxxxxxxxx';
 81 | 
 82 |         //json缓存文件名，可自行配置
 83 |         $file_name = 'uptime.json';
 84 | 
 85 |         //缓存时间，单位为秒，因为UptimeRobotAPI免费用户调用限制为10次/分钟故不建议低于6
 86 |         $cache_time = 10;
 87 |         ```
 88 |         
 89 |         接下来您可以将其放到任意服务器上，只需做好 CORS 和在 `config_proxy_link` 中填写好地址即可。
 90 |         
 91 |         关于反代机制，除了部署 `core.php` ，还有很多玩法，请参照下文中**更多打开方式**部分。
 92 | 
 93 |     - `conf.json` 的其余字段根据上文提示填写即可。注意JSON文件不能存在`注释`。
 94 | 
 95 |     4. 上传到服务器，然后 Enjoy it！
 96 | 
 97 | <br />
 98 | 
 99 | - 更多打开方式：
100 |     
101 |     1. `conf.json` 可以被环境变量替代。若您部署到类似 Cloudflare Pages 或 Vercel 此类平台时，可通过填写环境变量生成 `.env` 文件。当检测到环境变量存在时，无需再修改或部署 `conf.json`，程序将根据环境变量启动。详见：[如何部署 StatusLive 到静态资源平台？](https://github.com/freejishu/StatusLive/discussions/30)。
102 | 
103 |     2. 隐私模式需要用到的 `core.php` 可以有多种部署方式，如：
104 |         - 可以使用 Cloudflare Worker 替代，详见：[使用 Cloudflare Workers 替代 Core.php 实现反代](https://github.com/freejishu/StatusLive/discussions/28)。
105 |         - 如果计划将 `core.php` 用于如 `Vercel` 等 Serverless Functions 平台，请注释掉 `core.php` 的[第49行](https://github.com/freejishu/StatusLive/blob/67ebdce931332255f06dc0635aa0d88aa589999d/public/core.example.php#L49)避免写入错误。
106 |         - 如果懒得架设 `core.php` ，可以使用由开发者提供的公共反代。请参照 [StatusLive公共反代使用说明](https://github.com/freejishu/StatusLive/discussions/15) 。
107 |         - 关于 `core.php` 的更多细节，请参照 [常见问题汇总（v2.0）](https://github.com/freejishu/StatusLive/discussions/3)。
108 | 
109 | 
110 | ## Migration from v1.x
111 | 
112 | v1.x 使用参照：https://www.freejishu.com/statuslive-for-you/
113 | 
114 | 基于各种各样的考虑，v2.x 采用了全新的技术栈，故 v1.x 不能直接迁移到 v2.x 。但是不用担心，基于开箱即用的特性，你会很快上手 v2.x 的。
115 | 
116 | 注：v2.x 通过切换分支的形式实现过渡，即原 master 分支被重命名为 v1.x，而 v2.x 重命名为 master ，并切换了一次默认分支。如果之前 fork 过项目，可能需要重新 fork 或进行同步操作才能继续操作。
117 | 
118 | ## Licenses
119 | 
120 | MIT
121 | 
122 | ## How to Rebuild
123 | 
124 | 1. Clone the code
125 | 2. Project setup
126 | 
127 |     ```
128 |     yarn install
129 |     ```
130 | 
131 | 3. Compiles and hot-reloads for development & Compiles and minifies for production
132 | 
133 |     ```
134 |     yarn serve
135 |     yarn build
136 |     ```
137 | 
138 | 4. Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/).
139 | 
140 | 
141 | [1]: https://github.com/freejishu/StatusLive/releases/latest
142 | [2]: https://github.com/freejishu/StatusLive/blob/master/public/conf.json
143 | [3]: https://github.com/freejishu/StatusLive/discussions/3
144 | 


--------------------------------------------------------------------------------
/_routes.json:
--------------------------------------------------------------------------------
1 | {
2 |     "version": 1,
3 |     "include": ["/api"],
4 |     "exclude": []
5 |  }


--------------------------------------------------------------------------------
/_worker.js:
--------------------------------------------------------------------------------
  1 | let api_key = '';//你的apikey
  2 | let cache_time = 10;//缓存时间（秒）
  3 | const url = 'https://api.uptimerobot.com/v2/getMonitors';
  4 | 
  5 | export default {
  6 |     async fetch(request, env) {
  7 |         api_key = env.api_key ;
  8 |         cache_time = env.cache_time ? env.cache_time : 10;
  9 |         console.log(cache_time);
 10 |         const url = new URL(request.url);
 11 |         if (url.pathname.startsWith('/api')) {    
 12 |             if (request.method === 'OPTIONS') {
 13 |                 return new Response(null, {
 14 |                     status: 200,
 15 |                     statusText: 'OK',
 16 |                     headers: {
 17 |                         'content-type': 'application/json;charset=UTF-8',
 18 |                         'Access-Control-Allow-Origin': '*',
 19 |                         'Access-Control-Allow-Methods': '*',
 20 |                         'Access-Control-Allow-Credentials': 'true',
 21 |                         'Access-Control-Allow-Headers': 'Content-Type',
 22 |                         'Access-Control-Expose-Headers': '*'
 23 |                     }
 24 |                 })
 25 |             } else if (request.method === 'POST') {
 26 |                 return await handleRequest(request,env);
 27 |             } else {
 28 |                 return new Response(null, {
 29 |                     status: 405,
 30 |                     statusText: 'Method Not Allowed',
 31 |                 })
 32 |             }
 33 |         }
 34 |         // Otherwise, serve the static assets.
 35 |         // Without this, the Worker will error and no assets will be served.
 36 |         return env.ASSETS.fetch(request);
 37 |     },
 38 |   }
 39 | 
 40 | 
 41 | 
 42 | 
 43 | async function gatherResponse(response) {
 44 |     const { headers } = response;
 45 |     const contentType = headers.get('content-type') || '';
 46 |     if (contentType.includes('application/json')) {
 47 |         return JSON.stringify(await response.json());
 48 |     }
 49 |     return response.text();
 50 | }
 51 | 
 52 | async function readRequestBody(request) {
 53 |     const { headers } = request;
 54 |     const contentType = headers.get('content-type') || '';
 55 | 
 56 |     if (contentType.includes('application/json')) {
 57 |         return JSON.stringify(await request.json());
 58 |     } else if (contentType.includes('application/text')) {
 59 |         return request.text();
 60 |     } else if (contentType.includes('text/html')) {
 61 |         return request.text();
 62 |     } else if (contentType.includes('form')) {
 63 |         const formData = await request.formData();
 64 |         const body = {};
 65 |         for (const entry of formData.entries()) {
 66 |         body[entry[0]] = entry[1];
 67 |         }
 68 |         return JSON.stringify(body);
 69 |     } else {
 70 |         return 'a file';
 71 |     }
 72 | }
 73 | 
 74 | async function handleRequest(request,env) {
 75 | 
 76 |     const timestamp = (Date.parse(new Date()))/1000;
 77 |     const lasttime = await env.statuslive.get("statuslive_lasttime");
 78 |     let results = '';
 79 |     let cache_tag = '';
 80 |     if (timestamp - lasttime <= cache_time) {
 81 |         results = await env.statuslive.get("statuslive_json_cache");
 82 |         cache_tag = 'Cache Hit - Time:'+lasttime;
 83 |     }else{
 84 |         const post_data = JSON.parse(await readRequestBody(request));
 85 |         post_data.api_key = api_key;
 86 | 
 87 |         const init = {
 88 |             headers: {
 89 |                 'content-type': 'application/json;charset=UTF-8',
 90 |             },
 91 |             method: 'POST',
 92 |             body: await JSON.stringify(post_data)
 93 |         };
 94 |         const response = await fetch(url, init);
 95 |         results = await JSON.parse(await gatherResponse(response));
 96 | 
 97 |         for (let index = 0; index < results.monitors.length; index++) {
 98 |             results.monitors[index].url = "";
 99 |             results.monitors[index].http_username = "";
100 |             results.monitors[index].http_password = "";
101 |             results.monitors[index].port = "";
102 |         }
103 | 
104 |         results = await JSON.stringify(results);
105 |         await env.statuslive.put("statuslive_json_cache", results, {expirationTtl: (cache_time < 60 ? 60 : cache_time)})
106 |         await env.statuslive.put("statuslive_lasttime", timestamp.toString(), {expirationTtl: (cache_time < 60 ? 60 : cache_time)})
107 |         cache_tag = 'Cache Miss - Time:'+timestamp;
108 |     }
109 | 
110 |     let response_init = {
111 |         headers: {
112 |             'content-type': 'application/json;charset=UTF-8',
113 |             'Access-Control-Allow-Origin': '*',
114 |             'Access-Control-Allow-Methods': '*',
115 |             'Access-Control-Allow-Credentials': 'true',
116 |             'Access-Control-Allow-Headers': 'Content-Type',
117 |             'Access-Control-Expose-Headers': '*',
118 |             'StatusLive-Cache-Tag' : cache_tag
119 |         }
120 |     }
121 |     return new Response(results, response_init);
122 | }
123 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "statuslive_vue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.21.4",
12 |     "core-js": "^3.6.5",
13 |     "echarts": "^5.4.0",
14 |     "element-ui": "^2.15.6",
15 |     "v-charts-v2": "^2.0.9",
16 |     "vue": "^2.6.11",
17 |     "vue-echarts": "^6.2.3",
18 |     "vue-router": "^3.2.0"
19 |   },
20 |   "devDependencies": {
21 |     "@vue/cli-plugin-babel": "~4.5.0",
22 |     "@vue/cli-plugin-eslint": "~4.5.0",
23 |     "@vue/cli-plugin-router": "~4.5.0",
24 |     "@vue/cli-service": "~4.5.0",
25 |     "@vue/composition-api": "^1.7.1",
26 |     "babel-eslint": "^10.1.0",
27 |     "eslint": "^6.7.2",
28 |     "eslint-plugin-vue": "^6.2.2",
29 |     "vue-template-compiler": "^2.6.11"
30 |   },
31 |   "eslintConfig": {
32 |     "root": true,
33 |     "env": {
34 |       "node": true
35 |     },
36 |     "extends": [
37 |       "plugin:vue/essential",
38 |       "eslint:recommended"
39 |     ],
40 |     "parserOptions": {
41 |       "parser": "babel-eslint"
42 |     },
43 |     "rules": {}
44 |   },
45 |   "browserslist": [
46 |     "> 1%",
47 |     "last 2 versions",
48 |     "not dead"
49 |   ],
50 |   "engines": {
51 |     "yarn": "=1.22.19",
52 |     "node": "=16"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/public/conf.example.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "config_title": "状态监控", 
 3 |     "config_title_english": "StatusLive",
 4 | 
 5 |     "config_mode": 2,
 6 |     "config_readonly_apikey": "USE_SERVER_APIKEY",
 7 |     "config_proxy_link": "/core.php",
 8 |     "config_history_time": 60,
 9 |     "config_logs_history_days": 30,
10 | 
11 |     "config_success_min": 98,
12 |     "config_warning_min": 90,
13 |     "config_auto_refresh_seconds": 60,
14 | 
15 |     "logs_each_page": 10
16 | }


--------------------------------------------------------------------------------
/public/core.example.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | header("Content-Type: application/x-www-form-urlencoded; charset=UTF-8");
 3 | 
 4 | //如果使用隐私模式，在这里填入你的API_KEY，如果使用公开模式则置空避免key被更改。
 5 | $apikey = 'ur609264-826267974xxxxxxxxxxxxxxx';
 6 | 
 7 | //json缓存目录，可自行配置
 8 | $file_name = 'uptime.json';
 9 | 
10 | //缓存时间，单位为秒，为11秒是因为UptimeRobotAPI免费用户调用限制为6次/分钟
11 | $cache_time = 11;
12 | 
13 | 
14 | if(file_exists($file_name)){
15 |     $str = fread(fopen($file_name, "r"), filesize($file_name)); //指定读取大小，这里把整个文件内容读取出来
16 |     $json = json_decode($str, true);
17 |     if(time() - $json['time'] < $cache_time){
18 |         header("StatusLiveCache: Hit");
19 |         exit($json['json']);
20 |     } 
21 | }
22 | $link = 'https://api.uptimerobot.com/v2/getMonitors';
23 | $data = json_decode(file_get_contents("php://input"));
24 | if($apikey != ''){
25 |     $data->api_key = $apikey;
26 | }
27 | $data  = http_build_query($data);
28 | $curl = curl_init();
29 | curl_setopt($curl, CURLOPT_URL, $link);
30 | curl_setopt($curl, CURLOPT_POST, 1);
31 | curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
32 | curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
33 | $output = curl_exec($curl);
34 | curl_close($curl);
35 | $o = json_decode($output, true);
36 | if(@$o['stat']=='ok'){
37 |     header("StatusLiveCache: Miss.");
38 |     //替换删除敏感数据，如有其他需要可以自行增加
39 |     for ($i = 0; $i < count($o['monitors']); $i++) {
40 |         $o['monitors'][$i]['url'] = "";
41 |         $o['monitors'][$i]['http_username'] = "";
42 |         $o['monitors'][$i]['http_password'] = "";
43 |         $o['monitors'][$i]['port'] = "";
44 |     }
45 |     $json = [];
46 |     $json['time'] = time();
47 |     $json['json'] = json_encode($o);
48 |     
49 |     file_put_contents($file_name, json_encode($json));
50 |     
51 |     exit($json['json']);
52 | }else{
53 |     //请求错误不缓存
54 |     header("StatusLiveCache: Miss, Request Fail.");
55 |     exit(json_encode($o));
56 | }
57 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freejishu/StatusLive/37d992868bb65ce564e197fab0459a12e7d643a2/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="zh-CN">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app" style="">
 3 | 
 4 |     <!-- Nav -->
 5 |     <router-view/>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <style>
10 | #app {
11 |   font-family: Avenir, Helvetica, Arial, sans-serif;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 |   text-align: center;
15 |   color: #2c3e50;
16 |   
17 | }
18 | 
19 | body{
20 |   background: #eeeeee;
21 | }
22 | 
23 | </style>
24 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/freejishu/StatusLive/37d992868bb65ce564e197fab0459a12e7d643a2/src/assets/logo.png


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import ElementUI from 'element-ui';
 3 | import 'element-ui/lib/theme-chalk/index.css';
 4 | import 'element-ui/lib/theme-chalk/display.css';
 5 | import axios from 'axios';
 6 | 
 7 | import App from './App.vue';
 8 | import router from './router';
 9 | 
10 | 
11 | Vue.config.productionTip = false;
12 | 
13 | Vue.prototype.$axios = axios;
14 | //axios.defaults.baseURL = '/v2';
15 | 
16 | 
17 | 
18 | Vue.use(ElementUI);
19 | router.beforeEach((to, from, next) => {
20 |   if(to.meta.title){
21 |     document.title = to.meta.title
22 |   }
23 |   next();
24 | })
25 | 
26 | new Vue({
27 |   router,
28 |   render: h => h(App)
29 | }).$mount('#app')
30 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import Home from '../views/Home.vue'
 4 | 
 5 | Vue.use(VueRouter)
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: '/',
10 |     name: 'Home',
11 |     component: Home,
12 |     meta:{
13 |       title: 'StatusLive'
14 |     }
15 |   }
16 | ]
17 | 
18 | const router = new VueRouter({
19 |   routes
20 | })
21 | 
22 | export default router
23 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-container class="container-max">
  3 |     <el-header class="style-header">
  4 |       <h2 class="title">
  5 |         <span class="title-big">{{this.main_title}}</span>
  6 |         &nbsp;&nbsp;
  7 |         <span style="font-size:1.7rem" id="title-small">{{this.main_title_eng}}</span>
  8 |       </h2>
  9 |       <h4 class="title" style="margin-top:10px;">报告生成时间：<span>{{time_text}}</span>&nbsp;&nbsp;<span v-if="json.config_auto_refresh_seconds > 0" ><i class="el-icon-refresh" v-bind:class="{ 'loading-icon': icon_loading }"></i>{{counter}}s</span></h4>
 10 |     </el-header>
 11 |     <el-main class="style-main" >
 12 |       <el-alert :title="alert_title" :type="alert_type" :description="alert_description" show-icon :closable="false" :center="false" style=" text-align: left;"></el-alert>
 13 |       <br />
 14 | 
 15 |       <el-card shadow="always" class="all-status-card" v-loading="table_loading">
 16 |         <h4 class="card-title">实时总览<span style="font-size:1rem">&nbsp;Ontime</span></h4>
 17 |         <el-row :gutter="20">
 18 | 
 19 |           <el-col :span="8">
 20 |             <div class="all-status-number">
 21 |               <span class="bullet success-bg"></span>&nbsp;&nbsp;<span class="status-span success-color">正常运转&nbsp;{{success}}&nbsp;个</span>
 22 |             </div>
 23 |           </el-col>
 24 | 
 25 |           <el-col :span="8">
 26 |             <div class="all-status-number">
 27 |               <span class="bullet danger-bg"></span>&nbsp;&nbsp;<span class="status-span danger-color">发生故障&nbsp;{{danger}}&nbsp;个</span>
 28 |             </div>
 29 |           </el-col>
 30 | 
 31 |           <el-col :span="8">
 32 |             <el-tooltip effect="dark" content="由于计划性维护等正常原因而暂时暂停监控。" placement="top-start">
 33 |               <div class="all-status-number" >
 34 |                 <span class="bullet info-bg"></span>&nbsp;&nbsp;<el-badge is-dot :hidden="info==0"><span class="status-span info-color">暂停监控&nbsp;{{info}}&nbsp;个</span></el-badge>
 35 |               </div>
 36 |             </el-tooltip>
 37 |             
 38 |           </el-col>
 39 |         </el-row>
 40 |         <!--<p>最后一次故障：</p>-->
 41 |       </el-card>
 42 |       
 43 |       <!-- 响应时间面板 -->
 44 | 
 45 |       <el-dialog :title="response_title" :visible.sync="response_time_dialog" width="60%">
 46 |         <el-alert :title="dialog.alert_title" :type="dialog.alert_type" :description="dialog.alert_description" show-icon :closable="false" :center="false" style="text-align: left;"></el-alert>
 47 |         <v-chart class="chart" :option="option" :update-options="{notMerge: true}" :autoresize="true" v-if="dialog.chart_show"/>
 48 |         <el-empty description="暂无响应时间数据" v-if="!dialog.chart_show"></el-empty>
 49 |         
 50 |         <span slot="footer" class="dialog-footer">
 51 |           <el-button @click="response_time_dialog = false">关闭</el-button>
 52 |         </span>
 53 |       </el-dialog>
 54 | 
 55 |       <el-card shadow="always" class="all-status-card" v-loading="table_loading">
 56 |         <!-- 数据中心 -->
 57 |         <h4 class="card-title">数据中心<span style="font-size:1rem">&nbsp;DataCenter</span></h4>
 58 |         
 59 | 
 60 |         <el-table :data="this.datacenter_table" style="width: 100%;" @cell-click="table_click">
 61 |           <el-table-column label="状态" width="50" min-width="40">
 62 |             <template slot-scope="scope">
 63 |               <div v-html="scope.row.status_html" @click="show_respontime(scope.row)"></div>
 64 |             </template>
 65 |           </el-table-column>
 66 | 
 67 |           <el-table-column label="可用率" width="90" min-width="70">
 68 |             <template slot-scope="scope">
 69 |               <b><span v-bind:class="scope.row.custom_uptime_ratio_class" @click="show_respontime(scope.row)">{{scope.row.custom_uptime_ratio}}%</span></b>
 70 |             </template>
 71 |           </el-table-column>
 72 | 
 73 |           <el-table-column label="名称" width="110" min-width="70">
 74 |             <template slot-scope="scope">
 75 |               <b><div v-html="scope.row.friendly_name"  @click="show_respontime(scope.row)"></div></b>
 76 |             </template>
 77 |           </el-table-column>
 78 | 
 79 |           <el-table-column :label="'详细可用率（过去'+json.config_history_time+'天）'" min-width="670">
 80 |             <template slot-scope="scope">
 81 |               <el-tooltip class="" effect="dark" :content="range.time + ' ' + range.range + '%'" placement="top" v-for="range in scope.row.custom_uptime_ranges_a" :key="range.key">
 82 |                 <span class="square" v-bind:class="[range.info ==1 ? 'info-bg' : (range.range > json.config_success_min ? 'success-bg' : (range.range > json.config_warning_min ? 'warning-bg' : 'danger-bg'))]"></span>
 83 |               </el-tooltip>
 84 |             </template>
 85 |           </el-table-column>
 86 |         </el-table>
 87 |       </el-card>
 88 | 
 89 | 
 90 |       <el-card shadow="always" class="all-status-card" v-loading="table_loading">
 91 |         <!-- 网站 -->
 92 |         <h4 class="card-title">网站<span style="font-size:1rem">&nbsp;WebSite</span></h4>
 93 |         
 94 | 
 95 |         <el-table :data="this.website_table" style="width: 100%;" @cell-click="table_click">
 96 |           <el-table-column label="状态" width="50" min-width="40">
 97 |             <template slot-scope="scope">
 98 |               <div v-html="scope.row.status_html"></div>
 99 |             </template>
100 |           </el-table-column>
101 | 
102 |           <el-table-column label="可用率" width="90" min-width="70">
103 |             <template slot-scope="scope">
104 |               <b><span v-bind:class="scope.row.custom_uptime_ratio_class">{{scope.row.custom_uptime_ratio}}%</span></b>
105 |             </template>
106 |           </el-table-column>
107 | 
108 |           <el-table-column label="名称" width="110" min-width="70">
109 |             <template slot-scope="scope">
110 |               <b><div v-html="scope.row.friendly_name" @click="show_respontime(scope.row)"></div></b>
111 |             </template>
112 |           </el-table-column>
113 | 
114 |           <el-table-column :label="'详细可用率（过去'+json.config_history_time+'天）'" min-width="670">
115 |             <template slot-scope="scope">
116 |               <el-tooltip class="" effect="dark" :content="range.time + ' ' + range.range + '%'" placement="top" v-for="range in scope.row.custom_uptime_ranges_a" :key="range.key" size="large" color="activity.color">
117 |                 <span class="square" :class="[range.info == 1 ? 'info-bg' : (range.range > json.config_success_min ? 'success-bg ' : (range.range > json.config_warning_min ? 'warning-bg' : 'danger-bg'))]"></span>
118 |               </el-tooltip>
119 |             </template>
120 |           </el-table-column>
121 |         </el-table>
122 |       </el-card>
123 | 
124 |       <el-card shadow="always" class="all-status-card" v-loading="table_loading">
125 |         <!-- 服务 -->
126 |         <h4 class="card-title">服务<span style="font-size:1rem">&nbsp;Service</span></h4>
127 |         
128 | 
129 |         <el-table :data="this.service_table" style="width: 100%;" @cell-click="table_click">
130 |           <el-table-column label="状态" width="50" min-width="40">
131 |             <template slot-scope="scope">
132 |               <div v-html="scope.row.status_html"></div>
133 |             </template>
134 |           </el-table-column>
135 | 
136 |           <el-table-column label="可用率" width="90" min-width="70">
137 |             <template slot-scope="scope">
138 |               <b><span v-bind:class="scope.row.custom_uptime_ratio_class">{{scope.row.custom_uptime_ratio}}%</span></b>
139 |             </template>
140 |           </el-table-column>
141 | 
142 |           <el-table-column label="名称" width="110" min-width="70">
143 |             <template slot-scope="scope">
144 |               <b><div v-html="scope.row.friendly_name" @click="show_respontime(scope.row)"></div></b>
145 |             </template>
146 |           </el-table-column>
147 | 
148 |           <el-table-column :label="'详细可用率（过去'+json.config_history_time+'天）'" min-width="670">
149 |             <template slot-scope="scope">
150 |               <el-tooltip class="" effect="dark" :content="range.time + ' ' + range.range + '%'" placement="top" v-for="range in scope.row.custom_uptime_ranges_a" :key="range.key" size="large" color="activity.color">
151 |                 <span class="square" :class="[range.info == 1 ? 'info-bg' : (range.range > json.config_success_min ? 'success-bg ' : (range.range > json.config_warning_min ? 'warning-bg' : 'danger-bg'))]"></span>
152 |               </el-tooltip>
153 |             </template>
154 |           </el-table-column>
155 |         </el-table>
156 |       </el-card>
157 | 
158 |       <el-card v-loading="table_loading">
159 |         <el-row :gutter="5">
160 |           <el-col :xs="14" :sm="14" :md="14" :lg="14" :xl="14">
161 |             <h4 class="card-title">状态日志<span style="font-size:1rem">&nbsp;Logs</span></h4>
162 |           </el-col>
163 |           <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
164 |             <div style="text-align: right;margin-top:8px;">
165 |               <el-switch
166 |                 v-model="reverse"
167 |                 @change="pages_change()"
168 |                 active-text="倒序"
169 |                 inactive-text="正序">
170 |               </el-switch>
171 |             </div>
172 |           </el-col>
173 |         </el-row>
174 |         <br />
175 |         <el-empty description="加载中，请稍后..." v-if="table_loading"></el-empty>
176 |         <el-timeline style="text-align: left;" >
177 |           <el-timeline-item v-for="(logs, index) in logs_list_inpage" :key="index" :timestamp="get_full_time(logs.datetime)" :icon="type_to_icon(logs.type)" :color="type_to_color(logs.type)">
178 |           {{logs.name}} {{type_to_text(logs.type)}} - 具体信息：{{logs.reason.code}} - {{logs.reason.detail}}<span v-if="logs.type == 1"> - 持续 {{duration_to_text(logs.duration)}}</span>
179 |           </el-timeline-item>
180 |         </el-timeline>
181 |         <center>
182 |           <el-pagination
183 |             layout="prev, pager, next"
184 |             :total="logs_list.length"
185 |             @current-change="pages_change"
186 |             :current-page.sync="logs_now_page"
187 |             :page-size="json.logs_each_page ? json.logs_each_page : 10"
188 |           >
189 |           </el-pagination>
190 |         </center>
191 |        
192 |         
193 |       </el-card>      
194 |     </el-main>
195 |     <el-footer>
196 |       
197 |       <!--<el-button>默认按钮</el-button>-->
198 |       
199 |     </el-footer>
200 |   </el-container>
201 | </template>
202 | 
203 | <style>
204 | .container-max{
205 |   width: 95%;
206 |   max-width: 1000px;
207 |   margin:auto;
208 |   
209 | }
210 | .style-header{
211 |   margin-top: 25px;
212 | }
213 | 
214 | .title-big{
215 |   font-size:2.5rem;
216 | 
217 | }
218 | 
219 | .title{
220 |   text-align: left;
221 |   margin: 0px;
222 |   /* padding-bottom:20px;*/
223 | }
224 | 
225 | .style-main{
226 |   margin-top: 25px;
227 |   overflow-x:hidden;
228 | }
229 | 
230 | @media (max-width: 479px) {
231 |   .all-status-card{
232 |     width: 100%;
233 |     margin: auto;
234 |     margin-bottom: 20px;
235 |   }
236 | }
237 | @media (min-width: 480px) {
238 |   .all-status-card{
239 |     width: 100%;
240 |     margin: auto;
241 |     margin-bottom: 30px;
242 |   }
243 | }
244 | .bullet{
245 |   display: inline-block;
246 |   width: 26px;
247 |   height: 26px;
248 |   border-radius: 50%;
249 |   vertical-align: middle;
250 |   line-height: 3rem;
251 | }
252 | .bullet{
253 |   display: inline-block;
254 |   width: 26px;
255 |   height: 26px;
256 |   border-radius: 50%;
257 |   vertical-align: middle;
258 |   line-height: 3rem;
259 | }
260 | .square{
261 |   display: inline-block;
262 |   width: 7px;
263 |   height: 28px;
264 |   vertical-align: middle;
265 |   line-height: 3rem;
266 |   margin-right: 3px;
267 | }
268 | .all-status-number{
269 |   text-align: left;
270 | }
271 | .success-bg{
272 |   background: #67C23A;
273 | }
274 | 
275 | .warning-bg{
276 |   background: #E6A23C;
277 | }
278 | 
279 | .danger-bg{
280 |   background: #F56C6C;
281 | }
282 | 
283 | .info-bg{
284 |   background: #909399;  
285 | }
286 | 
287 | .success-color{
288 |   color: #67C23A;
289 | }
290 | 
291 | .warning-color{
292 |   color: #E6A23C;
293 | }
294 | 
295 | .danger-color{
296 |   color: #F56C6C;
297 | }
298 | 
299 | .info-color{
300 |   color: #909399;
301 | }
302 | 
303 | .status-span {
304 |   vertical-align: middle;
305 |   height: 100%;
306 |   line-height: 3rem;
307 |   
308 | 
309 | }
310 | .card-title{
311 |   text-align: left;
312 |   font-size:1.5rem;
313 |   margin: 0px 0px 10px 0px;
314 | 
315 | }
316 | 
317 | .loading-icon{
318 |   animation: rotating 2s linear infinite;
319 | }
320 | 
321 | .chart {
322 |   height: 400px;
323 | }
324 | </style>
325 | 
326 | <script>
327 | // @ is an alias to /src
328 | import { use } from "echarts/core";
329 | import { SVGRenderer } from "echarts/renderers";
330 | import { LineChart } from 'echarts/charts';
331 | import {
332 |   GridComponent,
333 |   TooltipComponent
334 | } from "echarts/components";
335 | import VChart from "vue-echarts";
336 | 
337 | use([
338 |   SVGRenderer,
339 |   TooltipComponent,
340 |   GridComponent,
341 |   LineChart
342 | ]);
343 | 
344 | 
345 | export default {
346 |   name: 'Index',
347 |   components: {
348 |     VChart
349 |   },
350 |   data:function(){
351 |     return{
352 |       main_title: "状态监控",
353 |       main_title_eng: "StatusLive",
354 |       json: [],
355 |       website_table: [],
356 |       datacenter_table: [],
357 |       service_table: [],
358 |       success: 0,
359 |       danger: 0,
360 |       info: 0,
361 |       table_loading: true,
362 |       icon_loading: true,
363 |       time_now: 0,
364 |       alert_type: "info",
365 |       alert_title: "请稍等",
366 |       alert_description: "正在连接服务器加载数据...",
367 |       time_text: "Loading...",
368 |       counter: 1,
369 |       refresh_timer: [],
370 |       logs_list: [], //完整日志列表
371 |       logs_list_inpage: [],  //当前页日志列表
372 |       logs_now_page: 1, //当前页面
373 |       logs_page_total: -1, //总计页数
374 |       logs_each_page: 10, //每页几条
375 |       danger_times: 0,
376 |       reverse: true, //false正序 true倒序
377 |       response_time_dialog: false,
378 |       option : {},
379 |       response_title: '响应时间',
380 |       dialog: { 
381 |         alert_title:'状态加载中……',
382 |         alert_type:'success',
383 |         alert_description:'Loading……',
384 |         chart_show : true,
385 |       }
386 |     }
387 |   },
388 |   mounted:function(){
389 |     //启动时加载json
390 |     this.get_conf_json();
391 |     this.table_loading = true  ;
392 | 
393 |   },
394 |   beforeUnmount:function() {
395 |     clearInterval(this.refresh_timer);
396 | 
397 | 
398 |   },
399 |   methods:{
400 |     get_conf_json(){
401 |       //自检
402 |       if(process.env.VUE_APP_use_env){
403 |         //使用环境变量
404 |         console.log("[StatusLive]使用环境变量模式");
405 |         this.main_title = process.env.VUE_APP_config_title ? process.env.VUE_APP_config_title : "状态监控";
406 |         this.main_title_eng = process.env.VUE_APP_config_title_english;
407 |         this.json = {
408 |           config_title : process.env.VUE_APP_config_title ? process.env.VUE_APP_config_title : "状态监控", 
409 |           config_title_english : process.env.VUE_APP_config_title_english ? process.env.VUE_APP_config_title_english : "StatusLive",
410 | 
411 |           config_mode: process.env.VUE_APP_config_mode ? process.env.VUE_APP_config_mode : 2,
412 |           config_readonly_apikey: process.env.VUE_APP_config_readonly_apikey ? process.env.VUE_APP_config_readonly_apikey : "USE_SERVER_APIKEY",
413 |           config_proxy_link: process.env.VUE_APP_config_proxy_link ? process.env.VUE_APP_config_proxy_link : "/core.php",
414 |           config_history_time: process.env.VUE_APP_config_history_time ? process.env.VUE_APP_config_history_time : 60,
415 |           config_logs_history_days: process.env.VUE_APP_config_logs_history_days ? process.env.VUE_APP_config_logs_history_days : 30,
416 | 
417 |           config_success_min: parseFloat(process.env.VUE_APP_config_success_min ? process.env.VUE_APP_config_success_min : 98) ,
418 |           config_warning_min: parseFloat(process.env.VUE_APP_config_warning_min ? process.env.VUE_APP_config_warning_min : 90) ,
419 |           config_auto_refresh_seconds: process.env.VUE_APP_config_auto_refresh_seconds ? process.env.VUE_APP_config_auto_refresh_seconds : 60,
420 | 
421 |           logs_each_page: parseInt(process.env.VUE_APP_logs_each_page) ? parseInt(process.env.VUE_APP_logs_each_page) : 10
422 |         };
423 |         this.main_title = this.json.config_title;
424 |         this.main_title_eng = this.json.config_title_english;
425 |         this.get_status();
426 |       }else{
427 |         console.log("[StatusLive]使用conf.json模式");
428 |         this.$axios.get("./conf.json")
429 |         .then((response) => {
430 |           this.json=response.data;
431 |           this.main_title = this.json.config_title;
432 |           this.main_title_eng = this.json.config_title_english;
433 |           this.get_status();
434 |         })
435 |         .catch((error) => {
436 |           console.log("[StatusLive]配置项载入失败了，检查一下配置项吧:(");
437 |           console.log(error);
438 |           this.$notify.error({
439 |             title: '出现异常',
440 |             message: '连接服务器失败，请刷新页面尝试恢复。',
441 |             type: 'danger'
442 |           });
443 | 
444 |       });
445 |       }
446 | 
447 | 
448 | 
449 |     },
450 | 
451 |     get_status(){
452 |       this.alert_type = "info";
453 |       this.alert_title = "请稍等";
454 |       this.alert_description = "正在连接服务器加载数据...";
455 |       this.icon_loading = true; 
456 | 
457 | 
458 | 
459 |       //console.log(this.json.config_warning_flash);
460 |       var link="";
461 |       if(this.json.config_mode == 1){
462 | 
463 |         // 1为直接请求uptimerobot
464 |         link = "https://api.uptimerobot.com/v2/getMonitors";
465 |       }else{
466 |         link = this.json.config_proxy_link;
467 |       }
468 | 
469 |       //生成时间树
470 |       var uptime_ranges = "";
471 |       this.time_now = (Date.parse(new Date()))/1000;
472 |       uptime_ranges = (this.time_now-86400) + "_" + this.time_now ;
473 |       if(this.json.config_history_time>0){
474 |         for (let ii = 1; ii < this.json.config_history_time; ii++) {
475 |           uptime_ranges=uptime_ranges+"-"+(this.time_now-(60*60*24*(ii+1)))+"_"+(this.time_now-(60*60*24*ii)); 
476 |         }
477 |       }
478 |       this.$axios.post(link,{
479 |         api_key : this.json.config_readonly_apikey,
480 |         format  : "json",
481 |         logs  : 1,
482 |         custom_uptime_ratios: "7",
483 |         custom_uptime_ranges: uptime_ranges,
484 |         custom_down_durations: 1,
485 |         logs_start_date: this.time_now-86400*this.json.config_logs_history_days,
486 |         response_times: 1,
487 |         response_times_average : 5
488 |       }).then((response) => {
489 |         if(response.data.stat != "ok"){
490 |           console.log("[StatusLive]UptimeRobot API有返回错误信息：");
491 |           console.log(response.data);
492 |           if(this.danger_times<3){
493 |             this.$notify.error({
494 |               title: '出现异常',
495 |               message: '请求参数异常，5秒后将会自动重试...',
496 |               type: 'danger'
497 |             });
498 |             this.danger_times++;
499 |             this.counter=5;
500 |             this.refresh_timer = setInterval(this.countdown_function, 1000);
501 |           }else{
502 |             this.$notify.error({
503 |               title: '出现异常',
504 |               message: '请求参数异常。连续三次连接服务器失败，请检查您的网络（或配置），并刷新页面重试。',
505 |             });
506 |             this.icon_loading = false; 
507 | 
508 |           }
509 |         }else{
510 |           this.refresh_status(response.data);
511 |         }
512 |         
513 |       }).catch((error) => {
514 |           console.log("[StatusLive]连接UptimeRobot API时出现问题：");
515 |           console.log(error);
516 |           if(this.danger_times<3){
517 |             this.$notify.error({
518 |               title: '出现异常',
519 |               message: '连接服务器失败，5秒后将会自动重试...',
520 |               type: 'danger'
521 |             });
522 |             this.danger_times++;
523 |             this.counter=5;
524 |             this.refresh_timer = setInterval(this.countdown_function, 1000);
525 |             this.icon_loading = false; 
526 |           }else{
527 |             this.$notify.error({
528 |               title: '出现异常',
529 |               message: '连接服务器失败。连续三次连接服务器失败，请检查您的网络（或配置），并刷新页面重试。',
530 |             });
531 |             this.icon_loading = false; 
532 |           }
533 | 
534 |       });
535 | 
536 |     },
537 | 
538 |     refresh_status(json_up){
539 |       //var website_number = 0;
540 |       //var datacenter_number = 0;
541 |       var logs_list_temp = [];
542 |       
543 |       this.success = 0;
544 |       this.danger = 0;
545 |       this.info = 0;
546 |       this.website_table=[];
547 |       this.datacenter_table=[];
548 |       this.service_table=[];
549 |       for (let index = 0; index < json_up.monitors.length; index++) {
550 |         //当前状态
551 |         if(json_up.monitors[index].status < 2){
552 |           json_up.monitors[index].status_html= '<span class="bullet info-bg"></span>';
553 |           this.info++;
554 |         }else if(json_up.monitors[index].status == 2){
555 |           json_up.monitors[index].status_html= '<span class="bullet success-bg"></span>';
556 |           this.success++;
557 |         }else{
558 |           json_up.monitors[index].status_html= '<span class="bullet danger-bg"></span>';
559 |           this.danger++;
560 |         }
561 | 
562 |         //处理可用率
563 |         if(json_up.monitors[index].status < 2){
564 |           json_up.monitors[index].custom_uptime_ratio_class = "info-color";
565 |         }else if(json_up.monitors[index].custom_uptime_ratio < this.json.config_success_min && json_up.monitors[index].status == 2){
566 |           json_up.monitors[index].custom_uptime_ratio_class = "warning-color";
567 |         }else if(json_up.monitors[index].custom_uptime_ratio < this.json.config_warning_min || json_up.monitors[index].status >= 8){
568 |           json_up.monitors[index].custom_uptime_ratio_class = "danger-color";
569 |         }else{
570 |           json_up.monitors[index].custom_uptime_ratio_class = "success-color";
571 |         }
572 |         var custom_uptime_ranges_a = [];
573 |         json_up.monitors[index].custom_uptime_ranges_a = [];
574 |         custom_uptime_ranges_a = json_up.monitors[index].custom_uptime_ranges.split("-");
575 |         for (let ia = 0; ia < custom_uptime_ranges_a.length; ia++) {
576 |           json_up.monitors[index].custom_uptime_ranges_a.push({ 
577 |             key: ia, 
578 |             range: custom_uptime_ranges_a[ia], 
579 |             info: (this.time_now-(60*60*24*ia) < json_up.monitors[index].create_datetime ? 1 : 0),
580 |             time: this.get_time_ymd(this.time_now-(60*60*24*ia))
581 |           });
582 |         }
583 |         //console.log(json_up.monitors[index]);
584 |         if(json_up.monitors[index].type == 1){
585 |           //HTTP检测归位
586 |           this.website_table.push(json_up.monitors[index])
587 |         }else if(json_up.monitors[index].type == 3){
588 |           //Ping检测归位
589 |           this.datacenter_table.push(json_up.monitors[index])
590 |         }else{
591 |           //没地方去的去这里
592 |           this.service_table.push(json_up.monitors[index])
593 |         }
594 | 
595 |         //处理日志
596 |         var logs_one=[];
597 |         for (let logs_i = 0; logs_i < json_up.monitors[index].logs.length; logs_i++) {
598 | 
599 |           logs_one = { 
600 |             name:json_up.monitors[index].friendly_name, 
601 |             datetime: String(json_up.monitors[index].logs[logs_i].datetime), 
602 |             duration: json_up.monitors[index].logs[logs_i].duration,
603 |             reason: json_up.monitors[index].logs[logs_i].reason,
604 |             type: Number(json_up.monitors[index].logs[logs_i].type),
605 |           };
606 |           logs_list_temp.push(logs_one);
607 | 
608 |         }
609 |       }
610 | 
611 |       //日志排序
612 |       logs_list_temp.sort(function(a, b){return parseInt(a.datetime) - parseInt(b.datetime)});
613 |       this.logs_list = logs_list_temp;
614 |     
615 |       //console.log(this.datacenter_table);
616 |       //console.log(this.website_table);
617 |       //确定最终提示
618 |       if(this.danger>0){
619 |         if(this.danger>=this.success){
620 |           this.alert_type = "danger";
621 |         }else{
622 |           this.alert_type = "warning";
623 |         }
624 |         this.alert_title = "服务异常";
625 |         this.alert_description = "很抱歉，当前部分服务遇到问题，我们会尽快修复。您可持续关注本页面以获取最新信息。";
626 |       }else{
627 |         this.alert_type = "success";
628 |         this.alert_title = "服务正常";
629 |         this.alert_description = "当前所有服务正常运转。您可持续关注本页面以获取最新信息。";
630 | 
631 |       }
632 |       //刷新时间代码
633 |       var date = new Date(this.time_now*1000);
634 |       var Y = date.getFullYear() + '-';
635 |       var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
636 |       var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
637 |       var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
638 |       var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
639 |       var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());
640 |       this.time_text = Y+M+D+h+m+s;
641 |       this.danger_times = 0;
642 | 
643 |       this.table_loading = false;
644 |       this.icon_loading = false; 
645 |       this.counter = this.json.config_auto_refresh_seconds;
646 |       if(this.counter > 0){
647 |         //0为不刷新
648 |         this.refresh_timer = setInterval(this.countdown_function, 1000);
649 | 
650 |       }
651 |       this.pages_change();
652 |     },
653 |     countdown_function(){
654 |       //定时刷新
655 |       this.counter--;
656 |       if(this.counter==0){
657 |         //启动刷新 销毁前一个定时器
658 |         clearInterval(this.refresh_timer);
659 |         this.counter = this.json.config_auto_refresh_seconds;
660 |         this.get_status();
661 |       }
662 |     },
663 |     get_full_time(time){
664 |       var date = new Date(time*1000);
665 |       var Y = date.getFullYear() + '-';
666 |       var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
667 |       var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
668 |       var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
669 |       var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
670 |       var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());
671 |       return Y+M+D+h+m+s;
672 |     },
673 |     get_time_ymd(time){
674 |       var date = new Date(time*1000);
675 |       var Y = date.getFullYear() + '-';
676 |       var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
677 |       var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
678 |       return Y+M+D;
679 |     },
680 |     type_to_icon(type){
681 |       type=Number(type);
682 |       if(type == 1){
683 |         return 'el-icon-close';
684 |       }else if(type == 2){
685 |         return 'el-icon-check';
686 |       }else if(type == 98){
687 |         return 'el-icon-video-play';
688 |       }else if(type == 99){
689 |         return 'el-icon-video-pause';
690 |       }else{
691 |         return 'el-icon-full-screen';
692 |       }
693 |     },
694 |     type_to_color(type){
695 |       type=Number(type);
696 |       if(type == 1){
697 |         return '#F56C6C';
698 |       }else if(type == 2){
699 |         return '#67C23A';
700 |       }else if(type == 98){
701 |         return '#909399';
702 |       }else if(type == 99){
703 |         return '#909399';
704 |       }else{
705 |         return '#303133';
706 |       }
707 |     },
708 |     type_to_text(type){
709 |       type=Number(type);
710 |       if(type == 1){
711 |         return '发生故障';
712 |       }else if(type == 2){
713 |         return '恢复正常';
714 |       }else if(type == 98){
715 |         return '开始';
716 |       }else if(type == 99){
717 |         return '开始维护（暂停监控）';
718 |       }else{
719 |         return '发生特情';
720 |       }
721 |     },
722 |     duration_to_text(duration){
723 |       duration=Number(duration);
724 |       var s = duration % 60;
725 |       var m = (duration-s) /60;
726 |       var h = (duration-s-m*60)/60
727 |       if( h > 0){
728 |         //console.log(h);
729 |         return `${h} 小时 ${m} 分钟 ${s} 秒`;
730 | 
731 |       }else{
732 |         return ` ${m} 分钟 ${s} 秒`;
733 |       }
734 |     },
735 |     pages_change(){
736 | 
737 |       let logs_list_temp_change = JSON.parse(JSON.stringify(this.logs_list)) ; //解决浅拷贝问题 默认正序
738 |       if(this.reverse){
739 |         //倒序 翻转
740 |         logs_list_temp_change.reverse();
741 |       }
742 |       this.logs_each_page  = this.json.logs_each_page;
743 |       this.logs_page_total = Math.ceil(logs_list_temp_change.length / this.logs_each_page ); //计算页数总计
744 |       
745 |       if(this.logs_now_page > this.logs_page_total){
746 |         this.logs_now_page = 1; //如果超出现有页数 回第一页
747 |       }
748 |       this.logs_list_inpage = [];//数组置空
749 |       
750 |       for (let page_index = 0; page_index < this.logs_each_page; page_index++) {
751 |         if(this.logs_each_page*(this.logs_now_page-1)+page_index < logs_list_temp_change.length){
752 |           this.logs_list_inpage.push(logs_list_temp_change[this.logs_each_page*(this.logs_now_page-1)+page_index]);
753 |         }
754 |       }
755 |     },
756 |     show_respontime(t){
757 |       //let lastLogTypeBeforeStartDate = t.lastLogTypeBeforeStartDate;
758 |       let response_times = t.response_times;
759 |       console.log(t);
760 |       let data = [];
761 |       let time = [];
762 |       for (let resp_index = 0; resp_index < response_times.length; resp_index++) {
763 |         data.push(this.get_full_time(response_times[resp_index].datetime));
764 |         time.push(response_times[resp_index].value > 1 ? response_times[resp_index].value : '-' );
765 |         
766 |       }
767 |       //console.log(data);
768 |       //console.log(time);
769 |       //this.option.xAxis.data = data;
770 |       //this.option.series.data = time;
771 |       this.response_title = t.friendly_name + ' 详细信息'
772 | 
773 |       if(t.status < 2){
774 |         this.dialog.alert_title = t.friendly_name+' 监控因故暂停，监控期平均在线率为 '+t.custom_uptime_ratio+'% ，最近一次探测响应时间：'+time[0]+' ms';
775 |         this.dialog.alert_type = 'info';
776 |       }else if(t.custom_uptime_ratio < this.json.config_success_min && t.status == 2){
777 |         this.dialog.alert_title = t.friendly_name+' 当前状态正常，在线率为 '+t.custom_uptime_ratio+'% ，最近一次探测响应时间：'+time[0]+' ms';
778 |         this.dialog.alert_type = 'warning';
779 |       }else if(t.custom_uptime_ratio < this.json.config_warning_min || t.status >= 8){
780 |         this.dialog.alert_title = t.friendly_name+' 当前状态'+(t.status >= 8 ? '异常' : '正常')+'，在线率为 '+t.custom_uptime_ratio+'% ，最近一次探测响应时间：'+time[0]+' ms';
781 |         this.dialog.alert_type = 'danger';
782 |       }else{
783 |         this.dialog.alert_title = t.friendly_name+' 当前状态正常，在线率为 '+t.custom_uptime_ratio+'% ，最近一次探测响应时间：'+time[0]+' ms';
784 |         this.dialog.alert_type = 'success';
785 |         /* */
786 |       }
787 |       this.dialog.alert_title = t.friendly_name+' '+( t.status < 2 ? ' 监控因故暂停，近期平均在线率为 ' :'当前状态'+(t.status >= 8 ? '异常' : '正常') +'，在线率为 ') + t.custom_uptime_ratio+'% ，' + ( time[0]  ?  '最近一次探测响应时间：'+time[0]+' ms' : '暂无最近探测响应时间数据'  ) + "。";
788 |       
789 |       this.dialog.alert_description = '最近动态：'+this.get_full_time(t.lastLogTypeBeforeStartDate.datetime)+' - '+this.type_to_text(t.lastLogTypeBeforeStartDate.type) +' - 具体信息：'+t.lastLogTypeBeforeStartDate.reason.code + ' - ' +t.lastLogTypeBeforeStartDate.reason.detail +  (t.lastLogTypeBeforeStartDate.type == 1 ? ' - 持续' +this.duration_to_text(t.lastLogTypeBeforeStartDate.duration) : '');
790 | 
791 |       if(!time[0]){
792 |         this.dialog.chart_show = false;
793 | 
794 |       }else{
795 |         this.dialog.chart_show = true;
796 |       }
797 | 
798 | 
799 | 
800 |       
801 |       /*
802 |       dialog: { 
803 |         alert_title:'状态加载中……',
804 |         alert_type:'success',
805 |         alert_description:'Loading……',
806 |       }
807 |       */
808 | 
809 | 
810 |       this.response_time_dialog = true;
811 |       this.option = {
812 | 
813 |         xAxis: {
814 |           type: 'category',
815 |           data: data.reverse()
816 |         },
817 |         tooltip: {
818 |           trigger: 'axis',
819 |         },
820 |         grid: {
821 |           show: true
822 |         },
823 |         yAxis: {
824 |           type: 'value',
825 |           name: 'ResponseTime(ms)',
826 |         },
827 |         series: [
828 |           {
829 |             data: time.reverse(),
830 |             type: 'line',
831 |             smooth: true,
832 |             connectNulls: true,
833 |             symbol: "none",
834 |             endLabel: {
835 |               show: true
836 |             }
837 |           }
838 |         ]
839 |       }
840 |       //console.log(this.option.series.data);
841 |       
842 | 
843 |     },
844 |     table_click(a){
845 |       this.show_respontime(a);
846 | 
847 |     }
848 |   }
849 | }
850 | </script>
851 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     devServer: {
3 |         disableHostCheck: true
4 |     }
5 | }


--------------------------------------------------------------------------------