init

src/App.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="app">
+    <header class="header">
+      <h1>猪场管理系统</h1>
+      <nav class="navigation">
+        <el-menu mode="horizontal" :router="true">
+          <el-menu-item index="/">首页</el-menu-item>
+          <el-menu-item index="/devices">设备管理</el-menu-item>
+        </el-menu>
+      </nav>
+    </header>
+    <main class="main-content">
+      <router-view />
+    </main>
+    <footer class="footer">
+      <p>© 2025 猪场管理系统. All rights reserved.</p>
+    </footer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+};
+</script>
+
+<style scoped>
+.header {
+  background-color: #409EFF;
+  color: white;
+  padding: 1rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,.1);
+}
+
+.header h1 {
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+.navigation {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.main-content {
+  max-width: 1200px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+  min-height: calc(100vh - 100px);
+}
+
+.footer {
+  text-align: center;
+  padding: 1rem;
+  background-color: #f5f5f5;
+  border-top: 1px solid #ebeef5;
+}
+</style>

src/assets/styles/main.css

@@ -0,0 +1,16 @@
+/* 全局样式 */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background-color: #f5f5f5;
+  color: #333;
+}
+
+#app {
+  min-height: 100vh;
+}

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>

src/config/api.js

@@ -0,0 +1,15 @@
+// API配置文件
+const API_CONFIG = {
+  // 后端服务基础URL
+  BASE_URL: 'http://localhost:8086',
+  
+  // API端点
+  ENDPOINTS: {
+    DEVICES: '/devices'
+  },
+  
+  // 请求超时时间（毫秒）
+  TIMEOUT: 10000
+};
+
+export default API_CONFIG;

src/main.js

@@ -0,0 +1,42 @@
+import { createApp } from 'vue';
+import { createRouter, createWebHistory } from 'vue-router';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+
+import App from './App.vue';
+import DeviceList from './components/DeviceList.vue';
+import Home from './components/Home.vue';
+
+// 导入全局样式
+import './assets/styles/main.css';
+
+// 引入新创建的服务和工具（示例）
+import ApiService from './services/apiService'; // 示例服务
+import * as Utils from './utils/helpers';      // 示例工具函数
+
+// 配置路由
+const routes = [
+  { path: '/', component: Home },
+  { path: '/devices', component: DeviceList }
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+});
+
+// 创建Vue应用实例
+const app = createApp(App);
+
+// 使用Element Plus组件库
+app.use(ElementPlus);
+
+// 使用路由
+app.use(router);
+
+// 初始化服务（示例）
+// app.config.globalProperties.$api = ApiService;
+// app.config.globalProperties.$utils = Utils;
+
+// 挂载应用
+app.mount('#app');

src/services/deviceService.js

@@ -0,0 +1,66 @@
+import http from '../utils/http.js';
+import API_CONFIG from '../config/api.js';
+
+class DeviceService {
+  /**
+   * 获取设备列表
+   * @returns {Promise<Array>} 设备列表
+   */
+  async getDevices() {
+    try {
+      const response = await http.get(API_CONFIG.ENDPOINTS.DEVICES);
+      return response.data || [];
+    } catch (error) {
+      console.error('获取设备列表失败:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 创建新设备
+   * @param {Object} device 设备信息
+   * @returns {Promise<Object>} 创建的设备信息
+   */
+  async createDevice(device) {
+    try {
+      const response = await http.post(API_CONFIG.ENDPOINTS.DEVICES, device);
+      return response.data;
+    } catch (error) {
+      console.error('创建设备失败:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 更新设备信息
+   * @param {string} deviceId 设备ID
+   * @param {Object} device 更新的设备信息
+   * @returns {Promise<Object>} 更新后的设备信息
+   */
+  async updateDevice(deviceId, device) {
+    try {
+      const response = await http.put(`${API_CONFIG.ENDPOINTS.DEVICES}/${deviceId}`, device);
+      return response.data;
+    } catch (error) {
+      console.error('更新设备失败:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * 删除设备
+   * @param {string} deviceId 设备ID
+   * @returns {Promise<void>}
+   */
+  async deleteDevice(deviceId) {
+    try {
+      await http.delete(`${API_CONFIG.ENDPOINTS.DEVICES}/${deviceId}`);
+    } catch (error) {
+      console.error('删除设备失败:', error);
+      throw error;
+    }
+  }
+}
+
+// 导出设备服务实例
+export default new DeviceService();

src/utils/http.js

@@ -0,0 +1,50 @@
+import axios from 'axios';
+import API_CONFIG from '../config/api.js';
+
+// 创建axios实例
+const http = axios.create({
+  baseURL: API_CONFIG.BASE_URL,
+  timeout: API_CONFIG.TIMEOUT,
+  headers: {
+    'Content-Type': 'application/json'
+  }
+});
+
+// 请求拦截器
+http.interceptors.request.use(
+  config => {
+    // 可以在这里添加认证token等
+    // const token = localStorage.getItem('access_token');
+    // if (token) {
+    //   config.headers.Authorization = `Bearer ${token}`;
+    // }
+    return config;
+  },
+  error => {
+    return Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+http.interceptors.response.use(
+  response => {
+    // 可以在这里统一处理响应数据
+    return response.data;
+  },
+  error => {
+    // 统一错误处理
+    if (error.response) {
+      // 服务器返回错误状态码
+      console.error('API Error:', error.response.status, error.response.data);
+    } else if (error.request) {
+      // 请求发出但没有收到响应
+      console.error('Network Error:', error.message);
+    } else {
+      // 其他错误
+      console.error('Error:', error.message);
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default http;