feat: add no data tips

This commit is contained in:
Qiuxia Fan 2022-01-11 16:19:44 +08:00
parent 51103ac6ae
commit 015416d31d
3 changed files with 26 additions and 27 deletions

View File

@ -51,22 +51,12 @@ export const dashboardStore = defineStore({
w: 24,
h: 12,
i: String(this.layout.length),
metrics: ["service_resp_time"],
queryMetricType: "readMetricsValues",
type: "Widget",
widget: {
title: "Title123",
tips: "Tooltip123",
},
graph: {
showBackground: true,
barWidth: 30,
type: "Line",
},
standard: {
sortOrder: "DEC",
unit: "s",
title: "Title",
},
graph: {},
standard: {},
};
this.layout = this.layout.map((d: LayoutConfig) => {
d.y = d.y + newWidget.h;
@ -131,22 +121,12 @@ export const dashboardStore = defineStore({
w: 24,
h: 12,
i: String(children.length),
metrics: ["service_resp_time"],
queryMetricType: "readMetricsValues",
type: "Widget",
widget: {
title: "Title123",
tips: "Tooltip123",
},
graph: {
showBackground: true,
barWidth: 30,
type: "Line",
},
standard: {
sortOrder: "DEC",
unit: "s",
title: "Title",
},
graph: {},
standard: {},
};
if (this.layout[idx].children) {
const items = children.map((d: LayoutConfig) => {

View File

@ -51,6 +51,7 @@ limitations under the License. -->
</div>
<div class="tab-layout">
<grid-layout
v-if="state.layout.length"
v-model:layout="state.layout"
:col-num="24"
:row-height="10"
@ -72,6 +73,7 @@ limitations under the License. -->
<Widget :data="item" :active="activeTabWidget === item.i" />
</grid-item>
</grid-layout>
<div class="no-data-tips" v-else>No widgets, plase add widgets</div>
</div>
</template>
<script lang="ts" setup>
@ -243,4 +245,12 @@ watch(
.vue-grid-item.active {
border: 1px solid #409eff;
}
.no-data-tips {
width: 100%;
text-align: center;
font-size: 14px;
padding-top: 30px;
color: #888;
}
</style>

View File

@ -32,13 +32,14 @@ limitations under the License. -->
</div>
</el-popover>
</div>
<div class="body" v-loading="loading">
<div class="body" v-if="data.graph.type" v-loading="loading">
<component
:is="data.graph.type"
:intervalTime="appStoreWithOut.intervalTime"
:data="state.source"
/>
</div>
<div v-else class="no-data">No data</div>
</div>
</template>
<script lang="ts">
@ -149,4 +150,12 @@ export default defineComponent({
width: 100%;
height: calc(100% - 30px);
}
.no-data {
font-size: 14px;
color: #888;
width: 100%;
text-align: center;
padding-top: 20px;
}
</style>