update text

This commit is contained in:
Qiuxia Fan 2022-03-25 14:32:51 +08:00
parent 58f20fd74a
commit e19e03d413
2 changed files with 43 additions and 11 deletions

View File

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

View File

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