cnhis-design-vue 2.1.56 → 2.1.58

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

@@ -1,552 +1,552 @@
-<template>
-  <div class="line">
-    <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 MouseRightClick from '../components/MouseRightClick';
-import FabricCommon from '../mixins/fabricCommon';
-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],
-  props: {
-    linesObj: {
-      type: Object,
-      required: true
-    }
-  },
-  components: {
-    MouseRightClick,
-    DropPopup
-  },
-  data() {
-    return {
-      isRightVisible: false,
-      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;
-          const { originX, endX, endYTop } = this.$propItems();
-          if (!(x < 0 || x > endX || y < 0 || y > endYTop)) {
-            this.activeEvent = event;
-            document.querySelector('.upper-canvas').addEventListener('contextmenu', this.addEventListenerContextmenu, true);
-          }
-        }
-      });
-    },
-    /**
-     * 右键监听事件
-     */
-    addEventListenerContextmenu(event) {
-      event.preventDefault();
-      const x = event.offsetX;
-      const y = event.offsetY;
-      const { originX, endX, endYTop } = this.$propItems();
-      if (!(x < 0 || x > endX || y < 0 || y > endYTop)) {
-        this.openRightModal(this.activeEvent);
-      }
-      return false;
-    },
-    // 打开右键菜单
-    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('_lineGroup_')) {
-          this._currentPoint = target || '';
-          this.rightClickNode = Object.freeze(rightClickNode.slice());
-          this.isRightVisible = true;
-        } else {
-          this.doContextmenuEvent(event.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);
-      });
-    },
-    drawLineData(line, i) {
-      const lineList = line.lineList || [];
-      const { originX, endX, xScaleList, yCellHeightTop } = this.propItems;
-      const spaceHeight = Math.round(yCellHeightTop / 6);
-      const minMinute = Math.min(...xScaleList);
-      const maxMinute = Math.max(...xScaleList);
-      const lineItemList = [];
-      const y1 = i * yCellHeightTop;
-      const y2 = yCellHeightTop * (i + 1);
-      let textArr = []; // 用于存放多个线段的文字内容，显示格式为：第一段线的文字—第二段线的文字
-      const textList = [];
-      lineList.forEach((item, 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 textContent = textObj.content || '';
-
-        // 左边手柄竖线
-        let leftLine;
-        if (x1 && x1 >= originX && x1 <= endX) {
-          leftLine = this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'left' });
-          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 = this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'right' });
-          lineItemList.push(rightLine);
-        }
-
-        // 文字内容
-        const textTop = x2 ? (y1 + y2) / 2 : y1 + yCellHeightTop / 2;
-        let textLimitRight;
-        let text =
-          (endMinute === '' && leftLine) || (item[1] && !(x1 === originX && x2 === originX) && !(x1 === endX && x2 === endX))
-            ? this.drawLineText(textArr.concat([textContent]), textTop, i, j, centerLine, x1, x2)
-            : null;
-        // 文字内容居右侧竖线且超出当前线段右边界则移除
-        if (text) {
-          textLimitRight = lineList[j + 1]?.[0] && this.cumputedX(lineList[j + 1][0]) <= endX ? this.cumputedX(lineList[j + 1][0]) : endX;
-          if (text.originX === 'left' && text.left + text.width + 2 >= textLimitRight) {
-            textLimitRight !== endX && textArr.push(textContent);
-            this.canvas.remove(text);
-            text = null;
-          } else {
-            textArr = [];
-            this.hoverEvent(text, { textObj, startTime: item[0], endTime: item[1] });
-            textList.push(text);
-          }
-        }
-
-        // 设置拖动限制值
-        let leftLimit = {};
-        leftLimit.x2 = x2 ? x2 : endX;
-        leftLimit.x1 = originX;
-        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);
-          } else {
-            const preStartMinute = new Date(preItem0).getTime();
-            if (preStartMinute >= minMinute && preStartMinute < maxMinute) leftLimit.x1 = this.cumputedX(preItem0);
-          }
-        }
-        let rightLimt = {};
-        rightLimt.x1 = x2 ? x1 : originX;
-        rightLimt.x2 = endX;
-        if (lineList[j + 1]) {
-          const [preItem0] = lineList[j + 1];
-          if (preItem0) {
-            const preStartMinute = new Date(preItem0).getTime();
-            if (preStartMinute > minMinute && preStartMinute <= maxMinute) rightLimt.x2 = this.cumputedX(preItem0);
-          }
-        }
-
-        this.lineEvent({
-          line: leftLine,
-          line1: centerLine,
-          text,
-          textObj,
-          limitX: leftLimit,
-          startTime: item[0],
-          endTime: item[1],
-          preText: textList[text ? textList.length - 2 : textList.length - 1] || null,
-          textLimitRight
-        });
-        this.lineEvent({ line: rightLine, line2: centerLine, text, textObj, limitX: rightLimt, startTime: item[0], endTime: item[1], preText: null, textLimitRight: rightLimt.x2 });
-      });
-      this.canvas.add(...lineItemList, ...textList);
-      // this.canvas.requestRenderAll();
-    },
-    drawLineText(textArr, top, i, j, centerLine, x1, x2) {
-      // const value = textArr.map(v => {
-      //   const channel = v.channel ? `(${v.channel})` : '';
-      //   const consistence = v.consistence ? `(${v.consistence})` : '';
-      //   const total = v.total ? `(${v.total})` : '';
-      //   return `${v.currentSpeed || ''}${channel}${consistence}${total}`
-      // }).join('—');
-      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 || {})
-      });
-      const limitWidth = text.width + 2; // 横线小于text文字的宽度则text显示在右侧
-      const originX = !centerLine || (x2 && x2 - x1 <= limitWidth) ? 'left' : 'center';
-      const left = x2 && x2 - x1 > limitWidth ? (x1 + x2) / 2 : this.textMarginLeft + (x2 && x2 - x1 <= limitWidth ? x2 : x1);
-      text.set({
-        originX,
-        left
-      });
-      text.hasControls = text.hasBorders = false;
-      return text;
-    },
-    /**
-     * @description: 画-|-样式的组
-     * @param {*} x1 // |-|中左侧线的x轴坐标
-     * @param {*} x2 // |-|中右侧线的x轴坐标
-     * @param {*} y1 // |-|中竖线的顶部y轴坐标
-     * @param {*} y2 // |-|中竖线的底部y轴坐标
-     * @param {*} position // 定位当前线是左侧线还是右侧线
-     * @return {*}
-     */
-
-    drawGroup(x1, x2, y1, y2, i, j, others) {
-      const id = '_lineGroup_' + Date.now();
-      let point;
-      let left;
-      if (others.position === 'left') {
-        point = [x1, y1, x1, y2];
-        left = x1 - this.propItems.xCellWidth / 2;
-      } else {
-        point = [x2, y1, x2, y2];
-        left = x2 - this.propItems.xCellWidth / 2;
-      }
-      const line = this.drawLine(point, {
-        ...this.linesObj.dataLineStyle,
-        selectable: false,
-        evented: false
-      });
-      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,
-        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, line1, line2, text, textObj, limitX, startTime, endTime, preText, textLimitRight } = attr;
-      if (line) {
-        line.hasControls = line.hasBorders = false;
-        line1 && (line.line1 = line1);
-        line2 && (line.line2 = line2);
-        text && (line.text = text);
-        line.limitX = limitX;
-        preText && (line.preText = preText);
-        textLimitRight && (line.textLimitRight = textLimitRight);
-        this.hoverEvent(line, { textObj, startTime, endTime });
-        // 移动中 实时更新相关联的线的坐标
-        line.on('moving', () => {
-          this.lineMoveLimit(line);
-          this.lineMoveUpdateLine(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 } = 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(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);
-      }
-    },
-    lineMoveUpdateLine(line) {
-      if (line.line1) {
-        line.line1.setCoords().set({ x1: line.left });
-      }
-      if (line.line2) {
-        line.line2.setCoords().set({ x2: line.left });
-      }
-    },
-    textUpdatePositionX(line) {
-      const text = line.text || null;
-      if (text) {
-        // 如果line2存在说明当前拖动的是右边手柄，line1存在则是左边手柄，都不存在说明不存在中间线
-        const centerLine = line.line1 || line.line2 || null;
-        const left = line.left;
-        const limitWidth = text.width + 2;
-        let originX = text.originX;
-        let v;
-        if (centerLine?.x2 - centerLine?.x1 > limitWidth) {
-          v = left + (centerLine.width / 2) * (line.line2 ? -1 : 1);
-          originX = 'center';
-        } else {
-          v = this.textMarginLeft + (centerLine ? centerLine.x2 : left);
-          originX = 'left';
-          // 移动到最右边界时候文字超出当前线段可拖动的右边界的情况
-          if (line.textLimitRight && v + limitWidth > line.textLimitRight) {
-            v = this.propItems.endX + 100; // 此值随便设置，只要达到隐藏效果即可
-          }
-        }
-        text.setCoords();
-        text.set({ left: v, originX });
-      }
-      // 拖动左侧竖线时需要更改上一线段文字的位置，以防止文字被遮挡
-      const preText = line.preText || null;
-      if (!preText) return;
-      const limitWidth = preText.width + 2;
-      if (preText.originX === 'left' && preText.left + limitWidth > line.left) {
-        const v = this.propItems.endX + 100; // 此值随便设置，只要达到隐藏效果即可
-        preText.setCoords();
-        preText.set({ left: v });
-      }
-    },
-    repaintLine() {
-      if (this.lines.length) {
-        this.removeLines();
-      }
-      this.getLineList(this.linesObj.list);
-      this.createLine();
-    }
-  },
-  beforeDestroy() {}
-};
-</script>
+<template>
+  <div class="line">
+    <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 MouseRightClick from '../components/MouseRightClick';
+import FabricCommon from '../mixins/fabricCommon';
+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],
+  props: {
+    linesObj: {
+      type: Object,
+      required: true
+    }
+  },
+  components: {
+    MouseRightClick,
+    DropPopup
+  },
+  data() {
+    return {
+      isRightVisible: false,
+      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;
+          const { originX, endX, endYTop } = this.$propItems();
+          if (!(x < 0 || x > endX || y < 0 || y > endYTop)) {
+            this.activeEvent = event;
+            document.querySelector('.upper-canvas').addEventListener('contextmenu', this.addEventListenerContextmenu, true);
+          }
+        }
+      });
+    },
+    /**
+     * 右键监听事件
+     */
+    addEventListenerContextmenu(event) {
+      event.preventDefault();
+      const x = event.offsetX;
+      const y = event.offsetY;
+      const { originX, endX, endYTop } = this.$propItems();
+      if (!(x < 0 || x > endX || y < 0 || y > endYTop)) {
+        this.openRightModal(this.activeEvent);
+      }
+      return false;
+    },
+    // 打开右键菜单
+    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('_lineGroup_')) {
+          this._currentPoint = target || '';
+          this.rightClickNode = Object.freeze(rightClickNode.slice());
+          this.isRightVisible = true;
+        } else {
+          this.doContextmenuEvent(event.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);
+      });
+    },
+    drawLineData(line, i) {
+      const lineList = line.lineList || [];
+      const { originX, endX, xScaleList, yCellHeightTop } = this.propItems;
+      const spaceHeight = Math.round(yCellHeightTop / 6);
+      const minMinute = Math.min(...xScaleList);
+      const maxMinute = Math.max(...xScaleList);
+      const lineItemList = [];
+      const y1 = i * yCellHeightTop;
+      const y2 = yCellHeightTop * (i + 1);
+      let textArr = []; // 用于存放多个线段的文字内容，显示格式为：第一段线的文字—第二段线的文字
+      const textList = [];
+      lineList.forEach((item, 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 textContent = textObj.content || '';
+
+        // 左边手柄竖线
+        let leftLine;
+        if (x1 && x1 >= originX && x1 <= endX) {
+          leftLine = this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'left' });
+          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 = this.drawGroup(x1, x2, y1 + spaceHeight, y2 - spaceHeight, i, j, { position: 'right' });
+          lineItemList.push(rightLine);
+        }
+
+        // 文字内容
+        const textTop = x2 ? (y1 + y2) / 2 : y1 + yCellHeightTop / 2;
+        let textLimitRight;
+        let text =
+          (endMinute === '' && leftLine) || (item[1] && !(x1 === originX && x2 === originX) && !(x1 === endX && x2 === endX))
+            ? this.drawLineText(textArr.concat([textContent]), textTop, i, j, centerLine, x1, x2)
+            : null;
+        // 文字内容居右侧竖线且超出当前线段右边界则移除
+        if (text) {
+          textLimitRight = lineList[j + 1]?.[0] && this.cumputedX(lineList[j + 1][0]) <= endX ? this.cumputedX(lineList[j + 1][0]) : endX;
+          if (text.originX === 'left' && text.left + text.width + 2 >= textLimitRight) {
+            textLimitRight !== endX && textArr.push(textContent);
+            this.canvas.remove(text);
+            text = null;
+          } else {
+            textArr = [];
+            this.hoverEvent(text, { textObj, startTime: item[0], endTime: item[1] });
+            textList.push(text);
+          }
+        }
+
+        // 设置拖动限制值
+        let leftLimit = {};
+        leftLimit.x2 = x2 ? x2 : endX;
+        leftLimit.x1 = originX;
+        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);
+          } else {
+            const preStartMinute = new Date(preItem0).getTime();
+            if (preStartMinute >= minMinute && preStartMinute < maxMinute) leftLimit.x1 = this.cumputedX(preItem0);
+          }
+        }
+        let rightLimt = {};
+        rightLimt.x1 = x2 ? x1 : originX;
+        rightLimt.x2 = endX;
+        if (lineList[j + 1]) {
+          const [preItem0] = lineList[j + 1];
+          if (preItem0) {
+            const preStartMinute = new Date(preItem0).getTime();
+            if (preStartMinute > minMinute && preStartMinute <= maxMinute) rightLimt.x2 = this.cumputedX(preItem0);
+          }
+        }
+
+        this.lineEvent({
+          line: leftLine,
+          line1: centerLine,
+          text,
+          textObj,
+          limitX: leftLimit,
+          startTime: item[0],
+          endTime: item[1],
+          preText: textList[text ? textList.length - 2 : textList.length - 1] || null,
+          textLimitRight
+        });
+        this.lineEvent({ line: rightLine, line2: centerLine, text, textObj, limitX: rightLimt, startTime: item[0], endTime: item[1], preText: null, textLimitRight: rightLimt.x2 });
+      });
+      this.canvas.add(...lineItemList, ...textList);
+      // this.canvas.requestRenderAll();
+    },
+    drawLineText(textArr, top, i, j, centerLine, x1, x2) {
+      // const value = textArr.map(v => {
+      //   const channel = v.channel ? `(${v.channel})` : '';
+      //   const consistence = v.consistence ? `(${v.consistence})` : '';
+      //   const total = v.total ? `(${v.total})` : '';
+      //   return `${v.currentSpeed || ''}${channel}${consistence}${total}`
+      // }).join('—');
+      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 || {})
+      });
+      const limitWidth = text.width + 2; // 横线小于text文字的宽度则text显示在右侧
+      const originX = !centerLine || (x2 && x2 - x1 <= limitWidth) ? 'left' : 'center';
+      const left = x2 && x2 - x1 > limitWidth ? (x1 + x2) / 2 : this.textMarginLeft + (x2 && x2 - x1 <= limitWidth ? x2 : x1);
+      text.set({
+        originX,
+        left
+      });
+      text.hasControls = text.hasBorders = false;
+      return text;
+    },
+    /**
+     * @description: 画-|-样式的组
+     * @param {*} x1 // |-|中左侧线的x轴坐标
+     * @param {*} x2 // |-|中右侧线的x轴坐标
+     * @param {*} y1 // |-|中竖线的顶部y轴坐标
+     * @param {*} y2 // |-|中竖线的底部y轴坐标
+     * @param {*} position // 定位当前线是左侧线还是右侧线
+     * @return {*}
+     */
+
+    drawGroup(x1, x2, y1, y2, i, j, others) {
+      const id = '_lineGroup_' + Date.now();
+      let point;
+      let left;
+      if (others.position === 'left') {
+        point = [x1, y1, x1, y2];
+        left = x1 - this.propItems.xCellWidth / 2;
+      } else {
+        point = [x2, y1, x2, y2];
+        left = x2 - this.propItems.xCellWidth / 2;
+      }
+      const line = this.drawLine(point, {
+        ...this.linesObj.dataLineStyle,
+        selectable: false,
+        evented: false
+      });
+      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,
+        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, line1, line2, text, textObj, limitX, startTime, endTime, preText, textLimitRight } = attr;
+      if (line) {
+        line.hasControls = line.hasBorders = false;
+        line1 && (line.line1 = line1);
+        line2 && (line.line2 = line2);
+        text && (line.text = text);
+        line.limitX = limitX;
+        preText && (line.preText = preText);
+        textLimitRight && (line.textLimitRight = textLimitRight);
+        this.hoverEvent(line, { textObj, startTime, endTime });
+        // 移动中 实时更新相关联的线的坐标
+        line.on('moving', () => {
+          this.lineMoveLimit(line);
+          this.lineMoveUpdateLine(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 } = 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(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);
+      }
+    },
+    lineMoveUpdateLine(line) {
+      if (line.line1) {
+        line.line1.setCoords().set({ x1: line.left });
+      }
+      if (line.line2) {
+        line.line2.setCoords().set({ x2: line.left });
+      }
+    },
+    textUpdatePositionX(line) {
+      const text = line.text || null;
+      if (text) {
+        // 如果line2存在说明当前拖动的是右边手柄，line1存在则是左边手柄，都不存在说明不存在中间线
+        const centerLine = line.line1 || line.line2 || null;
+        const left = line.left;
+        const limitWidth = text.width + 2;
+        let originX = text.originX;
+        let v;
+        if (centerLine?.x2 - centerLine?.x1 > limitWidth) {
+          v = left + (centerLine.width / 2) * (line.line2 ? -1 : 1);
+          originX = 'center';
+        } else {
+          v = this.textMarginLeft + (centerLine ? centerLine.x2 : left);
+          originX = 'left';
+          // 移动到最右边界时候文字超出当前线段可拖动的右边界的情况
+          if (line.textLimitRight && v + limitWidth > line.textLimitRight) {
+            v = this.propItems.endX + 100; // 此值随便设置，只要达到隐藏效果即可
+          }
+        }
+        text.setCoords();
+        text.set({ left: v, originX });
+      }
+      // 拖动左侧竖线时需要更改上一线段文字的位置，以防止文字被遮挡
+      const preText = line.preText || null;
+      if (!preText) return;
+      const limitWidth = preText.width + 2;
+      if (preText.originX === 'left' && preText.left + limitWidth > line.left) {
+        const v = this.propItems.endX + 100; // 此值随便设置，只要达到隐藏效果即可
+        preText.setCoords();
+        preText.set({ left: v });
+      }
+    },
+    repaintLine() {
+      if (this.lines.length) {
+        this.removeLines();
+      }
+      this.getLineList(this.linesObj.list);
+      this.createLine();
+    }
+  },
+  beforeDestroy() {}
+};
+</script>