doway-coms 2.1.2 → 2.1.3

package/packages/BaseGantt/src/index.vue

@@ -1,608 +1,608 @@
-<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="gantt-bar"
-              @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
-        }
-      }
-      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-bar {
-  position: absolute;
-  top: 8px;
-  z-index: 2;
-  // float:left;
-  height: 30px;
-  cursor: pointer;
-  overflow: hidden;
-  border-radius: 5px;
-}
-.gantt-bar :hover {
-  background-color: darkgrey;
-}
-
-.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="gantt-bar"
+              @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
+        }
+      }
+      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-bar {
+  position: absolute;
+  top: 8px;
+  z-index: 2;
+  // float:left;
+  height: 30px;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: 5px;
+}
+.gantt-bar :hover {
+  background-color: darkgrey;
+}
+
+.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>