mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-07-17 14:55:25 +00:00
update text
This commit is contained in:
parent
58f20fd74a
commit
e19e03d413
@ -64,6 +64,14 @@ limitations under the License. -->
|
|||||||
@change="changeConfig({ fontColor: $event[0].value })"
|
@change="changeConfig({ fontColor: $event[0].value })"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<el-button size="small" @click="cancelConfig">
|
||||||
|
{{ t("cancel") }}
|
||||||
|
</el-button>
|
||||||
|
<el-button size="small" type="primary" @click="applyConfig">
|
||||||
|
{{ t("apply") }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
@ -71,12 +79,12 @@ import { ref } from "vue";
|
|||||||
import { useDashboardStore } from "@/store/modules/dashboard";
|
import { useDashboardStore } from "@/store/modules/dashboard";
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const dashboardStore = useDashboardStore();
|
const dashboardStore = useDashboardStore();
|
||||||
const { selectedGrid } = dashboardStore;
|
const originConfig = dashboardStore.selectedGrid;
|
||||||
const url = ref(selectedGrid.graph.url || "");
|
const url = ref(originConfig.graph.url || "");
|
||||||
const backgroundColor = ref(selectedGrid.graph.backgroundColor || "green");
|
const backgroundColor = ref(originConfig.graph.backgroundColor || "green");
|
||||||
const fontColor = ref(selectedGrid.graph.fontColor || "white");
|
const fontColor = ref(originConfig.graph.fontColor || "white");
|
||||||
const content = ref<string>(selectedGrid.graph.content || "");
|
const content = ref<string>(originConfig.graph.content || "");
|
||||||
const fontSize = ref<number>(selectedGrid.graph.fontSize || 12);
|
const fontSize = ref<number>(originConfig.graph.fontSize || 12);
|
||||||
const Colors = [
|
const Colors = [
|
||||||
{
|
{
|
||||||
label: "Green",
|
label: "Green",
|
||||||
@ -97,6 +105,15 @@ function changeConfig(param: { [key: string]: unknown }) {
|
|||||||
};
|
};
|
||||||
dashboardStore.selectWidget({ ...selectedGrid, graph });
|
dashboardStore.selectWidget({ ...selectedGrid, graph });
|
||||||
}
|
}
|
||||||
|
function applyConfig() {
|
||||||
|
dashboardStore.setConfigPanel(false);
|
||||||
|
dashboardStore.setConfigs(dashboardStore.selectedGrid);
|
||||||
|
}
|
||||||
|
|
||||||
|
function cancelConfig() {
|
||||||
|
dashboardStore.selectWidget(originConfig);
|
||||||
|
dashboardStore.setConfigPanel(false);
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.slider {
|
.slider {
|
||||||
@ -118,4 +135,15 @@ function changeConfig(param: { [key: string]: unknown }) {
|
|||||||
.item {
|
.item {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
|
padding: 10px;
|
||||||
|
text-align: right;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -36,7 +36,6 @@ limitations under the License. -->
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="body"
|
class="body"
|
||||||
@click="ViewText"
|
|
||||||
:style="{ backgroundColor: TextColors[data.graph.backgroundColor] }"
|
:style="{ backgroundColor: TextColors[data.graph.backgroundColor] }"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
@ -45,9 +44,9 @@ limitations under the License. -->
|
|||||||
fontSize: data.graph.fontSize + 'px',
|
fontSize: data.graph.fontSize + 'px',
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<router-link :to="data.graph.textUrl || ''">
|
<a :href="data.graph.url" target="_blank">
|
||||||
{{ data.graph.content }}
|
{{ data.graph.content }}
|
||||||
</router-link>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -76,8 +75,13 @@ function editConfig() {
|
|||||||
dashboardStore.setConfigPanel(true);
|
dashboardStore.setConfigPanel(true);
|
||||||
dashboardStore.selectWidget(props.data);
|
dashboardStore.selectWidget(props.data);
|
||||||
}
|
}
|
||||||
function ViewText() {
|
function viewText() {
|
||||||
dashboardStore.setTopology(true);
|
const path = props.data.graph.url;
|
||||||
|
console.log(path);
|
||||||
|
if (!path) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
window.open(path, "_blank");
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
Loading…
Reference in New Issue
Block a user