cnhis-design-vue 0.1.40 → 0.1.42

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

@@ -9,7 +9,7 @@
 <script>
 import FabricCommon from '../mixins/fabricCommon';
 import draw from '../mixins/draw';
-import polylineCommon from '../mixins/polylineCommon';
+import eventCommon from '../mixins/eventCommon';
 import MouseRightClick from '../components/MouseRightClick';
 import DropPopup from '../components/DropPopup';
 import defaultVaule from '../const/defaultVaule';
@@ -20,7 +20,7 @@ const rightClickNode = [
 ];
 export default {
   name: 'fabric-polylines',
-  mixins: [FabricCommon, draw, polylineCommon],
+  mixins: [FabricCommon, draw, eventCommon],
   inject: ['$propItems'],
   props: {
     polyline: {
@@ -54,9 +54,14 @@ export default {
       activeEvent: null, // 当前可右键活动的对象
       addPointList: [], // 快速新增的节点list
       isSelectArea: false, // 是否正在选区
-      selectArea: null, // 选区矩形对象
+      selectArea: null // 选区矩形对象
     };
   },
+  computed: {
+    eventStyle() {
+      return this.propItems.eventStyle;
+    }
+  },
 
   watch: {
     // polyline() {
@@ -80,7 +85,7 @@ export default {
         this.createPolyline(polylineType, polylineTypeId);
       });
 
-      this.createEvent();
+      this.eventStyle.evented && this.createEvent();
     });
   },
 
