init

src/components/DeviceList.vue

@@ -0,0 +1,236 @@
+<template>
+  <div class="device-list">
+    <el-card>
+      <template #header>
+        <div class="card-header">
+          <span>设备管理</span>
+          <el-button type="primary" @click="addDevice">添加设备</el-button>
+        </div>
+      </template>
+      
+      <!-- 加载状态 -->
+      <div v-if="loading" class="loading">
+        <el-skeleton animated />
+      </div>
+      
+      <!-- 错误状态 -->
+      <div v-else-if="error" class="error">
+        <el-alert
+          title="获取设备数据失败"
+          :description="error"
+          type="error"
+          show-icon
+          closable
+          @close="error = null"
+        />
+        <el-button type="primary" @click="loadDevices" class="retry-btn">重新加载</el-button>
+      </div>
+      
+      <!-- 设备列表 -->
+      <el-table v-else :data="devices" style="width: 100%">
+        <el-table-column prop="id" label="设备ID" width="180" />
+        <el-table-column prop="name" label="设备名称" width="180" />
+        <el-table-column prop="type" label="设备类型" />
+        <el-table-column prop="status" label="状态">
+          <template #default="scope">
+            <el-tag :type="scope.row.status === 'online' ? 'success' : 'danger'">
+              {{ scope.row.status === 'online' ? '在线' : '离线' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="lastUpdate" label="最后更新" />
+        <el-table-column label="操作">
+          <template #default="scope">
+            <el-button size="small" @click="editDevice(scope.row)">编辑</el-button>
+            <el-button size="small" type="danger" @click="deleteDevice(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <!-- 添加/编辑设备对话框 -->
+    <el-dialog v-model="dialogVisible" :title="dialogTitle">
+      <el-form :model="currentDevice" label-width="120px">
+        <el-form-item label="设备名称">
+          <el-input v-model="currentDevice.name" />
+        </el-form-item>
+        <el-form-item label="设备类型">
+          <el-select v-model="currentDevice.type" placeholder="请选择设备类型">
+            <el-option label="传感器" value="sensor" />
+            <el-option label="控制器" value="controller" />
+            <el-option label="摄像头" value="camera" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备状态">
+          <el-select v-model="currentDevice.status" placeholder="请选择设备状态">
+            <el-option label="在线" value="online" />
+            <el-option label="离线" value="offline" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="saveDevice" :loading="saving">保存</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import deviceService from '../services/deviceService.js';
+
+export default {
+  name: 'DeviceList',
+  data() {
+    return {
+      devices: [],
+      loading: false,
+      error: null,
+      saving: false,
+      dialogVisible: false,
+      dialogTitle: '',
+      currentDevice: {
+        id: '',
+        name: '',
+        type: '',
+        status: 'online'
+      },
+      isEdit: false
+    };
+  },
+  async mounted() {
+    await this.loadDevices();
+  },
+  methods: {
+    // 加载设备列表
+    async loadDevices() {
+      this.loading = true;
+      this.error = null;
+      
+      try {
+        const data = await deviceService.getDevices();
+        this.devices = data.map(device => ({
+          ...device,
+          // 格式化数据显示
+          type: this.formatDeviceType(device.type),
+          lastUpdate: device.lastUpdate || '-'
+        }));
+      } catch (err) {
+        this.error = err.message || '未知错误';
+        console.error('加载设备列表失败:', err);
+      } finally {
+        this.loading = false;
+      }
+    },
+    
+    // 格式化设备类型显示
+    formatDeviceType(type) {
+      const typeMap = {
+        'sensor': '传感器',
+        'controller': '控制器',
+        'camera': '摄像头'
+      };
+      return typeMap[type] || type;
+    },
+    
+    addDevice() {
+      this.dialogTitle = '添加设备';
+      this.currentDevice = {
+        id: '',
+        name: '',
+        type: '',
+        status: 'online'
+      };
+      this.isEdit = false;
+      this.dialogVisible = true;
+    },
+    
+    editDevice(device) {
+      this.dialogTitle = '编辑设备';
+      // 注意：这里需要将显示值转换回API值
+      const typeMap = {
+        '传感器': 'sensor',
+        '控制器': 'controller',
+        '摄像头': 'camera'
+      };
+      
+      this.currentDevice = { 
+        ...device,
+        type: typeMap[device.type] || device.type
+      };
+      this.isEdit = true;
+      this.dialogVisible = true;
+    },
+    
+    async deleteDevice(device) {
+      try {
+        await this.$confirm('确认删除该设备吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        });
+        
+        await deviceService.deleteDevice(device.id);
+        this.$message.success('删除成功');
+        // 重新加载设备列表
+        await this.loadDevices();
+      } catch (err) {
+        if (err !== 'cancel') {
+          this.$message.error('删除失败: ' + (err.message || '未知错误'));
+        }
+      }
+    },
+    
+    async saveDevice() {
+      this.saving = true;
+      
+      try {
+        if (this.isEdit) {
+          // 编辑设备
+          await deviceService.updateDevice(this.currentDevice.id, this.currentDevice);
+          this.$message.success('设备更新成功');
+        } else {
+          // 添加新设备
+          await deviceService.createDevice(this.currentDevice);
+          this.$message.success('设备添加成功');
+        }
+        
+        this.dialogVisible = false;
+        // 重新加载设备列表
+        await this.loadDevices();
+      } catch (err) {
+        this.$message.error('保存失败: ' + (err.message || '未知错误'));
+      } finally {
+        this.saving = false;
+      }
+    }
+  }
+};
+</script>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dialog-footer {
+  text-align: right;
+}
+
+.loading {
+  padding: 20px 0;
+}
+
+.error {
+  padding: 20px 0;
+  text-align: center;
+}
+
+.retry-btn {
+  margin-top: 15px;
+}
+</style>

src/components/Home.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="home">
+    <el-card class="welcome-card">
+      <template #header>
+        <div class="card-header">
+          <span>欢迎使用猪场管理系统</span>
+        </div>
+      </template>
+      <div class="content">
+        <p>这是一个用于管理猪场设备和监控猪场状态的系统。</p>
+        <p>通过本系统，您可以：</p>
+        <ul>
+          <li>查看所有设备状态</li>
+          <li>添加和管理新设备</li>
+          <li>监控猪场环境参数</li>
+          <li>接收异常报警信息</li>
+        </ul>
+      </div>
+    </el-card>
+
+    <div class="stats">
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-card class="stat-card">
+            <div class="stat-item">
+              <div class="stat-value">24</div>
+              <div class="stat-label">设备总数</div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card class="stat-card">
+            <div class="stat-item">
+              <div class="stat-value">2</div>
+              <div class="stat-label">异常设备</div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card class="stat-card">
+            <div class="stat-item">
+              <div class="stat-value">16</div>
+              <div class="stat-label">在线设备</div>
+            </div>
+          </el-card>
+        </el-col>
+        <el-col :span="6">
+          <el-card class="stat-card">
+            <div class="stat-item">
+              <div class="stat-value">8</div>
+              <div class="stat-label">离线设备</div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Home'
+};
+</script>
+
+<style scoped>
+.welcome-card {
+  margin-bottom: 2rem;
+}
+
+.card-header {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.content p {
+  margin: 1rem 0;
+}
+
+.content ul {
+  margin-left: 2rem;
+}
+
+.stat-card {
+  text-align: center;
+}
+
+.stat-item {
+  padding: 1rem 0;
+}
+
+.stat-value {
+  font-size: 2rem;
+  font-weight: bold;
+  color: #409EFF;
+}
+
+.stat-label {
+  font-size: 0.9rem;
+  color: #909399;
+}
+</style>