style

src/views/ManufacturingCenter/ProjectPlanningQuery/index.vue

@@ -50,9 +50,9 @@
         <!--style="width: 160px"-->
         <!--type="date"-->
         <!--placeholder="选择日期"/>-->
-        <!--<span>提前</span>-->
+        <span>提前</span>
-        <!--<el-input-number v-model="warningValue" :min="1" controls-position="right" size="small" style="width: 90px"/>-->
+        <el-input-number v-model="warningValue" :min="1" controls-position="right" size="small" style="width: 90px"/>
-        <!--<span>天预警</span>-->
+        <span>天预警</span>
         <el-button icon="el-icon-search" type="success" size="small" style="margin-left: 20px" @click="searchTable()">查询</el-button>
       </div>
       <el-table v-loading="loading" :data="tableData" border element-loading-text="拼命加载中">
@@ -78,37 +78,37 @@
         </el-table-column>
         <el-table-column label="开始时间" align="center" min-width="120px">
           <template slot-scope="scope">
-            {{ scope.row.合同签订日期 }}
+            <span :class="colorJudge(scope.row.合同签订日期)">{{ scope.row.合同签订日期 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="结束时间" align="center" min-width="120px">
           <template slot-scope="scope">
-            {{ scope.row.发货节点 }}
+            <span :class="colorJudge(scope.row.发货节点)">{{ scope.row.发货节点 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="发图" align="center" min-width="120px">
           <template slot-scope="scope">
-            {{ scope.row.机床设计完成时间.split(' ')[0] }}
+            <span :class="colorJudge(scope.row.机床设计完成时间)">{{ scope.row.机床设计完成时间.split(' ')[0] }}</span>
           </template>
         </el-table-column>
         <el-table-column label="采购" align="center" min-width="120px">
           <template slot-scope="scope">
-            {{ scope.row.采购完成时间.split(' ')[0] }}
+            <span :class="colorJudge(scope.row.采购完成时间)">{{ scope.row.采购完成时间.split(' ')[0] }}</span>
           </template>
         </el-table-column>
         <el-table-column label="备料" align="center" min-width="120px">
           <template slot-scope="scope">
-            {{ scope.row.备料完成时间.split(' ')[0] }}
+            <span :class="colorJudge(scope.row.备料完成时间)">{{ scope.row.备料完成时间.split(' ')[0] }}</span>
           </template>
         </el-table-column>
         <el-table-column label="制造" align="center" min-width="120px">
           <template slot-scope="scope">
-            {{ scope.row.机床生产完成时间.split(' ')[0] }}
+            <span :class="colorJudge(scope.row.机床生产完成时间)">{{ scope.row.机床生产完成时间.split(' ')[0] }}</span>
           </template>
         </el-table-column>
         <el-table-column label="装配" align="center" min-width="120px">
           <template slot-scope="scope">
-            {{ scope.row.机床装配完成时间.split(' ')[0] }}
+            <span :class="colorJudge(scope.row.机床装配完成时间)">{{ scope.row.机床装配完成时间.split(' ')[0] }}</span>
           </template>
         </el-table-column>
       </el-table>
@@ -134,7 +134,7 @@
         </el-table-column>
         <el-table-column label="计划完成时间" align="center" min-width="100px">
           <template slot-scope="scope">
-            {{ scope.row.计划完成时间 }}
+            <span :class="colorJudge(scope.row.计划完成时间)">{{ scope.row.计划完成时间 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="实际完成时间" align="center" min-width="100px">
@@ -174,7 +174,7 @@
         </el-table-column>
         <el-table-column label="计划完成时间" align="center" min-width="100px">
           <template slot-scope="scope">
-            {{ scope.row.计划完成时间 }}
+            <span :class="colorJudge(scope.row.计划完成时间)">{{ scope.row.计划完成时间 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="实际完成时间" align="center" min-width="100px">
@@ -214,7 +214,7 @@
         </el-table-column>
         <el-table-column label="计划完成时间" align="center" min-width="100px">
           <template slot-scope="scope">
-            {{ scope.row.计划完成时间 }}
+            <span :class="colorJudge(scope.row.计划完成时间)">{{ scope.row.计划完成时间 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="实际完成时间" align="center" min-width="100px">
@@ -254,7 +254,7 @@
         </el-table-column>
         <el-table-column label="计划完成时间" align="center" min-width="100px">
           <template slot-scope="scope">
-            {{ scope.row.计划完成时间 }}
+            <span :class="colorJudge(scope.row.计划完成时间)">{{ scope.row.计划完成时间 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="实际完成时间" align="center" min-width="100px">
@@ -294,7 +294,7 @@
         </el-table-column>
         <el-table-column label="计划完成时间" align="center" min-width="100px">
           <template slot-scope="scope">
-            {{ scope.row.计划完成时间 }}
+            <span :class="colorJudge(scope.row.计划完成时间)">{{ scope.row.计划完成时间 }}</span>
           </template>
         </el-table-column>
         <el-table-column label="实际完成时间" align="center" min-width="100px">
@@ -352,6 +352,16 @@ export default {
     this.fetchData()
   },
   methods: {
+    colorJudge(time1) {
+      console.log(new Date(time1) - this.now)
+      if ((new Date(time1) - this.now) > 0 && (new Date(time1) - this.now) < (86400000 * this.warningValue)) {
+        return 'orange'
+      } else if ((new Date(time1) - this.now) < 0) {
+        return 'red'
+      } else {
+        return 'black'
+      }
+    },
     fetchData() {
       this.getSelect(initProject, ['项目名称', '项目流水号'], 'project')
     },
@@ -536,6 +546,15 @@ export default {
   span{
     margin: 10px 0 10px 10px;
   }
+  .orange{
+    color: orange;
+  }
+  .red{
+    color: red;
+  }
+  .black{
+    color: black;
+  }
 </style>
 <style>
   .bold-font .el-table{