cnhis-design-vue 2.2.3 → 2.2.5

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

@@ -1,1447 +0,0 @@
-<template>
-  <div class="poly-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 FabricCommon from '../mixins/fabricCommon';
-import draw from '../mixins/draw';
-import eventCommon from '../mixins/eventCommon';
-import MouseRightClick from '../components/MouseRightClick';
-import DropPopup from '../components/DropPopup';
-import defaultVaule from '../const/defaultVaule';
-import Bus from '../utils/bus';
-import { nearlyEqual, getUuid, toReversed } from '../utils';
-import vexutils from '@/utils/vexutils';
-
-/**
- * @description: 递归遍历节点，设置颜色属性
- * @param {fabric.Object[]} pointArr
- * @param {string}} color
- * @return {*}
- */
-
-function resetPointColor(pointArr, color) {
-  pointArr.forEach(point => {
-    const { fill, stroke } = point;
-    if (fill && !fill.includes('#fff') && fill !== 'transparent') {
-      point.set({ fill: color });
-    }
-    if (stroke && !stroke.includes('#fff') && stroke !== 'transparent') {
-      point.set({ stroke: color });
-    }
-    if (point._objects?.length) {
-      resetPointColor(point._objects, color);
-    }
-  });
-}
-const setPointLineColor = (point, color, isRight) => {
-  const lineColor = color === 'transparent' ? color : isRight ? point.prevPoint?.__attrs?.lineAttr?.stroke || color : color;
-  if (isRight) {
-    point.line1?.set({ stroke: lineColor });
-    point.line2?.set({ stroke: color });
-  } else {
-    point.line2?.set({ stroke: lineColor });
-    point.line1?.set({ stroke: color });
-  }
-  // point.line2?.set({ stroke: color });
-  // conditionHasLine && point.line2?.set({ stroke: color });
-};
-
-const isEffectiveNode = node => {
-  return node?.time && (node?.value || node?.value === 0);
-};
-const rightClickNode = [
-  { name: '新增节点', type: 'add' },
-  { name: '监测项设置', type: 'set' },
-  { name: '体征数据详情', type: 'detail' },
-  { name: '删除节点', type: 'delete' }
-];
-const rightClickNodeConnect = [
-  { name: '新增节点连接右侧节点', type: 'add' },
-  { name: '新增节点连接左侧节点', type: 'add' }
-];
-export default {
-  name: 'fabric-polylines',
-  mixins: [FabricCommon, draw, eventCommon],
-  inject: ['$propItems'],
-  props: {
-    polyline: {
-      type: Array,
-      required: true
-    },
-    other: {
-      type: Object,
-      default: () => {}
-    },
-    timeRangeStyle: { type: Object }
-  },
-  components: {
-    MouseRightClick,
-    DropPopup
-  },
-  data() {
-    return {
-      isDropVisible: false,
-      dropVal: {},
-      dropPos: { clientX: 0, clientY: 0 },
-      rightPos: { clientX: 0, clientY: 0 },
-      rightClickNode: [],
-      activeEvent: null, // 当前可右键活动的对象
-      addPointList: [], // 快速新增的节点list
-      addPointObjList: [], // 批量新增节点对象的缓存
-      isSelectArea: false, // 是否正在选区
-      selectArea: null, // 选区矩形对象
-      currentDelPoint: null, // 缓存当前可批量删除的项目线段上的点
-      polylinePointList: [], // 缓存折线项目节点
-      isMovingToOtherTarget: false,
-      interval: null,
-      flickerablePoints: [], // 记录需要闪烁的节点
-      timeRangeData: {
-        enabled: false, // 是否开启
-        line1: null,
-        line2: null,
-        rect: null
-      }
-    };
-  },
-  computed: {
-    eventStyle() {
-      return this.propItems.eventStyle;
-    },
-    spaceWidth() {
-      const { xCellWidth, table } = this.propItems;
-      // const addPointSpaceGridNumbers = table.addPointSpaceGridNumbers || [];
-      let addPointSpaceGridNumber = table.addPointSpaceGridNumber || 1;
-      const spaceWidth = xCellWidth * addPointSpaceGridNumber;
-      return spaceWidth;
-    }
-  },
-
-  mounted() {
-    Bus.$on('mouseoverTarget', isMovingToOtherTarget => {
-      this.isMovingToOtherTarget = isMovingToOtherTarget;
-      if (isMovingToOtherTarget) this.isDropVisible = false;
-    });
-  },
-
-  methods: {
-    init() {
-      this.drawPolylineTitle();
-      this.polylinePointList = [];
-      this.flickerablePoints = [];
-      this.polyline.forEach((polylineType, polylineTypeId) => {
-        this.createPolyline(polylineType, polylineTypeId);
-      });
-      this.eventStyle.evented && this.createEvent();
-      this.setFlicker();
-    },
-    createEvent() {
-      this.canvas.on('mouse:up', event => {
-        if (event.button === 3) {
-          // 取消时间范围选区状态
-          if (this.timeRangeData.enabled) {
-            Object.keys(this.timeRangeData).forEach(key => {
-              if (['enabled'].includes(key)) this.timeRangeData[key] = false;
-              if (['line1', 'line2', 'rect'].includes(key)) {
-                this.timeRangeData[key] && this.canvas.remove(this.timeRangeData[key]);
-                this.timeRangeData[key] = null;
-              }
-            });
-            return;
-          }
-          const { x, y } = event.pointer;
-          if (this.isGridLimit(x, y)) {
-            this.activeEvent = event;
-            !this.isAddEventListenerContextmenu && this.canvas.wrapperEl.addEventListener('contextmenu', this.addEventListenerContextmenu, true);
-            this.isAddEventListenerContextmenu = true;
-          }
-        }
-
-        // 左键松开鼠标-批量删除
-        this.isSelectArea = false;
-        if (event.button === 1 && this.selectArea) {
-          const { polylineList, otherList, startTime, endTime } = this.getAreaPoints();
-          !polylineList.length && !otherList.length && this.removeSelectArea();
-          if (polylineList.length > 0 && this.selectArea) {
-            this.$emit('pointOperation', 'delete', { startTime, endTime, data: polylineList });
-            this.currentDelPoint = null;
-          }
-          if (otherList.length > 0 && this.selectArea) {
-            Bus.$emit('deleteOther', { startTime, endTime, data: otherList });
-            this.currentDelPoint = null;
-          }
-        }
-      });
-      let startPos;
-      this.canvas.on('mouse:down', event => {
-        if (event.button !== 1) return;
-
-        // 处理时间范围选区
-        const { enabled, line1, line2, rect } = this.timeRangeData;
-        const { originY, endY, xScaleCellList } = this.propItems;
-        if (enabled) {
-          const left = xScaleCellList
-            .map(item => item.x)
-            .reduce((pre, curr) => {
-              return Math.abs(pre - event.pointer.x) > Math.abs(curr - event.pointer.x) ? curr : pre;
-            });
-          if (line1 && !line1.__fixed) {
-            line1.__fixed = true;
-            line1.setCoords().set({ x1: left, x2: left });
-          } else if (line2 && !line2.__fixed) {
-            line2.__fixed = true;
-            line2.setCoords().set({ x1: left, x2: left });
-            const [startLeft, endLeft] = [line1.x1, line2.x1].sort((a, b) => a - b);
-            this.timeRangeData.rect && this.canvas.remove(this.timeRangeData.rect);
-            this.timeRangeData.rect = new this.fabric.Rect({
-              ...defaultVaule.style,
-              fill: '#CAF982',
-              opacity: 0.4,
-              left: startLeft,
-              top: line1.y1,
-              width: endLeft - startLeft,
-              height: endY - originY,
-              ...(this.timeRangeStyle.rect || {})
-            });
-            this.canvas.add(this.timeRangeData.rect);
-
-            this.$emit('timeRangeChange', {
-              start: this.getXValue(startLeft),
-              end: this.getXValue(endLeft)
-            });
-          }
-          return;
-        }
-
-        if (!event.target) {
-          this.isSelectArea = true;
-          startPos = event.pointer;
-        }
-      });
-      this.canvas.on('mouse:move', event => {
-        this.isSelectArea && this.createSelectArea(event, startPos);
-        this.setTimeRange(event.pointer);
-      });
-    },
-    handleMoving(event) {
-      // 如果移动到其他节点如气血分析、标记位节点上时需要隐藏折线组件中的提示弹框
-      if (this.isMovingToOtherTarget) return;
-      const { pointer } = event;
-      const { x, y } = pointer;
-      this.dropPointer = { ...pointer };
-      const left = this.getYValue('left', y);
-      const right = this.getYValue('right', y);
-      const movingPopupContentList = [
-        { id: '1', name: '时间', value: this.getXValue(x) },
-        {
-          id: '2',
-          name: '值',
-          value: `${this.formatValue('left', left)} / ${this.formatValue('right', right)}℃`
-        }
-      ];
-      this.movingShowPopup(movingPopupContentList);
-    },
-    // 获取选区内包含的节点
-    getAreaPoints() {
-      const polylineList = [];
-      let otherList = [];
-      if (!this.selectArea?.areaPos) return { polylineList, otherList };
-      const { startPos, endPos } = this.selectArea.areaPos;
-      const [x1, x2] = [startPos.x, endPos.x].sort((a, b) => a - b);
-      const [y1, y2] = [startPos.y, endPos.y].sort((a, b) => a - b);
-      this.canvas.forEachObject(obj => {
-        const { id, left, top } = obj;
-        const isArea = left >= x1 && left <= x2 && top >= y1 && top <= y2;
-        if (isArea && this.isGridLimit(left, top) && id) {
-          if (/_polyline(Point)_/.test(id)) {
-            const data = this.getDataByPoint(obj);
-            if (this.currentDelPoint) {
-              if (this.currentDelPoint.polylineIndex == obj.polylineIndex) {
-                polylineList.push(data);
-              }
-            } else {
-              polylineList.push(data);
-            }
-          }
-          if (id.includes('_other') && obj.type === 'list' && !this.currentDelPoint) {
-            const data = {
-              type: obj.type,
-              index: obj.index,
-              dataIndex: obj.dataIndex
-            };
-            otherList.push(data);
-          }
-        }
-      });
-      if (polylineList.length > 0) {
-        otherList = [];
-      }
-      return { polylineList, otherList, startTime: this.getXValue(x1), endTime: this.getXValue(x2) };
-    },
-    // 创建选区
-    createSelectArea(event, startPos) {
-      this.selectArea && this.canvas.remove(this.selectArea);
-      const { x: x1, y: y1 } = startPos;
-      const { x: x2, y: y2 } = event.pointer;
-      this.selectArea = new this.fabric.Rect({
-        ...defaultVaule.style,
-        fill: '#CAF982',
-        opacity: 0.4,
-        left: x1,
-        top: y1,
-        width: x2 - x1,
-        height: y2 - y1
-      });
-      this.selectArea.areaPos = { startPos, endPos: event.pointer };
-      this.canvas.add(this.selectArea);
-    },
-    createTimeRangeLine(line, pointer) {
-      const { originY, endY } = this.propItems;
-      const { x, y } = pointer;
-      this.timeRangeData[line] && this.canvas.remove(this.timeRangeData[line]);
-      this.timeRangeData[line] = this.drawLine([x, originY, x, endY], {
-        stroke: '#4b790287',
-        strokeWidth: 3,
-        ...(this.timeRangeStyle.line || {})
-      });
-      this.canvas.add(this.timeRangeData[line]);
-    },
-    setTimeRange(pointer) {
-      const { enabled, line1, line2 } = this.timeRangeData;
-      const { x, y } = pointer;
-      if (!enabled || !this.isGridLimit(x, y)) return;
-
-      // 使用setCoords().set({ x1: x, x2: x })方法更改其坐标会产生很明显的卡顿现象，可能是canvas.on('mouse:move')抛出的事件节流了
-
-      if (!line1?.__fixed) {
-        this.createTimeRangeLine('line1', pointer);
-      } else if (!line2?.__fixed) {
-        this.createTimeRangeLine('line2', pointer);
-      }
-    },
-    // 每一个折线类别
-    createPolyline(polylineType, polylineTypeId) {
-      polylineType.dataList.forEach((polylineItem, polylineIndex) => {
-        this.drawPolyline(polylineItem, polylineIndex, polylineType, polylineTypeId);
-      });
-    },
-    // 绘制左侧折线标题
-    drawPolylineTitle() {
-      const { endY, markHeight, treeTableminCellWidth, originX, xScaleList, endX } = this.propItems;
-      const leftYScalevalue = this.polyline.find(v => v.position === 'left');
-      const lableMargin = leftYScalevalue.lableMargin || [5, 30];
-      const lableLineHeight = leftYScalevalue.lableLineHeight || 20;
-      const style = leftYScalevalue.style || { fontSize: 12, fill: '#000' };
-
-      const leftTitleList = [];
-
-      const minTime = Math.min(...xScaleList);
-      const maxTime = Math.max(...xScaleList);
-
-      this.polyline.forEach((item, index) => {
-        item.dataList.forEach((v, i) => {
-          let targetList = v.list;
-          let linkKey = '';
-          if (v.linkKey) {
-            const target = item.dataList.find(_data => _data.key === v.linkKey);
-            if (target) {
-              targetList = target.list;
-              linkKey = v.linkKey;
-            }
-          }
-          const point = targetList.find(k => isEffectiveNode(k) && new Date(k.time).getTime() >= minTime && new Date(k.time).getTime() <= maxTime);
-          const firstPointLeft = point ? this.computedX(point.time) : 0;
-          const rightLimit = point ? firstPointLeft - this.spaceWidth : '';
-          // 配置是否可拖动标题图标批量增加-
-          const isAdd = (firstPointLeft || endX) - this.spaceWidth >= originX;
-          leftTitleList.push({
-            title: v.title,
-            type: v.type,
-            pointAttr: v.pointAttr,
-            lineAttr: v.lineAttr,
-            polylineTypeId: index,
-            polylineIndex: i,
-            isAdd,
-            rightLimit,
-            __attrs: {
-              title: v.title,
-              pointAttr: v.pointAttr,
-              lineAttr: v.pointAttr,
-              key: v.key,
-              linkKey
-            }
-          });
-        });
-      });
-
-      // 配置左侧title图标（但不是折线项目）
-      if (this.other?.list && Array.isArray(this.other.list)) {
-        const otherList = this.other.list.map(v => {
-          return {
-            title: v.name,
-            type: v.type,
-            pointAttr: v,
-            isAdd: false,
-            polylineTypeId: -1,
-            polylineIndex: -1
-          };
-        });
-        if (this.other.position && this.other.position === 'top') {
-          leftTitleList.push(...otherList);
-        } else {
-          leftTitleList.unshift(...otherList);
-        }
-      }
-
-      const eventStyle = { selectable: false, evented: false };
-      leftTitleList.forEach(async (v, i) => {
-        const baseTop = endY + markHeight - lableMargin[1];
-        const top = baseTop - i * lableLineHeight;
-        const left = lableMargin[0] + treeTableminCellWidth;
-        const pointId = `${v.polylineTypeId}_${v.polylineIndex}_-1_polylinePoint_'${new Date().getTime()}_isTitle`;
-        const { fill: fillColor = '#000', stroke } = v.pointAttr;
-        let text = new this.fabric.Text(String(v.title), {
-          fontSize: style.fontSize,
-          fill: fillColor && stroke ? stroke : fillColor,
-          left,
-          top,
-          originY: 'center',
-          ...defaultVaule.style,
-          id: pointId
-        });
-        const iconLeft = text.width + text.left + 10;
-        const option = {
-          left: iconLeft,
-          top,
-          ...v.pointAttr,
-          originY: 'center',
-          originX: 'center',
-          lineAttr: v.lineAttr || '',
-          pointAttr: v.pointAttr,
-          id: pointId,
-          polylineTypeId: v.polylineTypeId,
-          polylineIndex: v.polylineIndex,
-          ...(v.isAdd && this.eventStyle.evented ? {} : eventStyle),
-          rightLimit: v.rightLimit || '',
-          __attrs: v.__attrs
-        };
-        let ele;
-        if (v.type === 'img' && v.pointAttr?.iconClassName) {
-          ele = await this.createImage(v.pointAttr.iconClassName, v.pointAttr);
-        }
-        const icon = await this.createPoint(v.type, {
-          objectCaching: false,
-          ele: ele || '',
-          ...option
-        });
-        icon.hasControls = icon.hasBorders = false;
-        let originTop = top;
-        let cloneIconId;
-        icon.on('moving', () => {
-          // 优化左侧图标太小不容易选中的问题
-          if (!icon.url && icon.scaleX == 1.8 && icon.scaleY == 1.8) {
-            icon.set({
-              scaleX: 1,
-              scaleY: 1
-            });
-          }
-
-          if (!cloneIconId) {
-            cloneIconId = '_polylinePoint_temp_' + new Date().getTime();
-            icon.clone(clonedObj => {
-              clonedObj.set({
-                id: cloneIconId // 此id必须，用于remove节点的时候
-              });
-              clonedObj.bringForward();
-              this.canvas.add(clonedObj);
-            });
-          }
-
-          icon.set({ originX: 'center' });
-          this.moveLimit(icon);
-          icon.left >= originX && icon.left < originX + 5 && (originTop = icon.top);
-          if (icon.left >= originX) {
-            this.showDrapPopup(icon);
-          } else {
-            this.isDropVisible = false;
-          }
-          // this.canvas.renderAll();
-        });
-        // 标题折线点停止拖拽后 更新
-        icon.on('moved', () => {
-          this.setLeft(icon);
-          icon.set({
-            id: icon.id.replace('_isTitle', '')
-          });
-          // this.canvas.renderAll();
-          this.removeTitle();
-          this.removePolyline(cloneIconId);
-
-          if (icon.id.includes('_polylinePoint_') && this.isDropVisible) {
-            this.isDropVisible = false;
-            if (icon.left >= originX) {
-              // this.setEmitFunction(icon);
-              this.setAddPointList(icon);
-              this.$emit('pointOperation', 'increasePointBatch', this.addPointList);
-              this.addPointList = [];
-            }
-          }
-          this.removePolyline(icon.id);
-          // 重绘折线标题
-          this.drawPolylineTitle();
-        });
-
-        // 优化左侧图标太小不容易选中的问题
-        if (icon.evented && !icon.url) {
-          const maxVal = Math.max(icon.width * icon.scale, icon.height * icon.scale);
-          if (maxVal < 7) {
-            icon.set({
-              scaleX: 1.8,
-              scaleY: 1.8
-            });
-          }
-        }
-
-        this.canvas.add(text, icon);
-        // this.canvas.requestRenderAll();
-      });
-    },
-    // 限制节点新增位置与右侧节点间隔的spaceWidth格子树必须为整数
-    setLeft(icon) {
-      const { originX } = this.propItems;
-      let tempLeft = icon.rightLimit;
-
-      if (!tempLeft) return;
-      const leftLimit = icon.left + this.spaceWidth;
-      let i = 0;
-      while (tempLeft >= leftLimit) {
-        tempLeft = icon.rightLimit - i * this.spaceWidth;
-        i++;
-      }
-      icon.left = tempLeft < originX ? originX : tempLeft;
-    },
-    // 点移动限制
-    moveLimit(point) {
-      point.setCoords();
-      const { treeTableminCellWidth, endX } = this.propItems;
-      const leftLimit = treeTableminCellWidth;
-      const rightLimit = point.rightLimit || endX;
-      if (point.top < this.propItems.originY) {
-        point.set('top', this.propItems.originY);
-      }
-      if (point.top > this.propItems.endY) {
-        point.set('top', this.propItems.endY);
-      }
-      if (point.left < leftLimit) {
-        point.set('left', leftLimit);
-      }
-      if (point.left > rightLimit) {
-        point.set('left', rightLimit);
-      }
-    },
-    removeTitle() {
-      this.canvas.forEachObject(obj => {
-        if (obj.id && obj.id.includes('isTitle')) {
-          this.canvas.remove(obj);
-        }
-      });
-    },
-    isLimit(time) {
-      const minMinute = Math.min(...this.propItems.xScaleList);
-      const maxMinute = Math.max(...this.propItems.xScaleList);
-      const getTime = new Date(time).getTime();
-      return getTime >= minMinute && getTime <= maxMinute;
-    },
-    // 设置节点闪烁
-    setFlicker() {
-      setTimeout(() => {
-        if (this.interval) clearInterval(this.interval);
-        if (this.flickerablePoints?.length) {
-          this.interval = setInterval(() => {
-            this.flickerablePoints.forEach(o => o?.set('opacity', o.opacity === 1 ? 0.5 : 1));
-            this.canvas.renderAll();
-          }, 800);
-        }
-      });
-    },
-    // 创建危急值和差异值
-    createAttrVaule({ attr, polyline, polylineIndex, polylineType, polylineTypeId }) {
-      const { list } = polyline;
-      const { max, min } = polyline[attr] || {};
-      if (!max && !min) return;
-
-      const { originX, endX } = this.propItems;
-      const isMax = max?.show && max?.value && list.some(v => +v.value >= +max.value && this.isLimit(v.time));
-      const isMin = min?.show && min?.value && list.some(v => +v.value <= +min.value && this.isLimit(v.time));
-      const lines = [];
-
-      const drawLine = ({ value, lineStyle }) => {
-        const top = this.computedY(polylineType, +value);
-        return this.drawLine([originX, top, endX, top], { polylineIndex, lineIndex: 0, polylineTypeId, ...(lineStyle || defaultVaule.criticalStyle) });
-      };
-      const drawText = ({ name, nameStyle }, top) => {
-        return new this.fabric.Text(String(name || ''), {
-          ...defaultVaule.style,
-          ...defaultVaule.textStyle,
-          ...nameStyle,
-          originY: 'bottom',
-          left: originX + 5,
-          top: top - 5
-        });
-      };
-      const isDraw = (isMaxOrMin, maxOrMin) => isMaxOrMin && !maxOrMin?.flickerable;
-
-      if (isDraw(isMax, max)) {
-        const line = drawLine(max);
-        const text = drawText(max, line.top);
-        line.text = text;
-        lines.push(line, text);
-      }
-      if (isDraw(isMin, min)) {
-        const line = drawLine(min);
-        const text = drawText(min, line.top);
-        line.text = text;
-        lines.push(line, text);
-      }
-      this.canvas.add(...lines);
-    },
-    /**
-     * 绘制一条折线
-     * @param {polyline} 折线属性
-     * @param {polyline.type} 折线点形状 circle: 圆 | triangle: 三角
-     * @param {polyline.pointAttr} 参数 fill: 填充色 | stroke: 描边色 | strokeWidth: 宽度 | radius: 半径 | width: 宽度 | height: 高度
-     * @param {polyline.list} 折线点坐标数组
-     * @param {polylineIndex} 当前折线 index
-     */
-    drawPolyline(polyline, polylineIndex, polylineType, polylineTypeId) {
-      const { originY, endY, xCellWidth, table } = this.propItems;
-      const { list = [], critical = {}, diffValue = {} } = polyline;
-
-      const pointList = [];
-      let lineList = [];
-      const _this = this;
-      function getPointer(point) {
-        let isInit = false;
-        let points = null;
-        if (isEffectiveNode(point) && _this.isLimit(point.time)) {
-          const x = _this.computedX(point.time);
-          const y = _this.computedY(polylineType, point.value);
-          isInit = y < originY || y > endY;
-          points = [x, y < originY ? originY : y > endY ? endY : y];
-        }
-        return { isInit, points };
-      }
-      this.flickerablePoints = this.flickerablePoints.filter(point => point.polylineTypeId !== polylineTypeId && point.polylineIndex !== polylineIndex);
-      list.forEach((linePoints, index) => {
-        let { pointAttr, lineAttr = {}, type, title } = polyline;
-        const target = polylineType.dataList.find(_data => linePoints.key && _data.key === linePoints.key);
-        if (target) {
-          type = target.type;
-          pointAttr = target.pointAttr;
-          lineAttr = target.lineAttr;
-          title = target.title;
-        }
-        this._iconClassName = polyline.type === 'img' && pointAttr.iconClassName ? pointAttr.iconClassName : '';
-
-        // 当前点
-        let { points, isInit } = getPointer(linePoints);
-
-        // 下一个点
-        const nextPoints = list[index + 1];
-        let { points: nextPoint } = getPointer(nextPoints);
-
-        let line;
-        let point;
-        let previousLine;
-        line =
-          !points || !nextPoint || linePoints.data?.breakpoint || (table.breakpoint && nextPoint[0] - points[0] > xCellWidth)
-            ? null
-            : this.drawLine([...points, ...nextPoint], { polylineIndex, polylineTypeId, lineIndex: index, ...lineAttr });
-        previousLine = lineList[index - 1];
-        const pointOthers = { polylineTypeId, polylineIndex, pointIndex: index, ...pointAttr, lineAttr };
-        if (points) {
-          Object.assign(pointOthers, {
-            originLeft: points[0],
-            originTop: points[1],
-            time: linePoints.time,
-            __value: linePoints.value,
-            __attrs: {
-              type,
-              pointAttr,
-              lineAttr,
-              title,
-              key: linePoints.key
-            }
-          });
-          point = previousLine ? this.drawPoint(...points, previousLine, line, type, pointOthers, isInit) : this.drawPoint(...points, null, line, type, pointOthers, isInit);
-        }
-        lineList.push(line);
-        point && pointList.push(point);
-      });
-
-      Promise.all(pointList).then(res => {
-        const polylineObj = this.polylinePointList.find(v => v.polylineTypeId == polylineTypeId && v.polylineIndex == polylineIndex);
-        const pointerList = res.map(v => v.left);
-        if (polylineObj) {
-          Object.assign(polylineObj, {
-            pointerList,
-            pointList: res
-          });
-          polylineObj.pointerList = pointerList;
-        } else {
-          this.polylinePointList.push({
-            polylineTypeId,
-            polylineIndex,
-            pointerList,
-            pointList: res
-          });
-        }
-        lineList = lineList.filter(v => v);
-        let prevPoint = null;
-        res = res.filter(v => {
-          if (v && prevPoint) {
-            prevPoint.nextPoint = v; // 记录下一个点 id
-            v.prevPoint = prevPoint;
-          }
-          prevPoint = v || prevPoint;
-          return v;
-        });
-        this.canvas.add(...lineList, ...res);
-
-        // 缓存需要闪烁的节点
-        setFlickerablePoints.call(this, critical);
-        setFlickerablePoints.call(this, diffValue);
-        function setFlickerablePoints(diffObj) {
-          const { max, min } = diffObj;
-          if (max?.flickerable || min?.flickerable) {
-            const maxVal = max?.value;
-            const minVal = min?.value;
-            if (maxVal && max?.flickerable) {
-              this.flickerablePoints.push(...res.filter(point => +point.__value >= +maxVal).filter(point => !this.flickerablePoints.some(_point => isSamePoint(point, _point))));
-            }
-            if (minVal && min?.flickerable) {
-              this.flickerablePoints.push(...res.filter(point => +point.__value <= +minVal).filter(point => !this.flickerablePoints.some(_point => isSamePoint(point, _point))));
-            }
-          }
-        }
-        function isSamePoint(point, _point) {
-          return point.polylineTypeId == _point.polylineTypeId && point.polylineIndex === _point.polylineIndex && point.pointIndex === _point.pointIndex;
-        }
-      });
-
-      const params = { polyline, polylineIndex, polylineType, polylineTypeId };
-      this.createAttrVaule({ ...params, attr: 'critical' });
-      this.createAttrVaule({ ...params, attr: 'diffValue' });
-    },
-    // 计算y轴坐标
-    computedY(polylineType, linePointY) {
-      const { position = 'left', list = [] } = polylineType;
-      const key = position === 'left' ? 'Left' : 'Right';
-      const yScaleCell = this.propItems[`yScaleCell${key}`];
-      const yCellUnit = linePointY - Math.min(...list);
-      return this.propItems.endY - yScaleCell * yCellUnit;
-    },
-    /**
-     * 绘制折线点
-     * @param {left, top} 折线点坐标
-     * @param {line1, line2} 与折线点关联的线
-     * @param {type} 折线点类型
-     * @param {others} 参数 polylineIndex | pointIndex | ...polyline.pointAttr
-     */
-    async drawPoint(left, top, line1, line2, type, others, isInit) {
-      const pointId = `${others.polylineTypeId}_${others.polylineIndex}_${others.pointIndex}_polylinePoint_${new Date().getTime()}`;
-      const ele = this._iconClassName && (await this.createImage(this._iconClassName, others));
-      let point = await this.createPoint(type, {
-        objectCaching: false,
-        id: pointId,
-        left: left,
-        top: top,
-        ele: ele || '',
-        ...defaultVaule.pointStyle,
-        ...others,
-        ...(!this.eventStyle.evented
-          ? {
-              lockMovementX: true,
-              lockMovementY: true
-            }
-          : {})
-      });
-      point.hasControls = point.hasBorders = false;
-      line1 && (point.line1 = line1);
-      line2 && (point.line2 = line2);
-      point.on('mouseover', () => {
-        this.showDrapPopup(point);
-        this.pointToFront(point);
-      });
-      point.on('mouseout', () => {
-        this.isDropVisible = false;
-      });
-      // 折线点移动中 实时更新相关联的线的坐标
-      if (this.eventStyle.evented) {
-        point.on('moving', () => {
-          this.pointMoveLimit(point, false);
-          this.pointMoveUpdateLine(point);
-          this.addPoint(point);
-          // this.canvas.renderAll();
-          this.showDrapPopup(point);
-        });
-        // 折线点停止拖拽后 更新polyline中对应的坐标
-        point.on('moved', () => {
-          if (point && point.id.includes('_polylinePoint_')) {
-            this.isDropVisible = false;
-            this.setEmitFunction(point);
-            this.addPointObjList = [];
-          }
-        });
-        point.on('mouseup', event => {
-          const { button, isClick } = event;
-          if (button == 1 && isClick) {
-            // 可配置批量删除当前项目上的点了
-            this.currentDelPoint = point;
-          }
-        });
-      }
-
-      // 超出表格最高或最低值则需要触发pointChange事件并且不能更新视图，否则连接节点判断不会成功
-      isInit && this.setEmitFunction(point, isInit);
-
-      return point;
-    },
-    // 拖动停止后 设置回调触发方法
-    setEmitFunction(point, isInit = false) {
-      const { operable } = this.propItems;
-      const { data, x, y } = this.getValue(point);
-      Object.assign(data, {
-        value: { time: operable.lockMovementX ? point.time : x, value: y, ...(point.__attrs?.key ? { key: point.__attrs.key } : {}) },
-        isInit
-      });
-      if (this.addPointList.length === 0) {
-        if (point.prevPoint?.time.includes(x) || point.nextPoint?.time.includes(x)) {
-          // 此方法更新节点后其事件都失效了，暂时采用下方repaintPolyline方法更新整条节点
-          // point.setCoords();
-          // point.set('left', point.originLeft);
-          // point.set({
-          //   left: point.originLeft,
-          //   top: point.originTop
-          // });
-          // this.pointMoveUpdateLine(point);
-          this.repaintPolyline(data.position, data.dataIndex);
-          return;
-        }
-        this.$emit('pointChange', data);
-      } else {
-        this.$nextTick(() => {
-          // 拖动新增节点时默认所有节点可删除
-          this.currentDelPoint = null;
-        });
-        const lastPoint = this.addPointList[this.addPointList.length - 1];
-        const position = this.polyline[point.polylineTypeId].position;
-        const [firstPoint] = this.addPointList;
-        const isRight = lastPoint.left > point.originLeft;
-        // 如果是重合/连线节点
-        if (point.get('scaleX') !== point.scale) {
-          const addOjb = {
-            ...lastPoint,
-            value: {
-              time: this.getXValue(this._concatPoint?.left),
-              value: this.getYValue(position, this._concatPoint?.top),
-              ...(point.__attrs?.key ? { key: point.__attrs.key } : {})
-            }
-          };
-          if (lastPoint.value.time == addOjb.value.time) {
-            this.addPointList.splice(-1, 1, addOjb);
-          } else {
-            this.addPointList.push(addOjb);
-          }
-          if (!isRight) {
-            this.addPointList.unshift({
-              ...firstPoint,
-              value: {
-                time: this.getXValue(point.originLeft),
-                value: this.getYValue(position, point.originTop),
-                ...(point.__attrs?.key ? { key: point.__attrs.key } : {})
-              }
-            });
-          }
-
-          this.addPointList.forEach(v =>
-            Object.assign(v, { isConcat: true, concatIndex: isRight ? this._concatIndex : point.pointIndex, pointIndex: isRight ? point.pointIndex : this._concatPoint.pointIndex })
-          );
-        } else if (!isRight || (isRight && (point.line2 || (point.nextPoint && lastPoint.left >= point.nextPoint.left)))) {
-          // 1、存在右连线 2、无右侧连线，并且存在下一个节点的情况
-          this.addPointList = [];
-          this.repaintPolyline(position, point.polylineIndex);
-          return;
-        }
-        !point.id.includes('isTitle') && this.removePolyline(point.id);
-        if (isRight && !point.line2 && firstPoint.left <= point.originLeft) {
-          this.addPointList.splice(0, 1);
-        }
-        if (!isRight) {
-          this.addPointList.splice(-1, 1);
-        }
-        if (this.addPointList.length > 0) {
-          this.$emit('pointOperation', 'increasePointBatch', isRight ? this.addPointList : this.addPointList.reverse());
-          this.addPointList = [];
-        } else {
-          this.repaintPolyline(position, point.polylineIndex);
-        }
-      }
-    },
-    // 设置批量新增数据
-    setAddPointList(point) {
-      const { data, x, y } = this.getValue(point);
-      data.value = { time: x, value: y, ...(point.__attrs.linkKey ? { key: point.__attrs.key } : {}) };
-      data.left = point.left;
-      data.top = top;
-      if (point.__attrs.linkKey) data.linkKey = point.__attrs.linkKey;
-      this.addPointList.push(data);
-    },
-    // 纠正线段坐标
-    setLinePatch(point, isRight) {
-      const { originLeft, originTop } = point;
-      for (let i = 0, len = this.addPointList.length; i < len; i++) {
-        const currentPoint = this.addPointList[i];
-        const prevPoint = this.addPointList[i - 1] || { left: point.prePoint?.left ?? originLeft, top: point.prePoint?.top ?? originTop };
-        const currentPointObj = this.addPointObjList.find(obj => nearlyEqual(obj.left, currentPoint.left));
-        if (isRight) {
-          if (!nearlyEqual(currentPointObj?.line1?.x1, prevPoint.left)) {
-            currentPointObj?.line1?.set({
-              x1: prevPoint.left,
-              y1: prevPoint.top,
-              x2: currentPoint.left,
-              y2: currentPoint.top
-            });
-          }
-        } else {
-          if (!nearlyEqual(currentPointObj?.line2?.x2, prevPoint.left)) {
-            currentPointObj?.line1?.set({
-              x1: currentPoint.left,
-              y1: currentPoint.top,
-              x2: prevPoint.left,
-              y2: prevPoint.top
-            });
-          }
-        }
-      }
-    },
-    // 检查批量新增拖动过程中是否存在漏点的情况
-    checkPoints(point, isRight) {
-      const { originLeft, originTop, left, polylineTypeId } = point;
-      const PointLens = Math.floor(Math.abs(left - originLeft) / this.spaceWidth);
-      if (PointLens > 1 && this.addPointList?.length <= PointLens) {
-        const position = this.polyline[polylineTypeId].position;
-        for (let k = 0; k <= PointLens; k++) {
-          if (k > 0) {
-            const spaceWidth = this.spaceWidth * k;
-            const curLeft = isRight ? originLeft + spaceWidth : originLeft - spaceWidth;
-            // 判断this.addPointList中的left是否包含curLeft，不包含就说明是漏了
-            const hasPoint = this.addPointList.some(p => nearlyEqual(p.left, curLeft));
-            if (!hasPoint) {
-              let index;
-              const pointObj = this.addPointList.find((v, i) => {
-                if (isRight) {
-                  if (v.left > curLeft) {
-                    index = i;
-                  }
-                  return v.left > curLeft;
-                } else {
-                  if (v.left < curLeft) {
-                    index = i;
-                  }
-                  return v.left < curLeft;
-                }
-              });
-              if (pointObj) {
-                let cloneObj = JSON.parse(JSON.stringify(pointObj));
-                const prePoint = this.addPointList[index - 1] || {
-                  left: originLeft,
-                  top: originTop
-                };
-                const len = ~~(Math.abs(pointObj.left - curLeft) / this.spaceWidth) + 1;
-                const spaceHeight = (pointObj.top - prePoint.top) / len;
-                cloneObj.top = prePoint.top + spaceHeight;
-                cloneObj.value.time = this.getXValue(curLeft);
-                cloneObj.value.value = this.getYValue(position, cloneObj.top);
-                if (point.__attrs.key) cloneObj.value.key = point.__attrs.key;
-                cloneObj.left = curLeft;
-                this.addPointList.splice(index, 0, cloneObj);
-                this.clonePoint(point, [prePoint.left, prePoint.top, cloneObj.left, cloneObj.top], isRight);
-              }
-            }
-          }
-        }
-      }
-      // 纠正节点上的line1的坐标
-      this.setLinePatch(point, isRight);
-    },
-    // 断点相连
-    concatPoint(point, target, left, top, n) {
-      const { left: targetLeft, top: targetTop } = target;
-      point.setCoords();
-      if (Math.abs(left - targetLeft) <= n && Math.abs(top - targetTop) <= n) {
-        point.set({
-          left: targetLeft,
-          top: targetTop,
-          scaleX: point.scale === 1 ? 2.5 : 0.1,
-          scaleY: point.scale === 1 ? 2.5 : 0.1
-        });
-      } else {
-        point.set({
-          scaleX: point.scale,
-          scaleY: point.scale
-        });
-      }
-    },
-    /**
-     * @description: 拖动批量新增节点
-     * @param {*} point 拖动的最后一个节点
-     * @return {*}
-     */
-    addPoint(point) {
-      let { left, top, originLeft, originTop } = point;
-      const currentLeft = left;
-      const isRight = currentLeft > originLeft;
-      const startLength = this.addPointList.length;
-
-      const n = Math.min(this.spaceWidth / 2, 6); // 拖动范围，在需要增加节点的刻度左右吸入的范围值
-      const residue = Math.abs(left - originLeft) % this.spaceWidth;
-
-      const condition = residue > this.spaceWidth - n || residue < n;
-      const condition2 = left > originLeft + this.spaceWidth;
-      const conditionHasLeftPoint = point.prevPoint && left < originLeft - this.spaceWidth;
-
-      if (condition && (condition2 || conditionHasLeftPoint)) {
-        if (isRight) {
-          if (residue > this.spaceWidth - n) left = left - residue + this.spaceWidth;
-          if (residue < n) left = left - residue;
-        } else {
-          if (residue > this.spaceWidth - n) left = left + residue - this.spaceWidth;
-          if (residue < n) left = left + residue;
-        }
-        point.set({
-          left
-        });
-
-        // 复制点和线
-        if (condition2 || conditionHasLeftPoint) {
-          setPointLineColor(point, 'transparent', isRight);
-          const x1 = isRight ? point.line1?.x1 || originLeft : point.line2?.x2 || originLeft;
-          const y1 = isRight ? point.line1?.y1 || originTop : point.line2?.y2 || originTop;
-          this.addPointList.length == 0 && this.clonePoint(point, [x1, y1, originLeft, originTop]);
-          if (this.addPointList.every(v => !nearlyEqual(v.left, left))) {
-            const points1 = this.addPointList.length == 0 ? [originLeft, originTop] : point.prePoints;
-            if (points1) {
-              // this.setAddPointList(point);
-              // 调用上面方法就会导致线段绘制失败，目前还不知道为啥子
-              const { data, x, y } = this.getValue(point);
-              data.value = { time: x, value: y };
-              if (point.__attrs.key) data.value.key = point.__attrs.key;
-              data.left = left;
-              data.top = top;
-              // 避免重复添加
-              if (this.addPointObjList.every(o => !nearlyEqual(o.left, left))) {
-                this.addPointList.push(data);
-                this.clonePoint(point, [...points1, left, top], isRight);
-              }
-            }
-          }
-          this.checkPoints(point, isRight);
-        }
-      }
-
-      // 检查是否显示重合连线放大节点的标识
-      const { polylineTypeId, polylineIndex } = point;
-      const color = point.__attrs.lineAttr.stroke;
-      const polylineObj = this.polylinePointList.find(v => v.polylineTypeId == polylineTypeId && v.polylineIndex == polylineIndex);
-      polylineObj?.pointList.forEach(v => v.bringToFront());
-      if ((isRight && point.nextPoint) || (!isRight && point.prevPoint)) {
-        if (isRight) {
-          this._concatIndex = polylineObj?.pointerList.findIndex(l => l + n > left && l > originLeft);
-        } else {
-          const idx = polylineObj?.pointerList?.length ? toReversed(polylineObj?.pointerList).findIndex(l => l - n < left && l < originLeft) : -1;
-          this._concatIndex = !~idx ? -1 : polylineObj?.pointerList.length - 1 - idx;
-        }
-        if (!~this._concatIndex) {
-          point.set({
-            scaleX: point.scale,
-            scaleY: point.scale
-          });
-        } else {
-          this.concatPoint(point, polylineObj?.pointList[this._concatIndex], left, top, n);
-        }
-        this._concatPoint = polylineObj?.pointList?.[this._concatIndex] || null;
-
-        // 被覆盖节点置灰配置
-        polylineObj?.pointerList.forEach((l, i) => {
-          const obj = polylineObj?.pointList[i];
-          if ((isRight && l > originLeft && l < left) || (!isRight && l < originLeft && l > left)) {
-            // 此处需要递归遍历group节点的所有子节点，然后更改其颜色
-            resetPointColor([obj], '#999');
-            isRight && obj.line2?.set({ stroke: '#999' });
-            !isRight && obj.line1?.set({ stroke: '#999' });
-          } else {
-            const color = obj.__attrs.lineAttr.stroke;
-            resetPointColor([obj], color);
-            isRight && obj.line2?.set({ stroke: color });
-            !isRight && obj.line1?.set({ stroke: color });
-          }
-        });
-        if ((point.line1 || point.line2) && Math.abs(left - originLeft) < this.spaceWidth) {
-          setPointLineColor(point, color, isRight);
-        } else {
-          setPointLineColor(point, 'transparent', isRight);
-        }
-      }
-
-      // 如果往回拖动则删除经过的已存在的节点
-      if (startLength > 0) {
-        if (isRight) {
-          this.removeLeftClonePoint(originLeft - this.spaceWidth);
-          this.addPointList = this.addPointList.filter(v => v.left >= originLeft);
-          if (this.addPointList.length > 0 && currentLeft <= this.addPointList[this.addPointList.length - 1].left) {
-            this.removePolyline('increasePointBatch', left);
-            this.addPointList = this.addPointList.filter(v => v.left < left);
-            const endLength = this.addPointList.length;
-            if (endLength === 0) {
-              setPointLineColor(point, color, isRight);
-              this.removePolyline('increasePointBatch', originLeft);
-            }
-            if (endLength > 0) {
-              point.set({
-                prePoints: [this.addPointList[endLength - 1].left, this.addPointList[endLength - 1].top]
-              });
-            }
-          }
-        } else {
-          this.removePolyline('increasePointBatch', originLeft + this.spaceWidth);
-          this.addPointList = this.addPointList.filter(v => v.left <= originLeft);
-          if (this.addPointList.length > 0 && currentLeft >= this.addPointList[this.addPointList.length - 1].left) {
-            this.removeLeftClonePoint(left);
-            this.addPointList = this.addPointList.filter(v => v.left > left);
-            const endLength = this.addPointList.length;
-            if (endLength === 0) {
-              setPointLineColor(point, color, isRight);
-              this.removeLeftClonePoint(originLeft);
-            }
-            if (endLength > 0) {
-              point.set({
-                prePoints: [this.addPointList[endLength - 1].left, this.addPointList[endLength - 1].top]
-              });
-            }
-          }
-        }
-      }
-    },
-    removeLeftClonePoint(left) {
-      this.addPointObjList.forEach(obj => {
-        if (obj.left <= left) {
-          this.canvas.remove(obj);
-          obj.line2 && this.canvas.remove(obj.line2);
-        }
-      });
-      this.addPointObjList = this.addPointObjList.filter(obj => obj.left > left);
-    },
-    clonePoint(point, points, isRight) {
-      const { lineIndex, polylineIndex, lineAttr, polylineTypeId, originLeft } = point;
-      const currentLineAttr = originLeft === points[2] && point.prevPoint ? point.prevPoint.__attrs.lineAttr : lineAttr;
-
-      point.clone(clonedObj => {
-        clonedObj.set({
-          left: points[2],
-          top: points[3],
-          idClone: 'increasePointBatch',
-          id: '_polylinePoint_',
-          polylineTypeId,
-          polylineIndex,
-          scaleX: point.scale || 1,
-          scaleY: point.scale || 1
-        });
-        clonedObj.hasControls = clonedObj.hasBorders = false;
-        point.prePoints = [point.left, point.top];
-        const line = this.drawLine([...points], { evented: false, selectable: false, ...currentLineAttr, polylineIndex, polylineTypeId, lineIndex });
-        if (isRight) {
-          clonedObj.line1 = line;
-        } else {
-          clonedObj.line2 = line;
-        }
-        this.canvas.add(clonedObj);
-        this.canvas.sendBackwards(line);
-        clonedObj.bringForward();
-        this.addPointObjList.push(clonedObj);
-      });
-    },
-    getValue(point) {
-      const x = this.getXValue(point.left);
-      if (point.id) {
-        const data = this.getDataByPoint(point);
-        const position = data.position;
-        const y = this.getYValue(position, point.top);
-        return { data, x, y };
-      } else {
-        const left = this.getYValue('left', point.top);
-        const right = this.getYValue('right', point.top);
-        return { x, left, right };
-      }
-    },
-    getYValue(position, top) {
-      const key = position == 'left' ? 'Left' : 'Right';
-      const list = this.polyline.find(item => item.position == position)?.list || [];
-      const v = list.length ? Math.min(...list) : 0;
-      const y = (this.propItems.endY - top) / this.propItems[`yScaleCell${key}`] + v;
-      return y;
-    },
-    /**
-     * 绘制折线点
-     * @param {lines} 线坐标 [x1, y1, x2, y2]
-     * @param {others} 参数 polylineIndex | pointIndex | ...polyline.lineAttr
-     */
-    drawLine(lines, others) {
-      const lineId = `${others.lineIndex}_${others.polylineIndex}_polylineLine_${new Date().getTime()}`;
-      const line = new this.fabric.Line(lines, {
-        id: lineId,
-        hoverCursor: 'default',
-        // objectCaching: false,
-        selectable: false,
-        evented: false,
-        ...others
-      });
-
-      return line;
-    },
-    formatValue(position, y) {
-      if (position == 'right') {
-        if (y.toString().includes('.')) {
-          const [m, n] = y.toString().split('.');
-          return (parseFloat(`${m}.${n.slice(0, 1)}`) * 10) / 10;
-        }
-        return y;
-      } else {
-        return Math.round(y);
-      }
-    },
-    showDrapPopup(point) {
-      this.isDropVisible = true;
-      this.dropPos = {
-        left: point.left,
-        top: point.top,
-        margin: { top: this.propItems.yCellHeight }
-      };
-      let { x, y, data } = this.getValue(point);
-      this.dropVal = {
-        title: data.title,
-        list: [
-          { id: '11', name: '时间', value: x },
-          { id: '22', name: '值', value: this.formatValue(data.position, y) }
-        ]
-      };
-    },
-    // 折线点移动时 setCoords()方法手动更新相关联的线坐标
-    pointMoveUpdateLine(point) {
-      if (point.line1) {
-        point.line1.setCoords().set({ x2: point.left, y2: point.top });
-      }
-      if (point.line2) {
-        point.line2.setCoords().set({ x1: point.left, y1: point.top });
-      }
-    },
-    // 打开右键菜单
-    openRightModal() {
-      if (this.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(() => {
-        const { operable } = this.propItems;
-        if (id && id.includes('_polylinePoint_')) {
-          this._currentPoint = target;
-          let nodeConnect = [];
-          if (operable.connect) {
-            if (!target.line2 && target.nextPoint) {
-              nodeConnect = rightClickNodeConnect.slice(0, 1);
-            }
-            if (!target.line1 && target.prevPoint) {
-              nodeConnect = rightClickNodeConnect.slice(1);
-            }
-            if (!target.line1 && !target.line2 && target.prevPoint && target.nextPoint) {
-              nodeConnect = rightClickNodeConnect.slice();
-            }
-          }
-          this.rightClickNode = Object.freeze(
-            rightClickNode
-              .slice(0, 1)
-              .concat(nodeConnect)
-              .concat(rightClickNode.slice(-1))
-          );
-          this.isRightVisible = true;
-        } else if (!id) {
-          this._currentPoint = null;
-          this.rightClickNode = rightClickNode.slice(0, 1);
-
-          ['set', 'detail'].forEach(key => {
-            if (operable[key]) {
-              const item = rightClickNode.find(node => node.type === key);
-              this.rightClickNode.push(item);
-            }
-          });
-          this.addExtraMenu();
-          this.isRightVisible = true;
-        }
-      });
-    },
-    addExtraMenu() {
-      const { menuList } = this.propItems.table?.extraMenuConfig || {};
-      if (Array.isArray(menuList) && menuList.length > 0) {
-        menuList.forEach(item => {
-          this.rightClickNode.push({
-            name: item.label,
-            type: item.key || getUuid(),
-            extra: true,
-            origin: item
-          });
-        });
-      }
-    },
-    // 关闭右键菜单，打开添加节点弹窗表单
-    handleRightClick({ type, name, extra, origin }) {
-      this.isRightVisible = false;
-      const { left, top } = this._active;
-      const data = this._currentPoint?.id ? this.getDataByPoint(this._currentPoint) : this.getValue({ left, top });
-      if (extra) {
-        const { click } = this.propItems.table?.extraMenuConfig || {};
-        if (!vexutils.isFunction(click)) return;
-        click(data, origin);
-        return;
-      }
-      if (type == 'add') {
-        if (name.includes('左')) {
-          data.range = {
-            time: [this._currentPoint.prevPoint.time, this._currentPoint.time],
-            direction: 'left'
-          };
-        }
-        if (name.includes('右')) {
-          data.range = {
-            time: [this._currentPoint.time, this._currentPoint.nextPoint.time],
-            direction: 'right'
-          };
-        }
-      }
-      this.$emit('pointOperation', type, data);
-      this._currentPoint = null;
-    },
-    getDataByPoint(point) {
-      const arr = point.id.replace(/_?[a-zA-Z]+.+$/, '').split('_');
-      const [typeIndex, lineIndex, pointIndex] = arr;
-      const data = this.polyline[typeIndex];
-      const value = data?.dataList?.[lineIndex]?.list?.[pointIndex]?.data || '';
-      return {
-        title: point.__attrs.title,
-        position: data.position,
-        dataIndex: +lineIndex,
-        pointIndex: +pointIndex,
-        data: value
-      };
-    },
-    isOnePolyLine(obj, polylineTypeId, polylineIndex) {
-      // 排除左侧标题
-      const isPolyLine = obj.polylineTypeId === polylineTypeId && obj.polylineIndex === polylineIndex;
-      if (obj.id && /_polyline(Point|Line)_/.test(obj.id) && !obj.id.includes('isTitle') && isPolyLine) return true;
-      return;
-    },
-    // 将当条线段以及点层级置顶
-    // 线段不能先置顶，会挡住其他线段上的点
-    pointToFront(point) {
-      this.canvas.forEachObject(obj => {
-        if (this.isOnePolyLine(obj, point.polylineTypeId, point.polylineIndex)) {
-          this.canvas.bringToFront(obj);
-        }
-      });
-    },
-    removePolyline(id, left, position, polylineIndex) {
-      // 根据id或者idClone删除
-      if (id) {
-        const pointId = left ? 'idClone' : 'id';
-        if (pointId === 'idClone') {
-          this.addPointObjList.forEach(obj => {
-            if (obj.left >= left) {
-              this.canvas.remove(obj);
-              obj.line1 && this.canvas.remove(obj.line1);
-            }
-          });
-          this.addPointObjList = this.addPointObjList.filter(obj => obj.left < left);
-        } else {
-          const point = this.canvas.getObjects().filter(item => item[pointId] === id);
-          if (point && point.length > 0) {
-            point.forEach(v => {
-              if (!left) {
-                this.canvas.remove(v);
-                v.line1 && this.canvas.remove(v.line1);
-              }
-            });
-          }
-        }
-
-        return;
-      }
-      // 删除一条线
-      if (position && (polylineIndex === 0 || polylineIndex)) {
-        const polylineTypeId = this.polyline.findIndex(v => v.position === position);
-        this.canvas.forEachObject(obj => {
-          if (this.isOnePolyLine(obj, polylineTypeId, polylineIndex)) {
-            obj.text && this.canvas.remove(obj.text);
-            obj.line1 && this.canvas.remove(obj.line1);
-            obj.line2 && this.canvas.remove(obj.line2);
-            this.canvas.remove(obj);
-          }
-        });
-        return;
-      }
-      // 删除折线图上的所有点和线
-      this.canvas.forEachObject(obj => {
-        if (obj.id && /_polyline(Point|Line)_/.test(obj.id) && !obj.id.includes('isTitle')) {
-          obj.text && this.canvas.remove(obj.text);
-          this.canvas.remove(obj);
-        }
-      });
-    },
-    removeSelectArea() {
-      if (this.selectArea) {
-        this.canvas.remove(this.selectArea);
-        this.selectArea = null;
-      }
-    },
-    repaintPolyline(position, dadaIndex) {
-      if (arguments.length < 2) {
-        if (this.polyline.length) {
-          this.removePolyline();
-        }
-        this.polylinePointList = [];
-        this.flickerablePoints = [];
-        this.polyline.forEach((polylineType, polylineTypeId) => {
-          this.createPolyline(polylineType, polylineTypeId);
-        });
-        this.removeTitle();
-        this.drawPolylineTitle();
-      } else {
-        const polylineTypeId = this.polyline.findIndex(v => v.position === position);
-        this.removePolyline(null, null, position, parseInt(dadaIndex));
-        this.drawPolyline(this.polyline[polylineTypeId].dataList[parseInt(dadaIndex)], parseInt(dadaIndex), this.polyline[polylineTypeId], polylineTypeId);
-      }
-    }
-  },
-  beforeDestroy() {
-    clearInterval(this.interval);
-    this.interval = null;
-  }
-};
-</script>