0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 运维管理 仪表盘 新增empty状态

This commit is contained in:
jackhoo_98 2023-03-01 17:08:32 +08:00
parent 4e75bf94c6
commit 1230ea3d90
4 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/AIcon/index.tsx
View File

@ -60,6 +60,7 @@ const iconKeys = [
'RedoOutlined',
'VideoCameraOutlined',
'HistoryOutlined',
'CalendarOutlined',
]
const Icon = (props: {type: string}) => {

13
src/views/link/DashBoard/components/Cpu.vue
View File

@ -10,7 +10,9 @@
format="YYYY-MM-DD HH:mm:ss"
v-model="data.time"
>
<template #suffixIcon><a-icon type="calendar" /></template>
<template #suffixIcon
><AIcon type="CalendarOutlined"
/></template>
<template #renderExtraFooter>
<a-radio-group
default-value="a"
@ -31,7 +33,8 @@
>
</a-range-picker>
</div>
<div ref="chartRef" style="width: 100%; height: 300px"></div>
<a-empty v-if="empty" class="empty" />
<div v-else ref="chartRef" style="width: 100%; height: 300px"></div>
</div>
</a-spin>
</template>
@ -50,8 +53,8 @@ import {
} from './tool.ts';
const chartRef = ref<Record<string, any>>({});
const loading = ref(false);
const empty = ref(false);
const data = ref({
type: 'hour',
time: [null, null],
@ -140,6 +143,7 @@ const handleCpuOptions = (optionsData, xAxis) => {
: typeDataLine,
};
myChart.setOption(options);
xAxis.length === 0 && (empty.value = true);
window.addEventListener('resize', function () {
myChart.resize();
});
@ -186,4 +190,7 @@ watch(
margin-top: 8px;
}
}
.empty {
height: 300px;
}
</style>

13
src/views/link/DashBoard/components/Jvm.vue
View File

@ -10,7 +10,9 @@
format="YYYY-MM-DD HH:mm:ss"
v-model="data.time"
>
<template #suffixIcon><a-icon type="calendar" /></template>
<template #suffixIcon
><AIcon type="CalendarOutlined"
/></template>
<template #renderExtraFooter>
<a-radio-group
default-value="a"
@ -31,7 +33,8 @@
>
</a-range-picker>
</div>
<div ref="chartRef" style="width: 100%; height: 300px"></div>
<a-empty v-if="empty" class="empty" />
<div v-else ref="chartRef" style="width: 100%; height: 300px"></div>
</div>
</a-spin>
</template>
@ -50,7 +53,7 @@ import {
} from './tool.ts';
const chartRef = ref<Record<string, any>>({});
const empty = ref(false);
const loading = ref(false);
const data = ref({
type: 'hour',
@ -144,6 +147,7 @@ const handleJVMOptions = (optionsData, xAxis) => {
: typeDataLine,
};
myChart.setOption(options);
xAxis.length === 0 && (empty.value = true);
window.addEventListener('resize', function () {
myChart.resize();
});
@ -190,4 +194,7 @@ watch(
margin-top: 8px;
}
}
.empty {
height: 300px;
}
</style>

12
src/views/link/DashBoard/components/Network.vue
View File

@ -43,12 +43,12 @@
</div>
</div>
<div>
<a-empty v-if="empty" class="empty" />
<div
v-else
ref="chartRef"
v-if="flag"
style="width: 100%; height: 350px"
></div>
<a-empty v-else style="height: 300px; margin-top: 120px" />
</div>
</div>
</a-spin>
@ -67,10 +67,8 @@ import moment from 'moment';
import * as echarts from 'echarts';
const chartRef = ref<Record<string, any>>({});
const flag = ref(true);
const empty = ref(false);
const loading = ref(false);
const myChart = ref(null);
const data = ref({
type: 'bytesRead',
time: {
@ -163,6 +161,7 @@ const handleNetworkOptions = (optionsData, xAxis) => {
: typeDataLine,
};
myChart.setOption(options);
// xAxis.length === 0 && (empty.value = true);
window.addEventListener('resize', function () {
myChart.resize();
});
@ -216,4 +215,7 @@ watch(
display: flex;
align-items: center;
}
.empty {
height: 300px;
}
</style>