分步式页面布局，首页页面设计实现初稿

zhandianxinxi/光谱数据监控/src/views/MaintenanceLogs.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="page-container">
+    <div class="page-header">
+      <div class="header-left">
+        <el-button icon="ArrowLeft" circle @click="$router.push('/')" style="margin-right: 15px"></el-button>
+        <h2>🔧 维修日志中心</h2>
+      </div>
+      <div>
+        <el-button type="success" icon="Download">导出Excel</el-button>
+      </div>
+    </div>
+
+    <el-card shadow="never">
+      <div class="filter-bar">
+        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
+        <el-input v-model="searchKeyword" placeholder="搜索设备名或工程师" style="width: 250px" prefix-icon="Search" />
+        <el-button type="primary">查询</el-button>
+      </div>
+
+      <el-table :data="logs" border stripe style="width: 100%; margin-top: 20px">
+        <el-table-column prop="timestamp" label="记录时间" width="180" />
+        <el-table-column prop="device_name" label="相关设备" width="200">
+          <template #default="{ row }">
+            <el-tag>{{ row.device_name }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="engineer" label="工程师" width="120" />
+        <el-table-column prop="content" label="维修/操作内容" />
+        <el-table-column label="操作" width="100" align="center">
+          <template #default>
+            <el-button type="danger" link size="small">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="pagination-wrapper">
+        <el-pagination background layout="prev, pager, next" :total="100" />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ArrowLeft, Search, Download } from '@element-plus/icons-vue'
+
+const dateRange = ref([])
+const searchKeyword = ref('')
+const logs = ref([
+  { timestamp: '2024-01-08 14:00', device_name: '106_tower_spec', engineer: '张工', content: '更换了光纤接口，清理了灰尘。' },
+  { timestamp: '2024-01-07 09:30', device_name: '82_sensor_B', engineer: '李工', content: '设备离线排查，重启后恢复。' }
+])
+</script>
+
+<style scoped>
+.page-container { padding: 20px; background: #f5f7fa; min-height: 100vh; }
+.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; background: #fff; padding: 15px 20px; border-radius: 8px; }
+.header-left { display: flex; align-items: center; }
+.filter-bar { display: flex; gap: 15px; }
+.pagination-wrapper { margin-top: 20px; display: flex; justify-content: flex-end; }
+</style>