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

update

Browse Source
This commit is contained in:
Fine 2024-10-14 18:20:07 +08:00
parent 72e8e71fdc
commit cb6f8bc4bb
1 changed files with 18 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/views/dashboard/configuration/widget/graph-styles/components/ContentDecorations.vue
View File

@ -13,22 +13,16 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div v-for="(key, index) in Object.keys(decorations)" :key="index" class="mb-10 flex-h">
<div v-for="(key, index) in keys" :key="index" class="mb-10 flex-h">
<div class="content-decoration" contenteditable="true" @blur="changeKeys($event, index)">
{{ key }}
</div>
<div>: </div>
<div class="content-decoration" contenteditable="true" @blur="changeValues($event, index)">
<div class="ml-5 mr-10">:</div>
<div class="content-decoration" contenteditable="true" @blur="changeValues($event, key)">
{{ decorations[key] }}
</div>
<div>
<Icon
class="cp mr-5"
v-if="index === Object.keys(decorations).length - 1"
iconName="add_circle_outlinecontrol_point"
size="middle"
@click="addDecoration"
/>
<div v-if="index === keys.length - 1">
<Icon class="cp mr-5" iconName="add_circle_outlinecontrol_point" size="middle" @click="addDecoration" />
<Icon class="cp" iconName="remove_circle_outline" size="middle" @click="deleteDecoration(index)" />
</div>
</div>
@ -40,28 +34,30 @@ limitations under the License. -->
const dashboardStore = useDashboardStore();
const graph = dashboardStore.selectedGrid.graph || {};
const decorations = ref<{ [key: string]: string }>(graph.contentDecorations || { value: "content" });
const keys = ref<string[]>(graph.contentDecorations ? Object.keys(graph.contentDecorations) : [""]);
function changeKeys(event: any) {
console.log(event);
// decorations.value[]
function changeKeys(event: any, index: number) {
const params = event.target.textContent || "";
decorations.value[params] = "";
}
function changeValues(event: any, key: string) {
decorations.value[key] = event.target.textContent || "";
}
function addDecoration() {
decorations.value = {
...decorations.value,
value: "content",
};
keys.value.push("");
}
function deleteDecoration(index: number) {
const keys = Object.keys(decorations.value);
if (!keys.length) {
if (!keys.value.length) {
return;
}
if (!keys[index]) {
if (!keys.value[index]) {
return;
}
delete decorations.value[keys[index]];
delete decorations.value[keys.value[index]];
keys.value.splice(index, 1);
}
</script>
<style lang="scss" scoped>