Yaxin
/
5G-Loading-Bay-Web
31
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 表格组件初始化完成

Browse Source
main
donghao 2 months ago
parent caabce90ba
commit 5cb82722ad
8 changed files with 171 additions and 24 deletions
Show Stats Download Patch File Download Diff File

12
index.html
Unescape Escape View File

@ -1,13 +1,21 @@
<!--
* @Author: donghao donghao@supervision.ltd
* @Date: 2025-03-06 17:57:05
* @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2025-03-07 16:43:21
* @FilePath: \5G-Loading-Bay-Web\index.html
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title> <title>监控平台</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

4
src/App.vue
Unescape Escape View File

@ -4,14 +4,14 @@
<!-- 路由视图容器 --> <!-- 路由视图容器 -->
<router-view v-slot="{ Component, route }"> <router-view v-slot="{ Component, route }">
<!-- 智能缓存：仅缓存带有 meta.keepAlive 的路由 --> <!-- 智能缓存：仅缓存带有 meta.keepAlive 的路由 -->
<keep-alive :include="cachedRoutes"> <!-- <keep-alive :include="cachedRoutes"> -->
<component <component
:is="Component" :is="Component"
:key="route.fullPath" :key="route.fullPath"
class="router-view-container" class="router-view-container"
:class="{ 'has-header': showHeader }" :class="{ 'has-header': showHeader }"
/> />
</keep-alive> <!-- </keep-alive> -->
</router-view> </router-view>
<!-- 大屏适配容器（用于缩放内容） --> <!-- 大屏适配容器（用于缩放内容） -->

BIN
src/assets/common/顶部标题.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

3
src/router/index.ts
Unescape Escape View File

