cnhis-design-vue 2.1.34 → 2.1.36

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

@@ -94,8 +94,10 @@ export default {
 
   watch: {},
 
-  mounted() {
-    this.$nextTick(() => {
+  mounted() {},
+
+  methods: {
+    init() {
       this.drawPolylineTitle();
       this.polylinePointList = [];
       this.polyline.forEach((polylineType, polylineTypeId) => {
@@ -103,10 +105,7 @@ export default {
       });
 
       this.eventStyle.evented && this.createEvent();
-    });
-  },
-
-  methods: {
+    },
     createEvent() {
       this.canvas.on('mouse:up', event => {
         if (event.button === 3) {
@@ -176,7 +175,7 @@ export default {
         ponits: [selectAreaOrigin.left, selectAreaOrigin.top, event.pointer.x, event.pointer.y]
       });
       this.canvas.add(this.selectArea);
-      this.canvas.renderAll();
+      // this.canvas.renderAll();
     },
     // 每一个折线类别
     createPolyline(polylineType, polylineTypeId) {
@@ -246,7 +245,7 @@ export default {
       }
 
       const eventStyle = { selectable: false, evented: false };
-      const types = ['arrow', '+', 'shjs', 'shks', 'cg', 'jxtq'];
+      const types = ['arrow', '+', 'shjs', 'shks', 'cg', 'jxtq', 'qgcg', 'zrhz'];
       leftTitleList.forEach(async (v, i) => {
         const baseTop = canvasHeight - lableMargin[1];
         const top = baseTop - i * lableLineHeight;
@@ -296,7 +295,6 @@ export default {
               scaleX: 1,
               scaleY: 1
             });
-            this.canvas.renderAll();
           }
 
           if (!cloneIconId) {
@@ -307,7 +305,6 @@ export default {
               });
               clonedObj.bringForward();
               this.canvas.add(clonedObj);
-              this.canvas.renderAll();
             });
           }
 
@@ -319,14 +316,14 @@ export default {
           } else {
             this.isDropVisible = false;
           }
-          this.canvas.renderAll();
+          // this.canvas.renderAll();
         });
         // 标题折线点停止拖拽后 更新
         icon.on('moved', () => {
           icon.set({
             id: icon.id.replace('_isTitle', '')
           });
-          this.canvas.renderAll();
+          // this.canvas.renderAll();
           this.removeTitle();
           this.removePolyline(cloneIconId);
 
@@ -356,7 +353,7 @@ export default {
         }
 
         this.canvas.add(text, icon);
-        this.canvas.requestRenderAll();
+        // this.canvas.requestRenderAll();
       });
     },
     // 点移动限制
@@ -429,7 +426,7 @@ export default {
         lines.push(line, text);
       }
       this.canvas.add(...lines);
-      this.canvas.renderAll();
+      // this.canvas.renderAll();
     },
     /**
      * 绘制一条折线
@@ -476,9 +473,9 @@ export default {
         if (points) {
           Object.assign(pointOthers, {
             originLeft: points[0],
-            originTop: points[1]
+            originTop: points[1],
+            time: linePoints.time
           });
-          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);
@@ -514,7 +511,7 @@ export default {
           return v;
         });
         this.canvas.add(...lineList, ...res);
-        this.canvas.requestRenderAll();
+        // this.canvas.requestRenderAll();
       });
 
       this.createAttrVaule('critical', polyline, polylineIndex, polylineType, polylineTypeId);
@@ -568,7 +565,7 @@ export default {
           this.pointMoveLimit(point, false);
           this.pointMoveUpdateLine(point);
           this.addPoint(point);
-          this.canvas.renderAll();
+          // this.canvas.renderAll();
           this.showDrapPopup(point);
         });
         // 折线点停止拖拽后 更新polyline中对应的坐标
@@ -594,9 +591,10 @@ export default {
     },
     // 拖动停止后 设置回调触发方法
     setEmitFunction(point, isInit = false) {
+      const { operable } = this.propItems;
       const { data, x, y } = this.getValue(point);
       Object.assign(data, {
-        value: { time: x, value: y },
+        value: { time: operable.lockMovementX ? point.time : x, value: y },
         isInit
       });
       if (this.addPointList.length === 0) {
@@ -614,8 +612,13 @@ export default {
         }
         this.$emit('pointChange', data);
       } else {
+        this.$nextTick(() => {
+          // 拖动新增节点时默认所有节点可删除
+          this.currentDelPoint = null;
+        });
         const lastPoint = this.addPointList.at(-1);
         const position = this.polyline[point.polylineTypeId].position;
+        const [firstPoint] = this.addPointList;
         // 如果是重合/连线节点
         if (point.get('scaleX') !== point.scale) {
           const addOjb = {
@@ -637,7 +640,7 @@ export default {
           this.repaintPolyline(position, point.polylineIndex);
           return;
         }
-        !point.line2 && this.addPointList.splice(0, 1);
+        !point.line2 && firstPoint.left <= point.originLeft && this.addPointList.splice(0, 1);
         !point.id.includes('isTitle') && this.removePolyline(point.id);
         if (this.addPointList.length > 0) {
           this.$emit('pointOperation', 'increasePointBatch', this.addPointList);
@@ -660,7 +663,7 @@ export default {
      * @param {*} point 拖动的最后一个节点
      * @return {*}
      */
