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