@ -2,7 +2,7 @@
* @Author: donghao donghao@supervision.ltd * @Author: donghao donghao@supervision.ltd
* @Date: 2025-03-06 13:53:22 * @Date: 2025-03-06 13:53:22
* @LastEditors: donghao donghao@supervision.ltd * @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2025-03-06 17:45:39 * @LastEditTime: 2025-03-10 09:59:29
* @FilePath: \vite-ai\data-dashboard\src\router\index.ts * @FilePath: \vite-ai\data-dashboard\src\router\index.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/ */
@ -21,6 +21,7 @@ const router = createRouter({
meta: { meta: {
keepAlive: false, keepAlive: false,
requiresAuth: false, requiresAuth: false,
isDashboard: false,
}, },
}, },
{ {

2
src/styles/common.scss
Unescape Escape View File

@ -1,3 +1,5 @@
@import url('./element-plus.scss');
// 标题背景 // 标题背景
.bg_title { .bg_title {
background-size: contain; background-size: contain;

74
src/styles/element-plus.scss
Unescape Escape View File

@ -0,0 +1,74 @@
/* 表格 */
.ds_table{
position: relative;
}
/* 分页栏 */
.pagination_wrap {
}
.fixed_pagination {
// width: calc(100% - 136px);
// background-color: white;
// z-index: 9;
position: relative;
display: flex;
align-items: center;
justify-content: flex-end;
right: 0;
bottom: 0;
padding: 20px 0 10px;
}
.noneFixed_pagination {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 20px 0;
}
.custom-select {
min-width: 150px;
max-width: 300px;
.el-select__wrapper {
background: rgba(74, 126, 191, 0.1); /* 下拉框背景色 */
border: 1px solid transparent; /* 边框 */
color: white; /* 文字颜色 */
height: 40px;
box-shadow: none;
&::placeholder {
color: rgba(255, 255, 255, 0.6); /* 占位符颜色 */
}
}
.el-select__arrow {
color: rgba(255, 255, 255, 0.6); /* 下拉箭头颜色 */
}
&:hover .el-select__inner {
border-color: transparent; /* 悬停边框颜色 */
}
}
.el-select__dropdown {
background: #002a5c; /* 下拉面板背景 */
.el-select__item {
color: white; /* 下拉选项文字颜色 */
&:hover {
background: rgba(74, 126, 191, 0.3); /* 选项悬停背景 */
}
}
}
/* table */
.el-table{
// background-color: transparent;
}
.table_action_box {
.el-button {
padding: 0;
}
}
.el-table--border .el-table__inner-wrapper::after,
.el-table--border::after,
.el-table--border::before,
.el-table__inner-wrapper::before {
background-color: transparent !important;
}

33
src/views/dashboard/DeviceStatus.scss
Unescape Escape View File

@ -0,0 +1,33 @@
.device-status-search-box {
display: flex;
align-items: center;
gap: 12px;
margin: 10px 0;
.query-btn {
background: linear-gradient( 180deg, #2589FF 0%, #46A9ED 100%);
border: 1px solid #42a5f5;
border-radius: 2px;
color: white;
padding: 8px 20px;
margin-left: 0;
}
.reset-btn {
background: transparent;
border-radius: 2px;
border: 1px solid #088BD6;
color: white;
box-shadow: none;
margin-left: 0;
}
}
.el-scrollbar__view{
height: 650px !important;
}

67
src/views/dashboard/DeviceStatus.vue
Unescape Escape View File

@ -2,16 +2,40 @@
* @Author: donghao donghao@supervision.ltd * @Author: donghao donghao@supervision.ltd
* @Date: 2025-03-06 15:15:47 * @Date: 2025-03-06 15:15:47
* @LastEditors: donghao donghao@supervision.ltd * @LastEditors: donghao donghao@supervision.ltd
* @LastEditTime: 2025-03-07 15:22:33 * @LastEditTime: 2025-03-07 17:35:35
* @FilePath: \vite-ai\data-dashboard\src\views\dashboard\DeviceStatus.vue * @FilePath: \vite-ai\data-dashboard\src\views\dashboard\DeviceStatus.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--> -->
<template> <template>
<div class="device-status-header">
<ContentHeader bgLayout="1855">
<template #title>
<div class="w-[200px] bg_title bg_title_6">
</div>
</template>
</ContentHeader>
</div>
<div class="device-status-search-box">
<el-select v-model="formData.name" placeholder="设备名称" class="custom-select">
<el-option label="设备A" value="deviceA"></el-option>
<el-option label="设备B" value="deviceB"></el-option>
</el-select>
<!-- <el-select v-model="deviceId" placeholder="设备ID" class="query-select">
<el-option label="ID-001" value="id001"></el-option>
<el-option label="ID-002" value="id002"></el-option>
</el-select> -->
<el-button type="primary" @click="handleQuery" class="query-btn">
<i class="el-icon-search"></i> 查询
</el-button>
<el-button @click="handleReset" class="reset-btn">
<i class="el-icon-refresh-right"></i> 重置
</el-button>
</div>
<div class="alarm_table" v-loading="dataLoading" :element-loading-svg="svg" <div class="alarm_table" v-loading="dataLoading" :element-loading-svg="svg"
element-loading-svg-view-box="-10, -10, 50, 50"> element-loading-svg-view-box="-10, -10, 50, 50">
<template v-if="pagination.total > 0"> <template v-if="pagination.total > 0">
<BaseTable class="ds_table" :total="pagination.total" :pageSize="pagination.pageSize" :dataSource="listData" <BaseTable class="ds_table" :total="pagination.total" :pageSize="pagination.pageSize" :dataSource="listData"
:isFixedPagination="false" :columns="columns" :page="pagination.currentPage" :isFixedPagination="true" :columns="columns" :page="pagination.currentPage"
@change="handleTableChange"> @change="handleTableChange">
<template v-slot:actionBar="{ row }"> <template v-slot:actionBar="{ row }">
<ul class="table_action_box"> <ul class="table_action_box">
@ -38,6 +62,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { BaseTable } from "@/components/CustomTable"; import { BaseTable } from "@/components/CustomTable";
import ContentHeader from '@/components/ContentHeader.vue';
defineOptions({ defineOptions({
name: "DeviceStatusIndex" name: "DeviceStatusIndex"
@ -142,8 +167,8 @@ const columns = [
}, },
// TODO 需要封装操作按钮 // TODO 需要封装操作按钮
{ {
type: "action", type: "action",
label: "操作" label: "操作"
} }
]; ];
@ -165,7 +190,7 @@ const listData = ref([]);
// const searchValue = ref(""); // const searchValue = ref("");
const formData = reactive({ const formData = reactive({
warning_name: "", name: "",
status: "" status: ""
}); });
@ -173,23 +198,12 @@ const dataLoading = ref(true);
const getList = async () => { const getList = async () => {
const { currentPage, pageSize } = pagination.value; const { currentPage, pageSize } = pagination.value;
const res = await fetch('/api/getDeviceStatusList', { const res = await fetch('/api/getDeviceStatusList', {
method: 'POST', method: 'POST',
body: JSON.stringify({ ...formData, page: currentPage, pageSize }) body: JSON.stringify({ ...formData, page: currentPage, pageSize })
}) })
const {data} = await res.json() const { data } = await res.json()
console.log(data,'getList_data') console.log(data, 'getList_data')
// if (data.code === 200) {
// userStore.login(data.data.token)
// router.push('/dashboard')
// }
// const { data } = await getWarnList({
// ...formData,
// page: currentPage,
// pageSize
// });
listData.value = data.list; listData.value = data.list;
console.log(data.list); console.log(data.list);
pagination.value = { pagination.value = {
@ -199,6 +213,18 @@ const getList = async () => {
dataLoading.value = false; dataLoading.value = false;
}; };
// 查询方法
const handleQuery = () => {
console.log('查询参数：', { deviceName: deviceName.value, deviceId: deviceId.value });
getList()
};
// 重置方法
const handleReset = () => {
formData.name = '';
// deviceId.value = '';
};
function handleTableChange(record) { function handleTableChange(record) {
console.log("handleTableChange_record", record); console.log("handleTableChange_record", record);
pagination.value = { pagination.value = {
@ -212,10 +238,13 @@ function handleTableChange(record) {
function openHistory(row) { function openHistory(row) {
console.log(row, "openHistory"); console.log(row, "openHistory");
currentRow.value = row; currentRow.value = row;
deleteModel.isShowDelete = true;
} }
onMounted(() => { onMounted(() => {
getList(); getList();
}); });
</script> </script>
<style lang="scss">
@import url('./DeviceStatus.scss');
</style>

Write Preview
Loading…
Cancel
Save