新增农机管理列表

src/views/base/machines/index.vue

@@ -43,13 +43,25 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <el-form-item label="所属农场ID" prop="farmId">
-        <el-input
-          v-model="queryParams.farmId"
-          placeholder="请输入所属农场ID"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+      <el-form-item label="所属农场" prop="farmId">
+        <el-select v-model="queryParams.farmId" placeholder="请选择所属农场" clearable>
+          <el-option
+            v-for="farm in farmOptions"
+            :key="farm.value"
+            :label="farm.label"
+            :value="farm.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="所属地块" prop="fieldId">
+        <el-select v-model="queryParams.fieldId" placeholder="请选择所属地块" clearable>
+          <el-option
+            v-for="field in fieldOptions"
+            :key="field.value"
+            :label="field.label"
+            :value="field.value"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item label="负责人" prop="managerId">
         <el-input
@@ -60,19 +72,25 @@
         />
       </el-form-item>
       <el-form-item label="启用时间" prop="purchaseDate">
-        <el-date-picker clearable
-          v-model="queryParams.purchaseDate"
-          type="date"
+        <el-date-picker
+          v-model="daterangePurchaseDate"
+          style="width: 240px"
           value-format="yyyy-MM-dd"
-          placeholder="请选择启用时间">
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="生产日期" prop="manufactureDate">
-        <el-date-picker clearable
-          v-model="queryParams.manufactureDate"
-          type="date"
+        <el-date-picker
+          v-model="daterangeManufactureDate"
+          style="width: 240px"
           value-format="yyyy-MM-dd"
-          placeholder="请选择生产日期">
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
         </el-date-picker>
       </el-form-item>
       <el-form-item label="当前状态" prop="onlineStatus">
@@ -85,22 +103,8 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="当前任务" prop="currentTask">
-        <el-input
-          v-model="queryParams.currentTask"
-          placeholder="请输入当前任务"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="当前地块" prop="currentField">
-        <el-input
-          v-model="queryParams.currentField"
-          placeholder="请输入当前地块"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
+
+
       <el-form-item label="保养状态" prop="maintenanceStatus">
         <el-select v-model="queryParams.maintenanceStatus" placeholder="请选择保养状态" clearable>
           <el-option
@@ -175,7 +179,6 @@
 
     <el-table v-loading="loading" :data="machinesList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="农机ID" align="center" prop="id" />
       <el-table-column label="农机编号" align="center" prop="machineCode" />
       <el-table-column label="农机名称" align="center" prop="machineName" />
       <el-table-column label="农机类型" align="center" prop="machineType">
@@ -183,40 +186,50 @@
           <dict-tag :options="dict.type.agricultural_machine_type" :value="scope.row.machineType"/>
         </template>
       </el-table-column>
+      <el-table-column label="所属农场" align="center" prop="farmId" />
+      <el-table-column label="所属地块" align="center" prop="fieldArea" />
+      <el-table-column label="负责人" align="center" prop="managerId" />
       <el-table-column label="厂家" align="center" prop="manufacturer" />
       <el-table-column label="型号" align="center" prop="model" />
-      <el-table-column label="所属农场ID" align="center" prop="farmId" />
-      <el-table-column label="所属地块区域" align="center" prop="fieldArea" />
-      <el-table-column label="负责人" align="center" prop="managerId" />
-      <el-table-column label="启用时间" align="center" prop="purchaseDate" width="180">
+      <el-table-column label="生产日期" align="center" prop="manufactureDate" width="180">
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.purchaseDate, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.manufactureDate, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="生产日期" align="center" prop="manufactureDate" width="180">
+      <el-table-column label="启用时间" align="center" prop="purchaseDate" width="180">
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.manufactureDate, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.purchaseDate, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="当前状态" align="center" prop="onlineStatus">
+      <el-table-column label="当前状态" align="center" prop="onlineStatus" width="100">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.agricultural_online_status" :value="scope.row.onlineStatus"/>
+          <dict-tag 
+            :options="dict.type.agricultural_online_status" 
+            :value="scope.row.onlineStatus"
+            :class="['online-status-tag', getOnlineStatusClass(scope.row.onlineStatus)]"
+          />
         </template>
       </el-table-column>
       <el-table-column label="当前任务" align="center" prop="currentTask" />
