接入导出，添加服务器资源实时监控图表

src/main/resources/static/css/callSupervision.css

@@ -35,15 +35,30 @@
 .box-title {
     color: #fff;
     text-align: center;
-    height: 15px;
+    height: 20px;
+    position: relative;
+}
+
+.box-title > .layui-btn-group {
+    position: absolute;
+    left: 0;
+}
+
+.box-title > .layui-btn-group > .layui-btn, .layui-input {
+    background-color: #a1b9fd24;
+    border-color: #323232;
+    color: #fff;
 }
 
 .box-content {
     color: #fff;
+    height: calc(100% - 20px);
 }
 
-.box-content .num {
-    font-width: bolder;
+.box-content .num-span {
+    font-weight: bolder;
+    color: #f2495c;
+    white-space: nowrap;
 }
 
 .time-select-box {
@@ -77,6 +92,14 @@
     border-color: #323232;
 }
 
+/*.layui-table-cell {*/
+/*    overflow: visible;*/
+/*    text-overflow: inherit;*/
+/*    white-space: normal;*/
+/*    height: auto !important;*/
+/*    word-break: break-all;*/
+/*}*/
+
 .flex {
     display: flex;
 }
@@ -98,10 +121,10 @@
 }
 
 /* 隐藏时间选择器顶部的切换按钮 */
-#layui-laydate2 .laydate-prev-y,.laydate-next-y, .laydate-prev-m, .laydate-next-m  {
+#layui-laydate2 .laydate-prev-y, #layui-laydate2 .laydate-next-y, #layui-laydate2 .laydate-prev-m#layui-laydate2, .laydate-next-m {
     display: none !important;
 }
 
-#layui-laydate3 .laydate-prev-y,.laydate-next-y .laydate-prev-m, .laydate-next-m  {
+#layui-laydate3 .laydate-prev-y, .laydate-next-y, .laydate-prev-m, .laydate-next-m {
     display: none !important;
 }

