Skip to content

Commit f40ceb1

Browse files
tianxiu2b2ttianxiu2b2t
committed
chore: 更新面板
1 parent 9229dcd commit f40ceb1

File tree

2 files changed

+87
-7
lines changed

2 files changed

+87
-7
lines changed

‎assets/fonts/Mono.min.ttf‎

5.49 KB
Binary file not shown.

‎assets/js/index.js‎

Lines changed: 87 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -711,14 +711,14 @@ class TemplateEchartElement extends Element {
711711
}
712712
_e_templates(params) {
713713
const data_label = this.type == EchartType.LABEL
714-
const templates = `<div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;">` + (data_label ? '' : `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:{color};"></span>`) + `<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">{name}</span><span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">{value}</span><div style="clear:both"></div></div><div style="clear:both"></div></div>`
714+
const templates = `<div style="margin: 0px 0 0;line-height:1"><div style="margin: 0px 0 0;line-height:1">` + (data_label ? '' : `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:{color}"></span>`) + `<span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">{name}</span><span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">{value}</span><div style="clear:both"></div></div><div style="clear:both"></div></div>`
715715
var template = ''
716716
for (const data of (Array.isArray(params) ? params : [params])) {
717717
let value_formatter = this.formatters[data.seriesIndex] || this.formatters[0]
718718
let value = isNaN(data.value) ? 0 : data.value
719719
template += templates.replace("{color}", data.color).replace("{name}", `${data.seriesName}${data_label ? `(${data.data.label})` : ""}`).replace("{value}", value_formatter ? value_formatter(value) : value)
720720
}
721-
return `<div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;">` + (data_label ? `` : `<div style="font-size:14px;color:#666;font-weight:400;line-height:1;">${(Array.isArray(params) ? params[0] : params).name}</div>`) + `<div style="margin: ${data_label ? 0 : 10}px 0 0;line-height:1;">${template}</div><div style="clear:both"></div></div><div style="clear:both"></div></div>`
721+
return `<div style="margin: 0px 0 0;line-height:1"><div style="margin: 0px 0 0;line-height:1">` + (data_label ? `` : `<div style="font-size:14px;color:#666;font-weight:400;line-height:1">${(Array.isArray(params) ? params[0] : params).name}</div>`) + `<div style="margin: ${data_label ? 0 : 10}px 0 0;line-height:1">${template}</div><div style="clear:both"></div></div><div style="clear:both"></div></div>`
722722
}
723723
getOption() {
724724
return this.instance.getOption()
@@ -803,7 +803,7 @@ $style.setTheme("light", {
803803
"main-shadow-0-2-color": "rgba(15, 198, 194, 0.2)",
804804
"main-shadow-0-1-color": "rgba(15, 198, 194, 0.1)",
805805
"main-button-hover": "rgb(10, 138, 135)",
806-
"panel-box-shadow": "rgba(145, 158, 171, 0.2) 0px 4px 10px;",
806+
"panel-box-shadow": "rgba(145, 158, 171, 0.2) 0px 4px 10px",
807807
"panel-color": "rgb(255, 255, 255)",
808808
"title-color": "rgba(0, 0, 0, 0.5)",
809809
"value-color": "rgba(0, 0, 0, 0.7)",
@@ -829,16 +829,16 @@ $style.setTheme("dark", {
829829
"color": "#ffffff",
830830
"dark-color": "#000000",
831831
"text-dark-color": "rgba(255, 255, 255, 0.7)",
832-
"background": "rgb(24, 24, 24);",
832+
"background": "rgb(24, 24, 24)",
833833
"footer-background": "#202020",
834834
"background-hover": "#202020",
835835
"main-dark-color": "rgb(235, 187, 151)",
836836
"main-shadow-0-2-color": "rgba(244, 209, 180, 0.2)",
837837
"main-shadow-0-1-color": "rgba(244, 209, 180, 0.1)",
838838
"panel-box-shadow": "none",
839839
"panel-color": "rgb(35, 35, 35)",
840-
"title-color": "rgba(255, 255, 255, 0.5);",
841-
"value-color": "rgb(255, 255, 255);",
840+
"title-color": "rgba(255, 255, 255, 0.5)",
841+
"value-color": "rgb(255, 255, 255)",
842842
"echarts-color-0": "#F4D1B4",
843843
"echarts-color-1": "#FFA552",
844844
"echarts-color-2": "#F16575",
@@ -916,7 +916,7 @@ $style.addAll({
916916
"header .padding-left": {
917917
"padding-left": "8px",
918918
},
919-
"h1,h2,h3,h4,h5,h6,p": "margin:0;color:inherit",
919+
"h1,h2,h3,h4,h5,h6,p": "margin:0;color:inherit;font-family:inherit",
920920
"svg": {
921921
"fill": "inherit"
922922
},
@@ -1024,6 +1024,23 @@ $style.addAll({
10241024
},
10251025
".echart": {
10261026
"margin-top": "8px"
1027+
},
1028+
".qps-bar": {
1029+
"font-family": "Mono",
1030+
"display": "flex",
1031+
"padding-left": "8px",
1032+
"padding-right": "8px",
1033+
"-webkit-box-align": "center",
1034+
"align-items": "center",
1035+
"background-color": "rgba(0, 0, 0, 0.05)",
1036+
"border-radius": "4px",
1037+
"margin-left": "16px",
1038+
},
1039+
"@font-face": {
1040+
"font-family": "Mono",
1041+
"src": "url('/assets/fonts/Mono.min.ttf')",
1042+
"font-weight": "normal",
1043+
"font-style": "normal"
10271044
}
10281045
})
10291046
class Tools {
@@ -1219,6 +1236,55 @@ class UserAuth {
12191236
})
12201237
}
12211238
}
1239+
class DynmaticQPS extends Element {
1240+
constructor() {
1241+
super("div").classes("dynmatic-qps")
1242+
$style.addAll({
1243+
".dynmatic-qps": {
1244+
"width": "14px",
1245+
"height": "14px",
1246+
"margin-right": "8px"
1247+
},
1248+
".dynmatic-qps .container": {
1249+
"width": "100%",
1250+
"height": "100%",
1251+
"display": "grid",
1252+
"grid-template-columns": "repeat(3, 1fr)",
1253+
"gap": "15%",
1254+
"align-items": "end"
1255+
},
1256+
".dynmatic-qps .child": {
1257+
"border-radius": "2px 2px 0px 0px",
1258+
"background-color": "var(--main-color)",
1259+
"transition": "height 0.3s ease-in-out"
1260+
}
1261+
})
1262+
this.$container = createElement("div").classes("container")
1263+
for (let i = 0; i < 3; i++) {
1264+
this.$container.append(createElement("div").classes("child"))
1265+
}
1266+
this.append(this.$container)
1267+
this.smooth = 0.01
1268+
this.datas = [
1269+
0.3, 0.7, 0.4
1270+
]
1271+
this.states = Array.from(this.datas).map(e => e)
1272+
this.update()
1273+
}
1274+
update(mode = false) {
1275+
for (let idx in this.$container.children) {
1276+
let child = this.$container.children[idx]
1277+
let value = this.datas[idx]
1278+
if (mode) {
1279+
value += value > 0.5 ? -0.4 : 0.4
1280+
}
1281+
child.style("height", `${value * 100}%`)
1282+
}
1283+
setTimeout(() => {
1284+
this.update(!mode)
1285+
}, 750);
1286+
}
1287+
}
12221288
const $userAuth = new UserAuth();
12231289

12241290
async function load() {
@@ -1415,12 +1481,24 @@ async function load() {
14151481
echart, base
14161482
};
14171483
})
1484+
var current_qps = createElement("p")
1485+
var counter = ref({}, {
1486+
handler: (obj) => {
1487+
current_qps.text(obj.object.value)
1488+
}
1489+
})
14181490
panel.classes("label-text").append(
14191491
createElement("div").classes("title").append(
14201492
createElement("p").i18n("dashboard.title.qps"),
1493+
createElement("div").classes("qps-bar").append(
1494+
new DynmaticQPS(),
1495+
current_qps
1496+
)
14211497
),
14221498
instance
14231499
)
1500+
$dashboard_locals[`${type}_qps_counter`] = counter
1501+
counter.value = 0
14241502
var observer = new ResizeObserver(() => {
14251503
var width = calcElementWidth(parentElement)
14261504
if (width < 1280) {
@@ -2232,6 +2310,7 @@ async function load() {
22322310
handler: (object) => {
22332311
for (let [key, count] of Object.entries(config)) {
22342312
const instance = $dashboard_locals[`${key}_qps_echart`]
2313+
const counter = $dashboard_locals[`${key}_qps_counter`]
22352314
var resp = object.object.resp;
22362315
var length = Object.keys(resp).length;
22372316
var keys = Object.keys(resp).slice(length - count);
@@ -2244,6 +2323,7 @@ async function load() {
22442323
series: [{ name: 'QPS', data: values}]
22452324
}
22462325
instance.base.setOption(option)
2326+
counter.value = Object.values(resp).slice(length - 1)[0]
22472327
}
22482328
}
22492329
})

0 commit comments

Comments
 (0)