cnhis-design-vue 2.1.17 → 2.1.18

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

@@ -1,960 +1,960 @@
-<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';
-
-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 };
-      const types = ['arrow', '+', 'shjs', 'shks', 'cg', 'jxtq'];
-      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 = types.includes(v.type);
-        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, polylineTypeId, 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);
-        // 将当条线段以及点层级置顶
-        // 线段不能先置顶，会挡住其他线段上的点
-        // this.canvas.forEachObject(obj => {
-        //   if (this.isOnePolyLine(obj, point.polylineTypeId, point.polylineIndex)) {
-        //     obj.line1 && this.canvas.bringToFront(obj.line1);
-        //     obj.line2 && this.canvas.bringToFront(obj.line2);
-        //   }
-        // });
-        this.canvas.forEachObject(obj => {
-          if (this.isOnePolyLine(obj, point.polylineTypeId, point.polylineIndex)) {
-            this.canvas.bringToFront(obj);
-          }
-        });
-      });
-      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: 'default',
-        // objectCaching: false,
-        selectable: false,
-        evented: false,
-        ...others
-      });
-      // line.hasControls = line.hasBorders = false;
-      // line.on('mouseover', () => {
-      //   // 将当条线段以及点层级置顶
-      //   // 此处有问题，线段定位是斜角形成的整个矩形，会挡住其他点或线段的mouseover事件
-      // });
-
-      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;
-    },
-    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 => {
-          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.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-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';
+
+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 };
+      const types = ['arrow', '+', 'shjs', 'shks', 'cg', 'jxtq'];
+      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 = types.includes(v.type);
+        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, polylineTypeId, 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);
+        // 将当条线段以及点层级置顶
+        // 线段不能先置顶，会挡住其他线段上的点
+        // this.canvas.forEachObject(obj => {
+        //   if (this.isOnePolyLine(obj, point.polylineTypeId, point.polylineIndex)) {
+        //     obj.line1 && this.canvas.bringToFront(obj.line1);
+        //     obj.line2 && this.canvas.bringToFront(obj.line2);
+        //   }
+        // });
+        this.canvas.forEachObject(obj => {
+          if (this.isOnePolyLine(obj, point.polylineTypeId, point.polylineIndex)) {
+            this.canvas.bringToFront(obj);
+          }
+        });
+      });
+      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: 'default',
+        // objectCaching: false,
+        selectable: false,
+        evented: false,
+        ...others
+      });
+      // line.hasControls = line.hasBorders = false;
+      // line.on('mouseover', () => {
+      //   // 将当条线段以及点层级置顶
+      //   // 此处有问题，线段定位是斜角形成的整个矩形，会挡住其他点或线段的mouseover事件
+      // });
+
+      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;
+    },
+    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 => {
+          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.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>