You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.1 KiB
Vue
120 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import ServerCard from "./components/ServerCard.vue";
|
|
import { getCardList } from "@/api/list";
|
|
import { onMounted, ref } from "vue";
|
|
defineOptions({
|
|
name: "ServerList"
|
|
});
|
|
|
|
const svg = `
|
|
<path class="path" d="
|
|
M 30 15
|
|
L 28 17
|
|
M 25.61 25.61
|
|
A 15 15, 0, 0, 1, 15 30
|
|
A 15 15, 0, 1, 1, 27.99 7.5
|
|
L 15 15
|
|
" style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
|
|
`;
|
|
|
|
const pagination = ref({ current: 1, pageSize: 12, total: 0 });
|
|
|
|
const deviceList = ref([]);
|
|
|
|
const searchValue = ref("");
|
|
const dataLoading = ref(true);
|
|
// const onSubmit = () => {
|
|
// console.log("submit!");
|
|
// };
|
|
const onPageSizeChange = (size: number) => {
|
|
pagination.value.pageSize = size;
|
|
pagination.value.current = 1;
|
|
};
|
|
const onCurrentChange = (current: number) => {
|
|
pagination.value.current = current;
|
|
};
|
|
const getCardListData = async () => {
|
|
try {
|
|
const { data } = await getCardList();
|
|
deviceList.value = data.list;
|
|
console.log(data.list);
|
|
pagination.value = {
|
|
...pagination.value,
|
|
total: data.list.length
|
|
};
|
|
} catch (e) {
|
|
console.log(e);
|
|
} finally {
|
|
setTimeout(() => {
|
|
dataLoading.value = false;
|
|
}, 500);
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
getCardListData();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="main p-4">
|
|
<div class="mt-4 mb-5">
|
|
<el-button> {{ `全部状态(${90})` }} </el-button>
|
|
<el-button> {{ `在线(${80})` }}</el-button>
|
|
<el-button>{{ `离线(${10})` }}</el-button>
|
|
</div>
|
|
<div
|
|
v-loading="dataLoading"
|
|
:element-loading-svg="svg"
|
|
element-loading-svg-view-box="-10, -10, 50, 50"
|
|
>
|
|
<el-empty
|
|
v-show="
|
|
deviceList
|
|
.slice(
|
|
pagination.pageSize * (pagination.current - 1),
|
|
pagination.pageSize * pagination.current
|
|
)
|
|
.filter(v =>
|
|
v.deviceSort.toLowerCase().includes(searchValue.toLowerCase())
|
|
).length === 0
|
|
"
|
|
:description="`${searchValue} 产品不存在`"
|
|
/>
|
|
<template v-if="pagination.total > 0">
|
|
<el-row :gutter="16">
|
|
<el-col
|
|
class="mb-4 w-[100%]"
|
|
v-for="(device, index) in deviceList
|
|
.slice(
|
|
pagination.pageSize * (pagination.current - 1),
|
|
pagination.pageSize * pagination.current
|
|
)
|
|
.filter(v =>
|
|
v.deviceSort.toLowerCase().includes(searchValue.toLowerCase())
|
|
)"
|
|
:key="index"
|
|
:xs="6"
|
|
:sm="6"
|
|
:md="6"
|
|
:lg="6"
|
|
:xl="4"
|
|
>
|
|
<ServerCard :device="device" />
|
|
</el-col>
|
|
</el-row>
|
|
<el-pagination
|
|
v-model:currentPage="pagination.current"
|
|
class="float-right"
|
|
:page-size="pagination.pageSize"
|
|
:total="pagination.total"
|
|
:page-sizes="[12, 24, 36]"
|
|
:background="false"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
@size-change="onPageSizeChange"
|
|
@current-change="onCurrentChange"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|