-    async addPoint(point) {
+    addPoint(point) {
       const { xCellWidth, table, originX } = this.propItems;
       // const addPointSpaceGridNumbers = table.addPointSpaceGridNumbers || [];
       let addPointSpaceGridNumber = table.addPointSpaceGridNumber || 1;
@@ -673,7 +676,7 @@ export default {
       const spaceWidth = xCellWidth * addPointSpaceGridNumber;
       const residue = (left - originLeft) % spaceWidth;
 
-      const condition = residue > spaceWidth - n || residue < n;
+      const condition = residue > 0 && (residue > spaceWidth - n || residue < n);
       const conditionNoLine2 = !point.line2 && left > originLeft;
       const conditionHasLine2 = point.line2 && left > originLeft + spaceWidth;
 
@@ -687,13 +690,14 @@ export default {
 
         const checkPoints = () => {
           const PointLens = Math.floor((left - originLeft) / spaceWidth);
-          if (PointLens > 1 && this.addPointList?.length < PointLens) {
-            for (let k = 0; k < PointLens; k++) {
+          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) {
+                const hasPoint = this.addPointList.some(p => Math.abs(p.left - curLeft) <= 0.001);
+                // const hasPoint = this.addPointList.some(v => v.left == curLeft);
+                if (!hasPoint) {
                   let index;
                   const pointObj = this.addPointList.find((v, i) => {
                     if (v.left > curLeft) {
@@ -703,11 +707,16 @@ export default {
                   });
                   if (pointObj) {
                     let cloneObj = JSON.parse(JSON.stringify(pointObj));
+                    const len = ~~((pointObj.left - (curLeft - spaceWidth)) / spaceWidth);
+                    const prePoint = this.addPointList[index - 1] || pointObj;
+                    const spaceHeight = (pointObj.top - prePoint.top) / len;
+                    const position = this.polyline[point.polylineTypeId].position;
+                    cloneObj.top = prePoint.top + spaceHeight;
                     cloneObj.value.time = this.getXValue(curLeft);
+                    cloneObj.value.value = this.getYValue(position, cloneObj.top);
                     cloneObj.left = curLeft;
-                    // 补充的节点会和滑动的线条对应不上
-                    // await this.clonePoint(point, [curLeft, cloneObj.top, cloneObj.left, cloneObj.top])
                     this.addPointList.splice(index, 0, cloneObj);
+                    this.clonePoint(point, [prePoint.left, prePoint.top, cloneObj.left, cloneObj.top]);
                   }
                 }
               }
@@ -720,18 +729,20 @@ export default {
         if (conditionNoLine2 || conditionHasLine2) {
           // point.line1 && this.removePolyline(point.line1.id);
           setPointLineColor(point, 'transparent', conditionHasLine2);
-          this.addPointList.length == 0 && (await this.clonePoint(point, [point.line1 ? point.line1.x1 : originLeft, point.line1 ? point.line1.y1 : originTop, originLeft, originTop]));
+          this.addPointList.length == 0 && this.clonePoint(point, [point.line1 ? point.line1.x1 : originLeft, point.line1 ? point.line1.y1 : originTop, originLeft, originTop]);
           if (this.addPointList.every(v => v.left !== left)) {
             // const points1 = i === 1 ? [originLeft, originTop] : point.prePoints;
             const points1 = this.addPointList.length == 0 ? [originLeft, originTop] : point.prePoints;
-            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);
+            if (points1) {
+              // this.setAddPointList(point);
+              // 调用上面方法就会导致线段绘制失败，目前还不知道为啥子
+              const { data, x, y } = this.getValue(point);
+              data.value = { time: x, value: y };
+              data.left = left;
+              data.top = top;
+              this.addPointList.push(data);
+              this.clonePoint(point, [...points1, left, top]);
+            }
           }
           checkPoints();
         }
@@ -828,15 +839,12 @@ export default {
             scaleY: point.scale
           });
           clonedObj.hasControls = clonedObj.hasBorders = false;
-          point.set({
-            prePoints: [point.left, point.top]
-          });
+          point.prePoints = [point.left, point.top];
           const line = this.drawLine([...points], { evented, selectable, ...lineAttr, polylineIndex, polylineTypeId, lineIndex });
           clonedObj.line1 = line;
           this.canvas.sendBackwards(line);
           clonedObj.bringForward();
           this.canvas.add(clonedObj);
-          this.canvas.renderAll();
           resolve(clonedObj);
         });
       });

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

@@ -34,15 +34,14 @@ export default {
       };
     }
   },
-  mounted() {
-    this.$nextTick(() => {
+  mounted() {},
+  methods: {
+    init() {
       this.topScaleValue(this.templateData.top);
       this.rightScaleValue(this.templateData.right);
       this.leftScaleValue(this.templateData.left);
-      this.canvas.renderAll();
-    });
-  },
-  methods: {
+      // this.canvas.renderAll();
+    },
     // x轴时间刻度绘制
     topScaleValue(obj) {
       const { originX, originY, xCellWidth, spaceHeight } = this.propItems;

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

@@ -47,9 +47,11 @@ export default {
     'templateData.other': {
       handler(value) {
         if (value) {
-          this.removeOther();
-          this.drawTextDataGroup(value);
-          this.canvas.renderAll();
+          this.$nextTick(() => {
+            this.removeOther();
+            this.drawTextDataGroup(value);
+            // this.canvas.renderAll();
+          });
         }
       },
       deep: true
@@ -67,11 +69,7 @@ export default {
       activeEvent: null // 当前可右键活动的对象
     };
   },
-  mounted() {
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
+  mounted() {},
   computed: {
     girdLineStyle() {
       return Object.assign({}, defaultVaule.borderStyle, this.templateData.borderStyle || {});
@@ -94,7 +92,7 @@ export default {
       this.templateData.other && this.drawTextDataGroup(this.templateData.other);
       this.eventStyle.evented && this.createEvent();
       this.drawBorder();
-      this.canvas.renderAll();
+      // this.canvas.renderAll();
       this.templateData.bottom && this.drawBottomTextDataGroup(this.templateData.bottom);
     },
     drawBorder() {
@@ -238,9 +236,11 @@ export default {
               index: i,
               type: 'colList',
               id: `${index}_${i}_other_${Date.now()}`,
+              name: v.value,
               ...this.eventStyle
             });
             text.hasControls = text.hasBorders = false;
+            this.setPopup(text);
             textList.push(text);
           });
         }
@@ -287,15 +287,25 @@ export default {
               index: i,
               type: 'list',
               id: `${index}_${i}_other_${Date.now()}`,
+              name: v.value,
               ...this.eventStyle
             });
             text.hasControls = text.hasBorders = false;
+            this.setPopup(text);
             textList.push(text);
           }
         });
       });
       this.canvas.add(...textList);
     },
