栏舍管理界面

src/components/PigPenInfoCard.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="pig-pen-info-card">
+    <div class="info-section">
+      <div class="title">猪栏: {{ pen.pen_number }}</div>
+      <div class="info-item">状态: <el-tag size="small" :type="statusType">{{ pen.status || '未知' }}</el-tag></div>
+      <div class="info-item">容量: {{ pen.capacity }}</div>
+      <div class="info-item">批次ID: {{ pen.pig_batch_id || '未分配' }}</div>
+    </div>
+    <div class="actions-section">
+      <el-button size="small" @click="emitEdit">编辑</el-button>
+      <el-button size="small" type="danger" @click="emitDelete">删除</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+
+export default {
+  name: 'PigPenInfoCard',
+  props: {
+    pen: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['edit', 'delete'],
+  setup(props, { emit }) {
+    const statusType = computed(() => {
+      switch (props.pen.status) {
+        case '使用中':
+          return 'success';
+        case '病猪栏':
+        case '维修中':
+          return 'danger';
+        case '清洗消毒':
+          return 'warning';
+        case '空闲':
+        default:
+          return 'info';
+      }
+    });
+
+    const emitEdit = () => {
+      emit('edit', props.pen);
+    };
+
+    const emitDelete = () => {
+      emit('delete', props.pen);
+    };
+
+    return {
+      statusType,
+      emitEdit,
+      emitDelete
+    };
+  }
+}
+</script>
+
+<style scoped>
+.pig-pen-info-card {
+  border: 1px solid #eee;
+  border-radius: 8px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 200px; /* 适当加宽以容纳更多信息 */
+  height: 240px;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: box-shadow 0.3s;
+}
+
+.pig-pen-info-card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.info-section {
+  display: flex;
+  flex-direction: column;
+  gap: 12px; /* 增加信息项间距 */
+}
+
+.info-section .title {
+  font-weight: bold;
+  font-size: 1.1em;
+  color: #303133;
+}
+
+.info-section .info-item {
+  font-size: 0.9em;
+  color: #606266;
+}
+
+.actions-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.actions-section .el-button {
+  width: 100%;
+  margin: 0;
+}
+</style>