From d12e737f6bc0131043b5febb0e5dc14b8f8f2ea4 Mon Sep 17 00:00:00 2001
From: lxd <1004405501@qq.com>
Date: Tue, 1 Jul 2025 15:09:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=AE=BE=E5=A4=87=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=95=8C=E9=9D=A2=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/devices/index.vue | 438 ++++++++++++++++++++++++++++--------
 1 file changed, 341 insertions(+), 97 deletions(-)

diff --git a/src/views/devices/index.vue b/src/views/devices/index.vue
index 15ab9dc90..0b0f36058 100644
--- a/src/views/devices/index.vue
+++ b/src/views/devices/index.vue
@@ -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>