cnhis-design-vue 2.1.78 → 2.1.80

package/packages/fabric-chart/src/fabric-chart/FabricTextGroup.vue

@@ -1,651 +1,651 @@
-<template>
-  <div class="text-group">
-    <MouseRightClick v-show="isRightVisible" :getContainer="getContainer" :nodeList="rightClickNode" :rightPos="rightPos" @nodeClick="handleRightClick" @closeRight="isRightVisible = false" />
-    <DropPopup v-show="isDropVisible" :val="dropVal" :dropPos="dropPos" />
-  </div>
-</template>
-
-<script>
-import fabricCommon from '../mixins/fabricCommon';
-import draw from '../mixins/draw';
-import defaultVaule from '../const/defaultVaule';
-import DropPopup from '../components/DropPopup';
-import MouseRightClick from '../components/MouseRightClick';
-import eventCommon from '../mixins/eventCommon';
-import Bus from '../utils/bus';
-
-const rightClickNode = [
-  { name: '修改', type: 'edit' },
-  { name: '删除', type: 'delete' }
-];
-
-let topTotalList = [];
-const getTopTotalList = (tree, topTotalList) => {
-  tree.forEach(item => {
-    if (item?.children?.length) {
-      getTopTotalList(item.children, topTotalList);
-    } else {
-      const obj = JSON.parse(JSON.stringify(item));
-      topTotalList.push(obj?.total || '');
-    }
-  });
-};
-
-export default {
-  name: 'fabric-text-group',
-  components: {
-    DropPopup,
-    MouseRightClick
-  },
-  mixins: [fabricCommon, draw, eventCommon],
-  props: {
-    templateData: {
-      type: Object,
-      required: true
-    }
-  },
-  watch: {
-    'templateData.other': {
-      handler(value) {
-        if (value) {
-          this.$nextTick(() => {
-            this.removeOther();
-            this.drawTextDataGroup(value);
-            // this.canvas.renderAll();
-          });
-        }
-      },
-      deep: true
-    },
-    isRightVisible: {
-      handler(value) {
-        Bus.$emit('mouseoverTarget', value);
-      }
-    }
-  },
-  data() {
-    return {
-      leftStartX: 0,
-      isDropVisible: false,
-      dropVal: {},
-      dropPos: { clientX: 0, clientY: 0 },
-      rightPos: { clientX: 0, clientY: 0 },
-      rightClickNode: [],
-      activeEvent: null // 当前可右键活动的对象
-    };
-  },
-  mounted() {},
-  computed: {
-    girdLineStyle() {
-      return Object.assign({}, defaultVaule.borderStyle, this.templateData.borderStyle || {});
-    },
-    eventStyle() {
-      return this.propItems.eventStyle;
-    }
-  },
-  methods: {
-    init() {
-      if (this.propItems.treeList?.length) {
-        this.topTreeTextGroup(this.propItems.treeList);
-        if (this.propItems.topTotal?.width) {
-          topTotalList = [];
-          getTopTotalList(this.templateData.top.list, topTotalList);
-          this.drawTopTotal(topTotalList);
-        }
-      }
-      this.templateData.left && this.drawLeftScaleGroup(this.templateData.left);
-      this.templateData.other && this.drawTextDataGroup(this.templateData.other);
-      this.eventStyle.evented && this.createEvent();
-      this.drawBorder();
-      // this.canvas.renderAll();
-      this.templateData.bottom && this.drawBottomTextDataGroup(this.templateData.bottom);
-    },
-    drawBorder() {
-      const { endX, canvasWidth, canvasHeight, topTotal } = this.propItems;
-      const curEndX = topTotal.width ? canvasWidth : endX;
-      // 右 下两条线宽度和高度顶格不显示未发现具体原因 暂时减一处理
-      // 上边线
-      this.canvas.add(this.drawLine([0, 0, curEndX, 0], { ...this.girdLineStyle }));
-      // 右边线
-      this.canvas.add(this.drawLine([topTotal.width ? curEndX - 1 : curEndX, 0, topTotal.width ? curEndX - 1 : curEndX, canvasHeight], { ...this.girdLineStyle }));
-      // 下边线
-      this.canvas.add(this.drawLine([0, canvasHeight - 1, curEndX, canvasHeight - 1], { ...this.girdLineStyle }));
-      // 左侧边框线
-      this.canvas.add(this.drawLine([0, 0, 0, canvasHeight], { ...this.girdLineStyle }));
-    },
-    createEvent() {
-      this.canvas.on('mouse:up', event => {
-        if (event.button === 3) {
-          const { x, y } = event.pointer;
-          if (this.isGridLimit(x, y)) {
-            this.activeEvent = event;
-            !this.isAddEventListenerContextmenu && this.canvas.wrapperEl.addEventListener('contextmenu', this.addEventListenerContextmenu, true);
-            this.isAddEventListenerContextmenu = true;
-          }
-        }
-      });
-    },
-    // 打开右键菜单
-    openRightModal() {
-      const { clientX, pageX, clientY, pageY } = this.activeEvent.e;
-      this.rightPos = {
-        clientX: clientX ?? pageX,
-        clientY: clientY ?? pageY
-      };
-      this.isRightVisible = false;
-      const target = this.activeEvent.target;
-      const id = target?.id || '';
-      this.$nextTick(() => {
-        if (id && id.includes('_other')) {
-          this._currentPoint = target || '';
-          this.rightClickNode = Object.freeze(rightClickNode.slice());
-          this.isRightVisible = true;
-        }
-      });
-    },
-    // 关闭右键菜单，打开添加节点弹窗表单
-    handleRightClick({ type }) {
-      this.isRightVisible = false;
-      const text = this._currentPoint;
-      this._currentPoint = '';
-      const obj = {
-        type: text.type,
-        index: text.index,
-        dataIndex: text.dataIndex
-      };
-      this.$emit(`${type}Other`, obj);
-    },
-    removeOther() {
-      this.canvas.forEachObject(obj => {
-        if (obj.id && obj.id.includes('_other')) {
-          this.canvas.remove(obj);
-        }
-      });
-    },
-    drawTopTotal(topTotalList) {
-      const { endX, canvasWidth, yCellHeightTop, topTotal, endYTop, spaceHeight, originYTop } = this.propItems;
-      const textList = [];
-      const totalWidth = canvasWidth - endX;
-      const left = endX + totalWidth / 2;
-      topTotalList.forEach((v, i) => {
-        const top = i * yCellHeightTop + yCellHeightTop / 2 + originYTop;
-        const text = v
-          ? new this.fabric.Text(String(v), {
-              ...defaultVaule.style,
-              ...(topTotal.style || defaultVaule.textStyle),
-              left,
-              top,
-              originX: 'center',
-              originY: 'center'
-            })
-          : null;
-        if (!text) return;
-        if (text.width > totalWidth)
-          text.set({
-            originX: 'right',
-            left: canvasWidth - 1
-          });
-        textList.push(text);
-      });
-      const title = this.drawTextGroup(
-        { width: totalWidth, height: spaceHeight, strokeWidth: 1 },
-        { text: String(topTotal.title), ...(topTotal.style || defaultVaule.textStyle) },
-        { left: endX, top: originYTop > 0 ? 0 : endYTop }
-      );
-      this.canvas.add(...textList, title);
-    },
-    topTreeTextGroup(list) {
-      list.forEach(item => {
-        if (item?.children?.length) {
-          this.canvas.add(
-            this.drawTextGroup(
-              { width: item.width, height: item.height, strokeWidth: 1 },
-              { text: String(item.title), ...(this.templateData.top.treeTableTextStyle || {}) },
-              { left: item.left, top: item.top }
-            )
-          );
-          this.topTreeTextGroup(item.children);
-        } else {
-          // 此处的文本text的中心源的定位由于draw.js中封装反向的，所以此时文本需要向左排列originX值应为right
-          this.canvas.add(
-            this.drawTextGroup(
-              { width: item.width, height: item.height, strokeWidth: 1 },
-              { text: String(item.title), ...(this.templateData.top.treeTableTextStyle || {}), originX: 'right', left: -Math.floor(item.width / 2) + 5 },
-              { left: item.left, top: item.top }
-            )
-          );
-        }
-      });
-    },
-
-    // 绘制x轴下方的数据
-    drawTextDataGroup(obj) {
-      if (obj.list) {
-        this.drawTextDataGroupList(obj.list);
-      }
-      if (obj.colList) {
-        this.drawTextDataGroupColList(obj.colList);
-      }
-    },
-    drawTextDataGroupColList(colList) {
-      const { originY } = this.propItems;
-      let textList = [];
-      colList.forEach((item, index) => {
-        const baseTop = originY + (item.marginTop || 10);
-        if (this.isLimit(item.scalevalue)) {
-          item.dataList.forEach((v, i) => {
-            const top = baseTop + i * (item.lineHeight || 15);
-            const text = new this.fabric.Text(String(v.value), {
-              ...defaultVaule.style,
-              ...defaultVaule.textStyle,
-              ...item.style,
-              originX: 'left',
-              originY: 'center',
-              left: this.cumputedX(item.scalevalue),
-              top,
-              lockMovementX: true,
-              lockMovementY: true,
-              dataIndex: index,
-              index: i,
-              type: 'colList',
-              id: `${index}_${i}_other_${Date.now()}`,
-              name: v.value,
-              ...this.eventStyle
-            });
-            text.hasControls = text.hasBorders = false;
-            this.setPopup(text);
-            textList.push(text);
-          });
-        }
-      });
-      this.canvas.add(...textList);
-    },
-    async drawTextDataGroupList(list) {
-      let textList = [];
-      const { originX, originY } = this.propItems;
-      let top = originY + 10;
-      for (let index = 0, len = list.length; index < len; index++) {
-        const item = list[index];
-        const marginLeft = item.titleStyle?.marginLeft || 8;
-        const left = originX - marginLeft; // 防止最左边的数据与名称显示重合了
-
-        if (list[index - 1]) {
-          top += item.lineHeight || 15;
-        }
-        const originOptions = { originX: 'right', left, top };
-        const title = new this.fabric.Text(String(item.title), {
-          ...defaultVaule.style,
-          ...defaultVaule.textStyle,
-          ...item.style,
-          ...(item.titleStyle || {}),
-          originY: 'center',
-          id: `${index}_other_${Date.now()}`,
-          dataIndex: index,
-          type: 'list',
-          hasControls: false,
-          hasBorders: false,
-          ...originOptions,
-          ...this.eventStyle,
-          dataList: []
-        });
-        this.setMovingEvent(title, originOptions);
-        textList.push(title);
-        const { icon: _icon = { type: 'circle' }, dataList } = item || {};
-        for (let i = 0, len = dataList.length; i < len; i++) {
-          const v = dataList[i];
-          if (this.isLimit(v.time)) {
-            const commonOptions = {
-              originY: 'center',
-              top,
-              dataIndex: index,
-              index: i,
-              type: 'list'
-            };
-            const left = this.cumputedX(v.time);
-            title.dataList.push(left);
-            const icon = await this.createPoint(_icon.type, {
-              originX: 'center',
-              left,
-              ...item.style,
-              ...(item.style ? { stroke: item.style.fill } : {}),
-              ...(_icon.style || {}),
-              ...commonOptions
-            });
-            const text = new this.fabric.Text(String(v.value), {
-              ...defaultVaule.style,
-              ...defaultVaule.textStyle,
-              ...item.style,
-              left: left + icon.width / 2,
-              name: v.value,
-              ...commonOptions
-            });
-            const groupObj = new this.fabric.Group([icon, text], {
-              id: `${index}_${i}_other_${Date.now()}`,
-              lockMovementX: true,
-              lockMovementY: true,
-              ...commonOptions,
-              ...this.eventStyle,
-              realLeft: left
-            });
-            groupObj.hasControls = groupObj.hasBorders = false;
-            this.setPopup(groupObj);
-            textList.push(groupObj);
-          }
-        }
-      }
-      this.canvas.add(...textList);
-    },
-    setMovingEvent(point) {
-      const { originX, originY, endX, endY } = this.propItems;
-      const isLimit = () => point.left >= originX && point.left <= endX && point.top >= originY && point.top <= endY;
-      let cloneObj;
-      point.on('moving', () => {
-        point.set('originX', 'center');
-        !point.isClone &&
-          point.clone(obj => {
-            obj.set('originX', 'right');
-            this.canvas.add(obj);
-            cloneObj = obj;
-            point.isClone = true;
-          });
-        if (isLimit()) {
-          Bus.$emit('mouseoverTarget', true);
-          this.showDrapPopup(point, true);
-        } else {
-          !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
-          this.isDropVisible = false;
-        }
-      });
-      point.on('moved', () => {
-        this.canvas.remove(cloneObj);
-        point.isClone = false;
-        this.removeOther();
-        this.drawTextDataGroup(this.templateData.other);
-        !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
-        this.isDropVisible = false;
-        if (isLimit()) {
-          const { type, dataIndex, left, dataList } = point;
-          const time = this.getXValue(left);
-          const index = dataList.findIndex(_left => _left > left);
-          // 使用定时器，是因为：防止上方移除重绘过慢新增完后再次触发移除重绘导致页面多次重绘节点
-          setTimeout(() => {
-            this.$emit('addOhter', {
-              type,
-              dataIndex,
-              index: !~index ? (dataList.length ? dataList.length - 1 : 0) : index,
-              data: {
-                time
-              }
-            });
-          });
-        }
-      });
-    },
-    setPopup(point) {
-      point.on('mouseover', () => {
-        Bus.$emit('mouseoverTarget', true);
-        this.showDrapPopup(point, true);
-      });
-      point.on('mouseout', () => {
-        !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
-        this.isDropVisible = false;
-      });
-    },
-    // 判断当前时间是否超出网格区域
-    isLimit(value) {
-      const { xScaleList } = this.propItems;
-      const minTime = Math.min(...xScaleList);
-      const maxTime = Math.max(...xScaleList);
-      const time = new Date(value).getTime();
-      return time >= minTime && time <= maxTime;
-    },
-    removeMark() {
-      this.canvas.forEachObject(obj => {
-        if (obj.type && obj.type === 'mark') {
-          this.canvas.remove(obj);
-        }
-      });
-    },
-    // 底部标记
-    drawBottomTextDataGroup(obj) {
-      const { endX, originX, endY, canvasHeight, topTotal } = this.propItems;
-      if (!obj.list || endY === canvasHeight) {
-        return;
-      }
-
-      topTotal.width && this.canvas.add(this.drawLine([endX, endY - 1, endX, canvasHeight], { ...this.defaultRectStyle }));
-      // const textList = [];
-      const marginLeft = this.templateData.left.leftYScalevalue.spaceGridNumber || defaultVaule.spaceGridNumber;
-      const left = originX - marginLeft * 4; // 默认减去4倍的左边距，防止最左边的数据与名称显示重合了
-      const title = new this.fabric.Text(String(obj.title), {
-        ...defaultVaule.style,
-        ...defaultVaule.textStyle,
-        ...obj.style,
-        originX: 'right',
-        originY: 'center',
-        left,
-        top: endY + (canvasHeight - endY) / 2,
-        type: 'mark'
-      });
-      this.canvas.add(title);
-      // textList.push(title);
-      const baseY = endY + 2; // 目前固定10像素的下边距
-      const baseYLimit = endY - 2; // 目前固定10像素的上边距
-      const lineHeightText = (obj.style?.fontSize || 12) + 2;
-      const lineHeightImg = (obj.iconStyle?.height || 12) + 2;
-      const lineHeightSeq = (obj.seqStyle?.circle?.radius || 9) * 2 + 2;
-      const addCanvas = point => {
-        point.hasControls = point.hasBorders = false;
-        this.pointEvent(point);
-        this.canvas.add(point);
-        // this.canvas.requestRenderAll();
-      };
-      const setTop = (lineHeight, i, condition) => {
-        if (!~condition.limitIndex) {
-          condition.y += i === 0 ? lineHeight / 2 : lineHeight;
-          if (condition.y >= canvasHeight - lineHeight / 2) {
-            condition.limitIndex++;
-            if (condition.limitIndex === 0) {
-              condition.y = baseYLimit;
-              condition.y -= lineHeight / 2;
-            }
-          }
-        } else {
-          condition.y -= lineHeight;
-        }
-        return condition.y;
-      };
-      obj.list.forEach((item, index) => {
-        const condition = {
-          limitIndex: -1, // 标志点是否往上排列的标志，大于-1则表示需要往上排列
-          y: baseY
-        };
-        const x = this.cumputedX(item[0]);
-        if (this.isLimit(item[0])) {
-          item[1].forEach(async (v, i) => {
-            const common = {
-              left: x,
-              originX: 'center',
-              originY: 'center',
-              data: v.data || {},
-              other: v.other || {},
-              time: item[0],
-              name: v.name,
-              type: 'mark'
-            };
-
-            const eventStyle = !this.eventStyle.evented
-              ? {
-                  lockMovementX: true,
-                  lockMovementY: true
-                }
-              : {};
-
-            if (this.isObject(v) && !v.value) {
-              common.top = setTop(lineHeightImg, i, condition);
-              const option = Object.assign({}, obj.iconStyle || {}, v || {}, {
-                ...common,
-                ...eventStyle
-              });
-              let ele;
-              if (v?.iconClassName) {
-                ele = await this.createImage(v.iconClassName, v);
-              }
-              const img = await this.createPoint(v?.url || v?.iconClassName ? 'img' : v.type, {
-                ele: ele || '',
-                ...option
-              });
-              addCanvas(img);
-            } else if (v.value) {
-              if (v.seq) {
-                common.top = setTop(lineHeightSeq, i, condition);
-                // 标记增加序号
-                const circle = await this.createPoint('circle', {
-                  ...common,
-                  radius: 5,
-                  strokeWidth: 1,
-                  stroke: '#000',
-                  fill: 'transparent',
-                  ...(obj.seqStyle?.circle || {})
-                });
-                const text = new this.fabric.Text(String(v.value), {
-                  ...defaultVaule.textStyle,
-                  ...common,
-                  ...(obj.seqStyle?.text || {})
-                });
-                const group = new this.fabric.Group([circle, text], {
-                  ...common,
-                  // hoverCursor: 'default',
-                  ...eventStyle
-                });
-                addCanvas(group);
-              } else {
-                common.top = setTop(lineHeightText, i, condition);
-                const text = new this.fabric.Text(String(v.value), {
-                  ...defaultVaule.textStyle,
-                  ...obj.style,
-                  ...common,
-                  ...eventStyle
-                });
-                addCanvas(text);
-              }
-            }
-          });
-        }
-      });
-      // this.canvas.add(...textList);
-    },
-    pointEvent(point) {
-      this.setPopup(point);
-      // 移动中 实时更新相关联的线的坐标
-      if (this.eventStyle.evented) {
-        point.on('moving', () => {
-          this.moveLimit(point);
-          // this.canvas.renderAll();
-          this.showDrapPopup(point);
-        });
-        point.on('moved', () => {
-          this.isDropVisible = false;
-          const value = {
-            data: point.data,
-            oldVal: point.time,
-            newVal: this.getXValue(point.left)
-          };
-          this.$emit('markChange', value);
-        });
-      }
-    },
-    moveLimit(point) {
-      point.setCoords();
-      const { originX, endX, originY, canvasHeight } = this.propItems;
-      const bottom = this.templateData.bottom;
-      // 如果是起始标记，如入手术室时间
-      if (point.other?.isStart) {
-        const newList = JSON.parse(JSON.stringify(bottom.list)).sort((a, b) => {
-          return new Date(a[0]).getTime() - new Date(b[0]).getTime();
-        });
-        const obj = newList.find(v => {
-          const isStart = v[1].some(k => k.other?.isStart);
-          return !isStart && new Date(v[0]).getTime() >= new Date(point.time).getTime();
-        });
-        const limitRight = obj ? this.cumputedX(obj[0]) : endX;
-        if (point.left > limitRight) {
-          point.set('left', limitRight);
-        }
-        if (point.left < originX) {
-          point.set('left', originX);
-        }
-      } else {
-        const startList = bottom.list.find(v => v[1].some(k => k.other?.isStart));
-        const leftId = point.other?.limitLeft;
-        const limitLeftTime = leftId ? bottom.list.find(v => v[1].some(k => k.data?.id && k.data?.id === leftId))[0] : null;
-        const rightId = point.other?.limitRight;
-        const limitRightTime = rightId ? bottom.list.find(v => v[1].some(k => k.data?.id && k.data?.id === rightId))[0] : null;
-        const limitLeft =
-          (limitLeftTime && !startList) || (limitLeftTime && startList && new Date(limitLeftTime).getTime() >= new Date(startList[0]).getTime())
-            ? this.cumputedX(limitLeftTime)
-            : (!limitLeftTime && startList) || (limitLeftTime && startList && new Date(limitLeftTime).getTime() < new Date(startList[0]).getTime())
-            ? this.cumputedX(startList[0])
-            : originX;
-        const limitRight = limitRightTime ? this.cumputedX(limitRightTime) : endX;
-        if (point.left > limitRight) {
-          point.set('left', limitRight);
-        }
-        if (point.left < limitLeft) {
-          point.set('left', limitLeft);
-        }
-      }
-      if (point.top > canvasHeight - 14) {
-        point.set('top', canvasHeight - 14);
-      }
-      if (point.top < originY) {
-        point.set('top', originY);
-      }
-    },
-    showDrapPopup(point) {
-      this.isDropVisible = true;
-      this.dropPos = {
-        left: point.left,
-        top: point.top,
-        margin: { top: this.propItems.yCellHeight }
-      };
-      const x = arguments.length > 1 && point.other?.viewTime ? point.other.viewTime : this.getXValue(point.realLeft || point.left);
-      this.dropVal = {
-        title: point.name || '',
-        list: [{ id: '1', name: '时间', value: x }]
-      };
-    },
-
-    drawLeftScaleGroup(dataLeft) {
-      this.drawLeftTitle(dataLeft);
-      const { canvasHeight, originX, originY, treeTableminCellWidth } = this.propItems;
-      let rect = new this.fabric.Rect({
-        left: treeTableminCellWidth,
-        top: originY,
-        width: originX - treeTableminCellWidth,
-        height: canvasHeight - originY,
-        ...defaultVaule.rectStyle,
-        ...defaultVaule.style,
-        originX: 'left',
-        originY: 'top'
-      });
-      rect.sendToBack(); // 向下跳底层
-      this.canvas.add(rect);
-    },
-    drawLeftTitle(dataLeft) {
-      if (dataLeft.title) {
-        this.canvas.add(
-          this.drawTextGroup(
-            { width: this.propItems.treeTableminCellWidth, height: this.propItems.canvasHeight - this.propItems.originY },
-            { text: String(dataLeft.title.split('').join('\n')), ...defaultVaule.textStyle, ...dataLeft.titleStyle },
-            { left: 0, top: this.propItems.originY }
-          )
-        );
-      }
-    }
-  }
-  // render(h) {
-  //   return this.$slots.default ? h('div', this.$slots.default) : undefined;
-  // }
-};
-</script>
+<template>
+  <div class="text-group">
+    <MouseRightClick v-show="isRightVisible" :getContainer="getContainer" :nodeList="rightClickNode" :rightPos="rightPos" @nodeClick="handleRightClick" @closeRight="isRightVisible = false" />
+    <DropPopup v-show="isDropVisible" :val="dropVal" :dropPos="dropPos" />
+  </div>
+</template>
+
+<script>
+import fabricCommon from '../mixins/fabricCommon';
+import draw from '../mixins/draw';
+import defaultVaule from '../const/defaultVaule';
+import DropPopup from '../components/DropPopup';
+import MouseRightClick from '../components/MouseRightClick';
+import eventCommon from '../mixins/eventCommon';
+import Bus from '../utils/bus';
+
+const rightClickNode = [
+  { name: '修改', type: 'edit' },
+  { name: '删除', type: 'delete' }
+];
+
+let topTotalList = [];
+const getTopTotalList = (tree, topTotalList) => {
+  tree.forEach(item => {
+    if (item?.children?.length) {
+      getTopTotalList(item.children, topTotalList);
+    } else {
+      const obj = JSON.parse(JSON.stringify(item));
+      topTotalList.push(obj?.total || '');
+    }
+  });
+};
+
+export default {
+  name: 'fabric-text-group',
+  components: {
+    DropPopup,
+    MouseRightClick
+  },
+  mixins: [fabricCommon, draw, eventCommon],
+  props: {
+    templateData: {
+      type: Object,
+      required: true
+    }
+  },
+  watch: {
+    'templateData.other': {
+      handler(value) {
+        if (value) {
+          this.$nextTick(() => {
+            this.removeOther();
+            this.drawTextDataGroup(value);
+            // this.canvas.renderAll();
+          });
+        }
+      },
+      deep: true
+    },
+    isRightVisible: {
+      handler(value) {
+        Bus.$emit('mouseoverTarget', value);
+      }
+    }
+  },
+  data() {
+    return {
+      leftStartX: 0,
+      isDropVisible: false,
+      dropVal: {},
+      dropPos: { clientX: 0, clientY: 0 },
+      rightPos: { clientX: 0, clientY: 0 },
+      rightClickNode: [],
+      activeEvent: null // 当前可右键活动的对象
+    };
+  },
+  mounted() {},
+  computed: {
+    girdLineStyle() {
+      return Object.assign({}, defaultVaule.borderStyle, this.templateData.borderStyle || {});
+    },
+    eventStyle() {
+      return this.propItems.eventStyle;
+    }
+  },
+  methods: {
+    init() {
+      if (this.propItems.treeList?.length) {
+        this.topTreeTextGroup(this.propItems.treeList);
+        if (this.propItems.topTotal?.width) {
+          topTotalList = [];
+          getTopTotalList(this.templateData.top.list, topTotalList);
+          this.drawTopTotal(topTotalList);
+        }
+      }
+      this.templateData.left && this.drawLeftScaleGroup(this.templateData.left);
+      this.templateData.other && this.drawTextDataGroup(this.templateData.other);
+      this.eventStyle.evented && this.createEvent();
+      this.drawBorder();
+      // this.canvas.renderAll();
+      this.templateData.bottom && this.drawBottomTextDataGroup(this.templateData.bottom);
+    },
+    drawBorder() {
+      const { endX, canvasWidth, canvasHeight, topTotal } = this.propItems;
+      const curEndX = topTotal.width ? canvasWidth : endX;
+      // 右 下两条线宽度和高度顶格不显示未发现具体原因 暂时减一处理
+      // 上边线
+      this.canvas.add(this.drawLine([0, 0, curEndX, 0], { ...this.girdLineStyle }));
+      // 右边线
+      this.canvas.add(this.drawLine([topTotal.width ? curEndX - 1 : curEndX, 0, topTotal.width ? curEndX - 1 : curEndX, canvasHeight], { ...this.girdLineStyle }));
+      // 下边线
+      this.canvas.add(this.drawLine([0, canvasHeight - 1, curEndX, canvasHeight - 1], { ...this.girdLineStyle }));
+      // 左侧边框线
+      this.canvas.add(this.drawLine([0, 0, 0, canvasHeight], { ...this.girdLineStyle }));
+    },
+    createEvent() {
+      this.canvas.on('mouse:up', event => {
+        if (event.button === 3) {
+          const { x, y } = event.pointer;
+          if (this.isGridLimit(x, y)) {
+            this.activeEvent = event;
+            !this.isAddEventListenerContextmenu && this.canvas.wrapperEl.addEventListener('contextmenu', this.addEventListenerContextmenu, true);
+            this.isAddEventListenerContextmenu = true;
+          }
+        }
+      });
+    },
+    // 打开右键菜单
+    openRightModal() {
+      const { clientX, pageX, clientY, pageY } = this.activeEvent.e;
+      this.rightPos = {
+        clientX: clientX ?? pageX,
+        clientY: clientY ?? pageY
+      };
+      this.isRightVisible = false;
+      const target = this.activeEvent.target;
+      const id = target?.id || '';
+      this.$nextTick(() => {
+        if (id && id.includes('_other')) {
+          this._currentPoint = target || '';
+          this.rightClickNode = Object.freeze(rightClickNode.slice());
+          this.isRightVisible = true;
+        }
+      });
+    },
+    // 关闭右键菜单，打开添加节点弹窗表单
+    handleRightClick({ type }) {
+      this.isRightVisible = false;
+      const text = this._currentPoint;
+      this._currentPoint = '';
+      const obj = {
+        type: text.type,
+        index: text.index,
+        dataIndex: text.dataIndex
+      };
+      this.$emit(`${type}Other`, obj);
+    },
+    removeOther() {
+      this.canvas.forEachObject(obj => {
+        if (obj.id && obj.id.includes('_other')) {
+          this.canvas.remove(obj);
+        }
+      });
+    },
+    drawTopTotal(topTotalList) {
+      const { endX, canvasWidth, yCellHeightTop, topTotal, endYTop, spaceHeight, originYTop } = this.propItems;
+      const textList = [];
+      const totalWidth = canvasWidth - endX;
+      const left = endX + totalWidth / 2;
+      topTotalList.forEach((v, i) => {
+        const top = i * yCellHeightTop + yCellHeightTop / 2 + originYTop;
+        const text = v
+          ? new this.fabric.Text(String(v), {
+              ...defaultVaule.style,
+              ...(topTotal.style || defaultVaule.textStyle),
+              left,
+              top,
+              originX: 'center',
+              originY: 'center'
+            })
+          : null;
+        if (!text) return;
+        if (text.width > totalWidth)
+          text.set({
+            originX: 'right',
+            left: canvasWidth - 1
+          });
+        textList.push(text);
+      });
+      const title = this.drawTextGroup(
+        { width: totalWidth, height: spaceHeight, strokeWidth: 1 },
+        { text: String(topTotal.title), ...(topTotal.style || defaultVaule.textStyle) },
+        { left: endX, top: originYTop > 0 ? 0 : endYTop }
+      );
+      this.canvas.add(...textList, title);
+    },
+    topTreeTextGroup(list) {
+      list.forEach(item => {
+        if (item?.children?.length) {
+          this.canvas.add(
+            this.drawTextGroup(
+              { width: item.width, height: item.height, strokeWidth: 1 },
+              { text: String(item.title), ...(this.templateData.top.treeTableTextStyle || {}) },
+              { left: item.left, top: item.top }
+            )
+          );
+          this.topTreeTextGroup(item.children);
+        } else {
+          // 此处的文本text的中心源的定位由于draw.js中封装反向的，所以此时文本需要向左排列originX值应为right
+          this.canvas.add(
+            this.drawTextGroup(
+              { width: item.width, height: item.height, strokeWidth: 1 },
+              { text: String(item.title), ...(this.templateData.top.treeTableTextStyle || {}), originX: 'right', left: -Math.floor(item.width / 2) + 5 },
+              { left: item.left, top: item.top }
+            )
+          );
+        }
+      });
+    },
+
+    // 绘制x轴下方的数据
+    drawTextDataGroup(obj) {
+      if (obj.list) {
+        this.drawTextDataGroupList(obj.list);
+      }
+      if (obj.colList) {
+        this.drawTextDataGroupColList(obj.colList);
+      }
+    },
+    drawTextDataGroupColList(colList) {
+      const { originY } = this.propItems;
+      let textList = [];
+      colList.forEach((item, index) => {
+        const baseTop = originY + (item.marginTop || 10);
+        if (this.isLimit(item.scalevalue)) {
+          item.dataList.forEach((v, i) => {
+            const top = baseTop + i * (item.lineHeight || 15);
+            const text = new this.fabric.Text(String(v.value), {
+              ...defaultVaule.style,
+              ...defaultVaule.textStyle,
+              ...item.style,
+              originX: 'left',
+              originY: 'center',
+              left: this.cumputedX(item.scalevalue),
+              top,
+              lockMovementX: true,
+              lockMovementY: true,
+              dataIndex: index,
+              index: i,
+              type: 'colList',
+              id: `${index}_${i}_other_${Date.now()}`,
+              name: v.value,
+              ...this.eventStyle
+            });
+            text.hasControls = text.hasBorders = false;
+            this.setPopup(text);
+            textList.push(text);
+          });
+        }
+      });
+      this.canvas.add(...textList);
+    },
+    async drawTextDataGroupList(list) {
+      let textList = [];
+      const { originX, originY } = this.propItems;
+      let top = originY + 10;
+      for (let index = 0, len = list.length; index < len; index++) {
+        const item = list[index];
+        const marginLeft = item.titleStyle?.marginLeft || 8;
+        const left = originX - marginLeft; // 防止最左边的数据与名称显示重合了
+
+        if (list[index - 1]) {
+          top += item.lineHeight || 15;
+        }
+        const originOptions = { originX: 'right', left, top };
+        const title = new this.fabric.Text(String(item.title), {
+          ...defaultVaule.style,
+          ...defaultVaule.textStyle,
+          ...item.style,
+          ...(item.titleStyle || {}),
+          originY: 'center',
+          id: `${index}_other_${Date.now()}`,
+          dataIndex: index,
+          type: 'list',
+          hasControls: false,
+          hasBorders: false,
+          ...originOptions,
+          ...this.eventStyle,
+          dataList: []
+        });
+        this.setMovingEvent(title, originOptions);
+        textList.push(title);
+        const { icon: _icon = { type: 'circle' }, dataList } = item || {};
+        for (let i = 0, len = dataList.length; i < len; i++) {
+          const v = dataList[i];
+          if (this.isLimit(v.time)) {
+            const commonOptions = {
+              originY: 'center',
+              top,
+              dataIndex: index,
+              index: i,
+              type: 'list'
+            };
+            const left = this.cumputedX(v.time);
+            title.dataList.push(left);
+            const icon = await this.createPoint(_icon.type, {
+              originX: 'center',
+              left,
+              ...item.style,
+              ...(item.style ? { stroke: item.style.fill } : {}),
+              ...(_icon.style || {}),
+              ...commonOptions
+            });
+            const text = new this.fabric.Text(String(v.value), {
+              ...defaultVaule.style,
+              ...defaultVaule.textStyle,
+              ...item.style,
+              left: left + icon.width / 2,
+              name: v.value,
+              ...commonOptions
+            });
+            const groupObj = new this.fabric.Group([icon, text], {
+              id: `${index}_${i}_other_${Date.now()}`,
+              lockMovementX: true,
+              lockMovementY: true,
+              ...commonOptions,
+              ...this.eventStyle,
+              realLeft: left
+            });
+            groupObj.hasControls = groupObj.hasBorders = false;
+            this.setPopup(groupObj);
+            textList.push(groupObj);
+          }
+        }
+      }
+      this.canvas.add(...textList);
+    },
+    setMovingEvent(point) {
+      const { originX, originY, endX, endY } = this.propItems;
+      const isLimit = () => point.left >= originX && point.left <= endX && point.top >= originY && point.top <= endY;
+      let cloneObj;
+      point.on('moving', () => {
+        point.set('originX', 'center');
+        !point.isClone &&
+          point.clone(obj => {
+            obj.set('originX', 'right');
+            this.canvas.add(obj);
+            cloneObj = obj;
+            point.isClone = true;
+          });
+        if (isLimit()) {
+          Bus.$emit('mouseoverTarget', true);
+          this.showDrapPopup(point, true);
+        } else {
+          !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
+          this.isDropVisible = false;
+        }
+      });
+      point.on('moved', () => {
+        this.canvas.remove(cloneObj);
+        point.isClone = false;
+        this.removeOther();
+        this.drawTextDataGroup(this.templateData.other);
+        !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
+        this.isDropVisible = false;
+        if (isLimit()) {
+          const { type, dataIndex, left, dataList } = point;
+          const time = this.getXValue(left);
+          const index = dataList.findIndex(_left => _left > left);
+          // 使用定时器，是因为：防止上方移除重绘过慢新增完后再次触发移除重绘导致页面多次重绘节点
+          setTimeout(() => {
+            this.$emit('addOhter', {
+              type,
+              dataIndex,
+              index: !~index ? (dataList.length ? dataList.length - 1 : 0) : index,
+              data: {
+                time
+              }
+            });
+          });
+        }
+      });
+    },
+    setPopup(point) {
+      point.on('mouseover', () => {
+        Bus.$emit('mouseoverTarget', true);
+        this.showDrapPopup(point, true);
+      });
+      point.on('mouseout', () => {
+        !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
+        this.isDropVisible = false;
+      });
+    },
+    // 判断当前时间是否超出网格区域
+    isLimit(value) {
+      const { xScaleList } = this.propItems;
+      const minTime = Math.min(...xScaleList);
+      const maxTime = Math.max(...xScaleList);
+      const time = new Date(value).getTime();
+      return time >= minTime && time <= maxTime;
+    },
+    removeMark() {
+      this.canvas.forEachObject(obj => {
+        if (obj.type && obj.type === 'mark') {
+          this.canvas.remove(obj);
+        }
+      });
+    },
+    // 底部标记
+    drawBottomTextDataGroup(obj) {
+      const { endX, originX, endY, canvasHeight, topTotal } = this.propItems;
+      if (!obj.list || endY === canvasHeight) {
+        return;
+      }
+
+      topTotal.width && this.canvas.add(this.drawLine([endX, endY - 1, endX, canvasHeight], { ...this.defaultRectStyle }));
+      // const textList = [];
+      const marginLeft = this.templateData.left.leftYScalevalue.spaceGridNumber || defaultVaule.spaceGridNumber;
+      const left = originX - marginLeft * 4; // 默认减去4倍的左边距，防止最左边的数据与名称显示重合了
+      const title = new this.fabric.Text(String(obj.title), {
+        ...defaultVaule.style,
+        ...defaultVaule.textStyle,
+        ...obj.style,
+        originX: 'right',
+        originY: 'center',
+        left,
+        top: endY + (canvasHeight - endY) / 2,
+        type: 'mark'
+      });
+      this.canvas.add(title);
+      // textList.push(title);
+      const baseY = endY + 2; // 目前固定10像素的下边距
+      const baseYLimit = endY - 2; // 目前固定10像素的上边距
+      const lineHeightText = (obj.style?.fontSize || 12) + 2;
+      const lineHeightImg = (obj.iconStyle?.height || 12) + 2;
+      const lineHeightSeq = (obj.seqStyle?.circle?.radius || 9) * 2 + 2;
+      const addCanvas = point => {
+        point.hasControls = point.hasBorders = false;
+        this.pointEvent(point);
+        this.canvas.add(point);
+        // this.canvas.requestRenderAll();
+      };
+      const setTop = (lineHeight, i, condition) => {
+        if (!~condition.limitIndex) {
+          condition.y += i === 0 ? lineHeight / 2 : lineHeight;
+          if (condition.y >= canvasHeight - lineHeight / 2) {
+            condition.limitIndex++;
+            if (condition.limitIndex === 0) {
+              condition.y = baseYLimit;
+              condition.y -= lineHeight / 2;
+            }
+          }
+        } else {
+          condition.y -= lineHeight;
+        }
+        return condition.y;
+      };
+      obj.list.forEach((item, index) => {
+        const condition = {
+          limitIndex: -1, // 标志点是否往上排列的标志，大于-1则表示需要往上排列
+          y: baseY
+        };
+        const x = this.cumputedX(item[0]);
+        if (this.isLimit(item[0])) {
+          item[1].forEach(async (v, i) => {
+            const common = {
+              left: x,
+              originX: 'center',
+              originY: 'center',
+              data: v.data || {},
+              other: v.other || {},
+              time: item[0],
+              name: v.name,
+              type: 'mark'
+            };
+
+            const eventStyle = !this.eventStyle.evented
+              ? {
+                  lockMovementX: true,
+                  lockMovementY: true
+                }
+              : {};
+
+            if (this.isObject(v) && !v.value) {
+              common.top = setTop(lineHeightImg, i, condition);
+              const option = Object.assign({}, obj.iconStyle || {}, v || {}, {
+                ...common,
+                ...eventStyle
+              });
+              let ele;
+              if (v?.iconClassName) {
+                ele = await this.createImage(v.iconClassName, v);
+              }
+              const img = await this.createPoint(v?.url || v?.iconClassName ? 'img' : v.type, {
+                ele: ele || '',
+                ...option
+              });
+              addCanvas(img);
+            } else if (v.value) {
+              if (v.seq) {
+                common.top = setTop(lineHeightSeq, i, condition);
+                // 标记增加序号
+                const circle = await this.createPoint('circle', {
+                  ...common,
+                  radius: 5,
+                  strokeWidth: 1,
+                  stroke: '#000',
+                  fill: 'transparent',
+                  ...(obj.seqStyle?.circle || {})
+                });
+                const text = new this.fabric.Text(String(v.value), {
+                  ...defaultVaule.textStyle,
+                  ...common,
+                  ...(obj.seqStyle?.text || {})
+                });
+                const group = new this.fabric.Group([circle, text], {
+                  ...common,
+                  // hoverCursor: 'default',
+                  ...eventStyle
+                });
+                addCanvas(group);
+              } else {
+                common.top = setTop(lineHeightText, i, condition);
+                const text = new this.fabric.Text(String(v.value), {
+                  ...defaultVaule.textStyle,
+                  ...obj.style,
+                  ...common,
+                  ...eventStyle
+                });
+                addCanvas(text);
+              }
+            }
+          });
+        }
+      });
+      // this.canvas.add(...textList);
+    },
+    pointEvent(point) {
+      this.setPopup(point);
+      // 移动中 实时更新相关联的线的坐标
+      if (this.eventStyle.evented) {
+        point.on('moving', () => {
+          this.moveLimit(point);
+          // this.canvas.renderAll();
+          this.showDrapPopup(point);
+        });
+        point.on('moved', () => {
+          this.isDropVisible = false;
+          const value = {
+            data: point.data,
+            oldVal: point.time,
+            newVal: this.getXValue(point.left)
+          };
+          this.$emit('markChange', value);
+        });
+      }
+    },
+    moveLimit(point) {
+      point.setCoords();
+      const { originX, endX, originY, canvasHeight } = this.propItems;
+      const bottom = this.templateData.bottom;
+      // 如果是起始标记，如入手术室时间
+      if (point.other?.isStart) {
+        const newList = JSON.parse(JSON.stringify(bottom.list)).sort((a, b) => {
+          return new Date(a[0]).getTime() - new Date(b[0]).getTime();
+        });
+        const obj = newList.find(v => {
+          const isStart = v[1].some(k => k.other?.isStart);
+          return !isStart && new Date(v[0]).getTime() >= new Date(point.time).getTime();
+        });
+        const limitRight = obj ? this.cumputedX(obj[0]) : endX;
+        if (point.left > limitRight) {
+          point.set('left', limitRight);
+        }
+        if (point.left < originX) {
+          point.set('left', originX);
+        }
+      } else {
+        const startList = bottom.list.find(v => v[1].some(k => k.other?.isStart));
+        const leftId = point.other?.limitLeft;
+        const limitLeftTime = leftId ? bottom.list.find(v => v[1].some(k => k.data?.id && k.data?.id === leftId))[0] : null;
+        const rightId = point.other?.limitRight;
+        const limitRightTime = rightId ? bottom.list.find(v => v[1].some(k => k.data?.id && k.data?.id === rightId))[0] : null;
+        const limitLeft =
+          (limitLeftTime && !startList) || (limitLeftTime && startList && new Date(limitLeftTime).getTime() >= new Date(startList[0]).getTime())
+            ? this.cumputedX(limitLeftTime)
+            : (!limitLeftTime && startList) || (limitLeftTime && startList && new Date(limitLeftTime).getTime() < new Date(startList[0]).getTime())
+            ? this.cumputedX(startList[0])
+            : originX;
+        const limitRight = limitRightTime ? this.cumputedX(limitRightTime) : endX;
+        if (point.left > limitRight) {
+          point.set('left', limitRight);
+        }
+        if (point.left < limitLeft) {
+          point.set('left', limitLeft);
+        }
+      }
+      if (point.top > canvasHeight - 14) {
+        point.set('top', canvasHeight - 14);
+      }
+      if (point.top < originY) {
+        point.set('top', originY);
+      }
+    },
+    showDrapPopup(point) {
+      this.isDropVisible = true;
+      this.dropPos = {
+        left: point.left,
+        top: point.top,
+        margin: { top: this.propItems.yCellHeight }
+      };
+      const x = arguments.length > 1 && point.other?.viewTime ? point.other.viewTime : this.getXValue(point.realLeft || point.left);
+      this.dropVal = {
+        title: point.name || '',
+        list: [{ id: '1', name: '时间', value: x }]
+      };
+    },
+
+    drawLeftScaleGroup(dataLeft) {
+      this.drawLeftTitle(dataLeft);
+      const { canvasHeight, originX, originY, treeTableminCellWidth } = this.propItems;
+      let rect = new this.fabric.Rect({
+        left: treeTableminCellWidth,
+        top: originY,
+        width: originX - treeTableminCellWidth,
+        height: canvasHeight - originY,
+        ...defaultVaule.rectStyle,
+        ...defaultVaule.style,
+        originX: 'left',
+        originY: 'top'
+      });
+      rect.sendToBack(); // 向下跳底层
+      this.canvas.add(rect);
+    },
+    drawLeftTitle(dataLeft) {
+      if (dataLeft.title) {
+        this.canvas.add(
+          this.drawTextGroup(
+            { width: this.propItems.treeTableminCellWidth, height: this.propItems.canvasHeight - this.propItems.originY },
+            { text: String(dataLeft.title.split('').join('\n')), ...defaultVaule.textStyle, ...dataLeft.titleStyle },
+            { left: 0, top: this.propItems.originY }
+          )
+        );
+      }
+    }
+  }
+  // render(h) {
+  //   return this.$slots.default ? h('div', this.$slots.default) : undefined;
+  // }
+};
+</script>