feat: 设备列表模块开发
JINGYJ
1 year ago
parent
b4245edebf
commit
ba7e9a24ae
@ -0,0 +1,14 @@
|
||||
import { http } from "@/utils/http";
|
||||
|
||||
type Result = {
|
||||
success: boolean;
|
||||
data?: {
|
||||
/** 列表数据 */
|
||||
list: Array<any>;
|
||||
};
|
||||
};
|
||||
|
||||
/** 卡片列表 */
|
||||
export const getCardList = (data?: object) => {
|
||||
return http.request<Result>("post", "/getCardList", { data });
|
||||
};
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
@ -0,0 +1,4 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="16" cy="16" r="16" fill="#D6E5FF"/>
|
||||
<path d="M21.002 7.35938H10.0897C9.36709 7.35912 8.6739 7.64553 8.16223 8.15577C7.65056 8.666 7.36219 9.35838 7.36041 10.081V21.9168C7.36194 22.6394 7.65006 23.3319 8.16155 23.8423C8.67305 24.3527 9.36613 24.6394 10.0887 24.6394H21.003C21.7256 24.6394 22.4187 24.3527 22.9302 23.8423C23.4416 23.3319 23.7298 22.6394 23.7313 21.9168V10.08C23.7293 9.35758 23.4408 8.66545 22.9291 8.15543C22.4175 7.6454 21.7244 7.35912 21.002 7.35938ZM11.9838 21.7834C11.9838 21.9039 11.936 22.0195 11.8508 22.1048C11.7657 22.1901 11.6502 22.2382 11.5297 22.2384H9.92361C9.80293 22.2384 9.68719 22.1905 9.60185 22.1051C9.51651 22.0198 9.46857 21.9041 9.46857 21.7834V20.1831C9.46857 19.9315 9.67209 19.728 9.92361 19.728H11.5268C11.7774 19.728 11.9819 19.9315 11.9819 20.1831V21.7834H11.9838ZM16.7454 21.7834C16.7454 21.9039 16.6976 22.0195 16.6124 22.1048C16.5273 22.1901 16.4118 22.2382 16.2913 22.2384H14.6852C14.5645 22.2384 14.4488 22.1905 14.3635 22.1051C14.2781 22.0198 14.2302 21.9041 14.2302 21.7834V20.1831C14.2302 20.1233 14.2419 20.0641 14.2648 20.0089C14.2877 19.9537 14.3212 19.9035 14.3635 19.8613C14.4057 19.819 14.4559 19.7855 14.5111 19.7627C14.5663 19.7398 14.6255 19.728 14.6852 19.728H16.2884C16.5399 19.728 16.7435 19.9315 16.7435 20.1831V21.7834H16.7454ZM21.507 21.7834C21.507 21.9041 21.459 22.0198 21.3737 22.1051C21.2884 22.1905 21.1726 22.2384 21.0519 22.2384H19.4468C19.3261 22.2384 19.2104 22.1905 19.1251 22.1051C19.0397 22.0198 18.9918 21.9041 18.9918 21.7834V20.1831C18.9918 20.1233 19.0035 20.0641 19.0264 20.0089C19.0493 19.9537 19.0828 19.9035 19.1251 19.8613C19.1673 19.819 19.2175 19.7855 19.2727 19.7627C19.3279 19.7398 19.3871 19.728 19.4468 19.728H21.05C21.3006 19.728 21.5041 19.9315 21.5041 20.1831V21.7834H21.5051H21.507ZM21.507 16.4458C21.5055 16.5147 21.4904 16.5826 21.4626 16.6457C21.4348 16.7088 21.3948 16.7658 21.345 16.8134C21.2952 16.861 21.2364 16.8984 21.1721 16.9232C21.1078 16.9481 21.0393 16.9601 20.9703 16.9584H10.0033C9.86441 16.961 9.73015 16.9085 9.62979 16.8125C9.52944 16.7165 9.47114 16.5846 9.46761 16.4458V11.1418C9.47139 11.0031 9.52979 10.8715 9.63012 10.7757C9.73045 10.6798 9.86457 10.6275 10.0033 10.6301H20.9694C21.1082 10.627 21.2426 10.6792 21.3431 10.7751C21.4435 10.871 21.5018 11.0029 21.5051 11.1418V16.4467L21.507 16.4458Z" fill="#154DDD"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@ -0,0 +1,7 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="16" cy="16" r="16" fill="#D6E5FF"/>
|
||||
<path d="M16 20C19.3137 20 22 17.3137 22 14C22 10.6863 19.3137 8 16 8C12.6863 8 10 10.6863 10 14C10 17.3137 12.6863 20 16 20Z" fill="#154DDD" stroke="#154DDD" stroke-width="2" stroke-linejoin="round"/>
|
||||
<path d="M16 16.3977C17.3255 16.3977 18.4 15.3231 18.4 13.9977C18.4 12.6722 17.3255 11.5977 16 11.5977C14.6745 11.5977 13.6 12.6722 13.6 13.9977C13.6 15.3231 14.6745 16.3977 16 16.3977Z" fill="white" stroke="white" stroke-width="2" stroke-linejoin="round"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1474 20L12.8 24H19.2L17.8415 20H14.1474Z" stroke="#154DDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M11.2 24H20.8" stroke="#154DDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 896 B |
@ -0,0 +1,7 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="16" cy="16" r="16" fill="#D6E5FF"/>
|
||||
<path d="M8.79999 16.7969V23.1969" stroke="#154DDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.79999 19.5992H11.6L13.2 17.1992" stroke="#154DDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9.2 14.3984L19.7894 21.458C19.918 21.5438 20.0845 21.5477 20.217 21.4682L24 19.1984" stroke="#154DDD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9.2312 11.4867C9.01314 11.3413 8.99146 11.029 9.18734 10.8549L12.1711 8.2026C12.3062 8.08256 12.5049 8.06796 12.6561 8.16698L23.4818 15.2597C23.7248 15.4189 23.7224 15.7758 23.4774 15.9317L19.8198 18.2593C19.6862 18.3443 19.515 18.3425 19.3832 18.2547L9.2312 11.4867Z" fill="#154DDD" stroke="#154DDD" stroke-width="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 905 B |
@ -0,0 +1,20 @@
|
||||
export default {
|
||||
path: "/device",
|
||||
meta: {
|
||||
title: "设备列表",
|
||||
icon: "homeFilled",
|
||||
// showLink: false,
|
||||
rank: 2
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/device",
|
||||
name: "DeviceList",
|
||||
component: () => import("@/views/device/index.vue"),
|
||||
meta: {
|
||||
title: "设备列表",
|
||||
roles: ["admin", "common"]
|
||||
}
|
||||
}
|
||||
]
|
||||
} as RouteConfigsTable;
|
||||
@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: "TreeCard"
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="treeCard">TreeCard</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.treeCard {
|
||||
width: 240px;
|
||||
height: 808px;
|
||||
background-color: cadetblue;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,162 @@
|
||||
<script setup lang="ts">
|
||||
import TreeCard from "./components/TreeCard.vue";
|
||||
import DeviceCard from "./components/DeviceCard.vue";
|
||||
import { getCardList } from "@/api/list";
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
defineOptions({
|
||||
name: "DeviceList"
|
||||
});
|
||||
|
||||
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: 9, total: 0 });
|
||||
|
||||
const deviceList = ref([]);
|
||||
|
||||
const searchValue = ref("");
|
||||
|
||||
const formData = reactive({
|
||||
deviceSort: "",
|
||||
deviceState: "",
|
||||
isEnabled: ""
|
||||
});
|
||||
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 flex justify-start p-4">
|
||||
<TreeCard />
|
||||
<div
|
||||
class="ml-5 flex-1"
|
||||
v-loading="dataLoading"
|
||||
:element-loading-svg="svg"
|
||||
element-loading-svg-view-box="-10, -10, 50, 50"
|
||||
>
|
||||
<el-form :inline="true" :model="formData" class="demo-form-inline">
|
||||
<el-form-item label="设备分类">
|
||||
<el-select
|
||||
v-model="formData.deviceState"
|
||||
placeholder="设备分类"
|
||||
clearable
|
||||
>
|
||||
<el-option label="分类1" value="1" />
|
||||
<el-option label="分类2" value="2" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态">
|
||||
<el-select
|
||||
v-model="formData.deviceState"
|
||||
placeholder="设备状态"
|
||||
clearable
|
||||
>
|
||||
<el-option label="在线" value="1" />
|
||||
<el-option label="故障" value="2" />
|
||||
<el-option label="离线" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否启用">
|
||||
<el-select
|
||||
v-model="formData.deviceState"
|
||||
placeholder="是否启用"
|
||||
clearable
|
||||
>
|
||||
<el-option label="已启用" value="1" />
|
||||
<el-option label="未启用" value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<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"
|
||||
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="8"
|
||||
:sm="8"
|
||||
:md="8"
|
||||
:lg="8"
|
||||
:xl="8"
|
||||
>
|
||||
<DeviceCard :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="[9, 18, 36]"
|
||||
:background="false"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="onPageSizeChange"
|
||||
@current-change="onCurrentChange"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue