update recent 24

This commit is contained in:
lb 2023-08-09 16:10:05 +08:00
parent 2a2ef5ab5c
commit 8f61e9a9d9
4 changed files with 416 additions and 198 deletions

View File

@ -1,216 +1,215 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= webpackConfig.name %></title>
<!--[if lt IE 11]>
<script>
window.location.href = 'html/ie.html';
</script>
<![endif]-->
<style>
html,
body,
#app {
height: 100%;
margin: 0px;
padding: 0px;
}
<head> .chromeframe {
<meta charset="utf-8"> margin: 0.2em 0;
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> background: #ccc;
<meta name="renderer" content="webkit"> color: #000;
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> padding: 0.2em 0;
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> }
<title>
<%= webpackConfig.name %>
</title>
<!--[if lt IE 11]><script>window.location.href='html/ie.html';</script><![endif]-->
<style>
html,
body,
#app {
height: 100%;
margin: 0px;
padding: 0px;
}
.chromeframe { #loader-wrapper {
margin: 0.2em 0; position: fixed;
background: #ccc; top: 0;
color: #000; left: 0;
padding: 0.2em 0; width: 100%;
} height: 100%;
z-index: 999999;
}
#loader-wrapper { #loader {
position: fixed; display: block;
top: 0; position: relative;
left: 0; left: 50%;
width: 100%; top: 50%;
height: 100%; width: 150px;
z-index: 999999; height: 150px;
} margin: -75px 0 0 -75px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #fff;
-webkit-animation: spin 2s linear infinite;
-ms-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
-o-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
z-index: 1001;
}
#loader { #loader:before {
display: block; content: '';
position: relative; position: absolute;
left: 50%; top: 5px;
top: 50%; left: 5px;
width: 150px; right: 5px;
height: 150px; bottom: 5px;
margin: -75px 0 0 -75px; border-radius: 50%;
border-radius: 50%; border: 3px solid transparent;
border: 3px solid transparent; border-top-color: #fff;
border-top-color: #FFF; -webkit-animation: spin 3s linear infinite;
-webkit-animation: spin 2s linear infinite; -moz-animation: spin 3s linear infinite;
-ms-animation: spin 2s linear infinite; -o-animation: spin 3s linear infinite;
-moz-animation: spin 2s linear infinite; -ms-animation: spin 3s linear infinite;
-o-animation: spin 2s linear infinite; animation: spin 3s linear infinite;
animation: spin 2s linear infinite; }
z-index: 1001;
}
#loader:before { #loader:after {
content: ""; content: '';
position: absolute; position: absolute;
top: 5px; top: 15px;
left: 5px; left: 15px;
right: 5px; right: 15px;
bottom: 5px; bottom: 15px;
border-radius: 50%; border-radius: 50%;
border: 3px solid transparent; border: 3px solid transparent;
border-top-color: #FFF; border-top-color: #fff;
-webkit-animation: spin 3s linear infinite; -moz-animation: spin 1.5s linear infinite;
-moz-animation: spin 3s linear infinite; -o-animation: spin 1.5s linear infinite;
-o-animation: spin 3s linear infinite; -ms-animation: spin 1.5s linear infinite;
-ms-animation: spin 3s linear infinite; -webkit-animation: spin 1.5s linear infinite;
animation: spin 3s linear infinite; animation: spin 1.5s linear infinite;
} }
#loader:after { @-webkit-keyframes spin {
content: ""; 0% {
position: absolute; -webkit-transform: rotate(0deg);
top: 15px; -ms-transform: rotate(0deg);
left: 15px; transform: rotate(0deg);
right: 15px; }
bottom: 15px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #FFF;
-moz-animation: spin 1.5s linear infinite;
-o-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin { @keyframes spin {
0% { 0% {
-webkit-transform: rotate(0deg); -webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg); -ms-transform: rotate(0deg);
transform: rotate(0deg); transform: rotate(0deg);
} }
100% { 100% {
-webkit-transform: rotate(360deg); -webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg); -ms-transform: rotate(360deg);
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
@keyframes spin { #loader-wrapper .loader-section {
0% { position: fixed;
-webkit-transform: rotate(0deg); top: 0;
-ms-transform: rotate(0deg); width: 51%;
transform: rotate(0deg); height: 100%;
} background: #7171c6;
z-index: 1000;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% { #loader-wrapper .loader-section.section-left {
-webkit-transform: rotate(360deg); left: 0;
-ms-transform: rotate(360deg); }
transform: rotate(360deg);
}
}
#loader-wrapper .loader-section.section-right {
right: 0;
}
#loader-wrapper .loader-section { .loaded #loader-wrapper .loader-section.section-left {
position: fixed; -webkit-transform: translateX(-100%);
top: 0; -ms-transform: translateX(-100%);
width: 51%; transform: translateX(-100%);
height: 100%; -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
background: #7171C6; transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
z-index: 1000; }
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
#loader-wrapper .loader-section.section-left { .loaded #loader-wrapper .loader-section.section-right {
left: 0; -webkit-transform: translateX(100%);
} -ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
#loader-wrapper .loader-section.section-right { .loaded #loader {
right: 0; opacity: 0;
} -webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
visibility: hidden;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.3s 1s ease-out;
transition: all 0.3s 1s ease-out;
}
.loaded #loader-wrapper .loader-section.section-left { .no-js #loader-wrapper {
-webkit-transform: translateX(-100%); display: none;
-ms-transform: translateX(-100%); }
transform: translateX(-100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader-wrapper .loader-section.section-right { .no-js h1 {
-webkit-transform: translateX(100%); color: #222222;
-ms-transform: translateX(100%); }
transform: translateX(100%);
-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader { #loader-wrapper .load_title {
opacity: 0; font-family: 'Open Sans';
-webkit-transition: all 0.3s ease-out; color: #fff;
transition: all 0.3s ease-out; font-size: 19px;
} width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
.loaded #loader-wrapper { #loader-wrapper .load_title span {
visibility: hidden; font-weight: normal;
-webkit-transform: translateY(-100%); font-style: italic;
-ms-transform: translateY(-100%); font-size: 13px;
transform: translateY(-100%); color: #fff;
-webkit-transition: all 0.3s 1s ease-out; opacity: 0.5;
transition: all 0.3s 1s ease-out; }
} </style>
</head>
.no-js #loader-wrapper {
display: none;
}
.no-js h1 {
color: #222222;
}
#loader-wrapper .load_title {
font-family: 'Open Sans';
color: #FFF;
font-size: 19px;
width: 100%;
text-align: center;
z-index: 9999999999999;
position: absolute;
top: 60%;
opacity: 1;
line-height: 30px;
}
#loader-wrapper .load_title span {
font-weight: normal;
font-style: italic;
font-size: 13px;
color: #FFF;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="app">
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源,请耐心等待</div>
</div>
</div>
</body>
<body>
<div id="app">
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加载系统资源,请耐心等待</div>
</div>
</div>
</body>
</html> </html>