@@ -167,12 +172,18 @@ export default {
       this.polylineList.forEach((item, index) => {
         item.dataList.forEach((v, i) => {
           // 配置是否可拖动标题图标批量增加-
-          const isAdd = v.list.length ? !v.list.some(k => {
-            return k.time && new Date(k.time).getTime() >= minTime && new Date(k.time).getTime() < xScaleCellList[1].time;
-          }) : true;
+          const isAdd = v.list.length
+            ? !v.list.some(k => {
+                return k.time && new Date(k.time).getTime() >= minTime && new Date(k.time).getTime() < xScaleCellList[1].time;
+              })
+            : true;
           let rightLimit = endX;
           const point = v.list.find(k => k.time && new Date(k.time).getTime() >= xScaleCellList[1].time && new Date(k.time).getTime() <= maxTime);
-          const limitObj = point && JSON.parse(JSON.stringify(this.propItems.xScaleCellList)).reverse().find(k => new Date(point.time).getTime() > k.time);
+          const limitObj =
+            point &&
+            JSON.parse(JSON.stringify(this.propItems.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({
@@ -185,37 +196,41 @@ export default {
             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
-            }
-          }));
+          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
-            }
-          }));
+          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 eventStyle = { selectable: false, evented: false };
       leftTitleList.forEach(async (v, i) => {
         const baseTop = canvasHeight - lableMargin[1];
         const top = baseTop - i * lableLineHeight;
@@ -229,10 +244,10 @@ export default {
           top,
           originY: 'center',
           ...defaultVaule.style,
-          id: pointId,
+          id: pointId
         });
-        const isOriginXCenter = v.type === 'arrow' || v.type === '+' || v.type === 'shjs' || v.type === 'shks'|| v.type === 'cg';
-        
+        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,
@@ -245,7 +260,7 @@ export default {
           id: pointId,
           polylineTypeId: v.polylineTypeId,
           polylineIndex: v.polylineIndex,
-          ...(v.isAdd ? {} : eventStyle),
+          ...(v.isAdd && this.eventStyle.evented ? {} : eventStyle),
           rightLimit: v.rightLimit || ''
         };
         let ele;
@@ -254,7 +269,7 @@ export default {
         }
         const icon = await this.createPoint(v.type, {
           ele: ele || '',
-          ...option,
+          ...option
         });
         icon.hasControls = icon.hasBorders = false;
         let originTop = top;
@@ -264,15 +279,15 @@ export default {
             icon.clone(clonedObj => {
               cloneIconId = '_polylinePoint_temp_' + new Date().getTime();
               clonedObj.set({
-                id: cloneIconId, // 此id必须，用于remove节点的时候
+                id: cloneIconId // 此id必须，用于remove节点的时候
               });
               clonedObj.bringForward();
               this.canvas.add(clonedObj);
               this.canvas.renderAll();
             });
           }
-          
-          icon.set({ originX: 'center'});
+
+          icon.set({ originX: 'center' });
           this.moveLimit(icon);
           icon.left >= originX && icon.left < originX + 5 && (originTop = icon.top);
           if (icon.left >= originX) {
@@ -291,7 +306,7 @@ export default {
           this.canvas.renderAll();
           this.removeTitle();
           this.removePolyline(cloneIconId);
-          
+
           if (icon.id.includes('_polylinePoint_') && this.isDropVisible) {
             this.isDropVisible = false;
             if (icon.left >= originX) {
@@ -300,7 +315,7 @@ export default {
               this.$emit('pointOperation', 'increasePointBatch', this.addPointList);
               this.addPointList = [];
             }
-          } 
+          }
           this.removePolyline(icon.id);
           // 重绘折线标题
           this.drawPolylineTitle();
@@ -333,7 +348,53 @@ export default {
         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;
+    },
+    // 创建危急值
+    createCritical(polyline, polylineIndex, polylineType, polylineTypeId) {
+      const { critical = null, list } = polyline;
+      if (!critical?.max && !critical?.min) return;
+
+      const { originX, endX } = this.propItems;
+      const isMax = critical?.max?.value && list.some(v => +v.value >= +critical.max.value && this.isLimit(v.time));
+      const isMin = critical?.min?.value && list.some(v => +v.value <= +critical.min.value && this.isLimit(v.time));
+      const lines = [];
+      
+      const drawLine = ({ value, lineStyle }) => {
+        const top = this.cumputedY(polylineType, +value, polylineTypeId);
+        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(critical.max);
+        const text = drawText(critical.max, line.top);
+        line.text = text;
+        lines.push(line, text);
+      }
+      if (isMin) {
+        const line = drawLine(critical.min);
+        const text = drawText(critical.min, line.top);
+        line.text = text;
+        lines.push(line, text);
+      }
+      this.canvas.add(...lines);
+      this.canvas.renderAll();
     },
     /**
      * 绘制一条折线
@@ -344,51 +405,42 @@ export default {
      * @param {polylineIndex} 当前折线 index
      */
     drawPolyline(polyline, polylineIndex, polylineType, polylineTypeId) {
+      const { originY, endY } = this.propItems;
       const { pointAttr, lineAttr } = polyline;
       this._iconClassName = polyline.type === 'img' && pointAttr.iconClassName ? pointAttr.iconClassName : '';
 
       const list = polyline.list;
       const pointList = [];
       let lineList = [];
-      const minMinute = Math.min(...this.propItems.xScaleList);
-      const maxMinute = Math.max(...this.propItems.xScaleList);
 
       list.forEach((linePoints, index) => {
         // 当前点
         let points = null;
-        if (linePoints.time && linePoints.value) {
+        let isInit = false;
+        if (linePoints.time && (linePoints.value || linePoints.value == 0)) {
           const x = this.cumputedX(linePoints.time);
           const y = this.cumputedY(polylineType, linePoints.value, polylineTypeId);
-          const minute = new Date(linePoints.time).getTime();
-          if (minute >= minMinute && minute <= maxMinute) points = [x, y];
+          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 (nextPoints?.time && nextPoints?.value) {
+        if (nextPoints?.time && (nextPoints.value || nextPoints.value == 0)) {
           const nextX = this.cumputedX(nextPoints.time);
           const nextY = this.cumputedY(polylineType, nextPoints.value, polylineTypeId);
-          const nextMinute = new Date(nextPoints.time).getTime();
-          if (nextMinute > minMinute && nextMinute <= maxMinute) nextPoint = [nextX, nextY];
+          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;
+        line = points && nextPoint ? this.drawLine([...points, ...nextPoint], { polylineIndex, lineIndex: index, ...lineAttr }) : null;
         previousLine = lineList[index - 1];
-        // const customData = linePoints.find(v => this.isObject(v)) || '';
         const pointOthers = { polylineTypeId, polylineIndex, pointIndex: index, ...pointAttr, lineAttr };
-        if (previousLine) {
-          point = points && this.drawPoint(previousLine.get('x2'), previousLine.get('y2'), previousLine, line, polyline.type, pointOthers);
-        } else {
-          if (points) {
-            point = this.drawPoint(...points, null, line, polyline.type, pointOthers);
-          }
+        if (points) {
+          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);
@@ -407,9 +459,11 @@ export default {
         this.canvas.add(...lineList, ...res);
         this.canvas.requestRenderAll();
       });
+
+      this.createCritical(polyline, polylineIndex, polylineType, polylineTypeId);
     },
     // 计算y轴坐标
-    cumputedY(polylineType, linePointY, polylineTypeId) { 
+    cumputedY(polylineType, linePointY, polylineTypeId) {
       const yScaleCell = polylineTypeId == 1 ? this.propItems.yScaleCellLeft : this.propItems.yScaleCellRight; // polylineTypeId值为1表示是右边单位的折线数据，即℃
       const yCellUnit = linePointY - Math.min(...polylineType.list);
       return this.propItems.endY - yScaleCell * yCellUnit;
@@ -421,9 +475,9 @@ export default {
      * @param {type} 折线点类型
      * @param {others} 参数 polylineIndex | pointIndex | ...polyline.pointAttr
      */
-    async drawPoint(left, top, line1, line2, type, others) {
+    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);
+      const ele = this._iconClassName && (await this.createImage(this._iconClassName, others));
       let point = await this.createPoint(type, {
         id: pointId,
         left: left,
@@ -431,7 +485,12 @@ export default {
         ele: ele || '',
         ...defaultVaule.pointStyle,
         ...others,
-        ...this.propItems.eventStyle
+        ...(!this.eventStyle.evented
+          ? {
+              lockMovementX: true,
+              lockMovementY: true
+            }
+          : {})
       });
       point.hasControls = point.hasBorders = false;
       line1 && (point.line1 = line1);
@@ -443,26 +502,35 @@ export default {
         this.isDropVisible = false;
       });
       // 折线点移动中 实时更新相关联的线的坐标
-      point.on('moving', () => {
-        this.pointMoveLimit(point);
-        this.pointMoveUpdateLine(point);
-        this.addPoint(point, left, top);
-        this.canvas.renderAll();
-        this.showDrapPopup(point);
-      });
-      // 折线点停止拖拽后 更新polylineList中对应的坐标
-      point.on('moved', () => {
-        if (point && point.id.includes('_polylinePoint_')) {
-          this.isDropVisible = false;
-          this.setEmitFunction(point);
-        }
-      });
+      if (this.eventStyle.evented) {
+        point.on('moving', () => {
+          this.pointMoveLimit(point);
+          this.pointMoveUpdateLine(point);
+          this.addPoint(point, left, top);
+          this.canvas.renderAll();
+          this.showDrapPopup(point);
+        });
+        // 折线点停止拖拽后 更新polylineList中对应的坐标
+        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) {
+    setEmitFunction(point, isInit = false) {
       const { data, x, y } = this.getValue(point);
-      data.value = { time: x, value: y };
+      Object.assign(data, {
+        value: { time: x, value: y },
+        isInit
+      });
       if (this.addPointList.length === 0) {
         this.$emit('pointChange', data);
       } else {
@@ -498,12 +566,12 @@ export default {
      * @param {*} originLeft 拖动的源节点的left值
      * @param {*} originTop 拖动的源节点的top值
      * @return {*}
-     */    
+     */
     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;
 
@@ -511,7 +579,7 @@ export default {
       const n = 5; // 拖动范围，在需要增加节点的刻度左右吸入的范围值
       const spaceWidth = xCellWidth * addPointSpaceGridNumber;
       const residue = (left - originLeft) % spaceWidth;
-     
+
       const condition = residue > spaceWidth - n || residue < n;
 
       if (!point.line2 && left > originLeft && condition) {
@@ -551,23 +619,23 @@ export default {
           left: point.nextPoint.get('left'),
           top: point.nextPoint.get('top'),
           scaleX: point.scale === 1 ? 1.5 : 0.1,
-          scaleY: point.scale === 1 ? 1.5 : 0.1,
+          scaleY: point.scale === 1 ? 1.5 : 0.1
         });
       } else if (point.nextPoint) {
         point.set({
           scaleX: point.scale,
-          scaleY: 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);
+        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],
+            prePoints: [this.addPointList[endLength - 1].left, this.addPointList[endLength - 1].top]
           });
         }
       }
@@ -575,7 +643,7 @@ export default {
     clonePoint(point, points) {
       let evented, selectable, lineIndex, polylineIndex, lineAttr, polylineTypeId;
       evented = selectable = false;
-      lineAttr = {...point.lineAttr};
+      lineAttr = { ...point.lineAttr };
       lineIndex = point.pointIndex;
       polylineIndex = point.polylineIndex;
       polylineTypeId = point.polylineTypeId;
@@ -587,11 +655,11 @@ export default {
           idClone: 'increasePointBatch',
           id: '_polylinePoint_' + new Date().getTime(), // 此id必须，用于remove节点的时候
           polylineTypeId,
-          polylineIndex: point.polylineIndex,
+          polylineIndex: point.polylineIndex
         });
         clonedObj.hasControls = clonedObj.hasBorders = false;
         point.set({
-          prePoints: [point.left, point.top],
+          prePoints: [point.left, point.top]
         });
         const line = this.drawLine([...points], { evented, selectable, ...lineAttr, polylineIndex, polylineTypeId, lineIndex });
         clonedObj.line1 = line;
@@ -648,9 +716,9 @@ export default {
       this.dropVal = {
         title: data.title,
         list: [
-          {id: '11', name: '时间', value: x},
-          {id: '22', name: '值', value: Math.round(y)},
-        ],
+          { id: '11', name: '时间', value: x },
+          { id: '22', name: '值', value: Math.round(y) }
+        ]
       };
     },
     // 折线点移动时 setCoords()方法手动更新相关联的线坐标
@@ -666,9 +734,6 @@ export default {
     },
     // 打开右键菜单
     openRightModal(event) {
-      if (!this.propItems.eventStyle.evented) {
-        return;
-      }
       this.rightPos = {
         clientX: event.e.clientX || event.e.pageX,
         clientY: event.e.clientY || event.e.pageY
@@ -694,7 +759,7 @@ export default {
       const id = this._currentPointId;
       this._currentPointId = '';
       const { left, top } = this._active;
-      let data = id ? this.getDataById(id) : this.getValue({ left, top});
+      let data = id ? this.getDataById(id) : this.getValue({ left, top });
       this.$emit('pointOperation', type, data);
     },
     getDataById(id) {
@@ -704,7 +769,7 @@ export default {
       const value = data?.dataList?.[lineIndex]?.list?.[pointIndex]?.data || '';
       return {
         title: data?.dataList?.[lineIndex].title || '',
-        position: data.position,  
+        position: data.position,
         dataIndex: lineIndex,
         pointIndex: pointIndex,
         data: value
@@ -716,7 +781,7 @@ export default {
         const pointId = left ? 'idClone' : 'id';
         const point = this.canvas.getObjects().filter(item => item[pointId] === id);
         if (point && point.length > 0) {
-          point.forEach( v => {
+          point.forEach(v => {
             if (left && v.left >= left) {
               this.canvas.remove(v);
               v.line1 && this.canvas.remove(v.line1);
@@ -724,18 +789,19 @@ export default {
               this.canvas.remove(v);
               v.line1 && this.canvas.remove(v.line1);
             }
-          })
+          });
         }
         return;
       }
       // 删除一条线
       if ((polylineTypeId === 0 || polylineTypeId) && (polylineIndex === 0 || polylineIndex)) {
         this.canvas.forEachObject(obj => {
-          const isPolyLine = obj.polylineTypeId === polylineTypeId && obj.polylineIndex === polylineIndex
+          const isPolyLine = obj.polylineTypeId === polylineTypeId && obj.polylineIndex === polylineIndex;
           if (obj.id && /_polyline(Point|Line)_/.test(obj.id) && !obj.id.includes('isTitle') && isPolyLine) {
-            this.canvas.remove(obj);
+            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;
@@ -771,12 +837,6 @@ export default {
         this.drawPolyline(this.polylineList[polylineTypeId].dataList[parseInt(dadaIndex)], parseInt(dadaIndex), this.polylineList[polylineTypeId], polylineTypeId);
       }
     }
-  },
-  beforeDestroy() {
-    const upperCanvas = document.querySelector('.upper-canvas');
-    upperCanvas && upperCanvas.removeEventListener('contextmenu', this.addEventListenerContextmenu, true);
-    document.removeEventListener('click', this.addEventListenerClick, true);
-    document.removeEventListener('scroll', this.addEventListenerScroll, true);
   }
 };
 </script>