报警列表卡片，模式页面布局修改，估计播放，优化体验

src/views/controlCenter/delivery/index.vue

@@ -15,10 +15,11 @@
             <el-card>
               <!-- =========搜索按钮操作======= -->
               <div class="btn_search">
-                <el-button type="primary" plain>导出</el-button>
+                <el-button type="primary"  plain icon="Download"
+                  @click="handleExport">导出</el-button>
                 <div style="position: absolute; right:30px; top:20px">
-                  <el-input v-model="queryParams.deviceMac" placeholder="MAC/IMEI" clearable
-                    style="width: 200px; margin-right: 20px;" />
+                  <el-input v-model="queryParams.content" placeholder="MAC/IMEI" clearable
+                    style="width: 200px; margin-right: 20px;"  @keyup.enter="handleQuery" @input="handleInput" />
                   <el-button type="primary" plain @click="toggleFilter">高级筛选</el-button>
                 </div>
               </div>
@@ -63,7 +64,7 @@
               <el-table-column label="设备名称" align="center" prop="deviceName" />
               <el-table-column label="设备型号" align="center" prop="deviceType" />
               <el-table-column label="操作模块" align="center" prop="deviceAction" />
-              <el-table-column label="操作内容" align="center" prop="content" />
+              <el-table-column label="操作内容" align="center" prop="content" show-overflow-tooltip />
               <el-table-column label="操作时间" align="center" prop="createTime" />
             </el-table>
             <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@@ -96,7 +97,7 @@ const queryFormRef = ref<ElFormInstance>();
 const activeNames = ref([]);
 const deviceTypeOptions = ref([]); //设备类型
 const enabledDeptOptions = ref();
-
+const debounceTimer = ref(null)   // 用于防抖的定时器
 const initData: PageData<'', deviceQuery> = {
   queryParams: {
     pageNum: 1,
@@ -107,7 +108,8 @@ const initData: PageData<'', deviceQuery> = {
     groupId: '',
     deviceType: '',
     startTime: '',
-    endTime: ''
+    endTime: '',
+    content:""
   },
   rules: undefined,
   form: ''
@@ -166,7 +168,15 @@ const handleNodeClick = (data: any) => {
   queryParams.value.groupId = data.id;
   handleQuery();
 };
-
+const handleInput = () => {
+  if (debounceTimer.value) {
+    clearTimeout(debounceTimer.value)
+  }
+  // 300ms后执行查询（避免输入过程中频繁调用接口）
+  debounceTimer.value = setTimeout(() => {
+    handleQuery()  // 调用查询接口的方法
+  }, 300)
+};
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
@@ -211,23 +221,34 @@ const getList = async () => {
 /** 查询部结构 */
 const getDeptTree = async () => {
   const res = await api.devicegroupList('');
-   const allDeviceOption = {
+  const allDeviceOption = {
     id: '',
     groupName: '全部设备',
-    disabled: false, 
-    children: [] 
+    disabled: false,
+    children: []
 
   };
   deptOptions.value = [allDeviceOption, ...res.data]
   enabledDeptOptions.value = filterDisabledDept(res.data);
 };
-
+/** 导出按钮操作 */
+const handleExport = () => {
+  proxy?.download(
+    '/api/device/export',
+    {
+      ...queryParams.value
+    },
+    `指令下发记录${new Date().getTime()}.xlsx`,
+    'get'
+  );
+};
 
 </script>
 <style lang="scss" scoped>
 :deep .el-collapse-item__header {
   display: none;
 }
+
 :deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
   color: rgba(2, 124, 251, 1);
   background: transparent;