-      <el-table-column label="当前地块" align="center" prop="currentField" />
-      <el-table-column label="保养状态" align="center" prop="maintenanceStatus">
+      <el-table-column label="保养状态" align="center" prop="maintenanceStatus" width="100">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.agricultural_maintenance_status" :value="scope.row.maintenanceStatus"/>
+          <dict-tag 
+            :options="dict.type.agricultural_maintenance_status" 
+            :value="scope.row.maintenanceStatus"
+            :class="['maintenance-status-tag', getMaintenanceStatusClass(scope.row.maintenanceStatus)]"
+          />
         </template>
       </el-table-column>
-      <el-table-column label="定位状态" align="center" prop="locationStatus">
+      <el-table-column label="定位状态" align="center" prop="locationStatus" width="100">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.agricultural_location_status" :value="scope.row.locationStatus"/>
+          <dict-tag 
+            :options="dict.type.agricultural_location_status" 
+            :value="scope.row.locationStatus"
+            :class="['location-status-tag', getLocationStatusClass(scope.row.locationStatus)]"
+          />
         </template>
       </el-table-column>
       <el-table-column label="报警次数" align="center" prop="alarmCount" />
-      <el-table-column label="状态" align="center" prop="status" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -246,100 +259,117 @@
     />
 
     <!-- 添加或修改农机管理列表对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="农机编号" prop="machineCode">
