cnhis-design-vue 2.2.3 → 2.2.6

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

@@ -1,928 +0,0 @@
-<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 drawExtracorporealCirculation from '../mixins/drawExtracorporealCirculation';
-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';
-import { cloneDeep, isNumber } from 'lodash';
-import { sortByTime } from '../utils';
-
-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, drawExtracorporealCirculation],
-  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() {
-    this.markData = sortByTime(cloneDeep(this.templateData.bottom?.list));
-    this.markObjs = [];
-    this.otherListPointHeightRange = [];
-    this.inputObj = null;
-    return {
-      leftStartX: 0,
-      isDropVisible: false,
-      dropVal: {},
-      dropPos: { clientX: 0, clientY: 0 },
-      rightPos: { clientX: 0, clientY: 0 },
-      rightClickNode: [],
-      activeEvent: null // 当前可右键活动的对象
-    };
-  },
-  mounted() {
-    setTimeout(() => {
-      document.addEventListener('keydown', this.handleInputBoxEnterEvent, true);
-
-      const _style = this.fabric.document.createElement('style');
-      _style.type = 'text/css';
-      const cssContent = this.fabric.document.createTextNode('.fabric-chart__hiddenTextarea { top:var(--fabric-chart-hiddenTextarea-height) !important }');
-      _style.appendChild(cssContent);
-      this.fabric.document.head.appendChild(_style);
-    });
-  },
-  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();
-      if (this.templateData.bottom) {
-        this.drawExtracorporealCirculation();
-        this.drawBottomTextDataGroup();
-      }
-    },
-    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 => {
-        const { button, target, pointer } = event;
-        const { x, y } = pointer;
-        if (this.isGridLimit(x, y)) {
-          if (button === 3) {
-            this.activeEvent = event;
-            !this.isAddEventListenerContextmenu && this.canvas.wrapperEl.addEventListener('contextmenu', this.addEventListenerContextmenu, true);
-            this.isAddEventListenerContextmenu = true;
-          }
-          if (button === 1) {
-            if (!this.otherListPointHeightRange?.length || this.inputObj) return;
-            if (target?.id && (!target?.id?.includes('_other') || target?.type !== 'list' || target.isTitle)) return;
-            let content = '';
-            if (target) {
-              if (target.moving) {
-                target.moving = false;
-                return;
-              } else {
-                content = target.origin?.value?.toString();
-              }
-            }
-            const item = this.otherListPointHeightRange.find(({ y1, y2 }) => y >= y1 && y <= y2);
-            if (isNumber(item?.dataIndex)) {
-              this.inputObj = new this.fabric.Textbox(content, {
-                left: x,
-                top: y,
-                width: 100,
-                height: 100,
-                fontSize: 18,
-                objectCaching: false,
-                hasControls: false,
-                borderColor: '#000',
-                editingBorderColor: '#000',
-                backgroundColor: '#fff',
-                fontFamily: '微软雅黑',
-                otherListPointHeightRangeItem: { ...item, left: x, target }
-              });
-              this.canvas.add(this.inputObj).setActiveObject(this.inputObj);
-              this.inputObj.enterEditing();
-              this.$nextTick().then(() => {
-                this.handleScroll();
-                this.inputObj.hiddenTextarea.classList.add('fabric-chart__hiddenTextarea');
-              });
-              if (content) {
-                this.inputObj.setSelectionEnd(content.length);
-              }
-            }
-          }
-        }
-      });
-
-      this.canvas.on('selection:cleared', ({ deselected }) => {
-        if (deselected?.find(obj => obj.otherListPointHeightRangeItem)) {
-          let { text, otherListPointHeightRangeItem } = this.inputObj;
-          text = text.replace(/^\s+|\s+$/g, '');
-          this.canvas.remove(this.inputObj);
-          this.inputObj = null;
-          if (!text) return;
-          const { dataList, left, target } = otherListPointHeightRangeItem;
-          if (target) {
-            const params = this.getOtherParams(target);
-            if (text == target.origin?.value) return;
-            this.$emit('otherChange', { ...params, data: { ...params.data, value: text } });
-          } else {
-            const index = dataList.findIndex(_left => _left > left);
-            const params = this.getOtherParams(otherListPointHeightRangeItem);
-            this.$emit('addOhter', { ...params, index: !~index ? dataList.length : index, data: { ...params.data, value: text } });
-          }
-        }
-      });
-
-      Bus.$on('deleteOther', otherList => this.$emit('deleteOther', otherList));
-    },
-    handleScroll(e) {
-      this.isRightVisible = false;
-      const wrapperElTop = this.canvas?.wrapperEl.getBoundingClientRect().top;
-      this.inputObj?.hiddenTextarea?.style?.setProperty('--fabric-chart-hiddenTextarea-height', `${wrapperElTop + this.inputObj.top + this.inputObj.height}px`);
-    },
-    handleInputBoxEnterEvent(e) {
-      if (!this.inputObj || ![13, 27].includes(e.keyCode)) return;
-      if (e.keyCode === 27) {
-        this.inputObj.text = '';
-      }
-      this.inputObj.exitEditing();
-      this.canvas.discardActiveObject(this.inputObj);
-    },
-    // 打开右键菜单
-    openRightModal() {
-      // 一下方法不会生效，因为，polylines组件中timeRangeData.enabled设置为false操作晚于当前操作，需换一种方式
-      // if (this.$parent.$children.find(children => /polylines/.test(children.$vnode.tag))?.componentInstance?.timeRangeData?.enabled) return;
-      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 = '';
-      this.$emit(`${type}Other`, this.getOtherParams(text, false));
-    },
-    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, originYTime } = this.propItems;
-      const textList = [];
-      const totalWidth = canvasWidth - endX;
-      const left = endX + totalWidth / 2;
-      const yCellHeightTopHalf = yCellHeightTop / 2;
-      topTotalList.forEach((v, i) => {
-        const top = i * yCellHeightTop + yCellHeightTopHalf + 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) {
-          if (text.width > totalWidth)
-            text.set({
-              originX: 'right',
-              left: canvasWidth - 1
-            });
-          textList.push(text);
-        }
-        if (topTotal.divider?.show) {
-          const dividerY = top + yCellHeightTopHalf;
-          const divider = this.drawLine([endX, dividerY, endX + totalWidth, dividerY], topTotal.divider.style);
-          textList.push(divider);
-        }
-      });
-      const title = this.drawTextGroup(
-        { width: totalWidth, height: spaceHeight, strokeWidth: 1 },
-        { text: String(topTotal.title), ...(topTotal.style || defaultVaule.textStyle) },
-        { left: endX, top: originYTime }
-      );
-      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, endX } = this.propItems;
-      let textList = [];
-      colList.forEach((item, index) => {
-        const baseTop = originY + (item.marginTop || 10);
-        if (this.isLimit(item.scalevalue)) {
-          const textItemPoints = [];
-          const left = this.computedX(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,
-              top,
-              lockMovementY: true,
-              dataIndex: index,
-              index: i,
-              type: 'colList',
-              id: `${index}_${i}_other_${Date.now()}`,
-              name: v.value,
-              objectCaching: false,
-              origin: {
-                time: item.scalevalue,
-                ...v
-              },
-              ...this.eventStyle
-            });
-            textItemPoints.push(text);
-            this.pointOtherEvent(text);
-            textList.push(text);
-          });
-          const maxTextWidth = Math.max(...textItemPoints.map(obj => obj.width));
-          const isOverstep = left > endX - maxTextWidth;
-          textItemPoints.forEach((point, _, arr) => {
-            point.maxTextWidth = maxTextWidth;
-            point.siblingPoints = arr.filter(_point => _point.index !== point.index);
-            if (isOverstep) point.setCoords().set('originX', 'right');
-          });
-        }
-      });
-      this.canvas.add(...textList);
-    },
-    async drawTextDataGroupList(list) {
-      this.otherListPointHeightRange = [];
-      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: [],
-          isTitle: true
-        });
-        this.setMovingEvent(title, originOptions);
-        textList.push(title);
-        this.otherListPointHeightRange.push({
-          type: 'list',
-          dataIndex: index,
-          dataList: title.dataList,
-          y1: top - title.height / 2,
-          y2: top + title.height / 2
-        });
-        const { icon: _icon = { type: 'circle' }, dataList } = item || {};
-        let prevPoint;
-        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',
-              objectCaching: false,
-              origin: v
-            };
-            const left = this.computedX(v.time);
-            title.dataList.push(left);
-            const icon =
-              !Reflect.has(_icon, 'show') || _icon.show
-                ? await this.createPoint(_icon.type, {
-                    originX: 'center',
-                    left,
-                    ...item.style,
-                    ...(item.style ? { stroke: item.style.fill } : {}),
-                    ...(_icon.style || {}),
-                    ...commonOptions
-                  })
-                : null;
-            const iconHalfWidth = icon ? icon.width / 2 : 0;
-            const text = new this.fabric.Text(String(v.value), {
-              ...defaultVaule.style,
-              ...defaultVaule.textStyle,
-              ...item.style,
-              left: left + iconHalfWidth,
-              name: v.value,
-              ...commonOptions
-            });
-            const groupObj = new this.fabric.Group(icon ? [icon, text] : [text], {
-              id: `${index}_${i}_other_${Date.now()}`,
-              lockMovementY: true,
-              ...commonOptions,
-              ...this.eventStyle,
-              realLeft: left,
-              iconHalfWidth
-            });
-            if (prevPoint) {
-              prevPoint.nextPoint = groupObj;
-              groupObj.prevPoint = prevPoint;
-            }
-            prevPoint = groupObj;
-            this.pointOtherEvent(groupObj);
-            textList.push(groupObj);
-          }
-        }
-      }
-      this.canvas.add(...textList);
-    },
-    emitMouseoverTarget(point) {
-      if (point) {
-        Bus.$emit('mouseoverTarget', true);
-        this.showDrapPopup(point, true);
-      } else {
-        !this.isRightVisible && Bus.$emit('mouseoverTarget', false);
-        this.isDropVisible = false;
-      }
-    },
-    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()) {
-          this.emitMouseoverTarget(point);
-        } else {
-          this.emitMouseoverTarget();
-        }
-      });
-      point.on('moved', () => {
-        this.canvas.remove(cloneObj);
-        point.isClone = false;
-        this.removeOther();
-        this.drawTextDataGroup(this.templateData.other);
-        this.emitMouseoverTarget();
-        if (isLimit()) {
-          const { left, dataList } = point;
-          const index = dataList.findIndex(_left => _left > left);
-          // 使用定时器，是因为：防止上方移除重绘过慢新增完后再次触发移除重绘导致页面多次重绘节点
-          setTimeout(() => {
-            this.$emit('addOhter', { ...this.getOtherParams(point), index: !~index ? dataList.length : index });
-          });
-        }
-      });
-    },
-    pointOtherEvent(point) {
-      point.hasControls = point.hasBorders = false;
-      this.setPopup(point);
-      // 移动中 实时更新相关联的线的坐标
-      if (this.eventStyle.evented) {
-        const { endX, originX } = this.propItems;
-        point.on('moving', () => {
-          point.moving = true;
-          point.setCoords();
-          const { prevPoint, nextPoint } = point;
-          const limitLeft = prevPoint?.left || originX;
-          const limitRight = nextPoint?.left || endX;
-          if (point.left > limitRight) point.set('left', limitRight);
-          if (point.left < limitLeft) point.set('left', limitLeft);
-          if (point.realLeft && point.iconHalfWidth) point.realLeft = point.left + point.iconHalfWidth;
-          if (point.maxTextWidth) {
-            const isOverstep = point.left + point.maxTextWidth > limitRight;
-            const originX = isOverstep ? 'right' : 'left';
-            point.setCoords().set({ originX });
-            point.siblingPoints.forEach(_point => _point.setCoords().set({ originX, left: point.left }));
-          }
-          this.showDrapPopup(point);
-        });
-        point.on('moved', () => {
-          this.isDropVisible = false;
-          this.$emit('otherChange', this.getOtherParams(point));
-        });
-      }
-    },
-    getOtherParams(point, isChange = true) {
-      const { type, dataIndex, left, realLeft, origin, index } = point;
-      return {
-        type,
-        dataIndex,
-        index,
-        data: {
-          ...origin,
-          ...(isChange ? { time: this.getXValue(realLeft ?? left) } : {})
-        }
-      };
-    },
-    setPopup(point) {
-      point.on('mouseover', () => this.emitMouseoverTarget(point));
-      point.on('mouseout', () => this.emitMouseoverTarget());
-    },
-    // 判断当前时间是否超出网格区域
-    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.markObjs.forEach(obj => this.canvas.remove(obj));
-    },
-    drawTopTotalLineAndTitle() {
-      const { bottom: obj, left: leftData } = this.templateData;
-      const { endX, originX, endY, topTotal, markHeight } = this.propItems;
-      if (!topTotal.width) {
-        return;
-      }
-
-      const line1 = this.drawLine([endX, endY - 1, endX, endY + markHeight], { ...this.defaultRectStyle });
-      const line2 = this.drawLine([originX, endY + markHeight, endX, endY + markHeight], { ...this.defaultRectStyle });
-
-      const marginLeft = leftData.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 + markHeight / 2,
-        type: 'mark'
-      });
-      this.markObjs.push(title, line1, line2);
-      this.canvas.add(title, line1, line2);
-    },
-    // 底部标记
-    drawBottomTextDataGroup() {
-      const { bottom: obj } = this.templateData;
-      const { originX, endY, markHeight, xCellWidth } = this.propItems;
-      if (!markHeight || !this.markData?.length) {
-        return;
-      }
-      if (this.markObjs.length) {
-        [...this.markObjs].forEach(obj => this.canvas.remove(obj));
-        this.markObjs = [];
-      }
-
-      this.drawTopTotalLineAndTitle();
-
-      const _endY = this.extracorporealCirculationHeight ? endY + this.extracorporealCirculationHeight : endY;
-      const baseY = _endY + 2; // 目前固定10像素的下边距
-      const baseYTop = 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;
-      let prevLeft = 0;
-      const pointerObj = {};
-
-      this.markData.forEach((item, index) => {
-        const x = this.computedX(item[0]);
-        if (this.isLimit(item[0])) {
-          pointerObj[`x_${x}`] = [];
-          const pointList = [];
-          let startTop = baseY;
-          item[1].forEach(async (v, i) => {
-            const common = {
-              data: v.data || {},
-              other: v.other || {},
-              time: item[0],
-              name: v.name,
-              type: 'mark',
-              objectCaching: false
-            };
-
-            let lineHeight;
-            if (this.isObject(v) && !v.value) {
-              lineHeight = lineHeightImg;
-            } else if (v.value) {
-              if (v.seq) {
-                lineHeight = lineHeightSeq;
-              } else {
-                lineHeight = lineHeightText;
-              }
-            }
-
-            if (lineHeight) {
-              const isShowDesc = v.desc && obj.showDesc;
-              // 错位显示处理
-              if (prevLeft && x - prevLeft <= xCellWidth) {
-                pointerObj[`x_${prevLeft}`].forEach(([y1, y2]) => {
-                  if (startTop + lineHeight + (isShowDesc ? lineHeightText : 0) >= endY + markHeight) {
-                    startTop = baseYTop;
-                  }
-                  if (y1 < y2 && startTop >= y1 && startTop < y2) {
-                    startTop = y2;
-                  }
-                  if (y1 > y2 && startTop > y2 && startTop <= y1) {
-                    startTop = y2;
-                  }
-                });
-              }
-              const { topObj, startTop: _startTop, oldStartTop } = computedTop(isShowDesc, startTop, lineHeight);
-              startTop = _startTop;
-              pointerObj[`x_${x}`].push([oldStartTop, startTop]);
-              pointList.push(this.drawMarkPoint(v, common, obj, topObj, x));
-            }
-          });
-          prevLeft = x;
-          Promise.all(pointList).then(res => {
-            this.markObjs.push(...res);
-            this.canvas.add(...res);
-          });
-        }
-      });
-
-      function computedTop(isShowDesc, startTop, lineHeight) {
-        const topObj = {};
-        let oldStartTop;
-        if (startTop > endY) {
-          let _top = startTop + lineHeight;
-          topObj.y2 = startTop + lineHeight / 2;
-          if (isShowDesc) {
-            _top += lineHeightText;
-            topObj.y1 = startTop + lineHeightText / 2;
-            topObj.y2 = startTop + lineHeightText + lineHeight / 2;
-          }
-          if (_top >= endY + markHeight) {
-            setTopY(baseYTop);
-          } else {
-            oldStartTop = startTop;
-            startTop = _top;
-          }
-        } else {
-          setTopY(startTop);
-        }
-
-        function setTopY(base) {
-          oldStartTop = base;
-          topObj.y2 = base - lineHeight / 2;
-          const _y = base - lineHeight;
-          if (isShowDesc) {
-            topObj.y1 = _y - lineHeightText / 2;
-            startTop = _y - lineHeightText;
-          } else {
-            startTop = _y;
-          }
-        }
-
-        return { topObj, startTop, oldStartTop };
-      }
-    },
-    async drawMarkPoint(v, option, obj, { y1, y2 }, x) {
-      const positionObj = {
-        left: x,
-        originX: 'center',
-        originY: 'center',
-        top: y2
-      };
-      let point;
-      const eventStyle = !this.eventStyle.evented
-        ? {
-            lockMovementX: true,
-            lockMovementY: true
-          }
-        : {};
-      if (this.isObject(v) && !v.value) {
-        let ele;
-        if (v?.iconClassName) {
-          ele = await this.createImage(v.iconClassName, v);
-        }
-        point = await this.createPoint(v?.url || v?.iconClassName ? 'img' : v.type, {
-          ele: ele || '',
-          ...positionObj,
-          ...obj.iconStyle,
-          ...v,
-          ...option,
-          ...eventStyle
-        });
-      } else if (v.value) {
-        if (v.seq) {
-          // 标记增加序号
-          const circle = await this.createPoint('circle', {
-            ...positionObj,
-            ...option,
-            radius: 5,
-            strokeWidth: 1,
-            stroke: '#000',
-            fill: 'transparent',
-            ...(obj.seqStyle?.circle || {})
-          });
-          const text = new this.fabric.Text(String(v.value), {
-            ...defaultVaule.textStyle,
-            ...positionObj,
-            ...option,
-            ...(obj.seqStyle?.text || {})
-          });
-          point = await new this.fabric.Group([circle, text], {
-            ...positionObj,
-            ...option,
-            ...eventStyle
-          });
-        } else {
-          point = await new this.fabric.Text(String(v.value), {
-            ...defaultVaule.textStyle,
-            ...obj.style,
-            ...positionObj,
-            ...option,
-            ...eventStyle
-          });
-        }
-      }
-      if (y1) {
-        const descPoint = new this.fabric.Text(String(v.desc), {
-          ...defaultVaule.textStyle,
-          ...positionObj,
-          ...option,
-          ...obj.style,
-          top: y1
-        });
-        point = await new this.fabric.Group([descPoint, point], {
-          ...option,
-          left: x,
-          originX: 'center',
-          ...eventStyle
-        });
-      }
-
-      point.hasControls = point.hasBorders = false;
-      this.pointEvent(point);
-
-      return point;
-    },
-    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);
-          this.updateMarkData(value);
-          this.drawBottomTextDataGroup();
-          this.canvas.discardActiveObject();
-        });
-      }
-    },
-    updateMarkData({ data, newVal }) {
-      const id = data.id;
-      let listIndex, index;
-      listIndex = this.markData.findIndex(v => {
-        const i = v[1].findIndex(k => k.data?.id === id);
-        i > -1 && (index = i);
-        return i > -1;
-      });
-      const obj = this.markData[listIndex][1].splice(index, 1)[0];
-      const newIndex = this.markData.findIndex(v => v[0] === newVal);
-      if (!~newIndex) {
-        this.markData.push([newVal, [obj]]);
-      } else {
-        this.markData[newIndex][1].push(obj);
-      }
-      const emptyIndex = this.markData.findIndex(v => v[1].length === 0);
-      !!~emptyIndex && this.markData.splice(emptyIndex, 1);
-      sortByTime(this.markData);
-    },
-    moveLimit(point) {
-      point.setCoords();
-      const { originX, endX, originY, endY, markHeight } = 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.computedX(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.computedX(limitLeftTime)
-            : (!limitLeftTime && startList) || (limitLeftTime && startList && new Date(limitLeftTime).getTime() < new Date(startList[0]).getTime())
-            ? this.computedX(startList[0])
-            : originX;
-        const limitRight = limitRightTime ? this.computedX(limitRightTime) : endX;
-        if (point.left > limitRight) {
-          point.set('left', limitRight);
-        }
-        if (point.left < limitLeft) {
-          point.set('left', limitLeft);
-        }
-      }
-      if (point.top > endY + markHeight - 14) {
-        point.set('top', endY + markHeight - 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 || point.origin?.data?.value || '',
-        list: [{ id: '1', name: '时间', value: x }]
-      };
-    },
-
-    drawLeftScaleGroup(dataLeft) {
-      this.drawLeftTitle(dataLeft);
-      const { endY, markHeight, originX, originY, treeTableminCellWidth } = this.propItems;
-      let rect = new this.fabric.Rect({
-        left: treeTableminCellWidth,
-        top: originY,
-        width: originX - treeTableminCellWidth,
-        height: endY + markHeight - originY,
-        ...defaultVaule.rectStyle,
-        ...defaultVaule.style,
-        originX: 'left',
-        originY: 'top'
-      });
-      rect.sendToBack(); // 向下跳底层
-      this.canvas.add(rect);
-    },
-    drawLeftTitle(dataLeft) {
-      if (dataLeft.title) {
-        const { endY, markHeight, treeTableminCellWidth, originY } = this.propItems;
-        this.canvas.add(
-          this.drawTextGroup(
-            { width: treeTableminCellWidth, height: endY + markHeight - originY },
-            { text: String(dataLeft.title.split('').join('\n')), ...defaultVaule.textStyle, ...dataLeft.titleStyle },
-            { left: 0, top: originY }
-          )
-        );
-      }
-    }
-  },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.handleInputBoxEnterEvent);
-  }
-};
-</script>