View File

@ -7,8 +7,10 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<h1>Recent 24 hours</h1> <SearchBar
<p>{{ jsondemo }}</p> :formConfigs="[{ label: '近24小时检测记录', type: 'title' }]"
ref="search-bar" />
<pre><code v-html="jsondemo"></code></pre>
<base-table <base-table
:table-props="tableProps" :table-props="tableProps"
:page="queryParams.pageNo" :page="queryParams.pageNo"
@ -19,6 +21,12 @@
</template> </template>
<script> <script>
import hljs from 'highlight.js/lib/highlight';
import json from 'highlight.js/lib/languages/json';
import 'highlight.js/styles/github-gist.css';
hljs.registerLanguage('json', json);
export default { export default {
name: 'QualityRecentHours', name: 'QualityRecentHours',
components: {}, components: {},
@ -131,7 +139,15 @@ export default {
method: 'get', method: 'get',
}); });
console.log(response); console.log(response);
this.jsondemo = JSON.stringify(response, null, 2); const {
// data: { nameData },
code,
} = response;
this.jsondemo = hljs.highlight(
'json',
JSON.stringify(response, null, 2),
true
).value;
}, },
filterNameData(nameData) { filterNameData(nameData) {
const ndSet = new Set(); const ndSet = new Set();
@ -159,8 +175,35 @@ export default {
}; };
}); });
}, },
handleEmitFun(payload) {
console.log('payload', payload);
},
}, },
}; };
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss">
::-webkit-scrollbar {
display: none;
}
pre {
margin: 10px;
background: #f6f8faf6;
border: 1px solid #e1e4e8;
padding: 12px;
border-radius: 12px;
position: fixed;
// top: 15vh;
top: 10vh;
left: 0;
max-height: 80vh;
overflow-y: auto;
z-index: 100000;
box-shadow: 0 0 32px 12px #0001;
}
code {
font-family: 'IntelOne Mono', 'Ubuntu', 'Courier New', Courier, monospace;
}
</style>

