From e00616caff36135428f95e9b55014f8e11028d86 Mon Sep 17 00:00:00 2001
From: huangjinysf <huangjinysf@163.com>
Date: Fri, 19 Dec 2025 15:23:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=8A=A5=E5=B7=A5=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/plan/EquipmentStatus.vue | 73 +++++++++++++++++++++++++++---
 src/views/plan/index.vue           | 52 +--------------------
 2 files changed, 67 insertions(+), 58 deletions(-)

diff --git a/src/views/plan/EquipmentStatus.vue b/src/views/plan/EquipmentStatus.vue
index 810a98f..7053186 100644
--- a/src/views/plan/EquipmentStatus.vue
+++ b/src/views/plan/EquipmentStatus.vue
@@ -9,7 +9,8 @@
           <div class="axle-container">
             <div class="axle-side left">
               <div v-for="record in getLeftAxles(equipment)" :key="`${record.axle_number}-${record.update_time}`" 
-                   class="axle-item" :class="{ 'running': record.status === '1' }">
+                   class="axle-item" 
+                   :class="getCompletionClass(record.degree_of_completion)">
                 <div class="axle-number">{{ record.axle_number }}</div>
                 <div class="axle-spec">{{ record.specification }}</div>
                 <div class="axle-model">{{ record.model }}</div>
@@ -18,7 +19,8 @@
             </div>
             <div class="axle-side right">
               <div v-for="record in getRightAxles(equipment)" :key="`${record.axle_number}-${record.update_time}`" 
-                   class="axle-item" :class="{ 'running': record.status === '1' }">
+                   class="axle-item" 
+                   :class="getCompletionClass(record.degree_of_completion)">
                 <div class="axle-number">{{ record.axle_number }}</div>
                 <div class="axle-spec">{{ record.specification }}</div>
                 <div class="axle-model">{{ record.model }}</div>
@@ -64,6 +66,15 @@ const getRightAxles = (equipment) => {
     return axle.includes('右') || axle.includes('right');
   });
 };
+
+// 根据完成度返回对应的CSS类名
+const getCompletionClass = (degree) => {
+  const percentage = degree * 100;
+  if (percentage < 25) return 'completion-low';
+  if (percentage < 75) return 'completion-medium';
+  if (percentage < 100) return 'completion-high';
+  return 'completion-full';
+};
 </script>
 
 <style scoped>
@@ -114,16 +125,32 @@ const getRightAxles = (equipment) => {
   padding: 8px;
   border-radius: 4px;
   background-color: #f5f7fa;
-  border: 1px solid #e4e7ed;
+  border: 2px solid #e4e7ed;
   position: relative;
 }
 
-.axle-item.running {
-  background-color: #f0f9ff;
-  border-color: #409eff;
+/* 0% - 25% 完成度 - 浅绿色边框 */
+.axle-item.completion-low {
+  border-color: #b3e19d;
+}
+
+.axle-item.completion-low::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background-color: #b3e19d;
+  border-radius: 4px 0 0 4px;
+}
+
+/* 25% - 75% 完成度 - 中等绿色边框 */
+.axle-item.completion-medium {
+  border-color: #67c23a;
 }
 
-.axle-item.running::before {
+.axle-item.completion-medium::before {
   content: '';
   position: absolute;
   left: 0;
@@ -134,6 +161,38 @@ const getRightAxles = (equipment) => {
   border-radius: 4px 0 0 4px;
 }
 
+/* 75% - 100% 完成度 - 深绿色边框 */
+.axle-item.completion-high {
+  border-color: #529b2e;
+}
+
+.axle-item.completion-high::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background-color: #529b2e;
+  border-radius: 4px 0 0 4px;
+}
+
+/* 100%及以上完成度 - 最深绿色边框 */
+.axle-item.completion-full {
+  border-color: #387c2a;
+}
+
+.axle-item.completion-full::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  background-color: #387c2a;
+  border-radius: 4px 0 0 4px;
+}
+
 .axle-number {
   font-weight: bold;
   margin-bottom: 4px;
diff --git a/src/views/plan/index.vue b/src/views/plan/index.vue
index 87ab374..6c111d5 100644
--- a/src/views/plan/index.vue
+++ b/src/views/plan/index.vue
@@ -3,57 +3,7 @@
 
     <el-row :gutter="10" class="mb8">
 
-      <el-col :span="3">
-        <el-form :model="queryForm" label-width="80px">
-          <el-form-item label="数据范围">
-            <el-select v-model="queryForm.selectedTimeRange" placeholder="选择时间范围" style="width: 100%">
-              <el-option
-                v-for="item in timeRangeOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-form>
-      </el-col>
-
-      <el-col :span="1.5">
-        <el-button
-            type="primary"
-            plain
-            @click="handlePareto"
-            v-hasPermi="['warehouse:WmsImportResult:add']"
-        >帕累托分析</el-button>
-      </el-col>
-
-      <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="Edit"
-          @click="handleItemAnalysis"
-          v-hasPermi="['warehouse:WmsImportResult:edit']"
-        >项目分析</el-button>
-      </el-col>
-
-      <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['warehouse:WmsImportResult:remove']"
-        >趋势分析</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          @click="handleExport"
-          v-hasPermi="['warehouse:WmsImportResult:export']"
-        >产品特征分析</el-button>
-      </el-col>
+    
       <el-col :span="1.5">
         <el-button
           type="info"