修改设备管理界面的样式
This commit is contained in:
parent
001adedb6e
commit
d12e737f6b
@ -1,94 +1,132 @@
|
||||
<template>
|
||||
<!-- 搜索工作栏 -->
|
||||
<ContentWrap>
|
||||
<el-form
|
||||
class="-mb-15px"
|
||||
:model="queryParams"
|
||||
ref="queryFormRef"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="设备名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.devicename"
|
||||
placeholder="请输入设备名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-240px"
|
||||
<div class="device-container">
|
||||
<!-- 页面标题 -->
|
||||
<div class="page-header">
|
||||
<h2 class="page-title">
|
||||
<Icon icon="ep:monitor" class="mr-2" />
|
||||
设备管理
|
||||
</h2>
|
||||
<p class="page-description">查看和管理所有设备信息</p>
|
||||
</div>
|
||||
|
||||
<!-- 搜索工作栏 -->
|
||||
<ContentWrap>
|
||||
<el-form
|
||||
ref="queryFormRef"
|
||||
:model="queryParams"
|
||||
:inline="true"
|
||||
label-width="80px"
|
||||
class="search-form"
|
||||
>
|
||||
<el-form-item label="设备名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.devicename"
|
||||
placeholder="请输入设备名称"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
class="!w-200px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.devicestatus"
|
||||
placeholder="请选择设备状态"
|
||||
clearable
|
||||
class="!w-200px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 设备类型 -->
|
||||
<el-form-item label="设备类型" prop="type">
|
||||
<el-select
|
||||
v-model="queryParams.devicetype"
|
||||
placeholder="请选择设备类型"
|
||||
clearable
|
||||
class="!w-200px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getStrDictOptions(DICT_TYPE.IOT_DEVICE_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">
|
||||
<Icon icon="ep:search" class="mr-1" />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="resetQuery">
|
||||
<Icon icon="ep:refresh" class="mr-1" />
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
type="success"
|
||||
@click="openForm('create')"
|
||||
class="add-device-btn"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-1" />
|
||||
新增设备
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 设备卡片展示区域 -->
|
||||
<ContentWrap>
|
||||
<div class="table-header">
|
||||
<div class="table-title">
|
||||
<Icon icon="ep:grid" class="mr-2" />
|
||||
设备列表
|
||||
</div>
|
||||
<div class="table-actions">
|
||||
<el-button type="primary" @click="refreshList">
|
||||
<Icon icon="ep:refresh" class="mr-1" />
|
||||
刷新
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="device-cards-container">
|
||||
<device-card
|
||||
v-for="device in deviceList"
|
||||
:key="device.id"
|
||||
:device-info="device"
|
||||
@action="handleDeviceAction"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备状态" prop="status">
|
||||
<el-select
|
||||
v-model="queryParams.devicestatus"
|
||||
placeholder="请选择设备状态"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_DEVICE_STATUS)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 设备类型 -->
|
||||
<el-form-item label="设备类型" prop="type">
|
||||
<el-select
|
||||
v-model="queryParams.devicetype"
|
||||
placeholder="请选择设备类型"
|
||||
clearable
|
||||
class="!w-240px"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in getStrDictOptions(DICT_TYPE.IOT_DEVICE_TYPE)"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
||||
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
@click="openForm('create')"
|
||||
>
|
||||
<Icon icon="ep:plus" class="mr-5px" /> 新增
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 设备卡片展示区域 -->
|
||||
<ContentWrap>
|
||||
<div class="device-cards-container">
|
||||
<device-card
|
||||
v-for="device in deviceList"
|
||||
:key="device.id"
|
||||
:device-info="device"
|
||||
@action="handleDeviceAction"
|
||||
</div>
|
||||
<div v-if="deviceList.length === 0" class="empty-container">
|
||||
<el-empty description="暂无设备" />
|
||||
</div>
|
||||
<!-- 分页组件 单独设置了 有5个选项的页码 -->
|
||||
<el-pagination
|
||||
v-show="total > 0"
|
||||
v-model:current-page="queryParams.pageNo"
|
||||
v-model:page-size="queryParams.pageSize"
|
||||
:background="true"
|
||||
:page-sizes="[5, 10, 20, 30, 50, 100]"
|
||||
:pager-count="pagerCount"
|
||||
:total="total"
|
||||
class="float-right mb-15px mt-15px"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="deviceList.length === 0" style="text-align:center; width:100%; padding:40px 0; color:#999;">
|
||||
<el-empty description="暂无设备" />
|
||||
</div>
|
||||
<!-- 分页组件 -->
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-model:page="queryParams.pageNo"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery"
|
||||
/>
|
||||
</ContentWrap>
|
||||
</ContentWrap>
|
||||
|
||||
<!-- 设备表单 -->
|
||||
<DeviceForm ref="deviceFormRef" @success="handleQuery" />
|
||||
<DetailsForm ref="detailsFormRef" @success="handleQuery" />
|
||||
<!-- 心电数据组件 -->
|
||||
<ECG_datas ref="ecgDataRef" />
|
||||
<!-- 设备表单 -->
|
||||
<DeviceForm ref="deviceFormRef" @success="handleQuery" />
|
||||
<DetailsForm ref="detailsFormRef" @success="handleQuery" />
|
||||
<!-- 心电数据组件 -->
|
||||
<ECG_datas ref="ecgDataRef" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -99,7 +137,7 @@ import { DICT_TYPE } from '@/utils/dict'
|
||||
import DeviceCard from '../devices/devices_cards.vue'
|
||||
import DeviceForm from './DevFrom.vue'
|
||||
import DetailsForm from './DetailsForm.vue'
|
||||
import { DeviceApi } from '@/api/device'
|
||||
import { DeviceApi, DeviceVO } from '@/api/device'
|
||||
import { DeviceuserApi } from '@/api/deviceuser'
|
||||
import { getUserProfile } from '@/api/system/user/profile'
|
||||
import ECG_datas from './Device_Data_Components/ECG_datas.vue'
|
||||
@ -119,7 +157,7 @@ const queryParams = reactive<QueryParams>({
|
||||
devicestatus: undefined,
|
||||
devicetype: '',
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
pageSize: 5,
|
||||
orgid: 0
|
||||
})
|
||||
const message = useMessage() // 消息弹窗
|
||||
@ -128,7 +166,7 @@ const total = ref(0)
|
||||
// 用户信息
|
||||
const userProfile = ref()
|
||||
// 设备列表数据
|
||||
const deviceList = ref([])
|
||||
const deviceList = ref<DeviceVO[]>([])
|
||||
// 查询表单引用
|
||||
const queryFormRef = ref()
|
||||
// 设备表单引用
|
||||
@ -206,6 +244,27 @@ const handleDeviceAction = async (action: any) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新列表
|
||||
const refreshList = () => {
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
// 分页相关
|
||||
const pagerCount = document.body.clientWidth < 992 ? 5 : 7
|
||||
|
||||
// 处理分页大小变化
|
||||
const handleSizeChange = (val: number) => {
|
||||
queryParams.pageSize = val
|
||||
queryParams.pageNo = 1
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
// 处理当前页变化
|
||||
const handleCurrentChange = (val: number) => {
|
||||
queryParams.pageNo = val
|
||||
handleQuery()
|
||||
}
|
||||
|
||||
// 页面加载时获取数据
|
||||
onMounted(async () => {
|
||||
// 首先获取用户信息
|
||||
@ -214,17 +273,202 @@ onMounted(async () => {
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.device-cards-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
<style lang="scss" scoped>
|
||||
.device-container {
|
||||
padding: 20px;
|
||||
background-color: #f5f7fa;
|
||||
min-height: 100%;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
padding: 16px 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
.page-title {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
margin: 0;
|
||||
opacity: 0.9;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.add-device-btn {
|
||||
background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
|
||||
border: none;
|
||||
box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
|
||||
transition: all 0.3s ease;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(103, 194, 58, 0.4);
|
||||
background: linear-gradient(135deg, #85ce61 0%, #95d475 100%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
|
||||
.table-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.table-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.device-cards-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
padding: 20px 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.empty-container {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 60px 0;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 768px) {
|
||||
.device-container {
|
||||
padding: 10px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding: 12px 16px;
|
||||
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-header {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: flex-start;
|
||||
|
||||
.table-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.search-form {
|
||||
.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.device-cards-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 16px;
|
||||
padding: 16px 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 动画效果
|
||||
.device-cards-container {
|
||||
:deep(.device-card) {
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮样式优化
|
||||
:deep(.el-button) {
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
// 分页样式优化
|
||||
:deep(.el-pagination) {
|
||||
margin-top: 20px;
|
||||
justify-content: center;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
// ContentWrap 样式优化，减少不必要的边距
|
||||
:deep(.content-wrap) {
|
||||
margin-bottom: 15px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// 表单样式优化
|
||||
:deep(.el-form-item__label) {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
:deep(.el-select) {
|
||||
.el-input__wrapper {
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user