From 006c98e5650b530e5220f279c1e803fefe69d40d Mon Sep 17 00:00:00 2001
From: alielie <alielie@git.com>
Date: 星期二, 25 十一月 2025 15:47:33 +0800
Subject: [PATCH] 优化一些东西；
---
Plugin.DataBoard/Libs/Static/test.html | 244 +++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 239 insertions(+), 5 deletions(-)
diff --git a/Plugin.DataBoard/Libs/Static/test.html b/Plugin.DataBoard/Libs/Static/test.html
index 9b2e204..2989317 100644
--- a/Plugin.DataBoard/Libs/Static/test.html
+++ b/Plugin.DataBoard/Libs/Static/test.html
@@ -6,6 +6,140 @@
<head>
<title>Simple Surface</title>
<meta charset="utf-8">
+ <style type="text/css">
+ /* 瀵� loading 鏁翠綋甯冨眬*/
+ .loading-wrapper {
+ padding: 16px;
+ background-color: rgba(0, 0, 0, 0.8);
+ border-radius: 10px;
+ color: #fff;
+ text-align: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ background: rgba(0, 0, 0, 0.5);
+ }
+
+
+ /* loading 鍔ㄧ敾鍥惧儚鐖剁骇鐨勫竷灞� */
+ .loading-view {
+ height: 40px;
+ position: relative;
+ }
+
+ .loading-msg {
+ font-size: 14px;
+ margin: 8px 0 0 0;
+ position: relative;
+ }
+
+ .container1,
+ .container2 {
+ width: 40px;
+ height: 40px;
+ position: absolute;
+ /* border: 1px solid #ff0000; */
+ top: 0;
+ left: 50%;
+ margin-left: -20px;
+ position: absolute;
+ }
+
+ .container2 {
+ transform: rotate(45deg);
+ }
+
+ /* 绗�1绉嶅姩鐢诲拰绗簩绉嶇殑鐩稿悓閮ㄥ垎锛屽叾涓殑 animation 涔熺浉鍚� */
+ .circle,
+ .bounce {
+ width: 10px;
+ height: 10px;
+ background-color: #fff;
+ border-radius: 50%;
+ /* 璁剧疆灏忕悆鍔ㄧ敾 */
+ animation: loading 1.2s both infinite;
+ }
+
+ .circle {
+ position: absolute;
+ }
+
+ /* 璁剧疆灏忕悆鐨勭浉瀵逛綅缃� */
+ .circle1 {
+ top: 0;
+ left: 0;
+ }
+
+ .circle2 {
+ top: 0;
+ right: 0;
+ }
+
+ .circle3 {
+ bottom: 0;
+ right: 0;
+ }
+
+ .circle4 {
+ bottom: 0;
+ left: 0;
+ }
+
+ /* 璁剧疆寤舵椂 */
+ .container1 .circle1 {
+ animation-delay: 0s;
+ }
+
+ .container2 .circle1 {
+ animation-delay: 0.2s;
+ }
+
+ .container1 .circle2 {
+ animation-delay: 0.3s;
+ }
+
+ .container2 .circle2 {
+ animation-delay: 0.4s;
+ }
+
+ .container1 .circle3 {
+ animation-delay: 0.5s;
+ }
+
+ .container2 .circle3 {
+ animation-delay: 0.6s;
+ }
+
+ .container1 .circle4 {
+ animation-delay: 0.7s;
+ }
+
+ .container2 .circle5 {
+ animation-delay: 0.8s;
+ }
+
+ @keyframes loading {
+ 0% {
+ transform: scale(0);
+ }
+
+ 40% {
+ transform: scale(1);
+ }
+
+ 80% {
+ transform: scale(0);
+ }
+
+ 100% {
+ transform: scale(0);
+ }
+ }
+ </style>
<script src="echarts.min.js"></script>
<script type="text/javascript">
const color = ['#22448b'];
@@ -37,12 +171,15 @@
.chart {
height: 100%;
width: 25%;
+ position: relative;
}
</style>
</head>
<body>
<div id="container">
- <div id="chart0" class="chart"></div>
+ <div id="chart0" class="chart">
+
+ </div>
<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
<div id="chart3" class="chart"></div>
@@ -75,9 +212,33 @@
}
]
};
- var chart0 = echarts.init(dom0);
+ var chart0 = null;
+ function loading0(msg) {
+ if (chart0 != null) {
+ chart0.dispose();
+ chart0 = null;
+ }
+ dom0.innerHTML = `<div class="loading-wrapper">
+ <div class="loading-view">
+ <div class="container1">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ <div class="container2">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ </div>
+ <h2 class="loading-msg">${msg}</h2>
+</div>`
+ }
function drawChart0(fields, data) {
+ chart0 = echarts.init(dom0);
opt0.xAxis.data = fields;
opt0.series[0].data = data;
chart0.setOption(opt0);
@@ -125,9 +286,33 @@
}
]
};
- var chart1 = echarts.init(dom1);
+ var chart1 = null;
+ function loading1(msg) {
+ if (chart1 != null) {
+ chart1.dispose();
+ chart1 = null;
+ }
+ dom1.innerHTML = `<div class="loading-wrapper">
+ <div class="loading-view">
+ <div class="container1">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ <div class="container2">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ </div>
+ <h2 class="loading-msg">${msg}</h2>
+</div>`
+ }
function drawChart1(data) {
+ chart1 = echarts.init(dom1);
opt1.series[0].data = data;
chart1.setOption(opt1);
}
@@ -175,9 +360,33 @@
}
]
};
- var chart2 = echarts.init(dom2);
+ var chart2 = null;
+ function loading2(msg) {
+ if (chart2 != null) {
+ chart2.dispose();
+ chart2 = null;
+ }
+ dom2.innerHTML = `<div class="loading-wrapper">
+ <div class="loading-view">
+ <div class="container1">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ <div class="container2">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ </div>
+ <h2 class="loading-msg">${msg}</h2>
+</div>`
+ }
function drawChart2(label, names, data0, data1) {
+ chart2 = echarts.init(dom2)
opt2.xAxis.data = label;
opt2.series[0].name = names[0];
opt2.series[0].data = data0;
@@ -242,9 +451,34 @@
}
]
};
- var chart3 = echarts.init(dom3);
+ var chart3 = null;
+
+ function loading3(msg) {
+ if (chart3 != null) {
+ chart3.dispose();
+ chart3 = null;
+ }
+ dom3.innerHTML = `<div class="loading-wrapper">
+ <div class="loading-view">
+ <div class="container1">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ <div class="container2">
+ <div class="circle circle1"></div>
+ <div class="circle circle2"></div>
+ <div class="circle circle3"></div>
+ <div class="circle circle4"></div>
+ </div>
+ </div>
+ <h2 class="loading-msg">${msg}</h2>
+</div>`
+ }
function drawChart3(label, data) {
+ chart3 = echarts.init(dom3);
opt3.yAxis.data = label;
opt3.series[0].data = data;
chart3.setOption(opt3);
--
Gitblit v1.9.1