cnhis-design-vue 2.1.78 → 2.1.79

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

@@ -1,617 +1,617 @@
-<template>
-  <div class="line">
-    <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 MouseRightClick from '../components/MouseRightClick';
-import FabricCommon from '../mixins/fabricCommon';
-import draw from '../mixins/draw';
-import { isObject } from '../mixins/type';
-import DropPopup from '../components/DropPopup';
-import eventCommon from '../mixins/eventCommon';
-import vexutils from '@/utils/vexutils';
-
-const rightClickNode = [
-  { name: '修改', type: 'edit' },
-  { name: '删除', type: 'delete' },
-  { name: '开始持续', type: 'continue', subType: 'start' },
-  { name: '停止持续', type: 'continue', subType: 'end' }
-];
-export default {
-  name: 'fabric-lines',
-  mixins: [FabricCommon, eventCommon, draw],
-  props: {
-    linesObj: {
-      type: Object,
-      required: true
-    }
-  },
-  components: {
-    MouseRightClick,
-    DropPopup
-  },
-  data() {
-    return {
-      rightPos: { clientX: 0, clientY: 0 },
-      rightClickNode: [],
-      activeEvent: null, // 当前可右键活动的对象
-      isDropVisible: false,
-      dropVal: {},
-      dropPos: { clientX: 0, clientY: 0 },
-      lines: [],
-      textMarginLeft: 5
-    };
-  },
-  computed: {
-    eventStyle() {
-      return this.linesObj?.eventStyle || { selectable: true, evented: true };
-    }
-  },
-  mounted() {},
-
-  methods: {
-    init() {
-      this.getLineList(this.linesObj.list);
-      this.createLine();
-      this.eventStyle.evented && this.createEvent();
-    },
-    createEvent() {
-      this.canvas.on('mouse:up', event => {
-        if (event.button === 3) {
-          const { x, y } = event.pointer;
-          if (this.isTopTreeAndGridLimit(x, y)) {
-            this.activeEvent = event;
-            !this.isAddEventListenerContextmenu && this.canvas.wrapperEl.addEventListener('contextmenu', this.addEventListenerContextmenu, true);
-            this.isAddEventListenerContextmenu = true;
-          }
-        }
-      });
-    },
-    handleMoving(event) {
-      const { pointer } = event;
-      const { x, y } = event.pointer;
-      this.dropPointer = { ...pointer };
-      const movingPopupContentList = [{ id: '1', name: '时间', value: this.getXValue(x) }];
-      this.movingShowPopup(movingPopupContentList);
-    },
-    /**
-     * 右键监听事件
-     */
-    addEventListenerContextmenu(event) {
-      event.preventDefault();
-      const { offsetX, offsetY } = event;
-      if (this.isTopTreeAndGridLimit(offsetX, offsetY)) {
-        this.openRightModal();
-      }
-      return false;
-    },
-    // 打开右键菜单
-    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('_lineGroup_')) {
-          this._currentPoint = target || '';
-          this.rightClickNode = Object.freeze(rightClickNode.slice());
-          this.isRightVisible = true;
-        } else {
-          this.doContextmenuEvent(this.activeEvent.pointer);
-        }
-      });
-    },
-    doContextmenuEvent(pointer) {
-      const { x, y } = pointer;
-      const { treeList } = this.$propItems();
-      const _treeList = vexutils.clone(treeList, true);
-      let data;
-      ergodicTree(_treeList);
-      data && this.$emit('rightClick', data);
-      data = null;
-      function ergodicTree(tree) {
-        for (let i = 0, len = tree.length; i < len; i++) {
-          const { left, top, width, height, children = [], origin } = tree[i];
-          if (x >= left && x <= left + width && y >= top && y <= y + height) {
-            data = origin;
-          } else if (children.length) {
-            ergodicTree(children);
-          }
-        }
-      }
-    },
-    // 关闭右键菜单，打开添加节点弹窗表单
-    handleRightClick({ type, subType }) {
-      this.isRightVisible = false;
-      const line = this._currentPoint;
-      this._currentPoint = '';
-      const { lineObj } = this.updateData(line, true);
-      if (['continue'].includes(type)) {
-        this.$emit('continue', subType, lineObj);
-        return;
-      }
-      // editLine:编辑 deleteLine:删除
-      this.$emit(`${type}Line`, lineObj);
-    },
-    // 递归返回一维数据
-    getLineList(list) {
-      list.forEach(item => {
-        if (item?.children?.length) {
-          this.getLineList(item.children);
-        } else {
-          const obj = JSON.parse(JSON.stringify(item));
-          this.lines.push(obj);
-        }
-      });
-    },
-    createLine() {
-      this.lines.forEach((line, i) => {
-        this.drawLineData(line, i);
-      });
-    },
-    async drawLineData(line, i) {
-      const lineList = line.lineList || [];
-      const { originX, endX, xScaleList, yCellHeightTop, originYTop } = this.propItems;
-      const spaceHeight = Math.round(yCellHeightTop / 6);
-      const minMinute = Math.min(...xScaleList);
-      const maxMinute = Math.max(...xScaleList);
-      const lineItemList = [];
-      const y1 = i * yCellHeightTop + originYTop;
-      const y2 = yCellHeightTop * (i + 1) + originYTop;
-      let textArr = []; // 用于存放多个线段的文字内容，显示格式为：第一段线的文字—第二段线的文字
-      const textList = [];
-      for (let j = 0, len = lineList.length; j < len; j++) {
-        const item = lineList[j];
-        if (!item[0] || isObject(item[0])) return;
-        const startMinute = new Date(item[0]).getTime();
-        const endMinute = item[1] ? new Date(item[1]).getTime() : '';
-        let x1 = this.cumputedX(item[0]);
-        let x2 = this.cumputedX(item[1]);
-        // 数字文字
-        const textObj = item[3] || {};
-        const { content: textContent, continue: isContinue } = textObj;
-        // 左边手柄竖线
-        let leftLine;
-        if (x1 && x1 >= originX && x1 <= endX) {
-          leftLine = await this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'left', customIcon: !endMinute && !isContinue });
-          lineItemList.push(leftLine);
-        } else if (x1 < originX) {
-          x1 = originX;
-        } else {
-          x1 = endX;
-        }
-
-        if (item[1] && x2 > endX) {
-          x2 = endX;
-        }
-        if (item[1] && x2 < originX) {
-          x2 = originX;
-        }
-
-        // 中间横线
-        let centerLine;
-        if (item[1] && !(endMinute >= maxMinute && startMinute >= maxMinute) && !(endMinute <= minMinute && startMinute <= minMinute)) {
-          centerLine = this.drawLine([x1, y1 + yCellHeightTop / 2, x2, y1 + yCellHeightTop / 2], {
-            ...this.linesObj.dataLineStyle,
-            selectable: false,
-            evented: false,
-            id: '_lineGroup_' + new Date().getTime(),
-            rowIndex: i
-          });
-          lineItemList.push(centerLine);
-
-          // 添加透明矩形，便于选择横线右键删除
-          const centerRect = new this.fabric.Rect({
-            id: '_lineGroup_' + new Date().getTime(),
-            fill: 'transparent',
-            width: x2 - x1 - 20,
-            height: y2 - 2 * spaceHeight - y1,
-            left: x1 + (x2 - x1) / 2,
-            top: y1 + (y2 - y1) / 2,
-            selectable: true,
-            evented: true,
-            rowIndex: i,
-            colIndex: j,
-            originX: 'center',
-            originY: 'center'
-          });
-          centerRect.lockMovementX = centerRect.lockMovementY = true;
-          centerRect.hasControls = centerRect.hasBorders = false;
-          this.hoverEvent(centerRect, { textObj, startTime: item[0], endTime: item[1] });
-          lineItemList.push(centerRect);
-          leftLine && leftLine.bringToFront();
-        }
-
-        // 右边手柄竖线
-        let rightLine;
-        if (item[1] && endMinute <= maxMinute && endMinute >= minMinute) {
-          rightLine = await this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'right', isContinue });
-          lineItemList.push(rightLine);
-        }
-
-        // 设置拖动限制值
-        const leftLimit = {
-          x1: originX,
-          x2: x2 ? x2 : endX
-        };
-        const rightLimit = {
-          x1: x2 ? x1 : originX,
-          x2: endX
-        };
-        if (lineList[j - 1]) {
-          const [preItem0, preItem1] = lineList[j - 1];
-          if (preItem1) {
-            const preEndMinute = new Date(preItem1).getTime();
-            if (preEndMinute >= minMinute && preEndMinute < maxMinute) {
-              leftLimit.x1 = this.cumputedX(preItem1);
-              if (!x2) rightLimit.x1 = leftLimit.x1;
-            }
-          } else {
-            const preStartMinute = new Date(preItem0).getTime();
-            if (preStartMinute >= minMinute && preStartMinute < maxMinute) {
-              leftLimit.x1 = this.cumputedX(preItem0);
-              if (!x2) rightLimit.x1 = leftLimit.x1;
-            }
-          }
-        }
-        if (lineList[j + 1]) {
-          const [preItem0] = lineList[j + 1];
-          if (preItem0) {
-            const preStartMinute = new Date(preItem0).getTime();
-            if (preStartMinute > minMinute && preStartMinute <= maxMinute) rightLimit.x2 = this.cumputedX(preItem0);
-          }
-        }
-
-        // 文字内容
-        const textTop = x2 ? (y1 + y2) / 2 : y1 + yCellHeightTop / 2;
-        let text =
-          (endMinute === '' && leftLine) || (item[1] && !(x1 === originX && x2 === originX) && !(x1 === endX && x2 === endX))
-            ? this.drawLineText(textArr.concat([textContent]), textTop, i, j, x1, x2, { leftLimit, rightLimit, y2 })
-            : null;
-        // 文字内容居右侧竖线且超出当前线段右边界则移除
-        if (text) {
-          textArr = [];
-          this.hoverEvent(text, { textObj, startTime: item[0], endTime: item[1] });
-          textList.push(text);
-        }
-
-        const commonOptions = {
-          __range: [x1, x2],
-          __baseY: y2,
-          centerLine,
-          text,
-          textObj,
-          leftLimit,
-          rightLimit,
-          startTime: item[0],
-          endTime: item[1]
-        };
-        this.lineEvent({
-          __position: 'left',
-          line: leftLine,
-          limitX: leftLimit,
-          preText: textList[text ? textList.length - 2 : textList.length - 1] || null,
-          ...commonOptions
-        });
-        this.lineEvent({ __position: 'right', line: rightLine, limitX: rightLimit, preText: null, ...commonOptions });
-      }
-      this.canvas.add(...lineItemList, ...textList);
-    },
-    drawLineText(textArr, top, i, j, x1, x2, { leftLimit, rightLimit, y2 }) {
-      const value = textArr.filter(v => v !== '').join('—');
-
-      if (value === '') return null;
-      const text = new this.fabric.Text(value, {
-        top,
-        evented: true,
-        selectable: true,
-        lockMovementX: true,
-        lockMovementY: true,
-        backgroundColor: '#fff',
-        originY: 'center',
-        id: '_lineGroup_' + new Date().getTime(),
-        rowIndex: i,
-        colIndex: j,
-        ...(this.linesObj.dataTextStyle || {})
-      });
-      this.setTextPosition(text, top, x1, x2, leftLimit, rightLimit, y2);
-      text.hasControls = text.hasBorders = false;
-      return text;
-    },
-    setTextPosition(text, top, x1, x2, leftLimit, rightLimit, baseY) {
-      const textWidth = text.width + 2; // 横线小于text文字的宽度则text显示在右侧
-      const centerLineWidth = (x2 || x1) - x1 ?? 0;
-      const rightWidth = rightLimit.x2 - leftLimit.x2 || rightLimit.x2 - x1 || 0;
-      const leftWidth = rightLimit.x1 - leftLimit.x1 || x1 - leftLimit.x1 || 0;
-      const changeOptions = {
-        originX: 'center',
-        left: x1 + centerLineWidth / 2,
-        top,
-        scaleX: 1,
-        scaleY: 1,
-        originY: 'center',
-        backgroundColor: '#fff',
-        textLimit: {
-          x1,
-          x2: x2 || x1
-        }
-      };
-
-      if (centerLineWidth >= textWidth) {
-        // console.log('正常显示的文本')
-      } else if (textWidth <= rightWidth) {
-        changeOptions.originX = 'left';
-        changeOptions.left = (x2 ? x2 : x1 + 3) + this.textMarginLeft;
-        changeOptions.backgroundColor = 'transparent';
-        changeOptions.textLimit.x2 = changeOptions.left + text.width;
-      } else if (textWidth <= leftWidth) {
-        changeOptions.originX = 'right';
-        changeOptions.left = x1 - 3 - this.textMarginLeft;
-        changeOptions.backgroundColor = 'transparent';
-        changeOptions.textLimit.x1 = changeOptions.left - text.width;
-      } else {
-        changeOptions.scaleX = 0.75;
-        changeOptions.scaleY = 0.75;
-        changeOptions.originY = 'bottom';
-        changeOptions.top = baseY + 1.5;
-        changeOptions.backgroundColor = 'transparent';
-        if (leftLimit.x1 == this.propItems.originX) {
-          changeOptions.originX = 'left';
-          changeOptions.left = leftLimit.x1 + this.textMarginLeft;
-        }
-        if (rightLimit.x2 == this.propItems.endX) {
-          changeOptions.originX = 'right';
-          changeOptions.left = rightLimit.x2 - this.textMarginLeft;
-        }
-      }
-      text.setCoords().set(changeOptions);
-    },
-    /**
-     * @description: 画-|-样式的组
-     * @param {*} x1 // |-|中左侧线的x轴坐标
-     * @param {*} x2 // |-|中右侧线的x轴坐标
-     * @param {*} y1 // |-|中竖线的顶部y轴坐标
-     * @param {*} y2 // |-|中竖线的底部y轴坐标
-     * @param {*} position // 定位当前线是左侧线还是右侧线
-     * @return {*}
-     */
-
-    async drawGroup(x1, x2, y1, y2, i, j, others) {
-      const id = '_lineGroup_' + Date.now();
-      let point;
-      let left;
-      const { position, customIcon, isContinue } = others;
-      const halfH = (y2 - y1) / 2;
-      if (position === 'left') {
-        point = [x1, y1, x1, y2 - halfH + 1];
-        left = x1 - this.propItems.xCellWidth / 2;
-      } else {
-        point = [x2, y1, x2, y2 - halfH + 1];
-        left = x2 - this.propItems.xCellWidth / 2;
-      }
-      let line;
-      const common = {
-        selectable: false,
-        evented: false
-      };
-      const { dataLineStyle = {} } = this.linesObj;
-      if (customIcon) {
-        const _customIcon = this.linesObj.customIcon || {
-          type: 'circle'
-        };
-
-        line = await this.createPoint(_customIcon.type, {
-          left: x1,
-          top: y1 + halfH,
-          originY: 'center',
-          ...dataLineStyle,
-          ...(dataLineStyle.stroke
-            ? {
-                fill: dataLineStyle.stroke
-              }
-            : {}),
-          ...(_customIcon.style || {}),
-          ...common
-        });
-      } else {
-        line = isContinue
-          ? await this.createArrow({
-              left: x2,
-              top: y1 + halfH - 3.5,
-              originY: 'bottom',
-              originX: 'right',
-              fill: 'transparent',
-              width: 7,
-              height: 7,
-              angle: 270,
-              ...dataLineStyle,
-              ...common
-            })
-          : this.drawLine(point, {
-              ...dataLineStyle,
-              ...common
-            });
-      }
-      const rect = new this.fabric.Rect({
-        width: this.propItems.xCellWidth,
-        height: y2 - y1,
-        fill: 'transparent',
-        left,
-        top: y1,
-        selectable: false,
-        evented: false
-      });
-
-      return new this.fabric.Group([line, rect], {
-        selectable: true,
-        evented: true,
-        originX: 'center',
-        originY: 'center',
-        id,
-        rowIndex: i,
-        colIndex: j,
-        ...this.eventStyle,
-        ...others,
-        isContinue,
-        lockMovementY: true // 锁定Y轴，即只能x轴方向移动
-      });
-    },
-    hoverEvent(point, attr) {
-      const { textObj, startTime, endTime } = attr;
-      startTime && (point.startTime = startTime);
-      endTime && (point.endTime = endTime);
-      textObj && (point.textObj = textObj);
-      point.on('mouseover', () => {
-        this.showDrapPopup(point);
-      });
-      point.on('mouseout', () => {
-        this.isDropVisible = false;
-      });
-    },
-    lineEvent(attr) {
-      const { line, centerLine, text, textObj, leftLimit, rightLimit, limitX, startTime, endTime, preText, __position, __range, __baseY } = attr;
-      if (line) {
-        line.hasControls = line.hasBorders = false;
-        centerLine && (line.centerLine = centerLine);
-        text && (line.text = text);
-        line.limitX = limitX;
-        preText && (line.preText = preText);
-        line.leftLimit = leftLimit;
-        line.rightLimit = rightLimit;
-        line.__position = __position;
-        line.__range = __range;
-        line.__baseY = __baseY;
-
-        this.hoverEvent(line, { textObj, startTime, endTime });
-        // 移动中 实时更新相关联的线的坐标
-        line.on('moving', () => {
-          this.lineMoveLimit(line);
-          this.textUpdatePositionX(line);
-          // this.canvas.renderAll();
-          this.showDrapPopup(line);
-        });
-        line.on('moved', () => {
-          // const objBoundingBox = line.getBoundingRect();
-          if (line && line.id.includes('_lineGroup_')) {
-            this.isDropVisible = false;
-            const { lineObj } = this.updateData(line);
-            this.updateLine(line.rowIndex);
-            this.$emit('lineChange', { ponits: { x: line.left, y: line.top }, value: lineObj });
-          }
-        });
-      }
-    },
-    showDrapPopup(line) {
-      this.isDropVisible = true;
-      const { yCellHeightTop } = this.propItems;
-      this.dropPos = {
-        left: line.left,
-        top: line.top,
-        margin: { top: yCellHeightTop / 2 }
-      };
-      let startTime, endTime, obj;
-      if (line.limitX) {
-        const { position } = line;
-        const { lineObj, x } = this.updateData(line);
-        obj = lineObj;
-        startTime = position === 'left' ? x : line.startTime || '';
-        endTime = position === 'left' ? line.endTime || '' : x;
-      } else {
-        obj = this.updateData(line, true).lineObj;
-        startTime = line.startTime || '';
-        endTime = line.endTime || '';
-      }
-      this.dropVal = {
-        title: obj.title || '',
-        list: [
-          { id: '1', name: '开始时间', value: startTime },
-          { id: '2', name: '结束时间', value: endTime },
-          { id: '3', name: '流速', value: line.textObj?.currentSpeed || '' },
-          { id: '4', name: '浓度', value: line.textObj?.consistence || '' },
-          { id: '5', name: '总量', value: line.textObj?.total || '' }
-        ]
-      };
-    },
-    // 移动手柄竖线后，需要更新this.lines，便于后面重新渲染时重新计算其左右限制坐标点
-    updateData(line, isHover) {
-      if (!line) return;
-      const { rowIndex, colIndex, position, left, isContinue } = line;
-      const linesRow = this.lines[rowIndex];
-      // isHover，只是鼠标移上去显示提示信息而不需要重新计算x值
-      if (isHover) {
-        return { lineObj: { title: linesRow.title, obj: linesRow.lineList[colIndex], rowIndex, index: colIndex } };
-      }
-      const x = this.getXValue(isContinue ? left + 0.5 : left);
-      if (position === 'left') {
-        linesRow.lineList[colIndex][0] = x;
-      } else {
-        linesRow.lineList[colIndex][1] = x;
-      }
-      return { lineObj: { title: linesRow.title, obj: linesRow.lineList[colIndex], val: x }, x };
-    },
-    // 直线数组更新后 移除旧的直线并绘制新的直线，处理拖动限制不能更新的问题
-    updateLine(rowIndex) {
-      this.canvas.forEachObject(obj => {
-        if (obj.rowIndex === rowIndex) {
-          this.canvas.remove(obj);
-        }
-      });
-      this.drawLineData(this.lines[rowIndex], rowIndex);
-    },
-    // 移除头部表格所有线条数字数据
-    removeLines() {
-      this.canvas.forEachObject(obj => {
-        if (obj.id && obj.id.includes('_lineGroup_')) {
-          this.canvas.remove(obj);
-        }
-      });
-      this.lines = [];
-    },
-    drawLine(lines, others) {
-      const line = new this.fabric.Line(lines, {
-        objectCaching: false,
-        ...others
-      });
-      return line;
-    },
-    lineMoveLimit(line) {
-      line.setCoords(); // 需调用setCoords()才能重新计算控制位置(改变Object状态)
-      if (line.left < line.limitX.x1) {
-        line.set('left', line.limitX.x1);
-      }
-      if (line.left > line.limitX.x2) {
-        line.set('left', line.limitX.x2);
-      }
-      if (line.centerLine) {
-        const options = line.__position === 'left' ? { x1: line.left } : { x2: line.left };
-        line.centerLine.setCoords().set(options);
-      }
-    },
-    textUpdatePositionX(line) {
-      const text = line.text || null;
-      if (text) {
-        const { __baseY, __range, leftLimit, rightLimit, __position } = line;
-        const x1 = __position === 'left' ? line.left : __range[0];
-        const x2 = __position === 'right' ? line.left : __range[1];
-        const top = __baseY - this.propItems.yCellHeightTop / 2;
-        this.setTextPosition(text, top, x1, x2, leftLimit, rightLimit, __baseY);
-      }
-    },
-    repaintLine() {
-      if (this.lines.length) {
-        this.removeLines();
-      }
-      this.getLineList(this.linesObj.list);
-      this.createLine();
-    }
-  },
-  beforeDestroy() {}
-};
-</script>
+<template>
+  <div class="line">
+    <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 MouseRightClick from '../components/MouseRightClick';
+import FabricCommon from '../mixins/fabricCommon';
+import draw from '../mixins/draw';
+import { isObject } from '../mixins/type';
+import DropPopup from '../components/DropPopup';
+import eventCommon from '../mixins/eventCommon';
+import vexutils from '@/utils/vexutils';
+
+const rightClickNode = [
+  { name: '修改', type: 'edit' },
+  { name: '删除', type: 'delete' },
+  { name: '开始持续', type: 'continue', subType: 'start' },
+  { name: '停止持续', type: 'continue', subType: 'end' }
+];
+export default {
+  name: 'fabric-lines',
+  mixins: [FabricCommon, eventCommon, draw],
+  props: {
+    linesObj: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    MouseRightClick,
+    DropPopup
+  },
+  data() {
+    return {
+      rightPos: { clientX: 0, clientY: 0 },
+      rightClickNode: [],
+      activeEvent: null, // 当前可右键活动的对象
+      isDropVisible: false,
+      dropVal: {},
+      dropPos: { clientX: 0, clientY: 0 },
+      lines: [],
+      textMarginLeft: 5
+    };
+  },
+  computed: {
+    eventStyle() {
+      return this.linesObj?.eventStyle || { selectable: true, evented: true };
+    }
+  },
+  mounted() {},
+
+  methods: {
+    init() {
+      this.getLineList(this.linesObj.list);
+      this.createLine();
+      this.eventStyle.evented && this.createEvent();
+    },
+    createEvent() {
+      this.canvas.on('mouse:up', event => {
+        if (event.button === 3) {
+          const { x, y } = event.pointer;
+          if (this.isTopTreeAndGridLimit(x, y)) {
+            this.activeEvent = event;
+            !this.isAddEventListenerContextmenu && this.canvas.wrapperEl.addEventListener('contextmenu', this.addEventListenerContextmenu, true);
+            this.isAddEventListenerContextmenu = true;
+          }
+        }
+      });
+    },
+    handleMoving(event) {
+      const { pointer } = event;
+      const { x, y } = event.pointer;
+      this.dropPointer = { ...pointer };
+      const movingPopupContentList = [{ id: '1', name: '时间', value: this.getXValue(x) }];
+      this.movingShowPopup(movingPopupContentList);
+    },
+    /**
+     * 右键监听事件
+     */
+    addEventListenerContextmenu(event) {
+      event.preventDefault();
+      const { offsetX, offsetY } = event;
+      if (this.isTopTreeAndGridLimit(offsetX, offsetY)) {
+        this.openRightModal();
+      }
+      return false;
+    },
+    // 打开右键菜单
+    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('_lineGroup_')) {
+          this._currentPoint = target || '';
+          this.rightClickNode = Object.freeze(rightClickNode.slice());
+          this.isRightVisible = true;
+        } else {
+          this.doContextmenuEvent(this.activeEvent.pointer);
+        }
+      });
+    },
+    doContextmenuEvent(pointer) {
+      const { x, y } = pointer;
+      const { treeList } = this.$propItems();
+      const _treeList = vexutils.clone(treeList, true);
+      let data;
+      ergodicTree(_treeList);
+      data && this.$emit('rightClick', data);
+      data = null;
+      function ergodicTree(tree) {
+        for (let i = 0, len = tree.length; i < len; i++) {
+          const { left, top, width, height, children = [], origin } = tree[i];
+          if (x >= left && x <= left + width && y >= top && y <= y + height) {
+            data = origin;
+          } else if (children.length) {
+            ergodicTree(children);
+          }
+        }
+      }
+    },
+    // 关闭右键菜单，打开添加节点弹窗表单
+    handleRightClick({ type, subType }) {
+      this.isRightVisible = false;
+      const line = this._currentPoint;
+      this._currentPoint = '';
+      const { lineObj } = this.updateData(line, true);
+      if (['continue'].includes(type)) {
+        this.$emit('continue', subType, lineObj);
+        return;
+      }
+      // editLine:编辑 deleteLine:删除
+      this.$emit(`${type}Line`, lineObj);
+    },
+    // 递归返回一维数据
+    getLineList(list) {
+      list.forEach(item => {
+        if (item?.children?.length) {
+          this.getLineList(item.children);
+        } else {
+          const obj = JSON.parse(JSON.stringify(item));
+          this.lines.push(obj);
+        }
+      });
+    },
+    createLine() {
+      this.lines.forEach((line, i) => {
+        this.drawLineData(line, i);
+      });
+    },
+    async drawLineData(line, i) {
+      const lineList = line.lineList || [];
+      const { originX, endX, xScaleList, yCellHeightTop, originYTop } = this.propItems;
+      const spaceHeight = Math.round(yCellHeightTop / 6);
+      const minMinute = Math.min(...xScaleList);
+      const maxMinute = Math.max(...xScaleList);
+      const lineItemList = [];
+      const y1 = i * yCellHeightTop + originYTop;
+      const y2 = yCellHeightTop * (i + 1) + originYTop;
+      let textArr = []; // 用于存放多个线段的文字内容，显示格式为：第一段线的文字—第二段线的文字
+      const textList = [];
+      for (let j = 0, len = lineList.length; j < len; j++) {
+        const item = lineList[j];
+        if (!item[0] || isObject(item[0])) return;
+        const startMinute = new Date(item[0]).getTime();
+        const endMinute = item[1] ? new Date(item[1]).getTime() : '';
+        let x1 = this.cumputedX(item[0]);
+        let x2 = this.cumputedX(item[1]);
+        // 数字文字
+        const textObj = item[3] || {};
+        const { content: textContent, continue: isContinue } = textObj;
+        // 左边手柄竖线
+        let leftLine;
+        if (x1 && x1 >= originX && x1 <= endX) {
+          leftLine = await this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'left', customIcon: !endMinute && !isContinue });
+          lineItemList.push(leftLine);
+        } else if (x1 < originX) {
+          x1 = originX;
+        } else {
+          x1 = endX;
+        }
+
+        if (item[1] && x2 > endX) {
+          x2 = endX;
+        }
+        if (item[1] && x2 < originX) {
+          x2 = originX;
+        }
+
+        // 中间横线
+        let centerLine;
+        if (item[1] && !(endMinute >= maxMinute && startMinute >= maxMinute) && !(endMinute <= minMinute && startMinute <= minMinute)) {
+          centerLine = this.drawLine([x1, y1 + yCellHeightTop / 2, x2, y1 + yCellHeightTop / 2], {
+            ...this.linesObj.dataLineStyle,
+            selectable: false,
+            evented: false,
+            id: '_lineGroup_' + new Date().getTime(),
+            rowIndex: i
+          });
+          lineItemList.push(centerLine);
+
+          // 添加透明矩形，便于选择横线右键删除
+          const centerRect = new this.fabric.Rect({
+            id: '_lineGroup_' + new Date().getTime(),
+            fill: 'transparent',
+            width: x2 - x1 - 20,
+            height: y2 - 2 * spaceHeight - y1,
+            left: x1 + (x2 - x1) / 2,
+            top: y1 + (y2 - y1) / 2,
+            selectable: true,
+            evented: true,
+            rowIndex: i,
+            colIndex: j,
+            originX: 'center',
+            originY: 'center'
+          });
+          centerRect.lockMovementX = centerRect.lockMovementY = true;
+          centerRect.hasControls = centerRect.hasBorders = false;
+          this.hoverEvent(centerRect, { textObj, startTime: item[0], endTime: item[1] });
+          lineItemList.push(centerRect);
+          leftLine && leftLine.bringToFront();
+        }
+
+        // 右边手柄竖线
+        let rightLine;
+        if (item[1] && endMinute <= maxMinute && endMinute >= minMinute) {
+          rightLine = await this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'right', isContinue });
+          lineItemList.push(rightLine);
+        }
+
+        // 设置拖动限制值
+        const leftLimit = {
+          x1: originX,
+          x2: x2 ? x2 : endX
+        };
+        const rightLimit = {
+          x1: x2 ? x1 : originX,
+          x2: endX
+        };
+        if (lineList[j - 1]) {
+          const [preItem0, preItem1] = lineList[j - 1];
+          if (preItem1) {
+            const preEndMinute = new Date(preItem1).getTime();
+            if (preEndMinute >= minMinute && preEndMinute < maxMinute) {
+              leftLimit.x1 = this.cumputedX(preItem1);
+              if (!x2) rightLimit.x1 = leftLimit.x1;
+            }
+          } else {
+            const preStartMinute = new Date(preItem0).getTime();
+            if (preStartMinute >= minMinute && preStartMinute < maxMinute) {
+              leftLimit.x1 = this.cumputedX(preItem0);
+              if (!x2) rightLimit.x1 = leftLimit.x1;
+            }
+          }
+        }
+        if (lineList[j + 1]) {
+          const [preItem0] = lineList[j + 1];
+          if (preItem0) {
+            const preStartMinute = new Date(preItem0).getTime();
+            if (preStartMinute > minMinute && preStartMinute <= maxMinute) rightLimit.x2 = this.cumputedX(preItem0);
+          }
+        }
+
+        // 文字内容
+        const textTop = x2 ? (y1 + y2) / 2 : y1 + yCellHeightTop / 2;
+        let text =
+          (endMinute === '' && leftLine) || (item[1] && !(x1 === originX && x2 === originX) && !(x1 === endX && x2 === endX))
+            ? this.drawLineText(textArr.concat([textContent]), textTop, i, j, x1, x2, { leftLimit, rightLimit, y2 })
+            : null;
+        // 文字内容居右侧竖线且超出当前线段右边界则移除
+        if (text) {
+          textArr = [];
+          this.hoverEvent(text, { textObj, startTime: item[0], endTime: item[1] });
+          textList.push(text);
+        }
+
+        const commonOptions = {
+          __range: [x1, x2],
+          __baseY: y2,
+          centerLine,
+          text,
+          textObj,
+          leftLimit,
+          rightLimit,
+          startTime: item[0],
+          endTime: item[1]
+        };
+        this.lineEvent({
+          __position: 'left',
+          line: leftLine,
+          limitX: leftLimit,
+          preText: textList[text ? textList.length - 2 : textList.length - 1] || null,
+          ...commonOptions
+        });
+        this.lineEvent({ __position: 'right', line: rightLine, limitX: rightLimit, preText: null, ...commonOptions });
+      }
+      this.canvas.add(...lineItemList, ...textList);
+    },
+    drawLineText(textArr, top, i, j, x1, x2, { leftLimit, rightLimit, y2 }) {
+      const value = textArr.filter(v => v !== '').join('—');
+
+      if (value === '') return null;
+      const text = new this.fabric.Text(value, {
+        top,
+        evented: true,
+        selectable: true,
+        lockMovementX: true,
+        lockMovementY: true,
+        backgroundColor: '#fff',
+        originY: 'center',
+        id: '_lineGroup_' + new Date().getTime(),
+        rowIndex: i,
+        colIndex: j,
+        ...(this.linesObj.dataTextStyle || {})
+      });
+      this.setTextPosition(text, top, x1, x2, leftLimit, rightLimit, y2);
+      text.hasControls = text.hasBorders = false;
+      return text;
+    },
+    setTextPosition(text, top, x1, x2, leftLimit, rightLimit, baseY) {
+      const textWidth = text.width + 2; // 横线小于text文字的宽度则text显示在右侧
+      const centerLineWidth = (x2 || x1) - x1 ?? 0;
+      const rightWidth = rightLimit.x2 - leftLimit.x2 || rightLimit.x2 - x1 || 0;
+      const leftWidth = rightLimit.x1 - leftLimit.x1 || x1 - leftLimit.x1 || 0;
+      const changeOptions = {
+        originX: 'center',
+        left: x1 + centerLineWidth / 2,
+        top,
+        scaleX: 1,
+        scaleY: 1,
+        originY: 'center',
+        backgroundColor: '#fff',
+        textLimit: {
+          x1,
+          x2: x2 || x1
+        }
+      };
+
+      if (centerLineWidth >= textWidth) {
+        // console.log('正常显示的文本')
+      } else if (textWidth <= rightWidth) {
+        changeOptions.originX = 'left';
+        changeOptions.left = (x2 ? x2 : x1 + 3) + this.textMarginLeft;
+        changeOptions.backgroundColor = 'transparent';
+        changeOptions.textLimit.x2 = changeOptions.left + text.width;
+      } else if (textWidth <= leftWidth) {
+        changeOptions.originX = 'right';
+        changeOptions.left = x1 - 3 - this.textMarginLeft;
+        changeOptions.backgroundColor = 'transparent';
+        changeOptions.textLimit.x1 = changeOptions.left - text.width;
+      } else {
+        changeOptions.scaleX = 0.75;
+        changeOptions.scaleY = 0.75;
+        changeOptions.originY = 'bottom';
+        changeOptions.top = baseY + 1.5;
+        changeOptions.backgroundColor = 'transparent';
+        if (leftLimit.x1 == this.propItems.originX) {
+          changeOptions.originX = 'left';
+          changeOptions.left = leftLimit.x1 + this.textMarginLeft;
+        }
+        if (rightLimit.x2 == this.propItems.endX) {
+          changeOptions.originX = 'right';
+          changeOptions.left = rightLimit.x2 - this.textMarginLeft;
+        }
+      }
+      text.setCoords().set(changeOptions);
+    },
+    /**
+     * @description: 画-|-样式的组
+     * @param {*} x1 // |-|中左侧线的x轴坐标
+     * @param {*} x2 // |-|中右侧线的x轴坐标
+     * @param {*} y1 // |-|中竖线的顶部y轴坐标
+     * @param {*} y2 // |-|中竖线的底部y轴坐标
+     * @param {*} position // 定位当前线是左侧线还是右侧线
+     * @return {*}
+     */
+
+    async drawGroup(x1, x2, y1, y2, i, j, others) {
+      const id = '_lineGroup_' + Date.now();
+      let point;
+      let left;
+      const { position, customIcon, isContinue } = others;
+      const halfH = (y2 - y1) / 2;
+      if (position === 'left') {
+        point = [x1, y1, x1, y2 - halfH + 1];
+        left = x1 - this.propItems.xCellWidth / 2;
+      } else {
+        point = [x2, y1, x2, y2 - halfH + 1];
+        left = x2 - this.propItems.xCellWidth / 2;
+      }
+      let line;
+      const common = {
+        selectable: false,
+        evented: false
+      };
+      const { dataLineStyle = {} } = this.linesObj;
+      if (customIcon) {
+        const _customIcon = this.linesObj.customIcon || {
+          type: 'circle'
+        };
+
+        line = await this.createPoint(_customIcon.type, {
+          left: x1,
+          top: y1 + halfH,
+          originY: 'center',
+          ...dataLineStyle,
+          ...(dataLineStyle.stroke
+            ? {
+                fill: dataLineStyle.stroke
+              }
+            : {}),
+          ...(_customIcon.style || {}),
+          ...common
+        });
+      } else {
+        line = isContinue
+          ? await this.createArrow({
+              left: x2,
+              top: y1 + halfH - 3.5,
+              originY: 'bottom',
+              originX: 'right',
+              fill: 'transparent',
+              width: 7,
+              height: 7,
+              angle: 270,
+              ...dataLineStyle,
+              ...common
+            })
+          : this.drawLine(point, {
+              ...dataLineStyle,
+              ...common
+            });
+      }
+      const rect = new this.fabric.Rect({
+        width: this.propItems.xCellWidth,
+        height: y2 - y1,
+        fill: 'transparent',
+        left,
+        top: y1,
+        selectable: false,
+        evented: false
+      });
+
+      return new this.fabric.Group([line, rect], {
+        selectable: true,
+        evented: true,
+        originX: 'center',
+        originY: 'center',
+        id,
+        rowIndex: i,
+        colIndex: j,
+        ...this.eventStyle,
+        ...others,
+        isContinue,
+        lockMovementY: true // 锁定Y轴，即只能x轴方向移动
+      });
+    },
+    hoverEvent(point, attr) {
+      const { textObj, startTime, endTime } = attr;
+      startTime && (point.startTime = startTime);
+      endTime && (point.endTime = endTime);
+      textObj && (point.textObj = textObj);
+      point.on('mouseover', () => {
+        this.showDrapPopup(point);
+      });
+      point.on('mouseout', () => {
+        this.isDropVisible = false;
+      });
+    },
+    lineEvent(attr) {
+      const { line, centerLine, text, textObj, leftLimit, rightLimit, limitX, startTime, endTime, preText, __position, __range, __baseY } = attr;
+      if (line) {
+        line.hasControls = line.hasBorders = false;
+        centerLine && (line.centerLine = centerLine);
+        text && (line.text = text);
+        line.limitX = limitX;
+        preText && (line.preText = preText);
+        line.leftLimit = leftLimit;
+        line.rightLimit = rightLimit;
+        line.__position = __position;
+        line.__range = __range;
+        line.__baseY = __baseY;
+
+        this.hoverEvent(line, { textObj, startTime, endTime });
+        // 移动中 实时更新相关联的线的坐标
+        line.on('moving', () => {
+          this.lineMoveLimit(line);
+          this.textUpdatePositionX(line);
+          // this.canvas.renderAll();
+          this.showDrapPopup(line);
+        });
+        line.on('moved', () => {
+          // const objBoundingBox = line.getBoundingRect();
+          if (line && line.id.includes('_lineGroup_')) {
+            this.isDropVisible = false;
+            const { lineObj } = this.updateData(line);
+            this.updateLine(line.rowIndex);
+            this.$emit('lineChange', { ponits: { x: line.left, y: line.top }, value: lineObj });
+          }
+        });
+      }
+    },
+    showDrapPopup(line) {
+      this.isDropVisible = true;
+      const { yCellHeightTop } = this.propItems;
+      this.dropPos = {
+        left: line.left,
+        top: line.top,
+        margin: { top: yCellHeightTop / 2 }
+      };
+      let startTime, endTime, obj;
+      if (line.limitX) {
+        const { position } = line;
+        const { lineObj, x } = this.updateData(line);
+        obj = lineObj;
+        startTime = position === 'left' ? x : line.startTime || '';
+        endTime = position === 'left' ? line.endTime || '' : x;
+      } else {
+        obj = this.updateData(line, true).lineObj;
+        startTime = line.startTime || '';
+        endTime = line.endTime || '';
+      }
+      this.dropVal = {
+        title: obj.title || '',
+        list: [
+          { id: '1', name: '开始时间', value: startTime },
+          { id: '2', name: '结束时间', value: endTime },
+          { id: '3', name: '流速', value: line.textObj?.currentSpeed || '' },
+          { id: '4', name: '浓度', value: line.textObj?.consistence || '' },
+          { id: '5', name: '总量', value: line.textObj?.total || '' }
+        ]
+      };
+    },
+    // 移动手柄竖线后，需要更新this.lines，便于后面重新渲染时重新计算其左右限制坐标点
+    updateData(line, isHover) {
+      if (!line) return;
+      const { rowIndex, colIndex, position, left, isContinue } = line;
+      const linesRow = this.lines[rowIndex];
+      // isHover，只是鼠标移上去显示提示信息而不需要重新计算x值
+      if (isHover) {
+        return { lineObj: { title: linesRow.title, obj: linesRow.lineList[colIndex], rowIndex, index: colIndex } };
+      }
+      const x = this.getXValue(isContinue ? left + 0.5 : left);
+      if (position === 'left') {
+        linesRow.lineList[colIndex][0] = x;
+      } else {
+        linesRow.lineList[colIndex][1] = x;
+      }
+      return { lineObj: { title: linesRow.title, obj: linesRow.lineList[colIndex], val: x }, x };
+    },
+    // 直线数组更新后 移除旧的直线并绘制新的直线，处理拖动限制不能更新的问题
+    updateLine(rowIndex) {
+      this.canvas.forEachObject(obj => {
+        if (obj.rowIndex === rowIndex) {
+          this.canvas.remove(obj);
+        }
+      });
+      this.drawLineData(this.lines[rowIndex], rowIndex);
+    },
+    // 移除头部表格所有线条数字数据
+    removeLines() {
+      this.canvas.forEachObject(obj => {
+        if (obj.id && obj.id.includes('_lineGroup_')) {
+          this.canvas.remove(obj);
+        }
+      });
+      this.lines = [];
+    },
+    drawLine(lines, others) {
+      const line = new this.fabric.Line(lines, {
+        objectCaching: false,
+        ...others
+      });
+      return line;
+    },
+    lineMoveLimit(line) {
+      line.setCoords(); // 需调用setCoords()才能重新计算控制位置(改变Object状态)
+      if (line.left < line.limitX.x1) {
+        line.set('left', line.limitX.x1);
+      }
+      if (line.left > line.limitX.x2) {
+        line.set('left', line.limitX.x2);
+      }
+      if (line.centerLine) {
+        const options = line.__position === 'left' ? { x1: line.left } : { x2: line.left };
+        line.centerLine.setCoords().set(options);
+      }
+    },
+    textUpdatePositionX(line) {
+      const text = line.text || null;
+      if (text) {
+        const { __baseY, __range, leftLimit, rightLimit, __position } = line;
+        const x1 = __position === 'left' ? line.left : __range[0];
+        const x2 = __position === 'right' ? line.left : __range[1];
+        const top = __baseY - this.propItems.yCellHeightTop / 2;
+        this.setTextPosition(text, top, x1, x2, leftLimit, rightLimit, __baseY);
+      }
+    },
+    repaintLine() {
+      if (this.lines.length) {
+        this.removeLines();
+      }
+      this.getLineList(this.linesObj.list);
+      this.createLine();
+    }
+  },
+  beforeDestroy() {}
+};
+</script>