+    setPopup(point) {
+      point.on('mouseover', () => {
+        this.showDrapPopup(point, true);
+      });
+      point.on('mouseout', () => {
+        this.isDropVisible = false;
+      });
+    },
     // 判断当前时间是否超出网格区域
     isLimit(value) {
       const { xScaleList } = this.propItems;
@@ -338,9 +348,32 @@ export default {
       const lineHeightText = (obj.style?.fontSize || 12) + 2;
       const lineHeightImg = (obj.iconStyle?.height || 12) + 2;
       const lineHeightSeq = (obj.seqStyle?.circle?.radius || 9) * 2 + 2;
+      const addCanvas = point => {
+        point.hasControls = point.hasBorders = false;
+        this.pointEvent(point);
+        this.canvas.add(point);
+        // this.canvas.requestRenderAll();
+      };
+      const setTop = (lineHeight, i, condition) => {
+        if (!~condition.limitIndex) {
+          condition.y += i === 0 ? lineHeight / 2 : lineHeight;
+          if (condition.y >= canvasHeight - lineHeight / 2) {
+            condition.limitIndex++;
+            if (condition.limitIndex === 0) {
+              condition.y = baseYLimit;
+              condition.y -= lineHeight / 2;
+            }
+          }
+        } else {
+          condition.y -= lineHeight;
+        }
+        return condition.y;
+      };
       obj.list.forEach((item, index) => {
-        let limitIndex = -1; // 标志点是否往上排列的标志，大于-1则表示需要往上排列
-        let y = baseY;
+        const condition = {
+          limitIndex: -1, // 标志点是否往上排列的标志，大于-1则表示需要往上排列
+          y: baseY
+        };
         const x = this.cumputedX(item[0]);
         if (this.isLimit(item[0])) {
           item[1].forEach(async (v, i) => {
@@ -354,21 +387,7 @@ export default {
               name: v.name,
               type: 'mark'
             };
-            function setTop(lineHeight) {
-              if (!~limitIndex) {
-                y += i === 0 ? lineHeight / 2 : lineHeight;
-                if (y >= canvasHeight - lineHeight / 2) {
-                  limitIndex++;
-                  if (limitIndex === 0) {
-                    y = baseYLimit;
-                    y -= lineHeight / 2;
-                  }
-                }
-              } else {
-                y -= lineHeight;
-              }
-              common.top = y;
-            }
+
             const eventStyle = !this.eventStyle.evented
               ? {
                   lockMovementX: true,
@@ -376,14 +395,8 @@ export default {
                 }
               : {};
 
-            const addCanvas = async point => {
-              point.hasControls = point.hasBorders = false;
-              this.pointEvent(point);
-              this.canvas.add(point);
-              this.canvas.requestRenderAll();
-            };
             if (this.isObject(v) && !v.value) {
-              setTop(lineHeightImg);
+              common.top = setTop(lineHeightImg, i, condition);
               const option = Object.assign({}, obj.iconStyle || {}, v || {}, {
                 ...common,
                 ...eventStyle
@@ -399,7 +412,7 @@ export default {
               addCanvas(img);
             } else if (v.value) {
               if (v.seq) {
-                setTop(lineHeightSeq);
+                common.top = setTop(lineHeightSeq, i, condition);
                 // 标记增加序号
                 const circle = await this.createPoint('circle', {
                   ...common,
@@ -421,7 +434,7 @@ export default {
                 });
                 addCanvas(group);
               } else {
-                setTop(lineHeightText);
+                common.top = setTop(lineHeightText, i, condition);
                 const text = new this.fabric.Text(String(v.value), {
                   ...defaultVaule.textStyle,
                   ...obj.style,
@@ -437,17 +450,12 @@ export default {
       // this.canvas.add(...textList);
     },
     pointEvent(point) {
-      point.on('mouseover', () => {
-        this.showDrapPopup(point, true);
-      });
-      point.on('mouseout', () => {
-        this.isDropVisible = false;
-      });
+      this.setPopup(point);
       // 移动中 实时更新相关联的线的坐标
       if (this.eventStyle.evented) {
         point.on('moving', () => {
           this.moveLimit(point);
-          this.canvas.renderAll();
+          // this.canvas.renderAll();
           this.showDrapPopup(point);
         });
         point.on('moved', () => {

package/packages/fabric-chart/src/mixins/draw.js

@@ -50,10 +50,6 @@ export default {
         ...lineStyle
       });
     },
-    // 绘制点
-    // drawPoint(points, style) {
-    //     console.log(points, style);
-    // },
     // 绘制文本区
     drawTextGroup(rectStyle, fontStyle, groupStyle) {
       const rect_style = this.isObject(rectStyle)
@@ -115,7 +111,8 @@ export default {
       // });
       // fabric.loadSVGFromURL的工作方式相同，只不过您传递的是包含URL而不是SVG内容的字符串
       return new Promise((resolve, reject) => {
-        const svg = document.querySelector(iconClassName).querySelector('svg');
+        const svg = document?.querySelector(iconClassName)?.querySelector('svg');
+        if (!svg) reject('图片转换svg失败！');
         svg.setAttribute('version', 1.1);
         svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
         svg.style.color = others.color || '#000';
@@ -291,6 +288,29 @@ export default {
             scale: 1,
             ...data
           });
+        case 'qgcg': {
+          const { width, height } = data;
+          obj1 = new this.fabric.Line([0, height / 2, width, height / 2], {
+            strokeWidth: 1,
+            ...data
+          });
+          obj2 = this.createCircleBorder({ ...data, width: width / 2 });
+          return new this.fabric.Group([obj2, obj1], {
+            ...data
+          });
+        }
+        case 'zrhz': {
+          const { width, height } = data;
+          obj1 = new this.fabric.Line([0, height / 2, width, height / 2], {
+            strokeWidth: 1,
+            ...data
+          });
+          obj2 = this.createCircleBorder({ ...data, width: width / 2 });
+          const obj3 = this.createCircleBorder({ ...data, width: width / 3 });
+          return new this.fabric.Group([obj2, obj3, obj1], {
+            ...data
+          });
+        }
         case 'cg':
           obj1 = this.ceateLineArrow(data);
           obj2 = this.createCircleBorder(data);

package/packages/fabric-chart/src/mixins/fabricCommon.js

@@ -1,5 +1,3 @@
-import { v } from 'vxe-table';
-
 export default {
   name: 'fabric-common',
   inject: ['$canvas', '$group', '$propItems', '$fabric'],
@@ -20,6 +18,18 @@ export default {
       return this.$propItems();
     }
   },
+  watch: {
+    canvas: {
+      handler(value) {
+        if (value) {
+          this.$nextTick(() => {
+            this.init?.();
+          });
+        }
+      },
+      immediate: true
+    }
+  },
   methods: {
     // 根据x轴坐标获取对应的时间点
     // getXValue(left) {
@@ -70,7 +80,7 @@ export default {
       !~index && (index = xScaleCellList.length);
       const obj = xScaleCellList[index - 1];
       return obj.x + (time - obj.time) / obj.xScaleTime;
-    },
+    }
     // // 根据时间戳计算x轴坐标
     // cumputedX(value) {
     //   if (!value) {
@@ -82,4 +92,4 @@ export default {
     //   return originX + (time - minScale) * xScaleCell;
     // },
   }
-};
+};