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
99e23c33dc
commit
aa91cbfe53
@ -126,6 +126,7 @@ const msg = {
|
|||||||
kubernetesCluster: "Cluster",
|
kubernetesCluster: "Cluster",
|
||||||
kubernetes: "Kubernetes",
|
kubernetes: "Kubernetes",
|
||||||
textUrl: "Text Hyperlink",
|
textUrl: "Text Hyperlink",
|
||||||
|
textAlign: "Text Align",
|
||||||
hourTip: "Select Hour",
|
hourTip: "Select Hour",
|
||||||
minuteTip: "Select Minute",
|
minuteTip: "Select Minute",
|
||||||
secondTip: "Select Second",
|
secondTip: "Select Second",
|
||||||
|
@ -126,6 +126,7 @@ const msg = {
|
|||||||
kubernetesCluster: "集群",
|
kubernetesCluster: "集群",
|
||||||
kubernetes: "Kubernetes",
|
kubernetes: "Kubernetes",
|
||||||
textUrl: "文本超链接",
|
textUrl: "文本超链接",
|
||||||
|
textAlign: "文本对齐",
|
||||||
hourTip: "选择小时",
|
hourTip: "选择小时",
|
||||||
minuteTip: "选择分钟",
|
minuteTip: "选择分钟",
|
||||||
secondTip: "选择秒数",
|
secondTip: "选择秒数",
|
||||||
|
@ -29,6 +29,17 @@ limitations under the License. -->
|
|||||||
@change="changeConfig({ content })"
|
@change="changeConfig({ content })"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="label">{{ t("textAlign") }}</span>
|
||||||
|
<Selector
|
||||||
|
:value="textAlign"
|
||||||
|
:options="AlignStyle"
|
||||||
|
size="small"
|
||||||
|
placeholder="Select a color"
|
||||||
|
class="input"
|
||||||
|
@change="changeConfig({ textAlign: $event[0].value })"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div class="item">
|
<div class="item">
|
||||||
<span class="label">{{ t("backgroundColors") }}</span>
|
<span class="label">{{ t("backgroundColors") }}</span>
|
||||||
<Selector
|
<Selector
|
||||||
@ -85,6 +96,7 @@ const backgroundColor = ref(originConfig.graph.backgroundColor || "green");
|
|||||||
const fontColor = ref(originConfig.graph.fontColor || "white");
|
const fontColor = ref(originConfig.graph.fontColor || "white");
|
||||||
const content = ref<string>(originConfig.graph.content || "");
|
const content = ref<string>(originConfig.graph.content || "");
|
||||||
const fontSize = ref<number>(originConfig.graph.fontSize || 12);
|
const fontSize = ref<number>(originConfig.graph.fontSize || 12);
|
||||||
|
const textAlign = ref(originConfig.graph.textAlign || "left");
|
||||||
const Colors = [
|
const Colors = [
|
||||||
{
|
{
|
||||||
label: "Green",
|
label: "Green",
|
||||||
@ -97,6 +109,14 @@ const Colors = [
|
|||||||
{ label: "Black", value: "black" },
|
{ label: "Black", value: "black" },
|
||||||
{ label: "Orange", value: "orange" },
|
{ label: "Orange", value: "orange" },
|
||||||
];
|
];
|
||||||
|
const AlignStyle = [
|
||||||
|
{
|
||||||
|
label: "Left",
|
||||||
|
value: "left",
|
||||||
|
},
|
||||||
|
{ label: "Center", value: "center" },
|
||||||
|
{ label: "Right", value: "right" },
|
||||||
|
];
|
||||||
function changeConfig(param: { [key: string]: unknown }) {
|
function changeConfig(param: { [key: string]: unknown }) {
|
||||||
const { selectedGrid } = dashboardStore;
|
const { selectedGrid } = dashboardStore;
|
||||||
const graph = {
|
const graph = {
|
||||||
|
@ -36,18 +36,17 @@ limitations under the License. -->
|
|||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="body"
|
class="body"
|
||||||
:style="{ backgroundColor: TextColors[data.graph.backgroundColor] }"
|
:class="data.graph.textAlign === 'center' ? 'center' : ''"
|
||||||
|
:style="{
|
||||||
|
backgroundColor: TextColors[data.graph.backgroundColor],
|
||||||
|
color: TextColors[data.graph.fontColor],
|
||||||
|
fontSize: data.graph.fontSize + 'px',
|
||||||
|
textAlign: data.graph.textAlign,
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<div
|
<a :href="data.graph.url" target="_blank">
|
||||||
:style="{
|
{{ data.graph.content }}
|
||||||
color: TextColors[data.graph.fontColor],
|
</a>
|
||||||
fontSize: data.graph.fontSize + 'px',
|
|
||||||
}"
|
|
||||||
>
|
|
||||||
<a :href="data.graph.url" target="_blank">
|
|
||||||
{{ data.graph.content }}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -75,14 +74,6 @@ function editConfig() {
|
|||||||
dashboardStore.setConfigPanel(true);
|
dashboardStore.setConfigPanel(true);
|
||||||
dashboardStore.selectWidget(props.data);
|
dashboardStore.selectWidget(props.data);
|
||||||
}
|
}
|
||||||
function viewText() {
|
|
||||||
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>
|
||||||
.topology {
|
.topology {
|
||||||
@ -97,21 +88,21 @@ function viewText() {
|
|||||||
|
|
||||||
.header {
|
.header {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 5px;
|
||||||
right: 10px;
|
right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.body {
|
.body {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
line-height: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-sizing: border-box;
|
|
||||||
color: #333;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: horizontal;
|
-webkit-box-orient: horizontal;
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
-webkit-box-align: center;
|
box-sizing: border-box;
|
||||||
|
display: -webkit-box;
|
||||||
|
// -webkit-box-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tools {
|
.tools {
|
||||||
|
Loading…
Reference in New Issue
Block a user