update text

This commit is contained in:
Qiuxia Fan 2022-03-25 16:14:15 +08:00
parent 99e23c33dc
commit aa91cbfe53
4 changed files with 38 additions and 25 deletions

View File

@ -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",

View File

@ -126,6 +126,7 @@ const msg = {
kubernetesCluster: "集群", kubernetesCluster: "集群",
kubernetes: "Kubernetes", kubernetes: "Kubernetes",
textUrl: "文本超链接", textUrl: "文本超链接",
textAlign: "文本对齐",
hourTip: "选择小时", hourTip: "选择小时",
minuteTip: "选择分钟", minuteTip: "选择分钟",
secondTip: "选择秒数", secondTip: "选择秒数",

View File

@ -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 = {

View File

@ -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 {