项目计划管理预警

src/views/ManufacturingCenter/ProjectPlanningQuery/index.vue

@@ -91,52 +91,52 @@
             </el-table-column>
             <el-table-column label="发图" align="center" min-width="140px">
               <template slot-scope="scope">
-                <span :class="colorJudge(scope.row.机床设计完成时间)">{{ scope.row.机床设计完成时间.split(' ')[0] }}</span>
+                <span :class="colorJudge(scope.row.机床设计完成时间, scope.row.机床设计实际完成时间)">{{ scope.row.机床设计完成时间.split(' ')[0] }}</span>
               </template>
             </el-table-column>
             <el-table-column label="发图（实际）" align="center" width="140px">
               <template slot-scope="scope">
-                <div class="bold-font">{{ scope.row.机床设计实际完成时间 }}</div>
+                <span :class="colorActual(scope.row.机床设计完成时间, scope.row.机床设计实际完成时间)">{{ scope.row.机床设计实际完成时间 }}</span>
               </template>
             </el-table-column>
             <el-table-column label="采购" align="center" min-width="140px">
               <template slot-scope="scope">
-                <span :class="colorJudge(scope.row.采购完成时间)">{{ scope.row.采购完成时间.split(' ')[0] }}</span>
+                <span :class="colorJudge(scope.row.采购完成时间, scope.row.采购实际完成时间)">{{ scope.row.采购完成时间.split(' ')[0] }}</span>
               </template>
             </el-table-column>
             <el-table-column label="采购（实际）" align="center" width="140px">
               <template slot-scope="scope">
-                <div class="bold-font">{{ scope.row.采购实际完成时间 }}</div>
+                <span :class="colorActual(scope.row.采购完成时间, scope.row.采购实际完成时间)">{{ scope.row.采购实际完成时间 }}</span>
               </template>
             </el-table-column>
             <el-table-column label="备料" align="center" min-width="140px">
               <template slot-scope="scope">
-                <span :class="colorJudge(scope.row.备料完成时间)">{{ scope.row.备料完成时间.split(' ')[0] }}</span>
+                <span :class="colorJudge(scope.row.备料完成时间, scope.row.备料实际完成时间)">{{ scope.row.备料完成时间.split(' ')[0] }}</span>
               </template>
             </el-table-column>
             <el-table-column label="备料（实际）" align="center" width="140px">
               <template slot-scope="scope">
-                <div class="bold-font">{{ scope.row.备料实际完成时间 }}</div>
+                <span :class="colorActual(scope.row.备料完成时间, scope.row.备料实际完成时间)">{{ scope.row.备料实际完成时间 }}</span>
               </template>
             </el-table-column>
             <el-table-column label="制造" align="center" min-width="140px">
               <template slot-scope="scope">
-                <span :class="colorJudge(scope.row.机床生产完成时间)">{{ scope.row.机床生产完成时间.split(' ')[0] }}</span>
+                <span :class="colorJudge(scope.row.机床生产完成时间, scope.row.机床生产实际完成时间)">{{ scope.row.机床生产完成时间.split(' ')[0] }}</span>
               </template>
             </el-table-column>
             <el-table-column label="制造（实际）" align="center" width="140px">
               <template slot-scope="scope">
-                <div class="bold-font">{{ scope.row.机床生产实际完成时间 }}</div>
+                <span :class=" colorActual(scope.row.机床生产完成时间, scope.row.机床生产实际完成时间)">{{ scope.row.机床生产实际完成时间 }}</span>
               </template>
             </el-table-column>
             <el-table-column label="装配" align="center" min-width="140px">
               <template slot-scope="scope">
-                <span :class="colorJudge(scope.row.机床装配完成时间)">{{ scope.row.机床装配完成时间.split(' ')[0] }}</span>
+                <span :class="colorJudge(scope.row.机床装配完成时间, scope.row.机床装配实际完成时间)">{{ scope.row.机床装配完成时间.split(' ')[0] }}</span>
               </template>
             </el-table-column>
             <el-table-column label="装配（实际）" align="center" width="140px">
               <template slot-scope="scope">
-                <div class="bold-font">{{ scope.row.机床装配实际完成时间 }}</div>
+                <span :class="colorActual(scope.row.机床装配完成时间, scope.row.机床装配实际完成时间)">{{ scope.row.机床装配实际完成时间 }}</span>
               </template>
             </el-table-column>
           </el-table>
@@ -163,12 +163,12 @@
         </el-table-column>
         <el-table-column label="计划完成时间" align="center" min-width="100px">
           <template slot-scope="scope">
