cnhis-design-vue 2.1.12 → 2.1.15

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

@@ -1,579 +1,558 @@
-<template>
-  <div class="text-group">
-    <MouseRightClick v-if="isRightVisible" :getContainer="getContainer" :nodeList="rightClickNode" :rightPos="rightPos" @nodeClick="handleRightClick" @closeRight="isRightVisible = false" />
-    <DropPopup v-if="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';
-
-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.removeOther();
-          this.drawTextDataGroup(value);
-          this.canvas.renderAll();
-        }
-      },
-      deep: true
-    }
-  },
-  data() {
-    return {
-      leftStartX: 0,
-      isDropVisible: false,
-      dropVal: {},
-      dropPos: { clientX: 0, clientY: 0 },
-      isRightVisible: false,
-      rightPos: { clientX: 0, clientY: 0 },
-      rightClickNode: [],
-      activeEvent: null // 当前可右键活动的对象
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
-  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;
-          const { originX, originY, endX, endY } = this.$propItems();
-          if (!(x < originX || x > endX || y < originY || y > endY)) {
-            this.activeEvent = event;
-            document.querySelector('.upper-canvas').addEventListener('contextmenu', this.addEventListenerContextmenu, true);
-          }
-        }
-      });
-    },
-    // 打开右键菜单
-    openRightModal(event) {
-      this.rightPos = {
-        clientX: event.e.clientX || event.e.pageX,
-        clientY: event.e.clientY || event.e.pageY
-      };
-      this.isRightVisible = false;
-      const target = event.target;
-      const id = target ? 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 } = this.propItems;
-      const textList = [];
-      const left = endX + (canvasWidth - endX) / 2;
-      topTotalList.forEach((v, i) => {
-        const top = i * yCellHeightTop + yCellHeightTop / 2;
-        const text = v
-          ? new this.fabric.Text(String(v), {
-              ...defaultVaule.style,
-              ...(topTotal.style || defaultVaule.textStyle),
-              left,
-              top,
-              originX: 'center',
-              originY: 'center'
-            })
-          : null;
-        text && textList.push(text);
-      });
-      const title = this.drawTextGroup(
-        { width: canvasWidth - endX, height: spaceHeight, strokeWidth: 1 },
-        { text: String(topTotal.title), ...(topTotal.style || defaultVaule.textStyle) },
-        { left: endX, top: 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()}`,
-              ...this.eventStyle
-            });
-            text.hasControls = text.hasBorders = false;
-            textList.push(text);
-          });
-        }
-      });
-      this.canvas.add(...textList);
-    },
-    drawTextDataGroupList(list) {
-      let textList = [];
-      const { originX, originY } = this.propItems;
-      let top = originY + 10;
-      list.forEach((item, index) => {
-        const marginLeft = item.titleStyle?.marginLeft || 8;
-        const left = originX - marginLeft; // 防止最左边的数据与名称显示重合了
-
-        if (list[index - 1]) {
-          top += item.lineHeight || 15;
-        }
-
-        const title = new this.fabric.Text(String(item.title), {
-          ...defaultVaule.style,
-          ...defaultVaule.textStyle,
-          ...item.style,
-          ...(item.titleStyle || {}),
-          originX: 'right',
-          originY: 'center',
-          left,
-          top,
-          id: `${index}_other_${Date.now()}`
-        });
-        textList.push(title);
-        item.dataList.forEach((v, i) => {
-          if (this.isLimit(v.time)) {
-            const text = new this.fabric.Text(String(v.value), {
-              ...defaultVaule.style,
-              ...defaultVaule.textStyle,
-              ...item.style,
-              originX: 'center',
-              originY: 'center',
-              left: this.cumputedX(v.time),
-              top,
-              lockMovementX: true,
-              lockMovementY: true,
-              dataIndex: index,
-              index: i,
-              type: 'list',
-              id: `${index}_${i}_other_${Date.now()}`,
-              ...this.eventStyle
-            });
-            text.hasControls = text.hasBorders = false;
-            textList.push(text);
-          }
-        });
-      });
-      this.canvas.add(...textList);
-    },
-    // 判断当前时间是否超出网格区域
-    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) {
-      if (!obj.list) {
-        return;
-      }
-      const { endX, originX, endY, canvasHeight, topTotal } = this.propItems;
-      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 lineHeight = (obj.iconStyle?.height && obj.iconStyle.height + 2) || 14; // 标志点的line-height值
-      obj.list.forEach((item, index) => {
-        let limitIndex = -1; // 标志点是否往上排列的标志，大于-1则表示需要往上排列
-        let y = baseY;
-        const x = this.cumputedX(item[0]);
-        if (this.isLimit(item[0])) {
-          item[1].forEach(async (v, i) => {
-            if (!~limitIndex) {
-              y += i === 0 ? lineHeight / 2 : lineHeight;
-              if (y >= canvasHeight - lineHeight / 2) {
-                limitIndex++;
-                if (limitIndex === 0) {
-                  y = baseYLimit;
-                  y -= lineHeight / 2;
-                }
-              }
-            } else {
-              y -= lineHeight;
-            }
-            const common = {
-              left: x,
-              top: y,
-              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
-                }
-              : {};
-            const addNumber = async point => {
-              // 标记增加序号
-              if (v.other?.number) {
-                const circle = await this.createPoint('circle', {
-                  ...common,
-                  radius: 5,
-                  strokeWidth: 1,
-                  stroke: '#000',
-                  fill: 'transparent',
-                  ...obj.numberStyle?.circle,
-                  left: 0,
-                  top: 0
-                });
-                const text = new this.fabric.Text(String(v.other?.number), {
-                  ...defaultVaule.textStyle,
-                  ...common,
-                  ...(obj.numberStyle?.text || {}),
-                  left: 0,
-                  top: 0
-                });
-                const scale = typeof point.scale === 'number' ? point.scale : 1;
-                const group = new this.fabric.Group([circle, text], {
-                  ...common,
-                  originY: 'right',
-                  left: point.left - (point.width * scale) / 2 - defaultVaule.bottomNumberLeftSpace,
-                  selectable: false,
-                  hoverCursor: 'default',
-                  // evented: false,
-                  ...eventStyle
-                });
-                return group;
-              }
-            };
-            const addCanvas = async point => {
-              point.number = await addNumber(point);
-              point.hasControls = point.hasBorders = false;
-              this.pointEvent(point);
-              this.canvas.add(point);
-              point.number && this.canvas.add(point.number);
-              this.canvas.requestRenderAll();
-            };
-            if (this.isObject(v) && !v.value) {
-              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) {
-              const text = new this.fabric.Text(String(v.value), {
-                ...defaultVaule.textStyle,
-                ...obj.style,
-                ...common,
-                ...eventStyle
-              });
-              addCanvas(text);
-            }
-          });
-        }
-      });
-      // this.canvas.add(...textList);
-    },
-    // 标记移动时 setCoords()方法手动更新相关联的序号等坐标
-    updateNumber(point) {
-      if (point.number) {
-        point.number.setCoords();
-        const scale = typeof point.scale === 'number' ? point.scale : 1;
-        point.number.set({ left: point.left - (point.width * scale) / 2 - defaultVaule.bottomNumberLeftSpace, top: point.top });
-      }
-    },
-    pointEvent(point) {
-      point.on('mouseover', () => {
-        this.showDrapPopup(point, true);
-      });
-      point.on('mouseout', () => {
-        this.isDropVisible = false;
-      });
-      if (point.number) {
-        point.number.on('mouseover', () => {
-          this.showDrapPopup(point, true);
-        });
-        point.number.on('mouseout', () => {
-          this.isDropVisible = false;
-        });
-      }
-      // 移动中 实时更新相关联的线的坐标
-      if (this.eventStyle.evented) {
-        point.on('moving', () => {
-          this.moveLimit(point);
-          this.updateNumber(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) {
-      // 第二个参数表示需要展示提供的viewTime时间
-      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.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-if="isRightVisible" :getContainer="getContainer" :nodeList="rightClickNode" :rightPos="rightPos" @nodeClick="handleRightClick" @closeRight="isRightVisible = false" />
+    <DropPopup v-if="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';
+
+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.removeOther();
+          this.drawTextDataGroup(value);
+          this.canvas.renderAll();
+        }
+      },
+      deep: true
+    }
+  },
+  data() {
+    return {
+      leftStartX: 0,
+      isDropVisible: false,
+      dropVal: {},
+      dropPos: { clientX: 0, clientY: 0 },
+      isRightVisible: false,
+      rightPos: { clientX: 0, clientY: 0 },
+      rightClickNode: [],
+      activeEvent: null // 当前可右键活动的对象
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.init();
+    });
+  },
+  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;
+          const { originX, originY, endX, endY } = this.$propItems();
+          if (!(x < originX || x > endX || y < originY || y > endY)) {
+            this.activeEvent = event;
+            document.querySelector('.upper-canvas').addEventListener('contextmenu', this.addEventListenerContextmenu, true);
+          }
+        }
+      });
+    },
+    // 打开右键菜单
+    openRightModal(event) {
+      this.rightPos = {
+        clientX: event.e.clientX || event.e.pageX,
+        clientY: event.e.clientY || event.e.pageY
+      };
+      this.isRightVisible = false;
+      const target = event.target;
+      const id = target ? 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 } = this.propItems;
+      const textList = [];
+      const left = endX + (canvasWidth - endX) / 2;
+      topTotalList.forEach((v, i) => {
+        const top = i * yCellHeightTop + yCellHeightTop / 2;
+        const text = v
+          ? new this.fabric.Text(String(v), {
+              ...defaultVaule.style,
+              ...(topTotal.style || defaultVaule.textStyle),
+              left,
+              top,
+              originX: 'center',
+              originY: 'center'
+            })
+          : null;
+        text && textList.push(text);
+      });
+      const title = this.drawTextGroup(
+        { width: canvasWidth - endX, height: spaceHeight, strokeWidth: 1 },
+        { text: String(topTotal.title), ...(topTotal.style || defaultVaule.textStyle) },
+        { left: endX, top: 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()}`,
+              ...this.eventStyle
+            });
+            text.hasControls = text.hasBorders = false;
+            textList.push(text);
+          });
+        }
+      });
+      this.canvas.add(...textList);
+    },
+    drawTextDataGroupList(list) {
+      let textList = [];
+      const { originX, originY } = this.propItems;
+      let top = originY + 10;
+      list.forEach((item, index) => {
+        const marginLeft = item.titleStyle?.marginLeft || 8;
+        const left = originX - marginLeft; // 防止最左边的数据与名称显示重合了
+
+        if (list[index - 1]) {
+          top += item.lineHeight || 15;
+        }
+
+        const title = new this.fabric.Text(String(item.title), {
+          ...defaultVaule.style,
+          ...defaultVaule.textStyle,
+          ...item.style,
+          ...(item.titleStyle || {}),
+          originX: 'right',
+          originY: 'center',
+          left,
+          top,
+          id: `${index}_other_${Date.now()}`
+        });
+        textList.push(title);
+        item.dataList.forEach((v, i) => {
+          if (this.isLimit(v.time)) {
+            const text = new this.fabric.Text(String(v.value), {
+              ...defaultVaule.style,
+              ...defaultVaule.textStyle,
+              ...item.style,
+              originX: 'center',
+              originY: 'center',
+              left: this.cumputedX(v.time),
+              top,
+              lockMovementX: true,
+              lockMovementY: true,
+              dataIndex: index,
+              index: i,
+              type: 'list',
+              id: `${index}_${i}_other_${Date.now()}`,
+              ...this.eventStyle
+            });
+            text.hasControls = text.hasBorders = false;
+            textList.push(text);
+          }
+        });
+      });
+      this.canvas.add(...textList);
+    },
+    // 判断当前时间是否超出网格区域
+    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) {
+      if (!obj.list) {
+        return;
+      }
+      const { endX, originX, endY, canvasHeight, topTotal } = this.propItems;
+      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;
+      obj.list.forEach((item, index) => {
+        let limitIndex = -1; // 标志点是否往上排列的标志，大于-1则表示需要往上排列
+        let 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'
+            };
+            function setTop(lineHeight) {
+              if (!~limitIndex) {
+                y += i === 0 ? lineHeight / 2 : lineHeight;
+                if (y >= canvasHeight - lineHeight / 2) {
+                  limitIndex++;
+                  if (limitIndex === 0) {
+                    y = baseYLimit;
+                    y -= lineHeight / 2;
+                  }
+                }
+              } else {
+                y -= lineHeight;
+              }
+              common.top = y;
+            }
+            const eventStyle = !this.eventStyle.evented
+              ? {
+                  lockMovementX: true,
+                  lockMovementY: true
+                }
+              : {};
+
+            const addCanvas = async point => {
+              point.hasControls = point.hasBorders = false;
+              this.pointEvent(point);
+              this.canvas.add(point);
+              this.canvas.requestRenderAll();
+            };
+            if (this.isObject(v) && !v.value) {
+              setTop(lineHeightImg);
+              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) {
+                setTop(lineHeightSeq);
+                // 标记增加序号
+                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 {
+                setTop(lineHeightText);
+                const text = new this.fabric.Text(String(v.value), {
+                  ...defaultVaule.textStyle,
+                  ...obj.style,
+                  ...common,
+                  ...eventStyle
+                });
+                addCanvas(text);
+              }
+            }
+          });
+        }
+      });
+      // this.canvas.add(...textList);
+    },
+    pointEvent(point) {
+      point.on('mouseover', () => {
+        this.showDrapPopup(point, true);
+      });
+      point.on('mouseout', () => {
+        this.isDropVisible = false;
+      });
+      // 移动中 实时更新相关联的线的坐标
+      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) {
+      // 第二个参数表示需要展示提供的viewTime时间
+      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.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>