cnhis-design-vue 0.2.64-beta → 0.3.2-beta

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

@@ -1,933 +0,0 @@
-<template>
-  <div class="poly-line">
-    <MouseRightClick v-if="isRightVisible" :getContainer="getContainer" :nodeList="rightClickNode" :rightPos="rightPos" @nodeClick="handleRightClick" @closeRight="isRightVisible = false" />
-
-    <DropPopup v-if="isDropVisible" :val="dropVal" :dropPos="dropPos" />
-  </div>
-</template>
-
-<script>
-import 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';
-
-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
-      isSelectArea: false, // 是否正在选区
-      selectArea: null // 选区矩形对象
-    };
-  },
-  computed: {
-    eventStyle() {
-      return this.propItems.eventStyle;
-    }
-  },
-
-  watch: {
-  },
-
-  mounted() {
-    this.$nextTick(() => {
-      this.drawPolylineTitle();
-      this.polyline.forEach((polylineType, polylineTypeId) => {
-        this.createPolyline(polylineType, polylineTypeId);
-      });
-
-      this.eventStyle.evented && this.createEvent();
-    });
-  },
-
-  methods: {
-    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();
-          delList.length > 0 && this.selectArea && this.$emit('pointOperation', 'delete', delList);
-        }
-      });
-      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) {
-          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 isAdd = v.list.length
-            ? !v.list.some(k => {
-                return isEffectiveNode(k) && new Date(k.time).getTime() >= minTime && new Date(k.time).getTime() < xScaleCellList[1].time;
-              })
-            : true;
-          let rightLimit = endX;
-          const point = v.list.find(k => isEffectiveNode(k) && new Date(k.time).getTime() >= xScaleCellList[1].time && new Date(k.time).getTime() <= maxTime);
-          const limitObj =
-            point &&
-            JSON.parse(JSON.stringify(xScaleCellList))
-              .reverse()
-              .find(k => new Date(point.time).getTime() > k.time);
-          limitObj && (rightLimit = limitObj.x);
-          point && !limitObj && new Date(point.time).getTime() === maxTime && (rightLimit = xScaleCellList[xScaleCellList.length - 1].x);
-          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)) {
-        if (this.other.position && this.other.position === 'top') {
-          leftTitleList.push(
-            ...this.other.list.map(v => {
-              return {
-                title: v.name,
-                type: v.type,
-                pointAttr: v,
-                isAdd: false,
-                polylineTypeId: -1,
-                polylineIndex: -1
-              };
-            })
-          );
-        } else {
-          leftTitleList.unshift(
-            ...this.other.list.map(v => {
-              return {
-                title: v.name,
-                type: v.type,
-                pointAttr: v,
-                isAdd: false,
-                polylineTypeId: -1,
-                polylineIndex: -1
-              };
-            })
-          );
-        }
-      }
-
-      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 isOriginXCenter = v.type === 'arrow' || v.type === '+' || v.type === 'shjs' || v.type === 'shks' || v.type === 'cg';
-
-        const iconLeft = isOriginXCenter ? text.width + text.left + 10 : text.width + text.left + 5;
-        const option = {
-          left: iconLeft,
-          top,
-          ...v.pointAttr,
-          originY: 'center',
-          originX: isOriginXCenter ? 'center' : 'left',
-          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
-            });
-            this.canvas.renderAll();
-          }
-
-          if (!cloneIconId) {
-            cloneIconId = '_polylinePoint_temp_' + new Date().getTime();
-            icon.clone(clonedObj => {
-              clonedObj.set({
-                id: cloneIconId // 此id必须，用于remove节点的时候
-              });
-              clonedObj.bringForward();
-              this.canvas.add(clonedObj);
-              this.canvas.renderAll();
-            });
-          }
-
-          icon.set({ originX: 'center' });
-          this.moveLimit(icon);
-          icon.left >= originX && icon.left < originX + 5 && (originTop = icon.top);
-          if (icon.left >= originX) {
-            // this.addPoint(icon, originX, originTop);
-            this.showDrapPopup(icon);
-          } else {
-            this.isDropVisible = false;
-          }
-          this.canvas.renderAll();
-        });
-        // 标题折线点停止拖拽后 更新
-        icon.on('moved', () => {
-          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();
-      });
-    },
-    // 点移动限制
-    moveLimit(point) {
-      point.setCoords();
-      const leftLimit = this.propItems.treeTableminCellWidth;
-      const rightLimit = point.rightLimit;
-      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 = [];
-
-      list.forEach((linePoints, index) => {
-        // 当前点
-        let points = null;
-        let isInit = false;
-        if (isEffectiveNode(linePoints)) {
-          const x = this.cumputedX(linePoints.time);
-          const y = this.cumputedY(polylineType, linePoints.value);
-          isInit = y < originY || y > endY;
-          if (this.isLimit(linePoints.time)) points = [x, y < originY ? originY : y > endY ? endY : y];
-        }
-
-        // 下一个点
-        const nextPoints = list[index + 1];
-        let nextPoint = null;
-        if (isEffectiveNode(nextPoints)) {
-          const nextX = this.cumputedX(nextPoints.time);
-          const nextY = this.cumputedY(polylineType, nextPoints.value);
-          if (this.isLimit(nextPoints.time)) nextPoint = [nextX, nextY < originY ? originY : nextY > endY ? endY : nextY];
-        }
-        let line;
-        let point;
-        let previousLine;
-
-        line = points && nextPoint ? this.drawLine([...points, ...nextPoint], { polylineIndex, lineIndex: index, ...lineAttr }) : null;
-        previousLine = lineList[index - 1];
-        const pointOthers = { polylineTypeId, polylineIndex, pointIndex: index, ...pointAttr, lineAttr };
-        if (points) {
-          pointOthers.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 => {
-        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);
-      });
-      point.on('mouseout', () => {
-        this.isDropVisible = false;
-      });
-      // 折线点移动中 实时更新相关联的线的坐标
-      if (this.eventStyle.evented) {
-        point.on('moving', () => {
-          this.pointMoveLimit(point);
-          this.pointMoveUpdateLine(point);
-          this.addPoint(point, left, top);
-          this.canvas.renderAll();
-          this.showDrapPopup(point);
-        });
-        // 折线点停止拖拽后 更新polyline中对应的坐标
-        point.on('moved', () => {
-          if (point && point.id.includes('_polylinePoint_')) {
-            this.isDropVisible = false;
-            this.setEmitFunction(point);
-          }
-        });
-      }
-      
-      // 超出表格最高或最低值则需要触发pointChange事件并且不能更新视图，否则连接节点判断不会成功
-      isInit && this.setEmitFunction(point, isInit);
-
-      return point;
-    },
-    // 拖动停止后 设置回调触发方法
-    setEmitFunction(point, isInit = false) {
-      const { data, x, y } = this.getValue(point);
-      Object.assign(data, {
-        value: { time: x, value: y },
-        isInit
-      });
-      if (this.addPointList.length === 0) {
-        this.$emit('pointChange', data);
-      } else {
-        const last = this.addPointList[this.addPointList.length - 1];
-        // 如果是重合/连线节点
-        if (point.get('scaleX') !== point.scale) {
-          const value = {
-            ...last,
-            value: {
-              time: this.getXValue(point.nextPoint.left),
-              value: this.getYValue(this.polyline[point.polylineTypeId].position, point.nextPoint.top)
-            }
-          };
-          if (last.left === point.left) {
-            this.addPointList.splice(-1, 1, value);
-          } else {
-            this.addPointList.push(value);
-            const [lastPoint, prePoint, ...list] = JSON.parse(JSON.stringify(this.addPointList)).reverse();
-            if (prePoint.value.time == lastPoint.value.time) {
-              this.addPointList.splice(-2, 1);
-            }
-          }
-        }
-        !point.id.includes('isTitle') && this.removePolyline(point.id);
-        this.$emit('pointOperation', 'increasePointBatch', this.addPointList);
-        this.addPointList = [];
-      }
-    },
-    // 设置批量新增数据
-    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);
-    },
-    /**
-     * @description: 滑动批量新增节点
-     * @param {*} point 拖动的最后一个节点
-     * @param {*} originLeft 拖动的源节点的left值
-     * @param {*} originTop 拖动的源节点的top值
-     * @return {*}
-     */
-    async addPoint(point, originLeft, originTop) {
-      const { xCellWidth, table, originX } = this.propItems;
-      // const addPointSpaceGridNumbers = table.addPointSpaceGridNumbers || [];
-      let addPointSpaceGridNumber = table.addPointSpaceGridNumber || 1;
-
-      let { left, top } = point;
-      const currentLeft = left;
-
-      const startLength = this.addPointList.length;
-      const n = 6; // 拖动范围，在需要增加节点的刻度左右吸入的范围值
-      const spaceWidth = xCellWidth * addPointSpaceGridNumber;
-      const residue = (left - originLeft) % spaceWidth;
-
-      const condition = residue > spaceWidth - n || residue < n;
-
-      if (!point.line2 && left > originLeft && condition) {
-        if (residue > spaceWidth - n) left = left - residue + spaceWidth;
-        if (residue < n) left = left - residue;
-        point.set({
-          left
-        });
-
-        const checkPoints = () => {
-          const PointLens = Math.floor((left - originLeft) / spaceWidth);
-          if (PointLens > 1 && this.addPointList?.length < PointLens) {
-            for (let k = 0; k < PointLens; k++) {
-              if (k > 0) {
-                const curLeft = originLeft + spaceWidth * k;
-                // 判断this.addPointList中的left是否包含curLeft，不包含就说明是漏了
-                const isNoLack = this.addPointList.some(v => v.left === curLeft);
-                if (!isNoLack) {
-                  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));
-                    cloneObj.value.time = this.getXValue(curLeft);
-                    cloneObj.left = curLeft;
-                    this.addPointList.splice(index, 0 , cloneObj);
-                  }
-                }
-              }
-            }
-          }
-        };
-
-        // const i = Math.floor((left - originLeft) / spaceWidth);
-        // 复制点和线
-        if (left > originLeft) {
-          point.line1 && this.removePolyline(point.line1.id);
-          // if (i === 1) {
-            this.addPointList.length == 0 && await 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;
-            points1 && await this.clonePoint(point, [...points1, left, top]);
-            // this.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);
-          }
-          checkPoints();
-        }
-      }
-
-      // 断点相连
-      if (point.nextPoint && left >= point.nextPoint.left - n && top <= point.nextPoint.top + n && top >= point.nextPoint.top - n) {
-        point.set({
-          left: point.nextPoint.get('left'),
-          top: point.nextPoint.get('top'),
-          scaleX: point.scale === 1 ? 2.5 : 0.1,
-          scaleY: point.scale === 1 ? 2.5 : 0.1
-        });
-      } else if (point.nextPoint) {
-        point.set({
-          scaleX: point.scale,
-          scaleY: point.scale
-        });
-      }
-      // 如果往回拖动则删除经过的已存在的节点
-      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) 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
-          });
-          clonedObj.hasControls = clonedObj.hasBorders = false;
-          point.set({
-            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.canvas.renderAll();
-          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: 'pointer',
-        objectCaching: false,
-        selectable: false,
-        evented: false,
-        ...others
-      });
-
-      return line;
-    },
-    showDrapPopup(point) {
-      this.isDropVisible = true;
-      this.dropPos = {
-        left: point.left,
-        top: point.top
-      };
-      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
-      };
-    },
-    removePolyline(id, left, position, polylineIndex) {
-      // 根据id或者idClone删除
-      if (id) {
-        const pointId = left ? 'idClone' : 'id';
-        const point = this.canvas.getObjects().filter(item => item[pointId] === id);
-        if (point && point.length > 0) {
-          point.forEach(v => {
-            if (left && v.left >= left) {
-              this.canvas.remove(v);
-              v.line1 && this.canvas.remove(v.line1);
-            } else 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 => {
-          const isPolyLine = obj.polylineTypeId === polylineTypeId && obj.polylineIndex === polylineIndex;
-          if (obj.id && /_polyline(Point|Line)_/.test(obj.id) && !obj.id.includes('isTitle') && isPolyLine) {
-            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.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>