cnhis-design-vue 2.1.14 → 2.1.17

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

@@ -1,43 +1,22 @@
 <template>
-  <div class="c-fabric-chart" :style="{'width': canvasWidth}">
-    <component
-      ref="canvasEle"
-      :is="`FabricCanvas${templateData.type || ''}`"
-      :id="id"
-      :templateData="templateData"
-      v-if="rendercanvas"
-    >
+  <div class="c-fabric-chart" :style="{ width: canvasWidth }">
+    <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>
+        <fabric-center2 :other="templateData.other" :polyline="templateData.left.leftYScalevalue" v-on="$listeners" @pointOperation="pointOperation"></fabric-center2>
       </template>
 
       <template v-else>
-        <fabric-text-group
-          v-if="hasXScalevalue"
-          :templateData="templateData"
-          v-on="$listeners"
-        ></fabric-text-group>
+        <fabric-text-group v-if="hasXScalevalue" :templateData="templateData" v-on="$listeners"></fabric-text-group>
         <fabric-grid></fabric-grid>
         <fabric-scale-value v-if="hasTable" :templateData="templateData"></fabric-scale-value>
         <fabric-lines v-if="hasTopTable" ref="lines" :linesObj="templateData.top" v-on="$listeners"></fabric-lines>
-        <fabric-polylines ref="polylines"
-          v-if="hasTable"
-          :polyline="polylines"
-          :other="templateData.left.other || {}"
-          @pointOperation="pointOperation"
-          v-on="$listeners"></fabric-polylines>
+        <fabric-polylines ref="polylines" v-if="hasTable" :polyline="polylines" :other="templateData.left.other || {}" @pointOperation="pointOperation" v-on="$listeners"></fabric-polylines>
       </template>
-      
     </component>
   </div>
 </template>
@@ -74,7 +53,7 @@ export default create({
     templateData: {
       type: Object,
       required: true
-    },
+    }
   },
   components: {
     FabricCanvas,
@@ -109,17 +88,17 @@ export default create({
     hasTable() {
       const hasLeft = this.templateData.left?.leftYScalevalue?.list?.length > 0;
       const hasRight = this.templateData.right?.rightYScalevalue?.list?.length > 0;
-      return this.hasXScalevalue && hasLeft && hasRight;
+      return this.hasXScalevalue && (hasLeft || hasRight);
     },
     hasXScalevalue() {
       return this.templateData.top?.xScalevalue?.list?.length > 0;
-    },
+    }
   },
   data() {
     return {
       rendercanvas: true,
       canvasWidth: 0
-    }
+    };
   },
   mounted() {
     this.canvasWidth = `${this.templateData.canvasWidth}px` || '1000px';
@@ -159,21 +138,21 @@ export default create({
       // 在组件移除后，重新渲染组件
       // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
       this.$nextTick(() => {
-          this.rendercanvas = true;
-      })
+        this.rendercanvas = true;
+      });
       // this.$refs.canvasEle.renderCanvas();
     },
     removeSelectArea() {
       this.$nextTick(() => {
         this.$refs.polylines.removeSelectArea();
-      })
+      });
     }
   }
 });
 </script>
 
 <style lang="less" scoped>
-  .c-fabric-chart {
-    position: relative;
-  }
+.c-fabric-chart {
+  position: relative;
+}
 </style>

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

@@ -82,9 +82,10 @@ export default {
         console.warn(error);
       }
     }