-          <el-input v-model="form.machineCode" placeholder="请输入农机编号" />
-        </el-form-item>
-        <el-form-item label="农机名称" prop="machineName">
-          <el-input v-model="form.machineName" placeholder="请输入农机名称" />
-        </el-form-item>
-        <el-form-item label="农机类型" prop="machineType">
-          <el-select v-model="form.machineType" placeholder="请选择农机类型">
-            <el-option
-              v-for="dict in dict.type.agricultural_machine_type"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="厂家" prop="manufacturer">
-          <el-input v-model="form.manufacturer" placeholder="请输入厂家" />
-        </el-form-item>
-        <el-form-item label="型号" prop="model">
-          <el-input v-model="form.model" placeholder="请输入型号" />
-        </el-form-item>
-        <el-form-item label="所属农场ID" prop="farmId">
-          <el-input v-model="form.farmId" placeholder="请输入所属农场ID" />
-        </el-form-item>
-        <el-form-item label="所属地块区域" prop="fieldArea">
-          <el-input v-model="form.fieldArea" placeholder="请输入所属地块区域" />
-        </el-form-item>
-        <el-form-item label="负责人" prop="managerId">
-          <el-input v-model="form.managerId" placeholder="请输入负责人" />
-        </el-form-item>
-        <el-form-item label="启用时间" prop="purchaseDate">
-          <el-date-picker clearable
-            v-model="form.purchaseDate"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择启用时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="生产日期" prop="manufactureDate">
-          <el-date-picker clearable
-            v-model="form.manufactureDate"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择生产日期">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="当前状态" prop="onlineStatus">
-          <el-radio-group v-model="form.onlineStatus">
-            <el-radio
-              v-for="dict in dict.type.agricultural_online_status"
-              :key="dict.value"
-              :label="parseInt(dict.value)"
-            >{{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="当前任务" prop="currentTask">
-          <el-input v-model="form.currentTask" placeholder="请输入当前任务" />
-        </el-form-item>
-        <el-form-item label="当前地块" prop="currentField">
-          <el-input v-model="form.currentField" placeholder="请输入当前地块" />
-        </el-form-item>
-        <el-form-item label="保养状态" prop="maintenanceStatus">
-          <el-radio-group v-model="form.maintenanceStatus">
-            <el-radio
-              v-for="dict in dict.type.agricultural_maintenance_status"
-              :key="dict.value"
-              :label="dict.value"
-            >{{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="定位状态" prop="locationStatus">
-          <el-radio-group v-model="form.locationStatus">
-            <el-radio
-              v-for="dict in dict.type.agricultural_location_status"
-              :key="dict.value"
-              :label="dict.value"
-            >{{dict.label}}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item label="报警次数" prop="alarmCount">
-          <el-input v-model="form.alarmCount" placeholder="请输入报警次数" />
-        </el-form-item>
-        <el-form-item label="农机描述" prop="description">
-          <el-input v-model="form.description" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
-        <el-form-item label="农机图片" prop="imageUrl">
-          <el-input v-model="form.imageUrl" placeholder="请输入农机图片" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
-        </el-form-item>
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="农机编号" prop="machineCode">
+              <el-input v-model="form.machineCode" placeholder="请输入农机编号" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="农机名称" prop="machineName">
+              <el-input v-model="form.machineName" placeholder="请输入农机名称" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="农机类型" prop="machineType">
+              <el-select v-model="form.machineType" placeholder="请选择农机类型" style="width: 100%">
+                <el-option
+                  v-for="dict in dict.type.agricultural_machine_type"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="所属农场" prop="farmId">
+              <el-select v-model="form.farmId" placeholder="请选择所属农场" clearable style="width: 100%">
+                <el-option
+                  v-for="farm in farmOptions"
+                  :key="farm.value"
+                  :label="farm.label"
+                  :value="farm.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="所属地块" prop="fieldArea">
+              <el-select v-model="form.fieldArea" placeholder="请选择所属地块" clearable style="width: 100%">
+                <el-option
+                  v-for="field in fieldOptions"
+                  :key="field.value"
+                  :label="field.label"
+                  :value="field.value"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="负责人" prop="managerId">
+              <el-input v-model="form.managerId" placeholder="请输入负责人" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="厂家" prop="manufacturer">
+              <el-input v-model="form.manufacturer" placeholder="请输入厂家" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="型号" prop="model">
+              <el-input v-model="form.model" placeholder="请输入型号" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item label="生产日期" prop="manufactureDate">
+              <el-date-picker 
+                clearable
+                v-model="form.manufactureDate"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="请选择生产日期"
+                style="width: 100%">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="启用时间" prop="purchaseDate">
+              <el-date-picker 
+                clearable
+                v-model="form.purchaseDate"
+                type="date"
+                value-format="yyyy-MM-dd"
+                placeholder="请选择启用时间"
+                style="width: 100%">
+              </el-date-picker>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="农机图片" prop="imageUrl">
+              <image-upload v-model="form.imageUrl" :limit="1" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -351,9 +381,13 @@
 
 <script>
 import { listMachines, getMachines, delMachines, addMachines, updateMachines } from "@/api/base/machines"
+import ImageUpload from "@/components/ImageUpload"
 
 export default {
   name: "Machines",
+  components: {
+    ImageUpload
+  },
   dicts: ['agricultural_machine_type', 'agricultural_maintenance_status', 'agricultural_online_status', 'agricultural_location_status'],
   data() {
     return {
@@ -375,6 +409,14 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      // 启用时间范围
+      daterangePurchaseDate: [],
+      // 生产日期范围
+      daterangeManufactureDate: [],
+      // 农场选项列表
+      farmOptions: [],
+      // 地块选项列表
+      fieldOptions: [],
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -385,12 +427,9 @@ export default {
         manufacturer: null,
         model: null,
         farmId: null,
+        fieldId: null,
         managerId: null,
-        purchaseDate: null,
-        manufactureDate: null,
         onlineStatus: null,
-        currentTask: null,
-        currentField: null,
         maintenanceStatus: null,
         locationStatus: null,
         status: null,
@@ -409,24 +448,112 @@ export default {
           { required: true, message: "农机类型不能为空", trigger: "change" }
         ],
         farmId: [
-          { required: true, message: "所属农场ID不能为空", trigger: "blur" }
+          { required: true, message: "所属农场不能为空", trigger: "change" }
+        ],
+        fieldArea: [
+          { required: true, message: "所属地块不能为空", trigger: "change" }
+        ],
+        managerId: [
+          { required: true, message: "负责人不能为空", trigger: "blur" }
         ],
+        manufacturer: [
+          { required: true, message: "厂家不能为空", trigger: "blur" }
+        ],
+        model: [
+          { required: true, message: "型号不能为空", trigger: "blur" }
+        ]
       }
     }
   },
   created() {
     this.getList()
+    this.getFarmOptions()
+    this.getFieldOptions()
   },
   methods: {
+    /** 获取农场选项 */
+    getFarmOptions() {
+      // 暂时没有数据，可以在后续添加API调用
+      // 示例: getFarmList().then(response => { this.farmOptions = response.data })
+      this.farmOptions = []
+    },
+    /** 获取地块选项 */
+    getFieldOptions() {
+      // 暂时没有数据，可以在后续添加API调用
+      // 示例: getFieldList().then(response => { this.fieldOptions = response.data })
+      this.fieldOptions = []
+    },
     /** 查询农机管理列表列表 */
     getList() {
       this.loading = true
+      this.queryParams.params = {}
+      if (null != this.daterangePurchaseDate && '' != this.daterangePurchaseDate) {
+        this.queryParams.params["beginPurchaseDate"] = this.daterangePurchaseDate[0]
+        this.queryParams.params["endPurchaseDate"] = this.daterangePurchaseDate[1]
+      }
+      if (null != this.daterangeManufactureDate && '' != this.daterangeManufactureDate) {
+        this.queryParams.params["beginManufactureDate"] = this.daterangeManufactureDate[0]
+        this.queryParams.params["endManufactureDate"] = this.daterangeManufactureDate[1]
+      }
       listMachines(this.queryParams).then(response => {
         this.machinesList = response.rows
         this.total = response.total
         this.loading = false
       })
     },
+    // 获取字典标签
+    getDictLabel(options, value) {
+      if (!options || (value === null || value === undefined || value === '')) return ''
+      // 尝试字符串和数字匹配
+      const item = options.find(option => 
+        option.value === value || 
+        option.value === String(value) || 
+        String(option.value) === String(value)
+      )
+      return item ? item.label : value
+    },
+    // 获取在线状态样式类
+    getOnlineStatusClass(status) {
+      const statusMap = {
+        '0': 'offline',     // 离线
+        '1': 'online',      // 在线
+        '2': 'busy',        // 忙碌
+        '3': 'error',       // 故障
+        0: 'offline',
+        1: 'online',
+        2: 'busy',
+        3: 'error'
+      }
+      return statusMap[status] || 'offline'
+    },
+    // 获取保养状态样式类
+    getMaintenanceStatusClass(status) {
+      const statusMap = {
+        '0': 'normal',      // 正常
+        '1': 'warning',     // 需要保养
+        '2': 'urgent',      // 过期
+        '3': 'maintaining', // 保养中
+        0: 'normal',
+        1: 'warning',
+        2: 'urgent',
+        3: 'maintaining'
+      }
+      return statusMap[status] || 'normal'
+    },
+    // 获取定位状态样式类
+    getLocationStatusClass(status) {
+      const statusMap = {
+        '0': 'disconnected', // 未定位
+        '1': 'connected',    // 已定位
+        '2': 'weak',         // 信号弱
+        '3': 'error',        // 定位异常
+        0: 'disconnected',
+        1: 'connected',
+        2: 'weak',
+        3: 'error'
+      }
+      return statusMap[status] || 'disconnected'
+    },
     // 取消按钮
     cancel() {
       this.open = false
@@ -439,27 +566,19 @@ export default {
         machineCode: null,
         machineName: null,
         machineType: null,
-        manufacturer: null,
-        model: null,
         farmId: null,
         fieldArea: null,
         managerId: null,
-        purchaseDate: null,
+        manufacturer: null,
+        model: null,
         manufactureDate: null,
-        onlineStatus: null,
-        currentTask: null,
-        currentField: null,
-        maintenanceStatus: null,
-        locationStatus: null,
-        alarmCount: null,
-        description: null,
+        purchaseDate: null,
         imageUrl: null,
-        status: null,
+        remark: null,
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null,
-        remark: null
+        updateTime: null
       }
       this.resetForm("form")
     },
@@ -470,6 +589,8 @@ export default {
     },
     /** 重置按钮操作 */
     resetQuery() {
+      this.daterangePurchaseDate = []
+      this.daterangeManufactureDate = []
       this.resetForm("queryForm")
       this.handleQuery()
     },
@@ -534,3 +655,121 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+/* dict-tag组件的基础样式重置 */
+.el-table .online-status-tag,
+.el-table .maintenance-status-tag,
+.el-table .location-status-tag {
+  display: inline-block !important;
+  padding: 4px 12px !important;
+  border-radius: 12px !important;
+  font-size: 12px !important;
+  font-weight: 500 !important;
+  text-align: center !important;
+  min-width: 60px !important;
+  line-height: 1.2 !important;
+  white-space: nowrap !important;
+  border: 1px solid !important;
+  background: none !important;
+  box-shadow: none !important;
+  color: inherit !important;
+}
+
+/* 在线状态标签 */
+.el-table .online-status-tag.online {
+  background-color: #f0fdf4 !important;
+  color: #16a34a !important;
+  border-color: #bbf7d0 !important;
+}
+
+.el-table .online-status-tag.offline {
+  background-color: #f9fafb !important;
+  color: #6b7280 !important;
+  border-color: #d1d5db !important;
+}
+
+.el-table .online-status-tag.busy {
+  background-color: #fffbeb !important;
+  color: #d97706 !important;
+  border-color: #fed7aa !important;
+}
+
+.el-table .online-status-tag.error {
+  background-color: #fef2f2 !important;
+  color: #dc2626 !important;
+  border-color: #fecaca !important;
+}
+
+/* 保养状态标签 */
+.el-table .maintenance-status-tag.normal {
+  background-color: #f0fdf4 !important;
+  color: #16a34a !important;
+  border-color: #bbf7d0 !important;
+}
+
+.el-table .maintenance-status-tag.warning {
+  background-color: #fffbeb !important;
+  color: #d97706 !important;
+  border-color: #fed7aa !important;
+}
+
+.el-table .maintenance-status-tag.urgent {
+  background-color: #fef2f2 !important;
+  color: #dc2626 !important;
+  border-color: #fecaca !important;
+}
+
+.el-table .maintenance-status-tag.maintaining {
+  background-color: #eff6ff !important;
+  color: #2563eb !important;
+  border-color: #bfdbfe !important;
+}
+
+/* 定位状态标签 */
+.el-table .location-status-tag.connected {
+  background-color: #f0fdf4 !important;
+  color: #16a34a !important;
+  border-color: #bbf7d0 !important;
+}
+
+.el-table .location-status-tag.disconnected {
+  background-color: #f9fafb !important;
+  color: #6b7280 !important;
+  border-color: #d1d5db !important;
+}
+
+.el-table .location-status-tag.weak {
+  background-color: #fffbeb !important;
+  color: #d97706 !important;
+  border-color: #fed7aa !important;
+}
+
+/* 表单对话框样式优化 */
+.el-dialog__body {
+  padding: 20px 25px;
+}
+
+.el-form-item__label {
+  font-weight: 500;
+  color: #606266;
+}
+
+.el-row {
+  margin-bottom: 0;
+}
+
+.el-form-item {
+  margin-bottom: 20px;
+}
+
+/* 图片上传区域样式 */
+.el-form-item:has([role="group"]) {
+  margin-bottom: 25px;
+}
+
+/* 备注区域样式 */
+.el-form-item:last-of-type {
+  margin-bottom: 15px;
+}
+</style>

src/views/base/record/index.vue

@@ -160,7 +160,9 @@
       <el-table-column label="告警ID" align="center" prop="alertId" />
       <el-table-column label="告警等级" align="center" prop="alertLevel">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.alert_level" :value="scope.row.alertLevel"/>
+          <span :class="['custom-tag', 'level-tag', getAlertLevelClass(scope.row.alertLevel)]">
+            {{ getAlertLevelText(scope.row.alertLevel) }}
+          </span>
         </template>
       </el-table-column>
       <el-table-column label="设备名称" align="center" prop="deviceName" />
@@ -180,7 +182,9 @@
       </el-table-column>
       <el-table-column label="处理状态" align="center" prop="processStatus">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.alert_process_status" :value="scope.row.processStatus"/>
+          <span :class="['custom-tag', 'status-tag', getProcessStatusClass(scope.row.processStatus)]">
+            {{ getProcessStatusText(scope.row.processStatus) }}
+          </span>
         </template>
       </el-table-column>
       <el-table-column label="处理人" align="center" prop="processor" />
@@ -198,7 +202,7 @@
             @click="handleDetail(scope.row)"
           >查看</el-button>
           <el-button
-            v-if="scope.row.processStatus == 0 || scope.row.processStatus == '0'"
+            v-if="scope.row.processStatus == 0 || scope.row.processStatus == '0' || scope.row.processStatus == 2 || scope.row.processStatus == '2'"
             size="mini"
             type="text"
             icon="el-icon-edit"
@@ -225,7 +229,9 @@
           <!-- 头部信息 -->
           <div class="alert-header">
             <div class="alert-level-tag">
-              <dict-tag :options="dict.type.alert_level" :value="currentRecord.alertLevel" />
+              <span :class="['custom-tag', 'level-tag', getAlertLevelClass(currentRecord.alertLevel)]">
+                {{ getAlertLevelText(currentRecord.alertLevel) }}
+              </span>
             </div>
             <div class="alert-time">{{ parseTime(currentRecord.alertTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
           </div>
@@ -274,7 +280,9 @@
             <div class="status-item">
               <span class="label">当前状态</span>
               <span class="value status">
-                <dict-tag :options="dict.type.alert_process_status" :value="currentRecord.processStatus" />
+                <span :class="['custom-tag', 'status-tag', getProcessStatusClass(currentRecord.processStatus)]">
+                  {{ getProcessStatusText(currentRecord.processStatus) }}
+                </span>
               </span>
             </div>
             <div class="status-item">
@@ -349,7 +357,8 @@
           <el-select v-model="processForm.processStatus" placeholder="请选择处理结果">
             <el-option label="未处理" :value="0"></el-option>
             <el-option label="已处理" :value="1"></el-option>
-            <el-option label="忽略" :value="2"></el-option>
+            <el-option label="处理中" :value="2"></el-option>
+            <el-option label="忽略" :value="3"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="处理备注" prop="processComment">
@@ -513,7 +522,7 @@ export default {
         
         // 统计各等级告警
         const level = record.alertLevel
-        const isUnprocessed = record.processStatus == 0 || record.processStatus == '0'
+        const isUnprocessed = record.processStatus == 0 || record.processStatus == '0' || record.processStatus == 2 || record.processStatus == '2'
         
         // 根据告警等级统计 (假设: 1-紧急, 2-警告, 3-提示)
         if (level == 1 || level == '1') {
@@ -744,6 +753,58 @@ export default {
       if (this.$refs.processForm) {
         this.$refs.processForm.resetFields()
       }
+    },
+    /** 获取告警等级样式类 */
+    getAlertLevelClass(level) {
+      const levelMap = {
+        '1': 'emergency',
+        '2': 'warning', 
+        '3': 'info',
+        1: 'emergency',
+        2: 'warning',
+        3: 'info'
+      }
+      return levelMap[level] || 'info'
+    },
+    /** 获取告警等级文本 */
+    getAlertLevelText(level) {
+      const levelMap = {
+        '1': '紧急',
+        '2': '警告',
+        '3': '提示',
+        1: '紧急',
+        2: '警告', 
+        3: '提示'
+      }
+      return levelMap[level] || '未知'
+    },
+    /** 获取处理状态样式类 */
+    getProcessStatusClass(status) {
+      const statusMap = {
+        '0': 'pending',
+        '1': 'processed',
+        '2': 'processing',
+        '3': 'ignored',
+        0: 'pending',
+        1: 'processed',
+        2: 'processing',
+        3: 'ignored'
+      }
+      return statusMap[status] || 'pending'
+    },
+    /** 获取处理状态文本 */
+    getProcessStatusText(status) {
+      const statusMap = {
+        '0': '未处理',
+        '1': '已处理', 
+        '2': '处理中',
+        '3': '忽略',
+        0: '未处理',
+        1: '已处理',
+        2: '处理中',
+        3: '忽略'
+      }
+      return statusMap[status] || '未知'
     }
   }
 }
@@ -1113,5 +1174,61 @@ export default {
   line-height: 1.2;
   margin: 0;
 }
+
+/* 自定义标签样式 */
+.custom-tag {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+  text-align: center;
+  min-width: 50px;
+  line-height: 1.2;
+}
+
+/* 告警等级标签 */
+.level-tag.emergency {
+  background-color: #fef2f2;
+  color: #dc2626;
+  border: 1px solid #fecaca;
+}
+
+.level-tag.warning {
+  background-color: #fffbeb;
+  color: #d97706;
+  border: 1px solid #fed7aa;
+}
+
+.level-tag.info {
+  background-color: #eff6ff;
+  color: #2563eb;
+  border: 1px solid #bfdbfe;
+}
+
+/* 处理状态标签 */
+.status-tag.pending {
+  background-color: #fef2f2;
+  color: #dc2626;
+  border: 1px solid #fecaca;
+}
+
+.status-tag.processing {
+  background-color: #fffbeb;
+  color: #d97706;
+  border: 1px solid #fed7aa;
+}
+
+.status-tag.processed {
+  background-color: #f0fdf4;
+  color: #16a34a;
+  border: 1px solid #bbf7d0;
+}
+
+.status-tag.ignored {
+  background-color: #f9fafb;
+  color: #6b7280;
+  border: 1px solid #d1d5db;
+}
 </style>