cnhis-design-vue 2.1.57 → 2.1.59

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

@@ -1,1126 +1,1142 @@
-<template>
-  <div class="poly-line">
-    <MouseRightClick v-if="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';
-
-/**
- * @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, conditionHasLine2) => {
-  point.line1?.set({ stroke: color });
-  conditionHasLine2 && 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: '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: () => {}
-    }
-  },
-  components: {
-    MouseRightClick,
-    DropPopup
-  },
-  data() {
-    return {
-      isDropVisible: false,
-      dropVal: {},
-      dropPos: { clientX: 0, clientY: 0 },
-      isRightVisible: false,
-      rightPos: { clientX: 0, clientY: 0 },
-      rightClickNode: [],
-      activeEvent: null, // 当前可右键活动的对象
-      addPointList: [], // 快速新增的节点list
-      addPointObjList: [], // 批量新增节点对象的缓存
-      isSelectArea: false, // 是否正在选区
-      selectArea: null, // 选区矩形对象
-      currentDelPoint: null, // 缓存当前可批量删除的项目线段上的点
-      polylinePointList: [] // 缓存折线项目节点
-    };
-  },
-  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;
-    }
-  },
-
-  watch: {},
-
-  mounted() {},
-
-  methods: {
-    init() {
-      this.drawPolylineTitle();
-      this.polylinePointList = [];
-      this.polyline.forEach((polylineType, polylineTypeId) => {
-        this.createPolyline(polylineType, polylineTypeId);
-      });
-
-      this.eventStyle.evented && this.createEvent();
-    },
-    createEvent() {
-      this.canvas.on('mouse:up', event => {
-        if (event.button === 3) {
-          const { x, y } = event.pointer;
-          const { originX, originY, endX, endY } = this.$propItems();
-          if (!(x < originX || x > endX || y < originY || y > endY)) {
-            this.activeEvent = event;
-            document.querySelector('.upper-canvas').addEventListener('contextmenu', this.addEventListenerContextmenu, true);
-          }
-          // this.willUpdateLine = line;
-        }
-        // 左键松开鼠标-批量删除
-        this.isSelectArea = false;
-        if (event.button === 1 && !event.target && this.selectArea) {
-          const points = this.selectArea.ponits;
-          const delList = this.getAreaPonits(points);
-          delList.length === 0 && this.removeSelectArea();
-          if (delList.length > 0 && this.selectArea) {
-            this.$emit('pointOperation', 'delete', delList);
-            this.currentDelPoint = null;
-          }
-        }
-      });
-      let selectAreaOrigin = { left: 0, top: 0 };
-      this.canvas.on('mouse:down', event => {
-        if (event.button === 1 && !event.target) {
-          this.isSelectArea = true;
-          selectAreaOrigin.left = event.pointer.x;
-          selectAreaOrigin.top = event.pointer.y;
-        }
-      });
-      this.canvas.on('mouse:move', event => {
-        this.isSelectArea && this.createSelectArea(event, selectAreaOrigin);
-      });
-    },
-    // 获取选区内包含的节点
-    getAreaPonits(points) {
-      const delList = [];
-      const [x1, y1, x2, y2] = points;
-      this.canvas.forEachObject(obj => {
-        const { id, left, top } = obj;
-        const isArea = left >= x1 && left <= x2 && top >= y1 && top <= y2;
-        if (id && /_polyline(Point)_/.test(id) && !id.includes('isTitle') && isArea) {
-          if (this.currentDelPoint) {
-            const { polylineIndex } = this.currentDelPoint;
-            if (polylineIndex == obj.polylineIndex) {
-              delList.push(this.getDataById(id));
-            }
-          } else {
-            delList.push(this.getDataById(id));
-          }
-        }
-      });
-      return delList;
-    },
-    // 创建选区
-    createSelectArea(event, selectAreaOrigin) {
-      this.selectArea && this.canvas.remove(this.selectArea);
-      this.selectArea = new this.fabric.Rect({
-        ...defaultVaule.style,
-        fill: '#CAF982',
-        opacity: 0.4,
-        left: selectAreaOrigin.left,
-        top: selectAreaOrigin.top,
-        width: event.pointer.x - selectAreaOrigin.left,
-        height: event.pointer.y - selectAreaOrigin.top,
-        ponits: [selectAreaOrigin.left, selectAreaOrigin.top, event.pointer.x, event.pointer.y]
-      });
-      this.canvas.add(this.selectArea);
-      // this.canvas.renderAll();
-    },
-    // 每一个折线类别
-    createPolyline(polylineType, polylineTypeId) {
-      polylineType.dataList.forEach((polylineItem, polylineIndex) => {
-        this.drawPolyline(polylineItem, polylineIndex, polylineType, polylineTypeId);
-      });
-    },
-    // 绘制左侧折线标题
-    drawPolylineTitle() {
-      const { canvasHeight, treeTableminCellWidth, originX, xScaleList, xScaleCellList, 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) => {
-          const point = v.list.find(k => isEffectiveNode(k) && new Date(k.time).getTime() >= minTime && new Date(k.time).getTime() <= maxTime);
-          const firstPointLeft = point ? this.cumputedX(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
-          });
-        });
-      });
-
-      // 配置左侧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 = canvasHeight - 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 || ''
-        };
-        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, {
-          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;
-    },
-    // 创建危急值和差异值
-    createAttrVaule(attr, polyline, polylineIndex, polylineType, polylineTypeId) {
-      const { list } = polyline;
-      const valueObj = polyline[attr] || {};
-      if (!valueObj.max && !valueObj.min) return;
-
-      const { originX, endX } = this.propItems;
-      const isMax = valueObj.max?.show && valueObj.max?.value && list.some(v => +v.value >= +valueObj.max.value && this.isLimit(v.time));
-      const isMin = valueObj.min?.show && valueObj.min?.value && list.some(v => +v.value <= +valueObj.min.value && this.isLimit(v.time));
-      const lines = [];
-
-      const drawLine = ({ value, lineStyle }) => {
-        const top = this.cumputedY(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
-        });
-      };
-
-      if (isMax) {
-        const line = drawLine(valueObj.max);
-        const text = drawText(valueObj.max, line.top);
-        line.text = text;
-        lines.push(line, text);
-      }
-      if (isMin) {
-        const line = drawLine(valueObj.min);
-        const text = drawText(valueObj.min, line.top);
-        line.text = text;
-        lines.push(line, text);
-      }
-      this.canvas.add(...lines);
-      // this.canvas.renderAll();
-    },
-    /**
-     * 绘制一条折线
-     * @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 } = this.propItems;
-      const { pointAttr, lineAttr } = polyline;
-      this._iconClassName = polyline.type === 'img' && pointAttr.iconClassName ? pointAttr.iconClassName : '';
-
-      const list = polyline.list;
-      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.cumputedX(point.time);
-          const y = _this.cumputedY(polylineType, point.value);
-          isInit = y < originY || y > endY;
-          points = [x, y < originY ? originY : y > endY ? endY : y];
-        }
-        return { isInit, points };
-      }
-      list.forEach((linePoints, index) => {
-        // 当前点
-        let { points, isInit } = getPointer(linePoints);
-
-        // 下一个点
-        const nextPoints = list[index + 1];
-        let { points: nextPoint } = getPointer(nextPoints);
-
-        let line;
-        let point;
-        let previousLine;
-        line = points && nextPoint ? this.drawLine([...points, ...nextPoint], { polylineIndex, polylineTypeId, lineIndex: index, ...lineAttr }) : null;
-        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
-          });
-          point = previousLine ? this.drawPoint(...points, previousLine, line, polyline.type, pointOthers, isInit) : this.drawPoint(...points, null, line, polyline.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,
-            color: lineAttr.stroke,
-            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);
-        // this.canvas.requestRenderAll();
-      });
-
-      this.createAttrVaule('critical', polyline, polylineIndex, polylineType, polylineTypeId);
-      this.createAttrVaule('diffValue', polyline, polylineIndex, polylineType, polylineTypeId);
-    },
-    // 计算y轴坐标
-    cumputedY(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, {
-        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 },
-        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;
-        // 如果是重合/连线节点
-        if (point.get('scaleX') !== point.scale) {
-          const addOjb = {
-            ...lastPoint,
-            value: {
-              time: this.getXValue(this._concatPoint?.left),
-              value: this.getYValue(position, this._concatPoint?.top)
-            }
-          };
-          if (lastPoint.value.time == addOjb.value.time) {
-            this.addPointList.splice(-1, 1, addOjb);
-          } else {
-            this.addPointList.push(addOjb);
-          }
-          this.addPointList.forEach(v => Object.assign(v, { isConcat: true, concatIndex: this._concatIndex }));
-        } else if (point.line2 || (point.nextPoint && lastPoint.left >= point.nextPoint.left)) {
-          // 1、存在右连线 2、无右侧连线，并且存在下一个节点的情况
-          this.addPointList = [];
-          this.repaintPolyline(position, point.polylineIndex);
-          return;
-        }
-        !point.line2 && firstPoint.left <= point.originLeft && this.addPointList.splice(0, 1);
-        !point.id.includes('isTitle') && this.removePolyline(point.id);
-        if (this.addPointList.length > 0) {
-          this.$emit('pointOperation', 'increasePointBatch', this.addPointList);
-          this.addPointList = [];
-        } else {
-          this.repaintPolyline(position, point.polylineIndex);
-        }
-      }
-    },
-    // 设置批量新增数据
-    setAddPointList(point) {
-      const { data, x, y } = this.getValue(point);
-      data.value = { time: x, value: y };
-      data.left = point.left;
-      data.top = top;
-      this.addPointList.push(data);
-    },
-    // 纠正线段坐标
-    setLinePatch(point) {
-      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 => obj.left === currentPoint.left);
-        if (currentPointObj?.line1?.x1 !== prevPoint.left) {
-          currentPointObj.line1.set({
-            x1: prevPoint.left,
-            y1: prevPoint.top,
-            x2: currentPoint.left,
-            y2: currentPoint.top
-          });
-        }
-      }
-    },
-    // 检查批量新增拖动过程中是否存在漏点的情况
-    checkPoints(point) {
-      const { originLeft, originTop, left, polylineTypeId } = point;
-      const PointLens = Math.floor((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 curLeft = originLeft + this.spaceWidth * k;
-            // 判断this.addPointList中的left是否包含curLeft，不包含就说明是漏了
-            const hasPoint = this.addPointList.some(p => Math.abs(p.left - curLeft) <= 0.001);
-            // const hasPoint = this.addPointList.some(v => v.left == curLeft);
-            if (!hasPoint) {
-              let index;
-              const pointObj = this.addPointList.find((v, i) => {
-                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 = ~~((pointObj.left - (curLeft - this.spaceWidth)) / this.spaceWidth);
-                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);
-                cloneObj.left = curLeft;
-                this.addPointList.splice(index, 0, cloneObj);
-                this.clonePoint(point, [prePoint.left, prePoint.top, cloneObj.left, cloneObj.top]);
-              }
-            }
-          }
-        }
-      }
-      // 纠正节点上的line1的坐标
-      this.setLinePatch(point);
-    },
-    /**
-     * @description: 拖动批量新增节点
-     * @param {*} point 拖动的最后一个节点
-     * @return {*}
-     */
-    addPoint(point) {
-      let { left, top, originLeft, originTop } = point;
-      const currentLeft = left;
-
-      const startLength = this.addPointList.length;
-      const n = 6; // 拖动范围，在需要增加节点的刻度左右吸入的范围值
-      const residue = (left - originLeft) % this.spaceWidth;
-
-      const condition = residue > 0 && (residue > this.spaceWidth - n || residue < n);
-      const conditionNoLine2 = !point.line2 && left > originLeft;
-      const conditionHasLine2 = point.line2 && left > originLeft + this.spaceWidth;
-
-      // if (!point.line2 && left > originLeft && condition) {
-      if (condition && (conditionNoLine2 || conditionHasLine2)) {
-        if (residue > this.spaceWidth - n) left = left - residue + this.spaceWidth;
-        if (residue < n) left = left - residue;
-        point.set({
-          left
-        });
-
-        // const i = Math.floor((left - originLeft) / this.spaceWidth);
-        // 复制点和线
-        if (conditionNoLine2 || conditionHasLine2) {
-          // point.line1 && this.removePolyline(point.line1.id);
-          setPointLineColor(point, 'transparent', conditionHasLine2);
-          this.addPointList.length == 0 && this.clonePoint(point, [point.line1 ? point.line1.x1 : originLeft, point.line1 ? point.line1.y1 : originTop, originLeft, originTop]);
-          if (this.addPointList.every(v => v.left !== left)) {
-            // const points1 = i === 1 ? [originLeft, originTop] : point.prePoints;
-            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 };
-              data.left = left;
-              data.top = top;
-              // 避免重复添加
-              if (this.addPointObjList.every(o => o.left !== left)) {
-                this.addPointList.push(data);
-                this.clonePoint(point, [...points1, left, top]);
-              }
-            }
-          }
-          this.checkPoints(point);
-        }
-      }
-
-      // 断点相连
-      function concatPoint(target) {
-        const { left: targetLeft, top: targetTop } = target;
-        point.setCoords();
-        if (left >= targetLeft - n && left <= targetLeft + n && top <= targetTop + n && 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
-          });
-        }
-      }
-
-      // 检查是否显示重合连线放大节点的标识
-      const { polylineTypeId, polylineIndex } = point;
-      const polylineObj = this.polylinePointList.find(v => v.polylineTypeId == polylineTypeId && v.polylineIndex == polylineIndex);
-      polylineObj?.pointList.forEach(v => v.bringToFront());
-      if (point.nextPoint) {
-        this._concatIndex = polylineObj?.pointerList.findIndex(v => v + n > left && v > originLeft);
-        if (!~this._concatIndex) {
-          point.set({
-            scaleX: point.scale,
-            scaleY: point.scale
-          });
-        } else {
-          concatPoint(polylineObj?.pointList[this._concatIndex]);
-        }
-        this._concatPoint = polylineObj?.pointList?.[this._concatIndex] || null;
-
-        // 被覆盖节点置灰配置
-        polylineObj?.pointerList.forEach((v, i) => {
-          const obj = polylineObj?.pointList[i];
-          if (v > originLeft && v < left) {
-            // 此处需要递归遍历group节点的所有子节点，然后更改其颜色
-            resetPointColor([obj], '#999');
-            obj.line2?.set({ stroke: '#999' });
-          } else {
-            resetPointColor([obj], polylineObj.color);
-            obj.line2?.set({ stroke: polylineObj.color });
-          }
-        });
-        if ((point.line1 || point.line2) && left < originLeft + this.spaceWidth) {
-          setPointLineColor(point, polylineObj.color, true);
-        } else {
-          setPointLineColor(point, 'transparent', true);
-        }
-      }
-
-      // 如果往回拖动则删除经过的已存在的节点
-      if (startLength > 0 && currentLeft <= this.addPointList[startLength - 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, polylineObj?.color, conditionHasLine2);
-          this.removePolyline('increasePointBatch', originLeft);
-        }
-        if (endLength > 0) {
-          point.set({
-            prePoints: [this.addPointList[endLength - 1].left, this.addPointList[endLength - 1].top]
-          });
-        }
-      }
-    },
-    clonePoint(point, points) {
-      let evented, selectable, lineIndex, polylineIndex, lineAttr, polylineTypeId;
-      evented = selectable = false;
-      lineAttr = { ...point.lineAttr };
-      lineIndex = point.pointIndex;
-      polylineIndex = point.polylineIndex;
-      polylineTypeId = point.polylineTypeId;
-
-      // return new Promise((resolve, reject) => {
-      point.clone(clonedObj => {
-        clonedObj.set({
-          left: points[2],
-          top: points[3],
-          idClone: 'increasePointBatch',
-          id: '_polylinePoint_' + new Date().getTime(), // 此id必须，用于remove节点的时候
-          polylineTypeId,
-          polylineIndex: point.polylineIndex,
-          scaleX: point.scale,
-          scaleY: point.scale
-        });
-        clonedObj.hasControls = clonedObj.hasBorders = false;
-        point.prePoints = [point.left, point.top];
-        const line = this.drawLine([...points], { evented, selectable, ...lineAttr, polylineIndex, polylineTypeId, lineIndex });
-        clonedObj.line1 = line;
-        this.canvas.sendBackwards(line);
-        clonedObj.bringForward();
-        this.canvas.add(clonedObj);
-        this.addPointObjList.push(clonedObj);
-        // resolve(clonedObj);
-      });
-      // });
-    },
-    getValue(point) {
-      const x = this.getXValue(point.left);
-      if (point.id) {
-        const data = this.getDataById(point.id);
-        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;
-    },
-    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);
-      const getY = y => {
-        if (data?.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);
-        }
-      };
-      this.dropVal = {
-        title: data.title,
-        list: [
-          { id: '11', name: '时间', value: x },
-          { id: '22', name: '值', value: getY(y) }
-        ]
-      };
-    },
-    // 折线点移动时 setCoords()方法手动更新相关联的线坐标
-    pointMoveUpdateLine(point) {
-      if (point.line1) {
-        point.line1.setCoords();
-        point.line1.set({ x2: point.left, y2: point.top });
-      }
-      if (point.line2) {
-        point.line2.setCoords();
-        point.line2.set({ x1: point.left, y1: point.top });
-      }
-    },
-    // 打开右键菜单
-    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('_polylinePoint_')) {
-          this._currentPoint = target;
-          let nodeConnect = [];
-          if (this.propItems.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) {
-          const { operable } = this.propItems;
-          this._currentPoint = null;
-          this.rightClickNode = Object.freeze(operable.set ? rightClickNode.slice(0, 2) : rightClickNode.slice(0, 1));
-          this.isRightVisible = true;
-        }
-      });
-    },
-    // 关闭右键菜单，打开添加节点弹窗表单
-    handleRightClick({ type, name }) {
-      this.isRightVisible = false;
-      const id = this._currentPoint?.id;
-      const { left, top } = this._active;
-      let data = id ? this.getDataById(id) : this.getValue({ left, top });
-      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;
-    },
-    getDataById(id) {
-      const arr = 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: data?.dataList?.[lineIndex].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.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);
-      }
-    }
-  }
-};
-</script>
+<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';
+
+/**
+ * @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, conditionHasLine2) => {
+  point.line1?.set({ stroke: color });
+  conditionHasLine2 && 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: '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: () => {}
+    }
+  },
+  components: {
+    MouseRightClick,
+    DropPopup
+  },
+  data() {
+    return {
+      isDropVisible: false,
+      dropVal: {},
+      dropPos: { clientX: 0, clientY: 0 },
+      isRightVisible: false,
+      rightPos: { clientX: 0, clientY: 0 },
+      rightClickNode: [],
+      activeEvent: null, // 当前可右键活动的对象
+      addPointList: [], // 快速新增的节点list
+      addPointObjList: [], // 批量新增节点对象的缓存
+      isSelectArea: false, // 是否正在选区
+      selectArea: null, // 选区矩形对象
+      currentDelPoint: null, // 缓存当前可批量删除的项目线段上的点
+      polylinePointList: [] // 缓存折线项目节点
+    };
+  },
+  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;
+    }
+  },
+
+  watch: {},
+
+  mounted() {},
+
+  methods: {
+    init() {
+      this.drawPolylineTitle();
+      this.polylinePointList = [];
+      this.polyline.forEach((polylineType, polylineTypeId) => {
+        this.createPolyline(polylineType, polylineTypeId);
+      });
+
+      this.eventStyle.evented && this.createEvent();
+    },
+    createEvent() {
+      this.canvas.on('mouse:up', event => {
+        if (event.button === 3) {
+          const { x, y } = event.pointer;
+          const { originX, originY, endX, endY } = this.$propItems();
+          if (!(x < originX || x > endX || y < originY || y > endY)) {
+            this.activeEvent = event;
+            document.querySelector('.upper-canvas').addEventListener('contextmenu', this.addEventListenerContextmenu, true);
+          }
+          // this.willUpdateLine = line;
+        }
+        // 左键松开鼠标-批量删除
+        this.isSelectArea = false;
+        if (event.button === 1 && !event.target && this.selectArea) {
+          const points = this.selectArea.ponits;
+          const delList = this.getAreaPonits(points);
+          delList.length === 0 && this.removeSelectArea();
+          if (delList.length > 0 && this.selectArea) {
+            this.$emit('pointOperation', 'delete', delList);
+            this.currentDelPoint = null;
+          }
+        }
+      });
+      let selectAreaOrigin = { left: 0, top: 0 };
+      this.canvas.on('mouse:down', event => {
+        if (event.button === 1 && !event.target) {
+          this.isSelectArea = true;
+          selectAreaOrigin.left = event.pointer.x;
+          selectAreaOrigin.top = event.pointer.y;
+        }
+      });
+      this.canvas.on('mouse:move', event => {
+        this.isSelectArea && this.createSelectArea(event, selectAreaOrigin);
+      });
+    },
+    handleMoving(event) {
+      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);
+    },
+    // 获取选区内包含的节点
+    getAreaPonits(points) {
+      const delList = [];
+      const [x1, y1, x2, y2] = points;
+      this.canvas.forEachObject(obj => {
+        const { id, left, top } = obj;
+        const isArea = left >= x1 && left <= x2 && top >= y1 && top <= y2;
+        if (id && /_polyline(Point)_/.test(id) && !id.includes('isTitle') && isArea) {
+          if (this.currentDelPoint) {
+            const { polylineIndex } = this.currentDelPoint;
+            if (polylineIndex == obj.polylineIndex) {
+              delList.push(this.getDataById(id));
+            }
+          } else {
+            delList.push(this.getDataById(id));
+          }
+        }
+      });
+      return delList;
+    },
+    // 创建选区
+    createSelectArea(event, selectAreaOrigin) {
+      this.selectArea && this.canvas.remove(this.selectArea);
+      this.selectArea = new this.fabric.Rect({
+        ...defaultVaule.style,
+        fill: '#CAF982',
+        opacity: 0.4,
+        left: selectAreaOrigin.left,
+        top: selectAreaOrigin.top,
+        width: event.pointer.x - selectAreaOrigin.left,
+        height: event.pointer.y - selectAreaOrigin.top,
+        ponits: [selectAreaOrigin.left, selectAreaOrigin.top, event.pointer.x, event.pointer.y]
+      });
+      this.canvas.add(this.selectArea);
+      // this.canvas.renderAll();
+    },
+    // 每一个折线类别
+    createPolyline(polylineType, polylineTypeId) {
+      polylineType.dataList.forEach((polylineItem, polylineIndex) => {
+        this.drawPolyline(polylineItem, polylineIndex, polylineType, polylineTypeId);
+      });
+    },
+    // 绘制左侧折线标题
+    drawPolylineTitle() {
+      const { canvasHeight, treeTableminCellWidth, originX, xScaleList, xScaleCellList, 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) => {
+          const point = v.list.find(k => isEffectiveNode(k) && new Date(k.time).getTime() >= minTime && new Date(k.time).getTime() <= maxTime);
+          const firstPointLeft = point ? this.cumputedX(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
+          });
+        });
+      });
+
+      // 配置左侧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 = canvasHeight - 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 || ''
+        };
+        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, {
+          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;
+    },
+    // 创建危急值和差异值
+    createAttrVaule(attr, polyline, polylineIndex, polylineType, polylineTypeId) {
+      const { list } = polyline;
+      const valueObj = polyline[attr] || {};
+      if (!valueObj.max && !valueObj.min) return;
+
+      const { originX, endX } = this.propItems;
+      const isMax = valueObj.max?.show && valueObj.max?.value && list.some(v => +v.value >= +valueObj.max.value && this.isLimit(v.time));
+      const isMin = valueObj.min?.show && valueObj.min?.value && list.some(v => +v.value <= +valueObj.min.value && this.isLimit(v.time));
+      const lines = [];
+
+      const drawLine = ({ value, lineStyle }) => {
+        const top = this.cumputedY(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
+        });
+      };
+
+      if (isMax) {
+        const line = drawLine(valueObj.max);
+        const text = drawText(valueObj.max, line.top);
+        line.text = text;
+        lines.push(line, text);
+      }
+      if (isMin) {
+        const line = drawLine(valueObj.min);
+        const text = drawText(valueObj.min, line.top);
+        line.text = text;
+        lines.push(line, text);
+      }
+      this.canvas.add(...lines);
+      // this.canvas.renderAll();
+    },
+    /**
+     * 绘制一条折线
+     * @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 } = this.propItems;
+      const { pointAttr, lineAttr } = polyline;
+      this._iconClassName = polyline.type === 'img' && pointAttr.iconClassName ? pointAttr.iconClassName : '';
+
+      const list = polyline.list;
+      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.cumputedX(point.time);
+          const y = _this.cumputedY(polylineType, point.value);
+          isInit = y < originY || y > endY;
+          points = [x, y < originY ? originY : y > endY ? endY : y];
+        }
+        return { isInit, points };
+      }
+      list.forEach((linePoints, index) => {
+        // 当前点
+        let { points, isInit } = getPointer(linePoints);
+
+        // 下一个点
+        const nextPoints = list[index + 1];
+        let { points: nextPoint } = getPointer(nextPoints);
+
+        let line;
+        let point;
+        let previousLine;
+        line = points && nextPoint ? this.drawLine([...points, ...nextPoint], { polylineIndex, polylineTypeId, lineIndex: index, ...lineAttr }) : null;
+        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
+          });
+          point = previousLine ? this.drawPoint(...points, previousLine, line, polyline.type, pointOthers, isInit) : this.drawPoint(...points, null, line, polyline.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,
+            color: lineAttr.stroke,
+            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);
+        // this.canvas.requestRenderAll();
+      });
+
+      this.createAttrVaule('critical', polyline, polylineIndex, polylineType, polylineTypeId);
+      this.createAttrVaule('diffValue', polyline, polylineIndex, polylineType, polylineTypeId);
+    },
+    // 计算y轴坐标
+    cumputedY(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, {
+        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 },
+        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;
+        // 如果是重合/连线节点
+        if (point.get('scaleX') !== point.scale) {
+          const addOjb = {
+            ...lastPoint,
+            value: {
+              time: this.getXValue(this._concatPoint?.left),
+              value: this.getYValue(position, this._concatPoint?.top)
+            }
+          };
+          if (lastPoint.value.time == addOjb.value.time) {
+            this.addPointList.splice(-1, 1, addOjb);
+          } else {
+            this.addPointList.push(addOjb);
+          }
+          this.addPointList.forEach(v => Object.assign(v, { isConcat: true, concatIndex: this._concatIndex }));
+        } else if (point.line2 || (point.nextPoint && lastPoint.left >= point.nextPoint.left)) {
+          // 1、存在右连线 2、无右侧连线，并且存在下一个节点的情况
+          this.addPointList = [];
+          this.repaintPolyline(position, point.polylineIndex);
+          return;
+        }
+        !point.line2 && firstPoint.left <= point.originLeft && this.addPointList.splice(0, 1);
+        !point.id.includes('isTitle') && this.removePolyline(point.id);
+        if (this.addPointList.length > 0) {
+          this.$emit('pointOperation', 'increasePointBatch', this.addPointList);
+          this.addPointList = [];
+        } else {
+          this.repaintPolyline(position, point.polylineIndex);
+        }
+      }
+    },
+    // 设置批量新增数据
+    setAddPointList(point) {
+      const { data, x, y } = this.getValue(point);
+      data.value = { time: x, value: y };
+      data.left = point.left;
+      data.top = top;
+      this.addPointList.push(data);
+    },
+    // 纠正线段坐标
+    setLinePatch(point) {
+      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 => obj.left === currentPoint.left);
+        if (currentPointObj?.line1?.x1 !== prevPoint.left) {
+          currentPointObj.line1.set({
+            x1: prevPoint.left,
+            y1: prevPoint.top,
+            x2: currentPoint.left,
+            y2: currentPoint.top
+          });
+        }
+      }
+    },
+    // 检查批量新增拖动过程中是否存在漏点的情况
+    checkPoints(point) {
+      const { originLeft, originTop, left, polylineTypeId } = point;
+      const PointLens = Math.floor((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 curLeft = originLeft + this.spaceWidth * k;
+            // 判断this.addPointList中的left是否包含curLeft，不包含就说明是漏了
+            const hasPoint = this.addPointList.some(p => Math.abs(p.left - curLeft) <= 0.001);
+            // const hasPoint = this.addPointList.some(v => v.left == curLeft);
+            if (!hasPoint) {
+              let index;
+              const pointObj = this.addPointList.find((v, i) => {
+                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 = ~~((pointObj.left - (curLeft - this.spaceWidth)) / this.spaceWidth);
+                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);
+                cloneObj.left = curLeft;
+                this.addPointList.splice(index, 0, cloneObj);
+                this.clonePoint(point, [prePoint.left, prePoint.top, cloneObj.left, cloneObj.top]);
+              }
+            }
+          }
+        }
+      }
+      // 纠正节点上的line1的坐标
+      this.setLinePatch(point);
+    },
+    /**
+     * @description: 拖动批量新增节点
+     * @param {*} point 拖动的最后一个节点
+     * @return {*}
+     */
+    addPoint(point) {
+      let { left, top, originLeft, originTop } = point;
+      const currentLeft = left;
+
+      const startLength = this.addPointList.length;
+      const n = 6; // 拖动范围，在需要增加节点的刻度左右吸入的范围值
+      const residue = (left - originLeft) % this.spaceWidth;
+
+      const condition = residue > 0 && (residue > this.spaceWidth - n || residue < n);
+      const conditionNoLine2 = !point.line2 && left > originLeft;
+      const conditionHasLine2 = point.line2 && left > originLeft + this.spaceWidth;
+
+      // if (!point.line2 && left > originLeft && condition) {
+      if (condition && (conditionNoLine2 || conditionHasLine2)) {
+        if (residue > this.spaceWidth - n) left = left - residue + this.spaceWidth;
+        if (residue < n) left = left - residue;
+        point.set({
+          left
+        });
+
+        // const i = Math.floor((left - originLeft) / this.spaceWidth);
+        // 复制点和线
+        if (conditionNoLine2 || conditionHasLine2) {
+          // point.line1 && this.removePolyline(point.line1.id);
+          setPointLineColor(point, 'transparent', conditionHasLine2);
+          this.addPointList.length == 0 && this.clonePoint(point, [point.line1 ? point.line1.x1 : originLeft, point.line1 ? point.line1.y1 : originTop, originLeft, originTop]);
+          if (this.addPointList.every(v => v.left !== left)) {
+            // const points1 = i === 1 ? [originLeft, originTop] : point.prePoints;
+            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 };
+              data.left = left;
+              data.top = top;
+              // 避免重复添加
+              if (this.addPointObjList.every(o => o.left !== left)) {
+                this.addPointList.push(data);
+                this.clonePoint(point, [...points1, left, top]);
+              }
+            }
+          }
+          this.checkPoints(point);
+        }
+      }
+
+      // 断点相连
+      function concatPoint(target) {
+        const { left: targetLeft, top: targetTop } = target;
+        point.setCoords();
+        if (left >= targetLeft - n && left <= targetLeft + n && top <= targetTop + n && 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
+          });
+        }
+      }
+
+      // 检查是否显示重合连线放大节点的标识
+      const { polylineTypeId, polylineIndex } = point;
+      const polylineObj = this.polylinePointList.find(v => v.polylineTypeId == polylineTypeId && v.polylineIndex == polylineIndex);
+      polylineObj?.pointList.forEach(v => v.bringToFront());
+      if (point.nextPoint) {
+        this._concatIndex = polylineObj?.pointerList.findIndex(v => v + n > left && v > originLeft);
+        if (!~this._concatIndex) {
+          point.set({
+            scaleX: point.scale,
+            scaleY: point.scale
+          });
+        } else {
+          concatPoint(polylineObj?.pointList[this._concatIndex]);
+        }
+        this._concatPoint = polylineObj?.pointList?.[this._concatIndex] || null;
+
+        // 被覆盖节点置灰配置
+        polylineObj?.pointerList.forEach((v, i) => {
+          const obj = polylineObj?.pointList[i];
+          if (v > originLeft && v < left) {
+            // 此处需要递归遍历group节点的所有子节点，然后更改其颜色
+            resetPointColor([obj], '#999');
+            obj.line2?.set({ stroke: '#999' });
+          } else {
+            resetPointColor([obj], polylineObj.color);
+            obj.line2?.set({ stroke: polylineObj.color });
+          }
+        });
+        if ((point.line1 || point.line2) && left < originLeft + this.spaceWidth) {
+          setPointLineColor(point, polylineObj.color, true);
+        } else {
+          setPointLineColor(point, 'transparent', true);
+        }
+      }
+
+      // 如果往回拖动则删除经过的已存在的节点
+      if (startLength > 0 && currentLeft <= this.addPointList[startLength - 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, polylineObj?.color, conditionHasLine2);
+          this.removePolyline('increasePointBatch', originLeft);
+        }
+        if (endLength > 0) {
+          point.set({
+            prePoints: [this.addPointList[endLength - 1].left, this.addPointList[endLength - 1].top]
+          });
+        }
+      }
+    },
+    clonePoint(point, points) {
+      let evented, selectable, lineIndex, polylineIndex, lineAttr, polylineTypeId;
+      evented = selectable = false;
+      lineAttr = { ...point.lineAttr };
+      lineIndex = point.pointIndex;
+      polylineIndex = point.polylineIndex;
+      polylineTypeId = point.polylineTypeId;
+
+      // return new Promise((resolve, reject) => {
+      point.clone(clonedObj => {
+        clonedObj.set({
+          left: points[2],
+          top: points[3],
+          idClone: 'increasePointBatch',
+          id: '_polylinePoint_' + new Date().getTime(), // 此id必须，用于remove节点的时候
+          polylineTypeId,
+          polylineIndex: point.polylineIndex,
+          scaleX: point.scale,
+          scaleY: point.scale
+        });
+        clonedObj.hasControls = clonedObj.hasBorders = false;
+        point.prePoints = [point.left, point.top];
+        const line = this.drawLine([...points], { evented, selectable, ...lineAttr, polylineIndex, polylineTypeId, lineIndex });
+        clonedObj.line1 = line;
+        this.canvas.sendBackwards(line);
+        clonedObj.bringForward();
+        this.canvas.add(clonedObj);
+        this.addPointObjList.push(clonedObj);
+        // resolve(clonedObj);
+      });
+      // });
+    },
+    getValue(point) {
+      const x = this.getXValue(point.left);
+      if (point.id) {
+        const data = this.getDataById(point.id);
+        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();
+        point.line1.set({ x2: point.left, y2: point.top });
+      }
+      if (point.line2) {
+        point.line2.setCoords();
+        point.line2.set({ x1: point.left, y1: point.top });
+      }
+    },
+    // 打开右键菜单
+    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('_polylinePoint_')) {
+          this._currentPoint = target;
+          let nodeConnect = [];
+          if (this.propItems.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) {
+          const { operable } = this.propItems;
+          this._currentPoint = null;
+          this.rightClickNode = Object.freeze(operable.set ? rightClickNode.slice(0, 2) : rightClickNode.slice(0, 1));
+          this.isRightVisible = true;
+        }
+      });
+    },
+    // 关闭右键菜单，打开添加节点弹窗表单
+    handleRightClick({ type, name }) {
+      this.isRightVisible = false;
+      const id = this._currentPoint?.id;
+      const { left, top } = this._active;
+      let data = id ? this.getDataById(id) : this.getValue({ left, top });
+      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;
+    },
+    getDataById(id) {
+      const arr = 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: data?.dataList?.[lineIndex].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.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);
+      }
+    }
+  }
+};
+</script>