cnhis-design-vue 2.1.34 → 2.1.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cnhis-design-vue",
-  "version": "2.1.34",
+  "version": "2.1.35",
   "description": "前端业务UI库",
   "keyword": "cnhis-design-vue vue cnhis",
   "homepage": "http://dv.cnhis.com/",
@@ -76,6 +76,7 @@
     "eslint": "^6.8.0",
     "eslint-plugin-vue": "^6.2.2",
     "filemanager-webpack-plugin": "^2.0.5",
+    "git-flow": "^0.2.0",
     "highlight.js": "^10.7.2",
     "husky": "^4.3.7",
     "less": "^3.9.0",

package/packages/big-table/src/components/AutoLayoutButton.vue

@@ -177,12 +177,12 @@ export default {
           <a-icon type="more" style="cursor: pointer;" />
           <a-menu slot="overlay">
             {this.hideList.map((b, j) => {
-              return (
+              return b ? (
                 <a-menu-item key={b.sid} class="c_dropdown-btn" on-click={e => this.clickBtn(row, b, index, e.domEvent, j)}>
                   {this.getBtnIcon(b)}
                    {b.showStyle === 'only_icon' ? '' : this.handleName(b)}
                 </a-menu-item>
-              );
+              ): null;
             })}
           </a-menu>
         </a-dropdown>
@@ -238,7 +238,7 @@ export default {
         // 展示的按钮宽度和加上“更多按钮”的宽度大于容器的宽度，showList 最后一个按钮移动到 hideList
         if(this.hideList.length > 0 && (showBtnListWidth + 15 > wrapWidth)){
             let t = this.showList.pop();
-            this.hideList.unshift(t);
+            t && this.hideList.unshift(t);
         }
     },
 

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

@@ -3,11 +3,6 @@
     <component ref="canvasEle" :is="`FabricCanvas${templateData.type || ''}`" :id="id" :templateData="templateData" v-if="rendercanvas">
       <template v-if="templateData.type">
         <fabric-grid></fabric-grid>
-        <fabric-top2 :templateData="templateData"></fabric-top2>
-        <fabric-left2 :templateData="templateData"></fabric-left2>
-        <fabric-right2 :templateData="templateData"></fabric-right2>
-        <fabric-bottom2 :templateData="templateData"></fabric-bottom2>
-        <fabric-center2 :other="templateData.other" :polyline="templateData.left.leftYScalevalue" v-on="$listeners" @pointOperation="pointOperation"></fabric-center2>
       </template>
 
       <template v-else>
@@ -29,17 +24,11 @@
  */
 import create from '@/core/create';
 import FabricCanvas from './fabric-chart/FabricCanvas';
-import FabricCanvas2 from './fabric-chart2/FabricCanvas';
 import FabricPolylines from './fabric-chart/FabricPolylines';
 import FabricGrid from './FabricGrid';
 import FabricTextGroup from './fabric-chart/FabricTextGroup';
 import FabricScaleValue from './fabric-chart/FabricScaleValue';
 import FabricLines from './fabric-chart/FabricLines';
-import FabricTop2 from './fabric-chart2/FabricTop';
-import FabricLeft2 from './fabric-chart2/FabricLeft';
-import FabricRight2 from './fabric-chart2/FabricRight';
-import FabricBottom2 from './fabric-chart2/FabricBottom';
-import FabricCenter2 from './fabric-chart2/FabricCenter';
 import { isObject } from './mixins/type';
 
 export default create({
@@ -57,17 +46,11 @@ export default create({
   },
   components: {
     FabricCanvas,
-    FabricCanvas2,
     FabricGrid,
     FabricTextGroup,
     FabricPolylines,
     FabricScaleValue,
     FabricLines,
-    FabricTop2,
-    FabricLeft2,
-    FabricRight2,
-    FabricBottom2,
-    FabricCenter2
   },
   computed: {
     polylines() {

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

@@ -5,16 +5,10 @@ export default {
   name: 'fabric-grid',
   mixins: [fabricCommon, draw],
   data() {
-    return {
-    };
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initGrid();
-    });
+    return {};
   },
   methods: {
-    initGrid() {
+    init() {
       // 主表格
       this.createGrid(this.propItems.originY, this.propItems.endY, this.propItems.gridYNumber, this.propItems.yCellHeight);
 
@@ -22,7 +16,6 @@ export default {
       if (!this.propItems.type) {
         this.createGrid(0, this.propItems.endYTop, this.propItems.gridYnumberTop, this.propItems.yCellHeightTop);
       }
-      
     },
     createGrid(originY, endY, gridYNumber, yCellHeight) {
       const yList = [];
@@ -63,7 +56,7 @@ export default {
       });
       this.canvas.add(group);
       this.canvas.sendToBack(group);
-      this.canvas.renderAll();
+      // this.canvas.renderAll();
     }
   },
   render(h) {

package/packages/fabric-chart/src/components/TimeScaleValue.vue

@@ -49,22 +49,23 @@ export default {
     };
   },
   mounted() {
-    this.$nextTick(() => {
-      setTimeout(() => {
-        this.init();
-      }, 0);
-    });
+    this._timer = setInterval(() => {
+      if (document.readyState === 'complete') {
+        this.initDoc();
+        clearInterval(this._timer);
+      }
+    }, 500);
   },
   methods: {
-    init() {
+    initDoc() {
       // this.to = this.templateData.top?.xScalevalue?.to || 'body';
       const { xScalevalue } = this.$attrs.templateData.top || {};
       const { canvasWidth, spaceHeight, xCellWidth } = this.propItems;
       this.cFabricChart = document.querySelector('.c-fabric-chart');
       // this.bodyHeight = document.body.getBoundingClientRect().height;
-      this.top = this.cFabricChart.getBoundingClientRect().top;
+      this.top = this.cFabricChart?.getBoundingClientRect()?.top || 0;
       this.popupStyle = {
-        left: `${this.cFabricChart.getBoundingClientRect().left}px`,
+        left: `${this.cFabricChart?.getBoundingClientRect()?.left || 0}px`,
         top: `${xScalevalue?.popupTop || 0}px`,
         width: `${canvasWidth}px`,
         height: `${spaceHeight}px`,
@@ -88,6 +89,7 @@ export default {
     }
   },
   beforeDestroy() {
+    this._timer && clearInterval(this._timer);
     window.removeEventListener('scroll', this.scroll, true);
   }
 };

package/packages/fabric-chart/src/const/defaultVaule.js

@@ -1,59 +1,59 @@
-const data = {
-  style: {
-    evented: false,
-    selectable: false
-  },
-  rectStyle: {
-    fill: 'transparent',
-    stroke: '#999',
-    strokeWidth: 1
-  },
-  textStyle: {
-    fontFamily: '微软雅黑',
-    fontSize: 12,
-    fill: '#000',
-    lineHeight: 1
-  },
-  borderStyle: {
-    stroke: '#999',
-    strokeWidth: 1,
-    selectable: false,
-    evented: false
-  },
-  // 折线图中的点
-  pointStyle: {
-    fill: '#ffffff', // 填充色
-    stroke: '#000000', // 描边色
-    originX: 'center',
-    originY: 'center'
-  },
-  // 折线图中的线
-  lineStyle: {
-    stroke: '#000', // 描边色
-    strokeWidth: 1, // 描边宽度
-    originX: 'center',
-    originY: 'center'
-  },
-  topSpaceHeight: 10, // templateData.top.spaceHeight
-  topSpaceGridNumber: 3, // templateData.top.xScalevalue.spaceGridNumber
-  leftSpaceGridNumber: 2, // templateData.left.leftYScalevalue.spaceGridNumber
-  rightSpaceGridNumber: 2, // templateData.right.rightYScalevalue.spaceGridNumber
-  topTotal: {
-    title: '总量',
-    width: 0,
-    style: {
-      fontFamily: '微软雅黑',
-      fontSize: 12,
-      fill: '#000',
-      lineHeight: 1
-    }
-  },
-  criticalStyle: { // 危急值样式
-    stroke: 'purple', // 颜色 默认 #999
-    strokeWidth: 1, // 线宽 默认 1
-    strokeDashArray: [0, 0] // 实线设置 默认[0, 0]
-  },
-  bottomNumberLeftSpace: 10 // 底部标记的序号与标记之间的距离
-};
-
-export default data;
+const data = {
+  style: {
+    evented: false,
+    selectable: false
+  },
+  rectStyle: {
+    fill: 'transparent',
+    stroke: '#999',
+    strokeWidth: 1
+  },
+  textStyle: {
+    fontFamily: '微软雅黑',
+    fontSize: 12,
+    fill: '#000',
+    lineHeight: 1
+  },
+  borderStyle: {
+    stroke: '#999',
+    strokeWidth: 1,
+    selectable: false,
+    evented: false
+  },
+  // 折线图中的点
+  pointStyle: {
+    fill: '#ffffff', // 填充色
+    stroke: '#000000', // 描边色
+    originX: 'center',
+    originY: 'center'
+  },
+  // 折线图中的线
+  lineStyle: {
+    stroke: '#000', // 描边色
+    strokeWidth: 1, // 描边宽度
+    originX: 'center',
+    originY: 'center'
+  },
+  topSpaceHeight: 10, // templateData.top.spaceHeight
+  topSpaceGridNumber: 3, // templateData.top.xScalevalue.spaceGridNumber
+  leftSpaceGridNumber: 2, // templateData.left.leftYScalevalue.spaceGridNumber
+  rightSpaceGridNumber: 2, // templateData.right.rightYScalevalue.spaceGridNumber
+  topTotal: {
+    title: '总量',
+    width: 0,
+    style: {
+      fontFamily: '微软雅黑',
+      fontSize: 12,
+      fill: '#000',
+      lineHeight: 1
+    }
+  },
+  criticalStyle: { // 危急值样式
+    stroke: 'purple', // 颜色 默认 #999
+    strokeWidth: 1, // 线宽 默认 1
+    strokeDashArray: [0, 0] // 实线设置 默认[0, 0]
+  },
+  bottomNumberLeftSpace: 10 // 底部标记的序号与标记之间的距离
+};
+
+export default data;

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

@@ -47,27 +47,7 @@ export default {
       return this.linesObj?.eventStyle || { selectable: true, evented: true };
     }
   },
-
-  watch: {
-    // linesObj: {
-    //   handler(value) {
-    //     if (value) {
-    //       if (this.lines.length) {
-    //         this.removeLines();
-    //       }
-    //       this.getLineList(this.linesObj.list);
-    //       this.createLine();
-    //     }
-    //   },
-    //   deep: true
-    // },
-  },
-
-  mounted() {
-    this.$nextTick(() => {
-      this.init();
-    });
-  },
+  mounted() {},
 
   methods: {
     init() {
@@ -394,7 +374,7 @@ export default {
           this.lineMoveLimit(line);
           this.lineMoveUpdateLine(line);
           this.textUpdatePositionX(line);
-          this.canvas.renderAll();
+          // this.canvas.renderAll();
           this.showDrapPopup(line);
         });
         line.on('moved', () => {

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) {
@@ -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);
 
@@ -429,7 +426,7 @@ export default {
         lines.push(line, text);
       }
       this.canvas.add(...lines);
-      this.canvas.renderAll();
+      // this.canvas.renderAll();
     },
     /**
      * 绘制一条折线
@@ -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中对应的坐标
@@ -614,8 +611,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 +639,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 +662,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 +675,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 +689,14 @@ export default {
 
         const checkPoints = () => {
           const PointLens = Math.floor((left - originLeft) / spaceWidth);
-          if (PointLens > 1 && this.addPointList?.length < PointLens) {
+          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(v => Math.abs(v.left - curLeft) <= 0.0001);
+                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 +706,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 +728,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 +838,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;
@@ -437,17 +447,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

@@ -115,7 +115,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';