src/main/resources/static/js/callSupervision/callChartOptions.js

 var defaultLineOptions = {
+    title: {
+        text: 'OCR调用',
+        textStyle: {fontSize: '14px', color: "#fff"},
+        left: 'center'
+    },
     tooltip: {
         trigger: 'axis'
     },
     grid: {
-
         left: '3%',
         right: '4%',
-        bottom: '12%',
+        bottom: '15%',
         containLabel: true
     },
     legend: {
@@ -29,11 +33,11 @@ var defaultLineOptions = {
         {
             type: 'inside',
             start: 0,
-            end: 20
+            end: 100
         },
         {
             start: 0,
-            end: 20
+            end: 100
         }
     ],
     series: [
@@ -43,7 +47,7 @@ var defaultLineOptions = {
         }
     ]
 }
-var defaultBarOptions = {
+var defaultXBarOptions = {
     grid: {
         left: 5,
         right: 5,
@@ -53,7 +57,7 @@ var defaultBarOptions = {
         show: false,
     },
     tooltip: {
-        show: false,
+        trigger: 'axis'
     },
     xAxis: {
         show: false,
@@ -72,7 +76,7 @@ var defaultBarOptions = {
             show: true,
             type: "category",
             inverse: true,
-            data: ['广西高院', '玉林中院', '桂林中院', '贵港中院', '南宁中院', '来宾中院', '贺州中院'],
+            data: [],
             axisLine: {
                 show: false,
             },
@@ -88,20 +92,93 @@ var defaultBarOptions = {
     series: [
         {
             type: "bar",
-            hoverAnimation: false,
-            data: [1233, 23423, 4323, 12121, 5234, 4234, 234234],
-            // barGap:'30px',
-            itemStyle: {
-                normal: {
-                    // color: "#5AC3C3",
-                    // barBorderRadius: 20,
-                },
-            },
-            label: {
-                show: false,
-            },
+            data: [],
             barCategoryGap: 30,
             barWidth: 10,
         },
     ],
 }
+const labelOption = {
+    show: true,
+    position: 'insideBottom',
+    distance: 15,
+    align: 'left',
+    verticalAlign: 'middle',
+    rotate: 90,
+    formatter: '{c}  {name|{a}}',
+    fontSize: 16,
+    rich: {
+        name: {}
+    }
+};
+var defaultYBarOptions = {
+    title: {
+        text: '服务器资源实时监控',
+        textStyle: {fontSize: '14px', color: "#fff"},
+        left: 'center'
+    },
+    grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '5%',
+        containLabel: true
+    },
+    legend: {
+        data: ['Forest', 'Steppe', 'Desert', 'Wetland'],
+        textStyle: {
+            color: "#fff",
+        },
+        left: 10
+    },
+    xAxis: [
+        {
+            type: 'category',
+            axisTick: {show: false},
+            data: ['2012', '2013', '2014', '2015', '2016']
+        }
+    ],
+    yAxis: [
+        {
+            type: 'value'
+        }
+    ],
+    series: [
+        {
+            name: 'Forest',
+            type: 'bar',
+            barGap: 0,
+            label: labelOption,
+            emphasis: {
+                focus: 'series'
+            },
+            data: [320, 332, 301, 334, 390]
+        },
+        {
+            name: 'Steppe',
+            type: 'bar',
+            label: labelOption,
+            emphasis: {
+                focus: 'series'
+            },
+            data: [220, 182, 191, 234, 290]
+        },
+        {
+            name: 'Desert',
+            type: 'bar',
+            label: labelOption,
+            emphasis: {
+                focus: 'series'
+            },
+            data: [150, 232, 201, 154, 190]
+        },
+        {
+            name: 'Wetland',
+            type: 'bar',
+            label: labelOption,
+            emphasis: {
+                focus: 'series'
+            },
+            data: [98, 77, 101, 99, 40]
+        }
+    ]
+}

src/main/resources/static/js/utils/dateformat.js

+/**
+ * Date对象的补充函数，包括类似Python中的strftime()
+ * 阿债 https://gitee.com/azhai/datetime.js
+ */
+
+Date.prototype.toMidnight = function() {
+    this.setHours(0)
+    this.setMinutes(0)
+    this.setSeconds(0)
+    this.setMilliseconds(0)
+    return this
+}
+
+Date.prototype.daysAgo = function(days, midnight) {
+    days = days ? days - 0 : 0
+    const date = new Date(this.getTime() - days * 8.64E7)
+    return midnight ? date.toMidnight() : date
+}
+
+Date.prototype.monthBegin = function(offset) {
+    offset = offset ? offset - 0 : 0
+    const days = this.getDate() - 1 - offset
+    return this.daysAgo(days, true)
+}
+
+Date.prototype.quarterBegin = function() {
+    const month = this.getMonth() - this.getMonth() % 3
+    return new Date(this.getFullYear(), month, 1).toMidnight()
+}
+
+Date.prototype.yearBegin = function() {
+    return new Date(this.getFullYear(), 0, 1).toMidnight()
+}
+
+Date.prototype.strftime = function(format, local) {
+    if (!format) {
+        const str = new Date(this.getTime() + 2.88E7).toISOString()
+        return str.substr(0, 16).replace('T', ' ')
+    }
+    local = local && local.startsWith('zh') ? 'zh' : 'en'
+    const padZero = function(str, len) {
+        const pads = len - str.toString().length
+        return (pads && pads > 0 ? '0'.repeat(pads) : '') + str
+    }
+    format = format.replace('%F', '%Y-%m-%d')
+    format = format.replace(/%D|%x/, '%m/%d/%y')
+    format = format.replace(/%T|%X/, '%H:%M:%S')
+    format = format.replace('%R', '%H:%M')
+    format = format.replace('%r', '%H:%M:%S %p')
+    format = format.replace('%c', '%a %b %e %H:%M:%S %Y')
+    const _this = this
+    return format.replace(/%[A-Za-z%]/g, function(f) {
+        let ans = f
+        switch (f) {
+            case '%%':
+                ans = '%'
+                break
+
+            case '%Y':
+            case '%G':
+                ans = _this.getFullYear()
+                break
+
+            case '%y':
+                ans = _this.getFullYear() % 100
+                break
+
+            case '%C':
+                ans = _this.getFullYear() / 100
+                break
+
+            case '%m':
+            case '%n':
+                ans = _this.getMonth() + 1
+                break
+
+            case '%B':
+                local = local.startsWith('en') ? 'english' : local
+
+            case '%b':
+                const m = _this.getMonth()
+                ans = local_labels.monthes[local][m]
+                break
+
+            case '%d':
+            case '%e':
+                ans = _this.getDate()
+                break
+
+            case '%j':
+                ans = _this.getDaysOfYear()
+                break
+
+            case '%U':
+            case '%W':
+                const ws = _this.getWeeksOfYear(f === '%W')
+                ans = padZero(ws, 2)
+                break
+
+            case '%w':
+                ans = _this.getDay()
+
+            case '%u':
+                ans = ans === 0 ? 7 : ans
+                break
+
+            case '%A':
+                local = local.startsWith('en') ? 'english' : local
+
+            case '%a':
+                const d = _this.getDay()
+                ans = local_labels.weekdays[local][d]
+                break
+
+            case '%H':
+            case '%k':
+                ans = _this.getHours()
+                break
+
+            case '%I':
+            case '%l':
+                ans = _this.getHours()
+                ans = ans % 12
+                break
+
+            case '%M':
+                ans = _this.getMinutes()
+                break
+
+            case '%S':
+                ans = _this.getSeconds()
+                break
+
+            case '%s':
+                ans = parseInt(_this.getTime() / 1E3)
+                break
+
+            case '%f':
+                const ms = _this.getMilliseconds()
+                ans = padZero(ms * 1E3, 6)
+                break
+
+            case '%P':
+                local = local.startsWith('en') ? 'english' : local
+
+            case '%p':
+                const h = _this.getHours()
+                ans = local_labels.meridians[local][h < 12 ? 0 : 1]
+                break
+
+            case '%z':
+                let tzo = _this.getTimezoneOffset()
+                const sign = tzo < 0 ? '-' : '+'
+                tzo = Math.abs(tzo)
+                const ho = padZero(tzo / 60, 2)
+                const mo = padZero(tzo % 60, 2)
+                ans = sign + ho + mo
+                break
+
+            default:
+                break
+        }
+        if (f === '%C' || f === '%y' || f === '%m' || f === '%d' || f === '%H' || f === '%M' || f === '%S') {
+            ans = padZero(ans, 2)
+        }
+        return ans.toString()
+    })
+}
+
+Date.prototype.humanize = function(local) {
+    local = local && local.startsWith('zh') ? 'zh' : 'en'
+    const result = this.strftime('', local)
+    const days = (Date.today() - this.toMidnight().getTime()) / 8.64E7
+    if (days <= -10 || days >= 10) {
+        return result
+    }
+    const labels = local_labels.dayagos[local]
+    let lbl = ''
+    if (days === 0 || days === 1) {
+        lbl = labels[days]
+    } else if (days === -1) {
+        lbl = labels[2]
+    } else if (days >= 2) {
+        lbl = days + labels[3]
+    } else {
+        lbl = days + labels[4]
+    }
+    return lbl + result.substr(10, 6)
+}
+
+const local_labels = {
+    monthes: {
+        english: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        en: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+        zh: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
+    },
+    weekdays: {
+        english: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+        en: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+        zh: ['日', '一', '二', '三', '四', '五', '六']
+    },
+    meridians: {
+        english: ['a.m.', 'p.m.'],
+        en: ['AM', 'PM'],
+        zh: ['上午', '下午']
+    },
+    dayagos: {
+        english: ['Today', 'Yesterday', 'Tomorrow', ' days ago', ' days late'],
+        en: ['Today', 'Yesterday', 'Tomorrow', ' days ago', ' days late'],
+        zh: ['今天', '昨天', '明天', '天前', '天后']
+    }
+}

src/main/resources/static/js/utils/fileDownload.js

+// 后端传的是下载地址 =》 文件重命名
+function getBlob(url, cb) {
+    return new Promise((resolve) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open("GET", url, true);
+        xhr.responseType = "blob";
+        xhr.onload = () => {
+            if (xhr.status === 200) {
+                resolve(xhr.response);
+            }
+        };
+        xhr.send();
+    });
+};
+
+function saveAs(blob, filename) {
+    if (window.navigator.msSaveOrOpenBlob) {
+        navigator.msSaveBlob(blob, filename);
+    } else {
+        const link = document.createElement("a");
+        const body = document.querySelector("body");
+        let downloadUrl = window.URL.createObjectURL(blob);
+        link.href = downloadUrl;
+        link.download = filename;
+        link.style.display = "none";
+        document.body.appendChild(link);
+        link.click();
+        body.removeChild(link);
+        window.URL.revokeObjectURL(downloadUrl);
+    }
+};
+
+// 后端传的是文件流 =》 文件下载
+function exportFile(obj, suffix, name) {
+    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
+        // 兼容IE/Edge
+        window.navigator.msSaveBlob(new Blob([obj]), name + '.' + suffix);
+    } else {
+        const url = window.URL.createObjectURL(new Blob([obj]));
+        const link = document.createElement("a");
+        link.style.display = "none";
+        link.href = url;
+        const fileName = name + "." + suffix;
+        link.setAttribute("download", fileName);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url); // 释放掉blob对象
+    }
+}
+
+//   base64转blob
+function base64_to_blob(data_base64) {
+    var arr = data_base64.split(','), mime = arr[0].match(/:(.*?);/)[1],
+        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+    while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new Blob([u8arr], { type: mime });
+}
+
+// base64 转 file
+function base64_to_file(data_base64, filename) {
+    let fileArray = data_base64.split(','),
+        // 过滤出文件类型
+        fileType = fileArray[0].match(/:(.*?);/)[1],
+        // atob 是对经过 base-64 编码的字符串进行解码
+        bstr = atob(fileArray[1]),
+        n = bstr.length,
+        //Uint8Array 数组类型表示一个 8 位无符号整型数组
+        u8arr = new Uint8Array(n)
+    while (n--) {
+        // 返回字符串n个字符的 Unicode 编码
+        u8arr[n] = bstr.charCodeAt(n)
+    }
+    return new File([u8arr], filename, { type: fileType })
+}