-    if (!this.templateData.left || !this.templateData.right) {
+    // if (!this.templateData.left || !this.templateData.right) {
+    if (!this.templateData.left) {
       try {
-        throw new Error('缺少左/右侧数据对象, 无法生成垂直方向刻度');
+        throw new Error('缺少左侧数据对象, 无法生成垂直方向刻度');
       } catch (error) {
         console.warn(error);
       }
@@ -133,7 +134,7 @@ export default {
     endX() {
       // 网格区域水平方向最大坐标值, 也是整个画布右侧列表坐标起始值，网格右下角x轴坐标值
       if (!this.templateData.right && !this.topTotal) return this.templateData.canvasWidth;
-      return this.templateData.canvasWidth - (this.templateData.right?.width || 20) - this.topTotal.width;
+      return this.templateData.canvasWidth - (this.templateData.right?.width ?? 20) - this.topTotal.width;
     },
     endY() {
       // 画布高度 - 底部列表高度 ，网格右下角y轴坐标值

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

@@ -65,7 +65,6 @@ export default {
         });
         return cur;
       }, '');
-      console.log(textList);
       const group = new this.fabric.Group([...textList], {
         evented: false,
         selectable: false
@@ -74,6 +73,7 @@ export default {
       this.canvas.sendBackwards(group);
     },
     rightScaleValue(obj) {
+      if (!obj) return;
       const spaceGridNumber = obj.rightYScalevalue.spaceGridNumber || 2;
       const marginLeft = obj.rightYScalevalue.marginLeft || 3;
       const originX = this.propItems.endX + marginLeft;
@@ -95,13 +95,15 @@ export default {
       this.canvas.sendBackwards(group);
     },
     leftScaleValue(obj) {
+      const { endY, yCellHeight } = this.propItems;
       const spaceGridNumber = obj.leftYScalevalue.spaceGridNumber || 2;
-      const marginRight = obj.leftYScalevalue.marginRight || 3;
+      const [titleMarginRight, titleMarginButton] = obj.leftYScalevalue?.titleMargin || [5, 30];
+      const listMarginRight = obj.leftYScalevalue.listMarginRight || 3;
       const style = obj.leftYScalevalue.style || {};
-      const originX = this.propItems.originX - marginRight;
+      const originX = this.propItems.originX;
       let textList = [];
       obj.leftYScalevalue.list.forEach((item, index) => {
-        textList.push(this.createText(item, originX, this.propItems.endY - index * this.propItems.yCellHeight * spaceGridNumber, 'right', style));
+        textList.push(this.createText(item, originX - listMarginRight, endY - index * yCellHeight * spaceGridNumber, 'right', style));
       });
 
       // 添加标题和单位
@@ -109,8 +111,8 @@ export default {
       txt = obj.leftYScalevalue.name || '';
       if (obj.leftYScalevalue.unit) txt += '\n' + obj.leftYScalevalue.unit;
       if (txt) {
-        const top = this.propItems.endY - obj.leftYScalevalue.list.length * this.propItems.yCellHeight * spaceGridNumber;
-        textList.push(this.createText(txt, originX, top, 'right', { ...style, textAlign: 'right', originY: 'bottom' }));
+        const top = endY - (obj.leftYScalevalue.list.length - 1) * yCellHeight * spaceGridNumber - titleMarginButton;
+        textList.push(this.createText(txt, originX - titleMarginRight, top, 'right', { ...style, textAlign: 'right', originY: 'bottom' }));
       }
       const group = new this.fabric.Group([...textList], {
         evented: false,

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

@@ -335,28 +335,17 @@ export default {
       // textList.push(title);
       const baseY = endY + 2; // 目前固定10像素的下边距
       const baseYLimit = endY - 2; // 目前固定10像素的上边距
-      const lineHeight = (obj.iconStyle?.height && obj.iconStyle.height + 2) || 14; // 标志点的line-height值
+      const lineHeightText = (obj.style?.fontSize || 12) + 2;
+      const lineHeightImg = (obj.iconStyle?.height || 12) + 2;
+      const lineHeightSeq = (obj.seqStyle?.circle?.radius || 9) * 2 + 2;
       obj.list.forEach((item, index) => {
         let limitIndex = -1; // 标志点是否往上排列的标志，大于-1则表示需要往上排列
         let y = baseY;
         const x = this.cumputedX(item[0]);
         if (this.isLimit(item[0])) {
           item[1].forEach(async (v, i) => {
-            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;
-            }
             const common = {
               left: x,
-              top: y,
               originX: 'center',
               originY: 'center',
               data: v.data || {},
@@ -365,6 +354,21 @@ 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,
@@ -379,6 +383,7 @@ export default {
               this.canvas.requestRenderAll();
             };
             if (this.isObject(v) && !v.value) {
+              setTop(lineHeightImg);
               const option = Object.assign({}, obj.iconStyle || {}, v || {}, {
                 ...common,
                 ...eventStyle
@@ -394,6 +399,7 @@ export default {
               addCanvas(img);
             } else if (v.value) {
               if (v.seq) {
+                setTop(lineHeightSeq);
                 // 标记增加序号
                 const circle = await this.createPoint('circle', {
                   ...common,
@@ -415,6 +421,7 @@ export default {
                 });
                 addCanvas(group);
               } else {
+                setTop(lineHeightText);
                 const text = new this.fabric.Text(String(v.value), {
                   ...defaultVaule.textStyle,
                   ...obj.style,