-            <span :class="colorJudge(scope.row.计划完成时间)">{{ scope.row.计划完成时间 }}</span>
+            <span :class="colorJudge(scope.row.计划完成时间, scope.row.实际完成时间)">{{ scope.row.计划完成时间 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="实际完成时间" align="center" min-width="100px">
           <template slot-scope="scope">
-            {{ scope.row.实际完成时间 }}
+            <span :class="colorActual(scope.row.计划完成时间, scope.row.实际完成时间)">{{ scope.row.实际完成时间 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="工期" align="center" min-width="100px">
@@ -203,12 +203,12 @@
         </el-table-column>
         <el-table-column label="计划完成时间" align="center" min-width="100px">
           <template slot-scope="scope">
-            <span :class="colorJudge(scope.row.计划完成时间)">{{ scope.row.计划完成时间 }}</span>
+            <span :class="colorJudge(scope.row.计划完成时间, scope.row.实际完成时间)">{{ scope.row.计划完成时间 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="实际完成时间" align="center" min-width="100px">
           <template slot-scope="scope">
-            {{ scope.row.实际完成时间 }}
+            <span :class="colorActual(scope.row.计划完成时间, scope.row.实际完成时间)">{{ scope.row.实际完成时间 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="工期" align="center" min-width="100px">
@@ -243,12 +243,12 @@
         </el-table-column>
         <el-table-column label="计划完成时间" align="center" min-width="100px">
           <template slot-scope="scope">
-            <span :class="colorJudge(scope.row.计划完成时间)">{{ scope.row.计划完成时间 }}</span>
+            <span :class="colorJudge(scope.row.计划完成时间, scope.row.实际完成时间)">{{ scope.row.计划完成时间 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="实际完成时间" align="center" min-width="100px">
           <template slot-scope="scope">
-            {{ scope.row.实际完成时间 }}
+            <span :class="colorActual(scope.row.计划完成时间, scope.row.实际完成时间)">{{ scope.row.实际完成时间 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="工期" align="center" min-width="100px">
@@ -283,12 +283,12 @@
         </el-table-column>
         <el-table-column label="计划完成时间" align="center" min-width="100px">
           <template slot-scope="scope">
-            <span :class="colorJudge(scope.row.计划完成时间)">{{ scope.row.计划完成时间 }}</span>
+            <span :class="colorJudge(scope.row.计划完成时间, scope.row.实际完成时间)">{{ scope.row.计划完成时间 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="实际完成时间" align="center" min-width="100px">
           <template slot-scope="scope">
-            {{ scope.row.实际完成时间 }}
+            <span :class="colorActual(scope.row.计划完成时间, scope.row.实际完成时间)">{{ scope.row.实际完成时间 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="工期" align="center" min-width="100px">
@@ -323,12 +323,12 @@
         </el-table-column>
         <el-table-column label="计划完成时间" align="center" min-width="100px">
           <template slot-scope="scope">
-            <span :class="colorJudge(scope.row.计划完成时间)">{{ scope.row.计划完成时间 }}</span>
+            <span :class="colorJudge(scope.row.计划完成时间, scope.row.实际完成时间)">{{ scope.row.计划完成时间 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="实际完成时间" align="center" min-width="100px">
           <template slot-scope="scope">
-            {{ scope.row.实际完成时间 }}
+            <span :class="colorActual(scope.row.计划完成时间, scope.row.实际完成时间)">{{ scope.row.实际完成时间 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="工期" align="center" min-width="100px">
@@ -383,10 +383,22 @@ export default {
     this.fetchData()
   },
   methods: {
-    colorJudge(time1) {
+    colorJudge(time1, time2) {
-      console.log(new Date(time1) - this.now)
+      if(time2 === null) {
-      if ((new Date(time1) - this.now) > 0 && (new Date(time1) - this.now) < (86400000 * this.warningValue)) {
+        if ((new Date(time1) - this.now) > 0 && (new Date(time1) - this.now) < (86400000 * this.warningValue)) {
-        return 'orange'
+          return 'orange'
+        } else if ((new Date(time1) - this.now) < 0) {
+          return 'red'
+        } else {
+          return 'black'
+        }
+      } else {
+        return ''
+      }
+    },
+    colorActual(time1, time2) {
+      if ((new Date(time1) - new Date(time2)) > 0) {
+        return 'green'
       } else if ((new Date(time1) - this.now) < 0) {
         return 'red'
       } else {
@@ -594,6 +606,9 @@ export default {
   .black{
     color: white;
   }
+  .green{
+    color: #63a35c;
+  }
 </style>
 <style>
   .bold-font .el-table{