View File

@ -0,0 +1,176 @@
{
"code": 0,
"data": {
"data": [
{
"data": [
{
"id": "测试222023-08-09T02:00",
"parentId": "测试22",
"dynamicName": "2023-08-09T02:00",
"dynamicValue": 1691517600000,
"children": [
{
"id": "1672847052717821953",
"parentId": "测试222023-08-09T02:00",
"dynamicName": "产线1",
"dynamicValue": 1
}
]
},
{
"id": "测试222023-08-09T08:00",
"parentId": "测试22",
"dynamicName": "2023-08-09T08:00",
"dynamicValue": 1691539200000,
"children": [
{
"id": "1672847052717821953",
"parentId": "测试222023-08-09T08:00",
"dynamicName": "产线1",
"dynamicValue": 1
}
]
},
{
"id": "测试222023-08-09T11:00",
"parentId": "测试22",
"dynamicName": "2023-08-09T11:00",
"dynamicValue": 1691550000000,
"children": [
{
"id": "1672847052717821953",
"parentId": "测试222023-08-09T11:00",
"dynamicName": "产线1",
"dynamicValue": 1
}
]
}
],
"inspectionDetContent": "测试22"
},
{
"data": [
{
"id": "测试112023-08-09T02:00",
"parentId": "测试11",
"dynamicName": "2023-08-09T02:00",
"dynamicValue": 1691517600000,
"children": [
{
"id": "1672847052717821954",
"parentId": "测试112023-08-09T02:00",
"dynamicName": "产线22",
"dynamicValue": 1
}
]
},
{
"id": "测试112023-08-09T08:00",
"parentId": "测试11",
"dynamicName": "2023-08-09T08:00",
"dynamicValue": 1691539200000,
"children": [
{
"id": "1672847052717821953",
"parentId": "测试112023-08-09T08:00",
"dynamicName": "产线1",
"dynamicValue": 1
}
]
},
{
"id": "测试112023-08-09T09:00",
"parentId": "测试11",
"dynamicName": "2023-08-09T09:00",
"dynamicValue": 1691542800000,
"children": [
{
"id": "1672847052717821954",
"parentId": "测试112023-08-09T09:00",
"dynamicName": "产线22",
"dynamicValue": 2
}
]
}
],
"inspectionDetContent": "测试11"
}
],
"nameData": [
{
"name": "2023-08-09T02:00",
"tree": 1,
"id": "测试222023-08-09T02:00",
"parentId": "测试22"
},
{
"name": "产线1",
"tree": 2,
"id": "1672847052717821953",
"parentId": "测试222023-08-09T02:00"
},
{
"name": "2023-08-09T08:00",
"tree": 1,
"id": "测试222023-08-09T08:00",
"parentId": "测试22"
},
{
"name": "产线1",
"tree": 2,
"id": "1672847052717821953",
"parentId": "测试222023-08-09T08:00"
},
{
"name": "2023-08-09T11:00",
"tree": 1,
"id": "测试222023-08-09T11:00",
"parentId": "测试22"
},
{
"name": "产线1",
"tree": 2,
"id": "1672847052717821953",
"parentId": "测试222023-08-09T11:00"
},
{
"name": "2023-08-09T02:00",
"tree": 1,
"id": "测试112023-08-09T02:00",
"parentId": "测试11"
},
{
"name": "产线22",
"tree": 2,
"id": "1672847052717821954",
"parentId": "测试112023-08-09T02:00"
},
{
"name": "2023-08-09T08:00",
"tree": 1,
"id": "测试112023-08-09T08:00",
"parentId": "测试11"
},
{
"name": "产线1",
"tree": 2,
"id": "1672847052717821953",
"parentId": "测试112023-08-09T08:00"
},
{
"name": "2023-08-09T09:00",
"tree": 1,
"id": "测试112023-08-09T09:00",
"parentId": "测试11"
},
{
"name": "产线22",
"tree": 2,
"id": "1672847052717821954",
"parentId": "测试112023-08-09T09:00"
}
]
},
"msg": ""
}

View File

@ -5293,7 +5293,7 @@ hex-color-regex@^1.1.0:
highlight.js@9.18.5: highlight.js@9.18.5:
version "9.18.5" version "9.18.5"
resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-9.18.5.tgz" resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA== integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
highlight.js@^10.7.1: highlight.js@^10.7.1: