排产结果

pages/aps/results/components/gantt-header.vue

@@ -182,7 +182,7 @@ const defaultStyle = {
 };
 const defaultOptions = {
   title: {
-    label: "任务甘特图",
+    // label: "任务甘特图",
     html: false
   },
   locale: {

pages/aps/results/index.vue

@@ -27,20 +27,40 @@
             <span>参数应用：{{li.routing_version}}</span>
           </div>
         </div>
-      
       </Sider>
       <Content>
-        <h4 :text="title">{{title}}</h4>
-        <a href="#" @click="comeBlck" class="black">返回</a>
-        <a href="#" @click="gantChart" class="gant">甘特图</a>
+        <Row class="i-row">
+          <Col span="2" v-if="blacks">
+            <h4 :text="title">{{title}}</h4>
+          </Col>
+          <Col span="10">
+            <a href="#" @click="comeBlck" class="black">返回</a>
+          </Col>
+          <Col span="10" style="text-align: right;">
+            <a href="#" @click="gantChart" class="gant">甘特图</a>
+          </Col>
+        </Row>
+
         <component :is="detail" :eid="id" />
       </Content>
     </Layout>
+    <div class="footer" v-if="showFooter">
+      <span>已选：{{total}}项</span>&nbsp;&nbsp;&nbsp;
+      <Button type="primary" @click="submit">方案对比</Button>&nbsp;
+      <Button type="default" @click="cancel">取消</Button>
+    </div>
+    <Modal v-model="modal1Gant" fullscreen title="甘特图" footer-hide>
+      <Gantt />
+    </Modal>
   </div>
 </template>
 <script>
 import Api from "./api";
+import Gantt from "./gantt";
 export default {
+  components: {
+    Gantt
+  },
   data() {
     return {
       curId: null,
@@ -50,7 +70,11 @@ export default {
       name: "name1",
       id: null,
       contrastList: [],
-      title: ""
+      title: "",
+      modal1Gant: false,
+      showFooter: false,
+      total: 0,
+      blacks: false
     };
   },
   async fetch({ store, params }) {
@@ -69,7 +93,6 @@ export default {
             this.list.map(u => {
               u.checked = false;
             });
-            console.log(this.list);
           }
         })
         .catch(error => {
@@ -77,6 +100,7 @@ export default {
         });
     },
     listData(id, index) {
+      this.blacks = true;
       this.detail = () => import("./result");
       this.isactive = index;
       this.id = id;
@@ -124,9 +148,12 @@ export default {
       });
     },
     //甘特图
-    gantChart() {},
+    gantChart() {
+      this.modal1Gant = true;
+    },
     changeCheck(item) {
       this.isactive = null;
+      this.blacks = true;
       if (item.checked == true) {
         this.contrastList.push(item.schedule_Id);
       } else if (item.checked == false) {
@@ -136,9 +163,36 @@ export default {
         }
       }
       if (this.contrastList.length > 1) {
+        this.showFooter = true;
+      }
+      this.total = this.contrastList.length;
+      if (this.total == 0) {
+        this.showFooter = false;
+      }
+    },
+    submit() {
+      if (this.total >= 2) {
         this.detail = () => import("./compare");
         this.title = "排产方案比对";
+        this.list.map(u => {
+          if ((u.checked = true)) {
+            u.checked = false;
+          }
+        });
+        this.contrastList = [];
+        this.showFooter = false;
+      } else {
+        this.$Message.error("请选择大于等于2项方案进去比对");
       }
+    },
+    cancel() {
+      this.showFooter = false;
+      this.list.map(u => {
+        if ((u.checked = true)) {
+          u.checked = false;
+        }
+      });
+      this.contrastList = [];
     }
   }
 };

pages/aps/results/results.less

@@ -68,22 +68,26 @@
     box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
     height: 88vh;
     overflow: auto;
-    position: relative;
 
-    .black {
-      position: absolute;
-      top: 12px;
-      left: 120px;
+    .i-row {
+      height: 45px;
+      line-height: 45px;
+      border-bottom: 1px solid #e4e6ed;
+      margin-bottom: 15px;
+      padding-left: 10px;
+
+      .ivu-col {
+        text-align: left;
+      }
     }
 
+
     .black:hover {
       font-weight: bold;
     }
 
     .gant {
-      position: absolute;
-      top: 15px;
-      right: 95px;
+      margin-right: -20px;
     }
 
     .gant:hover {
@@ -98,10 +102,22 @@
 
     .btn {
       float: right;
-      margin-top: -52px;
+      margin-top: -54px;
       margin-right: 15px;
     }
   }
+
+  .footer {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 60px;
+    line-height: 60px;
+    background: rgba(0, 0, 0, 0.6);
+    color: #fff;
+    padding-left: 50px;
+  }
 }
 
 .compare {