ganttBottom

hb_client/src/components/Gantt/components/leftMenu.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="tableMneu">
+    <div
+      class="mask"
+      v-if="isShowHeaderBox || menuOpen"
+      @click="maskClick"
+    ></div>
+    <el-table
+      ref="tableMenu"
+      :data="tableData"
+      border
+      fit
+      style="width: 100%"
+      row-key="id"
+      height="100%"
+      default-expand-all
+      highlight-current-row
+      @row-click="handlerRowClick"
+      @expand-change="handlerExpand"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+    >
+      <el-table-column label="名称">
+        <template slot-scope="scope">{{ scope.row.name }}</template>
+      </el-table-column>
+      <el-table-column label="进度">
+        <template slot-scope="scope">{{ scope.row.name }}</template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    list: Array,
+    BGScrollTop: Number
+  },
+  computed: {
+    tableData() {
+      return this.list;
+    }
+  },
+  watch: {
+    BGScrollTop: {
+      handler: function(newValue) {
+        let table = this.$refs.tableMenu.bodyWrapper;
+        // console.log(newValue, table);
+        table.scrollTo(0, newValue);
+        // table.scrollTo({
+        //   top: newValue,
+        //   left: 0,
+        //   behavior: "smooth"
+        // });
+      }
+    }
+  },
+  data() {
+    return {
+      // tableData: [],
+      checkList: [],
+      isShowHeaderBox: false,
+      menuOpen: false,
+      //当前点击的row
+      currentRow: {}
+    };
+  },
+  methods: {
+    handlerWatchScroll() {
+      let table = this.$refs.tableMenu.bodyWrapper;
+      table.addEventListener("scroll", e => {
+        // console.log(e.srcElement.scrollTop);
+        this.$emit("TableScrollTop", e.srcElement.scrollTop);
+      });
+    },
+    handlerSelect(row) {
+      this.$refs.tableMenu.setCurrentRow(row);
+    },
+    handlerExpand(row, expand) {
+      // console.log(row, expanded);
+      this.$emit("handlerExpand", row, expand);
+    },
+    maskClick() {
+      this.isShowHeaderBox = false;
+      this.menuOpen = false;
+      this.currentRow = {};
+    },
+    handlerRowClick(row) {
+      this.$emit("handlerRowClick", row);
+    },
+  },
+  mounted() {
+    this.handlerWatchScroll();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.tableMneu {
+  width: 100%;
+  position: relative;
+  height: 100%;
+  .mask {
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background-color: transparent;
+    z-index: 9999;
+  }
+  .icons {
+    cursor: pointer;
+    &:hover {
+      color: #409eff;
+    }
+  }
+  .menulist {
+    width: 100px;
+    position: absolute;
+    background-color: rgb(255, 255, 255);
+    border-radius: 5px;
+    border: 1px solid #ebeef5;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    transition: 0.3s;
+    width: 70px;
+    z-index: 9999;
+
+    .item {
+      background-color: rgb(255, 255, 255);
+      line-height: 30px;
+      text-align: center;
+      font-size: 12px;
+      color: rgb(102, 102, 102);
+      cursor: pointer;
+      height: 30px;
+    }
+
+    .item:hover {
+      color: #409eff;
+    }
+  }
+  .headerBox {
+    z-index: 9999;
+    position: absolute;
+    right: -128px;
+    top: 50px;
+    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
+    width: 170px;
+    background-color: #fff;
+    &::after {
+      content: " ";
+      position: absolute;
+      top: -5px;
+      left: 16px;
+      width: 0;
+      height: 0;
+      border-right: 7px solid transparent;
+      border-left: 7px solid transparent;
+      border-bottom: 7px solid #fff;
+    }
+    .title {
+      margin: 0;
+      padding: 8px 16px;
+      min-height: 32px;
+      border-bottom: 1px solid #e9e9e9;
+      color: #303030;
+      font-weight: 500;
+    }
+    .main {
+      .line {
+        padding: 8px 10px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        width: 150px;
+        .pre {
+          flex: 1 1 auto;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang="scss" >
+.tableMneu {
+  .el-table th.gutter {
+    display: table-cell !important;
+  }
+  .el-table td,
+  .el-table th {
+    padding: 8px 0;
+  }
+  .el-table--border td {
+    border-right: none;
+  }
+}
+</style>

hb_client/src/components/Gantt/components/slider.vue

@@ -0,0 +1,156 @@
+<template>
+  <div
+    class="slider"
+    ref="slider"
+  >
+    <div
+      class="process"
+      :style="{ width }"
+      style="font-size: 12px;color: #ffffff;text-align: right"
+    >
+      <span v-if="per">{{ per }}</span>
+      <span v-else>{{ per }}</span>
+    </div>
+    <div class="process1"
+         :style="{width:process1Width}"
+         style="font-size: 12px;color: #ffffff;text-align: right"
+    >
+      <span v-if="per1"> {{ per1 }}</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["min", "max", "value", "widths", "per1", "id", "parentId"],
+  data() {
+    return {
+      //滚动条DOM元素
+      slider: null,
+      //拖拽DOM元素
+      thunk: null,
+      //当前值
+      per: this.value,
+      perOk: this.per1,
+      //当前是否拖拽tip
+      isMove: false,
+      // process1Width:'10px',
+    };
+  },
+  watch: {
+    value(newValue, oldValue) {
+      this.per = newValue;
+    }
+  },
+  methods: {
+    thunkMousedown(e) {
+      let width = parseInt(this.width);
+      let disX = e.clientX;
+      this.$emit("thunkMousedown");
+      this.isMove = true;
+      console.log(this.isMove);
+      document.onmousemove = e => {
+        let newWidth = e.clientX - disX + width;
+        let scale = newWidth / this.slider.offsetWidth;
+        this.per = Math.ceil((this.max - this.min) * scale + this.min);
+        this.per = Math.max(this.per, this.min);
+        this.per = Math.min(this.per, this.max);
+        this.$emit("thunkMousemove", e, this.index);
+      };
+      document.onmouseup = event => {
+        this.isMove = false;
+        this.$emit(
+          "thunkMouseup",
+          parseInt(this.scale * 100),
+          event,
+          this.id,
+          this.parentId
+        );
+        document.onmousemove = document.onmouseup = null;
+      };
+      return false;
+    }
+  },
+  //渲染到页面的时候
+  mounted() {
+    this.slider = this.$refs.slider;
+    this.thunk = this.$refs.trunk;
+  },
+  computed: {
+    scale() {
+      return (this.per - this.min) / (this.max - this.min);
+    },
+    width() {
+      if (this.slider) {
+        return this.widths * this.scale + "px";
+      } else {
+        return 0 + "px";
+      }
+    },
+    process1Width() {
+      if (this.slider) {
+        let scale1 = (this.perOk - this.min) / (this.max - this.min);
+        return this.widths * scale1 + "px";
+      } else {
+        return 0 + "px";
+      }
+    },
+    left() {
+      if (this.slider) {
+        return this.widths * this.scale - this.thunk.offsetWidth / 2 + "px";
+      } else {
+        return 0 + "px";
+      }
+    }
+  }
+};
+</script>
+<style>
+
+.slider {
+  position: relative;
+  height: 20px;
+  background: #e4e7ed;
+  border-radius: 3px;
+  cursor: text;
+  user-select: none;
+  width: 100%;
+  display: inline-block
+}
+.slider .process {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 112px;
+  height: 20px;
+  border-radius: 3px;
+  background: #409eff;
+}
+.slider .process1 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 10px;
+  height: 20px;
+  border-radius: 3px;
+  background: #11c750;
+}
+
+
+.slider .block i {
+  font-size: 25px;
+  position: relative;
+  left: -3px;
+  top: 15px;
+  cursor: pointer;
+}
+
+.slider .tips i {
+  position: absolute;
+  margin-left: -5px;
+  left: 50%;
+  bottom: -9px;
+  font-size: 16px;
+  color: #000;
+}
+
+</style>

hb_client/src/views/pm/gantt.vue

@@ -4,11 +4,12 @@
       <el-date-picker
         v-model="timeRange"
         type="daterange"
-        start-placeholder="计划开始日期"
+        start-placeholder="开始日期"
-        end-placeholder="计划结束日期"
+        end-placeholder="结束日期"
         format="yyyy 年 MM 月 dd 日"
         value-format="yyyy-MM-dd"
       >
+        <!--   @change="timeRangeChange"-->
       </el-date-picker>
     </el-row>
     <div class="chart" ref="chart">
@@ -944,7 +945,7 @@
         };
         this.handlerSelect();
       },
-      //获取近三年的所有天数
+      //获取要显示的所有天数
       getDay() {
         this.getAllDate();
       },
@@ -959,8 +960,13 @@
         return false;
       },
       getAllDate() {
-        let obj = {};
+        let obj = {},arr=[];
-        let arr = [this.currentYear - 1, this.currentYear, this.currentYear + 1];
+        let start = new Date(this.timeRange[0]).getFullYear();
+        let end = new Date(this.timeRange[1]).getFullYear();
+        for(let i=start;i<end+1;i++){
+          arr.push(i)
+        }
+        arr = [  this.currentYear -1,this.currentYear, this.currentYear + 1];
         arr.forEach(item => {
           obj.year = item;
           obj.days = this.isLeapYear(item) ? 365 : 366;
@@ -974,7 +980,6 @@
         this.allDays.forEach(item => {
           item.month = this.handleMonthDay(item.days, item.year);
         });
-        // console.log(this.allDays);
         this.allDays.forEach(element => {
           if (element.year == this.currentYear) {
             element.month[0][this.currentMonth].forEach(k => {
@@ -1063,15 +1068,6 @@
             break;
         }
       },
-      setList() {
-        /*getPlanGantt().then(res=>{
-          if(res.code===200){
-            this.list = res.data.results;
-          }else{
-            this.$message.error(res.msg);
-          }
-        })*/
-      },
       //设置里程碑线的高度
       setStoneLine(isFirst) {
         this.$nextTick(() => {
@@ -1112,7 +1108,6 @@
     mounted() {
       document.addEventListener("scroll", this.handleScroll);
       this.getDay();
-      this.setList();
       this.setStoneLine();
     },
     beforeDestroy() {

hb_client/src/views/pm/plan.vue

@@ -18,7 +18,6 @@
         <el-table-column type="index" width="50"/>
 
 
-        
         <el-table-column label="任务编号" width="110">
           <template slot-scope="scope">{{ scope.row.number }}</template>
         </el-table-column>
@@ -70,11 +69,13 @@
             <el-link type="primary"
                      v-if="scope.row.is_planed"
                      @click="handleselectplan(scope)"
-              >查看子计划</el-link>
+            >查看子计划
+            </el-link>
             <el-link type="primary"
                      v-else
                      @click="handleWork(scope)"
-              >生成子计划</el-link>
+            >生成子计划
+            </el-link>
           </template>
         </el-table-column>
       </el-table>
@@ -86,10 +87,8 @@
         @pagination="getplanList"
       />
     </el-card>
-    <el-tabs type="border-card">
+    <el-tabs type="border-card" v-model="activeName" @tab-click="activeNameClick">
-  <el-tab-pane label="订单排产">
+      <el-tab-pane label="订单排产" name="订单排产">
-   
-       
         <el-table
           :data="orderList.results"
           border
@@ -133,7 +132,6 @@
           </el-table-column>
 
 
-        
           <el-table-column label="创建时间">
             <template slot-scope="scope">{{ scope.row.create_time }}</template>
           </el-table-column>
@@ -147,7 +145,8 @@
               <el-link type="primary"
                        v-if="checkPermission(['warehouse_update'])"
                        @click="handleclick(scope)"
-              >排产</el-link
+              >排产
+              </el-link
               >
 
             </template>
@@ -198,12 +197,29 @@
           </div>
         </el-dialog>
       </el-tab-pane>
-      
+      <el-tab-pane label="甘特图" name="甘特图">
-  <el-tab-pane label="甘特图">甘特图</el-tab-pane>
+        <gantt
+          v-if="ganttShow"
+          :proList="proList"
+        ></gantt>
+      </el-tab-pane>
+      <!--<el-row style="position: absolute;z-index: 20000;top: 0;right: 0;">
+        <el-date-picker
+          v-model="timeRange"
+          type="daterange"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="yyyy 年 MM 月 dd 日"
+          value-format="yyyy-MM-dd"
+        >
+          &lt;!&ndash;   @change="timeRangeChange"&ndash;&gt;
+        </el-date-picker>
+      </el-row>-->
     </el-tabs>
   </div>
 </template>
 <script>
+  import gantt  from "@/components/Gantt/index";
   import {getordertoplan} from "@/api/sam";
   import {createProductionplan, getProductionplanList, createsubplan} from "@/api/pm";
   import {getMaterialList} from "@/api/mtm";
@@ -212,10 +228,9 @@ import checkPermission from "@/utils/permission";
 
   import {genTree} from "@/utils";
   import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
-const defaulteorderplan = {
+  const defaulteorderplan = {};
-};
   export default {
-  components: { Pagination },
+    components: {Pagination,gantt},
     data() {
       return {
 
@@ -236,13 +251,16 @@ export default {
         },
         value1: '',
         listLoading: true,
+        ganttShow: false,
         dialogVisible: false,
         dialogType: "new",
+        activeName: "订单排产",
         rule1: {
           number: [{required: true, message: "请输入", trigger: "blur"}],
 
         },
-     
+        timeRange:[],
+        proList:[],
       };
     },
     computed: {},
@@ -268,10 +286,31 @@ export default {
       //生产计划列表
       //列表
       getplanList() {
+        let that = this;
         this.listLoading = true;
         getProductionplanList(this.listQuery).then((response) => {
           if (response.data) {
             this.productionplanList = response.data;
+            let list = response.data.results;
+            let arr= [];
+            list.forEach(item => {
+              if (!item.children || item.children.length < 1) {
+                let startTime = new Date(item.start_date).getTime();
+                let endTime = new Date(item.end_date).getTime();
+                let obj = new Object();
+                obj.name = item.number;
+                obj.id = item.id;
+                obj.top = 20;
+                obj.startTime = startTime;
+                obj.endTime = endTime;
+                obj.planTime = [startTime, endTime];
+                obj.per = item.count;
+                obj.type = 1;
+                obj.isShow = true;
+                arr.push(obj);
+              }
+              that.proList = arr;
+            });
           }
           this.listLoading = false;
         });
@@ -291,11 +330,9 @@ export default {
 
         this.orderplan.start_date = this.value1[0];
 
-       if( this.delivery_date>=this.value1[1])
+        if (this.delivery_date >= this.value1[1]) {
-       {
           this.orderplan.end_date = this.value1[1];
-       }
+        } else {
-       else{
           this.$message.error("计划完成时间超过订单交付日期，请从新选择日期！");
         }
 
@@ -309,15 +346,12 @@ export default {
               this.$message.success("成功");
             }
           });
-         }
+        } else {
-         else
-            {
           this.$message.error("排产数超过所需数，请合理排产！");
         }
 
       },
-    handleWork(scope)
+      handleWork(scope) {
-    {
         this.$confirm("确认生成子计划?", "提醒", {
           confirmButtonText: "确认",
           cancelButtonText: "取消",
@@ -337,9 +371,17 @@ export default {
           });
 
       },
+      activeNameClick(tab, event){
+        debugger;
+        console.log(tab, event);
+        if(tab.label==='甘特图'){
+          this.ganttShow = true;
+        }else{
+          this.ganttShow = false;
+        }
+      },
       //查看子计划
-    handleselectplan(scope)
+      handleselectplan(scope) {
-    {
         this.$router.push({name: "work", params: {id: scope.row.id},})
       }