修改starter-api增加内置监控页面

starter-api/src/main/resources/static/monitor/css/index.css

@@ -0,0 +1,365 @@
+body {
+    padding-top: 72px;
+    background-color: #F0F0F0;
+}
+
+#top-bar {
+    height: 72px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    z-index: 100;
+    padding: 0 30px;
+    border-bottom: 1px solid #ddd;
+}
+
+
+#top-bar .title-box img {
+    width: 28px;
+    height: 28px;
+    margin-right: 10px;
+}
+
+#top-bar .title-box span {
+    color: #262626;
+    font-size: 28px;
+    vertical-align: middle;
+    font-weight: bold;
+}
+
+#top-bar .refresh-box {
+    display: flex;
+    height: 100%;
+    align-items: center;
+}
+
+#top-bar .refresh-box>.label {
+    color: #262626;
+    font-size: 20px;
+    margin-right: 10px;
+}
+
+#top-bar .refresh-box .sel-box {
+    width: 80px;
+}
+
+#top-bar .refresh-box>img {
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    margin-left: 10px;
+}
+
+#top-bar .refresh-box>img:hover {
+    opacity: .8;
+}
+
+#top-bar .refresh-box>img:active {
+    opacity: 1;
+}
+
+.chart-block {
+    background: #FFFFFF;
+    border-radius: 6px;
+    border: 1px solid #E5E5E5;
+    padding: 15px;
+    height: 100%;
+    padding-top: 20px;
+}
+
+.block-title {
+    height: 30px;
+    display: flex;
+    align-items: center;
+}
+
+.block-title>img {
+    height: 24px;
+    margin-right: 10px;
+}
+
+.block-title span {
+    font-weight: bold;
+    font-size: 24px;
+}
+
+#content-wrap {
+    padding: 30px;
+}
+
+.chart-box {
+    padding-bottom: 12px;
+}
+
+.line {
+    width: 1px;
+    height: 100%;
+    background-color: #E5E6EB;
+}
+
+.block-main {
+    display: flex;
+}
+
+
+.chart-title {
+    text-align: center;
+}
+
+.chart-title>span {
+    color: #595959;
+    font-size: 18px;
+}
+
+.chart-box>div:first-child {
+    height: calc(100% - 24px);
+}
+
+.chart-box.chart-title {
+    height: 24px;
+}
+
+
+.level1 {
+    height: 340px;
+    display: flex;
+}
+
+.level1 .xtzt {
+    width: 35%;
+    margin-right: 30px;
+}
+
+.level1 .block-main {
+    height: 220px;
+    margin-top: 38px;
+}
+
+.level1 .xtzt .block-main>div:not(.line) {
+    width: calc(33% - 1px);
+}
+
+.level1 .jvjc {
+    width: calc(65% - 30px);
+}
+
+.level1 .desc {
+    padding-left: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.level1 .desc .desc-item {
+    height: 54px;
+    display: flex;
+    align-items: center;
+}
+
+.level1 .desc .desc-item img {
+    width: 54px;
+    height: 54px;
+    margin-right: 10px;
+}
+
+.level1 .desc .desc-item .num-box {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.level1 .desc .desc-item .num-box p {
+    font-size: 28px;
+    color: #262626;
+}
+
+.level1 .desc .desc-item .num-box span {
+    font-size: 16px;
+    color: #595959;
+}
+
+.level1 .jvjc .chart-box {
+    width: calc((100% - 500px)/3)
+}
+
+.level1 .jvjc .file-num-types {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-around;
+    padding-right: 30px;
+}
+
+.level1 .jvjc .file-num-types .file-num-type {
+    height: 54px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.level1 .jvjc .file-num-types .file-num-type p {
+    font-size: 28px;
+    color: #262626;
+}
+
+.level1 .jvjc .file-num-types .file-num-type span {
+    color: #595959;
+    font-size: 16px;
+}
+
+.level2 {
+    height: 340px;
+    display: flex;
+    margin-top: 30px;
+}
+
+.level2 .tomcat {
+    width: calc((100% - 30px)/2);
+    margin-right: 30px;
+}
+
+.level2 .block-main {
+    height: 220px;
+    margin-top: 38px;
+}
+
+.level2 .block-main>div:not(.line) {
+    width: calc(50% - 1px);
+}
+
+
+
+.level2 .desc {
+    padding-left: 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.level2 .desc .desc-row {
+    height: 54px;
+}
+
+.level2 .desc .desc-item {
+    height: 54px;
+    display: flex;
+    align-items: center;
+    width: 50%;
+    float: left;
+}
+
+.level2 .desc .desc-item img {
+    width: 54px;
+    height: 54px;
+    margin-right: 10px;
+}
+
+.level2 .desc .desc-item .num-box {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.level2 .desc .desc-item .num-box p {
+    font-size: 28px;
+    color: #262626;
+}
+
+.level2 .desc .desc-item .num-box span {
+    font-size: 16px;
+    color: #595959;
+}
+
+.level2 .db {
+    position: relative;
+    width: calc((100% - 30px)/2);
+}
+
+.status-box {
+    position: absolute;
+    top: 22px;
+    right: 20px;
+    z-index: 1;
+    display: none;
+}
+
+.status-box span {
+    font-size: 24px;
+    font-weight: bold;
+    vertical-align: middle;
+}
+
+.status-box img {
+    height: 24px;
+    margin-right: 5px;
+}
+
+.status-box.db-suc {
+    color: #0ED57D;
+}
+
+.status-box.db-fail {
+    color: #F53947;
+}
+
+.level3 {
+    height: 84px;
+    display: flex;
+    margin-top: 30px;
+}
+
+.level3 .redis {
+    width: calc((100% - 30px)/2);
+    position: relative;
+}
+
+@media screen and (max-width: 1680px) {
+    .level1 .xtzt .desc {
+        padding-left: 140px;
+    }
+
+    .level1 {
+        display: block;
+        height: auto;
+    }
+
+    .level1 .xtzt {
+        margin-right: 0;
+        width: 100%;
+    }
+
+    .level1 .jvjc {
+        width: 100%;
+        margin-top: 30px;
+    }
+
+    .level1 .jvjc .desc {
+        padding-left: 30px;
+    }
+
+    .level2 .block-main>div:first-child {
+        width: calc(40% - 1px);
+    }
+
+    .level2 .block-main>div:last-child {
+        width: 60%;
+    }
+
+    .level2 .desc {
+        padding-left: 40px;
+    }
+}
+
+@media screen and (max-width: 1350px) {
+    .level2 .desc {
+        padding-left: 30px;
+    }
+
+}

starter-api/src/main/resources/static/monitor/css/reset.css

@@ -0,0 +1,135 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    box-sizing: border-box;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+body {
+    line-height: 1;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+img {
+    vertical-align: middle;
+}

starter-api/src/main/resources/static/monitor/index.html

@@ -1 +1,266 @@
-monitor
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>监控中心</title>
+    <link rel="stylesheet" href="css/bootstrap-4.6.2.min.css" />
+    <link rel="stylesheet" href="css/reset.css" />
+    <link rel="stylesheet" href="css/index.css" />
+    <script src="js/jquery-1.11.3.min.js"></script>
+    <script src="js/bootstrap-4.6.2.min.js"></script>
+    <script src="js/echarts.min.js"></script>
+  </head>
+  <body>
+    <div id="top-bar">
+      <div class="title-box">
+        <img src="imgs/icon-内置监控页面@2x.png" />
+        <span>应用监控</span>
+      </div>
+      <div class="refresh-box">
+        <p class="label">自动刷新时间</p>
+        <div class="sel-box">
+          <select class="form-control" id="refresh-time">
+            <option value="1000">1s</option>
+            <option value="5000">5s</option>
+            <option value="60000">1m</option>
+          </select>
+        </div>
+
+        <img id="refresh-btn" src="imgs/icon-刷新@2x.png" />
+      </div>
+    </div>
+    <div id="content-wrap">
+      <div class="level1">
+        <div class="chart-block xtzt">
+          <div class="block-title">
+            <img src="imgs/icon-系统状态@2x.png" />
+            <span>系统状态</span>
+          </div>
+          <div class="block-main">
+            <div class="chart-box">
+              <div id="sys-cpu-used"></div>
+              <div class="chart-title">
+                <span>CPU使用率</span>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="chart-box">
+              <div id="sys-disk-used"></div>
+              <div class="chart-title">
+                <span>磁盘空间使用率</span>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="desc">
+              <div class="desc-item">
+                <img src="imgs/icon-平均负载@2x.png" />
+                <div class="num-box">
+                  <p id="pjfz"></p>
+                  <span>平均负载</span>
+                </div>
+              </div>
+              <div class="desc-item">
+                <img src="imgs/icon-cpu数量@2x.png" />
+                <div class="num-box">
+                  <p id="cpusl"></p>
+                  <span>CPU数量</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="chart-block jvjc">
+          <div class="block-title">
+            <img src="imgs/icon-java进程@2x.png" />
+            <span>JAVA进程</span>
+          </div>
+          <div class="block-main">
+            <div class="chart-box">
+              <div id="java-cpu-used"></div>
+              <div class="chart-title">
+                <span>CPU使用率</span>
+              </div>
+            </div>
+            <div class="line"></div>
+
+            <div class="chart-box">
+              <div id="memory-used"></div>
+              <div class="chart-title">
+                <span>内存使用率</span>
+              </div>
+            </div>
+            <div class="file-num-types">
+              <div class="file-num-type">
+                <p id="zdncs"></p>
+                <span>最大内存数</span>
+              </div>
+              <div class="file-num-type">
+                <p id="ysync"></p>
+                <span>已使用内存</span>
+              </div>
+            </div>
+            <div class="line"></div>
+
+            <div class="chart-box">
+              <div id="file-used"></div>
+              <div class="chart-title">
+                <span>文件使用率</span>
+              </div>
+            </div>
+            <div class="file-num-types">
+              <div class="file-num-type">
+                <p id="zdwjs"></p>
+                <span>最大文件数</span>
+              </div>
+              <div class="file-num-type">
+                <p id="dkwjs"></p>
+                <span>打开文件数</span>
+              </div>
+            </div>
+
+            <div class="line"></div>
+            <div class="desc">
+              <div class="desc-item">
+                <img src="imgs/icon-活跃线程数@2x.png" />
+                <div class="num-box">
+                  <p id="hyxcs"></p>
+                  <span>活跃线程数</span>
+                </div>
+              </div>
+              <div class="desc-item">
+                <img src="imgs/icon-运行时长@2x.png" />
+                <div class="num-box">
+                  <p id="yxsc"></p>
+                  <span>运行时长(天/时/分/秒)</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="level2">
+        <div class="chart-block tomcat">
+          <div class="block-title">
+            <img src="imgs/icon-tomcat@2x.png" />
+            <span>Tomcat</span>
+          </div>
+          <div class="block-main">
+            <div class="chart-box">
+              <div id="threads-used"></div>
+              <div class="chart-title">
+                <span>线程使用率</span>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="desc">
+              <div class="desc-row">
+                <div class="desc-item">
+                  <img src="imgs/icon-最大线程数@2x.png" />
+                  <div class="num-box">
+                    <p id="zdxcs"></p>
+                    <span>最大线程数</span>
+                  </div>
+                </div>
+                <div class="desc-item">
+                  <img src="imgs/icon-当前线程数@2x.png" />
+                  <div class="num-box">
+                    <p id="dqxcs"></p>
+                    <span>当前线程数</span>
+                  </div>
+                </div>
+              </div>
+              <div class="desc-row">
+                <div class="desc-item">
+                  <img src="imgs/icon-工作线程数@2x.png" />
+                  <div class="num-box">
+                    <p id="gzxcs"></p>
+                    <span>工作线程数</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="chart-block db">
+          <div class="status-box db-suc">
+            <img src="imgs/icon-已连接@2x.png" />
+            <span>已连接</span>
+          </div>
+          <div class="status-box db-fail">
+            <img src="imgs/icon-未连接@2x.png" />
+            <span>未连接</span>
+          </div>
+          <div class="block-title">
+            <img src="imgs/icon-tomcat@2x.png" />
+            <span>数据库连接</span>
+          </div>
+          <div class="block-main">
+            <div class="chart-box">
+              <div id="connect-used"></div>
+              <div class="chart-title">
+                <span>连接使用率</span>
+              </div>
+            </div>
+            <div class="line"></div>
+            <div class="desc">
+              <div class="desc-row">
+                <div class="desc-item">
+                  <img src="imgs/icon-空闲连接数@2x.png" />
+                  <div class="num-box">
+                    <p id="kxljs"></p>
+                    <span>空闲连接数</span>
+                  </div>
+                </div>
+                <div class="desc-item">
+                  <img src="imgs/icon-活跃线程数@2x.png" />
+                  <div class="num-box">
+                    <p id="hyljs"></p>
+                    <span>活跃线程数</span>
+                  </div>
+                </div>
+              </div>
+              <div class="desc-row">
+                <div class="desc-item">
+                  <img src="imgs/icon-最大连接数@2x.png" />
+                  <div class="num-box">
+                    <p id="zdljs"></p>
+                    <span>最大连接数</span>
+                  </div>
+                </div>
+                <div class="desc-item">
+                  <img src="imgs/icon-最小连接数@2x.png" />
+                  <div class="num-box">
+                    <p id="zxljs"></p>
+                    <span>最小连接数</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="level3">
+        <div class="chart-block redis">
+          <div class="status-box redis-suc">
+            <img src="imgs/icon-已连接@2x.png" />
+            <span>已连接</span>
+          </div>
+          <div class="status-box redis-fail">
+            <img src="imgs/icon-未连接@2x.png" />
+            <span>未连接</span>
+          </div>
+          <div class="block-title">
+            <img src="imgs/icon-redis连接@2x.png" />
+            <span>Redis连接</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script src="js/util.js"></script>
+    <script src="js/index.js"></script>
+  </body>
+</html>

starter-api/src/main/resources/static/monitor/js/flexible.js

@@ -0,0 +1,43 @@
+(function flexible(window, document) {
+  var docEl = document.documentElement;
+  var dpr = window.devicePixelRatio || 1;
+
+  // adjust body font size
+  function setBodyFontSize() {
+    if (document.body) {
+      document.body.style.fontSize = 12 * dpr + 'px';
+    } else {
+      document.addEventListener('DOMContentLoaded', setBodyFontSize);
+    }
+  }
+  setBodyFontSize();
+
+  // set 1rem = viewWidth / 10
+  function setRemUnit() {
+    var rem = docEl.clientWidth / 10;
+    docEl.style.fontSize = rem + 'px';
+  }
+
+  setRemUnit();
+
+  // reset rem unit on page resize
+  window.addEventListener('resize', setRemUnit);
+  window.addEventListener('pageshow', function (e) {
+    if (e.persisted) {
+      setRemUnit();
+    }
+  });
+
+  // detect 0.5px supports
+  if (dpr >= 2) {
+    var fakeBody = document.createElement('body');
+    var testElement = document.createElement('div');
+    testElement.style.border = '.5px solid transparent';
+    fakeBody.appendChild(testElement);
+    docEl.appendChild(fakeBody);
+    if (testElement.offsetHeight === 1) {
+      docEl.classList.add('hairlines');
+    }
+    docEl.removeChild(fakeBody);
+  }
+})(window, document);

starter-api/src/main/resources/static/monitor/js/index.js

@@ -0,0 +1,122 @@
+$(function () {
+  function init() {
+    // $.get('http://192.168.10.51:8088/test.txt', function (res) {
+    $.get(location.origin + '/actuator/prometheus', function (res) {
+      var obj = strToObj(res);
+      console.log(obj);
+      $('#yxsc').html(countDown(obj.process_uptime_seconds));
+      // CPU使用率饼图
+      createPie(obj.system_cpu_usage, 'sys-cpu-used', 'small');
+      //平均负载数值
+      $('#pjfz').html(obj.system_load_average_1m);
+
+      fillTextColor('#pjfz', obj.system_load_average_1m, [3, 5]);
+      //CPU数量数值
+      $('#cpusl').html(parseInt(obj.system_cpu_count));
+
+      createPie(obj.process_cpu_usage, 'java-cpu-used', 'small');
+      createPie(
+        obj.process_files_open_files / obj.process_files_max_files,
+        'file-used',
+        'small',
+      );
+      $('#zdwjs').html(parseInt(obj.process_files_max_files));
+      $('#dkwjs').html(parseInt(obj.process_files_open_files));
+      fillTextColorByRatio(
+        '#dkwjs',
+        obj.process_files_open_files / obj.process_files_max_files,
+        [0.7, 0.9],
+      );
+
+      //   createPie()
+      var maxMemory = getValueByReduce(obj.jvm_memory_max_bytes, 'heap');
+      var addMemory = obj.jvm_memory_max_bytes.find(function (item) {
+        return (
+          item.conditions.area === 'heap' &&
+          item.conditions.id === 'PS Survivor Space'
+        );
+      });
+      if (addMemory) {
+        maxMemory += Number(addMemory.value);
+      }
+      var usedMemory = getValueByReduce(obj.jvm_memory_used_bytes, 'heap');
+      console.log('最大内存：', maxMemory);
+      createPie(usedMemory / maxMemory, 'memory-used', 'small');
+      var maxMemoryText =
+        maxMemory / 1024 / 1024 < 1000
+          ? parseInt(maxMemory / 1024 / 1024) + 'MB'
+          : parseInt(maxMemory / 1024 / 1024 / 1024) + 'GB';
+      var usedMemoryText =
+        usedMemory / 1024 / 1024 < 1000
+          ? parseInt(usedMemory / 1024 / 1024) + 'MB'
+          : parseInt(usedMemory / 1024 / 1024 / 1024) + 'GB';
+      $('#zdncs').html(maxMemoryText);
+      $('#ysync').html(usedMemoryText);
+      fillTextColorByRatio('#ysync', usedMemory / maxMemory, [0.7, 0.9]);
+      $('#hyxcs').html(parseInt(obj.jvm_threads_live_threads));
+
+      var maxThreads = getValueByReduce(obj.tomcat_threads_config_max_threads);
+      var usedThreads = getValueByReduce(obj.tomcat_threads_busy_threads);
+      var curThreads = getValueByReduce(obj.tomcat_threads_current_threads);
+
+      createPie(usedThreads / maxThreads, 'threads-used', 'big');
+      $('#zdxcs').html(maxThreads);
+      $('#gzxcs').html(usedThreads);
+      fillTextColorByRatio('#gzxcs', usedThreads / maxThreads, [0.7, 0.9]);
+      $('#dqxcs').html(curThreads);
+
+      var maxConnects = getValueByReduce(obj.hikaricp_connections_max);
+      var activeConnects = getValueByReduce(obj.hikaricp_connections_active);
+      var idleConnects = getValueByReduce(obj.hikaricp_connections_idle);
+      var minConnects = getValueByReduce(obj.hikaricp_connections_min);
+
+      createPie(activeConnects / maxConnects, 'connect-used', 'big');
+      $('#zdljs').html(maxConnects);
+      $('#hyljs').html(activeConnects);
+      fillTextColorByRatio('#hyljs', activeConnects / maxConnects, [0.7, 0.9]);
+      $('#kxljs').html(idleConnects);
+      $('#zxljs').html(minConnects);
+      // $.get('http://192.168.10.51:8088/health.json', function (data) {
+      $.get(location.origin + '/actuator/health', function (data) {
+        var details = data.components.diskSpace.details;
+        //系统磁盘空间饼图
+        createPie(
+          (details.total - details.free) / details.total,
+          'sys-disk-used',
+          'small',
+        );
+        var dbStatus = data.components.db.status;
+        var redisStatus = data.components.db.redis;
+        if (dbStatus === 'UP') {
+          $('.db-suc').show();
+          $('.db-fail').hide();
+        } else {
+          $('.db-fail').show();
+          $('.db-suc').hide();
+        }
+        if (!redisStatus) {
+          $('.level3').hide();
+        } else if (redisStatus === 'UP') {
+          $('.level3').show();
+          $('.redis-suc').show();
+          $('.redis-fail').hide();
+        } else {
+          $('.level3').show();
+          $('.redis-fail').show();
+          $('.redis-suc').hide();
+        }
+      });
+    });
+  }
+  init();
+  var t = parseInt(localStorage.intervalTime);
+  window.refreshTimer = setInterval(init, t || 5000);
+  $('#refresh-time').val(t || 5000);
+  $('#refresh-time').on('change', function () {
+    clearInterval(window.refreshTimer);
+    window.refreshTimer = null;
+    window.refreshTimer = setInterval(init, this.value);
+    localStorage.setItem('intervalTime', this.value);
+  });
+  $('#refresh-btn').on('click', init);
+});

starter-api/src/main/resources/static/monitor/js/util.js

@@ -0,0 +1,168 @@
+window.colorConfig = {
+  normal: ['#3B6AF6', '#CDE0FC'],
+  warning: ['#FF9C00', '#FBE8AB'],
+  error: ['#F52F3E', '#F8D7D5'],
+};
+function strToObj(str) {
+  var n = str.split('\n').filter(function (item) {
+    return !item.startsWith('#');
+  });
+  var obj = {};
+  for (var i = 0; i < n.length; i++) {
+    var lastSpaceIndex = n[i].lastIndexOf(' ');
+    if (lastSpaceIndex > -1) {
+      var outKey = n[i].slice(0, lastSpaceIndex);
+      var outValue = n[i].slice(lastSpaceIndex + 1);
+      let matchs = outKey.match(/{.+=.+}/g);
+      if (matchs) {
+        var cutOutKey = outKey.split('{')[0];
+        var child = {};
+        let kToVArr = matchs[0]
+          .replaceAll(/[{}"]/g, '')
+          .split(',')
+          .filter((item) => !!item);
+        kToVArr.forEach(function (kToV) {
+          var kvArr = kToV.split('=');
+          child[kvArr[0]] = kvArr[1];
+        });
+        if (!obj[cutOutKey]) {
+          obj[cutOutKey] = [{ conditions: child, value: outValue }];
+        } else {
+          obj[cutOutKey].push({ conditions: child, value: outValue });
+        }
+      } else {
+        obj[outKey] = outValue;
+      }
+    }
+  }
+  return obj;
+}
+function createPie(ratio, domId, size) {
+  var myChart = echarts.init(document.getElementById(domId));
+  const handred = 100;
+  let point = parseInt(ratio * 100);
+  var colors =
+    ratio >= 0.9
+      ? colorConfig.error
+      : ratio >= 0.7
+      ? colorConfig.warning
+      : colorConfig.normal;
+  option = {
+    title: {
+      text: point + '%',
+      x: 'center',
+      y: 'center',
+      textStyle: {
+        fontWeight: 'bold',
+        color: '#262626',
+        fontSize: '28',
+      },
+    },
+    tooltip: {
+      formatter: function (params) {
+        return params.name + '：' + params.percent + ' %';
+      },
+    },
+    legend: {
+      show: false,
+      itemGap: 12,
+      data: ['占比', '剩余'],
+    },
+
+    series: [
+      {
+        name: 'circle',
+        type: 'pie',
+        clockWise: true,
+        radius: ['54', '78'],
+        itemStyle: {
+          normal: {
+            label: {
+              show: false,
+            },
+            labelLine: {
+              show: false,
+            },
+          },
+        },
+        hoverAnimation: false,
+        data: [
+          {
+            value: point,
+            name: '占比',
+            itemStyle: {
+              normal: {
+                color: colors[0],
+                label: {
+                  show: false,
+                },
+                labelLine: {
+                  show: false,
+                },
+              },
+            },
+          },
+          {
+            name: '剩余',
+            value: handred - point,
+            itemStyle: {
+              normal: {
+                color: colors[1],
+              },
+            },
+          },
+        ],
+      },
+    ],
+  };
+  myChart.setOption(option);
+}
+function fillTextColor(domId, val, arr) {
+  $(domId).css(
+    'color',
+    val > arr[1]
+      ? colorConfig.error[0]
+      : val > arr[0]
+      ? colorConfig.warning[0]
+      : '#262626',
+  );
+}
+function fillTextColorByRatio(domId, val, ratioArr) {
+  $(domId).css(
+    'color',
+    val > ratioArr[1]
+      ? colorConfig.error[0]
+      : val > ratioArr[0]
+      ? colorConfig.warning[0]
+      : '#262626',
+  );
+}
+function getValueByReduce(arr, key) {
+  var newArr = JSON.parse(JSON.stringify(arr));
+  if (key) {
+    newArr = arr.filter(function (item) {
+      return item.conditions.area === 'heap';
+    });
+  }
+  return newArr.reduce(function (total, item) {
+    return total + Number(item.value);
+  }, 0);
+}
+
+function countDown(dec) {
+  //得到天 格式化成前缀加零的样式
+  var d = parseInt(dec / 60 / 60 / 24);
+  d = d < 10 ? '0' + d : d;
+  //得到小时 格式化成前缀加零的样式
+  var h = parseInt((dec / 60 / 60) % 24);
+  h = h < 10 ? '0' + h : h;
+  //得到分钟 格式化成前缀加零的样式
+  var m = parseInt((dec / 60) % 60);
+  m = m < 10 ? '0' + m : m;
+
+  //得到秒 格式化成前缀加零的样式
+  s = parseInt(dec % 60);
+  s = s < 10 ? '0' + s : s;
+
+  return `${d}  ${h}:${m}:${s}`;
+}