github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-18 00:45:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

update table

Browse Source
This commit is contained in:
Qiuxia Fan 2022-03-28 13:48:22 +08:00
parent b78414a307
commit c97dc4ca30
1 changed files with 20 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/views/dashboard/graphs/Table.vue
View File

@ -15,22 +15,16 @@ limitations under the License. -->
<template> <template>
<div class="chart-table"> <div class="chart-table">
<div ref="chartTable"> <div class="row header flex-h">
<div class="row header flex-h" :style="`width: 100%`"> <div class="name" :style="`width: ${nameWidth}`">
<div class="name" :style="`width: ${nameWidth}px`">
{{ config.tableHeaderCol1 || t("name") }} {{ config.tableHeaderCol1 || t("name") }}
</div> </div>
<div class="value-col" v-if="config.showTableValues"> <div class="value-col" v-if="config.showTableValues">
{{ config.tableHeaderCol2 || t("value") }} {{ config.tableHeaderCol2 || t("value") }}
</div> </div>
</div> </div>
<div <div class="row flex-h" v-for="key in dataKeys" :key="key">
class="row flex-h" <div class="name" :style="`width: ${nameWidth}`">{{ key }}</div>
v-for="key in dataKeys"
:key="key"
:style="`width: 100%`"
>
<div :style="`width: ${nameWidth}px`">{{ key }}</div>
<div class="value-col" v-if="config.showTableValues"> <div class="value-col" v-if="config.showTableValues">
{{ {{
config.metricTypes[0] === "readMetricsValue" config.metricTypes[0] === "readMetricsValue"
@ -40,10 +34,9 @@ limitations under the License. -->
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref, onMounted } from "vue"; import { computed } from "vue";
import type { PropType } from "vue"; import type { PropType } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
/*global defineProps */ /*global defineProps */
@ -63,39 +56,10 @@ const props = defineProps({
}, },
}); });
/*global Nullable*/
const { t } = useI18n(); const { t } = useI18n();
const chartTable = ref<Nullable<HTMLElement>>(null); const nameWidth = computed(() =>
const initWidth = ref<number>(0); props.config.showTableValues ? "80%" : "100%"
const nameWidth = ref<number>(0); );
const draggerName = ref<Nullable<HTMLElement>>(null);
onMounted(() => {
if (!chartTable.value) {
return;
}
const width = props.config.showTableValues
? chartTable.value.offsetWidth / 2
: chartTable.value.offsetWidth;
initWidth.value = props.config.showTableValues
? chartTable.value.offsetWidth / 2
: 0;
nameWidth.value = width - 5;
if (!draggerName.value) {
return;
}
draggerName.value.onmousedown = (event: MouseEvent) => {
const diffX = event.clientX;
const copy = nameWidth;
document.onmousemove = (documentEvent) => {
const moveX = documentEvent.clientX - diffX;
nameWidth.value = Number(copy) + Number(moveX);
};
document.onmouseup = () => {
document.onmousemove = null;
document.onmouseup = null;
};
};
});
const dataKeys = computed(() => { const dataKeys = computed(() => {
if (props.config.metricTypes[0] === "readMetricsValue") { if (props.config.metricTypes[0] === "readMetricsValue") {
const keys = Object.keys(props.data || {}); const keys = Object.keys(props.data || {});
@ -120,6 +84,7 @@ const dataKeys = computed(() => {
.row { .row {
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
height: 20px; height: 20px;
width: 100%;
div { div {
overflow: hidden; overflow: hidden;