doway-coms 2.2.34 → 2.3.2

package/packages/BaseGantt/src/index.vue

@@ -1,617 +1,617 @@
-<template>
-  <div>
-    <div style="display: flex">
-      <div style="flex: 1">
-        <slot name="toolLeftContent"></slot>
-      </div>
-      <div>
-        <a-space>
-          <a-radio-group
-            :size="'small'"
-            v-model="timeViewValue"
-            button-style="solid"
-            @change="timeViewChange"
-          >
-            <a-radio-button value="day">天</a-radio-button>
-            <a-radio-button value="1">1小时</a-radio-button>
-            <a-radio-button value="2">2小时</a-radio-button>
-            <a-radio-button value="4">4小时</a-radio-button>
-            <a-radio-button value="8">8小时</a-radio-button>
-            <a-radio-button value="12">12小时</a-radio-button>
-          </a-radio-group>
-        </a-space>
-      </div>
-    </div>
-    <vxe-grid
-      border
-      show-header-overflow
-      ref="headDay"
-      class="head-grid"
-      :size="'small'"
-      header-cell-class-name="header-cell-day"
-    >
-      <template #customSearchHeader>
-        <vxe-input v-model="searchValue" placeholder="搜索" type="search" @input="onSearch"></vxe-input>
-      </template>
-      <template #dateWeekHeader="{ column }">
-        <div>
-          <div>{{ column.params.date }}</div>
-          <div>{{ column.params.week }}</div>
-        </div>
-      </template>
-    </vxe-grid>
-    <vxe-grid
-      border
-      show-header-overflow
-      ref="headHour"
-      class="head-grid"
-      :size="'small'"
-      v-show="hourCols.length > 0"
-    ></vxe-grid>
-
-    <!-- <div class="gantt-line-area" ref="lineArea">
-      <div
-        class="gantt-line"
-        v-for="loopLine in lines"
-        :key="loopLine"
-        :style="{ left: loopLine + 'px', height: lineHeight + 'px' }"
-      ></div>
-    </div>-->
-    <div
-      class="gantt-bar-tooltip"
-      v-if="ganttBarTooltip.show === true"
-      :style="{
-        left: ganttBarTooltip.left + 'px',
-        top: ganttBarTooltip.top + 'px'
-      }"
-    >
-      <slot name="itemTip" :item="ganttBarTooltip.item"></slot>
-    </div>
-    <vxe-grid
-      border
-      resizable
-      auto-resize
-      ref="bodyGrid"
-      show-overflow
-      class="mytable-scrollbar"
-      :show-header="false"
-      :size="'small'"
-      :height="computedHeight"
-      :row-config="{
-        isCurrent: isCurrent,
-        isHover: true
-      }"
-      :treeConfig="treeConfig"
-      :cell-class-name="cellClassName"
-      :row-class-name="rowClassName"
-      @cell-click="cellClick"
-      @scroll="bodyScroll"
-      :loading="loading"
-      @filter-change="filterChangeEvent"
-      @toggle-tree-expand="toggleTreeExpand"
-    >
-      <template #content="{ row, rowIndex }">
-        <div>
-          <div class="gantt-line-area" v-if="rowIndex === 0" ref="lineArea">
-            <div
-              class="gantt-line"
-              v-for="loopLine in lines"
-              :key="loopLine"
-              :style="{ left: loopLine + 'px', height: lineHeight + 'px' }"
-            ></div>
-          </div>
-          <div
-            v-for="loopItem in row.items"
-            :key="loopItem.id"
-            :name="'gantt-bar'+loopItem.taskId"
-            :id="'gantt-bar'+loopItem.id"
-            :class="loopItem.type=='schedule'?'gantt-schedule':'gantt-ord'"
-            @mouseenter="ganttBarMouseEnter($event, loopItem, rowIndex)"
-            @mouseleave="ganttBarMouseLeave($event, loopItem)"
-            :style="{
-              marginLeft: loopItem.left + 'px',
-              width: loopItem.width + 'px'
-            }"
-          >
-            <slot :item="loopItem" name="itemContent"></slot>
-          </div>
-        </div>
-      </template>
-      <template #customCell="{ row, column }">
-        <slot name="customCell" :item="{ row, column }"></slot>
-      </template>
-    </vxe-grid>
-  </div>
-</template>
-
-<script>
-import { Space, Radio } from "ant-design-vue";
-import XEUtils from "xe-utils";
-import moment from "moment";
-import draggable from "vuedraggable";
-import resizeDetector from "element-resize-detector";
-export default {
-  name: "BaseGantt",
-  components: {
-    draggable,
-    "a-space": Space,
-    "a-radio-button": Radio.Button,
-    "a-radio-group": Radio.Group
-  },
-  data() {
-    return {
-      searchValue: "",
-      timeViewValue: "day",
-      loading: false,
-      rowColData: {},
-      minDate: null,
-      maxDate: null,
-      monthCols: [],
-      fixedColWidth: 0,
-      colWidth: 55,
-      splitHour: 4,
-      dayCols: [],
-      hourCols: [],
-      headerHeight: 0,
-      eqpWidth: 100,
-      rowHeight: 40,
-      lines: [],
-      lineHeight: 0,
-      dateRange: [],
-      ganttBarTooltip: {
-        show: false,
-        left: 0,
-        top: 0,
-        item: {},
-        color: ""
-      },
-      rows: [],
-      weekDay: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
-    };
-  },
-  props: {
-    showSeachHeader: {
-      type: Boolean,
-      default: false
-    },
-    isCurrent: {
-      type: Boolean,
-      default: false
-    },
-    timeValue: {
-      type: String,
-      default: "day"
-    },
-    height: {
-      default: "auto"
-    },
-    leftCols: {
-      type: Array,
-      default: function() {
-        return [{ field: "eqp", width: 100, fixed: "left" }];
-      }
-    },
-    cellClassName: {
-      type: Function,
-      default: function() {}
-    },
-    rowClassName: {
-      type: Function,
-      default: function() {}
-    },
-    treeConfig: {
-      type: Object,
-      default: function() {
-        return null;
-      }
-    }
-  },
-  computed: {
-    computedHeight: function() {
-      return this.height - this.headerHeight;
-    }
-  },
-  mounted() {
-    let erd = resizeDetector({
-      strategy: "scroll"
-    });
-    let gridBodyDiv = this.$refs.bodyGrid.$el.getElementsByClassName(
-      "vxe-table--body"
-    )[0];
-    let vm = this;
-    erd.listenTo(gridBodyDiv, () => {
-      vm.lineHeight = gridBodyDiv.clientHeight;
-    });
-    this.timeViewValue = this.timeValue;
-  },
-  created() {},
-  methods: {
-    toggleTreeExpand(scope) {
-      // console.debug(this.$refs.bodyGrid.$el.getElementsByClassName('vxe-table--body')[0].clientHeight)
-    },
-    filterChangeEvent({ column }) {},
-    //   headerDayCellStyle({ column, columnIndex }){
-    //       return {
-    //           paddingLeft:'4px',
-    //           paddingRight:'4px'
-    //       }
-    //   },
-    /**
-     * 视图改变后初始化表头
-     */
-    setLoading(b) {
-      this.loading = b;
-    },
-    timeViewChange() {
-      this.initHeaders(this.dateRange);
-      this.initContent();
-    },
-    initHeaders(dateRange) {
-      this.dateRange = dateRange;
-      let contentWidth = 0;
-      let minDate = moment(this.dateRange[0]);
-      let maxDate = moment(this.dateRange[1]);
-      let splitCount = 1;
-      let diffDays = maxDate.diff(minDate, "day");
-      this.monthCols = [];
-      this.dayCols = [];
-      this.hourCols = [];
-      this.lines = [];
-      let bodyCols = [];
-      this.fixedColWidth = 0;
-      for (let i = 0; i < this.leftCols.length; i++) {
-        if (this.leftCols[i].fixed == "left") {
-          this.fixedColWidth = this.fixedColWidth + this.leftCols[i].width;
-        }
-        let obj = {
-          field: this.leftCols[i].field,
-          title: this.leftCols[i].title,
-          fixed: this.leftCols[i].fixed,
-          width: this.leftCols[i].width
-          // filters:[{data:null}],
-          // filterRender:{name: 'input'}
-        };
-        if (this.leftCols[i].treeNode === true) {
-          obj["treeNode"] = true;
-        }
-
-        if (this.leftCols[i].slots) {
-          obj.slots = this.leftCols[i].slots;
-        }
-        this.monthCols.push();
-
-        // tmp.filters=undefined
-        // tmp.filterRender=undefined
-        //去掉天这一行的标题
-        // else{
-        //   tmp.width+=width/
-        // }
-        // this.dayCols.push(tmp)
-        // obj.filters=[{data:null}]
-        // obj.filterRender={name:'input'}
-        bodyCols.push(obj);
-        if (this.timeViewValue !== "day") {
-          this.splitHour = parseInt(this.timeViewValue);
-          this.hourCols.push(obj);
-          this.colWidth = 60;
-          splitCount = 24 / this.splitHour;
-        } else {
-          this.splitHour = 24;
-          this.colWidth = 130;
-          splitCount = 1;
-        }
-      }
-
-      let tmp = {
-        type: "seq",
-        fixed: "left",
-        title: "",
-
-        width: this.fixedColWidth
-      };
-      if (this.showSeachHeader) {
-        tmp.slots = {
-          header: "customSearchHeader"
-        };
-      }
-      this.dayCols.push(tmp);
-
-      let tempYearMonthCol = null;
-      for (let i = 0; i <= diffDays; i++) {
-        if (tempYearMonthCol === null) {
-          tempYearMonthCol = {
-            title: minDate.format("YYYY-MM"),
-            field: minDate.format("YYYY-MM"),
-            width: this.colWidth * splitCount
-          };
-          this.monthCols.push(tempYearMonthCol);
-        } else {
-          tempYearMonthCol.width =
-            tempYearMonthCol.width + this.colWidth * splitCount;
-        }
-
-        //添加天数
-        let tempDayCol = {
-          title: minDate.format("YYYY年MM月DD日"),
-          field: minDate.format("YYYY-MM-DD"),
-          width: this.colWidth * splitCount,
-          align: "center",
-          slots: {
-            header: "dateWeekHeader"
-          },
-          params: {
-            date: minDate.format("YYYY年MM月DD日"),
-            week: this.weekDay[minDate.format("E") - 1]
-          }
-        };
-        this.dayCols.push(tempDayCol);
-        //添加小时
-        if (this.timeViewValue !== "day") {
-          for (let j = 0; j < splitCount; j++) {
-            let tempHour = j * this.splitHour;
-            tempHour = "000" + tempHour;
-            tempHour = tempHour.substr(tempHour.length - 2, 2);
-            contentWidth = contentWidth + this.colWidth;
-            this.hourCols.push({
-              field: minDate.format("YYYY-MM-DD") + " " + tempHour + ":00:00",
-              title: tempHour,
-              width: this.colWidth
-            });
-          }
-        } else {
-          contentWidth = contentWidth + tempDayCol.width;
-        }
-        minDate.add(1, "day");
-        if (minDate.format("YYYY-MM") !== tempYearMonthCol.field) {
-          tempYearMonthCol = null;
-        }
-      }
-      let colLength = this.dayCols.length;
-      //   this.$refs.headMonth.reloadColumn(this.monthCols)
-      this.$refs.headDay.reloadColumn(this.dayCols);
-      if (this.timeViewValue !== "day") {
-        this.headerHeight = 160;
-        colLength = this.hourCols.length;
-        this.$refs.headHour.reloadColumn(this.hourCols);
-      } else {
-        this.headerHeight = 120;
-      }
-      for (let i = 0; i < colLength; i++) {
-        this.lines.push(i * this.colWidth);
-      }
-      bodyCols.push({
-        field: "content",
-        title: "内容",
-        width: contentWidth,
-        className: "custom-cell",
-        slots: {
-          default: "content"
-        }
-      });
-      this.$refs.bodyGrid.reloadColumn(bodyCols);
-      //   this.$refs.lineArea.style.marginLeft =
-      //       ((this.fixedColWidth-this.colWidth)) + 'px'
-    },
-    loadData(rows) {
-      this.rows = rows;
-      this.initContent();
-    },
-    initContent() {
-      let splitMinutes = XEUtils.multiply(this.splitHour, 60);
-      let minDateTime = this.dateRange[0];
-      for (let i = 0; i < this.rows.length; i++) {
-        this.rows[i]["content"] = "";
-        for (let j = 0; j < this.rows[i].items.length; j++) {
-          let diffMiniutes = moment(this.rows[i].items[j].start).diff(
-            moment(minDateTime),
-            "minutes"
-          );
-          let tempLeft = XEUtils.divide(
-            XEUtils.multiply(this.colWidth, diffMiniutes),
-            splitMinutes
-          );
-          //计算左边距
-          this.rows[i].items[j]["left"] = tempLeft;
-          //计算宽度
-          let ordMinutes = moment(this.rows[i].items[j].end).diff(
-            moment(this.rows[i].items[j].start),
-            "minutes"
-          );
-          let tempWidth = XEUtils.divide(
-            XEUtils.multiply(this.colWidth, ordMinutes),
-            splitMinutes
-          );
-          this.rows[i].items[j]["width"] = tempWidth;
-
-          // for (let k = 0; k < this.rows[i].items[j].nodes.length; k++) {
-          //   let nodeDiffMiniutes = moment(
-          //     this.rows[i].items[j].nodes[k].start
-          //   ).diff(moment(minDateTime), "minutes");
-          //   let nodeTempLeft = XEUtils.divide(
-          //     XEUtils.multiply(this.colWidth, nodeDiffMiniutes),
-          //     splitMinutes
-          //   );
-          //   this.rows[i].items[j].nodes[k]["left"] = nodeTempLeft;
-          //   //计算宽度
-          //   let nodeOrdMinutes = moment(this.rows[i].items[j].nodes[k].end).diff(
-          //     moment(this.rows[i].items[j].nodes[k].start),
-          //     "minutes"
-          //   );
-          //   let nodeTempWidth = XEUtils.divide(
-          //     XEUtils.multiply(this.colWidth, nodeOrdMinutes),
-          //     splitMinutes
-          //   );
-          //   this.rows[i].items[j].nodes[k]["width"] = nodeTempWidth;
-          // }
-        }
-      }
-      this.lineHeight = this.rows.length * 40;
-      this.$refs.bodyGrid.reloadData(this.rows);
-    },
-    ganttBarMouseEnter(evt, ordInfo, rowIndex) {
-      this.ganttBarTooltip.left = evt.clientX; //ordInfo.left + this.eqpWidth
-      this.ganttBarTooltip.top =
-        evt.clientY + evt.target.offsetHeight - evt.offsetY; // (rowIndex + 1) * this.rowHeight
-      this.ganttBarTooltip.item = ordInfo;
-      this.ganttBarTooltip.show = true;
-      this.$emit("mouseEnter", ordInfo);
-    },
-    ganttBarMouseLeave(evt, ordInfo) {
-      this.ganttBarTooltip.show = false;
-      this.$emit("mouseLeave", ordInfo);
-    },
-    bodyScroll(scrollInfo) {
-      if (scrollInfo.isX === true) {
-        // this.$refs.lineArea.style.marginLeft =
-        //   (scrollInfo.scrollLeft-(this.fixedColWidth-this.colWidth)) * -1 + 'px'
-
-        // this.$refs.headMonth.scrollTo(scrollInfo.scrollLeft)
-        this.$refs.headDay.scrollTo(scrollInfo.scrollLeft);
-        this.$refs.headHour.scrollTo(scrollInfo.scrollLeft);
-      }
-    },
-    setCurrentRow(row) {
-      this.$refs.bodyGrid.setCurrentRow(row);
-    },
-    getTableData() {
-      return this.$refs.bodyGrid.getTableData().fullData;
-    },
-    cellClick(scope) {
-      this.$emit("cellClick", scope);
-    },
-    onSearch() {
-      this.$emit("search", this.searchValue);
-    },
-    scrollRow(row) {
-      this.$refs.bodyGrid.scrollToRow(row);
-    }
-  }
-};
-</script>
-
-<style lang="scss">
-.custom-cell > div {
-  // background:blue;
-  // background-color: blue !important;
-  // overflow: unset !important;
-  padding-left: 0px !important;
-  padding-right: 0px !important;
-}
-.head-grid
-  .vxe-table
-  .vxe-table--render-wrapper
-  .vxe-table--main-wrapper
-  .vxe-table--body-wrapper {
-  height: 0px !important;
-}
-.head-grid .vxe-table .vxe-table--empty-content {
-  display: none;
-}
-.header-cell-day .vxe-cell {
-  padding-left: 5px !important;
-  padding-right: 5px !important;
-}
-.mytable-scrollbar .vxe-body--column.col-blue {
-  background-color: #e6f7ff;
-  color: #ffffff;
-  cursor: pointer;
-  /* font-weight: bold; */
-}
-</style>
-<style lang="scss" scoped>
-.gantt-schedule {
-  position: absolute;
-  top: 0px;
-  z-index: 2;
-  // float:left;
-  height: 40px;
-  // cursor: pointer;
-  // overflow: hidden;
-  border-radius: 5px;
-}
-// .gantt-schedule :hover {
-//   background-color: darkgrey;
-// }
-.gantt-ord {
-  position: relative;
-  z-index: 3;
-  cursor: pointer;
-}
-
-.gantt-line-area {
-  position: absolute;
-  z-index: 1;
-  margin-left: -1px;
-  margin-top: -20px;
-}
-.gantt-line {
-  position: absolute;
-  width: 1px;
-  background-color: #e8eaec;
-}
-.gantt-bar-tooltip {
-  position: fixed;
-  z-index: 10;
-  border: 1px solid #0b0b0b;
-  padding: 3px;
-  border-radius: 3px;
-  //   background: red;
-}
-/*滚动条整体部分*/
-.mytable-scrollbar ::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-  z-index: 10;
-}
-/*滚动条的轨道*/
-.mytable-scrollbar ::-webkit-scrollbar-track {
-  background-color: #ffffff;
-  z-index: 10;
-}
-/*滚动条里面的小方块，能向上向下移动*/
-.mytable-scrollbar ::-webkit-scrollbar-thumb {
-  background-color: #bfbfbf;
-  border-radius: 5px;
-  border: 1px solid #f1f1f1;
-  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  z-index: 10;
-}
-.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
-  background-color: #a8a8a8;
-  z-index: 10;
-}
-.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
-  background-color: #787878;
-  z-index: 10;
-}
-/*边角，即两个滚动条的交汇处*/
-.mytable-scrollbar ::-webkit-scrollbar-corner {
-  background-color: #ffffff;
-  z-index: 10;
-}
-</style>
-<style>
-.mytable-scrollbar .vxe-body--column.col-red {
-  background-color: rgb(227, 9, 53);
-  color: rgb(55, 55, 55);
-  /* font-weight: bold; */
-}
-.mytable-scrollbar .vxe-body--column.col-orange {
-  background-color: rgb(237, 216, 20);
-  color: rgb(55, 55, 55);
-  /* font-weight: bold; */
-}
-/*.mytable-scrollbar .vxe-body--column.col-grey {*/
-/*  background-color: rgb(140, 140, 138);*/
-/*  color: rgb(55, 55, 55);*/
-/*  !* font-weight: bold; *!*/
-/*}*/
-/*.mytable-scrollbar .vxe-body--column.col-blue {*/
-/*  background-color: #1890ff;*/
-/*  color: rgb(55, 55, 55);*/
-/*  !* font-weight: bold; *!*/
-/*}*/
-.row-blue {
-  background-color: lightskyblue;
-}
-</style>
+<template>
+  <div>
+    <div style="display: flex">
+      <div style="flex: 1">
+        <slot name="toolLeftContent"></slot>
+      </div>
+      <div>
+        <a-space>
+          <a-radio-group
+            :size="'small'"
+            v-model="timeViewValue"
+            button-style="solid"
+            @change="timeViewChange"
+          >
+            <a-radio-button value="day">天</a-radio-button>
+            <a-radio-button value="1">1小时</a-radio-button>
+            <a-radio-button value="2">2小时</a-radio-button>
+            <a-radio-button value="4">4小时</a-radio-button>
+            <a-radio-button value="8">8小时</a-radio-button>
+            <a-radio-button value="12">12小时</a-radio-button>
+          </a-radio-group>
+        </a-space>
+      </div>
+    </div>
+    <vxe-grid
+      border
+      show-header-overflow
+      ref="headDay"
+      class="head-grid"
+      :size="'small'"
+      header-cell-class-name="header-cell-day"
+    >
+      <template #customSearchHeader>
+        <vxe-input v-model="searchValue" placeholder="搜索" type="search" @input="onSearch"></vxe-input>
+      </template>
+      <template #dateWeekHeader="{ column }">
+        <div>
+          <div>{{ column.params.date }}</div>
+          <div>{{ column.params.week }}</div>
+        </div>
+      </template>
+    </vxe-grid>
+    <vxe-grid
+      border
+      show-header-overflow
+      ref="headHour"
+      class="head-grid"
+      :size="'small'"
+      v-show="hourCols.length > 0"
+    ></vxe-grid>
+
+    <!-- <div class="gantt-line-area" ref="lineArea">
+      <div
+        class="gantt-line"
+        v-for="loopLine in lines"
+        :key="loopLine"
+        :style="{ left: loopLine + 'px', height: lineHeight + 'px' }"
+      ></div>
+    </div>-->
+    <div
+      class="gantt-bar-tooltip"
+      v-if="ganttBarTooltip.show === true"
+      :style="{
+        left: ganttBarTooltip.left + 'px',
+        top: ganttBarTooltip.top + 'px'
+      }"
+    >
+      <slot name="itemTip" :item="ganttBarTooltip.item"></slot>
+    </div>
+    <vxe-grid
+      border
+      resizable
+      auto-resize
+      ref="bodyGrid"
+      show-overflow
+      class="mytable-scrollbar"
+      :show-header="false"
+      :size="'small'"
+      :height="computedHeight"
+      :row-config="{
+        isCurrent: isCurrent,
+        isHover: true
+      }"
+      :treeConfig="treeConfig"
+      :cell-class-name="cellClassName"
+      :row-class-name="rowClassName"
+      @cell-click="cellClick"
+      @scroll="bodyScroll"
+      :loading="loading"
+      @filter-change="filterChangeEvent"
+      @toggle-tree-expand="toggleTreeExpand"
+    >
+      <template #content="{ row, rowIndex }">
+        <div>
+          <div class="gantt-line-area" v-if="rowIndex === 0" ref="lineArea">
+            <div
+              class="gantt-line"
+              v-for="loopLine in lines"
+              :key="loopLine"
+              :style="{ left: loopLine + 'px', height: lineHeight + 'px' }"
+            ></div>
+          </div>
+          <div
+            v-for="loopItem in row.items"
+            :key="loopItem.id"
+            :name="'gantt-bar'+loopItem.taskId"
+            :id="'gantt-bar'+loopItem.id"
+            :class="loopItem.type=='schedule'?'gantt-schedule':'gantt-ord'"
+            @mouseenter="ganttBarMouseEnter($event, loopItem, rowIndex)"
+            @mouseleave="ganttBarMouseLeave($event, loopItem)"
+            :style="{
+              marginLeft: loopItem.left + 'px',
+              width: loopItem.width + 'px'
+            }"
+          >
+            <slot :item="loopItem" name="itemContent"></slot>
+          </div>
+        </div>
+      </template>
+      <template #customCell="{ row, column }">
+        <slot name="customCell" :item="{ row, column }"></slot>
+      </template>
+    </vxe-grid>
+  </div>
+</template>
+
+<script>
+import { Space, Radio } from "ant-design-vue";
+import XEUtils from "xe-utils";
+import moment from "moment";
+import draggable from "vuedraggable";
+import resizeDetector from "element-resize-detector";
+export default {
+  name: "BaseGantt",
+  components: {
+    draggable,
+    "a-space": Space,
+    "a-radio-button": Radio.Button,
+    "a-radio-group": Radio.Group
+  },
+  data() {
+    return {
+      searchValue: "",
+      timeViewValue: "day",
+      loading: false,
+      rowColData: {},
+      minDate: null,
+      maxDate: null,
+      monthCols: [],
+      fixedColWidth: 0,
+      colWidth: 55,
+      splitHour: 4,
+      dayCols: [],
+      hourCols: [],
+      headerHeight: 0,
+      eqpWidth: 100,
+      rowHeight: 40,
+      lines: [],
+      lineHeight: 0,
+      dateRange: [],
+      ganttBarTooltip: {
+        show: false,
+        left: 0,
+        top: 0,
+        item: {},
+        color: ""
+      },
+      rows: [],
+      weekDay: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
+    };
+  },
+  props: {
+    showSeachHeader: {
+      type: Boolean,
+      default: false
+    },
+    isCurrent: {
+      type: Boolean,
+      default: false
+    },
+    timeValue: {
+      type: String,
+      default: "day"
+    },
+    height: {
+      default: "auto"
+    },
+    leftCols: {
+      type: Array,
+      default: function() {
+        return [{ field: "eqp", width: 100, fixed: "left" }];
+      }
+    },
+    cellClassName: {
+      type: Function,
+      default: function() {}
+    },
+    rowClassName: {
+      type: Function,
+      default: function() {}
+    },
+    treeConfig: {
+      type: Object,
+      default: function() {
+        return null;
+      }
+    }
+  },
+  computed: {
+    computedHeight: function() {
+      return this.height - this.headerHeight;
+    }
+  },
+  mounted() {
+    let erd = resizeDetector({
+      strategy: "scroll"
+    });
+    let gridBodyDiv = this.$refs.bodyGrid.$el.getElementsByClassName(
+      "vxe-table--body"
+    )[0];
+    let vm = this;
+    erd.listenTo(gridBodyDiv, () => {
+      vm.lineHeight = gridBodyDiv.clientHeight;
+    });
+    this.timeViewValue = this.timeValue;
+  },
+  created() {},
+  methods: {
+    toggleTreeExpand(scope) {
+      // console.debug(this.$refs.bodyGrid.$el.getElementsByClassName('vxe-table--body')[0].clientHeight)
+    },
+    filterChangeEvent({ column }) {},
+    //   headerDayCellStyle({ column, columnIndex }){
+    //       return {
+    //           paddingLeft:'4px',
+    //           paddingRight:'4px'
+    //       }
+    //   },
+    /**
+     * 视图改变后初始化表头
+     */
+    setLoading(b) {
+      this.loading = b;
+    },
+    timeViewChange() {
+      this.initHeaders(this.dateRange);
+      this.initContent();
+    },
+    initHeaders(dateRange) {
+      this.dateRange = dateRange;
+      let contentWidth = 0;
+      let minDate = moment(this.dateRange[0]);
+      let maxDate = moment(this.dateRange[1]);
+      let splitCount = 1;
+      let diffDays = maxDate.diff(minDate, "day");
+      this.monthCols = [];
+      this.dayCols = [];
+      this.hourCols = [];
+      this.lines = [];
+      let bodyCols = [];
+      this.fixedColWidth = 0;
+      for (let i = 0; i < this.leftCols.length; i++) {
+        if (this.leftCols[i].fixed == "left") {
+          this.fixedColWidth = this.fixedColWidth + this.leftCols[i].width;
+        }
+        let obj = {
+          field: this.leftCols[i].field,
+          title: this.leftCols[i].title,
+          fixed: this.leftCols[i].fixed,
+          width: this.leftCols[i].width
+          // filters:[{data:null}],
+          // filterRender:{name: 'input'}
+        };
+        if (this.leftCols[i].treeNode === true) {
+          obj["treeNode"] = true;
+        }
+
+        if (this.leftCols[i].slots) {
+          obj.slots = this.leftCols[i].slots;
+        }
+        this.monthCols.push();
+
+        // tmp.filters=undefined
+        // tmp.filterRender=undefined
+        //去掉天这一行的标题
+        // else{
+        //   tmp.width+=width/
+        // }
+        // this.dayCols.push(tmp)
+        // obj.filters=[{data:null}]
+        // obj.filterRender={name:'input'}
+        bodyCols.push(obj);
+        if (this.timeViewValue !== "day") {
+          this.splitHour = parseInt(this.timeViewValue);
+          this.hourCols.push(obj);
+          this.colWidth = 60;
+          splitCount = 24 / this.splitHour;
+        } else {
+          this.splitHour = 24;
+          this.colWidth = 130;
+          splitCount = 1;
+        }
+      }
+
+      let tmp = {
+        type: "seq",
+        fixed: "left",
+        title: "",
+
+        width: this.fixedColWidth
+      };
+      if (this.showSeachHeader) {
+        tmp.slots = {
+          header: "customSearchHeader"
+        };
+      }
+      this.dayCols.push(tmp);
+
+      let tempYearMonthCol = null;
+      for (let i = 0; i <= diffDays; i++) {
+        if (tempYearMonthCol === null) {
+          tempYearMonthCol = {
+            title: minDate.format("YYYY-MM"),
+            field: minDate.format("YYYY-MM"),
+            width: this.colWidth * splitCount
+          };
+          this.monthCols.push(tempYearMonthCol);
+        } else {
+          tempYearMonthCol.width =
+            tempYearMonthCol.width + this.colWidth * splitCount;
+        }
+
+        //添加天数
+        let tempDayCol = {
+          title: minDate.format("YYYY年MM月DD日"),
+          field: minDate.format("YYYY-MM-DD"),
+          width: this.colWidth * splitCount,
+          align: "center",
+          slots: {
+            header: "dateWeekHeader"
+          },
+          params: {
+            date: minDate.format("YYYY年MM月DD日"),
+            week: this.weekDay[minDate.format("E") - 1]
+          }
+        };
+        this.dayCols.push(tempDayCol);
+        //添加小时
+        if (this.timeViewValue !== "day") {
+          for (let j = 0; j < splitCount; j++) {
+            let tempHour = j * this.splitHour;
+            tempHour = "000" + tempHour;
+            tempHour = tempHour.substr(tempHour.length - 2, 2);
+            contentWidth = contentWidth + this.colWidth;
+            this.hourCols.push({
+              field: minDate.format("YYYY-MM-DD") + " " + tempHour + ":00:00",
+              title: tempHour,
+              width: this.colWidth
+            });
+          }
+        } else {
+          contentWidth = contentWidth + tempDayCol.width;
+        }
+        minDate.add(1, "day");
+        if (minDate.format("YYYY-MM") !== tempYearMonthCol.field) {
+          tempYearMonthCol = null;
+        }
+      }
+      let colLength = this.dayCols.length;
+      //   this.$refs.headMonth.reloadColumn(this.monthCols)
+      this.$refs.headDay.reloadColumn(this.dayCols);
+      if (this.timeViewValue !== "day") {
+        this.headerHeight = 160;
+        colLength = this.hourCols.length;
+        this.$refs.headHour.reloadColumn(this.hourCols);
+      } else {
+        this.headerHeight = 120;
+      }
+      for (let i = 0; i < colLength; i++) {
+        this.lines.push(i * this.colWidth);
+      }
+      bodyCols.push({
+        field: "content",
+        title: "内容",
+        width: contentWidth,
+        className: "custom-cell",
+        slots: {
+          default: "content"
+        }
+      });
+      this.$refs.bodyGrid.reloadColumn(bodyCols);
+      //   this.$refs.lineArea.style.marginLeft =
+      //       ((this.fixedColWidth-this.colWidth)) + 'px'
+    },
+    loadData(rows) {
+      this.rows = rows;
+      this.initContent();
+    },
+    initContent() {
+      let splitMinutes = XEUtils.multiply(this.splitHour, 60);
+      let minDateTime = this.dateRange[0];
+      for (let i = 0; i < this.rows.length; i++) {
+        this.rows[i]["content"] = "";
+        for (let j = 0; j < this.rows[i].items.length; j++) {
+          let diffMiniutes = moment(this.rows[i].items[j].start).diff(
+            moment(minDateTime),
+            "minutes"
+          );
+          let tempLeft = XEUtils.divide(
+            XEUtils.multiply(this.colWidth, diffMiniutes),
+            splitMinutes
+          );
+          //计算左边距
+          this.rows[i].items[j]["left"] = tempLeft;
+          //计算宽度
+          let ordMinutes = moment(this.rows[i].items[j].end).diff(
+            moment(this.rows[i].items[j].start),
+            "minutes"
+          );
+          let tempWidth = XEUtils.divide(
+            XEUtils.multiply(this.colWidth, ordMinutes),
+            splitMinutes
+          );
+          this.rows[i].items[j]["width"] = tempWidth;
+
+          // for (let k = 0; k < this.rows[i].items[j].nodes.length; k++) {
+          //   let nodeDiffMiniutes = moment(
+          //     this.rows[i].items[j].nodes[k].start
+          //   ).diff(moment(minDateTime), "minutes");
+          //   let nodeTempLeft = XEUtils.divide(
+          //     XEUtils.multiply(this.colWidth, nodeDiffMiniutes),
+          //     splitMinutes
+          //   );
+          //   this.rows[i].items[j].nodes[k]["left"] = nodeTempLeft;
+          //   //计算宽度
+          //   let nodeOrdMinutes = moment(this.rows[i].items[j].nodes[k].end).diff(
+          //     moment(this.rows[i].items[j].nodes[k].start),
+          //     "minutes"
+          //   );
+          //   let nodeTempWidth = XEUtils.divide(
+          //     XEUtils.multiply(this.colWidth, nodeOrdMinutes),
+          //     splitMinutes
+          //   );
+          //   this.rows[i].items[j].nodes[k]["width"] = nodeTempWidth;
+          // }
+        }
+      }
+      this.lineHeight = this.rows.length * 40;
+      this.$refs.bodyGrid.reloadData(this.rows);
+    },
+    ganttBarMouseEnter(evt, ordInfo, rowIndex) {
+      this.ganttBarTooltip.left = evt.clientX; //ordInfo.left + this.eqpWidth
+      this.ganttBarTooltip.top =
+        evt.clientY + evt.target.offsetHeight - evt.offsetY; // (rowIndex + 1) * this.rowHeight
+      this.ganttBarTooltip.item = ordInfo;
+      this.ganttBarTooltip.show = true;
+      this.$emit("mouseEnter", ordInfo);
+    },
+    ganttBarMouseLeave(evt, ordInfo) {
+      this.ganttBarTooltip.show = false;
+      this.$emit("mouseLeave", ordInfo);
+    },
+    bodyScroll(scrollInfo) {
+      if (scrollInfo.isX === true) {
+        // this.$refs.lineArea.style.marginLeft =
+        //   (scrollInfo.scrollLeft-(this.fixedColWidth-this.colWidth)) * -1 + 'px'
+
+        // this.$refs.headMonth.scrollTo(scrollInfo.scrollLeft)
+        this.$refs.headDay.scrollTo(scrollInfo.scrollLeft);
+        this.$refs.headHour.scrollTo(scrollInfo.scrollLeft);
+      }
+    },
+    setCurrentRow(row) {
+      this.$refs.bodyGrid.setCurrentRow(row);
+    },
+    getTableData() {
+      return this.$refs.bodyGrid.getTableData().fullData;
+    },
+    cellClick(scope) {
+      this.$emit("cellClick", scope);
+    },
+    onSearch() {
+      this.$emit("search", this.searchValue);
+    },
+    scrollRow(row) {
+      this.$refs.bodyGrid.scrollToRow(row);
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.custom-cell > div {
+  // background:blue;
+  // background-color: blue !important;
+  // overflow: unset !important;
+  padding-left: 0px !important;
+  padding-right: 0px !important;
+}
+.head-grid
+  .vxe-table
+  .vxe-table--render-wrapper
+  .vxe-table--main-wrapper
+  .vxe-table--body-wrapper {
+  height: 0px !important;
+}
+.head-grid .vxe-table .vxe-table--empty-content {
+  display: none;
+}
+.header-cell-day .vxe-cell {
+  padding-left: 5px !important;
+  padding-right: 5px !important;
+}
+.mytable-scrollbar .vxe-body--column.col-blue {
+  background-color: #e6f7ff;
+  color: #ffffff;
+  cursor: pointer;
+  /* font-weight: bold; */
+}
+</style>
+<style lang="scss" scoped>
+.gantt-schedule {
+  position: absolute;
+  top: 0px;
+  z-index: 2;
+  // float:left;
+  height: 40px;
+  // cursor: pointer;
+  // overflow: hidden;
+  border-radius: 5px;
+}
+// .gantt-schedule :hover {
+//   background-color: darkgrey;
+// }
+.gantt-ord {
+  position: relative;
+  z-index: 3;
+  cursor: pointer;
+}
+
+.gantt-line-area {
+  position: absolute;
+  z-index: 1;
+  margin-left: -1px;
+  margin-top: -20px;
+}
+.gantt-line {
+  position: absolute;
+  width: 1px;
+  background-color: #e8eaec;
+}
+.gantt-bar-tooltip {
+  position: fixed;
+  z-index: 10;
+  border: 1px solid #0b0b0b;
+  padding: 3px;
+  border-radius: 3px;
+  //   background: red;
+}
+/*滚动条整体部分*/
+.mytable-scrollbar ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+  z-index: 10;
+}
+/*滚动条的轨道*/
+.mytable-scrollbar ::-webkit-scrollbar-track {
+  background-color: #ffffff;
+  z-index: 10;
+}
+/*滚动条里面的小方块，能向上向下移动*/
+.mytable-scrollbar ::-webkit-scrollbar-thumb {
+  background-color: #bfbfbf;
+  border-radius: 5px;
+  border: 1px solid #f1f1f1;
+  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  z-index: 10;
+}
+.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
+  background-color: #a8a8a8;
+  z-index: 10;
+}
+.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
+  background-color: #787878;
+  z-index: 10;
+}
+/*边角，即两个滚动条的交汇处*/
+.mytable-scrollbar ::-webkit-scrollbar-corner {
+  background-color: #ffffff;
+  z-index: 10;
+}
+</style>
+<style>
+.mytable-scrollbar .vxe-body--column.col-red {
+  background-color: rgb(227, 9, 53);
+  color: rgb(55, 55, 55);
+  /* font-weight: bold; */
+}
+.mytable-scrollbar .vxe-body--column.col-orange {
+  background-color: rgb(237, 216, 20);
+  color: rgb(55, 55, 55);
+  /* font-weight: bold; */
+}
+/*.mytable-scrollbar .vxe-body--column.col-grey {*/
+/*  background-color: rgb(140, 140, 138);*/
+/*  color: rgb(55, 55, 55);*/
+/*  !* font-weight: bold; *!*/
+/*}*/
+/*.mytable-scrollbar .vxe-body--column.col-blue {*/
+/*  background-color: #1890ff;*/
+/*  color: rgb(55, 55, 55);*/
+/*  !* font-weight: bold; *!*/
+/*}*/
+.row-blue {
+  background-color: lightskyblue;
+}
+</style>